/* Shared finishing layer for the staff workspace. The light and dark themes keep
   their own data colors; this file gives both themes the same app structure. */
.admin-page {
  --finish-surface:#fffdfa;
  --finish-line:#e6d9cc;
  --finish-muted:#706a63;
  --finish-ink:#25231f;
  --finish-accent:#b90d25;
  --finish-shadow:0 16px 42px #3b271316;
  gap:0 26px!important;
}
.admin-page .admin-heading {
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:238px;
  margin:0 0 26px;
  padding:29px 34px 27px;
  overflow:hidden;
  border:1px solid #38332c;
  border-radius:21px;
  background:radial-gradient(circle at 71% 120%,#71333b 0,transparent 34%),linear-gradient(115deg,#1b201f,#262524 72%,#3a2927)!important;
  box-shadow:0 22px 48px #34221b25;
}
.admin-page .admin-heading::before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 41px,#fff 42px,#fff 43px,transparent 44px 84px);
  opacity:.035;
  pointer-events:none;
}
.admin-page .admin-heading::after {
  content:"";
  position:absolute;
  right:125px;
  top:-135px;
  bottom:auto;
  width:370px;
  height:370px;
  border:1px solid #ffe6d327;
  border-radius:50%;
  box-shadow:0 0 0 52px #ffe6d30a,0 0 0 105px #ffe6d307;
  pointer-events:none;
}
.admin-page .admin-heading>div:first-child {display:flex;flex:1;flex-direction:column;min-width:0;position:relative;z-index:1}
.admin-page .ops-app-brand {margin:0 0 auto;color:#fffaf3;font-size:11px;letter-spacing:.14em}
.admin-page .ops-app-brand b {color:#d9b57b}
.admin-page .ops-app-mark {width:40px;height:40px;border:1px solid #f05c6d80;border-radius:11px;background:#ba1733;color:#fff;box-shadow:4px 4px 0 #e8b3a325}
.admin-page .ops-app-brand a {padding:8px 12px;border:1px solid #ffffff35;border-radius:8px;color:#f3e8d8;text-decoration:none;letter-spacing:0;white-space:nowrap;transition:background .18s,border-color .18s}
.admin-page .ops-app-brand a:hover {border-color:#ffffff80;background:#ffffff12;color:#fff}
.admin-page .admin-heading .eyebrow {margin:23px 0 0;color:#d7b582!important;font-size:10px;letter-spacing:.18em}
.admin-page .admin-heading h1 {margin:8px 0 9px;color:#fffdf8!important;font-size:clamp(46px,4.65vw,72px);line-height:.9;letter-spacing:-.045em;text-wrap:balance}
.admin-page .admin-heading h1 span {color:#f04b61}
.admin-page .admin-heading p {margin:0;color:#d0c9c0!important;font-size:13px;line-height:1.55}
.admin-page .ops-header-rule {display:flex;gap:14px;align-items:center;max-width:550px;margin-top:22px;color:#d0b694;font-size:9px;font-weight:850;letter-spacing:.15em;white-space:nowrap}
.admin-page .ops-header-rule::before {content:"";width:34px;height:2px;background:#dc3048}
.admin-page .ops-header-rule span+span {margin-left:auto;color:#908983}
.admin-page .admin-heading-meta {
  position:relative;z-index:1;display:grid;align-content:start;gap:11px;
  width:286px;min-width:0;max-width:none;margin-left:24px;padding:18px 19px;
  border:1px solid #ffffff29;border-radius:14px;
  background:#ffffff12;box-shadow:0 10px 25px #0002;backdrop-filter:blur(15px);
}
.admin-page .admin-heading-meta>span:first-child {color:#dac29f;font-size:10px;font-weight:850;letter-spacing:.13em}
.admin-page .admin-heading-meta strong {color:#fff!important;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.admin-page .admin-heading-meta button {justify-self:start;min-height:34px;padding:6px 0!important;border:0!important;background:none!important;color:#e8d8bd!important;font-size:11px;font-weight:750;cursor:pointer}
.admin-page .admin-heading-meta button:hover {color:#fff!important;text-decoration:underline}
.admin-page .admin-heading-meta .ops-theme-toggle {margin:0;border:0!important;border-radius:0;background:none!important}
.admin-page .admin-heading-meta .ops-popout {width:100%;min-height:42px;margin:2px 0 0;border:1px solid #e7475d;border-radius:9px;background:#bb1834;color:#fff;box-shadow:0 10px 20px #0003;transition:transform .18s,background .18s}
.admin-page .admin-heading-meta .ops-popout:hover {transform:translateY(-2px);background:#d52340;color:#fff}
.admin-page .commerce-admin-tabs {
  top:17px;gap:3px;padding:17px 11px 12px!important;
  border:1px solid #37413d!important;border-radius:17px!important;
  background:linear-gradient(155deg,#222a28,#18201f)!important;
  box-shadow:0 19px 42px #1d211e26!important;
}
.admin-page .ops-nav-group {display:block;margin:15px 12px 5px;color:#abaaa0;font-size:9px;font-weight:850;letter-spacing:.18em;white-space:nowrap}
.admin-page .ops-nav-group:first-child {margin-top:0}
.admin-page .commerce-admin-tabs button,.admin-page .commerce-admin-tabs a {
  display:flex;align-items:center;gap:11px;min-height:43px;padding:9px 11px!important;
  border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;
  color:#c0cbc5!important;font-size:11px!important;font-weight:750;letter-spacing:.01em;
  box-shadow:none!important;text-align:left;transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.admin-page .commerce-admin-tabs button:hover,.admin-page .commerce-admin-tabs a:hover {transform:translateX(2px);border-color:#ffffff18!important;background:#ffffff12!important;color:#fff!important}
.admin-page .commerce-admin-tabs button.active {border-color:#eadfd4!important;background:#fffaf3!important;color:#25211e!important;box-shadow:0 6px 16px #0002!important}
.admin-page .ops-nav-icon {display:grid;flex:none;place-items:center;width:19px;height:19px;color:#b9a98f}
.admin-page .ops-nav-icon svg {display:block;width:17px;height:17px}
.admin-page .commerce-admin-tabs button.active .ops-nav-icon {color:#b90d25}
.admin-page .ops-nav-label {flex:1;white-space:nowrap}
.admin-page .ops-nav-current {flex:none;width:5px;height:5px;border-radius:50%;background:#bb1934}
.admin-page .commerce-admin-tabs>a {margin:12px 0 0;padding:11px!important;border-color:#ffffff28!important;background:#ffffff0d!important;color:#fff!important}
.admin-page .commerce-admin-tabs>a>span:last-child {margin-left:auto;color:#e7b993}
.admin-page .ops-intro,.admin-page .admin-section-intro {min-height:98px;margin:0 0 19px;padding:10px 2px 15px;border-bottom:1px solid var(--finish-line)}
.admin-page .ops-intro h2,.admin-page .admin-section-intro h2 {line-height:.96;letter-spacing:-.035em}
.admin-page .ops-intro .eyebrow,.admin-page .admin-section-intro .eyebrow {font-size:10px;letter-spacing:.15em}
.admin-page .ops-data-note {border-radius:9px}
.admin-page .ops-kpis {gap:12px;margin-bottom:20px}
.admin-page .ops-kpi {
  position:relative;overflow:hidden;min-height:145px;padding:20px;
  border:1px solid var(--finish-line);border-radius:15px;
  background:var(--finish-surface);box-shadow:var(--finish-shadow);
  transition:transform .2s,box-shadow .2s;
}
.admin-page .ops-kpi:hover {transform:translateY(-3px);box-shadow:0 20px 38px #3b271321}
.admin-page .ops-kpi::after {content:"";position:absolute;right:-27px;bottom:-44px;width:95px;height:95px;border:17px solid #b90d250b;border-radius:50%;pointer-events:none}
.admin-page .ops-kpi span {position:relative;z-index:1;font-size:10px;letter-spacing:.1em}
.admin-page .ops-kpi strong {position:relative;z-index:1;font-size:clamp(31px,2.85vw,45px);letter-spacing:-.035em}
.admin-page .ops-kpi small {position:relative;z-index:1;font-size:10px}
.admin-page .ops-panel,.admin-page .commerce-card {border-radius:16px;box-shadow:var(--finish-shadow)}
.admin-page .ops-panel-head {padding-bottom:16px;border-bottom:1px solid var(--finish-line)}
.admin-page .ops-panel-head h3 {font-size:26px}
.admin-page .ops-page-rank {gap:13px;margin:16px 0}
.admin-page .ops-page-rank>div {height:8px}
.admin-page .ops-live-row,.admin-page .ops-order-row,.admin-page .ops-signal,.admin-page .ops-task {min-height:58px}
.admin-page .ops-task>button,.admin-page .ops-panel-head button {min-height:33px;padding:5px 9px!important;border:1px solid var(--finish-line)!important;border-radius:7px;background:transparent!important}
.admin-page .admin-filter-row {border-radius:12px}
.admin-page .commerce-table-wrap td {font-size:12px;line-height:1.5}
.admin-page .commerce-table-wrap button,.admin-page .admin-coupon-row button {min-height:36px}

html.admin-theme-dark .admin-page {--finish-surface:#1b2732;--finish-line:#334250;--finish-muted:#a9b8c2;--finish-ink:#f2f5f5;--finish-shadow:0 16px 40px #0003}
html.admin-theme-dark .admin-page .admin-heading {border-color:#4b3d3a;background:radial-gradient(circle at 71% 120%,#69303e 0,transparent 34%),linear-gradient(115deg,#151d25,#202b32 72%,#32282d)!important}
html.admin-theme-dark .admin-page .commerce-admin-tabs {border-color:#394752!important;background:linear-gradient(155deg,#202d37,#17222c)!important}
html.admin-theme-dark .admin-page .ops-kpi {background:linear-gradient(145deg,#20303c,#192530)}
html.admin-theme-dark .admin-page .ops-kpi::after {border-color:#e7475d11}
html.admin-theme-dark .admin-page .ops-panel,html.admin-theme-dark .admin-page .commerce-card {border-color:#334250}
html.admin-theme-dark .admin-page .ops-intro,html.admin-theme-dark .admin-page .admin-section-intro {border-color:#334250}

@media(max-width:1050px) {
  .admin-page .commerce-admin-tabs {top:0;gap:6px;padding:8px!important;overflow-x:auto;scrollbar-width:thin}
  .admin-page .ops-nav-group {display:none}
  .admin-page .commerce-admin-tabs button,.admin-page .commerce-admin-tabs a {flex:none;width:auto;padding:10px 13px!important;white-space:nowrap}
  .admin-page .commerce-admin-tabs button:hover {transform:none}
  .admin-page .commerce-admin-tabs>a {margin:0}
}
@media(max-width:700px) {
  .admin-page .admin-heading {display:block;min-height:0;padding:21px 19px;margin-bottom:16px}
  .admin-page .admin-heading::after {right:-160px;top:-130px}
  .admin-page .ops-app-brand {margin-bottom:25px;flex-wrap:wrap;font-size:9px}
  .admin-page .ops-app-mark {width:34px;height:34px}
  .admin-page .ops-app-brand a {margin-left:auto}
  .admin-page .admin-heading .eyebrow {margin-top:0;font-size:9px}
  .admin-page .admin-heading h1 {margin:10px 0;font-size:clamp(42px,10vw,56px)}
  .admin-page .admin-heading p {font-size:12px}
  .admin-page .ops-header-rule {display:none}
  .admin-page .admin-heading-meta {width:100%;margin:21px 0 0;padding:13px;display:grid;grid-template-columns:1fr 1fr;gap:5px 13px}
  .admin-page .admin-heading-meta>span:first-child,.admin-page .admin-heading-meta strong {grid-column:1/-1}
  .admin-page .admin-heading-meta .ops-popout {grid-column:1/-1}
  .admin-page .commerce-admin-tabs {margin-bottom:16px!important}
  .admin-page .ops-nav-icon {width:16px;height:16px}
  .admin-page .ops-nav-icon svg {width:16px;height:16px}
  .admin-page .ops-intro,.admin-page .admin-section-intro {min-height:0;margin-bottom:15px}
  .admin-page .ops-kpi {min-height:128px;padding:15px}
  .admin-page .ops-kpi strong {font-size:clamp(28px,7vw,37px)}
  .admin-page .ops-panel-head {gap:10px}
}
@media(max-width:380px) {
  .admin-page .admin-heading h1 {font-size:39px}
  .admin-page .ops-app-brand a {width:100%;margin-left:0}
  .admin-page .admin-heading-meta {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce) {
  .admin-page .ops-kpi,.admin-page .commerce-admin-tabs button,.admin-page .commerce-admin-tabs a,.admin-page .admin-heading-meta .ops-popout {transition:none}
  .admin-page .ops-kpi:hover,.admin-page .commerce-admin-tabs button:hover,.admin-page .commerce-admin-tabs a:hover,.admin-page .admin-heading-meta .ops-popout:hover {transform:none}
}
