/* Стили отдельных экранов, например сетки месяца.

   Повторяющиеся компоненты находятся в components.css.
*/

/* Месячный календарь. */

.cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cal-bar__title {
  flex: 1;
  text-align: center;
  font-size: var(--text-md);
  font-weight: 650;
  text-transform: capitalize;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal-head {
  padding-bottom: var(--space-1);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

/* Минимальная высота и aspect-ratio делают день удобной целью для касания.
   У пустого дня остаётся только число, без счётчика и точек.
*/
.cal-day {
  display: grid;
  gap: 2px;
  align-content: start;
  justify-items: center;
  aspect-ratio: 1;
  min-height: 42px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}
.cal-day:disabled { background: transparent; color: var(--ink-3); cursor: default; }
.cal-day--empty { background: transparent; }
.cal-day:not(:disabled):active { background: var(--surface-3); }
.cal-day.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.cal-day__num { font-size: var(--text-sm); font-weight: 600; line-height: 1.1; }
.cal-day__count {
  min-width: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}
.cal-day.is-selected .cal-day__count { background: var(--surface); }
.cal-day__dots { display: flex; gap: 2px; }
.cal-day__dots .dot { width: 5px; height: 5px; }

@media (min-width: 600px) {
  .cal-day { min-height: 62px; aspect-ratio: auto; padding: var(--space-2) 4px; }
  .cal-day__num { font-size: var(--text-md); }
}

/* Страница входа. */

/* Фон входа всегда тёмный, независимо от темы внутри приложения. */
body.login-page {
  color-scheme: dark;
  --surface: #161b23;
  --surface-sunken: #10151d;
  --ink: #e4e9f1;
  --ink-2: #b4bfce;
  --ink-3: #939fb1;
  --line: #2b3442;
  --line-strong: #394556;
  --accent: #8daee3;
  --accent-soft: #283b58;
  --sheen: rgba(255, 255, 255, 0.04);
  --tone-overdue-pure: #f08078;
  background: #0c0e12;
  color: var(--ink);
}
.login__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0c0e12;
}
.login__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.login__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 18, 0.08), rgba(12, 14, 18, 0.24));
}
.login {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 460px;
  padding: calc(var(--safe-top) + var(--space-5)) calc(var(--safe-right) + var(--space-4)) calc(var(--safe-bottom) + var(--space-5)) calc(var(--safe-left) + var(--space-4));
  margin: 0 auto;
}
.login__panel {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.36), inset 0 1px var(--sheen);
}
@media (max-height: 600px) {
  .login {
    align-content: start;
    padding-top: calc(var(--safe-top) + var(--space-4));
    padding-bottom: calc(var(--safe-bottom) + var(--space-4));
  }
}

.login__brand {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}
.login__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-row);
}
.login__mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.login__title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; }
.login__sub { color: var(--ink-3); font-size: var(--text-sm); }

.login__form { display: grid; gap: var(--space-3); }
.login__form .input {
  --login-field-ring: 0 0 0 0 transparent;
  background: var(--surface-sunken);
  caret-color: var(--ink);
  box-shadow: var(--login-field-ring);
}
.login__form .input:focus {
  --login-field-ring: 0 0 0 3px var(--accent-soft);
}
/* Браузерное автозаполнение не должно превращать поля в светлые плашки. */
.login__form .input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--surface-sunken), var(--login-field-ring);
}
.login__form .btn {
  background: linear-gradient(180deg, #416796, #355580);
  color: #f0f4fb;
  border-color: #52749f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.06);
}
.login__form .btn:active { background: #2d496e; }

@media (forced-colors: active) {
  .login__form .input:is(:autofill, :-webkit-autofill) {
    -webkit-text-fill-color: CanvasText;
    caret-color: CanvasText;
  }
  .login__form .input:focus { outline: 2px solid Highlight; }
}

.login__flash {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone-overdue-pure);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
}

.login__foot {
  color: var(--ink-3);
  font-size: var(--text-xs);
  text-align: center;
}

/* Отдельные страницы ошибки и отсутствия сети. */

.page-note {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  min-height: 100dvh;
  padding: var(--space-5);
  text-align: center;
}
.page-note__code {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.page-note p { max-width: 38ch; color: var(--ink-2); font-size: var(--text-md); }
.page-note .icon { width: 40px; height: 40px; color: var(--line-strong); }

/* Экран обзора. */

/* На телефоне главный показатель и состав периода идут друг под другом.
   На широком экране ставим их рядом.
*/
.overview-top { display: grid; gap: var(--space-4); }

@media (min-width: 900px) {
  .overview-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .overview-top > * { margin: 0; }
  .overview-top .hero { padding: var(--space-6) var(--space-5); }
}

/* В широком списке центров держим индекс и числа ближе к левому краю.
*/
@media (min-width: 900px) {
  .overview-top .card--pad { display: grid; align-content: center; }
}

/* Файловый обменник. Длинные имена и ссылки не растягивают экран телефона. */
.file-exchange__file { min-width: 0; }
.file-exchange__unfinished { min-width: 0; }
.file-exchange__unfinished .row__top { align-items: flex-start; gap: var(--space-2); }
.file-exchange__unfinished .pill { flex-shrink: 0; }
.file-exchange__unfinished .meter { max-width: none; }
.upload-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.upload-status__link { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--ink); }
.upload-status__link > .icon { flex-shrink: 0; color: var(--accent); }
.upload-status__body { min-width: 0; flex: 1; }
.upload-status__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.upload-status__percent { flex-shrink: 0; font-weight: 600; color: var(--accent); }
.upload-status__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--text-xs); }
.upload-status__metrics { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-2); }
.upload-status__detail { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.upload-status .meter { max-width: none; margin-top: var(--space-2); height: 4px; }
.upload-status .meter > i { transition: width 0.2s linear; }
.upload-status__actions { display: flex; align-items: center; gap: var(--space-1); }
.upload-status[data-waiting="true"] .meter > i { background: var(--ink-3); }
@media (max-width: 599px) {
  .upload-status { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .upload-status__link { gap: var(--space-2); }
  .upload-status__link > .icon { display: none; }
  .upload-status__actions { flex-direction: column; }
  .upload-status__actions .btn { padding-inline: var(--space-2); }
}
.file-exchange__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-md); font-weight: 600; }
.file-exchange__file .row__top { align-items: flex-start; }
.file-exchange__file .pill { flex-shrink: 0; }
.file-exchange__duration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.file-exchange__link { display: flex; gap: var(--space-2); }
.file-exchange__link .input { min-width: 0; flex: 1; }
.file-exchange__link .btn { flex-shrink: 0; }
@media (max-width: 420px) {
  .file-exchange__link { flex-direction: column; }
  .file-exchange__link .btn { align-self: flex-start; }
}

/* Подробная карточка загрузки в файловом обменнике. */
.file-exchange__upload {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  min-width: 0;
}
.file-exchange__upload-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.file-exchange__upload-heading-text { min-width: 0; }
.file-exchange__upload-phase { color: var(--accent); font-size: var(--text-xs); font-weight: 650; margin-bottom: var(--space-1); }
.file-exchange__upload-name { overflow-wrap: anywhere; font-size: var(--text-md); line-height: 1.4; }
.file-exchange__upload-percent { flex-shrink: 0; color: var(--accent); font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.file-exchange__upload-meter { height: 7px; max-width: none; }
.file-exchange__upload-meter > i { transition: width .3s ease-out; }
.file-exchange__upload-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; }
.file-exchange__upload-metric { min-width: 0; }
.file-exchange__upload-metric dt { color: var(--ink-3); font-size: var(--text-xs); margin-bottom: var(--space-1); }
.file-exchange__upload-metric dd { margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.file-exchange__upload-detail { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.file-exchange__upload[data-status="error"] .file-exchange__upload-phase,
.file-exchange__upload[data-status="error"] .file-exchange__upload-detail { color: var(--tone-overdue); }
.file-exchange__upload[data-status="done"] .file-exchange__upload-phase,
.file-exchange__upload[data-status="done"] .file-exchange__upload-percent { color: var(--tone-done); }
.file-exchange__upload[data-waiting="true"] .file-exchange__upload-phase { color: var(--tone-today); }
@media (min-width: 720px) {
  .file-exchange__upload-metrics { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .file-exchange__upload-meter > i { transition: none; }
}

/* Журнал обращений к файлам: длинные IP, имена и заголовки остаются внутри панели. */
.file-exchange__history-head { flex-wrap: wrap; gap: var(--space-2); }
.exchange-log, .exchange-log__event { min-width: 0; }
.exchange-log__filters { display: grid; gap: var(--space-3); }
.exchange-log__filters .field { min-width: 0; }
.exchange-log__list { display: grid; gap: var(--space-3); }
.exchange-log__event { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.exchange-log__headline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.exchange-log__headline .pill { white-space: normal; }
.exchange-log__name { font-size: var(--text-md); font-weight: 650; overflow-wrap: anywhere; }
.exchange-log__event p, .exchange-log__event span { overflow-wrap: anywhere; }
.exchange-log__details { min-width: 0; padding-top: var(--space-1); }
.exchange-log__details summary { padding-block: var(--space-2); color: var(--accent); cursor: pointer; font-size: var(--text-sm); }
.exchange-log__facts { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.exchange-log__facts > div { min-width: 0; }
.exchange-log__facts dt { color: var(--ink-3); margin-bottom: var(--space-1); }
.exchange-log__facts dd { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.exchange-log__empty { padding: var(--space-4) 0; text-align: center; }
@media (min-width: 720px) {
  .sheet--exchange-log { width: min(900px, calc(100vw - 48px)); max-width: 900px; }
  .exchange-log__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exchange-log__filters .btn-row { grid-column: 1 / -1; }
  .exchange-log__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Выгрузки Telegram: сведения и сообщения остаются читаемыми на узком экране. */
.tg-export { min-width: 0; }
.tg-export__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.tg-export__job-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; justify-content: space-between; }
.tg-export__job-head > div { min-width: 0; flex: 1; }
.tg-export__title { margin: 0; font-size: var(--text-md); font-weight: 650; overflow-wrap: anywhere; }
.tg-export__job p, .tg-export__message p { margin: 0; }
.tg-export__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tg-export__actions .btn { white-space: normal; }
.tg-export__progress { gap: var(--space-2); }
.tg-export__metrics, .tg-export__account { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.tg-export__metric { display: grid; gap: 2px; min-width: 0; font-size: var(--text-xs); overflow-wrap: anywhere; }
.tg-export__metric strong { color: var(--ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tg-export__bar { display: block; width: 100%; height: 7px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-3); accent-color: var(--accent); }
.tg-export__bar::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.tg-export__bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.tg-export__bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.tg-export__notice { padding: var(--space-3); border-radius: var(--radius); background: var(--surface-3); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.tg-export__preview { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.tg-export__preview .section__head { flex-wrap: wrap; gap: var(--space-2); }
.tg-export__message { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); display: grid; gap: var(--space-2); min-width: 0; }
.tg-export__message-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); overflow-wrap: anywhere; }
.tg-export__message-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6; }
.tg-export__message .row__meta { flex-wrap: wrap; overflow-wrap: anywhere; }
.tg-export__check { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.tg-export [hidden] { display: none !important; }
.tg-report__text { margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--text-sm); line-height: 1.7; }
.tg-report__formatted { white-space: normal; }
.tg-report__formatted p { white-space: pre-wrap; margin: 0 0 var(--space-3); }
.tg-report__formatted h2, .tg-report__formatted h3, .tg-report__formatted h4 { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-md); }
.tg-report__formatted ul { margin: 0 0 var(--space-3); padding-left: 1.3em; }
@media (max-width: 480px) {
  .tg-export__form-grid { grid-template-columns: minmax(0, 1fr); }
  .tg-export__job-head .pill { white-space: normal; }
}