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

:root {
  /* Color System */
  --primary: #f59a00;
  --primary-hover: #d98200;
  --primary-light: #fcb040;
  --primary-bg: rgba(245, 154, 0, 0.14);

  --success: #10b981;
  --success-light: #34d399;
  --success-bg: rgba(16, 185, 129, 0.1);

  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --warning-bg: rgba(245, 158, 11, 0.1);

  --danger: #ef4444;
  --danger-light: #f87171;
  --danger-bg: rgba(239, 68, 68, 0.1);

  --info: #3b82f6;
  --info-light: #60a5fa;
  --info-bg: rgba(59, 130, 246, 0.1);

  /* Neutral Colors */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Semantic Colors */
  --bg-main: #eef3f7;
  --sidebar-dark: #0f304f;
  --sidebar-darker: #0c2842;
  --panel-bg: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --border-light: rgba(0, 0, 0, 0.06);
  --sidebar-collapsed-width: 88px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* 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: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

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

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

body {
  margin: 0;
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-main);
  -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, #103252 0%, #0d2b46 58%, #0a2238 100%);
  border-right: 1px solid rgba(245, 154, 0, 0.24);
  overflow: visible;
  z-index: 260;
  box-shadow:
    0 18px 34px rgba(4, 15, 24, 0.42),
    inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

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

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

.sidebar {
  background: linear-gradient(180deg, #103252 0%, #0d2b46 58%, #0a2238 100%);
  color: #e3f0ff;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(245, 154, 0, 0.22);
  box-shadow: 0 24px 40px rgba(4, 15, 24, 0.42);
  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(252, 176, 64, 0.2), transparent 34%),
    radial-gradient(
      circle at 84% 92%,
      rgba(20, 184, 166, 0.14),
      transparent 38%
    );
  opacity: 0.85;
}

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

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

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(245, 154, 0, 0.42);
  border-radius: 3px;
}

/* Brand Section */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: linear-gradient(140deg, #163d60 0%, #123450 100%);
  border-bottom: 1px solid rgba(245, 154, 0, 0.28);
  box-shadow: inset -1px 0 0 rgba(245, 154, 0, 0.2);
  min-height: 72px;
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 14px rgba(8, 26, 42, 0.35);
  flex-shrink: 0;
}

.brand-text {
  min-width: 0;
}

.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: white;
  box-shadow: 0 6px 14px rgba(180, 83, 9, 0.4);
  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: #c2d5e8;
  padding: var(--space-3) 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;
}

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

.menu-item:hover {
  background: rgba(252, 176, 64, 0.14);
  color: #effdfb;
  transform: translateX(2px);
}

.menu-item.active {
  background: linear-gradient(120deg, #f59a00 0%, #f8a717 100%);
  color: #17324b;
  font-weight: 600;
  box-shadow: 0 9px 18px rgba(217, 130, 0, 0.35);
}

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

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(252, 176, 64, 0.2);
  padding: var(--space-3);
}

.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(252, 176, 64, 0.09);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f59a00 0%, #f3a11c 100%);
  font-size: 14px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 13px rgba(180, 83, 9, 0.42);
  flex-shrink: 0;
}

.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(245, 154, 0, 0.18);
  color: #ffe3b3;
}

.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, #f8fbff 0%, #eff5fb 100%);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  font-size: 14px;
  border-bottom: 1px solid #d5e2ef;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

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

.topbar strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 18px;
  color: var(--text-primary);
  transition: all var(--transition-base);
}

.hamburger:hover {
  background: var(--gray-200);
}

.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(67, 56, 202, 0.2) 0%,
    rgba(30, 41, 59, 0.24) 100%
  );
  border: 1px solid rgba(129, 140, 248, 0.45);
  color: #eef2ff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
}

.notification-btn:hover {
  background: linear-gradient(
    140deg,
    rgba(79, 70, 229, 0.32) 0%,
    rgba(30, 41, 59, 0.28) 100%
  );
  border-color: rgba(199, 210, 254, 0.8);
  color: #ffffff;
  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;
}

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

.dashboard-page {
  --dash-ink: #0a1828;
  --dash-navy: #10253b;
  --dash-cobalt: #1b3a59;
  --dash-teal: #0f766e;
  --dash-teal-soft: #14b8a6;
  --dash-amber: #f59e0b;
  --dash-amber-soft: #fbbf24;
  --dash-surface: rgba(255, 255, 255, 0.92);
  --dash-surface-2: rgba(248, 251, 255, 0.95);
  --dash-border: #c7d6e4;
  --dash-shadow: 0 20px 36px rgba(8, 26, 43, 0.14);
  font-family: "Manrope", "Poppins", "Segoe UI", sans-serif;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(45, 212, 191, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 84%,
      rgba(245, 158, 11, 0.14),
      transparent 35%
    ),
    linear-gradient(148deg, #edf3fa 0%, #dfe9f5 52%, #edf4fb 100%);
}

.dashboard-page .sidebar {
  background: linear-gradient(180deg, #103252 0%, #0d2b46 58%, #0a2238 100%);
  border-right: 1px solid rgba(245, 154, 0, 0.22);
  box-shadow: 0 22px 38px rgba(4, 15, 24, 0.42);
}

.dashboard-page .brand {
  background: linear-gradient(140deg, #163d60 0%, #123450 100%);
  border-bottom-color: rgba(245, 154, 0, 0.28);
  box-shadow: inset -1px 0 0 rgba(245, 154, 0, 0.2);
}

.dashboard-page .menu-item:hover {
  background: rgba(252, 176, 64, 0.14);
  color: #effdfb;
}

.dashboard-page .menu-item.active {
  background: linear-gradient(120deg, #f59a00 0%, #f8a717 100%);
  color: #17324b;
  box-shadow: 0 9px 18px rgba(217, 130, 0, 0.35);
}

.dashboard-page .menu-item.active::before {
  background: linear-gradient(180deg, #1d4f74, #123a5b);
}

.dashboard-page .avatar {
  background: linear-gradient(140deg, #f59a00 0%, #f3a11c 100%);
  box-shadow: 0 6px 13px rgba(180, 83, 9, 0.42);
}

.dashboard-page .topbar {
  background: linear-gradient(95deg, #123754 0%, #0f304b 55%, #0d2a42 100%);
  border-bottom: none;
  border-left: 1px solid rgba(245, 154, 0, 0.24);
  color: #dff8ff;
  box-shadow: 0 10px 22px rgba(8, 23, 38, 0.32);
}

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

.dashboard-page .pill,
.dashboard-page .icon-btn {
  background: rgba(10, 23, 34, 0.26);
  border-color: rgba(165, 243, 252, 0.28);
  color: #e7fbff;
}

.dashboard-page .pill.primary {
  background: linear-gradient(115deg, #f59e0b 0%, #f97316 100%);
  border-color: transparent;
  color: #fffdf5;
  box-shadow: 0 10px 18px rgba(180, 83, 9, 0.38);
}

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: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
  gap: 0;
  font-size: 0;
  line-height: 0;
  color: #b9cfe2;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.08)
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 12px rgba(5, 18, 30, 0.22);
  backdrop-filter: blur(2px);
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 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: 15px;
  opacity: 0.95;
}

body.sidebar-desktop-collapsed .menu-item:hover {
  background: linear-gradient(
    145deg,
    rgba(252, 176, 64, 0.28),
    rgba(245, 154, 0, 0.22)
  );
  border-color: rgba(252, 176, 64, 0.48);
  color: #f8fbff;
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 16px rgba(8, 26, 42, 0.3);
}

body.sidebar-desktop-collapsed .menu-item:focus-visible {
  outline: 2px solid rgba(252, 176, 64, 0.95);
  outline-offset: 2px;
}

body.sidebar-desktop-collapsed .menu-item.active {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(138deg, #f7a617 0%, #f59a00 52%, #ea8f00 100%);
  color: #17324b;
  border-color: rgba(255, 255, 255, 0.44);
  box-shadow:
    0 14px 24px rgba(180, 83, 9, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.sidebar-desktop-collapsed .menu-item.active i {
  font-size: 18px;
  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: 24px 26px;
  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(45, 212, 191, 0.22),
      transparent 40%
    ),
    radial-gradient(
      circle at 92% 84%,
      rgba(245, 158, 11, 0.2),
      transparent 36%
    ),
    linear-gradient(128deg, #0b1e30 0%, #153554 58%, #10253b 100%);
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 22px;
  box-shadow: 0 28px 44px rgba(4, 16, 27, 0.4);
  position: relative;
  overflow: hidden;
}

.dashboard-hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.08),
    transparent 34%
  );
  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: #f4fdff;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-wrap: balance;
}

.dashboard-hero-content p {
  margin: 12px 0 0;
  color: rgba(220, 245, 255, 0.94);
  max-width: 680px;
  font-size: 15px;
  line-height: 1.55;
}

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

.dashboard-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(6, 20, 33, 0.44);
  border: 1px solid rgba(165, 243, 252, 0.22);
  color: #e6fbff;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(3px);
}

.dashboard-hero-meta span:nth-child(1) {
  border-color: rgba(125, 211, 252, 0.42);
}

.dashboard-hero-meta span:nth-child(2) {
  border-color: rgba(45, 212, 191, 0.42);
}

.dashboard-hero-meta span:nth-child(3) {
  border-color: rgba(251, 191, 36, 0.46);
}

.dashboard-hero-actions {
  display: grid;
  gap: 12px;
  min-width: 264px;
  padding: 11px;
  border-radius: 16px;
  background: linear-gradient(
    150deg,
    rgba(8, 20, 31, 0.42),
    rgba(10, 29, 45, 0.24)
  );
  border: 1px solid rgba(125, 211, 252, 0.24);
}

.dashboard-hero-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: 16px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.15px;
}

.dashboard-hero-actions .btn-primary {
  background: linear-gradient(110deg, #0f766e 0%, #14b8a6 100%);
  color: #f7fffe;
  border-color: transparent;
  box-shadow: 0 13px 22px rgba(13, 148, 136, 0.38);
}

.dashboard-hero-actions .btn-primary:hover {
  filter: brightness(1.08);
}

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

.dashboard-hero-actions .btn-secondary {
  border-color: rgba(125, 211, 252, 0.64);
  color: #ecfbff;
  background: linear-gradient(
    96deg,
    rgba(9, 26, 42, 0.92) 0%,
    rgba(15, 55, 83, 0.84) 100%
  );
  box-shadow: 0 10px 18px rgba(7, 20, 33, 0.3);
}

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

.dashboard-hero-actions .btn-secondary:hover {
  background: linear-gradient(
    96deg,
    rgba(14, 37, 58, 0.94) 0%,
    rgba(15, 118, 110, 0.72) 100%
  );
  border-color: rgba(204, 251, 241, 0.76);
  color: #f0fffd;
}

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

.dashboard-kpi-grid .stat-card {
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  min-height: 120px;
  background: linear-gradient(155deg, var(--dash-surface) 0%, #f8fcff 100%);
  box-shadow: 0 14px 26px rgba(12, 37, 58, 0.11);
  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, #0f766e 0%, #14b8a6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 16px rgba(15, 118, 110, 0.24);
  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.25),
    0 11px 20px rgba(15, 118, 110, 0.3);
}

.dashboard-kpi-grid .stat-blue::before {
  background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.dashboard-kpi-grid .stat-green::before {
  background: linear-gradient(90deg, #0369a1, #0ea5e9);
}

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

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

.dashboard-kpi-grid .stat-teal::before {
  background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.dashboard-kpi-grid .stat-blue h2 {
  color: #0f766e;
}

.dashboard-kpi-grid .stat-green h2 {
  color: #0f4c81;
}

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

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

.dashboard-kpi-grid .stat-teal h2 {
  color: #0f766e;
}

.dashboard-kpi-grid .stat-green span {
  background: linear-gradient(140deg, #0369a1 0%, #0ea5e9 100%);
}

.dashboard-kpi-grid .stat-pink span {
  background: linear-gradient(140deg, #f59e0b 0%, #f97316 100%);
}

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

.dashboard-kpi-grid .stat-teal span {
  background: linear-gradient(140deg, #0f766e 0%, #14b8a6 100%);
}

.dashboard-welcome {
  border: 1px solid var(--dash-border);
  background: linear-gradient(148deg, #ffffff 0%, var(--dash-surface-2) 100%);
  color: #1f4a67;
  box-shadow: 0 8px 16px rgba(18, 46, 72, 0.08);
}

.dashboard-quick-actions button {
  border: 1px solid #c8d8e8;
  background: linear-gradient(148deg, #ffffff 0%, #f3fbfb 100%);
  color: #1b405f;
  box-shadow: 0 10px 18px rgba(16, 43, 67, 0.08);
}

.dashboard-quick-actions button:hover {
  border-color: #0f766e;
  background: linear-gradient(148deg, #f7fefd 0%, #ecf9f8 100%);
  box-shadow: 0 16px 26px rgba(16, 74, 95, 0.14);
}

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

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

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

.dashboard-panel .panel-header h3 {
  color: #123f61;
}

.dashboard-page .tabs {
  border-color: #bdd7e8;
  background: #f1f8ff;
}

.dashboard-page .tabs .active {
  background: linear-gradient(108deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 6px 12px rgba(13, 148, 136, 0.24);
}

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

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

.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: white;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 110px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  cursor: pointer;
}

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

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

.stat-card h2 {
  margin: 0 0 var(--space-1) 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

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

.stat-card span {
  width: 80px;
  align-self: stretch;
  display: grid;
  place-items: center;
  color: white;
  font-size: 28px;
  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: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4);
  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-lg);
  background: white;
  min-height: 70px;
  text-align: left;
  padding: var(--space-4);
  font-family: inherit;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-base);
  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 {
  height: 100%;
}

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

.panel {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
}

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

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

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

/* 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-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  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;
}

.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: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  transition: all var(--transition-base);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.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.9);
  --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.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);
}

.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(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.inventory-kpi-card {
  background: linear-gradient(160deg, var(--inv-surface) 0%, #fbfdff 100%);
  border: 1px solid var(--inv-border);
  border-radius: 14px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(15, 41, 65, 0.1);
}

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

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

.inventory-kpi-card strong {
  font-size: 20px;
  color: #114164;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

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

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

.inventory-kpi-card.success {
  border-color: #8cd8d0;
  background: linear-gradient(160deg, #ecfbf8 0%, #f7fffd 100%);
}

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

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

.inventory-kpi-card.success::before {
  background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.inventory-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);
}

.inventory-table-header {
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fd 100%);
  border-bottom-color: var(--inv-border);
}

.inventory-page .search-box {
  max-width: 340px;
}

.inventory-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 470px;
}

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

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

.inventory-page .search-box input {
  width: 100%;
  border-color: #c1d3e4;
  background: #ffffff;
  border-radius: 12px;
  height: 42px;
  padding-left: 40px;
  padding-right: 34px;
  font-weight: 600;
  color: #153d5a;
}

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

.inventory-page .search-box input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16);
}

.inventory-page .search-box i {
  color: #6e879e;
}

.inventory-page .table-filters select {
  border-color: #c1d3e4;
  background: #ffffff;
  border-radius: 12px;
  min-height: 42px;
  font-weight: 600;
  color: #214966;
}

.inventory-page .table-filters select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.inventory-clear-btn {
  margin-left: 0;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inventory-visible-indicator {
  margin-left: auto;
  font-size: 13px;
  color: #3f5d76;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #bdd5e8;
  background: linear-gradient(145deg, #ffffff 0%, #ecf5ff 100%);
  font-weight: 600;
}

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

.inventory-product-name {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.inventory-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px dashed #c3d7e8;
  padding: 14px;
  color: #4b6780;
  font-size: 13px;
  background: linear-gradient(180deg, #f7fbff 0%, #f2f8ff 100%);
}

.inventory-empty-state i {
  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 .data-table th {
  background: #eff6fc;
  color: #355674;
  border-bottom-color: #c3d6e8;
}

.inventory-page .data-table td {
  border-bottom-color: #d7e3ee;
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.inventory-page .data-table tbody tr {
  background: rgba(255, 255, 255, 0.78);
}

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

.inventory-page .data-table code {
  background: #ecf4ff;
  color: #0f5f8f;
  border: 1px solid #d3e1f0;
}

.inventory-page .status-badge.success {
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
  border: 1px solid rgba(15, 118, 110, 0.2);
}

.inventory-page .status-badge.danger {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.inventory-page .btn-icon {
  background: #eef4fb;
  color: #335675;
  border: 1px solid #d0ddec;
}

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

.inventory-page .btn-icon.danger:hover {
  background: #fff1f2;
  color: #dc2626;
  border-color: #f6c3c8;
}

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

.inventory-page .inventory-kpi-card:nth-child(1) {
  animation-delay: 60ms;
}

.inventory-page .inventory-kpi-card:nth-child(2) {
  animation-delay: 120ms;
}

.inventory-page .inventory-kpi-card:nth-child(3) {
  animation-delay: 180ms;
}

.inventory-page .inventory-kpi-card:nth-child(4) {
  animation-delay: 240ms;
}

.inventory-page .inventory-kpi-card:nth-child(5) {
  animation-delay: 300ms;
}

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

  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: var(--gray-50);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  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: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.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;
}

.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;
  }
}

@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: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.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: 106px;
}

.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;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.login-body {
  --login-bg-ink: #0d1b2a;
  --login-bg-navy: #12263a;
  --login-bg-steel: #1b3350;
  --login-accent: #f59e0b;
  --login-accent-soft: #fcd34d;
  --login-text-light: #e9f1fb;
  --login-text-muted: #b3c1d3;
  --login-card-bg: rgba(255, 255, 255, 0.96);
  --login-card-border: rgba(255, 255, 255, 0.55);
  --login-field-bg: #f7fafc;
  --login-field-border: #d7dee8;
  --login-field-focus: #0f766e;
  --login-link: #0f766e;
  --login-button-bg: linear-gradient(135deg, #0f766e, #0ea5a3);
  --login-button-shadow: rgba(15, 118, 110, 0.33);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 28px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(
      1400px 640px at 8% 10%,
      rgba(56, 189, 248, 0.22),
      transparent 62%
    ),
    radial-gradient(
      1000px 600px at 90% 92%,
      rgba(245, 158, 11, 0.18),
      transparent 60%
    ),
    linear-gradient(135deg, #08131f 0%, #10253b 42%, #1f3f62 100%);
  display: grid;
  place-items: center;
  color: var(--login-text-light);
  font-family: "Manrope", "Poppins", "Segoe UI", sans-serif;
}

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

.login-body::before {
  width: 420px;
  height: 420px;
  top: -140px;
  right: -100px;
  background: radial-gradient(
    circle,
    rgba(252, 211, 77, 0.35) 0%,
    rgba(252, 211, 77, 0) 70%
  );
}

.login-body::after {
  width: 520px;
  height: 520px;
  left: -180px;
  bottom: -220px;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.28) 0%,
    rgba(34, 211, 238, 0) 72%
  );
}

.login-shell {
  width: min(1080px, calc(100vw - 40px));
  min-height: min(690px, calc(100vh - 50px));
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 40px 90px rgba(2, 8, 23, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  background: rgba(10, 25, 40, 0.58);
  backdrop-filter: blur(14px);
  transform: translateY(8px);
  opacity: 0;
  animation: loginShellIn 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.login-brand-panel {
  padding: 52px 52px 56px;
  background:
    radial-gradient(
      560px 320px at 20% 10%,
      rgba(56, 189, 248, 0.16),
      transparent 68%
    ),
    linear-gradient(158deg, #0c1d30 0%, #12314b 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  position: relative;
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 140px;
  height: 140px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: rotate(12deg);
  background: linear-gradient(
    135deg,
    rgba(245, 154, 0, 0.2) 0%,
    rgba(15, 48, 79, 0.24) 100%
  );
  border: 1px solid rgba(245, 154, 0, 0.45);
}

.login-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--login-accent-soft);
  position: relative;
  z-index: 1;
}

.login-brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  place-items: center;
  padding: 8px;
  box-shadow:
    0 14px 34px rgba(8, 26, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  position: relative;
  z-index: 1;
}

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

.login-brand-panel h1 {
  margin: 0;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.1;
  color: #f8fcff;
  letter-spacing: -0.03em;
  font-family: "Sora", "Manrope", sans-serif;
  position: relative;
  z-index: 1;
}

.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: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 18, 30, 0.5);
  padding: 12px 10px;
}

.login-brand-metrics strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #f8fbff;
}

.login-brand-metrics span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #b8c6d8;
}

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

.login-brand-pills span {
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  color: #d9e8f8;
  font-size: 12px;
  font-weight: 700;
  background: rgba(7, 18, 30, 0.44);
  letter-spacing: 0.01em;
}

.login-card {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97),
      rgba(255, 255, 255, 0.93)
    ),
    var(--login-card-bg);
  color: #0f172a;
  border-left: 1px solid var(--login-card-border);
  padding: 48px 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: loginCardIn 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 70ms;
  opacity: 0;
}

.login-card-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f766e;
}

.login-card h2 {
  margin: 8px 0 0;
  font-size: clamp(34px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-family: "Sora", "Manrope", sans-serif;
}

.login-subtitle {
  margin: 8px 0 24px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
}

.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: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  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: 13px;
  border: 1px solid var(--login-field-border);
  background: var(--login-field-bg);
  padding: 12px 12px 12px 40px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base);
}

.login-input-wrap input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.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(15, 118, 110, 0.08);
  color: #0f766e;
}

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

.login-input-wrap input:focus {
  outline: none;
  border-color: var(--login-field-focus);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15);
  background: #ffffff;
  transform: translateY(-1px);
}

.login-input-wrap input:focus + .login-password-toggle,
.login-input-wrap:focus-within i {
  color: #0f766e;
}

.login-btn {
  width: 100%;
  margin-top: 8px;
  border: none;
  border-radius: 13px;
  background: var(--login-button-bg);
  color: #fff;
  padding: 13px 14px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    filter var(--transition-base);
}

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

.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: #0f766e;
}

.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: 2px;
}

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

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px var(--login-button-shadow);
  filter: brightness(1.03);
}

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

.login-demo-hint {
  margin-top: 0;
  margin-bottom: 12px;
  border: 1px dashed rgba(15, 118, 110, 0.28);
  background: rgba(20, 184, 166, 0.08);
  border-radius: 12px;
  padding: 9px 11px;
}

.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, #4f46e5 0%, #6366f1 100%);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--gray-200);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

/* ============================================
   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
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  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%, -50%) scale(0.9);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  z-index: 201;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

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

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.modal-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.modal-body {
  padding: var(--space-5);
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-color);
  background: var(--gray-50);
}

/* Form Elements in Modal */
.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  transition: all var(--transition-base);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.modal.modal-checkout {
  max-width: 560px;
  border: 1px solid #cad7ea;
  box-shadow: 0 28px 46px rgba(13, 20, 41, 0.35);
  overflow: visible;
}

.modal.modal-checkout .modal-footer {
  display: none;
}

.modal.modal-checkout .modal-body {
  padding: 14px 18px 18px;
  background: linear-gradient(170deg, #f7faff 0%, #eef3fa 100%);
  max-height: calc(90vh - 92px);
  overflow-y: auto;
  overflow-x: visible;
}

.modal.modal-checkout .modal-header {
  padding: 12px 18px;
  background: linear-gradient(92deg, #1a1f3b 0%, #20274a 100%);
  border-bottom: 1px solid rgba(196, 211, 239, 0.3);
}

.modal.modal-checkout .modal-header h3 {
  font-size: 26px;
  font-weight: 700;
  color: #eef2ff;
}

.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 #d5deec;
  border-radius: 12px;
  padding: 11px;
  background: #fbfdff;
}

.sales-checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #d7ddea;
  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 #d4deea;
  border-radius: 12px;
  padding: 11px;
  background: linear-gradient(170deg, #ffffff 0%, #f8fbff 100%);
}

.sales-checkout-summary div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  color: #4d5f77;
}

.sales-checkout-summary .total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d9e2ef;
  font-weight: 700;
  color: #1f2d43;
}

.sales-checkout-summary .total strong {
  color: #3730a3;
  font-size: 26px;
}

.sales-checkout-payment-title {
  margin: 4px 0 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #43566f;
}

.sales-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-payment-tile {
  min-height: 62px;
  border: 1px solid #ccd7e7;
  border-radius: 10px;
  background: linear-gradient(170deg, #ffffff 0%, #f7faff 100%);
  color: #344963;
  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 i {
  font-size: 14px;
}

.sales-payment-tile.active {
  border-color: #4f46e5;
  color: #3730a3;
  background: #eef2ff;
  box-shadow: 0 8px 14px rgba(67, 56, 202, 0.18);
}

.sales-checkout-submit {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #4338ca 0%, #4f46e5 100%);
  color: #ffffff;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

.sales-checkout-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.modal.modal-receipt {
  max-width: 540px;
  border: 1px solid #cdd9eb;
  box-shadow: 0 28px 46px rgba(13, 20, 41, 0.35);
}

.modal.modal-receipt .modal-body {
  background: linear-gradient(170deg, #f6f8fd 0%, #eef3f9 100%);
  padding: 14px 16px 16px;
}

.modal.modal-receipt .modal-header {
  padding: 12px 16px;
  background: linear-gradient(92deg, #1a1f3b 0%, #20274a 100%);
  border-bottom: 1px solid rgba(196, 211, 239, 0.28);
}

.modal.modal-receipt .modal-header h3 {
  color: #eef2ff;
}

.modal.modal-receipt .modal-footer {
  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;
  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-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-customer-details .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.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;
  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-details .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.modal.modal-invoice-add,
.modal.modal-quotation-add,
.modal.modal-return-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-invoice-add .modal-header,
.modal.modal-quotation-add .modal-header,
.modal.modal-return-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-invoice-add .modal-header h3,
.modal.modal-quotation-add .modal-header h3,
.modal.modal-return-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.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;
  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-add .modal-footer,
.modal.modal-quotation-add .modal-footer,
.modal.modal-return-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.modal.modal-invoice-add .form-group label,
.modal.modal-quotation-add .form-group label,
.modal.modal-return-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.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: 1px solid #bed1e4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.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: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.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: 16px;
  border: 1px solid #d4e2ef;
  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(56, 189, 248, 0.14),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.quotation-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);
}

.quotation-add-hero-icon i {
  font-size: 22px;
}

.quotation-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.quotation-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  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: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.quotation-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  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: 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);
}

.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: 16px;
  border: 1px solid #d4e2ef;
  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(56, 189, 248, 0.14),
      transparent 42%
    ),
    linear-gradient(120deg, #f8fcff 0%, #eef5fc 100%);
}

.return-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);
}

.return-add-hero-icon i {
  font-size: 22px;
}

.return-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.return-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  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: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.return-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  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(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-user-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-user-add .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-user-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-user-add .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.modal.modal-user-role {
  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-user-role .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-user-role .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-user-role .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-user-role .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.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 {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.modal.modal-user-permissions {
  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-user-permissions .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-user-permissions .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-user-permissions .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-user-permissions .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.user-permissions-form {
  display: grid;
  gap: 12px;
}

.user-permissions-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-permissions-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-permissions-hero-icon i {
  font-size: 22px;
}

.user-permissions-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.user-permissions-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.user-permissions-panel {
  display: grid;
  gap: 10px;
}

.user-permissions-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-permissions-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.user-permissions-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.user-permissions-user-field {
  margin-bottom: 0;
}

.user-permissions-grid {
  display: grid;
  gap: 10px;
  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-permissions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d5e1ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.user-permissions-row label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #2d4f6e;
}

.user-permissions-row select {
  width: min(220px, 100%);
  min-height: 40px;
}

.modal.modal-user-permissions .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-user-permissions input,
.modal.modal-user-permissions 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-permissions input[readonly] {
  color: #1f445f;
  background: #f7fbff;
  border-color: #d1deeb;
  font-weight: 600;
}

.modal.modal-user-permissions input:focus,
.modal.modal-user-permissions select:focus {
  border-color: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

.user-permissions-empty {
  margin: 0;
  color: #6b7280;
  font-weight: 600;
}

.user-permissions-shortcut {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.modal.modal-user-status,
.modal.modal-user-password {
  width: min(97vw, 1120px);
  max-width: 1120px;
  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-user-status .modal-header,
.modal.modal-user-password .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-user-status .modal-header h3,
.modal.modal-user-password .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-user-status .modal-body,
.modal.modal-user-password .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-user-status .modal-footer,
.modal.modal-user-password .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.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 {
  margin-top: 2px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.user-add-form {
  display: grid;
  gap: 12px;
}

.user-add-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-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;
}

.user-add-hero-icon i {
  font-size: 22px;
}

.user-add-hero h4 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #133854;
}

.user-add-hero p {
  margin: 4px 0 0;
  color: #46637f;
  font-size: 13px;
}

.user-add-panel {
  display: grid;
  gap: 10px;
}

.user-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-add-panel-header h5 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #204664;
}

.user-add-panel-header span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfd3e6;
  background: #eef5fc;
  color: #315976;
  font-size: 11px;
  font-weight: 700;
}

.user-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);
}

.user-add-editor-grid .form-group {
  margin-bottom: 0;
}

.user-add-editor-grid .form-group:first-child {
  grid-column: 1 / -1;
}

.modal.modal-user-add .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #3f607d;
}

.modal.modal-user-add input,
.modal.modal-user-add select,
.modal.modal-user-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-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: #2d79b7;
  box-shadow: 0 0 0 3px rgba(45, 121, 183, 0.15);
}

@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: 12px;
}

.quick-add-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-add-meta-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;
}

.quick-add-meta-chip.chip-actions {
  color: #1e4d78;
  background: #e7f1fb;
  border-color: #bfd5eb;
}

.quick-add-meta-chip.chip-shortcuts {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.quick-add-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d3dfed;
  background:
    radial-gradient(
      circle at 16% 20%,
      rgba(56, 189, 248, 0.16),
      transparent 48%
    ),
    linear-gradient(150deg, #ffffff 0%, #f2f8ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.quick-add-hero-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #0891b2 0%, #0ea5e9 100%);
  box-shadow: 0 10px 18px rgba(14, 165, 233, 0.3);
}

.quick-add-hero h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1d3f5f;
}

.quick-add-hero p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #5c758c;
}

.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-add-item {
  display: grid;
  gap: 8px;
  justify-items: start;
  text-align: left;
  width: 100%;
  min-height: 132px;
  padding: 14px;
  border-radius: 14px;
  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;
}

.quick-add-item-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quick-add-item:hover,
.quick-add-item:focus-visible {
  transform: translateY(-3px);
  border-color: #9cb9d8;
  box-shadow: 0 14px 24px rgba(31, 63, 91, 0.16);
  outline: none;
}

.quick-add-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border: 1px solid transparent;
}

.quick-add-item-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.quick-add-item-desc {
  font-size: 14px;
  color: #567188;
  line-height: 1.35;
}

.quick-add-item-pill {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #cfdeed;
  background: #f4f8fd;
  color: #3d5f7e;
}

.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: minmax(0, 1fr);
  }

  .quick-add-item {
    min-height: 112px;
  }

  .quick-add-item-title {
    font-size: 20px;
  }
}

.modal.modal-po-create {
  width: min(96vw, 1140px);
  max-width: 1140px;
  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-po-create .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-po-create .modal-header h3 {
  color: #f5fbff;
  font-size: 34px;
  letter-spacing: 0.01em;
}

.modal.modal-po-create .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-po-create .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.po-create-form {
  display: grid;
  gap: 12px;
}

.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: #184a6f;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.po-create-chip.chip-products {
  color: #6a4718;
  background: #fff7e8;
  border-color: #efd8b5;
}

.po-create-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.po-create-field-notes,
.po-create-amount-card,
.po-create-items-card {
  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-po-create .form-group {
  margin-bottom: 0;
}

.modal.modal-po-create .form-group label,
.po-create-amount-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.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: 42px;
  padding: 0 12px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.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: 42px;
  padding: 0 12px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #1f3349;
}

.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: #edf4fb;
  border-bottom: 1px solid #d2deeb;
}

.po-items-table-head span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #42627f;
}

.po-items-sticky-total {
  position: static;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d3dfed;
  background: #f7fbff;
  color: #2b4d68;
  font-size: 13px;
  font-weight: 600;
}

.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: 40px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.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%);
}

.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%);
}

.modal.modal-debt-payment {
  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-debt-payment .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-payment .modal-header h3 {
  color: #f5fbff;
  font-size: 32px;
  letter-spacing: 0.01em;
}

.modal.modal-debt-payment .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-payment .modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #d2dceb;
  background: linear-gradient(180deg, #f8fcff 0%, #eff6fd 100%);
}

.debt-payment-form {
  display: grid;
  gap: 12px;
}

.debt-payment-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.debt-payment-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-payment-chip-open {
  color: #184a6f;
  background: #e8f3ff;
  border-color: #c7dcf3;
}

.debt-payment-chip-outstanding {
  color: #7a3411;
  background: #fff5e8;
  border-color: #f6d7b0;
}

.debt-payment-context-grid,
.debt-payment-editor-grid {
  display: grid;
  gap: 12px;
}

.debt-payment-context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.debt-payment-editor-grid {
  grid-template-columns: repeat(3, 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-payment-context-grid .form-group {
  margin-bottom: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d4e0ec;
  background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%);
}

.debt-payment-context-grid input[readonly] {
  border-color: #d4e0ec;
  background: #f8fbff;
  color: #16324d;
  font-weight: 700;
}

.modal.modal-debt-payment .form-group {
  margin-bottom: 0;
}

.modal.modal-debt-payment .form-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #45637f;
}

.modal.modal-debt-payment input,
.modal.modal-debt-payment select {
  min-height: 42px;
  border: 1px solid #c6d6e6;
  border-radius: 11px;
  background: #ffffff;
}

.debt-payment-hint {
  margin-top: 5px;
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4d6a84;
}

.debt-payment-shortcut {
  margin-top: 4px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #5a7289;
}

.debt-payment-hint.is-invalid {
  color: #a52222;
}

.modal.modal-debt-payment input.is-invalid {
  border-color: #d13737;
  box-shadow: 0 0 0 2px rgba(209, 55, 55, 0.12);
  background: #fff5f5;
}

.debt-payment-quick-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.debt-payment-quick {
  min-width: 64px;
  border-radius: 999px;
  border: 1px solid #b8cce0;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fb 100%);
  color: #1c4466;
  font-weight: 700;
}

.debt-payment-quick:hover,
.debt-payment-quick:focus-visible {
  border-color: #2a6ea8;
  color: #0c2f4b;
  background: linear-gradient(180deg, #ffffff 0%, #dbeaf8 100%);
}

.debt-payment-quick-fixed {
  border-color: #c8d8a7;
  color: #2c4a13;
  background: linear-gradient(180deg, #ffffff 0%, #eef7df 100%);
}

.debt-payment-quick-fixed:hover,
.debt-payment-quick-fixed:focus-visible {
  border-color: #8cae54;
  color: #1f390d;
  background: linear-gradient(180deg, #ffffff 0%, #deefc0 100%);
}

@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;
  }

  .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;
  }
}

/* ============================================
   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);
}

: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-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);
  }
}

/* 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: 30px;
  height: 30px;
  border-radius: 8px;
  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;
  }
}

@media (max-width: 420px) {
  .reports-page .loss-kpi-grid {
    grid-template-columns: 1fr;
  }
}