/* Загальні стилі в стилі AWS Console */

:root {

  --primary-bg: #232f3e;       /* Темно-синій фон як в AWS */

  --secondary-bg: #1a232e;     /* Ще темніший фон для панелей */

  --content-bg: #0f1319;       /* Фон для основного контенту */

  --card-bg: #1b2530;          /* Фон для карток */

  --active-bg: #2e3f50;        /* Фон для активних елементів */

  --hover-bg: #344860;         /* Фон при наведенні */



  --primary-text: #ffffff;     /* Основний текст - білий */

  --secondary-text: #d5dbdb;   /* Другорядний текст - світло-сірий */

  --muted-text: #8c9294;       /* Приглушений текст */

  

  --accent-color: #ff9900;     /* Акцентний колір AWS */

  --highlight-color: #ec7211;  /* Колір виділення */

  --success-color: #1d8102;    /* Зелений для успіху */

  --warning-color: #d13212;    /* Червоний для попереджень */

  

  --border-color: #3c4c5a;     /* Колір рамок */

  --separator: #3c4c5a;        /* Колір розділювачів */

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: 'Roboto', 'Arial', sans-serif;

  font-size: 12px;

  line-height: 1.4;

  color: var(--primary-text);

  background-color: var(--content-bg);

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.container {

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 15px;

}



a {

  color: var(--accent-color);

  text-decoration: none;

}



a:hover {

  text-decoration: underline;

}



/* Заголовок */

.dashboard-header {

  background-color: var(--primary-bg);

  border-bottom: 1px solid var(--border-color);

  padding: 8px 0;

}



.dashboard-header .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo a {

  font-size: 16px;

  font-weight: bold;

  color: var(--primary-text);

  text-decoration: none;

}



.main-nav ul {

  display: flex;

  list-style: none;

}



.main-nav li {

  margin-left: 16px;

}



.main-nav a {

  color: var(--secondary-text);

  text-decoration: none;

  padding: 4px 8px;

  border-radius: 2px;

  transition: background-color 0.2s, color 0.2s;

}



.main-nav a:hover,

.main-nav a.active {

  background-color: var(--hover-bg);

  color: var(--primary-text);

  text-decoration: none;

}



.user-menu {

  position: relative;

}



.user-profile {

  display: flex;

  align-items: center;

  cursor: pointer;

  color: var(--secondary-text);

  padding: 4px 8px;

  border-radius: 2px;

}



.user-profile:hover {

  background-color: var(--hover-bg);

  color: var(--primary-text);

}



.user-profile img {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  margin-right: 6px;

  background-color: var(--accent-color);

}



.dropdown-menu {

  position: absolute;

  top: 100%;

  right: 0;

  background-color: var(--secondary-bg);

  border-radius: 2px;

  border: 1px solid var(--border-color);

  width: 120px;

  z-index: 10;

  display: none;

  margin-top: 4px;

}



.dropdown-menu a {

  display: block;

  padding: 6px 12px;

  color: var(--secondary-text);

  transition: background-color 0.2s, color 0.2s;

}



.dropdown-menu a:hover {

  background-color: var(--hover-bg);

  color: var(--primary-text);

  text-decoration: none;

}



.user-profile:hover + .dropdown-menu,

.dropdown-menu:hover {

  display: block;

}



/* Основний контент */

.dashboard-content {

  flex: 1;

  padding: 16px 0;

}



.page-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--border-color);

}



.page-header h1 {

  font-size: 18px;

  font-weight: 500;

  color: var(--primary-text);

}



/* Сітка проектів */

.projects-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 12px;

}



.project-card {

  background-color: var(--card-bg);

  border-radius: 2px;

  border: 1px solid var(--border-color);

  overflow: hidden;

  transition: transform 0.2s, box-shadow 0.2s;

}



.project-card:hover {

  background-color: var(--active-bg);

  transform: translateY(-2px);

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}



.project-info {

  padding: 12px;

  border-bottom: 1px solid var(--separator);

}



.project-title {

  font-size: 14px;

  font-weight: 500;

  margin-bottom: 4px;

  color: var(--accent-color);

}



.project-meta {

  display: flex;

  align-items: center;

  margin-bottom: 4px;

}



.status {

  display: inline-block;

  padding: 2px 6px;

  border-radius: 2px;

  font-size: 10px;

  margin-right: 8px;

}



.status.active {

  background-color: var(--success-color);

  color: white;

}



.status.inactive {

  background-color: var(--muted-text);

  color: var(--content-bg);

}



.views {

  font-size: 10px;

  color: var(--muted-text);

}



.project-dates {

  display: flex;

  justify-content: space-between;

  font-size: 10px;

  color: var(--muted-text);

  margin-bottom: 4px;

}



.project-description {

  font-size: 11px;

  color: var(--secondary-text);

  margin-top: 4px;

  height: 2.8em;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}



.project-actions {

  padding: 8px 12px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 4px;

  background-color: var(--secondary-bg);

}



/* Кнопки */

.btn {

  display: inline-block;

  padding: 4px 8px;

  border-radius: 2px;

  font-size: 11px;

  font-weight: 500;

  text-align: center;

  text-decoration: none;

  cursor: pointer;

  transition: background-color 0.2s, transform 0.1s;

  border: none;

}



.btn:hover {

  transform: translateY(-1px);

}



.btn:active {

  transform: translateY(0);

}



.btn-primary {

  background-color: var(--accent-color);

  color: var(--content-bg);

}



.btn-primary:hover {

  background-color: var(--highlight-color);

  text-decoration: none;

}



.btn-secondary {

  background-color: var(--active-bg);

  color: var(--primary-text);

}



.btn-secondary:hover {

  background-color: var(--hover-bg);

  text-decoration: none;

}



.btn-danger {

  background-color: var(--warning-color);

  color: white;

}



.btn-danger:hover {

  background-color: #b12d0f;

  text-decoration: none;

}



.btn-success {

  background-color: var(--success-color);

  color: white;

}



.btn-success:hover {

  background-color: #166b01;

  text-decoration: none;

}



.btn-warning {

  background-color: #df9700;

  color: var(--content-bg);

}



.btn-warning:hover {

  background-color: #c78500;

  text-decoration: none;

}



/* Пусті проекти і повідомлення про помилки */

.empty-projects, .error-message {

  grid-column: 1 / -1;

  background-color: var(--card-bg);

  border-radius: 2px;

  border: 1px solid var(--border-color);

  padding: 20px;

  text-align: center;

}



.empty-projects p, .error-message p {

  font-size: 12px;

  color: var(--secondary-text);

  margin-bottom: 12px;

}



.error-message p {

  color: var(--warning-color);

}



.loading {

  grid-column: 1 / -1;

  text-align: center;

  padding: 20px;

  color: var(--muted-text);

  font-size: 12px;

}



/* Підвал */

.dashboard-footer {

  background-color: var(--primary-bg);

  color: var(--muted-text);

  padding: 12px 0;

  margin-top: 20px;

  font-size: 11px;

  border-top: 1px solid var(--border-color);

}



/* Форми */

.form-group {

  margin-bottom: 12px;

}



label {

  display: block;

  margin-bottom: 4px;

  font-weight: 500;

  font-size: 11px;

}



input[type="text"],

input[type="email"],

input[type="password"],

textarea,

select {

  width: 100%;

  padding: 6px 8px;

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  border-radius: 2px;

  font-size: 11px;

  color: var(--primary-text);

  transition: border-color 0.2s;

}



input[type="text"]:focus,

input[type="email"]:focus,

input[type="password"]:focus,

textarea:focus,

select:focus {

  outline: none;

  border-color: var(--accent-color);

}



textarea {

  min-height: 80px;

  resize: vertical;

}



/* Таблиці */

table {

  width: 100%;

  border-collapse: collapse;

  font-size: 11px;

}



th, td {

  padding: 6px 8px;

  text-align: left;

  border-bottom: 1px solid var(--border-color);

}



th {

  font-weight: 500;

  color: var(--primary-text);

  background-color: var(--secondary-bg);

}



tbody tr {

  transition: background-color 0.2s;

}



tbody tr:hover {

  background-color: var(--active-bg);

}



/* Адаптивність */

@media (max-width: 768px) {

  .projects-grid {

    grid-template-columns: 1fr;

  }

  

  .page-header {

    flex-direction: column;

    align-items: flex-start;

  }

  

  .page-header h1 {

    margin-bottom: 8px;

  }

  

  .project-actions {

    flex-direction: column;

  }

  

  .project-actions .btn {

    width: 100%;

    margin-bottom: 4px;

  }

  

  .main-nav ul {

    flex-direction: column;

  }

  

  .main-nav li {

    margin: 4px 0;

  }

}


/* Стилі для форми створення проекту */

.creation-form {

  background-color: var(--card-bg);

  border-radius: 2px;

  border: 1px solid var(--border-color);

  padding: 16px;

  margin-bottom: 20px;

}



.form-section {

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--border-color);

}



.form-section:last-child {

  border-bottom: none;

}



.form-section h2 {

  font-size: 14px;

  font-weight: 500;

  margin-bottom: 12px;

  color: var(--accent-color);

}



.form-row {

  display: flex;

  gap: 16px;

  margin-bottom: 8px;

}



.form-row .form-group {

  flex: 1;

}



.slider-group label {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.value-display {

  font-weight: normal;

  color: var(--accent-color);

}



.range-description {

  font-size: 10px;

  color: var(--muted-text);

  margin-top: 2px;

}



.checkbox-label {

  display: flex;

  align-items: center;

  cursor: pointer;

}



.checkbox-label input {

  margin-right: 6px;

  width: auto;

}



.form-actions {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 20px;

}



input[type="date"] {

  color-scheme: dark;

}



/* Медіа-запити для адаптивності */

@media (max-width: 768px) {

  .form-row {

    flex-direction: column;

    gap: 8px;

  }

}


/* Стилі для сторінки редагування проекту */

.header-actions {

  display: flex;

  gap: 8px;

}



/* Стилі для вкладок */

.edit-tabs {

  background-color: var(--card-bg);

  border-radius: 2px;

  border: 1px solid var(--border-color);

  margin-bottom: 20px;

}



.tab-navigation {

  display: flex;

  border-bottom: 1px solid var(--border-color);

  background-color: var(--secondary-bg);

}



.tab-btn {

  padding: 10px 16px;

  background: none;

  border: none;

  color: var(--secondary-text);

  font-size: 11px;

  cursor: pointer;

  transition: background-color 0.2s, color 0.2s;

  border-right: 1px solid var(--border-color);

}



.tab-btn:hover {

  background-color: var(--hover-bg);

  color: var(--primary-text);

}



.tab-btn.active {

  background-color: var(--active-bg);

  color: var(--accent-color);

  font-weight: 500;

}



.tab-content {

  padding: 16px;

}



.tab-pane {

  display: none;

}



.tab-pane.active {

  display: block;

}



/* Стилі для секції модулів */

.modules-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

}



.modules-header h2 {

  font-size: 14px;

  font-weight: 500;

  color: var(--accent-color);

}



.modules-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 12px;

}



.module-item {

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  border-radius: 2px;

  overflow: hidden;

}



.module-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 12px;

  background-color: var(--primary-bg);

  border-bottom: 1px solid var(--border-color);

}



.module-header h3 {

  font-size: 12px;

  font-weight: 500;

  color: var(--primary-text);

  margin: 0;

}



.module-type {

  font-size: 10px;

  padding: 2px 6px;

  border-radius: 2px;

}



.module-type.video {

  background-color: #2980b9;

  color: white;

}



.module-type.3d {

  background-color: #8e44ad;

  color: white;

}



.module-content {

  padding: 12px;

  display: flex;

  gap: 12px;

}



.module-preview {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100px;

}



.target-preview {

  width: 100%;

  height: 60px;

  object-fit: cover;

  background-color: var(--content-bg);

  border: 1px solid var(--border-color);

}



.content-preview {

  width: 100%;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--content-bg);

  border: 1px solid var(--border-color);

  font-size: 10px;

  color: var(--muted-text);

}



.content-preview.video {

  background-color: rgba(41, 128, 185, 0.1);

}



.content-preview.3d {

  background-color: rgba(142, 68, 173, 0.1);

}



.module-info {

  flex-grow: 1;

}



.info-item {

  font-size: 10px;

  margin-bottom: 4px;

  display: flex;

}



.info-label {

  font-weight: 500;

  width: 70px;

  color: var(--secondary-text);

}



.info-value {

  color: var(--muted-text);

}



.module-actions {

  padding: 8px 12px;

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  background-color: var(--active-bg);

  border-top: 1px solid var(--border-color);

}



.no-modules-message {

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  border-radius: 2px;

  padding: 24px;

  text-align: center;

}



.no-modules-message p {

  margin-bottom: 12px;

  color: var(--muted-text);

}



.loading-placeholder {

  padding: 16px;

  text-align: center;

  color: var(--muted-text);

}



/* Стилі для попереднього перегляду */

.preview-container {

  padding: 16px;

}



.preview-container h2 {

  font-size: 14px;

  font-weight: 500;

  color: var(--accent-color);

  margin-bottom: 16px;

}



.preview-frame {

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  border-radius: 2px;

  height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 16px;

}



.preview-placeholder {

  color: var(--muted-text);

  text-align: center;

  padding: 24px;

}



.preview-iframe {

  width: 100%;

  height: 100%;

  border: none;

}



.preview-actions {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

}



/* Стилі для секції публікації */

.publish-container {

  padding: 16px;

}



.publish-container h2, .publish-container h3 {

  font-size: 14px;

  font-weight: 500;

  color: var(--accent-color);

  margin-bottom: 12px;

}



.publish-container h3 {

  font-size: 12px;

  margin-top: 24px;

}



.publish-status {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  border-radius: 2px;

  padding: 12px;

}



.status-box {

  font-size: 11px;

}



.status-label {

  font-weight: 500;

  color: var(--secondary-text);

}



.status-value {

  color: var(--muted-text);

  margin-left: 6px;

}



.url-display {

  display: flex;

  gap: 8px;

}



.url-display input {

  flex-grow: 1;

}



.qr-container {

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  border-radius: 2px;

  width: 200px;

  height: 200px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 12px;

}



.qr-placeholder {

  color: var(--muted-text);

  text-align: center;

  padding: 24px;

  font-size: 11px;

}



.qr-actions {

  display: flex;

  gap: 8px;

}



/* Адаптивність для вкладок на малих екранах */

@media (max-width: 768px) {

  .tab-navigation {

    flex-wrap: wrap;

  }

  

  .tab-btn {

    flex: 1 0 auto;

    text-align: center;

    border-bottom: 1px solid var(--border-color);

  }

  

  .module-content {

    flex-direction: column;

  }

  

  .module-preview {

    display: flex;

    flex-direction: row;

    width: 100%;

  }

  

  .target-preview, .content-preview {

    width: 50%;

  }

}


/* Стилі для модального вікна */

.modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1000;

}



.modal.active {

  display: block;

}



.modal-backdrop {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

}



.modal-container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 90%;

  max-width: 800px;

  max-height: 90vh;

  background-color: var(--card-bg);

  border-radius: 2px;

  border: 1px solid var(--border-color);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 16px;

  background-color: var(--primary-bg);

  border-bottom: 1px solid var(--border-color);

}



.modal-header h2 {

  font-size: 16px;

  font-weight: 500;

  color: var(--accent-color);

  margin: 0;

}



.close-modal-btn {

  background: none;

  border: none;

  color: var(--muted-text);

  font-size: 20px;

  cursor: pointer;

  padding: 0;

  width: 24px;

  height: 24px;

  line-height: 24px;

  text-align: center;

}



.close-modal-btn:hover {

  color: var(--primary-text);

}



.modal-content {

  padding: 16px;

  overflow-y: auto;

  max-height: calc(90vh - 60px);

}



/* Стилі для завантаження файлів */

.upload-container {

  display: flex;

  gap: 16px;

  margin-bottom: 16px;

}



.upload-preview {

  width: 120px;

  height: 120px;

  background-color: var(--secondary-bg);

  border: 1px solid var(--border-color);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.upload-preview img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}



.mind-icon {

  font-family: monospace;

  font-size: 16px;

  font-weight: bold;

  padding: 8px 12px;

  background-color: var(--active-bg);

  color: var(--accent-color);

  border-radius: 2px;

}



.content-placeholder {

  color: var(--muted-text);

  font-size: 11px;

}



.upload-controls {

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.upload-label {

  display: inline-block;

  padding: 6px 12px;

  background-color: var(--active-bg);

  color: var(--primary-text);

  border-radius: 2px;

  cursor: pointer;

  font-size: 11px;

  text-align: center;

}



.upload-label:hover {

  background-color: var(--hover-bg);

}



.hidden-input {

  display: none;

}



.file-info {

  font-size: 11px;

  color: var(--muted-text);

}



.upload-status {

  font-size: 11px;

  height: 14px;

}



.upload-status.success {

  color: var(--success-color);

}



.upload-status.error {

  color: var(--warning-color);

}



.upload-status.progress {

  color: var(--accent-color);

}



/* Стилі для радіокнопок */

.radio-group {

  display: flex;

  gap: 16px;

}



.radio-label {

  display: flex;

  align-items: center;

  cursor: pointer;

}



.radio-label input {

  margin-right: 6px;

  width: auto;

}



/* Додаткові стилі для слайдерів у модальному вікні */

.modal .form-row {

  margin-bottom: 12px;

}



.modal h4 {

  font-size: 12px;

  font-weight: 500;

  margin: 12px 0 8px;

  color: var(--secondary-text);

}



#video-preview {

  max-width: 100%;

  max-height: 100%;

}



/* Адаптивність для модального вікна */

@media (max-width: 768px) {

  .upload-container {

    flex-direction: column;

    align-items: center;

  }

  

  .upload-controls {

    width: 100%;

  }

}



/* Стилі для QR-коду */

.project-qr {

    margin: 20px 0;

}



.qr-container {

    position: relative;

    width: 256px;

    height: 256px;

    margin: 0 auto;

    border: 1px solid rgba(100, 100, 150, 0.3);

    border-radius: 4px;

    overflow: hidden;

    background-color: white;

}



.qr-placeholder {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;

    background: #1e2334;

    color: #aaa;

}



#qr-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

    background-color: white;

}



.qr-actions {

    margin-top: 15px;

    text-align: center;

}