/* Noble Stable Console v48 — a rebuilt operations workspace, not a cosmetic skin. */
:root{
  --console-bg:#f7f8fc;
  --console-surface:#fff;
  --console-surface-alt:#f1f2f7;
  --console-ink:#222631;
  --console-muted:#737b8b;
  --console-line:#e3e6ee;
  --console-primary:#571087;
  --console-primary-deep:#39055e;
  --console-primary-soft:#f2e8fa;
  --console-action:#f58a17;
  --console-green:#147d55;
  --console-red:#b73a49;
}
body:has(#appView:not(.hidden)){background:var(--console-bg)!important;color:var(--console-ink)!important}
body:has(#appView:not(.hidden)) .shell{max-width:none!important;padding:0!important}
#appView{min-height:100vh;background:var(--console-bg)}
#appView .stable-layout{display:flex;align-items:stretch;gap:0;min-height:100vh}

/* Right rail */
#appView .stable-sidebar{
  position:sticky;top:0;align-self:flex-start;width:268px;flex:0 0 268px;height:100vh;overflow-y:auto;
  padding:0 13px 14px;border:0;border-left:1px solid var(--console-line);border-radius:0;background:#fff;box-shadow:none;z-index:10;
}
#appView .stable-sidebar::before{display:block;height:5px;margin:0 -13px 17px;background:linear-gradient(90deg,#b985d3,var(--console-primary) 42%,#2c0750);content:''}
#appView .stable-side-brand{gap:10px;padding:2px 8px 17px;margin:0 0 12px;border-bottom:1px solid var(--console-line)}
#appView .stable-side-brand img{width:42px;height:42px;padding:3px;object-fit:contain;border-radius:12px;background:#faf7fc;box-shadow:none}
#appView .stable-side-brand b{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;color:var(--console-primary);font-size:15px}
#appView .stable-side-brand small{margin-top:1px;color:#858b98;font-size:10px}
#appView .stable-side-nav{display:flex;flex-direction:column;gap:0}
#appView .stable-nav-group{display:grid;gap:2px;margin:0;padding:0 0 10px}
#appView .stable-nav-group+.stable-nav-group{padding-top:11px;border-top:1px solid #eff0f4}
#appView .stable-nav-group p{margin:0 10px 6px;color:#a18aa9;font-size:9px;font-weight:900;letter-spacing:.1em}
#appView .stable-side-nav a{position:relative;display:flex;align-items:center;gap:9px;min-height:39px;padding:8px 10px;color:#545b6b;border-radius:10px;font-size:11px;font-weight:800;text-decoration:none;transition:color .16s,background .16s}
#appView .stable-side-nav a span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#f1f2f7;color:#7b8290;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700}
#appView .stable-side-nav a:hover,#appView .stable-side-nav a:focus-visible{color:var(--console-primary);background:#f7f4fa;outline:none;transform:none}
#appView .stable-side-nav a:hover span,#appView .stable-side-nav a:focus-visible span{background:#eae0f2;color:var(--console-primary)}
#appView .stable-side-nav a.is-active{color:var(--console-primary);background:var(--console-primary-soft);font-weight:900}
#appView .stable-side-nav a.is-active::after{position:absolute;inset-inline-end:-13px;inset-block:8px;width:3px;border-radius:4px 0 0 4px;background:var(--console-primary);content:''}
#appView .stable-side-nav a.is-active span{background:#fff;color:var(--console-primary);box-shadow:0 6px 13px -10px var(--console-primary)}
#appView .stable-side-nav a.nav-hidden,#appView .stable-side-nav a.console-search-hidden{display:none}
#appView .stable-side-note{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;row-gap:2px;margin:9px 4px 12px;padding:10px;border:1px solid #e8def0;border-radius:12px;background:#fbf8fd;color:#747b89;font-size:9.5px;line-height:1.5}
#appView .stable-side-note b{color:#4d2162;font-size:10px}
#appView .stable-side-note>span:last-child{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#appView .console-online-dot{display:block;width:8px;height:8px;border-radius:50%;background:#15a468;box-shadow:0 0 0 4px #e4f6ed}
#appView .console-account{display:flex;align-items:center;gap:9px;margin:0 4px;padding:11px 8px 2px;border-top:1px solid #eff0f4}
#appView .console-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:linear-gradient(145deg,#653080,#9c6bb4);color:#fff;font-size:12px;font-weight:900}
#appView .console-account b{display:block;max-width:168px;overflow:hidden;color:#313642;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#appView .console-account small{display:block;margin-top:2px;color:#8a919e;font-size:9.5px}

/* Main bar */
#appView .stable-main{min-width:0;flex:1;padding:0 27px 38px;background:var(--console-bg)}
#appView .top{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;min-height:70px;margin:0 -27px 24px;padding:10px 27px;border:0;border-bottom:1px solid var(--console-line);border-radius:0;background:rgba(255,255,255,.94);box-shadow:0 12px 30px -28px rgba(35,28,50,.42);backdrop-filter:blur(14px)}
#appView .console-breadcrumb{display:flex;align-items:center;gap:10px;min-width:160px}
#appView .console-breadcrumb i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#efe3f8,#f8f3fb);color:var(--console-primary);font-size:17px;font-style:normal}
#appView .console-breadcrumb span{display:block;color:#949ba7;font-size:9.5px;font-weight:700}
#appView .console-breadcrumb b{display:block;margin-top:1px;color:var(--console-ink);font-size:13px}
#appView .console-header-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px}
#appView .console-global-search{position:relative;display:block}
#appView .console-global-search span{position:absolute;inset-inline-start:10px;top:8px;color:#858d9a;font-size:16px;pointer-events:none}
#appView .console-global-search input{width:220px;min-height:39px;padding:8px 30px 8px 11px;border:1px solid transparent;border-radius:10px;background:#f3f4f7;color:var(--console-ink);font-size:10.5px;outline:0;transition:.18s}
#appView .console-global-search input:focus{width:260px;border-color:#d6c5e2;background:#fff;box-shadow:0 0 0 3px rgba(87,16,135,.07)}
#appView .tenant-picker{min-width:176px;min-height:39px;padding:8px 10px;border:1px solid #dfe2e9;border-radius:10px;background:#fff;color:#444a56;font-size:10.5px;font-weight:800}
#appView .console-store-action{min-height:39px;padding:8px 11px;border:0;border-radius:10px;background:var(--console-primary);color:#fff;font-size:10.5px;font-weight:900;box-shadow:0 12px 20px -17px var(--console-primary)}
#appView .console-store-action:hover{background:var(--console-primary-deep)}
#appView .top .btn.secondary{min-height:39px;padding:8px 10px;border-color:#e2e2e8;border-radius:10px;background:#fff;color:#6c526d;font-size:10px;box-shadow:none}

/* The custom workspace header had the old layout's visual hierarchy; the top bar replaces it. */
#appView .stable-workspace-head{display:none!important}
#appView .stable-main .stable-nav{display:none!important}

/* Home dashboard */
#appView .stable-hero{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:stretch;min-height:220px;margin:0 0 16px;padding:0;border:1px solid #e0e2e9;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 3px 15px rgba(37,31,54,.035)}
#appView .stable-hero::after{display:none}
#appView .console-hero-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:29px 31px;background:radial-gradient(circle at 0 0,rgba(192,150,222,.19),transparent 23rem),linear-gradient(125deg,#fff 0%,#fdfafe 100%)}
#appView .console-hero-copy::after{position:absolute;inset-inline-start:27px;inset-block-end:-67px;color:rgba(87,16,135,.055);content:'✦';font:190px Georgia,serif;line-height:1}
#appView .console-hero-copy>*{position:relative;z-index:1}
#appView .console-eyebrow{color:var(--console-primary);font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:900;letter-spacing:.1em}
#appView .stable-hero h1{margin:8px 0 7px;color:#20232c;font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;font-size:29px;letter-spacing:-.04em}
#appView .stable-hero p{max-width:585px;margin:0;color:var(--console-muted);font-size:12px;line-height:1.85}
#appView .stable-hero-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:19px}
#appView .stable-hero-actions a{padding:9px 11px;border:1px solid #ded4e4;border-radius:10px;background:#fff;color:#58415e;font-size:10.5px;font-weight:900;text-decoration:none}
#appView .stable-hero-actions a:first-child{border-color:var(--console-primary);background:var(--console-primary);color:#fff}
#appView .console-hero-status{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:25px;background:linear-gradient(155deg,#350653,#701298);color:#fff}
#appView .console-hero-status::before{position:absolute;inset:-93px -70px auto auto;width:210px;height:210px;border:1px solid rgba(255,255,255,.13);border-radius:50%;content:''}
#appView .console-hero-status>*{position:relative;z-index:1}
#appView .console-hero-status>span{color:#e5c8f4;font-size:10px;font-weight:800}
#appView .console-hero-status>b{margin:7px 0 11px;font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;font-size:23px}
#appView .console-hero-status p{margin:0;color:#f2e8f7;font-size:10.5px;line-height:1.65}
#appView .console-hero-status p i{display:inline-block;width:7px;height:7px;margin-inline-end:5px;border-radius:50%;background:#50e3a4}
#appView .console-hero-status>div{display:flex;flex-direction:column;gap:3px;margin-top:22px;padding-top:13px;border-top:1px solid rgba(255,255,255,.16)}
#appView .console-hero-status small{color:#cfafdF;font-size:9px}
#appView .console-hero-status strong{font-size:10.5px}
#appView #stableMetrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0 0 16px}
#appView #stableMetrics .card{position:relative;min-height:111px;padding:18px;border:1px solid #e3e5eb;border-radius:15px;background:#fff;box-shadow:0 2px 10px rgba(35,31,49,.025)}
#appView #stableMetrics .card::before{position:absolute;inset:16px auto auto 16px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#eee3f5;color:var(--console-primary);content:'◈';font-size:12px}
#appView #stableMetrics .card:nth-child(2)::before{background:#e1f2ed;color:var(--console-green);content:'↗'}
#appView #stableMetrics .card:nth-child(3)::before{background:#fff0df;color:#b76512;content:'◫'}
#appView #stableMetrics .metric{margin-top:7px;color:#232631;font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;font-size:27px}
#appView #stableMetrics .note{color:#7b8290;font-size:10.5px}

/* Work areas: every live module is retained but sits in the new console system. */
#appView .stable-main .card,#appView .stable-main .stable-daily-focus{border:1px solid #e3e6ed;border-radius:16px;background:#fff;box-shadow:0 3px 13px rgba(33,35,46,.035)}
#appView .stable-main .card{padding:20px}
#appView .stable-main .card:hover{transform:none;box-shadow:0 5px 16px rgba(33,35,46,.045)}
#appView .section-title{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #edf0f4}
#appView .section-title h2,#appView .section-title h3{color:var(--console-ink);font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;font-size:17px}
#appView .note{color:var(--console-muted)}
#appView .pill{padding:5px 9px;border:1px solid #eadff2;background:#f7f0fb;color:#6a377d;font-size:9px}
#appView .btn{border-radius:10px;background:linear-gradient(135deg,#3e075e,var(--console-primary));box-shadow:0 12px 20px -17px var(--console-primary)}
#appView .btn.secondary{border-color:#dfe2e8;border-radius:10px;background:#fff;color:#5d3b67;box-shadow:none}
#appView .btn.warn{background:linear-gradient(135deg,#b76f15,var(--console-action))}
#appView .btn.danger{background:linear-gradient(135deg,#942437,#c9525d)}
#appView .field label{color:#3e4551}
#appView .field input,#appView .field select,#appView .field textarea,#appView #orderSearch,#appView #orderStatusFilter{border-color:#dde1e8!important;border-radius:10px!important;background:#fff!important;color:#333945!important}
#appView .field input:focus,#appView .field select:focus,#appView .field textarea:focus{border-color:#ad82c0!important;box-shadow:0 0 0 3px rgba(87,16,135,.08)!important}
#appView .table-wrap{border-color:#e7e9ef;border-radius:12px}
#appView .table th{padding:12px;background:#f7f8fb;color:#717987;font-size:10px}
#appView .table td{padding:12px;border-bottom-color:#edf0f3;color:#414751}
#appView .split{gap:15px}

/* Live command-focus cards / operation, shop, and theme modules. */
#appView .stable-daily-focus{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr));gap:0;overflow:hidden;margin:0 0 16px;padding:0}
#appView .stable-focus-intro{padding:17px 19px;background:linear-gradient(135deg,#faf6fc,#fff)}
#appView .stable-focus-intro small{color:var(--console-primary)}
#appView .stable-focus-intro b{color:#2b2e38}
#appView .stable-focus-card{min-height:120px;padding:17px;border-inline-start:1px solid #e8eaf0;background:#fff}
#appView .stable-focus-card:hover{transform:none;background:#fafbfc}
#appView .stable-focus-card b{color:#272a34;font-size:25px}
#appView .stable-focus-card span{color:#7c8492;font-size:10px}
#appView .service-template,#appView .studio-controls,#appView .studio-preview,#appView .stable-shop-panel{border-color:#e2e5eb!important;border-radius:14px!important;box-shadow:none!important}
#appView .service-template.is-selected,#appView .studio-theme.selected{border-color:var(--console-primary)!important;background:#faf5fd!important}
#appView .studio-score{background:linear-gradient(135deg,#3e075e,var(--console-primary))!important}
#appView .studio-focus.active{border-color:var(--console-primary)!important;background:#f6eefa!important;color:var(--console-primary)!important}
#appView .stable-shop-summary .stable-shop-kpi,#appView .stable-shop-item{border-color:#e2e5eb;background:#fff}
#appView .stable-shop-summary .stable-shop-kpi b,#appView .stable-shop-item-side strong{color:var(--console-primary)}

@media(max-width:1080px){
  #appView .stable-sidebar{width:240px;flex-basis:240px}
  #appView .stable-main{padding-inline:19px}
  #appView .top{margin-inline:-19px;padding-inline:19px}
  #appView .stable-hero{grid-template-columns:minmax(0,1fr) 250px}
  #appView .console-global-search input{width:168px}
  #appView .console-global-search input:focus{width:205px}
}
@media(max-width:900px){
  #appView .stable-layout{display:block}
  #appView .stable-sidebar{position:static;width:100%;height:auto;max-height:none;padding:0 13px 11px;border:0;border-bottom:1px solid var(--console-line);overflow:visible}
  #appView .stable-sidebar::before{margin:0 -13px 13px}
  #appView .stable-side-brand{padding-bottom:11px;margin-bottom:8px}
  #appView .stable-side-nav{display:block;overflow:visible}
  #appView .stable-nav-group{display:flex;gap:5px;overflow:auto;padding:0 0 7px;margin:0;scrollbar-width:none}
  #appView .stable-nav-group+.stable-nav-group{padding-top:7px;border-top:1px solid #eff0f4}
  #appView .stable-nav-group p{display:none}
  #appView .stable-side-nav a{flex:0 0 auto;min-height:34px;padding:6px 9px;font-size:10px}
  #appView .stable-side-nav a.is-active::after{display:none}
  #appView .stable-side-note,#appView .console-account{display:none}
  #appView .stable-main{padding:0 14px 26px}
  #appView .top{position:static;align-items:flex-start;margin:0 -14px 16px;padding:10px 14px}
  #appView .stable-hero{grid-template-columns:1fr}
  #appView .console-hero-status{min-height:134px}
  #appView .stable-daily-focus{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appView .stable-focus-intro{grid-column:1/-1}
}
@media(max-width:590px){
  #appView .top{display:block}
  #appView .console-breadcrumb{margin-bottom:10px}
  #appView .console-header-tools{gap:6px;flex-wrap:wrap}
  #appView .console-global-search{order:5;width:100%}
  #appView .console-global-search input,#appView .console-global-search input:focus{width:100%}
  #appView .tenant-picker{min-width:0;flex:1}
  #appView .console-store-action{display:none}
  #appView .stable-hero h1{font-size:24px}
  #appView .console-hero-copy{padding:23px}
  #appView #stableMetrics{grid-template-columns:1fr;gap:9px}
  #appView #stableMetrics .card{min-height:82px}
  #appView .stable-daily-focus{grid-template-columns:1fr}
  #appView .stable-focus-intro{grid-column:auto}
  #appView .stable-focus-card{min-height:84px;border-inline-start:0;border-top:1px solid #e8eaf0}
  #appView .stable-main .card{padding:15px}
}