/* Оформление админки BestClinic TV: спокойный «клинический журнал» — тёплая бумага, тёмные чернила, зелёный акцент */

@font-face {
  font-family: "Golos Text";
  src: url("fonts/golos-text-cyrillic.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("fonts/golos-text-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: oklch(0.982 0.007 95);
  --paper-deep: oklch(0.955 0.01 95);
  --rule: oklch(0.89 0.012 95);
  --ink: oklch(0.25 0.02 250);
  --ink-soft: oklch(0.47 0.02 250);
  --ink-faint: oklch(0.62 0.015 250);
  --accent: oklch(0.49 0.1 162);
  --accent-deep: oklch(0.4 0.09 162);
  --accent-wash: oklch(0.94 0.035 162);
  --live: oklch(0.6 0.15 150);
  --wait: oklch(0.72 0.13 75);
  --wait-wash: oklch(0.95 0.04 85);
  --danger: oklch(0.53 0.17 28);
  --danger-wash: oklch(0.95 0.03 28);
  --muted-wash: oklch(0.93 0.008 250);

  --radius: 6px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --step-0: 0.95rem;
  --step-1: 1.1rem;
  --step-2: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  --step-small: 0.82rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Golos Text", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent-deep); text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--step-2); }
h2 { font-size: var(--step-1); }

/* ---------- Каркас ---------- */

.shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
}
/* Без этого длинное меню на телефоне растягивает колонку шире экрана */
.shell > * { min-width: 0; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.wordmark {
  font-weight: 750;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wordmark-mark {
  width: 1.5rem;
  height: 1rem;
  border: 2px solid var(--accent);
  border-radius: 3px;
  position: relative;
}
.wordmark-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.35;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-weight: 500;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.nav a:hover { background: var(--paper-deep); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }

.sidebar-footer { margin-top: auto; font-size: var(--step-small); color: var(--ink-faint); }
.sidebar-footer form { margin-top: var(--space-2); }

.content {
  padding: var(--space-8) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-12);
  max-width: 72rem;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-head p { margin: var(--space-1) 0 0; color: var(--ink-soft); }

.section { margin-top: var(--space-8); }
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.section-head .count { color: var(--ink-faint); font-size: var(--step-small); }

/* ---------- Сообщения ---------- */

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
  background: var(--accent-wash);
  color: var(--accent-deep);
  animation: notice-in 0.4s var(--ease-out);
}
.notice.error { background: var(--danger-wash); color: var(--danger); }
.notice ul { margin: 0; padding-left: 1.2rem; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Кнопки и формы ---------- */

.button, button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  background: var(--accent);
  color: oklch(0.99 0.005 162);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background 0.2s var(--ease-out), transform 0.1s var(--ease-out);
}
.button:hover, button:hover { background: var(--accent-deep); color: oklch(0.99 0.005 162); }
.button:active, button:active { transform: translateY(1px); }

.button.quiet, button.quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.button.quiet:hover, button.quiet:hover { background: var(--paper-deep); color: var(--ink); }

button.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
button.link:hover { background: none; color: var(--accent); }
button.danger-link { color: var(--danger); }
button.danger-link:hover { color: var(--danger); }
button.danger { background: var(--danger); }
button.danger:hover { background: oklch(0.46 0.16 28); }

form.inline { display: inline; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > span, .field-label { font-weight: 600; font-size: var(--step-small); color: var(--ink-soft); }
.field small, .hint { color: var(--ink-faint); font-size: var(--step-small); }
/* Ошибка загрузки файла показывается на месте подсказки под формой */
.hint.upload-error { color: var(--danger); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input[type="time"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: oklch(0.995 0.003 95);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-height: 2.5rem;
  width: 100%;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .button:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4) var(--space-6);
  align-items: start;
}
.form-stack { display: flex; flex-direction: column; gap: var(--space-6); max-width: 46rem; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 650; padding: 0; margin-bottom: var(--space-3); }

.code-input {
  font-size: 2rem !important;
  letter-spacing: 0.4em;
  font-weight: 650;
  max-width: 14rem;
  text-align: center;
}

/* Переключатели-пилюли: дни недели, варианты адресатов */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.pill input:checked + span { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }
.pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-wash); }

.check { display: flex; gap: var(--space-2); align-items: center; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* Адресаты показываются, только когда выбран вариант «выбранные» */
.targets-choice { display: none; margin-top: var(--space-4); }
form:has(input[name="target"][value="selected"]:checked) .targets-choice { display: grid; }

/* Часы работы: дни видны, только когда выбраны свои часы; у выходного дня вместо времени надпись */
.hours-days { display: none; margin-top: var(--space-4); gap: var(--space-2); }
form:has(input[name="hours_mode"][value="set"]:checked) .hours-days,
form:has(input[name="hours_mode"][value="own"]:checked) .hours-days { display: grid; }
.hours-day { display: grid; grid-template-columns: 4.5rem auto; gap: var(--space-3); align-items: center; min-height: 2.5rem; }
.hours-window { display: flex; gap: var(--space-2); align-items: center; }
.hours-window input { width: 7.5rem; }
.hours-day .day-off { display: none; }
.hours-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-3); }
/* Раскрытая форма филиала занимает всю строку списка, иначе сжимает колонку с названием */
.row > details[open] { grid-column: 1 / -1; }
.hours-day:not(:has(input[type="checkbox"]:checked)) .hours-window { display: none; }
.hours-day:not(:has(input[type="checkbox"]:checked)) .day-off { display: inline; }

/* Выбор поворота экрана картинками */
.rotation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); }
.rotation-option input { position: absolute; opacity: 0; }
.rotation-option label, .rotation-option > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  font-size: var(--step-small);
  min-height: 9rem;
  justify-content: flex-end;
}
.rotation-option input:checked + span { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-deep); }
.rotation-option input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-wash); }

/* ---------- Значок телевизора: форма показывает ориентацию, точка — связь ---------- */

.tv {
  --tv-w: 2.4rem;
  --tv-h: 1.5rem;
  width: var(--tv-w);
  height: var(--tv-h);
  border: 2px solid var(--ink-soft);
  border-radius: 3px;
  position: relative;
  flex: none;
  background: var(--paper-deep);
}
.tv.portrait { --tv-w: 1.5rem; --tv-h: 2.4rem; }
.tv.large { --tv-w: 4.2rem; --tv-h: 2.6rem; }
.tv.large.portrait { --tv-w: 2.6rem; --tv-h: 4.2rem; }
.tv::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--ink-faint);
}
.tv.online { border-color: var(--accent); }
.tv.online::after { background: var(--live); animation: pulse 2.4s var(--ease-out) infinite; }
.tv.no-dot::after { display: none; }
/* Стрелка «где верх картинки» на выборе поворота */
.tv .up {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--accent-deep);
  line-height: 1;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.6 0.15 150 / 0.45); }
  70% { box-shadow: 0 0 0 7px oklch(0.6 0.15 150 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.6 0.15 150 / 0); }
}

/* ---------- Списки ---------- */

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1.4fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }
.row-title { font-weight: 600; color: var(--ink); text-decoration: none; }
a.row-title:hover { color: var(--accent-deep); text-decoration: underline; }
.row-meta { color: var(--ink-soft); font-size: var(--step-small); }
.row-actions { display: flex; gap: var(--space-4); justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.media-row { grid-template-columns: 6.5rem minmax(10rem, 1.6fr) minmax(7rem, 0.9fr) minmax(7rem, 0.8fr) auto; }
.publication-row { grid-template-columns: 6.5rem minmax(10rem, 1.3fr) minmax(9rem, 1.2fr) minmax(7rem, 0.7fr) auto; }
.announcement-row { grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1.2fr) minmax(7rem, 0.7fr) auto; }
textarea { resize: vertical; line-height: 1.4; }

.thumb {
  width: 6.5rem;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ink);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: oklch(0.9 0.01 250);
  font-size: var(--step-small);
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Пользователи: доступы, которые показываются один раз, и действия с пользователем */
.credentials {
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.credentials .hint { margin: 0; }
.credential { background: oklch(0.995 0.003 95); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.credential-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.credential pre { margin: var(--space-2) 0 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.row.user-row { grid-template-columns: minmax(0, 1fr) auto; }
.user-actions { align-items: center; }
.user-actions select { width: auto; }

/* Просмотр видео. Вертикальный ролик лежит в файле на боку (вариант для повёрнутого ТВ):
   рамка 9:16, видео внутри поворачивается обратно на тот же угол, на который ТВ повёрнут по часовой */
.video-view {
  background: var(--ink);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.video-view video { display: block; max-width: 100%; max-height: 75vh; }
.video-view.upright { --frame-height: min(75vh, calc((100vw - 4rem) * 16 / 9)); }
.video-view.turn-90 { --turn: 90deg; }
.video-view.turn-270 { --turn: 270deg; }
.video-frame {
  position: relative;
  overflow: hidden;
  height: var(--frame-height);
  width: calc(var(--frame-height) * 9 / 16);
}
.video-frame video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--frame-height);
  height: calc(var(--frame-height) * 9 / 16);
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%) rotate(var(--turn));
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-small);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: 999px;
  white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.live { background: var(--accent-wash); color: var(--accent-deep); }
.status.wait { background: var(--wait-wash); color: oklch(0.48 0.1 70); }
.status.muted { background: var(--muted-wash); color: var(--ink-soft); }
.status.error { background: var(--danger-wash); color: var(--danger); }

.warning { color: var(--danger); font-weight: 600; }

/* Пометки публикации рядом с названием: «Срочно» и частота показа */
.tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: 4px;
  font-size: var(--step-small);
  font-weight: 600;
  vertical-align: middle;
}
.tag.urgent { background: var(--danger-wash); color: var(--danger); }
.tag.frequency { background: var(--muted-wash); color: var(--ink-soft); }

.empty {
  padding: var(--space-8) 0;
  color: var(--ink-soft);
  max-width: 34rem;
}
.empty strong { color: var(--ink); display: block; margin-bottom: var(--space-2); font-size: var(--step-1); }

/* Раскрывающиеся блоки (переименовать, сменить пароль, опасные действия) */
details > summary { cursor: pointer; color: var(--accent-deep); list-style: none; font-weight: 500; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; display: inline-block; transition: transform 0.2s var(--ease-out); }
details[open] > summary::before { transform: rotate(90deg); }
details .details-body { padding: var(--space-3) 0; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; }

.panel {
  padding: var(--space-6);
  background: oklch(0.993 0.004 95);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.facts dt { color: var(--ink-faint); font-size: var(--step-small); padding-top: 2px; }
.facts dd { margin: 0; }

/* Статистика показов */
.stats-total { margin-bottom: var(--space-4); }
.stats-total dd { font-size: var(--step-1); font-weight: 650; }
.stats-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-variant-numeric: tabular-nums; }
.stats-table th { text-align: left; font-size: var(--step-small); color: var(--ink-faint); font-weight: 600; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.stats-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.stats-table th:not(:first-child), .stats-table td:not(:first-child) { text-align: right; white-space: nowrap; }

/* Журнал действий */
.journal-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); align-items: end; margin-bottom: var(--space-6); max-width: 52rem; }
.journal-table td { vertical-align: top; }
.journal-table td:first-child { white-space: nowrap; }
.journal-table th:not(:first-child), .journal-table td:not(:first-child) { text-align: left; white-space: normal; }

.now-playing { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.now-playing li { display: flex; gap: var(--space-3); align-items: center; }

.upload {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-6);
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  background: oklch(0.99 0.004 95);
}
.upload input[type="file"] { font: inherit; max-width: 100%; }

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.login form { width: min(22rem, 100%); display: flex; flex-direction: column; gap: var(--space-4); }
.login .wordmark { margin-bottom: var(--space-4); font-size: 1.3rem; }

/* ---------- Телефон ---------- */

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static;
    height: auto;
    padding: var(--space-4);
    gap: var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav { flex-direction: row; overflow-x: auto; gap: var(--space-1); margin: 0 calc(-1 * var(--space-2)); }
  .nav a { white-space: nowrap; }
  .sidebar-footer { display: flex; justify-content: space-between; align-items: center; }
  .sidebar-footer form { margin: 0; }
  .content { padding-top: var(--space-6); }
  .split { grid-template-columns: 1fr; }
  .row, .media-row, .publication-row {
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
  }
  .row > :nth-child(n + 3) { grid-column: 2; }
  .row-actions { justify-content: flex-start; }
  .thumb { width: 5rem; }
  /* В журнале дата и время на узком экране переносятся, чтобы не сжимать текст события */
  .journal-table td:first-child { white-space: normal; min-width: 5.5rem; }
  /* У объявления нет превью — всё в одну колонку */
  .row.announcement-row { grid-template-columns: 1fr; }
  .row.announcement-row > * { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}