/* SBXSTORE Navy & Gold 1.0 — administration presentation only. */
:root {
  color-scheme:dark; --bg:#040d19; --panel:#0b1d32; --panel2:#10263d;
  --line:rgba(174,217,255,.17); --text:#f1f9ff; --muted:#9db4c9;
  --primary:#f2c14e; --brand:#f2c14e; --green:#68df9c; --red:#ff93a4; --amber:#ffc169;
  --shadow:0 16px 45px rgba(0,0,0,.22);
  --surface:linear-gradient(145deg,rgba(13,34,58,.97),rgba(7,20,37,.97));
}
html,body { background:#040d19; }
body { background:radial-gradient(ellipse at 0 0,rgba(164,112,17,.12),transparent 32%),radial-gradient(ellipse at 90% 10%,rgba(27,70,108,.15),transparent 36%),#040d19; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:#f4cf68; }
.shell { grid-template-columns:265px minmax(0,1fr); }
.sidebar { background:rgba(6,18,33,.97); border-color:var(--line); padding:26px 16px 18px; }
.csx-admin-brand { display:block; padding:0 10px 24px; }
.csx-admin-brand img { display:block; width:208px; max-width:100%; height:auto; filter:drop-shadow(0 4px 12px rgba(215,155,43,.15)); }
.csx-admin-brand span { display:block; padding-top:9px; color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.nav-label { color:#718aa4; padding-top:22px; letter-spacing:.13em; font-size:9px; }
.sidebar nav { gap:5px; }
.sidebar nav button { border:1px solid transparent; border-radius:12px; color:var(--muted); font-size:12px; min-height:43px; padding:10px 12px; }
.sidebar nav button .nav-icon { color:#7f9bb6; width:18px; height:18px; }
.sidebar nav button:hover,.sidebar nav button.active { background:linear-gradient(100deg,rgba(242,193,78,.14),rgba(242,193,78,.03)); border-color:rgba(242,193,78,.23); color:#f4cf68; transform:none; }
.sidebar nav button:hover .nav-icon,.sidebar nav button.active .nav-icon { color:#f4cf68; transform:none; }
.sidebar-footer { border-color:var(--line); }
.sidebar-scroll { scrollbar-color:#30445a transparent; }
.logout { font-size:12px; }
.topbar { background:rgba(6,18,33,.94); padding:22px 32px; border-color:var(--line); }
.topbar h1 { font-size:27px; font-weight:800; letter-spacing:-.045em; }
.topbar p { color:var(--muted); font-size:12px; margin-top:3px; }
.top-actions { gap:10px; }
.top-actions .btn { font-size:11px; min-height:40px; }
.content { padding:26px 32px 50px; }
.cards { gap:16px; }
.card,.panel,.cardx,.modal-card,.login-card,.otp-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.025); }
.card { padding:23px; position:relative; overflow:hidden; }
.card:after { content:""; position:absolute; width:80px; height:80px; inset-inline-end:-24px; bottom:-37px; background:rgba(242,193,78,.065); border-radius:50%; pointer-events:none; }
.metric { color:var(--muted); text-transform:uppercase; font-size:10px; font-weight:750; letter-spacing:.08em; }
.metric-value { color:#f4cf68; font-size:31px; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.metric-sub { font-size:11px; }
.kpi-accent { box-shadow:inset 0 2px 0 rgba(242,193,78,.5),var(--shadow); }
.panel { margin-top:20px; padding:23px; }
.panel-head h2 { font-size:19px; letter-spacing:-.035em; }
.btn,.mini { border-radius:12px; font-weight:750; min-height:40px; }
.btn.primary,.mini.primary,.admin-section-tabs button.active { color:#07111c; background:linear-gradient(135deg,#f4cf68,#d79b2b); border-color:transparent; box-shadow:0 7px 22px rgba(215,155,43,.15); }
.btn.ghost,.ghostx { color:#f4cf68; background:#071426; border:1px solid rgba(242,193,78,.25); }
.btn.success { background:var(--green); color:#062517; }
.btn.danger { background:var(--red); color:#430d18; }
.btn.amber { background:var(--amber); color:#3a2500; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn.small { min-height:32px; border-radius:9px; font-size:11px; }
.btn:disabled,.mini:disabled { opacity:.45; box-shadow:none; }
.icon-btn { border-radius:11px; min-height:40px; color:#f4cf68; }
input,textarea,select { border:1px solid var(--line); background:#071426; color:var(--text); border-radius:12px; padding:11px 13px; }
input::placeholder,textarea::placeholder { color:#8098b1; }
input:focus,textarea:focus,select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(242,193,78,.08); }
input[type="checkbox"],input[type="radio"] { accent-color:#f2c14e; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:2px solid #f2c14e; outline-offset:3px; }
label,.field { font-size:12px; }
.table-wrap { border-radius:15px; border-color:var(--line); }
table { background:rgba(4,14,27,.42); }
th { background:#0a1c30; color:#a8bdd0; font-size:10px; letter-spacing:.055em; text-transform:uppercase; padding:14px; }
td { padding:14px; font-size:12px; }
th,td { border-color:var(--line); }
tr:hover td,.click-row:hover td { background:rgba(242,193,78,.035); }
.product-cell .thumb { background:#10263d; border-color:var(--line); border-radius:12px; }
.product-title { font-size:13px; line-height:1.45; }
.order-id { color:#f4cf68; }
.badge,.pill,.bulk-chip { background:#10263d; color:#bcd0e2; border:1px solid var(--line); border-radius:999px; }
.badge.green,.status-pill.ok { background:rgba(104,223,156,.10); color:#68df9c; }
.badge.red,.status-pill.bad { background:rgba(255,147,164,.10); color:#ff93a4; }
.badge.amber,.status-pill.warn { background:rgba(255,193,105,.10); color:#ffc169; }
.status-pill { background:#10263d; border:1px solid var(--line); font-size:11px; }
.chart-bar { background:linear-gradient(180deg,#f4cf68,#b88322); }
.detail-box,.ready-box,.settings-grid label,.checkline,.advanced-details,.credential,.secret-box,.health-item,.setup-row { background:#071426; border-color:var(--line); border-radius:13px; }
.advanced-details summary { color:#f4cf68; }
.form-section-title { color:#f4cf68; border-color:var(--line); }
.field-help,.secret-note { color:var(--muted); }
.sticky-save { background:rgba(8,25,43,.97); border-color:rgba(242,193,78,.3); border-radius:16px; }
.support-message { background:#071426; border-color:var(--line); }
.support-message.admin { background:#10263d; }
.support-compose { background:linear-gradient(180deg,rgba(11,29,50,.7),var(--panel) 18%); }
.backend-warning,.notice { background:rgba(242,193,78,.07); border-color:rgba(242,193,78,.28); }
.toast { background:#10263d; border-color:rgba(242,193,78,.3); border-radius:14px; }
.modal-card { padding:26px; }
.modal-close { color:var(--muted); }
.login-card { padding:34px; border-radius:26px; }
.login-card h1 { font-size:30px; letter-spacing:-.045em; }
.login-card p { font-size:13px; }
.login-card .brand-mark { width:96px; height:96px; filter:drop-shadow(0 8px 22px rgba(215,155,43,.14)); }
.otp-card { padding:28px; }
.otp-code { border-color:rgba(242,193,78,.3); }
.health-ok { color:var(--green); }.health-bad { color:var(--red); }
@media(max-width:1100px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .content { padding:24px; } .topbar { padding:20px 24px; } }
@media(max-width:760px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { width:265px; }
  .topbar { padding:16px; gap:12px; }
  .topbar h1 { font-size:22px; }
  .topbar p { max-width:180px; font-size:11px; }
  .content { padding:18px 14px 35px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .card { padding:17px; border-radius:18px; }
  .metric-value { font-size:25px; }
  .metric { font-size:9px; }
  .panel { padding:17px; border-radius:18px; }
  .panel-head { align-items:flex-start; flex-wrap:wrap; }
  .panel-head .actions { margin-inline-start:0; }
  .modal-card { padding:22px 16px; }
  .login-card { padding:28px 22px; }
  .wrap { padding:20px 14px; }
  .wrap>.hero { align-items:flex-start; flex-wrap:wrap; }
}
@media(max-width:360px) { .cards { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Admin UX V4: calmer tables, readable controls, non-blocking edit feedback */
:root{--csx-outline:rgba(242,193,78,.24)}
.content .panel{border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,.13)}
.table-wrap{overflow-x:auto;max-width:100%;scrollbar-width:thin}
.table-wrap td,.table-wrap th{vertical-align:middle}
.table-wrap td{padding:12px 13px;line-height:1.45}
.table-wrap .actions-row{display:flex;gap:6px;flex-wrap:wrap;min-width:205px}
.table-wrap .btn.small{white-space:nowrap;min-height:31px;padding:7px 11px}
.table-wrap td .muted{font-size:11px;line-height:1.5}
.table-wrap .code{overflow-wrap:anywhere;max-width:250px;font-size:11px}
.table-wrap tr:hover td{background:rgba(108,150,201,.055)}
.csx-load-state{display:flex;align-items:center;gap:14px;padding:21px 16px;margin:12px 0;background:#102238;border:1px solid var(--line);border-radius:14px;color:#dbe9f4}
.csx-load-state p{margin:5px 0 0;font-size:12px}
.csx-spinner{width:22px;height:22px;flex:none;border:2px solid rgba(243,206,112,.2);border-top-color:#f3ce70;border-radius:100%;animation:csx-rotate 1s linear infinite}
@keyframes csx-rotate{to{transform:rotate(360deg)}}
.csx-dashboard-analytics{margin-top:22px}
.csx-analytics-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;background:#0b1d32;border:1px solid var(--line);border-radius:16px}
.csx-analytics-heading h2{font-size:18px;margin:0 0 4px}
.csx-dashboard-analytics .muted-note{margin-top:10px}
.csx-dashboard-analytics .cards{margin-top:15px}
#modal .modal-card{max-height:min(90vh,980px);overflow-y:auto;overscroll-behavior:contain}
#modal .form-actions{position:sticky;bottom:-25px;padding:12px 0;background:linear-gradient(0deg,#0b1d32 78%,transparent);z-index:2}
@media(max-width:850px){.table-wrap .actions-row{min-width:170px}.content .panel{padding:13px}.table-wrap td{padding:10px 9px}}

/* V5: accessible global reload, supplier chips, narrow-screen toolbar. */
.top-actions #csxPageReload {white-space:nowrap;min-height:36px;}
.top-actions #csxPageReload.is-loading {opacity:.65;cursor:progress;}
.csx-supplier-label{display:inline-flex;max-width:100%;font-size:11px;line-height:1.5;padding:2px 7px;border:1px solid rgba(212,175,55,.35);border-radius:7px;color:var(--text,inherit);background:rgba(212,175,55,.09);overflow-wrap:anywhere;}
@media(max-width:800px){.top-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}.top-actions #csxPageReload{font-size:12px;padding:8px}.csx-supplier-label{font-size:10px;}}