* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif;
  margin: 0 auto;
  max-width: 1080px;
  padding: 20px;
  background: #f4f6f8;
  color: #222;
}
h1 { margin-top: 0; }

section {
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.auth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
}
.auth-field {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 220px;
  flex: 1 1 220px;
}
.auth-field > span {
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}
input[type="text"], input:not([type]) {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
input[type="text"]:disabled, input:not([type]):disabled {
  background: #f2f4f7;
  color: #777;
}

.hint { color: #666; font-size: 13px; margin: 10px 0 0 0; }
.hint.warn { color: #b00020; }
.msg { margin-top: 10px; font-size: 14px; }
.msg.ok { color: #0a7a2f; }
.msg.err { color: #b00020; }

.limit {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #555;
}
.limit b { color: #1e88e5; }

.selected-file {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: #0a7a2f;
}
.selected-file.err { color: #b00020; }

.upload-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.upload-row input[type="file"] { margin: 0; }

button {
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  background: #1e88e5;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
button:hover { opacity: .9; }
button.cancel { background: #e53935; }
button:disabled { opacity: .5; cursor: not-allowed; }

.progress-wrap { margin-top: 12px; }
.progress-bar {
  width: 100%; height: 14px;
  background: #e4e7eb; border-radius: 7px; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #1e88e5, #42a5f5);
  transition: width .15s linear;
}
.progress-fill.dl {
  background: linear-gradient(90deg, #2e7d32, #66bb6a);
}
.progress-fill.indeterminate {
  background: repeating-linear-gradient(
    45deg, #66bb6a, #66bb6a 10px, #2e7d32 10px, #2e7d32 20px
  );
  background-size: 200% 100%;
  animation: dl-indeterminate 1s linear infinite;
}
@keyframes dl-indeterminate {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}
.progress-info {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #555; margin-top: 4px;
}

.resume-box {
  margin-top: 12px; padding: 12px;
  border: 1px dashed #1e88e5; background: #f0f8ff; border-radius: 6px;
}
.resume-title { font-weight: 600; margin-bottom: 8px; }
.resume-list { display: flex; flex-direction: column; gap: 8px; }
.resume-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d0e3f5;
  border-radius: 6px;
  background: #f7fbff;
}
.resume-row-main { min-width: 0; }
.resume-row-name {
  font-weight: 600; font-size: 14px;
  word-break: break-all;
}
.resume-row-meta { font-size: 12px; color: #555; margin-top: 2px; }
.resume-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.resume-row-actions button { padding: 4px 10px; font-size: 13px; }

.downloads-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.download-card {
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  padding: 12px;
  background: #fafbfc;
}
.download-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 14px;
}
.download-name { font-weight: 600; word-break: break-all; }
.download-status { font-size: 12px; color: #666; }
.download-actions { margin-top: 10px; display: flex; gap: 8px; }

.panels { display: grid; grid-template-columns: 1fr; gap: 16px; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.panel-head h2 {
  margin: 0;
  font-size: 1.1em;
}
.panel-head .download-all {
  padding: 5px 12px;
  font-size: 13px;
  background: #2e7d32;
}
.panel-head .download-all:disabled {
  background: #9eb8a1;
}

.panel .table-wrap {
  overflow-x: auto;
  border: 1px solid #eef0f3;
  border-radius: 6px;
}

.files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  table-layout: fixed;
  min-width: 640px;   /* ниже этого — таблица будет скроллиться по горизонтали */
}
.files-table thead th {
  text-align: left;
  padding: 8px 10px;
  background: #f7f9fc;
  border-bottom: 1px solid #e5e9ef;
  color: #555;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.files-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.files-table tbody tr:last-child td { border-bottom: none; }
.files-table tbody tr:hover { background: #fafcff; }

/* Ширины колонок подобраны так, чтобы «Действия» всегда влезали.
   Сумма = 100%. */
.files-table col.col-name    { width: 30%; }  /* имя — самое широкое */
.files-table col.col-party   { width: 11%; }
.files-table col.col-size    { width: 10%; }
.files-table col.col-date    { width: 14%; }
.files-table col.col-expire  { width: 20%; }  /* две строки: дата + остаток */
.files-table col.col-actions { width: 15%; }  /* под кнопки и чекбокс */

/* Имя файла: длинные имена переносятся, ничего не выталкивают */
.files-table td:nth-child(1) {
  font-weight: 500;
}

/* Дата: одна строка, табличные цифры для ровных столбцов */
.files-table td:nth-child(4) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #333;
}

/* «Доступен до»: две строки — дата и остаток курсивом */
.files-table td:nth-child(5) {
  line-height: 1.25;
}
.files-table td:nth-child(5) .expire-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.files-table td:nth-child(5) .expire-left {
  font-size: 11.5px;
  color: #777;
  font-style: italic;
  white-space: nowrap;
  margin-top: 2px;
}
.files-table td:nth-child(5).expire-soon .expire-left { color: #b00020; font-style: normal; font-weight: 600; }
.files-table td:nth-child(5).expire-mid  .expire-left { color: #a05a00; font-style: normal; }
.files-table td:nth-child(5).expire-inf  { color: #2e7d32; font-weight: 600; }

/* Действия: всегда влезают и не давят на соседей */
.files-table td.cell-actions {
  text-align: right;
  white-space: normal;
  vertical-align: top;
}
.files-table .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.files-table .actions button,
.files-table .actions .del-after-dl {
  white-space: nowrap;
  width: auto;
}

.files-table .actions button { padding: 5px 8px; font-size: 12.5px; }
.files-table .actions .del-after-dl {
  font-size: 12px;
  display: inline-flex;
  justify-content: flex-start;
}

.files-table button.delete { background: #e53935; }
.files-table button.download { background: #1e88e5; }

.empty {
  color: #999; font-size: 13px;
  text-align: center;
  padding: 12px 10px;
}

.badge {
  display: inline-block; font-size: 11px; padding: 1px 6px;
  border-radius: 8px; background: #fff3cd; color: #856404;
  margin-left: 6px;
}

.expire-soon { color: #b00020; font-weight: 600; }
.expire-mid { color: #a05a00; }
.expire-inf { color: #2e7d32; font-weight: 600; }

@media (max-width: 700px) {
  .panels { grid-template-columns: 1fr; }
  .files-table { font-size: 12.5px; }
  .files-table thead { display: none; }
  .files-table, .files-table tbody, .files-table tr, .files-table td {
    display: block; width: 100%;
  }
  .files-table tbody tr {
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f3;
  }
  .files-table tbody td {
    border: none; padding: 4px 0;
    display: flex; justify-content: space-between; gap: 10px;
  }
  .files-table tbody td::before {
    content: attr(data-label);
    color: #777; font-size: 12px;
    flex-shrink: 0;
  }
  .files-table td.cell-actions { justify-content: flex-end; }
}

/* Модальное окно */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  animation: modalFadeIn .12s ease-out;
}
.modal-window {
  position: relative;
  z-index: 1;
  width: min(480px, 92vw);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  animation: modalScaleIn .12s ease-out;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
}
.modal-head h3 {
  margin: 0;
  font-size: 1.05em;
  color: #b00020;
}
.modal-close {
  background: transparent;
  color: #555;
  font-size: 20px;
  padding: 0 6px;
  line-height: 1;
}
.modal-close:hover { background: #f2f4f7; }
.modal-body {
  padding: 14px 16px;
  font-size: 14px;
  color: #222;
  white-space: pre-wrap;
  word-break: break-word;
}
.modal-text { margin: 0; }
.modal-foot {
  padding: 10px 16px 14px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #eef0f3;
}
.modal-foot button {
  min-width: 80px;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalScaleIn {
  from { transform: translateY(-6px) scale(.98); opacity: .6; }
  to   { transform: none; opacity: 1; }
}

/* Кнопка «Очистить» для sys */
button.cleanup {
  background: #6a1b9a;
}

/* Инпут и сообщение об ошибке внутри модального окна */
.modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 8px;
}
.modal-input:focus {
  outline: 2px solid #1e88e5;
  outline-offset: -1px;
}
.modal-error {
  margin: 8px 0 0 0;
  color: #b00020;
  font-size: 13px;
  min-height: 16px;
}

/* Инструментальная панель sys */
.sys-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #f4f0fb;
  border: 1px solid #d8c8f0;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sys-toolbar-title {
  font-weight: 600;
  color: #4a1c8b;
  font-size: 14px;
}
.sys-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sys-toolbar .cleanup { background: #6a1b9a; }
.sys-toolbar .cancel  { background: #e53935; }

/* Инпут и сообщение об ошибке внутри модального окна */
.modal-input { /* ... */ }
.modal-error { /* ... */ }

[hidden] { display: none !important; }

/* Кнопка «Параметры» в панели sys */
.sys-toolbar .settings { background: #1976d2; }

/* Широкое модальное окно для формы параметров */
.modal-window-wide {
  width: min(640px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-window-wide .modal-body {
  overflow-y: auto;
  padding: 14px 16px;
}
.modal-window-wide .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Сетка полей параметров */
.config-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.config-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
  align-items: center;
}
.config-row label {
  font-size: 13.5px;
  color: #333;
  margin: 0;
}
.config-row label small {
  display: block;
  color: #777;
  font-size: 11.5px;
  margin-top: 2px;
}
.config-row input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.config-row input:focus {
  outline: 2px solid #1e88e5;
  outline-offset: -1px;
}
.config-row input[readonly] {
  background: #f2f4f7;
  color: #555;
}

/* Гарантированное скрытие элементов с атрибутом hidden */
[hidden] { display: none !important; }

/* Поле выбора времени жизни файла */
.ttl-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #555;
}
.ttl-field > span { white-space: nowrap; }
.ttl-field select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  background: #fff;
  cursor: pointer;
  min-width: 110px;
}
.ttl-field select:focus {
  outline: 2px solid #1e88e5;
  outline-offset: -1px;
}
.ttl-field[hidden] { display: none !important; }

/* Поле с хэшем пароля sys — только для чтения, но кликабельно */
.config-row input[data-key="sysPasswordHash"] {
  background: #f2f4f7;
  color: #555;
  cursor: pointer;
  font-style: italic;
}
.config-row input[data-key="sysPasswordHash"]:hover {
  background: #e9edf2;
}
.config-row input[data-key="sysPasswordHash"]:focus {
  outline: 2px solid #1e88e5;
  outline-offset: -1px;
}

/* Блок со ссылкой «Сменить пароль» в параметрах sys */
.config-password-link-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.config-password-link {
  color: #1e88e5;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13.5px;
  white-space: nowrap;
}
.config-password-link:hover {
  color: #1565c0;
}
.config-password-link:focus {
  outline: 2px solid #1e88e5;
  outline-offset: 2px;
  border-radius: 3px;
}
.config-password-status {
  font-size: 12px;
  color: #777;
}
.config-password-status.changed {
  color: #2e7d32;
  font-weight: 600;
}

.config-password-link-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.config-password-link {
  color: #1e88e5;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13.5px;
  white-space: nowrap;
}
.config-password-link:hover { color: #1565c0; }
.config-password-link:focus {
  outline: 2px solid #1e88e5;
  outline-offset: 2px;
  border-radius: 3px;
}
.config-password-status { font-size: 12px; color: #777; }
.config-password-status.changed { color: #2e7d32; font-weight: 600; }

/* Галочка «Удалять после скачивания» */
.del-after-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #555;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.del-after-dl input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1e88e5;
}
.del-after-dl[hidden] { display: none !important; }