/* ═══ Оболочка: боковое меню, верхняя панель, поиск ⌘K, мобильная навигация ═══
   Только var(--…) из tokens.css. Подключается после components.css. */


/* ── Боковое меню ── */
#sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);box-shadow:none;transform:none;
  display:flex;flex-direction:column;overflow:visible;transition:width var(--dur-collapse) var(--ease-spring)}
#content{margin-left:var(--sidebar);transition:margin-left var(--dur-collapse) var(--ease-spring)}
/* Меню всегда на всю высоту окна, даже на длинной странице: липкое в потоке, а не fixed */
@media(min-width:769px){
  #sidebar{position:sticky;top:0;height:100vh;align-self:flex-start;flex-shrink:0}
  #content{margin-left:0;flex:1;min-width:0}
}
#app.sb-collapsed{--sidebar:var(--sidebar-mini)}

.sb-top{position:relative;padding:12px 12px 8px}
.ws-switch{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border-radius:var(--r-sm);background:transparent;
  color:var(--text);text-align:left;transition:background-color var(--dur-hover) ease}
.ws-switch:hover,.ws-switch[aria-expanded="true"]{background:var(--surface-hover)}
.sidebar-avatar{width:32px;height:32px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent);
  font-size:12.5px;font-weight:600;letter-spacing:0;box-shadow:none;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar-avatar::after{display:none}
.ws-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.ws-name{font-size:var(--fs-body);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-sub{font-size:var(--fs-cap);color:var(--text-3)}
.ws-chev{width:15px;height:15px;color:var(--text-3);flex-shrink:0}

.ws-menu{position:absolute;top:calc(100% - 2px);left:12px;width:236px;padding:6px;background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:300;
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;pointer-events:none;
  transition:opacity 200ms var(--ease-out),transform var(--dur-pop) var(--ease-out)}
.ws-menu.open{opacity:1;transform:none;pointer-events:auto}
.ws-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:var(--r-xs);background:transparent;color:var(--text);text-align:left}
.ws-opt:hover{background:var(--surface-hover)}
.ws-opt>span:nth-child(2){display:flex;flex-direction:column;flex:1;line-height:1.25}
.ws-opt b{font-weight:600;font-size:var(--fs-body)}
.ws-opt small{font-size:var(--fs-cap);color:var(--text-3)}
.ws-ic{width:30px;height:30px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--c);background:color-mix(in oklab,var(--c) 12%,transparent)}
.ws-ic svg{width:16px;height:16px}
.ws-check{width:15px;height:15px;color:var(--accent);opacity:0}
.ws-opt.on .ws-check{opacity:1}

.sidebar-nav{flex:1;padding:4px 12px 12px;overflow-y:auto;overflow-x:hidden}
.nav-group{font-size:var(--fs-cap);font-weight:500;color:var(--text-4);padding:14px 10px 6px;white-space:nowrap;overflow:hidden;
  transition:opacity 200ms ease}
.nav-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;margin:0 0 2px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:var(--fs-body);font-weight:500;white-space:nowrap;cursor:pointer;position:relative;
  box-shadow:none;transform:none;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease}
.nav-item:hover{background:var(--surface-hover);color:var(--text)}
.nav-item:active{transform:none}
.nav-item.active{background:var(--accent-soft);color:var(--accent-hover);box-shadow:none}
.nav-item.active::before{display:none}
.nav-item .icon{width:17px;height:17px;flex-shrink:0;color:inherit;display:inline-flex;align-items:center;justify-content:center}
.nav-item .icon svg{width:17px;height:17px;stroke-width:1.9}
.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity 200ms ease}
.nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--red);
  color:var(--text);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;line-height:1;align-self:center}
.nav-kbd{margin-left:auto;font-family:inherit;font-size:10.5px;color:var(--text-4);border:1px solid var(--border);border-radius:5px;padding:0 5px;line-height:16px}
.sidebar-footer{padding:8px 12px 12px;border-top:1px solid var(--border)}

/* свёрнутое меню: только иконки */
#app.sb-collapsed .ws-text,#app.sb-collapsed .ws-chev,#app.sb-collapsed .nav-label,#app.sb-collapsed .nav-kbd{opacity:0;pointer-events:none}
#app.sb-collapsed .nav-group{opacity:0;height:14px;padding:0}
#app.sb-collapsed .ws-switch{padding:6px}
#app.sb-collapsed .nav-item{padding:0 13px}
#app.sb-collapsed .nav-badge{position:absolute;top:7px;left:27px;min-width:8px;width:8px;height:8px;padding:0;font-size:0;
  border:2px solid var(--surface)}
.sb-tip{position:fixed;z-index:4000;transform:translateY(-50%);padding:5px 9px;border-radius:var(--r-xs);background:var(--surface-active);
  color:var(--text);font-size:var(--fs-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 150ms ease;box-shadow:var(--shadow)}
.sb-tip.show{opacity:1}

/* ── Верхняя панель ── */
.topbar{height:var(--topbar-h);padding:0 var(--page-pad);background:var(--bg);border-bottom:1px solid var(--border);gap:var(--space-3)}
.crumbs{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:var(--fs-body);white-space:nowrap}
.crumb-group{color:var(--text-3)}
.crumb-sep{width:14px;height:14px;color:var(--text-4);flex-shrink:0}
.crumb-page{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-sans);font-size:var(--fs-body);letter-spacing:0}
.crumbs.no-group .crumb-group,.crumbs.no-group .crumb-sep{display:none}
.tb-search{display:flex;align-items:center;gap:8px;width:320px;height:36px;padding:0 8px 0 12px;border-radius:var(--r-sm);
  background:var(--bg-sunken);border:1px solid var(--border);color:var(--text-3);font-size:var(--fs-sm);
  transition:border-color var(--dur-hover) ease,color var(--dur-hover) ease}
.tb-search:hover{border-color:var(--border-strong);color:var(--text-2)}
.tb-search svg{width:15px;height:15px;flex-shrink:0}
.tb-search-ph{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-search kbd,.cmdk kbd{font-family:inherit;font-size:10.5px;color:var(--text-3);background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;line-height:1.4}
.tb-create{height:36px;padding:0 14px}
.tb-create svg{width:16px;height:16px}

/* ── Один заголовок страницы ── */
.large-title{display:block;margin:0;padding:var(--page-pad) var(--page-pad) 0;font-family:var(--font-display);font-size:var(--fs-h1);
  font-weight:600;letter-spacing:var(--ls-display);line-height:1.2;color:var(--text);opacity:1;transform:none}
.large-title[hidden]{display:none}
.large-title:not([hidden]) ~ .page{padding-top:var(--space-5)}
.page-h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:600;letter-spacing:var(--ls-display);line-height:1.2;color:var(--text)}

/* ── Поиск ⌘K ── */
#cmdk-overlay{display:flex;visibility:hidden;opacity:0;padding-top:13vh;background:var(--overlay);animation:none;
  transition:opacity var(--dur-pop) var(--ease-out),visibility 0s linear var(--dur-pop)}
#cmdk-overlay.open{visibility:visible;opacity:1;animation:none;transition:opacity var(--dur-pop) var(--ease-out),visibility 0s}
.cmdk{width:620px;max-width:calc(100vw - 32px);max-height:min(560px,74vh);background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:var(--r-modal);box-shadow:var(--shadow-lg);overflow:hidden;animation:none;
  transform:scale(.98);opacity:0;transition:transform var(--dur-pop) var(--ease-out),opacity var(--dur-pop) var(--ease-out)}
#cmdk-overlay.open .cmdk{transform:none;opacity:1}
.cmdk-field{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--border)}
.cmdk-field>svg{width:18px;height:18px;color:var(--text-3);flex-shrink:0}
#cmdk-input,#cmdk-input:focus,#cmdk-input:focus-visible{flex:1;height:54px;padding:0;border:none;border-radius:0;background:transparent;box-shadow:none;outline:none!important;
  font-size:16px;color:var(--text)}
.cmdk-results{padding:6px 8px 8px}
.cmdk-section{font-size:var(--fs-cap);font-weight:500;color:var(--text-4);text-transform:none;letter-spacing:0;padding:10px 10px 4px}
.cmdk-item{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-body);
  color:var(--text-2);cursor:pointer;transition:background-color 120ms ease}
.cmdk-item.selected{background:var(--surface-active);color:var(--text)}
.cmdk-ic{width:28px;height:28px;border-radius:var(--r-xs);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;
  color:var(--text-3);flex-shrink:0}
.cmdk-item.selected .cmdk-ic{color:var(--accent)}
.cmdk-ic .ic{width:15px;height:15px}
.cmdk-item .label{flex:1;min-width:0;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item .meta{font-size:var(--fs-sm);color:var(--text-3);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-empty{padding:28px;text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
.cmdk-hint{display:flex;justify-content:flex-start;gap:16px;padding:10px 16px;border-top:1px solid var(--border);background:transparent;
  font-size:var(--fs-cap);color:var(--text-3)}
.cmdk-hint kbd{margin-right:4px}

/* ── Нижняя панель и листы: только телефон ── */
#bottom-nav,.sheet,.sheet-backdrop{display:none}

@media(max-width:768px){
  #sidebar{display:none}
  #content{margin-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topbar{height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 4px 0 16px;background:var(--bg)}
  .crumb-group,.crumb-sep{display:none}
  .crumb-page{font-family:var(--font-sans);font-size:17px;font-weight:600;letter-spacing:0}
  .tb-search{width:44px;height:44px;padding:0;justify-content:center;border:none;background:transparent;color:var(--text-2)}
  .tb-search svg{width:20px;height:20px}
  .tb-search-ph,.tb-search kbd,.tb-create{display:none}
  /* одна строка заголовка — в панели; внутристраничные дубли прячем */
  .large-title,.page-h1:not(.dash-greeting){display:none}

  #bottom-nav{display:block;height:calc(64px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);
    background:var(--surface);border-top:1px solid var(--border);box-shadow:none}
  .bnav-items{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:64px;overflow:visible}
  .bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;padding:0;
    background:transparent;border:none;border-radius:0;color:var(--text-3);font-size:11px;font-weight:500;position:relative;transform:none}
  .bnav-item:active{transform:none;opacity:.7}
  .bnav-item svg{width:22px;height:22px;stroke-width:1.9;transform:none}
  .bnav-item.active{color:var(--accent)}
  .bnav-item>span:not(.bnav-dot){font-size:11px;line-height:1}
  .bnav-item.active::after{display:none}
  .bnav-dot{top:10px;right:calc(50% - 16px);width:8px;height:8px;border:2px solid var(--surface)}
  .bnav-plus{justify-self:center;width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;
    display:flex;align-items:center;justify-content:center;transition:transform 150ms var(--ease-out)}
  .bnav-plus:active{transform:scale(.94)}
  .bnav-plus svg{width:24px;height:24px;stroke-width:2.2}

  .sheet-backdrop{display:block;position:fixed;inset:0;z-index:2100;background:var(--overlay);opacity:0;visibility:hidden;
    transition:opacity var(--dur-sheet) var(--ease-spring),visibility 0s linear var(--dur-sheet)}
  .sheet-backdrop.open{opacity:1;visibility:visible;transition:opacity var(--dur-sheet) var(--ease-spring),visibility 0s}
  .sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:2101;max-height:86dvh;
    background:var(--surface-2);border-top:1px solid var(--border-strong);border-radius:var(--r-modal) var(--r-modal) 0 0;
    padding:0 0 calc(12px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;
    transition:transform var(--dur-sheet) var(--ease-spring),visibility 0s linear var(--dur-sheet);touch-action:pan-y}
  .sheet.open{transform:translateY(0);visibility:visible;transition:transform var(--dur-sheet) var(--ease-spring),visibility 0s}
  .sheet-handle{width:36px;height:5px;border-radius:var(--r-full);background:var(--border-strong);margin:8px auto 6px;flex-shrink:0}
  .sheet-body{overflow-y:auto;padding:4px 12px 0;overscroll-behavior:contain}
  .sheet-group{font-size:var(--fs-cap);font-weight:500;color:var(--text-4);padding:14px 8px 6px}
  .sheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 8px;border-radius:var(--r-md);
    background:transparent;border:none;color:var(--text);font-size:15px;font-weight:500;text-align:left}
  .sheet-row:active{background:var(--surface-active)}
  .sheet-ic{--c:var(--text-2);width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
    flex-shrink:0;color:var(--c);background:color-mix(in oklab,var(--c) 12%,transparent)}
  .sheet-ic svg{width:19px;height:19px}
  .sheet-txt{display:flex;flex-direction:column;line-height:1.25}
  .sheet-txt small{font-size:var(--fs-cap);color:var(--text-3);font-weight:400}

  #toasts{bottom:calc(76px + env(safe-area-inset-bottom))}
  #cmdk-overlay{padding-top:0}
  .cmdk{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none}
}

@media(prefers-reduced-motion:reduce){
  #sidebar,#content,.sheet,.sheet-backdrop,.cmdk,#cmdk-overlay,.ws-menu{transition:none!important}
}

/* Нет сети: полоска сверху, данные из сохранённых */
.offline-bar{position:fixed;top:env(safe-area-inset-top,0px);left:50%;transform:translateX(-50%);z-index:3000;margin-top:8px;
  padding:6px 14px;border-radius:var(--r-full);background:var(--amber);color:#1a1300;font-size:var(--fs-sm);font-weight:500;
  box-shadow:var(--shadow);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}