/* Custom styles for File Transfer - Pico CSS based */

:root {
  --pico-form-element-spacing-vertical: 0.75rem;
  --pico-form-element-spacing-horizontal: 1rem;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

main.container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

footer.container {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: 2rem;
  color: var(--pico-muted-color);
  font-size: 0.875rem;
}

/* Navbar layout */
.app-nav {
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 0.5rem 1rem;
}

.app-nav .nav-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}

.app-nav .brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pico-primary);
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.app-nav .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.app-nav .nav-links a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--pico-border-radius);
  color: var(--pico-color);
  text-decoration: none;
  font-size: 0.9rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}

/* .app-nav .nav-links a:hover {
  background: var(--pico-secondary-background);
} */

.app-nav .nav-links a.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* Smaller navigation links */
.app-nav a, .app-nav button {
  margin: 0;
  /* padding: 0.4rem 0.75rem; */
  font-size: 0.875rem;
}

.app-nav .brand {
  margin: 0;
  /* padding: 0.4rem 0; */
  width: 170px;
}
@media (max-width: 565px) {
  .app-nav .brand {
  width: 130px;
}
}

.app-nav .badge {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.app-nav .nav-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

/* Compact icon-only buttons in nav */
.button.icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

/* Tight button toolbar (admin actions) */
.flex-row-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-row-actions .button {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  margin: 0;
}

/* Grid (replacement for Bulma columns) */
.grid {
  display: grid;
  gap: 1rem;
}

.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

/* Stat cards */
.stat-card article {
  text-align: center;
  margin-bottom: 0;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.25rem 0;
  color: var(--pico-primary);
}

.stat-card .stat-label {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Upload area */
#upload-area {
  border: 2px dashed var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: #CBD0DF;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#upload-area:hover,
#upload-area.is-dragover {
  border-color: var(--pico-primary);
  background: #bfc6e1;
  color: var(--pico-primary-inverse);
}

#upload-area i {
  font-size: 3rem;
  color: var(--pico-primary);
  display: block;
  margin-bottom: 0.5rem;
}

#upload-area .upload-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.25rem 0;
}

#upload-area .upload-hint {
  color: var(--pico-muted-color);
  margin: 0;
  font-size: 0.9rem;
}

/* File list items */
.file-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  margin-bottom: 0.5rem;
  gap: 0.75rem;
}

.file-item .file-icon {
  font-size: 1.5rem;
  color: var(--pico-primary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.file-item .file-info {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 0;
}

.file-item .file-name {
  font-weight: 600;
  word-break: break-word;
  margin: 0;
}

.file-item .file-size {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin: 0;
}

.file-item .file-remove {
  cursor: pointer;
  color: rgb(159, 34, 27);
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--pico-border-radius);
  background: none;
  border: none;
}

.file-item .file-remove:hover {
  background: var(--pico-del-background);
}

/* Session result block */
.qr-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

/* .session-code-display {
  text-align: center;
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.75rem;
  background: var(--pico-secondary-background);
  border-radius: var(--pico-border-radius);
  word-break: break-all;
} */

/* Toast container */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  width: calc(100% - 2rem);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 0.875rem 1rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  -webkit-animation: slideIn 0.25s ease-out;
          animation: slideIn 0.25s ease-out;
  border-left: 4px solid var(--pico-primary);
  font-size: 0.9rem;
}

.toast.is-success { border-left-color: var(--pico-ins-color); }
.toast.is-error   { border-left-color: var(--pico-del-color); }
.toast.is-warning { border-left-color: var(--pico-contrast-hover); }
.toast.is-info    { border-left-color: var(--pico-primary); }

@-webkit-keyframes slideIn {
  from { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
  to   { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes slideIn {
  from { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
  to   { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

/* Loading spinner */
.loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--pico-muted-border-color);
  border-top-color: var(--pico-primary);
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
          animation: spin 0.8s linear infinite;
}

.loading-spinner.sm { width: 1.25rem; height: 1.25rem; border-width: 2px; }
.loading-spinner.lg { width: 3rem; height: 3rem; border-width: 4px; }

@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.875rem 0;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--pico-color);
  font-size: 1rem;
  border-bottom: solid 1px #D2D9E4;
}

.faq-question:hover { color: var(--pico-primary); }

.faq-chevron {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 1rem;
  color: var(--pico-muted-color);
}

.faq-item[open] .faq-chevron,
.faq-item.is-open .faq-chevron {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.3s ease, padding 0.3s ease;
  -o-transition: max-height 0.3s ease, padding 0.3s ease;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: var(--pico-muted-color);
  line-height: 1.6;
}

.faq-item.is-open .faq-answer {
  max-height: 500px;
  padding-bottom: 1rem;
}

/* Utility */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--pico-muted-color); }
.text-primary { color: var(--pico-primary); }
.text-bold   { font-weight: 700; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.flex   { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

.w-full { width: 100%; }

/* Card header overrides for art-direction */
/* article > header,
article.card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.875rem 1rem;
  background: var(--pico-secondary-background);
  border-bottom: 1px solid var(--pico-muted-border-color);
} */

article > header.primary,
article.card-header.is-primary {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* Compact form layout when paired with grid */
.compact-form label { font-weight: 500; }

/* Small badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--pico-secondary-background);
  color: var(--pico-color);
}

.badge.primary { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.badge.success { background: var(--pico-ins-background); color: var(--pico-ins-color); }
.badge.warning { background: var(--pico-contrast-background); color: var(--pico-contrast-hover); }
.badge.danger  { background: var(--pico-del-background); color: var(--pico-del-color); }

/* Auth layout */
.auth-card {
  max-width: 28rem;
  margin: 3rem auto;
}

/* Helper class to hide elements */
[hidden] { display: none !important; }

/* Card variants (status colors) */
article > .info,
article.info,
.card.info {
  background: var(--pico-card-background-color);
  color: var(--pico-primary-inverse);
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

article > .success,
article.success,
.card.success {
  background: var(--pico-ins-background);
  color: var(--pico-ins-color);
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

article > .warning,
article.warning,
.card.warning {
  background: #cfd8ec;
  color: #4a4e5a;
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

article > .danger,
article.danger,
.card.danger {
  background: var(--pico-del-background);
  color: var(--pico-del-color);
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}
article > .danger,
article.danger,
.card.danger p {color: var(--pico-del-color)}
/* Dialog (used for modals in Pico) */
dialog article {
  width: min(560px, 100%);
}

/* Tables */
table.striped tbody tr:nth-of-type(odd) {
  background: var(--pico-card-background-color);
}

table .text-center,
.text-center {
  text-align: center;
}

table th, table td {
  vertical-align: middle;
}

.website {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   ПОЛНАЯ КАСТОМИЗАЦИЯ ВСЕХ КОМПОНЕНТОВ PICO.CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОТАЛЬНАЯ ТЁМНАЯ ТЕМА (Deep Vault)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  /* Базовые цвета */
  --pico-background-color: #0D1117;
  --pico-card-background-color: #1C1E24;
  --pico-color: #98A2B3;
  --pico-heading-color: #FFFFFF;
  --pico-border-color: #4A4E5A;
  --pico-del-color: rgb(138, 29, 24);
  --pico-ins-color: rgb(17, 177, 131);

  /* Главный интерактивный цвет (Синий) */
  --pico-primary: #6C5ce7;
  --pico-primary-background: #6C5ce7;
  --pico-primary-border: #6C5ce7;
  --pico-primary-hover: #3656D6;
  --pico-primary-hover-background: #3656D6;
  --pico-primary-hover-border: #3656D6;
  --pico-primary-inverse: #FFFFFF;
  --pico-primary-focus: rgba(76, 111, 255, 0.35);

  /* Элементы форм (input, textarea, select) */
  --pico-form-element-background-color: #1C1E24;
  --pico-form-element-border-color: #4A4E5A;
  --pico-form-element-color: #98A2B3;
  --pico-form-element-active-background-color: #0D1117;
  --pico-form-element-active-border-color: #6C5ce7;
  --pico-form-element-focus-color: rgba(76, 111, 255, 0.35);

  /* Таблицы (table) */
  --pico-table-border-color: #4A4E5A;
  --pico-table-row-stripped-background-color: rgba(28, 30, 36, 0.5);

  /* Специфично для диалогов (dialog) */
  --pico-modal-overlay-background-color: rgba(13, 17, 23, 0.8);
}

/* --------------------------------------------------------------------------
   2. ТОТАЛЬНАЯ СВЕТЛАЯ ТЕМА (Light Lab)
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  /* Базовые цвета */
  --pico-background-color: #F4F7FB;
  --pico-card-background-color: #E8EDF5;
  --pico-color: #4A4E5A;
  --pico-heading-color: #1C1E24;
  --pico-border-color: #D2D9E4;
  --pico-del-color: rgb(159, 34, 27);
  --pico-ins-color: rgb(17, 177, 131);

  /* Главный интерактивный цвет (Насыщенный синий) */
  --pico-primary: #6C5ce7;
  --pico-primary-background: #6C5ce7;
  --pico-primary-border: #6C5ce7;
  --pico-primary-hover: #3656D6;
  --pico-primary-hover-background: #3656D6;
  --pico-primary-hover-border: #3656D6;
  --pico-primary-inverse: #FFFFFF;
  --pico-primary-focus: rgba(45, 91, 255, 0.25);

  /* Элементы форм (input, textarea, select) */
  --pico-form-element-background-color: #FFFFFF;
  --pico-form-element-border-color: #D2D9E4;
  --pico-form-element-color: #4A4E5A;
  --pico-form-element-active-background-color: #F4F7FB;
  --pico-form-element-active-border-color: #6C5ce7;
  --pico-form-element-focus-color: rgba(45, 91, 255, 0.25);

  /* Таблицы (table) */
  --pico-table-border-color: #D2D9E4;
  --pico-table-row-stripped-background-color: rgba(232, 237, 245, 0.5);

  /* Специфично для диалогов (dialog) */
  --pico-modal-overlay-background-color: rgba(244, 247, 251, 0.8);
}


/* ==========================================================================
   3. ПРЯМОЕ НАЗНАЧЕНИЕ СТИЛЕЙ ДЛЯ ТЕГОВ (Жесткий сброс)
   ========================================================================== */

/* Глобальные контейнеры */
body {
  background-color: var(--pico-background-color) !important;
  color: var(--pico-color) !important;
}

/* Ссылки (a) */
a {
  color: var(--pico-primary);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--pico-primary-hover);
}

/* Статьи и карточки (article) */
article {
  background-color: var(--pico-card-background-color) !important;
  border: 1px solid var(--pico-border-color);
}

/* Кнопки (button, input[type="button"]) */
button, 
input[type="submit"], 
input[type="button"],
.button {
  background-color: var(--pico-primary-background) !important;
  border-color: var(--pico-primary-border) !important;
  color: var(--pico-primary-inverse) !important;
}
button:hover, button:focus,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--pico-primary-hover-background) !important;
  border-color: var(--pico-primary-hover-border) !important;
}

/* Кнопки с классом .secondary (как ваши контакты и переключатель) */
button.secondary.outline,
a.secondary.outline {
  color: var(--pico-color) !important;
  border-color: var(--pico-border-color) !important;
  background: transparent !important;
}
button.secondary.outline:hover,
a.secondary.outline:hover {
  /* background-color: var(--pico-card-background-color) !important; */
  border-color: var(--pico-primary) !important;
  color: var(--pico-primary-hover) !important;
}

/* Поля ввода (input, textarea, select) */
input:not([type="submit"]):not([type="button"]), 
textarea, 
select {
  background-color: var(--pico-form-element-background-color) !important;
  border-color: var(--pico-form-element-border-color) !important;
  color: var(--pico-form-element-color) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--pico-form-element-active-border-color) !important;
  -webkit-box-shadow: 0 0 0 3px var(--pico-form-element-focus-color) !important;
          box-shadow: 0 0 0 3px var(--pico-form-element-focus-color) !important;
}

/* Таблицы (table) */
table th, table td {
  border-bottom-color: var(--pico-table-border-color) !important;
}
table tbody tr:nth-child(even) {
  background-color: var(--pico-table-row-stripped-background-color) !important;
}

/* Модальные окна (dialog) */
dialog {
  background-color: var(--pico-modal-overlay-background-color) !important;
}
dialog article {
  background-color: var(--pico-card-background-color) !important;
  border-color: var(--pico-border-color) !important;
}

/* Полоса прогресса (progress) */
progress {
  color: var(--pico-primary) !important; /* Для старых браузеров */
}
progress::-webkit-progress-value {
  background-color: var(--pico-primary) !important;
}
progress::-moz-progress-bar {
  background-color: var(--pico-primary) !important;
}
progress:not([value])::-webkit-progress-bar {
  background-color: var(--pico-card-background-color) !important;
}

#session-code{
  display: none;
}
.fas{
  margin-right: 10px;
}
button .fas{
  margin-right: 0px;
}

.top-img{
  margin-bottom: 50px;
  border-radius: .625rem;
}

footer img{
  width: 170px;
}
@media (max-width: 565px) {
  footer img{
  width: 130px;
}
}
footer .footer-wrap{
  max-width: 720px;
  margin: 3rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
footer .footer-wrap span{
  text-align: left;
}
@media (max-width: 565px){
  footer .footer-wrap span{
    width: 47%;
}
}