/* ============================================================
   График смен — дизайн-система "Calm / Glass"
   Ориентиры: Linear, Vercel, Raycast, Attio.
   Светлая и тёмная темы: html[data-theme="light" | "dark"]
   ============================================================ */

:root{
  color-scheme:light;

  /* Поверхности */
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#FBFBFC;
  --elev:rgba(255,255,255,.72);
  --line:#E8E9EC;
  --line-2:#DCDEE3;
  --hair:#EFF0F3;

  /* Текст */
  --text:#0E0F12;
  --text2:#6B7180;
  --text3:#9AA0AC;

  /* Акценты */
  --accent:#5A63D8;
  --accent-2:#7B84F0;
  --accent-soft:rgba(90,99,216,.10);
  --accent-ink:#3C44B4;

  --blue:#3B82F6; --blue-soft:rgba(59,130,246,.12); --blue-ink:#1D4FB0;
  --green:#16A34A; --green-soft:rgba(22,163,74,.12); --green-ink:#12784A;
  --orange:#D97706;--orange-soft:rgba(217,119,6,.13);--orange-ink:#96580C;
  --red:#DC2626;   --red-soft:rgba(220,38,38,.11);   --red-ink:#A32020;
  --violet:#7C3AED;--violet-soft:rgba(124,58,237,.11);--violet-ink:#5B23B8;

  /* Глубина */
  --sh-1:0 1px 2px rgba(15,18,24,.05);
  --sh-2:0 1px 2px rgba(15,18,24,.05), 0 8px 24px -14px rgba(15,18,24,.28);
  --sh-3:0 32px 80px -28px rgba(15,18,24,.35), 0 2px 8px rgba(15,18,24,.06);
  --ring:0 0 0 3px rgba(90,99,216,.22);
  --hi:inset 0 1px 0 rgba(255,255,255,.85);

  --r-sm:8px; --r:10px; --r-md:14px; --r-lg:18px;
  --blur:saturate(180%) blur(20px);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08090C;
  --surface:#0F1116;
  --surface-2:#12141A;
  --elev:rgba(20,22,29,.72);
  --line:#1E2028;
  --line-2:#282B35;
  --hair:#191C23;

  --text:#F2F3F5;
  --text2:#9BA1AE;
  --text3:#6D7482;

  --accent:#7C86F7;
  --accent-2:#9AA2FF;
  --accent-soft:rgba(124,134,247,.14);
  --accent-ink:#C3C8FF;

  --blue:#60A5FA; --blue-soft:rgba(96,165,250,.15); --blue-ink:#BBD6FF;
  --green:#4ADE80; --green-soft:rgba(74,222,128,.13); --green-ink:#A9F0C4;
  --orange:#FBBF24;--orange-soft:rgba(251,191,36,.13);--orange-ink:#F7DCA0;
  --red:#F87171;   --red-soft:rgba(248,113,113,.14);  --red-ink:#FFC0BC;
  --violet:#A78BFA;--violet-soft:rgba(167,139,250,.14);--violet-ink:#DCCEFF;

  --sh-1:0 1px 2px rgba(0,0,0,.6);
  --sh-2:0 1px 2px rgba(0,0,0,.6), 0 12px 32px -18px rgba(0,0,0,.9);
  --sh-3:0 40px 100px -30px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(124,134,247,.26);
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","tnum";
  letter-spacing:-.006em;position:relative;overflow-x:hidden;
}

/* Аккуратное свечение вверху — без шума и цирка */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:520px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 320px at 18% -10%, rgba(90,99,216,.14), transparent 70%),
    radial-gradient(50vw 280px at 82% -14%, rgba(59,130,246,.10), transparent 72%);
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(60vw 340px at 18% -10%, rgba(110,120,255,.20), transparent 70%),
    radial-gradient(52vw 300px at 84% -14%, rgba(56,189,248,.12), transparent 72%);
}

button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:620;letter-spacing:-.025em;line-height:1.25}
h1{font-size:24px}h2{font-size:19px}h3{font-size:15.5px}
.muted{color:var(--text2)}
.hidden{display:none !important}
::selection{background:var(--accent-soft)}

/* Скроллбары */
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:34px;padding:6px 13px;border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--sh-1),var(--hi);
  cursor:pointer;font-size:13.5px;font-weight:540;text-decoration:none;color:var(--text);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease;
  white-space:nowrap;
}
.btn:hover{border-color:var(--text3);background:var(--surface)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{
  color:#fff;border-color:transparent;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 1px 2px rgba(15,18,24,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{color:var(--red-ink);background:transparent;border-color:var(--line-2);box-shadow:none}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--text2)}
.btn.ghost:hover{background:var(--hair);color:var(--text)}
.btn.warn{background:var(--orange-soft);border-color:transparent;color:var(--orange-ink);box-shadow:none}
.btn.ok{background:var(--green-soft);border-color:transparent;color:var(--green-ink);box-shadow:none}
.btn.sm{min-height:28px;padding:4px 10px;font-size:12.5px;border-radius:var(--r-sm)}

/* ---------- Поля ---------- */
input,select,textarea{
  min-height:36px;padding:7px 11px;border:1px solid var(--line-2);border-radius:var(--r);width:100%;
  background:var(--surface);color:var(--text);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s;
  font-size:13.5px;
}
input::placeholder{color:var(--text3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px;background-repeat:no-repeat}
label.f{display:block;font-size:12px;color:var(--text2);margin-bottom:5px;font-weight:520}
.field{margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px;font-size:12px;overflow:auto;color:var(--text2)}
code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:.92em}

/* ---------- Карточки ---------- */
.card,.sheet,.acc,.dayblock,.needday{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.card{padding:22px}

/* ---------- Шапка ---------- */
header.top{position:sticky;top:0;z-index:30;background:var(--elev);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
.top-in{max-width:1560px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(150deg,var(--accent-2),var(--accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--sh-1)}
.logo>div>div:first-child{font-size:13.5px;font-weight:600;letter-spacing:-.02em}
nav.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav.tabs a{padding:6px 11px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--text2);
  text-decoration:none;display:inline-flex;align-items:center;transition:.14s}
nav.tabs a:hover{background:var(--hair);color:var(--text)}
nav.tabs a.active{background:var(--hair);color:var(--text);font-weight:560}
.userchip{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2)}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:650;color:#fff;
  background:linear-gradient(150deg,var(--accent-2),var(--accent))}
main{max-width:1560px;margin:0 auto;padding:22px 22px 56px}
.pagehead{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}

/* ---------- Переключатель темы ---------- */
.themesw{position:relative;width:52px;height:28px;border-radius:999px;border:1px solid var(--line-2);cursor:pointer;padding:0;flex:0 0 auto;
  background:var(--hair);transition:background .2s,border-color .2s}
.themesw:hover{border-color:var(--text3)}
.themesw i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:11px;color:var(--text2);background:var(--surface);box-shadow:var(--sh-1);
  transition:transform .26s cubic-bezier(.32,1.35,.5,1)}
html[data-theme="dark"] .themesw i{transform:translateX(24px)}

/* ---------- Тулбар ---------- */
.toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.yearpick{display:flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.yearpick button{border:none;background:transparent;width:28px;height:30px;border-radius:var(--r-sm);cursor:pointer;color:var(--text2)}
.yearpick button:hover{background:var(--hair);color:var(--text)}
.yearpick .y{min-width:52px;text-align:center;font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.months{display:flex;gap:2px;overflow-x:auto;padding:3px;margin-bottom:14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.months button{border:0;background:transparent;color:var(--text2);flex:1 1 0;
  padding:6px 10px;border-radius:var(--r-sm);font-size:12.5px;cursor:pointer;white-space:nowrap;min-height:30px;transition:.14s}
.months button:hover{background:var(--hair);color:var(--text)}
.months button.active{color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));font-weight:580;box-shadow:var(--sh-1)}

/* ---------- График ---------- */
.sheet{overflow:hidden}
.sheet-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sheet-head .sub{font-size:12.5px;color:var(--text2)}
.tablewrap{overflow-x:auto}
table.sch{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-size:11.5px;
  font-variant-numeric:tabular-nums}
table.sch th,table.sch td{border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);padding:0;text-align:center;background:var(--surface)}
table.sch thead th{position:sticky;top:0;z-index:5;font-weight:600;font-size:10.5px;color:var(--text2);
  height:34px;padding:0 2px;white-space:nowrap;background:var(--surface-2)}
table.sch thead th.wknd{color:var(--text);background:var(--hair)}
table.sch th.day,table.sch td.day{width:auto;min-width:0;padding:0}
table.sch td.wkndcol{background:var(--surface-2)}
.c-num{width:30px}
.c-fio{width:15%;min-width:150px;text-align:left;padding:6px 10px !important;font-weight:540;font-size:12.5px;line-height:1.35}
.c-fio .pos{display:block;font-size:10.5px;color:var(--text3);font-weight:400}
.c-tel{width:104px;white-space:nowrap;color:var(--text2);padding:0 8px !important;text-align:left;font-size:11.5px}
.c-gr{width:42px;font-weight:600}
.sticky1{position:sticky;left:0;z-index:6}
.sticky2{position:sticky;left:30px;z-index:6}
table.sch thead th.sticky1,table.sch thead th.sticky2{z-index:8}
.c-num{color:var(--text3)}
.cell{width:100%;height:30px;border:none;background:transparent;cursor:pointer;font-size:11px;font-weight:600;color:var(--text);
  display:grid;place-items:center;padding:0;transition:.1s}
.cell:hover{outline:2px solid var(--accent);outline-offset:-2px;border-radius:5px}
.cell.off{color:var(--line-2)}
.s-work{background:var(--blue-soft);color:var(--blue-ink)}
.s-extra{background:var(--green-soft);color:var(--green-ink)}
.s-vac{background:var(--hair);color:var(--text3)}
.s-sick{background:var(--violet-soft);color:var(--violet-ink)}
.s-need{background:var(--red-soft);color:var(--red-ink);box-shadow:inset 0 0 0 1px var(--red)}
.s-sub{background:var(--orange-soft);color:var(--orange-ink)}
.s-moved{background:var(--violet-soft);color:var(--violet-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 40%,transparent);font-size:10px}
.s-guest{background:var(--green-soft);color:var(--green-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 50%,transparent)}
.s-free{background:color-mix(in srgb,var(--green) 8%,transparent);color:var(--green-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 28%,transparent)}
.s-vacancy{color:var(--red-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 45%,transparent);
  background:repeating-linear-gradient(135deg,var(--red-soft),var(--red-soft) 4px,transparent 4px,transparent 8px)}
tr.vacancy .c-fio{color:var(--red)}
tr.guest td{background:color-mix(in srgb,var(--green) 5%,var(--surface))}
tr.freerow td{background:color-mix(in srgb,var(--green) 3%,var(--surface))}
table.sch .tot{width:46px;min-width:46px;font-weight:600;background:var(--surface-2)}
table.sch thead th.tot{font-size:10px;letter-spacing:0}
tr.totrow td{background:var(--surface-2);font-weight:600}
table.sch tbody tr:hover td{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.legend{display:flex;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text2)}
.legend span.k{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.coverbar{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;align-items:center;background:var(--surface-2)}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:580;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.pill.warn{background:var(--red-soft);border-color:transparent;color:var(--red-ink)}
.pill.ok{background:var(--green-soft);border-color:transparent;color:var(--green-ink)}
.coverlist{font-size:12px;color:var(--text2);line-height:1.7}

/* ---------- Кандидаты ---------- */
.cands-card{margin-top:20px}
.row.wrap{flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;padding:2px;border-radius:var(--r);background:var(--hair);border:1px solid var(--line)}
.seg button{border:0;background:none;padding:5px 13px;border-radius:var(--r-sm);font:inherit;font-size:12.5px;color:var(--text2);cursor:pointer;transition:.14s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);font-weight:580;box-shadow:var(--sh-1)}
.csearch{min-width:260px;min-height:34px;height:34px}
.nearbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:12px 0 2px}
.nb-t{font-size:12px;color:var(--text3)}
.nchip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 11px;font-size:12px}
.nchip b{font-size:11.5px;font-weight:600}
.nchip i{font-style:normal;color:var(--text3);font-size:11px}
.nchip.close{background:var(--green-soft);border-color:transparent;color:var(--green-ink)}
.dayblock{margin-top:12px;overflow:hidden;box-shadow:none}
.dbh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dbd{font-weight:600;font-size:13px}
.crows{display:flex;flex-direction:column}
.crow{display:grid;grid-template-columns:28px minmax(190px,1.4fr) 140px minmax(140px,1fr) 110px;align-items:center;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--hair);transition:background .14s}
.crow:last-child{border-bottom:0}
.crow:hover{background:var(--surface-2)}
.crow.ext{background:color-mix(in srgb,var(--violet) 5%,transparent)}
.crow.empty{display:block;color:var(--text2);font-size:12.5px;padding:14px}
.cmain{display:flex;flex-direction:column;gap:1px;min-width:0}
.cname{font-weight:580;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmeta{color:var(--text3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdist{font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums}
.cdist.close{color:var(--green-ink);font-weight:600}
.cwhy{font-size:12px;color:var(--text3)}
.crow .btn{justify-self:end}
.morebtn{margin:9px 14px 12px}

/* старые чипы (совместимость) */
.needday{padding:13px 15px;margin-bottom:9px}
.needday .dh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;font-weight:600;font-size:13px}
.needday .dh .need{background:var(--red-soft);color:var(--red-ink);border-radius:999px;padding:2px 9px;font-size:12px}
.cands{display:flex;gap:7px;flex-wrap:wrap}
.cand{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--green-soft);
  border-radius:999px;padding:4px 5px 4px 11px;font-size:12.5px;color:var(--green-ink)}
.cand b{font-weight:600;color:var(--text)}
.cand .who{display:flex;flex-direction:column;line-height:1.25}
.cand .meta{font-size:11px;color:var(--text3);font-weight:400}
.cand.busy{background:var(--surface-2);color:var(--text3)}
.cand.ext{background:var(--violet-soft)}
.cand.ext .who b{color:var(--violet-ink)}

/* ---------- Списки ---------- */
table.list{width:100%;border-collapse:collapse;font-size:13.5px}
table.list th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);
  padding:9px 12px;border-bottom:1px solid var(--line);font-weight:600}
table.list td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
table.list tbody tr:hover td{background:var(--surface-2)}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--hair);font-size:11.5px;font-weight:560;color:var(--text2)}
.tag.blue{background:var(--blue-soft);color:var(--blue-ink)}
.tag.green{background:var(--green-soft);color:var(--green-ink)}
.tag.red{background:var(--red-soft);color:var(--red-ink)}
.tag.violet{background:var(--violet-soft);color:var(--violet-ink)}

/* ---------- Аккордеон ---------- */
.acc{margin-bottom:10px;overflow:hidden;box-shadow:var(--sh-1)}
.acc-head{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;padding:13px 15px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .14s}
.acc-head:hover{background:var(--surface-2)}
.acc.open .acc-head{border-bottom:1px solid var(--line)}
.acc .chev{color:var(--text3);font-size:11px;width:12px;transition:transform .18s ease}
.acc-title{flex:1;display:flex;flex-direction:column;gap:1px}
.acc-title b{font-size:14px;font-weight:600;letter-spacing:-.015em}
.acc-sub{color:var(--text3);font-size:12px;font-weight:400}
.acc-stat{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.acc-body{display:none;padding:12px 15px 14px}
.acc.open .acc-body{display:block}
.pname{display:flex;align-items:center;gap:9px}
.pname .pos{display:block;color:var(--text3);font-size:11.5px}

/* ---------- Аватары ---------- */
.cav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  font-size:10.5px;font-weight:650;color:#fff;letter-spacing:.02em;
  background:linear-gradient(150deg,var(--accent-2),var(--accent))}
.cav.ext{background:linear-gradient(150deg,#B79BFF,var(--violet))}

/* ---------- Модалка ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,9,12,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:grid;place-items:center;z-index:60;padding:22px;animation:fade .14s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  width:100%;max-width:460px;max-height:88vh;overflow:auto;animation:pop .18s cubic-bezier(.22,1.2,.4,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal .m-head{padding:18px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.modal .m-body{padding:14px 20px 20px}
.modal .m-foot{padding:0 20px 20px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.choice{display:grid;gap:6px;margin-bottom:14px}
.choice button{display:flex;align-items:center;gap:9px;text-align:left;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);cursor:pointer;font-size:13.5px;min-height:40px;transition:.14s}
.choice button:hover{background:var(--surface-2);border-color:var(--line-2)}
.choice button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  padding:9px 16px;border-radius:999px;font-size:13px;color:var(--text);
  background:var(--elev);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line-2);box-shadow:var(--sh-3)}
.empty{padding:44px 22px;text-align:center;color:var(--text3);font-size:13.5px}
.loading{padding:44px;text-align:center;color:var(--text3);font-size:13.5px}

@media (max-width:1200px){
  .c-tel{display:none}
  table.sch thead th.c-tel{display:none}
}
@media (max-width:900px){
  .crow{grid-template-columns:28px 1fr;grid-auto-rows:auto}
  .cdist,.cwhy{grid-column:2}
  .crow .btn{grid-column:2;justify-self:start}
}
@media (max-width:640px){
  main{padding:14px}.top-in{padding:9px 14px}.card{padding:16px}
  h1{font-size:20px}
  .sheet-head{padding:14px}.coverbar,.legend{padding:12px 14px}
  nav.tabs{margin-left:0;width:100%;overflow-x:auto}
  .months button{flex:0 0 auto}
}

/* ---------- Красивые выпадающие списки ---------- */
.xsel{position:relative;width:100%}
.xsel>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.xsel-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 34px 7px 11px;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--text);
  box-shadow:var(--sh-1);font-size:13.5px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.xsel-btn:hover{border-color:var(--text3)}
.xsel.open .xsel-btn{border-color:var(--accent);box-shadow:var(--ring)}
.xsel-btn.placeholder{color:var(--text3)}
.xsel-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xsel-arrow{position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.6px solid var(--text3);
  border-bottom:1.6px solid var(--text3);transform:rotate(45deg);transition:transform .18s,border-color .18s}
.xsel.open .xsel-arrow{transform:rotate(225deg) translate(-3px,-3px);border-color:var(--accent)}
.xsel-pop{position:absolute;z-index:400;left:0;right:0;top:calc(100% + 6px);display:none;
  padding:6px;max-height:290px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--sh-3,var(--sh-2));animation:xpop .14s ease}
.xsel.open .xsel-pop{display:block}
.xsel.up .xsel-pop{top:auto;bottom:calc(100% + 6px)}
@keyframes xpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.xsel-opt{display:block;width:100%;flex:0 0 auto;text-align:left;padding:8px 10px;margin:0 0 2px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--text);font-size:13.5px;line-height:1.35;min-height:34px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xsel-opt:last-child{margin-bottom:0}
.xsel-opt:hover{background:var(--hair)}
.xsel-opt.on{background:var(--accent-soft);color:var(--accent-ink,var(--accent));font-weight:560}

/* ---------- Приём и увольнение ---------- */
.s-none{color:var(--text3);opacity:.5}
.s-gone{color:var(--orange-ink);background:repeating-linear-gradient(135deg,var(--orange-soft),var(--orange-soft) 4px,transparent 4px,transparent 8px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 45%,transparent);border-radius:5px}
.c-fio .dt{display:inline-block;margin-left:6px;padding:0 5px;border-radius:5px;font-size:9.5px;font-weight:600;
  color:var(--text2);background:var(--hair);vertical-align:middle}
.c-fio .dt.out{color:var(--red-ink);background:var(--red-soft)}
table.list td.dates{font-size:12px;white-space:nowrap}
table.list tr.fired td:nth-child(2) b{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1px}


/* =========================================================
   Мобильные устройства
   ========================================================= */
@media (max-width:900px){
  html{-webkit-text-size-adjust:100%}
  .top-in{padding:8px 12px;gap:9px}
  nav.tabs{order:9;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  nav.tabs a{flex:0 0 auto;padding:7px 12px}
  nav.tabs::-webkit-scrollbar{display:none}
  main{padding:14px 12px 64px}
  .pagehead{gap:8px;margin-bottom:12px}
  .pagehead p.muted{font-size:12.5px}
  .grid2{grid-template-columns:1fr}
  .toolbar{gap:9px}
  .toolbar>div{min-width:0 !important;flex:1 1 100% !important}
  .toolbar>.row{width:100%}
  .toolbar>.row .btn{flex:1 1 auto}
  .toolbar>label.btn{width:100%}
  .card{padding:16px;overflow-x:auto}
  .acc-body{padding:10px 10px 12px;overflow-x:auto}
  table.list{min-width:620px}
  .acc-head{padding:12px}
  .acc-stat{justify-content:flex-start}
  .csearch{min-width:0;width:100%}
  .modal{max-width:100%}
}
@media (max-width:640px){
  h1{font-size:19px}
  .logo>div>div:last-child{display:none}
  .userchip b,.userchip>span.nm{display:none}
  .btn{min-height:38px;font-size:13.5px}
  .btn.sm{min-height:32px}
  input,select,textarea,.xsel-btn{min-height:42px;font-size:16px}
  .xsel-opt{min-height:42px;padding:11px 12px;font-size:15px}
  .xsel-pop{max-height:52vh}
  /* график: горизонтальная прокрутка с закреплёнными ФИО */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.sch{table-layout:auto;min-width:760px;font-size:11px}
  table.sch th.day,table.sch td.day{min-width:26px}
  .c-fio{width:auto;min-width:132px;max-width:150px;font-size:12px;padding:6px 8px !important}
  .c-num{width:26px}
  .sticky2{left:26px}
  .cell{height:34px}
  .sheet-head{padding:12px}
  .legend{padding:10px 12px;gap:8px;font-size:11px}
  .coverbar{padding:12px;gap:10px}
  .coverlist{font-size:11.5px}
  .months{margin-bottom:12px}
  .months button{flex:0 0 auto;min-height:36px;padding:7px 13px}
  .yearpick button{width:34px;height:34px}
  /* модалка — как шторка снизу */
  .overlay{padding:0;place-items:end stretch}
  .modal{max-width:100%;max-height:94vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    animation:sheetup .22s cubic-bezier(.22,1.2,.4,1)}
  .modal .m-foot{position:sticky;bottom:0;background:var(--surface);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line)}
  .modal .m-foot .btn{flex:1 1 auto}
  .modal .m-head{padding:16px 16px 0}
  .modal .m-body{padding:12px 16px 16px}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom));width:calc(100% - 28px);text-align:center}
  .crow{padding:10px 12px}
  .crow .btn{width:100%}
  .dbh{padding:9px 12px}
  table.list{min-width:540px}
  pre{font-size:11px}
}
@keyframes sheetup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  /* шапка: чипы в одну строку, без переносов внутри */
  .top-in{gap:7px}
  .pill{white-space:nowrap;font-size:11.5px;padding:4px 9px}
  #syncbox .pill{font-size:11px;padding:3px 8px}
  .userchip{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin-left:auto}
  .userchip::-webkit-scrollbar{display:none}
  .userchip>*{flex:0 0 auto}
  .userchip .tag{white-space:nowrap;font-size:11px;padding:3px 8px}
  .userchip>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  #authbox>span{max-width:96px;overflow:hidden;text-overflow:ellipsis;display:inline-block}
  #savebox .btn,#authbox .btn{min-height:32px;padding:5px 11px;font-size:12.5px}
  .themesw{width:46px;height:26px}
  .themesw i{width:20px;height:20px}
  html[data-theme="dark"] .themesw i{transform:translateX(20px)}
  .userchip{font-size:11.5px;gap:6px}
  .avatar{width:24px;height:24px;font-size:10px}
}
@media (max-width:400px){
  nav.tabs a{padding:7px 10px;font-size:13px}
  .logo .mark{width:28px;height:28px}
}