/* ==========================================================================
   seller-central.css — Seller Admin skin                              (v1)

   Loaded LAST in /admin, after app.css, admin.css, grid.css and
   admin-pay.css. Same approach as amazon.css on the storefront: no class is
   renamed, so admin.js, charts.js and boost.js keep working — this only
   repaints.

   Palette (sampled from sellercentral.amazon.in):
     #232f3e  top bar            #37475a  hover
     #f3f3f3  page background    #d5d9d9  card + table borders
     #0F1111  ink                #565959  muted ink
     #007185  link teal          #FFD814  primary button
     #067D62  healthy green      #B12704  money red
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --brand:#007185;
  --brand-ink:#C7511F;
  --brand-2:#232f3e;
  --brand-soft:#f0f8fa;
  --brand-line:#c8e0e6;

  --ink:#0F1111;
  --ink-2:#565959;
  --ink-3:#767676;

  --bg:#fff;
  --bg-2:#f7fafa;
  --bg-3:#f3f3f3;
  --canvas:#f3f3f3;
  --line:#e7e7e7;
  --line-2:#d5d9d9;

  --green:#067D62;
  --green-bg:#e8f5f1;
  --star:#ffa41c;
  --warn:#C7511F;
  --warn-bg:#fdf0e9;

  --radius:8px;
  --radius-sm:4px;
  --shadow-sm:0 2px 5px rgba(15,17,17,.10);
  --shadow-lg:0 4px 12px rgba(15,17,17,.16);

  --sc-bar:#232f3e;
  --sc-hover:#37475a;
  --sc-btn:#FFD814;
}

body{
  background:var(--canvas);color:var(--ink);
  font-family:"Amazon Ember","Helvetica Neue",Helvetica,Arial,sans-serif;
}
a,.link{color:var(--brand);text-decoration:none}
a:hover,.link:hover{color:var(--brand-ink);text-decoration:underline}

/* ==========================================================================
   2. SIDEBAR — dark slab, orange active marker
   ========================================================================== */
.sidebar{
  background:var(--sc-bar);border-right:0;color:#fff;
}
.side-logo{
  padding:14px 16px;border-bottom:1px solid #3a4553;
}
.side-logo img{filter:brightness(0) invert(1)}
.side-tag{
  color:#d5d9d9;font-size:11.5px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;padding:10px 16px 6px;
}
#navMenu a,#navMenu button,.nav-item{
  color:#d5d9d9;font-size:13.5px;font-weight:400;border-radius:0;
  padding:9px 14px;
}
#navMenu a:hover,#navMenu button:hover,.nav-item:hover{
  background:var(--sc-hover);color:#fff;
}
#navMenu a.on,#navMenu button.on,.nav-item.on,.nav-item.active{
  background:#1a2433;color:#fff;font-weight:700;
}
/* admin.css already draws the active marker with ::before — recolour it
   rather than adding a second bar next to it. */
.nav-item.on::before{background:#f90}
.nav-item.on svg{color:#f90}
.nav-badge{background:#CC0C39;color:#fff;border:0}
#navMenu svg,.nav-item svg{opacity:.9}
.side-foot{
  border-top:1px solid #3a4553;color:#b9c0c7;font-size:12px;padding:12px 16px;
}
.side-foot a,.side-foot .link{color:#7fc6d6}
.side-foot a:hover{color:#fff}

/* ==========================================================================
   3. TOPBAR — the white strip with the Account Health pill
   ========================================================================== */
.topbar{
  background:#fff;border-bottom:1px solid var(--line-2);
  padding:0 20px;min-height:56px;display:flex;align-items:center;gap:14px;
  box-shadow:none;
}
.topbar h1{font-size:19px;font-weight:700;letter-spacing:0;color:var(--ink)}

/* Drop <span class="health-pill">Healthy</span> beside the title to get the
   green capsule from the Seller Central masthead. */
.health-pill{
  background:var(--green-bg);color:var(--green);border:1px solid #b7ddd2;
  border-radius:100px;font-size:12px;font-weight:700;padding:3px 11px;
}

.content{background:var(--canvas);padding:18px 20px 40px}

/* ==========================================================================
   4. CARDS, PANELS, KPI TILES
   ========================================================================== */
.card,.panel,.box,.summary-box,.chart-card{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;
  box-shadow:none;
}
.card h2,.panel h2,.card h3,.panel h3{
  font-size:17px;font-weight:700;color:var(--ink);letter-spacing:0;
}

/* Global Snapshot tiles: label on top, big number, small sub-line. */
.kpi{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:14px;
  box-shadow:none;
}
.kpi .lbl{
  font-size:12px;font-weight:400;color:var(--ink-2);
  text-transform:none;letter-spacing:0;
}
.kpi .val{
  font-size:26px;font-weight:400;color:var(--ink);letter-spacing:-.5px;margin-top:2px;
}
.kpi .sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.kpi.up .val{color:var(--ink)}
.kpi.down .val{color:#B12704}

/* ==========================================================================
   5. TABLES
   ========================================================================== */
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{
  background:#f7f8f8;color:var(--ink);font-size:12px;font-weight:700;
  text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line-2);
  padding:9px 10px;text-align:left;white-space:nowrap;
}
tbody td{
  border-bottom:1px solid var(--line);padding:9px 10px;color:var(--ink);
  vertical-align:middle;
}
tbody tr:hover{background:#f7fafa}
.table-wrap,.tbl{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;overflow:auto;
}

/* ==========================================================================
   6. CONTROLS
   ========================================================================== */
.btn{
  border-radius:100px;font-size:13px;font-weight:400;border:1px solid transparent;
  box-shadow:0 2px 5px rgba(15,17,17,.15);
}
.btn:active{box-shadow:inset 0 2px 5px rgba(15,17,17,.2)}
.btn-primary,.btn-amber{background:var(--sc-btn);border-color:#FCD200;color:#0F1111}
.btn-primary:hover,.btn-amber:hover{background:#F7CA00;border-color:#F2C200;color:#0F1111}
.btn-outline,.btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.btn-outline:hover,.btn-ghost:hover{background:#f7fafa;border-color:#a9b0b0;color:var(--ink)}
.btn-danger{background:#fff;border:1px solid #d5a6a0;color:#B12704}
.btn-danger:hover{background:#fdecea;border-color:#B12704}

input,select,textarea{
  border-radius:4px!important;border:1px solid #888c8c!important;
  box-shadow:0 1px 2px rgba(15,17,17,.08) inset!important;
  font-size:13px;color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  border-color:#e77600!important;
  box-shadow:0 0 3px 2px rgba(228,121,17,.5)!important;outline:0;
}

.pill,.badge,.tag{
  border-radius:4px;font-size:11.5px;font-weight:700;padding:3px 7px;
  background:#f0f2f2;color:var(--ink-2);border:1px solid var(--line-2);
}
.pill.ok,.badge.ok{background:var(--green-bg);color:var(--green);border-color:#b7ddd2}
.pill.bad,.badge.bad{background:#fdecea;color:#B12704;border-color:#f0c3bd}
.pill.warn,.badge.warn{background:#fff5e6;color:#8a6116;border-color:#f2dcae}

/* Segmented filters (Pending / All orders / Cancelled) read as underlined
   tabs here, which is the Seller Central pattern. */
.seg{background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0;gap:0}
.seg button{
  background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;
  color:var(--brand);font-size:14px;font-weight:400;padding:9px 14px;
}
.seg button:hover{color:var(--brand-ink)}
.seg button.on{color:var(--ink);font-weight:700;border-bottom-color:#e47911;background:transparent}

/* ==========================================================================
   7. PAYMENT DETAIL MODAL  (admin-pay.css structure, Seller Central paint)
   ========================================================================== */
.modal{border-radius:8px}
.modal-head h3{font-size:18px;font-weight:700}
.overlay{background:rgba(15,17,17,.5)}

.pd-amt{font-size:24px;font-weight:400;color:var(--ink)}
.pd-amt small{display:block;font-size:12px;color:var(--ink-2);font-weight:400;margin-top:2px}
.pd-cell{background:#f7f8f8;border:1px solid var(--line-2);border-radius:8px;padding:10px}
.pd-cell .l{font-size:11.5px;color:var(--ink-2)}
.pd-cell .v{font-size:14px;font-weight:700;color:var(--ink)}
.pd-refund{
  background:#fffaf0;border:1px solid #f2dcae;border-radius:8px;padding:14px;
}
.pd-refund .hint{font-size:12px;color:var(--ink-2);margin-top:8px;line-height:1.5}

/* ==========================================================================
   8. EMPTY / LOADING
   ========================================================================== */
.empty{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;
  color:var(--ink-2);padding:34px 18px;text-align:center;font-size:14px;
}
.empty .ico{font-size:30px;opacity:.45;margin-bottom:8px}
.loader-ring{border-top-color:#e47911}

/* ==========================================================================
   9. PHONE
   ========================================================================== */
@media (max-width:900px){
  .topbar{padding:0 12px;min-height:50px}
  .topbar h1{font-size:16px}
  .content{padding:12px 12px 32px}
  .kpi .val{font-size:21px}
  thead th,tbody td{padding:7px 8px;font-size:12.5px}
}

/* ==========================================================================
   10. HOME BANNERS TAB  (admin-banners.js)
   ========================================================================== */
.bn-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
}
.bn-card{
  background:#fff;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;
}
/* A switched-off banner is dimmed rather than hidden — the seller needs to
   see what is parked, not just what is live. */
.bn-card.off{opacity:.55}
.bn-card.off .bn-pic{filter:grayscale(1)}

.bn-pic{position:relative;aspect-ratio:16/7;background:#f7f8f8;display:grid;place-items:center;overflow:hidden}
.bn-pic img,.bn-pic video{width:100%;height:100%;object-fit:cover;display:block}
.bn-nomedia{font-size:12.5px;color:var(--ink-3);padding:10px;text-align:center}
.bn-slot{
  position:absolute;top:8px;left:8px;background:rgba(15,17,17,.78);color:#fff;
  border-radius:4px;font-size:11px;font-weight:700;padding:3px 8px;
}

.bn-body{padding:12px 13px 8px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.bn-body b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.bn-sub{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.bn-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:11.5px}
.bn-meta .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.bn-act{display:flex;gap:7px;padding:10px 13px 13px;flex-wrap:wrap}
.bn-act .btn{flex:1 1 auto;min-width:84px}

/* ---- editor ---- */
.bn-drop{border:1px dashed #a9b0b0;border-radius:8px;padding:12px;background:#f7f8f8}
.bn-prev{
  min-height:120px;max-height:220px;border-radius:6px;overflow:hidden;background:#fff;
  display:grid;place-items:center;border:1px solid var(--line);
}
.bn-prev img,.bn-prev video{max-width:100%;max-height:214px;object-fit:contain;display:block}
.bn-drop-act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.bn-switch{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 13px;margin-bottom:8px;
  border:1px solid var(--line-2);border-radius:8px;background:#f7f8f8;
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.bn-switch input{
  width:18px;height:18px;accent-color:#067D62;box-shadow:none!important;
  border-radius:3px!important;cursor:pointer;flex:0 0 auto;
}