/* =====================================================================
   admin-pages.css  —  All in Mova / Product Management pages
   Extends style.css (NOT modified). Loaded AFTER style.css + Bootstrap.
   Only contains components that are not already in style.css.
   ===================================================================== */

/* ---------- Sidebar nav icons : use line (stroke) icons cleanly ---------- */
.sidebar-link .nav-icon{ width:20px; height:20px; flex:0 0 20px; stroke:var(--muted); fill:none; }
.sidebar-link:hover .nav-icon,
.sidebar-link.active .nav-icon{ stroke:var(--brand); }
.sidebar-link:hover svg path,
.sidebar-link.active svg path{ fill:none; }      /* neutralize fill rule */
.sidebar-link.active{ color:var(--brand); font-weight:500; }

/* ---------- Topbar right cluster ---------- */
.top-actions{ display:flex; align-items:center; gap:.35rem; }
.top-icon{ background:transparent; border:0; width:38px; height:38px; border-radius:9px;
           display:grid; place-items:center; cursor:pointer; color:var(--muted); }
.top-icon:hover{ background:var(--border); }
.top-icon.gear{ color:var(--brand); }
.top-icon i{ font-size:18px; }
.top-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; margin-left:.35rem; }

/* ---------- Page header (title + actions) ---------- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between;
            gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.page-head .page-title{ font-size:26px; }
.page-head .page-sub{ margin-top:3px; }
.head-actions{ display:flex; gap:.65rem; flex-wrap:wrap; }
.btn-upper{ text-transform:uppercase; font-weight:600; letter-spacing:.02em;
            font-size:.82rem; padding:.7rem 1.25rem; }

/* ---------- In-card section heading ---------- */
.section-h{ font-weight:600; color:var(--heading); font-size:1.18rem; margin-bottom:1.25rem; }
.field-help{ display:block; font-size:.78rem; color:var(--muted); margin-top:.45rem; }
.req::after{ content:" *"; color:#E5484D; }

/* =====================================================================
   PRODUCTS LIST
   ===================================================================== */
.list-toolbar{ display:flex; align-items:center; justify-content:flex-end; gap:1.1rem; margin-bottom:1.25rem; }
.search-box{ position:relative; }
.search-box input{ padding-left:2.5rem; padding-right:2.5rem; min-width:300px; }
.search-box .s-ic{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box .f-ic{ position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
                   color:var(--muted); padding-left:.6rem; border-left:1px solid var(--border); cursor:pointer; }
.export-link{ color:#1E9E57; font-weight:600; text-decoration:none; text-transform:uppercase;
              font-size:.85rem; letter-spacing:.02em; white-space:nowrap; }
.export-link:hover{ color:#147a41; }

.list-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
           padding-bottom:1.1rem; border-bottom:1px solid var(--card-border); flex-wrap:wrap; }
.count-pill{ background:var(--green-soft); color:#1E9E57; font-weight:600; font-size:.85rem;
             padding:.32rem .75rem; border-radius:8px; }
.btn-dark{ background:#5B5F66; border:1px solid #5B5F66; color:#fff; font-weight:500;
           border-radius:9px; padding:.6rem 1.2rem; }
.btn-dark:hover{ background:#4b4f55; color:#fff; }
.btn-soft{ background:#fff; border:1px solid var(--border); color:var(--label); font-weight:500;
           border-radius:9px; padding:.6rem 1.2rem; }
.btn-soft:hover{ background:#F7F7F8; }

.prod-row{ display:flex; align-items:center; gap:1.1rem; padding:1.05rem .9rem;
           border-radius:12px; transition:background .15s; }
.prod-row:hover{ background:#FAFAFB; }
.prod-thumb{ width:62px; height:62px; border-radius:10px; background:#F1F2F4; flex:0 0 62px; }
.prod-info{ flex:1; min-width:0; }
.prod-name{ font-weight:500; color:var(--heading); }
.prod-sku{ font-size:.8rem; color:var(--muted); margin-top:1px; }
.prod-price{ font-weight:600; color:var(--heading); text-align:right; min-width:92px; }
.prod-stock{ font-size:.8rem; color:var(--muted); margin-top:1px; text-align:right; }

.st-pill{ font-size:.8rem; font-weight:500; padding:.32rem .8rem; border-radius:7px;
          display:inline-block; white-space:nowrap; }
.st-active{ background:#E3F8EC; color:#16A34A; }
.st-out   { background:#FDE7E7; color:#E5484D; }
.st-low   { background:#FBF1D6; color:#B7791F; }

.row-edit{ color:#4A7ABE; background:transparent; border:0; cursor:pointer; padding:.35rem; }
.row-edit:hover{ color:var(--brand); }
.row-more{ color:var(--muted); background:transparent; border:0; cursor:pointer;
           padding:.35rem; font-size:1.1rem; letter-spacing:1px; }

.pager{ display:flex; align-items:center; justify-content:space-between; padding-top:1.25rem;
        flex-wrap:wrap; gap:.7rem; }
.pager .meta{ color:var(--muted); font-size:.92rem; }
.pager-nav{ display:flex; gap:.45rem; }
.pg-btn{ min-width:42px; height:42px; border:1px solid var(--border); background:#fff;
         border-radius:9px; color:var(--label); cursor:pointer; padding:0 .85rem; font-size:.92rem; }
.pg-btn:hover{ background:#F7F7F8; }
.pg-btn.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* =====================================================================
   IMAGE UPLOAD GRID  (Edit / Add product)
   ===================================================================== */
.img-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.img-slot{ position:relative; aspect-ratio:1/1; border:1.7px dashed var(--dash); border-radius:12px;
           background:#FAFAFB; display:flex; flex-direction:column; align-items:center;
           justify-content:center; cursor:pointer; transition:border-color .15s; }
.img-slot:hover{ border-color:var(--brand); }
.img-slot.main{ border-color:var(--green); }
.img-slot.main:hover{ border-color:var(--green); }
.img-cam{ color:var(--green); }
.img-cam svg{ width:30px; height:30px; }
.img-main-label{ color:var(--green); font-size:.8rem; font-weight:500; margin-top:.4rem; }
.img-plus{ color:var(--placeholder); font-size:1.7rem; line-height:1; }
.img-x{ position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%;
        background:#fff; border:1px solid var(--border); display:grid; place-items:center;
        color:#6B7280; font-size:.72rem; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.img-x:hover{ color:#E5484D; }
@media(max-width:768px){ .img-grid{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   EDIT PRODUCT extras
   ===================================================================== */
.status-card{ border:1.5px solid var(--brand); background:#FFF8F3; border-radius:16px; }
.status-card .card-body{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.warn-note{ background:#FFFBEB; border:1px solid #F3E1A6; border-radius:12px; padding:.9rem 1.15rem;
            color:#B45309; font-size:.92rem; display:flex; gap:.55rem; align-items:center; }
.warn-note i{ color:var(--amber); }
.weight-link{ color:#3B82F6 !important; font-weight:500; }
.margin-green{ color:#16A34A; font-weight:600; }

/* =====================================================================
   CATEGORY SELECTION
   ===================================================================== */
.cat-pick{ border:1.5px solid var(--card-border); border-radius:12px; padding:.95rem 1.15rem;
           margin-bottom:.85rem; cursor:pointer; transition:border-color .15s; }
.cat-pick:hover{ border-color:var(--brand); }
.cat-pick.sel{ border-color:var(--green); background:#F2FCF6; }
.cat-pick .t{ font-weight:600; color:var(--heading); }
.cat-pick.sel .t{ color:#16A34A; }
.cat-pick .s{ font-size:.85rem; color:var(--muted); margin-top:2px; }

.attr-card{ border:1px solid var(--card-border); border-radius:14px; padding:1.25rem; }
.attr-card .h{ font-weight:600; color:var(--heading); }
.attr-card .sub{ font-size:.85rem; color:var(--muted); margin:.15rem 0 1rem; }
.attr-card .form-check{ margin-bottom:.7rem; }
.attr-card .form-check-label{ color:var(--label); }

.browse-search{ position:relative; }
.browse-search input{ padding-left:3.1rem; height:54px; }
.browse-search .b-ic{ position:absolute; left:1rem; top:50%; transform:translateY(-50%);
                      color:var(--muted); padding-right:.8rem; border-right:1px solid var(--border); }

.browse-group{ border:1px solid var(--card-border); border-radius:14px; overflow:hidden; margin-bottom:1rem; }
.browse-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; cursor:pointer; }
.browse-head.open{ background:var(--brand-soft); }
.browse-head .t{ font-weight:600; color:var(--heading); }
.browse-head .c{ font-size:.85rem; color:var(--muted); margin-top:2px; }
.browse-head .arw{ color:var(--muted); }
.browse-subs{ padding:.3rem .4rem .7rem; }
.browse-sub{ display:flex; align-items:center; justify-content:space-between;
             padding:.7rem 1.3rem; color:var(--label); cursor:pointer; border-radius:8px; }
.browse-sub:hover{ background:#FAFAFB; color:var(--brand); }
.browse-sub .arw{ color:var(--placeholder); }
/* standalone collapsed groups */
.browse-group.solo .browse-head{ padding:1.2rem 1.3rem; }

/* =====================================================================
   BULK UPLOAD
   ===================================================================== */
.steps{ list-style:none; padding:0; margin:0; counter-reset:s; }
.steps li{ color:var(--muted); margin-bottom:1rem; font-size:.95rem; }
.steps li:last-child{ margin-bottom:0; }
.steps li b{ color:var(--label); font-weight:600; }

.btn-dl{ font-weight:600; }
.btn-dl i{ margin-right:.45rem; }

.tips-card{ background:#FFF6EE; border:1.5px solid #F4DCC6; border-radius:16px; padding:1.4rem 1.6rem; }
.tips-card .h{ font-weight:600; color:var(--heading); margin-bottom:.9rem; }
.tips-card ul{ margin:0; padding-left:1.1rem; }
.tips-card li{ color:var(--muted); margin-bottom:.55rem; }
.tips-card li:last-child{ margin-bottom:0; }

.up-row{ display:flex; align-items:center; gap:1.1rem; padding:1rem; border-radius:12px; }
.up-row:hover{ background:#FAFAFB; }
.up-thumb{ width:54px; height:54px; border-radius:10px; background:#F1F2F4; flex:0 0 54px; }
.up-info{ flex:1; min-width:0; }
.up-name{ font-weight:500; color:var(--heading); }
.up-date{ font-size:.8rem; color:var(--muted); margin-top:1px; }
.up-count{ color:var(--muted); font-size:.9rem; white-space:nowrap; }
.pill-success{ background:#E3F8EC; color:#16A34A; font-size:.82rem; font-weight:500;
               padding:.32rem .85rem; border-radius:7px; }
.pill-failed{ background:#FDE7E7; color:#E5484D; font-size:.82rem; font-weight:500;
              padding:.32rem .85rem; border-radius:7px; }
.link-view{ color:#4A7ABE; text-decoration:none; font-weight:500; }
.link-view:hover{ color:var(--brand); }
.link-retry{ color:#E5484D; text-decoration:none; font-weight:500; }

/* =====================================================================
   PRICING & DISCOUNTS  (aligned to shared shell)
   ===================================================================== */
.sale-note{ background:#FFFBEB; border:1px solid #F3E1A6; border-radius:12px; padding:.9rem 1.1rem;
            font-size:.92rem; color:#B45309; display:flex; align-items:center; gap:.55rem; }
.sale-note i{ color:var(--brand); }
.btn-add-tier{ font-weight:600; }
.tier-row{ display:flex; align-items:center; gap:1.2rem; background:#F6F6F7; border-radius:12px;
           padding:1.35rem 1.6rem; margin-bottom:.9rem; }
.tier-row:last-child{ margin-bottom:0; }
.tier-item{ flex:1; text-align:center; }
.tier-value{ font-size:18px; font-weight:700; color:var(--heading); line-height:1.2; }
.tier-discount{ color:#16A34A; }
.tier-label{ font-size:12px; color:var(--muted); margin-top:.4rem; }
.tier-actions{ flex:0 0 auto; display:flex; gap:1.25rem; margin-left:auto; }
.tier-actions a{ font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; }
.edit-link{ color:#4A7ABE; }
.remove-link{ color:#E5484D; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; }
.pricing-summary{ background:#F0FBF4; border:1px solid var(--green); border-radius:16px; padding:1.5rem 1.65rem; }
.summary-title{ color:#16A34A; font-weight:700; font-size:16px; margin-bottom:1.1rem; }
.summary-row{ display:flex; justify-content:space-between; margin-bottom:.8rem; font-size:14px; color:var(--muted); }
.summary-row .val{ color:var(--label); font-weight:600; }
.summary-row.total{ border-top:1px solid #BBE9CC; padding-top:1rem; margin:.4rem 0 0;
                    font-size:16px; font-weight:700; color:#16A34A; }
.summary-row.total .val{ color:#16A34A; }

/* shared footer action row */
.form-actions{ display:flex; gap:.75rem; justify-content:flex-end; align-items:center;
               margin-top:1.5rem; flex-wrap:wrap; }
.form-actions .spacer{ margin-right:auto; }
.btn-wide{ padding:.7rem 1.6rem; font-weight:600; }

/* =====================================================================
   RESPONSIVE  — style.css ships no breakpoint, so wire the off-canvas
   sidebar here using its existing .open / .overlay-active / hamburger
   classes (style.css itself is left untouched).
   ===================================================================== */
@media (max-width: 991.98px){
  .dash-sidebar{
    position:fixed; top:0; left:0; height:100vh; width:280px; flex-basis:280px;
    transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.12);
  }
  .dash-sidebar.open{ transform:translateX(0); }
  .hamburger-btn{ display:grid; }
  .sidebar-brand-row .sidebar-close-btn{ display:grid; }
  .dash-content{ padding:1.1rem; }
  .page-head .page-title{ font-size:23px; }
}
@media (max-width: 575.98px){
  .search-box input{ min-width:0; width:100%; }
  .list-toolbar{ flex-wrap:wrap; }
  .prod-price, .prod-stock{ text-align:left; min-width:0; }
}

/* =====================================================================
   WAREHOUSE SETTINGS
   Reuses style.css: .card .btn-* .stat-num(+blue/dark-green/purple)
   .stat-label .toggle-switch .toggle-container. Adds layout + extras.
   ===================================================================== */
.wh-row{ display:flex; gap:1.25rem; align-items:flex-start; }
.wh-thumb{ width:90px; height:90px; flex:0 0 90px; border-radius:12px;
           background:var(--peach, #FCEFE3); }
.wh-body{ flex:1; min-width:0; }
.wh-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.wh-name{ font-size:1.15rem; font-weight:600; color:var(--heading); margin:0; }
.wh-name.muted{ color:var(--muted); }
.wh-id{ color:var(--muted); font-size:.92rem; margin-top:3px; }
.wh-edit{ color:#2563EB; font-weight:500; text-decoration:none; white-space:nowrap; }
.wh-edit:hover{ color:var(--brand); }
.btn-activate{ background:#F1F2F4; border:0; color:#9AA0A8; font-weight:500;
               border-radius:8px; padding:.5rem 1.15rem; cursor:pointer; white-space:nowrap; }
.btn-activate:hover{ background:#E8EAED; }

/* badges */
.wh-badge{ font-size:12px; font-weight:600; padding:4px 11px; border-radius:5px; white-space:nowrap; }
.wh-badge.primary  { background:#16A34A; color:#fff; }
.wh-badge.active   { background:#DCFCE7; color:#16A34A; }
.wh-badge.secondary{ background:#F3E9FF; color:#9333EA; }
.wh-badge.inactive { background:#F1F2F4; color:#9AA0A8; }

/* address + contact */
.wh-info{ margin-top:1.4rem; }
.wh-col-h{ font-weight:600; color:var(--heading); margin-bottom:.55rem; }
.wh-lines{ color:var(--muted); font-size:.92rem; line-height:1.85; }

/* stat boxes (gray, centered; numbers use style.css .stat-num colors) */
.wh-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:1.6rem; }
.wh-stat{ background:#F6F6F7; border-radius:12px; padding:1.3rem 1rem; text-align:center; }
.wh-stat .stat-num{ font-size:30px; text-align:center; }
.wh-stat .stat-num.indigo{ color:#6366F1; }
.wh-stat .stat-label{ text-align:center; }

/* service pills */
.wh-services{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem; }
.wh-services-label{ color:var(--label); font-weight:600; font-size:.9rem; margin-right:.3rem; }
.wh-service{ font-size:13px; font-weight:500; padding:7px 14px; border-radius:7px; }
.wh-service.purple{ background:#F3E9FF; color:#9333EA; }
.wh-service.blue  { background:#E5EFFF; color:#2563EB; }
.wh-service.green { background:#DCFCE7; color:#16A34A; }

/* one-line address + inactive note */
.wh-oneline{ color:var(--muted); font-size:.95rem; }
.wh-inactive{ background:#FEFCE8; border:1px solid #FBE9A6; border-radius:12px;
              padding:1rem 1.25rem; color:#A16207; font-size:.92rem; }

/* inventory synchronization rows */
.sync-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
           padding:1.15rem .4rem; border-bottom:1px solid var(--card-border); }
.sync-row:last-child{ border-bottom:0; }
.sync-title{ font-weight:600; color:var(--heading); }
.sync-sub{ color:var(--muted); font-size:.9rem; margin-top:2px; }

@media(max-width:768px){
  .wh-stats{ grid-template-columns:repeat(2,1fr); }
  .wh-thumb{ width:64px; height:64px; flex-basis:64px; }
}

/* =====================================================================
   SHIPPING RATES
   Reuses style.css: .card .btn-* .toggle-switch .form-control.
   ===================================================================== */
/* shared status pills */
.ship-badge{ font-size:12px; font-weight:600; padding:4px 11px; border-radius:6px; white-space:nowrap; }
.ship-badge.active{ background:#DCFCE7; color:#16A34A; }
.ship-badge.paused{ background:#FBEFD3; color:#B7791F; }

/* ---- Shipping Strategy cards ---- */
.strat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.strat-card{ border:1.5px solid var(--green); border-radius:14px; padding:1.3rem; cursor:pointer;
             transition:box-shadow .15s; }
.strat-card:hover{ box-shadow:0 2px 10px rgba(16,24,40,.07); }
.strat-card .strat-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.strat-ic{ width:54px; height:54px; border-radius:12px; display:grid; place-items:center; font-size:1.5rem; }
.strat-ic.blue{ background:#E5EFFF; color:#2563EB; }
.strat-ic.orange{ background:#FFF1E6; color:var(--brand); }
.strat-ic.purple{ background:#F3E9FF; color:#9333EA; }
.strat-title{ font-weight:600; color:var(--heading); margin:1rem 0 .25rem; }
.strat-sub{ color:var(--muted); font-size:.9rem; }

/* ---- Free Shipping Rules ---- */
.rule-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
           border:1px solid var(--card-border); border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:1rem; }
.rule-row:last-child{ margin-bottom:0; }
.rule-title{ font-weight:600; color:var(--heading); }
.rule-sub{ color:var(--muted); font-size:.9rem; margin-top:2px; }
.rule-right{ display:flex; align-items:center; gap:1.5rem; }
.rule-edit{ color:#2563EB; font-weight:500; text-decoration:none; }
.rule-edit:hover{ color:var(--brand); }

/* ---- Shipping Zones ---- */
.zone-box{ border:1px solid var(--card-border); border-radius:14px; overflow:hidden; margin-bottom:1.5rem; }
.zone-box:last-child{ margin-bottom:0; }
.zone-head{ background:#F5F6F7; padding:1.2rem 1.4rem; display:flex; align-items:center;
            justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.zone-name{ font-weight:600; color:var(--heading); }
.zone-sub{ color:var(--muted); font-size:.9rem; margin-top:2px; }
.zone-head-actions{ display:flex; align-items:center; gap:1rem; }
.btn-editzone{ background:#fff; border:1px solid var(--border); color:var(--heading); font-weight:600;
               border-radius:9px; padding:.55rem 1.2rem; cursor:pointer; }
.btn-editzone:hover{ background:#F7F7F8; }

/* rate table */
.rate-table{ width:100%; border-collapse:collapse; }
.rate-table thead th{ text-align:left; font-weight:600; color:var(--heading); font-size:.92rem;
                      padding:1rem 1.4rem; }
.rate-table tbody td{ padding:1.15rem 1.4rem; border-top:1px solid var(--card-border);
                      color:var(--label); font-size:.93rem; vertical-align:middle; }
.rate-table .rt-rate{ color:#16A34A; font-weight:700; }
.rate-table .rt-perlb{ color:var(--muted); }
.rate-table .rt-edit{ color:#2563EB; font-weight:500; text-decoration:none; }
.rate-table .rt-edit:hover{ color:var(--brand); }

/* ---- Rate Adjustments / Calculator ---- */
.btn-blue{ background:#2F6FED; border:0; color:#fff; font-weight:600; border-radius:10px;
           padding:.85rem 1rem; width:100%; cursor:pointer; }
.btn-blue:hover{ background:#255fd0; }
.calc-result{ border:1.5px solid var(--green); background:#F0FBF4; border-radius:14px;
              padding:1.5rem; text-align:center; }
.calc-amount{ color:#16A34A; font-size:30px; font-weight:700; line-height:1.1; }
.calc-cap{ color:var(--muted); font-size:.95rem; margin-top:.3rem; }
.adj-tax-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
              background:#FAFAFB; border-radius:12px; padding:1rem 1.15rem; }

@media(max-width:768px){
  .strat-grid{ grid-template-columns:1fr; }
  .rate-table thead{ display:none; }
  .rate-table tbody td{ display:block; border:0; padding:.25rem 1.1rem; }
  .rate-table tbody tr{ display:block; border-top:1px solid var(--card-border); padding:.8rem 0; }
}