/* ============================================
   DESIGN SYSTEM - Premium POS Dashboard
   ============================================ */

:root {
  /* Color System — Premium Classic Palette */
  --primary: #1e3a8a;
  --primary-hover: #163272;
  --primary-light: #3b62d9;
  --primary-bg: rgba(30, 58, 138, 0.1);

  --success: #059669;
  --success-light: #10b981;
  --success-bg: rgba(5, 150, 105, 0.1);

  --warning: #b45309;
  --warning-light: #d97706;
  --warning-bg: rgba(180, 83, 9, 0.1);

  --danger: #dc2626;
  --danger-light: #ef4444;
  --danger-bg: rgba(220, 38, 38, 0.1);

  --info: #1d4ed8;
  --info-light: #3b62d9;
  --info-bg: rgba(29, 78, 216, 0.1);

  /* Classic Gold Accent */
  --gold: #c9950a;
  --gold-light: #e4b020;
  --gold-deep: #9a7208;

  /* Neutral Colors */
  --gray-50: #faf8f5;
  --gray-100: #f2ede6;
  --gray-200: #e6dfd5;
  --gray-300: #d4cabf;
  --gray-400: #a89d92;
  --gray-500: #7d7268;
  --gray-600: #5c5248;
  --gray-700: #3d342c;
  --gray-800: #241c15;
  --gray-900: #130e09;

  /* Semantic Colors */
  --bg-main: #ece8df;
  --bg-main-gradient: linear-gradient(
    145deg,
    #f0ebe2 0%,
    #e8e2d8 50%,
    #ece7de 100%
  );
  --sidebar-dark: #07111e;
  --sidebar-darker: #050d17;
  --panel-bg: #ffffff;
  --text-primary: #14202e;
  --text-secondary: #526070;
  --text-muted: #8ca3b4;
  --border-color: #dbd4c8;
  --border-light: rgba(0, 0, 0, 0.05);
  --sidebar-collapsed-width: 88px;

  /* Premium Classic Shadows */
  --shadow-sm: 0 1px 4px rgba(10, 18, 30, 0.09), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 10px rgba(10, 18, 30, 0.09), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 12px 28px rgba(10, 18, 30, 0.11), 0 4px 8px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 24px 50px rgba(10, 18, 30, 0.13), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-2xl:
    0 40px 68px rgba(10, 18, 30, 0.15), 0 16px 32px rgba(0, 0, 0, 0.07);
  --shadow-glow:
    0 0 0 1px rgba(201, 149, 10, 0.22), 0 4px 18px rgba(201, 149, 10, 0.16);

  /* Spacing (8px base unit) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   BASE STYLES
   ============================================ */

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

body {
  margin: 0;
  font-family:
    "Inter",
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-main-gradient);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   LAYOUT
   ============================================ */

.app {
  min-height: 100vh;
  display: block;
}

.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  margin-left: 240px;
  transition: margin-left var(--transition-slow);
}

body.sidebar-desktop-collapsed .sidebar {
  transform: none;
  width: var(--sidebar-collapsed-width);
  background: linear-gradient(180deg, #0a1828 0%, #07121e 58%, #050f1a 100%);
  border-right: 1px solid rgba(201, 149, 10, 0.24);
  overflow: visible;
  z-index: 260;
  box-shadow:
    0 18px 36px rgba(2, 8, 18, 0.48),
    inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

body.sidebar-desktop-collapsed .content {
  margin-left: var(--sidebar-collapsed-width);
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  background: linear-gradient(180deg, #0a1828 0%, #07121e 42%, #05101a 100%);
  color: #d8e8f4;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(201, 149, 10, 0.15);
  box-shadow:
    4px 0 36px rgba(2, 8, 16, 0.52),
    inset -1px 0 0 rgba(201, 149, 10, 0.06);
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform var(--transition-slow);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 24% 8%,
      rgba(201, 149, 10, 0.14),
      transparent 36%
    ),
    radial-gradient(circle at 84% 92%, rgba(30, 58, 138, 0.18), transparent 40%);
  opacity: 0.9;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(201, 149, 10, 0.38);
  border-radius: 3px;
}

/* Brand Section */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(140deg, #0d1e30 0%, #09172a 100%);
  border-bottom: 1px solid rgba(201, 149, 10, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  min-height: 72px;
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  background: #ffffff;
  flex-shrink: 0;
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.brand-name-main {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #fef7eb;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.brand-name-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(201, 149, 10, 0.9);
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #c9950a 0%, #9a7208 100%);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff8e8;
  box-shadow: 0 6px 14px rgba(201, 149, 10, 0.38);
  flex-shrink: 0;
}

.brand h1 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: #fef7eb;
}

/* Navigation Menu */
.menu {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-1);
  overflow-y: auto;
  flex: 1;
}

.menu-item {
  text-decoration: none;
  color: #a8c2d8;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--transition-base);
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.menu-item i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

.menu-item:hover {
  background: rgba(201, 149, 10, 0.1);
  color: #e8f4ff;
  transform: translateX(2px);
}

.menu-item:hover i {
  opacity: 1;
}

.menu-item.active {
  background: linear-gradient(120deg, #c9950a 0%, #e4b020 100%);
  color: #0a1525;
  font-weight: 700;
  box-shadow:
    0 8px 20px rgba(201, 149, 10, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.menu-item.active i {
  opacity: 1;
}

.menu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, #e4b020, #9a7208);
  border-radius: 0 4px 4px 0;
}

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(201, 149, 10, 0.16);
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0%, transparent 100%);
}

.profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}

.profile:hover {
  background: rgba(201, 149, 10, 0.1);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, #c9950a 0%, #e4b020 100%);
  font-size: 14px;
  display: grid;
  place-items: center;
  color: #0a1525;
  font-weight: 800;
  box-shadow:
    0 6px 16px rgba(201, 149, 10, 0.42),
    0 0 0 2px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.profile strong {
  display: block;
  font-size: 14px;
  color: white;
  line-height: 1.3;
}

.profile small {
  display: block;
  font-size: 12px;
  color: #9fbad1;
}

.logout {
  text-decoration: none;
  color: #e6f3ff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  width: 100%;
}

.logout:hover {
  background: rgba(37, 99, 235, 0.2);
  color: #dbeafe;
}

.logout i {
  font-size: 16px;
}

.app-credit-footer {
  margin: 14px auto 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #5f7388;
  line-height: 1.45;
}

.sales-page .app-credit-footer {
  margin-top: auto;
}

.app-credit-footer a,
.app-credit-footer a:visited {
  color: #0f6f66;
  font-weight: 700;
  text-decoration: none;
}

.app-credit-footer a:hover,
.app-credit-footer a:focus-visible {
  color: #0b5b54;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================
   TOP BAR
   ============================================ */

.topbar {
  min-height: 64px;
  background: linear-gradient(95deg, #08162a 0%, #071223 52%, #060f1d 100%);
  color: #d8e8f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  font-size: 14px;
  border-bottom: 1px solid rgba(201, 149, 10, 0.2);
  box-shadow:
    0 8px 28px rgba(2, 8, 18, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar strong {
  font-size: 20px;
  font-weight: 700;
  color: #f0f9ff;
  letter-spacing: -0.015em;
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 18px;
  color: #c7e2ff;
  transition: all var(--transition-base);
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pill,
.icon-btn {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  background: white;
  color: var(--text-secondary);
  transition: all var(--transition-base);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
}

.pill:hover,
.icon-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.pill.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  font-weight: 600;
}

.pill.primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(217, 130, 0, 0.32);
  transform: translateY(-1px);
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
}

.notification-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(
    140deg,
    rgba(201, 149, 10, 0.18) 0%,
    rgba(30, 41, 59, 0.22) 100%
  );
  border: 1px solid rgba(201, 149, 10, 0.38);
  color: #e8d8a0;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
}

.notification-btn:hover {
  background: linear-gradient(
    140deg,
    rgba(201, 149, 10, 0.28) 0%,
    rgba(30, 41, 59, 0.26) 100%
  );
  border-color: rgba(228, 176, 32, 0.7);
  color: #f8e8b0;
  transform: translateY(-1px);
}

.notification-btn i {
  font-size: 15px;
}

.notification-btn .badge {
  position: absolute;
  top: -7px;
  right: -8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1f2550;
  letter-spacing: 0.1px;
  box-shadow: 0 6px 12px rgba(127, 29, 29, 0.32);
}

.pill i {
  margin-right: var(--space-1);
}

.lang-btn.active {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}

/* ============================================
   TOPBAR CONTEXTUAL OVERRIDES (dark topbar)
   ============================================ */

.topbar .pill,
.topbar .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(186, 225, 255, 0.2);
  color: #c7e2ff;
}

.topbar .pill:hover,
.topbar .icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(186, 225, 255, 0.36);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.topbar .pill.primary {
  background: linear-gradient(115deg, #c9950a 0%, #e4b020 100%);
  border-color: transparent;
  color: #0a1525;
  box-shadow: 0 8px 18px rgba(201, 149, 10, 0.38);
  font-weight: 700;
}

.topbar .pill.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(201, 149, 10, 0.46);
}

.topbar .lang-btn.active {
  background: rgba(201, 149, 10, 0.75);
  color: #0a1525;
  border-color: rgba(228, 176, 32, 0.6);
  font-weight: 700;
}

/* ============================================
   STATS GRID
   ============================================ */

.dashboard-page {
  --dash-ink: #0a1525;
  --dash-navy: #0e2035;
  --dash-cobalt: #162d48;
  --dash-teal: #9a7208;
  --dash-teal-soft: #c9950a;
  --dash-amber: #c9950a;
  --dash-amber-soft: #e4b020;
  --dash-surface: rgba(250, 247, 242, 0.94);
  --dash-surface-2: rgba(244, 240, 232, 0.96);
  --dash-border: #d4c9b8;
  --dash-shadow: 0 20px 38px rgba(8, 18, 30, 0.14);
  font-family: "Manrope", "Poppins", "Segoe UI", sans-serif;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(201, 149, 10, 0.12),
      transparent 34%
    ),
    radial-gradient(circle at 88% 84%, rgba(30, 58, 138, 0.1), transparent 35%),
    linear-gradient(148deg, #ede8df 0%, #e5dfd4 52%, #eae4da 100%);
}

.dashboard-page .sidebar {
  background: linear-gradient(180deg, #0a1828 0%, #07121e 58%, #05101a 100%);
  border-right: 1px solid rgba(201, 149, 10, 0.2);
  box-shadow: 0 22px 42px rgba(2, 8, 18, 0.48);
}

.dashboard-page .brand {
  background: linear-gradient(140deg, #0d1e30 0%, #091728 100%);
  border-bottom-color: rgba(201, 149, 10, 0.3);
  box-shadow: inset -1px 0 0 rgba(201, 149, 10, 0.12);
}

.dashboard-page .menu-item:hover {
  background: rgba(201, 149, 10, 0.12);
  color: #f0efe8;
}

.dashboard-page .menu-item.active {
  background: linear-gradient(120deg, #c9950a 0%, #e4b020 100%);
  color: #07111e;
  box-shadow: 0 9px 20px rgba(201, 149, 10, 0.38);
}

.dashboard-page .menu-item.active::before {
  background: linear-gradient(180deg, #9a7208, #c9950a);
}

.dashboard-page .avatar {
  background: linear-gradient(140deg, #c9950a 0%, #e4b020 100%);
  color: #07111e;
  box-shadow: 0 6px 14px rgba(201, 149, 10, 0.4);
}

.dashboard-page .topbar {
  background: linear-gradient(
    95deg,
    #07142a 0%,
    #06102200 0%,
    #060f1e 55%,
    #050d1a 100%
  );
  background: linear-gradient(95deg, #09172c 0%, #070f1e 55%, #060c19 100%);
  border-bottom: 1px solid rgba(201, 149, 10, 0.22);
  border-left: 1px solid rgba(201, 149, 10, 0.16);
  color: #d8e8f4;
  box-shadow: 0 10px 26px rgba(4, 10, 22, 0.38);
}

.dashboard-page .topbar strong {
  color: #f0f8ff;
}

.dashboard-page .pill,
.dashboard-page .icon-btn {
  background: rgba(8, 18, 30, 0.28);
  border-color: rgba(201, 149, 10, 0.26);
  color: #d8e8f4;
}

.dashboard-page .pill.primary {
  background: linear-gradient(115deg, #c9950a 0%, #e4b020 100%);
  border-color: transparent;
  color: #07111e;
  box-shadow: 0 10px 20px rgba(201, 149, 10, 0.38);
  font-weight: 700;
}

body.sidebar-desktop-collapsed .brand {
  display: none;
}

body.sidebar-desktop-collapsed .menu {
  padding: 15px 8px 18px;
  align-items: center;
  gap: 13px;
  max-height: calc(100vh - 12px);
  overflow-y: auto;
  overflow-x: visible;
  transition: padding 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-desktop-collapsed .menu-item {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  justify-content: center;
  gap: 0;
  font-size: 0;
  line-height: 0;
  color: #7a93aa;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms ease;
  transform: none;
}

body.sidebar-desktop-collapsed .menu-item i {
  width: auto;
  font-size: 18px;
  opacity: 1;
}

/* Per-icon accent colors in collapsed state */
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-table-cells-large { color: #a78bfa; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-cube              { color: #60a5fa; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-user              { color: #f472b6; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-truck             { color: #fb923c; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-chart-column      { color: #34d399; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-box               { color: #60a5fa; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-cart-shopping     { color: #fbbf24; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-boxes-stacked     { color: #93c5fd; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-credit-card       { color: #f87171; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-calendar          { color: #a78bfa; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-users             { color: #c084fc; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-user-shield       { color: #67e8f9; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-gear              { color: #94a3b8; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-file-lines        { color: #34d399; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-rectangle-list    { color: #86efac; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-cart-plus         { color: #fde68a; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-rotate-left       { color: #fca5a5; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-receipt           { color: #6ee7b7; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-message           { color: #7dd3fc; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-clock-rotate-left { color: #d8b4fe; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-shield-halved     { color: #67e8f9; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-tag               { color: #fb923c; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-cash-register     { color: #fbbf24; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-money-bill-transfer { color: #4ade80; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-arrows-left-right { color: #60a5fa; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-layer-group       { color: #c084fc; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-star              { color: #fbbf24; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-barcode           { color: #94a3b8; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-clipboard-list    { color: #fb923c; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-truck-ramp-box    { color: #f87171; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-user-clock        { color: #a78bfa; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-piggy-bank        { color: #f472b6; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-gift              { color: #f87171; }
body.sidebar-desktop-collapsed .menu-item:not(.active) i.fa-comment-sms       { color: #34d399; }

body.sidebar-desktop-collapsed .menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  box-shadow: none;
  color: #f8fbff;
  transform: translateY(-1px) scale(1.08);
}

body.sidebar-desktop-collapsed .menu-item:hover i {
  color: #f8fbff !important;
}

body.sidebar-desktop-collapsed .menu-item:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.9);
  outline-offset: 2px;
}

body.sidebar-desktop-collapsed .menu-item.active {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(138deg, #7c3aed 0%, #6d28d9 52%, #5b21b6 100%);
  color: #ffffff;
  border: none;
  box-shadow:
    0 14px 24px rgba(109, 40, 217, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.sidebar-desktop-collapsed .menu-item.active i {
  font-size: 18px;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.sidebar-desktop-collapsed .menu-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(11, 14, 19, 0.98);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 120;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 180ms ease;
}

body.sidebar-desktop-collapsed .menu-item::before {
  content: "";
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid rgba(11, 14, 19, 0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 120;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 180ms ease;
}

body.sidebar-desktop-collapsed .menu-item:hover::after,
body.sidebar-desktop-collapsed .menu-item:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

body.sidebar-desktop-collapsed .menu-item:hover::before,
body.sidebar-desktop-collapsed .menu-item:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  body.sidebar-desktop-collapsed .menu,
  body.sidebar-desktop-collapsed .menu-item {
    transition: none;
  }

  body.sidebar-desktop-collapsed .menu-item:hover {
    transform: none;
  }

  body.sidebar-desktop-collapsed .menu-item::after {
    transition: none;
  }

  body.sidebar-desktop-collapsed .menu-item::before {
    transition: none;
  }
}

body.sidebar-desktop-collapsed .sidebar-footer {
  display: none;
}

body.sidebar-desktop-collapsed .menu-item::after,
body.sidebar-desktop-collapsed .menu-item::before {
  display: none !important;
}

.sidebar-floating-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-50%) translateX(-6px);
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(11, 14, 19, 0.98);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1200;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 180ms ease;
}

.sidebar-floating-tooltip::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid rgba(11, 14, 19, 0.98);
}

.sidebar-floating-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.dashboard-hero-shell {
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding: 28px 30px;
  background: linear-gradient(135deg, #0d6b64 0%, #0f766e 40%, #134e4a 100%);
  border: none;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(13, 107, 100, 0.35);
  position: relative;
  overflow: hidden;
}

.dashboard-hero-shell::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.dashboard-hero-shell::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 30%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.dashboard-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.dashboard-hero-content > div:first-child {
  flex: 1;
  min-width: 0;
}

.dashboard-hero-content h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.dashboard-hero-content p {
  margin: 10px 0 0;
  color: rgba(204, 251, 241, 0.9);
  max-width: 580px;
  font-size: 14px;
  line-height: 1.5;
}

.dashboard-hero-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.dashboard-hero-meta span:nth-child(1) {
  border-color: rgba(255, 255, 255, 0.28);
}
.dashboard-hero-meta span:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.28);
}
.dashboard-hero-meta span:nth-child(3) {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fef3c7;
}

.dashboard-hero-actions {
  display: grid;
  gap: 10px;
  min-width: 250px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.dashboard-hero-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  font-size: 15px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.dashboard-hero-actions .btn-primary {
  background: #ffffff;
  color: #0d6b64;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.dashboard-hero-actions .btn-primary:hover {
  background: #f0fffe;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.dashboard-hero-actions .btn-primary i {
  color: inherit;
}

.dashboard-hero-actions .btn-secondary {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  background: transparent;
  box-shadow: none;
}

.dashboard-hero-actions .btn-secondary i {
  color: inherit;
}

.dashboard-hero-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.dashboard-kpi-grid {
  margin-top: var(--space-4);
}

.dashboard-kpi-grid .stat-card {
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  min-height: 120px;
  background: linear-gradient(155deg, var(--dash-surface) 0%, #f0ece4 100%);
  box-shadow: 0 14px 28px rgba(8, 18, 32, 0.13);
  position: relative;
  overflow: hidden;
  padding: 10px 12px 12px 0;
}

.dashboard-kpi-grid .stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  opacity: 0.92;
}

.dashboard-kpi-grid .stat-card span {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  align-self: flex-start;
  margin-top: 10px;
  margin-right: 2px;
  font-size: 18px;
  background: linear-gradient(140deg, #c9950a 0%, #e4b020 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 16px rgba(201, 149, 10, 0.28);
  color: #0a1525;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.dashboard-kpi-grid .stat-card:hover span {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 11px 20px rgba(201, 149, 10, 0.34);
}

.dashboard-kpi-grid .stat-blue::before {
  background: linear-gradient(90deg, #c9950a, #e4b020);
}

.dashboard-kpi-grid .stat-green::before {
  background: linear-gradient(90deg, #1e3a8a, #3b62d9);
}

.dashboard-kpi-grid .stat-pink::before {
  background: linear-gradient(90deg, #9a7208, #c9950a);
}

.dashboard-kpi-grid .stat-orange::before {
  background: linear-gradient(90deg, #dc2626, #b91c1c);
}

.dashboard-kpi-grid .stat-teal::before {
  background: linear-gradient(90deg, #c9950a, #e4b020);
}

.dashboard-kpi-grid .stat-blue h2 {
  color: #9a7208;
}

.dashboard-kpi-grid .stat-green h2 {
  color: #1e3a8a;
}

.dashboard-kpi-grid .stat-pink h2 {
  color: #9a7208;
}

.dashboard-kpi-grid .stat-orange h2 {
  color: #b91c1c;
}

.dashboard-kpi-grid .stat-teal h2 {
  color: #9a7208;
}

.dashboard-kpi-grid .stat-green span {
  background: linear-gradient(140deg, #1e3a8a 0%, #3b62d9 100%);
  color: #e8f0ff;
}

.dashboard-kpi-grid .stat-pink span {
  background: linear-gradient(140deg, #9a7208 0%, #c9950a 100%);
  color: #0a1525;
}

.dashboard-kpi-grid .stat-orange span {
  background: linear-gradient(140deg, #b91c1c 0%, #dc2626 100%);
  color: #fff0f0;
}

.dashboard-kpi-grid .stat-teal span {
  background: linear-gradient(140deg, #c9950a 0%, #e4b020 100%);
  color: #0a1525;
}

.dashboard-welcome {
  border: 1px solid var(--dash-border);
  background: linear-gradient(148deg, #faf7f2 0%, var(--dash-surface-2) 100%);
  color: #14202e;
  box-shadow: 0 8px 18px rgba(8, 18, 30, 0.08);
}

.dashboard-quick-actions button {
  border: 1px solid #d4c9b8;
  background: linear-gradient(148deg, #faf7f2 0%, #f0ebe0 100%);
  color: #14202e;
  box-shadow: 0 10px 20px rgba(8, 18, 30, 0.08);
}

.dashboard-quick-actions button:hover {
  border-color: #c9950a;
  background: linear-gradient(148deg, #fefbf5 0%, #f8f0e0 100%);
  box-shadow: 0 16px 28px rgba(201, 149, 10, 0.16);
}

.dashboard-quick-actions button i {
  color: #c9950a;
}

.dashboard-bottom-grid {
  margin-top: var(--space-5);
}

.dashboard-panel {
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  background: linear-gradient(160deg, #faf7f2 0%, #f0ece4 100%);
  box-shadow: var(--dash-shadow);
}

.dashboard-panel .panel-header h3 {
  color: #14202e;
}

.dashboard-page .tabs {
  border-color: #d4c9b8;
  background: #f0ece4;
}

.dashboard-page .tabs .active {
  background: linear-gradient(108deg, #c9950a 0%, #e4b020 100%);
  color: #0a1525;
  box-shadow: 0 6px 14px rgba(201, 149, 10, 0.3);
}

.dashboard-page .low-stock-item {
  background: #fdf8ed;
  border-left-color: #c9950a;
}

.dashboard-page .sale-row:hover {
  background: #f8f2e4;
}

.dashboard-page .dashboard-hero-shell {
  animation: dashboardFadeUp 520ms ease-out both;
}

.dashboard-page .dashboard-kpi-grid .stat-card {
  animation: dashboardFadeUp 560ms ease-out both;
}

.dashboard-page .dashboard-kpi-grid .stat-card:nth-child(1) {
  animation-delay: 40ms;
}

.dashboard-page .dashboard-kpi-grid .stat-card:nth-child(2) {
  animation-delay: 100ms;
}

.dashboard-page .dashboard-kpi-grid .stat-card:nth-child(3) {
  animation-delay: 160ms;
}

.dashboard-page .dashboard-kpi-grid .stat-card:nth-child(4) {
  animation-delay: 220ms;
}

.dashboard-page .dashboard-kpi-grid .stat-card:nth-child(5) {
  animation-delay: 280ms;
}

.dashboard-page .dashboard-quick-actions button,
.dashboard-page .dashboard-panel {
  animation: dashboardFadeUp 620ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-page .dashboard-hero-shell,
  .dashboard-page .dashboard-kpi-grid .stat-card,
  .dashboard-page .dashboard-quick-actions button,
  .dashboard-page .dashboard-panel {
    animation: none;
  }
}

@keyframes dashboardFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-grid,
.welcome,
.quick-actions,
.bottom-grid,
.db-warning,
.setup-check,
.page-content {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}

.stats-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.stat-card {
  background: linear-gradient(155deg, #ffffff 0%, #f8fbff 100%);
  border-radius: var(--radius-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 116px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-spring);
  cursor: pointer;
  position: relative;
}

.stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.9;
  border-radius: 0;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--border-color);
}

.stat-card > div {
  padding: var(--space-4) var(--space-4);
  flex: 1;
}

/* Prevent stat-icon from inheriting flex:1 from the rule above */
.stat-card > .stat-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
}

.stat-card h2 {
  margin: 0 0 var(--space-1) 0;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stat-card p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card span {
  width: 80px;
  align-self: stretch;
  display: grid;
  place-items: center;
  color: white;
  font-size: 26px;
  position: relative;
}

/* Stat Card Color Variants */
.stat-blue h2 {
  color: var(--primary);
}
.stat-green h2 {
  color: #4338ca;
}
.stat-pink h2 {
  color: var(--danger);
}
.stat-orange h2 {
  color: var(--warning);
}

.stat-blue span {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.stat-green span {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.stat-pink span {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.stat-orange span {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

/* ============================================
   WELCOME MESSAGE & WARNINGS
   ============================================ */

.welcome,
.db-warning {
  margin-top: var(--space-4);
  background: linear-gradient(155deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  color: var(--text-secondary);
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}

.db-warning {
  margin-top: var(--space-3);
  border-left: 4px solid var(--warning);
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.db-warning i {
  font-size: 18px;
  margin-top: 2px;
}

.hint {
  margin-top: var(--space-2);
  color: #b45309;
  font-size: 12px;
}

.setup-check {
  margin-top: var(--space-3);
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.setup-check-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: var(--space-3);
}

.setup-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.setup-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--gray-50);
}

.setup-item .label {
  color: var(--text-secondary);
  font-size: 12px;
}

.setup-item .value {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.setup-item .value.ok {
  color: var(--success);
}

.setup-item .value.bad {
  color: var(--danger);
}

.setup-note {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: 12px;
}

@media (max-width: 1024px) {
  .dashboard-hero-content {
    flex-direction: column;
  }

  .dashboard-hero-actions {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-hero-shell {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }

  .dashboard-hero-content h2 {
    font-size: 24px;
  }

  .dashboard-hero-actions {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   QUICK ACTIONS
   ============================================ */

.quick-actions {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.quick-actions button {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, #ffffff 0%, #f8fbff 100%);
  min-height: 76px;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-family: inherit;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-spring);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.quick-actions button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(79, 70, 229, 0.08) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 500ms ease;
}

.quick-actions button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  background: linear-gradient(135deg, white 0%, #f5f3ff 100%);
}

.quick-actions button:hover::after {
  transform: translateX(100%);
}

.quick-actions button:active {
  transform: translateY(0) scale(0.98);
}

.quick-actions button i {
  margin-right: var(--space-2);
  color: var(--primary);
  width: 20px;
  font-size: 18px;
}

/* ============================================
   PANELS & CHARTS
   ============================================ */

.bottom-grid {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

.bottom-grid > .panel,
.bottom-grid > .side-panels {
  align-self: start;
}

.side-panels {
  display: grid;
  gap: var(--space-4);
  grid-template-rows: auto auto auto;
  align-self: start;
  min-height: 0;
}

.panel {
  background: linear-gradient(160deg, #ffffff 0%, #fafcff 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.panel-header h3 i {
  color: var(--warning);
  margin-right: var(--space-2);
  font-size: 15px;
}

/* Chart Container */
.chart-container {
  height: 290px;
  position: relative;
}

.sales-insights-shell {
  margin-top: var(--space-4);
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #d5e8f7;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(20, 184, 166, 0.12),
      transparent 40%
    ),
    linear-gradient(145deg, #f6fbff 0%, #eef7ff 100%);
}

.sales-insights-shell.is-refreshing .sales-insight-card,
.sales-insights-shell.is-refreshing .sales-insight-note,
.sales-insights-shell.is-refreshing .sales-insight-track,
.sales-insights-shell.is-refreshing .sales-mix-shell {
  animation: salesInsightFadeIn 440ms ease-out both;
}

.sales-insights-shell.is-refreshing .sales-insight-card:nth-child(2) {
  animation-delay: 60ms;
}

.sales-insights-shell.is-refreshing .sales-insight-card:nth-child(3) {
  animation-delay: 120ms;
}

.sales-insights-shell.is-refreshing .sales-mix-legend-row {
  animation: salesInsightFadeIn 420ms ease-out both;
}

.sales-insights-shell.is-refreshing .sales-mix-legend-row:nth-child(1) {
  animation-delay: 90ms;
}

.sales-insights-shell.is-refreshing .sales-mix-legend-row:nth-child(2) {
  animation-delay: 140ms;
}

.sales-insights-shell.is-refreshing .sales-mix-legend-row:nth-child(3) {
  animation-delay: 190ms;
}

.sales-insights-shell.is-refreshing .sales-mix-legend-row:nth-child(4) {
  animation-delay: 240ms;
}

@keyframes salesInsightFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sales-insight-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.sales-insight-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d8e5f0;
  background: #ffffff;
}

.sales-insight-card span {
  display: block;
  font-size: 11px;
  color: #48657f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.sales-insight-card strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.15;
  color: #0b3555;
  font-variant-numeric: tabular-nums;
}

.sales-momentum-value {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.sales-momentum-value::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  margin-right: 6px;
  line-height: 1;
}

.sales-momentum-value.momentum-up::before {
  content: "\f062";
}

.sales-momentum-value.momentum-flat::before {
  content: "\f068";
}

.sales-momentum-value.momentum-down::before {
  content: "\f063";
}

.sales-momentum-value.momentum-up {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.1);
}

.sales-momentum-value.momentum-flat {
  color: #9a6700;
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(245, 158, 11, 0.14);
}

.sales-momentum-value.momentum-down {
  color: #b42318;
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(239, 68, 68, 0.12);
}

.sales-insights-shell.is-refreshing .sales-momentum-value.momentum-up {
  animation: salesMomentumPulseUp 620ms ease-out 100ms both;
}

.sales-insights-shell.is-refreshing .sales-momentum-value.momentum-flat {
  animation: salesMomentumPulseFlat 620ms ease-out 100ms both;
}

.sales-insights-shell.is-refreshing .sales-momentum-value.momentum-down {
  animation: salesMomentumPulseDown 620ms ease-out 100ms both;
}

@keyframes salesMomentumPulseUp {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.32);
    transform: scale(0.98);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(15, 118, 110, 0);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0);
    transform: scale(1);
  }
}

@keyframes salesMomentumPulseFlat {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.34);
    transform: scale(0.98);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    transform: scale(1);
  }
}

@keyframes salesMomentumPulseDown {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.32);
    transform: scale(0.98);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    transform: scale(1);
  }
}

.sales-insight-note {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #33546f;
}

.sales-insight-tracks {
  display: grid;
  gap: 8px;
}

.sales-insight-track {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
}

.sales-insight-track-label {
  font-size: 11px;
  font-weight: 700;
  color: #274861;
}

.sales-insight-track-bar {
  height: 8px;
  border-radius: 999px;
  background: #dcecf8;
  overflow: hidden;
}

.sales-insight-track-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.sales-insight-track-value {
  font-size: 11px;
  font-weight: 700;
  color: #1d415d;
}

.sales-mix-shell {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #bfd9ec;
}

.sales-mix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sales-mix-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #0f3554;
  letter-spacing: 0.02em;
}

.sales-mix-head span {
  font-size: 11px;
  color: #48657f;
  font-weight: 700;
}

.sales-mix-layout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
}

.sales-mix-canvas-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .sales-insights-shell.is-refreshing .sales-insight-card,
  .sales-insights-shell.is-refreshing .sales-insight-note,
  .sales-insights-shell.is-refreshing .sales-insight-track,
  .sales-insights-shell.is-refreshing .sales-mix-shell,
  .sales-insights-shell.is-refreshing .sales-mix-legend-row,
  .sales-insights-shell.is-refreshing .sales-momentum-value {
    animation: none;
  }
}

.sales-mix-legend {
  display: grid;
  gap: 8px;
}

.sales-mix-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.sales-mix-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #173e5d;
  font-weight: 700;
}

.sales-mix-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.sales-mix-dot.dot-0 {
  background: #0f766e;
}

.sales-mix-dot.dot-1 {
  background: #2563eb;
}

.sales-mix-dot.dot-2 {
  background: #f59e0b;
}

.sales-mix-dot.dot-3 {
  background: #7c3aed;
}

.sales-mix-legend-value {
  font-size: 11px;
  color: #31536d;
  font-weight: 700;
}

.chart-panel canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Tabs */
.tabs {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
}

.tabs span {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-base);
}

.tabs span:hover {
  background: var(--gray-100);
}

.tabs .active {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.muted {
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-8);
  font-size: 13px;
}

.success-text {
  color: var(--success);
}

.success-text i {
  margin-right: var(--space-2);
}

/* ============================================
   LOW STOCK PANEL
   ============================================ */

.low-stock-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.low-stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--warning);
}

.low-stock-item strong {
  font-size: 13px;
  display: block;
}

.low-stock-item small {
  font-size: 11px;
  color: var(--text-muted);
}

.stock-badge {
  font-size: 11px;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.stock-badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ============================================
   RECENT SALES
   ============================================ */

.recent-sales {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.debt-reminder-center {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  min-height: 0;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(245, 158, 11, 0.15),
      transparent 40%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(15, 118, 110, 0.12),
      transparent 46%
    ),
    linear-gradient(160deg, #fbfdff 0%, #f1f8ff 100%);
  border: 1px solid #cddfee;
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease;
}

.debt-reminder-center.is-cleared {
  opacity: 0.76;
  filter: saturate(0.85);
}

.debt-reminder-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0f5d56;
  border: 1px solid #b9ddd8;
  background: linear-gradient(120deg, #e8fbf7 0%, #ddf5f0 100%);
}

.debt-reminder-center-list {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 2px;
}

.debt-reminder-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.debt-reminder-notes li {
  position: relative;
  padding: 8px 10px 8px 28px;
  border-radius: 10px;
  border: 1px solid #d3e0ec;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(242, 248, 255, 0.88) 100%
  );
  font-size: 12px;
  color: #335574;
  line-height: 1.4;
}

.debt-reminder-notes li::before {
  content: "\f0f3";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 9px;
  font-size: 11px;
  color: #0f766e;
}

.debt-reminder-center-toolbar {
  display: flex;
  justify-content: flex-end;
}

.debt-reminder-card {
  border: 1px solid #cedeed;
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 14px rgba(22, 53, 83, 0.08);
}

.debt-reminder-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.debt-reminder-card-top strong {
  font-size: 13px;
  color: #183f5e;
}

.debt-reminder-card-top span {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  border: 1px solid #f0d2aa;
  border-radius: 999px;
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  background: #fff5e9;
}

.debt-reminder-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #355778;
}

.debt-reminder-card p strong {
  color: #b4233b;
}

.debt-reminder-empty {
  border: 1px dashed #bdd1e4;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  color: #4f6b86;
  background: rgba(255, 255, 255, 0.7);
}

.debt-reminder-empty.is-muted {
  opacity: 0.85;
}

.debt-reminder-empty i {
  color: #0f766e;
  margin-bottom: 6px;
  font-size: 18px;
}

.debt-reminder-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.debt-reminder-dismiss {
  border: 1px solid #d6dfea;
  border-radius: 10px;
  min-height: 30px;
  padding: 0 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  color: #385776;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    transform 140ms ease,
    box-shadow 170ms ease;
}

.debt-reminder-dismiss:hover,
.debt-reminder-dismiss:focus-visible {
  border-color: #a5bdd6;
  color: #133f68;
  transform: translateY(-1px);
  box-shadow: 0 8px 12px rgba(23, 56, 88, 0.14);
  outline: none;
}

.debt-reminder-dismiss i {
  font-size: 12px;
}

.sale-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: var(--space-3);
  transition: background var(--transition-base);
  padding: var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
}

.sale-row:hover {
  background: var(--gray-50);
}

.sale-row:last-child {
  border-bottom: none;
}

.sale-row strong {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.sale-row small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: var(--space-1);
}

.sale-amount {
  text-align: right;
}

/* ============================================
   DATA TABLES
   ============================================ */

.page-content {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.content-header h2 {
  margin: 0;
}

.content-header > .btn {
  margin-left: auto;
}

.page-actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.page-info h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--space-1) 0;
}

.page-info p {
  color: var(--text-secondary);
  margin: 0;
}

.data-table-container {
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.import-feedback {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 13px;
}

.import-feedback-body {
  display: grid;
  gap: 8px;
}

.import-feedback-report-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.import-feedback-report-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.import-feedback-report-row {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
}

.import-feedback-report-row strong {
  font-size: 12px;
}

.import-feedback-report-row span {
  font-size: 12px;
  opacity: 0.9;
}

/* ── Flash bar (auto-dismiss with timer) ── */
.page-flash-bar {
  margin: 8px 0 0;
  overflow: hidden;
}
.flash-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}
.flash-inner i { font-size: 16px; flex-shrink: 0; }
.flash-inner span:not(.flash-timer-bar) { flex: 1; }
.flash-timer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: .35;
  border-radius: 0 0 0 12px;
}
.flash-inner.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flash-inner.warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.flash-inner.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash-inner.info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

.import-feedback.success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.import-feedback.warning {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.import-feedback.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.search-box i {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-box input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 13px;
  transition: all var(--transition-base);
  background: #ffffff;
  color: var(--text-primary);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: #ffffff;
}

.table-filters {
  display: flex;
  gap: var(--space-2);
}

.table-filters select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.debt-ledger-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.debt-ledger-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.debt-ledger-search-box {
  max-width: 360px;
}

.debt-ledger-search-box i {
  color: #94a3b8;
}

.debt-ledger-search-input {
  min-width: 320px;
  height: 44px;
  border: 1px solid #d3dbe6;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 14px 0 38px;
  font-family: inherit;
  font-size: 14px;
  color: #1f2937;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.debt-ledger-search-input::placeholder {
  color: #748499;
}

.debt-ledger-search-input:focus {
  outline: none;
  border-color: #a9bfd7;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.debt-ledger-clear-btn {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d2dfed;
  border-radius: 12px;
  background: #f5f9ff;
  color: #355778;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.debt-ledger-clear-btn:hover {
  border-color: #b8ccdf;
  background: #edf4fc;
}

.debt-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}

.debt-action-primary {
  width: auto;
  min-width: 74px;
  padding: 0 10px;
  gap: 6px;
  margin-right: 0;
  border: 1px solid #c6e4dd;
  background: linear-gradient(180deg, #f1fbf8 0%, #e6f7f2 100%);
  color: #0f6f66;
  font-weight: 700;
}

.debt-action-primary:hover,
.debt-action-primary:focus-visible {
  border-color: #94d2c6;
  background: linear-gradient(180deg, #e6f8f2 0%, #d8f2ea 100%);
  color: #0b5b54;
}

.debt-action-primary span {
  font-size: 12px;
  letter-spacing: 0.01em;
}

.debt-action-menu {
  position: relative;
}

.debt-action-menu > summary {
  list-style: none;
  margin: 0;
}

.debt-action-menu > summary::-webkit-details-marker {
  display: none;
}

.debt-action-more {
  margin-right: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid #c7d7e7;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255, 255, 255, 0.95),
      transparent 52%
    ),
    linear-gradient(165deg, #ffffff 0%, #edf4fb 100%);
  color: #295179;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 7px 16px rgba(18, 47, 76, 0.12);
  transition:
    transform 140ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease,
    color 160ms ease,
    background 180ms ease;
}

.debt-action-menu[open] > .debt-action-more,
.customer-action-menu[open] > .debt-action-more,
.debt-action-more:hover,
.debt-action-more:focus-visible {
  border-color: #8fb2d3;
  background:
    radial-gradient(
      circle at 20% 14%,
      rgba(255, 255, 255, 0.98),
      transparent 54%
    ),
    linear-gradient(165deg, #ffffff 0%, #e5f0fb 100%);
  color: #133f68;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 20px rgba(19, 61, 96, 0.17);
  transform: translateY(-1px);
  outline: none;
}

.debt-action-more i {
  font-size: 14px;
}

.debt-action-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  bottom: auto;
  min-width: 210px;
  z-index: 20;
  padding: 8px;
  border: 1px solid rgba(182, 203, 224, 0.82);
  border-radius: 14px;
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(243, 249, 255, 0.93) 100%
  );
  backdrop-filter: blur(8px);
  box-shadow:
    0 16px 26px rgba(11, 33, 53, 0.14),
    0 8px 14px rgba(13, 49, 79, 0.09);
  display: grid;
  gap: 5px;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-3px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.debt-action-menu[open] .debt-action-menu-panel,
.customer-action-menu[open] .debt-action-menu-panel,
.customer-action-menu[open] .customer-action-menu-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.debt-action-menu.open-up .debt-action-menu-panel,
.customer-action-menu.open-up .debt-action-menu-panel,
.customer-action-menu.open-up .customer-action-menu-panel {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom right;
}

.debt-action-item {
  width: 100%;
  border: 1px solid rgba(198, 214, 230, 0.54);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #224a6f;
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 150ms ease,
    color 150ms ease,
    background 170ms ease,
    box-shadow 180ms ease;
}

.debt-action-item i {
  width: 14px;
  text-align: center;
  color: #3f6588;
  transition: color 140ms ease;
}

.debt-action-item:hover,
.debt-action-item:focus-visible {
  border-color: #9ebfdf;
  background: linear-gradient(160deg, #ffffff 0%, #edf5fd 100%);
  color: #133f68;
  box-shadow: 0 8px 12px rgba(25, 66, 102, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.debt-action-item:hover i,
.debt-action-item:focus-visible i {
  color: #1f527f;
}

.debt-action-item.danger {
  color: #a02337;
}

.debt-action-item.danger i {
  color: #c23a51;
}

.debt-action-item.danger:hover,
.debt-action-item.danger:focus-visible {
  border-color: #f1c4cd;
  background: linear-gradient(160deg, #fff6f7 0%, #ffecee 100%);
  color: #8b1b2e;
  box-shadow: 0 8px 12px rgba(155, 30, 51, 0.13);
}

.debt-action-item.danger:hover i,
.debt-action-item.danger:focus-visible i {
  color: #ad253d;
}

.inventory-page-shell {
  --inv-ink: #0c1e31;
  --inv-navy: #12324f;
  --inv-teal: #0f766e;
  --inv-teal-soft: #14b8a6;
  --inv-amber: #f59e0b;
  --inv-amber-soft: #fbbf24;
  --inv-border: #c8d8e8;
  --inv-border-strong: #aec7dd;
  --inv-surface: rgba(255, 255, 255, 0.96);
  --inv-surface-soft: rgba(246, 251, 255, 0.92);
  --inv-shadow: 0 22px 36px rgba(11, 35, 56, 0.12);
  background:
    radial-gradient(
      circle at 9% 12%,
      rgba(20, 184, 166, 0.13),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(245, 158, 11, 0.1),
      transparent 38%
    ),
    linear-gradient(150deg, #f4f9ff 0%, #eaf3fb 100%);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid var(--inv-border);
  box-shadow: var(--inv-shadow);
}

.inventory-page-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(174, 199, 221, 0.6);
}

.inventory-page-submeta {
  margin-top: 7px;
  color: #56728e;
  font-size: 13px;
  font-weight: 600;
}

.activity-submeta-separator {
  margin: 0 6px;
}

.logs-table-header-block {
  display: block;
}

.logs-filter-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.activity-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.activity-page-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #c6d9ea;
  background: #f8fbff;
  color: #1d4f75;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.18s ease;
}

.activity-page-tab:hover {
  border-color: #9ebad2;
  background: #eff7ff;
}

.activity-page-tab.active {
  background: linear-gradient(130deg, #0f766e 0%, #14b8a6 100%);
  border-color: #0f766e;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 118, 110, 0.26);
}

.logs-search-box-wide {
  max-width: 460px;
}

.logs-search-box-compact {
  max-width: 380px;
}

.logs-empty-cell {
  text-align: center;
  padding: 20px;
}

.inventory-page-header .btn {
  border-radius: 12px;
  min-height: 42px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.inventory-page-header .btn-secondary {
  border: 1px solid #bed2e4;
  background: linear-gradient(145deg, #ffffff 0%, #eff7ff 100%);
  color: #18496f;
}

.inventory-page-header .btn-secondary:hover {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e8f3ff 100%);
}

.inventory-page-header .btn-primary {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  color: #f7fffe;
  border-color: transparent;
  box-shadow: 0 12px 20px rgba(15, 118, 110, 0.25);
}

.inventory-page-header .btn-primary:hover {
  filter: brightness(1.06);
}

.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.inventory-kpi-card {
  background: var(--inv-surface);
  border: 1px solid var(--inv-border);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 41, 65, 0.08);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.inventory-kpi-card:hover {
  box-shadow: 0 8px 24px rgba(15, 41, 65, 0.14);
  transform: translateY(-2px);
}

.inventory-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0f766e, #14b8a6);
  border-radius: 4px 0 0 4px;
}

.inventory-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 19px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0d6b64 0%, #15a899 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 118, 110, 0.3);
}

.inventory-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inventory-kpi-card span {
  font-size: 11px;
  color: #4f6a83;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.inventory-kpi-card strong {
  font-size: 20px;
  color: #0d2d44;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-kpi-card.warning {
  border-color: #f0c896;
  background: linear-gradient(160deg, #fff9f0 0%, #fffdf9 100%);
}

.inventory-kpi-card.warning strong {
  color: #92400e;
}

.inventory-kpi-card.warning::before {
  background: linear-gradient(180deg, #f59e0b, #f97316);
}

.inventory-kpi-card.warning .inventory-kpi-icon {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  box-shadow: 0 6px 14px rgba(217, 119, 6, 0.3);
}

.inventory-kpi-card.success {
  border-color: #86d8ce;
  background: linear-gradient(160deg, #edfaf7 0%, #f5fffd 100%);
}

.inventory-kpi-card.success strong {
  color: #0f766e;
}

.inventory-table-container {
  border-radius: 14px;
  border: 1px solid var(--inv-border);
  background: var(--inv-surface);
  box-shadow: 0 12px 28px rgba(13, 38, 61, 0.1);
  overflow: hidden;
}

.inventory-search-field {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.inventory-search-field i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6e879e;
  pointer-events: none;
  font-size: 13px;
}

.inventory-search-field input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1.5px solid #c1d3e4;
  border-radius: 9px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #153d5a;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.inventory-search-field input::placeholder {
  color: #6b879f;
}

.inventory-search-field input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.inventory-visible-indicator {
  margin-left: auto;
  font-size: 12px;
  color: #3f5d76;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #bdd5e8;
  background: #f0f8ff;
  font-weight: 600;
  white-space: nowrap;
}

.inventory-visible-indicator strong {
  color: #0f766e;
}

.pager-bar {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--inv-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pager-meta {
  color: #4d677f;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pager-chip {
  padding: 4px 10px;
  border: 1px solid #c3d6e8;
  border-radius: 999px;
  background: #ecf6ff;
  color: #205073;
  font-weight: 600;
}

.pager-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #c0d3e5;
  background: #f1f7ff;
  color: #254f72;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-fast);
}

.pager-btn:hover {
  background: #e6f2ff;
  border-color: #8fb0cb;
  transform: translateY(-1px);
}

.pager-number {
  min-width: 36px;
  justify-content: center;
  padding: 0 10px;
}

.pager-number.current {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  border-color: #0f766e;
  color: #f8fffe;
}

.pager-ellipsis {
  color: #6e849a;
  font-weight: 600;
  padding: 0 2px;
}

.inventory-page-shell .data-table td {
  border-bottom-color: #dce9f3;
  padding: 10px 12px;
  vertical-align: middle;
}

.inventory-page-shell .status-badge.success {
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  border: 1px solid rgba(15, 118, 110, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inventory-page-shell .status-badge.danger {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inventory-page-shell .btn-icon {
  background: #eef4fb;
  color: #2d5877;
  border: 1px solid #d0ddec;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 12px;
}

.inventory-page-shell .btn-icon:hover {
  background: #d8edfb;
  color: #0f766e;
  border-color: #9dc1df;
}

.inventory-page-shell .btn-icon.danger:hover {
  background: #fff0f0;
  color: #dc2626;
  border-color: #fca5a5;
}

.inventory-page-shell,
.inventory-kpi-card,
.inventory-table-container {
  animation: inventoryFadeUp 480ms ease-out both;
}

.inventory-kpi-card:nth-child(1) {
  animation-delay: 40ms;
}
.inventory-kpi-card:nth-child(2) {
  animation-delay: 90ms;
}
.inventory-kpi-card:nth-child(3) {
  animation-delay: 140ms;
}
.inventory-kpi-card:nth-child(4) {
  animation-delay: 190ms;
}
.inventory-kpi-card:nth-child(5) {
  animation-delay: 240ms;
}

@keyframes inventoryFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  background: linear-gradient(180deg, #f8fafd 0%, #f3f6fb 100%);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.data-table tbody tr {
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

.data-table code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--primary);
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-badge.success {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-badge.warning {
  background: var(--warning-bg);
  color: #b45309;
}

.status-badge.info {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.status-badge.secondary {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.payment-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--text-secondary);
}

.payment-badge.cash {
  background: var(--success-bg);
  color: var(--success);
}

/* ============================================
   ADVANCED MODULE PAGES (ALL REMAINING)
   ============================================ */

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-content {
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(79, 70, 229, 0.14),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 86%,
      rgba(25, 93, 157, 0.11),
      transparent 37%
    ),
    linear-gradient(145deg, #f7fbff 0%, #eef3fa 100%);
  border-radius: 16px;
  border: 1px solid #d9e4ef;
  box-shadow: 0 18px 32px rgba(22, 48, 75, 0.08);
  padding: 18px;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-header,
:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .content-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8e3ee;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-info
  h2,
:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .content-header
  h2 {
  color: #153a57;
  letter-spacing: 0.2px;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn.btn-primary {
  border: none;
  background: linear-gradient(95deg, #4338ca 0%, #4f46e5 100%);
  box-shadow: 0 8px 16px rgba(67, 56, 202, 0.22);
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn.btn-primary:hover {
  filter: brightness(1.04);
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table-container,
:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-wrapper {
  border-radius: 14px;
  border: 1px solid #d6e1ec;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 24px rgba(18, 44, 71, 0.08);
  overflow: hidden;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-header {
  background: rgba(248, 252, 255, 0.92);
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table
  th {
  background: #f3f8fe;
  color: #3f5b77;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table
  tbody
  tr:hover {
  background: #f6fbff;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .search-box
  input,
:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-filters
  select {
  border-color: #cfdeeb;
  background: #ffffff;
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .search-box
  input:focus,
:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-filters
  select:focus {
  outline: none;
  border-color: #4338ca;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.14);
}

:is(
    .customers-page,
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-wrapper {
  overflow-x: auto;
}

.users-page .data-table td:last-child {
  white-space: nowrap;
}

.users-page .data-table td:last-child .btn-icon {
  width: 34px;
  height: 34px;
  margin-right: 6px;
  border-radius: 10px;
  border: 1px solid #cddbeb;
  background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  color: #274f74;
  box-shadow: 0 3px 8px rgba(17, 53, 84, 0.08);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.users-page .data-table td:last-child .btn-icon:last-child {
  margin-right: 0;
}

.users-page .data-table td:last-child .btn-icon:hover,
.users-page .data-table td:last-child .btn-icon:focus-visible {
  transform: translateY(-1px);
  border-color: #8fb0cb;
  box-shadow: 0 8px 14px rgba(16, 54, 86, 0.16);
}

.users-page .data-table td:last-child [data-action="editUserRole"] {
  color: #0f766e;
  background: linear-gradient(180deg, #ffffff 0%, #e7fbf8 100%);
  border-color: #b7e8e1;
}

.users-page .data-table td:last-child [data-action="editUserPermissions"] {
  color: #2d5a86;
  background: linear-gradient(180deg, #ffffff 0%, #e9f3ff 100%);
  border-color: #bfd5ee;
}

.users-page .data-table td:last-child [data-action="resetUserPassword"] {
  color: #89511b;
  background: linear-gradient(180deg, #ffffff 0%, #fff3e2 100%);
  border-color: #f0d2ad;
}

.users-page
  .data-table
  td:last-child
  [data-action="toggleUserStatus"][data-status="active"] {
  color: #8a2020;
  background: linear-gradient(180deg, #ffffff 0%, #ffeded 100%);
  border-color: #efc0c0;
}

.users-page
  .data-table
  td:last-child
  [data-action="toggleUserStatus"][data-status="inactive"] {
  color: #17643f;
  background: linear-gradient(180deg, #ffffff 0%, #eafbf0 100%);
  border-color: #bde7ce;
}

@media (max-width: 640px) {
  .users-page .data-table td:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .users-page .data-table td:last-child .btn-icon {
    width: 100%;
    margin-right: 0;
    justify-content: center;
  }
}

/* ============================================================
   USERS & PRIVILEGES — PREMIUM REDESIGN
   ============================================================ */

/* Danger KPI card variant (reusable) */
.inventory-kpi-card.danger {
  background: linear-gradient(135deg, #fff5f5 0%, #fff1f1 100%);
  border-color: #fca5a5;
}

.inventory-kpi-card.danger strong {
  color: #b91c1c;
}

.inventory-kpi-card.danger .inventory-kpi-icon {
  background: #fee2e2;
  color: #dc2626;
}

/* Users page shell: inherits inventory-page-shell background */
.users-page .users-page-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

/* 5-column KPI grid for users */
.usr-kpi-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  margin-bottom: 16px;
}

/* Filter select (shared with other inv pages) */
.inv-filter-select {
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--inv-border, #c8d8e8);
  border-radius: 10px;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1f2937;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms;
}

.inv-filter-select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* Table container */
.usr-table-container {
  border-radius: 14px;
  border: 1px solid var(--inv-border);
  background: var(--inv-surface);
  box-shadow: 0 18px 30px rgba(13, 38, 61, 0.10);
  overflow: hidden;
}

/* User name cell */
.usr-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.usr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.usr-name-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.usr-display-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0c1e31;
}

.usr-self-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  border: 1px solid rgba(15, 118, 110, 0.25);
  color: #0f766e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Action buttons group */
.usr-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.usr-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #d0dcec;
  background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  color: #335675;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease, color 130ms ease;
}

.usr-action-btn:hover {
  transform: translateY(-1px);
  border-color: #8fb0cb;
  box-shadow: 0 6px 12px rgba(16, 54, 86, 0.14);
}

.usr-action-btn[data-action="editUserRole"] {
  color: #0f766e;
  background: linear-gradient(180deg, #ffffff 0%, #e7fbf8 100%);
  border-color: #b7e8e1;
}

.usr-action-btn[data-action="editUserPermissions"] {
  color: #2d5a86;
  background: linear-gradient(180deg, #ffffff 0%, #e9f3ff 100%);
  border-color: #bfd5ee;
}

.usr-action-btn[data-action="resetUserPassword"] {
  color: #89511b;
  background: linear-gradient(180deg, #ffffff 0%, #fff3e2 100%);
  border-color: #f0d2ad;
}

.usr-action-btn[data-action="toggleUserStatus"][data-status="active"] {
  color: #8a2020;
  background: linear-gradient(180deg, #ffffff 0%, #ffeded 100%);
  border-color: #efc0c0;
}

.usr-action-btn[data-action="toggleUserStatus"][data-status="inactive"] {
  color: #17643f;
  background: linear-gradient(180deg, #ffffff 0%, #eafbf0 100%);
  border-color: #bde7ce;
}

/* Delete button */
.usr-delete-btn {
  color: #b91c1c !important;
  background: linear-gradient(180deg, #fff5f5 0%, #ffe4e4 100%) !important;
  border-color: #fca5a5 !important;
}

.usr-delete-btn:hover {
  background: linear-gradient(180deg, #ffe4e4 0%, #ffd5d5 100%) !important;
  border-color: #f87171 !important;
  box-shadow: 0 6px 12px rgba(185, 28, 28, 0.18) !important;
  color: #991b1b !important;
}

/* Table cell improvements */
.users-page .users-page-shell .data-table th {
  background: #eff6fc;
  color: #355674;
  border-bottom-color: #c3d6e8;
}

.users-page .users-page-shell .data-table tbody tr:hover {
  background: #edf7ff;
}

.users-page .users-page-shell .data-table td:last-child {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .usr-kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .usr-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .usr-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Dark mode */
[data-theme="dark"] .inventory-kpi-card.danger {
  background: #1a0505 !important;
  border-color: #4a1515 !important;
}

[data-theme="dark"] .inventory-kpi-card.danger strong {
  color: #fca5a5 !important;
}

[data-theme="dark"] .inventory-kpi-card.danger .inventory-kpi-icon {
  background: #2a0808 !important;
  color: #f87171 !important;
}

[data-theme="dark"] .usr-table-container {
  background: #111c29 !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .usr-display-name {
  color: #c8d8e8 !important;
}

[data-theme="dark"] .usr-self-badge {
  background: rgba(20, 184, 166, 0.14) !important;
  border-color: rgba(20, 184, 166, 0.3) !important;
  color: #2dd4bf !important;
}

[data-theme="dark"] .usr-action-btn {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}

[data-theme="dark"] .usr-action-btn[data-action="editUserRole"] {
  background: #0a2020 !important;
  border-color: #0f3530 !important;
  color: #2dd4bf !important;
}

[data-theme="dark"] .usr-action-btn[data-action="editUserPermissions"] {
  background: #0e1e30 !important;
  border-color: #1e3050 !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .usr-action-btn[data-action="resetUserPassword"] {
  background: #1c1205 !important;
  border-color: #3a2510 !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .usr-delete-btn {
  background: linear-gradient(180deg, #1a0505 0%, #150404 100%) !important;
  border-color: #4a1515 !important;
  color: #f87171 !important;
}

[data-theme="dark"] .usr-delete-btn:hover {
  background: linear-gradient(180deg, #2a0808 0%, #200606 100%) !important;
  border-color: #721515 !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .inv-filter-select {
  background-color: #141f2e !important;
  border-color: #1e3048 !important;
  color: #c8d8e8 !important;
}

@media (max-width: 768px) {
  :is(
      .customers-page,
      .transactions-page,
      .suppliers-page,
      .employees-page,
      .users-page,
      .expenses-page,
      .invoices-page,
      .deliveries-page,
      .receiving-page,
      .quotations-page,
      .purchase-orders-page,
      .returns-page,
      .appointments-page,
      .locations-page,
      .messages-page,
      .security-logs-page,
      .settings-page
    )
    .page-content {
    padding: 12px;
  }

  :is(
      .customers-page,
      .transactions-page,
      .suppliers-page,
      .employees-page,
      .users-page,
      .expenses-page,
      .invoices-page,
      .deliveries-page,
      .receiving-page,
      .quotations-page,
      .purchase-orders-page,
      .returns-page,
      .appointments-page,
      .locations-page,
      .messages-page,
      .security-logs-page,
      .settings-page
    )
    .data-table
    th,
  :is(
      .customers-page,
      .transactions-page,
      .suppliers-page,
      .employees-page,
      .users-page,
      .expenses-page,
      .invoices-page,
      .deliveries-page,
      .receiving-page,
      .quotations-page,
      .purchase-orders-page,
      .returns-page,
      .appointments-page,
      .locations-page,
      .messages-page,
      .security-logs-page,
      .settings-page
    )
    .data-table
    td {
    padding: 10px 12px;
  }

  .debt-ledger-tools {
    width: 100%;
  }

  .debt-ledger-search-form {
    width: 100%;
  }

  .debt-ledger-search-box {
    max-width: none;
    width: 100%;
  }

  .debt-ledger-search-input {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }

  .debt-ledger-clear-btn {
    height: 38px;
  }

  .pager-bar {
    align-items: stretch;
  }

  .pager-meta {
    width: 100%;
  }

  .activity-page-tabs {
    margin-bottom: 10px;
  }

  .activity-page-tab {
    font-size: 11px;
    padding: 7px 10px;
  }

  .pager-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================
   SALES PAGE (POS SCREEN)
   ============================================ */

.sales-page {
  background: #eceef4;
}

.sales-page .content {
  height: 100vh;
  height: 100dvh;
}

html.display-fit-enabled .sales-page .content {
  height: calc(100vh / var(--display-fit-scale));
  height: calc(100dvh / var(--display-fit-scale));
}

.sales-page .topbar {
  background: linear-gradient(90deg, #4a3ee7 0%, #4f46e5 100%);
  border-bottom: none;
  color: #f4f5ff;
  box-shadow: 0 2px 10px rgba(37, 32, 136, 0.22);
}

.sales-page .topbar strong {
  color: #ffffff;
  font-size: 20px;
}

.sales-page .pill,
.sales-page .icon-btn {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.sales-page .pill.primary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
}

.sales-page .pill:hover,
.sales-page .icon-btn:hover,
.sales-page .pill.primary:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.sales-pos-shell {
  margin-top: 0;
  margin-bottom: 0;
  padding: 16px 18px;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(20, 104, 166, 0.14),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 86%,
      rgba(99, 102, 241, 0.18),
      transparent 38%
    ),
    linear-gradient(150deg, #f8fbff 0%, #eef3f8 100%);
}

.sales-page .sales-pos-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

html.display-fit-enabled .sales-pos-shell {
  height: calc((100vh / var(--display-fit-scale)) - 64px);
  height: calc((100dvh / var(--display-fit-scale)) - 64px);
}

html.display-fit-enabled .sales-page .sales-pos-shell {
  height: auto;
}

.sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  height: 100%;
}

.sales-products-panel {
  min-width: 0;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #d6e2ef;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 34px rgba(30, 53, 76, 0.1);
}

.sales-products-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.sales-products-header h3 {
  margin: 0;
  color: #12314a;
  font-size: 26px;
  line-height: 1.15;
}

.sales-products-header p {
  margin: 4px 0 0;
  color: #5b7188;
  font-size: 13px;
}

.sales-products-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sales-products-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0f7ff;
  border: 1px solid #cfe3f7;
  color: #2e4f6e;
  font-size: 12px;
  font-weight: 600;
}

.sales-search-wrap {
  position: relative;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.sales-search-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7f93aa;
  font-size: 14px;
}

.sales-search-wrap input {
  width: 100%;
  height: 44px;
  border: 1px solid #cfdceb;
  border-radius: 12px;
  background: #ffffff;
  padding: 0 124px 0 40px;
  font-family: inherit;
  color: #1d3148;
  font-size: 14px;
}

.sales-scan-feedback {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #b8e4ca;
  background: #ebf8ef;
  color: #0f7a3b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 160ms ease;
}

.sales-scan-feedback.is-visible {
  opacity: 1;
}

.sales-search-wrap input:focus {
  outline: none;
  border-color: #4338ca;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.16);
}

.sales-category-row {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  flex: 0 0 auto;
  min-height: 46px;
  align-items: center;
  border: 1px solid #d6e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  scrollbar-width: thin;
  scrollbar-color: #c5d4e4 transparent;
  -webkit-overflow-scrolling: touch;
}

.sales-category-shell {
  margin-bottom: 12px;
}

.sales-category-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 6px;
}

.sales-category-meta p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #355675;
}

.sales-category-meta small {
  color: #67829b;
  font-size: 11px;
  font-weight: 600;
}

.sales-chip {
  flex: 0 0 auto;
  border: 1px solid #c8d9e9;
  height: 32px;
  min-width: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fe 100%);
  color: #234864;
  font-size: 12px;
  font-weight: 700;
  padding: 0 13px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  scroll-snap-align: start;
}

.sales-chip.active,
.sales-chip:hover {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.22);
}

.sales-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}
.sales-cart-controls button:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: rgba(176, 195, 212, 0.48);
  background: rgba(168, 186, 203, 0.24);
  color: #a5bbd1;
}

.sales-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

.sales-products-grid::-webkit-scrollbar,
.sales-cart-items::-webkit-scrollbar {
  width: 8px;
}

.sales-products-grid::-webkit-scrollbar-thumb,
.sales-cart-items::-webkit-scrollbar-thumb {
  background: #c9cfda;
  border-radius: 999px;
}

.sales-product-card {
  border: 1px solid #cfdae6;
  background: linear-gradient(170deg, #ffffff 0%, #f5f9fd 100%);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 138px;
  position: relative;
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base),
    background var(--transition-base);
  content-visibility: auto;
  contain-intrinsic-size: 138px;
}

.sales-product-card:hover {
  border-color: #0f766e;
  box-shadow: 0 12px 22px rgba(15, 118, 110, 0.16);
  transform: translateY(-2px);
}

.sales-product-card.is-out-stock,
.sales-product-card:disabled {
  opacity: 0.78;
  filter: grayscale(0.14);
  cursor: not-allowed;
  border-color: #d8e0e8;
  background: linear-gradient(170deg, #f8fafc 0%, #eff3f7 100%);
  box-shadow: none;
  transform: none;
}

.sales-product-card.is-out-stock:hover,
.sales-product-card:disabled:hover {
  border-color: #d8e0e8;
  box-shadow: none;
  transform: none;
}

.sales-product-card.is-out-stock .sales-product-price,
.sales-product-card:disabled .sales-product-price {
  color: #8a97a7;
  text-decoration: line-through;
}

.sales-product-card.is-out-stock strong,
.sales-product-card:disabled strong {
  color: #6f7f90;
}

.sales-product-card.is-out-stock .sales-product-icon,
.sales-product-card:disabled .sales-product-icon {
  background: #e6ebf1;
  color: #8c99a8;
}

.sales-product-card strong {
  font-size: 14px;
  line-height: 1.32;
  color: #163550;
  font-weight: 700;
  min-height: 0;
  padding-right: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sales-product-name,
.sales-cart-item-name,
.sales-checkout-line-main strong,
.sales-receipt-line-main strong {
  font-family: "Poppins", "Segoe UI", sans-serif;
}

.sales-product-card.is-out-stock strong,
.sales-product-card:disabled strong {
  padding-right: 0;
}

.sales-product-icon {
  width: 36px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e8f6f4 0%, #d7eee9 100%);
  color: #0f6b62;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.sales-product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.sales-product-category {
  font-size: 11px;
  color: #3f5f7c;
  background: #edf3f8;
  border: 1px solid #d6e1ec;
  border-radius: 999px;
  padding: 2px 8px;
}

.sales-product-price {
  color: #0e766d;
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
}

.sales-product-restock-note {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #b42318;
  background: #fef1f2;
  border: 1px solid #fbcfe8;
  border-radius: 999px;
  padding: 2px 9px;
}

.sales-product-restock-note.is-visible {
  display: inline-flex;
}

.sales-product-stock {
  font-size: 12px;
  color: #486a87;
  font-weight: 600;
}

.sales-product-stock.in-stock {
  color: #355f83;
}

.sales-product-stock.out-stock {
  color: #b5475c;
}

.sales-no-result {
  margin-top: 14px;
  border: 1px dashed #bfd0e2;
  border-radius: 12px;
  background: #f7fbff;
  color: #4b6480;
  font-size: 13px;
  text-align: center;
  padding: 14px;
}

.sales-products-pagination {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #dde9f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sales-page-btn {
  border: 1px solid #cfe0ef;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  color: #244866;
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sales-page-btn:hover {
  border-color: #4338ca;
  color: #4338ca;
}

.sales-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sales-page-meta {
  font-size: 12px;
  font-weight: 700;
  color: #3d5a79;
  text-align: center;
}

.sales-current-panel {
  background: linear-gradient(170deg, #1a1f3b 0%, #20274a 100%);
  border: 1px solid #2e3763;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  box-shadow: 0 20px 34px rgba(12, 25, 40, 0.3);
}

.sales-current-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sales-current-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

.sales-current-header button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f7fcff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  padding: 5px 10px;
}

.sales-current-header button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sales-cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 8px;
}

.sales-cart-item {
  border: 1px solid rgba(196, 215, 232, 0.3);
  border-radius: 11px;
  background: rgba(8, 27, 43, 0.34);
  padding: 10px;
  margin-bottom: 8px;
}

.sales-cart-item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sales-cart-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #f2f8ff;
}

.sales-cart-item-price {
  font-size: 12px;
  color: #b8cbe0;
  margin-top: 2px;
}

.sales-cart-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sales-cart-controls button {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(214, 230, 244, 0.34);
  background: rgba(255, 255, 255, 0.06);
  color: #e9f4ff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.sales-cart-controls button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.sales-cart-qty {
  width: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #f2f8ff;
}

.sales-cart-line-total {
  font-size: 16px;
  font-weight: 700;
  color: #c7d2fe;
  min-width: 72px;
  text-align: right;
}

.sales-remove-item {
  color: #f2b4b6;
}

.sales-summary {
  border-top: 1px solid rgba(216, 232, 244, 0.28);
  padding-top: 10px;
  margin-top: 12px;
}

.sales-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #bfd5e8;
  font-size: 14px;
}

.sales-summary-row strong {
  color: #f2f8ff;
  font-size: 14px;
}

.sales-summary-row.total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(216, 232, 244, 0.24);
}

.sales-summary-row.total span,
.sales-summary-row.total strong {
  font-size: 24px;
  font-weight: 700;
  color: #c7d2fe;
}

.sales-charge-btn {
  margin-top: 12px;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #4338ca 0%, #4f46e5 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
}

.sales-charge-btn:hover {
  filter: brightness(1.03);
}

.sales-empty-cart {
  border: 1px dashed rgba(202, 225, 243, 0.34);
  border-radius: 10px;
  color: #b8cbe0;
  font-size: 13px;
  text-align: center;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 1280px) {
  .sales-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .inventory-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-visible-indicator {
    margin-left: 0;
  }

  .sales-pos-shell {
    height: auto;
    min-height: calc(100vh - 64px);
    overflow: visible;
  }

  .sales-layout {
    grid-template-columns: 1fr;
  }

  .sales-products-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sales-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 52vh;
  }

  .sales-current-panel {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .inventory-page-shell {
    padding: 12px;
  }

  .inventory-kpi-grid {
    grid-template-columns: 1fr;
  }

  .sales-pos-shell {
    padding: 10px;
  }

  .sales-page .topbar-actions {
    gap: 6px;
  }

  .sales-products-grid {
    grid-template-columns: 1fr;
  }

  .sales-products-stats {
    justify-content: flex-start;
  }
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-1);
}

.btn-icon:hover {
  background: var(--primary-bg);
  color: var(--primary);
}

.btn-icon.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.login-body {
  --login-bg-ink: #05091000;
  --login-bg-navy: #080f1c;
  --login-bg-steel: #0e1a2c;
  --login-accent: #c9950a;
  --login-accent-soft: #e4b020;
  --login-text-light: #e8f0fa;
  --login-text-muted: #8ca8c6;
  --login-card-bg: #faf7f2;
  --login-card-border: rgba(255, 255, 255, 0.5);
  --login-field-bg: #f4f0e8;
  --login-field-border: #d4c9b8;
  --login-field-focus: #1e3a8a;
  --login-link: #1e3a8a;
  --login-button-bg: linear-gradient(
    135deg,
    #0e1f3c 0%,
    #1e3a8a 55%,
    #2550c0 100%
  );
  --login-button-shadow: rgba(30, 58, 138, 0.42);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(
      1400px 600px at 5% 6%,
      rgba(201, 149, 10, 0.12),
      transparent 55%
    ),
    radial-gradient(
      1000px 700px at 95% 95%,
      rgba(30, 58, 138, 0.22),
      transparent 58%
    ),
    radial-gradient(
      900px 500px at 50% 50%,
      rgba(201, 149, 10, 0.06),
      transparent 65%
    ),
    linear-gradient(150deg, #040a14 0%, #080f1c 35%, #0c1828 68%, #07101e 100%);
  display: grid;
  place-items: center;
  color: var(--login-text-light);
  font-family: "Inter", "Manrope", "Poppins", "Segoe UI", sans-serif;
}

.login-body::before,
.login-body::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.6;
}

.login-body::before {
  width: 520px;
  height: 520px;
  top: -170px;
  right: -130px;
  background: radial-gradient(
    circle,
    rgba(201, 149, 10, 0.32) 0%,
    rgba(201, 149, 10, 0) 68%
  );
}

.login-body::after {
  width: 640px;
  height: 640px;
  left: -220px;
  bottom: -280px;
  background: radial-gradient(
    circle,
    rgba(30, 58, 138, 0.38) 0%,
    rgba(30, 58, 138, 0) 70%
  );
}

.login-shell {
  width: min(1100px, calc(100vw - 40px));
  min-height: min(700px, calc(100vh - 50px));
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(201, 149, 10, 0.22);
  box-shadow:
    0 60px 120px rgba(2, 6, 16, 0.65),
    0 24px 48px rgba(4, 10, 24, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(201, 149, 10, 0.08);
  background: rgba(6, 12, 24, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: translateY(10px);
  opacity: 0;
  animation: loginShellIn 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-brand-panel {
  padding: 52px 52px 56px;
  background:
    radial-gradient(
      700px 400px at 10% 8%,
      rgba(201, 149, 10, 0.16),
      transparent 62%
    ),
    radial-gradient(
      500px 350px at 90% 90%,
      rgba(30, 58, 138, 0.24),
      transparent 58%
    ),
    radial-gradient(
      300px 200px at 50% 50%,
      rgba(201, 149, 10, 0.06),
      transparent 70%
    ),
    linear-gradient(158deg, #060e1c 0%, #0a1a30 40%, #0d2240 72%, #0a1c36 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  position: relative;
  border-right: 1px solid rgba(201, 149, 10, 0.18);
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 140px;
  height: 140px;
  border-radius: 24px;
  transform: rotate(14deg);
  background: transparent;
  border: none;
  box-shadow: none;
  display: none;
}

.login-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--login-accent);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 6px rgba(201, 149, 10, 0.4);
}

.login-brand-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.login-brand-identity h1 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  color: #f0f8ff;
  letter-spacing: -0.01em;
  font-family: "Playfair Display", "Sora", "Georgia", serif;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.login-brand-mark {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: #ffffff;
  display: grid;
  place-items: center;
  padding: 8px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  overflow: hidden;
}

.login-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.login-brand-panel > h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  color: #f0f8ff;
  letter-spacing: -0.01em;
  font-family: "Playfair Display", "Sora", "Georgia", serif;
  font-weight: 700;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.login-brand-panel p {
  margin: 0;
  max-width: 480px;
  color: var(--login-text-muted);
  font-size: 16px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.login-brand-metrics {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 1;
}

.login-brand-metrics article {
  border-radius: 12px;
  border: 1px solid rgba(201, 149, 10, 0.18);
  background: rgba(5, 10, 20, 0.55);
  padding: 14px 12px;
  backdrop-filter: blur(6px);
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
}

.login-brand-metrics article:hover {
  border-color: rgba(201, 149, 10, 0.48);
  background: rgba(201, 149, 10, 0.06);
}

.login-brand-metrics strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #e4b020;
  letter-spacing: -0.01em;
}

.login-brand-metrics span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #8ca8c6;
  font-weight: 500;
}

.login-brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

.login-brand-pills span {
  padding: 7px 14px;
  border: 1px solid rgba(201, 149, 10, 0.28);
  border-radius: 999px;
  color: #c8d8ee;
  font-size: 12px;
  font-weight: 600;
  background: rgba(5, 12, 24, 0.55);
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
}

.login-brand-pills span:hover {
  border-color: rgba(201, 149, 10, 0.55);
  background: rgba(201, 149, 10, 0.08);
}

.login-brand-pills span i {
  margin-right: 5px;
  color: var(--login-accent);
  font-size: 11px;
}

.login-card {
  background: linear-gradient(165deg, #faf7f2 0%, #f4f0e8 100%);
  color: #0f172a;
  border-left: 1px solid rgba(201, 149, 10, 0.18);
  padding: 52px 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: loginCardIn 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 80ms;
  opacity: 0;
  position: relative;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9950a 0%, #e4b020 50%, #c9950a 100%);
  opacity: 0.7;
}

.login-card-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a7208;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.login-card-kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c9950a, #e4b020);
  flex-shrink: 0;
}

.login-card h2 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  color: #0a1628;
  font-weight: 700;
}

.login-subtitle {
  margin: 10px 0 26px;
  color: #526070;
  font-size: 14px;
  line-height: 1.6;
}

.login-error {
  margin-bottom: 16px;
  background: #fff1f1;
  border: 1px solid #f9c4c4;
  color: #b91c1c;
  border-radius: 14px;
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #526070;
  letter-spacing: 0.12em;
}

.login-input-wrap {
  position: relative;
  margin-bottom: 15px;
}

.login-input-wrap i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  transition: color var(--transition-base);
}

.login-input-wrap input {
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid var(--login-field-border);
  background: var(--login-field-bg);
  padding: 13px 13px 13px 42px;
  font-size: 14px;
  font-weight: 500;
  color: #14202e;
  font-family: "Inter", "Poppins", sans-serif;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
}

.login-input-wrap input::placeholder {
  color: #8ca3b4;
  font-weight: 400;
}

.login-input-wrap.has-action input {
  padding-right: 46px;
}

.login-password-toggle {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.login-password-toggle:hover {
  background: rgba(30, 58, 138, 0.08);
  color: #1e3a8a;
}

.login-password-toggle:focus-visible {
  outline: 2px solid #1e3a8a;
  outline-offset: 2px;
}

.login-input-wrap input:focus {
  outline: none;
  border-color: var(--login-field-focus);
  box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
  background: #ffffff;
}

.login-input-wrap input:focus + .login-password-toggle,
.login-input-wrap:focus-within i {
  color: var(--login-field-focus);
}

.login-btn {
  width: 100%;
  margin-top: 10px;
  border: none;
  border-radius: 10px;
  background: var(--login-button-bg);
  color: #e8f0ff;
  padding: 15px 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: "Inter", "Poppins", sans-serif;
  box-shadow:
    0 10px 24px var(--login-button-shadow),
    0 2px 4px rgba(0, 0, 0, 0.18);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    filter var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  overflow: hidden;
}

.login-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.login-btn:focus-visible {
  outline: 2px solid #c9950a;
  outline-offset: 3px;
}

.login-meta-row {
  margin: 2px 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.login-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 0;
  letter-spacing: 0;
  font-weight: 700;
  text-transform: none;
}

.login-check input {
  width: 16px;
  height: 16px;
  accent-color: #1e3a8a;
}

.login-text-link {
  color: var(--login-link);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.login-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 58, 138, 0.5);
}

.login-text-link:focus-visible {
  outline: 2px solid #1e3a8a;
  outline-offset: 2px;
  border-radius: 4px;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px var(--login-button-shadow),
    0 4px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(1.07);
}

.login-btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

.login-hint {
  margin-top: 12px;
  font-size: 12px;
  color: #64748b;
}

.login-demo-hint {
  margin-top: 0;
  margin-bottom: 14px;
  border: 1px dashed rgba(30, 58, 138, 0.3);
  background: rgba(30, 58, 138, 0.05);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  color: #1e3a8a;
}

.login-support {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #475569;
}

.login-legal {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 900px) {
  .login-body {
    padding: 14px;
    place-items: center;
  }

  .login-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    width: min(620px, calc(100vw - 18px));
    border-radius: 24px;
    margin: 12px 0;
  }

  .login-brand-panel {
    padding: 28px 24px 22px;
  }

  .login-brand-panel h1 {
    font-size: 32px;
  }

  .login-brand-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .login-brand-panel::after {
    display: none;
  }

  .login-card {
    padding: 30px 22px 24px;
  }

  .login-meta-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .login-body {
    padding: 10px;
    place-items: center;
  }

  .login-shell {
    width: min(100%, calc(100vw - 12px));
    border-radius: 20px;
    margin: -10px 0 0;
  }

  .login-brand-panel {
    padding: 18px 16px 14px;
    gap: 12px;
  }

  .login-brand-panel h1 {
    font-size: 24px;
  }

  .login-brand-panel p {
    font-size: 14px;
    line-height: 1.45;
  }

  .login-brand-metrics,
  .login-brand-pills {
    display: none;
  }

  .login-card {
    padding: 20px 14px 16px;
  }

  .login-card h2 {
    font-size: 28px;
  }

  .login-subtitle {
    margin: 6px 0 14px;
  }

  .login-input-wrap {
    margin-bottom: 12px;
  }

  .login-input-wrap input {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .login-meta-row {
    margin: 0 0 7px;
    gap: 8px;
  }

  .login-btn {
    margin-top: 4px;
    padding: 12px 12px;
  }

  .login-support {
    margin-top: 12px;
    margin-bottom: 6px;
  }
}

@media (max-width: 520px) and (max-height: 780px) {
  .login-body {
    place-items: center;
  }

  .login-shell {
    margin: -6px 0 0;
  }

  .login-brand-panel {
    display: flex;
    padding: 16px 14px 12px;
    gap: 10px;
  }

  .login-card {
    border-left: 1px solid var(--login-card-border);
    padding: 18px 14px 14px;
  }

  .login-card h2 {
    font-size: 24px;
  }

  .login-subtitle {
    margin-bottom: 10px;
  }

  .login-support,
  .login-legal,
  .login-hint {
    display: none;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .login-body {
    padding: 8px;
    place-items: center;
  }

  .login-shell {
    width: min(880px, calc(100vw - 16px));
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 0;
    border-radius: 16px;
  }

  .login-brand-panel {
    display: none;
  }

  .login-card {
    border-left: 0;
    padding: 14px 14px 12px;
  }

  .login-card-kicker {
    font-size: 10px;
  }

  .login-card h2 {
    margin-top: 4px;
    font-size: 24px;
  }

  .login-subtitle {
    margin: 4px 0 10px;
    font-size: 13px;
  }

  .login-error {
    margin-bottom: 10px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .login-card label {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .login-input-wrap {
    margin-bottom: 10px;
  }

  .login-input-wrap input {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
  }

  .login-meta-row {
    margin: 0 0 6px;
    gap: 8px;
  }

  .login-btn {
    margin-top: 2px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .login-support,
  .login-legal,
  .login-hint {
    display: none;
  }
}

@keyframes loginShellIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.btn-primary {
  background: linear-gradient(135deg, #0d1f3c 0%, #1e3a8a 55%, #2550c0 100%);
  color: #e8f0ff;
  box-shadow:
    0 6px 18px rgba(30, 58, 138, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(30, 58, 138, 0.6);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #162d5e 0%, #2448a8 55%, #2f5fd4 100%);
  box-shadow: 0 10px 24px rgba(30, 58, 138, 0.42);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.28);
}

.btn-secondary {
  background: linear-gradient(170deg, #faf7f2 0%, #ede8df 100%);
  color: var(--text-primary);
  border: 1px solid #d4c9b8;
  box-shadow: 0 2px 6px rgba(10, 18, 30, 0.06);
}

.btn-secondary:hover {
  background: linear-gradient(170deg, #f4f0e8 0%, #e6e0d4 100%);
  border-color: #c4b9a6;
  box-shadow: 0 4px 10px rgba(10, 18, 30, 0.09);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-danger {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 6px 16px rgba(185, 28, 28, 0.3);
  border: 1px solid rgba(185, 28, 28, 0.5);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.38);
  transform: translateY(-1px);
}

.btn-danger:active {
  transform: translateY(0);
}

/* ============================================
   REPORTS GRID
   ============================================ */

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.report-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.report-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(79, 70, 229, 0.06), transparent 45%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.report-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.report-card:hover::before {
  opacity: 1;
}

.report-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: var(--space-3);
}

.report-icon.blue {
  background: var(--primary-bg);
  color: var(--primary);
}
.report-icon.green {
  background: var(--success-bg);
  color: var(--success);
}
.report-icon.purple {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}
.report-icon.orange {
  background: var(--warning-bg);
  color: var(--warning);
}
.report-icon.pink {
  background: var(--danger-bg);
  color: var(--danger);
}
.report-icon.teal {
  background: rgba(79, 70, 229, 0.12);
  color: #4f46e5;
}

.report-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}

.report-card p {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

.report-redesign-page {
  --report-ink: #0e2238;
  --report-muted: #5a6d84;
  --report-border: #d3dde9;
  --report-card-bg: #ffffff;
  --report-accent: #1d4f7a;
  --report-accent-soft: #e9f1f9;
  --report-gold: #ad8b3a;
  --report-success: #6366f1;
  --report-danger: #ba4545;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(173, 139, 58, 0.12), transparent 28%),
    radial-gradient(
      circle at 100% 0%,
      rgba(29, 79, 122, 0.12),
      transparent 26%
    ),
    linear-gradient(180deg, #f7fafd 0%, #eff4f9 100%);
  border: 1px solid #dce5ef;
  border-radius: 20px;
  padding: 20px;
}

.report-headline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, #ffffff 0%, #f6f9fd 100%);
  border: 1px solid var(--report-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(15, 26, 45, 0.06);
}

.report-brand-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.report-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--report-accent);
  background: var(--report-accent-soft);
  border: 1px solid #d4e2f0;
}

.report-headline-row .page-info h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--report-ink);
  letter-spacing: 0.01em;
}

.report-headline-row .page-info p {
  margin: 4px 0 0;
  color: var(--report-muted);
}

.report-period-note {
  margin-top: 8px !important;
  font-size: 12px;
  color: #4f5d73 !important;
  font-weight: 500;
}

.report-period-note strong {
  color: var(--report-ink);
}

.report-period-sep {
  color: #94a3b8;
  margin: 0 6px;
}

.report-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-toolbar .btn {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #d6e1ec;
  background: #ffffff;
  color: #1f3853;
  font-weight: 600;
}

.report-toolbar .btn:hover {
  background: #f3f8fd;
  border-color: #bdd0e3;
}

.report-time-filter {
  display: inline-flex;
  background: #edf3f9;
  border: 1px solid #d3deea;
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
}

.report-time-filter button,
.report-time-filter a {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #31445d;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.report-time-filter button.active,
.report-time-filter a.active {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  color: var(--report-accent);
  box-shadow: 0 3px 10px rgba(13, 26, 47, 0.12);
}

.report-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 12px;
}

.report-snapshot-card {
  border: 1px solid var(--report-border);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbfe 100%);
  box-shadow: 0 8px 20px rgba(14, 27, 46, 0.05);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.report-snapshot-card .label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--report-muted);
  font-weight: 700;
}

.report-snapshot-card strong {
  color: var(--report-ink);
  font-size: 22px;
  line-height: 1.2;
}

.report-snapshot-card small {
  color: #6a7f97;
  font-size: 12px;
}

.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 12px;
}

.report-kpi-card {
  border-radius: 14px;
  border: 1px solid var(--report-border);
  background: var(--report-card-bg);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 22px rgba(15, 26, 45, 0.05);
  position: relative;
  overflow: hidden;
}

.report-kpi-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(
    180deg,
    var(--report-accent) 0%,
    var(--report-gold) 100%
  );
}

.report-kpi-card span {
  font-size: 12px;
  color: var(--report-muted);
  font-weight: 600;
  padding-left: 8px;
}

.report-kpi-card strong {
  font-size: 20px;
  color: var(--report-ink);
  line-height: 1.2;
  padding-left: 8px;
}

.report-kpi-card small {
  font-size: 11px;
  color: #72819a;
  font-weight: 600;
  padding-left: 8px;
}

.report-card-shell {
  background: #ffffff;
  border: 1px solid var(--report-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(15, 26, 45, 0.06);
}

.report-card-shell h3 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--report-ink);
  border-bottom: 1px solid #e4eaf2;
  padding-bottom: 10px;
}

.report-day-chart,
.report-hour-chart {
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.report-day-bar-group,
.report-hour-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.report-day-bars {
  width: 100%;
  max-width: 36px;
  height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.report-day-bars .bar {
  width: 13px;
  border-radius: 7px 7px 0 0;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.report-day-bars .bar.revenue {
  background: linear-gradient(180deg, #85a8cb 0%, var(--report-accent) 100%);
}

.report-day-bars .bar.profit {
  background: linear-gradient(180deg, #5cae8d 0%, var(--report-success) 100%);
}

.report-hour-bar-group .hour-bar {
  width: 18px;
  max-width: 18px;
  height: 170px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #9ab6d1 0%, var(--report-accent) 100%);
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.report-day-bar-group small,
.report-hour-bar-group small {
  font-size: 11px;
  color: #6a7a92;
}

.report-legend {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  color: #4f5d73;
  font-size: 12px;
  font-weight: 600;
}

.report-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.report-legend .dot.revenue {
  background: var(--report-accent);
}

.report-legend .dot.profit {
  background: var(--report-success);
}

.report-half-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.report-payment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-payment-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e4ebf3;
  background: #fbfcfe;
  padding: 10px 12px;
  border-radius: 10px;
}

.report-payment-row strong {
  color: var(--report-ink);
  font-size: 13px;
}

.report-payment-row small {
  display: block;
  font-size: 11px;
  color: #6d7a92;
}

.payment-track,
.top-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5ebf2;
  overflow: hidden;
}

.payment-track span,
.top-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #628ab0 0%, var(--report-accent) 100%);
}

.report-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.report-mini-table th,
.report-mini-table td {
  text-align: left;
  border-bottom: 1px solid #e4eaf2;
  padding: 10px 8px;
  font-size: 13px;
}

.report-mini-table th {
  font-size: 12px;
  color: #5e6c84;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-top-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-top-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5ecf3;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fcfdff;
}

.report-top-item .rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecf2f8;
  color: var(--report-accent);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #d4e0ee;
}

.top-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.top-name-wrap strong {
  font-size: 13px;
  color: var(--report-ink);
}

.top-values {
  text-align: right;
}

.top-values strong {
  display: block;
  font-size: 13px;
  color: var(--report-ink);
}

.top-values small {
  font-size: 11px;
  color: #6b7c93;
}

/* ============================================
   STORE CONFIG REDESIGN
   ============================================ */

.settings-redesign {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #d5e0f2;
  background: linear-gradient(125deg, #eef2ff 0%, #f8fafc 55%, #edf4ff 100%);
}

.settings-hero h3 {
  margin: 0;
  font-size: 20px;
  color: #1f2937;
}

.settings-hero p {
  margin: 6px 0 0 0;
  color: #4b5563;
  font-size: 13px;
}

.settings-security-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #d6e3f1;
  background:
    radial-gradient(
      circle at 96% 6%,
      rgba(56, 189, 248, 0.12),
      transparent 38%
    ),
    linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
}

.settings-security-indicator-main h4 {
  margin: 0;
  font-size: 14px;
  color: #17324a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-security-indicator-main p {
  margin: 4px 0 0;
  color: #4f6478;
  font-size: 12px;
}

.settings-security-indicator-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.settings-security-counts {
  color: #3c556b;
  font-size: 12px;
  white-space: nowrap;
}

.hero-badge {
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
}

.settings-grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
}

.settings-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.settings-card h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-note {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
}

.settings-inline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.settings-subsection-title {
  margin: 12px 0 8px;
  font-size: 14px;
  color: #1f2937;
}

.settings-add-location-btn {
  margin-top: 10px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #bfd2e6;
  background: linear-gradient(145deg, #ffffff 0%, #edf5ff 100%);
  color: #204d73;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.settings-add-location-btn:hover,
.settings-add-location-btn:focus-visible {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e6f1ff 100%);
}

.settings-card-full {
  grid-column: 1 / -1;
}

.settings-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 10px;
}

.denomination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.denomination-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  cursor: pointer;
  transition: all var(--transition-base);
}

.denomination-chip:hover {
  border-color: #4f46e5;
  background: #eef2ff;
}

.denomination-chip input {
  width: 16px;
  height: 16px;
}

.denomination-chip span {
  font-size: 13px;
  color: #111827;
  font-weight: 600;
}

.location-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #d4e1ef;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(56, 189, 248, 0.14),
      transparent 34%
    ),
    linear-gradient(170deg, #f8fbff 0%, #f2f7fd 100%);
}

.location-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.1fr)
    minmax(220px, 1.5fr)
    minmax(160px, 1fr)
    minmax(160px, 1fr)
    auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid #d6e2ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 4px 12px rgba(17, 53, 84, 0.06);
}

.settings-submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.settings-locations-card .location-row .form-control {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #c6d7e8;
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.35;
  color: #183b57;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.settings-locations-card .location-row .form-control::placeholder {
  color: #6f869d;
}

.settings-locations-card .location-row .form-control:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.settings-locations-card .location-row [data-action="removeLocationRow"] {
  width: 46px;
  min-width: 46px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #c7d7e7;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%);
  color: #2f587a;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.settings-locations-card
  .location-rows
  [data-location-row]:first-child
  [data-action="removeLocationRow"] {
  visibility: hidden;
  pointer-events: none;
}

.settings-locations-card .location-row [data-action="removeLocationRow"]:hover,
.settings-locations-card
  .location-row
  [data-action="removeLocationRow"]:focus-visible {
  border-color: #efb9be;
  background: linear-gradient(180deg, #fff6f7 0%, #ffecef 100%);
  color: #b4232f;
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .settings-grid-form {
    grid-template-columns: 1fr;
  }

  .settings-two-col {
    grid-template-columns: 1fr;
  }

  .location-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-locations-card .location-row [data-action="removeLocationRow"] {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .settings-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-security-indicator {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-security-indicator-meta {
    align-items: flex-start;
  }

  .settings-security-counts {
    white-space: normal;
  }
}

/* ============================================
   COMING SOON
   ============================================ */

.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.coming-soon-box {
  text-align: center;
  padding: var(--space-10);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 400px;
}

.coming-soon-box i {
  font-size: 64px;
  color: var(--warning);
  margin-bottom: var(--space-4);
}

.coming-soon-box h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: 24px;
}

.coming-soon-box p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-5) 0;
}

/* ============================================
   MODALS — Premium Classic Design
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 10, 22, 0.64);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.93);
  background: #faf7f2;
  border-radius: 12px;
  border: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: min(520px, 90vw);
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  z-index: 201;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-spring);
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: #faf7f2;
  border-bottom: 1px solid #e8e0d0;
}

.modal-header::before,
.modal-header::after {
  display: none;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #888;
  line-height: 1;
  padding: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  transition: color var(--transition-base);
  flex-shrink: 0;
}

.modal-close:hover {
  color: #d9534f;
  background: none;
  border: none;
}

.modal-body {
  padding: 1.5rem;
  max-height: calc(90vh - 130px);
  overflow-y: auto;
  background: transparent;
}

.modal-body::-webkit-scrollbar {
  width: 5px;
}
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #d4c9b8;
  border-radius: 3px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #e8e0d0;
  background: #faf7f2;
}

/* Form Elements in Modal */
.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid #d4c9b8;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition-base);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(10, 18, 30, 0.06);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
  background: #ffffff;
}

.modal.modal-checkout {
  max-width: 560px;
  overflow: visible;
}

.modal.modal-checkout .modal-footer {
  display: none;
}

.modal.modal-checkout .modal-body {
  padding: 14px 18px 18px;
  max-height: calc(90vh - 92px);
  overflow-y: auto;
  overflow-x: visible;
}

.modal.modal-checkout .modal-body::-webkit-scrollbar {
  width: 5px;
}
.modal.modal-checkout .modal-body::-webkit-scrollbar-thumb {
  background: #d4c9b8;
  border-radius: 3px;
}

.modal.modal-checkout .modal-header {
  padding: 14px 18px;
}

.modal.modal-checkout .modal-header h3 {
  font-size: 1.1rem;
}

.sales-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

.modal.modal-checkout #checkoutCustomerSelect {
  background: #ffffff;
  color: #111827;
  position: relative;
  z-index: 3;
}

.modal.modal-checkout #checkoutCustomerSelect option {
  background: #ffffff;
  color: #111827;
}

.sales-checkout-items {
  max-height: 186px;
  overflow-y: auto;
  border: 1px solid #d4c9b8;
  border-radius: 12px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sales-checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #d4c9b8;
  font-size: 14px;
}

.sales-checkout-line-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sales-checkout-line-main small {
  color: #66768b;
  font-size: 12px;
}

.sales-checkout-line:last-child {
  border-bottom: none;
}

.sales-checkout-summary {
  border: 1px solid #d4c9b8;
  border-radius: 12px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 8px rgba(10, 18, 30, 0.06);
}

.sales-checkout-summary div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  color: #526070;
}

.sales-checkout-summary .total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d4c9b8;
  font-weight: 700;
  color: #14202e;
}

.sales-checkout-summary .total strong {
  color: #1e3a8a;
  font-size: 26px;
}

.sales-checkout-payment-title {
  margin: 4px 0 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #526070;
}

.sales-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-payment-tile {
  min-height: 62px;
  border: 1.5px solid #d4c9b8;
  border-radius: 10px;
  background: linear-gradient(170deg, #ffffff 0%, #faf7f2 100%);
  color: #526070;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.sales-payment-tile:hover {
  border-color: #c9950a;
  background: linear-gradient(170deg, #fefbf4 0%, #fdf5e0 100%);
  color: #14202e;
}

.sales-payment-tile i {
  font-size: 14px;
}

.sales-payment-tile.active {
  border-color: #c9950a;
  color: #0a1525;
  background: linear-gradient(160deg, #fdf5e0 0%, #f8ecc8 100%);
  box-shadow:
    0 8px 16px rgba(201, 149, 10, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sales-checkout-submit {
  width: 100%;
  border: 1px solid rgba(30, 58, 138, 0.55);
  border-radius: 10px;
  background: linear-gradient(100deg, #0d1f3c 0%, #1e3a8a 55%, #2550c0 100%);
  color: #e8f0ff;
  height: 50px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 4px;
  transition: all var(--transition-base);
  box-shadow:
    0 8px 20px rgba(30, 58, 138, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.sales-checkout-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.sales-checkout-submit:not(:disabled):hover {
  background: linear-gradient(100deg, #162d5e 0%, #2448a8 55%, #2f5fd4 100%);
  box-shadow: 0 12px 28px rgba(30, 58, 138, 0.4);
  transform: translateY(-1px);
}

.sales-checkout-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.modal.modal-receipt {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal.modal-receipt .modal-body {
  padding: 14px 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

.modal.modal-receipt .modal-body::-webkit-scrollbar {
  width: 5px;
}
.modal.modal-receipt .modal-body::-webkit-scrollbar-thumb {
  background: #d4c9b8;
  border-radius: 3px;
}

.modal.modal-receipt .modal-footer {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal.modal-receipt .modal-footer .btn {
  width: 100%;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
}

.modal.modal-customer-details {
  width: min(96vw, 1120px);
  max-width: 1120px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-customer-details .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal.modal-customer-details .modal-body::-webkit-scrollbar {
  width: 5px;
}
.modal.modal-customer-details .modal-body::-webkit-scrollbar-thumb {
  background: #d4c9b8;
  border-radius: 3px;
}

.modal.modal-customer-details .modal-footer {
  flex-shrink: 0;
}

.modal.modal-invoice-add,
.modal.modal-quotation-add,
.modal.modal-return-add {
  width: min(97vw, 1200px);
  max-width: 1200px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-invoice-add .modal-body,
.modal.modal-quotation-add .modal-body,
.modal.modal-return-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal.modal-invoice-add .modal-body::-webkit-scrollbar,
.modal.modal-quotation-add .modal-body::-webkit-scrollbar,
.modal.modal-return-add .modal-body::-webkit-scrollbar {
  width: 5px;
}
.modal.modal-invoice-add .modal-body::-webkit-scrollbar-thumb,
.modal.modal-quotation-add .modal-body::-webkit-scrollbar-thumb,
.modal.modal-return-add .modal-body::-webkit-scrollbar-thumb {
  background: #d4c9b8;
  border-radius: 3px;
}

.modal.modal-invoice-add .modal-footer,
.modal.modal-quotation-add .modal-footer,
.modal.modal-return-add .modal-footer {
  flex-shrink: 0;
}

.modal.modal-invoice-add .form-group label,
.modal.modal-quotation-add .form-group label,
.modal.modal-return-add .form-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #526070;
}

.modal.modal-invoice-add input,
.modal.modal-invoice-add select,
.modal.modal-quotation-add input,
.modal.modal-quotation-add select,
.modal.modal-return-add input,
.modal.modal-return-add select,
.modal.modal-return-add textarea {
  min-height: 44px;
  border: 1.5px solid #d4c9b8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 3px rgba(10, 18, 30, 0.06);
}

.modal.modal-invoice-add input:focus,
.modal.modal-invoice-add select:focus,
.modal.modal-quotation-add input:focus,
.modal.modal-quotation-add select:focus,
.modal.modal-return-add input:focus,
.modal.modal-return-add select:focus,
.modal.modal-return-add textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
  background: #ffffff;
}

.modal.modal-invoice-add .form-group input[type="search"],
.modal.modal-quotation-add .form-group input[type="search"],
.modal.modal-return-add .form-group input[type="search"] {
  margin-bottom: 8px;
}

.modal.modal-invoice-add .form-group input[type="search"] + select,
.modal.modal-quotation-add .form-group input[type="search"] + select,
.modal.modal-return-add .form-group input[type="search"] + select {
  margin-top: 8px;
}

.quotation-add-form {
  display: grid;
  gap: 12px;
}

.quotation-add-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #d4c9b8;
  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(201, 149, 10, 0.08),
      transparent 45%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(244, 240, 232, 0.9) 100%
    );
  box-shadow: 0 2px 8px rgba(10, 18, 30, 0.06);
}

.quotation-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #e8f0ff;
  background: linear-gradient(140deg, #0d1f3c 0%, #1e3a8a 100%);
  box-shadow: 0 10px 22px rgba(30, 58, 138, 0.28);
}

.quotation-add-hero-icon i {
  font-size: 22px;
}

.quotation-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #14202e;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
}

.quotation-add-hero p {
  margin: 4px 0 0;
  color: #526070;
  font-size: 13px;
}

.quotation-add-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.quotation-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quotation-add-panel-header h5 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #526070;
  font-weight: 700;
}

.quotation-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 149, 10, 0.3);
  background: rgba(201, 149, 10, 0.08);
  color: #9a7208;
  font-size: 11px;
  font-weight: 700;
}

.quotation-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #d4c9b8;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(201, 149, 10, 0.06),
      transparent 34%
    ),
    linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(244, 240, 232, 0.9) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 2px 6px rgba(10, 18, 30, 0.05);
}

.quotation-add-panel:hover .quotation-add-editor-grid {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.quotation-add-editor-grid .form-group {
  margin-bottom: 0;
}

.quotation-add-editor-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.quotation-add-editor-grid .form-group input[type="search"] + select {
  margin-top: 8px;
}

.quotation-add-shortcut {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.return-add-form {
  display: grid;
  gap: 12px;
}

.return-add-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #d4c9b8;
  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(201, 149, 10, 0.08),
      transparent 45%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(244, 240, 232, 0.9) 100%
    );
  box-shadow: 0 2px 8px rgba(10, 18, 30, 0.06);
}

.return-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #e8f0ff;
  background: linear-gradient(140deg, #0d1f3c 0%, #1e3a8a 100%);
  box-shadow: 0 10px 22px rgba(30, 58, 138, 0.28);
}

.return-add-hero-icon i {
  font-size: 22px;
}

.return-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #14202e;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
}

.return-add-hero p {
  margin: 4px 0 0;
  color: #526070;
  font-size: 13px;
}

.return-add-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.return-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.return-add-panel-header h5 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #526070;
  font-weight: 700;
}

.return-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 149, 10, 0.3);
  background: rgba(201, 149, 10, 0.08);
  color: #9a7208;
  font-size: 11px;
  font-weight: 700;
}

.return-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.return-add-editor-grid .form-group {
  margin-bottom: 0;
}

.return-add-editor-grid .form-group:first-child,
.return-add-editor-grid .form-group:last-child {
  grid-column: 1 / -1;
}

.return-add-editor-grid textarea {
  min-height: 96px;
  resize: vertical;
}

.return-add-editor-grid .return-type-group {
  display: grid;
  gap: 10px;
}

.return-type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.return-type-card {
  border: 1px solid #c9d9ea;
  border-radius: 12px;
  background: linear-gradient(170deg, #ffffff 0%, #f4f9ff 100%);
  min-height: 82px;
  padding: 10px 12px;
  text-align: left;
  color: #23415c;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.return-type-card:hover {
  border-color: #7cb0d9;
  box-shadow: 0 10px 18px rgba(18, 59, 98, 0.12);
  transform: translateY(-1px);
}

.return-type-card.is-active {
  border-color: #1e6ea8;
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(160deg, #f0f8ff 0%, #e2f2ff 100%);
  box-shadow: 0 0 0 3px rgba(30, 110, 168, 0.18);
}

.return-type-card-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.return-type-card small {
  color: #486783;
  font-size: 11px;
  line-height: 1.35;
}

.return-stock-impact-note {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #d0deec;
  background: #f6fbff;
  color: #31556f;
  font-size: 12px;
  font-weight: 600;
}

.return-items-panel {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #cfddec;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(56, 189, 248, 0.12),
      transparent 42%
    ),
    linear-gradient(180deg, #fafdff 0%, #eef6ff 100%);
}

.return-items-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.return-items-panel-title-wrap {
  display: grid;
  gap: 6px;
}

.return-items-panel-header h6 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #214a69;
}

.return-items-count {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd7ea;
  background: #f3faff;
  color: #255170;
  font-size: 11px;
  font-weight: 700;
}

.return-add-line-btn {
  border: 1px solid #2f79b2;
  border-radius: 11px;
  background: linear-gradient(160deg, #2879b5 0%, #1f628f 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.return-add-line-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 16px rgba(20, 74, 109, 0.25);
}

.return-items-help {
  display: block;
  margin-top: 6px;
  color: #4b6983;
}

.return-items-table-wrap {
  margin-top: 10px;
  border: 1px solid #cfdeec;
  border-radius: 12px;
  background: #ffffff;
  overflow: auto;
}

.return-items-empty {
  padding: 16px;
  color: #4f6c83;
  font-weight: 600;
}

.return-items-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.return-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d8e6f2;
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(170deg, #ffffff 0%, #f8fcff 100%);
}

.return-item-main {
  min-width: 0;
}

.return-item-product {
  display: block;
  color: #193f5f;
  font-size: 14px;
  line-height: 1.35;
}

.return-item-reason {
  margin: 4px 0 0;
  font-size: 12px;
  color: #557189;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.return-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.return-item-chip {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #ccdeed;
  background: #f5fbff;
  font-size: 11px;
  font-weight: 700;
  color: #2e5a77;
}

.return-item-remove {
  border: 1px solid #e4b7ba;
  background: #fff5f6;
  color: #a13d47;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.return-item-remove:hover {
  background: #ffecee;
}

.return-type-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.return-type-hint {
  margin-top: -2px;
  font-size: 11px;
  font-weight: 600;
  color: #4f6f88;
}

.returns-evidence-modal {
  display: grid;
  gap: 12px;
}

.returns-evidence-lead {
  margin: 0;
  color: #355770;
  font-size: 13px;
}

.returns-evidence-select-wrap {
  display: grid;
  gap: 8px;
}

.returns-evidence-select-label {
  color: #2c4f68;
  font-size: 12px;
  font-weight: 600;
}

.returns-evidence-dropdown {
  width: 100%;
}

.returns-evidence-dropdown-summary {
  list-style: none;
  width: 100%;
  border: 1px solid #b9cde3;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdfefe, #f1f7ff);
  color: #1f3f59;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.returns-evidence-dropdown-summary::-webkit-details-marker {
  display: none;
}

.returns-evidence-dropdown-summary::after {
  content: "\25be";
  color: #2c5f82;
  font-size: 11px;
  transition: transform 0.2s ease;
}

.returns-evidence-dropdown[open] .returns-evidence-dropdown-summary::after {
  transform: rotate(180deg);
}

.returns-evidence-dropdown-summary:focus,
.returns-evidence-dropdown-summary:focus-visible {
  border-color: #2b77b2;
  box-shadow: 0 0 0 3px rgba(43, 119, 178, 0.16);
}

.returns-evidence-dropdown-menu {
  margin-top: 8px;
  border: 1px solid #c9d9ea;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.returns-evidence-dropdown-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 2px;
}

.returns-evidence-chip {
  border: 1px solid #c8dbec;
  background: #ffffff;
  color: #26506d;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.returns-evidence-chip:hover,
.returns-evidence-chip:focus-visible {
  border-color: #a7c6df;
  background: #edf6ff;
  color: #1f445f;
}

.returns-evidence-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 600;
  color: #284f6c;
}

.returns-evidence-dropdown-option:hover {
  background: #edf5ff;
}

.returns-evidence-preview {
  border: 1px solid #d2deed;
  border-radius: 10px;
  background: #f9fcff;
  padding: 10px;
}

.returns-evidence-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #31566f;
  font-size: 12px;
}

.returns-evidence-empty {
  margin: 0;
  color: #526e86;
  font-size: 12px;
  font-weight: 600;
}

.returns-evidence-print-body {
  font-family: "Poppins", "Segoe UI", sans-serif;
  background: #f1f5fb;
  padding: 12px;
}

.returns-evidence-sheet {
  max-width: 1050px !important;
  border-radius: 10px !important;
}

.returns-evidence-table-wrap {
  margin-top: 12px;
  border: 1px solid #c9d9ea;
  border-radius: 8px;
  overflow: hidden;
}

.returns-evidence-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.returns-evidence-table th,
.returns-evidence-table td {
  border: 1px solid #d7e3ef;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.return-evidence-btn {
  border: 1px solid transparent;
}

.return-evidence-btn--damage {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.24);
}

.return-evidence-btn--damage:hover,
.return-evidence-btn--damage:focus-visible {
  background: rgba(239, 68, 68, 0.2);
  color: #991b1b;
}

.return-evidence-btn--expired {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.3);
}

.return-evidence-btn--expired:hover,
.return-evidence-btn--expired:focus-visible {
  background: rgba(217, 119, 6, 0.22);
  color: #92400e;
}

.return-evidence-btn--mistake {
  background: rgba(5, 150, 105, 0.14);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.3);
}

.return-evidence-btn--mistake:hover,
.return-evidence-btn--mistake:focus-visible {
  background: rgba(5, 150, 105, 0.22);
  color: #065f46;
}

.returns-evidence-table th {
  background: #edf5fc;
  color: #204d6b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
}

@media (max-width: 920px) {
  .return-item-card {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .return-items-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.modal.modal-invoice-details,
.modal.modal-quotation-details,
.modal.modal-po-details,
.modal.modal-return-details {
  width: min(97vw, 1160px);
  max-width: 1160px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-invoice-details .modal-header,
.modal.modal-quotation-details .modal-header,
.modal.modal-po-details .modal-header,
.modal.modal-return-details .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-invoice-details .modal-header h3,
.modal.modal-quotation-details .modal-header h3,
.modal.modal-po-details .modal-header h3,
.modal.modal-return-details .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-invoice-details .modal-body,
.modal.modal-quotation-details .modal-body,
.modal.modal-po-details .modal-body,
.modal.modal-return-details .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-invoice-details .modal-footer,
.modal.modal-quotation-details .modal-footer,
.modal.modal-po-details .modal-footer,
.modal.modal-return-details .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.invoice-details-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #d4e2ef;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(56, 189, 248, 0.14),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.invoice-details-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
}

.invoice-details-hero-icon.is-danger {
  background: linear-gradient(140deg, #b42318 0%, #dc2626 100%);
  box-shadow: 0 12px 24px rgba(185, 28, 28, 0.25);
}

.invoice-details-hero-icon.is-purchase {
  background: linear-gradient(140deg, #0f766e 0%, #0ea5a2 100%);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.25);
}

.invoice-details-hero-icon i {
  font-size: 22px;
}

.invoice-details-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.invoice-details-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.invoice-details-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.invoice-details-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.invoice-details-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.invoice-details-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.invoice-details-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.invoice-details-meta-grid .form-group {
  margin-bottom: 0;
}

.invoice-details-meta-grid .form-group.span-2 {
  grid-column: 1 / -1;
}

.modal.modal-invoice-details .form-group label,
.modal.modal-quotation-details .form-group label,
.modal.modal-po-details .form-group label,
.modal.modal-return-details .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-invoice-details input[readonly],
.modal.modal-quotation-details input[readonly],
.modal.modal-po-details input[readonly],
.modal.modal-return-details input[readonly] {
  min-height: 44px;
  border: 1px solid #d1deeb;
  border-radius: 12px;
  background: #f7fbff;
  color: #1f445f;
  font-weight: 600;
}

.po-details-items-card {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.po-details-table-wrap {
  border: 1px solid #d3dfed;
  border-radius: 14px;
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.po-details-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
}

.po-details-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #f6fbff 0%, #edf4fc 100%);
  color: #2b4d68;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #d5e1ee;
}

.po-details-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2eaf3;
  color: #314f6a;
  font-size: 13px;
}

.po-details-table tbody tr:hover td {
  background: #f5faff;
}

.po-details-table-empty {
  text-align: center;
  color: #6b7280;
  font-weight: 600;
  padding: 14px 12px;
}

.modal.modal-user-add {
  width: min(96vw, 680px);
  max-width: 680px;
  max-height: 92vh;
  border: 1px solid rgba(99, 179, 237, 0.3);
  box-shadow: 0 40px 80px rgba(8, 20, 40, 0.45), 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-user-add .modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(99, 179, 237, 0.18);
  background: linear-gradient(118deg, #0a1f3a 0%, #0f2d52 55%, #0c2240 100%);
}

.modal.modal-user-add .modal-header h3 {
  color: #e8f4ff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.modal.modal-user-add .modal-header .modal-close {
  color: rgba(200,230,255,0.6);
}
.modal.modal-user-add .modal-header .modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.modal.modal-user-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f6fb;
}

.modal.modal-user-add .modal-footer {
  flex-shrink: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid #dce8f3;
  background: #fff;
  gap: 10px;
}

.modal.modal-user-add .modal-footer .btn-secondary {
  border: 1.5px solid #c9d9ea;
  color: #3a5a72;
  background: #f4f8fc;
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 24px;
}
.modal.modal-user-add .modal-footer .btn-secondary:hover {
  background: #e6f0fa;
  border-color: #a8c4dd;
}

.modal.modal-user-add .modal-footer .btn-primary {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border: none;
  border-radius: 12px;
  padding: 10px 28px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(13,148,136,0.35);
}
.modal.modal-user-add .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #0d6b64 0%, #0b8279 100%);
  box-shadow: 0 6px 20px rgba(13,148,136,0.45);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM USER ACTION DIALOGS — shared shell
   Covers: Assign Role · Status · Password · Delete
   ═══════════════════════════════════════════════════════════ */
.modal.modal-user-role,
.modal.modal-user-status,
.modal.modal-user-password,
.modal.modal-user-delete {
  border: 1px solid rgba(99,179,237,0.3);
  box-shadow: 0 40px 80px rgba(8,20,40,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.modal.modal-user-role .modal-header,
.modal.modal-user-status .modal-header,
.modal.modal-user-password .modal-header,
.modal.modal-user-delete .modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(99,179,237,0.18);
  background: linear-gradient(118deg, #0a1f3a 0%, #0f2d52 55%, #0c2240 100%);
}

.modal.modal-user-role .modal-header h3,
.modal.modal-user-status .modal-header h3,
.modal.modal-user-password .modal-header h3,
.modal.modal-user-delete .modal-header h3 {
  color: #e8f4ff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.modal.modal-user-role .modal-header .modal-close,
.modal.modal-user-status .modal-header .modal-close,
.modal.modal-user-password .modal-header .modal-close,
.modal.modal-user-delete .modal-header .modal-close { color: rgba(200,230,255,0.55); }

.modal.modal-user-role .modal-header .modal-close:hover,
.modal.modal-user-status .modal-header .modal-close:hover,
.modal.modal-user-password .modal-header .modal-close:hover,
.modal.modal-user-delete .modal-header .modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.modal.modal-user-role .modal-body,
.modal.modal-user-status .modal-body,
.modal.modal-user-password .modal-body,
.modal.modal-user-delete .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 20px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f6fb;
}

.modal.modal-user-role .modal-footer,
.modal.modal-user-status .modal-footer,
.modal.modal-user-password .modal-footer,
.modal.modal-user-delete .modal-footer {
  flex-shrink: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid #dce8f3;
  background: #fff;
  gap: 10px;
}

/* ── Footer buttons ── */
.modal.modal-user-role .modal-footer .btn-secondary,
.modal.modal-user-status .modal-footer .btn-secondary,
.modal.modal-user-password .modal-footer .btn-secondary,
.modal.modal-user-delete .modal-footer .btn-secondary {
  border: 1.5px solid #c9d9ea; color: #3a5a72;
  background: #f4f8fc; font-weight: 600; border-radius: 12px; padding: 10px 24px;
}
.modal.modal-user-role .modal-footer .btn-secondary:hover,
.modal.modal-user-status .modal-footer .btn-secondary:hover,
.modal.modal-user-password .modal-footer .btn-secondary:hover,
.modal.modal-user-delete .modal-footer .btn-secondary:hover { background: #e6f0fa; border-color: #a8c4dd; }

.modal.modal-user-role .modal-footer .btn-primary,
.modal.modal-user-status .modal-footer .btn-primary,
.modal.modal-user-password .modal-footer .btn-primary {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border: none; border-radius: 12px; padding: 10px 28px;
  font-weight: 700; box-shadow: 0 4px 16px rgba(13,148,136,0.35); color: #fff;
}
.modal.modal-user-role .modal-footer .btn-primary:hover,
.modal.modal-user-status .modal-footer .btn-primary:hover,
.modal.modal-user-password .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #0d6b64 0%, #0b8279 100%);
  box-shadow: 0 6px 20px rgba(13,148,136,0.45); transform: translateY(-1px);
}

.modal.modal-user-delete .modal-footer .btn-danger,
.modal.modal-user-status .modal-footer .btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border: none; border-radius: 12px; padding: 10px 28px;
  font-weight: 700; box-shadow: 0 4px 16px rgba(220,38,38,0.3); color: #fff;
}
.modal.modal-user-delete .modal-footer .btn-danger:hover,
.modal.modal-user-status .modal-footer .btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 6px 20px rgba(220,38,38,0.4); transform: translateY(-1px);
}

.user-role-form {
  display: grid;
  gap: 12px;
}

.user-role-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #d4e2ef;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(56, 189, 248, 0.14),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.user-role-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
}

.user-role-hero-icon i {
  font-size: 22px;
}

.user-role-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.user-role-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.user-role-panel {
  display: grid;
  gap: 10px;
}

.user-role-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-role-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.user-role-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.user-role-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.user-role-editor-grid .form-group {
  margin-bottom: 0;
}

.user-role-editor-grid .form-group:nth-child(3) {
  grid-column: 1 / -1;
}

.modal.modal-user-role .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-user-role input,
.modal.modal-user-role select {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-user-role input[readonly] {
  color: #1f445f;
  background: #f7fbff;
  border-color: #d1deeb;
  font-weight: 600;
}

.modal.modal-user-role input:focus,
.modal.modal-user-role select:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.user-role-shortcut { display: none; }

/* ═══════════════════════════════════════════════════════════
   SHARED USER-DIALOG DESIGN SYSTEM  (ud-*)
   Used by: Assign Role · Toggle Status · Reset Password · Delete
   ═══════════════════════════════════════════════════════════ */

/* Individual widths */
.modal.modal-user-role     { width: min(96vw, 560px); max-width: 560px; }
.modal.modal-user-status   { width: min(96vw, 480px); max-width: 480px; }
.modal.modal-user-password { width: min(96vw, 520px); max-width: 520px; }
.modal.modal-user-delete   { width: min(96vw, 460px); max-width: 460px; }

/* ── Identity card (avatar + name + role badge) ── */
.ud-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid #dce8f4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(10,30,60,0.06);
  margin-bottom: 16px;
}

.ud-avatar {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.ud-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.ud-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #0c2340;
}

.ud-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ud-status-dot.active   { background: #22c55e; }
.ud-status-dot.inactive { background: #94a3b8; }

/* ── Section label (divider with icon + text) ── */
.ud-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a6880;
}

.ud-section-label i { color: #0f766e; font-size: 12px; }

/* ── Body padding shell ── */
.ud-body {
  padding: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Role card grid ── */
.ud-role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 20px 16px;
}

.ud-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid #dce8f4;
  border-radius: 13px;
  background: #f8fbff;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: center;
}

.ud-role-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ud-role-card i { font-size: 22px; color: #7a96b0; transition: color 140ms; }
.ud-role-card strong { font-size: 13px; color: #1e3a5a; font-weight: 800; }
.ud-role-card span { font-size: 10.5px; color: #7a96b0; }

.ud-role-card:hover { border-color: #a0bdd8; background: #eef5fc; }

/* Active per-role colour */
.ud-role-card.ud-role-admin:has(input:checked) {
  border-color: #fca5a5; background: #fff5f5;
}
.ud-role-card.ud-role-admin:has(input:checked) i { color: #dc2626; }
.ud-role-card.ud-role-admin:has(input:checked) strong { color: #991b1b; }

.ud-role-card.ud-role-manager:has(input:checked) {
  border-color: #fde68a; background: #fffbeb;
}
.ud-role-card.ud-role-manager:has(input:checked) i { color: #d97706; }
.ud-role-card.ud-role-manager:has(input:checked) strong { color: #92400e; }

.ud-role-card.ud-role-staff:has(input:checked) {
  border-color: #bfdbfe; background: #eff6ff;
}
.ud-role-card.ud-role-staff:has(input:checked) i { color: #2563eb; }
.ud-role-card.ud-role-staff:has(input:checked) strong { color: #1e40af; }

.ud-role-card.ud-role-cashier:has(input:checked) {
  border-color: #a7f3d0; background: #ecfdf5;
}
.ud-role-card.ud-role-cashier:has(input:checked) i { color: #059669; }
.ud-role-card.ud-role-cashier:has(input:checked) strong { color: #065f46; }

/* ── Status transition visualiser ── */
.ud-status-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 20px 10px;
}

.ud-status-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 110px;
  text-align: center;
}

.ud-status-chip i { font-size: 20px; }

.ud-status-chip.active {
  background: #dcfce7; color: #166534; border: 1px solid #86efac;
}
.ud-status-chip.inactive {
  background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
}

.ud-status-arrow {
  font-size: 18px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* ── Consequence note ── */
.ud-consequence {
  margin: 4px 20px 16px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}

.ud-consequence i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }

.ud-consequence.positive {
  background: #f0fdf4; color: #166534; border: 1px solid #86efac;
}
.ud-consequence.warning {
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
}

/* ── Password fields ── */
.ud-fields-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px 16px;
}

.ud-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ud-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f607d;
}

.ud-field input {
  width: 100%;
  height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 11px;
  background: #fff;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  color: #1f2937;
  transition: border-color 160ms, box-shadow 160ms;
}

.ud-field input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.ud-field input[readonly] {
  background: #f7fbff;
  color: #1f445f;
  border-color: #d1deeb;
  font-weight: 600;
}

.ud-field .password-input-wrap { position: relative; }
.ud-field .password-input-wrap input { padding-right: 46px; }

.ud-field .password-visibility-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #5c7893;
  cursor: pointer;
  border-radius: 8px;
  display: grid;
  place-items: center;
  transition: color 150ms, background 150ms;
}

.ud-field .password-visibility-toggle:hover {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
}

/* ── Password requirements note ── */
.ud-pwd-reqs {
  margin: 0 20px 16px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #f8fbff;
  border: 1px solid #d3e4f4;
  font-size: 11.5px;
  color: #4a6880;
  line-height: 1.5;
}

.ud-pwd-reqs i { color: #0f766e; margin-right: 4px; }

/* ── Danger block (delete) ── */
.ud-danger-block {
  display: flex;
  gap: 12px;
  margin: 14px 20px 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #fca5a5;
  background: linear-gradient(135deg, #fff5f5 0%, #fff1f1 100%);
}

.ud-danger-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ud-danger-content { flex: 1; min-width: 0; }
.ud-danger-content strong { font-size: 13px; font-weight: 700; color: #991b1b; display: block; margin-bottom: 4px; }
.ud-danger-content p { margin: 0; font-size: 12.5px; color: #7f1d1d; line-height: 1.5; }

.ud-admin-warn {
  margin-top: 8px !important;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #b91c1c !important;
}

/* ── Dark mode ── */
[data-theme="dark"] .ud-identity {
  background: linear-gradient(135deg, #0e1826 0%, #0c1622 100%) !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .ud-name { color: #c8d8e8 !important; }
[data-theme="dark"] .ud-avatar { box-shadow: 0 4px 10px rgba(0,0,0,.35) !important; }
[data-theme="dark"] .ud-section-label { color: #5d7d98 !important; }
[data-theme="dark"] .ud-section-label i { color: #2dd4bf !important; }
[data-theme="dark"] .ud-role-grid { background: transparent; }
[data-theme="dark"] .ud-role-card {
  background: #141f2e !important; border-color: #1e3048 !important;
}
[data-theme="dark"] .ud-role-card i { color: #5d7d98 !important; }
[data-theme="dark"] .ud-role-card strong { color: #8aaec8 !important; }
[data-theme="dark"] .ud-role-card span { color: #3d5470 !important; }
[data-theme="dark"] .ud-role-card:hover { background: #1e2f44 !important; border-color: #243550 !important; }
[data-theme="dark"] .ud-role-card.ud-role-admin:has(input:checked)   { background: #1a0505 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .ud-role-card.ud-role-manager:has(input:checked) { background: #1c1505 !important; border-color: #4a3010 !important; }
[data-theme="dark"] .ud-role-card.ud-role-staff:has(input:checked)   { background: #0e1826 !important; border-color: #1e3048 !important; }
[data-theme="dark"] .ud-role-card.ud-role-cashier:has(input:checked) { background: #051a0e !important; border-color: #0f3520 !important; }
[data-theme="dark"] .ud-status-chip.active   { background: #051a0e !important; color: #4ade80 !important; border-color: #0f3520 !important; }
[data-theme="dark"] .ud-status-chip.inactive { background: #1e2f44 !important; color: #8aaec8 !important; border-color: #243550 !important; }
[data-theme="dark"] .ud-status-arrow { color: #3d5470 !important; }
[data-theme="dark"] .ud-consequence.positive { background: #051a0e !important; color: #4ade80 !important; border-color: #0f3520 !important; }
[data-theme="dark"] .ud-consequence.warning  { background: #1c1505 !important; color: #fbbf24 !important; border-color: #4a3010 !important; }
[data-theme="dark"] .ud-field label { color: #5d7d98 !important; }
[data-theme="dark"] .ud-field input {
  background: #141f2e !important; border-color: #1e3048 !important; color: #c8d8e8 !important;
}
[data-theme="dark"] .ud-field input[readonly] { background: #0e1826 !important; color: #8aaec8 !important; }
[data-theme="dark"] .ud-field input:focus { border-color: #0f766e !important; }
[data-theme="dark"] .ud-field .password-visibility-toggle { color: #5d7d98 !important; }
[data-theme="dark"] .ud-field .password-visibility-toggle:hover { color: #2dd4bf !important; background: rgba(20,184,166,.12) !important; }
[data-theme="dark"] .ud-pwd-reqs { background: #0e1826 !important; border-color: #1e3048 !important; color: #5d7d98 !important; }
[data-theme="dark"] .ud-pwd-reqs i { color: #2dd4bf !important; }
[data-theme="dark"] .ud-danger-block { background: #150808 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .ud-danger-icon { background: #2a0808 !important; color: #f87171 !important; }
[data-theme="dark"] .ud-danger-content strong { color: #fca5a5 !important; }
[data-theme="dark"] .ud-danger-content p { color: #fcd4d4 !important; }

/* ── Permissions modal premium shell ── */
.modal.modal-user-permissions {
  border: 1px solid rgba(99,179,237,0.3);
  box-shadow: 0 40px 80px rgba(8,20,40,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.modal.modal-user-permissions .modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(99,179,237,0.18);
  background: linear-gradient(118deg, #0a1f3a 0%, #0f2d52 55%, #0c2240 100%);
}

.modal.modal-user-permissions .modal-header h3 {
  color: #e8f4ff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.modal.modal-user-permissions .modal-header .modal-close { color: rgba(200,230,255,0.55); }
.modal.modal-user-permissions .modal-header .modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.modal.modal-user-permissions .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f6fb;
}

.modal.modal-user-permissions .modal-footer {
  flex-shrink: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid #dce8f3;
  background: #fff;
  gap: 10px;
}

.modal.modal-user-permissions .modal-footer .btn-secondary {
  border: 1.5px solid #c9d9ea; color: #3a5a72;
  background: #f4f8fc; font-weight: 600; border-radius: 12px; padding: 10px 24px;
}
.modal.modal-user-permissions .modal-footer .btn-secondary:hover { background: #e6f0fa; border-color: #a8c4dd; }

.modal.modal-user-permissions .modal-footer .btn-primary {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border: none; border-radius: 12px; padding: 10px 28px;
  font-weight: 700; box-shadow: 0 4px 16px rgba(13,148,136,0.35); color: #fff;
}
.modal.modal-user-permissions .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #0d6b64 0%, #0b8279 100%);
  box-shadow: 0 6px 20px rgba(13,148,136,0.45); transform: translateY(-1px);
}

/* ── Legacy compatibility (kept for any other references) ── */
.user-permissions-form { display: grid; gap: 12px; }
.user-permissions-hero { display: none; }
.user-permissions-panel { display: grid; gap: 10px; }
.user-permissions-user-field { margin-bottom: 0; }
.user-permissions-empty { margin: 0; color: #6b7280; font-weight: 600; }
.user-permissions-shortcut { display: none; }
.user-permissions-grid { display: none; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM PERMISSIONS MODAL
   ═══════════════════════════════════════════════════════════ */

/* Modal sizing */
.modal.modal-user-permissions {
  width: min(96vw, 860px);
  max-width: 860px;
}

/* ── Form shell ── */
.perm-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── User identity bar ── */
.perm-identity-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #dce8f4;
  background: #ffffff;
  flex-wrap: wrap;
}

.perm-identity-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.perm-identity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.perm-identity-name {
  font-size: 15px;
  font-weight: 800;
  color: #0c2340;
}

.perm-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.perm-role-badge--admin   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.perm-role-badge--manager { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.perm-role-badge--staff   { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

.perm-identity-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.perm-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.perm-chip-allow   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.perm-chip-deny    { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.perm-chip-default { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* ── Tip bar ── */
.perm-tip-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 20px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 12.5px;
  color: #78350f;
  line-height: 1.5;
}

.perm-tip-bar i {
  font-size: 13px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}

.perm-tip-bar strong {
  color: #92400e;
}

/* ── Toolbar (bulk actions) ── */
.perm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid #e2ecf6;
  background: #f8fbff;
  flex-wrap: wrap;
}

.perm-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: #4a6280;
  display: flex;
  align-items: center;
  gap: 6px;
}

.perm-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.perm-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid #ccd9ea;
  background: #ffffff;
  color: #3a5570;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 130ms ease;
}

.perm-toolbar-btn:hover {
  border-color: #8fb5d4;
  background: #edf4fb;
  color: #1e3f5c;
}

.perm-toolbar-btn--allow {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.perm-toolbar-btn--allow:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

.perm-toolbar-btn--deny {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #991b1b;
}

.perm-toolbar-btn--deny:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* ── Permission grid ── */
.perm-grid {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 420px;
  overflow-y: auto;
  background: #f6f9fd;
  scrollbar-width: thin;
  scrollbar-color: #c5d4e4 transparent;
}

.perm-grid::-webkit-scrollbar        { width: 6px; }
.perm-grid::-webkit-scrollbar-thumb  { background: #c5d4e4; border-radius: 999px; }

/* ── Single permission row ── */
.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid #dce8f4;
  border-radius: 11px;
  background: #ffffff;
  transition: border-color 150ms, box-shadow 150ms;
}

.perm-row:hover {
  border-color: #b6cfe4;
  box-shadow: 0 3px 8px rgba(13, 38, 61, 0.07);
}

.perm-row-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 140px;
}

.perm-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #e9f5f3 0%, #ddf0ec 100%);
  color: #0f6b62;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.perm-row-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a5a;
}

/* ── Segmented toggle control ── */
.perm-toggle-group {
  display: inline-flex;
  border-radius: 9px;
  border: 1px solid #ccd9ea;
  overflow: hidden;
  flex-shrink: 0;
}

.perm-toggle-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: #5a7a96;
  background: #f8fbff;
  border-right: 1px solid #ccd9ea;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
  user-select: none;
}

.perm-toggle-opt:last-child {
  border-right: none;
}

.perm-toggle-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.perm-toggle-opt i {
  font-size: 12px;
}

/* Active states via :has() */
.perm-opt-default:has(input:checked) {
  background: #e8f0f8;
  color: #1e3a5a;
}

.perm-opt-allow:has(input:checked) {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.perm-opt-deny:has(input:checked) {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* ── Dark mode ── */
[data-theme="dark"] .perm-identity-bar {
  background: linear-gradient(135deg, #0e1826 0%, #0c1622 100%) !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .perm-identity-name { color: #c8d8e8 !important; }

[data-theme="dark"] .perm-role-badge--admin   { background: #1a0505 !important; color: #fca5a5 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .perm-role-badge--manager { background: #1c1505 !important; color: #fbbf24 !important; border-color: #4a3010 !important; }
[data-theme="dark"] .perm-role-badge--staff   { background: #0e1826 !important; color: #60a5fa !important; border-color: #1e3048 !important; }

[data-theme="dark"] .perm-chip-allow   { background: #051a0e !important; color: #4ade80 !important; border-color: #0f3520 !important; }
[data-theme="dark"] .perm-chip-deny    { background: #1a0505 !important; color: #f87171 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .perm-chip-default { background: #1e2f44 !important; color: #8aaec8 !important; border-color: #243550 !important; }

[data-theme="dark"] .perm-tip-bar {
  background: #1c1505 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .perm-tip-bar i { color: #fbbf24 !important; }
[data-theme="dark"] .perm-tip-bar strong { color: #fde68a !important; }

[data-theme="dark"] .perm-toolbar {
  background: #0e1826 !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .perm-toolbar-label { color: #6a8eaa !important; }

[data-theme="dark"] .perm-toolbar-btn {
  background: #141f2e !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}

[data-theme="dark"] .perm-toolbar-btn:hover {
  background: #1e2f44 !important;
  border-color: #3a5070 !important;
  color: #c8d8e8 !important;
}

[data-theme="dark"] .perm-toolbar-btn--allow {
  background: #051a0e !important; border-color: #0f3520 !important; color: #4ade80 !important;
}
[data-theme="dark"] .perm-toolbar-btn--deny {
  background: #1a0505 !important; border-color: #4a1515 !important; color: #f87171 !important;
}

[data-theme="dark"] .perm-grid {
  background: #0c1622 !important;
  scrollbar-color: #243550 transparent !important;
}

[data-theme="dark"] .perm-row {
  background: #111c29 !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .perm-row:hover {
  border-color: #3a5070 !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.25) !important;
}

[data-theme="dark"] .perm-row-icon {
  background: linear-gradient(135deg, #0a2020 0%, #071a18 100%) !important;
  color: #2dd4bf !important;
}

[data-theme="dark"] .perm-row-name { color: #9ab8d0 !important; }

[data-theme="dark"] .perm-toggle-group {
  border-color: #243550 !important;
}

[data-theme="dark"] .perm-toggle-opt {
  background: #141f2e !important;
  color: #5d7d98 !important;
  border-color: #243550 !important;
}

[data-theme="dark"] .perm-opt-default:has(input:checked) {
  background: #1e2f44 !important;
  color: #c8d8e8 !important;
}

[data-theme="dark"] .perm-opt-allow:has(input:checked) {
  background: #051a0e !important;
  color: #4ade80 !important;
  border-color: #0f3520 !important;
}

[data-theme="dark"] .perm-opt-deny:has(input:checked) {
  background: #1a0505 !important;
  color: #f87171 !important;
  border-color: #4a1515 !important;
}

/* Status and password modals use the shared ud-* system above — no override needed here */

.user-status-form,
.user-password-form {
  display: grid;
  gap: 12px;
}

.user-status-hero,
.user-password-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #d4e2ef;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(56, 189, 248, 0.14),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.user-status-hero-icon,
.user-password-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
}

.user-status-hero-icon i,
.user-password-hero-icon i {
  font-size: 22px;
}

.user-status-hero h4,
.user-password-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.user-status-hero p,
.user-password-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.user-status-panel,
.user-password-panel {
  display: grid;
  gap: 10px;
}

.user-status-panel-header,
.user-password-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-status-panel-header h5,
.user-password-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.user-status-panel-header span,
.user-password-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.user-status-message {
  margin: 0;
  padding: 12px;
  border: 1px solid #d3dfed;
  border-radius: 14px;
  background: linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  color: #214764;
  line-height: 1.45;
}

.user-password-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.user-password-editor-grid .form-group {
  margin-bottom: 0;
}

.user-password-user-field {
  grid-column: 1 / -1;
}

.modal.modal-user-status .form-group label,
.modal.modal-user-password .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-user-password input,
.modal.modal-user-status input {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-user-password input[readonly] {
  color: #1f445f;
  background: #f7fbff;
  border-color: #d1deeb;
  font-weight: 600;
}

.modal.modal-user-password input:focus,
.modal.modal-user-status input:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.modal.modal-user-password .password-input-wrap {
  position: relative;
}

.modal.modal-user-password .password-input-wrap input {
  padding-right: 46px;
}

.modal.modal-user-password .password-visibility-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #5c7893;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.modal.modal-user-password .password-visibility-toggle:hover {
  color: #1d5f92;
  background: rgba(45, 121, 183, 0.12);
}

.modal.modal-user-password .password-visibility-toggle:focus-visible {
  outline: 2px solid #2d79b7;
  outline-offset: 2px;
}

.modal.modal-user-password
  .password-input-wrap:focus-within
  .password-visibility-toggle {
  color: #2d79b7;
}

.user-status-shortcut,
.user-password-shortcut { display: none; }

/* Old hero/panel sections hidden — replaced by ud-* system */
.user-status-hero, .user-password-hero,
.user-status-panel, .user-password-panel,
.user-status-panel-header, .user-password-panel-header { display: none; }

.user-add-form {
  display: grid;
  gap: 0;
}

/* ── Premium hero banner ── */
.ua-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 22px;
  background: linear-gradient(128deg, #0b1f3a 0%, #0f3057 55%, #0a2440 100%);
}

.ua-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ua-hero-orb-1 {
  width: 200px; height: 200px;
  top: -60px; left: -40px;
  background: radial-gradient(circle, rgba(56,189,248,0.18) 0%, transparent 70%);
}
.ua-hero-orb-2 {
  width: 160px; height: 160px;
  bottom: -50px; right: 20px;
  background: radial-gradient(circle, rgba(45,212,191,0.15) 0%, transparent 70%);
}

.ua-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ua-hero-icon {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 24px;
  animation: productAddIconFloat 3.8s ease-in-out infinite;
}

.ua-hero-text {
  flex: 1 1 180px;
}
.ua-hero-text h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #e8f4ff;
  letter-spacing: 0.01em;
}
.ua-hero-text p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(180,215,245,0.75);
  line-height: 1.5;
}

.ua-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ua-hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(200,235,255,0.9);
  font-size: 11px;
  font-weight: 600;
}

/* ── Form panel ── */
.ua-panel {
  padding: 20px 24px 24px;
  display: grid;
  gap: 14px;
}

.ua-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ua-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #3a5a76;
}
.ua-panel-title i { color: #0f766e; font-size: 13px; }

.ua-access-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
  border: 1px solid #a5d8f3;
  color: #0f5272;
  font-size: 11px;
  font-weight: 700;
}
.ua-access-chip i { color: #0f766e; }

/* ── Fields grid ── */
.ua-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #d6e6f3;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(10,30,60,0.06), inset 0 0 0 1px rgba(255,255,255,0.8);
}

.ua-fields-grid .form-group {
  margin-bottom: 0;
}

.ua-fields-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.modal.modal-user-add .form-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #3a5a76;
  margin-bottom: 6px;
}

.modal.modal-user-add input,
.modal.modal-user-add select,
.modal.modal-user-add textarea {
  min-height: 46px;
  border: 1.5px solid #d0e2f0;
  border-radius: 12px;
  background: #f8fbff;
  font-size: 14px;
  color: #102030;
  box-shadow: inset 0 2px 4px rgba(10,30,60,0.04);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.modal.modal-user-add .password-input-wrap {
  position: relative;
}

.modal.modal-user-add .password-input-wrap input {
  padding-right: 46px;
}

.modal.modal-user-add .password-visibility-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #5c7893;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.modal.modal-user-add .password-visibility-toggle:hover {
  color: #1d5f92;
  background: rgba(45, 121, 183, 0.12);
}

.modal.modal-user-add .password-visibility-toggle:focus-visible {
  outline: 2px solid #2d79b7;
  outline-offset: 2px;
}

.modal.modal-user-add
  .password-input-wrap:focus-within
  .password-visibility-toggle {
  color: #2d79b7;
}

.modal.modal-user-add input:focus,
.modal.modal-user-add select:focus,
.modal.modal-user-add textarea:focus {
  border-color: #0f766e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.14), inset 0 2px 4px rgba(10,30,60,0.03);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .user-add-hero-icon {
    animation: none;
  }

  .modal.modal-user-add .modal-footer .btn,
  .modal.modal-user-add input,
  .modal.modal-user-add select,
  .modal.modal-user-add textarea {
    transition: none;
  }
}

.modal.modal-product-add {
  width: min(97vw, 1200px);
  max-width: 1200px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-product-import {
  width: min(98vw, 1400px);
  max-width: 1400px;
  max-height: 92vh;
  border: 1px solid #c5d8ea;
  box-shadow: 0 36px 58px rgba(10, 30, 50, 0.31);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-product-import.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-product-import .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 15% 22%,
      rgba(45, 212, 191, 0.2),
      transparent 48%
    ),
    linear-gradient(106deg, #0f2f4d 0%, #16507c 56%, #0f3d60 100%);
}

.modal.modal-product-import .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-product-import .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 89% 6%,
      rgba(56, 189, 248, 0.14),
      transparent 40%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-product-import .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-product-import .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
}

.modal.modal-product-import .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-product-import .modal-footer .btn-primary {
  border: 1px solid #0f766e;
  background: linear-gradient(120deg, #0f766e 0%, #12a594 60%, #0f8b7f 100%);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.22);
}

.modal.modal-product-import .modal-footer .btn-primary:hover,
.modal.modal-product-import .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15, 118, 110, 0.26);
}

.modal.modal-product-import .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-product-import input,
.modal.modal-product-import select,
.modal.modal-product-import textarea {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-product-import input:focus,
.modal.modal-product-import select:focus,
.modal.modal-product-import textarea:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.product-import-hero .product-add-hero-icon {
  background: linear-gradient(140deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 12px 24px rgba(13, 148, 136, 0.24);
}

.product-import-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 13px;
  color: #355674;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.product-import-switch input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 6px;
  accent-color: #0f766e;
}

.product-import-spec {
  border: 1px solid #cddced;
  border-radius: 14px;
  background: linear-gradient(165deg, #ffffff 0%, #f3f9ff 100%);
  padding: 12px 14px;
}

.product-import-spec p {
  margin: 0;
  color: #244966;
  font-size: 13px;
}

.product-import-spec ul {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  color: #47657e;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.product-import-dropzone {
  position: relative;
  border: 1px dashed #9fc2df;
  border-radius: 14px;
  padding: 16px;
  min-height: 148px;
  background: linear-gradient(170deg, #f9fcff 0%, #eef6ff 100%);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.product-import-dropzone:hover,
.product-import-dropzone:focus-visible,
.product-import-dropzone.dragover {
  border-color: #0f766e;
  background: linear-gradient(170deg, #f4fbf9 0%, #e8f7f3 100%);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
  transform: translateY(-1px);
}

.product-import-dropzone:focus-visible {
  outline: none;
}

.product-import-dropzone-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #0f766e 0%, #14b8a6 100%);
  color: #f3fffe;
  box-shadow: 0 10px 18px rgba(13, 148, 136, 0.24);
}

.product-import-dropzone-icon i {
  font-size: 18px;
}

.product-import-dropzone p {
  margin: 0;
  color: #2f5978;
  font-size: 14px;
  line-height: 1.5;
}

.product-import-dropzone small {
  color: #4e6d88;
  font-size: 12px;
}

.product-import-dropzone-link {
  border: none;
  background: transparent;
  color: #0f766e;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.product-import-dropzone-link:hover,
.product-import-dropzone-link:focus-visible {
  color: #0c5f59;
}

.product-import-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal.modal-product-categories {
  width: min(98vw, 1450px);
  max-width: 1450px;
  max-height: 92vh;
  border: 1px solid #c5d8ea;
  box-shadow: 0 36px 58px rgba(10, 30, 50, 0.31);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-product-categories.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-product-categories .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 15% 22%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(106deg, #0f2f4d 0%, #145985 56%, #0f4268 100%);
}

.modal.modal-product-categories .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-product-categories .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 89% 6%,
      rgba(45, 212, 191, 0.14),
      transparent 40%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-product-categories .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal.modal-product-categories .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
}

.modal.modal-product-categories .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-product-categories .modal-footer .btn-primary {
  border: 1px solid #0b4f84;
  background: linear-gradient(120deg, #0f5e9a 0%, #1172b8 58%, #0f639f 100%);
  box-shadow: 0 10px 20px rgba(16, 96, 153, 0.24);
}

.modal.modal-product-categories .modal-footer .btn-primary:hover,
.modal.modal-product-categories .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(16, 96, 153, 0.28);
}

.modal.modal-product-categories .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-product-categories input,
.modal.modal-product-categories select,
.modal.modal-product-categories textarea {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-product-categories input:focus,
.modal.modal-product-categories select:focus,
.modal.modal-product-categories textarea:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.category-manager-layout {
  gap: 14px;
}

.category-manager-hero .product-add-hero-icon {
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
}

.category-manager-note {
  margin: 0;
  color: #486680;
  font-size: 13px;
  line-height: 1.55;
}

.category-usage-panel,
.category-conflicts-panel {
  border: 1px solid #d3dfed;
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.08),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
}

.category-usage-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.category-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #d8e3ef;
  border-radius: 10px;
  background: #ffffff;
}

.category-usage-name {
  font-weight: 600;
  color: #102d46;
}

.category-usage-count {
  font-size: 12px;
  color: #37556f;
  background: #eef4fb;
  border: 1px solid #d0dced;
  border-radius: 999px;
  padding: 4px 10px;
}

.category-conflicts-list {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
}

.category-conflict-card {
  border: 1px solid #d8e3ef;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  display: grid;
  gap: 8px;
}

.category-conflict-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.category-conflict-header strong {
  color: #102d46;
}

.category-conflict-count {
  font-size: 12px;
  color: #274f6d;
  background: #e9f2fb;
  border: 1px solid #ccdeef;
  border-radius: 999px;
  padding: 3px 9px;
}

.category-conflict-meta {
  margin: 0;
  font-size: 12px;
  color: #4a6780;
}

.category-conflict-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.category-conflict-form .form-group {
  margin: 0;
}

.category-manager-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #355674;
}

.category-manager-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 6px;
  accent-color: #0f5e9a;
}

.modal.modal-product-add.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-product-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-product-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-product-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-product-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-product-add .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  position: relative;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.modal.modal-product-add .modal-footer .btn:active {
  transform: translateY(0);
}

.modal.modal-product-add .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-product-add .modal-footer .btn-secondary:hover,
.modal.modal-product-add .modal-footer .btn-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #9fbbd4;
  box-shadow: 0 10px 18px rgba(41, 77, 109, 0.12);
}

.modal.modal-product-add .modal-footer .btn-primary {
  border: 1px solid #0b4f84;
  background: linear-gradient(120deg, #0f5e9a 0%, #1172b8 58%, #0f639f 100%);
  box-shadow: 0 10px 20px rgba(16, 96, 153, 0.24);
}

.modal.modal-product-add .modal-footer .btn-primary:hover,
.modal.modal-product-add .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(16, 96, 153, 0.28);
}

.modal.modal-product-add .modal-footer .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transform: translateX(-20%);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.modal.modal-product-add .modal-footer .btn-primary:hover::after,
.modal.modal-product-add .modal-footer .btn-primary:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.product-add-form {
  display: grid;
  gap: 12px;
}

.product-add-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8d9ea;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(53, 171, 237, 0.22),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.product-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}

.product-add-hero-icon i {
  font-size: 22px;
}

.product-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.product-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.product-add-panel {
  display: grid;
  gap: 10px;
}

.product-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-add-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.product-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.product-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

.product-add-panel:hover .product-add-editor-grid {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 12px 22px rgba(36, 87, 127, 0.08);
}

.product-add-editor-grid .form-group {
  margin-bottom: 0;
}

.product-add-editor-grid .form-group.span-2 {
  grid-column: 1 / -1;
}

.modal.modal-product-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-product-add input,
.modal.modal-product-add select {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-product-add input:focus,
.modal.modal-product-add select:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

@keyframes productAddModalEntrance {
  0% {
    opacity: 0.92;
    transform: translate(-50%, -48%) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes productAddIconFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-product-add.active,
  .modal.modal-product-import.active,
  .modal.modal-product-categories.active,
  .product-add-hero-icon {
    animation: none;
  }

  .modal.modal-product-add .modal-footer .btn,
  .modal.modal-product-import .modal-footer .btn,
  .modal.modal-product-categories .modal-footer .btn,
  .product-add-editor-grid,
  .modal.modal-product-add input,
  .modal.modal-product-add select,
  .modal.modal-product-import input,
  .modal.modal-product-import select,
  .modal.modal-product-categories input,
  .modal.modal-product-categories select,
  .modal.modal-product-categories textarea {
    transition: none;
  }
}

.modal.modal-delivery-add {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-delivery-add.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-delivery-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(45, 212, 191, 0.18),
      transparent 48%
    ),
    linear-gradient(105deg, #12334f 0%, #18506f 58%, #0f3a59 100%);
}

.modal.modal-delivery-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-delivery-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f8fcff 0%, #edf6fb 100%);
}

.modal.modal-delivery-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-delivery-add .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  position: relative;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.modal.modal-delivery-add .modal-footer .btn:active {
  transform: translateY(0);
}

.modal.modal-delivery-add .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-delivery-add .modal-footer .btn-secondary:hover,
.modal.modal-delivery-add .modal-footer .btn-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #9fbbd4;
  box-shadow: 0 10px 18px rgba(41, 77, 109, 0.12);
}

.modal.modal-delivery-add .modal-footer .btn-primary {
  border: 1px solid #0d6a62;
  background: linear-gradient(120deg, #0f766e 0%, #0f9f94 58%, #11857b 100%);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.22);
}

.modal.modal-delivery-add .modal-footer .btn-primary:hover,
.modal.modal-delivery-add .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15, 118, 110, 0.28);
}

.delivery-add-form {
  display: grid;
  gap: 12px;
}

.delivery-add-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8d9ea;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(45, 212, 191, 0.2),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #ecf8f6 100%);
}

.delivery-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0f766e 0%, #159e91 100%);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.25);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}

.delivery-add-hero-icon i {
  font-size: 22px;
}

.delivery-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.delivery-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.delivery-add-panel {
  display: grid;
  gap: 10px;
}

.delivery-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.delivery-add-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1f4f67;
}

.delivery-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bcded8;
  background: #eaf9f6;
  color: #1f6f68;
  font-size: 11px;
  font-weight: 700;
}

.delivery-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f2fbfa 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

.delivery-add-panel:hover .delivery-add-editor-grid {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 12px 22px rgba(27, 95, 107, 0.1);
}

.delivery-add-editor-grid .form-group {
  margin-bottom: 0;
}

.delivery-add-editor-grid .form-group input[type="search"] + select {
  margin-top: 8px;
}

.modal.modal-delivery-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-delivery-add input,
.modal.modal-delivery-add select {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-delivery-add input:focus,
.modal.modal-delivery-add select:focus {
  border-color: #159488;
  box-shadow: 0 0 0 3px rgba(21, 148, 136, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-delivery-add.active,
  .delivery-add-hero-icon {
    animation: none;
  }

  .modal.modal-delivery-add .modal-footer .btn,
  .delivery-add-editor-grid,
  .modal.modal-delivery-add input,
  .modal.modal-delivery-add select {
    transition: none;
  }
}

.modal.modal-delivery-update {
  width: min(94vw, 760px);
  max-width: 760px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-delivery-update.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-delivery-update .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(45, 212, 191, 0.18),
      transparent 48%
    ),
    linear-gradient(105deg, #12334f 0%, #18506f 58%, #0f3a59 100%);
}

.modal.modal-delivery-update .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-delivery-update .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f8fcff 0%, #edf6fb 100%);
}

.modal.modal-delivery-update .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-delivery-update .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.modal.modal-delivery-update .modal-footer .btn:active {
  transform: translateY(0);
}

.modal.modal-delivery-update .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-delivery-update .modal-footer .btn-secondary:hover,
.modal.modal-delivery-update .modal-footer .btn-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #9fbbd4;
  box-shadow: 0 10px 18px rgba(41, 77, 109, 0.12);
}

.modal.modal-delivery-update .modal-footer .btn-primary {
  border: 1px solid #0d6a62;
  background: linear-gradient(120deg, #0f766e 0%, #0f9f94 58%, #11857b 100%);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.22);
}

.modal.modal-delivery-update .modal-footer .btn-primary:hover,
.modal.modal-delivery-update .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15, 118, 110, 0.28);
}

.modal.modal-delivery-update .modal-footer .btn-danger {
  border: 1px solid #b42318;
  background: linear-gradient(120deg, #c92b22 0%, #dc3a2f 58%, #c42b22 100%);
  box-shadow: 0 10px 20px rgba(185, 40, 32, 0.24);
}

.modal.modal-delivery-update .modal-footer .btn-danger:hover,
.modal.modal-delivery-update .modal-footer .btn-danger:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(185, 40, 32, 0.28);
}

.delivery-update-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8d9ea;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(45, 212, 191, 0.2),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #ecf8f6 100%);
}

.delivery-update-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0f766e 0%, #159e91 100%);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.25);
}

.delivery-update-hero-icon i {
  font-size: 22px;
}

.delivery-update-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.delivery-update-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.delivery-update-panel {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.delivery-update-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.delivery-update-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1f4f67;
}

.delivery-update-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bcded8;
  background: #eaf9f6;
  color: #1f6f68;
  font-size: 11px;
  font-weight: 700;
}

.delivery-update-body {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f2fbfa 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.delivery-update-question {
  margin: 0;
  color: #1f445f;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-delivery-update.active {
    animation: none;
  }

  .modal.modal-delivery-update .modal-footer .btn {
    transition: none;
  }
}

.modal.modal-expense-add {
  width: min(97vw, 1200px);
  max-width: 1200px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-expense-add.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-expense-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-expense-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-expense-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-expense-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-expense-add .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.modal.modal-expense-add .modal-footer .btn:active {
  transform: translateY(0);
}

.modal.modal-expense-add .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-expense-add .modal-footer .btn-secondary:hover,
.modal.modal-expense-add .modal-footer .btn-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #9fbbd4;
  box-shadow: 0 10px 18px rgba(41, 77, 109, 0.12);
}

.modal.modal-expense-add .modal-footer .btn-primary {
  border: 1px solid #0b4f84;
  background: linear-gradient(120deg, #0f5e9a 0%, #1172b8 58%, #0f639f 100%);
  box-shadow: 0 10px 20px rgba(16, 96, 153, 0.24);
}

.modal.modal-expense-add .modal-footer .btn-primary:hover,
.modal.modal-expense-add .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(16, 96, 153, 0.28);
}

.expense-add-form {
  display: grid;
  gap: 12px;
}

.expense-add-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8d9ea;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(53, 171, 237, 0.22),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.expense-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}

.expense-add-hero-icon i {
  font-size: 22px;
}

.expense-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.expense-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.expense-add-panel {
  display: grid;
  gap: 10px;
}

.expense-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.expense-add-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.expense-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.expense-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.expense-add-editor-grid .form-group {
  margin-bottom: 0;
}

.expense-add-editor-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.expense-view-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.expense-view-meta-grid .form-group {
  margin-bottom: 0;
}

.expense-view-meta-grid .form-group.span-2 {
  grid-column: 1 / -1;
}

.modal.modal-expense-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-expense-add input,
.modal.modal-expense-add select,
.modal.modal-expense-add textarea {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-expense-add textarea {
  min-height: 110px;
  resize: vertical;
}

.modal.modal-expense-add input[readonly],
.modal.modal-expense-add textarea[readonly] {
  color: #1f445f;
  background: #f7fbff;
  border-color: #d1deeb;
  font-weight: 600;
}

.modal.modal-expense-add input:focus,
.modal.modal-expense-add select:focus,
.modal.modal-expense-add textarea:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-expense-add.active,
  .expense-add-hero-icon {
    animation: none;
  }

  .modal.modal-expense-add .modal-footer .btn,
  .modal.modal-expense-add input,
  .modal.modal-expense-add select,
  .modal.modal-expense-add textarea {
    transition: none;
  }
}

.modal.modal-appointment-add {
  width: min(97vw, 1200px);
  max-width: 1200px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-appointment-add.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-appointment-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-appointment-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-appointment-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-appointment-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-appointment-add .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.modal.modal-appointment-add .modal-footer .btn:active {
  transform: translateY(0);
}

.modal.modal-appointment-add .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-appointment-add .modal-footer .btn-secondary:hover,
.modal.modal-appointment-add .modal-footer .btn-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #9fbbd4;
  box-shadow: 0 10px 18px rgba(41, 77, 109, 0.12);
}

.modal.modal-appointment-add .modal-footer .btn-primary {
  border: 1px solid #0b4f84;
  background: linear-gradient(120deg, #0f5e9a 0%, #1172b8 58%, #0f639f 100%);
  box-shadow: 0 10px 20px rgba(16, 96, 153, 0.24);
}

.modal.modal-appointment-add .modal-footer .btn-primary:hover,
.modal.modal-appointment-add .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(16, 96, 153, 0.28);
}

.modal.modal-appointment-add .modal-footer .btn-danger {
  border: 1px solid #b42318;
  background: linear-gradient(120deg, #c92b22 0%, #dc3a2f 58%, #c42b22 100%);
  box-shadow: 0 10px 20px rgba(185, 40, 32, 0.24);
}

.modal.modal-appointment-add .modal-footer .btn-danger:hover,
.modal.modal-appointment-add .modal-footer .btn-danger:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(185, 40, 32, 0.28);
}

.appointment-add-form {
  display: grid;
  gap: 12px;
}

.appointment-add-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8d9ea;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(53, 171, 237, 0.22),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.appointment-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}

.appointment-add-hero-icon i {
  font-size: 22px;
}

.appointment-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.appointment-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.appointment-add-panel {
  display: grid;
  gap: 10px;
}

.appointment-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.appointment-add-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.appointment-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.appointment-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.appointment-add-editor-grid .form-group {
  margin-bottom: 0;
}

.appointment-add-editor-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.appointment-view-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.appointment-view-meta-grid .form-group {
  margin-bottom: 0;
}

.appointment-view-meta-grid .form-group.span-2 {
  grid-column: 1 / -1;
}

.appointment-update-body {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f2fbfa 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.appointment-update-question {
  margin: 0;
  color: #1f445f;
  font-size: 16px;
}

.modal.modal-appointment-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-appointment-add input,
.modal.modal-appointment-add select,
.modal.modal-appointment-add textarea {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-appointment-add input:focus,
.modal.modal-appointment-add select:focus,
.modal.modal-appointment-add textarea:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.modal.modal-appointment-add input[readonly],
.modal.modal-appointment-add textarea[readonly] {
  color: #1f445f;
  background: #f7fbff;
  border-color: #d1deeb;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-appointment-add.active,
  .appointment-add-hero-icon {
    animation: none;
  }

  .modal.modal-appointment-add .modal-footer .btn,
  .modal.modal-appointment-add input,
  .modal.modal-appointment-add select,
  .modal.modal-appointment-add textarea {
    transition: none;
  }
}

.modal.modal-employee-add {
  width: min(97vw, 1200px);
  max-width: 1200px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-employee-add.active {
  animation: productAddModalEntrance 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal.modal-employee-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-employee-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 16px rgba(6, 18, 30, 0.25);
}

.modal.modal-employee-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-employee-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  padding: 12px 18px;
}

.modal.modal-employee-add .modal-footer .btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.modal.modal-employee-add .modal-footer .btn:active {
  transform: translateY(0);
}

.modal.modal-employee-add .modal-footer .btn-secondary {
  border: 1px solid #c5d6e6;
  color: #234663;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
}

.modal.modal-employee-add .modal-footer .btn-secondary:hover,
.modal.modal-employee-add .modal-footer .btn-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #9fbbd4;
  box-shadow: 0 10px 18px rgba(41, 77, 109, 0.12);
}

.modal.modal-employee-add .modal-footer .btn-primary {
  border: 1px solid #0b4f84;
  background: linear-gradient(120deg, #0f5e9a 0%, #1172b8 58%, #0f639f 100%);
  box-shadow: 0 10px 20px rgba(16, 96, 153, 0.24);
}

.modal.modal-employee-add .modal-footer .btn-primary:hover,
.modal.modal-employee-add .modal-footer .btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(16, 96, 153, 0.28);
}

.employee-add-form {
  display: grid;
  gap: 12px;
}

.employee-add-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8d9ea;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(53, 171, 237, 0.22),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.employee-add-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #f4fbff;
  background: linear-gradient(140deg, #0e4e80 0%, #1b70ac 100%);
  box-shadow: 0 12px 24px rgba(13, 78, 126, 0.25);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}

.employee-add-hero-icon i {
  font-size: 22px;
}

.employee-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.employee-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.employee-add-panel {
  display: grid;
  gap: 10px;
}

.employee-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.employee-add-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.employee-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.employee-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.employee-add-editor-grid .form-group {
  margin-bottom: 0;
}

.employee-add-editor-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.employee-view-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 212, 191, 0.1),
      transparent 34%
    ),
    linear-gradient(170deg, #ffffff 0%, #f5faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.employee-view-meta-grid .form-group {
  margin-bottom: 0;
}

.employee-view-meta-grid .form-group.span-2 {
  grid-column: 1 / -1;
}

.modal.modal-employee-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-employee-add input,
.modal.modal-employee-add select,
.modal.modal-employee-add textarea {
  min-height: 44px;
  border: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.modal.modal-employee-add input:focus,
.modal.modal-employee-add select:focus,
.modal.modal-employee-add textarea:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.modal.modal-employee-add input[readonly],
.modal.modal-employee-add textarea[readonly] {
  color: #1f445f;
  background: #f7fbff;
  border-color: #d1deeb;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal-employee-add.active,
  .employee-add-hero-icon {
    animation: none;
  }

  .modal.modal-employee-add .modal-footer .btn,
  .modal.modal-employee-add input,
  .modal.modal-employee-add select,
  .modal.modal-employee-add textarea {
    transition: none;
  }
}

.modal.modal-customer-edit {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-customer-edit .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-customer-edit .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  letter-spacing: 0.01em;
}

.modal.modal-customer-edit .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-customer-edit .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.customer-edit-form {
  display: grid;
  gap: 12px;
}

.customer-edit-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-edit-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.customer-edit-chip.chip-id {
  color: #234b71;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.customer-edit-chip.chip-open {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.customer-edit-chip.chip-outstanding {
  color: #8b1f1f;
  background: #fff0f0;
  border-color: #f2c7c7;
}

.customer-edit-chip.chip-cleared {
  color: #196a43;
  background: #e9fbf1;
  border-color: #bcebd0;
}

.customer-edit-context-grid,
.customer-edit-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-edit-context-grid {
  padding: 12px;
  border: 1px solid #d3dfed;
  border-radius: 14px;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
}

.customer-edit-editor-grid {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #d3dfed;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.modal.modal-customer-edit .form-group {
  margin-bottom: 0;
}

.modal.modal-customer-edit .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.modal.modal-customer-edit input {
  min-height: 42px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.customer-edit-context-grid input[readonly] {
  border-color: #d4e0ec;
  background: #f8fbff;
  color: #16324d;
  font-weight: 700;
}

.customer-edit-shortcut {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.modal.modal-customer-add {
  width: min(96vw, 920px);
  max-width: 920px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-customer-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-customer-add .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  letter-spacing: 0.01em;
}

.modal.modal-customer-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-customer-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.customer-add-form {
  display: grid;
  gap: 12px;
}

.customer-add-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-add-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.customer-add-chip.chip-total {
  color: #234b71;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.customer-add-chip.chip-hint {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.customer-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #d3dfed;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.modal.modal-customer-add .form-group {
  margin-bottom: 0;
}

.modal.modal-customer-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.modal.modal-customer-add input {
  min-height: 42px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.customer-add-shortcut {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.modal.modal-supplier-add {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-supplier-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-supplier-add .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  letter-spacing: 0.01em;
}

.modal.modal-supplier-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-supplier-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.supplier-add-form {
  display: grid;
  gap: 12px;
}

.supplier-add-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-add-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.supplier-add-chip.chip-total {
  color: #234b71;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.supplier-add-chip.chip-hint {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.supplier-add-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #d3dfed;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.supplier-add-field-address {
  grid-column: span 2;
}

.modal.modal-supplier-add .form-group {
  margin-bottom: 0;
}

.modal.modal-supplier-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.modal.modal-supplier-add input,
.modal.modal-supplier-add textarea {
  min-height: 42px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.modal.modal-supplier-add textarea {
  min-height: 88px;
  resize: vertical;
}

.supplier-add-shortcut {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.modal.modal-quick-add {
  width: min(94vw, 860px);
  max-width: 860px;
  max-height: 90vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-quick-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-quick-add .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  letter-spacing: 0.01em;
}

.modal.modal-quick-add .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-quick-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.quick-add-shell {
  display: grid;
  gap: 14px;
}

/* Intro bar replaces old hero + meta-row */
.quick-add-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(20,184,166,0.06) 100%);
  border: 1px solid rgba(14,165,233,0.18);
}

.quick-add-intro-icon {
  width: 38px; height: 38px;
  border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 16px;
  background: linear-gradient(135deg, #0891b2, #0f766e);
  box-shadow: 0 6px 14px rgba(8,145,178,0.28);
}

.quick-add-intro strong {
  display: block;
  font-size: 14px; font-weight: 700; color: #1d3f5f;
}

.quick-add-intro span {
  font-size: 12px; color: #5c758c;
}

/* 4-column grid */
.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quick-add-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  width: 100%;
  padding: 13px 12px 11px;
  border-radius: 13px;
  border: 1px solid #d4dfeb;
  background: linear-gradient(165deg, #ffffff 0%, #f7fbff 100%);
  color: #1f3349;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  position: relative;
  overflow: hidden;
}

.quick-add-item-top {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.quick-add-item:hover,
.quick-add-item:focus-visible {
  transform: translateY(-3px);
  border-color: #9cb9d8;
  box-shadow: 0 10px 22px rgba(31, 63, 91, 0.16);
  outline: none;
}

.quick-add-item-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.quick-add-item-title {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1a3148;
}

.quick-add-item-desc {
  font-size: 11.5px;
  color: #567188;
  line-height: 1.35;
  flex: 1;
}

.quick-add-item-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #cfdeed;
  background: #f4f8fd;
  color: #3d5f7e;
  flex-shrink: 0;
}

.quick-add-item-arrow {
  font-size: 11px;
  color: #9cb9d8;
  margin-top: auto;
  align-self: flex-end;
  transition: transform 180ms, color 180ms;
}

.quick-add-item:hover .quick-add-item-arrow { transform: translateX(3px); color: #3d7fb0; }

.quick-add-item.card-sale .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-color: rgba(14, 165, 233, 0.28);
}

.quick-add-item.card-sale .quick-add-item-pill {
  background: #e8f7ff;
  border-color: #bfe7fb;
  color: #03597e;
}

.quick-add-item.card-product .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #10b981 0%, #0f766e 100%);
  border-color: rgba(16, 185, 129, 0.26);
}

.quick-add-item.card-product .quick-add-item-pill {
  background: #e8fbf3;
  border-color: #bdebd8;
  color: #115f53;
}

.quick-add-item.card-import .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: rgba(245, 158, 11, 0.3);
}

.quick-add-item.card-import .quick-add-item-pill {
  background: #fff6ea;
  border-color: #f4dcb7;
  color: #8a4d09;
}

.quick-add-item.card-customer .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border-color: rgba(139, 92, 246, 0.26);
}

.quick-add-item.card-customer .quick-add-item-pill {
  background: #f3ecff;
  border-color: #dbc9fb;
  color: #55308f;
}

.quick-add-item.card-expense .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border-color: rgba(239, 68, 68, 0.28);
}

.quick-add-item.card-supplier .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  border-color: rgba(20, 184, 166, 0.28);
}

.quick-add-item.card-po .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: rgba(59, 130, 246, 0.28);
}

.quick-add-item.card-employee .quick-add-item-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: rgba(168, 85, 247, 0.28);
}

.quick-add-item.card-expense .quick-add-item-pill {
  background: #fff0f0;
  border-color: #f3cccc;
  color: #872020;
}

.quick-add-item.card-supplier .quick-add-item-pill {
  background: #e8faf7;
  border-color: #bae9df;
  color: #146056;
}

.quick-add-item.card-po .quick-add-item-pill {
  background: #ebf3ff;
  border-color: #c9dbfb;
  color: #1f4f9f;
}

.quick-add-item.card-employee .quick-add-item-pill {
  background: #f3ecff;
  border-color: #dbc9fb;
  color: #55308f;
}

.quick-add-item.card-sale:hover,
.quick-add-item.card-sale:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(14, 165, 233, 0.16),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #eff9ff 100%);
}

.quick-add-item.card-product:hover,
.quick-add-item.card-product:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(16, 185, 129, 0.15),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #eefcf8 100%);
}

.quick-add-item.card-import:hover,
.quick-add-item.card-import:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(245, 158, 11, 0.16),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #fff8ef 100%);
}

.quick-add-item.card-customer:hover,
.quick-add-item.card-customer:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(139, 92, 246, 0.16),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #f6f1ff 100%);
}

.quick-add-item.card-expense:hover,
.quick-add-item.card-expense:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(239, 68, 68, 0.15),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #fff2f2 100%);
}

.quick-add-item.card-supplier:hover,
.quick-add-item.card-supplier:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(20, 184, 166, 0.15),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #ecfbf9 100%);
}

.quick-add-item.card-po:hover,
.quick-add-item.card-po:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(59, 130, 246, 0.16),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #edf4ff 100%);
}

.quick-add-item.card-employee:hover,
.quick-add-item.card-employee:focus-visible {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(168, 85, 247, 0.16),
      transparent 40%
    ),
    linear-gradient(165deg, #ffffff 0%, #f5efff 100%);
}

@media (max-width: 820px) {
  .quick-add-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-add-item-title {
    font-size: 13px;
  }
}

.modal.modal-po-create {
  width: min(96vw, 1140px);
  max-width: 1140px;
  max-height: 92vh;
  border: 1px solid rgba(99,179,237,0.3);
  box-shadow: 0 40px 80px rgba(8,20,40,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-po-create .modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(99,179,237,0.18);
  background: linear-gradient(118deg, #0a1f3a 0%, #0f2d52 55%, #0c2240 100%);
}

.modal.modal-po-create .modal-header h3 {
  color: #e8f4ff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.modal.modal-po-create .modal-header .modal-close { color: rgba(200,230,255,0.55); }
.modal.modal-po-create .modal-header .modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.modal.modal-po-create .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 20px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f6fb;
}

.modal.modal-po-create .modal-footer {
  flex-shrink: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid #dce8f3;
  background: #fff;
  gap: 10px;
}

.modal.modal-po-create .modal-footer .btn-secondary {
  border: 1.5px solid #c9d9ea; color: #3a5a72;
  background: #f4f8fc; font-weight: 600; border-radius: 12px; padding: 10px 24px;
}
.modal.modal-po-create .modal-footer .btn-secondary:hover { background: #e6f0fa; border-color: #a8c4dd; }

.modal.modal-po-create .modal-footer .btn-primary {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border: none; border-radius: 12px; padding: 10px 28px;
  font-weight: 700; box-shadow: 0 4px 16px rgba(13,148,136,0.35); color: #fff;
}
.modal.modal-po-create .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #0d6b64 0%, #0b8279 100%);
  box-shadow: 0 6px 20px rgba(13,148,136,0.45); transform: translateY(-1px);
}

.po-create-form {
  display: grid;
  gap: 16px;
}

/* ── Premium hero banner ── */
.po-hero {
  position: relative;
  overflow: hidden;
  margin: -20px -24px 0;
  padding: 24px 28px 20px;
  background: linear-gradient(128deg, #0b1f3a 0%, #0f3057 55%, #0a2440 100%);
}

.po-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.po-hero-orb-1 {
  width: 220px; height: 220px;
  top: -70px; left: -50px;
  background: radial-gradient(circle, rgba(56,189,248,0.16) 0%, transparent 70%);
}
.po-hero-orb-2 {
  width: 180px; height: 180px;
  bottom: -60px; right: 30px;
  background: radial-gradient(circle, rgba(45,212,191,0.13) 0%, transparent 70%);
}

.po-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.po-hero-icon {
  flex-shrink: 0;
  width: 58px; height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  color: #fff;
  font-size: 24px;
  animation: productAddIconFloat 3.8s ease-in-out infinite;
}

.po-hero-text { flex: 1 1 180px; }
.po-hero-text h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #e8f4ff;
  letter-spacing: 0.01em;
}
.po-hero-text p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(180,215,245,0.75);
  line-height: 1.5;
}

.po-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.po-hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(200,235,255,0.9);
  font-size: 11.5px;
  font-weight: 600;
}

.po-create-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.po-create-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.po-create-chip.chip-suppliers {
  color: #1e3a8a;
  background: rgba(30, 58, 138, 0.08);
  border-color: rgba(30, 58, 138, 0.22);
}

.po-create-chip.chip-products {
  color: #9a7208;
  background: rgba(201, 149, 10, 0.08);
  border-color: rgba(201, 149, 10, 0.26);
}

.po-create-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ── Customer search combobox ── */
.cust-search-wrap {
  position: relative;
}

.cust-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #d4c9b8;
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.86);
  cursor: text;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  min-height: 42px;
  box-shadow: 0 1px 3px rgba(10, 18, 30, 0.06);
}

.cust-search-wrap.cust-open .cust-search-row,
.cust-search-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.cust-icon {
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
  transition: color var(--transition-base);
}

.cust-search-row:focus-within .cust-icon {
  color: var(--primary);
}

.cust-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  padding: 10px 0;
  min-width: 0;
}

.cust-search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.cust-caret {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
  transition:
    transform var(--transition-base),
    color var(--transition-base);
  pointer-events: none;
}

.cust-search-wrap.cust-open .cust-caret {
  transform: rotate(180deg);
  color: var(--primary);
}

.cust-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d3dfed;
  border-radius: 12px;
  box-shadow:
    0 16px 40px rgba(8, 18, 40, 0.14),
    0 4px 8px rgba(8, 18, 40, 0.06);
  max-height: 216px;
  overflow-y: auto;
  z-index: 310;
  padding: 4px;
}

.cust-search-wrap.cust-open .cust-dropdown {
  display: block;
  animation: custDropIn 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes custDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cust-dropdown::-webkit-scrollbar {
  width: 5px;
}
.cust-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.cust-dropdown::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.cust-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background var(--transition-fast);
  outline: none;
}

.cust-option:hover,
.cust-option:focus {
  background: rgba(30, 58, 138, 0.07);
}

.cust-option.cust-selected {
  background: rgba(201, 149, 10, 0.09);
  font-weight: 600;
}

.cust-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-light) 100%
  );
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cust-option.cust-selected .cust-avatar {
  background: linear-gradient(135deg, #c9950a 0%, #e4b020 100%);
  color: #0a1525;
}

.cust-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cust-check {
  color: #c9950a;
  font-size: 12px;
  flex-shrink: 0;
}

.cust-no-results {
  padding: 14px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.po-create-field-notes,
.po-create-amount-card,
.po-create-items-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #d6e6f3;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(10,30,60,0.05), inset 0 0 0 1px rgba(255,255,255,0.8);
}

.modal.modal-po-create .form-group {
  margin-bottom: 0;
}

.modal.modal-po-create .form-group label,
.po-create-amount-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: #3a5a76;
}

.po-create-amount-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.po-use-calculated-btn {
  padding: 6px 10px;
  font-size: 12px;
}

.modal.modal-po-create input,
.modal.modal-po-create select,
.modal.modal-po-create textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1.5px solid #d0e2f0;
  border-radius: 12px;
  background: #f8fbff;
  font-size: 14px;
  color: #102030;
  box-shadow: inset 0 2px 4px rgba(10,30,60,0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.modal.modal-po-create input:focus,
.modal.modal-po-create select:focus,
.modal.modal-po-create textarea:focus {
  border-color: #0f766e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.14), inset 0 2px 4px rgba(10,30,60,0.03);
  outline: none;
}

.modal.modal-po-create #poAmount {
  font-size: 16px;
  font-weight: 600;
  color: #1f3f5b;
  padding-left: 14px;
}

.modal.modal-po-create textarea {
  min-height: 88px;
  resize: vertical;
}

.po-calculated-hint,
.po-items-help,
.po-products-loaded-note,
.po-create-shortcut {
  display: block;
  margin-top: 6px;
  color: #5b7389;
}

.po-products-loaded-note {
  color: #4b5563;
  font-weight: 600;
}

.po-product-picker {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.po-product-search {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1.5px solid #d0e2f0;
  border-radius: 12px;
  background: #f8fbff;
  font-size: 14px;
  font-weight: 500;
  color: #102030;
  box-shadow: inset 0 2px 4px rgba(10,30,60,0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.po-product-search:focus {
  border-color: #0f766e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.14);
  outline: none;
}

.po-items-container {
  display: grid;
  gap: 0;
  max-height: 360px;
  overflow: auto;
  padding-right: 0;
}

.po-items-stats {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.po-items-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.po-items-chip.chip-catalog {
  color: #1e4d78;
  background: #e7f1fb;
  border-color: #bfd5eb;
}

.po-items-chip.chip-out-stock {
  color: #8b4514;
  background: #fff2df;
  border-color: #efcf9f;
}

.po-items-chip.chip-selected {
  color: #0f6f66;
  background: #e5f7f1;
  border-color: #afe3d8;
}

.po-items-chip.chip-added {
  margin-left: auto;
  color: #0f6f66;
  background: #d8f5ee;
  border-color: #a9e6d8;
}

.po-items-table {
  margin-top: 10px;
  border: 1px solid #d3dfed;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #ffffff;
}

.po-items-table-head,
.po-item-row {
  display: grid;
  grid-template-columns: minmax(240px, 2.2fr) 96px 130px 130px 1fr 92px;
  gap: 10px;
  align-items: center;
  min-width: 820px;
}

.po-items-table-head {
  padding: 11px 14px;
  background: linear-gradient(90deg, #0c2d48, #1a3a5c);
  border-bottom: none;
}

.po-items-table-head span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: #a8d4f0;
}

.po-items-sticky-total {
  position: static;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #0d2540 0%, #0f3560 100%);
  color: #a8d4f0;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(10,30,60,0.18);
}

.po-product-search {
  font-size: 14px;
  font-weight: 500;
  border-color: #c6d6e6;
  background: #ffffff;
}

.po-item-product-label {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #f9fcff;
  color: #2a3f56;
  font-size: 14px;
  font-weight: 500;
}

.po-item-control,
.po-item-total-card {
  display: grid;
  gap: 4px;
}

.po-item-control span,
.po-item-total-card span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: #5c7388;
  padding-left: 2px;
}

.po-item-control input {
  min-height: 40px;
}

.po-item-total-card {
  min-width: 0;
}

.po-add-item-btn {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 8px 18px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(13,148,136,0.3);
  transition: all 160ms ease;
}
.po-add-item-btn:hover {
  background: linear-gradient(135deg, #0d6b64 0%, #0b8279 100%) !important;
  box-shadow: 0 6px 16px rgba(13,148,136,0.4);
  transform: translateY(-1px);
}

.po-item-row {
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #e1e9f2;
  background: #ffffff;
}

.po-item-row:hover {
  background: #f9fcff;
}

.po-item-row:first-child {
  border-top: none;
}

.po-item-cell {
  min-width: 0;
}

.po-item-row.is-entering {
  animation: poItemIn 180ms ease-out;
}

.po-item-row.is-removing {
  animation: poItemOut 160ms ease-in forwards;
}

@keyframes poItemIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes poItemOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
}

.po-item-head {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.po-item-stock {
  color: #4f7ea0;
  font-size: 13px;
  font-weight: 600;
}

.po-item-control input {
  min-height: 40px;
  text-align: center;
  font-weight: 700;
  color: #2d4860;
}

.po-item-total-card {
  min-height: 40px;
  display: flex;
  align-items: center;
}

.po-item-line-total {
  font-weight: 700;
  color: #1f3f5b;
}

.po-item-note {
  color: #6f7f90;
  font-size: 14px;
}

.po-item-cell-action {
  display: flex;
  justify-content: flex-end;
}

.po-item-remove.btn.btn-secondary {
  min-height: 38px;
  min-width: 82px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid #b5cbe0;
  background: #eef4fb;
  color: #245177;
  font-weight: 700;
}

.po-item-remove.btn.btn-secondary:hover,
.po-item-remove.btn.btn-secondary:focus-visible {
  border-color: #90b2d1;
  background: #e3eef9;
  color: #173f62;
}

.po-item-product-label {
  border: none;
  background: transparent;
  min-height: 0;
  padding: 0;
  color: #2a3f56;
  font-weight: 500;
}

.modal.modal-supplier-details {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-supplier-details .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-supplier-details .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  letter-spacing: 0.01em;
}

.modal.modal-supplier-details .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

/* ── Supplier Payment Modal ── */
.modal.modal-supplier-payment {
  max-width: 700px;
  width: min(96vw, 700px);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.modal.modal-supplier-payment .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.modal.modal-supplier-payment .modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.modal.modal-supplier-payment .modal-footer .btn {
  min-width: 90px;
  height: 40px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms, box-shadow 140ms;
}

.modal.modal-supplier-payment .modal-footer .btn-secondary {
  background: #fff;
  border: 1.5px solid #bed1e4;
  color: #2c4f6d;
}

.modal.modal-supplier-payment .modal-footer .btn-secondary:hover {
  background: #f0f7ff;
  border-color: #93b8d8;
}

.modal.modal-supplier-payment .modal-footer .btn-primary {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.28);
}

.modal.modal-supplier-payment .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #0d6b64, #0ea89a);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.38);
}

.modal.modal-supplier-details .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.supplier-details-panel {
  display: grid;
  gap: 12px;
}

.supplier-details-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-details-action-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.supplier-details-action-btn {
  border: 1px solid #b9cce0;
  border-radius: 9px;
  min-height: 32px;
  padding: 5px 11px;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
  color: #1f4568;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.supplier-details-action-btn:hover,
.supplier-details-action-btn:focus-visible {
  border-color: #5c8bb6;
  background: linear-gradient(180deg, #ffffff 0%, #dcebf9 100%);
  color: #12334f;
}

.supplier-details-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.supplier-details-chip.chip-id {
  color: #234b71;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.supplier-details-chip.chip-active {
  color: #196a43;
  background: #e9fbf1;
  border-color: #bcebd0;
}

.supplier-details-chip.chip-inactive {
  color: #8b1f1f;
  background: #fff0f0;
  border-color: #f2c7c7;
}

.supplier-details-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supplier-details-meta-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d4e0ec;
  background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
  display: grid;
  gap: 4px;
}

.supplier-details-meta-card .meta-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #516b84;
}

.supplier-details-meta-card .meta-value {
  font-size: 15px;
  color: #1d3852;
}

.supplier-details-contact-card {
  border: 1px solid #d3dfed;
  border-radius: 14px;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.supplier-details-contact-header h4 {
  margin: 0;
  font-size: 16px;
  color: #1f3b56;
}

.supplier-details-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supplier-details-contact-item {
  padding: 10px 12px;
  border: 1px solid #d9e4ef;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  gap: 4px;
}

.supplier-details-contact-address {
  grid-column: span 2;
}

.supplier-details-contact-item .contact-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4f6a84;
}

.supplier-details-contact-item .contact-value {
  font-size: 14px;
  color: #1b3b5a;
  word-break: break-word;
}

.supplier-details-contact-item .contact-value.contact-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.supplier-details-copy-btn {
  border: 1px solid #b9cce0;
  border-radius: 8px;
  min-height: 26px;
  padding: 3px 9px;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
  color: #1f4568;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.supplier-details-copy-btn:hover,
.supplier-details-copy-btn:focus-visible {
  border-color: #5c8bb6;
  background: linear-gradient(180deg, #ffffff 0%, #dcebf9 100%);
  color: #12334f;
}

.supplier-details-contact-item .contact-value a {
  color: #1f5f92;
  text-decoration: none;
}

.supplier-details-contact-item .contact-value a:hover,
.supplier-details-contact-item .contact-value a:focus-visible {
  text-decoration: underline;
}

.modal.modal-supplier-edit {
  width: min(96vw, 980px);
  max-width: 980px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-supplier-edit .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.22),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-supplier-edit .modal-header h3 {
  color: #f5fbff;
  font-size: 31px;
  letter-spacing: 0.01em;
}

.modal.modal-supplier-edit .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-supplier-edit .modal-footer {
  flex-shrink: 0;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.supplier-edit-form {
  display: grid;
  gap: 12px;
}

.supplier-edit-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-edit-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.supplier-edit-chip.chip-id {
  color: #234b71;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.supplier-edit-chip.chip-active {
  color: #196a43;
  background: #e9fbf1;
  border-color: #bcebd0;
}

.supplier-edit-chip.chip-inactive {
  color: #8b1f1f;
  background: #fff0f0;
  border-color: #f2c7c7;
}

.supplier-edit-chip.chip-changes {
  color: #2a4b67;
  background: #eef4fb;
  border-color: #cddced;
  margin-left: auto;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.supplier-edit-chip.chip-changes.is-clean {
  color: #2a4b67;
  background: #eef4fb;
  border-color: #cddced;
}

.supplier-edit-chip.chip-changes.is-dirty {
  color: #0f5d55;
  background: #e8f8f6;
  border-color: #bfe6e0;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

.supplier-edit-context-grid,
.supplier-edit-editor-grid {
  display: grid;
  gap: 12px;
}

.supplier-edit-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-edit-context-grid .form-group {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d4e0ec;
  background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
}

.supplier-edit-context-grid .form-group label {
  margin-bottom: 6px;
}

.supplier-edit-context-grid input[readonly] {
  border-color: #d4e0ec;
  background: #f8fbff;
  color: #16324d;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.supplier-edit-editor-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #d3dfed;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.supplier-edit-field-name,
.supplier-edit-field-contact {
  grid-column: span 3;
}

.supplier-edit-field-phone,
.supplier-edit-field-email {
  grid-column: span 2;
}

.supplier-edit-field-status {
  grid-column: span 2;
}

.supplier-edit-field-address {
  grid-column: span 6;
}

.modal.modal-supplier-edit .form-group {
  margin-bottom: 0;
}

.modal.modal-supplier-edit .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.modal.modal-supplier-edit input,
.modal.modal-supplier-edit select,
.modal.modal-supplier-edit textarea {
  min-height: 42px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.modal.modal-supplier-edit textarea {
  min-height: 78px;
  resize: vertical;
}

.modal.modal-supplier-edit .supplier-edit-field-changed {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.supplier-edit-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-edit-toolbar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.supplier-edit-toolbar-chip-info {
  color: #184a6f;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.supplier-edit-toolbar-chip-muted {
  color: #2a4b67;
  background: #eef4fb;
  border-color: #cddced;
  margin-left: auto;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.supplier-edit-toolbar-chip-muted.is-clean {
  color: #2a4b67;
  background: #eef4fb;
  border-color: #cddced;
}

.supplier-edit-toolbar-chip-muted.is-dirty {
  color: #0f5d55;
  background: #e8f8f6;
  border-color: #bfe6e0;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

.customer-details-panel {
  display: grid;
  gap: 12px;
}

.customer-details-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-details-meta-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d4e0ec;
  background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
  display: grid;
  gap: 4px;
}

.customer-details-meta-card .meta-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #516b84;
}

.customer-details-meta-card .meta-value {
  font-size: 15px;
  color: #1d3852;
}

.customer-details-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-details-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.customer-details-chip.chip-total {
  color: #184a6f;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.customer-details-chip.chip-paid {
  color: #0f5d55;
  background: #e9fbf4;
  border-color: #b7ecd8;
}

.customer-details-chip.chip-outstanding {
  color: #8b1f1f;
  background: #fff0f0;
  border-color: #f2c7c7;
}

.customer-details-chip.chip-cleared {
  color: #196a43;
  background: #e9fbf1;
  border-color: #bcebd0;
}

.customer-details-chip.chip-open {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.customer-details-chip.chip-overdue {
  color: #7d1825;
  background: #ffecef;
  border-color: #f2bcc6;
}

.customer-details-activity-card {
  border: 1px solid #d3dfed;
  border-radius: 16px;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 10px 18px rgba(15, 42, 71, 0.08);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.customer-details-activity-toolbar {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e3ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.customer-details-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-details-activity-header h4 {
  margin: 0;
  font-size: 16px;
  color: #1f3b56;
}

.customer-details-activity-note {
  font-size: 12px;
  font-weight: 700;
  color: #4c677f;
}

.customer-details-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-details-filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b657f;
}

.customer-details-filter-select {
  min-height: 36px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: #ffffff;
  color: #1c4466;
  font-weight: 700;
  min-width: 170px;
  padding: 6px 10px;
}

.customer-details-search-input {
  min-height: 36px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: #ffffff;
  color: #1c4466;
  font-weight: 600;
  min-width: 230px;
  padding: 6px 10px;
}

.customer-details-search-input:focus,
.customer-details-filter-select:focus {
  outline: none;
  border-color: #5a8bb8;
  box-shadow: 0 0 0 3px rgba(90, 139, 184, 0.18);
}

.customer-details-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
  border: 1px solid #ccd8e6;
  border-radius: 12px;
  background: #ffffff;
}

.customer-details-table {
  width: 100%;
  min-width: 940px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.customer-details-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, #eff4fa 0%, #e5edf6 100%);
  color: #1f3b56;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #cfd9e6;
}

.customer-details-table td {
  vertical-align: middle;
  font-size: 14px;
  border-top: 1px solid #dbe6f2;
  border-bottom: 1px solid #dbe6f2;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding-top: 10px;
  padding-bottom: 10px;
}

.customer-details-table .customer-details-credit-row td:first-child {
  border-left: 1px solid #dbe6f2;
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 0 10px rgba(24, 52, 84, 0.05);
}

.customer-details-table .customer-details-credit-row td:last-child {
  border-right: 1px solid #dbe6f2;
  border-radius: 0 10px 10px 0;
}

.customer-details-table .customer-details-credit-row:hover td {
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
  border-color: #bfd3e7;
}

.customer-details-table #customerDetailsNoMatchRow td,
.customer-details-table .customer-details-table-empty {
  border: none;
  background: transparent;
  box-shadow: none;
}

.customer-details-table .amount-paid {
  color: #0f5d55;
  font-weight: 700;
}

.customer-details-table .amount-outstanding {
  font-weight: 700;
}

.customer-details-table .amount-outstanding.is-open {
  color: #a52222;
}

.customer-details-table .amount-outstanding.is-closed {
  color: #1b7a4a;
}

.customer-details-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.customer-details-status.status-paid {
  color: #0f5d55;
  background: #e9fbf4;
  border-color: #b7ecd8;
}

.customer-details-status.status-overdue {
  color: #8b1f1f;
  background: #fff0f0;
  border-color: #f2c7c7;
}

.customer-details-status.status-open {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.customer-details-row-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-details-row-actions .btn-small {
  border: 1px solid #b9cce0;
  border-radius: 8px;
  min-height: 28px;
  padding: 4px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
  color: #1f4568;
  font-weight: 700;
}

.customer-details-row-actions .btn-small:hover,
.customer-details-row-actions .btn-small:focus-visible {
  border-color: #5c8bb6;
  background: linear-gradient(180deg, #ffffff 0%, #dcebf9 100%);
  color: #12334f;
}

.customer-details-table-empty {
  padding: 16px 12px;
  text-align: center;
  color: #5d748a;
  font-weight: 600;
}

.modal.modal-debt-products {
  width: min(96vw, 1080px);
  max-width: 1080px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-debt-products .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-debt-products .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-debt-products .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-debt-products .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.modal.modal-debt-history {
  width: min(96vw, 1080px);
  max-width: 1080px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-debt-history .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.2),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-debt-history .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-debt-history .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-debt-history .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

/* ═══════════════════════════════════════════
   RECEIVE DEBT PAYMENT — Premium Modal
═══════════════════════════════════════════ */
.modal.modal-debt-payment {
  width: min(96vw, 860px);
  max-width: 860px;
  max-height: 94vh;
  border: none;
  box-shadow: 0 40px 80px rgba(8,24,44,0.38), 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-debt-payment .modal-header {
  border-bottom: 1px solid rgba(100,180,255,0.15);
  background:
    radial-gradient(ellipse at 10% 0%, rgba(56,189,248,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(45,212,191,0.14) 0%, transparent 50%),
    linear-gradient(120deg, #0a1e38 0%, #0f2d52 50%, #091829 100%);
  padding: 18px 24px 16px;
}

.modal.modal-debt-payment .modal-header h3 {
  color: #e8f4ff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal.modal-debt-payment .modal-header h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #38bdf8, #0d9488);
  flex-shrink: 0;
}

.modal.modal-debt-payment .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 20px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(170deg, #f7fbff 0%, #edf4fc 100%);
}

.modal.modal-debt-payment .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #dce8f4;
  background: linear-gradient(180deg, #f4f9ff 0%, #eaf3fc 100%);
  padding: 14px 22px;
}

/* Form shell */
.dpf {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Hero row ── */
.dpf-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0f2d52 0%, #0a3d62 100%);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 4px 18px rgba(8,24,50,0.18);
}

.dpf-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}

.dpf-hero-info {
  flex: 1;
  min-width: 0;
}

.dpf-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: #e8f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dpf-hero-meta {
  font-size: 12px;
  color: #7ab8e8;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dpf-hero-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.28);
}

.dpf-balance-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
}

.dpf-balance-amount {
  font-size: 17px;
  font-weight: 800;
  color: #fde68a;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Credit selector ── */
.dpf-credit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dpf-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a6d8c;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dpf-select {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid #c2d8ee;
  border-radius: 11px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1a3550;
  transition: border-color .18s, box-shadow .18s;
}

.dpf-select:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.dpf-locked-credit {
  padding: 10px 14px;
  border-radius: 11px;
  background: linear-gradient(135deg,#f0f7ff,#e8f4ff);
  border: 1.5px solid #c2d8ee;
  font-size: 13px;
  font-weight: 600;
  color: #1a3a58;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dpf-locked-credit i { color: #38bdf8; }

/* ── Amount section ── */
.dpf-amount-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #ffffff 0%, #f2f8ff 100%);
  border: 1.5px solid #cfe0f0;
  box-shadow: 0 2px 12px rgba(10,40,80,0.06);
}

.dpf-amount-wrap {
  display: flex;
  align-items: stretch;
  border: 2px solid #b6d0e8;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
  background: #fff;
}

.dpf-amount-wrap:focus-within {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

.dpf-amount-pfx {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: linear-gradient(180deg,#f0f7ff,#e4f0fa);
  border-right: 2px solid #b6d0e8;
  font-size: 13px;
  font-weight: 800;
  color: #2c5f85;
  white-space: nowrap;
  flex-shrink: 0;
}

.dpf-amount-input {
  flex: 1;
  min-height: 54px;
  border: none !important;
  outline: none !important;
  background: transparent;
  padding: 0 16px;
  font-size: 24px;
  font-weight: 800;
  color: #0d2d4a;
  letter-spacing: -0.01em;
}

.dpf-amount-input.is-invalid { color: #dc2626; }

.dpf-amount-input::placeholder { color: #aac2d8; font-weight: 400; font-size: 18px; }

/* Progress bar */
.dpf-progress-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #d8e8f4;
  overflow: hidden;
}

.dpf-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f766e, #0d9488);
  transition: width .3s cubic-bezier(.4,0,.2,1), background .3s;
}

.dpf-progress-pct {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Hint */
.dpf-hint {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #3d6a8a;
  line-height: 1.4;
  min-height: 18px;
}

.dpf-hint.dpf-hint-error { color: #dc2626; }

/* Quick amount pills */
.dpf-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.dpf-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px solid #b4cde4;
  background: linear-gradient(180deg, #fff 0%, #eaf3fb 100%);
  color: #1a4a72;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.dpf-quick:hover, .dpf-quick:focus-visible {
  border-color: #0d9488;
  background: linear-gradient(180deg,#f0fafa,#d6f5f0);
  color: #0d4a44;
  box-shadow: 0 2px 8px rgba(13,148,136,0.15);
  transform: translateY(-1px);
}

.dpf-quick-full {
  border-color: #059669;
  background: linear-gradient(180deg,#f0fdf4,#dcfce7);
  color: #166534;
}

.dpf-quick-full:hover, .dpf-quick-full:focus-visible {
  background: linear-gradient(180deg,#dcfce7,#bbf7d0);
  border-color: #16a34a;
  color: #14532d;
}

.dpf-quick-fixed {
  border-color: #c8d8a7;
  background: linear-gradient(180deg,#f7fdf0,#eef7df);
  color: #2c4a13;
}

.dpf-quick-fixed:hover, .dpf-quick-fixed:focus-visible {
  border-color: #7fb641;
  background: linear-gradient(180deg,#eef7df,#d9f0b4);
  color: #1a3208;
}

/* ── Bottom grid ── */
.dpf-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dpf-method-section,
.dpf-ref-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Method pills */
.dpf-method-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dpf-method-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1.5px solid #c8ddf0;
  background: linear-gradient(160deg,#fff,#f2f8ff);
  cursor: pointer;
  transition: all .16s;
  font-size: 11px;
  font-weight: 700;
  color: #2c5878;
  text-align: center;
  user-select: none;
}

.dpf-method-pill input[type=radio] { display: none; }

.dpf-method-pill i {
  font-size: 16px;
  color: #5a88aa;
  transition: color .16s;
}

.dpf-method-pill:hover {
  border-color: #0d9488;
  background: linear-gradient(160deg,#f0fafa,#e0f5f3);
  color: #0a4a44;
}

.dpf-method-pill:hover i { color: #0d9488; }

.dpf-method-pill.dpf-method-active {
  border-color: #0d9488;
  background: linear-gradient(160deg,#e0f7f4,#ccf2ed);
  color: #0a3d38;
  box-shadow: 0 2px 10px rgba(13,148,136,0.2);
}

.dpf-method-pill.dpf-method-active i { color: #0f766e; }

/* Reference input */
.dpf-ref-input {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid #c2d8ee;
  border-radius: 11px;
  background: #fff;
  padding: 0 13px;
  font-size: 14px;
  color: #1a3550;
  transition: border-color .18s, box-shadow .18s;
}

.dpf-ref-input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

.dpf-ref-input::placeholder { color: #9ab8d0; }

/* Shortcut hint */
.dpf-shortcut {
  font-size: 11px;
  color: #7a9ab8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dpf-shortcut kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #b8cce0;
  background: #edf4fb;
  font-size: 10px;
  font-weight: 800;
  color: #2c5878;
  font-family: inherit;
}

@media (max-width: 960px) {
  .modal.modal-po-create {
    width: min(97vw, 980px);
  }

  .modal.modal-po-create .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-customer-details {
    width: min(97vw, 980px);
  }

  .modal.modal-customer-details .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-invoice-add,
  .modal.modal-quotation-add,
  .modal.modal-return-add {
    width: min(97vw, 1000px);
  }

  .modal.modal-invoice-add .modal-header h3,
  .modal.modal-quotation-add .modal-header h3,
  .modal.modal-return-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-invoice-details,
  .modal.modal-quotation-details,
  .modal.modal-po-details,
  .modal.modal-return-details {
    width: min(97vw, 980px);
  }

  .modal.modal-invoice-details .modal-header h3,
  .modal.modal-quotation-details .modal-header h3,
  .modal.modal-po-details .modal-header h3,
  .modal.modal-return-details .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-user-add {
    width: min(97vw, 1000px);
  }

  .modal.modal-user-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-user-role {
    width: min(97vw, 980px);
  }

  .modal.modal-user-role .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-user-permissions {
    width: min(97vw, 1000px);
  }

  .modal.modal-user-permissions .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-user-status,
  .modal.modal-user-password {
    width: min(97vw, 980px);
  }

  .modal.modal-user-status .modal-header h3,
  .modal.modal-user-password .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-product-add {
    width: min(97vw, 1000px);
  }

  .modal.modal-product-import {
    width: min(97vw, 1160px);
  }

  .modal.modal-product-categories {
    width: min(97vw, 1220px);
  }

  .modal.modal-product-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-product-import .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-product-categories .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-expense-add {
    width: min(97vw, 1000px);
  }

  .modal.modal-expense-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-appointment-add {
    width: min(97vw, 1000px);
  }

  .modal.modal-appointment-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-employee-add {
    width: min(97vw, 1000px);
  }

  .modal.modal-employee-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-delivery-add {
    width: min(97vw, 920px);
  }

  .modal.modal-delivery-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-delivery-update {
    width: min(97vw, 760px);
  }

  .modal.modal-delivery-update .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-customer-edit {
    width: min(97vw, 920px);
  }

  .modal.modal-customer-edit .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-customer-add {
    width: min(97vw, 900px);
  }

  .modal.modal-customer-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-supplier-add {
    width: min(97vw, 920px);
  }

  .modal.modal-supplier-add .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-supplier-details {
    width: min(97vw, 920px);
  }

  .modal.modal-supplier-details .modal-header h3 {
    font-size: 24px;
  }

  .modal.modal-debt-payment {
    width: min(97vw, 920px);
  }

  .modal.modal-debt-payment .modal-header h3 {
    font-size: 24px;
  }

  .debt-payment-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expense-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-role-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-password-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-view-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-view-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-details-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expense-view-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quotation-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .return-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-payment-field-reference {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .modal.modal-po-create {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-po-create .modal-body {
    padding: 12px;
  }

  .po-create-context-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .po-items-container {
    max-height: none;
  }

  .po-items-stats {
    gap: 6px;
  }

  .po-items-chip {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 11px;
  }

  .po-product-search {
    min-height: 40px;
    font-size: 13px;
  }

  .po-items-table {
    border-radius: 10px;
  }

  .po-items-table-head,
  .po-item-row {
    grid-template-columns: minmax(220px, 2fr) 86px 112px 112px 180px 84px;
    min-width: 720px;
    gap: 8px;
  }

  .po-items-table-head,
  .po-item-row {
    padding-left: 10px;
    padding-right: 10px;
  }

  .po-items-chip.chip-added {
    margin-left: 0;
  }

  .po-use-calculated-btn {
    width: 100%;
  }

  .po-create-amount-label {
    display: grid;
    gap: 8px;
  }

  .modal.modal-customer-details {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-customer-details .modal-body {
    padding: 12px;
  }

  .modal.modal-invoice-add,
  .modal.modal-quotation-add,
  .modal.modal-return-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-invoice-details,
  .modal.modal-quotation-details,
  .modal.modal-po-details,
  .modal.modal-return-details {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-invoice-add .modal-body,
  .modal.modal-quotation-add .modal-body,
  .modal.modal-return-add .modal-body {
    padding: 12px;
  }

  .modal.modal-invoice-details .modal-body,
  .modal.modal-quotation-details .modal-body,
  .modal.modal-po-details .modal-body,
  .modal.modal-return-details .modal-body {
    padding: 12px;
  }

  .modal.modal-invoice-details .modal-footer,
  .modal.modal-quotation-details .modal-footer,
  .modal.modal-po-details .modal-footer,
  .modal.modal-return-details .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-invoice-details .modal-footer .btn,
  .modal.modal-quotation-details .modal-footer .btn,
  .modal.modal-po-details .modal-footer .btn,
  .modal.modal-return-details .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .invoice-details-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-details-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .po-details-table {
    min-width: 520px;
  }

  .modal.modal-invoice-add .modal-footer,
  .modal.modal-quotation-add .modal-footer,
  .modal.modal-return-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-invoice-add .modal-footer .btn,
  .modal.modal-quotation-add .modal-footer .btn,
  .modal.modal-return-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .modal.modal-user-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-user-add .modal-body {
    padding: 12px;
  }

  .modal.modal-user-role {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-user-permissions {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-user-status,
  .modal.modal-user-password {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-user-role .modal-body {
    padding: 12px;
  }

  .modal.modal-user-permissions .modal-body {
    padding: 12px;
  }

  .modal.modal-user-status .modal-body,
  .modal.modal-user-password .modal-body {
    padding: 12px;
  }

  .modal.modal-user-role .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-user-role .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .modal.modal-user-permissions .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-user-permissions .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Premium permissions responsive */
  .perm-identity-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .perm-identity-stats {
    margin-left: 0;
  }

  .perm-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .perm-toggle-group {
    width: 100%;
  }

  .perm-toggle-opt {
    flex: 1;
    justify-content: center;
  }

  .perm-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .perm-grid {
    max-height: 50vh;
  }

  .modal.modal-user-status .modal-footer,
  .modal.modal-user-password .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-user-status .modal-footer .btn,
  .modal.modal-user-password .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .user-role-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-permissions-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-status-hero,
  .user-password-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-role-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-permissions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .user-permissions-row select {
    width: 100%;
  }

  .user-password-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-user-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-user-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .user-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-product-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-product-import {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-product-categories {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-product-add .modal-body {
    padding: 12px;
  }

  .modal.modal-product-import .modal-body {
    padding: 12px;
  }

  .modal.modal-product-categories .modal-body {
    padding: 12px;
  }

  .modal.modal-expense-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-expense-add .modal-body {
    padding: 12px;
  }

  .modal.modal-appointment-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-appointment-add .modal-body {
    padding: 12px;
  }

  .modal.modal-employee-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-employee-add .modal-body {
    padding: 12px;
  }

  .modal.modal-employee-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-employee-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .employee-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-appointment-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-appointment-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .appointment-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-view-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-view-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-view-meta-grid .form-group.span-2 {
    grid-column: span 1;
  }

  .employee-view-meta-grid .form-group.span-2 {
    grid-column: span 1;
  }

  .modal.modal-expense-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-expense-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .expense-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .expense-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .expense-view-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .expense-view-meta-grid .form-group.span-2 {
    grid-column: span 1;
  }

  .modal.modal-delivery-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-delivery-add .modal-body {
    padding: 12px;
  }

  .modal.modal-delivery-update {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-delivery-update .modal-body {
    padding: 12px;
  }

  .modal.modal-delivery-update .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-delivery-update .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .delivery-update-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-delivery-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-delivery-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .delivery-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quotation-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .quotation-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .return-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .return-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-product-add .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-product-import .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-product-categories .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .modal.modal-product-add .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .modal.modal-product-import .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .modal.modal-product-categories .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .product-add-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-add-editor-grid .form-group.span-2 {
    grid-column: span 1;
  }

  .category-conflict-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-manager-checkbox {
    align-items: flex-start;
  }

  .customer-details-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-details-toolbar-controls {
    align-items: stretch;
  }

  .customer-details-filter-select,
  .customer-details-search-input {
    min-width: 100%;
  }

  .modal.modal-customer-edit {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-customer-edit .modal-body {
    padding: 12px;
  }

  .customer-edit-context-grid,
  .customer-edit-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-customer-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-customer-add .modal-body {
    padding: 12px;
  }

  .customer-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal.modal-supplier-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-supplier-add .modal-body {
    padding: 12px;
  }

  .supplier-add-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .supplier-add-field-address {
    grid-column: span 1;
  }

  .modal.modal-supplier-details {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-supplier-details .modal-body {
    padding: 12px;
  }

  .supplier-details-meta-grid,
  .supplier-details-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .supplier-details-contact-address {
    grid-column: span 1;
  }

  .modal.modal-debt-payment {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-debt-payment .modal-body {
    padding: 12px;
  }

  .debt-payment-context-grid,
  .debt-payment-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .debt-payment-field-reference {
    grid-column: span 1;
  }
}

.debt-history-panel {
  display: grid;
  gap: 12px;
}

.debt-history-meta-grid {
  display: grid;
  gap: 8px;
  color: #20374f;
}

.debt-history-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.debt-history-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.debt-history-chip-total {
  color: #184a6f;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.debt-history-chip-paid {
  color: #0f5d55;
  background: #e8f8f6;
  border-color: #bfe6e0;
}

.debt-history-chip-outstanding {
  color: #7a3411;
  background: #fff5e8;
  border-color: #f6d7b0;
}

.debt-history-chip-count {
  color: #2a4b67;
  background: #eef4fb;
  border-color: #cddced;
  margin-left: auto;
}

.debt-history-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d0deed;
  border-radius: 12px;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
}

.debt-history-toolbar label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #45637f;
}

.debt-history-filter-select {
  min-width: 210px;
  min-height: 38px;
  padding: 7px 32px 7px 12px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: #ffffff;
  color: #193854;
  font-weight: 600;
}

.debt-history-reset-btn {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff 0%, #eef7ff 100%);
  color: #244866;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.debt-history-reset-btn:hover {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e8f3ff 100%);
  color: #173f5c;
}

.debt-history-method-meta {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid #c7dcf3;
  border-radius: 999px;
  background: #e8f3ff;
  color: #21486b;
  font-size: 12px;
  font-weight: 700;
}

.debt-history-table-wrap {
  border: 1px solid #cddaea;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  overflow: auto;
  max-height: 56vh;
}

.debt-history-table {
  width: 100%;
  min-width: 760px;
}

.debt-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #ebf3fc 0%, #dce9f8 100%);
  color: #264764;
}

@media (max-width: 960px) {
  .modal.modal-debt-history {
    width: min(97vw, 920px);
  }

  .modal.modal-debt-history .modal-header h3 {
    font-size: 26px;
  }

  .debt-history-chip-count {
    margin-left: 0;
  }

  .debt-history-method-meta {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .modal.modal-debt-history {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-debt-history .modal-body {
    padding: 12px;
  }

  .debt-history-table {
    min-width: 620px;
  }
}

.debt-products-panel {
  display: grid;
  gap: 12px;
}

.debt-products-meta-grid {
  display: grid;
  gap: 8px;
  color: #20374f;
}

.debt-products-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d0deed;
  border-radius: 12px;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
}

.debt-products-toolbar label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #45637f;
}

.debt-products-filter-select {
  min-width: 210px;
  min-height: 38px;
  padding: 7px 32px 7px 12px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: #ffffff;
  color: #193854;
  font-weight: 600;
}

.debt-products-origin-meta {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid #c7dcf3;
  border-radius: 999px;
  background: #e8f3ff;
  color: #21486b;
  font-size: 12px;
  font-weight: 700;
}

.debt-products-table-wrap {
  border: 1px solid #cddaea;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  overflow: auto;
  max-height: 56vh;
}

.debt-products-table {
  width: 100%;
  min-width: 860px;
}

.debt-products-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #ebf3fc 0%, #dce9f8 100%);
  color: #264764;
}

.debt-products-table td:nth-child(2),
.debt-products-table td:nth-child(3),
.debt-products-table td:nth-child(4),
.debt-products-table td:nth-child(5) {
  white-space: nowrap;
}

.debt-products-table td:nth-child(6) {
  min-width: 120px;
}

.debt-products-table th:nth-child(6),
.debt-products-table td:nth-child(6) {
  min-width: 140px;
  white-space: nowrap;
}

.debt-products-table .status-badge {
  white-space: nowrap;
}

@media (max-width: 960px) {
  .modal.modal-debt-products {
    width: min(97vw, 920px);
  }

  .modal.modal-debt-products .modal-header h3 {
    font-size: 26px;
  }

  .debt-products-origin-meta {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .modal.modal-debt-products {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-debt-products .modal-body {
    padding: 12px;
  }

  .debt-products-toolbar {
    gap: 8px;
  }

  .debt-products-filter-select {
    min-width: 160px;
  }
}

.sales-receipt-sheet {
  background: #ffffff;
  border: 1px solid #111111;
  border-radius: 12px;
  padding: 14px 12px 12px;
  box-shadow: none;
  font-family: "Courier New", Consolas, monospace;
}

.sales-receipt-brand {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #111111;
  margin-bottom: 4px;
}

.sales-receipt-subtitle,
.sales-receipt-time {
  text-align: center;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
}

.sales-receipt-phone {
  text-align: center;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.sales-receipt-subtitle {
  margin-top: -2px;
}

.sales-receipt-meta {
  margin-top: 10px;
  border-top: 1px dashed #111111;
  border-bottom: 1px dashed #111111;
  padding: 7px 0;
}

.sales-receipt-meta div,
.sales-receipt-line,
.sales-receipt-totals div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #111111;
  font-weight: 700;
}

.sales-receipt-line {
  align-items: flex-start;
  border-bottom: 1px dashed #111111;
  padding: 6px 0;
  margin-bottom: 0;
}

.sales-receipt-line:last-child {
  border-bottom: none;
}

.sales-receipt-line-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.sales-receipt-line-main strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.sales-receipt-line-main small {
  color: #111111;
  font-size: 12px;
  font-weight: 700;
}

.sales-receipt-line-total {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 800;
}

.sales-receipt-meta div:last-child,
.sales-receipt-totals div:last-child {
  margin-bottom: 0;
}

.sales-receipt-items {
  margin-top: 10px;
  min-height: 42px;
}

.settings-add-location-btn:hover,
.settings-add-location-btn:focus-visible {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e6f1ff 100%);
}

.sales-receipt-totals {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px dashed #111111;
}

.sales-receipt-total {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
}

.sales-receipt-thanks {
  text-align: center;
  margin: 14px 0 0;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .modal.modal-checkout,
  .modal.modal-receipt {
    width: calc(100vw - 20px);
    max-width: none;
  }

  .modal.modal-checkout .modal-header h3 {
    font-size: 26px;
  }

  .sales-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-checkout-summary .total strong {
    font-size: 24px;
  }

  .sales-receipt-brand {
    font-size: 32px;
  }
}

/* ============================================
   NOTIFICATIONS
   ============================================ */

.notification-panel {
  position: fixed;
  top: 64px;
  right: var(--space-4);
  width: 320px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
}

.notification-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.notification-header h4 {
  margin: 0;
  font-size: 14px;
}

.notification-header button {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
}

.notification-list {
  padding: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.notification-item.warning {
  background: var(--warning-bg);
}

.notification-item.warning i {
  color: var(--warning);
}

.notification-item.success {
  background: var(--success-bg);
}

.notification-item.success i {
  color: var(--success);
}

.notification-item i {
  font-size: 18px;
  margin-top: 2px;
}

.notification-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.notification-item p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.notification-item.debt-overdue-reminder {
  align-items: flex-start;
}

.notification-item.debt-overdue-reminder > div {
  flex: 1;
}

.notification-item.debt-overdue-reminder .debt-reminder-notes {
  margin-top: 8px;
}

.notification-item.debt-overdue-reminder .debt-reminder-notes li {
  font-size: 11px;
  padding: 7px 9px 7px 25px;
}

.notification-item.debt-overdue-reminder .debt-reminder-notes li::before {
  left: 9px;
  top: 8px;
  font-size: 10px;
}

.notification-item.debt-overdue-reminder .debt-reminder-dismiss {
  min-height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 8px;
  margin-left: 6px;
}

.notification-item.debt-overdue-reminder .debt-reminder-dismiss span {
  display: none;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 280px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.success {
  border-left: 4px solid var(--success);
}

.toast.error {
  border-left: 4px solid var(--danger);
}

.toast.warning {
  border-left: 4px solid var(--warning);
}

.toast i {
  font-size: 18px;
}

.toast.success i {
  color: var(--success);
}
.toast.error i {
  color: var(--danger);
}
.toast.warning i {
  color: var(--warning);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .content {
    margin-left: 0;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bottom-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-locations-card .location-row [data-action="removeLocationRow"] {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .topbar-left {
    width: 100%;
    justify-content: space-between;
  }

  .topbar strong {
    font-size: 16px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }

  .stats-grid,
  .quick-actions,
  .reports-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .welcome,
  .quick-actions,
  .bottom-grid,
  .db-warning,
  .setup-check,
  .page-content {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }

  .setup-check-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .data-table-container {
    overflow-x: auto;
  }

  .data-table {
    min-width: 600px;
  }

  .notification-panel {
    right: var(--space-2);
    left: var(--space-2);
    width: auto;
  }

  .modal {
    width: 95%;
    max-height: 85vh;
  }

  .report-headline-row {
    flex-direction: column;
  }

  .sales-insight-cards {
    grid-template-columns: 1fr;
  }

  .sales-insight-track {
    grid-template-columns: 42px 1fr auto;
    gap: 8px;
  }

  .sales-mix-layout {
    grid-template-columns: 1fr;
  }

  .sales-mix-canvas-wrap {
    width: 130px;
    height: 130px;
  }

  .report-toolbar {
    justify-content: flex-start;
  }

  .report-time-filter {
    overflow-x: auto;
    max-width: 100%;
  }

  .report-snapshot-grid,
  .report-kpi-grid,
  .report-half-grid {
    grid-template-columns: 1fr;
  }

  .report-day-chart,
  .report-hour-chart {
    gap: 6px;
  }

  .report-payment-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .report-top-item {
    grid-template-columns: 28px 1fr;
  }

  .top-values {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 38px;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-grid .stat-card,
.quick-actions button,
.panel,
.report-card {
  animation: fadeIn 0.4s ease-out backwards;
}

.stats-grid .stat-card:nth-child(1) {
  animation-delay: 0.05s;
}
.stats-grid .stat-card:nth-child(2) {
  animation-delay: 0.1s;
}
.stats-grid .stat-card:nth-child(3) {
  animation-delay: 0.15s;
}
.stats-grid .stat-card:nth-child(4) {
  animation-delay: 0.2s;
}

.stats-grid .stat-card:nth-child(5) {
  animation-delay: 0.25s;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   CUSTOMERS PAGE (INVENTORY LOOK)
   ============================================ */

.customers-page .page-content.customers-page-shell {
  --inv-ink: #0c1e31;
  --inv-navy: #12324f;
  --inv-teal: #0f766e;
  --inv-teal-soft: #14b8a6;
  --inv-amber: #f59e0b;
  --inv-amber-soft: #fbbf24;
  --inv-border: #c8d8e8;
  --inv-border-strong: #aec7dd;
  --inv-surface: rgba(255, 255, 255, 0.9);
  --inv-shadow: 0 22px 36px rgba(11, 35, 56, 0.12);

  background:
    radial-gradient(
      circle at 9% 12%,
      rgba(20, 184, 166, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(245, 158, 11, 0.15),
      transparent 38%
    ),
    linear-gradient(150deg, #f7fbff 0%, #ecf4fb 100%);
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--inv-border);
  box-shadow: var(--inv-shadow);
}

.customers-page .customers-page-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(174, 199, 221, 0.6);
}

.customers-page .customers-page-header .btn {
  border-radius: 12px;
  min-height: 42px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.customers-page .customers-page-header .btn-secondary {
  border: 1px solid #bed2e4;
  background: linear-gradient(145deg, #ffffff 0%, #eff7ff 100%);
  color: #18496f;
}

.customers-page .customers-page-header .btn-secondary:hover {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e8f3ff 100%);
}

.customers-page .customers-page-header .btn-primary {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  color: #f7fffe;
  border-color: transparent;
  box-shadow: 0 12px 20px rgba(15, 118, 110, 0.25);
}

.customers-page .customers-page-header .btn-primary:hover {
  filter: brightness(1.06);
}

.customers-page .customers-kpi-grid {
  margin-bottom: 14px;
}

.customers-page .customers-table-container,
.customers-page .customers-debt-table-container {
  border-radius: 14px;
  border: 1px solid var(--inv-border);
  background: var(--inv-surface);
  box-shadow: 0 18px 30px rgba(13, 38, 61, 0.11);
}

.customers-page .customers-table-header {
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fd 100%);
  border-bottom-color: var(--inv-border);
}

.customers-page .customers-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 470px;
}

.customers-page .customers-visible-indicator {
  margin-left: auto;
}

.customers-page .customers-block-title {
  margin: 0;
  font-size: 16px;
  color: #2c4f6d;
}

.customers-page .customers-reminder-note {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d6e4f2;
  background: #f4f9ff;
}

.customers-page .customers-reminder-note.overdue {
  border-color: #fecaca;
  background: #fff1f2;
}

.customers-page .customers-reminder-note.clear {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.customers-page .customers-reminder-title {
  display: block;
  margin-bottom: 6px;
  color: #155e75;
}

.customers-page .customers-reminder-note.overdue .customers-reminder-title {
  color: #b91c1c;
}

.customers-page .customers-reminder-note.clear .customers-reminder-title {
  color: #166534;
}

.customers-page .customers-reminder-empty {
  color: #166534;
}

.customers-page .customers-reminder-list {
  margin: 0;
  padding-left: 18px;
  color: #7f1d1d;
}

.customers-page .customers-page-shell .data-table th {
  background: #eff6fc;
  color: #355674;
  border-bottom-color: #c3d6e8;
}

.customers-page .customers-page-shell .data-table td {
  border-bottom-color: #d7e3ee;
}

.customers-page .customers-page-shell .data-table tbody tr {
  background: rgba(255, 255, 255, 0.78);
}

.customers-page .customers-page-shell .data-table tbody tr:hover {
  background: #edf7ff;
}

.customers-page .customers-page-shell .data-table code {
  background: #ecf4ff;
  color: #0f5f8f;
  border: 1px solid #d3e1f0;
}

.customers-page .customers-page-shell .btn-icon {
  background: #eef4fb;
  color: #335675;
  border: 1px solid #d0ddec;
}

.customers-page .customers-page-shell .btn-icon:hover {
  background: #e0eefb;
  color: #0f766e;
  border-color: #9dc1df;
}

.customers-page .customers-page-shell .btn-icon.danger:hover {
  background: #fff1f2;
  color: #dc2626;
  border-color: #f6c3c8;
}

.customers-page .customers-page-shell .data-table td:last-child {
  white-space: nowrap;
}

.customers-page .customer-row-actions {
  justify-content: flex-start;
}

.customers-page .customer-action-primary {
  border-color: #bfd5ea;
  background: linear-gradient(180deg, #f1f8ff 0%, #e6f2ff 100%);
  color: #174f7a;
}

.customers-page .customer-action-primary:hover,
.customers-page .customer-action-primary:focus-visible {
  border-color: #99c0df;
  background: linear-gradient(180deg, #e7f3ff 0%, #dcedff 100%);
  color: #103f66;
}

.customers-page .customer-action-menu-panel {
  min-width: 210px;
}

@media (min-width: 769px) {
  .customers-page #customerDebtTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  .customers-page #customerDebtTable thead {
    display: table-header-group;
  }

  .customers-page #customerDebtTable tbody {
    display: table-row-group;
  }

  .customers-page #customerDebtTable tr {
    display: table-row;
  }

  .customers-page #customerDebtTable th,
  .customers-page #customerDebtTable td {
    display: table-cell;
    vertical-align: middle;
  }

  .customers-page #customerDebtTable td:last-child {
    min-width: 160px;
  }
}

.customers-page .customers-page-shell,
.customers-page .customers-kpi-grid .inventory-kpi-card,
.customers-page .customers-table-container,
.customers-page .customers-debt-table-container {
  animation: inventoryFadeUp 520ms ease-out both;
}

.customers-page .customers-kpi-grid .inventory-kpi-card:nth-child(1) {
  animation-delay: 60ms;
}

.customers-page .customers-kpi-grid .inventory-kpi-card:nth-child(2) {
  animation-delay: 120ms;
}

.customers-page .customers-kpi-grid .inventory-kpi-card:nth-child(3) {
  animation-delay: 180ms;
}

.customers-page .customers-kpi-grid .inventory-kpi-card:nth-child(4) {
  animation-delay: 240ms;
}

@media (max-width: 1024px) {
  .customers-page .customers-visible-indicator {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .customers-page .page-content.customers-page-shell {
    padding: 12px;
  }

  .customers-page .customers-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CUSTOMER DEBT REPORT — PREMIUM REDESIGN
   ============================================ */

.debt-report-shell {
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid var(--inv-border);
  background: var(--inv-surface);
  box-shadow: 0 18px 30px rgba(13, 38, 61, 0.11);
  overflow: hidden;
}

/* Hero Header */
.debt-report-hero {
  background: linear-gradient(135deg, #0c2340 0%, #0f4f47 60%, #0d6b64 100%);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}

.debt-report-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(20, 184, 166, 0.18), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.05), transparent 40%);
  pointer-events: none;
}

.debt-report-hero::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.09);
  pointer-events: none;
}

.debt-report-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.debt-report-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.debt-report-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.22);
  border: 1px solid rgba(20, 184, 166, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #5eead4;
  flex-shrink: 0;
}

.debt-report-title {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.debt-report-meta {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.debt-meta-overdue {
  color: #fca5a5;
  font-weight: 700;
}

.debt-report-hero-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.debt-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  transition: background 150ms ease, border-color 150ms ease;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.debt-export-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.debt-export-btn.xlsx {
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.28);
  background: rgba(22, 163, 74, 0.14);
}

.debt-export-btn.xlsx:hover {
  background: rgba(22, 163, 74, 0.26);
  border-color: rgba(134, 239, 172, 0.44);
  color: #a7f3d0;
}

.debt-export-btn.pdf {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.28);
  background: rgba(220, 38, 38, 0.14);
}

.debt-export-btn.pdf:hover {
  background: rgba(220, 38, 38, 0.26);
  border-color: rgba(252, 165, 165, 0.44);
  color: #fecaca;
}

/* KPI Summary Row */
.debt-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--inv-border);
}

.debt-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-right: 1px solid var(--inv-border);
  background: linear-gradient(180deg, #f9fbff 0%, #f4f8fd 100%);
  transition: background 150ms;
}

.debt-kpi-card:last-child {
  border-right: none;
}

.debt-kpi-card.warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9ee 100%);
}

.debt-kpi-card.danger {
  background: linear-gradient(135deg, #fff5f5 0%, #fff1f1 100%);
}

.debt-kpi-card.success {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.debt-kpi-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.debt-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.debt-kpi-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.debt-kpi-value {
  font-size: 15px;
  font-weight: 800;
  color: #0c1e31;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filter Bar */
.debt-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--inv-border);
  background: linear-gradient(180deg, #f9fbff 0%, #f3f7fc 100%);
  flex-wrap: wrap;
}

.debt-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.debt-filter-search-wrap {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.debt-filter-search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
  pointer-events: none;
}

.debt-filter-search-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d3dbe6;
  border-radius: 10px;
  background: #fff;
  padding: 0 14px 0 36px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1f2937;
  transition: border-color 160ms, box-shadow 160ms;
}

.debt-filter-search-input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.debt-filter-search-input::placeholder {
  color: #94a3b8;
}

.debt-filter-select {
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid #d3dbe6;
  border-radius: 10px;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1f2937;
  cursor: pointer;
  transition: border-color 160ms;
}

.debt-filter-select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.debt-filter-count {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  font-weight: 600;
}

/* Reminder Banner */
/* Overdue state — full prominent card */
.debt-reminder-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 20px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid #fecaca;
  background: linear-gradient(135deg, #fff5f5 0%, #fff1f2 100%);
}

/* Clear state — compact single-line strip */
.debt-reminder-banner.clear {
  align-items: center;
  padding: 7px 14px;
  border-radius: 8px;
  border-color: #bbf7d0;
  background: #f0fdf4;
  margin: 10px 20px;
  gap: 8px;
}

.debt-reminder-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.debt-reminder-banner.clear .debt-reminder-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: #16a34a;
  font-size: 13px;
  margin-top: 0;
}

.debt-reminder-banner.overdue .debt-reminder-icon {
  background: #fee2e2;
  color: #dc2626;
  margin-top: 1px;
}

.debt-reminder-content {
  flex: 1;
  min-width: 0;
}

.debt-reminder-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Hide title in clear state — merge into single line */
.debt-reminder-banner.clear .debt-reminder-title {
  display: none;
}

.debt-reminder-banner.overdue .debt-reminder-title {
  color: #b91c1c;
}

.debt-reminder-empty {
  font-size: 12px;
  color: #15803d;
  font-weight: 600;
}

.debt-reminder-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #7f1d1d;
  line-height: 1.9;
}

/* Table wrap */
.debt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Customer avatar cell */
.debt-cust-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 130px;
}

.debt-cust-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.debt-cust-name {
  font-size: 13px;
  font-weight: 700;
  color: #0c1e31;
  white-space: nowrap;
}

/* Sale reference badge */
.debt-sale-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 7px;
  border-radius: 6px;
  background: #ecf4ff;
  border: 1px solid #d3e1f0;
  color: #0f5f8f;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.debt-sale-ref i {
  font-size: 9px;
  opacity: 0.6;
}

/* Progress cell */
.debt-progress-cell {
  min-width: 150px;
}

.debt-progress-amounts {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 5px;
  color: #475569;
}

.debt-progress-paid {
  font-weight: 700;
  color: #0f6f66;
}

.debt-progress-total {
  color: #94a3b8;
}

.debt-progress-bar-track {
  height: 5px;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
}

.debt-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0f766e, #14b8a6);
  transition: width 400ms ease;
  min-width: 2px;
}

.debt-progress-bar-fill.full {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

/* Outstanding amount */
.debt-outstanding-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.debt-outstanding-badge.owed {
  background: #fff3cd;
  color: #92400e;
  border: 1px solid #fde68a;
}

.debt-outstanding-badge.clear {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Due date */
.debt-due-overdue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc2626;
  font-weight: 700;
  font-size: 12.5px;
}

.debt-due-overdue i {
  font-size: 11px;
}

.debt-due-ok {
  color: #475569;
  font-size: 12.5px;
}

.debt-due-na {
  color: #94a3b8;
  font-size: 12px;
}

/* Overdue row highlight */
.debt-row-overdue > td {
  background: rgba(254, 242, 242, 0.45) !important;
}

/* Empty state */
.debt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 20px;
  color: #94a3b8;
}

.debt-empty-state i {
  font-size: 30px;
  opacity: 0.45;
}

.debt-empty-state span {
  font-size: 13.5px;
}

/* Deleted records section */
.debt-deleted-shell {
  margin-top: 18px;
  border-radius: 14px;
  border: 1px solid #f0d8d8;
  background: #fffafa;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(180, 20, 20, 0.06);
}

.debt-deleted-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
  border-bottom: 1px solid #f0d8d8;
}

.debt-deleted-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.debt-deleted-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #b91c1c;
}

/* Responsive */
@media (max-width: 900px) {
  .debt-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .debt-kpi-card:nth-child(2) {
    border-right: none;
  }
  .debt-kpi-card:nth-child(1),
  .debt-kpi-card:nth-child(2) {
    border-bottom: 1px solid var(--inv-border);
  }
}

@media (max-width: 640px) {
  .debt-report-hero {
    padding: 16px;
  }
  .debt-report-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .debt-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
  .debt-filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .debt-filter-search-wrap {
    max-width: none;
  }
  .debt-filter-count {
    margin-left: 0;
  }
}

/* Dark mode */
[data-theme="dark"] .debt-report-shell {
  background: #111c29 !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .debt-report-hero {
  background: linear-gradient(135deg, #050e1a 0%, #071a18 60%, #0a2320 100%) !important;
}

[data-theme="dark"] .debt-kpi-row {
  border-color: #1e3048 !important;
}

[data-theme="dark"] .debt-kpi-card {
  background: #0e1826 !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .debt-kpi-card.warn {
  background: #1c1505 !important;
}

[data-theme="dark"] .debt-kpi-card.danger {
  background: #1a0505 !important;
}

[data-theme="dark"] .debt-kpi-card.success {
  background: #051a0e !important;
}

[data-theme="dark"] .debt-kpi-label {
  color: #64748b !important;
}

[data-theme="dark"] .debt-kpi-value {
  color: #c8d8e8 !important;
}

[data-theme="dark"] .debt-filter-row {
  background: linear-gradient(180deg, #0e1826 0%, #0c1622 100%) !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .debt-filter-search-input,
[data-theme="dark"] .debt-filter-select {
  background: #141f2e !important;
  border-color: #1e3048 !important;
  color: #c8d8e8 !important;
}

[data-theme="dark"] .debt-filter-search-input::placeholder {
  color: #3d5470 !important;
}

[data-theme="dark"] .debt-reminder-banner {
  background: #0e1826 !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .debt-reminder-banner.overdue {
  background: #1a0505 !important;
  border-color: #4a1515 !important;
}

[data-theme="dark"] .debt-reminder-banner.clear {
  background: #071a0f !important;
  border-color: #0f3520 !important;
}

[data-theme="dark"] .debt-reminder-empty {
  color: #4ade80 !important;
}

[data-theme="dark"] .debt-reminder-title {
  color: #60a5fa !important;
}

[data-theme="dark"] .debt-reminder-banner.clear .debt-reminder-title {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .debt-reminder-banner.overdue .debt-reminder-title {
  color: #fca5a5 !important;
}

[data-theme="dark"] .debt-reminder-empty {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .debt-reminder-list {
  color: #fcd4d4 !important;
}

[data-theme="dark"] .debt-cust-name {
  color: #c8d8e8 !important;
}

[data-theme="dark"] .debt-sale-ref {
  background: #162030 !important;
  border-color: #243a50 !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .debt-progress-bar-track {
  background: #1e2f44 !important;
}

[data-theme="dark"] .debt-progress-paid {
  color: #2dd4bf !important;
}

[data-theme="dark"] .debt-progress-total {
  color: #475569 !important;
}

[data-theme="dark"] .debt-outstanding-badge.owed {
  background: #2a1c05 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .debt-outstanding-badge.clear {
  background: #051a0e !important;
  border-color: #0f3520 !important;
  color: #6ee7b7 !important;
}

[data-theme="dark"] .debt-row-overdue > td {
  background: rgba(42, 18, 18, 0.38) !important;
}

[data-theme="dark"] .debt-deleted-shell {
  background: #150e0e !important;
  border-color: #3a1a1a !important;
}

[data-theme="dark"] .debt-deleted-header {
  background: linear-gradient(135deg, #1a0b0b 0%, #150909 100%) !important;
  border-color: #3a1a1a !important;
}

[data-theme="dark"] .debt-deleted-title {
  color: #f87171 !important;
}

/* ============================================
   REMAINING MODULE PAGES (INVENTORY LOOK)
   ============================================ */

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-content {
  background:
    radial-gradient(
      circle at 9% 12%,
      rgba(20, 184, 166, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(245, 158, 11, 0.14),
      transparent 40%
    ),
    linear-gradient(150deg, #f7fbff 0%, #ecf4fb 100%);
  border-radius: 18px;
  border: 1px solid #c8d8e8;
  box-shadow: 0 22px 36px rgba(11, 35, 56, 0.12);
  padding: 18px;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-header,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .content-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(174, 199, 221, 0.6);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-info
  h2,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .content-header
  h2 {
  color: #114164;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn.btn-primary {
  border: none;
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  color: #f7fffe;
  box-shadow: 0 12px 20px rgba(15, 118, 110, 0.25);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn.btn-secondary {
  border: 1px solid #bed2e4;
  background: linear-gradient(145deg, #ffffff 0%, #eff7ff 100%);
  color: #18496f;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn.btn-secondary:hover {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e8f3ff 100%);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn.btn-primary:hover {
  filter: brightness(1.06);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table-container,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-wrapper {
  border-radius: 14px;
  border: 1px solid #c8d8e8;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 30px rgba(13, 38, 61, 0.11);
  overflow: hidden;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-header {
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fd 100%);
  border-bottom-color: #c8d8e8;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table
  th {
  background: #eff6fc;
  color: #355674;
  border-bottom-color: #c3d6e8;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table
  td {
  border-bottom-color: #d7e3ee;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table
  tbody
  tr {
  background: rgba(255, 255, 255, 0.78);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table
  tbody
  tr:hover {
  background: #edf7ff;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .search-box
  input,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-filters
  select {
  border-color: #c1d3e4;
  background: #ffffff;
  border-radius: 12px;
  min-height: 42px;
  color: #214966;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .search-box
  input:focus,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-filters
  select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn-icon {
  background: #eef4fb;
  color: #335675;
  border: 1px solid #d0ddec;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn-icon:hover {
  background: #e0eefb;
  color: #0f766e;
  border-color: #9dc1df;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .btn-icon.danger:hover {
  background: #fff1f2;
  color: #dc2626;
  border-color: #f6c3c8;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .status-badge.success {
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
  border: 1px solid rgba(15, 118, 110, 0.2);
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .status-badge.warning {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] :is(
    .transactions-page, .suppliers-page, .employees-page, .users-page,
    .expenses-page, .invoices-page, .deliveries-page, .receiving-page,
    .quotations-page, .purchase-orders-page, .returns-page, .appointments-page,
    .locations-page, .messages-page, .security-logs-page, .settings-page
  ) .status-badge.success {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
}
[data-theme="dark"] :is(
    .transactions-page, .suppliers-page, .employees-page, .users-page,
    .expenses-page, .invoices-page, .deliveries-page, .receiving-page,
    .quotations-page, .purchase-orders-page, .returns-page, .appointments-page,
    .locations-page, .messages-page, .security-logs-page, .settings-page
  ) .status-badge.warning {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}

:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .page-content,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .data-table-container,
:is(
    .transactions-page,
    .suppliers-page,
    .employees-page,
    .users-page,
    .expenses-page,
    .invoices-page,
    .deliveries-page,
    .receiving-page,
    .quotations-page,
    .purchase-orders-page,
    .returns-page,
    .appointments-page,
    .locations-page,
    .messages-page,
    .security-logs-page,
    .settings-page
  )
  .table-wrapper {
  animation: inventoryFadeUp 520ms ease-out both;
}

@media (max-width: 640px) {
  :is(
      .transactions-page,
      .suppliers-page,
      .employees-page,
      .users-page,
      .expenses-page,
      .invoices-page,
      .deliveries-page,
      .receiving-page,
      .quotations-page,
      .purchase-orders-page,
      .returns-page,
      .appointments-page,
      .locations-page,
      .messages-page,
      .security-logs-page,
      .settings-page
    )
    .page-content {
    padding: 12px;
  }
}

/* ============================================
   REPORTS + DIALOGS REFINEMENT
   ============================================ */

.reports-page .report-redesign-page {
  --report-ink: #10344f;
  --report-muted: #56728e;
  --report-border: #c8d8e8;
  --report-card-bg: rgba(255, 255, 255, 0.94);
  --report-accent: #0f766e;
  --report-accent-soft: #e8f8f6;
  --report-gold: #f59e0b;
  --report-success: #14b8a6;
  --report-danger: #dc2626;

  background:
    radial-gradient(
      circle at 9% 12%,
      rgba(20, 184, 166, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(245, 158, 11, 0.14),
      transparent 40%
    ),
    linear-gradient(150deg, #f7fbff 0%, #ecf4fb 100%);
  border: 1px solid var(--report-border);
  border-radius: 18px;
  box-shadow: 0 22px 36px rgba(11, 35, 56, 0.12);
  padding: 18px;
}

.reports-page .report-headline-row,
.reports-page .report-snapshot-card,
.reports-page .report-kpi-card,
.reports-page .report-card-shell {
  border-color: var(--report-border);
  box-shadow: 0 12px 24px rgba(13, 38, 61, 0.09);
}

.reports-page .report-headline-row {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(243, 248, 253, 0.98) 100%
  );
}

.reports-page .report-toolbar .btn {
  border: 1px solid #bed2e4;
  background: linear-gradient(145deg, #ffffff 0%, #eff7ff 100%);
  color: #18496f;
  border-radius: 12px;
  min-height: 40px;
}

.reports-page .report-toolbar .btn:hover {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e8f3ff 100%);
}

.reports-page .report-time-filter {
  border-color: #c1d3e4;
  background: #eef6ff;
}

.reports-page .report-time-filter button.active,
.reports-page .report-time-filter a.active {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  color: #f8fffe;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.26);
}

.reports-page .report-day-bars .bar.revenue,
.reports-page .report-hour-bar-group .hour-bar,
.reports-page .payment-track span,
.reports-page .top-track span {
  background: linear-gradient(180deg, #66a6c7 0%, #0f766e 100%);
}

.reports-page .report-day-bars .bar.profit {
  background: linear-gradient(180deg, #6dd8cd 0%, #14b8a6 100%);
}

.reports-page .report-kpi-card::after {
  background: linear-gradient(180deg, #0f766e 0%, #f59e0b 100%);
}

.reports-page .report-redesign-page,
.reports-page .report-headline-row,
.reports-page .report-snapshot-card,
.reports-page .report-kpi-card,
.reports-page .report-card-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

.reports-page .report-snapshot-card:nth-child(1),
.reports-page .report-kpi-card:nth-child(1) {
  animation-delay: 60ms;
}

.reports-page .report-snapshot-card:nth-child(2),
.reports-page .report-kpi-card:nth-child(2) {
  animation-delay: 120ms;
}

.reports-page .report-snapshot-card:nth-child(3),
.reports-page .report-kpi-card:nth-child(3) {
  animation-delay: 180ms;
}

.modal-overlay {
  background: rgba(7, 24, 39, 0.55);
  backdrop-filter: blur(4px);
}

.modal {
  border: 1px solid #c8d8e8;
  box-shadow: 0 26px 42px rgba(11, 35, 56, 0.25);
  border-radius: 16px;
  background: linear-gradient(170deg, #ffffff 0%, #f7fbff 100%);
}

.modal-header {
  border-bottom: 1px solid #c8d8e8;
  background: linear-gradient(95deg, #0f2238 0%, #133050 55%, #0c1f34 100%);
}

.modal-header h3 {
  color: #f6fdff;
  font-weight: 700;
}

.modal-close {
  background: rgba(255, 255, 255, 0.16);
  color: #e7fbff;
  border: 1px solid rgba(165, 243, 252, 0.3);
}

.modal-close:hover {
  background: rgba(20, 184, 166, 0.22);
  color: #f0fffd;
}

.modal-body {
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
}

.modal-footer {
  border-top: 1px solid #c8d8e8;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.modal .btn-primary {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  border-color: transparent;
  color: #f7fffe;
}

.modal .btn-primary:hover {
  filter: brightness(1.06);
}

.modal .btn-primary:disabled,
.modal .btn-primary[aria-disabled="true"] {
  filter: none;
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.modal .btn-secondary {
  border: 1px solid #bed2e4;
  background: linear-gradient(145deg, #ffffff 0%, #eff7ff 100%);
  color: #18496f;
}

.modal .btn-secondary:hover {
  border-color: #8fb0cb;
  background: linear-gradient(145deg, #f7fbff 0%, #e8f3ff 100%);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}

.modal.modal-checkout .modal-header,
.modal.modal-receipt .modal-header {
  background: linear-gradient(95deg, #0f2238 0%, #133050 55%, #0c1f34 100%);
  border-bottom: 1px solid rgba(165, 243, 252, 0.26);
}

.modal.modal-checkout .modal-header h3,
.modal.modal-receipt .modal-header h3 {
  color: #f6fdff;
}

.sales-payment-tile.active {
  border-color: #0f766e;
  color: #0f766e;
  background: #e8f8f6;
  box-shadow: 0 8px 14px rgba(15, 118, 110, 0.18);
}

.sales-checkout-submit {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
}

.sales-receipt-total,
.sales-checkout-summary .total strong {
  color: #0f766e;
}

.modal.modal-receiving-add {
  width: min(96vw, 940px);
  max-width: 940px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 20px 36px rgba(10, 30, 50, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-receiving-add .modal-header {
  border-bottom: 1px solid #d4e0ec;
  background: linear-gradient(95deg, #0f2238 0%, #133050 55%, #0c1f34 100%);
}

.modal.modal-receiving-add .modal-header h3 {
  font-size: 24px;
  letter-spacing: 0;
}

.modal.modal-receiving-add .modal-body {
  padding: 14px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f7fbff;
}

.modal.modal-receiving-add .modal-footer {
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.receiving-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.receiving-add-intro {
  margin: 0;
  color: #4d6a84;
  font-size: 13px;
}

.receiving-add-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #d6e2ee;
  background: #ffffff;
}

.receiving-add-field-po {
  grid-column: span 2;
}

.receiving-add-field-supplier {
  grid-column: span 1;
}

.receiving-add-field-status {
  grid-column: span 1;
}

.receiving-add-field-amount {
  grid-column: span 2;
}

.modal.modal-receiving-add .form-group {
  margin-bottom: 0;
}

.modal.modal-receiving-add .form-group label {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: #284861;
}

.modal.modal-receiving-add input,
.modal.modal-receiving-add select,
.modal.modal-receiving-add textarea {
  min-height: 38px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: #ffffff;
}

.receiving-add-label-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.receiving-calc-btn {
  padding: 6px 10px;
  min-height: 30px;
  font-size: 12px;
}

.receiving-add-field-hint {
  color: #617a93;
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.receiving-add-items-wrap {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #d6e2ee;
  background: #ffffff;
}

.receiving-add-items-note {
  margin-bottom: 10px;
}

.receiving-items-container {
  display: grid;
  gap: 8px;
}

.receiving-item-row {
  border: 1px solid #d9e4ef;
  border-radius: 10px;
  background: #f9fcff;
  padding: 8px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.receiving-row-product {
  grid-column: 1 / -1;
}

/* ── Receiving conversion box (bags × kg/bag) ─────────── */
.rcv-conv-wrap {
  grid-column: 1 / -1;
}
.rcv-conv-box {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9ee 100%);
  border: 1.5px dashed #fcd34d;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rcv-conv-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rcv-conv-equation {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.rcv-conv-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rcv-conv-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
}
.rcv-conv-field input {
  min-height: 40px;
  width: 110px;
  border: 1.5px solid #fcd34d;
  border-radius: 9px;
  background: #fff;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.rcv-conv-field input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.rcv-conv-times, .rcv-conv-eq {
  font-size: 18px;
  font-weight: 800;
  color: #9ca3af;
  padding-bottom: 6px;
}
.rcv-conv-result {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: #ccfbf1;
  border: 1.5px solid #5eead4;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  color: #0f766e;
}

.receiving-row-field {
  margin: 0;
}

.receiving-row-total-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.receiving-line-total-label {
  font-size: 11px;
  font-weight: 700;
  color: #617a93;
}

.receiving-line-total {
  min-height: 38px;
  border: 1px solid #c6d6e6;
  border-radius: 10px;
  background: #eef6ff;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  color: #133752;
  font-weight: 700;
}

.receiving-remove {
  min-height: 38px;
  width: 38px;
  min-width: 38px;
  align-self: end;
  justify-content: center;
  padding: 0;
}

.receiving-remove i {
  margin: 0;
}

.receiving-running-total {
  margin-top: 6px;
  border: 1px solid #cfe0ef;
  border-radius: 10px;
  background: #f1f7ff;
  padding: 8px 10px;
  color: #1f4564;
  font-weight: 700;
}

.receiving-add-item-btn {
  margin-top: 8px;
}

.receiving-validation-note {
  display: block;
  margin: 2px 2px 0;
  padding: 6px 2px;
  font-size: 12px;
  font-weight: 600;
  color: #4f6474;
}

.receiving-validation-note.is-clean {
  color: #4f6474;
}

.receiving-validation-note.is-dirty {
  color: #0f5d55;
}

.receiving-validation-note.is-warning {
  color: #7a3411;
}

.modal.modal-debt-add {
  width: min(96vw, 1080px);
  max-width: 1080px;
  max-height: 92vh;
  border: 1px solid #cad9ea;
  box-shadow: 0 34px 56px rgba(10, 30, 50, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-debt-add .modal-header {
  border-bottom: 1px solid rgba(167, 191, 220, 0.45);
  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(56, 189, 248, 0.22),
      transparent 48%
    ),
    linear-gradient(105deg, #122642 0%, #173b62 58%, #0f2a49 100%);
}

.modal.modal-debt-add .modal-header h3 {
  font-size: 31px;
  letter-spacing: 0.01em;
}

.modal.modal-debt-add .modal-body {
  padding: 18px 22px 20px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(45, 212, 191, 0.14),
      transparent 38%
    ),
    linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
}

.modal.modal-debt-add .modal-footer {
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.modal.modal-debt-add .modal-footer .debt-add-footer-cancel {
  margin-right: auto;
}

.debt-add-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.debt-add-context-grid,
.debt-add-editor-grid {
  display: grid;
  gap: 12px;
}

.debt-add-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.debt-add-context-grid .form-group {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d4e0ec;
  background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
}

.debt-add-context-grid .form-group label {
  margin-bottom: 6px;
}

.debt-add-context-grid input[readonly] {
  border-color: #d4e0ec;
  background: #f8fbff;
  color: #16324d;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.debt-add-editor-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #d3dfed;
  background: linear-gradient(170deg, #ffffff 0%, #f6faff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.debt-add-field-search {
  grid-column: span 2;
}

.debt-add-field-product {
  grid-column: span 2;
}

.debt-add-field-qty {
  grid-column: span 1;
}

.debt-add-field-note {
  grid-column: span 6;
}

.modal.modal-debt-add .form-group {
  margin-bottom: 0;
}

.modal.modal-debt-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.modal.modal-debt-add input,
.modal.modal-debt-add select,
.modal.modal-debt-add textarea {
  min-height: 42px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.modal.modal-debt-add textarea {
  min-height: 70px;
  resize: vertical;
}

.debt-add-hint {
  color: #617a93;
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.debt-add-search-meta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4d6a84;
}

.debt-add-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.debt-add-actions-row small {
  color: #617a93;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.debt-add-actions-row #debtAddPushLineBtn {
  min-width: 132px;
  font-weight: 700;
}

.debt-add-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.debt-add-toolbar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.debt-add-toolbar-chip-catalog {
  color: #184a6f;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.debt-add-toolbar-chip-stock {
  color: #7a3411;
  background: #fff5e8;
  border-color: #f6d7b0;
}

.debt-add-toolbar-chip-selected {
  color: #2a4b67;
  background: #eef4fb;
  border-color: #cddced;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.debt-add-toolbar-chip-selected.is-in-stock {
  color: #0f5d55;
  background: #e8f8f6;
  border-color: #bfe6e0;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

.debt-add-toolbar-chip-selected.is-out-of-stock {
  color: #7a3411;
  background: #fff5e8;
  border-color: #f6d7b0;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.14);
}

.debt-add-toolbar-chip-summary {
  margin-left: auto;
  color: #0f5d55;
  background: #e8f8f6;
  border-color: #bfe6e0;
}

.debt-add-table-wrap {
  border: 1px solid #cddaea;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 320px;
  scrollbar-gutter: stable;
}

.debt-add-table-wrap::-webkit-scrollbar {
  height: 12px;
}

.debt-add-table-wrap::-webkit-scrollbar-track {
  background: #e8f0f9;
  border-radius: 999px;
}

.debt-add-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(120deg, #3b82f6 0%, #0891b2 100%);
  border-radius: 999px;
}

.debt-add-table {
  width: 100%;
  min-width: 860px;
}

.debt-add-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #ebf3fc 0%, #dce9f8 100%);
  color: #264764;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.debt-add-table th,
.debt-add-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.debt-add-table td:nth-child(2),
.debt-add-table td:nth-child(3),
.debt-add-table td:nth-child(4) {
  text-align: right;
}

.debt-add-table tbody tr.debt-add-line-updated {
  animation: debtAddLinePulse 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.debt-add-table tbody tr.debt-add-line-updated .debt-add-line-total {
  animation: debtAddTotalPop 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.debt-add-line-qty {
  width: 82px;
  min-height: 34px;
  text-align: center;
  border: 1px solid #c6d6e6;
  border-radius: 9px;
  font-weight: 700;
  color: #133752;
}

.debt-add-line-qty:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

@keyframes debtAddLinePulse {
  0% {
    background: rgba(14, 165, 233, 0);
  }

  45% {
    background: rgba(14, 165, 233, 0.16);
  }

  100% {
    background: rgba(14, 165, 233, 0);
  }
}

@keyframes debtAddTotalPop {
  0% {
    transform: scale(1);
    color: inherit;
  }

  50% {
    transform: scale(1.05);
    color: #0f766e;
  }

  100% {
    transform: scale(1);
    color: inherit;
  }
}

.debt-add-table td:nth-child(1),
.debt-add-table td:nth-child(5) {
  white-space: normal;
  min-width: 160px;
}

.debt-add-empty {
  text-align: center;
  color: #6b7280;
}

.debt-add-remove-btn {
  padding: 6px 10px;
}

@media (max-width: 960px) {
  .modal.modal-debt-add {
    width: min(97vw, 920px);
  }

  .modal.modal-receiving-add {
    width: min(97vw, 920px);
  }

  .modal.modal-receiving-add .modal-header h3 {
    font-size: 24px;
  }

  .receiving-add-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receiving-add-field-po,
  .receiving-add-field-supplier,
  .receiving-add-field-status,
  .receiving-add-field-amount {
    grid-column: span 2;
  }

  .receiving-item-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receiving-row-product {
    grid-column: span 2;
  }

  .modal.modal-supplier-edit {
    width: min(97vw, 920px);
  }

  .modal.modal-supplier-edit .modal-header h3 {
    font-size: 24px;
  }

  .supplier-edit-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-edit-field-name,
  .supplier-edit-field-contact,
  .supplier-edit-field-phone,
  .supplier-edit-field-email,
  .supplier-edit-field-status,
  .supplier-edit-field-address {
    grid-column: span 2;
  }

  .modal.modal-debt-add .modal-header h3 {
    font-size: 24px;
  }

  .debt-add-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debt-add-field-search,
  .debt-add-field-product,
  .debt-add-field-qty,
  .debt-add-field-note {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .modal.modal-debt-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-receiving-add {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-supplier-edit {
    width: calc(100vw - 14px);
    max-height: 94vh;
    border-radius: 14px;
  }

  .modal.modal-debt-add .modal-body {
    padding: 14px;
  }

  .modal.modal-receiving-add .modal-body {
    padding: 12px;
  }

  .modal.modal-supplier-edit .modal-body {
    padding: 14px;
  }

  .debt-add-context-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .supplier-edit-context-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .receiving-add-context-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .receiving-item-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .receiving-row-product {
    grid-column: span 1;
  }

  .receiving-line-total {
    justify-content: flex-start;
  }

  .supplier-edit-chip.chip-changes,
  .supplier-edit-toolbar-chip-muted {
    margin-left: 0;
  }

  .debt-add-actions-row #debtAddPushLineBtn {
    width: 100%;
  }

  .debt-add-toolbar-chip-summary {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .reports-page .report-redesign-page {
    padding: 12px;
  }
}

/* ============================================
   SALES PAGE REFINEMENT (INVENTORY LOOK)
   ============================================ */

.sales-page {
  background: #ecf3fa;
}

.sales-page .topbar {
  background: linear-gradient(95deg, #0f2238 0%, #133050 55%, #0c1f34 100%);
  border-bottom: 1px solid rgba(165, 243, 252, 0.24);
  box-shadow: 0 8px 20px rgba(11, 35, 56, 0.24);
}

.sales-page .topbar strong {
  color: #f6fdff;
}

.sales-page .pill,
.sales-page .icon-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(165, 243, 252, 0.32);
  color: #f6fdff;
}

.sales-page .pill.primary,
.sales-page .pill:hover,
.sales-page .icon-btn:hover,
.sales-page .pill.primary:hover {
  background: rgba(20, 184, 166, 0.2);
  border-color: rgba(20, 184, 166, 0.42);
}

.sales-page .sales-pos-shell {
  background:
    radial-gradient(
      circle at 9% 12%,
      rgba(20, 184, 166, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(245, 158, 11, 0.14),
      transparent 40%
    ),
    linear-gradient(150deg, #f7fbff 0%, #ecf4fb 100%);
  border: 1px solid #c8d8e8;
  border-radius: 18px;
  box-shadow: 0 22px 36px rgba(11, 35, 56, 0.12);
}

.sales-page .sales-products-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #c8d8e8;
  box-shadow: 0 18px 30px rgba(13, 38, 61, 0.11);
}

.sales-page .sales-products-header h3 {
  color: #10344f;
}

.sales-page .sales-products-header p {
  color: #56728e;
}

.sales-page .sales-products-stats span {
  background: #eaf7f6;
  border: 1px solid #bfe6e0;
  color: #195772;
}

.sales-page .sales-search-wrap input {
  border-color: #c1d3e4;
}

.sales-page .sales-search-wrap input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.sales-page .sales-chip {
  border-color: #c4d7e8;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
  color: #244866;
}

.sales-page .sales-chip.active,
.sales-page .sales-chip:hover {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  border-color: transparent;
  color: #f7fffe;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.22);
}

.sales-page .sales-category-row {
  border: 1px solid #cadbeb;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(45, 121, 183, 0.09),
      transparent 36%
    ),
    linear-gradient(180deg, #f9fcff 0%, #edf4fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.sales-page .sales-category-meta p {
  color: #2f5270;
}

.sales-page .sales-category-meta small {
  color: #5f7c95;
}

.sales-page .sales-category-row::-webkit-scrollbar {
  height: 10px;
}

.sales-page .sales-category-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c1d2e3;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sales-page .sales-category-row::-webkit-scrollbar-track {
  background: transparent;
}

.sales-page .sales-products-grid::-webkit-scrollbar-thumb,
.sales-page .sales-cart-items::-webkit-scrollbar-thumb {
  background: #b9cadb;
}

.sales-page .sales-product-card {
  border-color: #cad8e6;
  background: linear-gradient(170deg, #ffffff 0%, #f3f8fd 100%);
}

.sales-page .sales-product-card:hover {
  border-color: #0f766e;
  box-shadow: 0 12px 22px rgba(15, 118, 110, 0.18);
}

.sales-page .sales-product-icon {
  background: linear-gradient(135deg, #e9f7f5 0%, #d7f0ec 100%);
  color: #0f766e;
}

.sales-page .sales-product-card.is-out-stock,
.sales-page .sales-product-card:disabled {
  border-color: #d4dde6;
  background: linear-gradient(170deg, #f9fbfd 0%, #eff4f8 100%);
}

.sales-page .sales-product-category {
  background: #edf7f5;
  border-color: #d0e9e4;
  color: #2f617f;
}

.sales-page .sales-product-price {
  color: #0f766e;
}

.sales-page .sales-current-panel {
  background: linear-gradient(170deg, #0f2238 0%, #133050 55%, #0c1f34 100%);
  border: 1px solid rgba(165, 243, 252, 0.22);
  box-shadow: 0 20px 34px rgba(12, 25, 40, 0.3);
}

.sales-page .sales-current-header button {
  border-color: rgba(165, 243, 252, 0.35);
}

.sales-page .sales-current-header button:hover {
  background: rgba(20, 184, 166, 0.22);
}

.sales-page .sales-cart-item {
  border-color: rgba(165, 243, 252, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.sales-page .sales-cart-line-total,
.sales-page .sales-summary-row.total span,
.sales-page .sales-summary-row.total strong {
  color: #fbc54c;
}

.sales-page .sales-charge-btn {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 14px 24px rgba(15, 118, 110, 0.26);
}

.sales-page .sales-charge-btn:hover {
  filter: brightness(1.05);
}

.sales-page .sales-no-result,
.sales-page .sales-empty-cart {
  border-color: #c8d8e8;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .sales-page .sales-pos-shell {
    border-radius: 14px;
  }
}

/* ============================================
   SALES UX TUNING (CASHIER FLOW)
   ============================================ */

.sales-page .sales-current-header h3 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 10px;
  line-height: 1.2;
}

.sales-page .sales-cart-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(251, 197, 76, 0.45);
  background: rgba(251, 197, 76, 0.16);
  color: #fef7e1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sales-page .sales-cart-pill.is-bump {
  animation: salesCartBump 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sales-page .sales-product-card,
.sales-page .sales-chip,
.sales-page .sales-cart-controls button,
.sales-page .sales-charge-btn,
.sales-payment-tile,
.sales-checkout-submit {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    color var(--transition-base),
    filter var(--transition-base);
}

.sales-page .sales-product-card.is-added {
  border-color: #14b8a6;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24);
  animation: salesCardFlash 380ms ease-out;
}

.sales-page .sales-product-card:focus-visible,
.sales-page .sales-chip:focus-visible,
.sales-page .sales-current-header button:focus-visible,
.sales-page .sales-charge-btn:focus-visible,
.sales-payment-tile:focus-visible,
.sales-checkout-submit:focus-visible,
#checkoutCustomerSearch:focus-visible,
#checkoutCustomerSelect:focus-visible,
#checkoutDiscount:focus-visible,
#checkoutMobilePhone:focus-visible,
#checkoutCreditDueDate:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.2);
}

.sales-page .sales-cart-controls {
  gap: 10px;
}

.sales-page .sales-cart-controls button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 18px;
}

.sales-page .sales-cart-controls button.is-stock-limit,
.sales-page .sales-cart-controls button:disabled {
  color: #95acc2;
  background: rgba(170, 187, 204, 0.2);
  border-color: rgba(175, 193, 210, 0.42);
}

.sales-page .sales-cart-qty {
  width: 22px;
}

.sales-page .sales-charge-btn {
  height: 50px;
  font-size: 17px;
}

.sales-page .sales-charge-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.18);
  opacity: 0.74;
  box-shadow: none;
}

.modal.modal-checkout {
  max-width: 620px;
}

.modal.modal-checkout .modal-body {
  padding: 16px 18px 18px;
}

.sales-checkout-form {
  gap: 14px;
}

.sales-checkout-form .form-group {
  margin-bottom: 0;
  padding: 10px 11px;
  border: 1px solid #d2ddea;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
}

.sales-checkout-form .form-group label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #445f79;
}

#checkoutCustomerSearch,
#checkoutCustomerSelect,
#checkoutDiscount,
#checkoutMobilePhone,
#checkoutCreditDueDate,
.sales-checkout-form input[type="text"],
.sales-checkout-form input[type="tel"] {
  min-height: 42px;
  border-radius: 10px;
}

.sales-checkout-items {
  max-height: 210px;
}

.sales-checkout-summary {
  border-color: #c4d6e8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.sales-checkout-summary .total strong {
  color: #0f766e;
}

.sales-checkout-payment-title {
  margin-top: 2px;
  margin-bottom: 2px;
  color: #37546f;
}

.sales-payment-grid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 9px;
}

.sales-payment-tile {
  min-height: 66px;
  position: relative;
  padding-top: 10px;
}

.sales-payment-hotkey {
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #9ecfc8;
  background: #e8f8f6;
  color: #0f766e;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sales-payment-tile.active {
  background: linear-gradient(180deg, #f4fbfa 0%, #e8f8f6 100%);
  border-color: #0f766e;
  color: #0f766e;
}

.sales-checkout-submit {
  min-height: 50px;
  position: sticky;
  bottom: 0;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .sales-page .sales-current-header h3 {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .sales-page .sales-cart-pill {
    min-height: 22px;
    padding: 0 8px;
  }

  .modal.modal-checkout {
    max-width: none;
  }

  .sales-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes salesCartBump {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.11);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes salesCardFlash {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ============================================================
   SALES PAGE — PREMIUM POS REDESIGN
   All new classes that were previously unstyled + improvements
   ============================================================ */

/* ── Products panel header ───────────────────────────────── */
.sales-page .sales-products-header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(195, 215, 232, 0.55);
  margin-bottom: 12px;
  gap: 12px;
}

.sales-page .sales-products-header h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0c2d44;
}

.sales-page .sales-products-header p {
  font-size: 12.5px;
  color: #4f6d88;
  margin-top: 2px;
}

.sales-page .sales-products-stats span {
  padding: 5px 11px;
  font-size: 11.5px;
}

/* ── Search bar refinement ───────────────────────────────── */
.sales-page .sales-search-wrap input {
  height: 42px;
  font-size: 13.5px;
  border-radius: 11px;
}

/* ── Product card improvements ───────────────────────────── */
.sales-page .sales-product-card {
  border-radius: 13px;
  min-height: 130px;
  box-shadow: 0 2px 6px rgba(13, 38, 61, 0.06);
}

.sales-page .sales-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(15, 118, 110, 0.18);
}

.sales-page .sales-product-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 15px;
  background: linear-gradient(135deg, #dff5f2 0%, #c8edea 100%);
  color: #0b6159;
  box-shadow: 0 2px 5px rgba(15, 118, 110, 0.18);
}

.sales-page .sales-product-card strong {
  font-size: 13.5px;
  color: #0d2b40;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sales-page .sales-product-price {
  font-size: 16px;
  font-weight: 800;
  color: #0d6b60;
  letter-spacing: -0.01em;
}

.sales-page .sales-product-category {
  font-size: 10.5px;
  padding: 2px 7px;
  background: #e9f5f3;
  border-color: #c3e4df;
  color: #1f5a50;
}

/* ── Right panel header ──────────────────────────────────── */
.sales-page .sales-current-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(165, 243, 252, 0.14);
}

.sales-page .sales-current-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sales-page .sales-current-header-left h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sales-page .sales-pos-loc {
  display: block;
  font-size: 11px;
  color: rgba(165, 243, 252, 0.5);
  font-weight: 600;
}

/* ── Panel action buttons (Hold, Clear) ─────────────────── */
.sales-page .sales-panel-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.sales-page .sales-panel-actions button {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(165, 243, 252, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(200, 230, 245, 0.8);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sales-page .sales-panel-actions button:hover {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(20, 184, 166, 0.42);
  color: #5eead4;
}

/* ── Customer selector ───────────────────────────────────── */
.sales-page .sales-customer-wrap {
  margin-bottom: 10px;
}

.sales-page .sales-cust-combo {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid rgba(165, 243, 252, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0 10px 0 38px;
  cursor: text;
  transition: border-color 160ms, background 160ms, box-shadow 160ms;
}

.sales-page .sales-cust-combo:focus-within {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}

.sales-page .sales-cust-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(165, 243, 252, 0.5);
  font-size: 15px;
  pointer-events: none;
}

.sales-page .sales-cust-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #e0f2ff;
  font-size: 13.5px;
  font-family: inherit;
}

.sales-page .sales-cust-input::placeholder {
  color: rgba(165, 243, 252, 0.38);
}

.sales-page .sales-cust-chevron {
  color: rgba(165, 243, 252, 0.35);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 4px;
  pointer-events: none;
}

.sales-page .sales-cust-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: linear-gradient(170deg, #0c2035 0%, #0a1828 100%);
  border: 1px solid rgba(165, 243, 252, 0.2);
  border-radius: 11px;
  z-index: 30;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  max-height: 220px;
  overflow-y: auto;
}

.sales-page .sales-cust-dropdown::-webkit-scrollbar {
  width: 5px;
}

.sales-page .sales-cust-dropdown::-webkit-scrollbar-thumb {
  background: rgba(165, 243, 252, 0.2);
  border-radius: 999px;
}

.sales-page .sales-cust-option {
  padding: 10px 14px;
  cursor: pointer;
  color: #b8d8f0;
  font-size: 13px;
  border-bottom: 1px solid rgba(165, 243, 252, 0.08);
  transition: background 120ms;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sales-page .sales-cust-option:last-child {
  border-bottom: none;
}

.sales-page .sales-cust-option:hover,
.sales-page .sales-cust-option.is-selected {
  background: rgba(20, 184, 166, 0.16);
  color: #e0f7f4;
}

.sales-page .sales-cust-walkin {
  color: rgba(165, 243, 252, 0.6);
  font-style: italic;
}

.sales-page .sales-cust-no-result {
  padding: 14px;
  text-align: center;
  color: rgba(165, 243, 252, 0.45);
  font-size: 12.5px;
}

/* ── Payment method tiles (panel, not checkout modal) ────── */
.sales-page .panel-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 7px;
  margin: 8px 0;
}

.sales-page .panel-payment-tile {
  height: 58px;
  border: 1px solid rgba(165, 243, 252, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(185, 215, 240, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
  position: relative;
  letter-spacing: 0.01em;
}

.sales-page .panel-payment-tile i {
  font-size: 15px;
}

.sales-page .panel-payment-tile:hover {
  border-color: rgba(20, 184, 166, 0.42);
  background: rgba(20, 184, 166, 0.1);
  color: #5eead4;
  transform: translateY(-1px);
}

.sales-page .panel-payment-tile.active {
  border-color: #14b8a6;
  background: rgba(20, 184, 166, 0.18);
  color: #5eead4;
  box-shadow: 0 6px 14px rgba(20, 184, 166, 0.2);
}

.sales-page .panel-payment-hotkey {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(20, 184, 166, 0.35);
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Pay-later extra fields ──────────────────────────────── */
.sales-page .panel-pay-later-fields {
  margin-bottom: 8px;
}

.sales-page .panel-pay-later-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.sales-page .panel-pay-later-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(165, 243, 252, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sales-page .panel-pay-later-input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(165, 243, 252, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: #e0f2ff;
  padding: 0 11px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 160ms, background 160ms, box-shadow 160ms;
}

.sales-page .panel-pay-later-input:focus {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}

.sales-page .panel-pay-later-hint {
  margin: 0;
  font-size: 11px;
  color: rgba(165, 243, 252, 0.48);
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}

/* ── Mobile money extra field ────────────────────────────── */
.sales-page #panelMobileMoneyFields .panel-pay-later-input {
  padding-left: 11px;
}

/* ── Held sale notification bar ─────────────────────────── */
.sales-page .sales-held-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid rgba(251, 197, 76, 0.32);
  background: rgba(251, 197, 76, 0.1);
  color: #fde68a;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.sales-page .sales-held-bar i {
  font-size: 13px;
  flex-shrink: 0;
}

.sales-page .sales-held-bar span {
  flex: 1;
}

.sales-page .sales-held-bar button {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(251, 197, 76, 0.4);
  background: rgba(251, 197, 76, 0.16);
  color: #fef9c3;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 130ms;
}

.sales-page .sales-held-bar button:hover {
  background: rgba(251, 197, 76, 0.3);
}

/* ── Order summary refinement ────────────────────────────── */
.sales-page .sales-summary {
  border-top: 1px solid rgba(165, 243, 252, 0.14);
  padding-top: 10px;
  margin-top: 10px;
}

.sales-page .sales-summary-neg {
  color: #86efac;
  font-size: 14px;
  font-weight: 600;
}

.sales-page .sales-summary-row.total span,
.sales-page .sales-summary-row.total strong {
  font-size: 22px;
}

/* ── Bottom: discount + charge ───────────────────────────── */
.sales-page .sales-panel-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.sales-page .panel-discount-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px solid rgba(165, 243, 252, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0 12px;
  gap: 4px;
  flex-shrink: 0;
  width: 90px;
  transition: border-color 160ms, background 160ms;
}

.sales-page .panel-discount-wrap:focus-within {
  border-color: rgba(20, 184, 166, 0.48);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.13);
}

.sales-page .panel-discount-pct-sym {
  font-size: 10px;
  color: rgba(165, 243, 252, 0.5);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.sales-page .panel-discount-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #e0f2ff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-align: right;
}

.sales-page .panel-discount-input::placeholder {
  color: rgba(165, 243, 252, 0.3);
}

.sales-page .panel-discount-input::-webkit-inner-spin-button,
.sales-page .panel-discount-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Charge button — premium teal gradient */
.sales-page .sales-charge-btn {
  flex: 1;
  min-width: 0;
  height: 50px;
  border-radius: 11px;
  background: linear-gradient(110deg, #0d6b62 0%, #0f766e 40%, #14b8a6 100%);
  box-shadow:
    0 10px 22px rgba(15, 118, 110, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: filter 150ms, transform 120ms, box-shadow 150ms;
}

.sales-page .sales-charge-btn:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    0 14px 26px rgba(15, 118, 110, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.sales-page .sales-charge-btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* ── Sale note input ─────────────────────────────────────── */
.sales-page .sales-note-hidden {
  display: block;
  width: 100%;
  height: 33px;
  border: 1px solid rgba(165, 243, 252, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(200, 224, 242, 0.78);
  padding: 0 10px;
  font-family: inherit;
  font-size: 12px;
  margin-top: 7px;
  outline: none;
  transition: border-color 160ms, background 160ms;
}

.sales-page .sales-note-hidden:focus {
  border-color: rgba(20, 184, 166, 0.42);
  background: rgba(255, 255, 255, 0.07);
}

.sales-page .sales-note-hidden::placeholder {
  color: rgba(165, 243, 252, 0.3);
}

/* ── Empty cart state ────────────────────────────────────── */
.sales-page .sales-empty-cart {
  border-color: rgba(165, 243, 252, 0.16);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  color: rgba(165, 200, 230, 0.55);
  font-size: 12.5px;
}

/* ── Cart item refinements ───────────────────────────────── */
.sales-page .sales-cart-item {
  border-color: rgba(165, 243, 252, 0.14);
  border-radius: 10px;
  background: rgba(14, 36, 58, 0.45);
  padding: 9px 10px;
}

.sales-page .sales-cart-item-name {
  font-size: 13.5px;
  font-weight: 700;
}

.sales-page .sales-cart-item-price {
  font-size: 11.5px;
  color: rgba(165, 200, 230, 0.65);
}

.sales-page .sales-cart-line-total {
  font-size: 15px;
  color: #fbbf24;
}

/* ── Pagination ──────────────────────────────────────────── */
.sales-page .sales-products-pagination {
  border-top-color: rgba(195, 215, 232, 0.4);
  margin-top: 10px;
  padding-top: 8px;
}

.sales-page .sales-page-btn {
  border-color: #c8d8e8;
  font-size: 12px;
}

.sales-page .sales-page-btn:hover {
  border-color: #0f766e;
  color: #0f766e;
}

/* ═══════════════════════════════════════════════════════════
   SHARED CONFIRM / DANGER DIALOG BODY  (dlg-confirm-*)
   Used by: delete, restore, logout, and all simple confirms
   ═══════════════════════════════════════════════════════════ */

/* Narrow modal for simple confirms */
.modal.modal-confirm {
  width: min(97vw, 440px);
  max-width: 440px;
}

.dlg-confirm {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px 18px;
}

.dlg-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.dlg-icon--danger  { background: #fee2e2; color: #dc2626; }
.dlg-icon--warning { background: #fef3c7; color: #d97706; }
.dlg-icon--success { background: #dcfce7; color: #16a34a; }
.dlg-icon--info    { background: #dbeafe; color: #2563eb; }

.dlg-confirm-content {
  flex: 1;
  min-width: 0;
}

.dlg-confirm-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #0c2340;
  margin-bottom: 6px;
  line-height: 1.3;
}

.dlg-confirm-content p {
  margin: 0 0 5px;
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}

.dlg-confirm-content p:last-child { margin-bottom: 0; }

.dlg-confirm-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 5px;
  background: #ecf4ff;
  border: 1px solid #d3e1f0;
  color: #0f5f8f;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.02em;
}

.dlg-confirm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 7px;
}

.dlg-badge--danger   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.dlg-badge--warning  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.dlg-badge--success  { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.dlg-badge--recoverable { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* Form body for confirm dialogs that have inputs below the dlg-confirm block */
.dlg-confirm-form-body {
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dlg-confirm-form-body label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f607d;
  margin-bottom: 5px;
}

.dlg-confirm-form-body input[type="text"],
.dlg-confirm-form-body input[type="number"],
.dlg-confirm-form-body select {
  width: 100%;
  height: 42px;
  border: 1px solid #bed1e4;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1f2937;
  transition: border-color 150ms, box-shadow 150ms;
}

.dlg-confirm-form-body input:focus,
.dlg-confirm-form-body select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.dlg-confirm-preview-note {
  padding: 8px 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.5;
}

/* Dark mode */
[data-theme="dark"] .dlg-confirm-title { color: #c8d8e8 !important; }
[data-theme="dark"] .dlg-confirm-content p { color: #6a8eaa !important; }
[data-theme="dark"] .dlg-icon--danger  { background: #2a0808 !important; color: #f87171 !important; }
[data-theme="dark"] .dlg-icon--warning { background: #1c1505 !important; color: #fbbf24 !important; }
[data-theme="dark"] .dlg-icon--success { background: #051a0e !important; color: #4ade80 !important; }
[data-theme="dark"] .dlg-icon--info    { background: #0e1826 !important; color: #60a5fa !important; }
[data-theme="dark"] .dlg-confirm-ref {
  background: #162030 !important; border-color: #243a50 !important; color: #60a5fa !important;
}
[data-theme="dark"] .dlg-badge--danger      { background: #1a0505 !important; color: #fca5a5 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .dlg-badge--warning     { background: #1c1505 !important; color: #fbbf24 !important; border-color: #4a3010 !important; }
[data-theme="dark"] .dlg-badge--success,
[data-theme="dark"] .dlg-badge--recoverable { background: #051a0e !important; color: #4ade80 !important; border-color: #0f3520 !important; }
[data-theme="dark"] .dlg-confirm-form-body input,
[data-theme="dark"] .dlg-confirm-form-body select {
  background: #141f2e !important; border-color: #1e3048 !important; color: #c8d8e8 !important;
}
[data-theme="dark"] .dlg-confirm-form-body label { color: #5d7d98 !important; }
[data-theme="dark"] .dlg-confirm-preview-note {
  background: #1c1505 !important; border-color: #4a3010 !important; color: #fbbf24 !important;
}

/* Logo-matched professional report dashboard override */
.report-redesign-page {
  --report-green-900: #0c2d4a;
  --report-green-800: #1b4a6e;
  --report-green-700: #31758f;
  --report-green-500: #4e90a7;
  --report-lime-400: #f59e00;
  --report-bg: #f3f4f6;
  --report-card: #ffffff;
  --report-line: #d6e0e6;
  --report-text: #0f3554;
  --report-soft-text: #4f6474;
  background: radial-gradient(
    circle at top right,
    #eef4f8 0%,
    #f8f7f3 44%,
    #f2f3f5 100%
  );
  border-radius: 20px;
  border: 1px solid #d6e0e6;
  padding: 20px;
}

.report-redesign-page .report-headline-row {
  background: linear-gradient(120deg, #fafdff 0%, #eef6fb 54%, #fff7eb 100%);
  border: 1px solid #d9e3ea;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 16px 34px rgba(12, 45, 74, 0.09);
}

.report-redesign-page .report-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #d9e4ea;
  margin-bottom: 0;
}

.report-redesign-page .report-brand-logo {
  width: 64px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d9e4ea;
  padding: 2px;
}

.report-redesign-page .report-brand-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--report-green-900);
}

.report-redesign-page .report-eyebrow {
  color: var(--report-green-800);
  background: #e9f2f8;
  border: 1px solid #cfdee8;
  margin-bottom: 0;
}

.report-redesign-page .page-info h2 {
  color: #103b5c;
}

.report-redesign-page .page-info p,
.report-redesign-page .report-period-note {
  color: var(--report-soft-text);
}

.report-redesign-page .report-toolbar .btn {
  border-color: #cfdde7;
  color: #16486f;
  background: #f8fbfd;
}

.report-redesign-page .report-toolbar .btn:hover {
  border-color: #9ab7cd;
  background: #ecf4fa;
}

.report-redesign-page .report-time-filter {
  background: #edf5fa;
  border: 1px solid #d3e1eb;
}

.report-redesign-page .report-time-filter a.active {
  background: linear-gradient(135deg, #0c2d4a, #31758f);
}

.report-redesign-page .report-snapshot-card,
.report-redesign-page .report-kpi-card,
.report-redesign-page .report-card-shell {
  background: var(--report-card);
  border: 1px solid var(--report-line);
  box-shadow: 0 14px 28px rgba(12, 45, 74, 0.08);
}

.report-redesign-page .report-snapshot-card .label,
.report-redesign-page .report-kpi-card span {
  color: #617386;
}

.report-redesign-page .report-kpi-card strong,
.report-redesign-page .report-snapshot-card strong,
.report-redesign-page .report-card-shell h3 {
  color: var(--report-text);
}

.report-redesign-page .report-visual-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(280px, 1fr);
  gap: 16px;
  margin: 16px 0;
}

.report-redesign-page .report-pie-layout {
  display: grid;
  grid-template-columns: minmax(170px, 200px) 1fr;
  gap: 14px;
  align-items: center;
}

.report-redesign-page .report-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.report-redesign-page .report-pie-chart {
  --pie-gradient: conic-gradient(#31758f 0% 100%);
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: var(--pie-gradient);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.54),
    0 10px 20px rgba(12, 45, 74, 0.15);
}

.report-redesign-page .report-pie-chart::after {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  background: #f8fbfd;
  box-shadow: inset 0 0 0 1px #d7e2e9;
}

.report-redesign-page .report-pie-wrap strong {
  color: #0f3554;
  font-size: 16px;
}

.report-redesign-page .report-pie-wrap small {
  color: #66798b;
}

.report-redesign-page .report-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-redesign-page .report-pie-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #2a4c68;
}

.report-redesign-page .report-pie-legend-row .legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.report-redesign-page .report-gauge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.report-redesign-page .report-gauge-item {
  border-radius: 14px;
  border: 1px solid #d8e3ea;
  background: linear-gradient(180deg, #fcfeff 0%, #f2f7fb 100%);
  padding: 10px 8px;
  text-align: center;
}

.report-redesign-page .report-gauge-ring {
  --value: 0;
  width: 78px;
  height: 78px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: conic-gradient(
    var(--report-lime-400) calc(var(--value) * 1%),
    #dbe5ec 0
  );
  position: relative;
}

.report-redesign-page .report-gauge-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d8e3ea;
}

.report-redesign-page .report-gauge-item strong {
  display: block;
  color: #103c5e;
  font-size: 18px;
}

.report-redesign-page .report-gauge-item span {
  display: block;
  color: #2f5575;
  font-weight: 700;
  font-size: 11px;
}

.report-redesign-page .report-gauge-item small {
  color: #6e8091;
  font-size: 10px;
}

.report-redesign-page .report-day-chart,
.report-redesign-page .report-hour-chart {
  background: linear-gradient(180deg, #fbfdff 0%, #f0f5f9 100%);
  border: 1px solid #d8e2e9;
}

.report-redesign-page .report-day-bars .bar.revenue,
.report-redesign-page .report-hour-bar-group .hour-bar,
.report-redesign-page .payment-track span,
.report-redesign-page .top-track span {
  background: linear-gradient(180deg, #31758f 0%, #f59e00 100%);
}

.report-redesign-page .report-day-bars .bar.profit {
  background: linear-gradient(180deg, #0c2d4a 0%, #4e90a7 100%);
}

.report-redesign-page .report-legend .dot.revenue,
.report-redesign-page .report-legend .dot.profit {
  box-shadow: none;
}

.report-redesign-page .report-mini-table thead th {
  background: #f0f6fb;
  color: #1d4a6c;
  border-bottom-color: #d8e3ea;
}

.report-redesign-page .report-mini-table tbody tr:hover {
  background: #f6fafd;
}

@media (max-width: 980px) {
  .report-redesign-page .report-visual-grid {
    grid-template-columns: 1fr;
  }

  .report-redesign-page .report-pie-layout {
    grid-template-columns: 1fr;
  }

  .report-redesign-page .report-pie-wrap {
    align-items: flex-start;
  }

  .report-redesign-page .report-gauge-grid {
    grid-template-columns: repeat(3, minmax(82px, 1fr));
  }
}

@media (max-width: 680px) {
  .report-redesign-page {
    padding: 14px;
    border-radius: 14px;
  }

  .report-redesign-page .report-headline-row {
    padding: 12px;
  }

  .report-redesign-page .report-gauge-grid {
    grid-template-columns: 1fr;
  }

  .report-redesign-page .report-pie-chart {
    width: 140px;
    height: 140px;
  }
}

/* Premium classic report pass: final override layer */
.reports-page .report-redesign-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(177, 140, 64, 0.12), transparent 34%),
    radial-gradient(
      circle at 100% 100%,
      rgba(19, 55, 84, 0.12),
      transparent 40%
    ),
    linear-gradient(165deg, #f5f7fa 0%, #eef2f6 100%);
  border: 1px solid #cad5df;
  border-radius: 24px;
  padding: 24px;
  gap: 20px;
}

.reports-page .report-headline-row {
  border: 1px solid #c7d4e0;
  border-radius: 18px;
  background: linear-gradient(130deg, #ffffff 0%, #f2f7fc 65%, #f8f4ea 100%);
  box-shadow: 0 16px 34px rgba(10, 33, 54, 0.1);
  padding: 18px 20px;
}

.reports-page .report-headline-row .page-info h2 {
  font-size: clamp(24px, 2vw, 30px);
  letter-spacing: 0.01em;
}

.reports-page .report-snapshot-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.reports-page .report-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.reports-page .report-kpi-card,
.reports-page .report-snapshot-card,
.reports-page .report-card-shell {
  border-radius: 16px;
  border: 1px solid #cfd9e3;
  box-shadow: 0 10px 24px rgba(10, 33, 54, 0.08);
}

.reports-page .report-kpi-card {
  min-height: 122px;
  justify-content: center;
  background: linear-gradient(150deg, #ffffff 0%, #f8fbff 100%);
}

.reports-page .report-kpi-card span {
  font-size: 12px;
  letter-spacing: 0.01em;
}

.reports-page .report-kpi-card strong {
  font-size: clamp(27px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.reports-page .report-card-shell h3 {
  font-size: 15px;
  letter-spacing: 0.08em;
  border-bottom-color: #d9e2ea;
  padding-bottom: 11px;
}

.reports-page .report-visual-grid {
  grid-template-columns: minmax(380px, 1.25fr) minmax(330px, 1fr);
  gap: 14px;
}

.reports-page .report-day-chart,
.reports-page .report-hour-chart {
  min-height: 230px;
  border: 1px solid #d8e2eb;
  border-radius: 12px;
  padding: 14px 12px 8px;
  overflow-x: auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
}

.reports-page .report-day-bar-group,
.reports-page .report-hour-bar-group {
  min-width: 28px;
}

.reports-page .report-day-bar-group small,
.reports-page .report-hour-bar-group small {
  font-size: 10px;
  white-space: nowrap;
}

.reports-page .loss-investigation-shell {
  border-color: #b9cddd;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(247, 251, 255, 0.98) 100%
  );
}

.reports-page .loss-kpi-grid {
  margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.reports-page .loss-checklist-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.reports-page .loss-checklist-table thead th {
  background: #eef4fa;
  color: #173a58;
  border-bottom: 1px solid #d3dee8;
}

.reports-page .loss-checklist-table tbody td {
  vertical-align: middle;
  line-height: 1.45;
  color: #3f5367;
}

.reports-page .loss-checklist-table tbody tr:nth-child(even) {
  background: #f9fcff;
}

.reports-page .loss-checklist-table tbody tr:hover {
  background: #f3f8fd;
}

.reports-page .loss-checklist-table td:first-child {
  font-size: 18px;
  color: #173853;
}

.reports-page .loss-checklist-table td:last-child .btn {
  min-height: 38px;
  border-radius: 10px;
  border-color: #b9ccdc;
  background: linear-gradient(145deg, #ffffff 0%, #eff6fd 100%);
  color: #18486e;
  font-weight: 700;
}

.reports-page .loss-checklist-table td:last-child .btn:hover {
  border-color: #8fabbe;
  background: linear-gradient(145deg, #f8fbff 0%, #e6f0fa 100%);
}

@media (max-width: 1120px) {
  .reports-page .report-visual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .reports-page .report-redesign-page {
    padding: 14px;
    border-radius: 16px;
  }

  .reports-page .report-snapshot-grid,
  .reports-page .report-kpi-grid,
  .reports-page .report-half-grid {
    grid-template-columns: 1fr;
  }

  .reports-page .loss-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-page .loss-checklist-table,
  .reports-page .loss-checklist-table thead,
  .reports-page .loss-checklist-table tbody,
  .reports-page .loss-checklist-table tr,
  .reports-page .loss-checklist-table th,
  .reports-page .loss-checklist-table td {
    display: block;
    width: 100%;
  }

  .reports-page .loss-checklist-table thead {
    display: none;
  }

  .reports-page .loss-checklist-table tbody tr {
    border: 1px solid #d7e2ec;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fbfdff;
  }

  .reports-page .loss-checklist-table tbody td {
    border: 0;
    padding: 6px 4px;
  }
}

/* Luxury typography + classic monochrome with gold accents */
.reports-page .report-redesign-page {
  --lux-ink: #13293d;
  --lux-muted: #5b6774;
  --lux-line: #c7d0da;
  --lux-surface: #ffffff;
  --lux-gold: #b88a2f;
  --lux-navy: #1b3953;
  --lux-navy-soft: #2b4f6e;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(184, 138, 47, 0.12),
      transparent 36%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(27, 57, 83, 0.11),
      transparent 42%
    ),
    linear-gradient(162deg, #f4f6f8 0%, #edf1f5 100%);
  border-color: #c8d1db;
}

.reports-page .report-redesign-page .report-brand-name,
.reports-page .report-redesign-page .page-info h2,
.reports-page .report-redesign-page .report-card-shell h3,
.reports-page .report-redesign-page .report-kpi-card strong,
.reports-page .report-redesign-page .report-snapshot-card strong {
  color: var(--lux-ink);
}

.reports-page .report-redesign-page .page-info h2,
.reports-page .report-redesign-page .report-card-shell h3,
.reports-page .report-redesign-page .loss-investigation-shell h3 {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.reports-page .report-redesign-page .report-brand-name,
.reports-page .report-redesign-page .report-period-note strong {
  letter-spacing: 0.08em;
}

.reports-page .report-redesign-page .page-info p,
.reports-page .report-redesign-page .report-period-note,
.reports-page .report-redesign-page .report-kpi-card span,
.reports-page .report-redesign-page .report-kpi-card small,
.reports-page .report-redesign-page .report-snapshot-card small {
  color: var(--lux-muted);
}

.reports-page .report-redesign-page .report-time-filter a.active {
  background: linear-gradient(
    135deg,
    var(--lux-navy) 0%,
    var(--lux-navy-soft) 100%
  );
}

.reports-page .report-redesign-page .report-card-shell h3 {
  position: relative;
}

.reports-page .report-redesign-page .report-card-shell h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-navy), var(--lux-gold));
}

.reports-page .report-redesign-page .report-kpi-card::after {
  background: linear-gradient(180deg, var(--lux-navy) 0%, var(--lux-gold) 100%);
}

.reports-page .report-redesign-page .report-day-bars .bar.revenue,
.reports-page .report-redesign-page .report-hour-bar-group .hour-bar,
.reports-page .report-redesign-page .payment-track span,
.reports-page .report-redesign-page .top-track span {
  background: linear-gradient(180deg, #476581 0%, var(--lux-navy) 100%);
}

.reports-page .report-redesign-page .report-day-bars .bar.profit {
  background: linear-gradient(180deg, #e0be7a 0%, var(--lux-gold) 100%);
}

.reports-page .report-redesign-page .report-gauge-grid {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.reports-page .report-redesign-page .report-gauge-item {
  min-height: 176px;
  height: 176px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 4px;
  padding: 12px 10px;
}

.reports-page .report-redesign-page .report-gauge-item strong {
  line-height: 1.05;
  min-height: 26px;
}

.reports-page .report-redesign-page .report-gauge-item span {
  line-height: 1.2;
  min-height: 28px;
}

.reports-page .report-redesign-page .report-gauge-item small {
  line-height: 1.15;
  min-height: 24px;
}

.reports-page .report-kpi-card strong {
  font-size: clamp(22px, 1.7vw, 30px);
  letter-spacing: -0.02em;
}

.reports-page .loss-kpi-grid .report-kpi-card strong {
  font-size: clamp(20px, 1.5vw, 26px);
  letter-spacing: -0.01em;
}

.reports-page .report-legend {
  margin-top: 8px;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
}

.reports-page .report-legend span {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef3f7;
  border: 1px solid #d5dee7;
  color: #37516b;
}

.reports-page .report-day-chart,
.reports-page .report-hour-chart {
  grid-template-columns: none;
  grid-auto-columns: minmax(44px, 44px);
  justify-content: start;
}

.reports-page .report-day-bar-group,
.reports-page .report-hour-bar-group {
  min-width: 44px;
}

.reports-page .report-day-bars {
  max-width: 44px;
}

.reports-page .loss-investigation-shell {
  border-color: #becad6;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
}

.reports-page .loss-checklist-table thead th {
  background: #ecf1f6;
  border-bottom-color: #d4dde6;
  color: #27445f;
}

.reports-page .loss-checklist-table tbody td {
  color: #4a5d71;
}

.reports-page .loss-checklist-table td:first-child {
  font-size: 14px;
  line-height: 1.45;
  color: #1f3b54;
}

.reports-page .loss-checklist-table td:last-child .btn {
  border-color: #c5d1dd;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  color: #1d3f5d;
}

.reports-page .loss-checklist-table td:last-child .btn:hover {
  border-color: #9fb2c5;
  background: linear-gradient(145deg, #fbfdff 0%, #e9eff5 100%);
}

@media (max-width: 860px) {
  .reports-page .report-kpi-card strong {
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.12;
  }

  .reports-page .report-redesign-page .report-gauge-grid {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 10px;
  }

  .reports-page .report-redesign-page .report-gauge-item {
    min-height: 162px;
    height: 162px;
    padding: 10px 8px;
  }

  .reports-page .report-day-chart,
  .reports-page .report-hour-chart {
    grid-auto-columns: minmax(36px, 36px);
  }

  .reports-page .report-day-bar-group,
  .reports-page .report-hour-bar-group {
    min-width: 36px;
  }
}

@media (max-width: 560px) {
  .reports-page .loss-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-page .loss-kpi-grid .report-kpi-card strong {
    font-size: clamp(14px, 3.6vw, 17px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .reports-page .loss-kpi-grid .report-kpi-card {
    min-height: 0;
  }

  .reports-page .report-redesign-page .report-gauge-grid {
    grid-template-columns: 1fr;
  }

  .reports-page .report-redesign-page .report-gauge-item {
    min-height: 156px;
    height: auto;
  }
}

/* ============================================
   DARK MODE THEME
   ============================================ */

/* Override inventory page shell variables */
[data-theme="dark"] .inventory-page-shell,
[data-theme="dark"] .customers-page-shell {
  --inv-ink: #dde8f4;
  --inv-navy: #8aaec8;
  --inv-border: #243550;
  --inv-border-strong: #2b3f5c;
  --inv-surface: rgba(22, 32, 47, 0.98);
  --inv-surface-soft: rgba(20, 31, 46, 0.95);
  --inv-shadow: 0 22px 36px rgba(0, 0, 0, 0.4);
  background: linear-gradient(150deg, #101c2c 0%, #0f1823 100%) !important;
  border-color: #243550 !important;
}

/* Inventory KPI cards */
[data-theme="dark"] .inventory-kpi-card {
  background: #1a2636 !important;
  border-color: #243550 !important;
}

[data-theme="dark"] .inventory-kpi-card span {
  color: #5d7d98 !important;
}

[data-theme="dark"] .inventory-kpi-card strong {
  color: #dde8f4 !important;
}

[data-theme="dark"] .inventory-kpi-card.warning strong {
  color: #fbbf24 !important;
}

[data-theme="dark"] .inventory-kpi-card.success strong {
  color: #34d399 !important;
}

[data-theme="dark"] {
  --bg-main: #0f1823;
  --bg-main-gradient: linear-gradient(145deg, #0d1720 0%, #111c29 50%, #0f1823 100%);
  --panel-bg: #1a2636;
  --text-primary: #dde8f4;
  --text-secondary: #8aaec8;
  --text-muted: #5d7d98;
  --border-color: #243550;
  --border-light: rgba(255, 255, 255, 0.06);
  --gray-50: #141f2e;
  --gray-100: #1a2636;
  --gray-200: #202f48;
  --gray-300: #2b3f5c;
  --gray-400: #3d5570;
  --gray-500: #557090;
  --gray-600: #7598b8;
  --gray-700: #a0bcd8;
  --gray-800: #c5d8ee;
  --gray-900: #e0eeff;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.38), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.42), 0 4px 8px rgba(0,0,0,0.28);
  --shadow-xl: 0 24px 50px rgba(0,0,0,0.48), 0 8px 16px rgba(0,0,0,0.32);
}

/* Panel & card backgrounds */
[data-theme="dark"] .panel,
[data-theme="dark"] .dashboard-panel {
  background: linear-gradient(160deg, #1a2636 0%, #16202f 100%);
  border-color: var(--border-color);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .dashboard-kpi-grid .stat-card {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}

[data-theme="dark"] .stat-card h2,
[data-theme="dark"] .stat-card p,
[data-theme="dark"] .stat-card > div strong {
  color: var(--text-primary) !important;
}

/* Content area */
[data-theme="dark"] .content {
  background: var(--bg-main-gradient);
}

/* Tables */
[data-theme="dark"] .data-table {
  background: var(--panel-bg);
}

[data-theme="dark"] .data-table thead th {
  background: #16202f !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .data-table tbody tr {
  background: var(--panel-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .data-table tbody tr:nth-child(even) {
  background: #162230 !important;
}

[data-theme="dark"] .data-table tbody tr:hover {
  background: #1e2f44 !important;
}

[data-theme="dark"] .data-table td,
[data-theme="dark"] .data-table th {
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Table wrappers */
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .panel-table-wrapper {
  background: var(--panel-bg);
  border-color: var(--border-color);
}

/* Forms & inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #16202f !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Modals */
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal-content {
  background: #16202f !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-header {
  background: linear-gradient(140deg, #1e2f44 0%, #16222f 100%) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-body {
  background: #16202f !important;
}

[data-theme="dark"] .modal-footer {
  background: #141d2b !important;
  border-color: var(--border-color) !important;
}

/* Buttons in light context */
[data-theme="dark"] .pill:not(.primary),
[data-theme="dark"] .icon-btn {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .pill:not(.primary):hover,
[data-theme="dark"] .icon-btn:hover {
  background: #253a52 !important;
  color: var(--text-primary) !important;
}

/* Warnings / banners */
[data-theme="dark"] .db-warning {
  background: #2a1f10 !important;
  border-color: #4a3010 !important;
  color: #e8c87a !important;
}

[data-theme="dark"] .setup-check {
  background: #16202f !important;
  border-color: var(--border-color) !important;
}

/* Page header & content header */
[data-theme="dark"] .page-header,
[data-theme="dark"] .content-header {
  background: transparent !important;
}

[data-theme="dark"] .content-header h2,
[data-theme="dark"] .page-header h2 {
  color: var(--text-primary) !important;
}

/* Inventory / customer topbar area */
[data-theme="dark"] .inv-topbar {
  border-color: var(--border-color) !important;
}

/* Sales insights shell */
[data-theme="dark"] .sales-insights-shell {
  background: linear-gradient(145deg, #16222f 0%, #1a2838 100%) !important;
  border-color: var(--border-color) !important;
}

/* Sidebar is already dark — keep it unchanged */

/* Theme toggle button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 15px;
  color: #c7e2ff;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffd700;
  transform: scale(1.08);
}

[data-theme="dark"] .theme-toggle-btn {
  border-color: rgba(201, 149, 10, 0.4);
  background: rgba(201, 149, 10, 0.12);
  color: #f5c842;
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(201, 149, 10, 0.22);
  color: #ffd700;
}

/* Dark mode overrides for pages with hardcoded light styles */
[data-theme="dark"] .sales-insights-shell .sales-insight-card {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .badge {
  background: var(--danger) !important;
}

[data-theme="dark"] hr {
  border-color: var(--border-color);
}

/* ── DASHBOARD: sales insights shell inner elements ── */
[data-theme="dark"] .sales-insight-card span { color: #8aaec8 !important; }
[data-theme="dark"] .sales-insight-card strong { color: #dde8f4 !important; }
[data-theme="dark"] .sales-insight-note { color: #8aaec8 !important; }
[data-theme="dark"] .sales-insight-track-label { color: #8aaec8 !important; }
[data-theme="dark"] .sales-insight-track-bar { background: #1e3050 !important; }
[data-theme="dark"] .sales-insight-track-value { color: #8aaec8 !important; }
[data-theme="dark"] .sales-mix-head h4 { color: #dde8f4 !important; }
[data-theme="dark"] .sales-mix-head span { color: #5d7d98 !important; }
[data-theme="dark"] .sales-mix-legend-label { color: #8aaec8 !important; }
[data-theme="dark"] .sales-mix-legend-value { color: #8aaec8 !important; }
[data-theme="dark"] .sales-mix-shell { border-top-color: #243550 !important; }

/* ── DASHBOARD: debt reminder section ── */
[data-theme="dark"] .debt-reminder-center {
  background: linear-gradient(160deg, #141f2e 0%, #111c29 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-reminder-chip {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #34d399 !important;
}
[data-theme="dark"] .debt-reminder-notes li {
  background: #1a2636 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-reminder-card {
  background: #1a2636 !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-reminder-card-top strong { color: #dde8f4 !important; }
[data-theme="dark"] .debt-reminder-card-top span {
  background: #2a1a08 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .debt-reminder-card p { color: #8aaec8 !important; }
[data-theme="dark"] .debt-reminder-card p strong { color: #f87171 !important; }
[data-theme="dark"] .debt-reminder-empty {
  background: rgba(22,32,47,.7) !important;
  border-color: #243550 !important;
  color: #5d7d98 !important;
}
[data-theme="dark"] .debt-reminder-dismiss {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}

/* ── DASHBOARD: db-warning .hint ── */
[data-theme="dark"] .db-warning .hint { color: #e8c87a !important; }

/* ── REPORTS: remaining gaps ── */
[data-theme="dark"] .report-kpi-card small { color: #5d7d98 !important; }
[data-theme="dark"] .report-period-note { color: #8aaec8 !important; }
[data-theme="dark"] .report-period-sep { color: #5d7d98 !important; }
[data-theme="dark"] .report-eyebrow {
  background: #162538 !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .report-snapshot-card small { color: #5d7d98 !important; }
[data-theme="dark"] .report-payment-row small { color: #5d7d98 !important; }
[data-theme="dark"] .top-values small { color: #5d7d98 !important; }

/* ── SALES POS PAGE ── */
[data-theme="dark"] .sales-page { background: #0f1823 !important; }
[data-theme="dark"] .sales-pos-shell {
  background: linear-gradient(150deg, #101c2c 0%, #0f1823 100%) !important;
}
[data-theme="dark"] .sales-products-panel {
  background: rgba(22,32,47,.9) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .sales-products-header h3 { color: #dde8f4 !important; }
[data-theme="dark"] .sales-products-header p { color: #8aaec8 !important; }
[data-theme="dark"] .sales-products-stats span {
  background: #162538 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .sales-category-row {
  background: linear-gradient(180deg, #141f2e 0%, #111c29 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .sales-category-meta p { color: #8aaec8 !important; }
[data-theme="dark"] .sales-category-meta small { color: #5d7d98 !important; }
[data-theme="dark"] .sales-chip {
  background: linear-gradient(180deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .sales-product-card {
  background: linear-gradient(170deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .sales-product-card strong { color: #dde8f4 !important; }
[data-theme="dark"] .sales-product-category {
  background: #162538 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .sales-product-stock { color: #5d7d98 !important; }
[data-theme="dark"] .sales-no-result {
  background: #141f2e !important;
  border-color: #243550 !important;
  color: #5d7d98 !important;
}
[data-theme="dark"] .sales-products-pagination { border-top-color: #243550 !important; }
[data-theme="dark"] .sales-page-btn {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .sales-page-meta { color: #8aaec8 !important; }

/* ── Sales page premium panel — dark mode ─────────────── */
[data-theme="dark"] .sales-page .sales-products-header {
  border-bottom-color: #243550 !important;
}
[data-theme="dark"] .sales-page .sales-products-header h3 {
  color: #dde8f4 !important;
}
[data-theme="dark"] .sales-page .sales-product-icon {
  background: linear-gradient(135deg, #162538 0%, #0f1d2e 100%) !important;
  color: #2dd4bf !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .sales-page .sales-product-card strong {
  color: #d4e8f8 !important;
}
[data-theme="dark"] .sales-page .sales-product-price {
  color: #2dd4bf !important;
}
[data-theme="dark"] .sales-page .sales-product-category {
  background: #0d1e2e !important;
  border-color: #1e3048 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .sales-page .sales-products-stats span {
  background: #0d1e2e !important;
  border-color: #1e3048 !important;
  color: #60a5fa !important;
}

/* ── EXPENSES / EMPLOYEES / DELIVERIES / GENERAL PAGES ── */
[data-theme="dark"] .page-info h2 { color: #dde8f4 !important; }
[data-theme="dark"] .table-header {
  background: rgba(20,31,46,.92) !important;
  border-color: #1e3050 !important;
}
[data-theme="dark"] .users-page .data-table td:last-child .btn-icon {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}

/* ── MODALS: panel-header span badge backgrounds ── */
[data-theme="dark"] [class*="-panel-header"] span {
  background: #162538 !important;
  border-color: #243550 !important;
}

/* ── MODALS: grids ending in -grid (not -editor-grid) ── */
[data-theme="dark"] .invoice-details-meta-grid,
[data-theme="dark"] .user-role-editor-grid,
[data-theme="dark"] .user-add-editor-grid,
[data-theme="dark"] .user-permissions-grid,
[data-theme="dark"] .user-password-editor-grid,
[data-theme="dark"] [class$="-meta-grid"],
[data-theme="dark"] [class$="-details-grid"] {
  background: #1a2636 !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .user-status-message {
  background: #1a2636 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}

/* ── SETTINGS PAGE ── */
[data-theme="dark"] .settings-hero {
  background: linear-gradient(125deg, #141f2e 0%, #111c29 55%, #101c2c 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .settings-hero h3 { color: #dde8f4 !important; }
[data-theme="dark"] .settings-hero p { color: #8aaec8 !important; }
[data-theme="dark"] .settings-security-indicator {
  background: linear-gradient(145deg, #141f2e 0%, #111c29 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .settings-security-indicator-main h4 { color: #dde8f4 !important; }
[data-theme="dark"] .settings-security-indicator-main p { color: #8aaec8 !important; }
[data-theme="dark"] .settings-security-counts { color: #8aaec8 !important; }
[data-theme="dark"] .settings-note { color: #5d7d98 !important; }

/* ── COMING SOON ── */
[data-theme="dark"] .coming-soon-box {
  background: #1a2636 !important;
  border-color: #243550 !important;
}

/* Scrollbar in dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f1823;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2b3f5c;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3d5570;
}

/* ── REPORTS: override ALL report CSS variables (old + redesign sets) ── */
[data-theme="dark"] .reports-page {
  --report-ink: #dde8f4;
  --report-muted: #5d7d98;
  --report-accent: #7aaed4;
  --report-border: #243550;
  --report-card-bg: #1a2636;
  --report-accent-soft: #162538;
  --report-success: #34d399;
}

[data-theme="dark"] .report-redesign-page {
  --report-card: #1a2636;
  --report-line: #243550;
  --report-text: #dde8f4;
  --report-soft-text: #8aaec8;
  --report-bg: #0f1823;
  background: radial-gradient(circle at top right, #141f2e 0%, #111c29 44%, #0f1823 100%) !important;
  border-color: #243550 !important;
}

/* KPI & snapshot card backgrounds — hardcoded white overrides the variable */
[data-theme="dark"] .reports-page .report-kpi-card,
[data-theme="dark"] .reports-page .report-snapshot-card,
[data-theme="dark"] .reports-page .report-card-shell,
[data-theme="dark"] .report-kpi-card,
[data-theme="dark"] .report-snapshot-card,
[data-theme="dark"] .report-card-shell {
  background: linear-gradient(150deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
}

/* Card label (span) and value (strong) — hardcoded colors */
[data-theme="dark"] .reports-page .report-kpi-card span,
[data-theme="dark"] .report-redesign-page .report-kpi-card span,
[data-theme="dark"] .report-redesign-page .report-snapshot-card .label {
  color: #8aaec8 !important;
}
[data-theme="dark"] .reports-page .report-kpi-card strong,
[data-theme="dark"] .reports-page .report-snapshot-card strong,
[data-theme="dark"] .report-redesign-page .report-kpi-card strong,
[data-theme="dark"] .report-redesign-page .report-snapshot-card strong,
[data-theme="dark"] .reports-page .report-card-shell h3 {
  color: #dde8f4 !important;
}
[data-theme="dark"] .reports-page .report-kpi-card small,
[data-theme="dark"] .report-redesign-page .report-kpi-card small,
[data-theme="dark"] .report-redesign-page .report-snapshot-card small {
  color: #5d7d98 !important;
}

/* Report headline row */
[data-theme="dark"] .reports-page .report-headline-row,
[data-theme="dark"] .report-redesign-page .report-headline-row {
  background: linear-gradient(120deg, #1a2636 0%, #16202f 54%, #1e2f44 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .reports-page .report-headline-row .page-info h2 { color: #dde8f4 !important; }
[data-theme="dark"] .reports-page .report-headline-row .page-info p { color: #8aaec8 !important; }

/* Report card shell h3 border */
[data-theme="dark"] .reports-page .report-card-shell h3 { border-bottom-color: #243550 !important; }

/* Toolbar and time-filter */
[data-theme="dark"] .reports-page .report-toolbar .btn {
  background: linear-gradient(145deg, #1e2f44 0%, #16202f 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .reports-page .report-time-filter {
  background: #16202f !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .reports-page .report-time-filter button,
[data-theme="dark"] .reports-page .report-time-filter a { color: #8aaec8 !important; }

/* Pie chart donut hole */
[data-theme="dark"] .report-redesign-page .report-pie-chart::after {
  background: #1a2636 !important;
  border-color: #243550 !important;
}

/* ── COMPREHENSIVE DARK MODE FIXES ── */

/* Override dashboard-page CSS variables so all var(--dash-*) elements update automatically */
[data-theme="dark"] .dashboard-page {
  --dash-border: #243550;
  --dash-surface: rgba(22, 32, 47, 0.94);
  --dash-surface-2: rgba(20, 29, 43, 0.96);
  --dash-shadow: 0 20px 38px rgba(0, 0, 0, 0.38);
  background: linear-gradient(148deg, #0d1720 0%, #111c29 52%, #0f1823 100%) !important;
}

/* Dashboard panel headers — hardcoded #14202e color */
[data-theme="dark"] .dashboard-panel .panel-header h3,
[data-theme="dark"] .panel-header h3,
[data-theme="dark"] .dashboard-welcome,
[data-theme="dark"] .dashboard-quick-actions button {
  color: var(--text-primary) !important;
}

/* Sales checkout total */
[data-theme="dark"] .sales-checkout-summary .total {
  color: var(--text-primary) !important;
  border-top-color: var(--border-color) !important;
}

/* Modal panel headers and hero h4 titles that use #14202e */
[data-theme="dark"] [class$="-panel-header"] h5,
[data-theme="dark"] [class$="-panel-header"] span,
[data-theme="dark"] [class*="-panel-header"] h5,
[data-theme="dark"] [class*="-panel-header"] span,
[data-theme="dark"] [class*="-panel-header"] h6,
[data-theme="dark"] [class*="-hero"] h4,
[data-theme="dark"] [class*="-add-hero"] h4 {
  color: var(--text-primary) !important;
}

/* Report CSS variables */
[data-theme="dark"] .reports-page,
[data-theme="dark"] .reports-page * {
  --report-ink: #dde8f4;
  --report-muted: #5d7d98;
  --report-accent: #7aaed4;
  --report-success: #34d399;
}

/* Reports page shells & backgrounds */
[data-theme="dark"] .reports-page .report-redesign-page {
  background: linear-gradient(165deg, #101c2c 0%, #0f1823 100%) !important;
}
[data-theme="dark"] .reports-page .report-headline-row {
  background: linear-gradient(130deg, #1a2636 0%, #16202f 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-card-shell {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-card-shell h3,
[data-theme="dark"] .report-card-shell strong {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .report-snapshot-card {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-snapshot-card strong,
[data-theme="dark"] .report-snapshot-card span {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .report-toolbar .btn,
[data-theme="dark"] .report-time-filter {
  background: #1e2f44 !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .report-time-filter button {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .report-time-filter button.active {
  background: #253a52 !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .report-payment-row {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-payment-row strong,
[data-theme="dark"] .report-payment-row span {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .payment-track,
[data-theme="dark"] .top-track {
  background: #243550 !important;
}
[data-theme="dark"] .report-top-item {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-top-item .rank {
  background: #1e2f44 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-mini-table th,
[data-theme="dark"] .report-mini-table td {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-day-bar-group small,
[data-theme="dark"] .report-hour-bar-group small,
[data-theme="dark"] .report-legend {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .reports-page .loss-investigation-shell {
  background: linear-gradient(180deg, rgba(26,38,54,.98) 0%, rgba(22,32,47,.98) 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .reports-page .loss-checklist-table thead th {
  background: #16202f !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .reports-page .loss-checklist-table tbody tr:nth-child(even) {
  background: #162230 !important;
}
[data-theme="dark"] .reports-page .loss-checklist-table tbody tr:hover {
  background: #1e2f44 !important;
}
[data-theme="dark"] .reports-page .loss-checklist-table tbody td {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .reports-page .loss-checklist-table td:last-child .btn {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-redesign-page .report-gauge-item {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-redesign-page .report-gauge-ring::after {
  background: #1a2636 !important;
}
[data-theme="dark"] .report-redesign-page .report-gauge-item strong {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .report-redesign-page .report-gauge-item span {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .report-redesign-page .report-mini-table thead th {
  background: #16202f !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .report-redesign-page .report-day-chart,
[data-theme="dark"] .report-redesign-page .report-hour-chart {
  background: linear-gradient(180deg, #141f2e 0%, #111c29 100%) !important;
}

/* Settings page */
[data-theme="dark"] .settings-card {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .settings-card h4,
[data-theme="dark"] .settings-subsection-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .denomination-chip {
  background: #1e2f44 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .denomination-chip span {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .location-rows {
  background: linear-gradient(170deg, #141f2e 0%, #111c29 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .location-row {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .settings-add-location-btn {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Notification panel & toasts */
[data-theme="dark"] .notification-panel {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .notification-panel * {
  color: var(--text-primary);
}
[data-theme="dark"] .toast {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Readonly inputs */
[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea[readonly],
[data-theme="dark"] select[disabled] {
  background: #111c29 !important;
  color: #8aaec8 !important;
  border-color: var(--border-color) !important;
  opacity: 1 !important;
}

/* Modal body/footer catch-all (overrides page-specific gradients) */
[data-theme="dark"] .modal .modal-body,
[data-theme="dark"] .modal-box .modal-body {
  background: #16202f !important;
}
[data-theme="dark"] .modal .modal-footer,
[data-theme="dark"] .modal-box .modal-footer {
  background: #141d2b !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea {
  background: #16202f !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Modal hero panels & editor grids (catch-all by naming pattern) */
[data-theme="dark"] [class$="-hero"]:not(.dashboard-hero):not(.login-hero),
[data-theme="dark"] [class*="-add-hero"],
[data-theme="dark"] [class*="-editor-grid"],
[data-theme="dark"] [class*="-context-grid"],
[data-theme="dark"] [class*="-items-shell"],
[data-theme="dark"] [class*="-items-wrap"],
[data-theme="dark"] [class*="-items-panel"] {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] [class*="-editor-grid"] label,
[data-theme="dark"] [class*="-context-grid"] label,
[data-theme="dark"] [class*="-hero"] label {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] [class*="-editor-grid"] strong,
[data-theme="dark"] [class*="-context-grid"] strong,
[data-theme="dark"] [class*="-hero"] strong {
  color: var(--text-primary) !important;
}
[data-theme="dark"] [class*="-editor-grid"] span,
[data-theme="dark"] [class*="-context-grid"] span {
  color: var(--text-secondary) !important;
}

/* Data table — more specific page selectors */
[data-theme="dark"] .data-table-container {
  background: var(--panel-bg) !important;
}
[data-theme="dark"] :is(.customers-page,.transactions-page,.suppliers-page,.employees-page,.expenses-page,.deliveries-page,.returns-page,.invoices-page,.quotations-page,.appointments-page,.messages-page,.locations-page) .data-table thead th,
[data-theme="dark"] .data-table th {
  background: #16202f !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] :is(.customers-page,.transactions-page,.suppliers-page,.employees-page,.expenses-page,.deliveries-page,.returns-page,.invoices-page,.quotations-page,.appointments-page,.messages-page,.locations-page) .data-table tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover {
  background: #1e2f44 !important;
}
[data-theme="dark"] :is(.customers-page,.transactions-page,.suppliers-page,.employees-page,.expenses-page,.deliveries-page,.returns-page,.invoices-page,.quotations-page,.appointments-page,.messages-page,.locations-page) .search-box input,
[data-theme="dark"] :is(.customers-page,.transactions-page,.suppliers-page,.employees-page,.expenses-page,.deliveries-page,.returns-page,.invoices-page,.quotations-page,.appointments-page,.messages-page,.locations-page) .table-filters select,
[data-theme="dark"] .search-box input {
  background: #16202f !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Inventory pager */
[data-theme="dark"] .pager-bar {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pager-meta {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .pager-chip {
  background: #162538 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .pager-btn {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .inventory-visible-indicator {
  background: #162538 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Customers page */
[data-theme="dark"] .customers-page .customers-table-header {
  background: linear-gradient(180deg, #141f2e 0%, #111c29 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .customers-reminder-note {
  background: #162538 !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .customers-reminder-note.overdue {
  background: #2a1212 !important;
  border-color: #4a1515 !important;
}
[data-theme="dark"] .customers-reminder-note.clear {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
}
[data-theme="dark"] .customer-edit-chip,
[data-theme="dark"] .customer-details-chip {
  background: #1e2f44 !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .customer-edit-chip.chip-outstanding,
[data-theme="dark"] .customer-details-chip.chip-outstanding,
[data-theme="dark"] .customer-details-status.status-overdue {
  background: #2a1a08 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .customer-edit-chip.chip-open,
[data-theme="dark"] .customer-details-chip.chip-open,
[data-theme="dark"] .customer-details-status.status-open {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .customer-details-chip.chip-overdue {
  background: #2a1212 !important;
  border-color: #4a1515 !important;
  color: #f87171 !important;
}

/* Reminder note text — overdue title & list items */
[data-theme="dark"] .customers-reminder-title {
  color: #60a5fa !important;
}
[data-theme="dark"] .customers-reminder-note.overdue .customers-reminder-title {
  color: #fca5a5 !important;
}
[data-theme="dark"] .customers-reminder-note.clear .customers-reminder-title {
  color: #6ee7b7 !important;
}
[data-theme="dark"] .customers-reminder-list {
  color: #fcd4d4 !important;
}
[data-theme="dark"] .customers-reminder-empty {
  color: #6ee7b7 !important;
}

/* Debt action dropdown menu — dark mode */
[data-theme="dark"] .debt-action-menu-panel,
[data-theme="dark"] .customer-action-menu-panel {
  background: linear-gradient(170deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
  box-shadow: 0 16px 26px rgba(0,0,0,.4), 0 8px 14px rgba(0,0,0,.25) !important;
}
[data-theme="dark"] .debt-action-item {
  background: rgba(26,38,54,.85) !important;
  border-color: rgba(36,53,80,.7) !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-action-item i {
  color: #60a5fa !important;
}
[data-theme="dark"] .debt-action-item:hover,
[data-theme="dark"] .debt-action-item:focus-visible {
  background: linear-gradient(160deg, #1e2f44 0%, #1a2a40 100%) !important;
  border-color: #3a5070 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .debt-action-item:hover i,
[data-theme="dark"] .debt-action-item:focus-visible i {
  color: #93c5fd !important;
}
[data-theme="dark"] .debt-action-item.danger {
  color: #f87171 !important;
}
[data-theme="dark"] .debt-action-item.danger i {
  color: #f87171 !important;
}
[data-theme="dark"] .debt-action-item.danger:hover,
[data-theme="dark"] .debt-action-item.danger:focus-visible {
  background: linear-gradient(160deg, #2a1212 0%, #251010 100%) !important;
  border-color: #4a1515 !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .debt-action-more {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-action-more:hover,
[data-theme="dark"] .debt-action-more:focus-visible,
[data-theme="dark"] .debt-action-menu[open] > .debt-action-more,
[data-theme="dark"] .customer-action-menu[open] > .debt-action-more {
  background: #243550 !important;
  border-color: #3a5070 !important;
  color: #dde8f4 !important;
}

/* Debt ledger search & filters */
[data-theme="dark"] .debt-ledger-search-input {
  background: #16202f !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .debt-ledger-search-input::placeholder {
  color: #4a6075 !important;
}
[data-theme="dark"] .debt-ledger-clear-btn {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-ledger-search-box i {
  color: #4a6075 !important;
}
[data-theme="dark"] #customerDebtStatusFilter {
  background: #16202f !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .customers-block-title {
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-action-primary {
  background: linear-gradient(180deg, #1e2f44 0%, #182438 100%) !important;
  border-color: #2a4060 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .debt-action-primary:hover,
[data-theme="dark"] .debt-action-primary:focus-visible {
  background: linear-gradient(180deg, #243550 0%, #1e2f44 100%) !important;
  border-color: #3a5570 !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .customers-page .customer-action-primary {
  background: linear-gradient(180deg, #1e2f44 0%, #182438 100%) !important;
  border-color: #2a4060 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .customers-page .customer-action-primary:hover,
[data-theme="dark"] .customers-page .customer-action-primary:focus-visible {
  background: linear-gradient(180deg, #243550 0%, #1e2f44 100%) !important;
  border-color: #3a5570 !important;
  color: #93c5fd !important;
}

/* Customer details modal content */
[data-theme="dark"] .customer-details-meta-card {
  background: linear-gradient(160deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .customer-details-meta-card .meta-label {
  color: #5d7d98 !important;
}
[data-theme="dark"] .customer-details-meta-card .meta-value {
  color: #dde8f4 !important;
}
[data-theme="dark"] .customer-details-activity-card {
  background: linear-gradient(170deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.28) !important;
}
[data-theme="dark"] .customer-details-activity-toolbar {
  background: linear-gradient(180deg, #1e2f44 0%, #1a2636 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .customer-details-activity-header h4 {
  color: #dde8f4 !important;
}
[data-theme="dark"] .customer-details-activity-note {
  color: #5d7d98 !important;
}
[data-theme="dark"] .customer-details-filter-label {
  color: #5d7d98 !important;
}
[data-theme="dark"] .customer-details-filter-select,
[data-theme="dark"] .customer-details-search-input {
  background: #16202f !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .customer-details-table-wrap {
  background: #16202f !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .customer-details-table thead th {
  background: linear-gradient(180deg, #1e2f44 0%, #1a2636 100%) !important;
  color: #8aaec8 !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .customer-details-table td {
  background: linear-gradient(180deg, #16202f 0%, #141d2b 100%) !important;
  color: #dde8f4 !important;
  border-color: #1e2f44 !important;
}
[data-theme="dark"] .customer-details-table .customer-details-credit-row:hover td {
  background: linear-gradient(180deg, #1e2f44 0%, #1a2a3e 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .customer-details-table .amount-paid {
  color: #34d399 !important;
}
[data-theme="dark"] .customer-details-table .amount-outstanding.is-open {
  color: #f87171 !important;
}
[data-theme="dark"] .customer-details-table .amount-outstanding.is-closed {
  color: #34d399 !important;
}
[data-theme="dark"] .customer-details-status.status-paid {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .customer-details-row-actions .btn-small {
  background: linear-gradient(180deg, #1e2f44 0%, #182438 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .customer-details-row-actions .btn-small:hover {
  background: linear-gradient(180deg, #243550 0%, #1e2f44 100%) !important;
  border-color: #3a5070 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .customer-details-chip.chip-total {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .customer-details-chip.chip-paid {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .customer-details-chip.chip-cleared {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .customer-details-table-empty {
  color: #5d7d98 !important;
}

/* Debt payment modal specific */
[data-theme="dark"] .debt-payment-context-grid .form-group {
  background: linear-gradient(160deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-payment-editor-grid {
  background: linear-gradient(170deg, #1a2636 0%, #16202f 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-payment-context-grid input[readonly] {
  background: #16202f !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .modal.modal-debt-payment .form-group label {
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-payment-chip-open {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .debt-payment-chip-outstanding {
  background: #2a1a08 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .debt-payment-hint {
  color: #5d7d98 !important;
}
[data-theme="dark"] .debt-payment-hint.is-invalid {
  color: #f87171 !important;
}
[data-theme="dark"] .debt-payment-shortcut {
  color: #4a6075 !important;
}
[data-theme="dark"] .debt-payment-quick {
  background: linear-gradient(180deg, #1e2f44 0%, #182438 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-payment-quick:hover {
  background: linear-gradient(180deg, #243550 0%, #1e2f44 100%) !important;
  border-color: #3a5070 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .debt-payment-quick-fixed {
  background: linear-gradient(180deg, #1a2818 0%, #162014 100%) !important;
  border-color: #2a4020 !important;
  color: #6ee7b7 !important;
}

/* Debt History modal */
[data-theme="dark"] .debt-history-meta-grid,
[data-theme="dark"] .debt-products-meta-grid {
  color: #dde8f4 !important;
}
[data-theme="dark"] .debt-history-meta-grid strong,
[data-theme="dark"] .debt-products-meta-grid strong {
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-history-meta-grid code,
[data-theme="dark"] .debt-products-meta-grid code {
  color: #93c5fd !important;
  background: #16202f !important;
}
[data-theme="dark"] .debt-history-chip-total {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .debt-history-chip-paid {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .debt-history-chip-outstanding {
  background: #2a1a08 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .debt-history-chip-count {
  background: #1e2f44 !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-history-toolbar,
[data-theme="dark"] .debt-products-toolbar {
  background: linear-gradient(170deg, #1e2f44 0%, #1a2636 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-history-toolbar label,
[data-theme="dark"] .debt-products-toolbar label {
  color: #5d7d98 !important;
}
[data-theme="dark"] .debt-history-filter-select,
[data-theme="dark"] .debt-products-filter-select {
  background: #16202f !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .debt-history-reset-btn {
  background: linear-gradient(145deg, #1e2f44 0%, #1a2636 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-history-reset-btn:hover {
  background: linear-gradient(145deg, #243550 0%, #1e2f44 100%) !important;
  border-color: #3a5070 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .debt-history-method-meta {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .debt-history-table-wrap,
[data-theme="dark"] .debt-products-table-wrap {
  background: #16202f !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-history-table thead th,
[data-theme="dark"] .debt-products-table thead th {
  background: linear-gradient(180deg, #1e2f44 0%, #1a2636 100%) !important;
  color: #8aaec8 !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .debt-history-table td,
[data-theme="dark"] .debt-products-table td {
  color: #dde8f4 !important;
  border-color: #1e2f44 !important;
}
[data-theme="dark"] .debt-products-origin-meta {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #60a5fa !important;
}

/* Sales checkout modal */
[data-theme="dark"] .sales-checkout-items {
  background: rgba(22,32,47,.75) !important;
}
[data-theme="dark"] .sales-checkout-summary {
  background: rgba(22,32,47,.78) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .sales-checkout-summary .total,
[data-theme="dark"] .sales-checkout-summary strong {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .sales-payment-tile {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Dashboard welcome & quick actions */
[data-theme="dark"] .dashboard-welcome {
  background: linear-gradient(148deg, #1a2636 0%, #16202f 100%) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .dashboard-quick-actions button {
  background: #1e2f44 !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .dashboard-page .tabs {
  background: #16202f !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .dashboard-page .low-stock-item {
  background: #2a1a08 !important;
  border-color: #4a3010 !important;
}
[data-theme="dark"] .dashboard-page .sale-row:hover {
  background: #1e2f44 !important;
}

/* PO / Purchase Orders */
[data-theme="dark"] .po-items-shell,
[data-theme="dark"] .po-item-row {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .po-item-row:hover {
  background: #1e2f44 !important;
}
[data-theme="dark"] .po-details-table-wrap {
  background: linear-gradient(180deg, #1a2636 0%, #16202f 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .po-details-table thead th {
  background: #16202f !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .po-details-table td {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .po-details-table tbody tr:hover td {
  background: #1e2f44 !important;
}

/* Receiving */
[data-theme="dark"] .receiving-add-context-grid,
[data-theme="dark"] .receiving-add-items-wrap {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .receiving-item-row {
  background: #1e2f44 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .receiving-line-total,
[data-theme="dark"] .receiving-running-total {
  background: #162538 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Debt / payments */
[data-theme="dark"] .debt-payment-chip-outstanding,
[data-theme="dark"] .debt-history-chip-outstanding,
[data-theme="dark"] .debt-add-toolbar-chip-stock {
  background: #2a1a08 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .debt-payment-quick {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .debt-payment-quick:hover,
[data-theme="dark"] .debt-payment-quick:focus-visible {
  background: #253a52 !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .debt-ledger-clear-btn {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Return items / invoice / quotation modals */
[data-theme="dark"] .return-items-table-wrap {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .return-type-card {
  background: #1e2f44 !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .return-items-panel {
  background: linear-gradient(180deg, #141f2e 0%, #111c29 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .return-stock-impact-note {
  background: #162538 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .return-item-remove {
  background: #2a1212 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .returns-evidence-chip {
  background: #1a2636 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Activity / logs */
[data-theme="dark"] .activity-page-tab {
  background: #1e2f44 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Product import / quick-add modals */
[data-theme="dark"] .product-import-spec {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .category-usage-row,
[data-theme="dark"] .category-conflict-card {
  background: #1a2636 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .category-usage-name,
[data-theme="dark"] .category-conflict-header strong {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .product-import-dropzone {
  background: linear-gradient(170deg, #141f2e 0%, #111c29 100%) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .quick-add-item.card-import .quick-add-item-pill {
  background: #2a1a08 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .quick-add-item.card-expense .quick-add-item-pill {
  background: #2a1212 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .quick-add-item.card-customer .quick-add-item-pill {
  background: #1e1540 !important;
  color: #a78bfa !important;
}
[data-theme="dark"] .import-feedback-report-row {
  background: rgba(22,32,47,.65) !important;
}

/* Supplier status chips */
[data-theme="dark"] .supplier-details-chip.chip-inactive,
[data-theme="dark"] .supplier-edit-chip.chip-inactive {
  background: #2a1212 !important;
  border-color: #4a1515 !important;
  color: #f87171 !important;
}

/* Permissions row */
[data-theme="dark"] .user-permissions-row {
  background: #1e2f44 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .user-permissions-row label {
  color: var(--text-secondary) !important;
}

/* Flash messages in dark mode */
[data-theme="dark"] .flash-inner.success {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #34d399 !important;
}
[data-theme="dark"] .flash-inner.warning {
  background: #2a1f08 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .flash-inner.error {
  background: #2a1212 !important;
  border-color: #4a1515 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .flash-inner.info {
  background: #162040 !important;
  border-color: #243a60 !important;
  color: #60a5fa !important;
}

/* Import feedback banners in dark mode (global) */
[data-theme="dark"] .import-feedback.success {
  background: #0f2318 !important;
  border-color: #1a4030 !important;
  color: #34d399 !important;
}
[data-theme="dark"] .import-feedback.warning {
  background: #2a1f10 !important;
  border-color: #4a3010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .import-feedback.error {
  background: #2a1212 !important;
  border-color: #4a1515 !important;
  color: #f87171 !important;
}

/* Status badges in dark mode */
[data-theme="dark"] .status-badge.success {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
}
[data-theme="dark"] .status-badge.danger {
  background: rgba(248, 113, 113, 0.12) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
}
[data-theme="dark"] .status-badge.warning {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}
[data-theme="dark"] .status-badge.secondary {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94a3b8 !important;
  border-color: rgba(100, 116, 139, 0.2) !important;
}
[data-theme="dark"] .status-badge.info {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
}

/* Cancel / secondary buttons inside all modals in dark mode */
[data-theme="dark"] .modal .btn-secondary,
[data-theme="dark"] .modal .btn.btn-secondary {
  background: linear-gradient(145deg, #1e2f44 0%, #19293d 100%) !important;
  border-color: #2b3f5c !important;
  color: #a0bcd8 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .modal .btn-secondary:hover,
[data-theme="dark"] .modal .btn.btn-secondary:hover {
  background: linear-gradient(145deg, #253a52 0%, #1e3048 100%) !important;
  border-color: #3d5570 !important;
  color: #dde8f4 !important;
}

@media (max-width: 420px) {
  .reports-page .loss-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile responsive fixes ─────────────────────── */

/* Tables: ensure horizontal scroll on ALL pages on mobile */
@media (max-width: 768px) {
  .table-wrapper,
  .table-responsive,
  .panel-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* stats-grid with inline column counts must still collapse on mobile */
  .stats-grid[style] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* pos-dialog: ensure form scrolls properly on short screens */
  dialog.pos-dialog > form {
    max-height: calc(100dvh - 120px);
    max-height: calc(100vh - 120px);
  }

  /* content-header action button stays right-aligned when wrapped */
  .content-header {
    align-items: flex-start;
  }
  .content-header > .btn,
  .content-header > button {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* topbar: hide non-essential items on small screens */
  .topbar-actions .pill:not(.primary):not(#clock),
  .topbar-actions .lang-btn {
    display: none;
  }
  /* keep notification + theme toggle always visible */
  .topbar-actions .theme-toggle-btn,
  .topbar-actions .notification-btn {
    display: inline-flex !important;
  }
}

/* Tighten stats grid further on very small phones */
@media (max-width: 480px) {
  .stats-grid[style] {
    grid-template-columns: 1fr !important;
  }
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* pos-dialog full-width on phones */
  dialog.pos-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translate(-50%, 0) !important;
    margin: 0 !important;
  }
}

/* Topbar clock: hide on very small screens */
@media (max-width: 400px) {
  #clock {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   POS-DIALOG PREMIUM SYSTEM  (dialog.pos-dialog)
   ═══════════════════════════════════════════════════════════ */

dialog.pos-dialog {
  padding: 0;
  border: none;
  border-radius: 18px;
  width: min(97vw, 520px);
  max-height: min(88dvh, 88vh);
  overflow: hidden;
  box-shadow:
    0 32px 60px rgba(8, 24, 44, 0.28),
    0 0 0 1px rgba(200, 220, 240, 0.4);
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Only flex when actually open — prevents auto-visible on page load */
dialog.pos-dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog.pos-dialog::backdrop {
  background: rgba(7, 14, 26, 0.62);
  backdrop-filter: blur(4px);
}

/* Header */
.pos-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  background: linear-gradient(110deg, #0c2340 0%, #0f4f47 60%, #0d6b64 100%);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.pos-modal-head::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.12);
  pointer-events: none;
}

.pos-modal-head h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.pos-modal-head h3 i {
  font-size: 15px;
  color: #5eead4;
}

.pos-modal-x {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background 130ms, border-color 130ms, color 130ms;
  position: relative;
  z-index: 1;
}

.pos-modal-x:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* Body — form scrolls here */
dialog.pos-dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pos-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  background: linear-gradient(170deg, #f9fcff 0%, #eef4fb 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #c5d4e4 transparent;
}

/* Footer */
.pos-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 20px;
  border-top: 1px solid #dce8f6;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
  flex-shrink: 0;
}

/* ── Field helpers inside pos-modal-body ── */
.att-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.att-field label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f607d;
  display: flex;
  align-items: center;
  gap: 6px;
}

.att-field input,
.att-field select,
.att-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #bed1e4;
  border-radius: 9px;
  background: #fff;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: #1f2937;
  transition: border-color 150ms, box-shadow 150ms;
}

.att-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  padding-right: 34px;
}

.att-field input:focus,
.att-field select:focus,
.att-field textarea:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.att-field textarea {
  padding: 10px 12px;
  resize: vertical;
  min-height: 70px;
}

.att-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════
   CLOCK IN DIALOG — live clock display
   ═══════════════════════════════════════════════════════════ */

.att-clock-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px 12px;
  border-radius: 13px;
  background: linear-gradient(135deg, #0c2340 0%, #0f4f47 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 2px;
}

.att-clock-hero::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.12);
  top: -40px;
  right: -40px;
  pointer-events: none;
}

.att-clock-time {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  position: relative;
}

.att-clock-date {
  font-size: 13px;
  color: rgba(165, 243, 252, 0.75);
  font-weight: 600;
  margin-top: 4px;
  position: relative;
}

.att-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.2);
  border: 1px solid rgba(20, 184, 166, 0.35);
  color: #5eead4;
  font-size: 11.5px;
  font-weight: 700;
  position: relative;
}

.att-clock-badge i {
  font-size: 10px;
}

/* ── Auto-time note ── */
.att-auto-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 9px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  color: #15803d;
  font-weight: 600;
}

.att-auto-note i {
  font-size: 13px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MANUAL ENTRY DIALOG — smart status-aware form
   ═══════════════════════════════════════════════════════════ */

.att-status-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 2px;
}

.att-status-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border: 2px solid #dce8f4;
  border-radius: 10px;
  background: #f8fbff;
  cursor: pointer;
  transition: all 130ms;
  text-align: center;
}

.att-status-tab input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.att-status-tab i { font-size: 18px; color: #7a96b0; transition: color 130ms; }
.att-status-tab span { font-size: 11.5px; font-weight: 700; color: #3a5570; }

.att-status-tab:has(input:checked) { border-color: #0f766e; background: #f0fdf4; }
.att-status-tab:has(input:checked) i { color: #0f766e; }
.att-status-tab:has(input:checked) span { color: #065f46; }

.att-status-tab.att-status-absent:has(input:checked)  { border-color: #fca5a5; background: #fff5f5; }
.att-status-tab.att-status-absent:has(input:checked) i { color: #dc2626; }
.att-status-tab.att-status-absent:has(input:checked) span { color: #991b1b; }

.att-status-tab.att-status-leave:has(input:checked)   { border-color: #fde68a; background: #fffbeb; }
.att-status-tab.att-status-leave:has(input:checked) i { color: #d97706; }
.att-status-tab.att-status-leave:has(input:checked) span { color: #92400e; }

/* Time fields section */
.att-time-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid #d6e8f6;
  background: linear-gradient(135deg, #f8fcff 0%, #eef5fc 100%);
  transition: opacity 200ms, max-height 250ms;
}

.att-time-section.is-hidden {
  display: none;
}

/* Hours preview chip */
.att-hours-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
}

.att-hours-preview i { font-size: 14px; color: #059669; }

.att-auto-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  margin-left: 2px;
}

/* ── Attendance page shell ── */
.attendance-page-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

/* ── Attendance KPI grid overrides ── */
.att-kpi-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 20px;
}

.att-kpi-grid .inventory-kpi-card {
  border-radius: 14px;
  padding: 16px 18px;
  gap: 14px;
}

.att-kpi-grid .inventory-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
}

.att-kpi-grid .inventory-kpi-body span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a96b0;
  font-weight: 600;
}

.att-kpi-grid .inventory-kpi-body strong {
  font-size: 28px;
  font-weight: 800;
  color: #1e3a50;
  line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════
   ATTENDANCE SECTION PANELS
   ═══════════════════════════════════════════════════════════ */

.att-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(14, 42, 66, 0.06), 0 4px 16px rgba(14, 42, 66, 0.05);
  border: 1px solid #dce8f4;
  overflow: hidden;
  margin-bottom: 20px;
}

.att-section-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: linear-gradient(90deg, #f4faff 0%, #f8fcff 100%);
  border-bottom: 2px solid #e0eaf4;
  border-left: 4px solid #0f766e;
  flex-wrap: wrap;
}

.att-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a50;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.att-section-title i {
  font-size: 14px;
  color: #0f766e;
}

.att-section-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.att-record-count {
  margin-left: auto;
  font-size: 12px;
  color: #5d7d98;
  font-weight: 500;
  white-space: nowrap;
}

.att-record-count strong {
  color: #1e3a50;
  font-weight: 700;
}

.att-month-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.att-month-badge i { font-size: 11px; }

/* ── Employee cell ── */
.att-emp-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.att-emp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

.att-emp-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e3a50;
}

/* ── Time columns ── */
.att-td-time {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #2c4f6d;
  font-weight: 500;
}

/* ── Hours chip ── */
.att-hours-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 7px;
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Summary day chips ── */
.att-summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}

.att-summary-chip small {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.75;
}

.att-summary-chip.present  { background: #f0fdf4; border: 1px solid #a7f3d0; color: #065f46; }
.att-summary-chip.absent   { background: #fff1f2; border: 1px solid #fca5a5; color: #991b1b; }
.att-summary-chip.leave    { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.att-summary-chip.zero     { background: #f8fbff; border: 1px solid #dce8f4; color: #5d7d98; }

/* ── Clock Out button ── */
.att-clockout-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fde68a;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, box-shadow 140ms;
  white-space: nowrap;
}

.att-clockout-btn:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.18);
}

/* ── Dark mode ── */
[data-theme="dark"] .att-section {
  background: #0e1826;
  border-color: #1e3048;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .att-section-hd {
  background: linear-gradient(90deg, #0a1422 0%, #0c1622 100%);
  border-bottom-color: #1e3048;
  border-left-color: #0f766e;
}

[data-theme="dark"] .att-section-title { color: #a8c5dd; }
[data-theme="dark"] .att-section-title i { color: #2dd4bf; }

[data-theme="dark"] .att-record-count { color: #3d6080; }
[data-theme="dark"] .att-record-count strong { color: #a8c5dd; }

[data-theme="dark"] .att-month-badge {
  background: #051a10;
  border-color: #1a4a28;
  color: #4ade80;
}

[data-theme="dark"] .att-emp-name { color: #a8c5dd; }
[data-theme="dark"] .att-td-time { color: #7a9ab5; }

[data-theme="dark"] .att-hours-chip {
  background: #051a10;
  border-color: #1a4a28;
  color: #4ade80;
}

[data-theme="dark"] .att-summary-chip.present { background: #051a10; border-color: #1a4a28; color: #4ade80; }
[data-theme="dark"] .att-summary-chip.absent  { background: #1a0608; border-color: #4a1515; color: #fca5a5; }
[data-theme="dark"] .att-summary-chip.leave   { background: #1a1000; border-color: #4a3000; color: #fcd34d; }
[data-theme="dark"] .att-summary-chip.zero    { background: #0a1422; border-color: #1e3048; color: #3d6080; }

[data-theme="dark"] .att-clockout-btn {
  background: #1a1000;
  border-color: #4a3000;
  color: #fbbf24;
}

/* ── Dark mode for pos-dialog ── */
[data-theme="dark"] dialog.pos-dialog {
  background: #111c29 !important;
  box-shadow: 0 32px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px #1e3048 !important;
}

[data-theme="dark"] .pos-modal-body {
  background: linear-gradient(170deg, #0e1826 0%, #0c1622 100%) !important;
}

[data-theme="dark"] .pos-modal-foot {
  background: linear-gradient(180deg, #0e1826 0%, #0c1622 100%) !important;
  border-color: #1e3048 !important;
}

[data-theme="dark"] .att-field label { color: #5d7d98 !important; }
[data-theme="dark"] .att-field input,
[data-theme="dark"] .att-field select,
[data-theme="dark"] .att-field textarea {
  background: #141f2e !important;
  border-color: #1e3048 !important;
  color: #c8d8e8 !important;
}

[data-theme="dark"] .att-field input:focus,
[data-theme="dark"] .att-field select:focus { border-color: #0f766e !important; }

[data-theme="dark"] .att-auto-note {
  background: #051a0e !important; border-color: #0f3520 !important; color: #4ade80 !important;
}

[data-theme="dark"] .att-status-tab {
  background: #141f2e !important; border-color: #1e3048 !important;
}

[data-theme="dark"] .att-status-tab i { color: #5d7d98 !important; }
[data-theme="dark"] .att-status-tab span { color: #5d7d98 !important; }

[data-theme="dark"] .att-status-tab:has(input:checked) { border-color: #0f766e !important; background: #051a0e !important; }
[data-theme="dark"] .att-status-tab:has(input:checked) i { color: #2dd4bf !important; }
[data-theme="dark"] .att-status-tab:has(input:checked) span { color: #6ee7b7 !important; }

[data-theme="dark"] .att-status-tab.att-status-absent:has(input:checked) { background: #1a0505 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .att-status-tab.att-status-leave:has(input:checked)  { background: #1c1505 !important; border-color: #4a3010 !important; }

[data-theme="dark"] .att-time-section {
  background: #0e1826 !important; border-color: #1e3048 !important;
}

[data-theme="dark"] .att-hours-preview {
  background: #051a0e !important; border-color: #0f3520 !important; color: #4ade80 !important;
}

[data-theme="dark"] .att-clock-badge {
  background: rgba(20, 184, 166, 0.15) !important;
}

@media (max-width: 540px) {
  dialog.pos-dialog { width: calc(100vw - 16px); border-radius: 16px; }
  .att-field-row { grid-template-columns: 1fr; }
  .att-status-tabs { grid-template-columns: 1fr 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   EXPENSES PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.exp-page-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

/* KPI grid — 4 columns, richer cards */
.exp-kpi-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 20px;
}

.exp-kpi-grid .inventory-kpi-card {
  border-radius: 14px;
  padding: 16px 18px;
  gap: 14px;
  align-items: center;
}

.exp-kpi-grid .inventory-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
}

.exp-kpi-grid .inventory-kpi-body span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a96b0;
  font-weight: 600;
}

.exp-kpi-grid .inventory-kpi-body strong {
  font-size: 22px;
  font-weight: 800;
  color: #1e3a50;
  line-height: 1.15;
}

.exp-kpi-sub {
  font-size: 11px;
  color: #5d7d98;
  font-weight: 500;
  margin-top: 1px;
}

/* Table cells */
.exp-desc-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e3a50;
}

.exp-cat-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #2c4f6d;
  font-weight: 500;
}

.exp-cat-cell i {
  font-size: 13px;
  color: #0f766e;
  width: 16px;
  text-align: center;
}

.exp-amount-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 7px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Modal size override ── */
.modal-exp-premium {
  max-width: 540px !important;
  width: min(96vw, 540px) !important;
}

/* ── Dialog inner body ── */
.exp-dlg-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header row with icon + intro */
.exp-dlg-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  border: 1px solid #a7f3d0;
}

.exp-dlg-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.exp-dlg-header-icon.edit {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.exp-dlg-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exp-dlg-header-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a50;
}

.exp-dlg-header-text span {
  font-size: 12px;
  color: #5d7d98;
}

/* Fields grid */
.exp-dlg-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.exp-dlg-span2 {
  grid-column: 1 / -1;
}

.exp-dlg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.exp-dlg-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f607d;
  display: flex;
  align-items: center;
  gap: 5px;
}

.exp-dlg-field label i { font-size: 11px; color: #0f766e; }

.exp-dlg-field input,
.exp-dlg-field select,
.exp-dlg-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #bed1e4;
  border-radius: 9px;
  background: #fff;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  color: #1f2937;
  transition: border-color 150ms, box-shadow 150ms;
}

.exp-dlg-field input:focus,
.exp-dlg-field select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* Amount with Tsh prefix */
.exp-dlg-amount-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid #bed1e4;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
}

.exp-dlg-amount-wrap:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.exp-dlg-pfx {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #f4faff;
  border-right: 1px solid #bed1e4;
  font-size: 12px;
  font-weight: 700;
  color: #5d7d98;
  flex-shrink: 0;
}

.exp-dlg-amount-wrap input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 38px;
  flex: 1;
  padding: 0 12px;
}

/* Status radio tabs in edit */
.exp-dlg-status-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.exp-dlg-status-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 2px solid #dce8f4;
  border-radius: 9px;
  background: #f8fbff;
  font-size: 12.5px;
  font-weight: 600;
  color: #3a5570;
  cursor: pointer;
  transition: border-color 130ms, background 130ms;
}

.exp-dlg-status-opt input[type="radio"] { display: none; }

.exp-dlg-status-opt:has(input:checked),
.exp-dlg-status-opt.active {
  border-color: #0f766e;
  background: #f0fdf4;
  color: #065f46;
}

.exp-dlg-status-opt:has(input[value="Pending"]:checked),
.exp-dlg-status-opt.active.warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.exp-dlg-status-opt:has(input[value="Rejected"]:checked),
.exp-dlg-status-opt.active.danger {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #991b1b;
}

/* ── View Receipt Card ── */
.exp-view-card {
  border: 1px solid #dce8f4;
  border-radius: 14px;
  overflow: hidden;
}

.exp-view-card-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(90deg, #f4faff 0%, #f8fcff 100%);
  border-bottom: 1px solid #dce8f4;
}

.exp-view-cat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.exp-view-card-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.exp-view-card-meta strong {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-view-card-meta span {
  font-size: 12px;
  color: #5d7d98;
}

.exp-view-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.exp-view-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-right: 1px solid #dce8f4;
}

.exp-view-field:last-child { border-right: none; }

.exp-view-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #7a96b0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.exp-view-label i { font-size: 10px; }

.exp-view-field strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a50;
}

.exp-view-amount-val {
  font-size: 16px !important;
  color: #c2410c !important;
}

/* ── Dark mode ── */
[data-theme="dark"] .exp-kpi-grid .inventory-kpi-body strong { color: #a8c5dd; }
[data-theme="dark"] .exp-kpi-sub { color: #3d6080; }
[data-theme="dark"] .exp-desc-text { color: #a8c5dd; }
[data-theme="dark"] .exp-cat-cell { color: #7a9ab5; }
[data-theme="dark"] .exp-cat-cell i { color: #2dd4bf; }
[data-theme="dark"] .exp-amount-chip { background: #1a0a00; border-color: #4a2000; color: #fb923c; }

[data-theme="dark"] .exp-dlg-body { background: transparent; }
[data-theme="dark"] .exp-dlg-header { background: #051a10; border-color: #1a4a28; }
[data-theme="dark"] .exp-dlg-header-text strong { color: #a8c5dd; }
[data-theme="dark"] .exp-dlg-header-text span { color: #3d6080; }
[data-theme="dark"] .exp-dlg-field label { color: #5d7d98; }
[data-theme="dark"] .exp-dlg-field input,
[data-theme="dark"] .exp-dlg-field select {
  background: #141f2e; border-color: #1e3048; color: #c8d8e8;
}
[data-theme="dark"] .exp-dlg-pfx { background: #0a1422; border-color: #1e3048; color: #3d6080; }
[data-theme="dark"] .exp-dlg-amount-wrap { border-color: #1e3048; background: #141f2e; }
[data-theme="dark"] .exp-dlg-status-opt { background: #0a1422; border-color: #1e3048; color: #7a9ab5; }

[data-theme="dark"] .exp-view-card { border-color: #1e3048; }
[data-theme="dark"] .exp-view-card-hd { background: #0a1422; border-color: #1e3048; }
[data-theme="dark"] .exp-view-card-meta strong { color: #a8c5dd; }
[data-theme="dark"] .exp-view-field { border-color: #1e3048; }
[data-theme="dark"] .exp-view-label { color: #3d6080; }
[data-theme="dark"] .exp-view-field strong { color: #a8c5dd; }

@media (max-width: 600px) {
  .exp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-dlg-fields { grid-template-columns: 1fr; }
  .exp-dlg-span2 { grid-column: 1; }
  .exp-dlg-status-tabs { grid-template-columns: 1fr 1fr 1fr; }
  .exp-view-card-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   RECEIVING PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.rcv-page-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

/* 5-column KPI grid */
.rcv-kpi-grid {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 20px;
}

.rcv-kpi-grid .inventory-kpi-card {
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
}

.rcv-kpi-grid .inventory-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 18px;
  flex-shrink: 0;
}

.rcv-kpi-grid .inventory-kpi-body span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a96b0;
  font-weight: 600;
}

.rcv-kpi-grid .inventory-kpi-body strong {
  font-size: 20px;
  font-weight: 800;
  color: #1e3a50;
  line-height: 1.1;
}

/* Table cells */
.rcv-no-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.rcv-no-cell i { font-size: 10px; color: #7a96b0; }
.rcv-no-cell strong { font-size: 13.5px; font-weight: 700; color: #1e3a50; }

.rcv-po-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 9px;
  border-radius: 6px;
}

.rcv-po-badge i { font-size: 11px; }

/* ── Add Receiving dialog enhancements ── */
.rcv-dlg-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  border: 1px solid #a7f3d0;
  border-radius: 11px;
  margin-bottom: 4px;
}

.rcv-dlg-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
}

.rcv-dlg-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rcv-dlg-header-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a50;
}

.rcv-dlg-header-text span {
  font-size: 12px;
  color: #5d7d98;
}

.rcv-dlg-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #0f766e;
  padding: 10px 0 4px;
  border-bottom: 1px solid #e0eaf4;
  margin-bottom: 8px;
}

.rcv-optional-tag {
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  color: #94a3b8;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* Add Item button */
.rcv-add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f766e;
  background: #f0fdf4;
  border: 1.5px dashed #6ee7b7;
  cursor: pointer;
  transition: background 130ms, border-color 130ms;
}

.rcv-add-item-btn:hover {
  background: #dcfce7;
  border-color: #34d399;
}

/* ── View Receiving dialog ── */
.modal-rcv-view {
  max-width: 680px !important;
  width: min(96vw, 680px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-rcv-view .modal-body {
  flex: 1;
  min-height: 0;
}

.modal-rcv-view .modal-footer {
  flex-shrink: 0;
}

.rcv-view-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rcv-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #f4faff 0%, #f8fcff 100%);
  border-bottom: 2px solid #e0eaf4;
  border-left: 4px solid #0f766e;
  border-radius: 10px 10px 0 0;
}

.rcv-view-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
}

.rcv-view-header-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rcv-view-header-meta strong {
  font-size: 15px;
  font-weight: 800;
  color: #1e3a50;
}

.rcv-view-header-meta span {
  font-size: 12.5px;
  color: #5d7d98;
}

.rcv-view-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #e0eaf4;
}

.rcv-view-info-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-right: 1px solid #e0eaf4;
}

.rcv-view-info-field:last-child { border-right: none; }

.rcv-view-info-field > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #7a96b0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rcv-view-info-field > span i { font-size: 10px; }

.rcv-view-info-field strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a50;
}

.rcv-view-amount { color: #0f766e !important; font-size: 15px !important; }

.rcv-view-items-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #0f766e;
  padding: 10px 16px 6px;
  border-bottom: 1px solid #e0eaf4;
}

.rcv-view-table-wrap {
  overflow-x: auto;
}

.rcv-view-table-wrap .data-table { min-width: 520px; }

/* Dark mode */
[data-theme="dark"] .rcv-kpi-grid .inventory-kpi-body strong { color: #a8c5dd; }
[data-theme="dark"] .rcv-no-cell strong { color: #a8c5dd; }
[data-theme="dark"] .rcv-po-badge { background: #0a1a3a; border-color: #1e3a70; color: #93c5fd; }
[data-theme="dark"] .rcv-dlg-header { background: #051a10; border-color: #1a4a28; }
[data-theme="dark"] .rcv-dlg-header-text strong { color: #a8c5dd; }
[data-theme="dark"] .rcv-dlg-section-label { color: #2dd4bf; border-color: #1e3048; }
[data-theme="dark"] .rcv-add-item-btn { background: #051a10; border-color: #1a4a28; color: #4ade80; }
[data-theme="dark"] .rcv-view-header { background: #0a1422; border-color: #1e3048; }
[data-theme="dark"] .rcv-view-header-meta strong { color: #a8c5dd; }
[data-theme="dark"] .rcv-view-info-grid,
[data-theme="dark"] .rcv-view-info-field { border-color: #1e3048; }
[data-theme="dark"] .rcv-view-info-field strong { color: #a8c5dd; }
[data-theme="dark"] .rcv-view-items-label { border-color: #1e3048; color: #2dd4bf; }

@media (max-width: 640px) {
  .rcv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .rcv-view-info-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   DELIVERIES PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.del-page-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

/* 5-column KPI grid */
.del-kpi-grid {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 20px;
}

.del-kpi-grid .inventory-kpi-card {
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
}

.del-kpi-grid .inventory-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 18px;
  flex-shrink: 0;
}

.del-kpi-grid .inventory-kpi-body span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a96b0;
  font-weight: 600;
}

.del-kpi-grid .inventory-kpi-body strong {
  font-size: 20px;
  font-weight: 800;
  color: #1e3a50;
  line-height: 1.1;
}

/* Dark mode */
[data-theme="dark"] .del-kpi-grid .inventory-kpi-body strong { color: #a8c5dd; }

@media (max-width: 640px) {
  .del-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   APPOINTMENTS PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.appt-page-shell {
  animation: inventoryFadeUp 520ms ease-out both;
}

/* 4-column KPI grid */
.appt-kpi-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 20px;
}

.appt-kpi-grid .inventory-kpi-card {
  border-radius: 14px;
  padding: 16px 18px;
  gap: 14px;
}

.appt-kpi-grid .inventory-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
}

.appt-kpi-grid .inventory-kpi-body span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a96b0;
  font-weight: 600;
}

.appt-kpi-grid .inventory-kpi-body strong {
  font-size: 26px;
  font-weight: 800;
  color: #1e3a50;
  line-height: 1.1;
}

/* Table — title cell */
.appt-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appt-title-icon {
  font-size: 13px;
  color: #7c3aed;
  flex-shrink: 0;
}

.appt-title-cell strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e3a50;
}

/* Table — date cell */
.appt-date-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.appt-date-day {
  font-size: 13px;
  font-weight: 600;
  color: #1e3a50;
}

.appt-date-time {
  font-size: 11.5px;
  font-weight: 700;
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 5px;
  padding: 1px 6px;
  display: inline-block;
  width: fit-content;
}

/* Dark mode */
[data-theme="dark"] .appt-kpi-grid .inventory-kpi-body strong { color: #a8c5dd; }
[data-theme="dark"] .appt-title-cell strong { color: #a8c5dd; }
[data-theme="dark"] .appt-title-icon { color: #a78bfa; }
[data-theme="dark"] .appt-date-day { color: #a8c5dd; }
[data-theme="dark"] .appt-date-time { background: #1a0f2e; border-color: #3b1f6e; color: #c4b5fd; }

@media (max-width: 640px) {
  .appt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   STORE CONFIG PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.cfg-page-shell { animation: inventoryFadeUp 520ms ease-out both; }

/* ── Hero banner ── */
.cfg-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(110deg, #0c2340 0%, #0f4f47 60%, #0d6b64 100%);
  border: none;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}

.cfg-hero::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.10);
  pointer-events: none;
}

.cfg-hero-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; flex-shrink: 0;
}

.cfg-hero-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}

.cfg-hero-body strong {
  font-size: 17px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cfg-hero-body span {
  font-size: 12.5px; color: rgba(165,243,252,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cfg-hero-badges {
  display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}

.cfg-hero-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}

.cfg-hero-badge.city  { background: rgba(20,184,166,0.18); border: 1px solid rgba(20,184,166,0.35); color: #5eead4; }
.cfg-hero-badge.phone { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.85); }

/* ── Security bar ── */
.cfg-security-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 18px; border-radius: 12px;
  background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #d6e3f1;
  flex-wrap: wrap;
}

.cfg-security-bar-left {
  display: flex; align-items: center; gap: 12px;
}

.cfg-security-bar-left > i { font-size: 20px; color: #0f766e; flex-shrink: 0; }

.cfg-security-bar-left strong { font-size: 13.5px; font-weight: 700; color: #1e3a50; display: block; }
.cfg-security-bar-left span   { font-size: 12px; color: #5d7d98; }

.cfg-security-bar-right {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.cfg-security-counts { display: flex; gap: 10px; }

.cfg-sec-item { font-size: 12px; color: #5d7d98; }
.cfg-sec-item strong { color: #1e3a50; }
.cfg-sec-item.warn strong { color: #dc2626; }

/* ── Form grid ── */
.cfg-grid-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

/* ── Card ── */
.cfg-card {
  background: #fff;
  border: 1px solid #dce8f4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(14,42,66,.06), 0 4px 12px rgba(14,42,66,.04);
}

.cfg-card-full { grid-column: 1 / -1; }

.cfg-card-hd {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #f4faff 0%, #f8fcff 100%);
  border-bottom: 2px solid #e0eaf4;
  border-left: 4px solid #0f766e;
}

.cfg-card-hd-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; flex-shrink: 0;
}

.cfg-card-hd > div > strong { font-size: 13.5px; font-weight: 700; color: #1e3a50; display: block; }
.cfg-card-hd > div > span   { font-size: 12px; color: #5d7d98; }

/* ── Fields inside card ── */
.cfg-fields {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 13px;
}

.cfg-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.cfg-field {
  display: flex; flex-direction: column; gap: 5px;
}

.cfg-field label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #3f607d;
  display: flex; align-items: center; gap: 5px;
}

.cfg-field label i { font-size: 11px; color: #0f766e; }

.cfg-field input,
.cfg-field select,
.cfg-field textarea {
  width: 100%; min-height: 38px;
  border: 1px solid #bed1e4; border-radius: 9px;
  background: #fff; padding: 0 12px;
  font-family: inherit; font-size: 13px; color: #1f2937;
  transition: border-color 150ms, box-shadow 150ms;
}

.cfg-field textarea { padding: 8px 12px; resize: vertical; min-height: 70px; }

.cfg-field input:focus,
.cfg-field select:focus,
.cfg-field textarea:focus {
  outline: none; border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}

.cfg-hint {
  font-size: 11.5px; color: #7a96b0; margin-top: 1px;
}

/* Amount wrap */
.cfg-amount-wrap {
  display: flex; align-items: stretch;
  border: 1px solid #bed1e4; border-radius: 9px; overflow: hidden;
  background: #fff; transition: border-color 150ms, box-shadow 150ms;
}

.cfg-amount-wrap:focus-within { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,0.12); }

.cfg-amount-pfx {
  display: flex; align-items: center; padding: 0 10px;
  background: #f4faff; border-right: 1px solid #bed1e4;
  font-size: 12px; font-weight: 700; color: #5d7d98; flex-shrink: 0;
}

.cfg-amount-wrap input {
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important; flex: 1;
}

/* ── Denomination chips ── */
.cfg-denom-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}

.cfg-denom-chip {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 6px; border: 2px solid #dce8f4; border-radius: 10px;
  background: #f8fbff; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #3a5570;
  transition: border-color 130ms, background 130ms;
  user-select: none;
}

.cfg-denom-chip input[type="checkbox"] { display: none; }

.cfg-denom-chip:has(input:checked) {
  border-color: #0f766e; background: #f0fdf4; color: #065f46;
}

/* ── Toggle switch ── */
.cfg-toggle-field { display: flex; flex-direction: column; gap: 4px; }

.cfg-toggle-wrap {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}

.cfg-toggle-wrap input[type="checkbox"] { display: none; }

.cfg-toggle-track {
  width: 40px; height: 22px; border-radius: 999px;
  background: #d1d5db; position: relative;
  flex-shrink: 0; transition: background 200ms;
}

.cfg-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left 200ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}

.cfg-toggle-wrap:has(input:checked) .cfg-toggle-track { background: #0f766e; }
.cfg-toggle-wrap:has(input:checked) .cfg-toggle-thumb { left: 21px; }

.cfg-toggle-label { font-size: 13px; font-weight: 600; color: #1e3a50; }

/* ── Location rows ── */
.cfg-location-rows { display: flex; flex-direction: column; gap: 8px; }

.cfg-location-row {
  display: grid; grid-template-columns: 28px 1fr 1fr 140px 140px 36px;
  gap: 8px; align-items: center;
  padding: 10px 12px; border-radius: 10px;
  background: #f8fbff; border: 1px solid #dce8f4;
}

.cfg-loc-num {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #1d4ed8;
}

.cfg-loc-input {
  height: 36px; border: 1px solid #bed1e4; border-radius: 8px;
  background: #fff; padding: 0 10px;
  font-family: inherit; font-size: 12.5px; color: #1f2937;
  transition: border-color 150ms;
}

.cfg-loc-input:focus { outline: none; border-color: #0f766e; }

.cfg-loc-remove {
  width: 32px; height: 32px; border-radius: 8px;
  background: #fff1f2; border: 1px solid #fca5a5;
  color: #dc2626; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 13px;
  transition: background 130ms;
}

.cfg-loc-remove:hover { background: #ffe4e6; }

.cfg-add-loc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 8px 16px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: #1d4ed8;
  background: #eff6ff; border: 1.5px dashed #93c5fd; cursor: pointer;
  transition: background 130ms, border-color 130ms;
}

.cfg-add-loc-btn:hover { background: #dbeafe; border-color: #60a5fa; }

/* ── Save bar ── */
.cfg-save-bar {
  grid-column: 1 / -1; display: flex;
  align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; border-radius: 14px;
  background: linear-gradient(90deg, #f0fdf4 0%, #ecfeff 100%);
  border: 1px solid #a7f3d0;
}

.cfg-save-hint {
  font-size: 12.5px; color: #5d7d98;
  display: flex; align-items: center; gap: 6px;
}

.cfg-save-hint i { color: #0f766e; }

.cfg-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 26px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(15,118,110,0.30);
  transition: background 140ms, box-shadow 140ms;
}

.cfg-save-btn:hover {
  background: linear-gradient(135deg, #0d6b64, #0ea89a);
  box-shadow: 0 6px 18px rgba(15,118,110,0.38);
}

/* ── Dark mode ── */
[data-theme="dark"] .cfg-security-bar { background: #0a1422; border-color: #1e3048; }
[data-theme="dark"] .cfg-security-bar-left strong { color: #a8c5dd; }
[data-theme="dark"] .cfg-sec-item { color: #3d6080; }
[data-theme="dark"] .cfg-sec-item strong { color: #a8c5dd; }
[data-theme="dark"] .cfg-card { background: #0e1826; border-color: #1e3048; }
[data-theme="dark"] .cfg-card-hd { background: #0a1422; border-color: #1e3048; }
[data-theme="dark"] .cfg-card-hd > div > strong { color: #a8c5dd; }
[data-theme="dark"] .cfg-card-hd > div > span { color: #3d6080; }
[data-theme="dark"] .cfg-field label { color: #5d7d98; }
[data-theme="dark"] .cfg-field input,
[data-theme="dark"] .cfg-field select,
[data-theme="dark"] .cfg-field textarea { background: #141f2e; border-color: #1e3048; color: #c8d8e8; }
[data-theme="dark"] .cfg-amount-pfx { background: #0a1422; border-color: #1e3048; color: #3d6080; }
[data-theme="dark"] .cfg-amount-wrap { border-color: #1e3048; background: #141f2e; }
[data-theme="dark"] .cfg-hint { color: #3d6080; }
[data-theme="dark"] .cfg-denom-chip { background: #0a1422; border-color: #1e3048; color: #7a9ab5; }
[data-theme="dark"] .cfg-denom-chip:has(input:checked) { border-color: #0f766e; background: #051a10; color: #4ade80; }
[data-theme="dark"] .cfg-toggle-track { background: #1e3048; }
[data-theme="dark"] .cfg-toggle-label { color: #a8c5dd; }
[data-theme="dark"] .cfg-location-row { background: #0a1422; border-color: #1e3048; }
[data-theme="dark"] .cfg-loc-input { background: #141f2e; border-color: #1e3048; color: #c8d8e8; }
[data-theme="dark"] .cfg-save-bar { background: #051a10; border-color: #1a4a28; }
[data-theme="dark"] .cfg-save-hint { color: #3d6080; }

@media (max-width: 768px) {
  .cfg-grid-form { grid-template-columns: 1fr; }
  .cfg-card-full { grid-column: 1; }
  .cfg-two-col { grid-template-columns: 1fr; }
  .cfg-denom-grid { grid-template-columns: repeat(4, 1fr); }
  .cfg-location-row { grid-template-columns: 28px 1fr 1fr; grid-template-rows: auto auto; }
  .cfg-save-bar { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   TRANSACTIONS PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.txn-page-shell { animation: inventoryFadeUp 520ms ease-out both; }

/* KPI grid — auto-fit, min 160px per card */
.txn-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 20px;
}

.txn-kpi-grid .inventory-kpi-card {
  border-radius: 14px;
  padding: 14px 16px;
  gap: 12px;
}

.txn-kpi-grid .inventory-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 11px; font-size: 18px; flex-shrink: 0;
}

.txn-kpi-grid .inventory-kpi-body span {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: #7a96b0; font-weight: 600;
}

.txn-kpi-grid .inventory-kpi-body strong {
  font-size: 18px; font-weight: 800; color: #1e3a50; line-height: 1.1;
}

/* Transaction no cell */
.txn-no-cell {
  display: inline-flex; align-items: center; gap: 5px;
}

.txn-no-icon { font-size: 9px; color: #a0b4c8; }

.txn-no-code {
  font-size: 12.5px; font-weight: 700;
  color: #1d4ed8; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 5px;
  padding: 2px 7px; letter-spacing: 0.01em;
}

/* Items badge */
.txn-items-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 6px; background: #f0f7ff; border: 1px solid #bfdbfe;
  font-size: 12px; font-weight: 700; color: #1d4ed8;
}

/* Filter form */
.txn-filter-form { flex-wrap: wrap; }

/* ── Pagination ── */
.txn-pgn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-top: 6px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f4faff 0%, #f8fcff 100%);
  border: 1px solid #dce8f4;
  flex-wrap: wrap;
}

.txn-pgn-info {
  font-size: 13px; color: #5d7d98; font-weight: 500;
}

.txn-pgn-info strong { color: #1e3a50; }

.txn-pgn-btns {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}

.txn-pgn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #2c4f6d; background: #fff; border: 1px solid #d0e1f0;
  text-decoration: none; transition: background 130ms, border-color 130ms, color 130ms;
  cursor: pointer;
}

.txn-pgn-btn:hover:not(.disabled):not(.active) {
  background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}

.txn-pgn-btn.active {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(15,118,110,0.28);
}

.txn-pgn-btn.disabled {
  opacity: 0.38; cursor: not-allowed; pointer-events: none;
}

.txn-pgn-ellipsis {
  font-size: 13px; color: #7a96b0; padding: 0 4px; line-height: 34px;
}

/* Dark mode */
[data-theme="dark"] .txn-kpi-grid .inventory-kpi-body strong { color: #a8c5dd; }
[data-theme="dark"] .txn-no-code { background: #0a1a3a; border-color: #1e3a70; color: #93c5fd; }
[data-theme="dark"] .txn-items-badge { background: #0a1a3a; border-color: #1e3a70; color: #93c5fd; }
[data-theme="dark"] .txn-pgn { background: #0a1422; border-color: #1e3048; }
[data-theme="dark"] .txn-pgn-info { color: #3d6080; }
[data-theme="dark"] .txn-pgn-btn { background: #0e1826; border-color: #1e3048; color: #7a9ab5; }
[data-theme="dark"] .txn-pgn-btn:hover:not(.disabled):not(.active) { background: #0a1a3a; border-color: #1e3a70; color: #93c5fd; }

@media (max-width: 640px) {
  .txn-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .txn-pgn { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   DEPOSITS PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════════ */

.dep-page-shell { animation: inventoryFadeUp 520ms ease-out both; }

/* KPI grid */
.dep-kpi-grid { grid-template-columns: repeat(4, 1fr); }

/* Deposit number cell */
.dep-no-cell { display: flex; align-items: center; gap: 8px; }
.dep-no-icon { font-size: 13px; color: #0d9488; opacity: .7; }
.dep-no-code {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4;
  padding: 3px 8px; border-radius: 6px; font-family: 'Courier New', monospace;
}
[data-theme="dark"] .dep-no-code { background: #042f2e; border-color: #0f766e; color: #2dd4bf; }

/* Amount chip */
.dep-amount-chip {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; color: #0369a1;
  background: #e0f2fe; border: 1px solid #bae6fd;
  padding: 3px 10px; border-radius: 20px;
}
[data-theme="dark"] .dep-amount-chip { background: #082f49; border-color: #0369a1; color: #38bdf8; }

/* Balance chip */
.dep-balance-chip {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; color: #047857;
  background: #d1fae5; border: 1px solid #6ee7b7;
  padding: 3px 10px; border-radius: 20px;
}
.dep-balance-chip.dep-balance-zero {
  color: #6b7280; background: #f3f4f6; border-color: #d1d5db;
}
[data-theme="dark"] .dep-balance-chip { background: #022c22; border-color: #047857; color: #34d399; }
[data-theme="dark"] .dep-balance-chip.dep-balance-zero { background: #1a1f2a; border-color: #374151; color: #6b7280; }

/* Method badge */
.dep-method-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: #7c3aed;
  background: #ede9fe; border: 1px solid #c4b5fd;
  padding: 3px 9px; border-radius: 20px;
}
[data-theme="dark"] .dep-method-badge { background: #1e0a3c; border-color: #7c3aed; color: #a78bfa; }

/* Status chips */
.dep-status-chip {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px;
}
.dep-status-active    { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.dep-status-used      { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.dep-status-partially-used { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.dep-status-refunded  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
[data-theme="dark"] .dep-status-active { background: #022c22; color: #34d399; border-color: #047857; }
[data-theme="dark"] .dep-status-used   { background: #1a1f2a; color: #9ca3af; border-color: #374151; }
[data-theme="dark"] .dep-status-partially-used { background: #2d1a00; color: #fbbf24; border-color: #92400e; }
[data-theme="dark"] .dep-status-refunded { background: #2d0a0a; color: #f87171; border-color: #991b1b; }

/* Reference cell */
.dep-ref-cell { font-size: 12.5px; color: #374151; }
.dep-ref-empty { color: #d1d5db; }
[data-theme="dark"] .dep-ref-empty { color: #374151; }

/* Date cell */
.dep-date-cell { display: flex; flex-direction: column; gap: 2px; }
.dep-date-day  { font-size: 12.5px; font-weight: 600; color: #374151; }
.dep-date-time { font-size: 11px; color: #9ca3af; }
[data-theme="dark"] .dep-date-day { color: #9ca3af; }

/* Refund button */
.dep-refund-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #dc2626;
  background: #fff; border: 1.5px solid #fca5a5;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.dep-refund-btn:hover { background: #fee2e2; border-color: #dc2626; }
[data-theme="dark"] .dep-refund-btn { background: #1a0505; border-color: #7f1d1d; color: #f87171; }
[data-theme="dark"] .dep-refund-btn:hover { background: #2d0a0a; border-color: #dc2626; }

.dep-action-none { color: #d1d5db; font-size: 13px; }

/* Premium empty state (shared) */
.inv-empty {
  text-align: center; padding: 52px 20px !important; color: #9ca3af;
}
.inv-empty i { font-size: 2rem; display: block; margin-bottom: 10px; color: #d1d5db; }
.inv-empty span { display: block; font-size: 13.5px; }
.inv-empty strong { color: #6b7280; }
[data-theme="dark"] .inv-empty i { color: #374151; }
[data-theme="dark"] .inv-empty { color: #4b5563; }

/* Flash alert inside shell */
.inv-flash { margin-bottom: 18px; padding: .85rem 1.25rem; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
.inv-flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.inv-flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.inv-flash-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
[data-theme="dark"] .inv-flash-success { background: #022c22; color: #34d399; border-color: #047857; }
[data-theme="dark"] .inv-flash-error   { background: #2d0a0a; color: #f87171; border-color: #991b1b; }
[data-theme="dark"] .inv-flash-info    { background: #082f49; color: #38bdf8; border-color: #0369a1; }

@media (max-width: 900px) { .dep-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dep-kpi-grid { grid-template-columns: 1fr; } }

/* ================================================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   Safe additions — only activate at narrow widths, never override
   desktop behaviour. Do not edit unless you understand the cascade.
   ================================================================ */

/* Always allow tables to scroll horizontally */
.data-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 900 px — tablets ────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Dashboard: analytics two-col grid collapses */
  .dash-analytics-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-analytics-left {
    gap: 16px !important;
  }
  /* Side panels go full width under the chart */
  .side-panels {
    grid-template-columns: 1fr !important;
  }
  /* Dashboard KPI: 4 → 2 cols */
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* inv-topbar already stacks at 900px in embedded CSS;
     ensure right side wraps properly */
  .inv-topbar-right {
    flex-wrap: wrap;
  }
}

/* ── 768 px — phones landscape ───────────────────────────────── */
@media (max-width: 768px) {
  /* Keep topbar to a single compact row */
  .topbar {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    gap: 0;
  }
  .topbar-left {
    width: auto !important;
    flex-shrink: 0;
    gap: 10px;
  }
  .topbar-actions {
    width: auto !important;
    flex: 1;
    justify-content: flex-end !important;
    gap: 6px;
    padding-bottom: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }

  /* Pills slightly more compact */
  .topbar-actions .pill {
    padding: 4px 9px;
    font-size: 12px;
    height: 30px;
  }
  .topbar-actions .theme-toggle-btn {
    width: 30px;
    height: 30px;
  }

  /* Page content margins */
  .page-content,
  .stats-grid,
  .welcome,
  .quick-actions,
  .bottom-grid,
  .db-warning,
  .setup-check {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  /* Dashboard hero padding */
  #dash-smart-view > div:first-child > div:first-child {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }

  /* Dashboard KPI: 2 cols */
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Smart tiles: 3 cols */
  .dash-smart-tiles {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Analytics grid: single col */
  .dash-analytics-grid {
    grid-template-columns: 1fr !important;
  }

  /* All page KPI grids */
  .inventory-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .customers-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Transactions filter row */
  .txn-filters-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .txn-date-range {
    flex-wrap: wrap;
  }
  .txn-date-range input {
    width: 100% !important;
  }

  /* Report grids */
  .report-snapshot-grid,
  .report-kpi-grid,
  .report-half-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modals: 95 vw */
  .modal {
    width: 95vw !important;
    max-height: 88vh !important;
  }
  .pos-dialog {
    width: min(95vw, 540px) !important;
  }

  /* Attendance stats */
  .att-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 640 px — phones portrait ────────────────────────────────── */
@media (max-width: 640px) {
  /* Page shells: less padding */
  .inventory-page-shell,
  .customers-page-shell,
  .attendance-page-shell {
    padding: 10px !important;
  }

  /* Dashboard: hero inner text */
  #dash-smart-view > div:first-child > div:first-child h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  #dash-smart-view > div:first-child > div:first-child {
    padding: 16px !important;
    gap: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #dash-smart-view > div:first-child > div:first-child > div:last-child {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  #dash-smart-view > div:first-child > div:first-child > div:last-child button {
    flex: 1;
    justify-content: center !important;
  }

  /* KPI cards: compact values */
  .dash-kpi-value {
    font-size: 22px !important;
    letter-spacing: -.03em !important;
  }
  .dash-kpi-card {
    padding: 16px 16px 14px !important;
    border-radius: 16px !important;
  }

  /* Smart tiles: 3 cols */
  .dash-smart-tiles {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .dst-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }
  .dst-body strong { font-size: 12px !important; }
  .dst-body span   { font-size: 10px !important; }

  /* Chart panel */
  .chart-container {
    height: 200px !important;
  }

  /* Panel headers compact */
  .dashboard-panel > .panel-header,
  .panel-header {
    padding: 12px 14px 10px !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Inventory filter bar */
  .inv-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .inv-search-wrap {
    max-width: 100% !important;
    width: 100%;
  }
  .inv-filter-controls {
    flex-wrap: wrap;
    gap: 6px;
  }
  .inv-select {
    flex: 1;
    min-width: 120px;
  }

  /* All KPI grids 2 cols */
  .inventory-kpi-grid,
  .customers-kpi-grid,
  .dep-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Modals full-width */
  .modal,
  .pos-dialog {
    width: calc(100vw - 12px) !important;
    border-radius: 14px !important;
    max-height: 90vh !important;
  }

  /* Sales page POS shell */
  .sales-pos-shell {
    padding: 8px !important;
  }

  /* Attendance cards */
  .att-kpi-grid,
  .att-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Deposits / expenses / other page KPI */
  .txn-stats-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .txn-stat-card {
    flex: 1 1 140px;
    min-width: 130px;
    padding: 10px 12px;
  }
}

/* ── 480 px — small phones ───────────────────────────────────── */
@media (max-width: 480px) {
  /* Even tighter page margins */
  .page-content,
  .stats-grid,
  .welcome,
  .quick-actions,
  .bottom-grid,
  .db-warning,
  .setup-check {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Topbar: hide date pill at very small width */
  .tb-hide-xs {
    display: none !important;
  }

  /* Dashboard: 2-col KPI */
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .dash-kpi-value {
    font-size: 18px !important;
  }
  .dash-kpi-label {
    font-size: 10px !important;
  }
  .dash-kpi-hint {
    font-size: 10.5px !important;
  }

  /* Smart tiles: 2 cols on tiny phones */
  .dash-smart-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Inventory KPI: 2 cols */
  .inventory-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Data tables: smaller text */
  .data-table,
  .inv-table {
    font-size: 12px;
  }
  .data-table th,
  .data-table td,
  .inv-table thead th,
  .inv-table tbody td {
    padding: 7px 9px !important;
  }

  /* Modals: tiny screens */
  .modal,
  .pos-dialog {
    width: calc(100vw - 8px) !important;
    max-height: 92vh !important;
  }
  .modal .modal-header,
  .pos-modal-head {
    padding: 12px 14px !important;
  }
  .modal .modal-body {
    padding: 12px !important;
  }
  .modal .modal-footer,
  .pos-modal-foot {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal .modal-footer .btn,
  .pos-modal-foot .btn {
    flex: 1;
    min-width: 90px;
    justify-content: center;
  }

  /* Inv buttons: compact */
  .inv-btn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  /* Chart: shorter */
  .chart-container {
    height: 170px !important;
  }

  /* Page header: stack */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-header-actions,
  .page-header > div:last-child {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* KPI stat cards (transactions page) */
  .txn-stat-card {
    flex: 1 1 120px;
    min-width: 110px;
  }
  .txn-stat-card strong {
    font-size: 16px !important;
  }

  /* Attendance KPI */
  .att-kpi-grid,
  .att-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Deposits KPI */
  .dep-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Suppliers / employees KPI */
  .inventory-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Section headers compact */
  .dash-section-header {
    margin-bottom: 8px !important;
  }

  /* Side panels spacing */
  .side-panels {
    gap: 12px !important;
  }
}

/* ── Sales / POS page — full mobile overhaul ────────────────── */
/*
 * Root problem: .sales-layout has height:100% but its parent
 * (.sales-pos-shell) switches to height:auto at 1024px, which
 * makes height:100% resolve to 0. Products panel collapses to an
 * invisible white block; cart header falls to the page bottom.
 *
 * Fix: switch the whole shell to a flex-column viewport layout so
 * every pixel of height is explicitly accounted for.
 */
@media (max-width: 1024px) {
  /* Shell = full remaining viewport height, flex column */
  .sales-pos-shell {
    height: calc(100vh - 64px) !important;
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 12px !important;
    box-sizing: border-box;
  }

  /* Layout is now a flex column that fills the shell */
  .sales-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 12px !important;
  }

  /* Products panel: takes remaining space, scrolls internally */
  .sales-products-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Products grid: fills panel, scrolls */
  .sales-products-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Cart panel: fixed portion of screen, scrolls internally */
  .sales-current-panel {
    flex-shrink: 0 !important;
    height: 44vh !important;
    max-height: 44vh !important;
    min-height: 120px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Cart items area inside the cart panel */
  .sales-cart-items {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }
}

@media (max-width: 768px) {
  /* Tighten topbar height on sales page */
  .sales-page .topbar {
    min-height: 52px !important;
  }

  /* Re-calc shell to account for 52px topbar */
  .sales-pos-shell {
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
  }

  /* Products panel: compact header */
  .sales-products-header {
    margin-bottom: 8px !important;
  }
  .sales-products-header h3 {
    font-size: 18px !important;
  }
  .sales-products-header p {
    display: none;
  }

  /* Search bar */
  .sales-search-wrap {
    margin-bottom: 8px !important;
  }

  /* Category row: horizontal scroll */
  .sales-category-shell {
    margin-bottom: 8px !important;
  }
  .sales-category-meta {
    display: none;
  }

  /* Cart panel: 40vh on phones */
  .sales-current-panel {
    height: 40vh !important;
    max-height: 40vh !important;
  }
}

@media (max-width: 640px) {
  /* Even more compact on small phones */
  .sales-pos-shell {
    padding: 8px !important;
    gap: 8px !important;
  }

  /* Product cards: 2 columns */
  .sales-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Cart panel: 38vh */
  .sales-current-panel {
    height: 38vh !important;
    max-height: 38vh !important;
  }

  .sales-current-header h3 {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  /* Single-column products on very small phones */
  .sales-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Compact product cards */
  .sales-product-card {
    padding: 10px 8px !important;
  }

  /* Cart header compact */
  .sales-current-header {
    margin-bottom: 6px !important;
  }
  .sales-current-header h3 {
    font-size: 16px !important;
  }
}

/* ── 380 px — very small (iPhone SE / budget phones) ─────────── */
@media (max-width: 380px) {
  .dashboard-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-smart-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .inventory-kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .topbar strong {
    font-size: 14px !important;
  }
}

/* ── Topbar pill visibility helpers ─────────────────────────── */
/* tb-hide-sm: hidden at ≤640px */
@media (max-width: 640px) {
  .tb-hide-sm {
    display: none !important;
  }
}
/* tb-hide-xs: hidden at ≤480px (already in 480px block, kept for clarity) */

/* ── usr-stats-row: override inline grid-template on mobile ──── */
/* Some pages set grid-template-columns via inline style. Use     */
/* !important here so media queries can still collapse the grid.  */
@media (max-width: 560px) {
  .usr-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 360px) {
  .usr-stats-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Topbar page title: prevent overflow on very small screens ── */
@media (max-width: 480px) {
  .topbar strong {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}
@media (max-width: 360px) {
  .topbar strong {
    max-width: 90px;
  }
}

/* ── Table-wrapper: force horizontal scroll on mobile ──────────── */
/*                                                                   */
/* Both .data-table-container and .inventory-table-container have   */
/* overflow:hidden. Using the two-value shorthand + !important is   */
/* the most reliable way to override both on mobile (iOS included). */
/* overflow: auto hidden → x scrolls, y is clipped (no extra bar). */
@media (max-width: 900px) {
  .table-wrapper {
    overflow: auto hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .data-table-container,
  .inventory-table-container {
    overflow: auto hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Inventory filter bar: don't scroll with the table ────────
   * position:sticky left:0 keeps it anchored while the table
   * inside the same scroll container scrolls right.              */
  .inv-filter-bar {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: var(--inv-surface, #fff) !important;
    width: 100% !important;
  }

  /* ── min-width per page so columns never collapse to nothing ── */
  /* Default: most tables with 5-6 columns */
  .table-wrapper .data-table,
  .data-table-container .data-table {
    min-width: 560px;
  }
  /* Inventory: 9 columns (Product, Cat, Stock, Reorder, Cost,
     Price, Status, Variants, Actions) */
  .inventory-page-shell .inv-table {
    min-width: 760px !important;
  }
  /* Suppliers / customers / transactions: many columns */
  .suppliers-page .data-table,
  .customers-page .data-table,
  .transactions-page .data-table {
    min-width: 680px;
  }
}

/* ── Sales cart panel: sticky charge button, always visible ──────
 *
 * Root problem: the panel uses overflow:hidden — when the viewport
 * is too short, the summary + charge button are clipped and
 * invisible. No amount of fixed vh heights can cover every phone.
 *
 * Solution:
 *   1. Panel switches to overflow-y:auto (scrollable).
 *   2. Cart items keep their own inner scroll (overscroll-behavior:
 *      contain prevents unintended panel scroll while scrolling items).
 *   3. Summary + charge button get position:sticky bottom:0 so they
 *      are ALWAYS pinned to the visible bottom of the panel,
 *      regardless of viewport height or browser chrome.
 *   4. Note input hidden on mobile to save space.
 *   5. Payment tiles, header, customer selector all compacted.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Panel: scrollable container, compact padding */
  .sales-current-panel {
    height: 55vh !important;
    max-height: 55vh !important;
    padding: 10px 12px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Header: tighter */
  .sales-current-header {
    margin-bottom: 4px !important;
  }
  .sales-current-header h3 {
    font-size: 17px !important;
  }

  /* Customer selector: compact */
  .sales-page .sales-customer-wrap {
    margin-bottom: 4px !important;
  }
  .sales-page .sales-cust-combo {
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  /* Cart items: inner scroll, don't chain scroll to panel */
  .sales-cart-items {
    min-height: 80px !important;
    flex: 1 1 auto !important;
    overscroll-behavior: contain !important;
  }

  /* Payment tiles: compact — 4 per row */
  .sales-page .panel-payment-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin: 4px 0 !important;
  }
  .sales-page .panel-payment-tile {
    height: 42px !important;
    font-size: 9.5px !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }
  .sales-page .panel-payment-tile i {
    font-size: 12px !important;
  }

  /* Note input: hide on mobile to save vertical space */
  .sales-page .sales-note-hidden {
    display: none !important;
  }

  /* ── Sticky bottom zone: summary + charge button ──────────────
   * position:sticky inside an overflow-y:auto flex container pins
   * these elements to the visible bottom of the panel at all times.
   * The dark background covers any cart items scrolling beneath.  */
  .sales-page .sales-summary {
    position: sticky !important;
    bottom: 52px !important;   /* height of panel-bottom + margin */
    background: #0c1f34 !important;
    padding-top: 5px !important;
    margin-top: 5px !important;
    z-index: 4 !important;
  }
  .sales-page .sales-summary-row {
    padding: 1px 0 !important;
    font-size: 12px !important;
  }
  .sales-page .sales-summary-row.total span,
  .sales-page .sales-summary-row.total strong {
    font-size: 16px !important;
  }

  .sales-page .sales-panel-bottom {
    position: sticky !important;
    bottom: 0 !important;
    background: #0c1f34 !important;
    padding: 6px 0 10px !important;
    z-index: 5 !important;
    margin-top: 0 !important;
    gap: 6px !important;
  }
  .sales-page .panel-discount-wrap {
    height: 40px !important;
    width: 80px !important;
  }
  .sales-page .sales-charge-btn {
    height: 40px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 768px) {
  .sales-current-panel {
    height: 53vh !important;
    max-height: 53vh !important;
  }
}

@media (max-width: 640px) {
  .sales-current-panel {
    height: 52vh !important;
    max-height: 52vh !important;
    padding: 8px 10px 0 !important;
  }
  .sales-page .panel-payment-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .sales-current-panel {
    height: 50vh !important;
    max-height: 50vh !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE HORIZONTAL SCROLL NAV  (mobile-friendly left/right btns)
   ═══════════════════════════════════════════════════════════════ */

/* Outer wrapper injected by JS — provides the positioning context */
.tbl-scroll-outer {
  position: relative;
}

/* Left / right arrow buttons */
.tbl-scroll-btn {
  display: none;          /* hidden until JS adds .visible        */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #c8d8e8;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px rgba(10, 30, 60, 0.18);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: #153d5a;
  transition: background 140ms, box-shadow 140ms, transform 140ms;
  pointer-events: all;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.tbl-scroll-btn.visible {
  display: flex;
}

.tbl-scroll-btn:hover {
  background: #f0f7ff;
  box-shadow: 0 4px 14px rgba(10, 30, 60, 0.22);
}

.tbl-scroll-btn:active {
  transform: translateY(-50%) scale(0.9);
}

.tbl-scroll-left  { left:  6px; }
.tbl-scroll-right { right: 6px; }

/* Fade edges — hint that there's more content */
.tbl-scroll-outer::before,
.tbl-scroll-outer::after {
  content: '';
  position: absolute;
  top: 38px;           /* below filter bar */
  bottom: 0;
  width: 48px;
  z-index: 20;
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms;
}
.tbl-scroll-outer::before {
  left: 0;
  background: linear-gradient(to right, rgba(248,250,253,.85), transparent);
}
.tbl-scroll-outer::after {
  right: 0;
  background: linear-gradient(to left, rgba(248,250,253,.85), transparent);
}
/* Hide fade when no more content in that direction */
.tbl-scroll-outer.at-left::before  { opacity: 0; }
.tbl-scroll-outer.at-right::after  { opacity: 0; }

/* Dark mode */
[data-theme="dark"] .tbl-scroll-btn {
  background: rgba(14, 24, 42, 0.96);
  border-color: #243550;
  color: #a8c4dc;
}
[data-theme="dark"] .tbl-scroll-btn:hover {
  background: rgba(22, 36, 58, 0.98);
}
[data-theme="dark"] .tbl-scroll-outer::before {
  background: linear-gradient(to right, rgba(10,18,32,.85), transparent);
}
[data-theme="dark"] .tbl-scroll-outer::after {
  background: linear-gradient(to left, rgba(10,18,32,.85), transparent);
}

/* Show right-scroll btn immediately for known wide tables on mobile */
@media (max-width: 900px) {
  .inventory-page-shell .tbl-scroll-right,
  .suppliers-page      .tbl-scroll-right,
  .customers-page      .tbl-scroll-right,
  .transactions-page   .tbl-scroll-right {
    display: flex !important;
  }
}

/* Generic pagination bar (returns page and others) */
.pagination-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 14px 4px 4px; list-style: none; margin: 0;
}
.pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #2c4f6d; background: #fff; border: 1px solid #d0e1f0;
  text-decoration: none; transition: background 130ms, border-color 130ms, color 130ms;
  cursor: pointer;
}
.pag-btn:hover:not(.disabled):not(.active) {
  background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}
.pag-btn.active {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(15,118,110,0.28);
}
.pag-btn.disabled {
  opacity: 0.38; cursor: not-allowed; pointer-events: none;
}
.pag-ellipsis {
  font-size: 13px; color: #7a96b0; padding: 0 4px; line-height: 34px;
}
.pag-info {
  margin-left: 8px; font-size: 12px; color: #7a96b0;
}
[data-theme="dark"] .pag-btn { background: #0e1826; border-color: #1e3048; color: #7a9ab5; }
[data-theme="dark"] .pag-btn:hover:not(.disabled):not(.active) { background: #0a1a3a; border-color: #1e3a70; color: #93c5fd; }
[data-theme="dark"] .pag-info { color: #3d6080; }

/* ── Dark mode: Receive Debt Payment modal (dpf-* premium design) ── */
[data-theme="dark"] .modal.modal-debt-payment {
  background: #0e1826 !important;
  border-color: #1e3048 !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 12px 30px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .modal.modal-debt-payment .modal-body {
  background: linear-gradient(170deg, #0e1826 0%, #0a1520 100%) !important;
}
[data-theme="dark"] .modal.modal-debt-payment .modal-footer {
  background: linear-gradient(180deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
}

/* Hero */
[data-theme="dark"] .dpf-hero {
  background: linear-gradient(120deg, #071a30 0%, #091f38 100%) !important;
  border-color: rgba(56,189,248,0.12) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .dpf-hero-name { color: #dde8f4 !important; }
[data-theme="dark"] .dpf-hero-meta { color: #5d8aaa !important; }
[data-theme="dark"] .dpf-hero-balance {
  background: rgba(251,191,36,0.08) !important;
  border-color: rgba(251,191,36,0.2) !important;
}
[data-theme="dark"] .dpf-balance-label { color: #fbbf24 !important; }
[data-theme="dark"] .dpf-balance-amount { color: #fde68a !important; }

/* Label */
[data-theme="dark"] .dpf-label { color: #5d7d98 !important; }

/* Credit selector */
[data-theme="dark"] .dpf-select {
  background: #111e2e !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dpf-select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .dpf-locked-credit {
  background: linear-gradient(135deg, #111e2e, #0e1826) !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dpf-locked-credit i { color: #38bdf8 !important; }

/* Amount section */
[data-theme="dark"] .dpf-amount-section {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #243550 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}
[data-theme="dark"] .dpf-amount-wrap {
  background: #0a1520 !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .dpf-amount-wrap:focus-within {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .dpf-amount-pfx {
  background: linear-gradient(180deg, #111e2e, #0e1826) !important;
  border-color: #1e3048 !important;
  color: #7ab8e8 !important;
}
[data-theme="dark"] .dpf-amount-input {
  background: transparent !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dpf-amount-input.is-invalid { color: #f87171 !important; }
[data-theme="dark"] .dpf-amount-input::placeholder { color: #2a4060 !important; }

/* Progress bar */
[data-theme="dark"] .dpf-progress-track { background: #1e3048 !important; }
[data-theme="dark"] .dpf-progress-fill {
  background: linear-gradient(90deg, #0f766e, #0d9488) !important;
}

/* Hint */
[data-theme="dark"] .dpf-hint { color: #5d8aaa !important; }
[data-theme="dark"] .dpf-hint.dpf-hint-error { color: #f87171 !important; }

/* Quick pills */
[data-theme="dark"] .dpf-quick {
  background: linear-gradient(180deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .dpf-quick:hover,
[data-theme="dark"] .dpf-quick:focus-visible {
  border-color: #0d9488 !important;
  background: linear-gradient(180deg, #0d2a28 0%, #0a2220 100%) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 2px 8px rgba(13,148,136,0.2) !important;
}
[data-theme="dark"] .dpf-quick-full {
  border-color: #0a4a2a !important;
  background: linear-gradient(180deg, #0a2018 0%, #071812 100%) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dpf-quick-full:hover,
[data-theme="dark"] .dpf-quick-full:focus-visible {
  background: linear-gradient(180deg, #0f2e20 0%, #0a2018 100%) !important;
  border-color: #166534 !important;
  color: #a7f3d0 !important;
}
[data-theme="dark"] .dpf-quick-fixed {
  border-color: #2a3a1a !important;
  background: linear-gradient(180deg, #141e0a 0%, #0f1807 100%) !important;
  color: #a3c87a !important;
}
[data-theme="dark"] .dpf-quick-fixed:hover,
[data-theme="dark"] .dpf-quick-fixed:focus-visible {
  border-color: #3d5c20 !important;
  background: linear-gradient(180deg, #1a2a0e 0%, #141e0a 100%) !important;
  color: #bef264 !important;
}

/* Method pills */
[data-theme="dark"] .dpf-method-pill {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
  color: #7ab8e8 !important;
}
[data-theme="dark"] .dpf-method-pill i { color: #4a7a9a !important; }
[data-theme="dark"] .dpf-method-pill:hover {
  border-color: #0d9488 !important;
  background: linear-gradient(160deg, #0d2a28 0%, #0a2220 100%) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dpf-method-pill:hover i { color: #0d9488 !important; }
[data-theme="dark"] .dpf-method-pill.dpf-method-active {
  border-color: #0d9488 !important;
  background: linear-gradient(160deg, #0d2a28 0%, #0a2220 100%) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 2px 10px rgba(13,148,136,0.25) !important;
}
[data-theme="dark"] .dpf-method-pill.dpf-method-active i { color: #14b8a6 !important; }

/* Reference input */
[data-theme="dark"] .dpf-ref-input {
  background: #111e2e !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dpf-ref-input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .dpf-ref-input::placeholder { color: #2a4060 !important; }

/* Shortcut hint */
[data-theme="dark"] .dpf-shortcut { color: #3d6080 !important; }
[data-theme="dark"] .dpf-shortcut kbd {
  background: #0e1826 !important;
  border-color: #1e3048 !important;
  color: #5d8aaa !important;
}

/* ══════════════════════════════════════════════════════
   DEBT PAYMENT HISTORY — Premium Content (dph-*)
══════════════════════════════════════════════════════ */
.dph {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hero */
.dph-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0f2d52 0%, #0a3d62 100%);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 4px 18px rgba(8,24,50,0.18);
}
.dph-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.dph-hero-info { flex: 1; min-width: 0; }
.dph-hero-name {
  font-size: 15px;
  font-weight: 700;
  color: #e8f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dph-hero-meta {
  font-size: 12px;
  color: #7ab8e8;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dph-hero-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.28);
}
.dph-balance-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
}
.dph-balance-amount {
  font-size: 16px;
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
}

/* Stats row */
.dph-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dph-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid #d0e4f4;
  background: linear-gradient(160deg, #fff 0%, #f0f8ff 100%);
  text-align: center;
}
.dph-stat-icon { font-size: 18px; }
.dph-stat-total .dph-stat-icon { color: #0369a1; }
.dph-stat-paid .dph-stat-icon { color: #059669; }
.dph-stat-count .dph-stat-icon { color: #7c3aed; }
.dph-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a7a96;
}
.dph-stat-value {
  font-size: 15px;
  font-weight: 800;
  color: #0d2d4a;
  white-space: nowrap;
}
.dph-stat-total .dph-stat-value { color: #0369a1; }
.dph-stat-paid .dph-stat-value { color: #059669; }
.dph-stat-count .dph-stat-value { color: #7c3aed; }

/* Toolbar */
.dph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, #f7fbff 0%, #edf5fc 100%);
  border: 1px solid #cfe0f0;
}
.dph-toolbar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dph-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a6d8c;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dph-filter-select {
  min-height: 38px;
  border: 1.5px solid #c2d8ee;
  border-radius: 9px;
  background: #fff;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1a3550;
  cursor: pointer;
  transition: border-color .18s;
}
.dph-filter-select:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.dph-reset-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid #c2d8ee;
  background: linear-gradient(180deg, #fff 0%, #eaf3fb 100%);
  font-size: 12px;
  font-weight: 700;
  color: #1a4a72;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  align-self: flex-end;
}
.dph-reset-btn:hover { border-color: #0d9488; background: linear-gradient(180deg, #f0fafa 0%, #d6f5f0 100%); color: #0d4a44; }
.dph-meta-chip {
  font-size: 11px;
  font-weight: 600;
  color: #4a7a9a;
  background: rgba(13,148,136,0.08);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  align-self: flex-end;
}

/* Table */
.dph-table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d0e4f4;
}
.dph-table thead th {
  background: linear-gradient(180deg, #e8f4ff 0%, #ddeefa 100%);
  color: #1a3a58;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 2px solid #c0d8ee;
}
.dph-table tbody tr:hover td { background: #f0f8ff !important; }
.dph-amount-cell {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #0d4a88;
  background: rgba(3,105,161,0.07);
  border: 1px solid rgba(3,105,161,0.18);
  border-radius: 8px;
  padding: 3px 10px;
}
.dph-method-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #1a3a58;
  background: rgba(13,148,136,0.06);
  border: 1px solid rgba(13,148,136,0.15);
  border-radius: 8px;
  padding: 3px 10px;
}
.dph-method-cell i { color: #0d9488; }
.dph-ref-cell { font-size: 12px; color: #4a6a86; font-weight: 600; }
.dph-date-cell { font-size: 12px; color: #5a7a96; }
.dph-empty-row { text-align: center; color: #6b7280; padding: 24px 12px !important; font-style: italic; }

/* ══════════════════════════════════════════════════════
   PRODUCTS TAKEN — Premium Content (dpp-*)
══════════════════════════════════════════════════════ */
.dpp {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hero */
.dpp-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0f2d52 0%, #0a3d62 100%);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 4px 18px rgba(8,24,50,0.18);
}
.dpp-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.dpp-hero-info { flex: 1; min-width: 0; }
.dpp-hero-name {
  font-size: 15px;
  font-weight: 700;
  color: #e8f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dpp-hero-meta {
  font-size: 12px;
  color: #7ab8e8;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dpp-hero-counts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.dpp-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.dpp-count-original {
  background: rgba(5,150,105,0.15);
  border: 1px solid rgba(5,150,105,0.32);
  color: #d1fae5;
}
.dpp-count-added {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  color: #fde68a;
}

/* Toolbar */
.dpp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, #f7fbff 0%, #edf5fc 100%);
  border: 1px solid #cfe0f0;
}
.dpp-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a6d8c;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dpp-filter-select {
  min-height: 36px;
  border: 1.5px solid #c2d8ee;
  border-radius: 9px;
  background: #fff;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1a3550;
  cursor: pointer;
  transition: border-color .18s;
}
.dpp-filter-select:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.dpp-meta-chip {
  font-size: 11px;
  font-weight: 600;
  color: #4a7a9a;
  background: rgba(13,148,136,0.08);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Table */
.dpp-table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d0e4f4;
}
.dpp-table thead th {
  background: linear-gradient(180deg, #e8f4ff 0%, #ddeefa 100%);
  color: #1a3a58;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 2px solid #c0d8ee;
}
.dpp-table tbody tr:hover td { background: #f0f8ff !important; }

/* ══════════════════════════════════════════════════════
   ADD FORGOTTEN PRODUCT — Premium Content (dpa-*)
══════════════════════════════════════════════════════ */
.dpa {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Context strip */
.dpa-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0f2d52 0%, #0a3d62 100%);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 4px 18px rgba(8,24,50,0.14);
  flex-wrap: wrap;
}
.dpa-context-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dpa-context-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.dpa-context-info { min-width: 0; }
.dpa-context-name {
  font-size: 15px;
  font-weight: 700;
  color: #e8f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dpa-context-ref {
  font-size: 12px;
  color: #7ab8e8;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dpa-context-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.dpa-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.dpa-chip-catalog {
  background: rgba(13,148,136,0.15);
  border: 1px solid rgba(13,148,136,0.32);
  color: #99f6e4;
}
.dpa-chip-stock {
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.28);
  color: #fde68a;
}

/* Editor card */
.dpa-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #ffffff 0%, #f2f8ff 100%);
  border: 1.5px solid #cfe0f0;
  box-shadow: 0 2px 12px rgba(10,40,80,0.06);
}
.dpa-editor-search-row,
.dpa-editor-main-row {
  display: grid;
  gap: 12px;
}
.dpa-editor-main-row {
  grid-template-columns: 1fr auto;
}
.dpa-field { display: flex; flex-direction: column; gap: 5px; }
.dpa-field-product { min-width: 0; }
.dpa-field-qty { width: 140px; flex-shrink: 0; }
.dpa-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a6d8c;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dpa-search-input,
.dpa-select,
.dpa-qty-input {
  min-height: 42px;
  border: 1.5px solid #c2d8ee;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1a3550;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.dpa-search-input:focus,
.dpa-select:focus,
.dpa-qty-input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.dpa-textarea {
  border: 1.5px solid #c2d8ee;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font-size: 13px;
  color: #1a3550;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.dpa-textarea:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.dpa-search-meta {
  font-size: 11px;
  font-weight: 600;
  color: #4a6a84;
  min-height: 14px;
}
.dpa-hint {
  font-size: 11px;
  font-weight: 600;
  color: #5a7a96;
  min-height: 14px;
}
.dpa-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}
.dpa-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(13,148,136,0.3);
}
.dpa-add-btn:hover {
  background: linear-gradient(135deg, #0d6660 0%, #0c847a 100%);
  box-shadow: 0 4px 14px rgba(13,148,136,0.4);
  transform: translateY(-1px);
}
.dpa-shortcut-hint {
  font-size: 11px;
  font-weight: 600;
  color: #5a7a96;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dpa-shortcut-hint kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #b8cce0;
  background: #edf4fb;
  font-size: 10px;
  font-weight: 800;
  color: #2c5878;
  font-family: inherit;
}

/* Summary bar */
.dpa-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, #f4f9ff 0%, #edf5fc 100%);
  border: 1px solid #cfe0f0;
}
.dpa-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(3,105,161,0.07);
  border: 1px solid rgba(3,105,161,0.18);
  color: #1a4a72;
}
.dpa-summary-chip.is-in-stock { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.25); color: #065f46; }
.dpa-summary-chip.is-out-of-stock { background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.22); color: #991b1b; }
.dpa-summary-total {
  margin-left: auto;
  background: rgba(13,148,136,0.08);
  border-color: rgba(13,148,136,0.22);
  color: #0d4a44;
}

/* Table */
.dpa-table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d0e4f4;
}
.dpa-table thead th {
  background: linear-gradient(180deg, #e8f4ff 0%, #ddeefa 100%);
  color: #1a3a58;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 2px solid #c0d8ee;
}
.dpa-table tbody tr:hover td { background: #f0f8ff !important; }

/* ══════════════════════════════════════════════════════
   DARK MODE — dph-* / dpp-* / dpa-*
══════════════════════════════════════════════════════ */

/* Shared hero (dph / dpp) */
[data-theme="dark"] .dph-hero,
[data-theme="dark"] .dpp-hero,
[data-theme="dark"] .dpa-context {
  background: linear-gradient(120deg, #071a30 0%, #091f38 100%) !important;
  border-color: rgba(56,189,248,0.12) !important;
}
[data-theme="dark"] .dph-hero-name,
[data-theme="dark"] .dpp-hero-name { color: #dde8f4 !important; }
[data-theme="dark"] .dph-hero-meta,
[data-theme="dark"] .dpp-hero-meta { color: #5d8aaa !important; }
[data-theme="dark"] .dph-hero-balance {
  background: rgba(251,191,36,0.08) !important;
  border-color: rgba(251,191,36,0.2) !important;
}
[data-theme="dark"] .dph-balance-label { color: #fbbf24 !important; }
[data-theme="dark"] .dph-balance-amount { color: #fde68a !important; }

/* Stats */
[data-theme="dark"] .dph-stat {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .dph-stat-label { color: #5d7d98 !important; }
[data-theme="dark"] .dph-stat-total .dph-stat-value { color: #60a5fa !important; }
[data-theme="dark"] .dph-stat-paid .dph-stat-value { color: #34d399 !important; }
[data-theme="dark"] .dph-stat-count .dph-stat-value { color: #a78bfa !important; }

/* Toolbars */
[data-theme="dark"] .dph-toolbar,
[data-theme="dark"] .dpp-toolbar {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .dph-filter-label,
[data-theme="dark"] .dpp-filter-label { color: #5d7d98 !important; }
[data-theme="dark"] .dph-filter-select,
[data-theme="dark"] .dpp-filter-select {
  background: #0a1520 !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dph-filter-select:focus,
[data-theme="dark"] .dpp-filter-select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .dph-reset-btn {
  background: linear-gradient(180deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #243550 !important;
  color: #8aaec8 !important;
}
[data-theme="dark"] .dph-reset-btn:hover {
  border-color: #0d9488 !important;
  background: linear-gradient(180deg, #0d2a28 0%, #0a2220 100%) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dph-meta-chip,
[data-theme="dark"] .dpp-meta-chip {
  background: rgba(13,148,136,0.1) !important;
  border-color: rgba(13,148,136,0.22) !important;
  color: #6ee7b7 !important;
}

/* Tables */
[data-theme="dark"] .dph-table-wrap,
[data-theme="dark"] .dpp-table-wrap,
[data-theme="dark"] .dpa-table-wrap {
  border-color: #1e3048 !important;
}
[data-theme="dark"] .dph-table thead th,
[data-theme="dark"] .dpp-table thead th,
[data-theme="dark"] .dpa-table thead th {
  background: linear-gradient(180deg, #1e2f44 0%, #1a2636 100%) !important;
  color: #8aaec8 !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .dph-table tbody tr:hover td,
[data-theme="dark"] .dpp-table tbody tr:hover td,
[data-theme="dark"] .dpa-table tbody tr:hover td {
  background: #111e2e !important;
}
[data-theme="dark"] .dph-amount-cell {
  background: rgba(96,165,250,0.1) !important;
  border-color: rgba(96,165,250,0.25) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .dph-method-cell {
  background: rgba(13,148,136,0.1) !important;
  border-color: rgba(13,148,136,0.25) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dph-method-cell i { color: #14b8a6 !important; }
[data-theme="dark"] .dph-ref-cell { color: #5d8aaa !important; }
[data-theme="dark"] .dph-date-cell { color: #4a6a86 !important; }
[data-theme="dark"] .dph-empty-row { color: #3d6080 !important; }

/* Products Taken hero counts */
[data-theme="dark"] .dpp-count-original {
  background: rgba(5,150,105,0.12) !important;
  border-color: rgba(5,150,105,0.28) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dpp-count-added {
  background: rgba(251,191,36,0.08) !important;
  border-color: rgba(251,191,36,0.22) !important;
  color: #fde68a !important;
}

/* Add Forgotten context */
[data-theme="dark"] .dpa-context-name { color: #dde8f4 !important; }
[data-theme="dark"] .dpa-context-ref { color: #5d8aaa !important; }
[data-theme="dark"] .dpa-chip-catalog {
  background: rgba(13,148,136,0.12) !important;
  border-color: rgba(13,148,136,0.28) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .dpa-chip-stock {
  background: rgba(251,191,36,0.08) !important;
  border-color: rgba(251,191,36,0.22) !important;
  color: #fde68a !important;
}

/* Add Forgotten editor */
[data-theme="dark"] .dpa-editor {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #243550 !important;
}
[data-theme="dark"] .dpa-label { color: #5d7d98 !important; }
[data-theme="dark"] .dpa-search-input,
[data-theme="dark"] .dpa-select,
[data-theme="dark"] .dpa-qty-input {
  background: #0a1520 !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dpa-search-input:focus,
[data-theme="dark"] .dpa-select:focus,
[data-theme="dark"] .dpa-qty-input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .dpa-textarea {
  background: #0a1520 !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .dpa-textarea:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .dpa-search-meta { color: #4a6a84 !important; }
[data-theme="dark"] .dpa-hint { color: #4a6a84 !important; }
[data-theme="dark"] .dpa-add-btn {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
  box-shadow: 0 2px 8px rgba(13,148,136,0.25) !important;
}
[data-theme="dark"] .dpa-shortcut-hint { color: #3d6080 !important; }
[data-theme="dark"] .dpa-shortcut-hint kbd {
  background: #0e1826 !important;
  border-color: #1e3048 !important;
  color: #5d8aaa !important;
}

/* Summary bar */
[data-theme="dark"] .dpa-summary-bar {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .dpa-summary-chip {
  background: rgba(96,165,250,0.08) !important;
  border-color: rgba(96,165,250,0.2) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .dpa-summary-chip.is-in-stock {
  background: rgba(52,211,153,0.08) !important;
  border-color: rgba(52,211,153,0.22) !important;
  color: #34d399 !important;
}
[data-theme="dark"] .dpa-summary-chip.is-out-of-stock {
  background: rgba(248,113,113,0.08) !important;
  border-color: rgba(248,113,113,0.2) !important;
  color: #f87171 !important;
}
[data-theme="dark"] .dpa-summary-total {
  background: rgba(13,148,136,0.1) !important;
  border-color: rgba(13,148,136,0.25) !important;
  color: #6ee7b7 !important;
}

/* ══════════════════════════════════════════════════════
   ADD NEW PRODUCT — Premium Content (pap-*)
══════════════════════════════════════════════════════ */
.pap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hero banner */
.pap-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0f2d52 0%, #0a3d62 58%, #0d3558 100%);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 4px 20px rgba(8,24,50,0.2);
}
.pap-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #10b981 0%, #0f766e 100%);
  box-shadow: 0 8px 20px rgba(15,118,110,0.35);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}
.pap-hero-text { flex: 1; min-width: 0; }
.pap-hero-title {
  font-size: 17px;
  font-weight: 800;
  color: #e8f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pap-hero-sub {
  font-size: 12px;
  color: #7ab8e8;
  margin-top: 2px;
}
.pap-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(13,148,136,0.15);
  border: 1px solid rgba(13,148,136,0.32);
  color: #99f6e4;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Section card */
.pap-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff 0%, #f4f9ff 100%);
  border: 1.5px solid #cfe0f0;
  box-shadow: 0 2px 14px rgba(10,40,80,0.06);
  transition: box-shadow .2s, transform .2s;
}
.pap-section:hover {
  box-shadow: 0 6px 22px rgba(10,40,80,0.1);
  transform: translateY(-1px);
}
.pap-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #deeaf6;
}
.pap-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.pap-section-head > div { flex: 1; min-width: 0; }
.pap-section-title {
  font-size: 14px;
  font-weight: 800;
  color: #0d2d4a;
}
.pap-section-sub {
  font-size: 11px;
  color: #5a7a96;
  margin-top: 1px;
}
.pap-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(3,105,161,0.07);
  border: 1px solid rgba(3,105,161,0.18);
  color: #0369a1;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Grid layouts */
.pap-grid {
  display: grid;
  gap: 12px;
}
.pap-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pap-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pap-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pap-field-wide { grid-column: 1 / -1; }

/* ── Price sub-groups ────────────────────────────────── */
.pap-price-group {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pap-price-group--buy {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9ee 100%);
  border: 1.5px solid #fde68a;
}
.pap-price-group--sell {
  background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
  border: 1.5px solid #a7f3d0;
}
.pap-price-group-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pap-price-group--buy .pap-price-group-tag { color: #b45309; }
.pap-price-group--sell .pap-price-group-tag { color: #0f766e; }
.pap-price-group-fields {
  display: flex;
  gap: 12px;
}
.pap-price-group-fields .pap-field { flex: 1; min-width: 0; }

/* ── Conversion equation box ─────────────────────────── */
.pap-conv-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 11px;
  border: 1.5px dashed #fcd34d;
}
.pap-conv-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pap-conv-equation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pap-conv-num {
  font-size: 22px;
  font-weight: 800;
  color: #1a3550;
  min-width: 18px;
  text-align: center;
}
.pap-conv-eq {
  font-size: 20px;
  font-weight: 800;
  color: #9ca3af;
  padding: 0 2px;
}
.pap-conv-unit-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #fef3c7;
  border: 1.5px solid #fcd34d;
  color: #92400e;
}
.pap-conv-unit-pill.pap-conv-unit-base {
  background: #ccfbf1;
  border-color: #5eead4;
  color: #0f766e;
}
.pap-conv-input {
  min-height: 44px;
  width: 110px;
  border: 1.5px solid #fcd34d;
  border-radius: 11px;
  background: #fffbeb;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #92400e;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.pap-conv-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.pap-conv-hint {
  font-size: 11px;
  color: #92400e;
  font-weight: 500;
  opacity: 0.7;
}

/* ── Stock Quantity inline calculator ────────────────── */
.pap-stock-calc {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 8px 10px;
  background: #f0fdf9;
  border: 1px dashed #5eead4;
  border-radius: 9px;
}
.pap-stock-calc-label {
  font-size: 10px;
  font-weight: 700;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pap-stock-calc-input {
  width: 72px;
  min-height: 32px;
  border: 1.5px solid #5eead4;
  border-radius: 7px;
  background: #fff;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.pap-stock-calc-input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.15);
}
.pap-stock-calc-sep {
  font-size: 14px;
  font-weight: 800;
  color: #9ca3af;
}
.pap-stock-calc-unit {
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
}
.pap-stock-calc-result {
  font-size: 13px;
  font-weight: 800;
  color: #0f766e;
  white-space: nowrap;
}
[data-theme="dark"] .pap-stock-calc {
  background: #001a10 !important;
  border-color: #065f46 !important;
}
[data-theme="dark"] .pap-stock-calc-label,
[data-theme="dark"] .pap-stock-calc-unit,
[data-theme="dark"] .pap-stock-calc-result { color: #34d399 !important; }
[data-theme="dark"] .pap-stock-calc-input {
  background: #0d1f1a !important;
  border-color: #065f46 !important;
  color: #34d399 !important;
}

/* ── Unit chip inside field labels ───────────────────── */
.pap-unit-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(13,148,136,0.1);
  border: 1px solid rgba(13,148,136,0.28);
  color: #0f766e;
  text-transform: lowercase;
  letter-spacing: 0;
  margin-left: 2px;
}

/* Fields */
.pap-field { display: flex; flex-direction: column; gap: 5px; }
.pap-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a6d8c;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pap-required { color: #dc2626; font-size: 12px; }
.pap-input,
.pap-select,
.modal.modal-product-add .pap-field select {
  min-height: 44px;
  border: 1.5px solid #c2d8ee;
  border-radius: 11px;
  background: #fff;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 500;
  color: #1a3550;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.pap-input:focus,
.pap-select:focus,
.modal.modal-product-add .pap-field select:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.13);
}
.pap-hint {
  font-size: 11px;
  color: #5a7a96;
  font-weight: 500;
}

@media (max-width: 680px) {
  .pap-grid-2 { grid-template-columns: 1fr; }
  .pap-grid-3 { grid-template-columns: 1fr; }
  .pap-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pap-price-group-fields { flex-direction: column; }
  .pap-conv-equation { gap: 8px; }
  .pap-conv-input { width: 80px; }
}

/* ══════════════════════════════════════════════════════
   IMPORT PRODUCTS — Premium Content (pip-*)
══════════════════════════════════════════════════════ */
.pip {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hero banner */
.pip-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0f2d52 0%, #0a3d62 58%, #0d3558 100%);
  border: 1px solid rgba(56,189,248,0.18);
  box-shadow: 0 4px 20px rgba(8,24,50,0.2);
}
.pip-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 8px 20px rgba(15,118,110,0.35);
  animation: productAddIconFloat 3.4s ease-in-out infinite;
}
.pip-hero-text { flex: 1; min-width: 0; }
.pip-hero-title {
  font-size: 17px;
  font-weight: 800;
  color: #e8f4ff;
}
.pip-hero-sub {
  font-size: 12px;
  color: #7ab8e8;
  margin-top: 2px;
}
.pip-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(13,148,136,0.15);
  border: 1px solid rgba(13,148,136,0.32);
  color: #99f6e4;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Step cards */
.pip-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff 0%, #f4f9ff 100%);
  border: 1.5px solid #cfe0f0;
  box-shadow: 0 2px 14px rgba(10,40,80,0.06);
}
.pip-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #deeaf6;
}
.pip-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 4px 12px rgba(15,118,110,0.3);
}
.pip-step-num-2 {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  box-shadow: 0 4px 12px rgba(3,105,161,0.3);
}
.pip-step-head > div { flex: 1; min-width: 0; }
.pip-step-title {
  font-size: 14px;
  font-weight: 800;
  color: #0d2d4a;
}
.pip-step-sub {
  font-size: 11px;
  color: #5a7a96;
  margin-top: 1px;
}
.pip-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(3,105,161,0.07);
  border: 1px solid rgba(3,105,161,0.18);
  color: #0369a1;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Premium dropzone */
.pip-dropzone {
  position: relative;
  border: 2px dashed #9fc2df;
  border-radius: 16px;
  padding: 28px 20px;
  min-height: 160px;
  background: linear-gradient(170deg, #f7fbff 0%, #edf5fc 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
.pip-dropzone:hover,
.pip-dropzone:focus-visible,
.pip-dropzone.dragover {
  border-color: #0d9488;
  background: linear-gradient(170deg, #f0fdf9 0%, #e0f7f3 100%);
  box-shadow: 0 0 0 4px rgba(13,148,136,0.14);
  transform: translateY(-2px);
  outline: none;
}
.pip-dropzone-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 8px 20px rgba(15,118,110,0.28);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.pip-dropzone-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1a4a6a;
  line-height: 1.5;
}
.pip-browse-btn {
  border: none;
  background: transparent;
  color: #0d9488;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 14px;
}
.pip-browse-btn:hover { color: #0f766e; }
.pip-dropzone-formats {
  margin: 2px 0 0;
  font-size: 12px;
  color: #4a6a86;
  font-weight: 600;
}
.pip-dropzone-status {
  font-size: 12px;
  color: #4e6d88;
  font-weight: 600;
  background: rgba(3,105,161,0.06);
  border: 1px solid rgba(3,105,161,0.14);
  border-radius: 999px;
  padding: 2px 12px;
}

/* Toggle switch row */
.pip-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(13,148,136,0.05);
  border: 1px solid rgba(13,148,136,0.15);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1a4a6a;
}
.pip-switch input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 6px;
  accent-color: #0f766e;
  flex-shrink: 0;
  cursor: pointer;
}

/* Spec card */
.pip-spec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(165deg, #f7fbff 0%, #edf5fc 100%);
  border: 1.5px solid #cddced;
}
.pip-spec-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pip-spec-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pip-col-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(3,105,161,0.08);
  border: 1px solid rgba(3,105,161,0.2);
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}
.pip-col-optional {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.18);
  color: #7c3aed;
}
.pip-spec-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pip-spec-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #244966;
  font-weight: 500;
}
.pip-spec-rules li i { flex-shrink: 0; font-size: 14px; }

/* ══════════════════════════════════════════════════════
   DARK MODE — pap-* / pip-*
══════════════════════════════════════════════════════ */

/* Shared hero */
[data-theme="dark"] .pap-hero,
[data-theme="dark"] .pip-hero {
  background: linear-gradient(120deg, #071a30 0%, #091f38 58%, #081c32 100%) !important;
  border-color: rgba(56,189,248,0.12) !important;
}
[data-theme="dark"] .pap-hero-title,
[data-theme="dark"] .pip-hero-title { color: #dde8f4 !important; }
[data-theme="dark"] .pap-hero-sub,
[data-theme="dark"] .pip-hero-sub { color: #5d8aaa !important; }
[data-theme="dark"] .pap-hero-badge,
[data-theme="dark"] .pip-hero-badge {
  background: rgba(13,148,136,0.1) !important;
  border-color: rgba(13,148,136,0.22) !important;
  color: #6ee7b7 !important;
}

/* Section cards */
[data-theme="dark"] .pap-section,
[data-theme="dark"] .pip-step {
  background: linear-gradient(160deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.2) !important;
}
[data-theme="dark"] .pap-section:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .pap-section-head,
[data-theme="dark"] .pip-step-head {
  border-color: #1e3048 !important;
}
[data-theme="dark"] .pap-section-title,
[data-theme="dark"] .pip-step-title { color: #dde8f4 !important; }
[data-theme="dark"] .pap-section-sub,
[data-theme="dark"] .pip-step-sub { color: #5d7d98 !important; }
[data-theme="dark"] .pap-step-badge,
[data-theme="dark"] .pip-step-badge {
  background: rgba(96,165,250,0.08) !important;
  border-color: rgba(96,165,250,0.2) !important;
  color: #60a5fa !important;
}

/* Fields */
[data-theme="dark"] .pap-label { color: #5d7d98 !important; }
[data-theme="dark"] .pap-input,
[data-theme="dark"] .pap-select,
[data-theme="dark"] .modal.modal-product-add .pap-field select {
  background: #0a1520 !important;
  border-color: #243550 !important;
  color: #dde8f4 !important;
}
[data-theme="dark"] .pap-input:focus,
[data-theme="dark"] .pap-select:focus,
[data-theme="dark"] .modal.modal-product-add .pap-field select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .pap-hint { color: #3d6080 !important; }
[data-theme="dark"] .pap-required { color: #f87171 !important; }

/* Price groups — dark */
[data-theme="dark"] .pap-price-group--buy {
  background: linear-gradient(135deg, #1c1200 0%, #180f00 100%) !important;
  border-color: #78450a !important;
}
[data-theme="dark"] .pap-price-group--sell {
  background: linear-gradient(135deg, #001a10 0%, #001510 100%) !important;
  border-color: #065f46 !important;
}
[data-theme="dark"] .pap-price-group--buy .pap-price-group-tag { color: #fbbf24 !important; }
[data-theme="dark"] .pap-price-group--sell .pap-price-group-tag { color: #34d399 !important; }
[data-theme="dark"] .pap-conv-box {
  background: #0d0d0d !important;
  border-color: #78450a !important;
}
[data-theme="dark"] .pap-conv-label { color: #fbbf24 !important; }
[data-theme="dark"] .pap-conv-num { color: #dde8f4 !important; }
[data-theme="dark"] .pap-conv-eq { color: #4b6080 !important; }
[data-theme="dark"] .pap-conv-unit-pill {
  background: #1c1200 !important;
  border-color: #78450a !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .pap-conv-unit-pill.pap-conv-unit-base {
  background: #001a10 !important;
  border-color: #065f46 !important;
  color: #34d399 !important;
}
[data-theme="dark"] .pap-conv-input {
  background: #1c1200 !important;
  border-color: #78450a !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .pap-conv-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
}
[data-theme="dark"] .pap-conv-hint { color: #a16207 !important; }
[data-theme="dark"] .pap-unit-chip {
  background: rgba(13,148,136,0.12) !important;
  border-color: rgba(13,148,136,0.3) !important;
  color: #34d399 !important;
}

/* Dropzone */
[data-theme="dark"] .pip-dropzone {
  background: linear-gradient(170deg, #0e1826 0%, #0a1520 100%) !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .pip-dropzone:hover,
[data-theme="dark"] .pip-dropzone:focus-visible,
[data-theme="dark"] .pip-dropzone.dragover {
  border-color: #0d9488 !important;
  background: linear-gradient(170deg, #0d2a28 0%, #0a2220 100%) !important;
  box-shadow: 0 0 0 4px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .pip-dropzone-text { color: #8aaec8 !important; }
[data-theme="dark"] .pip-browse-btn { color: #14b8a6 !important; }
[data-theme="dark"] .pip-browse-btn:hover { color: #2dd4bf !important; }
[data-theme="dark"] .pip-dropzone-formats { color: #4a6a86 !important; }
[data-theme="dark"] .pip-dropzone-status {
  background: rgba(96,165,250,0.07) !important;
  border-color: rgba(96,165,250,0.18) !important;
  color: #60a5fa !important;
}

/* Toggle switch */
[data-theme="dark"] .pip-switch {
  background: rgba(13,148,136,0.06) !important;
  border-color: rgba(13,148,136,0.18) !important;
  color: #8aaec8 !important;
}

/* Spec card */
[data-theme="dark"] .pip-spec {
  background: linear-gradient(165deg, #111e2e 0%, #0e1826 100%) !important;
  border-color: #1e3048 !important;
}
[data-theme="dark"] .pip-spec-label { color: #60a5fa !important; }
[data-theme="dark"] .pip-col-chip {
  background: rgba(96,165,250,0.08) !important;
  border-color: rgba(96,165,250,0.2) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .pip-col-optional {
  background: rgba(167,139,250,0.08) !important;
  border-color: rgba(167,139,250,0.2) !important;
  color: #a78bfa !important;
}

/* ══════════════════════════════════════════════════════
   SUPPLIER ADD PREMIUM — sap-*
══════════════════════════════════════════════════════ */
.sap { display: flex; flex-direction: column; gap: 0; }

/* Hero banner */
.sap-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #042f2e 0%, #0f3d3b 58%, #083330 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(20,184,166,0.18);
}
.sap-hero-icon {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 14px rgba(15,118,110,0.35);
  animation: sap-float 3s ease-in-out infinite;
}
@keyframes sap-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.sap-hero-text { flex: 1; min-width: 0; }
.sap-hero-title {
  font-size: 17px; font-weight: 700; color: #e0f7f5;
  margin: 0 0 2px 0;
}
.sap-hero-sub { font-size: 13px; color: rgba(167,243,208,0.75); }
.sap-hero-badge {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(20,184,166,0.15);
  border: 1px solid rgba(20,184,166,0.3);
  color: #5eead4;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Form card */
.sap-card {
  background: #fff;
  border: 1.5px solid #e2eaf2;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Section label */
.sap-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: #0f766e;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(15,118,110,0.12);
}
.sap-section-label i { font-size: 12px; }

/* Grid */
.sap-grid { display: grid; gap: 12px; }
.sap-grid-2 { grid-template-columns: 1fr 1fr; }
.sap-field-wide { grid-column: 1 / -1; }

/* Field */
.sap-field { display: flex; flex-direction: column; gap: 5px; }
.sap-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #0f766e;
  display: flex; align-items: center; gap: 5px;
}
.sap-label i { font-size: 12px; }
.sap-required { color: #ef4444; margin-left: 2px; }
.sap-input, .sap-textarea {
  width: 100%; box-sizing: border-box;
  height: 44px; padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #d1dce8;
  background: #f8fbfe;
  font-size: 14px; color: #1a3a5c;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  font-family: inherit;
}
.sap-textarea {
  height: auto; padding: 10px 14px; resize: vertical; min-height: 68px;
}
.sap-input:focus, .sap-textarea:focus {
  border-color: #0f766e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}
.sap-input::placeholder, .sap-textarea::placeholder { color: #94a3b8; }

/* Shortcut */
.sap-shortcut {
  font-size: 12px; color: #64748b;
  display: flex; align-items: center; gap: 5px;
}
.sap-shortcut kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px; border-radius: 5px;
  background: #f1f5f9; border: 1px solid #cbd5e1;
  font-size: 11px; font-weight: 600; color: #475569;
  font-family: inherit;
}

/* Responsive */
@media (max-width: 540px) {
  .sap-grid-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   DARK MODE — sap-*
══════════════════════════════════════════════════════ */
[data-theme="dark"] .sap-hero {
  background: linear-gradient(120deg, #021a19 0%, #062220 58%, #041c1a 100%) !important;
  border-color: rgba(20,184,166,0.15) !important;
}
[data-theme="dark"] .sap-hero-title { color: #ccfbf1; }
[data-theme="dark"] .sap-hero-sub { color: rgba(153,246,228,0.6); }
[data-theme="dark"] .sap-hero-badge {
  background: rgba(20,184,166,0.12) !important;
  border-color: rgba(20,184,166,0.25) !important;
  color: #2dd4bf !important;
}
[data-theme="dark"] .sap-card {
  background: #0d1f2d !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .sap-section-label {
  color: #2dd4bf !important;
  border-color: rgba(45,212,191,0.15) !important;
}
[data-theme="dark"] .sap-label { color: #2dd4bf !important; }
[data-theme="dark"] .sap-input,
[data-theme="dark"] .sap-textarea {
  background: #0a1929 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e0f2fe !important;
}
[data-theme="dark"] .sap-input:focus,
[data-theme="dark"] .sap-textarea:focus {
  border-color: #0d9488 !important;
  background: #0c1f30 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .sap-input::placeholder,
[data-theme="dark"] .sap-textarea::placeholder { color: #4a6272 !important; }
[data-theme="dark"] .sap-shortcut { color: #4a6272 !important; }
[data-theme="dark"] .sap-shortcut kbd {
  background: #0a1929 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════
   SUPPLIER PAYMENT PREMIUM — spm-*
══════════════════════════════════════════════════════ */
.spm-wrap { display: flex; flex-direction: column; gap: 0; }

/* Hero */
.spm-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(120deg, #042f2e 0%, #0f3d3b 58%, #083330 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(20,184,166,0.18);
  flex-wrap: wrap;
}
.spm-hero-avatar {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.spm-hero-text { flex: 1; min-width: 0; }
.spm-hero-name {
  font-size: 15px; font-weight: 700; color: #e0f7f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spm-hero-sub { font-size: 12px; color: rgba(167,243,208,0.7); margin-top: 1px; }
.spm-hero-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.spm-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 80px;
}
.spm-stat-val { font-size: 11px; font-weight: 700; color: #e0f7f5; }
.spm-stat-lbl { font-size: 9px; color: rgba(167,243,208,0.6); text-transform: uppercase; letter-spacing: 0.07em; }
.spm-stat-owed .spm-stat-val { color: #fca5a5; }
.spm-stat-paid .spm-stat-val { color: #6ee7b7; }
.spm-stat-clear .spm-stat-val { color: #6ee7b7; }

/* Tabs */
.sup-pay-modal-tabs {
  display: flex; gap: 2px;
  padding: 10px 16px 0;
  background: #f0f6fc;
  border-left: 1.5px solid #e2eaf2;
  border-right: 1.5px solid #e2eaf2;
  border-bottom: 2px solid #e2eaf2;
}
.sup-pay-tab {
  padding: 9px 16px; border-radius: 8px 8px 0 0;
  border: 1.5px solid transparent; background: transparent;
  font-size: 13px; font-weight: 600; color: #64748b;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: color 0.15s, background 0.15s;
  outline: none;
}
.sup-pay-tab:hover { color: #0f766e; background: rgba(15,118,110,0.06); }
.sup-pay-tab.active {
  color: #0f766e; background: #fff;
  border-color: #e2eaf2; border-bottom-color: #fff;
  margin-bottom: -2px;
}
.sup-pay-tab i { font-size: 12px; }

/* Tab panels */
.sup-pay-tab-panel { display: none; padding: 18px 20px 14px; background: #fff; border: 1.5px solid #e2eaf2; border-top: none; border-radius: 0 0 14px 14px; }
.sup-pay-tab-panel.active { display: block; }

/* Form grid */
.spm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spm-field { display: flex; flex-direction: column; gap: 5px; }
.spm-field-wide { grid-column: 1 / -1; }
.spm-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #0f766e;
  display: flex; align-items: center; gap: 4px;
}
.spm-required { color: #ef4444; margin-left: 2px; }
.spm-input, .spm-select, .spm-textarea {
  width: 100%; box-sizing: border-box;
  height: 42px; padding: 0 12px;
  border-radius: 9px; border: 1.5px solid #d1dce8;
  background: #f8fbfe; font-size: 13.5px; color: #1a3a5c;
  outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.spm-textarea { height: auto; padding: 9px 12px; resize: vertical; min-height: 60px; }
.spm-input:focus, .spm-select:focus, .spm-textarea:focus {
  border-color: #0f766e; background: #fff;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.1);
}
.spm-input::placeholder, .spm-textarea::placeholder { color: #94a3b8; }

/* Hint */
.spm-hint {
  margin-top: 12px; font-size: 12px; color: #64748b;
  background: rgba(15,118,110,0.05); border: 1px solid rgba(15,118,110,0.12);
  border-radius: 8px; padding: 8px 12px;
  display: flex; align-items: flex-start; gap: 6px; line-height: 1.5;
}
.spm-hint i { color: #0f766e; margin-top: 1px; flex-shrink: 0; }

/* Balance info */
.spm-balance-info {
  padding: 10px 14px; border-radius: 9px; margin-bottom: 14px;
  background: rgba(15,118,110,0.06); border: 1px solid rgba(15,118,110,0.15);
  font-size: 13px; color: #0f766e; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}

/* Print bar */
.spm-print-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.spm-print-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: #f0f6fc; border: 1.5px solid #c8d8e8;
  color: #1a3a5c; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.spm-print-btn:hover { background: #e2eef8; border-color: #a8c4dc; }

/* Table */
.spm-table-wrap { overflow-x: auto; border-radius: 10px; border: 1.5px solid #e2eaf2; }
.spm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spm-table thead tr { background: linear-gradient(90deg, #0c2d48, #1a3a5c); }
.spm-table thead th {
  padding: 10px 12px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: #a8d4f0; white-space: nowrap;
}
.spm-table tbody tr { border-bottom: 1px solid #f0f5fa; }
.spm-table tbody tr:last-child { border-bottom: none; }
.spm-table tbody tr:hover { background: #f7fbff; }
.spm-table td { padding: 9px 12px; color: #1a3a5c; vertical-align: middle; }
.spm-table-empty { text-align: center !important; color: #94a3b8; padding: 32px 0 !important; }
.spm-bill-row { background: #f8fafc; }
.spm-bill-row td:first-child { border-left: 3px solid #0f766e; }
.spm-installment-row { background: #fff; }
.spm-installment-row td { font-size: 12px; color: #4b6280 !important; padding-top: 6px !important; padding-bottom: 6px !important; }
.spm-installment-row td:first-child { padding-left: 28px !important; border-left: 3px solid #e2eaf2; }
.spm-inst-arrow { color: #0f766e; margin-right: 4px; font-size: 11px; }
.spm-inst-dash { color: #c0cdd9 !important; }
.spm-badge-inst { background: rgba(79,70,229,0.08); color: #4f46e5; border: 1px solid rgba(79,70,229,0.18); }
.spm-badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.spm-badge-paid   { background: rgba(5,150,105,0.1);  color: #059669; border: 1px solid rgba(5,150,105,0.2); }
.spm-badge-partial{ background: rgba(217,119,6,0.1);  color: #d97706; border: 1px solid rgba(217,119,6,0.2); }
.spm-badge-unpaid { background: rgba(220,38,38,0.1);  color: #dc2626; border: 1px solid rgba(220,38,38,0.2); }
.spm-bal-owed { color: #dc2626; font-weight: 600; }
.spm-bal-clear { color: #059669; }

@media (max-width: 540px) {
  .spm-hero { flex-wrap: wrap; }
  .spm-hero-stats { width: 100%; }
  .spm-grid { grid-template-columns: 1fr; }
  .spm-field-wide { grid-column: unset; }
}

/* ── DARK MODE — spm-* ── */
[data-theme="dark"] .spm-hero {
  background: linear-gradient(120deg, #021a19 0%, #062220 58%, #041c1a 100%) !important;
  border-color: rgba(20,184,166,0.15) !important;
}
[data-theme="dark"] .spm-hero-name { color: #ccfbf1; }
[data-theme="dark"] .spm-hero-sub { color: rgba(153,246,228,0.6); }
[data-theme="dark"] .spm-stat { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .spm-stat-val { color: #e0f2fe !important; }
[data-theme="dark"] .spm-stat-lbl { color: rgba(153,246,228,0.5) !important; }
[data-theme="dark"] .sup-pay-modal-tabs { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sup-pay-tab { color: #4a6272 !important; background: transparent !important; }
[data-theme="dark"] .sup-pay-tab:hover { color: #2dd4bf !important; background: rgba(45,212,191,0.06) !important; }
[data-theme="dark"] .sup-pay-tab.active { color: #2dd4bf !important; background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; border-bottom-color: #0d1f2d !important; }
[data-theme="dark"] .sup-pay-tab-panel { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .spm-label { color: #2dd4bf !important; }
[data-theme="dark"] .spm-input, [data-theme="dark"] .spm-select, [data-theme="dark"] .spm-textarea {
  background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important;
}
[data-theme="dark"] .spm-input:focus, [data-theme="dark"] .spm-select:focus, [data-theme="dark"] .spm-textarea:focus {
  border-color: #0d9488 !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(13,148,136,0.18) !important;
}
[data-theme="dark"] .spm-hint { background: rgba(45,212,191,0.05) !important; border-color: rgba(45,212,191,0.12) !important; color: #8aaec8 !important; }
[data-theme="dark"] .spm-hint i { color: #2dd4bf !important; }
[data-theme="dark"] .spm-balance-info { background: rgba(45,212,191,0.06) !important; border-color: rgba(45,212,191,0.15) !important; color: #2dd4bf !important; }
[data-theme="dark"] .spm-print-btn { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #8aaec8 !important; }
[data-theme="dark"] .spm-table-wrap { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .spm-table thead tr { background: linear-gradient(90deg, #071728, #0c2338) !important; }
[data-theme="dark"] .spm-table thead th { color: #7ab4d4 !important; }
[data-theme="dark"] .spm-table tbody tr { border-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .spm-table tbody tr:hover { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .spm-table td { color: #b8d4e8 !important; }
[data-theme="dark"] .spm-bill-row { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .spm-bill-row td:first-child { border-left-color: #2dd4bf !important; }
[data-theme="dark"] .spm-installment-row { background: transparent !important; }
[data-theme="dark"] .spm-installment-row td { color: #6a8fa8 !important; }
[data-theme="dark"] .spm-installment-row td:first-child { border-left-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .spm-inst-arrow { color: #2dd4bf !important; }
[data-theme="dark"] .spm-badge-inst { background: rgba(99,102,241,0.12) !important; color: #818cf8 !important; border-color: rgba(99,102,241,0.25) !important; }

/* ══════════════════════════════════════════════════════
   SUPPLIER DETAILS VIEW — sdv-*
══════════════════════════════════════════════════════ */
.sdv { display: flex; flex-direction: column; gap: 0; }

/* Hero */
.sdv-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(120deg, #042f2e 0%, #0f3d3b 58%, #083330 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(20,184,166,0.18);
}
.sdv-avatar {
  width: 50px; height: 50px; min-width: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
.sdv-hero-text { flex: 1; min-width: 0; }
.sdv-hero-name {
  font-size: 16px; font-weight: 700; color: #e0f7f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sdv-hero-sub { font-size: 12px; color: rgba(167,243,208,0.7); margin-top: 1px; }
.sdv-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sdv-status-chip {
  padding: 3px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.sdv-status-active  { background: rgba(6,214,160,0.2);  color: #6ee7b7; border: 1px solid rgba(6,214,160,0.3); }
.sdv-status-inactive{ background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.sdv-id-chip {
  padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(167,243,208,0.7); font-size: 10px; font-weight: 600;
}

/* Actions */
.sdv-actions {
  display: flex; gap: 8px; padding: 12px 20px;
  background: #f7fbff;
  border-left: 1.5px solid #e2eaf2; border-right: 1.5px solid #e2eaf2; border-bottom: 1.5px solid #e2eaf2;
}
.sdv-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px; border: 1.5px solid;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s; background: transparent;
}
.sdv-action-edit { border-color: #0f766e; color: #0f766e; background: rgba(15,118,110,0.05); }
.sdv-action-edit:hover { background: rgba(15,118,110,0.12); }
.sdv-action-po   { border-color: #1d4ed8; color: #1d4ed8; background: rgba(29,78,216,0.05); }
.sdv-action-po:hover { background: rgba(29,78,216,0.1); }

/* Body */
.sdv-body {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.sdv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sdv-info-card {
  padding: 12px 14px; border-radius: 10px;
  background: #f7fbff; border: 1.5px solid #e2eaf2;
  display: flex; flex-direction: column; gap: 3px;
}
.sdv-info-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0f766e; }
.sdv-info-val   { font-size: 14px; font-weight: 600; color: #1a3a5c; }
.sdv-contact-card { border-radius: 10px; border: 1.5px solid #e2eaf2; overflow: hidden; }
.sdv-contact-header {
  padding: 9px 14px;
  background: linear-gradient(90deg, #f0f6fc, #eaf2fb);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #1a3a5c;
  display: flex; align-items: center; gap: 7px;
}
.sdv-contact-header i { color: #0f766e; }
.sdv-contact-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sdv-contact-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sdv-contact-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; min-width: 56px; padding-top: 2px; flex-shrink: 0; }
.sdv-contact-val { font-size: 13.5px; font-weight: 500; color: #1a3a5c; }
.sdv-contact-val a { color: #0f766e; text-decoration: none; }
.sdv-contact-val a:hover { text-decoration: underline; }
.sdv-contact-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.sdv-copy-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  background: #f0f6fc; border: 1px solid #c8d8e8;
  color: #4a6272; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.14s;
}
.sdv-copy-btn:hover { background: #e0edf8; color: #1a3a5c; }

/* ── DARK MODE — sdv-* ── */
[data-theme="dark"] .sdv-hero {
  background: linear-gradient(120deg, #021a19 0%, #062220 58%, #041c1a 100%) !important;
  border-color: rgba(20,184,166,0.15) !important;
}
[data-theme="dark"] .sdv-hero-name { color: #ccfbf1; }
[data-theme="dark"] .sdv-hero-sub { color: rgba(153,246,228,0.6); }
[data-theme="dark"] .sdv-actions { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sdv-action-edit { color: #2dd4bf !important; border-color: #0d9488 !important; background: rgba(13,148,136,0.08) !important; }
[data-theme="dark"] .sdv-action-edit:hover { background: rgba(13,148,136,0.15) !important; }
[data-theme="dark"] .sdv-action-po   { color: #60a5fa !important; border-color: #1d4ed8 !important; background: rgba(29,78,216,0.08) !important; }
[data-theme="dark"] .sdv-action-po:hover { background: rgba(29,78,216,0.15) !important; }
[data-theme="dark"] .sdv-body { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sdv-info-card { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sdv-info-label { color: #2dd4bf !important; }
[data-theme="dark"] .sdv-info-val   { color: #e0f2fe !important; }
[data-theme="dark"] .sdv-contact-card { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sdv-contact-header { background: linear-gradient(90deg, #0a1929, #0c2136) !important; color: #8aaec8 !important; }
[data-theme="dark"] .sdv-contact-label { color: #4a6272 !important; }
[data-theme="dark"] .sdv-contact-val   { color: #b8d4e8 !important; }
[data-theme="dark"] .sdv-contact-val a { color: #2dd4bf !important; }
[data-theme="dark"] .sdv-copy-btn { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #4a6272 !important; }
[data-theme="dark"] .sdv-copy-btn:hover { background: #0c2136 !important; color: #8aaec8 !important; }

/* ══════════════════════════════════════════════════════
   EDIT SUPPLIER PREMIUM — sep-*
══════════════════════════════════════════════════════ */
.sep { display: flex; flex-direction: column; gap: 0; }

/* Hero */
.sep-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(120deg, #1e1b4b 0%, #2d2a6e 58%, #1a1840 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(139,92,246,0.2);
}
.sep-hero-icon {
  width: 48px; height: 48px; min-width: 48px; border-radius: 13px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
  animation: sep-float 3s ease-in-out infinite;
}
@keyframes sep-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.sep-hero-text { flex: 1; min-width: 0; }
.sep-hero-name {
  font-size: 16px; font-weight: 700; color: #ede9fe;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sep-hero-sub { font-size: 12px; color: rgba(196,181,253,0.7); margin-top: 1px; }
.sep-hero-badge {
  padding: 4px 13px; border-radius: 999px;
  background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.3);
  color: #c4b5fd; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Card */
.sep-card {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 18px 22px 14px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Context strip */
.sep-context {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #f8f5ff, #f0ebff);
  border: 1.5px solid rgba(139,92,246,0.15);
}
.sep-context-field { display: flex; flex-direction: column; gap: 2px; }
.sep-context-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #7c3aed; }
.sep-context-val   { font-size: 13px; font-weight: 600; color: #1a3a5c; }

/* Section label */
.sep-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: #7c3aed;
  padding-bottom: 8px; border-bottom: 1.5px solid rgba(139,92,246,0.12);
}
.sep-section-label i { font-size: 12px; }

/* Grid & fields */
.sep-grid { display: grid; gap: 12px; }
.sep-grid-2 { grid-template-columns: 1fr 1fr; }
.sep-field-wide { grid-column: 1 / -1; }
.sep-field { display: flex; flex-direction: column; gap: 5px; }
.sep-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #7c3aed;
  display: flex; align-items: center; gap: 5px;
}
.sep-label i { font-size: 12px; }
.sep-required { color: #ef4444; margin-left: 2px; }
.sep-input, .sep-select, .sep-textarea {
  width: 100%; box-sizing: border-box;
  height: 44px; padding: 0 13px;
  border-radius: 10px; border: 1.5px solid #d1dce8;
  background: #f8fbfe; font-size: 14px; color: #1a3a5c;
  outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.sep-textarea { height: auto; padding: 10px 13px; resize: vertical; min-height: 72px; }
.sep-input:focus, .sep-select:focus, .sep-textarea:focus {
  border-color: #7c3aed; background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.sep-input.supplier-edit-field-changed,
.sep-select.supplier-edit-field-changed,
.sep-textarea.supplier-edit-field-changed {
  border-color: #7c3aed !important;
  background: rgba(139,92,246,0.04) !important;
}
.sep-input::placeholder, .sep-textarea::placeholder { color: #94a3b8; }

/* Changes bar */
.sep-changes-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.sep-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.sep-chip-changes { background: #f1f5f9; border: 1px solid #cbd5e1; color: #64748b; }
.sep-chip-changes.is-dirty { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.25); color: #7c3aed; }
.sep-chip-changes.is-clean { background: #f1f5f9; border-color: #cbd5e1; color: #94a3b8; }
.sep-chip-hint { background: transparent; border: 1px solid transparent; color: #94a3b8; }
.sep-chip-hint.is-dirty { color: #7c3aed; }
.sep-chip-hint.is-clean { color: #94a3b8; }

@media (max-width: 540px) {
  .sep-grid-2 { grid-template-columns: 1fr; }
  .sep-context { grid-template-columns: 1fr; }
}

/* ── DARK MODE — sep-* ── */
[data-theme="dark"] .sep-hero {
  background: linear-gradient(120deg, #0d0b2e 0%, #160d3d 58%, #0b0928 100%) !important;
  border-color: rgba(139,92,246,0.18) !important;
}
[data-theme="dark"] .sep-hero-name { color: #ede9fe; }
[data-theme="dark"] .sep-hero-sub { color: rgba(196,181,253,0.6); }
[data-theme="dark"] .sep-hero-badge { background: rgba(139,92,246,0.14) !important; border-color: rgba(139,92,246,0.25) !important; color: #a78bfa !important; }
[data-theme="dark"] .sep-card { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sep-context { background: linear-gradient(135deg, #130e2e, #170f35) !important; border-color: rgba(139,92,246,0.15) !important; }
[data-theme="dark"] .sep-context-label { color: #a78bfa !important; }
[data-theme="dark"] .sep-context-val   { color: #e0f2fe !important; }
[data-theme="dark"] .sep-section-label { color: #a78bfa !important; border-color: rgba(167,139,250,0.15) !important; }
[data-theme="dark"] .sep-label { color: #a78bfa !important; }
[data-theme="dark"] .sep-input, [data-theme="dark"] .sep-select, [data-theme="dark"] .sep-textarea {
  background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important;
}
[data-theme="dark"] .sep-input:focus, [data-theme="dark"] .sep-select:focus, [data-theme="dark"] .sep-textarea:focus {
  border-color: #7c3aed !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}
[data-theme="dark"] .sep-input.supplier-edit-field-changed,
[data-theme="dark"] .sep-select.supplier-edit-field-changed,
[data-theme="dark"] .sep-textarea.supplier-edit-field-changed {
  border-color: #7c3aed !important; background: rgba(124,58,237,0.08) !important;
}
[data-theme="dark"] .sep-chip-changes { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #4a6272 !important; }
[data-theme="dark"] .sep-chip-changes.is-dirty { background: rgba(124,58,237,0.1) !important; border-color: rgba(139,92,246,0.25) !important; color: #a78bfa !important; }
[data-theme="dark"] .sep-chip-hint.is-dirty { color: #a78bfa !important; }
[data-theme="dark"] .pip-spec-rules li { color: #8aaec8 !important; }

/* ══════════════════════════════════════════════════════
   RECORD RECEIVING ADD PREMIUM — rra-*
══════════════════════════════════════════════════════ */
.rra { display: flex; flex-direction: column; gap: 0; }

/* Hero */
.rra-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(120deg, #071c2e 0%, #0d2d47 58%, #081926 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(56,189,248,0.15);
}
.rra-hero-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #0369a1, #38bdf8);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 16px rgba(3,105,161,0.4);
  animation: rra-float 3s ease-in-out infinite;
}
@keyframes rra-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.rra-hero-text { flex: 1; min-width: 0; }
.rra-hero-title { font-size: 17px; font-weight: 700; color: #e0f6ff; margin: 0 0 2px; }
.rra-hero-sub   { font-size: 12px; color: rgba(147,210,240,0.75); }
.rra-hero-badge {
  padding: 5px 14px; border-radius: 999px;
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.25);
  color: #7dd3fc; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}

/* Body card */
.rra-body {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Section label */
.rra-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #0369a1; padding-bottom: 8px; border-bottom: 1.5px solid rgba(3,105,161,0.12);
}
.rra-section-label i { font-size: 12px; }

/* Details grid */
.rra-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rra-field { display: flex; flex-direction: column; gap: 5px; }
.rra-field-wide { grid-column: 1 / -1; }
.rra-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #0369a1; display: flex; align-items: center; gap: 5px;
}
.rra-label-row { display: flex; justify-content: space-between; align-items: center; }
.rra-required { color: #ef4444; margin-left: 2px; }
.rra-optional {
  padding: 1px 8px; border-radius: 999px;
  background: rgba(3,105,161,0.07); border: 1px solid rgba(3,105,161,0.14);
  color: #0369a1; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.rra-select {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px;
  border-radius: 10px; border: 1.5px solid #d1dce8; background: #f8fbfe;
  font-size: 13.5px; color: #1a3a5c; outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s;
  appearance: auto;
}
.rra-select:focus { border-color: #0369a1; box-shadow: 0 0 0 3px rgba(3,105,161,0.1); background: #fff; }
.rra-hint { font-size: 12px; color: #64748b; }

/* Amount field */
.rra-amount-wrap {
  display: flex; align-items: center; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #d1dce8; background: #f8fbfe;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.rra-amount-wrap:focus-within {
  border-color: #0369a1; box-shadow: 0 0 0 3px rgba(3,105,161,0.1); background: #fff;
}
.rra-amount-pfx {
  padding: 0 14px; height: 44px; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: #0369a1;
  border-right: 1.5px solid #d1dce8; background: rgba(3,105,161,0.05);
  white-space: nowrap; flex-shrink: 0;
}
.rra-amount-input {
  flex: 1; height: 44px; padding: 0 12px; border: none; background: transparent;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
}
.rra-calc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 7px;
  background: rgba(3,105,161,0.08); border: 1.5px solid rgba(3,105,161,0.2);
  color: #0369a1; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background 0.15s; flex-shrink: 0;
}
.rra-calc-btn:hover { background: rgba(3,105,161,0.16); }

/* Items card */
.rra-items-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid #d1dce8; background: #f7fbfe;
}

/* Add item button */
.rra-add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #0369a1, #0284c7);
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(3,105,161,0.25);
  transition: transform 0.14s, box-shadow 0.14s;
  align-self: flex-start;
}
.rra-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(3,105,161,0.35); }

/* Running total */
.rra-running-total {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid rgba(3,105,161,0.18);
  background: linear-gradient(90deg, #f0f8ff, #e8f4fd);
  font-size: 14px; font-weight: 700; color: #0c2d47;
}

/* Validation */
.rra-validation {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; border: 1.5px solid;
  transition: all 0.2s;
}
.rra-validation.is-clean   { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
.rra-validation.is-dirty   { color: #059669; background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.2); }
.rra-validation.is-warning { color: #b45309; background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.2); }

/* ── Upgraded item row (class names fixed — used by buildItemRow()) ── */
.receiving-item-row {
  border: 1.5px solid #d1e4f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1fr auto auto !important;
  gap: 10px !important;
  align-items: end !important;
  box-shadow: 0 1px 4px rgba(3,105,161,0.07) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.receiving-item-row:hover {
  border-color: #a8c8e0 !important;
  box-shadow: 0 2px 8px rgba(3,105,161,0.12) !important;
}
.receiving-row-product { grid-column: 1 / -1 !important; }
.receiving-row-field { margin: 0 !important; }
.receiving-row-field label,
.receiving-row-product label {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important;
  color: #0369a1 !important; margin-bottom: 4px !important; display: block !important;
}
.receiving-item-row input[type="text"],
.receiving-item-row input[type="number"] {
  height: 40px !important; border-radius: 9px !important;
  border: 1.5px solid #d1dce8 !important; background: #f8fbfe !important;
  font-size: 13px !important; color: #1a3a5c !important;
  padding: 0 10px !important; outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  width: 100% !important; box-sizing: border-box !important;
}
.receiving-item-row input:focus {
  border-color: #0369a1 !important; background: #fff !important;
  box-shadow: 0 0 0 3px rgba(3,105,161,0.1) !important;
}
.receiving-row-total-wrap { display: flex; flex-direction: column; gap: 4px; }
.receiving-line-total-label {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #0369a1 !important;
}
.receiving-line-total {
  height: 40px !important; border: 1.5px solid rgba(3,105,161,0.2) !important;
  border-radius: 9px !important;
  background: linear-gradient(90deg, #f0f8ff, #e8f4fd) !important;
  display: inline-flex !important; align-items: center !important;
  padding: 0 10px !important; color: #0c2d47 !important;
  font-weight: 700 !important; font-size: 13px !important; white-space: nowrap !important;
}
.receiving-remove {
  height: 40px !important; width: 40px !important; min-width: 40px !important;
  border-radius: 9px !important; padding: 0 !important; align-self: end !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(239,68,68,0.07) !important; border: 1.5px solid rgba(239,68,68,0.2) !important;
  color: #dc2626 !important; cursor: pointer !important; transition: background 0.14s !important;
}
.receiving-remove:hover { background: rgba(239,68,68,0.15) !important; }
.rcv-product-resolved { margin-top: 3px !important; font-size: 12px !important; font-weight: 600 !important; }

/* Responsive */
@media (max-width: 680px) {
  .rra-details-grid { grid-template-columns: 1fr; }
  .rra-field-wide { grid-column: unset; }
  .receiving-item-row { grid-template-columns: 1fr 1fr !important; }
  .receiving-row-product { grid-column: 1 / -1 !important; }
  .receiving-row-total-wrap { grid-column: 1 / -1 !important; }
}

/* ── DARK MODE — rra-* ── */
[data-theme="dark"] .rra-hero {
  background: linear-gradient(120deg, #030e1a 0%, #071a2e 58%, #030c1a 100%) !important;
  border-color: rgba(56,189,248,0.12) !important;
}
[data-theme="dark"] .rra-hero-title { color: #bae6fd; }
[data-theme="dark"] .rra-hero-sub   { color: rgba(125,211,252,0.6); }
[data-theme="dark"] .rra-hero-badge { background: rgba(56,189,248,0.1) !important; border-color: rgba(56,189,248,0.2) !important; color: #38bdf8 !important; }
[data-theme="dark"] .rra-body { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .rra-section-label { color: #38bdf8 !important; border-color: rgba(56,189,248,0.12) !important; }
[data-theme="dark"] .rra-label { color: #38bdf8 !important; }
[data-theme="dark"] .rra-optional { background: rgba(56,189,248,0.08) !important; border-color: rgba(56,189,248,0.15) !important; color: #38bdf8 !important; }
[data-theme="dark"] .rra-select { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .rra-select:focus { border-color: #0369a1 !important; box-shadow: 0 0 0 3px rgba(3,105,161,0.18) !important; background: #0c1f30 !important; }
[data-theme="dark"] .rra-hint { color: #4a6272 !important; }
[data-theme="dark"] .rra-amount-wrap { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .rra-amount-wrap:focus-within { border-color: #0369a1 !important; background: #0c1f30 !important; }
[data-theme="dark"] .rra-amount-pfx { background: rgba(3,105,161,0.12) !important; border-color: rgba(255,255,255,0.08) !important; color: #38bdf8 !important; }
[data-theme="dark"] .rra-amount-input { color: #e0f2fe !important; background: transparent !important; }
[data-theme="dark"] .rra-calc-btn { background: rgba(3,105,161,0.12) !important; border-color: rgba(3,105,161,0.25) !important; color: #38bdf8 !important; }
[data-theme="dark"] .rra-items-card { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .rra-running-total { background: linear-gradient(90deg, #071a2e, #0a1e36) !important; border-color: rgba(56,189,248,0.15) !important; color: #bae6fd !important; }
[data-theme="dark"] .rra-validation.is-clean   { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; color: #4a6272 !important; }
[data-theme="dark"] .rra-validation.is-dirty   { background: rgba(5,150,105,0.08) !important; border-color: rgba(5,150,105,0.2) !important; color: #34d399 !important; }
[data-theme="dark"] .rra-validation.is-warning { background: rgba(217,119,6,0.08) !important; border-color: rgba(217,119,6,0.2) !important; color: #fb923c !important; }
[data-theme="dark"] .receiving-item-row { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .receiving-item-row:hover { border-color: rgba(56,189,248,0.2) !important; }
[data-theme="dark"] .receiving-item-row input { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .receiving-item-row input:focus { border-color: #0369a1 !important; background: #0c1f30 !important; }
[data-theme="dark"] .receiving-line-total { background: linear-gradient(90deg, #071a2e, #0a1e36) !important; border-color: rgba(56,189,248,0.15) !important; color: #bae6fd !important; }
[data-theme="dark"] .receiving-running-total { background: linear-gradient(90deg, #071a2e, #0a1e36) !important; border-color: rgba(56,189,248,0.15) !important; color: #bae6fd !important; }

/* ══════════════════════════════════════════════════════
   ADD DELIVERY PREMIUM — adl-*   (blue #1d4ed8 / #3b82f6)
══════════════════════════════════════════════════════ */
.adl { display: flex; flex-direction: column; gap: 0; }

.adl-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #071525 0%, #0d2440 58%, #071222 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(59,130,246,0.15);
}
.adl-hero-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 16px rgba(29,78,216,0.4);
  animation: adl-float 3s ease-in-out infinite;
}
@keyframes adl-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.adl-hero-text { flex: 1; min-width: 0; }
.adl-hero-title { font-size: 17px; font-weight: 700; color: #dbeafe; margin: 0 0 2px; }
.adl-hero-sub   { font-size: 12px; color: rgba(147,197,253,0.75); }
.adl-hero-badge {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3);
  color: #93c5fd; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

.adl-card {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.adl-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #1d4ed8; padding-bottom: 8px; border-bottom: 1.5px solid rgba(29,78,216,0.12);
}
.adl-section-label i { font-size: 12px; }

.adl-grid { display: grid; gap: 12px; }
.adl-grid-2 { grid-template-columns: 1fr 1fr; }
.adl-field-wide { grid-column: 1 / -1; }
.adl-field { display: flex; flex-direction: column; gap: 5px; }
.adl-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #1d4ed8; display: flex; align-items: center; gap: 5px;
}
.adl-label i { font-size: 12px; }
.adl-required { color: #ef4444; margin-left: 2px; }
.adl-input, .adl-select {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px;
  border-radius: 10px; border: 1.5px solid #d1dce8; background: #f8fbfe;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
  appearance: auto;
}
.adl-input:focus, .adl-select:focus {
  border-color: #1d4ed8; background: #fff; box-shadow: 0 0 0 3px rgba(29,78,216,0.1);
}
.adl-input::placeholder { color: #94a3b8; }
.adl-amount-wrap {
  display: flex; align-items: center; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #d1dce8; background: #f8fbfe;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.adl-amount-wrap:focus-within { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,0.1); background: #fff; }
.adl-amount-pfx {
  padding: 0 14px; height: 44px; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: #1d4ed8;
  border-right: 1.5px solid #d1dce8; background: rgba(29,78,216,0.05); white-space: nowrap; flex-shrink: 0;
}
.adl-amount-input {
  flex: 1; height: 44px; padding: 0 12px; border: none; background: transparent;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
}

@media (max-width: 540px) { .adl-grid-2 { grid-template-columns: 1fr; } }

/* ── DARK MODE — adl-* ── */
[data-theme="dark"] .adl-hero { background: linear-gradient(120deg, #030c18 0%, #061628 58%, #040e1e 100%) !important; border-color: rgba(59,130,246,0.12) !important; }
[data-theme="dark"] .adl-hero-title { color: #bfdbfe; }
[data-theme="dark"] .adl-hero-sub   { color: rgba(147,197,253,0.6); }
[data-theme="dark"] .adl-hero-badge { background: rgba(59,130,246,0.1) !important; border-color: rgba(59,130,246,0.2) !important; color: #60a5fa !important; }
[data-theme="dark"] .adl-card { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .adl-section-label { color: #60a5fa !important; border-color: rgba(96,165,250,0.15) !important; }
[data-theme="dark"] .adl-label { color: #60a5fa !important; }
[data-theme="dark"] .adl-input, [data-theme="dark"] .adl-select { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .adl-input:focus, [data-theme="dark"] .adl-select:focus { border-color: #1d4ed8 !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(29,78,216,0.18) !important; }
[data-theme="dark"] .adl-input::placeholder { color: #4a6272 !important; }
[data-theme="dark"] .adl-amount-wrap { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .adl-amount-wrap:focus-within { border-color: #1d4ed8 !important; background: #0c1f30 !important; }
[data-theme="dark"] .adl-amount-pfx { background: rgba(29,78,216,0.12) !important; border-color: rgba(255,255,255,0.08) !important; color: #60a5fa !important; }
[data-theme="dark"] .adl-amount-input { color: #e0f2fe !important; background: transparent !important; }

/* ══════════════════════════════════════════════════════
   ADD / EDIT / VIEW EXPENSE PREMIUM — xpe-*   (amber #b45309 / #f59e0b)
══════════════════════════════════════════════════════ */
.xpe { display: flex; flex-direction: column; gap: 0; }

.xpe-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #1f1000 0%, #2d1a00 58%, #1a0d00 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(245,158,11,0.18);
}
.xpe-hero-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 16px rgba(180,83,9,0.4);
  animation: xpe-float 3s ease-in-out infinite;
}
@keyframes xpe-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.xpe-hero-text { flex: 1; min-width: 0; }
.xpe-hero-title { font-size: 17px; font-weight: 700; color: #fef3c7; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpe-hero-sub   { font-size: 12px; color: rgba(253,230,138,0.75); }
.xpe-hero-badge {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
  color: #fcd34d; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* View-only hero: category icon circle */
.xpe-hero-cat-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  box-shadow: 0 4px 16px rgba(180,83,9,0.4);
}

/* Status chips for view */
.xpe-status-chip {
  padding: 4px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; align-self: flex-start;
}
.xpe-status-success { background: rgba(6,214,160,0.2);  color: #6ee7b7; border: 1px solid rgba(6,214,160,0.3); }
.xpe-status-danger  { background: rgba(239,68,68,0.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.xpe-status-warning { background: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }

/* View hero right col */
.xpe-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* Card */
.xpe-card {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.xpe-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #b45309; padding-bottom: 8px; border-bottom: 1.5px solid rgba(180,83,9,0.12);
}
.xpe-section-label i { font-size: 12px; }

.xpe-grid { display: grid; gap: 12px; }
.xpe-grid-2 { grid-template-columns: 1fr 1fr; }
.xpe-field-wide { grid-column: 1 / -1; }
.xpe-field { display: flex; flex-direction: column; gap: 5px; }
.xpe-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #b45309; display: flex; align-items: center; gap: 5px;
}
.xpe-label i { font-size: 12px; }
.xpe-required { color: #ef4444; margin-left: 2px; }
.xpe-input, .xpe-select, .xpe-textarea {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px;
  border-radius: 10px; border: 1.5px solid #d1dce8; background: #f8fbfe;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
  appearance: auto;
}
.xpe-textarea { height: auto; padding: 10px 13px; resize: vertical; min-height: 68px; }
.xpe-input:focus, .xpe-select:focus, .xpe-textarea:focus {
  border-color: #b45309; background: #fff; box-shadow: 0 0 0 3px rgba(180,83,9,0.1);
}
.xpe-input::placeholder, .xpe-textarea::placeholder { color: #94a3b8; }

.xpe-amount-wrap {
  display: flex; align-items: center; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #d1dce8; background: #f8fbfe;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.xpe-amount-wrap:focus-within { border-color: #b45309; box-shadow: 0 0 0 3px rgba(180,83,9,0.1); background: #fff; }
.xpe-amount-pfx {
  padding: 0 14px; height: 44px; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: #b45309;
  border-right: 1.5px solid #d1dce8; background: rgba(180,83,9,0.05); white-space: nowrap; flex-shrink: 0;
}
.xpe-amount-input {
  flex: 1; height: 44px; padding: 0 12px; border: none; background: transparent;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
}

/* View info grid */
.xpe-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xpe-info-card {
  padding: 12px 14px; border-radius: 10px;
  background: #f8fbfe; border: 1.5px solid #e2eaf2;
  display: flex; flex-direction: column; gap: 3px;
}
.xpe-amount-card { grid-column: 1 / -1; }
.xpe-info-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #b45309; }
.xpe-info-val   { font-size: 14px; font-weight: 600; color: #1a3a5c; }
.xpe-amount-val { font-size: 22px; font-weight: 800; color: #b45309; }

/* View wrapper */
.xpe-view { display: flex; flex-direction: column; gap: 0; }

@media (max-width: 540px) { .xpe-grid-2, .xpe-info-grid { grid-template-columns: 1fr; } }

/* ── DARK MODE — xpe-* ── */
[data-theme="dark"] .xpe-hero { background: linear-gradient(120deg, #0f0800 0%, #1a0e00 58%, #0d0700 100%) !important; border-color: rgba(245,158,11,0.15) !important; }
[data-theme="dark"] .xpe-hero-title { color: #fef3c7; }
[data-theme="dark"] .xpe-hero-sub   { color: rgba(253,230,138,0.6); }
[data-theme="dark"] .xpe-hero-badge { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.22) !important; color: #fcd34d !important; }
[data-theme="dark"] .xpe-hero-cat-icon { box-shadow: 0 4px 16px rgba(180,83,9,0.5); }
[data-theme="dark"] .xpe-card { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .xpe-section-label { color: #fbbf24 !important; border-color: rgba(251,191,36,0.15) !important; }
[data-theme="dark"] .xpe-label { color: #fbbf24 !important; }
[data-theme="dark"] .xpe-input, [data-theme="dark"] .xpe-select, [data-theme="dark"] .xpe-textarea { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .xpe-input:focus, [data-theme="dark"] .xpe-select:focus, [data-theme="dark"] .xpe-textarea:focus { border-color: #b45309 !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(180,83,9,0.18) !important; }
[data-theme="dark"] .xpe-input::placeholder, [data-theme="dark"] .xpe-textarea::placeholder { color: #4a6272 !important; }
[data-theme="dark"] .xpe-amount-wrap { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .xpe-amount-wrap:focus-within { border-color: #b45309 !important; background: #0c1f30 !important; }
[data-theme="dark"] .xpe-amount-pfx { background: rgba(180,83,9,0.12) !important; border-color: rgba(255,255,255,0.08) !important; color: #fbbf24 !important; }
[data-theme="dark"] .xpe-amount-input { color: #e0f2fe !important; background: transparent !important; }
[data-theme="dark"] .xpe-info-card { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .xpe-info-label { color: #fbbf24 !important; }
[data-theme="dark"] .xpe-info-val   { color: #e0f2fe !important; }
[data-theme="dark"] .xpe-amount-val { color: #fbbf24 !important; }

/* ══════════════════════════════════════════════════════
   SCHEDULE APPOINTMENT PREMIUM — appt-*  (purple #7c3aed / #a78bfa)
══════════════════════════════════════════════════════ */
.appt { display: flex; flex-direction: column; gap: 0; }

.appt-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #1e1b4b 0%, #2d2a6e 58%, #18153e 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(167,139,250,0.18);
}
.appt-hero-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,0.4);
  animation: appt-float 3s ease-in-out infinite;
}
@keyframes appt-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.appt-hero-text { flex: 1; min-width: 0; }
.appt-hero-title { font-size: 17px; font-weight: 700; color: #ede9fe; margin: 0 0 2px; }
.appt-hero-sub   { font-size: 12px; color: rgba(196,181,253,0.75); }
.appt-hero-badge {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(167,139,250,0.15); border: 1px solid rgba(167,139,250,0.3);
  color: #c4b5fd; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

.appt-card {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.appt-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #7c3aed; padding-bottom: 8px; border-bottom: 1.5px solid rgba(124,58,237,0.12);
}
.appt-section-label i { font-size: 12px; }

.appt-grid { display: grid; gap: 12px; }
.appt-grid-2 { grid-template-columns: 1fr 1fr; }
.appt-field-wide { grid-column: 1 / -1; }
.appt-field { display: flex; flex-direction: column; gap: 5px; }
.appt-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #7c3aed; display: flex; align-items: center; gap: 5px;
}
.appt-label i { font-size: 12px; }
.appt-required { color: #ef4444; margin-left: 2px; }
.appt-input, .appt-select {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px;
  border-radius: 10px; border: 1.5px solid #d1dce8; background: #f8fbfe;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
  appearance: auto;
}
.appt-input:focus, .appt-select:focus {
  border-color: #7c3aed; background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.appt-input::placeholder { color: #94a3b8; }

@media (max-width: 540px) { .appt-grid-2 { grid-template-columns: 1fr; } }

/* ── DARK MODE — appt-* ── */
[data-theme="dark"] .appt-hero { background: linear-gradient(120deg, #0d0b2e 0%, #160d3d 58%, #0b0928 100%) !important; border-color: rgba(167,139,250,0.15) !important; }
[data-theme="dark"] .appt-hero-title { color: #ede9fe; }
[data-theme="dark"] .appt-hero-sub   { color: rgba(196,181,253,0.6); }
[data-theme="dark"] .appt-hero-badge { background: rgba(167,139,250,0.1) !important; border-color: rgba(167,139,250,0.22) !important; color: #a78bfa !important; }
[data-theme="dark"] .appt-card { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .appt-section-label { color: #a78bfa !important; border-color: rgba(167,139,250,0.15) !important; }
[data-theme="dark"] .appt-label { color: #a78bfa !important; }
[data-theme="dark"] .appt-input, [data-theme="dark"] .appt-select { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .appt-input:focus, [data-theme="dark"] .appt-select:focus { border-color: #7c3aed !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.18) !important; }
[data-theme="dark"] .appt-input::placeholder { color: #4a6272 !important; }

/* ══════════════════════════════════════════════════════
   ADD / EDIT / VIEW EMPLOYEE PREMIUM — emp-*  (indigo #4338ca / #6366f1)
══════════════════════════════════════════════════════ */
.emp { display: flex; flex-direction: column; gap: 0; }

.emp-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #1a1145 0%, #231760 58%, #160e3a 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(99,102,241,0.18);
}
.emp-hero-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 16px rgba(67,56,202,0.4);
  animation: emp-float 3s ease-in-out infinite;
}
@keyframes emp-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* View: avatar circle instead of icon */
.emp-hero-avatar {
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.emp-hero-text { flex: 1; min-width: 0; }
.emp-hero-name { font-size: 16px; font-weight: 700; color: #e0e7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 2px; }
.emp-hero-title { font-size: 17px; font-weight: 700; color: #e0e7ff; margin: 0 0 2px; }
.emp-hero-sub   { font-size: 12px; color: rgba(199,210,254,0.75); }
.emp-hero-badge {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(99,102,241,0.18); border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.emp-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.emp-status-chip {
  padding: 3px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.emp-status-active   { background: rgba(6,214,160,0.2);  color: #6ee7b7; border: 1px solid rgba(6,214,160,0.3); }
.emp-status-inactive { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.emp-id-chip {
  padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(199,210,254,0.7); font-size: 10px; font-weight: 600;
}

.emp-card {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.emp-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #4338ca; padding-bottom: 8px; border-bottom: 1.5px solid rgba(67,56,202,0.12);
}
.emp-section-label i { font-size: 12px; }

.emp-grid { display: grid; gap: 12px; }
.emp-grid-2 { grid-template-columns: 1fr 1fr; }
.emp-field-wide { grid-column: 1 / -1; }
.emp-field { display: flex; flex-direction: column; gap: 5px; }
.emp-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #4338ca; display: flex; align-items: center; gap: 5px;
}
.emp-label i { font-size: 12px; }
.emp-required { color: #ef4444; margin-left: 2px; }
.emp-input, .emp-select {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px;
  border-radius: 10px; border: 1.5px solid #d1dce8; background: #f8fbfe;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
  appearance: auto;
}
.emp-input:focus, .emp-select:focus {
  border-color: #4338ca; background: #fff; box-shadow: 0 0 0 3px rgba(67,56,202,0.1);
}
.emp-input::placeholder { color: #94a3b8; }
.emp-amount-wrap {
  display: flex; align-items: center; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #d1dce8; background: #f8fbfe;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.emp-amount-wrap:focus-within { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.1); background: #fff; }
.emp-amount-pfx {
  padding: 0 14px; height: 44px; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: #4338ca;
  border-right: 1.5px solid #d1dce8; background: rgba(67,56,202,0.05); white-space: nowrap; flex-shrink: 0;
}
.emp-amount-input {
  flex: 1; height: 44px; padding: 0 12px; border: none; background: transparent;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
}

/* View info grid */
.emp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.emp-info-card {
  padding: 12px 14px; border-radius: 10px;
  background: #f8fbfe; border: 1.5px solid #e2eaf2;
  display: flex; flex-direction: column; gap: 3px;
}
.emp-info-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #4338ca; }
.emp-info-val   { font-size: 14px; font-weight: 600; color: #1a3a5c; }

/* View wrapper */
.emp-view { display: flex; flex-direction: column; gap: 0; }

@media (max-width: 540px) { .emp-grid-2, .emp-info-grid { grid-template-columns: 1fr; } }

/* ── DARK MODE — emp-* ── */
[data-theme="dark"] .emp-hero { background: linear-gradient(120deg, #0a0720 0%, #120d36 58%, #090620 100%) !important; border-color: rgba(99,102,241,0.15) !important; }
[data-theme="dark"] .emp-hero-name, [data-theme="dark"] .emp-hero-title { color: #c7d2fe; }
[data-theme="dark"] .emp-hero-sub   { color: rgba(199,210,254,0.6); }
[data-theme="dark"] .emp-hero-badge { background: rgba(99,102,241,0.12) !important; border-color: rgba(99,102,241,0.22) !important; color: #a5b4fc !important; }
[data-theme="dark"] .emp-card { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .emp-section-label { color: #818cf8 !important; border-color: rgba(129,140,248,0.15) !important; }
[data-theme="dark"] .emp-label { color: #818cf8 !important; }
[data-theme="dark"] .emp-input, [data-theme="dark"] .emp-select { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .emp-input:focus, [data-theme="dark"] .emp-select:focus { border-color: #4338ca !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(67,56,202,0.18) !important; }
[data-theme="dark"] .emp-input::placeholder { color: #4a6272 !important; }
[data-theme="dark"] .emp-amount-wrap { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .emp-amount-wrap:focus-within { border-color: #4338ca !important; background: #0c1f30 !important; }
[data-theme="dark"] .emp-amount-pfx { background: rgba(67,56,202,0.12) !important; border-color: rgba(255,255,255,0.08) !important; color: #818cf8 !important; }
[data-theme="dark"] .emp-amount-input { color: #e0f2fe !important; background: transparent !important; }
[data-theme="dark"] .emp-info-card { background: #0a1929 !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .emp-info-label { color: #818cf8 !important; }
[data-theme="dark"] .emp-info-val   { color: #e0f2fe !important; }

/* ══════════════════════════════════════════════════════
   ADD USER PREMIUM — uap-*   (cyan #0891b2 / #22d3ee)
══════════════════════════════════════════════════════ */
.uap { display: flex; flex-direction: column; gap: 0; }

.uap-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(120deg, #042f3d 0%, #063c50 58%, #031e28 100%);
  border-radius: 14px 14px 0 0;
  border: 1.5px solid rgba(34,211,238,0.15);
}
.uap-hero-icon {
  width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 16px rgba(8,145,178,0.4);
  animation: uap-float 3s ease-in-out infinite;
}
@keyframes uap-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.uap-hero-text { flex: 1; min-width: 0; }
.uap-hero-title { font-size: 17px; font-weight: 700; color: #cffafe; margin: 0 0 2px; }
.uap-hero-sub   { font-size: 12px; color: rgba(103,232,249,0.75); }
.uap-hero-badge {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.25);
  color: #67e8f9; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}

.uap-card {
  background: #fff; border: 1.5px solid #e2eaf2; border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 22px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.uap-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #0891b2; padding-bottom: 8px; border-bottom: 1.5px solid rgba(8,145,178,0.12);
}
.uap-section-label i { font-size: 12px; }

.uap-grid { display: grid; gap: 12px; }
.uap-grid-2 { grid-template-columns: 1fr 1fr; }
.uap-field-wide { grid-column: 1 / -1; }
.uap-field { display: flex; flex-direction: column; gap: 5px; }
.uap-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #0891b2; display: flex; align-items: center; gap: 5px;
}
.uap-label i { font-size: 12px; }
.uap-required { color: #ef4444; margin-left: 2px; }
.uap-input, .uap-select {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px;
  border-radius: 10px; border: 1.5px solid #d1dce8; background: #f8fbfe;
  font-size: 14px; color: #1a3a5c; outline: none; font-family: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
  appearance: auto;
}
.uap-input:focus, .uap-select:focus {
  border-color: #0891b2; background: #fff; box-shadow: 0 0 0 3px rgba(8,145,178,0.1);
}
.uap-input::placeholder { color: #94a3b8; }

/* Password wrap with visibility toggle */
.uap-password-wrap {
  display: flex; align-items: center; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #d1dce8; background: #f8fbfe;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.uap-password-wrap:focus-within { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,0.1); background: #fff; }
.uap-password-wrap .uap-input {
  flex: 1; border: none; border-radius: 0; background: transparent; height: 44px;
}
.uap-password-wrap .uap-input:focus { box-shadow: none; background: transparent; }
.uap-pw-toggle {
  flex-shrink: 0; height: 44px; width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-left: 1.5px solid #d1dce8;
  color: #64748b; cursor: pointer; font-size: 15px;
  transition: color 0.15s, background 0.15s;
}
.uap-pw-toggle:hover { color: #0891b2; background: rgba(8,145,178,0.06); }

@media (max-width: 540px) { .uap-grid-2 { grid-template-columns: 1fr; } }

/* ── DARK MODE — uap-* ── */
[data-theme="dark"] .uap-hero { background: linear-gradient(120deg, #011e28 0%, #022430 58%, #011620 100%) !important; border-color: rgba(34,211,238,0.12) !important; }
[data-theme="dark"] .uap-hero-title { color: #cffafe; }
[data-theme="dark"] .uap-hero-sub   { color: rgba(103,232,249,0.6); }
[data-theme="dark"] .uap-hero-badge { background: rgba(34,211,238,0.08) !important; border-color: rgba(34,211,238,0.18) !important; color: #22d3ee !important; }
[data-theme="dark"] .uap-card { background: #0d1f2d !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .uap-section-label { color: #22d3ee !important; border-color: rgba(34,211,238,0.12) !important; }
[data-theme="dark"] .uap-label { color: #22d3ee !important; }
[data-theme="dark"] .uap-input, [data-theme="dark"] .uap-select { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0f2fe !important; }
[data-theme="dark"] .uap-input:focus, [data-theme="dark"] .uap-select:focus { border-color: #0891b2 !important; background: #0c1f30 !important; box-shadow: 0 0 0 3px rgba(8,145,178,0.18) !important; }
[data-theme="dark"] .uap-input::placeholder { color: #4a6272 !important; }
[data-theme="dark"] .uap-password-wrap { background: #0a1929 !important; border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .uap-password-wrap:focus-within { border-color: #0891b2 !important; background: #0c1f30 !important; }
[data-theme="dark"] .uap-password-wrap .uap-input { background: transparent !important; }
[data-theme="dark"] .uap-pw-toggle { border-color: rgba(255,255,255,0.08) !important; color: #4a6272 !important; }

/* ────────────────────────────────────────────────────────
   Record Return — premium modal shell (late-cascade override)
   ──────────────────────────────────────────────────────── */
.modal.modal-return-add {
  width: min(96vw, 700px);
  max-width: 700px;
  border-radius: 22px;
  overflow: hidden;
}
.modal.modal-return-add .modal-header {
  background: linear-gradient(105deg, #0d1f3c 0%, #1a3460 60%, #0a1628 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 22px 22px 0 0;
}
.modal.modal-return-add .modal-header h3 {
  color: #e8f4ff;
}
.modal.modal-return-add .modal-body {
  background: #f2f6fb;
  padding: 18px 20px;
}
.modal.modal-return-add .modal-footer {
  background: #ffffff;
  border-top: 1px solid #dce8f4;
  border-radius: 0 0 22px 22px;
}
.modal.modal-return-add .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border-color: #0891b2;
  color: #fff;
}
.modal.modal-return-add .btn-primary:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}
/* rtn-hero — premium banner for Record Return */
.rtn-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0d1f3c 0%, #1a3460 55%, #0a1628 100%);
  overflow: hidden;
  margin-bottom: 14px;
}
.rtn-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.rtn-hero-orb-1 {
  width: 140px; height: 140px;
  top: -40px; right: 20px;
  background: radial-gradient(circle, rgba(8, 145, 178, 0.28) 0%, transparent 70%);
}
.rtn-hero-orb-2 {
  width: 90px; height: 90px;
  bottom: -30px; left: 30%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
}
.rtn-hero-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(8, 145, 178, 0.22);
  border: 1px solid rgba(8, 145, 178, 0.35);
  box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.1);
}
.rtn-hero-icon {
  font-size: 22px;
  color: #7dd3fc;
}
.rtn-hero-text {
  position: relative;
  flex: 1;
  min-width: 0;
}
.rtn-hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #e8f4ff;
  font-family: "Playfair Display", "Georgia", serif;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.rtn-hero-sub {
  margin: 4px 0 10px;
  font-size: 12px;
  color: rgba(186, 230, 255, 0.7);
  line-height: 1.4;
}
.rtn-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rtn-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(220, 240, 255, 0.85);
}
.rtn-chip.rtn-chip-teal {
  background: rgba(8, 145, 178, 0.22);
  border-color: rgba(8, 145, 178, 0.38);
  color: #7dd3fc;
}
/* Panel label */
.rtn-panel {
  display: grid;
  gap: 10px;
}
.rtn-panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #526070;
}
/* Fields grid */
.rtn-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8dff0;
  background:
    radial-gradient(circle at 100% 0%, rgba(8, 145, 178, 0.07), transparent 34%),
    linear-gradient(170deg, #ffffff 0%, #f3f9ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}
.rtn-fields-grid .form-group {
  margin-bottom: 0;
}
.rtn-fields-grid .form-group:first-child,
.rtn-fields-grid .form-group:last-child {
  grid-column: 1 / -1;
}
.rtn-fields-grid textarea {
  min-height: 96px;
  resize: vertical;
}
.rtn-fields-grid .return-type-group {
  display: grid;
  gap: 10px;
}
/* Hero: swap amber tint for teal/navy */
.return-add-hero {
  background:
    radial-gradient(circle at 10% 50%, rgba(8, 145, 178, 0.1), transparent 45%),
    linear-gradient(120deg, #f0f8ff 0%, #e8f4fb 100%);
  border-color: #c8dff0;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.08);
}
.return-add-panel-header span {
  border-color: rgba(8, 145, 178, 0.25);
  background: rgba(8, 145, 178, 0.08);
  color: #0369a1;
}
.return-add-editor-grid {
  background:
    radial-gradient(circle at 100% 0%, rgba(8, 145, 178, 0.07), transparent 34%),
    linear-gradient(170deg, #ffffff 0%, #f3f9ff 100%);
  border-color: #c8dff0;
}
.modal.modal-return-add input:focus,
.modal.modal-return-add select:focus,
.modal.modal-return-add textarea:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
  background: #ffffff;
}

/* ────────────────────────────────────────────────────────
   Return Details — premium sizing (late-cascade override)
   ──────────────────────────────────────────────────────── */
.modal.modal-return-details {
  width: min(96vw, 700px);
  max-width: 700px;
  border-radius: 22px;
  overflow: hidden;
}
.modal.modal-return-details .modal-header {
  border-radius: 22px 22px 0 0;
}
.modal.modal-return-details .modal-footer {
  border-radius: 0 0 22px 22px;
}
.modal.modal-return-details .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border-color: #0891b2;
  color: #fff;
}
.modal.modal-return-details .btn-primary:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}
/* Teal accent on Return Details hero icon */
.invoice-details-hero-icon.is-return {
  background: linear-gradient(140deg, #0369a1 0%, #0891b2 100%);
  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.25);
}
[data-theme="dark"] .uap-pw-toggle:hover { color: #22d3ee !important; background: rgba(34,211,238,0.06) !important; }

/* ────────────────────────────────────────────────────────
   Issue Gift Card — premium dialog
   ──────────────────────────────────────────────────────── */
#issueGiftCardModal {
  width: min(96vw, 560px);
  max-width: 560px;
  border-radius: 22px;
  overflow: hidden;
}
#issueGiftCardModal .pos-modal-head {
  border-radius: 22px 22px 0 0;
}
#issueGiftCardModal .pos-modal-foot {
  border-radius: 0 0 22px 22px;
}
#issueGiftCardModal .pos-modal-foot .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  border-color: #0891b2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#issueGiftCardModal .pos-modal-foot .btn-primary:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* Hero banner */
.gc-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0d1f3c 0%, #1a3460 55%, #0a1628 100%);
  overflow: hidden;
  margin-bottom: 14px;
}
.gc-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.gc-hero-orb-1 {
  width: 130px;
  height: 130px;
  top: -40px;
  right: 16px;
  background: radial-gradient(circle, rgba(245, 190, 48, 0.26) 0%, transparent 70%);
}
.gc-hero-orb-2 {
  width: 80px;
  height: 80px;
  bottom: -28px;
  left: 36%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.16) 0%, transparent 70%);
}
.gc-hero-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(245, 190, 48, 0.18);
  border: 1px solid rgba(245, 190, 48, 0.34);
  box-shadow: 0 0 0 6px rgba(245, 190, 48, 0.08);
}
.gc-hero-icon {
  font-size: 20px;
  color: #fcd34d;
}
.gc-hero-text {
  position: relative;
  flex: 1;
  min-width: 0;
}
.gc-hero-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #e8f4ff;
  font-family: "Playfair Display", "Georgia", serif;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.gc-hero-sub {
  margin: 3px 0 9px;
  font-size: 12px;
  color: rgba(186, 230, 255, 0.65);
  line-height: 1.4;
}
.gc-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gc-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(220, 240, 255, 0.82);
}
.gc-chip.gc-chip-gold {
  background: rgba(245, 190, 48, 0.18);
  border-color: rgba(245, 190, 48, 0.36);
  color: #fcd34d;
}

/* Fields grid */
.gc-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #c8dff0;
  background:
    radial-gradient(circle at 100% 0%, rgba(8, 145, 178, 0.07), transparent 34%),
    linear-gradient(170deg, #ffffff 0%, #f3f9ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.gc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gc-field.gc-field-full {
  grid-column: 1 / -1;
}
.gc-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3f607d;
}
.gc-field-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #7a95ad;
  font-size: 10.5px;
}
.gc-required {
  color: #e03e3e;
}
.gc-field input,
.gc-field select {
  min-height: 40px;
  border: 1.5px solid #c8dff0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 12px;
  font-size: 13.5px;
  color: #1e3a52;
  font-family: inherit;
  transition: border-color 150ms, box-shadow 150ms;
  width: 100%;
  box-sizing: border-box;
}
.gc-field input:focus,
.gc-field select:focus {
  outline: none;
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
  background: #ffffff;
}
.gc-field input::placeholder {
  color: #9bb3c8;
}
.gc-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
}

@media (max-width: 480px) {
  .gc-fields-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gc-field.gc-field-full {
    grid-column: span 1;
  }
}

/* ════════════════════════════════════════════════════════
   Gift Cards PAGE — premium design
   ════════════════════════════════════════════════════════ */

/* ── Page banner ── */
.gc-page-banner {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(120deg, #0d1f3c 0%, #1a3460 52%, #0a1628 100%);
  padding: 24px 28px 20px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.gc-pb-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.gc-pb-orb-1 {
  width: 260px; height: 260px;
  top: -90px; right: -50px;
  background: radial-gradient(circle, rgba(245, 190, 48, 0.2) 0%, transparent 68%);
}
.gc-pb-orb-2 {
  width: 180px; height: 180px;
  bottom: -70px; left: 8%;
  background: radial-gradient(circle, rgba(8, 145, 178, 0.18) 0%, transparent 70%);
}
.gc-pb-orb-3 {
  width: 110px; height: 110px;
  top: 30px; left: 40%;
  background: radial-gradient(circle, rgba(245, 190, 48, 0.1) 0%, transparent 70%);
}
.gc-pb-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.gc-pb-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gc-pb-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fcd34d;
  background: rgba(245, 190, 48, 0.18);
  border: 1px solid rgba(245, 190, 48, 0.32);
  box-shadow: 0 0 0 8px rgba(245, 190, 48, 0.07);
}
.gc-pb-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #e8f4ff;
  font-family: "Playfair Display", "Georgia", serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.gc-pb-sub {
  margin: 5px 0 0;
  font-size: 13px;
  color: rgba(186, 230, 255, 0.62);
  line-height: 1.4;
}
/* Issue Gift Card button in banner */
.gc-issue-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0d1f3c;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(245, 190, 48, 0.38);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gc-issue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245, 190, 48, 0.48);
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
}
/* KPI chips row */
.gc-pb-kpis {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.gc-pb-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 110px;
}
.gc-pb-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.gc-pb-kpi-val.gc-pb-kpi-green { color: #6ee7b7; }
.gc-pb-kpi-val.gc-pb-kpi-amber { color: #fcd34d; }
.gc-pb-kpi-val.gc-pb-kpi-gold  { color: #fbbf24; }
.gc-pb-kpi-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(186, 230, 255, 0.5);
}

/* ── Table card ── */
.gc-table-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #dce8f4;
  box-shadow: 0 4px 22px rgba(8, 30, 60, 0.08);
  overflow: hidden;
}
.gc-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px;
  background: linear-gradient(105deg, #0d1f3c 0%, #1a3460 60%, #0a1628 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.14);
}
.gc-table-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #e8f4ff;
  letter-spacing: -0.01em;
}
.gc-table-head-left i {
  color: #7dd3fc;
}
.gc-table-count {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(245, 190, 48, 0.18);
  border: 1px solid rgba(245, 190, 48, 0.3);
  color: #fcd34d;
  letter-spacing: 0.04em;
}
/* Table header cells */
.gc-data-table thead th {
  background: linear-gradient(180deg, #f5f9fd 0%, #eef5fb 100%);
  color: #3a5f80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 2px solid #dce8f4;
}
/* Code tag */
.gc-code-tag {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f1fb 100%);
  border: 1px solid #c2d9ef;
  color: #0d4f80;
}
/* Balance cell */
.gc-balance {
  color: #065f46;
  font-weight: 800;
  font-size: 13.5px;
}
/* Never expiry */
.gc-never {
  color: #9ab3c8;
  font-style: italic;
  font-size: 12px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gc-pb-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .gc-issue-btn {
    width: 100%;
    justify-content: center;
  }
  .gc-pb-kpi {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .gc-page-banner {
    padding: 18px 16px 16px;
    border-radius: 14px;
  }
  .gc-pb-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
  .gc-pb-title {
    font-size: 22px;
  }
}

/* ════════════════════════════════════════════════════════
   Supplier Returns PAGE — premium design
   ════════════════════════════════════════════════════════ */

/* ── Page banner ── */
.sr-page-banner {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(120deg, #0c2340 0%, #0f4f47 52%, #0d6b64 100%);
  padding: 24px 28px 20px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.sr-pb-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sr-pb-orb-1 {
  width: 260px; height: 260px;
  top: -90px; right: -50px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, transparent 68%);
}
.sr-pb-orb-2 {
  width: 180px; height: 180px;
  bottom: -70px; left: 8%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
}
.sr-pb-orb-3 {
  width: 110px; height: 110px;
  top: 30px; left: 42%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.12) 0%, transparent 70%);
}
.sr-pb-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sr-pb-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sr-pb-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #5eead4;
  background: rgba(20, 184, 166, 0.2);
  border: 1px solid rgba(20, 184, 166, 0.35);
  box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.08);
}
.sr-pb-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #e8f4ff;
  font-family: "Playfair Display", "Georgia", serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sr-pb-sub {
  margin: 5px 0 0;
  font-size: 13px;
  color: rgba(186, 230, 255, 0.6);
  line-height: 1.4;
}
.sr-new-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.38);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sr-new-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 184, 166, 0.48);
  background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
}
.sr-pb-kpis {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sr-pb-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 110px;
}
.sr-pb-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sr-pb-kpi-val.sr-pb-kpi-amber { color: #fcd34d; }
.sr-pb-kpi-val.sr-pb-kpi-teal  { color: #5eead4; }
.sr-pb-kpi-val.sr-pb-kpi-green { color: #6ee7b7; }
.sr-pb-kpi-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(186, 230, 255, 0.5);
}

/* ── Table card ── */
.sr-table-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #dce8f4;
  box-shadow: 0 4px 22px rgba(8, 30, 60, 0.08);
  overflow: hidden;
}
.sr-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px;
  background: linear-gradient(105deg, #0c2340 0%, #0f4f47 58%, #0d6b64 100%);
  border-bottom: 1px solid rgba(20, 184, 166, 0.18);
}
.sr-table-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #e8f4ff;
  letter-spacing: -0.01em;
}
.sr-table-head-left i { color: #5eead4; }
.sr-table-count {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.18);
  border: 1px solid rgba(20, 184, 166, 0.32);
  color: #5eead4;
  letter-spacing: 0.04em;
}
.sr-data-table thead th {
  background: linear-gradient(180deg, #f5f9fd 0%, #eef5fb 100%);
  color: #3a5f80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 2px solid #dce8f4;
}
.sr-code-tag {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #f0fffe 0%, #e6faf8 100%);
  border: 1px solid #99e6df;
  color: #0f5c56;
}
.sr-amount {
  font-weight: 700;
  color: #0f5c56;
  font-size: 13.5px;
}
.sr-reason-cell {
  color: #4a6075;
  font-size: 13px;
  max-width: 180px;
}
.sr-items-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-item-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f0fffe;
  border: 1px solid #b2e8e4;
  color: #0f766e;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Dialog ── */
#addSupplierReturnModal {
  width: min(96vw, 640px);
  max-width: 640px;
  border-radius: 22px;
  overflow: hidden;
}
#addSupplierReturnModal .pos-modal-head {
  border-radius: 22px 22px 0 0;
}
#addSupplierReturnModal .pos-modal-foot {
  border-radius: 0 0 22px 22px;
}
#addSupplierReturnModal .pos-modal-foot .btn-primary {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  border-color: #0f766e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#addSupplierReturnModal .pos-modal-foot .btn-primary:hover {
  background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
}

/* Dialog hero banner */
.sr-dlg-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0c2340 0%, #0f4f47 52%, #0d6b64 100%);
  overflow: hidden;
  margin-bottom: 14px;
}
.sr-dlg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sr-dlg-orb-1 {
  width: 130px; height: 130px;
  top: -40px; right: 16px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.3) 0%, transparent 70%);
}
.sr-dlg-orb-2 {
  width: 80px; height: 80px;
  bottom: -28px; left: 35%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
}
.sr-dlg-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(20, 184, 166, 0.2);
  border: 1px solid rgba(20, 184, 166, 0.36);
  box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.08);
}
.sr-dlg-icon { font-size: 20px; color: #5eead4; }
.sr-dlg-text { position: relative; flex: 1; min-width: 0; }
.sr-dlg-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #e8f4ff;
  font-family: "Playfair Display", "Georgia", serif;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sr-dlg-sub {
  margin: 3px 0 9px;
  font-size: 12px;
  color: rgba(186, 230, 255, 0.62);
  line-height: 1.4;
}
.sr-dlg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-dlg-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(220, 240, 255, 0.82);
}
.sr-dlg-chip.sr-dlg-chip-teal {
  background: rgba(20, 184, 166, 0.2);
  border-color: rgba(20, 184, 166, 0.38);
  color: #5eead4;
}

/* Dialog fields */
.sr-dlg-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.sr-dlg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-dlg-field label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #3f607d;
}
.sr-required { color: #e03e3e; }
.sr-dlg-optional { font-size: 10px; font-weight: 500; color: #8aa5bc; text-transform: none; letter-spacing: 0; }
.sr-dlg-field .form-control {
  border: 1.5px solid #c8dff0;
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  min-height: 40px;
  transition: border-color 150ms, box-shadow 150ms;
}
.sr-dlg-field .form-control:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
  background: #fff;
}
.sr-dlg-field textarea.form-control { min-height: 72px; padding: 8px 12px; resize: vertical; }

/* Items section */
.sr-items-section {
  border-radius: 14px;
  border: 1px solid #c8dff0;
  background: linear-gradient(170deg, #f8fbff 0%, #f0f8ff 100%);
  overflow: hidden;
}
.sr-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(105deg, #0d1f3c 0%, #1a3460 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.14);
}
.sr-items-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #e8f4ff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sr-items-title i { color: #7dd3fc; font-size: 13px; }
.sr-add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(20, 184, 166, 0.4);
  background: rgba(20, 184, 166, 0.18);
  color: #5eead4;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.sr-add-item-btn:hover {
  background: rgba(20, 184, 166, 0.28);
  border-color: rgba(20, 184, 166, 0.6);
}
.sr-item-rows { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 48px; }
.sr-item-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 88px 110px 36px;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #d4e8f0;
  box-shadow: 0 1px 4px rgba(8, 30, 60, 0.05);
}
.sr-item-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-item-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a6075;
}
.sr-item-field .form-control {
  min-height: 36px;
  border: 1.5px solid #c8dff0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  padding: 0 10px;
}
.sr-item-field .form-control:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
  outline: none;
}
.sr-item-remove {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #fca5a5;
  background: #fff5f5;
  color: #dc2626;
  font-size: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  flex-shrink: 0;
}
.sr-item-remove:hover { background: #fee2e2; border-color: #f87171; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sr-pb-top { flex-direction: column; align-items: flex-start; }
  .sr-new-btn { width: 100%; justify-content: center; }
  .sr-pb-kpi { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .sr-item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sr-item-remove { grid-column: 2; justify-self: end; }
}
@media (max-width: 480px) {
  .sr-page-banner { padding: 18px 16px 16px; border-radius: 14px; }
  .sr-pb-icon { width: 52px; height: 52px; font-size: 22px; }
  .sr-pb-title { font-size: 22px; }
  .sr-item-row { grid-template-columns: minmax(0, 1fr); }
  .sr-item-remove { grid-column: 1; justify-self: start; }
}

/* ── Supplier Return dialog — field & input polish ── */

/* Give modal body a tighter, premium feel */
#addSupplierReturnModal .pos-modal-body {
  padding: 14px 18px;
  background: #f2f6fb;
  gap: 12px;
}

/* Fields card wrapper */
.sr-dlg-fields {
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #c8dff0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* Select: override browser default appearance */
.sr-dlg-field select,
.sr-dlg-field input,
.sr-dlg-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0 11px;
  border: 1.5px solid #c8dff0;
  border-radius: 9px;
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  color: #1e3a52;
  transition: border-color 150ms, box-shadow 150ms;
}
.sr-dlg-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f766e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
  cursor: pointer;
}
.sr-dlg-field textarea {
  min-height: 62px;
  padding: 8px 11px;
  resize: vertical;
}
.sr-dlg-field select:focus,
.sr-dlg-field input:focus,
.sr-dlg-field textarea:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
  background: #fff;
}
.sr-dlg-field select::placeholder,
.sr-dlg-field input::placeholder { color: #9bb3c8; }

/* Item row inputs */
.sr-item-field select,
.sr-item-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0 10px;
  border: 1.5px solid #c8dff0;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #1e3a52;
  transition: border-color 150ms, box-shadow 150ms;
}
.sr-item-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f766e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  cursor: pointer;
}
.sr-item-field select:focus,
.sr-item-field input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

/* Items section: white card for each row */
.sr-item-rows {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 56px;
}
.sr-item-row {
  background: #ffffff;
  border: 1px solid #c8dff0;
  box-shadow: 0 1px 4px rgba(8,30,60,0.06);
}

/* ═══════════════════════════════════════════════════════════════
   NEW Supplier Return Dialog — complete premium redesign
   ═══════════════════════════════════════════════════════════════ */
#addSupplierReturnModal {
  width: min(96vw, 660px);
  border-radius: 22px;
  border: none;
  padding: 0;
  overflow: hidden;
  max-height: 90vh;
  box-shadow: 0 24px 64px rgba(8, 30, 60, 0.32), 0 4px 16px rgba(8, 30, 60, 0.18);
}
#addSupplierReturnModal::backdrop {
  background: rgba(6, 18, 40, 0.65);
  backdrop-filter: blur(3px);
}

/* ── Dialog header ── */
.sr-dlg-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 12px;
  background: linear-gradient(120deg, #0d1f3c 0%, #1a3460 55%, #0e4a54 100%);
  overflow: hidden;
  flex-shrink: 0;
}
.sr-dlg-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 180px 90px at 8% 50%, rgba(56,189,248,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 120px 80px at 92% 30%, rgba(20,184,166,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.sr-dlg-head-icon-wrap {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(56, 189, 248, 0.15);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #7dd3fc;
  flex-shrink: 0;
}
.sr-dlg-head-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.sr-dlg-head-title {
  margin: 0 0 2px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #e8f4ff;
  line-height: 1.2;
}
.sr-dlg-head-sub {
  margin: 0;
  font-size: 11px;
  color: rgba(183, 215, 240, 0.75);
  font-weight: 400;
}
.sr-dlg-head .pos-modal-x {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(200, 225, 245, 0.8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 150ms, border-color 150ms, color 150ms;
  flex-shrink: 0;
}
.sr-dlg-head .pos-modal-x:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

/* ── Dialog scrollable body ── */
.sr-dlg-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f2f6fb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sr-dlg-body::-webkit-scrollbar { width: 5px; }
.sr-dlg-body::-webkit-scrollbar-track { background: transparent; }
.sr-dlg-body::-webkit-scrollbar-thumb { background: #c0d4e8; border-radius: 4px; }

/* ── White details card ── */
.sr-dlg-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #d4e8f5;
  box-shadow: 0 1px 5px rgba(8, 30, 60, 0.06);
  overflow: hidden;
}
.sr-dlg-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(105deg, #f0f7ff 0%, #e8f4fb 100%);
  border-bottom: 1px solid #d4e8f5;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #0f766e;
}
.sr-dlg-card-label i { font-size: 11px; color: #14b8a6; }
.sr-dlg-card > .sr-dlg-field {
  padding: 9px 14px 0;
}
.sr-dlg-card > .sr-dlg-field:last-child {
  padding-bottom: 10px;
}

/* ── Items card ── */
.sr-dlg-items-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #d4e8f5;
  box-shadow: 0 1px 5px rgba(8, 30, 60, 0.06);
  overflow: hidden;
}
.sr-dlg-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(105deg, #0d1f3c 0%, #1a3460 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.14);
}
.sr-dlg-items-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b7d7f0;
}
.sr-dlg-items-title i { color: #7dd3fc; font-size: 11px; }

/* Override sr-add-item-btn to ensure it shows in the dark header */
.sr-dlg-items-head .sr-add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(20, 184, 166, 0.45);
  background: rgba(20, 184, 166, 0.16);
  color: #5eead4;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.sr-dlg-items-head .sr-add-item-btn:hover {
  background: rgba(20, 184, 166, 0.3);
  border-color: rgba(20, 184, 166, 0.65);
}

/* Items inner rows container */
.sr-dlg-items-card .sr-item-rows {
  padding: 8px 12px 10px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sr-dlg-items-card .sr-item-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 80px 100px 32px;
  gap: 6px;
  align-items: end;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f8fbff;
  border: 1px solid #d4e8f0;
  box-shadow: 0 1px 3px rgba(8, 30, 60, 0.04);
}

/* ── Dialog footer ── */
.sr-dlg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  border-top: 1px solid #d4e8f5;
  flex-shrink: 0;
}
.sr-dlg-cancel {
  padding: 7px 16px;
  border-radius: 9px;
  border: 1.5px solid #c8dff0;
  background: #fff;
  color: #4a6075;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.sr-dlg-cancel:hover {
  background: #f0f7ff;
  border-color: #7ab4d0;
  color: #1e3a52;
}
.sr-dlg-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #0f766e 0%, #0e8a82 50%, #0d9488 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.35);
  transition: filter 150ms, box-shadow 150ms;
}
.sr-dlg-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.45);
}
.sr-dlg-submit i { font-size: 12px; }

/* ── Responsive tweaks for small screens ── */
@media (max-width: 520px) {
  #addSupplierReturnModal { border-radius: 14px; }
  .sr-dlg-head { padding: 11px 14px; gap: 10px; }
  .sr-dlg-head-icon-wrap { width: 36px; height: 36px; font-size: 15px; }
  .sr-dlg-head-title { font-size: 15px; }
  .sr-dlg-body { padding: 10px 12px; gap: 8px; }
  .sr-dlg-items-card .sr-item-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .sr-dlg-items-card .sr-item-remove { grid-column: 2; justify-self: end; }
}

/* Supplier Returns table — delete button */
.sr-delete-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #fca5a5;
  background: #fff5f5;
  color: #dc2626;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.sr-delete-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
}

/* ═══════════════════════════════════════════════════════════════
   New Sale dialog — section cards  (ns-*)
   ═══════════════════════════════════════════════════════════════ */

/* White card wrapper replacing bare po-create-field-notes */
.modal.modal-po-create .ns-section-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d3e6f5;
  box-shadow: 0 2px 8px rgba(8, 30, 60, 0.05);
  overflow: hidden;
}

/* Dark teal card header strip */
.modal.modal-po-create .ns-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(105deg, #0d1f3c 0%, #1a3460 100%);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #b7d7f0;
}
.modal.modal-po-create .ns-card-header i { color: #7dd3fc; font-size: 12px; }
.modal.modal-po-create .ns-card-header .ns-card-header-hint {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(183, 215, 240, 0.6);
}

/* Inner padding for card body */
.modal.modal-po-create .ns-card-body {
  padding: 14px 16px;
}

/* Amount card — strip out duplicate border/bg since ns-section-card handles it */
.modal.modal-po-create .ns-amount-inner,
.modal.modal-po-create .ns-items-inner {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px;
  background: transparent;
}

/* Items product picker — put search + button on one row */
.modal.modal-po-create .po-product-picker {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 0;
}

/* Premium teal "Add" button replacing the plain btn-secondary */
.modal.modal-po-create .ns-add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 46px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15, 118, 110, 0.3);
  transition: filter 140ms, box-shadow 140ms;
}
.modal.modal-po-create .ns-add-item-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 5px 14px rgba(15, 118, 110, 0.42);
}

/* po-hero orb colors for New Sale (sky blue instead of navy) */
.modal.modal-po-create .po-hero {
  background: linear-gradient(128deg, #0b1f3a 0%, #083050 55%, #06243e 100%);
}
.modal.modal-po-create .po-hero-orb-1 {
  background: radial-gradient(circle, rgba(56,189,248,0.18) 0%, transparent 70%);
}
.modal.modal-po-create .po-hero-orb-2 {
  background: radial-gradient(circle, rgba(20,184,166,0.15) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════
   Create New Sale dialog — premium (nsp-*)
   ═══════════════════════════════════════════════════════════════ */

/* Info bar */
.modal.modal-po-create .nsp-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  background: linear-gradient(105deg, #0d2d2a 0%, #134e4a 60%, #0f766e 100%);
  border-radius: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.modal.modal-po-create .nsp-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  color: #5eead4;
  font-size: 16px;
  flex-shrink: 0;
}
.modal.modal-po-create .nsp-info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.modal.modal-po-create .nsp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(94,234,212,0.25);
  color: #ccfbf1;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.modal.modal-po-create .nsp-chip i { color: #5eead4; font-size: 10px; }
.modal.modal-po-create .nsp-chip-tip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(204,251,241,0.65);
  font-weight: 500;
  font-style: italic;
}

/* Cards */
.modal.modal-po-create .nsp-card {
  background: #ffffff;
  border-radius: 13px;
  border: 1px solid #d3e8e5;
  box-shadow: 0 2px 8px rgba(15,118,110,0.06);
  padding: 14px 16px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.modal.modal-po-create .nsp-card:last-child { margin-bottom: 0; }
.modal.modal-po-create .nsp-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f766e;
}
.modal.modal-po-create .nsp-card-title i { font-size: 13px; }
.modal.modal-po-create .nsp-title-hint {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  margin-left: auto;
}

/* Two-column grid */
.modal.modal-po-create .nsp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 520px) {
  .modal.modal-po-create .nsp-two-col { grid-template-columns: 1fr; }
}

/* Field + label */
.modal.modal-po-create .nsp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.modal.modal-po-create .nsp-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.modal.modal-po-create .nsp-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  font-size: 10px;
}

/* Select */
.modal.modal-po-create .nsp-select {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  border-radius: 9px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f766e' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms;
}
.modal.modal-po-create .nsp-select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}

/* Amount card */
.modal.modal-po-create .nsp-amount-card {
  background: linear-gradient(135deg, #f0fdf9 0%, #ffffff 100%);
  border-color: #99f6e4;
}
.modal.modal-po-create .nsp-amount-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.modal.modal-po-create .nsp-amount-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 160px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid #0f766e;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15,118,110,0.10);
}
.modal.modal-po-create .nsp-amount-currency {
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  background: #f0fdf9;
  border-right: 1.5px solid #99f6e4;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.modal.modal-po-create .nsp-amount-input {
  flex: 1;
  border: none;
  outline: none;
  height: 100%;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  background: transparent;
  min-width: 0;
}
.modal.modal-po-create .nsp-amount-input[readonly] { cursor: default; color: #334155; }
.modal.modal-po-create .nsp-amount-hint {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  color: #64748b;
}
.modal.modal-po-create .nsp-use-calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid #0f766e;
  background: transparent;
  color: #0f766e;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms, color 140ms;
}
.modal.modal-po-create .nsp-use-calc-btn:hover {
  background: #0f766e;
  color: #fff;
}

/* Items card */
.modal.modal-po-create .nsp-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}
.modal.modal-po-create .nsp-product-search {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-size: 13px;
  color: #1e293b;
  transition: border-color 140ms, box-shadow 140ms;
  box-sizing: border-box;
}
.modal.modal-po-create .nsp-product-search:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}
.modal.modal-po-create .nsp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 42px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(15,118,110,0.28);
  transition: filter 140ms, box-shadow 140ms;
}
.modal.modal-po-create .nsp-add-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 5px 14px rgba(15,118,110,0.40);
}
.modal.modal-po-create .nsp-stats-row { margin-bottom: 8px; }
.modal.modal-po-create .nsp-table { margin-top: 0; }
.modal.modal-po-create .nsp-subtotal { margin-top: 6px; }

/* Generic input (mobile money / pay later fields) */
.modal.modal-po-create .nsp-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-size: 13px;
  color: #1e293b;
  transition: border-color 140ms, box-shadow 140ms;
  box-sizing: border-box;
}
.modal.modal-po-create .nsp-input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}
.modal.modal-po-create .nsp-input[type="date"] { color-scheme: light; }

/* ── POS Layout Toggle ──────────────────────────────────────── */
.sales-layout-toggle {
  display: inline-flex;
  border: 1px solid #c5d4e2;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f5fa;
  flex-shrink: 0;
}
.slt-btn {
  background: none;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  color: #6b8299;
  font-size: 13px;
  transition: background .15s, color .15s;
  line-height: 1;
}
.slt-btn:hover { background: #e2ecf5; color: #0f766e; }
.slt-btn.is-active { background: #0f766e; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   POS LIST VIEW  — shared column template (header + cards):
   36px  |  1fr  |  100px  |  110px  |  110px  |  115px
   icon  | name  | category| stock   | price   | status
═══════════════════════════════════════════════════════════════ */

/* ── Grid-mode: hide list-only elements ─── */
.spd-name-col  { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.spd-sku,
.spd-category-col, .spd-stock-col,
.spd-reorder-col,  .spd-cost-col, .spd-status-col,
.spd-stock-num,    .spd-stock-bar, .spd-stock-fill,
.spd-status        { display: none; }
.grid-only         { display: flex; }
#salesListHeader   { display: none; }

/* ── Stock bar colors (shared) ─── */
.spd-stock-fill.in-stock  { background: #0f766e; }
.spd-stock-fill.low-stock { background: #d97706; }
.spd-stock-fill.out-stock { background: #dc2626; }

/* ── Status badge colors (shared) ─── */
.spd-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; border-radius: 999px;
  padding: 4px 11px; white-space: nowrap; letter-spacing: 0.01em;
}
.spd-status.in-stock  { background: #d1fae5; color: #065f46; }
.spd-status.low-stock { background: #fef3c7; color: #92400e; }
.spd-status.out-stock { background: #fee2e2; color: #991b1b; }

/* ════════════════════════════════════════════════════════════
   LIST VIEW ACTIVE
════════════════════════════════════════════════════════════ */

/* Outer container: switch from 4-col grid to single-col flex */
.sales-products-grid.is-list-view,
.sales-page .sales-products-grid.is-list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-right: 2px !important;
}

/* ── Shared grid row template ── */
.sales-products-grid.is-list-view #salesListHeader,
.sales-products-grid.is-list-view .sales-product-card,
.sales-page .sales-products-grid.is-list-view .sales-product-card {
  display: grid;                /* NO !important — JS must be able to set display:none */
  grid-template-columns: 36px 1fr 100px 110px 110px 115px !important;
  align-items: center !important;
  gap: 0 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Header row ── */
.sales-products-grid.is-list-view #salesListHeader {
  display: grid;
  padding: 4px 14px 8px !important;
  margin-bottom: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.sales-products-grid.is-list-view #salesListHeader span {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8fa8bd !important;
  padding: 0 !important;
}

/* ── Each product card ── */
.sales-products-grid.is-list-view .sales-product-card,
.sales-page .sales-products-grid.is-list-view .sales-product-card {
  min-height: 60px !important;
  max-height: none !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  content-visibility: visible !important;
  contain-intrinsic-size: unset !important;
  border: 1px solid #e4edf5 !important;
  background: #ffffff !important;
  text-align: left !important;
  transition: background .15s, border-color .15s, box-shadow .15s !important;
}
.sales-products-grid.is-list-view .sales-product-card:nth-child(even),
.sales-page .sales-products-grid.is-list-view .sales-product-card:nth-child(even) {
  background: #fafcfe !important;
}
.sales-products-grid.is-list-view .sales-product-card:hover,
.sales-page .sales-products-grid.is-list-view .sales-product-card:hover {
  background: #f0faf9 !important;
  border-color: #0f766e !important;
  box-shadow: 0 2px 8px rgba(15,118,110,.1) !important;
  transform: none !important;
}
.sales-products-grid.is-list-view .sales-product-card:disabled,
.sales-products-grid.is-list-view .sales-product-card.is-out-stock {
  background: #fdfcfb !important;
  opacity: 0.72 !important;
}

/* ── Col 1: Icon ── */
.sales-products-grid.is-list-view .sales-product-icon,
.sales-page .sales-products-grid.is-list-view .sales-product-icon {
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  border-radius: 9px !important; font-size: 14px !important;
  align-self: center !important; margin: 0 !important;
}

/* ── Col 2: Product name + SKU ── */
.sales-products-grid.is-list-view .spd-name-col {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 3px !important;
  min-width: 0 !important; overflow: hidden !important;
}
.sales-products-grid.is-list-view .sales-product-name,
.sales-page .sales-products-grid.is-list-view .sales-product-name {
  display: block !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; width: 100% !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: #0d2b40 !important; line-height: 1.25 !important;
  -webkit-line-clamp: unset !important; padding-right: 0 !important;
}
.sales-products-grid.is-list-view .spd-sku {
  display: inline-block !important;
  font-size: 9.5px !important; color: #7090a8 !important;
  background: #f0f5fa !important; border: 1px solid #dce8f0 !important;
  border-radius: 4px !important; padding: 1px 5px !important;
  font-family: 'Courier New', monospace; white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Col 3: Category ── */
.sales-products-grid.is-list-view .spd-category-col {
  display: flex !important; align-items: center !important; min-width: 0;
}
.sales-products-grid.is-list-view .spd-category-col .sales-product-category {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px !important; max-width: 100%;
}

/* ── Col 4: Stock (number + bar) ── */
.sales-products-grid.is-list-view .spd-stock-col {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 4px !important; flex-shrink: 0;
}
.sales-products-grid.is-list-view .spd-stock-num {
  display: block !important;
  font-size: 16px !important; font-weight: 800 !important;
  color: #0d2b40 !important; line-height: 1 !important;
}
.sales-products-grid.is-list-view .spd-stock-bar {
  display: block !important; width: 72px; height: 3px;
  background: #e6edf4; border-radius: 999px; overflow: hidden;
}
.sales-products-grid.is-list-view .spd-stock-fill {
  display: block !important; height: 100%;
  border-radius: 999px; transition: width .4s ease;
}

/* ── Col 5: Price ── */
.sales-products-grid.is-list-view .sales-product-card > .sales-product-price,
.sales-page .sales-products-grid.is-list-view .sales-product-card > .sales-product-price {
  display: block !important;
  font-size: 14px !important; font-weight: 800 !important;
  color: #0d6b60 !important; margin-top: 0 !important;
  white-space: nowrap;
}

/* ── Col 6: Status badge ── */
.sales-products-grid.is-list-view .spd-status-col {
  display: flex !important; align-items: center !important;
}
.sales-products-grid.is-list-view .spd-status { display: inline-flex !important; }

/* ── Hide grid-only / reorder / cost in list mode ── */
.sales-products-grid.is-list-view .grid-only,
.sales-page .sales-products-grid.is-list-view .grid-only,
.sales-products-grid.is-list-view .spd-reorder-col,
.sales-products-grid.is-list-view .spd-cost-col { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   LIST VIEW: hide the dynamically-injected restock note — the
   spd-status badge already shows "Out of Stock" clearly
═══════════════════════════════════════════════════════════════ */
.sales-products-grid.is-list-view .sales-product-restock-note,
.sales-page .sales-products-grid.is-list-view .sales-product-restock-note {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY CHIPS — premium redesign
═══════════════════════════════════════════════════════════════ */

/* Shell container */
.sales-page .sales-category-shell {
  margin-bottom: 10px;
}

/* Header row — compact and subdued */
.sales-page .sales-category-meta {
  margin: 0 2px 5px;
  align-items: center;
}
.sales-page .sales-category-meta p {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa8bc;
}
.sales-page .sales-category-meta small {
  font-size: 9.5px;
  color: #a8becd;
  font-style: italic;
}

/* Scroll row — clean flat strip, scrollbar VISIBLE but elegant */
.sales-page .sales-category-row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 4px 8px !important;
  gap: 6px !important;
  min-height: auto !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: thin !important;
  scrollbar-color: #b8ceda transparent !important;
}
.sales-page .sales-category-row::-webkit-scrollbar {
  height: 4px !important;
  display: block !important;
}
.sales-page .sales-category-row::-webkit-scrollbar-thumb {
  background: #b8ceda !important;
  border-radius: 999px !important;
  border: none !important;
}
.sales-page .sales-category-row::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Inactive chip — clean, subtle, no transform to avoid layout shift */
.sales-page .sales-chip {
  height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #3a607a !important;
  background: #ffffff !important;
  border: 1.5px solid #cfe0ed !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(13,38,61,.07) !important;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.sales-page .sales-chip:hover {
  color: #0f766e !important;
  background: #f0faf9 !important;
  border-color: #9dd0cb !important;
  box-shadow: 0 3px 10px rgba(15,118,110,.14) !important;
  transform: none !important;
}

/* Active chip — solid teal, no transform */
.sales-page .sales-chip.active {
  background: linear-gradient(135deg, #0c6b64 0%, #0f9d8f 55%, #14b8a6 100%) !important;
  border-color: transparent !important;
  color: #f0fefc !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(15,118,110,.3) !important;
  transform: none !important;
}
.sales-page .sales-chip.active:hover {
  box-shadow: 0 5px 16px rgba(15,118,110,.38) !important;
  transform: none !important;
}


/* ============================================
   TRASH PAGE — Premium Light Design
   ============================================ */

/* ── Add trash-page to the existing page-content gradient selector ── */
:is(
  .trash-page
) .page-content {
  background:
    radial-gradient(circle at 8% 10%, rgba(220,38,38,.07), transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(30,58,138,.08), transparent 34%),
    linear-gradient(145deg, #fff8f8 0%, #f7f0f0 40%, #f9f4f4 100%);
  border-radius: 16px;
  border: 1px solid #f0d9d9;
  box-shadow: 0 18px 32px rgba(22,48,75,.08);
  padding: 18px;
}

/* ── Sidebar trash badge ── */
.trash-menu-item { position: relative; }
.trash-sidebar-badge {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  line-height: 16px;
  box-shadow: 0 2px 6px rgba(220,38,38,.4);
  flex-shrink: 0;
}

/* ── Page shell ── */
.trash-page-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Hero Header ── */
.trash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #f0d9d9;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 14px rgba(220,38,38,.07);
  position: relative;
  overflow: hidden;
}
.trash-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #dc2626, #ef4444);
  border-radius: 5px 0 0 5px;
}
.trash-hero-left { display: flex; align-items: center; gap: 16px; }
.trash-hero-icon-wrap {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  box-shadow: 0 6px 18px rgba(220,38,38,.3);
  flex-shrink: 0;
}
.trash-hero-text h2 {
  font-size: 20px; font-weight: 800; color: #1a1a2e;
  letter-spacing: -.02em; margin-bottom: 4px;
}
.trash-hero-text p {
  font-size: 13px; color: #64748b; max-width: 500px; line-height: 1.55; margin: 0;
}
.trash-hero-text p strong { color: #dc2626; }

/* ── Empty-Trash button ── */
.trash-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
  color: #fff; border: none; border-radius: 10px;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(220,38,38,.3);
  transition: filter .18s, transform .15s, box-shadow .18s;
  white-space: nowrap; flex-shrink: 0;
}
.trash-empty-btn:hover {
  filter: brightness(1.07); transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(220,38,38,.38);
}
.trash-empty-count {
  background: rgba(255,255,255,.25); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 800;
}

/* ── KPI Strip ── */
.trash-kpi-strip { display: flex; flex-wrap: wrap; gap: 12px; }

.trash-kpi-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e8dede; border-radius: 14px;
  padding: 14px 18px; flex: 1 1 150px; min-width: 140px;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 10px rgba(15,41,65,.07);
  transition: box-shadow .2s, transform .2s;
}
.trash-kpi-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #dc2626, #ef4444);
  border-radius: 4px 0 0 4px;
}
.trash-kpi-card:hover { box-shadow: 0 6px 18px rgba(15,41,65,.13); transform: translateY(-2px); }
.trash-kpi-card.trash-kpi-type::before { background: linear-gradient(180deg, #1e3a8a, #3b62d9); }

.trash-kpi-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; font-size: 17px; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #991b1b, #dc2626);
  box-shadow: 0 4px 12px rgba(220,38,38,.28);
}
.trash-kpi-icon.type {
  background: linear-gradient(135deg, #1e3a8a, #3b62d9);
  box-shadow: 0 4px 12px rgba(30,58,138,.25);
}
.trash-kpi-label {
  font-size: 10.5px; color: #6b7a90; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 2px;
}
.trash-kpi-value { font-size: 22px; font-weight: 800; color: #0d2040; display: block; line-height: 1.1; letter-spacing: -.02em; }

/* ── Warning Banner ── */
.trash-warn-bar {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d; border-radius: 12px;
  padding: 13px 16px; font-size: 13px; color: #78350f; line-height: 1.55;
}
.trash-warn-bar i { color: #d97706; font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.trash-warn-bar strong { color: #b45309; }

/* ── Filter Bar ── */
.trash-filter-bar {
  background: #fff; border: 1px solid #e5e0d8;
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(15,41,65,.05);
}
.trash-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.trash-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f8f7f5; border: 1px solid #dbd4c8;
  border-radius: 9px; padding: 0 12px; flex: 1 1 200px; min-width: 180px;
  transition: border-color .18s, box-shadow .18s;
}
.trash-search-wrap:focus-within { border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30,58,138,.1); }
.trash-search-wrap i { color: #8ca3b4; font-size: 13px; flex-shrink: 0; }
.trash-search-input {
  background: transparent; border: none; outline: none;
  color: #14202e; font-size: 13px; padding: 9px 0; flex: 1; min-width: 0;
}
.trash-search-input::placeholder { color: #b0a89a; }
.trash-search-clear {
  background: none; border: none; color: #a89d92; cursor: pointer;
  padding: 2px 4px; border-radius: 4px; font-size: 12px; line-height: 1;
  transition: color .15s, background .15s;
}
.trash-search-clear:hover { color: #dc2626; background: rgba(220,38,38,.08); }

.trash-type-select {
  background: #f8f7f5; border: 1px solid #dbd4c8; border-radius: 9px;
  color: #14202e; font-size: 13px; padding: 9px 12px; cursor: pointer;
  transition: border-color .18s;
}
.trash-type-select:focus { border-color: #1e3a8a; outline: none; box-shadow: 0 0 0 3px rgba(30,58,138,.1); }

.trash-filter-btn {
  background: #1e3a8a; color: #fff; border: none; border-radius: 9px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 3px 8px rgba(30,58,138,.22);
  transition: filter .18s, transform .15s;
}
.trash-filter-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.trash-filter-clear-link {
  color: #8ca3b4; font-size: 13px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.trash-filter-clear-link:hover { color: #dc2626; }
.trash-result-count { font-size: 12px; color: #8ca3b4; font-weight: 600; margin-left: auto; white-space: nowrap; }

/* ── Items Grid ── */
.trash-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* ── Item Card ── */
.trash-item-card {
  background: #fff; border: 1px solid #ede8e0; border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 3px 10px rgba(15,41,65,.07);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.trash-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,41,65,.14);
  border-color: #d6cfc6;
}
.trash-item-card.trash-item-warning { border-color: #fcd34d; background: linear-gradient(160deg, #fffdf5 0%, #fff 100%); }
.trash-item-card.trash-item-urgent  { border-color: #fca5a5; background: linear-gradient(160deg, #fff5f5 0%, #fff 100%); }

.trash-item-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 10px; border-bottom: 1px solid #f2ede5; gap: 8px;
}
.trash-item-type-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #526070;
  background: #f4f0eb; border: 1px solid #e6dfd5;
  border-radius: 999px; padding: 4px 11px;
}
.trash-item-type-badge i { font-size: 10.5px; color: #1e3a8a; }

/* ── Expiry chips ── */
.trash-expiry-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.trash-expiry-chip.ok {
  background: rgba(5,150,105,.1); color: #065f46; border: 1px solid rgba(5,150,105,.25);
}
.trash-expiry-chip.warning {
  background: #fffbeb; color: #92400e; border: 1px solid #fcd34d;
}
.trash-expiry-chip.urgent {
  background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5;
  animation: trash-pulse 1.8s ease-in-out infinite;
}

@keyframes trash-pulse { 0%,100%{opacity:1} 50%{opacity:.62} }

/* ── Card Body ── */
.trash-item-body { padding: 13px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.trash-item-name { font-size: 14px; font-weight: 700; color: #0d2040; line-height: 1.35; word-break: break-word; }
.trash-item-meta { display: flex; flex-direction: column; gap: 4px; }
.trash-item-meta span { font-size: 11.5px; color: #8ca3b4; display: flex; align-items: center; gap: 5px; }
.trash-item-meta i { font-size: 10px; flex-shrink: 0; }
.trash-expires-on { color: #526070 !important; font-weight: 600 !important; }

/* ── Card Actions ── */
.trash-item-actions { display: flex; gap: 8px; padding: 10px 14px 14px; flex-wrap: wrap; }
.trash-action-form { flex: 1; min-width: 0; }

.trash-btn-restore {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #065f46 0%, #059669 55%, #10b981 100%);
  color: #fff; border: none; border-radius: 8px; padding: 9px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 10px rgba(5,150,105,.25);
  transition: filter .18s, transform .15s;
}
.trash-btn-restore:hover { filter: brightness(1.08); transform: translateY(-1px); }

.trash-btn-delete {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: #dc2626;
  border: 1px solid #fca5a5; border-radius: 8px; padding: 9px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .15s;
}
.trash-btn-delete:hover {
  background: #fef2f2; border-color: #dc2626; color: #991b1b; transform: translateY(-1px);
}

/* ── Empty State ── */
.trash-empty-state {
  text-align: center; padding: 70px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.trash-empty-icon {
  width: 90px; height: 90px; border-radius: 24px;
  background: linear-gradient(145deg, #fdf4f4, #fce9e9);
  border: 2px solid #f5c6c6;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: #e5a5a5; margin-bottom: 6px;
  box-shadow: 0 6px 18px rgba(220,38,38,.1);
}
.trash-empty-state h3 { font-size: 18px; font-weight: 800; color: #0d2040; }
.trash-empty-state p  { font-size: 13px; color: #8ca3b4; max-width: 340px; line-height: 1.6; }

/* ── Pagination ── */
.trash-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 8px; }
.trash-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: #fff; border: 1px solid #dbd4c8; color: #526070;
  text-decoration: none; font-size: 13px;
  transition: background .15s, border-color .15s, color .15s;
  box-shadow: 0 2px 5px rgba(0,0,0,.06);
}
.trash-page-btn:hover { background: #f4f0eb; border-color: #c5bfb5; color: #14202e; }
.trash-page-btn.disabled { opacity: .38; pointer-events: none; }
.trash-page-info { font-size: 13px; color: #8ca3b4; font-weight: 600; }

/* ── Dark mode overrides ── */
[data-theme="dark"] .trash-hero { background: #1a2636 !important; border-color: #243550 !important; }
[data-theme="dark"] .trash-hero-text h2 { color: #dde8f4 !important; }
[data-theme="dark"] .trash-hero-text p { color: #5d7d98 !important; }
[data-theme="dark"] .trash-kpi-card { background: #1a2636 !important; border-color: #243550 !important; }
[data-theme="dark"] .trash-kpi-label { color: #5d7d98 !important; }
[data-theme="dark"] .trash-kpi-value { color: #dde8f4 !important; }
[data-theme="dark"] .trash-warn-bar { background: #2a1f08 !important; border-color: #4a3010 !important; color: #fbbf24 !important; }
[data-theme="dark"] .trash-warn-bar strong { color: #fb923c !important; }
[data-theme="dark"] .trash-filter-bar { background: #1a2636 !important; border-color: #243550 !important; }
[data-theme="dark"] .trash-search-wrap { background: #0f1823 !important; border-color: #243550 !important; }
[data-theme="dark"] .trash-search-input { color: #dde8f4 !important; }
[data-theme="dark"] .trash-search-input::placeholder { color: #3d5570 !important; }
[data-theme="dark"] .trash-type-select { background: #0f1823 !important; border-color: #243550 !important; color: #dde8f4 !important; }
[data-theme="dark"] .trash-result-count { color: #3d5570 !important; }
[data-theme="dark"] .trash-item-card { background: #1a2636 !important; border-color: #243550 !important; }
[data-theme="dark"] .trash-item-card.trash-item-warning { background: #201c0a !important; border-color: #4a3010 !important; }
[data-theme="dark"] .trash-item-card.trash-item-urgent { background: #200a0a !important; border-color: #4a1515 !important; }
[data-theme="dark"] .trash-item-header { border-color: #1e3050 !important; }
[data-theme="dark"] .trash-item-type-badge { background: #162040 !important; border-color: #1e3050 !important; color: #8aaec8 !important; }
[data-theme="dark"] .trash-item-name { color: #dde8f4 !important; }
[data-theme="dark"] .trash-item-meta span { color: #3d5570 !important; }
[data-theme="dark"] .trash-expires-on { color: #8aaec8 !important; }
[data-theme="dark"] .trash-expiry-chip.ok { background: #0f2318 !important; color: #34d399 !important; border-color: #1a4030 !important; }
[data-theme="dark"] .trash-expiry-chip.warning { background: #2a1f08 !important; color: #fbbf24 !important; border-color: #4a3010 !important; }
[data-theme="dark"] .trash-expiry-chip.urgent { background: #2a1212 !important; color: #f87171 !important; border-color: #4a1515 !important; }
[data-theme="dark"] .trash-empty-state h3 { color: #8aaec8 !important; }
[data-theme="dark"] .trash-empty-state p { color: #3d5570 !important; }
[data-theme="dark"] .trash-empty-icon { background: #1a2636 !important; border-color: #243550 !important; color: #3d5570 !important; }
[data-theme="dark"] .trash-page-btn { background: #1a2636 !important; border-color: #243550 !important; color: #8aaec8 !important; }
[data-theme="dark"] .trash-page-btn:hover { background: #202f48 !important; }
[data-theme="dark"] .trash-page-info { color: #5d7d98 !important; }
[data-theme="dark"] .trash-filter-clear-link { color: #3d5570 !important; }
[data-theme="dark"] .trash-search-clear { color: #3d5570 !important; }
[data-theme="dark"] .trash-sidebar-badge { box-shadow: 0 2px 6px rgba(220,38,38,.6) !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .trash-items-grid { grid-template-columns: repeat(2, 1fr); }
  .trash-kpi-strip .trash-kpi-card { flex: 1 1 130px; min-width: 120px; }
}
@media (max-width: 640px) {
  .trash-items-grid { grid-template-columns: 1fr; }
  .trash-hero { padding: 16px; }
  .trash-filter-form { flex-direction: column; align-items: stretch; }
  .trash-result-count { margin-left: 0; }
}