/* Pitchtivo dashboard refresh: crisp surfaces, stronger hierarchy, optional dark mode. */
#app-shell{--dash-bg:#f3f5f8;--dash-surface:#fff;--dash-surface-2:#f8fafc;--dash-line:#e5e9ef;--dash-ink:#17221d;--dash-muted:#738078;--dash-shadow:0 10px 28px rgba(25,37,31,.055);background:var(--dash-bg);color:var(--dash-ink)}
#app-shell .main{background:var(--dash-bg);min-height:100vh}
#app-shell .sidebar{background:#20242d;color:#f6f7fb;border-right:1px solid rgba(255,255,255,.05);padding:22px 15px 14px}
#app-shell .brand{padding-bottom:25px}
#app-shell .nav{gap:5px}
#app-shell .workspace-label{color:#a5adba}
#app-shell .nav-item{min-height:42px;border-radius:12px;color:#c3c9d3;font-weight:600;font-size:12px}
#app-shell .nav-item:hover{background:#ffffff0c;color:#fff}
#app-shell .nav-item.active{background:#393347;color:#d8b9ff;box-shadow:inset 3px 0 #b486ed}
#app-shell .nav-icon{height:28px;width:28px;display:grid;place-items:center;border-radius:9px;background:#ffffff0c;font-size:15px}
#app-shell .topbar{height:68px;background:var(--dash-surface);border-color:var(--dash-line);padding-inline:clamp(18px,3vw,42px)}
#app-shell .crumb{font-size:12px;color:var(--dash-muted)}
#app-shell .crumb b{color:var(--dash-ink)}
#app-shell .top-actions{gap:12px}
#app-shell .mode-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--dash-line);background:var(--dash-surface);color:var(--dash-ink);border-radius:999px;padding:8px 12px;font-size:11px;font-weight:700;transition:background .18s,border-color .18s,transform .18s}
#app-shell .mode-toggle:hover{background:var(--dash-surface-2);transform:translateY(-1px)}
#app-shell .mode-toggle>span:first-child{font-size:15px;line-height:1}
#app-shell .page-wrap{max-width:1560px;padding:clamp(22px,3vw,38px) clamp(16px,3vw,42px) 28px}
#app-shell .page-header{margin-bottom:27px}
#app-shell .page-header h1{font-size:clamp(25px,2.4vw,34px);letter-spacing:-1.05px}
#app-shell .page-header p{font-size:13px;line-height:1.55}
#app-shell .eyebrow{font-size:10px;letter-spacing:1.25px}
#app-shell .card{background:var(--dash-surface);border:1px solid var(--dash-line);border-radius:18px;box-shadow:var(--dash-shadow)}
#app-shell .stat-card{padding:19px 20px;border-radius:17px}
#app-shell .stat-value{font-size:clamp(24px,2vw,31px)}
#app-shell .card-head{padding:19px 21px 15px}
#app-shell .card-head h2{font-size:15px}
#app-shell .card-head p{font-size:11px}
#app-shell .button{min-height:39px;border-radius:11px;padding:10px 15px;font-size:11px;transition:transform .16s,box-shadow .16s,background .16s}
#app-shell .button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 18px rgba(21,32,27,.1)}
#app-shell .button-primary{background:#20242d}
#app-shell .button-quiet{background:var(--dash-surface);border-color:var(--dash-line);color:var(--dash-ink)}
#app-shell input:not([type=checkbox]):not([type=radio]):not([type=color]),#app-shell select,#app-shell textarea{border:1px solid var(--dash-line);border-radius:11px;background:var(--dash-surface);color:var(--dash-ink);padding:11px 13px;min-height:42px}
#app-shell input:focus,#app-shell select:focus,#app-shell textarea:focus{outline:0;border-color:#9b7ac4;box-shadow:0 0 0 3px rgba(180,134,237,.18)}
#app-shell .data-table th{background:var(--dash-surface-2);color:var(--dash-muted);border-color:var(--dash-line);padding:13px 17px}
#app-shell .data-table td{border-color:var(--dash-line);padding:14px 17px}
#app-shell .data-table td b{color:var(--dash-ink)}
#app-shell .admin-panel-head h2,#app-shell .section-heading h2{letter-spacing:-.45px}
#app-shell .help-card{border-radius:16px;background:linear-gradient(145deg,#182b24,#202d2a);padding:15px}
#app-shell .notification-popover,#app-shell .popover,#app-shell dialog{border-radius:18px}
#app-shell .page-transition{animation:dash-rise .24s ease both}
@keyframes dash-rise{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:none}}

html[data-color-mode="dark"] body{background:#11141a;color:#edf0f5}
html[data-color-mode="dark"] #app-shell{--dash-bg:#11141a;--dash-surface:#1a1e26;--dash-surface-2:#20252e;--dash-line:#2d333e;--dash-ink:#eef1f5;--dash-muted:#a1a9b5;--dash-shadow:0 12px 32px rgba(0,0,0,.2);background:var(--dash-bg);color:var(--dash-ink);color-scheme:dark}
html[data-color-mode="dark"] #app-shell .main,html[data-color-mode="dark"] #app-shell .page-wrap{background:var(--dash-bg);color:var(--dash-ink)}
html[data-color-mode="dark"] #app-shell .sidebar{background:#0c0f14;border-color:#242a33}
html[data-color-mode="dark"] #app-shell .nav-item{color:#b4bdc9}
html[data-color-mode="dark"] #app-shell .nav-item.active{background:#342b41;color:#dfc8ff}
html[data-color-mode="dark"] #app-shell .topbar{background:#171b22;border-color:var(--dash-line)}
html[data-color-mode="dark"] #app-shell .crumb,html[data-color-mode="dark"] #app-shell .today{color:#a1a9b5}
html[data-color-mode="dark"] #app-shell .crumb b{color:#eef1f5}
html[data-color-mode="dark"] #app-shell .mode-toggle,html[data-color-mode="dark"] #app-shell .button-quiet,html[data-color-mode="dark"] #app-shell .icon-button{background:#20252e;color:#edf0f5;border-color:#373e4a}
html[data-color-mode="dark"] #app-shell .card,html[data-color-mode="dark"] #app-shell .panel{background:var(--dash-surface);border-color:var(--dash-line);color:var(--dash-ink)}
html[data-color-mode="dark"] #app-shell .page-header h1,html[data-color-mode="dark"] #app-shell .card-head h2,html[data-color-mode="dark"] #app-shell .admin-panel-head h2,html[data-color-mode="dark"] #app-shell .section-heading h2,html[data-color-mode="dark"] #app-shell .empty-state b{color:var(--dash-ink)}
html[data-color-mode="dark"] #app-shell .page-header p,html[data-color-mode="dark"] #app-shell .card-head p,html[data-color-mode="dark"] #app-shell .stat-top,html[data-color-mode="dark"] #app-shell .stat-foot{color:var(--dash-muted)}
html[data-color-mode="dark"] #app-shell input:not([type=checkbox]):not([type=radio]):not([type=color]),html[data-color-mode="dark"] #app-shell select,html[data-color-mode="dark"] #app-shell textarea{background:#141820;color:#eef1f5;border-color:#363d49}
html[data-color-mode="dark"] #app-shell input::placeholder,html[data-color-mode="dark"] #app-shell textarea::placeholder{color:#808997}
html[data-color-mode="dark"] #app-shell .data-table th{background:#20252e;color:#aab2bf;border-color:#303641}
html[data-color-mode="dark"] #app-shell .data-table td{color:#c1c8d2;border-color:#2d333e}
html[data-color-mode="dark"] #app-shell .data-table td b{color:#f0f2f6}
html[data-color-mode="dark"] #app-shell .event-row,html[data-color-mode="dark"] #app-shell .stock-row,html[data-color-mode="dark"] #app-shell .task-row,html[data-color-mode="dark"] #app-shell .safety-log-row{border-color:#2d333e}
html[data-color-mode="dark"] #app-shell .date-tile,html[data-color-mode="dark"] #app-shell .order-pill,html[data-color-mode="dark"] #app-shell .stock-meter,html[data-color-mode="dark"] #app-shell .close-dialog{background:#252b35;color:#cbd2dc}
html[data-color-mode="dark"] #app-shell .safety-summary,html[data-color-mode="dark"] #app-shell .stat-icon{background:#252b35;color:#c5dfac}
html[data-color-mode="dark"] #app-shell dialog{background:#1a1e26;color:#edf0f5;border-color:#363d49}
html[data-color-mode="dark"] #app-shell .notification-popover,html[data-color-mode="dark"] #app-shell .popover{background:#1a1e26;color:#edf0f5;border-color:#363d49;box-shadow:0 18px 50px #0008}
html[data-color-mode="dark"] #app-shell .admin-system-summary,html[data-color-mode="dark"] #app-shell .admin-stripe-state,html[data-color-mode="dark"] #app-shell .admin-setting-group,html[data-color-mode="dark"] #app-shell .admin-feature-status>span{background:#20252e;border-color:#363d49;color:#edf0f5}
html[data-color-mode="dark"] #app-shell .admin-site-controls label,html[data-color-mode="dark"] #app-shell .admin-site-controls p,html[data-color-mode="dark"] #app-shell .admin-site-controls small{color:#aab2bf}
html[data-color-mode="dark"] #app-shell .empty-state,html[data-color-mode="dark"] #app-shell footer{color:#929baa}
html[data-color-mode="dark"] #app-shell .tag.grey{background:#2a3039;color:#c4cad3}
html[data-color-mode="dark"] #app-shell .mobile-menu{color:#e5e9ef}
@media(max-width:760px){#app-shell .topbar{padding-inline:13px}#app-shell .top-actions{gap:8px}#app-shell .mode-toggle{padding:8px 10px}#app-shell .mode-toggle-label{display:none}#app-shell .page-wrap{padding:20px 13px 24px}}
@media(prefers-reduced-motion:reduce){#app-shell .page-transition{animation:none!important}}