/* ============================================================================
   COLEMAN & CO. — CATALOG SECTION (#section-catalog)
   Silk-glass design system for the unified Catalog section (Products & Stock,
   Store Preview, Purchase Orders). Every selector is namespaced under
   #section-catalog to prevent style leaks to other sections.
   ============================================================================ */
#section-catalog {
  --cat-glass: rgba(255,255,255,0.13);
  --cat-glass-edge: rgba(255,255,255,0.5);
  --cat-radius: 34px;
  --cat-blue-1: #3f6fc4;
  --cat-blue-2: #7fa6dd;
  --cat-green: #bff0cc;
  --cat-green-bg: rgba(124,224,168,0.25);
  --cat-warm: #f8b88a;
  --cat-warm-bg: rgba(248,184,138,0.25);
  --cat-red: #ff8888;
  --cat-red-bg: rgba(255,100,100,0.2);
  --cat-text: #15315c;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--cat-text);
}
#section-catalog .cat-glass{
  background:var(--cat-glass);
  backdrop-filter:blur(42px) saturate(160%);
  -webkit-backdrop-filter:blur(42px) saturate(160%);
  border:2px solid var(--cat-glass-edge);
  border-radius:var(--cat-radius);
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 30px 60px -20px rgba(30,40,60,.45),0 12px 24px -12px rgba(30,40,60,.30);
  position:relative;
}
#section-catalog .cat-glass::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 40%);
}
/* ── Header ── */
#section-catalog .cat-head{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;margin-bottom:24px}
#section-catalog .cat-head h1{font-size:18px;font-weight:600;letter-spacing:-.3px}
#section-catalog .cat-head .cat-badge{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;opacity:.7}
/* ── Info banner ── */
#section-catalog .cat-note{
  padding:14px 22px;border-radius:20px;margin:0 0 20px;
  background:rgba(63,111,196,.25);border:1.5px solid rgba(255,255,255,.3);
  font-size:13px;font-weight:300;line-height:1.6;display:flex;align-items:center;gap:14px;
}
#section-catalog .cat-note b{font-weight:600}
#section-catalog .cat-note .cat-tag{background:rgba(255,255,255,.15);padding:3px 10px;border-radius:8px;font-size:10px;white-space:nowrap}
/* ── Tabs ── */
#section-catalog .cat-tabs{display:flex;gap:8px;margin-bottom:24px}
#section-catalog .cat-tab{
  padding:10px 22px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.3);
  font-family:inherit;font-size:13px;font-weight:600;color:var(--cat-text);letter-spacing:.3px;
  transition:all .25s ease;
}
#section-catalog .cat-tab:hover{background:rgba(255,255,255,.18)}
#section-catalog .cat-tab.active{background:linear-gradient(135deg,var(--cat-blue-1),var(--cat-blue-2));border-color:rgba(255,255,255,.6);color:#fff}
/* ── Panel (tab content) ── */
#section-catalog .cat-panels{}
#section-catalog .cat-panel{display:none}
#section-catalog .cat-panel.active{display:block}
/* ── Panel header (shared across tabs) ── */
#section-catalog .cat-panel-header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 16px}
#section-catalog .cat-panel-header h3{font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;opacity:.8}
#section-catalog .cat-actions{display:flex;gap:10px}
#section-catalog .cat-btn{
  padding:8px 16px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);
  font-family:inherit;font-size:11.5px;font-weight:600;color:var(--cat-text);letter-spacing:.5px;
  transition:all .2s ease;
}
#section-catalog .cat-btn:hover{background:rgba(255,255,255,.2)}
#section-catalog .cat-btn.primary{background:linear-gradient(135deg,var(--cat-blue-1),var(--cat-blue-2));border-color:rgba(255,255,255,.5);color:#fff}
/* ── Products table ── */
#section-catalog .cat-table{width:100%;border-collapse:collapse;font-size:13px}
#section-catalog .cat-table th{
  text-align:left;padding:10px 12px;font-size:10px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;opacity:.7;
  border-bottom:1px solid rgba(255,255,255,.15);
}
#section-catalog .cat-table td{
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle;
}
#section-catalog .cat-table .cat-code{font-size:11px;font-weight:500;opacity:.7;font-family:monospace}
#section-catalog .cat-table .cat-name{font-weight:500}
#section-catalog .cat-table .cat-num{font-weight:300;font-size:15px}
#section-catalog .cat-table .cat-price{font-weight:500;font-size:14px}
#section-catalog .cat-table .cat-poor{color:var(--cat-warm)}
#section-catalog .cat-table .cat-good{color:var(--cat-green)}
#section-catalog .cat-table .cat-action{text-align:center}
#section-catalog .cat-table .cat-action button{
  padding:4px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  font-family:inherit;font-size:10px;font-weight:600;color:var(--cat-text);
  transition:all .2s;
}
#section-catalog .cat-table .cat-action button:hover{background:rgba(255,255,255,.2)}
#section-catalog .cat-table tr:hover{background:rgba(255,255,255,.04)}
#section-catalog .cat-footnote{padding:12px 4px 0;font-size:11px;opacity:.6;display:flex;justify-content:space-between}
/* ── Store Preview product cards ── */
#section-catalog .store-grid,
#section-inventory .store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
#section-catalog .product-card{
  padding:20px 16px;border-radius:26px;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  cursor:pointer;transition:all .35s cubic-bezier(.34,1.4,.5,1);
}
#section-catalog .product-card:hover{transform:translateY(-6px) rotate(.4deg);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
#section-catalog .product-card .cat-pc-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--cat-blue-1),var(--cat-blue-2));display:grid;place-items:center;font-size:20px}
#section-catalog .product-card .cat-pn{font-size:14px;font-weight:600}
#section-catalog .product-card .cat-pm{font-size:12px;opacity:.7}
#section-catalog .product-card .cat-pp{font-size:20px;font-weight:200;margin-top:4px}
#section-catalog .product-card .cat-pp strong{font-weight:600;font-size:22px}
#section-catalog .product-card .cat-tag{
  font-size:9px;padding:2px 9px;border-radius:9px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;
  background:var(--cat-green-bg);color:var(--cat-green);
}
#section-catalog .product-card .cat-tag.low{background:var(--cat-warm-bg);color:var(--cat-warm)}
#section-catalog .product-card .cat-tag.out{background:var(--cat-red-bg);color:var(--cat-red)}
/* ── Purchase Orders cards ── */
#section-catalog .order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
#section-catalog .order-card{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
#section-catalog .order-card .cat-or-head{display:flex;justify-content:space-between;align-items:center}
#section-catalog .order-card .cat-or-id{font-size:11px;font-weight:600;opacity:.7;font-family:monospace}
#section-catalog .order-card .cat-or-status{
  font-size:9px;padding:2px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;
}
#section-catalog .order-card .cat-or-status.done{background:var(--cat-green-bg);color:var(--cat-green)}
#section-catalog .order-card .cat-or-status.progress{background:var(--cat-warm-bg);color:var(--cat-warm)}
#section-catalog .order-card .cat-or-status.pending{background:rgba(255,255,255,.12);color:var(--cat-text)}
#section-catalog .order-card .cat-or-items{font-size:12px;opacity:.8;line-height:1.6}
#section-catalog .order-card .cat-or-total{font-size:22px;font-weight:200}
#section-catalog .order-card .cat-or-total strong{font-weight:600}
#section-catalog .order-card .cat-or-actions{display:flex;gap:8px;margin-top:4px}
#section-catalog .order-card .cat-or-actions button{
  padding:6px 14px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  font-family:inherit;font-size:10.5px;font-weight:600;color:var(--cat-text);
  transition:all .2s;
}
#section-catalog .order-card .cat-or-actions button:hover{background:rgba(255,255,255,.2)}
/* ── Footer ── */
#section-catalog .cat-footer{
  margin-top:20px;padding:14px 22px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  font-size:12px;opacity:.7;text-align:center;
}

/* ============================================================================
   COLEMAN & CO. — APPROVED "COMMAND CENTER" OVERVIEW (cg- namespace)
   This is the design Brandon approved (_dashboard-full-preview.html), ported
   verbatim with every class prefixed cg- so it cannot collide with the
   existing admin-dashboard stylesheet. Fed real live data by admin-glance-sync.js.
   ============================================================================ */

#ccGlance{--cg-slate-1:#a5b4c5;--cg-slate-2:#b8c5d4;--cg-peach-1:#7fa6dd;--cg-peach-2:#6b92d0;--cg-flow-1:#3f6fc4;--cg-flow-2:#4a7ad0;--cg-glass:rgba(255,255,255,0.15);--cg-glass-edge:rgba(255,255,255,0.55);--cg-radius:34px;
  font-family:'Outfit',system-ui,sans-serif;color:#fff;position:relative;z-index:1;display:block;}

/* glass primitive */
#ccGlance .cg-glass{background:var(--cg-glass);backdrop-filter:blur(42px) saturate(160%);-webkit-backdrop-filter:blur(42px) saturate(160%);border:2px solid var(--cg-glass-edge);border-radius:var(--cg-radius);box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 30px 60px -20px rgba(30,40,60,.45),0 12px 24px -12px rgba(30,40,60,.30);position:relative;transition:transform .5s cubic-bezier(.34,1.4,.5,1),box-shadow .5s ease}
#ccGlance .cg-glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 40%)}

#ccGlance .cg-stack{display:flex;flex-direction:column;gap:20px;min-width:0;max-width:none;margin:0}

/* topbar */
#ccGlance .cg-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 26px}
#ccGlance .cg-k{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:600;opacity:.8}
#ccGlance .cg-top-actions{display:flex;align-items:center;gap:12px}
#ccGlance .cg-searchbox{display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:26px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.38);font-size:13px;min-width:220px;opacity:.85}
#ccGlance .cg-who{display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:26px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.4);font-size:12.5px;font-weight:500}
#ccGlance .cg-who .cg-dot{width:8px;height:8px;border-radius:50%;background:#7CE0A8;box-shadow:0 0 9px #7CE0A8}

/* glance hero */
#ccGlance .cg-glance{display:flex;gap:30px;padding:30px 34px;align-items:center}
#ccGlance .cg-left{flex:1.25}
#ccGlance .cg-kick{font-size:11px;letter-spacing:4px;text-transform:uppercase;font-weight:600;opacity:.8}
#ccGlance .cg-glance h2{font-size:34px;font-weight:300;line-height:1.05;letter-spacing:-.4px;margin-top:4px;text-shadow:0 3px 16px rgba(30,40,60,.3)}
#ccGlance .cg-glance h2 b{font-weight:700}
#ccGlance .cg-sub{font-size:14px;font-weight:300;opacity:.9;margin-top:8px;max-width:46ch}
#ccGlance .cg-qa{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}
#ccGlance .cg-qbtn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:16px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.3px;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border:1.5px solid rgba(255,255,255,.45);box-shadow:0 8px 20px -8px rgba(30,40,60,.4),0 1px 0 rgba(255,255,255,.4) inset;transition:transform .35s cubic-bezier(.34,1.5,.5,1),box-shadow .35s ease}
#ccGlance .cg-qbtn:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 16px 30px -10px rgba(63,111,196,.5),0 1px 0 rgba(255,255,255,.5) inset}
#ccGlance .cg-qbtn.cg-warm{background:linear-gradient(135deg,var(--cg-peach-1),var(--cg-flow-1));border-color:rgba(255,255,255,.5)}
#ccGlance .cg-gmetrics{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#ccGlance .cg-gm{padding:16px;border-radius:24px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);display:flex;flex-direction:column;gap:4px;transition:transform .4s cubic-bezier(.34,1.4,.5,1)}
#ccGlance .cg-gm:hover{transform:translateY(-5px)}
#ccGlance .cg-gm .cg-l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;opacity:.82}
#ccGlance .cg-gm .cg-v{font-size:30px;font-weight:200;line-height:1;text-shadow:0 3px 14px rgba(30,40,60,.3)}
#ccGlance .cg-gm .cg-v b{font-weight:700}
#ccGlance .cg-gm .cg-t{font-size:11px;font-weight:500;opacity:.88}
#ccGlance .cg-gm .cg-up{color:#bfeccf}

/* two-col */
#ccGlance .cg-grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
#ccGlance .cg-grid2.cg-even{grid-template-columns:1fr 1fr}
#ccGlance .cg-panel{padding:24px 26px}
#ccGlance .cg-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
#ccGlance .cg-sec-head h4{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;opacity:.92}
#ccGlance .cg-sec-head a{font-size:11.5px;font-weight:500;opacity:.8;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;cursor:pointer}

/* practice pulse feed */
#ccGlance .cg-feed{display:flex;flex-direction:column;gap:10px}
#ccGlance .cg-row{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:18px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.28);transition:transform .3s ease,background .3s ease;cursor:pointer}
#ccGlance .cg-row:hover{transform:translateX(5px);background:rgba(255,255,255,.18)}
#ccGlance .cg-row .cg-rico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:16px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4)}
#ccGlance .cg-row .cg-rbody{flex:1;min-width:0}
#ccGlance .cg-row .cg-rlabel{font-size:13.5px;font-weight:600}
#ccGlance .cg-row .cg-rmeta{font-size:11.5px;opacity:.78;font-weight:300}
#ccGlance .cg-row .cg-rcount{font-size:18px;font-weight:700;padding:2px 11px;border-radius:13px;background:linear-gradient(135deg,var(--cg-peach-1),var(--cg-flow-1));min-width:38px;text-align:center}
#ccGlance .cg-row .cg-rcount.cg-alert{background:linear-gradient(135deg,#e8c478,#d6a84c);color:#3a2f12}

/* consults */
#ccGlance .cg-appt{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18)}
#ccGlance .cg-appt:last-child{border-bottom:none}
#ccGlance .cg-appt .cg-time{font-size:12.5px;font-weight:700;width:58px;opacity:.95}
#ccGlance .cg-appt .cg-det .cg-n{font-size:13.5px;font-weight:600}
#ccGlance .cg-appt .cg-det .cg-tt{font-size:11.5px;opacity:.78;font-weight:300}
#ccGlance .cg-empty{padding:18px 4px;opacity:.7;font-size:13px;font-weight:300}

/* telehealth */
#ccGlance .cg-tele-feature{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:24px;background:linear-gradient(135deg,rgba(63,111,196,.4),rgba(127,166,221,.25));border:1.5px solid rgba(255,255,255,.5);margin-bottom:14px;box-shadow:0 10px 28px -14px rgba(63,111,196,.5)}
#ccGlance .cg-tele-feature .cg-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--cg-peach-1),var(--cg-flow-1));display:grid;place-items:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.6)}
#ccGlance .cg-tele-feature .cg-info{flex:1;min-width:0}
#ccGlance .cg-tele-feature .cg-info .cg-nm{font-size:16px;font-weight:700}
#ccGlance .cg-tele-feature .cg-info .cg-mt{font-size:12px;opacity:.85}
#ccGlance .cg-tele-feature .cg-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:4px}
#ccGlance .cg-tele-feature .cg-live .cg-ld{width:7px;height:7px;border-radius:50%;background:#7CE0A8;box-shadow:0 0 8px #7CE0A8;animation:cgpulse 1.6s infinite}
@keyframes cgpulse{0%,100%{opacity:1}50%{opacity:.35}}
#ccGlance .cg-join{padding:12px 22px;border-radius:16px;font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;cursor:pointer;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.6);box-shadow:0 8px 20px -8px rgba(30,40,60,.4);transition:transform .3s ease}
#ccGlance .cg-join:hover{transform:scale(1.05)}
#ccGlance .cg-tele-q{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:13px}
#ccGlance .cg-tele-q:last-child{border-bottom:none}
#ccGlance .cg-tele-q .cg-qt{font-weight:700;width:54px;opacity:.95;font-size:12.5px}
#ccGlance .cg-tele-q .cg-qn{flex:1;font-weight:500}
#ccGlance .cg-tele-q .cg-qtag{font-size:10.5px;padding:3px 10px;border-radius:11px;background:rgba(255,255,255,.16);font-weight:600;opacity:.9}

/* chat */
#ccGlance .cg-chat-thread{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:16px;transition:background .25s ease;cursor:pointer}
#ccGlance .cg-chat-thread:hover{background:rgba(255,255,255,.12)}
#ccGlance .cg-chat-thread .cg-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--cg-slate-2),var(--cg-peach-1));display:grid;place-items:center;font-size:14px;font-weight:700;color:#2a3645;flex-shrink:0;position:relative}
#ccGlance .cg-chat-thread .cg-av .cg-ud{position:absolute;top:-1px;right:-1px;min-width:13px;height:13px;padding:0 3px;border-radius:50%;background:var(--cg-flow-1);border:2px solid #aeb9c8;font-size:8px;display:grid;place-items:center;font-weight:700}
#ccGlance .cg-chat-thread .cg-body{flex:1;min-width:0}
#ccGlance .cg-chat-thread .cg-body .cg-tn{font-size:13.5px;font-weight:600;display:flex;justify-content:space-between}
#ccGlance .cg-chat-thread .cg-body .cg-tn .cg-tm{font-size:11px;opacity:.7;font-weight:400}
#ccGlance .cg-chat-thread .cg-body .cg-sn{font-size:12px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ccGlance .cg-chat-reply{display:flex;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
#ccGlance .cg-chat-reply input{flex:1;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);border-radius:16px;padding:11px 16px;color:#fff;font-family:inherit;font-size:13px}
#ccGlance .cg-chat-reply input::placeholder{color:rgba(255,255,255,.6)}
#ccGlance .cg-chat-reply .cg-send{width:44px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--cg-peach-1),var(--cg-flow-1));color:#fff;font-size:16px;cursor:pointer}

/* client chart thumbnails */
#ccGlance .cg-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
#ccGlance .cg-thumb{padding:18px 14px;border-radius:26px;background:rgba(255,255,255,.11);border:1.5px solid rgba(255,255,255,.3);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.4,.5,1),box-shadow .4s ease;text-align:center}
#ccGlance .cg-thumb:hover{transform:translateY(-7px) rotate(.5deg);box-shadow:0 28px 50px -20px rgba(63,111,196,.4)}
#ccGlance .cg-thumb .cg-pic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:700;color:#2a3645;border:2.5px solid rgba(255,255,255,.55);box-shadow:0 8px 18px -8px rgba(30,40,60,.4)}
#ccGlance .cg-thumb .cg-nm{font-size:13.5px;font-weight:600}
#ccGlance .cg-thumb .cg-meta{font-size:10.5px;opacity:.78}
#ccGlance .cg-thumb .cg-tag{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;padding:2px 9px;border-radius:9px}
#ccGlance .cg-thumb .cg-tag.cg-active{background:rgba(124,224,168,.3)}
#ccGlance .cg-thumb .cg-tag.cg-due{background:linear-gradient(135deg,var(--cg-flow-1),var(--cg-flow-2))}

/* responsive */
@media (max-width:980px){
  #ccGlance .cg-glance{flex-direction:column;align-items:stretch}
  #ccGlance .cg-grid2,#ccGlance .cg-grid2.cg-even{grid-template-columns:1fr}
  #ccGlance .cg-thumbs{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  #ccGlance .cg-tele-feature .cg-live .cg-ld{animation:none}
}

/* ============================================================================
   Hide the legacy overview markup — keep it in the DOM (so the data engine
   keeps writing into #statsGrid + pulse* IDs) but visually replace it with the
   approved #ccGlance design. Everything inside #section-overview EXCEPT
   #ccGlance is hidden.
   ============================================================================ */
#section-overview > *:not(#ccGlance){display:none !important;}
/* #ccGlance must always show on the overview section */
#section-overview.page-section.active #ccGlance{display:block !important;}
/* let the silk show: kill the old opaque atmosphere + content chrome on overview */
main[data-cc-section="overview"] .cc-atmosphere,
.cc-atmosphere{background:transparent !important;background-color:transparent !important;}
.cc-atmosphere::before,.cc-atmosphere::after{content:none !important;background:none !important;}
.layout::before{content:none !important;}
body{background:#9fb0c4 !important;}
main[data-cc-section="overview"] .content,
main[data-cc-section="overview"] .cc-hero{background:transparent !important;border:none !important;box-shadow:none !important;}
/* the overview hero (#ccHero) is the old welcome banner — hide it on overview, ccGlance has its own */
main[data-cc-section="overview"] #ccHero{display:none !important;}

/* ============================================================================
   PERSISTENT COLLAPSIBLE GLASS SIDEBAR (Brandon wants the mockup's left rail
   back, top quick-buttons folded into it, ☰ collapses/expands it).
   The sidebar markup already exists (#adminNavDrawer) wired to showSection.
   We convert it from a slide-in drawer into an always-present glass column.
   ============================================================================ */
#appLayout.layout{display:flex !important;gap:20px;padding:20px;align-items:flex-start;background:transparent !important;}

/* sidebar -> in-flow glass column, always visible */
#adminNavDrawer.sidebar{
  position:sticky !important;top:20px !important;left:auto !important;bottom:auto !important;
  transform:none !important;flex-shrink:0;width:248px;z-index:5 !important;
  max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;
  background:rgba(255,255,255,0.13) !important;
  backdrop-filter:blur(42px) saturate(160%) !important;-webkit-backdrop-filter:blur(42px) saturate(160%) !important;
  border:2px solid rgba(255,255,255,0.5) !important;border-right:2px solid rgba(255,255,255,0.5) !important;
  border-radius:30px !important;
  box-shadow:0 2px 0 rgba(255,255,255,.32) inset,0 30px 60px -20px rgba(30,40,60,.42) !important;
  transition:width .28s cubic-bezier(.4,0,.2,1),padding .28s ease !important;
}
#adminNavDrawer.sidebar::before{display:none !important;}
#adminNavDrawer .sidebar-eyebrow{color:#fff !important;}
#adminNavDrawer .sidebar-name,#adminNavDrawer .sidebar-role{color:rgba(255,255,255,.82) !important;}
#adminNavDrawer .sidebar-mono{background:rgba(255,255,255,.92) !important;border-radius:13px !important;padding:5px !important;content:normal !important;}
#adminNavDrawer .nav-section-label{color:rgba(255,255,255,.6) !important;}
#adminNavDrawer .nav-item{color:#fff !important;background:transparent !important;border:none !important;border-radius:13px !important;}
#adminNavDrawer .nav-item svg{opacity:.85;color:#fff !important;}
#adminNavDrawer .nav-item:hover{background:rgba(255,255,255,.14) !important;transform:translateX(3px);}
#adminNavDrawer .nav-item.active{background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.12)) !important;border:1.5px solid rgba(255,255,255,.45) !important;font-weight:600 !important;}
#adminNavDrawer .nav-badge-pill{background:linear-gradient(135deg,var(--cg-flow-1,#3f6fc4),#7fa6dd) !important;color:#fff !important;}
#adminNavDrawer .sidebar-user-name{color:#fff !important;}
#adminNavDrawer .sidebar-user-role{color:rgba(255,255,255,.75) !important;}
#adminNavDrawer .sidebar-avatar{background:rgba(255,255,255,.2) !important;border:1.5px solid rgba(255,255,255,.45) !important;color:#fff !important;}
#adminNavDrawer .btn-signout{background:rgba(255,255,255,.14) !important;border:1.5px solid rgba(255,255,255,.35) !important;color:#fff !important;border-radius:13px !important;}
#adminNavDrawer .cc-visual-chrome-lbl,#adminNavDrawer .cc-visual-chrome-hint{color:rgba(255,255,255,.8) !important;}

/* collapsed state: rail shrinks to icons only */
#appLayout.cc-sb-collapsed #adminNavDrawer.sidebar{width:74px !important;padding:18px 10px !important;}
#appLayout.cc-sb-collapsed #adminNavDrawer .sidebar-brand-text,
#appLayout.cc-sb-collapsed #adminNavDrawer .nav-item span,
#appLayout.cc-sb-collapsed #adminNavDrawer .nav-section-label,
#appLayout.cc-sb-collapsed #adminNavDrawer .sidebar-footer > *:not(.btn-signout),
#appLayout.cc-sb-collapsed #adminNavDrawer .nav-item{font-size:0 !important;}
#appLayout.cc-sb-collapsed #adminNavDrawer .nav-item{justify-content:center !important;padding:11px 0 !important;}
#appLayout.cc-sb-collapsed #adminNavDrawer .nav-item svg{font-size:initial;width:19px;height:19px;}
#appLayout.cc-sb-collapsed #adminNavDrawer .nav-badge-pill{display:none !important;}
#appLayout.cc-sb-collapsed #adminNavDrawer .sidebar-footer{display:none !important;}

/* the drawer backdrop is irrelevant now */
#navDrawerBackdrop{display:none !important;}

/* hide the duplicate top quick-rail — its actions now live in the sidebar */
.topbar-quick-rail{display:none !important;}
/* Brandon asked to remove the whole top bar — the sidebar holds everything now.
   (#statsGrid stays in the DOM as a hidden data mirror; it's inside the topbar
   so we keep it rendered but invisible by only hiding the visible chrome.) */
.topbar.topbar--minimal{
  min-height:0 !important;height:0 !important;padding:0 !important;margin:0 !important;
  border:none !important;box-shadow:none !important;background:transparent !important;overflow:hidden !important;
}
.topbar.topbar--minimal::after,.topbar.topbar--minimal::before{display:none !important;content:none !important;}
.topbar-left{display:none !important;}
/* keep the realtime status + hidden stats functional but invisible */
.topbar.topbar--minimal #ccRealtimeStatus{display:none !important;}

/* sidebar collapse toggle now lives inside the sidebar header */
#adminNavDrawer .cc-sb-toggle{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:12px;padding:9px 12px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);color:#fff;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;
  transition:background .2s ease,transform .2s ease;
}
#adminNavDrawer .cc-sb-toggle:hover{background:rgba(255,255,255,.22);}
#adminNavDrawer .cc-sb-toggle svg{width:16px;height:16px;flex-shrink:0;}
#appLayout.cc-sb-collapsed #adminNavDrawer .cc-sb-toggle span{display:none;}
#appLayout.cc-sb-collapsed #adminNavDrawer .cc-sb-toggle{padding:9px 0;}
/* main content gains the space the top bar used to take */
#ccMainContent.main{flex:1;min-width:0;padding-top:0 !important;}

/* ============================================================================
   TASK 1: Frosted-glass back-to-dashboard pills for ALL inner sections
   The original .inv-back-pill has a low-contrast cyan-on-cyan-tint that blends
   into the blue silk background — replaced below with a visible frosted-glass
   pill consistent with the approved cg- design aesthetic.
   ============================================================================ */
/* Make the back buttons visible on the blue silk — frosted glass pill */
.inv-back-pill,
button.inv-back-pill,
a.inv-back-pill {
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30,40,60,0.25), 0 1px 0 rgba(255,255,255,0.35) inset !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  padding: 7px 14px 7px 12px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  transition: all 0.2s cubic-bezier(0.34,1.5,0.5,1) !important;
}
.inv-back-pill:hover,
button.inv-back-pill:hover {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.7) !important;
  transform: translateX(-2px) !important;
  box-shadow: 0 8px 22px rgba(30,40,60,0.35), 0 1px 0 rgba(255,255,255,0.45) inset !important;
}
.inv-back-pill svg {
  stroke: #FFFFFF !important;
  width: 12px !important;
  height: 12px !important;
  opacity: 0.9 !important;
}

/* Also fix the cc-hero-return button (top hero control) — give it same
   frosted-glass pill treatment instead of the dark/cyan bg */
main.main:not([data-cc-section="overview"]) .cc-hero-return {
  display: inline-flex !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30,40,60,0.25), 0 1px 0 rgba(255,255,255,0.35) inset !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  transition: all 0.2s cubic-bezier(0.34,1.5,0.5,1) !important;
  z-index: 15 !important;
}
main.main:not([data-cc-section="overview"]) .cc-hero-return:hover {
  background: rgba(255,255,255,0.30) !important;
  border-color: rgba(255,255,255,0.75) !important;
  box-shadow: 0 10px 28px rgba(30,40,60,0.35), 0 1px 0 rgba(255,255,255,0.5) inset !important;
}

/* on small screens, collapse to icon rail by default look stays usable */
@media (max-width:820px){
  #adminNavDrawer.sidebar{width:64px;padding:16px 8px;}
  #adminNavDrawer .sidebar-brand-text,#adminNavDrawer .nav-item span,#adminNavDrawer .nav-section-label{font-size:0 !important;}
  #adminNavDrawer .nav-item{justify-content:center;}
}