@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* ==========================================================================
   Stitch-It Admin Theme - Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (_tokens.scss)
   -------------------------------------------------------------------------- */
:root {
  --theme-navy: #0f2f4a;
  --theme-yellow: #f2b705;

  --sidebar-bg: var(--theme-navy);
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active: rgba(242, 183, 5, 0.15);
  --sidebar-text: #7b8fa3;
  --sidebar-text-hover: #c5d0dc;
  --sidebar-text-active: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-w: 252px;

  --primary: var(--theme-yellow);
  --primary-lt: rgba(242, 183, 5, 0.15);
  --primary-dk: #d4a004;

  --body-bg: #f5f7fb;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #f9fafb;

  --border-color: #e6e7eb;
  --border-color-light: #eff0f3;
  --border-translucent: rgba(15, 47, 74, 0.08);

  --text: var(--theme-navy);
  --text-secondary: #626d7d;
  --text-muted: #7e8896;
  --text-disabled: #c0c7cf;

  --blue: #066fd1;
  --azure: #4299e1;
  --green: #2fb344;
  --lime: #74b816;
  --yellow: #f59f00;
  --orange: #f76707;
  --red: #d63939;
  --pink: #d6336c;
  --purple: #7c3aed;
  --indigo: #4263eb;
  --cyan: #17a2b8;

  --green-lt: rgba(47, 179, 68, 0.08);
  --red-lt: rgba(214, 57, 57, 0.08);
  --yellow-lt: rgba(245, 159, 0, 0.08);
  --blue-lt: rgba(6, 111, 209, 0.08);
  --azure-lt: rgba(66, 153, 225, 0.08);
  --purple-lt: rgba(124, 58, 237, 0.08);
  --cyan-lt: rgba(23, 162, 184, 0.08);

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow: rgba(30, 38, 51, 0.04) 0 2px 4px 0;
  --shadow-card:
    0 0 0 1px var(--border-translucent), rgba(30, 38, 51, 0.04) 0 2px 4px 0;

  --font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, Consolas, monospace;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4286;
  color: var(--text);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. Layout (_layout.scss)
   -------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms ease;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-brand {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  text-decoration: none;
}

.sidebar-brand .brand-logo-sm {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-icon {
  width: 28px;
  height: 28px;
  background: var(--primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-navy);
  font-weight: 700;
  font-size: 13px;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}
.brand-name small {
  font-weight: 400;
  color: var(--sidebar-text);
  font-size: 13px;
  margin-inline-start: 2px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
.nav-group {
  padding: 0 8px;
  margin-bottom: 2px;
}
.nav-label {
  padding: 16px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(123, 143, 163, 0.5);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms;
  margin-bottom: 1px;
  min-height: 32px;
}

.nav-link:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover);
  text-decoration: none;
}
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active);
  font-weight: 500;
}
.nav-link svg {
  width: 18px;
  height: 18px;
  opacity: 0.5;
  flex-shrink: 0;
}
.nav-link:hover svg,
.nav-link.active svg {
  opacity: 0.85;
}

/* Sidebar Submenu & Dropdowns (Gentelella v4) */
.nav-tree {
  display: flex;
  flex-direction: column;
}

.nav-toggle {
  background: transparent;
  border: 0;
  font: inherit;
  width: 100%;
  text-align: start;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 13px;
  text-decoration: none;
  transition: background 120ms, color 120ms;
  margin-bottom: 1px;
  min-height: 32px;
}
.nav-toggle .nav-text {
  flex: 1;
}
.nav-chev {
  margin-inline-start: auto;
  font-size: 11px;
  opacity: 0.55;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms;
  flex-shrink: 0;
}
.nav-toggle:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover);
}
.nav-toggle:hover .nav-chev {
  opacity: 0.9;
}
.nav-tree.open > .nav-toggle .nav-chev {
  transform: rotate(90deg);
  opacity: 1;
}

.nav-tree.has-active > .nav-toggle {
  color: var(--sidebar-text-hover);
  font-weight: 500;
}
.nav-tree.has-active > .nav-toggle .icon {
  opacity: 0.85;
}

.nav-tree .nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-tree.open .nav-sub {
  grid-template-rows: 1fr;
}
.nav-tree .nav-sub > .nav-sub-inner {
  overflow: hidden;
  min-height: 0;
  position: relative;
  padding: 4px 0 4px 28px;
}
.nav-tree .nav-sub > .nav-sub-inner::before {
  content: '';
  position: absolute;
  inset-inline-start: 19px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--sidebar-border);
}
.nav-tree.open .nav-sub > .nav-sub-inner::before {
  background: rgba(255, 255, 255, 0.15);
}

.nav-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  position: relative;
  margin: 1px 0;
  transition: background 120ms, color 120ms, transform 120ms;
}
.nav-sublink::before {
  content: '';
  position: absolute;
  inset-inline-start: -9px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--sidebar-border);
  transform: translateY(-50%);
  transition: background 120ms, width 120ms;
}
.nav-sublink:hover {
  color: var(--sidebar-text-hover);
  background: var(--sidebar-hover);
  text-decoration: none;
}
.nav-sublink:hover::before {
  background: rgba(255, 255, 255, 0.25);
}
.nav-sublink.active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active);
  font-weight: 500;
}
.nav-sublink.active::before {
  background: var(--theme-yellow, #f2b705);
  width: 12px;
  inset-inline-start: -13px;
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 8px;
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.sidebar-user .avatar .online {
  position: absolute;
  bottom: -1px;
  inset-inline-end: -1px;
  width: 8px;
  height: 8px;
  background: var(--green);
  border: 2px solid var(--sidebar-bg);
  border-radius: 50%;
}
.sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.sidebar-user-info .name {
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
}
.sidebar-user-info .role {
  color: var(--sidebar-text);
  font-size: 11px;
  line-height: 1.2;
}

/* Topbar Header & Navigation Breadcrumbs */
.topbar {
  position: fixed;
  top: 0;
  inset-inline-start: var(--sidebar-w);
  inset-inline-end: 0;
  height: 56px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 90;
  transition: left 220ms ease;
}

.topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
}
.sidebar-toggle {
  display: inline-flex !important;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 120ms;
  line-height: 1 !important;
  margin: 0 !important;
}
.sidebar-toggle:hover {
  background: var(--body-bg);
  color: var(--text);
}

.topbar .breadcrumb,
.breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  font-size: 13.5px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  line-height: 1 !important;
}
.breadcrumb a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms;
}
.breadcrumb a:hover {
  color: var(--primary-dk);
}
.breadcrumb .sep {
  color: var(--text-disabled);
  font-size: 13px;
}
.breadcrumb .current {
  color: var(--text);
  font-weight: 600;
}

.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
}
.tb-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--text-secondary);
  position: relative;
}
.tb-btn:hover {
  background: var(--body-bg);
  color: var(--text);
}
.tb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px;
  font-weight: 600;
  color: white;
  margin-inline-start: 6px;
  cursor: pointer;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   3. Animated Toast Notifications (Custom Premium Component)
   -------------------------------------------------------------------------- */
.toast-host {
  position: fixed;
  top: 20px;
  inset-inline-end: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
  width: 100%;
}

.toast-card {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.04);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(120%);
  opacity: 0;
  animation: toast-slide-in 340ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-card.is-closing {
  animation: toast-slide-out 260ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
    height: auto;
    margin-bottom: 0;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
    height: 0;
    margin-bottom: -10px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-card.toast-notice {
  border: 1px solid rgba(25, 135, 84, 0.4);
}
.toast-card.toast-notice .toast-icon {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
}
.toast-card.toast-alert {
  border: 1px solid rgba(214, 57, 57, 0.4);
}
.toast-card.toast-alert .toast-icon {
  background: var(--red-lt);
  color: var(--red);
}

.toast-body {
  flex: 1;
  min-width: 0;
}
.toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.toast-msg {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

.toast-close {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition:
    background 120ms,
    color 120ms;
}
.toast-close:hover {
  background: var(--bg-surface-secondary);
  color: var(--text);
}

.toast-progress {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  background: #198754;
  transform-origin: left center;
  animation: toast-shrink 4000ms linear forwards;
}
.toast-card.toast-notice .toast-progress {
  background: #198754;
}
.toast-card.toast-alert .toast-progress {
  background: var(--red);
}

@keyframes toast-shrink {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Popover Menu & Dropdowns */
.menu-popover[hidden],
[hidden] {
  display: none !important;
}

.menu-popover {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 8px;
  z-index: 1100;
  min-width: 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.12),
    0 0 0 1px var(--border-translucent);
  padding: 4px;
  display: flex;
  flex-direction: column;
  animation: menu-in 140ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-popover button.menu-item,
.menu-popover a.menu-item,
.menu-item {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  text-align: start;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.menu-item:hover {
  background: var(--bg-surface-secondary);
  text-decoration: none;
  color: var(--text);
}
.menu-separator {
  height: 1px;
  background: var(--border-color-light);
  margin: 4px 2px;
}

/* Main area */
.main {
  margin-inline-start: var(--sidebar-w);
  padding-top: 56px;
  min-height: 100vh;
  transition: margin-left 220ms ease;
}
.page-wrapper {
  padding: 20px 24px 40px;
}

.page-header {
  margin-bottom: 20px;
}
.page-pretitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.page-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

@media (max-width: 1200px) {
  /* .col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } */
}
@media (max-width: 920px) {
  /* .col-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } */
}
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 220ms ease;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  .main {
    margin-inline-start: 0;
  }
  .topbar {
    inset-inline-start: 0;
    padding: 0 12px;
  }
  /* .col-4, .col-3, .col-2 { grid-template-columns: minmax(0, 1fr); } */
}

/* Desktop Rail Mode */
@media (min-width: 769px) {
  body.sidebar-rail .sidebar {
    width: 64px;
  }
  body.sidebar-rail .main {
    margin-inline-start: 64px;
  }
  body.sidebar-rail .topbar {
    inset-inline-start: 64px;
  }
  body.sidebar-rail .nav-text,
  body.sidebar-rail .nav-label,
  body.sidebar-rail .brand-name,
  body.sidebar-rail .sidebar-user-info {
    display: none !important;
  }
  body.sidebar-rail .sidebar-brand {
    justify-content: center;
    padding: 0;
  }
  body.sidebar-rail .nav-link {
    justify-content: center;
    padding: 6px 0;
  }
}

/* --------------------------------------------------------------------------
   4. Components (_components.scss & _widgets.scss)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 120ms,
    border-color 120ms,
    color 120ms;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg {
  width: 14px;
  height: 14px;
}
.btn-primary {
  background-color: var(--primary) !important;
  border: none !important;
  border-radius: 7px !important;
  color: #211c00 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-dk) !important;
  border: none !important;
  color: #211c00 !important;
  box-shadow: 0 0 0 3px var(--primary-lt) !important;
}
.btn-outline {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-color: var(--border-color);
  box-shadow: var(--shadow);
}
.btn-outline:hover {
  background: var(--bg-surface-secondary);
  color: var(--text);
}
.btn-outline-danger {
  background: #ffffff;
  color: var(--red);
  border: 1px solid var(--red);
  font-weight: 500;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red);
}
.btn-action-yellow {
  background-color: var(--primary) !important;
  border: none !important;
  border-radius: 7px !important;
  color: #211c00 !important;
  font-weight: 700 !important;
}
.btn-action-yellow:hover,
.btn-action-yellow:focus,
.btn-action-yellow:active {
  background-color: var(--primary-dk) !important;
  border: none !important;
  color: #211c00 !important;
  box-shadow: 0 0 0 3px var(--primary-lt) !important;
}
.btn-action-yellow i,
.btn-action-yellow svg {
  color: #211c00 !important;
  font-size: 13px !important;
}

.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.btn-xs {
  height: 24px;
  padding: 0 7px;
  font-size: 10px;
  line-height: 1.5;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color-light);
  min-height: 44px;
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.card-body {
  padding: 16px;
}
.card-body.p-0 {
  padding: 0;
}
.card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color-light);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  background: var(--bg-surface);
}

/* Stat Widgets (_widgets.scss) */
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg {
  width: 20px;
  height: 20px;
}
.stat-icon.teal {
  background: var(--primary-lt);
  color: var(--primary);
}
.stat-icon.blue {
  background: var(--blue-lt);
  color: var(--blue);
}
.stat-icon.green {
  background: var(--green-lt);
  color: var(--green);
}
.stat-icon.yellow {
  background: var(--yellow-lt);
  color: var(--yellow);
}
.stat-icon.red {
  background: var(--red-lt);
  color: var(--red);
}
.stat-icon.purple {
  background: var(--purple-lt);
  color: var(--purple);
}

.stat-content {
  flex: 1;
  min-width: 0;
}
.stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.stat-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.stat-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--text);
}
.stat-change {
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.stat-change svg {
  width: 12px;
  height: 12px;
}
.stat-change.up {
  color: var(--green);
}
.stat-change.down {
  color: var(--red);
}
.stat-subtext {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sort-link {
  color: var(--text-secondary, #6c757d);
  transition: color 120ms ease;
}
.sort-link:hover {
  color: var(--text, #212529);
}

.sort-label--active,
.active-sort-label {
  color: var(--text, #111827) !important;
  font-weight: 600;
}

.sort-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 8px;
  height: 14px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.75;
  transition: opacity 120ms ease;
}

.sort-link:hover .sort-icon {
  opacity: 1;
}

.sort-icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 4.5px solid #9ba5b1;
  transition: border-color 120ms ease;
}

.sort-icon::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid #9ba5b1;
  transition: border-color 120ms ease;
}

.sort-icon--asc::before {
  border-bottom-color: var(--primary, #f2b705);
}
.sort-icon--asc::after {
  border-top-color: #d8dee5;
}

.sort-icon--desc::before {
  border-bottom-color: #d8dee5;
}
.sort-icon--desc::after {
  border-top-color: var(--primary, #f2b705);
}

/* Table */
.table-responsive {
  overflow-x: auto;
}
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.table th {
  text-align: start;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--border-color);
}
table.table td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color-light);
  color: var(--text-secondary);
  vertical-align: middle;
}
table.table tr:last-child td {
  border-bottom: none;
}
table.table tbody tr:hover {
  background: var(--bg-surface-secondary);
}
.cell-strong {
  color: var(--text);
  font-weight: 500;
}
.cell-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.order-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  padding: 5px 0;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-color-light);
}
.order-info-row:last-child {
  border-bottom: none;
}
.order-info-row .label {
  color: var(--text-muted);
  flex-shrink: 0;
}
.order-info-row .value {
  color: var(--text);
  font-weight: 500;
  text-align: end;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 11px;
  white-space: nowrap;
}
.chip-blue   { color: var(--blue);   background: var(--blue-lt);   border-color: rgba(6,111,209,0.2); }
.chip-purple { color: var(--purple); background: var(--purple-lt); border-color: rgba(124,58,237,0.2); }

/* --------------------------------------------------------------------------
   5. Forms (_forms.scss & _auth.scss)
   -------------------------------------------------------------------------- */
.form-group {
  display: block;
  margin-bottom: 16px;
}
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 150ms;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
}

.form-control[readonly],
.form-control:read-only {
  background-color: var(--bg-surface-secondary) !important;
  color: var(--text-secondary);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.form-select {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230F2F4A' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 150ms;
}
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
}

.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-lt) !important;
}

.invalid-feedback {
  font-size: 10px;
  color: var(--red);
  margin-top: 5px;
  font-weight: 400;
}

.form-color-picker-addon {
  padding: 3px 8px !important;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-right: none;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-group:has(.is-invalid) .form-color-picker-addon {
  border-color: var(--red) !important;
}
.form-color-picker-input {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  background: transparent;
  outline: none;
}
.form-color-picker-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.form-color-picker-input::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 0;
}
.form-check input {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.form-check input:checked {
  background: var(--blue, #066fd1);
  border-color: var(--blue, #066fd1);
}

.form-check.form-switch {
  padding-left: 2.75em !important;
  margin-bottom: 0;
}
.form-switch .form-check-input {
  margin-left: -2.75em !important;
  float: left;
  width: 2.25em !important;
  height: 1.25em !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23626d7d'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  border-radius: 2em !important;
  transition:
    background-position 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
  cursor: pointer;
}
.form-switch .form-check-input:checked {
  background-color: var(--sidebar-bg, #0f2f4a) !important;
  border-color: var(--sidebar-bg, #0f2f4a) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  background-position: right center !important;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--body-bg);
}
.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 36px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.auth-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.auth-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   6. Clean Architecture Helper & Component Classes (Zero Inline Styles)
   -------------------------------------------------------------------------- */
.text-main {
  color: var(--text);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-muted {
  color: var(--text-muted);
}
.text-danger {
  color: var(--red);
}
.text-primary-bold {
  color: var(--primary);
  font-weight: 700;
}

.icon-sm {
  font-size: 14px;
}
.icon-md {
  font-size: 16px;
}
.icon-lg {
  font-size: 20px;
  line-height: 1;
}

.position-relative {
  position: relative;
}

.account-menu-popover {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 8px;
  width: 200px;
  z-index: 1100;
}
.account-menu-header {
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color-light);
}
.account-menu-email {
  font-size: 13px;
  color: var(--text);
}
.account-menu-role {
  font-size: 10px;
  color: var(--primary);
  font-weight: 700;
  margin-top: 1px;
}
.account-menu-section {
  padding: 4px 0;
}
.account-menu-signout {
  width: 100%;
  color: var(--red);
  font-weight: 500;
}

.nav-link-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.th-header {
  color: var(--text-muted);
  background: var(--bg-surface-secondary);
}
.td-id {
  color: var(--text-muted);
}
.td-name {
  color: var(--text);
}

.auth-brand-container {
  margin-bottom: 28px;
}
.auth-brand-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.brand-logo-sm {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.form-label-bold {
  font-weight: 600;
}
.auth-form-actions {
  margin-top: 24px;
}
.btn-block-lg {
  width: 100%;
  justify-content: center;
  height: 40px;
  font-weight: 700;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   7. Gentelella v4 Status Badges & Table Components (Zero Inline Styles)
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-green {
  color: var(--green);
}
.status-green::before {
  background: var(--green);
}
.status-yellow {
  color: var(--yellow);
}
.status-yellow::before {
  background: var(--yellow);
}
.status-blue {
  color: var(--blue);
}
.status-blue::before {
  background: var(--blue);
}
.status-red {
  color: var(--red);
}
.status-red::before {
  background: var(--red);
}

.cell-customer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cell-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.card-opt-btn {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition:
    background 120ms,
    color 120ms;
}
.card-opt-btn:hover {
  background: var(--bg-surface-secondary);
  color: var(--text);
}
.card-opt-btn svg {
  width: 16px;
  height: 16px;
}

.color-swatch-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.color-swatch-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* Status Toggle Switch Button (Gentelella v4 theme switch with theme blue #066fd1) */
.status-toggle-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.status-toggle-btn:focus {
  outline: none;
}
.status-toggle-track {
  width: 36px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: background 150ms ease-in-out;
  flex-shrink: 0;
  display: inline-block;
}
.status-toggle-track.is-active {
  background: var(--sidebar-bg, #0f2f4a);
}
.status-toggle-thumb {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform 150ms ease-in-out;
}
.status-toggle-track.is-active .status-toggle-thumb {
  transform: translateX(16px);
}
.status-toggle-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.status-toggle-track.is-active + .status-toggle-label {
  color: var(--sidebar-bg, #0f2f4a);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Kaminari & Bootstrap Pagination Component (Theme Yellow #F2B705)
   -------------------------------------------------------------------------- */
.dt-info {
  font-size: 12.5px;
  color: var(--text-muted);
}

.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Reset outer container spans to eliminate double borders & nested padding */
.pagination .page,
.pagination .next,
.pagination .last,
.pagination .first,
.pagination .prev {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
  height: auto;
}

/* Format actual interactive targets as single discrete buttons */
.pagination a,
.pagination span.current,
.pagination span.gap,
.pagination span.disabled,
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 120ms ease;
  line-height: 1;
}

.pagination a:hover,
.pagination .page-link:hover {
  color: var(--primary-dk, #b88300);
  background: var(--primary-lt, rgba(217, 155, 0, 0.12));
  border-color: var(--primary, #f2b705);
  text-decoration: none;
}

.pagination span.current,
.pagination .page.current,
.pagination .active .page-link {
  color: #ffffff !important;
  background-color: var(--primary, #f2b705) !important;
  border-color: var(--primary-dk, #b88300) !important;
  font-weight: 600;
}

.pagination span.gap,
.pagination span.disabled,
.pagination .disabled .page-link {
  color: var(--text-disabled);
  border-color: var(--border-color-light);
  background: var(--bg-surface-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.preview-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-color, #e2e8f0);
}

/* ============================================================================
   Admin View: Requested Categories Approval Component Styles
   ============================================================================ */

/* Primary Admin Theme Action Button */
.btn-blue-theme {
  background-color: #0f2f4a !important;
  color: #ffffff !important;
  border: 1px solid #0f2f4a !important;
  border-radius: 6px !important;
  transition: all 0.2s ease-in-out;
}

.btn-blue-theme:hover,
.btn-blue-theme:focus,
.btn-blue-theme:active,
.btn-blue-theme.active {
  background-color: #1a4267 !important;
  color: #ffffff !important;
  border-color: #1a4267 !important;
  box-shadow: 0 2px 6px rgba(15, 47, 74, 0.3) !important;
}

/* Interactive Approval Mode Radio Option Cards */
.approval-mode-card {
  position: relative;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background-color: var(--bg-surface, #ffffff);
  padding: 0.875rem 1rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.approval-mode-card:hover {
  border-color: #0f2f4a;
  background-color: rgba(15, 47, 74, 0.03);
}

.approval-mode-card .form-check {
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  width: 100%;
}

.approval-mode-card .form-check-input {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
}

.approval-mode-card .form-check-label {
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
}

.approval-mode-card:has(.form-check-input:checked) {
  border-color: #0f2f4a !important;
  background-color: rgba(15, 47, 74, 0.04) !important;
  box-shadow: 0 0 0 1px #0f2f4a !important;
}

/* Grid-aligned Sub-Category Remove Icon Button */
.btn-icon-remove {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border-color: #f87171;
  color: #dc2626;
  background-color: #ffffff;
  transition: all 0.2s ease-in-out;
}

.btn-icon-remove:hover,
.btn-icon-remove:focus,
.btn-icon-remove:active {
  background-color: #fee2e2;
  border-color: #dc2626;
  color: #b91c1c;
}

/* Shop Photos Gallery Grid (Max 5 images) */
.shop-gallery-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  background-color: var(--bg-surface-secondary);
  overflow: hidden;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.shop-gallery-card:hover {
  border-color: var(--theme-navy);
  box-shadow: 0 4px 12px rgba(15, 47, 74, 0.12);
}

.shop-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}