/* ============================================================
   SmarTech Stock — app.css
   Extrait du template "Tableau de bord smartech.html"
   Chargé par partials/header.php à la place de Tailwind CDN
   (Tailwind reste en bridge sur les pages non encore migrées)
   ============================================================ */

  :root{
    --bg:        oklch(0.972 0.008 264);
    --card:      #ffffff;
    --ink:       oklch(0.27 0.03 274);
    --ink-soft:  oklch(0.48 0.025 274);
    --ink-faint: oklch(0.66 0.02 274);
    --line:      oklch(0.92 0.01 274);
    --line-soft: oklch(0.95 0.008 274);

    --sidebar:   oklch(0.24 0.055 280);
    --sidebar-2: oklch(0.21 0.05 280);
    --side-ink:  oklch(0.82 0.03 280);

    --primary:   oklch(0.55 0.19 280);
    --primary-soft: oklch(0.95 0.04 290);

    --c-violet:  oklch(0.58 0.18 290);
    --c-blue:    oklch(0.64 0.15 245);
    --c-teal:    oklch(0.68 0.12 195);
    --c-pink:    oklch(0.65 0.18 5);
    --c-amber:   oklch(0.78 0.13 75);

    --radius:    18px;
    --shadow:    0 1px 2px rgba(31,29,77,.04), 0 12px 28px -16px rgba(31,29,77,.18);
    --sidebar-w: 256px;
    --sidebar-w-collapsed: 72px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    font-size:15px;
    line-height:1.45;
  }
  a{color:inherit;text-decoration:none;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{background:oklch(0.85 0.02 274);border-radius:20px;border:3px solid var(--bg);}

  /* ---------- Layout ---------- */
  .app{display:flex;min-height:100vh;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
    color:var(--side-ink);
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    z-index:60;
    overflow-x:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
  }
  .brand{
    display:flex;align-items:center;gap:11px;
    padding:24px 22px 22px;
    font-weight:800;font-size:21px;color:#fff;letter-spacing:-.02em;
  }
  .brand .mark{
    width:34px;height:34px;border-radius:10px;
    background:linear-gradient(135deg,var(--c-violet),var(--c-pink));
    display:grid;place-items:center;color:#fff;flex:0 0 auto;
    box-shadow:0 6px 16px -6px var(--c-violet);
  }
  .brand .mark svg{width:19px;height:19px;}
  .brand b{font-weight:800;}
  .brand .brand-text span{color:var(--c-pink);}

  .nav{padding:6px 14px;overflow-y:auto;flex:1;}
  .nav-label{
    font-size:11px;text-transform:uppercase;letter-spacing:.12em;
    color:oklch(0.6 0.04 280);font-weight:700;
    padding:18px 12px 8px;
  }
  .nav-item{
    display:flex;align-items:center;gap:13px;
    padding:11px 13px;border-radius:11px;
    color:var(--side-ink);font-weight:600;font-size:14.5px;
    cursor:pointer;position:relative;transition:background .15s,color .15s;
  }
  .nav-item svg{width:19px;height:19px;opacity:.85;}
  .nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
  .nav-item.active{
    background:linear-gradient(90deg,var(--c-violet),oklch(0.55 0.17 300));
    color:#fff;box-shadow:0 10px 22px -12px var(--c-violet);
  }
  .nav-item.active svg{opacity:1;}
  .nav-item .badge{
    margin-left:auto;background:var(--c-pink);color:#fff;
    font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  }
  .side-foot{padding:16px;}
  .upsell{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    border-radius:14px;padding:16px;
  }
  .upsell h4{margin:0 0 4px;color:#fff;font-size:14px;}
  .upsell p{margin:0 0 12px;font-size:12.5px;color:oklch(0.7 0.03 280);line-height:1.5;}
  .upsell button{
    width:100%;border:0;border-radius:9px;padding:9px;cursor:pointer;
    background:#fff;color:var(--sidebar);font-weight:700;font-family:inherit;font-size:13px;
  }

  /* ---------- Main ---------- */
  .main{
    margin-left:var(--sidebar-w);
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    transition:margin-left .25s cubic-bezier(.4,0,.2,1);
  }

  .topbar{
    position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:16px;
    padding:14px 28px;
  }
  .menu-btn{
    display:flex;border:0;background:transparent;cursor:pointer;color:var(--ink);
    width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;
  }
  .menu-btn:hover{background:var(--line-soft);}
  .page-title h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;}
  .page-title p{margin:1px 0 0;font-size:13px;color:var(--ink-faint);}

  .search{
    margin-left:auto;position:relative;width:min(340px,38vw);
  }
  .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-faint);}
  .search input{
    width:100%;border:1px solid var(--line);background:var(--bg);
    border-radius:12px;padding:11px 14px 11px 42px;font-family:inherit;font-size:14px;color:var(--ink);
    outline:none;transition:border .15s,box-shadow .15s;
  }
  .search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft);}

  .icon-btn{
    position:relative;border:1px solid var(--line);background:var(--card);
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    cursor:pointer;color:var(--ink-soft);transition:.15s;flex:0 0 auto;
  }
  .icon-btn:hover{color:var(--primary);border-color:var(--primary);}
  .icon-btn svg{width:19px;height:19px;}
  .icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--c-pink);border:2px solid var(--card);}
  .avatar{
    width:42px;height:42px;border-radius:12px;flex:0 0 auto;
    background:linear-gradient(135deg,var(--c-blue),var(--c-violet));
    display:grid;place-items:center;color:#fff;font-weight:700;cursor:pointer;
  }

  .content{padding:28px;display:flex;flex-direction:column;gap:22px;}

  /* ---------- Stat cards ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .stat{
    background:var(--card);border-radius:var(--radius);padding:22px;
    box-shadow:var(--shadow);border:1px solid var(--line-soft);
    display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  }
  .stat .ico{
    width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;
  }
  .stat .ico svg{width:24px;height:24px;}
  .stat .val{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;}
  .stat .lbl{font-size:14px;color:var(--ink-soft);font-weight:600;}
  .stat .trend{
    display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
    padding:3px 8px;border-radius:20px;width:fit-content;
  }
  .trend.up{color:var(--c-teal);background:oklch(0.95 0.04 195);}
  .trend.down{color:var(--c-pink);background:oklch(0.95 0.04 5);}
  .trend svg{width:13px;height:13px;}
  .stat .row{display:flex;align-items:center;justify-content:space-between;gap:10px;}

  /* ---------- Panels ---------- */
  .grid-2{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
  .panel{
    background:var(--card);border-radius:var(--radius);
    box-shadow:var(--shadow);border:1px solid var(--line-soft);
    padding:22px 22px 18px;
  }
  .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
  .panel-head h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;}
  .panel-head p{margin:2px 0 0;font-size:13px;color:var(--ink-faint);}
  .legend{display:flex;gap:16px;flex-wrap:wrap;}
  .legend span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);font-weight:600;}
  .legend i{width:11px;height:11px;border-radius:4px;display:inline-block;}
  .select{
    border:1px solid var(--line);background:var(--bg);border-radius:10px;
    padding:8px 12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  }
  .chart-wrap{position:relative;height:300px;}
  .chart-wrap.sm{height:240px;}

  .donut-wrap{position:relative;height:200px;}
  .donut-center{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    pointer-events:none;
  }
  .donut-center .b{font-size:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;}
  .donut-center .s{font-size:12.5px;color:var(--ink-faint);font-weight:600;}
  .cat-list{display:flex;flex-direction:column;gap:11px;margin-top:16px;}
  .cat{display:flex;align-items:center;gap:10px;font-size:13.5px;}
  .cat i{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
  .cat .n{font-weight:600;}
  .cat .v{margin-left:auto;font-weight:700;color:var(--ink-soft);white-space:nowrap;}

  /* ---------- Table ---------- */
  .table-wrap{overflow-x:auto;margin:0 -4px;}
  table{width:100%;border-collapse:collapse;min-width:560px;}
  th{
    text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--ink-faint);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);
  }
  td{padding:14px;border-bottom:1px solid var(--line-soft);font-size:14px;}
  tr:last-child td{border-bottom:0;}
  .prod{display:flex;align-items:center;gap:12px;}
  .prod .thumb{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;}
  .prod b{font-weight:700;display:block;}
  .prod small{color:var(--ink-soft);font-size:12px;}
  .pill{font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;display:inline-block;}
  .pill.ok{color:var(--c-teal);background:oklch(0.95 0.04 195);}
  .pill.wait{color:var(--c-amber);background:oklch(0.96 0.05 75);}
  .pill.no{color:var(--c-pink);background:oklch(0.95 0.04 5);}
  td.amount{font-weight:800;letter-spacing:-.01em;}

  .scrim{position:fixed;inset:0;background:rgba(20,18,50,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s;}

  /* ---------- Side-user (pied de sidebar) ---------- */
  .side-user{
    display:flex;align-items:center;gap:10px;
    padding:12px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
  }
  .side-avatar{
    width:36px;height:36px;border-radius:10px;flex:0 0 auto;
    background:linear-gradient(135deg,var(--c-violet),var(--c-pink));
    display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
  }
  .side-user-info{flex:1;min-width:0;}
  .side-user-name{color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .side-user-role{font-size:11.5px;color:oklch(0.7 0.03 280);}
  .side-logout{color:oklch(0.6 0.04 280);transition:color .15s;flex:0 0 auto;}
  .side-logout:hover{color:var(--c-pink);}
  .side-logout svg{width:17px;height:17px;display:block;}

  /* ---------- Nav icon wrapper + badge-dot ---------- */
  .nav-icon{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .badge-dot{
    display:none;
    position:absolute;top:-3px;right:-3px;
    width:8px;height:8px;border-radius:50%;
    background:var(--c-pink);
    border:2px solid oklch(0.24 0.055 280);
  }

  /* ---------- Sidebar accordéon (mobile) ---------- */
  .nav-section > summary.nav-label {
    display:flex;align-items:center;gap:8px;
    cursor:pointer;user-select:none;list-style:none;
  }
  .nav-section > summary.nav-label::-webkit-details-marker { display:none; }
  .nav-chevron {
    flex-shrink:0;opacity:.55;width:12px;height:12px;
    transition:transform 150ms ease;margin-left:auto;
  }
  .nav-section[open] > summary .nav-chevron { transform:rotate(90deg); }
  .nav-badge-section {
    background:var(--c-pink);color:#fff;
    font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
    flex-shrink:0;
  }
  /* Si badge + chevron sont tous les deux présents, le badge pousse le chevron à droite */
  .nav-section > summary.nav-label > span:first-child { flex:1; }

  @media (min-width:860px) {
    .nav-chevron { display:none; }
    .nav-section > summary.nav-label { cursor:default;pointer-events:none; }
    /* "open" est forcé via JS sur desktop — pas de hack CSS display */
    .nav-badge-section { display:none; }
  }

  /* ---------- Sidebar collapsed (desktop only) ---------- */
  @media(min-width:860px){
    body.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);}
    body.sidebar-collapsed .main{margin-left:var(--sidebar-w-collapsed);}
    body.sidebar-collapsed .brand{justify-content:center;padding:24px 0 22px;}
    body.sidebar-collapsed .brand-text{display:none;}
    body.sidebar-collapsed .nav{padding:6px 8px;}
    body.sidebar-collapsed .nav-label{display:none;}
    body.sidebar-collapsed .nav-item{justify-content:center;padding:11px 8px;gap:0;}
    body.sidebar-collapsed .nav-item-label{display:none;}
    body.sidebar-collapsed .nav-item .badge{display:none;}
    body.sidebar-collapsed .badge-dot{display:block;}
    body.sidebar-collapsed .side-foot{padding:12px 8px;}
    body.sidebar-collapsed .side-user{flex-direction:column;align-items:center;gap:6px;padding:10px 6px;}
    body.sidebar-collapsed .side-user-info{display:none;}
  }

  /* ---------- Utilities ---------- */
  .hidden{display:none !important;}
  .text-right{text-align:right;}
  .text-center{text-align:center;}
  .tbl-hide-sm{display:none;}
  @media(min-width:640px){.tbl-hide-sm{display:table-cell;}}

  /* ---------- Flash messages ---------- */
  .flash{border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:18px;}
  .flash.ok {background:oklch(0.95 0.04 195/.5);color:var(--c-teal);border:1px solid oklch(0.85 0.06 195);}
  .flash.err{background:oklch(0.95 0.04 5/.5);color:var(--c-pink);border:1px solid oklch(0.85 0.08 5);}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:10px 18px;border-radius:10px;
    font-family:inherit;font-size:14px;font-weight:700;
    cursor:pointer;border:0;text-decoration:none;
    transition:opacity .15s,transform .1s;white-space:nowrap;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:linear-gradient(90deg,var(--c-violet),oklch(0.55 0.17 300));color:#fff;box-shadow:0 6px 16px -8px var(--c-violet);}
  .btn-primary:hover{opacity:.9;}
  .btn-ghost{background:var(--line-soft);color:var(--ink-soft);}
  .btn-ghost:hover{background:var(--line);}
  .btn-danger-outline{background:oklch(0.95 0.04 5);color:var(--c-pink);}
  .btn-danger-outline:hover{background:oklch(0.9 0.06 5);}
  .btn-sm{padding:7px 12px;font-size:13px;}
  .btn-xs{padding:5px 9px;font-size:12px;}
  .btn-full{width:100%;}
  .btn-icon{
    padding:7px;border-radius:9px;background:transparent;
    color:var(--ink-soft);border:0;cursor:pointer;font-family:inherit;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
  }
  .btn-icon:hover{background:var(--line-soft);color:var(--primary);}
  .btn-icon.danger:hover{background:oklch(0.95 0.04 5);color:var(--c-pink);}
  .btn-icon.success:hover{background:oklch(0.95 0.04 195);color:var(--c-teal);}
  .btn-icon svg{width:16px;height:16px;display:block;}

  /* ---------- Form components ---------- */
  .f-label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
  .f-label .hint{display:block;font-size:.8em;font-weight:400;color:var(--ink-faint);margin-top:2px;}
  .f-input,.f-select,.f-textarea{
    width:100%;border:1px solid var(--line);background:var(--card);
    border-radius:10px;padding:10px 12px;
    font-family:inherit;font-size:14px;color:var(--ink);
    outline:none;transition:border .15s,box-shadow .15s;
    box-sizing:border-box;
  }
  .f-input::placeholder{color:var(--ink-faint);}
  .f-input:focus,.f-select:focus,.f-textarea:focus{
    border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft);
  }
  .f-input.sm,.f-select.sm{padding:7px 10px;font-size:13px;}
  .f-hint{font-size:12px;color:var(--ink-faint);margin-top:5px;}
  .f-row{display:grid;gap:12px;margin-bottom:12px;}
  .f-row.c2{grid-template-columns:1fr 1fr;}
  .f-row.c14{grid-template-columns:1fr 3fr;}
  .f-row.c4{grid-template-columns:repeat(4,1fr);}
  @media(max-width:640px){
    .f-row.c2,.f-row.c14{grid-template-columns:1fr;}
    .f-row.c4{grid-template-columns:1fr 1fr;}
  }
  .f-section{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;}
  .f-section-title{font-size:13px;font-weight:700;color:var(--ink-soft);margin:0 0 4px;}
  .f-section-hint{font-size:12px;color:var(--ink-faint);margin:0 0 12px;}

  /* ---------- Chips (filtres catégorie) ---------- */
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
  .chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 13px;border-radius:20px;
    font-size:12.5px;font-weight:600;
    border:1px solid var(--line);color:var(--ink-soft);background:var(--card);
    transition:background .15s,border-color .15s,color .15s;text-decoration:none;
  }
  .chip:hover{border-color:var(--primary);color:var(--primary);}
  .chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}
  .chip.active-sub{background:var(--c-violet);color:#fff;border-color:var(--c-violet);}

  /* ---------- Pagination ---------- */
  .pager{display:flex;align-items:center;gap:3px;}
  .pager a,.pager .pg-dots{
    min-width:32px;height:32px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:8px;font-size:13px;font-weight:600;
    color:var(--ink-soft);text-decoration:none;transition:background .15s;
  }
  .pager a:hover{background:var(--line-soft);}
  .pager a.cur{background:var(--primary);color:#fff;}
  .pager .pg-dots{color:var(--ink-faint);cursor:default;}

  /* ---------- Tab bar ---------- */
  .tab-bar{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px;}
  .tab-btn{flex:1;padding:9px 14px;border-radius:9px;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-faint);cursor:pointer;transition:background .15s,color .15s;}
  .tab-btn:hover{color:var(--ink-soft);}
  .tab-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1);}

  /* ---------- Form/history two-column layout ---------- */
  .grid-form{display:grid;grid-template-columns:5fr 7fr;gap:20px;align-items:start;}
  @media(max-width:860px){.grid-form{grid-template-columns:1fr;}}

  /* ---------- Form extras ---------- */
  .f-row.c3{grid-template-columns:repeat(3,1fr);}
  .f-textarea{resize:vertical;min-height:72px;}
  @media(max-width:640px){.f-row.c3{grid-template-columns:1fr 1fr;}}

  /* ---------- Table responsive ---------- */
  .tbl-hide-md{display:none;}
  @media(min-width:900px){.tbl-hide-md{display:table-cell;}}
  .tbl-sm-only{display:inline;}
  @media(min-width:640px){.tbl-sm-only{display:none;}}

  /* ---------- Per-page links ---------- */
  .pp-link{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:7px;font-size:12.5px;font-weight:700;font-family:monospace;color:var(--ink-soft);text-decoration:none;transition:background .15s;padding:0 6px;}
  .pp-link:hover{background:var(--line-soft);}
  .pp-link.cur{background:var(--primary);color:#fff;}

  /* ---------- KPI filter buttons (alertes) ---------- */
  .kpi-card{
    display:flex;align-items:center;gap:13px;
    background:var(--card);border-radius:var(--radius);
    box-shadow:var(--shadow);border:1px solid var(--line-soft);
    padding:16px 18px;
    font-family:inherit;cursor:pointer;text-align:left;width:100%;
    transition:box-shadow .15s,opacity .15s,outline .15s;
  }
  .kpi-card:hover{box-shadow:0 4px 14px -6px rgba(0,0,0,.18);}
  .kpi-card .kpi-num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-size:18px;font-weight:800;}
  .kpi-card .kpi-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 3px;}
  .kpi-card .kpi-sub{font-size:12px;margin:0;}
  .kpi-active{outline:3px solid var(--primary);outline-offset:2px;}
  .kpi-dimmed{opacity:.5;}

  /* ---------- Multi-column layouts ---------- */
  .grid-params{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
  .grid-2eq{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
  @media(max-width:860px){
    .grid-params{grid-template-columns:1fr;}
    .grid-2eq{grid-template-columns:1fr;}
  }

  /* ---------- Heatmap légende ---------- */
  .heatmap-legend{display:flex;gap:.4rem;align-items:center;justify-content:flex-end;margin:.75rem 0 1rem;font-size:.85em;color:var(--ink-soft);}
  .heatmap-legend .cell{width:12px;height:12px;border-radius:3px;background:var(--primary);flex-shrink:0;}

  /* ---------- Responsive ---------- */
  @media (max-width:1100px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .grid-2{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:1fr;}
  }
  @media (max-width:860px){
    .sidebar{transform:translateX(-100%);box-shadow:0 0 60px rgba(0,0,0,.4);}
    body.nav-open .sidebar{transform:translateX(0);}
    body.nav-open .scrim{opacity:1;pointer-events:auto;}
    .main{margin-left:0;}
    .content{padding:20px 16px;}
    .topbar{padding:12px 16px;}
  }
  @media (max-width:560px){
    .stats{grid-template-columns:1fr;}
    .search{display:none;}
    .page-title p{display:none;}
  }