/* ==========================================================================
   NexEcom Admin — design system
   Shares the storefront's brand tokens so both apps read as one product.
   ========================================================================== */

:root{
  /* --- Brand ------------------------------------------------------------ */
  /* Sampled directly from the Art of Kash logo (assets/images/logo.jpg):
     maroon #6C1A1E on cream #FDE3BE. Keep these two anchored to the mark. */
  --accent:#6b1a1e;
  --accent-2:#9c3138;
  --accent-dark:#4a1114;
  --accent-soft:#f7e3dd;
  --accent-softer:#fdf2ee;
  --accent-ring:rgba(107,26,30,.16);

  /* --- Surfaces --------------------------------------------------------- */
  --bg:#fdf6ea;
  --cream:#fde3be;           /* exact brand cream */
  --cream-deep:#f9d5a4;
  --card:#ffffff;
  --border:#ecd9bd;
  --border-strong:#dcc199;

  /* --- Text scale ------------------------------------------------------- */
  --text:#2a1d17;
  --text-2:#57453a;
  --text-3:#6d5a4c;
  --muted:var(--text-3);

  /* --- Feedback --------------------------------------------------------- */
  --success:#1c7a4b;  --success-soft:#e9f5ef;
  --danger:#b3261e;   --danger-soft:#fdecea;
  --warning:#8a5b0f;  --warning-soft:#fdf3e2;
  --info:#1c5c86;     --info-soft:#eaf3f9;

  /* --- Shape & depth ---------------------------------------------------- */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(42,29,23,.06);
  --shadow:0 4px 14px rgba(107,26,30,.07);
  --shadow-lg:0 12px 28px rgba(107,26,30,.12);

  --maxw:1200px;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --bs-primary:#6b1a1e;
  --bs-link-color:#6b1a1e;
  --bs-link-hover-color:#4a1114;
  --bs-border-color:#e8dcc8;
  --bs-body-color:#2a1d17;
  --bs-secondary-color:#6d5a4c;
}

*{box-sizing:border-box}

body{
  font-family:var(--font-body);
  margin:0;
  color:var(--text);
  font-size:15.5px;
  line-height:1.6;
  background:linear-gradient(180deg,var(--cream) 0,#fffdf9 340px);
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{color:var(--text);font-weight:700;line-height:1.25;letter-spacing:-.011em}
h1{font-size:2rem}
h2{font-size:1.6rem}
h3{font-size:1.3rem}
h4{font-size:1.15rem}
h5{font-size:1rem}
h6{font-size:.92rem}
.lead{font-size:1.05rem;color:var(--text-2)}
.text-muted{color:var(--text-3) !important}
small,.small{font-size:.85rem}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-dark)}
::selection{background:var(--cream-deep);color:var(--accent-dark)}

/* --------------------------------------------------------------------------
   Buttons — compact, on-brand. Bootstrap 5.3 reads these CSS vars.
   -------------------------------------------------------------------------- */
.btn{
  --bs-btn-padding-y:.45rem;
  --bs-btn-padding-x:.95rem;
  --bs-btn-font-size:.9rem;
  --bs-btn-font-weight:600;
  --bs-btn-border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn-sm{--bs-btn-padding-y:.3rem;--bs-btn-padding-x:.68rem;--bs-btn-font-size:.8rem}
.btn-lg{--bs-btn-padding-y:.58rem;--bs-btn-padding-x:1.25rem;--bs-btn-font-size:.98rem}

.btn-accent,.btn.btn-accent{
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:.45rem .95rem;font-size:.9rem;font-weight:600;line-height:1.5;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  text-decoration:none;cursor:pointer;box-shadow:var(--shadow-xs);
  transition:background-color .15s ease,box-shadow .15s ease;
}
.btn-accent:hover,.btn.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;box-shadow:var(--shadow)}
.btn-accent:disabled,.btn.btn-accent:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-accent.btn-sm,.btn.btn-accent.btn-sm{padding:.3rem .68rem;font-size:.8rem}

/* btn-outline-dark is the admin's de-facto secondary (Edit, Set as Primary,
   image ordering…). Bootstrap renders it near-black; brand it instead. */
.btn-outline-dark{
  --bs-btn-color:var(--accent);
  --bs-btn-border-color:var(--border-strong);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--accent);
  --bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--accent-dark);
  --bs-btn-active-border-color:var(--accent-dark);
  --bs-btn-disabled-color:var(--text-3);
  --bs-btn-disabled-border-color:var(--border);
  background:#fff;
}
.btn-outline-secondary{
  --bs-btn-color:var(--text-2);
  --bs-btn-border-color:var(--border-strong);
  --bs-btn-hover-color:var(--text);
  --bs-btn-hover-bg:var(--cream);
  --bs-btn-hover-border-color:var(--border-strong);
}
.btn-outline-danger{
  --bs-btn-color:var(--danger);
  --bs-btn-border-color:#e6bdb9;
  --bs-btn-hover-bg:var(--danger);
  --bs-btn-hover-border-color:var(--danger);
}
.btn-dark{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent-dark);--bs-btn-hover-border-color:var(--accent-dark)}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent-dark);--bs-btn-hover-border-color:var(--accent-dark)}
.btn-danger{--bs-btn-bg:var(--danger);--bs-btn-border-color:var(--danger)}
.btn-link{--bs-btn-color:var(--accent);--bs-btn-hover-color:var(--accent-dark);font-weight:600}

.btn:focus-visible,.form-control:focus,.form-select:focus,.form-check-input:focus,
.btn-accent:focus-visible,a:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-color:var(--accent);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label{font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:.3rem}
.form-control,.form-select{
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:.45rem .7rem;
  font-size:.9rem;
  color:var(--text);
  background-color:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control::placeholder{color:#9b8878;opacity:1}
.form-control-sm,.form-select-sm{padding:.3rem .55rem;font-size:.82rem}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-label{color:var(--text-2);font-size:.88rem}
.input-group-text{background:var(--cream);border-color:var(--border-strong);color:var(--text-2);font-size:.85rem}
.validation-message,.invalid-feedback{color:var(--danger);font-size:.8rem}
/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.card-body{padding:1.1rem}
/* --------------------------------------------------------------------------
   Badges, pills, alerts
   -------------------------------------------------------------------------- */
.badge{font-weight:600;letter-spacing:.02em;border-radius:6px;padding:.34em .6em}
.bg-success{background:var(--success) !important}
.bg-danger{background:var(--danger) !important}
.bg-warning{background:var(--warning) !important;color:#fff !important}
.bg-info{background:var(--info) !important;color:#fff !important}
/* Bootstrap's .bg-primary/.bg-secondary read as stock blue/grey — warm them to brand. */
.bg-primary{background:var(--accent) !important}
.bg-secondary{background:#8a7566 !important}
.bg-accent{background:var(--accent) !important;color:#fff !important}
.bg-light{background:var(--cream) !important;color:var(--text) !important}
.badge.bg-light{border:1px solid var(--border-strong)}

.alert{border-radius:var(--radius);border-width:1px;font-size:.9rem}
.alert-success{background:var(--success-soft);border-color:#bfe0ce;color:var(--success)}
.alert-danger{background:var(--danger-soft);border-color:#eec7c3;color:var(--danger)}
.alert-warning{background:var(--warning-soft);border-color:#ead9b6;color:var(--warning)}
.alert-info{background:var(--info-soft);border-color:#c5dcea;color:var(--info)}

/* --------------------------------------------------------------------------
   Navbar & dropdowns
   -------------------------------------------------------------------------- */
.navbar{
  background:rgba(255,253,249,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
  padding-top:.55rem;padding-bottom:.55rem;
}
.navbar-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--accent);font-size:1.2rem}
/* Square artwork, shown square. A circular mask clipped the corners off the mark. */
.brand-logo{height:38px;width:38px;object-fit:contain}
.navbar-brand .brand-name{font-weight:800;color:var(--accent);font-size:1.05rem;line-height:1.05;letter-spacing:-.01em}
.nav-link{color:var(--text-2);font-weight:500}
.navbar-nav .nav-link{padding-left:.65rem;padding-right:.65rem;font-size:.9rem;border-radius:var(--radius-sm)}
.nav-link:hover,.nav-link.active{color:var(--accent)}

.admin-topbar{background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(107,26,30,.04)}
.admin-topbar .nav-link{font-weight:600}
.admin-topbar .navbar-brand .brand-name{font-size:1.05rem}
.admin-topbar .badge-admin{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;background:var(--accent);color:#fff;padding:.18rem .45rem;border-radius:4px;margin-left:.4rem;font-weight:700}

.dropdown-menu{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px;font-size:.9rem}
.dropdown-item{border-radius:var(--radius-sm);padding:.45rem .7rem;color:var(--text-2)}
.dropdown-item:hover{background:var(--accent-softer);color:var(--accent)}
/* Selected: soft brand tint, not a heavy dark block. */
.dropdown-item.active,.dropdown-item:active{background:var(--accent-soft) !important;color:var(--accent-dark) !important;font-weight:600}
.dropdown-divider{border-color:var(--border)}
.dropdown-item-text{color:var(--text-3)}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */
.card.p-3 h5{color:var(--accent-dark);font-weight:700;letter-spacing:-.01em;margin-bottom:.5rem}
.card.p-3 .nav-link{
  display:flex;align-items:center;gap:.55rem;
  color:var(--text-2);padding:.42rem .6rem;border-radius:var(--radius-sm);
  font-size:.875rem;font-weight:500;
  border-left:3px solid transparent;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
.card.p-3 .nav-link:hover{background:var(--accent-softer);color:var(--accent)}
/* Selected nav: soft tint + accent rule, replacing the heavy solid-maroon block. */
.card.p-3 .nav-link.active{
  background:var(--accent-soft);
  color:var(--accent-dark) !important;
  border-left-color:var(--accent);
  font-weight:600;
  box-shadow:none;
}
.card.p-3 .nav-link-top{font-weight:700;margin-bottom:.35rem}
.card.p-3 .nav-link-top.active{color:var(--accent-dark) !important}
.card.p-3 .sidebar-icon{flex-shrink:0;opacity:.9}

.admin-topbar ~ section .col-md-3 > .card.p-3{position:sticky;top:80px}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table{--bs-table-color:var(--text);font-size:.88rem}
.table thead th{
  background:var(--cream);color:var(--accent-dark);
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--border-strong);padding:.65rem .7rem;white-space:nowrap;
}
.table tbody td,.table tbody th{padding:.65rem .7rem;vertical-align:middle;border-color:var(--border)}
.table tbody tr:hover{background:#fffaf2}
.admin-topbar ~ section .card.p-3 h6{color:var(--accent-dark);font-weight:700;border-bottom:1px solid var(--border);padding-bottom:.55rem;margin-bottom:.85rem}
/* Action columns: keep the button cluster tidy on narrow screens. */
.table td .btn + .btn{margin-left:.3rem}
.table-responsive{border-radius:var(--radius)}

/* --------------------------------------------------------------------------
   Dashboard stat cards
   -------------------------------------------------------------------------- */
.stat-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-xs);transition:transform .15s ease,box-shadow .15s ease;height:100%}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-card .stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0;color:#fff}
.stat-card h4{color:var(--accent-dark);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.1rem}
.stat-card .small,.stat-card p{color:var(--text-3);margin-bottom:0;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.stat-card-revenue .stat-icon{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.stat-card-orders .stat-icon{background:linear-gradient(135deg,#2b5f9e,#4a83c4)}
.stat-card-products .stat-icon{background:linear-gradient(135deg,#1c7a4b,#33a06a)}
.stat-card-customers .stat-icon{background:linear-gradient(135deg,#a8701c,#c99a3f)}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */
.spinner-border{color:var(--accent) !important;width:1.75rem;height:1.75rem;border-width:.2em}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{background:linear-gradient(180deg,#fff,var(--cream));border-top:1px solid var(--border);color:var(--text-3);font-size:.83rem}
.site-footer a{color:var(--accent);font-weight:600}
.site-footer a:hover{color:var(--accent-dark)}

/* --------------------------------------------------------------------------
   Right-to-left
   -------------------------------------------------------------------------- */
[dir="rtl"] .card.p-3 .nav-link{border-left:0;border-right:3px solid transparent}
[dir="rtl"] .card.p-3 .nav-link.active{border-right-color:var(--accent)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .admin-topbar ~ section .col-md-3 > .card.p-3{position:static}
}
@media (max-width:767.98px){
  body{font-size:15px}
  h1{font-size:1.6rem}
  h2{font-size:1.35rem}
  .card-body{padding:.9rem}
  .table{font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Icon-only buttons in grid action columns. Square padding and a centred glyph so a row of them
   stays on one line - the text labels they replaced wrapped the Actions column onto three rows. */
.btn-icon,.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .4rem;line-height:1}
.action-buttons{display:inline-flex;gap:.25rem;flex-wrap:nowrap;white-space:nowrap}