/* =========================================================================
   МАДОУ Онлайн - дизайн-система (см. docs/design-system.md).
   Токены + компоненты. Светлая и тёмная темы. Веб-шрифты не подключаем
   с CDN (безопасность): системные стеки.
   ========================================================================= */

:root{
  color-scheme: light dark;

  --ground:#F1F4F8; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --ink:#182230; --muted:#5C6775; --faint:#8A94A2;
  --border:#E3E8EF; --border-strong:#D2D9E2;
  --primary-bg:#1F4E79; --primary-bg-hover:#173D5E; --on-primary:#FFFFFF;
  --accent:#1F4E79; --primary-tint:#E9F1F8;
  --success:#2C7A57; --success-tint:#E4F1EA;
  --soon:#846323; --soon-tint:#F3EAD3;
  --danger:#B23B3B; --danger-tint:#F7E7E7;
  --warning:#795E1D; --warning-tint:#F3EAD3;

  --shadow:0 1px 2px rgba(24,34,48,.06), 0 8px 24px -12px rgba(24,34,48,.18);
  --shadow-sm:0 1px 2px rgba(24,34,48,.06);

  --r:12px; --r-sm:9px; --r-pill:99px;
  --serif:ui-serif, Georgia, "Times New Roman", serif;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --maxw:1080px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#0D131B; --surface:#151E29; --surface-2:#1A2531;
    --ink:#E9EEF4; --muted:#96A3B2; --faint:#6C7A8A;
    --border:#27313E; --border-strong:#334050;
    --primary-bg:#2F6CA6; --primary-bg-hover:#3E7EBC; --on-primary:#FFFFFF;
    --accent:#7FB1DE; --primary-tint:#172A3B;
    --success:#5FB088; --success-tint:#16281F;
    --soon:#C9A55E; --soon-tint:#2A2416;
    --danger:#E08585; --danger-tint:#2A1717;
    --warning:#C9A55E; --warning-tint:#2A2416;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
/* Явный выбор темы (на будущее - если добавим переключатель) перекрывает ОС */
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#F1F4F8; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --ink:#182230; --muted:#5C6775; --faint:#8A94A2;
  --border:#E3E8EF; --border-strong:#D2D9E2;
  --primary-bg:#1F4E79; --primary-bg-hover:#173D5E; --on-primary:#FFFFFF;
  --accent:#1F4E79; --primary-tint:#E9F1F8;
  --success:#2C7A57; --success-tint:#E4F1EA; --soon:#846323; --soon-tint:#F3EAD3;
  --danger:#B23B3B; --danger-tint:#F7E7E7; --warning:#795E1D; --warning-tint:#F3EAD3;
  --shadow:0 1px 2px rgba(24,34,48,.06), 0 8px 24px -12px rgba(24,34,48,.18);
  --shadow-sm:0 1px 2px rgba(24,34,48,.06);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0D131B; --surface:#151E29; --surface-2:#1A2531;
  --ink:#E9EEF4; --muted:#96A3B2; --faint:#6C7A8A;
  --border:#27313E; --border-strong:#334050;
  --primary-bg:#2F6CA6; --primary-bg-hover:#3E7EBC; --on-primary:#FFFFFF;
  --accent:#7FB1DE; --primary-tint:#172A3B;
  --success:#5FB088; --success-tint:#16281F; --soon:#C9A55E; --soon-tint:#2A2416;
  --danger:#E08585; --danger-tint:#2A1717; --warning:#C9A55E; --warning-tint:#2A2416;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

/* --- Основа --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--ground);
  line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3,p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
/* цель skip-link получает программный фокус - без рамки на всём контейнере */
main[tabindex="-1"]:focus{outline:none}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:100;
  background:var(--surface); color:var(--accent); border:1px solid var(--border);
  padding:8px 14px; border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  transition:top .15s ease;
}
.skip-link:focus{top:8px; text-decoration:none}

/* --- Иконки (спрайт Lucide, self-hosted) --- */
.icon{
  display:inline-block; vertical-align:middle; flex:none;
  width:1.2em; height:1.2em;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- Бренд (эмблема + слово) --- */
.brand{display:flex; align-items:center; gap:11px}
.emblem{
  width:38px; height:38px; border-radius:10px; background:var(--primary-bg);
  color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--shadow-sm);
}
.emblem .icon{width:21px; height:21px; stroke-width:2}
.wordmark{display:flex; flex-direction:column; line-height:1.15}
.wordmark b{font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--ink)}
.wordmark span{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}

/* --- Типографика страниц --- */
.eyebrow{
  font-size:12px; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.page-title{
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em; text-wrap:balance;
  font-size:clamp(21px,2.6vw,26px); color:var(--ink);
}
.page-sub{color:var(--muted); font-size:14.5px; margin-top:6px; max-width:60ch}

/* --- Кнопки --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:14.5px; line-height:1.2; cursor:pointer;
  padding:11px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  text-decoration:none; transition:background-color .15s ease, border-color .15s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--primary-bg); color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-bg-hover); color:var(--on-primary)}
.btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--block{width:100%}
.btn .icon{width:18px; height:18px}

/* --- Формы --- */
.form{display:flex; flex-direction:column; gap:15px}
.form-field{display:flex; flex-direction:column; gap:6px}
.form-field > label{font-size:13px; font-weight:600; color:var(--ink)}
.form-field input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.form-field select,
.form-field textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); transition:border-color .15s ease, background-color .15s ease;
}
.form-field input::placeholder{color:var(--faint)}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
  border-color:var(--accent); background:var(--surface);
}
.form-field .help{font-size:12.5px; color:var(--muted)}

.errorlist{
  list-style:none; margin:0; padding:0;
  font-size:13px; color:var(--danger); font-weight:550;
}
.errorlist li{margin-top:2px}
.form-error{
  background:var(--danger-tint); color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  padding:10px 13px; border-radius:var(--r-sm); font-size:13.5px; font-weight:550;
}

/* поле с ошибкой - подсветить рамку */
.form-field.has-error input:not([type=hidden]),
.form-field.has-error select,
.form-field.has-error textarea{border-color:var(--danger)}

/* --- Ссылки-подсказки, разделители --- */
.link{color:var(--accent); font-weight:550; font-size:13.5px}
.muted-row{color:var(--muted); font-size:13.5px}
a.brand,a.brand:hover{text-decoration:none}
.auth-alt{text-align:center; font-size:13.5px; color:var(--muted)}
.auth-alt a{color:var(--accent); font-weight:550}
.field-errors{margin-top:2px}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:4px 0}
.divider::before,.divider::after{content:""; height:1px; background:var(--border); flex:1}
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.stack{display:flex; flex-direction:column; gap:16px}
.stack-sm{display:flex; flex-direction:column; gap:10px}

/* --- Сообщения (Django messages) --- */
.messages{display:flex; flex-direction:column; gap:10px; margin:0 0 4px; padding:0; list-style:none}
.msg{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:var(--r-sm); font-size:13.5px; font-weight:550;
  border:1px solid transparent;
}
.msg .icon{width:17px; height:17px; margin-top:1px}
.msg--success{background:var(--success-tint); color:var(--success);
  border-color:color-mix(in srgb, var(--success) 30%, transparent)}
.msg--info{background:var(--primary-tint); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 25%, transparent)}
.msg--warning{background:var(--warning-tint); color:var(--warning);
  border-color:color-mix(in srgb, var(--warning) 30%, transparent)}
.msg--error{background:var(--danger-tint); color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 30%, transparent)}

/* =========================================================================
   Раскладка АУТЕНТИФИКАЦИИ (центрированная карточка)
   ========================================================================= */
.auth{
  min-height:100vh; display:grid; place-items:center;
  padding:clamp(24px,6vw,56px) 18px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--primary-tint), transparent 55%),
    var(--ground);
}
.auth-card{
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow);
  padding:30px 30px 26px; display:flex; flex-direction:column; gap:18px;
}
.auth-card .brand{justify-content:center}
.auth-head{display:flex; flex-direction:column; gap:4px; text-align:center}
.auth-head .page-title{font-size:23px}
.auth-head .page-sub{margin:0 auto; max-width:34ch}
.auth-foot{text-align:center; font-size:12px; color:var(--muted); margin-top:2px}

/* =========================================================================
   Раскладка КАБИНЕТА (верхняя панель + контент)
   ========================================================================= */
.app-topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px clamp(16px,4vw,28px);
  background:var(--surface); border-bottom:1px solid var(--border);
}
.app-topbar .emblem{width:32px; height:32px; border-radius:8px}
.app-topbar .emblem .icon{width:18px; height:18px}
.app-topbar .wordmark b{font-size:15px}
.topbar-spacer{flex:1 1 auto}
.org-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:13px; font-weight:600; color:var(--ink);
}
.chip{
  font-size:11.5px; font-weight:650; letter-spacing:.02em; padding:4px 10px;
  border-radius:var(--r-pill); background:var(--primary-tint); color:var(--accent); white-space:nowrap;
}
.chip--soon{background:var(--soon-tint); color:var(--soon)}
/* в плитке (колоночный флекс) чип не должен растягиваться на всю ширину */
.tile .chip{align-self:flex-start}
.user{display:flex; align-items:center; gap:9px}
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--primary-tint); color:var(--accent);
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; text-transform:uppercase;
}
.user-name{font-size:13px; font-weight:600; color:var(--ink)}
.logout-form{margin:0; padding-left:12px; border-left:1px solid var(--border)}
.logout-btn{
  font:inherit; font-size:13px; font-weight:550; color:var(--muted);
  background:none; border:0; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:6px;
}
.logout-btn:hover{color:var(--accent)}
.logout-btn .icon{width:15px; height:15px}

.app-main{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(22px,4vw,34px) clamp(16px,4vw,28px) 40px;
  display:flex; flex-direction:column; gap:22px;
}
.page-head{display:flex; flex-direction:column; gap:4px}
.app-h1{font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(20px,2.6vw,25px); color:var(--ink); text-wrap:balance}
.app-ctx{color:var(--muted); font-size:14px}
.app-ctx b{color:var(--ink); font-weight:600}

/* карточка-панель под контент/форму внутри кабинета */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:clamp(18px,3vw,24px);
}
.panel--form{max-width:520px}

/* --- Сетка разделов (плитки) --- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:18px; display:flex; flex-direction:column; gap:12px; min-height:150px;
  box-shadow:var(--shadow-sm);
}
.tile.soon{background:var(--surface-2)}
.tile-ico{
  width:36px; height:36px; border-radius:9px; background:var(--primary-tint); color:var(--accent);
  display:grid; place-items:center; flex:none;
}
.tile-ico .icon{width:20px; height:20px}
.tile-title{font-size:15px; font-weight:650; color:var(--ink)}
.metric{font-variant-numeric:tabular-nums; font-size:26px; font-weight:680; letter-spacing:-.02em; line-height:1; color:var(--ink)}
.metric small{font-size:13px; font-weight:500; color:var(--muted); margin-left:6px; letter-spacing:0}
.tile-desc{font-size:13px; color:var(--muted)}
.tile-grow{flex:1}
.tile-action{align-self:flex-start; font-size:13px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:5px}

/* --- Список данных (сотрудники и т.п.) --- */
.data-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.data-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 2px; border-top:1px solid var(--border);
}
.data-list li:first-child{border-top:0}
.data-list .di-name{font-weight:550; color:var(--ink)}
.data-list .di-role{font-size:13px; color:var(--muted)}
.data-list .di-empty{color:var(--muted); justify-content:flex-start}

.back-link{color:var(--muted); font-size:13.5px; display:inline-flex; align-items:center; gap:6px}
.back-link .icon{width:15px; height:15px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .skip-link{transition:none}
}

@media (max-width:520px){
  .auth-card{padding:24px 20px}
  .user-name{display:none}
  .app-topbar{gap:10px}
}