/* tahoe-shell.css — каркас и общие детали по макетам Tahoe (1 в 1).
   Взято из полуручного режима (static/polu/css/tahoe.css): он сделан ровно по
   макетам «Dispatcher Tahoe v3», и классы каркаса у него те же, что у
   платформы (side, nav-btn, topbar, content, btn). Здесь — только общее:
   палитра, полотно, боковая панель, шапка, кнопки, полоса дней, колокольчик,
   тосты, кнопки карты. Экранные правила — в своих файлах. */

/* Палитра v3. Значения — здесь, правила ниже одни на обе темы. */
:root {
  --th-surface: #fff;                 /* панель, карточка */
  --th-float: rgba(255,255,255,.78);  /* плашка поверх карты */
  --th-nested: #f2f2f7;               /* вложенный блок */
  --th-nested-2: #f7f7fa;
  --th-nested-3: #e6e7ee;             /* наведение на вложенный */
  --th-ink: #1c1c1e; --th-ink2: #3a3a3c; --th-ink3: #6b7078; --th-ink4: #8a8f98;
  --th-line: rgba(60,66,78,.14); --th-line-2: rgba(60,66,78,.24);
  --th-track: rgba(60,66,78,.07);
  --th-sh: 22,26,36;                  /* цвет тени */
  --th-blue: #0a5fd0; --th-blue-2: #0a4fa8;
  --th-page: linear-gradient(180deg, #f4f5f8 0%, #e8eaf0 58%, #dfe2ea 100%);
  --map-canvas: #e9ecef;              /* пустое место карты в тон интерфейса */
  --th-glow: rgba(255,255,255,.75);
}
/* Тёмная: те же правила, другие значения. Поверхности не чёрные, а тёплый
   графит — на чёрном рамки и тени пропадают, и панели сливаются в кашу. */
html[data-theme="dark"] {
  --th-surface: #1f2126;
  --th-float: rgba(31,33,38,.86);
  --th-nested: #26282e;
  --th-nested-2: #23252a;
  --th-nested-3: #2f3138;
  --th-ink: #f2f3f5; --th-ink2: #d3d7dd; --th-ink3: #9aa0a8; --th-ink4: #7b818a;
  --th-line: rgba(255,255,255,.1); --th-line-2: rgba(255,255,255,.18);
  --th-track: rgba(255,255,255,.06);
  --th-sh: 0,0,0;
  --th-blue: #4da3ff; --th-blue-2: #8cc2ff;
  --th-page: linear-gradient(180deg, #1c1e22 0%, #141619 58%, #101215 100%);
  --th-glow: rgba(120,160,255,.10);
  --map-canvas: #15171a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --th-surface: #1f2126;
    --th-float: rgba(31,33,38,.86);
    --th-nested: #26282e;
    --th-nested-2: #23252a;
    --th-nested-3: #2f3138;
    --th-ink: #f2f3f5; --th-ink2: #d3d7dd; --th-ink3: #9aa0a8; --th-ink4: #7b818a;
    --th-line: rgba(255,255,255,.1); --th-line-2: rgba(255,255,255,.18);
    --th-track: rgba(255,255,255,.06);
    --th-sh: 0,0,0;
    --th-blue: #4da3ff; --th-blue-2: #8cc2ff;
    --th-page: linear-gradient(180deg, #1c1e22 0%, #141619 58%, #101215 100%);
    --th-glow: rgba(120,160,255,.10);
    --map-canvas: #15171a;
  }
}

/* Полотно: градиент под плавающими панелями */
body { background: transparent; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.shell { position: relative; z-index: 1; }

html {
  /* Панели — плотная поверхность с тонкой рамкой, а не стекло: стекло давало
     грязный оттенок и съедало контраст текста. */
  --th-glass: var(--th-surface);
  --th-glass-solid: var(--th-surface);
  --th-border: 1px solid var(--th-line);
  --th-shadow: 0 1px 2px rgba(var(--th-sh),.06), 0 14px 32px -22px rgba(var(--th-sh),.5);
  --th-shadow-sm: 0 1px 2px rgba(var(--th-sh),.06);
  --th-blue-grad: linear-gradient(180deg, #3a94ff, #0a5fd0);
  --th-caps: var(--th-ink4);
  --th-white-btn: var(--th-surface);

  /* ── Полотно и каркас ── */
  body::before { background:
    radial-gradient(30% 26% at 84% 10%, var(--th-glow), transparent 70%),
    var(--th-page); }
  body { color: var(--th-ink); }
  /* Прокрутка панелей без полос */
  .side, .fr-left, .fr-right, .mstops { scrollbar-width: none; }
  .side::-webkit-scrollbar, .fr-left::-webkit-scrollbar, .fr-right::-webkit-scrollbar { display: none; }
  .shell.on { padding: 14px; gap: 14px; }
  .main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

  /* ── Боковая панель ── */
  .side { width: 236px; border-right: 0; border-radius: 30px; padding: 18px 14px 14px;
    background: var(--th-glass); border: var(--th-border); box-shadow: var(--th-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .side-toggle { right: -12px; background: var(--th-white-btn); box-shadow: var(--th-shadow-sm); }
  .side-brand { padding: 4px 6px; margin-bottom: 14px; }
  .side-logo-sq { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(160deg, #4aa5ff, #0a5fd0);
    box-shadow: 0 6px 14px -6px rgba(10,95,208,.7); padding: 5px; }
  .side-brand-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
  .side-search { height: 40px; padding: 0 12px 0 13px; border-radius: 20px; background: var(--th-nested);
    border: var(--th-border); box-shadow: none; color: var(--th-ink3); margin-bottom: 14px; }
  .side-search:hover { background: var(--th-nested-3); }
  .side-search kbd { background: var(--th-surface); border: 0; box-shadow: none; border-radius: 8px; color: var(--th-ink4); }
  .nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--th-caps); padding: 12px 12px 5px; }
  .nav-btn { min-height: 38px; padding: 0 11px; border-radius: 15px; font-size: 14.5px; font-weight: 550; color: var(--th-ink); }
  .nav-btn:hover { background: var(--th-nested-2); }
  .nav-btn.on { background: rgba(10,111,224,.1); color: var(--th-blue); font-weight: 650; box-shadow: none; }
  .nav-btn.on::before { display: none; }
  .nav-btn .ic { color: var(--th-ink3); }
  .nav-btn.on .ic { color: var(--th-blue); }
  .side-toggle { width: 26px; height: 26px; right: -13px; opacity: 1; background: var(--th-surface);
    box-shadow: 0 1px 3px rgba(var(--th-sh),.25), inset 0 0 0 .5px var(--th-line); }
  /* Свёрнутая панель: тахо-ширина не должна перебивать 68px из app.css */
  .side.min { width: 68px; padding-left: 10px; padding-right: 10px; }
  .side.min .side-search { padding: 0; justify-content: center; }
  .side.min .nav-btn { padding: 0; }
  .side.min .side-user { padding: 8px 6px; }
  .side.min .side-foot { justify-content: center; }
  .side.min .side-foot .side-ver { display: none; }
  .nav-btn .cnt { background: var(--th-nested); color: var(--th-ink3); border-radius: 9px; padding: 2px 8px 3px;
    font-size: 11.5px; font-weight: 650; box-shadow: none; }
  .nav-btn.on .cnt { color: var(--th-blue); }
  .side-user { border-top: 0; margin-top: auto; padding: 10px; gap: 10px; flex-wrap: nowrap; border-radius: 22px;
    background: var(--th-nested-2); border: var(--th-border); box-shadow: none; }
  .side-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(165deg, #8fb0a6, #4f6f65);
    color: #fff; font-weight: 700; font-size: 12px; }
  .side-user-meta b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--th-ink); }
  .side-user-meta .dim { display: block; font-size: 12px; color: rgba(107,112,120,.55); }
  .side-user .side-icon-btn { width: 28px; height: 28px; border-radius: 50%; color: var(--th-ink3);
    background: var(--th-surface); border: var(--th-border); box-shadow: none; }
  .side-user .side-icon-btn svg { width: 14px; height: 14px; }
  .side-user .side-icon-btn:hover { background: var(--th-surface); color: var(--th-ink); }
  .side-appear { border-radius: 14px; background: var(--th-nested); border: var(--th-border);
    color: var(--th-ink2); box-shadow: none; }
  .side-appear:hover { background: var(--th-nested-3); color: var(--th-ink); }
  .side-foot { gap: 8px; padding-top: 2px; }
  .side-ver { padding: 6px 12px 0; font-size: 10.5px; color: rgba(107,112,120,.4); }

  /* ── Шапка ── */
  .topbar { position: static; border-bottom: 0; border-radius: 30px; padding: 16px 20px;
    background: var(--th-glass); border: var(--th-border); box-shadow: var(--th-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar h1 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; color: var(--th-ink); }
  .btn { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--th-line);
    background: var(--th-surface); box-shadow: 0 1px 2px rgba(var(--th-sh),.06); font-weight: 580; color: var(--th-ink); }
  .btn:has(> svg:first-child) { padding-left: 13px; }
  .btn:hover { background: var(--th-nested-2); border-color: var(--th-line-2); }
  .topbar .btn[onclick^="openShare"] svg { color: #2f8cff; }
  .topbar .btn[onclick^="openMgrReport"] svg { color: #e0413f; }
  .topbar .btn[onclick*="'kits'"] svg { color: #2fbf71; }
  .topbar .btn { font-size: 14px; font-weight: 580; gap: 7px; }
  .topbar .btn.pri { font-size: 14.5px; font-weight: 620; padding: 0 20px 0 16px; }
  .btn.pri { background: var(--th-blue-grad); color: #fff; border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px -6px rgba(10,95,208,.85); }
  .btn.pri:hover { background: linear-gradient(180deg, #5cb0ff, #1a7cea); }
  .btn.sm { min-height: 32px; padding: 0 12px; border-radius: 16px; }
  .btn.xs { min-height: 24px; }
  .btn.danger { color: #c62a38; }

  /* ── Полоса дней: дорожка со стрелками и днями, календарь и «Завтра» снаружи ── */
  .topbar .tb-day { order: 10; flex: 1 1 100%; }
  .tb-day { gap: 10px; align-items: stretch; }
  .tb-track { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 6px;
    border-radius: 24px; background: var(--th-track); border: .5px solid rgba(255,255,255,.5);
    box-shadow: inset 0 1px 2px var(--th-track); }
  .dnav { width: 28px; min-width: 28px; height: 56px; border-radius: 14px 8px 8px 14px; background: var(--th-surface);
    color: var(--th-ink3); box-shadow: 0 1px 2px rgba(var(--th-sh),.06); }
  .tb-track .dnav + .daystrip + .dnav, .tb-track .daystrip + .dnav { border-radius: 8px 14px 14px 8px; }
  .dnav:hover { background: var(--th-surface); color: var(--th-ink); }
  .tb-day > .dnav { width: auto; min-width: 48px; height: auto; padding: 0 14px; border-radius: 24px;
    border: 1px solid var(--th-line); background: var(--th-surface); box-shadow: 0 1px 2px rgba(var(--th-sh),.06); color: var(--th-ink); }
  .tb-day > .dnav-today { padding: 0 18px; font-size: 14px; font-weight: 600; }
  .daystrip { gap: 6px; padding: 1px 0; }
  .dchip { min-width: 54px; height: 62px; justify-content: center; border-radius: 19px; background: var(--th-surface);
    border: 1px solid var(--th-line); box-shadow: 0 1px 2px rgba(var(--th-sh),.06); color: var(--th-ink); }
  .dchip:hover { border-color: var(--th-line-2); }
  .dchip.on { background: var(--th-blue-grad); color: #fff; border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(10,111,224,.75); }
  .dchip-dow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; opacity: .65; }
  .dchip.on .dchip-dow { opacity: .9; }
  .dchip-num { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
  .dchip-cnt { font-size: 11px; font-weight: 600; }
  .dchip.out { align-self: center; background: var(--th-surface); border-radius: 20px; }
  .tb-chip { padding: 5px 12px 6px; border-radius: 14px; white-space: nowrap; font-size: 12.5px; font-weight: 600;
    color: var(--th-blue); background: rgba(10,111,224,.12); border: .5px solid rgba(10,111,224,.18); }
  .topbar > h1 { margin-right: 0; }
  .topbar > .tb-chip + .spacer, .topbar > h1 + .spacer { flex: 1; }
  .topbar > .tb-chip { margin-right: auto; }
  /* Колокольчик и список замечаний */
  .tb-bell { border: 1px solid var(--th-line); background: var(--th-surface); box-shadow: 0 1px 2px rgba(var(--th-sh),.06);
    color: var(--th-ink2); }
  .tb-bell:hover { background: var(--th-nested-2); }
  .tb-bell.warn { color: #e8890c; } .tb-bell.bad { color: #e0313f; }
  .tb-bell-n { background: #e0313f; box-shadow: 0 0 0 2px var(--th-surface); }
  .bellpop { border: 1px solid var(--th-line); background: var(--th-surface);
    box-shadow: 0 24px 60px -24px rgba(var(--th-sh),.55), 0 1px 2px rgba(var(--th-sh),.06); }
  .bp-h { color: var(--th-ink4); }
  .bp-i { color: var(--th-ink); }
  .bp-i:hover { background: var(--th-nested-2); }
  .bp-ic { background: #0a5fd0; }
  .bp-i.warn .bp-ic { background: #e8890c; }
  .bp-i.bad .bp-ic { background: #e0313f; }

  /* Тосты */
  /* цвет текста — свой: белый из app.css на белом фоне делал успешные сообщения невидимыми */
  .toast { background: var(--th-surface); color: var(--th-ink); border: 1px solid var(--th-line);
    box-shadow: 0 1px 2px rgba(var(--th-sh),.06), 0 18px 40px -22px rgba(var(--th-sh),.55); }
  .t-ic { background: #0a5fd0; }
  .toast.ok .t-ic { background: #14b981; }
  .toast.err .t-ic { background: #e0313f; }
  .toast.err { color: #fff; }   /* у ошибки фон красный (app.css) — текст белый */
  .t-body b { color: var(--th-ink); }
  .t-body > span { color: var(--th-ink3); }
  .t-x { color: var(--th-ink4); }
  .t-x:hover { background: var(--th-nested); color: var(--th-ink); }

  .fr-map-wrap .leaflet-control-zoom, .ar-map-wrap .leaflet-control-zoom, .ko-map-wrap .leaflet-control-zoom {
    border: var(--th-border) !important; border-radius: 22px; padding: 5px; display: flex; flex-direction: column; gap: 4px;
    box-shadow: var(--th-shadow-sm); background: var(--th-glass-solid); margin: 16px; }
  .leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 38px; height: 38px; line-height: 38px; border-radius: 17px !important;
    border-bottom: 0; background: var(--th-float); box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    color: var(--th-ink); font-size: 20px; font-weight: 300; }
  .leaflet-bar a:hover { background: var(--th-surface); }
  .leaflet-popup-content-wrapper { border-radius: 20px; box-shadow: var(--th-shadow); }
  /* Одна кривая на всё и одинаковое нажатие у любой кнопки — по макету v3 */
  button, .btn, .nav-btn, .dchip, .mfilt, .ic-btn, .tb-bell, .ko-tool, .chip {
    transition: transform .34s cubic-bezier(.32,.72,0,1), background .22s ease,
                box-shadow .28s ease, color .2s ease, border-color .2s ease; }
  button:active, .btn:active, .nav-btn:active, .dchip:active, .ic-btn:active, .tb-bell:active {
    transform: scale(.955); }
}

/* Тёмная по системе: у платформы data-theme может не стоять */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nav-btn.on { background: rgba(77,163,255,.16); }
  :root:not([data-theme]) .tb-chip { background: rgba(77,163,255,.18); border-color: rgba(77,163,255,.28); color: #8cc2ff; }
}