/* 主框架：sidebar / header / 搜尋 / 分片切換 / 頭像選單 / #content / 盤點提醒橫幅（CSS 架構重構 P3 自 legacy/core.css 拆出） */
@layer layout {
  /* ===== Shell v2 — Sidebar + Header + Main (2026-09-06 Phase 1) ===== */
  .sidebar {width:240px;background:var(--c-text);color:var(--c-white);position:fixed;top:0;left:0;height:100vh;z-index:var(--z-sidebar);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.4,0,.2,1)}
  .sidebar-header {padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}
  .sidebar-header .brand {display:flex;align-items:center;gap:10px}
  .sidebar-header .logo {width:36px;height:36px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--c-primary),var(--c-primary-strong));display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-14);color:var(--c-white);flex-shrink:0}
  .sidebar-header .brand-text .name {font-size:var(--fs-14);font-weight:var(--fw-bold)}
  .sidebar-header .brand-text .sub {font-size:var(--fs-11);opacity:.45}
  .sidebar-nav {flex:1;padding:8px;overflow-y:auto}
  .nav-section {font-size:var(--fs-11);text-transform:uppercase;letter-spacing:1px;padding:16px 12px 6px;opacity:.35;font-weight:var(--fw-medium)}
  .sb-nav-link {display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);font-size:var(--fs-13);color:rgba(255,255,255,.6);cursor:pointer;transition:all .12s;position:relative;text-decoration:none;user-select:none}
  .sb-nav-link:hover {background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
  .sb-nav-link.is-active {background:color-mix(in srgb, var(--c-primary) 35%, transparent);color:var(--c-white);font-weight:var(--fw-medium)}
  .sb-nav-link.is-active::before {content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;background:var(--c-primary);border-radius:0 3px 3px 0}
  .sb-nav-link .ic {font-size:var(--fs-14);width:20px;text-align:center}
  .sb-nav-link .badge {margin-left:auto;background:var(--c-danger);color:var(--c-white);font-size:var(--fs-11);font-weight:var(--fw-bold);min-width:18px;height:18px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;padding:0 5px}
  .sidebar-footer {padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
  .sidebar-user {display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-md)}
  .sidebar-user .av {width:30px;height:30px;border-radius:50%;background:var(--c-primary);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-11);flex-shrink:0}
  .sidebar-user .info {flex:1;min-width:0}
  .sidebar-user .info .n {font-size:var(--fs-12);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar-user .info .r {font-size:var(--fs-11);opacity:.4}
  .sidebar-overlay {position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-sidebar-overlay);opacity:0;pointer-events:none;transition:opacity .25s}
  .sidebar-overlay.is-open {opacity:1;pointer-events:auto}

  .main {margin-left:240px;min-height:100vh;display:flex;flex-direction:column}
  .header {background:var(--c-white);border-bottom:1px solid var(--c-border);padding:10px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:var(--z-header)}
  .hamburger {background:none;border:none;font-size:var(--fs-20);cursor:pointer;padding:4px;color:var(--c-text);line-height:1}
  .breadcrumb {font-size:var(--fs-13);color:var(--c-border-control);flex:1}
  .breadcrumb b {color:var(--c-text)}
  .h-search {position:relative}
  .h-search input {padding:7px 12px 7px 30px;border:1px solid var(--c-border);border-radius:var(--r-md);font-size:var(--fs-12);width:220px;background:var(--c-surface-2);color:var(--c-text);outline:none}
  .h-search input:focus {border-color:var(--c-primary);background:var(--c-white)}
  .h-search::before {content:"🔍";position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:var(--fs-11);opacity:.35}
  .h-right {display:flex;align-items:center;gap:10px}
  .h-site {display:flex;gap:4px}
  .notif {position:relative;background:none;border:none;font-size:var(--fs-16);cursor:pointer}
  .notif .cnt {position:absolute;top:-5px;right:-7px;min-width:16px;height:16px;padding:0 4px;background:var(--c-out-solid);color:var(--c-white);font-size:var(--fs-11);font-weight:var(--fw-bold);border-radius:var(--r-md);display:none;align-items:center;justify-content:center}
  .h-av {width:30px;height:30px;border-radius:50%;background:var(--c-primary);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:var(--fs-11);font-weight:var(--fw-bold);cursor:pointer}
  /* Avatar dropdown */
  .avatar-dropdown {position:relative}
  .avatar-menu {position:absolute;top:100%;right:0;margin-top:6px;width:180px;background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:var(--z-menu);padding:6px;display:none}
  .avatar-menu.is-open {display:block}
  .avatar-menu-header {padding:8px 12px;font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--c-text);border-bottom:1px solid var(--c-surface-2);margin-bottom:4px}
  .avatar-menu-item {display:block;padding:8px 12px;font-size:var(--fs-13);color:var(--c-text);text-decoration:none;border-radius:var(--r-sm);cursor:pointer;transition:background .12s}
  .avatar-menu-item:hover {background:var(--c-surface-2)}
  .avatar-menu-divider {height:1px;background:var(--c-surface-2);margin:4px 0}
  /* ===== 舊 search-box 樣式已移至 .h-search（Phase 1 Shell v2） ===== */

  /* 盤點提醒橫幅 */
  .reminder {
    background: var(--c-warning-soft);
    border-left: 5px solid var(--c-out-solid);
    padding: 10px 16px;
    font-size: var(--fs-13);
    color: var(--c-warning-strong);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .reminder button {
    flex-shrink: 0;
  }
  /* 內容區：flex child 需 width:100% 才能正確填滿 sidebar 右側空間 */
  .content { padding: 14px 16px 20px; max-width: 640px; margin: 0 auto; width: 100%; }

  /* ===== 舊分片切換已移至 .h-site（Phase 1 Shell v2） ===== */

  @media (min-width: 768px) {
    .content { max-width: 900px; }
    /* Desktop: sidebar hidden by default, shown via toggle */
    .sidebar {transform:translateX(-100%);width:240px}
    .sidebar.is-expanded {transform:translateX(0)}
    .main {margin-left:0}
    .main.sidebar-expanded {margin-left:240px}
  }

/* ---------- 手機版（<768px） ---------- */
@media (max-width: 767px) {
  /* Shell: sidebar → overlay drawer + main 全寬 + header 精簡 */
  .sidebar {transform:translateX(-100%)}
  .sidebar.mob-open {transform:translateX(0)}
  .main {margin-left:0}
  .hamburger {display:block}
  .header {padding:10px 14px;gap:10px}
  /* 公司 / 倉庫 / 廂型車 / 貨車：手機四顆 chip 單行等分（外觀縮小由 chip.css 的 .chip--fit 負責） */
  .h-site {display:flex;flex:1 1 auto;flex-wrap:nowrap;gap:4px;min-width:0}
  .breadcrumb {font-size:var(--fs-12)}
  .header { flex-wrap: wrap; row-gap: 8px; }
  .breadcrumb { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .h-search { flex: 1 1 100%; order: 3; }
  .h-search input { width: 100%; }
  .h-right { flex: 1 1 auto; justify-content: flex-end; gap: 6px; min-width: 0; }
  /* 有站點 chip 的頁面：整列給 h-right，標題留在第一列（行事曆等隱藏 .h-site 的頁面維持同列） */
  .h-right:has(.h-site:not([style*="none"])) { flex-basis: 100%; }
  .h-site button { flex: 1 1 0; min-width: 0; text-align:center; }
  /* 舊 topbar 手機版規則已移除（Phase 1 Shell v2） */

  /* 內容區留給底部導覽 */
  .content { padding-bottom: 92px; }
  }
}