/* ════════════════════════════════════════════════════════
   TCS UNIFIED CSS - ALL PAGES
   Combines all individual CSS files with fixed theme support
   ═══════════════════════════════════════════════════════ */

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap");

/* ════════════════════════════════════════════════════════
   THEME VARIABLES (from tcs-theme.css)
   ═══════════════════════════════════════════════════════ */

/* ── Light Mode Variables ── */
:root {
  /* Core */
  --color-bg: #f0f4ff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-glass: rgba(255, 255, 255, 0.92);
  --color-border: #e2e8f0;
  --color-border-subtle: rgba(0, 0, 0, 0.07);

  /* Text */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-inverted: #ffffff;

  /* Accent / Brand */
  --color-accent: #1a4a7a;
  --color-accent-dark: #0f3460;
  --color-accent-darker: #0a2647;
  --color-accent-bg: rgba(26, 74, 122, 0.1);
  --color-accent-border: rgba(26, 74, 122, 0.2);
  --color-accent-ring: rgba(26, 74, 122, 0.2);

  /* Inputs */
  --color-input-bg: #f8fafc;
  --color-input-border: #e2e8f0;
  --color-input-text: #1e293b;
  --color-input-placeholder: #94a3b8;
  --color-input-focus-ring: rgba(26, 74, 122, 0.2);
  --color-autofill-bg: #f0f4ff;

  /* Feedback — Danger */
  --color-danger-bg: rgba(239, 68, 68, 0.08);
  --color-danger-text: #dc2626;
  --color-danger-border: rgba(239, 68, 68, 0.2);

  /* Feedback — Info */
  --color-info-bg: rgba(26, 74, 122, 0.08);
  --color-info-text: #1a4a7a;
  --color-info-border: rgba(26, 74, 122, 0.2);

  /* Modal */
  --color-modal-bg: #ffffff;
  --color-modal-header: #f8fafc;
  --color-modal-border: #e8ecf6;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.12);
  --shadow-card:
    0 32px 80px rgba(10, 38, 71, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-dropdown:
    0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* Theme Toggle Button */
  --color-toggle-icon: #64748b;
  --color-toggle-bg: #f1f5f9;
  --color-toggle-border: #e2e8f0;
  --color-toggle-hover: #1a4a7a;

  /* ── Navbar-specific ── */
  --nb-bg: #ffffff;
  --nb-bg-glass: rgba(255, 255, 255, 0.92);
  --nb-border: rgba(0, 0, 0, 0.07);
  --nb-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04);
  --nb-link: #475569;
  --nb-link-hover-bg: #f1f5f9;
  --nb-link-hover: #1e293b;
  --nb-active-bg: rgba(26, 74, 122, 0.1);
  --nb-active-color: #1a4a7a;
  --nb-active-border: #1a4a7a;
  --nb-brand-title: #1e293b;
  --nb-logo-bg: rgba(26, 74, 122, 0.1);
  --nb-logo-border: rgba(26, 74, 122, 0.2);
  --nb-pill-bg: #f8fafc;
  --nb-pill-border: #e2e8f0;
  --nb-pill-hover: #f1f5f9;
  --nb-user-name: #1e293b;
  --nb-chevron: #94a3b8;
  --nb-divider-v: #e2e8f0;
  --nb-toggler-border: rgba(0, 0, 0, 0.15);
  --nb-toggler-bg: rgba(0, 0, 0, 0.04);
  --nb-dropdown-bg: #ffffff;
  --nb-dropdown-border: rgba(0, 0, 0, 0.07);
  --nb-dropdown-shadow:
    0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --nb-dd-item: #374151;
  --nb-dd-item-hover: #111827;
  --nb-dd-item-hov-bg: #f8fafc;
  --nb-dd-section: #9ca3af;
  --nb-dd-divider: #f1f5f9;
  --nb-dd-danger: #dc2626;
  --nb-dd-danger-hov: #b91c1c;
  --nb-dd-danger-bg: #fef2f2;
  --nb-user-hdr-sub: #6b7280;
  --nb-mobile-bg: rgba(255, 255, 255, 0.98);
  --nb-mobile-border: rgba(0, 0, 0, 0.07);
  --nb-mobile-drop-bg: #f8fafc;
}

/* ── Dark Mode Variables ── */
[data-theme="dark"] {
  /* Core */
  --color-bg: #0a0f1e;
  --color-surface: #1a1f2e;
  --color-surface-2: #0f172a;
  --color-surface-glass: rgba(13, 17, 23, 0.92);
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-subtle: rgba(255, 255, 255, 0.07);

  /* Text */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: rgba(255, 255, 255, 0.55);
  --color-text-muted: rgba(255, 255, 255, 0.28);
  --color-text-inverted: #0a0f1e;

  /* Accent / Brand */
  --color-accent: #2e5a9a;
  --color-accent-dark: #1a4a7a;
  --color-accent-darker: #0f3460;
  --color-accent-bg: rgba(46, 90, 154, 0.15);
  --color-accent-border: rgba(46, 90, 154, 0.25);
  --color-accent-ring: rgba(46, 90, 154, 0.25);

  /* Inputs */
  --color-input-bg: rgba(255, 255, 255, 0.06);
  --color-input-border: rgba(255, 255, 255, 0.1);
  --color-input-text: #e2e8f0;
  --color-input-placeholder: rgba(255, 255, 255, 0.28);
  --color-input-focus-ring: rgba(46, 90, 154, 0.25);
  --color-autofill-bg: #1a1f35;

  /* Feedback — Danger */
  --color-danger-bg: rgba(248, 113, 113, 0.12);
  --color-danger-text: #fca5a5;
  --color-danger-border: rgba(248, 113, 113, 0.2);

  /* Feedback — Info */
  --color-info-bg: rgba(46, 90, 154, 0.12);
  --color-info-text: #93b4e8;
  --color-info-border: rgba(46, 90, 154, 0.2);

  /* Modal */
  --color-modal-bg: #111827;
  --color-modal-header: #0f172a;
  --color-modal-border: rgba(255, 255, 255, 0.09);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-card:
    0 32px 80px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-dropdown:
    0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);

  /* Theme Toggle Button */
  --color-toggle-icon: rgba(255, 255, 255, 0.6);
  --color-toggle-bg: rgba(13, 17, 23, 0.92);
  --color-toggle-border: rgba(255, 255, 255, 0.12);
  --color-toggle-hover: #2e5a9a;

  /* ── Navbar-specific ── */
  --nb-bg: #0d1117;
  --nb-bg-glass: rgba(13, 17, 23, 0.92);
  --nb-border: rgba(255, 255, 255, 0.07);
  --nb-shadow: 0 2px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04);
  --nb-link: rgba(255, 255, 255, 0.65);
  --nb-link-hover-bg: rgba(255, 255, 255, 0.07);
  --nb-link-hover: #ffffff;
  --nb-active-bg: rgba(46, 90, 154, 0.15);
  --nb-active-color: #7aade8;
  --nb-active-border: #2e5a9a;
  --nb-brand-title: #f1f5f9;
  --nb-logo-bg: rgba(255, 255, 255, 0.1);
  --nb-logo-border: rgba(255, 255, 255, 0.15);
  --nb-pill-bg: rgba(255, 255, 255, 0.06);
  --nb-pill-border: rgba(255, 255, 255, 0.1);
  --nb-pill-hover: rgba(255, 255, 255, 0.1);
  --nb-user-name: rgba(255, 255, 255, 0.9);
  --nb-chevron: rgba(255, 255, 255, 0.35);
  --nb-divider-v: rgba(255, 255, 255, 0.12);
  --nb-toggler-border: rgba(255, 255, 255, 0.18);
  --nb-toggler-bg: rgba(255, 255, 255, 0.05);
  --nb-dropdown-bg: #1a1f2e;
  --nb-dropdown-border: rgba(255, 255, 255, 0.15);
  --nb-dropdown-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  --nb-dd-item: rgba(255, 255, 255, 0.85);
  --nb-dd-item-hover: #ffffff;
  --nb-dd-item-hov-bg: rgba(255, 255, 255, 0.1);
  --nb-dd-section: rgba(255, 255, 255, 0.35);
  --nb-dd-divider: rgba(255, 255, 255, 0.12);
  --nb-dd-danger: #fca5a5;
  --nb-dd-danger-hov: #fca5a5;
  --nb-dd-danger-bg: rgba(239, 68, 68, 0.2);
  --nb-user-hdr-sub: rgba(255, 255, 255, 0.45);
  --nb-mobile-bg: #0d1117;
  --nb-mobile-border: rgba(255, 255, 255, 0.07);
  --nb-mobile-drop-bg: #1a1f2e;
}

/* ════════════════════════════════════════════════════════
   BASE RESET & GLOBAL STYLES
   ═══════════════════════════════════════════════════════ */
html {
  overflow-y: scroll;
  transition: background 0.35s ease;
}

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--color-bg);
  color: var(--color-text-primary);
  transition:
    background var(--transition-base, 0.35s ease),
    color var(--transition-base, 0.35s ease);
}

/* ════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Theme Toggle Button */
.tcs-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-toggle-bg);
  border: 1.5px solid var(--color-toggle-border);
  color: var(--color-toggle-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 0.22s ease;
  outline: none;
  padding: 0;
  flex-shrink: 0;
}

.tcs-theme-toggle:hover {
  border-color: var(--color-toggle-hover);
  color: var(--color-toggle-hover);
  transform: rotate(15deg) scale(1.08);
  box-shadow: 0 4px 14px rgba(26, 74, 122, 0.2);
}

.tcs-theme-toggle.compact {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 0.82rem;
}

/* Form Input */
.tcs-input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 38px;
  background: var(--color-input-bg) !important;
  border: 1.5px solid var(--color-input-border) !important;
  border-radius: 12px !important;
  color: var(--color-input-text) !important;
  font-size: 0.86rem !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.3s;
  outline: none;
  -webkit-text-fill-color: var(--color-input-text) !important;
}

.tcs-input.no-toggle {
  padding-right: 14px;
}

.tcs-input::placeholder {
  color: var(--color-input-placeholder) !important;
}

.tcs-input:focus {
  background: var(--color-input-bg) !important;
  border-color: var(--color-accent-dark) !important;
  box-shadow: 0 0 0 3px var(--color-input-focus-ring) !important;
}

.tcs-input.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

.tcs-input:-webkit-autofill,
.tcs-input:-webkit-autofill:hover,
.tcs-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 999px var(--color-autofill-bg) inset !important;
  -webkit-text-fill-color: var(--color-input-text) !important;
  caret-color: var(--color-input-text);
}

/* Alert Banner */
.tcs-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 20px;
  animation: tcsShake 0.4s ease;
}

.tcs-alert i {
  flex-shrink: 0;
}

.tcs-alert.danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
}

.tcs-alert.info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
}

/* Input Wrap */
.tcs-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tcs-input-icon-left {
  position: absolute;
  left: 13px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  pointer-events: none;
  z-index: 5;
  transition: color 0.15s;
}

.tcs-input-wrap:focus-within .tcs-input-icon-left {
  color: var(--color-accent-dark);
}

.tcs-pw-toggle {
  position: absolute;
  right: 12px;
  color: var(--color-text-muted);
  font-size: 1rem;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  z-index: 5;
  transition: color 0.15s;
  line-height: 1;
}

.tcs-pw-toggle:hover {
  color: var(--color-text-secondary);
}

/* ════════════════════════════════════════════════════════
   NAVBAR STYLES (from navbar.css)
   ═══════════════════════════════════════════════════════ */
.tcs-navbar {
  background: var(--nb-bg-glass) !important;
  border-bottom: 1px solid var(--nb-border);
  box-shadow: var(--nb-shadow);
  position: sticky;
  top: 0;
  z-index: 99999;
  padding: 0.45rem 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Logo */
.nav-logo {
  width: 38px;
  height: 38px;
  background: var(--nb-logo-bg);
  border: 1px solid var(--nb-logo-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  flex-shrink: 0;
  overflow: hidden;
}

.navbar-brand:hover .nav-logo {
  transform: rotate(-4deg) scale(1.06);
  border-color: #1a4a7a;
}

.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  transition: filter 0.3s;
}

[data-theme="dark"] .nav-logo img {
  filter: brightness(0) invert(1);
}

.brand-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nb-brand-title);
  white-space: nowrap;
  letter-spacing: -0.04em;
  line-height: 1.2;
  transition: color 0.3s;
}

/* Nav Links */
.nav-link-custom {
  color: var(--nb-link) !important;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.42rem 0.7rem !important;
  border-radius: 8px;
  transition: all 0.18s ease;
  white-space: nowrap;
  display: flex !important;
  align-items: center;
  gap: 5px;
  position: relative;
  border: 1px solid transparent;
}

.nav-link-custom i {
  font-size: 0.85rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-link-custom:hover {
  background: var(--nb-link-hover-bg) !important;
  color: var(--nb-link-hover) !important;
  transform: translateY(-1px);
}

.nav-link-custom.active-link {
  background: var(--nb-active-bg) !important;
  color: var(--nb-active-color) !important;
  border-color: var(--color-accent-border) !important;
  font-weight: 600;
}

.nav-link-custom.active-link i {
  opacity: 1;
}

.nav-link-custom.active-link::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--nb-active-border);
  border-radius: 2px;
}

.nav-link-custom.dropdown-toggle::after {
  margin-left: 1px;
  vertical-align: middle;
  opacity: 0.5;
}

/* ── Avatar ── */
.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10, 38, 71, 0.3);
}

.nav-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 0.74rem;
  border-radius: 8px;
}

.nav-avatar-btn {
  cursor: pointer;
  outline: none;
}

/* ── Desktop User Pill ── */
.nav-user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 10px;
  border: 1px solid var(--nb-pill-border) !important;
  background: var(--nb-pill-bg) !important;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.nav-user-pill:hover {
  background: var(--nb-pill-hover) !important;
}

.nav-user-pill::after {
  display: none !important;
}

.nav-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.nav-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nb-user-name);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}

.nav-chevron {
  font-size: 0.62rem;
  color: var(--nb-chevron);
  transition:
    transform 0.2s,
    color 0.3s;
}

.nav-user-pill[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* ── Vertical Divider ── */
.nav-divider-v {
  width: 1px;
  height: 20px;
  background: var(--nb-divider-v);
  margin: 0 2px;
  transition: background 0.3s;
}

/* ── Dropdown ── */
.nav-dropdown-menu {
  background: var(--nb-dropdown-bg) !important;
  border: 1px solid var(--nb-dropdown-border) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: var(--nb-dropdown-shadow) !important;
  animation: tcsDropIn 0.16s ease-out;
  z-index: 99999 !important;
  position: absolute !important;
  transition: background 0.3s;
}

.nav-user-header {
  border-radius: 9px;
}

.nav-dd-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--nb-dd-section);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 10px 4px;
  transition: color 0.3s;
}

.nav-dd-item {
  border-radius: 9px !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  padding: 7px 10px !important;
  color: var(--nb-dd-item) !important;
  display: flex !important;
  align-items: center;
  gap: 9px;
  transition:
    background 0.12s,
    padding-left 0.12s,
    color 0.12s !important;
}

.nav-dd-item:hover {
  background: var(--nb-dd-item-hov-bg) !important;
  color: var(--nb-dd-item-hover) !important;
  padding-left: 14px !important;
}

.nav-dd-danger {
  color: var(--nb-dd-danger) !important;
}

.nav-dd-danger:hover {
  background: var(--nb-dd-danger-bg) !important;
  color: var(--nb-dd-danger-hov) !important;
}

.nav-dd-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  flex-shrink: 0;
}

.dropdown-divider {
  border-color: var(--nb-dd-divider) !important;
  margin: 4px 8px !important;
  transition: border-color 0.3s;
}

/* ── Toggler ── */
.nav-toggler {
  border: 1px solid var(--nb-toggler-border) !important;
  border-radius: 9px !important;
  padding: 5px 9px;
  background: var(--nb-toggler-bg) !important;
  transition: background 0.2s;
  outline: none !important;
  box-shadow: none !important;
  color: var(--nb-link) !important;
}

.nav-toggler:hover {
  background: var(--nb-link-hover-bg) !important;
}

.nav-toggler:focus {
  box-shadow: 0 0 0 2px rgba(26, 74, 122, 0.3) !important;
}

/* ── Mobile Collapse ── */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--nb-mobile-bg);
    border: 1px solid var(--nb-mobile-border);
    border-radius: 14px;
    padding: 8px;
    margin-top: 8px;
    max-height: 78vh;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  }

  [data-theme="dark"] .navbar-collapse {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }

  .nav-link-custom {
    padding: 0.6rem 0.85rem !important;
    margin-bottom: 1px;
    font-size: 0.875rem;
    border-radius: 9px;
  }

  .nav-link-custom.active-link::before {
    display: none;
  }

  .nav-link-custom.active-link {
    border-left: 3px solid var(--nb-active-border) !important;
    border-radius: 0 9px 9px 0 !important;
  }

  .nav-divider-v,
  .nav-user-pill {
    display: none !important;
  }

  .nav-dropdown-menu {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 1px solid var(--nb-mobile-border) !important;
    background: var(--nb-mobile-drop-bg) !important;
    border-radius: 10px !important;
    margin-top: 3px !important;
    animation: none !important;
  }

  .nav-dd-item {
    color: var(--nb-link) !important;
  }

  .nav-dd-item:hover {
    background: var(--nb-link-hover-bg) !important;
    color: var(--nb-link-hover) !important;
  }
}

/* ── Small Laptop ── */
@media (min-width: 992px) and (max-width: 1280px) {
  .nav-link-custom {
    padding: 0.38rem 0.52rem !important;
    font-size: 0.77rem;
  }

  .nav-link-custom i {
    font-size: 0.82rem;
  }

  .brand-title {
    font-size: 0.82rem;
  }

  .nav-user-name {
    max-width: 68px;
  }
}

/* ── Overflow fix ── */
.tcs-navbar,
.tcs-navbar .container-fluid,
.navbar-collapse,
.navbar-nav,
.nav-item {
  overflow: visible !important;
}

/* ════════════════════════════════════════════════════════
   DASHBOARD STYLES (from dashboard.css)
   ═══════════════════════════════════════════════════════ */
/* Dashboard tokens */
:root {
  --dash-r: 16px;
  --dash-r-sm: 10px;
  --dash-r-xs: 7px;
  --dash-gap: 16px;
  --dash-pad: 20px 16px;
  --dash-trans: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --dash-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
  --dash-shadow-hover:
    0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --dash-num-font: "Syne", sans-serif;
  font-family: "DM Sans", system-ui, sans-serif;
}

[data-theme="dark"] {
  --dash-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.28);
  --dash-shadow-hover: 0 10px 36px rgba(0, 0, 0, 0.5);
  --dash-num-font: "Syne", sans-serif;
}

[data-theme="dark"] .dw::before {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201, 149, 61, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(46, 90, 154, 0.06) 0%, transparent 50%);
}

/* Dashboard wrapper */
.dw {
  padding: 18px 14px 70px;
  min-height: 100vh;
  background: var(--color-bg);
  position: relative;
}

.dw::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201, 149, 61, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(26, 74, 122, 0.04) 0%, transparent 50%);
  z-index: 0;
}

.dw > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .dw {
    padding: 22px 20px 70px;
  }
}

@media (min-width: 1280px) {
  .dw {
    padding: 26px 32px 70px;
  }
}

/* Hero Banner */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--dash-r);
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 40%, #2e5a9a 100%);
  padding: 22px 22px 0;
  margin-bottom: var(--dash-gap);
  box-shadow:
    0 20px 60px rgba(30, 27, 75, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Grid noise texture */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  top: -120px;
  right: -100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(26, 74, 122, 0.3) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  bottom: -80px;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(14, 165, 233, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hero-glow-2 {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -120px;
  left: 30%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 149, 61, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hero-accent-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #c9953d, #dfb66b);
  border-radius: 2px;
  margin: 8px 0 10px;
  box-shadow: 0 0 12px rgba(201, 149, 61, 0.3);
}

.hero-name-accent {
  background: linear-gradient(135deg, #c9953d 0%, #dfb66b 50%, #e8c47a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(201, 149, 61, 0.3));
}

.hero-date-chip i,
.hero-sub .role-pill i {
  color: rgba(255, 255, 255, 0.5);
}

.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.hero-name {
  font-family: "Syne", sans-serif;
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-name span {
  background: linear-gradient(135deg, #c9953d 0%, #dfb66b 50%, #e8c47a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(201, 149, 61, 0.3));
}

.hero-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 4px 0 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hero-date-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.hero-filters {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2px;
}

.hf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.18s;
  min-width: 50px;
}

.hf-btn.on {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.hf-btn:hover:not(.on) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* Hero Strip */
.hero-strip {
  display: flex;
  gap: 8px;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  padding: 8px;
}

.hstrip-item {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  padding: 14px 16px;
  cursor: pointer;
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    border-color 0.16s,
    background 0.16s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hstrip-item:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hstrip-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.hstrip-num {
  font-family: var(--dash-num-font);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hstrip-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hstrip-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hstrip-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--stat-bg, rgba(255,255,255,.08));
  color: var(--stat-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.hstrip-item:hover .hstrip-icon {
  transform: scale(1.1);
}

/* Alert Row */
.alert-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--dash-gap);
}

.da {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: all var(--dash-trans);
}

.da:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.da-red {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.da-amber {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.08);
}

.da-blue {
  border-color: rgba(30, 77, 122, 0.2);
  background: rgba(30, 77, 122, 0.08);
}

.da-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.da-red .da-ico {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.da-amber .da-ico {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.da-blue .da-ico {
  background: rgba(30, 77, 122, 0.15);
  color: #2563eb;
}

.da-body {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.da-cta {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  background: linear-gradient(135deg, #1a4a7a, #0f3460);
  color: #ffffff;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 52, 96, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.da-red .da-cta {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.da-amber .da-cta {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

.da-blue .da-cta {
  background: linear-gradient(135deg, #1a4a7a, #0f3460);
  box-shadow: 0 4px 12px rgba(15, 52, 96, 0.35);
}

.da-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  color: #ffffff;
}

.da-cta:hover {
  background: linear-gradient(135deg, #0f3460, #0a2647);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 38, 71, 0.45);
}

/* Section Labels */
.sec-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-label::before {
  content: "";
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #c9953d, #dfb66b);
  border-radius: 2px;
}

/* Data Cards */
.dc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: all var(--dash-trans);
  overflow: hidden;
  position: relative;
}

.dc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 50%);
  pointer-events: none;
}

.dc.hov:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-border);
}

.dc-body {
  padding: 18px 20px;
}

/* KPI Cards */
.kc {
  position: relative;
  padding: 20px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  overflow: hidden;
}

.kc-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kc-color), transparent);
}

.kc-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kc-color) 0%, transparent 70%);
  opacity: 0.12;
  pointer-events: none;
}

.kc-row1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.kc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--kc-bg);
  color: var(--kc-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
}

.kc-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}

.kc-badge {
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="dark"] .kc-badge {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.kc-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.kc-num {
  font-family: var(--dash-num-font);
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}

.kc-num.sm {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
}

.kc-sub {
  font-size: 0.73rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.kc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.kc-chip.up {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.kc-chip.dn {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.kc-chip.warn {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* Chart Container */
.ch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.ct {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ct-bar {
  width: 16px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

.ct-badge {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

[data-theme="dark"] .ct-badge {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.c-link {
  font-size: 0.73rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
}

.chart-wrap {
  height: 280px;
  position: relative;
}

/* Top Customers */
.tcr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.tcr-rank {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tcr-rank.r1 {
  background: linear-gradient(135deg, #c9953d, #a67a2e);
  color: #ffffff;
}

.tcr-rank.r2 {
  background: linear-gradient(135deg, #4a6a8a, #2e4a7a);
  color: #ffffff;
}

.tcr-rank.r3 {
  background: linear-gradient(135deg, #6b4d15, #8b6520);
  color: #ffffff;
}

.tcr-rank.rn {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}

.tcr-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcr-name:hover {
  color: var(--color-accent);
}

.tcr-amt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.tcr-prog {
  height: 3px;
  background: var(--color-surface-2);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.tcr-prog-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* Data Tables */
.dt-wrap {
  border-radius: 10px;
  overflow: hidden;
}

.dt {
  font-size: 0.73rem;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.dt thead th {
  background: var(--color-surface-2) !important;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  border-top: none;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dt tbody tr {
  transition: background-color 0.12s;
}

.dt tbody tr:hover {
  background: var(--color-surface-2) !important;
}

.dt td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.dt tbody tr:last-child td {
  border-bottom: none;
}

.td-cut {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-dim {
  color: var(--color-text-secondary) !important;
}

.ref-p {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
}

/* Status Badges */
.sb {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-ok {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.sb-red {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.sb-blue {
  background: rgba(30, 77, 122, 0.1);
  color: #2563eb;
}

.sb-warn {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.sb-sky {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.sb-dim {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════
   PAGE LAYOUT STYLES (from customers.css, invoices.css, etc.)
   ═══════════════════════════════════════════════════════ */
/* Page variables */
:root {
  --page-radius: 14px;
  --page-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
  --page-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --page-border: 1px solid rgba(0, 0, 0, 0.06);
  --sky: #0ea5e9;
  --sky-dark: #0284c7;
  --sky-light: #e0f2fe;
  --violet: #1a4a7a;
  --violet-dark: #0f3460;
  --violet-light: #dce6f0;
  --rose: #e11d48;
  --rose-dark: #be123c;
  --amber: #f59e0b;
  --amber-dark: #d97706;
}

[data-theme="dark"] {
  --page-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
  --page-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  --page-border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Page Wrapper */
.page-wrapper {
  padding: 24px 20px;
  background: var(--color-bg);
  min-height: calc(100vh - 60px);
}

@media (min-width: 1200px) {
  .page-wrapper {
    padding: 28px 32px;
  }
}

@media (max-width: 768px) {
  .page-wrapper {
    padding: 16px 12px;
  }
}

/* Page Header */
.page-header {
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
  border-radius: var(--page-radius);
  padding: 18px 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.08);
  pointer-events: none;
}

.page-header::before {
  content: "";
  position: absolute;
  bottom: -50px;
  right: 100px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.04);
  pointer-events: none;
}

.page-header-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-header-title i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #7dd3fc;
  flex-shrink: 0;
}

.page-header-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 3px;
  margin-left: 44px;
}

/* Page Search */
.page-search-wrap {
  position: relative;
}

.page-search-wrap > i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.85rem;
  pointer-events: none;
}

.page-search-input {
  height: 38px;
  padding-left: 32px !important;
  border: 1.5px solid var(--color-input-border) !important;
  border-radius: 10px !important;
  font-size: 0.83rem !important;
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  width: 260px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.page-search-input::placeholder {
  color: var(--color-input-placeholder) !important;
}

.page-search-input:focus {
  border-color: var(--color-accent-dark) !important;
  box-shadow: 0 0 0 3px var(--color-input-focus-ring) !important;
  background: var(--color-input-bg) !important;
  outline: none !important;
}

@media (max-width: 768px) {
  .page-search-input {
    width: 160px !important;
  }
}

/* Action Buttons */
.page-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.page-action-btn.primary {
  background: var(--sky);
  color: #fff;
  border-color: var(--sky-dark);
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.3);
}

.page-action-btn.primary:hover {
  background: var(--sky-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(14, 165, 233, 0.4);
}

.page-action-btn.secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.page-action-btn.secondary:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════
   TABLE STYLES - FIXED FOR DARK MODE
   ═══════════════════════════════════════════════════════ */

/* Generic Table Cards - Fixed theme support */
.table-card,
.inv-table-card,
.cust-table-card,
.vd-table-card,
.st-table-card,
.sp-table-card,
.rfq-table-card,
.po-table-card,
.rfq-page-card {
  background: var(--color-surface) !important;
  border: var(--page-border) !important;
  border-radius: var(--page-radius) !important;
  box-shadow: var(--page-shadow) !important;
  overflow: hidden;
}

[data-theme="dark"] .rfq-page-card .card-body {
  background: var(--color-surface) !important;
}

[data-theme="dark"] .card-body {
  background: var(--color-surface) !important;
}

[data-theme="dark"] #rfqTable {
  background: var(--color-surface) !important;
}

[data-theme="dark"] .rfq-page-card {
  background: var(--color-surface) !important;
}

[data-theme="dark"] .rfq-page-card.card {
  background: var(--color-surface) !important;
}

[data-theme="dark"] .card {
  background: var(--color-surface) !important;
}

/* Generic Tables - Fixed theme support */
.table,
.inv-table,
.cust-table,
.vd-table,
.st-table,
.sp-table,
.rfq-table,
.po-table,
.line-table,
.form-table {
  font-size: 0.83rem;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.table thead th,
.inv-table thead th,
.cust-table thead th,
.vd-table thead th,
.st-table thead th,
.sp-table thead th,
.rfq-table thead th,
.po-table thead th,
.line-table thead th,
.form-table thead th {
  background: var(--color-surface-2) !important;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted) !important;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border) !important;
  border-top: none;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr,
.inv-table tbody tr,
.cust-table tbody tr,
.vd-table tbody tr,
.st-table tbody tr,
.sp-table tbody tr,
.rfq-table tbody tr,
.po-table tbody tr,
.line-table tbody tr,
.form-table tbody tr {
  transition: background-color 0.12s;
}

.table tbody tr:hover,
.inv-table tbody tr:hover,
.cust-table tbody tr:hover,
.vd-table tbody tr:hover,
.st-table tbody tr:hover,
.sp-table tbody tr:hover,
.rfq-table tbody tr:hover,
.po-table tbody tr:hover,
.line-table tbody tr:hover,
.form-table tbody tr:hover {
  background: var(--color-surface-2) !important;
}

.table td,
.inv-table td,
.cust-table td,
.vd-table td,
.st-table td,
.sp-table td,
.rfq-table td,
.po-table td,
.line-table td,
.form-table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  background: transparent !important;
}

.table tbody tr:last-child td,
.inv-table tbody tr:last-child td,
.cust-table tbody tr:last-child td,
.vd-table tbody tr:last-child td,
.st-table tbody tr:last-child td,
.sp-table tbody tr:last-child td,
.rfq-table tbody tr:last-child td,
.po-table tbody tr:last-child td,
.line-table tbody tr:last-child td,
.form-table tbody tr:last-child td {
  border-bottom: none;
}
.rfq-title-cell{
  max-width: clamp(100px, 20vw, 240px);
}

/* Specific table hover colors */
.vd-table tbody tr:hover {
  background: var(--color-surface-2) !important;
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.st-table tbody tr:hover {
  background: var(--color-surface-2) !important;
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.sp-table tbody tr:hover {
  background: var(--color-surface-2) !important;
  box-shadow: inset 3px 0 0 var(--rose);
}

/* ════════════════════════════════════════════════════════
   FORM STYLES - FIXED FOR DARK MODE
   ═══════════════════════════════════════════════════════ */

/* Form Cards - Fixed theme support */
.form-card,
.letterhead-strip,
.rfq-lines-card,
.form-actions-bar,
.inv-stat-card {
  background: var(--color-surface) !important;
  border: var(--page-border) !important;
  border-radius: var(--page-radius) !important;
  box-shadow: var(--page-shadow) !important;
}

/* Form Inputs - Fixed theme support */
.form-input,
.line-input,
.desc-input,
.page-input,
.search-input {
  background: var(--color-input-bg) !important;
  border: 1.5px solid var(--color-input-border) !important;
  border-radius: 10px;
  color: var(--color-input-text) !important;
  font-size: 0.84rem !important;
  height: 38px;
  padding: 0 12px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
}

.form-input:focus,
.line-input:focus,
.desc-input:focus,
.page-input:focus,
.search-input:focus {
  border-color: var(--color-accent-dark) !important;
  box-shadow: 0 0 0 3px var(--color-input-focus-ring) !important;
  background: var(--color-input-bg) !important;
}

.form-input::placeholder,
.line-input::placeholder,
.desc-input::placeholder,
.page-input::placeholder,
.search-input::placeholder {
  color: var(--color-input-placeholder) !important;
}

/* Textareas */
textarea.form-input,
textarea.line-input,
textarea.desc-input {
  resize: vertical;
  min-height: 72px;
  padding: 8px 12px;
}

/* Select Inputs */
select.form-input,
select.page-input {
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════
   CARD COMPONENTS - FIXED FOR DARK MODE
   ═══════════════════════════════════════════════════════ */

/* Stat Cards */
.inv-stat-card,
.cust-stat-card,
.po-stat-card {
  background: var(--color-surface) !important;
  border-radius: var(--page-radius);
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--page-shadow) !important;
  padding: 16px 18px;
  cursor: pointer;
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    border-color 0.16s;
  position: relative;
  overflow: hidden;
}

.inv-stat-card::after,
.cust-stat-card::after,
.po-stat-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--card-color, var(--color-accent));
  opacity: 0.08;
  pointer-events: none;
}

.inv-stat-card:hover,
.cust-stat-card:hover,
.po-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--page-shadow-hover) !important;
}

.inv-stat-card.active-filter,
.cust-stat-card.active-filter,
.po-stat-card.active-filter {
  box-shadow:
    0 0 0 2px var(--card-color, var(--color-accent)),
    var(--page-shadow-hover) !important;
  border-color: var(--card-color, var(--color-accent)) !important;
}

.inv-stat-inner,
.cust-stat-inner,
.po-stat-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.inv-stat-icon,
.cust-stat-icon,
.po-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.inv-stat-label,
.cust-stat-label,
.po-stat-label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}

.inv-stat-num,
.cust-stat-num,
.po-stat-num {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

/* ── COMMENT / DOCUMENT ITEMS ── */
.comment-item {
    background: #f8fafc; border: 1px solid #f1f5f9;
    border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.comment-meta { font-size: .72rem; color: #94a3b8; margin-top: 6px; }
.doc-item {
    display: flex; align-items: center; justify-content: space-between;
    background: #f8fafc; border: 1px solid #f1f5f9;
    border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.delete-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid #fecaca; background: #fee2e2; color: #dc2626;
    font-size: .72rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.delete-btn:hover { background: #fecaca; }

/* ── TRACKING PREVIEW (sourcing tab) ── */
.tracking-preview-bar {
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 10px; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: .82rem; color: #1e40af; margin-top: 14px;
}

/* ── URL INPUT GROUP ── */
.url-input-group {
    display: flex; gap: 6px;
}
.url-input-group .form-input { flex: 1; }
.url-open-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 14px; border-radius: 9px; height: 38px;
    background: #0f172a; color: #fcd34d;
    border: 1.5px solid #1e293b;
    font-size: .78rem; font-weight: 600; cursor: pointer;
    text-decoration: none; white-space: nowrap; transition: all .15s;
    flex-shrink: 0;
}
.url-open-btn:hover { background: #1e293b; color: #fde68a; }

/* ══════════════════════════════════════════
   KANBAN
══════════════════════════════════════════ */
.kanban-board {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
}
.kanban-col {
    flex: 0 0 180px; min-width: 180px;
    background: #f8fafc; border: 1.5px solid #f1f5f9;
    border-radius: 12px; padding: 10px;
}
.kanban-col-label {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: .65rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: #fff; margin-bottom: 8px;
}
.kanban-items { min-height: 120px; }
.kanban-item {
    background: #fff; border: 1.5px solid #e2e8f0;
    border-left: 4px solid #d97706;
    border-radius: 8px; padding: 9px 10px;
    margin-bottom: 7px; cursor: grab;
    font-size: .78rem; transition: transform .15s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.kanban-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
.kanban-item:active { cursor: grabbing; }
.kanban-item.dragging { opacity: .7; transform: rotate(1.5deg) scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.kanban-item-title { font-weight: 700; color: #0f172a; margin-bottom: 3px; }
.kanban-item-meta  { font-size: .68rem; color: #94a3b8; }

/* ── Dark mode overrides for components ── */
[data-theme="dark"] .comment-item {
    background: var(--color-surface-2); border-color: var(--color-border);
}
[data-theme="dark"] .comment-meta { color: var(--color-text-muted); }
[data-theme="dark"] .doc-item {
    background: var(--color-surface-2); border-color: var(--color-border);
}
[data-theme="dark"] .delete-btn {
    background: rgba(248, 113, 113, 0.15); border-color: rgba(248, 113, 113, 0.25); color: #fca5a5;
}
[data-theme="dark"] .delete-btn:hover { background: rgba(248, 113, 113, 0.25); }
[data-theme="dark"] .tracking-preview-bar {
    background: rgba(46, 90, 154, 0.12); border-color: rgba(46, 90, 154, 0.2); color: #93b4e8;
}
[data-theme="dark"] .url-open-btn {
    background: var(--color-surface-2); border-color: var(--color-border); color: #fcd34d;
}
[data-theme="dark"] .url-open-btn:hover { background: var(--color-surface); }
[data-theme="dark"] .kanban-col {
    background: var(--color-surface-2); border-color: var(--color-border);
}
[data-theme="dark"] .kanban-item {
    background: var(--color-surface); border-color: var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[data-theme="dark"] .kanban-item-title { color: var(--color-text-primary); }
[data-theme="dark"] .kanban-item-meta { color: var(--color-text-muted); }
[data-theme="dark"] .pl-delete-btn {
    background: rgba(248, 113, 113, 0.15); color: #fca5a5;
}
[data-theme="dark"] .modal-footer {
    background: var(--color-surface-2) !important;
}
[data-theme="dark"] .form-card-header-icon,
[data-theme="dark"] .info-card-header-icon {
    background: var(--color-surface-2) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .line-input.total,
[data-theme="dark"] input[readonly][style*="#f8fafc"] {
    background: var(--color-input-bg) !important;
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .nav-dd-icon {
    background: var(--color-surface-2) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .usr-stat-icon,
[data-theme="dark"] .cust-stat-icon {
    background: var(--color-surface-2) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .pl-amount.positive { color: #34d399; }
[data-theme="dark"] .pl-amount.negative { color: #f87171; }

/* ── Bootstrap utility overrides for dark mode ── */
[data-theme="dark"] .bg-light {
    background: var(--color-surface-2) !important;
}
[data-theme="dark"] .bg-white {
    background: var(--color-surface) !important;
}
[data-theme="dark"] .modal-header .bg-white {
    background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .form-control {
    background: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-input-text) !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--color-input-placeholder) !important;
}
[data-theme="dark"] .form-control:focus {
    background: var(--color-input-bg) !important;
    border-color: var(--color-accent-dark) !important;
    box-shadow: 0 0 0 3px var(--color-input-focus-ring) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .input-group-text {
    background: var(--color-surface-2) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .action-icon {
    background: var(--color-surface-2) !important;
    color: var(--color-accent) !important;
}
[data-theme="dark"] .rfq-stat-icon {
    background: var(--color-surface-2) !important;
    color: var(--color-accent-dark) !important;
}
[data-theme="dark"] hr[style*="#f1f5f9"] {
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .ql-toolbar {
    background: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .ql-container {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .ql-editor {
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .ql-stroke { stroke: var(--color-text-secondary) !important; }
[data-theme="dark"] .ql-fill { fill: var(--color-text-secondary) !important; }
[data-theme="dark"] .ql-picker-label { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .ql-picker-options {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

/* ── LOADER ── */
#loaderOverlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,23,42,.4); z-index: 1050;
    align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════
   SPECIALIZED COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Button Components */
.action-btn,
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.action-btn.save,
.btn-primary {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber-dark);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.action-btn.save:hover,
.btn-primary:hover {
  background: var(--amber-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.4);
}

.action-btn.cancel,
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.action-btn.cancel:hover,
.btn-secondary:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.action-btn.delete,
.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1.5px solid #b91c1c;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
}

.action-btn.delete:hover,
.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 5px 14px rgba(220, 38, 38, 0.4);
  transform: translateY(-1px);
}

/* Modal Components */
.modal-content,
.modal-body {
  background: var(--color-modal-bg) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-modal-border) !important;
}

.modal-header {
  background: var(--color-modal-header) !important;
  border-bottom: 1px solid var(--color-modal-border) !important;
}

.modal-title {
  color: var(--color-text-primary) !important;
}

/* Alert Components */
.alert,
.alert-info,
.alert-warning,
.alert-danger {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Badge Components */
.badge,
.status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Loading Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes tcsFadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

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

@keyframes tcsFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

@keyframes tcsShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-5px);
  }

  40%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes tcsFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-22px) scale(1.04);
  }
}

@keyframes tcsDropIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Animation classes */
.anim-in {
  animation: tcsFadeUp 0.5s ease forwards;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════ */

/* Grid utilities */
.bk-grid {
  display: grid;
  gap: 12px;
}

.bk-grid.cols2 {
  grid-template-columns: 1fr 1fr;
}

.bk-grid.cols3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.bk-grid.cols4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Block components */
.bk {
  padding: 12px;
  border-radius: 10px;
  text-align: center;
}

.bk-ico {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.bk-num {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.bk-lbl {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive visibility */
@media (max-width: 767px) {
  .mobile-hidden {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }

  .desktop-hidden {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   PDF STYLES (from various PDF CSS files)
   ═══════════════════════════════════════════════════════ */
@font-face {
  font-family: "DancingScript";
  src: url("../assets/fonts/static/DancingScript-SemiBold.ttf")
    format("truetype");
}

.pdf-head-name {
  font-family: "DancingScript", sans-serif;
  font-size: 6em;
  font-weight: 600;
  letter-spacing: 2px;
  color: #0d3483;
}

.span-blue {
  color: #1a6493;
}

.span-red {
  color: #c6265c;
}

.pdf-header-w {
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  letter-spacing: -3px;
}

.pdf-head-title {
  font-size: 5em;
}

.rfq-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 15px;
  background: var(--color-surface);
}

.rfq-header {
  border-bottom: 3px solid #397099;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.rfq-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

.rfq-table th,
.rfq-table td {
  padding: 8px;
  vertical-align: top;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.desc-field input {
  flex: 1;
  min-width: 0;
}

.desc-field strong {
  display: block;
  color: #397099;
}

.rfq-grand-total {
  width: 100%;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 100px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* Print styles */
@media print {
  body,
  html {
    background: #fff !important;
    color: #000 !important;
  }

  .no-print {
    display: none !important;
  }

  .tcs-navbar,
  .page-header,
  .hero,
  .btn,
  .action-btn {
    display: none !important;
  }

  .table-card,
  .form-card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
}

/* ════════════════════════════════════════════════════════
   RFQ PAGE DROPDOWN STYLES
   ═══════════════════════════════════════════════════════ */

/* RFQ Action Dropdown */
.rfq-action-dropdown {
  position: relative;
  display: inline-block;
}

.row-action-btn.menu-btn.action-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.18s;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.row-action-btn.menu-btn.action-toggle:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.action-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 185px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  animation: tcsDropIn 0.16s ease-out;
}

[data-theme="dark"] .action-menu {
  background: #1a1f2e;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

.action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.12s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.action-item:hover {
  background: var(--color-surface-2);
  transform: translateX(2px);
}

[data-theme="dark"] .action-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.action-item.text-muted {
  color: var(--color-text-muted) !important;
  cursor: default;
}

.action-item.text-muted:hover {
  background: transparent;
  transform: none;
}

.action-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* RFQ Status Dropdown */
.editable-status {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.18s;
  border: 1px solid transparent;
}

.editable-status:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.editable-status i {
  transition: transform 0.18s;
}

.editable-status:hover i {
  transform: translateY(1px);
}

.status-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  animation: tcsDropIn 0.16s ease-out;
}

[data-theme="dark"] .status-dropdown {
  background: #1a1f2e;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

.status-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: all 0.12s;
}

.status-dropdown-option:hover {
  background: var(--color-surface-2);
  transform: translateX(2px);
}

[data-theme="dark"] .status-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.status-dropdown-option.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-weight: 600;
}

.status-dropdown-option span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Status row highlighting */
.status-dropdown-open {
  background: var(--color-surface-2) !important;
}

[data-theme="dark"] .status-dropdown-open {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Form select styling */
.form-select {
  background: var(--color-input-bg) !important;
  border: 1.5px solid var(--color-input-border) !important;
  border-radius: 10px !important;
  color: var(--color-input-text) !important;
  font-size: 0.8rem !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
}

.form-select:focus {
  border-color: var(--color-accent-dark) !important;
  box-shadow: 0 0 0 3px var(--color-input-focus-ring) !important;
}

.form-select-sm {
  font-size: 0.75rem !important;
  padding: 0.375rem 0.75rem !important;
}

/* ════════════════════════════════════════════════════════
   LOST RFQS PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.empty-state-sub {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Lost RFQs Table */
.lost-rfqs-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.lost-rfqs-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.lost-rfqs-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.lost-rfqs-table tbody tr:hover {
  background: var(--color-surface-2);
}

.lost-rfqs-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Reference Badges */
.ref-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ref-badge-red {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Price Badges */
.price-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.price-blue {
  background: rgba(30, 77, 122, 0.1);
  color: #2563eb;
}

.price-green {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

/* Awarded Badge */
.awarded-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Cell Truncate */
.cell-truncate {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* Status Display */
.status-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.status-display:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

/* Row Actions */
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.row-action-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.row-action-btn:hover {
  transform: translateY(-1px);
}

.row-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
}

/* Table Footer */
.table-footer-bar {
  padding: 12px 16px;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}

/* Lost Stat Cards */
.lost-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}

.lost-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.lost-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.lost-stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.lost-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Lost Page Card */
.lost-page-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* Delete Modal Styles */
.delete-modal-header {
  background: linear-gradient(135deg, #8b3a3a, #6b2a2a);
  color: white;
  padding: 20px;
  border-radius: 16px 16px 0 0;
  position: relative;
}

.delete-icon-wrap {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.delete-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.delete-modal-sub {
  font-size: 0.9rem;
  opacity: 0.9;
}

.delete-rfq-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-2);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.delete-rfq-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #8b3a3a, #6b2a2a);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.delete-rfq-code {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.delete-rfq-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.chip-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.chip-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chip-detail-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chip-detail-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.9rem;
}

.delete-warning i {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.btn-cancel-modal {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s;
}

.btn-cancel-modal:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.btn-delete-confirm {
  background: linear-gradient(135deg, #8b3a3a, #6b2a2a);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  cursor: pointer;
}

.btn-delete-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Dark mode adjustments for delete modal */
[data-theme="dark"] .delete-modal-header {
  background: linear-gradient(135deg, #6b2a2a, #4a1a1a);
}

[data-theme="dark"] .delete-warning {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .btn-delete-confirm {
  background: linear-gradient(135deg, #6b2a2a, #4a1a1a);
}

/* ════════════════════════════════════════════════════════
   ORDER PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Order Table */
.order-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.order-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.order-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.order-table tbody tr:hover {
  background: var(--color-surface-2);
}

.order-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Row Navigation */
.row-nav {
  cursor: pointer;
  transition: background-color 0.15s;
}

.order-data-row {
  transition: background-color 0.15s;
}

/* Reference Badges */
.ref-badge-blue {
  background: rgba(30, 77, 122, 0.1);
  color: #2563eb;
}

/* Quantity Badge */
.qty-badge {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
}

/* Validity Badges */
.validity-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.validity-badge.valid {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.validity-badge.expired {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.validity-badge.na {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* Status Pills */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Status Classes */
.status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.status-onhold {
  background: rgba(26, 74, 122, 0.1);
  color: #1a4a7a;
}

.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-inprogress {
  background: rgba(30, 77, 122, 0.1);
  color: #2563eb;
}

.status-inreview {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.status-testing {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
}

/* Mini Avatar */
.mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0f3460, #1a4a7a);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Order Stat Cards */
.stat-cards-row {
  margin-bottom: 20px;
}

.order-stat-card {
  background: var(--color-surface);
  border-radius: var(--page-radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--page-shadow);
  padding: 16px 18px;
  cursor: pointer;
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    border-color 0.16s;
  position: relative;
  overflow: hidden;
}

.order-stat-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--card-color, #1a4a7a);
  opacity: 0.08;
  pointer-events: none;
}

.order-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--page-shadow-hover);
}

.order-stat-card.active-filter {
  box-shadow:
    0 0 0 2px var(--card-color, #1a4a7a),
    var(--page-shadow-hover);
  border-color: var(--card-color, #1a4a7a);
}

.order-stat-num {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.order-stat-label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}

.order-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Delete Order Modal Components */
.delete-order-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-2);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.delete-order-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #8b3a3a, #6b2a2a);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.delete-order-code {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.delete-order-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

/* Table Loading */
.table-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
}

.table-loading .spinner-border {
  width: 2rem;
  height: 2rem;
}

/* Dark mode adjustments */
[data-theme="dark"] .order-stat-card.active-filter {
  background: rgba(26, 74, 122, 0.1);
}

[data-theme="dark"] .delete-order-avatar {
  background: linear-gradient(135deg, #6b2a2a, #4a1a1a);
}

/* ════════════════════════════════════════════════════════
   ORDER VIEW PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #f8fafc;
}

.status-badge.status-open {
  background: rgba(30, 77, 122, 0.1);
  color: #2563eb;
}

.status-badge.status-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.status-badge.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f8fafc;
}

.status-badge.status-draft {
  background: rgba(107, 114, 128, 0.1);
  color: #f8fafc;
}

/* Back Button */
.back-btn {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.back-btn:hover {
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.line-num-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 8px;
    background: rgba(217,119,6,.25); border: 1px solid rgba(253,211,77,.3);
    font-size: .78rem; font-weight: 700; color: #fcd34d; letter-spacing: .04em;
}
.line-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 7px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    border: 1px solid;
}

/* Letterhead Strip */
.letterhead-strip {
  background: linear-gradient(135deg, #0f172a, #1a2a4a);
  color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.letterhead-strip img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.letterhead-company-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.letterhead-address {
  font-size: 0.85rem;
  opacity: 0.8;
  line-height: 1.4;
}

.letterhead-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
}

.letterhead-contact {
  font-size: 0.8rem;
  opacity: 0.9;
  line-height: 1.4;
  text-align: right;
}

.letterhead-contact a {
  color: #f8fafc;
  text-decoration: none;
}

.letterhead-contact a:hover {
  text-decoration: underline;
}

/* Info Cards */
.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.info-card-header {
  background: var(--color-surface-2);
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.info-card-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.info-card-body {
  padding: 20px;
}

/* Party Blocks */
.party-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.party-block strong {
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.party-block span {
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.party-block a {
  color: var(--color-accent);
  text-decoration: none;
}

.party-block a:hover {
  text-decoration: underline;
}

/* Meta Grid */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.meta-item-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.meta-item-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Note Box */
.note-box {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Order Lines Card */
.order-lines-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.order-lines-header {
  background: var(--color-surface-2);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.order-lines-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-lines-title span {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* Order Line Table */
.order-table-wrap {
  overflow-x: auto;
}

.order-line-table {
  width: 100%;
  font-size: 0.8rem;
}

.order-line-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
  white-space: nowrap;
}

.order-line-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.order-line-table tbody tr:hover {
  background: var(--color-surface-2);
}

.order-line-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Product Link */
.product-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.product-link:hover {
  text-decoration: underline;
}

.product-meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* Number Cells */
.num-cell {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
  font-size: 0.8rem;
  text-align: right;
  font-weight: 500;
}

.delivered-val {
  color: #059669;
}

.remaining-danger {
  color: #dc2626;
  font-weight: 600;
}

.remaining-ok {
  color: #059669;
}

/* Fulfillment Badge */
.fulfillment-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fulfillment-badge.fm-stock {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.fulfillment-badge.fm-dropship {
  background: rgba(30, 77, 122, 0.1);
  color: #2563eb;
}

.fulfillment-badge.fm-warehouse {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* Tracking Link */
.tracking-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tracking-link:hover {
  text-decoration: underline;
}

.tracking-plain {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Line Status Badge */
.line-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.line-status-badge.ls-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.line-status-badge.ls-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* Cost Shipping */
.cost-ship {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Profit Indicators */
.profit-positive {
  color: #059669;
  font-weight: 600;
}

.profit-negative {
  color: #dc2626;
  font-weight: 600;
}

/* Totals Section */
.totals-section {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  padding: 20px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
}

.total-row.revenue {
  font-weight: 600;
}

.total-row.cost {
  color: var(--color-text-secondary);
}

.total-row.net {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 1rem;
}

.total-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
}

.total-value {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
  font-weight: 600;
}

.net-positive {
  color: #059669;
}

.net-negative {
  color: #dc2626;
}

/* Action Footer */
.action-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.action-footer-left {
  display: flex;
  align-items: left;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

/* Action Buttons */
.action-btn {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border: 1px solid var(--color-accent-dark) !important;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border: 1px solid var(--color-accent-dark);
}

.action-btn.secondary:hover:not(:disabled) {
  background: var(--color-surface-2);
}

.action-btn.info-btn:hover:not(:disabled) {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Checkboxes */
.line-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.15s;
}

.line-check:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.line-check:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark mode adjustments */
[data-theme="dark"] .letterhead-strip {
  background: linear-gradient(135deg, #0a1628, #12294a);
}

[data-theme="dark"] .profit-positive,
[data-theme="dark"] .net-positive {
  color: #10b981;
}

[data-theme="dark"] .profit-negative,
[data-theme="dark"] .net-negative {
  color: #f87171;
}

/* ════════════════════════════════════════════════════════
   SALES PERSON PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Sales Person Table */
.sp-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.sp-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.sp-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.sp-table tbody tr:hover {
  background: var(--color-surface-2);
}

.sp-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Reference Badge - Rose */
.ref-badge-rose {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
}

/* Sales Person Cell */
.sp-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2e5a9a, #1a4a7a);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Title Tag */
.title-tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(26, 74, 122, 0.1);
  color: #1a4a7a;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
}

/* Contact Cell */
.contact-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.contact-cell i {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Signature Preview */
.sig-preview {
  width: 48px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.sig-preview:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.sig-none {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Signature Lightbox */
#sigLightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

#sigLightbox.open {
  display: flex;
  opacity: 1;
}

.close-lb {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}

#lightboxImg {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Sales Person Stat Cards */
.sp-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}

.sp-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sp-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.sp-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.sp-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Sales Person Table Card */
.sp-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Modal Components */
.modal-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.modal-input {
  background: var(--color-input-bg);
  border: 1.5px solid var(--color-input-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--color-input-text);
  transition: all 0.15s;
}

.modal-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  outline: none;
}

/* File Input Wrap */
.file-input-wrap {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.file-input-wrap input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-input-wrap::before {
  content: "Choose file...";
  display: block;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.file-input-wrap:hover::before {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
}

/* Current Signature Wrap */
.current-sig-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 12px;
}

.current-sig-wrap img {
  width: 60px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  background: white;
  border: 1px solid var(--color-border);
  padding: 4px;
}

.current-sig-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.current-sig-hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* Delete Sales Person Modal Components */
.delete-sp-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-2);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.delete-sp-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #2e5a9a, #1a4a7a);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.delete-sp-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.delete-sp-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

/* Email Hide Class */
.email-hide {
  display: none;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .email-hide {
    display: table-cell;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .sig-preview {
  background: var(--color-surface-3);
}

[data-theme="dark"] .file-input-wrap::before {
  background: var(--color-surface-2);
}

[data-theme="dark"] .current-sig-wrap {
  background: var(--color-surface-3);
}

[data-theme="dark"] .delete-sp-avatar {
  background: linear-gradient(135deg, #1a4a7a, #0f3460);
}

/* ════════════════════════════════════════════════════════
   BILL TO PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Bill To Table */
.bt-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.bt-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.bt-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.bt-table tbody tr:hover {
  background: var(--color-surface-2);
}

.bt-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Reference Badge - Amber */
.ref-badge-amber {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

/* Bill To Cell */
.bt-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #a67a2e, #8b6520);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bt-title-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Address Text */
.addr-text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  max-width: 300px;
  word-break: break-word;
}

/* Bill To Stat Cards */
.bt-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}

.bt-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.bt-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.bt-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.bt-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Bill To Table Card */
.bt-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Delete Bill To Modal Components */
.delete-bt-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-2);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.delete-bt-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #a67a2e, #8b6520);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.delete-bt-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.delete-bt-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  line-height: 1.4;
}

/* Dark mode adjustments */
[data-theme="dark"] .bt-avatar {
  background: linear-gradient(135deg, #8b6520, #6b4d15);
}

[data-theme="dark"] .delete-bt-avatar {
  background: linear-gradient(135deg, #8b6520, #6b4d15);
}

/* ════════════════════════════════════════════════════════
   BUYER PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Buyer Table */
.by-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.by-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.by-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.by-table tbody tr:hover {
  background: var(--color-surface-2);
}

.by-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Reference Badge - Teal */
.ref-badge-teal {
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}

/* Buyer Cell */
.by-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.by-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a4a7a, #0f3460);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.by-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Buyer Stat Cards */
.by-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}

.by-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.by-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.by-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.by-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Buyer Table Card */
.by-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Delete Buyer Modal Components */
.delete-cust-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-2);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.delete-cust-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1a4a7a, #0f3460);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.delete-cust-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.delete-cust-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

/* Address Hide Class */
.addr-hide {
  display: none;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .addr-hide {
    display: table-cell;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .by-avatar {
  background: linear-gradient(135deg, #0f3460, #0a2647);
}

[data-theme="dark"] .delete-cust-avatar {
  background: linear-gradient(135deg, #0f3460, #0a2647);
}

/* ════════════════════════════════════════════════════════
   SHIP TO PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Ship To Table */
.st-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.st-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.st-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.st-table tbody tr:hover {
  background: var(--color-surface-2);
}

.st-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Reference Badge - Indigo */
.ref-badge-indigo {
  background: rgba(10, 38, 71, 0.1);
  color: #1a4a7a;
}

/* Ship To Cell */
.st-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.st-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Company Tag */
.company-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(26, 74, 122, 0.1);
  color: #1a4a7a;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
}

.company-tag i {
  font-size: 0.65rem;
}

/* Ship To Stat Cards */
.st-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}

.st-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.st-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.st-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.st-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Ship To Table Card */
.st-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Company Hide Class */
.company-hide {
  display: none;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .company-hide {
    display: table-cell;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .st-avatar {
  background: linear-gradient(135deg, #0f3460, #0a2647);
}

/* ── P&L PREVIEW ── */
.pnl-bar {
    background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
    border-radius: 10px; padding: 12px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin-top: 16px;
}
.pnl-label { font-size: .65rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pnl-value { font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pnl-item { display: flex; flex-direction: column; gap: 2px; }
.pnl-sep { width: 1px; height: 28px; background: rgba(255,255,255,.1); }

/* ══════════════════════════════════════════
   FORM INPUTS
══════════════════════════════════════════ */
.form-label {
    font-size: .72rem !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .05em;
    color: #64748b; margin-bottom: 5px;
}

/* ══════════════════════════════════════════
   TABS CARD
══════════════════════════════════════════ */
.tabs-card {
    background: #fff;
    border: var(--page-border);
    border-radius: var(--page-radius);
    box-shadow: var(--page-shadow);
    overflow: hidden;
}

.tabs-nav {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 12px 16px 0;
    background: #f8fafc;
    border-bottom: 2px solid #f1f5f9;
}
.tab-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px 9px 0 0;
    font-size: .78rem; font-weight: 600; color: #64748b;
    background: transparent; border: none; cursor: pointer;
    transition: all .15s; border-bottom: 2px solid transparent;
    margin-bottom: -2px; white-space: nowrap;
}
.tab-btn:hover { color: #0f172a; background: #fff; }
.tab-btn.active { color: var(--amber); background: #fff; border-bottom-color: var(--amber); }
.tab-btn i { font-size: .8rem; }

.tab-content { padding: 22px 20px; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ════════════════════════════════════════════════════════
   STATISTICS CARDS
   ═══════════════════════════════════════════════════════ */

.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(6, 1fr); } }

.stat-val {
    font-size: 1.25rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-lbl {
    font-size: .65rem; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;
}
.stat-blue    { color: #3b82f6; }
.stat-green   { color: #16a34a; }
.stat-red     { color: #dc2626; }
.stat-dark    { color: #0f172a; }
.stat-muted   { color: #64748b; }
.profit-pos   { color: #16a34a; }
.profit-neg   { color: #dc2626; }

/* ── DELIVERY PROGRESS ── */
.delivery-card {
    background: #fff; border: var(--page-border);
    border-radius: var(--page-radius); box-shadow: var(--page-shadow);
    padding: 14px 18px; margin-bottom: 18px;
}
.delivery-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.delivery-bar {
    height: 8px; border-radius: 8px; background: #f1f5f9;
    overflow: hidden; margin: 8px 0 4px;
}
.delivery-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2d6a4f, #4a9a42); transition: width .4s; }

/* ── TRACKING BADGE ── */
.tracking-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0f172a; color: #fcd34d;
    border-radius: 20px; padding: 7px 16px;
    font-size: .78rem; font-weight: 700;
    text-decoration: none; transition: all .15s;
    border: 1px solid rgba(253,211,77,.2);
}
.tracking-pill:hover { background: #1e293b; color: #fde68a; }
.tracking-plain {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f8fafc; color: #475569;
    border-radius: 20px; padding: 7px 16px;
    font-size: .78rem; font-weight: 700;
    border: 1px solid #e2e8f0;
}

/* Stat Card */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

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

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent, var(--color-accent));
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  /* font-family: 'Courier New', monospace; */
  line-height: 1.2;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Dark mode adjustments */
[data-theme="dark"] .stat-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .stat-label {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .stat-num {
  color: var(--color-text-primary);
}

/* ── Tabs & Delivery Card dark mode ── */
[data-theme="dark"] .tabs-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .tabs-nav {
    background: var(--color-surface-2);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .tab-btn {
    color: var(--color-text-muted);
}
[data-theme="dark"] .tab-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface);
}
[data-theme="dark"] .tab-btn.active {
    color: var(--amber, #f59e0b);
    background: var(--color-surface);
}
[data-theme="dark"] .delivery-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .delivery-label {
    color: var(--color-text-secondary);
}
[data-theme="dark"] .delivery-bar {
    background: var(--color-surface-2);
}
[data-theme="dark"] .stat-lbl {
    color: var(--color-text-muted);
}
[data-theme="dark"] .current-sig-wrap img {
    background: var(--color-surface-2);
}
[data-theme="dark"] .tracking-pill {
    background: var(--color-surface-2);
}
[data-theme="dark"] .tracking-plain {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
[data-theme="dark"] .line-num-badge {
    background: rgba(253, 211, 77, 0.1);
    border-color: rgba(253, 211, 77, 0.15);
}
[data-theme="dark"] .stat-dark {
    color: var(--color-text-primary);
}

/* ════════════════════════════════════════════════════════
   PRODUCTS PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Products Table */
.prod-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.prod-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.prod-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.prod-table tbody tr:hover {
  background: var(--color-surface-2);
}

.prod-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Product Code */
.prod-code {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(10, 38, 71, 0.1);
  color: #1a4a7a;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* Product Name */
.prod-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.85rem;
}

/* Price Cell */
.price-cell {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-surface-2);
}

/* Catalog Link */
.catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.catalog-link:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
  text-decoration: none;
}

.catalog-link i {
  font-size: 0.7rem;
}

/* No Catalog */
.no-catalog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--color-text-muted);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.no-catalog i {
  font-size: 0.7rem;
}

/* Search Wrap */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-wrap i {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  z-index: 1;
}

.search-input {
  padding-left: 32px !important;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  transition: all 0.15s;
}

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

/* Page Alert */
.page-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  animation: slideInDown 0.3s ease-out;
}

.page-alert.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.page-alert.success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.page-alert i {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Modal Header Custom */
.modal-header-custom {
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 16px 20px;
}

.modal-header-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Modal Button Styles - Fixed for products.php */
.btn-cancel-modal {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-cancel-modal:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 38, 71, 0.3);

}

.btn-save-modal {
  background: linear-gradient(
    135deg,
    var(--amber),
    var(--amber-dark)
  );
  color: white;
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-save-modal:hover {
  background: linear-gradient(
    135deg,
    var(--amber),
    var(--amber-dark)
  );
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 38, 71, 0.3);
}

/* Dark mode adjustments */
[data-theme="dark"] .prod-code {
  background: rgba(26, 74, 122, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .price-cell {
  background: var(--color-surface-3);
}

[data-theme="dark"] .catalog-link {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

[data-theme="dark"] .catalog-link:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

[data-theme="dark"] .no-catalog {
  background: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .search-input {
  background: var(--color-surface-2);
}

[data-theme="dark"] .btn-cancel-modal {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

[data-theme="dark"] .btn-cancel-modal:hover {
  background: var(--color-surface-3);
}

/* ════════════════════════════════════════════════════════
   VENDOR PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Vendor Table */
.vd-table {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
}

.vd-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
}

.vd-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.vd-table tbody tr:hover {
  background: var(--color-surface-2);
}

.vd-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
  border: none;
  color: var(--color-text-primary);
}

/* Reference Badge - Orange */
.ref-badge-orange {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

/* Vendor Cell */
.vd-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vd-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #a67a2e, #8b6520);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vd-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Vendor Stat Cards */
.vd-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}

.vd-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.vd-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.vd-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.vd-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Vendor Table Card */
.vd-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Search Hidden Class */
.search-hidden {
  display: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .vd-avatar {
  background: linear-gradient(135deg, #8b6520, #6b4d15);
}

/* ════════════════════════════════════════════════════════
   ADD RFQ PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* RFQ Number Badge */
.rfq-num-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(10, 38, 71, 0.1);
  color: #f8fafc;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* Back Button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.back-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Letterhead Strip */
.letterhead-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f0f4ff, #e8edf5);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 24px;
}

.letterhead-strip img {
  height: 64px;
  width: auto;
}

.letterhead-company-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.letterhead-address {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.letterhead-divider {
  width: 1px;
  height: 48px;
  background: var(--color-border);
}

.letterhead-contact {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.letterhead-contact a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.letterhead-contact a:hover {
  text-decoration: underline;
}

/* Form Card */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 18px;
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.form-card-header-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.form-card-header-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.form-card-body {
  padding: 16px 18px;
}

/* Form Input */
.form-input {
  background: var(--color-input-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  transition: all 0.15s;
}

.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  outline: none;
}

/* RFQ Lines Card */
.rfq-lines-card {
  background: #fff;
  border: var(--page-border);
  border-radius: var(--page-radius);
  box-shadow: var(--page-shadow);
  overflow: hidden;
  margin-bottom: 18px;
}
.rfq-lines-header {
  padding: 12px 18px;
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.rfq-lines-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rfq-lines-title i {
  color: #7dd3fc;
}

.rfq-table-wrap {
  overflow-x: auto;
}

.rfq-line-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
}
.rfq-line-table thead th {
  background: var(--color-surface-2);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  padding: 9px 10px;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-surface-2);
  border-top: none;
}
.rfq-line-table tbody tr {
  transition: background 0.12s;
}
.rfq-line-table tbody tr:hover {
  background: var(--color-surface-2);
}
.rfq-line-table td {
  padding: 7px 8px;
  vertical-align: top;
  border-bottom: 1px solid #f1f5f9;
}
.rfq-line-table tbody tr:last-child td {
  border-bottom: none;
}
.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px dashed #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
  transition: all 0.15s;
}
.add-row-btn:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0284c7;
}

/* Line Input */
.line-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--color-text-primary);
  transition: all 0.15s;
}

.line-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-input-focus-ring);
  outline: none;
}

.line-input.price,
.line-input.total {
  font-family: "Courier New", monospace;
  text-align: right;
}

.line-input.total {
  background: var(--color-surface-2);
  font-weight: 600;
}

.line-input.line-source {
  background: #fffbeb;
  border-color: #fde68a;
  font-size: 0.75rem;
}

/* Description Grid */
.desc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.desc-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.desc-field-wrap.full {
  grid-column: 1 / -1;
}

.desc-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.desc-input {
  width: 100%;
  padding: 4px 6px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-text-primary);
  transition: all 0.15s;
}

.desc-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Remove Row Button */
.remove-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.remove-row-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

/* Grand Total Bar */
.grand-total-bar {
  padding: 12px 18px;
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.grand-total-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.currency-symbol {
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: var(--color-text-primary);
}

.grand-total-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #7dd3fc;
  letter-spacing: -0.01em;
}

/* Form Actions Bar */
.form-actions-bar {
  background: #fff;
  border: var(--page-border);
  border-radius: var(--page-radius);
  box-shadow: var(--page-shadow);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.action-btn.save {
  background: var(--sky);
  color: #fff;
  border-color: var(--sky-dark);
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3);
}
.action-btn.save:hover {
  background: var(--sky-dark);
  box-shadow: 0 5px 14px rgba(2, 132, 199, 0.4);
  transform: translateY(-1px);
}
.action-btn.cancel {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
.action-btn.cancel:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Dark mode adjustments */
[data-theme="dark"] .letterhead-strip {
  background: linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-3)
  );
}

[data-theme="dark"] .line-input.line-source {
  background: rgba(254, 243, 199, 0.1);
  border-color: rgba(253, 230, 138, 0.3);
  color: var(--color-text-primary);
}

[data-theme="dark"] .grand-total-bar {
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
}

/* ════════════════════════════════════════════════════════
   RFQ EDIT PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f8fafc;
}

.status-badge i {
  font-size: 0.5rem;
}

.status-open {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.status-closed {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.status-draft {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* Form Actions Left */
.form-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.form-actions-left i {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Dark mode adjustments */
[data-theme="dark"] .status-open {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .status-closed {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

[data-theme="dark"] .status-draft {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

/* ════════════════════════════════════════════════════════
   ORDER ADD PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* PO Number Badge */
.po-num-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.1);
  color: #f8fafc;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* Lines Card */
.lines-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

.lines-table {
  width: 100%;
  background: var(--color-surface);
}

.lines-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 8px;
  white-space: nowrap;
}

.lines-table tbody td {
  padding: 8px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.lines-table tbody tr:hover {
  background: var(--color-surface-2);
}

/* Row Number Cell */
.row-num-cell {
  text-align: center;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* Product Dropdown */
.productDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  z-index: 1055;
  display: none;
  max-height: 260px;
  overflow-y: auto;
}

.productDropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.productDropdown a:hover {
  background: var(--color-surface-2);
  text-decoration: none;
  color: var(--color-text-primary);
}

.productDropdown a:last-child {
  border-bottom: none;
}

.productDropdown .add-new {
  color: var(--color-accent);
  font-weight: 500;
  background: rgba(10, 38, 71, 0.05);
}

.productDropdown .add-new:hover {
  background: rgba(10, 38, 71, 0.1);
}

/* Action Footer */
.action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  margin-top: 24px;
  border-top: 1px solid var(--color-border);
}

.action-footer-left {
  display: flex;
  align-items: left;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.action-footer-left i {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Dark mode adjustments */
[data-theme="dark"] .po-num-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .productDropdown {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

[data-theme="dark"] .productDropdown a {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .productDropdown a:hover {
  background: var(--color-surface-3);
}

[data-theme="dark"] .productDropdown .add-new {
  background: rgba(10, 38, 71, 0.1);
}

[data-theme="dark"] .productDropdown .add-new:hover {
  background: rgba(10, 38, 71, 0.2);
}

/* ════════════════════════════════════════════════════════
   PACKAGE SLIP PREVIEW PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Order Number Badge */
.order-num-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.1);
  color: #f8fafc;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* Address Section Titles */
.address-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.address-section-title i {
  font-size: 0.85rem;
}

.ast-billto {
  background: rgba(10, 38, 71, 0.1);
  color: #1a4a7a;
}

.ast-shipto {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.ast-buyer {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* Address Divider */
.address-divider {
  width: 1px;
  background: var(--color-border);
}

/* Tip Box */
.tip-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(30, 77, 122, 0.1);
  color: #1e40af;
  border: 1px solid rgba(30, 77, 122, 0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  margin-top: 16px;
}

.tip-box i {
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.tip-box strong {
  font-weight: 600;
}

.tip-box em {
  font-style: italic;
  font-weight: 500;
}

/* Dark mode adjustments */
[data-theme="dark"] .order-num-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .ast-billto {
  background: rgba(10, 38, 71, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .ast-shipto {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .ast-buyer {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .address-divider {
  background: var(--color-border);
}

[data-theme="dark"] .tip-box {
  background: rgba(30, 77, 122, 0.2);
  color: #60a5fa;
  border-color: rgba(30, 77, 122, 0.3);
}

/* ════════════════════════════════════════════════════════
   MANAGE USERS PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* User Stat Cards */
.usr-stat-card {
  background: var(--color-surface) !important;
  border-radius: var(--page-radius);
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--page-shadow) !important;
  padding: 16px 18px;
  cursor: pointer;
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    border-color 0.16s;
  position: relative;
  overflow: hidden;
}

.usr-stat-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--card-color, var(--color-accent));
  opacity: 0.08;
  pointer-events: none;
}

.usr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--page-shadow-hover) !important;
}

.usr-stat-card.active-filter {
  box-shadow:
    0 0 0 2px var(--card-color, var(--color-accent)),
    var(--page-shadow-hover) !important;
  border-color: var(--card-color, var(--color-accent)) !important;
}

.usr-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.usr-stat-num {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.usr-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* User Table */
.usr-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.usr-table {
  background: var(--color-surface);
  margin: 0;
}

.usr-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 16px;
  white-space: nowrap;
}

.usr-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.usr-table tbody tr:hover {
  background: var(--color-surface-2);
}

/* User Cell */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.user-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.user-id {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: "Courier New", monospace;
}

/* Email Cell */
.email-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.email-cell i {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Role Pills */
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-pill i {
  font-size: 0.7rem;
}

.role-admin {
  background: rgba(10, 38, 71, 0.1);
  color: #1a4a7a;
}

.role-sales {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.role-account {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.role-default {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* Delete User Components */
.delete-user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface-2);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.delete-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b3a3a, #6b2a2a);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.delete-user-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.delete-user-meta {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Dark mode adjustments */
[data-theme="dark"] .usr-stat-card.active-filter {
  box-shadow:
    0 0 0 2px var(--card-color, var(--color-accent)),
    var(--page-shadow-hover) !important;
  border-color: var(--card-color, var(--color-accent)) !important;
}

[data-theme="dark"] .user-avatar {
  background: linear-gradient(135deg, #1a4a7a, #2e5a9a);
}

[data-theme="dark"] .role-admin {
  background: rgba(10, 38, 71, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .role-sales {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .role-account {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .role-default {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

[data-theme="dark"] .delete-user-avatar {
  background: linear-gradient(135deg, #a04444, #8b3a3a);
}

/* ════════════════════════════════════════════════════════
   INVOICE PREVIEW PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Form Hint */
.form-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Label Hint */
.label-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Input Prefix Group */
.input-prefix-group {
  display: flex;
  align-items: center;
  position: relative;
}

.input-prefix {
  position: absolute;
  left: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: "Courier New", monospace;
  z-index: 1;
  pointer-events: none;
}

.input-prefix-group input.price {
  padding-left: 24px;
  font-family: "Courier New", monospace;
  text-align: right;
}

/* Line Amount */
.line-amount {
  font-family: "Courier New", monospace;
  font-weight: 600;
  text-align: right;
  color: var(--color-text-primary);
}

/* Line Check Wrap */
.line-check-wrap {
  text-align: center;
}

.line-check {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

/* Bank Section Titles */
.bank-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bank-section-title i {
  font-size: 0.85rem;
}

.bank-primary-title {
  background: rgba(10, 38, 71, 0.1);
  color: #1a4a7a;
}

.bank-secondary-title {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* Totals Bar */
.totals-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0f4ff, #e8edf5);
  border-top: 1px solid var(--color-border);
  margin-top: 16px;
}

.totals-bar-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.totals-bar-value {
  font-family: "Courier New", monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent);
  min-width: 100px;
  text-align: right;
}

/* Dark mode adjustments */
[data-theme="dark"] .form-hint {
  color: var(--color-text-muted);
}

[data-theme="dark"] .label-hint {
  color: var(--color-text-muted);
}

[data-theme="dark"] .input-prefix {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .line-amount {
  color: var(--color-text-primary);
}

[data-theme="dark"] .bank-primary-title {
  background: rgba(10, 38, 71, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .bank-secondary-title {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .totals-bar {
  background: linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-3)
  );
}

/* ════════════════════════════════════════════════════════
   CREATE PURCHASE ORDER PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Section Divider */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
  opacity: 0.6;
}

/* Item Row */
.item-row {
  transition: background-color 0.15s;
}

.item-row:hover {
  background: var(--color-surface-2);
}

/* Item Total Input */
.item-row .total {
  font-family: "Courier New", monospace;
  font-weight: 600;
  text-align: right;
  color: var(--color-text-secondary);
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  cursor: not-allowed;
}

/* Dark mode adjustments */
[data-theme="dark"] .section-divider {
  border-color: var(--color-border);
}

[data-theme="dark"] .item-row .total {
  background: var(--color-surface-3) !important;
  color: var(--color-text-muted) !important;
}

/* ════════════════════════════════════════════════════════
   EDIT PURCHASE ORDER PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Revision Badges */
.rev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(10, 38, 71, 0.1);
  color: #f8fafc;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

.next-rev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* Currency Symbol */
.currency-symbol {
  font-family: "Courier New", monospace;
  font-weight: 600;
  color: #7dd3fc;
}

/* Row Index */
.row-index {
  text-align: center;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* Dark mode adjustments */
[data-theme="dark"] .rev-badge {
  background: rgba(10, 38, 71, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .next-rev-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .currency-symbol {
  color: var(--color-accent);
}

/* ════════════════════════════════════════════════════════
   PROFIT & LOSS PAGE STYLES
   ═══════════════════════════════════════════════════════ */

   /* ── SECTION LABEL ── */
.section-label {
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: #64748b; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: #f1f5f9; }

/* ── P&L STATEMENT ── */
 .pl-statement-card {
        background: var(--color-surface);
        border: var(--page-border);
        border-radius: var(--page-radius);
        box-shadow: var(--page-shadow);
        overflow: hidden;
        margin-bottom: 10px;
    }

    .pl-card-header {
        background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
        padding: 6px 12px;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .pl-header-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: rgba(16, 185, 129, .25);
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        color: #6ee7b7;
        padding: 10px;
    }

    .pl-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: -0.01em;
    }

    .pl-card-sub {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, .45);
        margin-top: 2px;
        margin-left: 10px;
    }

    .pl-card-body {
        padding: 24px;
    }

    .pl-section {
        margin-bottom: 20px;
        border-radius: 10px;
        border: 1px solid var(--color-border);
        overflow: hidden;
    }

    .pl-section-label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: #94a3b8;
        background: var(--color-surface-2);
        padding: 7px 14px;
        border-bottom: 1px solid var(--color-border);
    }

    .pl-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        font-size: 0.84rem;
        color: var(--color-text-primary);
        border-bottom: 1px solid var(--color-border);
    }

    .pl-line:last-child {
        border-bottom: none;
    }

    .pl-line.pl-subtotal {
        background: var(--color-surface-2);
        font-weight: 700;
        font-size: 0.86rem;
        color: var(--color-text-primary);
        border-top: 1px solid var(--color-border);
        padding: 12px 24px;
        margin: auto;
    }

    .pl-line.pl-other-expense {
        background: var(--color-surface-2)  ;
    }

    .pl-amount {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        font-size: .84rem;
        font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        letter-spacing: -0.02em;
    }

    .pl-amount.positive {
        color: #059669;
    }

    .pl-amount.negative {
        color: #dc2626;
    }

    .pl-other-tag {
        display: inline-block;
        padding: 1px 7px;
        background: #fef3c7;
        color: #92400e;
        border-radius: 20px;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .pl-delete-btn {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: #fee2e2;
        color: #dc2626;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        cursor: pointer;
        transition: all .15s;
        flex-shrink: 0;
    }

    .pl-delete-btn:hover {
        background: #fecaca;
        transform: scale(1.1);
    }

    /* ── NET RESULT ── */
    .pl-net {
        border-radius: 12px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: auto;
    }

    .pl-net-profit {
        background: linear-gradient(135deg, #2d6a4f, #1b4332);
    }

    .pl-net-loss {
        background: linear-gradient(135deg, #8b3a3a, #6b2a2a);
    }

    .pl-net-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pl-net-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .pl-net-profit .pl-net-icon {
        background: rgba(5, 150, 105, .15);
        color: #059669;
    }

    .pl-net-loss .pl-net-icon {
        background: rgba(220, 38, 38, .15);
        color: #dc2626;
    }

    .pl-net-label {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }

    .pl-net-profit .pl-net-label {
        color: #065f46;
    }

    .pl-net-loss .pl-net-label {
        color: #991b1b;
    }

    .pl-net-amount {
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-variant-numeric: tabular-nums;
    }

    .pl-net-profit .pl-net-amount {
        color: #059669;
    }

    .pl-net-loss .pl-net-amount {
        color: #dc2626;
    }

/* ── FILTER CARD ── */
.filter-card {
  background: #fff;
  border: var(--page-border);
  border-radius: var(--page-radius);
  box-shadow: var(--page-shadow);
  padding: 16px 16px;
  margin-bottom: 20px;
}

.filter-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.filter-input {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 9px !important;
  font-size: 0.84rem !important;
  height: 38px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.filter-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(30, 77, 122, 0.15) !important;
  outline: none !important;
}

.filter-btn {
  height: 38px;
  border-radius: 9px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
}

/* Breakdown Components */
.breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}

.breakdown-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
}

.breakdown-count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.breakdown-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.breakdown-table-scroll {
  max-height: 500px;
  overflow-y: auto;
}

.breakdown-table {
  background: var(--color-surface);
  margin: 0;
}

.breakdown-table thead th {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  border: none;
  padding: 12px 16px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.breakdown-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.breakdown-table tbody tr:hover {
  background: var(--color-surface-2);
}

/* Amount Badges */
.amount-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-weight: 600;
  font-size: 0.85rem;
}

.amount-blue {
  background: rgba(30, 77, 122, 0.1);
  color: #3b82f6;
}

.amount-red {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* Ref Badge Slate */
.ref-badge-slate {
  background: rgba(71, 85, 105, 0.1);
  color: #475569;
}

/* Dark mode adjustments */
[data-theme="dark"] .pl-statement-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .pl-card-header {
  background: linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-3)
  );
}

[data-theme="dark"] .pl-line.pl-subtotal {
  background: var(--color-surface-3);
}

[data-theme="dark"] .pl-line.pl-other-expense {
  background: rgba(10, 38, 71, 0.1);
}

[data-theme="dark"] .pl-other-tag {
  background: rgba(10, 38, 71, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .pl-delete-btn:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

[data-theme="dark"] .pl-net.pl-net-profit {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1),
    rgba(34, 197, 94, 0.05)
  );
}

[data-theme="dark"] .pl-net.pl-net-loss {
  background: linear-gradient(
    135deg,
    rgba(248, 113, 113, 0.1),
    rgba(248, 113, 113, 0.05)
  );
}

[data-theme="dark"] .filter-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .filter-input {
  background: var(--color-input-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .breakdown-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .breakdown-table thead th {
  background: var(--color-surface-2);
}

[data-theme="dark"] .amount-blue {
  background: rgba(30, 77, 122, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .amount-red {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

[data-theme="dark"] .ref-badge-slate {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* ════════════════════════════════════════════════════════
   INVOICE ADD PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Mode Toggle */
.mode-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.mode-toggle-wrap:hover {
  background: var(--color-surface-3);
  border-color: var(--color-accent);
}

.mode-toggle-wrap input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

.mode-toggle-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
}

.mode-toggle-label i {
  font-size: 0.85rem;
  color: var(--color-accent);
}

/* Input Add Group */
.input-add-group {
  display: flex;
  align-items: center;
  position: relative;
}

.input-add-group .form-control {
  border-radius: 8px 0 0 8px;
  border-right: none;
}

.input-add-group .add-inline-btn {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0 12px;
  height: 38px;
  border-radius: 0 8px 8px 0;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-add-group .add-inline-btn:hover {
  background: var(--color-accent);
  transform: scale(1.05);
}

/* Line Item */
.line-item {
  transition: background-color 0.15s;
}

.line-item:hover {
  background: var(--color-surface-2);
}

/* Remove Line Button */
.remove-line {
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: all 0.15s;
}

.remove-line:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* Dark mode adjustments */
[data-theme="dark"] .mode-toggle-wrap {
  background: var(--color-surface-3);
  border-color: var(--color-border);
}

[data-theme="dark"] .mode-toggle-wrap:hover {
  background: var(--color-surface-4);
  border-color: var(--color-accent);
}

[data-theme="dark"] .mode-toggle-label {
  color: var(--color-text-primary);
}

[data-theme="dark"] .mode-toggle-label i {
  color: var(--color-accent);
}

[data-theme="dark"] .input-add-group .add-inline-btn {
  background: var(--color-accent);
}

[data-theme="dark"] .input-add-group .add-inline-btn:hover {
  background: var(--color-accent-hover);
}

[data-theme="dark"] .line-item:hover {
  background: var(--color-surface-3);
}

[data-theme="dark"] .remove-line:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

/* ════════════════════════════════════════════════════════
   PROFILE PAGE STYLES
   ═══════════════════════════════════════════════════════ */

/* Profile Page Container */
.profile-page {
  min-height: 100vh;
  background: var(--color-background);
}

/* Profile Hero */
.profile-hero {
  background: linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-3)
  );
  border-bottom: 1px solid var(--color-border);
  padding: 32px 0;
}

.profile-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Avatar Ring */
.avatar-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a4a7a 0%, #0f3460 50%, #0a2647 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  font-family:
    "Inter",
    "SF Pro Display",
    -apple-system,
    sans-serif;
  box-shadow:
    0 8px 32px rgba(10, 38, 71, 0.4),
    0 4px 16px rgba(124, 58, 237, 0.3);
  border: 4px solid rgba(255, 255, 255, 0.15);
}

/* Hero Stats Row */
.hero-stats-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.hero-stat {
  text-align: center;
  min-width: 70px;
}

.hero-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a4a7a;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
}

.hero-stat-num--large {
  font-size: 1.15rem;
  font-weight: 600;
}

.hero-stat-label {
  font-size: 0.65rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
}

/* Profile Body */
.profile-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px;
}

/* Profile Alert */
.prof-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 500;
  animation: slideInDown 0.3s ease-out;
}

.prof-alert.success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.prof-alert.error {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Profile Card */
.prof-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.prof-card-header {
  padding: 20px 24px;
  background: linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-3)
  );
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 16px;
}

.prof-card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: white;
}

.prof-card-header-icon.profile-main {
  background: linear-gradient(135deg, #1e4d7a, #12294a);
}

.prof-card-header-icon.profile-edit {
  background: linear-gradient(135deg, #2e5a9a, #1a4a7a);
}

.prof-card-header-icon.profile-pass {
  background: linear-gradient(135deg, #c9953d, #a67a2e);
}

.prof-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.prof-card-body {
  padding: 24px;
}

.prof-card-body--compact {
  padding: 20px 24px;
}

/* Info Row */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

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

.info-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.info-row-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}

.info-row-value {
  font-size: 0.95rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Profile Form Elements */
.prof-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  display: block;
}

.prof-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  transition: all 0.15s;
}

.prof-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(10, 38, 71, 0.1);
}

/* Input with Toggle */
.input-with-toggle {
  position: relative;
}

.toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.toggle-pass:hover {
  color: var(--color-accent);
  background: rgba(10, 38, 71, 0.1);
}

/* Password Strength */
.strength-bar {
  width: 100%;
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  width: 0%;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.strength-label {
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
  font-weight: 500;
}

/* Buttons */
.btn-dark-solid {
  background: linear-gradient(
    135deg,
    var(--color-accent),
    var(--color-accent-hover)
  );
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-dark-solid:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-gold {
  background: linear-gradient(135deg, #c9953d, #a67a2e);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #a67a2e, #8b6520);
}

/* Animations */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

/* Dark mode adjustments */
[data-theme="dark"] .profile-hero {
  background: linear-gradient(
    135deg,
    var(--color-surface-3),
    var(--color-surface-4)
  );
}

[data-theme="dark"] .avatar-ring {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(26, 74, 122, 0.5),
    0 4px 16px rgba(124, 58, 237, 0.4);
}

[data-theme="dark"] .prof-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .prof-card-header {
  background: linear-gradient(
    135deg,
    var(--color-surface-3),
    var(--color-surface-4)
  );
}

[data-theme="dark"] .info-row-icon {
  background: var(--color-surface-3);
}

[data-theme="dark"] .prof-input {
  background: var(--color-input-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .strength-bar {
  background: var(--color-surface-3);
}

[data-theme="dark"] .toggle-pass:hover {
  background: rgba(10, 38, 71, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .profile-hero {
    padding: 24px 0;
  }

  .profile-body {
    padding: 20px 16px;
  }

  .hero-stats-row {
    gap: 16px;
  }

  .hero-stat {
    min-width: 60px;
  }

  .hero-stat-num {
    font-size: 1.2rem;
  }

  .avatar-ring {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
    border-width: 3px;
  }

  .hero-name {
    font-size: 1.4rem;
  }
}

/* ════════════════════════════════════════════════════════
   RFQ STAT CARDS
   ═══════════════════════════════════════════════════════ */

.rfq-stat-card {
  background: var(--color-surface);
  border-radius: var(--page-radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--page-shadow);
  padding: 16px 18px;
  cursor: pointer;
  transition:
    transform 0.16s,
    box-shadow 0.16s,
    border-color 0.16s;
  position: relative;
  overflow: hidden;
}

.rfq-stat-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--card-color, #1a4a7a);
  opacity: 0.08;
  pointer-events: none;
}

.rfq-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--page-shadow-hover);
}

.rfq-stat-card.active-filter {
  box-shadow:
    0 0 0 2px var(--card-color, #1a4a7a),
    var(--page-shadow-hover);
  border-color: var(--card-color, #1a4a7a);
}

[data-theme="dark"] .rfq-stat-icon {
  filter: brightness(0.5) saturate(0.8);
}

[data-theme="dark"] .rfq-stat-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .rfq-stat-card.active-filter {
  background: rgba(26, 74, 122, 0.1);
}

[data-theme="dark"] .rfq-stat-num {
  color: var(--color-text-primary) !important;
}

/* Dark mode overrides for inline colors in RFQ stat cards */
[data-theme="dark"]
  .rfq-stat-card[style*="--card-color:#1a4a7a"]
  .rfq-stat-num {
  color: #7aade8 !important;
}

[data-theme="dark"]
  .rfq-stat-card[style*="--card-color:#f59e0b"]
  .rfq-stat-num {
  color: #fbbf24 !important;
}

[data-theme="dark"]
  .rfq-stat-card[style*="--card-color:#0ea5e9"]
  .rfq-stat-num {
  color: #38bdf8 !important;
}

[data-theme="dark"]
  .rfq-stat-card[style*="--card-color:#10b981"]
  .rfq-stat-num {
  color: #34d399 !important;
}

[data-theme="dark"]
  .rfq-stat-card[style*="--card-color:#ef4444"]
  .rfq-stat-num {
  color: #f87171 !important;
}

[data-theme="dark"] .delete-rfq-avatar {
  background: linear-gradient(135deg, #6b2a2a, #4a1a1a);
}

[data-theme="dark"] .delete-rfq-chip {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.rfq-stat-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.rfq-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.rfq-stat-label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}

.rfq-stat-num {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════ */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

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

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: flex-start;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.p-1 {
  padding: 4px;
}

.p-2 {
  padding: 8px;
}

.p-3 {
  padding: 12px;
}

.p-4 {
  padding: 16px;
}

.m-1 {
  margin: 4px;
}

.m-2 {
  margin: 8px;
}

.m-3 {
  margin: 12px;
}

.m-4 {
  margin: 16px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 16px;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

/* ════════════════════════════════════════════════════════
   INTERACTIVE READABILITY SAFETY NET
   Ensures shared hover states keep readable foreground colors.
   ═══════════════════════════════════════════════════════ */
.page-action-btn.secondary:hover,
.action-item:hover,
.status-dropdown-option:hover,
.row-action-btn:hover:not(.delete),
.btn-cancel-modal:hover {
  color: var(--color-text-primary);
}

[data-theme="dark"] .page-action-btn.secondary:hover,
[data-theme="dark"] .action-item:hover,
[data-theme="dark"] .status-dropdown-option:hover,
[data-theme="dark"] .row-action-btn:hover:not(.delete),
[data-theme="dark"] .btn-cancel-modal:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border);
}

[data-theme="dark"] .action-item.action-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5 !important;
}

/* ════════════════════════════════════════════════════════
   DARK MODE DROPDOWN READABILITY SAFETY NET
   Keep native select popups and Bootstrap dropdowns on a
   dark surface with readable light text across all pages.
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
  background-color: #111827 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] select option:checked,
[data-theme="dark"] select option:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

[data-theme="dark"] select option:disabled {
  color: #94a3b8 !important;
}

[data-theme="dark"] .dropdown-menu:not(.nav-dropdown-menu) {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dropdown-menu:not(.nav-dropdown-menu) .dropdown-item {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dropdown-menu:not(.nav-dropdown-menu) .dropdown-item:hover,
[data-theme="dark"]
  .dropdown-menu:not(.nav-dropdown-menu)
  .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════
   PURCHASE ORDER VIEW READABILITY
   Scoped to modules/purchase_order_view.php only.
   ═══════════════════════════════════════════════════════ */
.po-view-page {
  color: var(--color-text-primary);
}

.po-view-page .letterhead-strip,
.po-view-page .info-card,
.po-view-page .lines-card,
.po-view-page .action-footer {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.po-view-page .letterhead-company-name,
.po-view-page .info-card-header-title,
.po-view-page .meta-table tr td:last-child,
.po-view-page .lines-table td,
.po-view-page .rev-table td {
  color: var(--color-text-primary) !important;
}

.po-view-page .letterhead-address,
.po-view-page .letterhead-contact,
.po-view-page .meta-table tr td:first-child,
.po-view-page .lines-table thead th,
.po-view-page .rev-table thead th,
.po-view-page .row-num-cell,
.po-view-page .action-footer-left,
.po-view-page .lines-card-title span {
  color: var(--color-text-secondary) !important;
}

.po-view-page .info-card-header,
.po-view-page .lines-table thead th,
.po-view-page .rev-table thead th {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
}

.po-view-page .lines-table tbody td,
.po-view-page .rev-table td {
  border-bottom-color: var(--color-border) !important;
}

.po-view-page .lines-table tbody tr:hover,
.po-view-page .rev-table tbody tr:hover {
  background: var(--color-surface-2) !important;
}

.po-view-page .num-cell,
.po-view-page .totals-bar-value {
  color: var(--color-text-primary) !important;
}

.po-view-page .letterhead-contact a,
.po-view-page .meta-table a {
  color: var(--color-accent) !important;
}

.po-view-page .po-num-badge {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.32) !important;
  color: #f8fafc !important;
}

.po-view-page .rev-badge {
  background: rgba(10, 38, 71, 0.12) !important;
  color: #f8fafc !important;
}

.po-view-page .note-box {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

.po-view-page .note-box strong {
  color: #78350f !important;
}

.po-view-page .action-btn.cancel {
  background: var(--color-surface-2) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .po-view-page .letterhead-strip,
[data-theme="dark"] .po-view-page .info-card,
[data-theme="dark"] .po-view-page .lines-card,
[data-theme="dark"] .po-view-page .action-footer {
  background: #0f172a !important;
}

[data-theme="dark"] .po-view-page .info-card-header,
[data-theme="dark"] .po-view-page .lines-table thead th,
[data-theme="dark"] .po-view-page .rev-table thead th {
  background: #111827 !important;
}

[data-theme="dark"] .po-view-page .po-num-badge {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: #fcd34d !important;
}

[data-theme="dark"] .po-view-page .rev-badge {
  background: rgba(129, 140, 248, 0.18) !important;
  color: #a3b8d0 !important;
}

[data-theme="dark"] .po-view-page .note-box {
  background: rgba(146, 64, 14, 0.18) !important;
  border-color: rgba(251, 191, 36, 0.26) !important;
  color: #fde68a !important;
}

[data-theme="dark"] .po-view-page .note-box strong {
  color: #fcd34d !important;
}

[data-theme="dark"] .po-view-page .action-btn.pdf {
  background: #1e293b !important;
  color: #fcd34d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Invoice preview form readability */
.invoice-preview-page .form-label {
  color: var(--color-text-secondary) !important;
}

.invoice-preview-page .form-label .label-hint,
.invoice-preview-page .form-hint {
  color: var(--color-text-muted) !important;
}

.invoice-preview-page .form-card-header-title,
.invoice-preview-page .letterhead-company-name {
  color: var(--color-text-primary) !important;
}

.invoice-preview-page .letterhead-address,
.invoice-preview-page .letterhead-contact {
  color: var(--color-text-secondary) !important;
}

/* Create purchase order form readability */
.create-po-page .form-label,
.create-po-page .modal-label {
  color: var(--color-text-secondary) !important;
}

.create-po-page .form-card-header-title,
.create-po-page .letterhead-company-name {
  color: var(--color-text-primary) !important;
}

.create-po-page .letterhead-address,
.create-po-page .letterhead-contact,
.create-po-page .action-footer-left {
  color: var(--color-text-secondary) !important;
  text-align: left;
}

/* RFQ edit form readability */
.rfq-edit-page .form-label {
  color: var(--color-text-secondary) !important;
}

.rfq-edit-page .form-card-header-title,
.rfq-edit-page .letterhead-company-name {
  color: var(--color-text-primary) !important;
}

.rfq-edit-page .letterhead-address,
.rfq-edit-page .letterhead-contact,
.rfq-edit-page .internal-field-hint,
.rfq-edit-page .row-num-cell {
  color: var(--color-text-secondary) !important;
}

/* Add RFQ form readability */
.add-rfq-page .form-label {
  color: var(--color-text-secondary) !important;
}

.add-rfq-page .form-card-header-title,
.add-rfq-page .letterhead-company-name {
  color: var(--color-text-primary) !important;
}

.add-rfq-page .letterhead-address,
.add-rfq-page .letterhead-contact,
.add-rfq-page .internal-field-hint,
.add-rfq-page .row-num-cell {
  color: var(--color-text-secondary) !important;
}

/* Shared numeric font cleanup */
.amount-badge,
.pl-amount,
.pl-net-amount,
.total-value,
.grand-total-value,
.totals-bar-value,
.line-amount,
.num-cell,
.price-cell,
.item-row .total,
.input-prefix,
.input-prefix-group input.price,
.line-input.price,
.line-input.total,
.currency-symbol,
.po-num-badge,
.order-num-badge,
.rfq-num-badge,
.rev-badge,
.next-rev-badge {
  font-family: "DM Sans", "Segoe UI", Arial, system-ui, sans-serif !important;
  font-variant-numeric: normal !important;
  font-feature-settings: normal !important;
  letter-spacing: 0 !important;
}

body {
  padding-bottom: 42px !important;
}
@media (max-width: 768px) {
  body {
    padding-bottom: 48px !important;
  }
}

/* Footer-Bar */
.tcs-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #0a1628 0%, #0a1628 35%, #12294a 100%);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.7);
}
[data-theme="light"] .tcs-footer {
  background: rgba(255, 255, 255, 0.92);
  border-top-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.12);
}

/* Layout */
.tcs-footer-inner {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 18px;
  font-size: 0.7rem;
}
@media (min-width: 992px) {
  .tcs-footer-inner {
    padding: 6px 28px;
  }
}

.tcs-footer-left,
.tcs-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Status */
.tcs-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
  animation: footerPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}
.tcs-status-text {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.7);
  white-space: nowrap;
}
[data-theme="light"] .tcs-status-text {
  color: #16a34a;
}

.tcs-footer-pill {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 3px 9px;
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.75);
}
[data-theme="light"] .tcs-footer-pill {
  background: #f9fafb;
  color: #6b7280;
}

/* Copy */
.tcs-footer-copy {
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.8);
  white-space: nowrap;
}
[data-theme="light"] .tcs-footer-copy {
  color: #6b7280;
}

/* Mobile tweaks */
@media (max-width: 576px) {
  .tcs-footer-inner {
    padding-inline: 12px;
  }
  .tcs-footer-copy {
    display: none;
  }
}

/* Pulse */
@keyframes footerPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {    
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}



        /* ── Login Page ── */


.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Dark background layers ── */
.bg-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
[data-theme="dark"] .bg-layer {
  display: block;
  background:
    radial-gradient(
      ellipse 80% 60% at 15% 10%,
      rgba(10, 38, 71, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 50% at 85% 85%,
      rgba(13, 148, 136, 0.12) 0%,
      transparent 55%
    ),
    linear-gradient(160deg, #0a1628 0%, #12294a 55%, #0a1628 100%);
}
.bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Orbs ── */
.orb {
  display: none;
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  animation: tcsFloat 9s ease-in-out infinite;
}
[data-theme="dark"] .orb {
  display: block;
}
.orb-1 {
  width: 380px;
  height: 380px;
  top: -100px;
  left: -100px;
  background: rgba(10, 38, 71, 0.1);
  animation-delay: 0s;
}
.orb-2 {
  width: 280px;
  height: 280px;
  bottom: -80px;
  right: -80px;
  background: rgba(13, 148, 136, 0.08);
  animation-delay: -4.5s;
}

/* ── Standalone theme toggle (top-right, login page only) ── */
.page-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  border-radius: 50%;
  background: var(--color-surface);
  border-color: var(--color-border) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
}
[data-theme="dark"] .page-theme-toggle {
  background: var(--color-surface);
}

/* ── Split container ── */
.login-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  min-height: 540px;
  display: flex;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin: 24px 16px;
  animation: tcsFadeUp 0.45s ease both;
}

/* ── Left panel ── */
.login-left {
  flex: 0 0 42%;
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 80% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 45%);
}

.left-deco {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.left-deco-1 {
  width: 220px;
  height: 220px;
  top: -70px;
  right: -70px;
}
.left-deco-2 {
  width: 140px;
  height: 140px;
  bottom: 60px;
  left: -40px;
}
.left-deco-3 {
  width: 80px;
  height: 80px;
  bottom: 20px;
  right: 30px;
  background: rgba(255, 255, 255, 0.05);
}

.left-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.brand-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.brand-title {
  font-size: 1.5rem;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.brand-tagline {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 36px;
}
.brand-sep {
  width: 36px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  margin-bottom: 30px;
}

.brand-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.brand-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  color: #fff;
  flex-shrink: 0;
}
.brand-feature-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}
.brand-feature-text strong {
  color: #fff;
  font-weight: 600;
  display: block;
  font-size: 0.83rem;
}
.brand-feature-text span {
  font-size: 0.74rem;
}
.brand-footer {
  margin-top: auto;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.03em;
}

/* ── Right panel ── */
.login-right {
  flex: 1;
  background: var(--color-surface);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 0.35s ease;
  backdrop-filter: blur(20px);
}

.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a4a7a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent-border);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
  width: fit-content;
}

.login-heading {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 5px;
  transition: color 0.3s;
}

.login-subheading {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
  transition: color 0.3s;
}

/* ── Field group ── */
.field-group {
  margin-bottom: 14px;
}
.field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  transition: color 0.3s;
}

/* ── Forgot + submit ── */
.form-row-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 22px;
}
.forgot-link {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.forgot-link:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.login-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(10, 38, 71, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-btn:hover {
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(10, 38, 71, 0.5);
}
.login-btn:active {
  transform: translateY(0);
}

/* ── Page footer ── */
.login-page-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  transition: color 0.3s;
}

/* ── Modal ── */
.modal-content {
  background: var(--color-modal-bg) !important;
  border: 1px solid var(--color-modal-border) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  border-bottom: 1px solid var(--color-modal-border) !important;
  background: var(--color-modal-header) !important;
  padding: 20px 24px !important;
}
.modal-title {
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
.modal-body {
  padding: 24px !important;
}
.modal-body p {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  margin-bottom: 16px;
}
.modal-footer {
  border-top: 1px solid var(--color-modal-border) !important;
  padding: 16px 24px !important;
  background: transparent !important;
}
.modal-submit {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 4px 14px rgba(10, 38, 71, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.modal-submit:hover {
  background: linear-gradient(135deg, #0f3460, #1a4a7a);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .login-container {
    flex-direction: column;
    max-width: 420px;
    margin: 0 12px;
    min-height: unset;
  }
  .login-left {
    flex: none;
    padding: 28px 24px;
  }
  .brand-feature,
  .brand-sep,
  .brand-footer,
  .left-deco {
    display: none;
  }
  .brand-logo {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
  }
  .brand-title {
    font-size: 1.4rem;
  }
  .brand-tagline {
    margin-bottom: 0;
  }
  .login-right {
    padding: 32px 24px;
  }
}

/* ════════════════════════════════════════════════════════
   VIEW INVOICE CSS - MERGED FROM view-invoice.css
   Scoped to body.invoice-view-page so other screens keep existing styles.
   ═══════════════════════════════════════════════════════ */
.invoice-view-page *,
.invoice-view-page *::before,
.invoice-view-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.invoice-view-page .inv-doc img {
  display: block;
}

/* ─── Tokens ─── */
.invoice-view-page {
  --navy: #0c1f3f;
  --navy2: #162d55;
  --steel: #2e4a7a;
  --gold: #c49a28;
  --red: #b83232;
  --blue: #1a56b0;
  --border: #d8dde8;
  --bg: #f4f6fa;
  --bg2: #eef1f7;
  --text: #111827;
  --sub: #6b7280;
  --white: #ffffff;
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
}

/* ─── Page shell ─── */
body.invoice-view-page {
  background: #cbd5e1;
  font-family: var(--font);
}

.invoice-view-page .inv-doc {
    page: invoice-view;
  max-width: 870px;
  margin: 36px auto 64px;
  background: var(--white);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  border-top: 5px solid var(--gold); /* ← gold accent stripe */
}

/* ═══════════════════════════════════════
   PRINT
═══════════════════════════════════════ */
@media print {
  body.invoice-view-page,
  body.invoice-view-page {
    background: #fff !important;
  }
  .invoice-view-page .no-print {
    display: none !important;
  }
  .invoice-view-page .pg-break {
    page-break-before: always;
    break-before: page;
  }
  .invoice-view-page .inv-doc {
    page: invoice-view;
    box-shadow: none;
    max-width: 100%;
    margin: 0;
    border-top: 5px solid var(--gold);
  }
  @page invoice-view {
    size: A4;
    margin: 0;
  }
}

/* ═══════════════════════════════════════
   UTILITY
═══════════════════════════════════════ */
.invoice-view-page .tbl {
  display: table;
  width: 100%;
}
.invoice-view-page .tbl-cell {
  display: table-cell;
  vertical-align: top;
}
.invoice-view-page .tbl-mid {
  display: table-cell;
  vertical-align: middle;
}
.invoice-view-page .txt-right {
  text-align: right;
}
.invoice-view-page .txt-center {
  text-align: center;
}

/* ═══════════════════════════════════════
   ── PAGE 1 ──
═══════════════════════════════════════ */

/* ── Topbar ── */
.invoice-view-page .p1-top {
  display: table;
  width: 100%;
  background: var(--navy);
  padding: 22px 36px;
}
.invoice-view-page .p1-top-l {
  display: table-cell;
  vertical-align: middle;
  width: 55%;
}
.invoice-view-page .p1-top-r {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.invoice-view-page .p1-top-l img {
  height: 52px;
  width: auto;
  margin-bottom: 8px;
}
.invoice-view-page .top-co-name {
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.invoice-view-page .top-co-addr {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  margin-top: 2px;
}

.invoice-view-page .top-inv-label {
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.invoice-view-page .top-inv-number {
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}
.invoice-view-page .top-inv-status {
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 2px;
}

/* ── Meta Strip ── */
.invoice-view-page .p1-meta {
  display: table;
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.invoice-view-page .p1-meta-cell {
  display: table-cell;
  vertical-align: top;
  padding: 16px 24px;
  border-right: 1px solid var(--border);
  width: 25%;
}
.invoice-view-page .p1-meta-cell:last-child {
  border-right: none;
}
.invoice-view-page .mc-lbl {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sub);
  margin-bottom: 5px;
}
.invoice-view-page .mc-val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.invoice-view-page .mc-val.accent {
  color: var(--blue);
}
.invoice-view-page .mc-val.pending {
  color: #d97706;
}
.invoice-view-page .mc-val.paid {
  color: #16a34a;
}

/* ── Divider with label ── */
.invoice-view-page .section-divider {
  display: table;
  width: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  padding: 5px 36px;
}
.invoice-view-page .sd-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--steel);
}

/* ── Address block ── */
.invoice-view-page .p1-addr {
  display: table;
  width: 100%;
  padding: 20px 36px;
  border-bottom: 1px solid var(--border);
}
.invoice-view-page .addr-col {
  display: table-cell;
  vertical-align: top;
  width: 50%;
}
.invoice-view-page .addr-col.right {
  padding-left: 32px;
  border-left: 1px solid var(--border);
}

.invoice-view-page .addr-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.invoice-view-page .addr-badge.ship {
  background: var(--steel);
}

.invoice-view-page .addr-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.invoice-view-page .addr-line {
  font-size: 12.5px;
  color: var(--sub);
  margin-bottom: 2px;
}
.invoice-view-page .addr-line i {
  color: var(--navy);
  margin-right: 5px;
  font-size: 11px;
}

/* ── Line items ── */
.invoice-view-page .p1-items {
  padding: 22px 36px 0;
}

.invoice-view-page .items-tbl {
  width: 100%;
  border-collapse: collapse;
}
.invoice-view-page .items-tbl thead tr {
  background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%);
}
.invoice-view-page .items-tbl thead th {
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 11px 14px;
  border: none;
  text-align: left;
}
.invoice-view-page .items-tbl thead th.tr {
  text-align: right;
}
.invoice-view-page .items-tbl thead th.tc {
  text-align: center;
}

.invoice-view-page .items-tbl tbody tr:nth-child(even) {
  background: var(--bg);
}
.invoice-view-page .items-tbl tbody tr:hover {
  background: #e8eef8;
}
.invoice-view-page .items-tbl tbody td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.invoice-view-page .items-tbl tbody td.tr {
  text-align: right;
}
.invoice-view-page .items-tbl tbody td.tc {
  text-align: center;
}
.invoice-view-page .items-tbl tbody td .prod-name {
  font-weight: 600;
  color: var(--text);
}
.invoice-view-page .items-tbl tbody td .prod-sub {
  font-size: 11px;
  color: var(--sub);
  margin-top: 1px;
}
.invoice-view-page .items-tbl tbody td .qty-badge {
  display: inline-block;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
}

/* ── Totals section ── */
.invoice-view-page .p1-totals {
  display: table;
  width: 100%;
  padding: 20px 36px 28px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.invoice-view-page .p1-totals-l {
  display: table-cell;
  vertical-align: top;
  width: 52%;
  padding-right: 20px;
}
.invoice-view-page .p1-totals-r {
  display: table-cell;
  vertical-align: top;
  width: 48%;
}

.invoice-view-page .payment-note {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.invoice-view-page .payment-note .pn-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
  margin-bottom: 7px;
}
.invoice-view-page .payment-note .pn-row {
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 3px;
}
.invoice-view-page .payment-note .pn-row strong {
  color: var(--text);
}

.invoice-view-page .tot-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.invoice-view-page .tot-row {
  display: table;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.invoice-view-page .tot-row:last-child {
  border-bottom: none;
}
.invoice-view-page .tot-row .tot-l {
  display: table-cell;
  padding: 9px 14px;
  color: var(--sub);
  font-size: 12.5px;
}
.invoice-view-page .tot-row .tot-r {
  display: table-cell;
  padding: 9px 14px;
  text-align: right;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
}
.invoice-view-page .tot-row.grand {
  background: var(--navy);
}
.invoice-view-page .tot-row.grand .tot-l {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  font-size: 13px;
}
.invoice-view-page .tot-row.grand .tot-r {
  color: var(--white);
  font-size: 16px;
  font-weight: 800;
}

/* ── Page 1 Footer ── */
.invoice-view-page .p1-foot {
  background: var(--navy);
  padding: 10px 36px;
  display: table;
  width: 100%;
}
.invoice-view-page .p1-foot-l {
  display: table-cell;
  vertical-align: middle;
}
.invoice-view-page .p1-foot-r {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.invoice-view-page .p1-foot-l span,
.invoice-view-page .p1-foot-r span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 10.5px;
}
.invoice-view-page .p1-foot-l span {
  color: rgba(255, 255, 255, 0.45);
}
.invoice-view-page .p1-foot-l span.sep {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.25);
}
.invoice-view-page .p1-foot-r .page-num {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

/* ── Action bar ── */
.invoice-view-page .action-bar {
  padding: 14px 36px;
  display: table;
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.invoice-view-page .action-bar-inner {
  display: table-cell;
  text-align: right;
}

/* ═══════════════════════════════════════
   ── PAGE 2 ──
═══════════════════════════════════════ */
.invoice-view-page .p2 {
  background: var(--white);
}

/* Banner */
.invoice-view-page .p2-banner {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  object-position: center;
}

/* Header */
.invoice-view-page .p2-hdr {
  background: var(--navy);
  padding: 22px 36px;
  display: table;
  width: 100%;
}
.invoice-view-page .p2-hdr-l {
  display: table-cell;
  vertical-align: middle;
  width: 65%;
}
.invoice-view-page .p2-hdr-r {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.invoice-view-page .p2-hdr-l img {
  height: 46px;
  width: auto;
  margin-bottom: 7px;
}
.invoice-view-page .p2-co-name {
  color: var(--white);
  font-size: 18px;
  font-weight: 800;
}
.invoice-view-page .p2-co-tag {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  margin-top: 2px;
}
.invoice-view-page .wosb-badge {
  display: inline-block;
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  padding: 6px 14px;
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Auth + POC */
.invoice-view-page .p2-poc {
  display: table;
  width: 100%;
  padding: 20px 36px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.invoice-view-page .p2-poc-l {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}
.invoice-view-page .p2-poc-r {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.invoice-view-page .auth-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.invoice-view-page .auth-sub {
  font-size: 11px;
  color: var(--sub);
  margin-top: 3px;
}
.invoice-view-page .auth-signid {
  font-size: 10.5px;
  color: var(--sub);
  margin-top: 2px;
}

.invoice-view-page .poc-card {
  display: inline-table;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.invoice-view-page .poc-img-td {
  display: table-cell;
  padding: 14px;
  vertical-align: middle;
}
.invoice-view-page .poc-img-td img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 3px;
}
.invoice-view-page .poc-info-td {
  display: table-cell;
  padding: 14px 16px 14px 0;
  vertical-align: middle;
}
.invoice-view-page .poc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.invoice-view-page .poc-role {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 7px;
}
.invoice-view-page .poc-l {
  font-size: 11.5px;
  color: var(--sub);
  margin-bottom: 2px;
}
.invoice-view-page .poc-l i {
  width: 14px;
  color: var(--navy);
}

/* Contact row */
.invoice-view-page .p2-contacts {
  display: table;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.invoice-view-page .p2-ct {
  display: table-cell;
  text-align: center;
  padding: 14px 12px;
  border-right: 1px solid var(--border);
  vertical-align: middle;
}
.invoice-view-page .p2-ct:last-child {
  border-right: none;
}
.invoice-view-page .ct-icon-wrap {
  width: 34px;
  height: 34px;
  background: var(--navy);
  border-radius: 50%;
  display: table;
  margin: 0 auto 6px;
}
.invoice-view-page .ct-icon-wrap i {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: var(--white);
  font-size: 13px;
}
.invoice-view-page .ct-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sub);
  margin-bottom: 2px;
}
.invoice-view-page .ct-value {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

/* Reg bar */
.invoice-view-page .p2-reg {
  background: var(--navy2);
  display: table;
  width: 100%;
  padding: 12px 24px;
}
.invoice-view-page .reg-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.invoice-view-page .reg-cell:last-child {
  border-right: none;
}
.invoice-view-page .reg-lbl {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  margin-bottom: 3px;
}
.invoice-view-page .reg-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}

/* Introduction */
.invoice-view-page .p2-intro {
  padding: 28px 36px 32px;
}

.invoice-view-page .intro-head {
  display: table;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 20px;
}
.invoice-view-page .ih-l {
  display: table-cell;
  vertical-align: middle;
}
.invoice-view-page .ih-r {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.invoice-view-page .ih-l h2 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--navy);
}
.invoice-view-page .ih-r img {
  height: 38px;
  width: auto;
}

.invoice-view-page .intro-lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 14px;
}
.invoice-view-page .intro-body {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.9;
}

/* Page 2 Footer */
.invoice-view-page .p2-foot {
  background: var(--navy);
  padding: 10px 36px;
  display: table;
  width: 100%;
}
.invoice-view-page .p2-foot span.light {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10.5px;
}
.invoice-view-page .p2-foot span.sep {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 7px;
}
.invoice-view-page .p2-foot span.hi {
  color: rgba(255, 255, 255, 0.85);
  font-size: 10.5px;
}
.invoice-view-page .p2-foot-r {
  display: table-cell;
  text-align: right;
}
.invoice-view-page .p2-foot-l {
  display: table-cell;
}
.invoice-view-page .p2-foot-r .pg {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
}

/* ════════════════════════════════════════════════════════
   PURCHASE ORDER PDF CSS - MERGED FROM purchase_order_pdf.css
   Scoped to body.purchase-pdf-page so regular CRM pages keep existing styles.
   ═══════════════════════════════════════════════════════ */
@page purchase-pdf-page {
    size: A4 portrait;
    margin: 18px 20px 58px;
}

* {
    box-sizing: border-box;
}

body.purchase-pdf-page {
    page: purchase-pdf-page;
    margin: 0;
    font-family: DejaVu Sans, Arial, sans-serif;
    font-size: 9px;
    line-height: 1.45;
    color: #1f2937;
    /* background: #f3f7fb; */
}

.purchase-pdf-page .watermark {
    position: fixed;
    top: 220px;
    left: 110px;
    width: 400px;
    opacity: 0.03;
    z-index: -1;
}

.purchase-pdf-page .doc-footer {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 10px;
    padding-top: 7px;
    border-top: 1px solid #d7e0ea;
    text-align: center;
    font-size: 7px;
    color: #94a3b8;
    background: transparent;
}

.purchase-pdf-page .doc-footer span {
    color: #0f2d4a;
    font-weight: 700;
}

.purchase-pdf-page .page-shell {
    padding: 0 0 55px;
}

/* HEADER */
.purchase-pdf-page .doc-header {
    margin-bottom: 12px;
    padding: 16px 18px 14px;
    background: linear-gradient(145deg, #0a1628 0%, #0f2d4a 50%, #1a4a7a 100%);
    border: 1px solid #d9e5f0;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.purchase-pdf-page .doc-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #0a2647 0%, #1a4a7a 55%, #2e5a9a 100%);
}

.purchase-pdf-page .hdr-tbl,
.purchase-pdf-page .reg-bar,
.purchase-pdf-page .po-details-grid,
.purchase-pdf-page .address-grid,
.purchase-pdf-page .order-details-wrapper,
.purchase-pdf-page .detail-table,
.purchase-pdf-page .signatures-wrapper,
.purchase-pdf-page .po-tbl {
    width: 100%;
    border-collapse: collapse;
}

.purchase-pdf-page .hdr-tbl td {
    vertical-align: top;
}

.purchase-pdf-page .logo-cell {
    width: 80px;
    padding-right: 12px;
}

.purchase-pdf-page .logo-cell img {
    width: 70px;
    height: auto;
}

.purchase-pdf-page .co-info {
    padding-top: 2px;
}

.purchase-pdf-page .co-name {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.purchase-pdf-page .co-sub {
    margin-top: 5px;
    font-size: 7.5px;
    color: #3e293b;
    line-height: 1.5;
}

.purchase-pdf-page .doc-type-cell {
    width: 300px;
    text-align: right;
}

.purchase-pdf-page .doc-type {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #4e293b;
    text-transform: uppercase;
}

.purchase-pdf-page .doc-identity {
    margin-top: 8px;
}

.purchase-pdf-page .doc-num-badge {
    display: inline-block;
    padding: 6px 10px;
    background: #dbeafe;
    color: #0f2d4a;
    font-size: 10px;
    font-weight: 900;
    border-radius: 4px;
}

.purchase-pdf-page .doc-num-rev {
    display: inline-block;
    margin-left: 5px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    border-radius: 4px;
}

.purchase-pdf-page .doc-contact {
    margin-top: 7px;
    font-size: 7.5px;
    color: #4e293b;
}

/* REG BAR */
.purchase-pdf-page .reg-bar {
    margin-top: 12px;
    border: 1px solid #d7e0ea;
    border-radius: 6px;
    overflow: hidden;
}

.purchase-pdf-page .reg-bar td {
    padding: 7px 8px;
    text-align: center;
    border-right: 1px solid #d7e0ea;
    background: #ffffff;
}

.purchase-pdf-page .reg-bar td:last-child {
    border-right: 0;
}

.purchase-pdf-page .rl {
    display: block;
    font-size: 6.5px;
    color: #2563eb;
    font-weight: 800;
    letter-spacing: .6px;
}

.purchase-pdf-page .rv {
    display: block;
    margin-top: 2px;
    color: #0f2d4a;
    font-size: 8px;
    font-weight: 800;
}

/* LEGAL NOTE */
.purchase-pdf-page .agree-note {
    margin-top: 11px;
    padding: 9px 11px;
    border-left: 4px solid #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 8px;
}

/* SECTION LABEL */
.purchase-pdf-page .sec-lbl {
    margin: 9px 0 7px;
    padding-bottom: 4px;
    border-bottom: 2px solid #1e3a8a;
    color: #0f2d4a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    position: relative;
}

.purchase-pdf-page .sec-lbl::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 34px;
    height: 2px;
    background: #2563eb;
}

/* BLOCKS */
.purchase-pdf-page .po-details-band,
.purchase-pdf-page .table-container,
.purchase-pdf-page .notes-box,
.purchase-pdf-page .terms-box {
    border: 1px solid #d7e0ea;
    background: #ffffff;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.purchase-pdf-page .po-detail-item {
    width: 25%;
    padding: 10px 11px;
    border-right: 1px solid #d7e0ea;
    border-bottom: 1px solid #d7e0ea;
    vertical-align: top;
    background: #f8fbff;
    border-left: 3px solid #2563eb;
}

.purchase-pdf-page .po-detail-item:last-child {
    border-right: 0;
}

.purchase-pdf-page .po-title-item {
    border-right: 0;
    border-bottom: 0;
    background: #ffffff;
    border-left: none;
}

.purchase-pdf-page .pd-label,
.purchase-pdf-page .detail-label {
    display: block;
    color: #6b7b8d;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.purchase-pdf-page .pd-value,
.purchase-pdf-page .detail-value {
    color: #0f2d4a;
    font-size: 9.2px;
    font-weight: 700;
}

/* STATUS */
.purchase-pdf-page .status-open,
.purchase-pdf-page .status-pending,
.purchase-pdf-page .status-confirmed,
.purchase-pdf-page .status-delivered,
.purchase-pdf-page .status-shipped,
.purchase-pdf-page .status-cancelled {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 8px;
}

.purchase-pdf-page .status-open { color: #0369a1; background: #e0f2fe; }
.purchase-pdf-page .status-pending { color: #92400e; background: #fef3c7; }
.purchase-pdf-page .status-confirmed { color: #065f46; background: #d1fae5; }
.purchase-pdf-page .status-delivered { color: #065f46; background: #d1fae5; }
.purchase-pdf-page .status-shipped {   color: #0a2647; background: #dce6f0; }
.purchase-pdf-page .status-cancelled { color: #991b1b; background: #fee2e2; }

/* ADDRESS */
.purchase-pdf-page .address-grid td,
.purchase-pdf-page .order-details-wrapper td,
.purchase-pdf-page .signatures-wrapper td {
    vertical-align: top;
}

.purchase-pdf-page .address-card {
    width: 33.33%;
    padding-right: 8px;
}

.purchase-pdf-page .address-card:last-child,
.purchase-pdf-page .barcode-card,
.purchase-pdf-page .signature-block:last-child {
    padding-right: 0;
}

.purchase-pdf-page .ibox,
.purchase-pdf-page .sig-card {
    min-height: 92px;
    padding: 11px 12px;
    border: 1px solid #d7e0ea;
    background: #ffffff;
    border-radius: 8px;
}

.purchase-pdf-page .ibox h6,
.purchase-pdf-page .sig-card h6 {
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d7e0ea;
    color: #2563eb;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.purchase-pdf-page .address-content strong {
    display: block;
    margin-bottom: 3px;
    color: #0f2d4a;
    font-size: 9px;
}

.purchase-pdf-page .address-content span {
    display: block;
}

.purchase-pdf-page .sub {
    color: #64748b;
}

.purchase-pdf-page .contact-info {
    color: #1d4ed8;
    font-weight: 700;
}

.purchase-pdf-page .reference-info {
    margin-top: 4px;
    padding: 4px 6px;
    border-left: 3px solid #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
}

.purchase-pdf-page .not-specified {
    color: #cbd5e1;
    font-style: italic;
}

/* ORDER DETAILS */
.purchase-pdf-page .order-details-card {
    width: 64%;
    padding-right: 8px;
}

.purchase-pdf-page .barcode-card {
    width: 36%;
}

.purchase-pdf-page .detail-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #eef2f7;
}

.purchase-pdf-page .detail-table tr:last-child td {
    border-bottom: 0;
}

.purchase-pdf-page .detail-label {
    width: 120px;
}

.purchase-pdf-page .barcode-box {
    text-align: center;
}

.purchase-pdf-page .barcode-wrapper img {
    width: 175px;
    height: auto;
    margin-top: 6px;
}

.purchase-pdf-page .barcode-lbl {
    margin-top: 6px;
    color: #0f2d4a;
    font-family: DejaVu Sans Mono, Courier, monospace;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

/* LINE ITEMS */
.purchase-pdf-page .po-tbl {
    font-size: 8.2px;
}

.purchase-pdf-page .po-tbl th {
    padding: 8px 6px;
    border-right: 1px solid #cfdbea;
    background: linear-gradient(145deg, #0a1628 0%, #0f2d4a 100%);
    color: #1e293b;
    font-size: 7.5px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.purchase-pdf-page .po-tbl th:last-child {
    border-right: 0;
}

.purchase-pdf-page .po-tbl td {
    padding: 8px 6px;
    border-right: 1px solid #e1e8f2;
    border-bottom: 1px solid #e1e8f2;
    vertical-align: top;
    background: #ffffff;
}

.purchase-pdf-page .po-tbl td:last-child {
    border-right: 0;
}

.purchase-pdf-page .po-tbl tr.ev td {
    background: #f8fbff;
}

.purchase-pdf-page .col-num { width: 4%; text-align: center; }
.purchase-pdf-page .col-desc { width: 34%; }
.purchase-pdf-page .col-mfg { width: 13%; }
.purchase-pdf-page .col-pn { width: 13%; }
.purchase-pdf-page .col-unit { width: 6%; text-align: center; }
.purchase-pdf-page .col-qty { width: 6%; text-align: center; }
.purchase-pdf-page .col-price { width: 12%; text-align: right; }
.purchase-pdf-page .col-total { width: 12%; text-align: right; }

.purchase-pdf-page .tc { text-align: center; }
.purchase-pdf-page .tr { text-align: right; }

.purchase-pdf-page .row-num { color: #94a3b8; font-weight: 800; }
.purchase-pdf-page .cell-desc { font-weight: 700; color: #0f2d4a; }
.purchase-pdf-page .cell-mfg,
.purchase-pdf-page .cell-pn,
.purchase-pdf-page .cell-unit { color: #64748b; }
.purchase-pdf-page .cell-pn { font-family: DejaVu Sans Mono, Courier, monospace; }
.purchase-pdf-page .cell-price { font-weight: 700; color: #334155; }
.purchase-pdf-page .cell-total { color: #1d4ed8; font-weight: 800; }

.purchase-pdf-page .qty-bx {
    display: inline-block;
    min-width: 24px;
    padding: 2px 5px;
    border: 1px solid #bfdbfe;
    background: #dbeafe;
    color: #1e3a8a;
    font-weight: 800;
    border-radius: 3px;
}

/* TOTAL ROW */
.purchase-pdf-page .total-row td {
    border-bottom: 0;
    background: #eff6ff;
    font-weight: 800;
}

.purchase-pdf-page .total-label {
    text-align: right;
    color: #1e3a8a;
    text-transform: uppercase;
    font-size: 7px;
    letter-spacing: .5px;
}

.purchase-pdf-page .total-value {
    color: #0f2d4a;
    text-align: right;
    font-size: 10px;
}

/* NOTES */
.purchase-pdf-page .section-notes {
    page-break-inside: avoid;
}

.purchase-pdf-page .notes-header,
.purchase-pdf-page .t-title {
    padding: 8px 10px;
    border-bottom: 1px solid #d7e0ea;
    background: #f8fbff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.purchase-pdf-page .notes-content,
.purchase-pdf-page .terms-list {
    padding: 10px 12px 14px;
    color: #475569;
    background: #ffffff;
}

/* SIGNATURES */
.purchase-pdf-page .signatures-wrapper {
    page-break-inside: avoid;
}

.purchase-pdf-page .signature-block {
    width: 50%;
    padding-right: 8px;
}

.purchase-pdf-page .signature-area {
    height: 78px;
    text-align: center;
    background: #f8fbff;
    border: 1px dashed #bfd3ea;
    border-radius: 6px;
}

.purchase-pdf-page .sig-img {
    max-width: 175px;
    max-height: 52px;
    margin-top: 6px;
}

.purchase-pdf-page .sig-placeholder {
    height: 46px;
    border-bottom: 1px dashed #bfd3ea;
}

.purchase-pdf-page .sig-line {
    padding-top: 7px;
    border-top: 1px solid #d7e0ea;
    text-align: center;
}

.purchase-pdf-page .sig-name {
    display: block;
    color: #0f2d4a;
    font-size: 9px;
    font-weight: 800;
}

.purchase-pdf-page .sig-role {
    display: block;
    color: #94a3b8;
    font-size: 8px;
}

.purchase-pdf-page .ack-text {
    margin-top: 7px;
    color: #64748b;
    font-size: 8px;
    text-align: center;
}

.purchase-pdf-page .vendor-line {
    margin-top: 18px;
    width: 100%;
}

.purchase-pdf-page .sig-ack-label,
.purchase-pdf-page .sig-ack-date {
    display: inline-block;
    width: 48%;
    padding-top: 6px;
    border-top: 1px solid #bfd3ea;
    color: #94a3b8;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
}

/* ABOUT & TERMS */
.purchase-pdf-page .about-header {
    margin-top: 14px;
    padding-bottom: 7px;
    border-bottom: 2px solid #1e3a8a;
    position: relative;
}

.purchase-pdf-page .about-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 34px;
    height: 2px;
    background: #2563eb;
}

.purchase-pdf-page .about-header h2 {
    color: #0f2d4a !important;
    font-size: 14px !important;
    text-transform: uppercase;
}

.purchase-pdf-page .about-content {
    margin: 9px 0 11px;
}

.purchase-pdf-page .intro-lead {
    margin: 0 0 5px;
    color: #0f2d4a;
    font-size: 9.5px;
    font-weight: 800;
}

.purchase-pdf-page .intro-body {
    margin: 0;
    color: #64748b;
    font-size: 8.4px;
}

.purchase-pdf-page .terms-box {
    page-break-inside: avoid;
}

.purchase-pdf-page .terms-list {
    margin: 0;
    padding-left: 25px;
    font-size: 7.8px;
    line-height: 1.55;
}

.purchase-pdf-page .terms-list li {
    margin-bottom: 4px;
    color: #475569;
}

.purchase-pdf-page .term-item strong {
    color: #0f2d4a;
}
/* ════════════════════════════════════════════════════════
   END PURCHASE ORDER PDF CSS
   ═══════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   DASHBOARD CSS - MERGED FROM dashboard.css
   Scoped to body.dashboard-page so other screens keep existing styles.
   ═══════════════════════════════════════════════════════ */
/* ── tokens ── */
.dashboard-page {
  --dash-r: 14px;
  --dash-r-sm: 10px;
  --dash-r-xs: 7px;
  --dash-gap: 20px;
  --dash-pad: 22px 18px;
  --dash-num-font: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --dash-trans: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --dash-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
  --dash-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-family: "DM Sans", system-ui, sans-serif;
}
[data-theme="dark"] .dashboard-page  {
  --dash-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.28);
  --dash-shadow-hover: 0 10px 36px rgba(0, 0, 0, 0.5);
}

/* Dashboard: use theme tokens in dark mode */
[data-theme="dark"] .dashboard-page .dw {
  background: var(--color-bg);
  color: var(--color-text-primary);
}
[data-theme="dark"] .dashboard-page .hstrip-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
[data-theme="dark"] .dashboard-page .hstrip-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
[data-theme="dark"] .dashboard-page .dc {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ── wrapper ── */
.dashboard-page .dw {
  padding: 20px 16px 72px;
  min-height: 100vh;
  background: #f8fafc;
}
@media (min-width: 768px) {
  .dashboard-page .dw {
    padding: 26px 24px 76px;
  }
}
@media (min-width: 1280px) {
  .dashboard-page .dw {
    padding: 32px 40px 82px;
  }
}

/* ══════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════ */
.dashboard-page .hero {
  position: relative;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
  box-shadow: none;
}
/* grid noise texture */
.dashboard-page .hero::before {
  content: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.dashboard-page .hero::after {
  content: none;
  position: absolute;
  width: 340px;
  height: 340px;
  top: -120px;
  right: -100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(26, 74, 122, 0.3) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.dashboard-page .hero-glow {
  display: none;
}
.dashboard-page .hero-top {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: var(--dash-r);
  padding: 22px 24px;
  margin-bottom: 20px;
  background: linear-gradient(145deg, #0a1628 0%, #1a3a6b 50%, #2e5a9a 100%);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.25);
}
.dashboard-page .hero-top::before,
.dashboard-page .hero-top::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.dashboard-page .hero-top::before {
  width: 150px;
  height: 150px;
  right: 80px;
  bottom: -60px;
  background: rgba(26, 74, 122, 0.06);
}
.dashboard-page .hero-top::after {
  width: 200px;
  height: 200px;
  top: -40px;
  right: -40px;
  background: rgba(30, 77, 122, 0.08);
}
.dashboard-page .hero-top > * {
  position: relative;
  z-index: 1;
}
.dashboard-page .hero-name {
  font-family: sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.dashboard-page .hero-name span {
  color: rgba(165, 180, 252, 0.85);
}
.dashboard-page .hero-sub {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 5px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dashboard-page .role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--role-bg);
  color: #fff;
}
.dashboard-page .hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .dashboard-page .hero-right {
    flex-direction: row;
    align-items: center;
  }
}

.dashboard-page .hero-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
}
.dashboard-page .hero-filters {
  display: flex;
  gap: 3px;
}
.dashboard-page .hf-btn {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: all 0.14s;
  white-space: nowrap;
}
.dashboard-page .hf-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.dashboard-page .hf-btn.on {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ── hero stat strip ── */
.dashboard-page .hero-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 0;
  border-top: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  background: transparent;
}
@media (max-width: 991.98px) {
  .dashboard-page .hero-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .dashboard-page .hero-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dashboard-page .hstrip-item {
  flex: 1;
  padding: 14px 16px;
  text-decoration: none;
  transition: all var(--dash-trans);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  position: relative;
  overflow: hidden;
  min-height: 78px;
}
.dashboard-page .hstrip-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-2px);
}
.dashboard-page .hstrip-num {
  font-family: var(--dash-num-font);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}
.dashboard-page .hstrip-lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 4px;
}
.dashboard-page .hstrip-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stat-color, #3b82f6);
  background: var(--stat-bg, rgba(30, 77, 122, 0.14));
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.15s;
}
[data-theme="dark"] .dashboard-page .hstrip-lbl {
  color: rgba(255, 255, 255, 0.6);
}

/* ══════════════════════════════════════════════════════
   ALERT BANNERS
══════════════════════════════════════════════════════ */
.dashboard-page .alert-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--dash-gap);
}
.dashboard-page .da {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--dash-r-sm);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid currentColor;
  box-shadow: var(--dash-shadow);
  animation: slideInAlert 0.25s ease both;
}
.dashboard-page .da.da-red {
  color: #ef4444;
  --da-cta-bg: #b91c1c;
  --da-cta-hover-bg: #991b1b;
}
.dashboard-page .da.da-amber {
  color: #f59e0b;
  --da-cta-bg: #92400e;
  --da-cta-hover-bg: #78350f;
}
.dashboard-page .da.da-blue {
  color: #3b82f6;
  --da-cta-bg: #1d4ed8;
  --da-cta-hover-bg: #1e40af;
}
[data-theme="light"] .dashboard-page .da.da-red {
  background: #fef2f2;
  border-color: #ef4444;
}
[data-theme="light"] .dashboard-page .da.da-amber {
  background: #fffbeb;
  border-color: #f59e0b;
}
[data-theme="light"] .dashboard-page .da.da-blue {
  background: #eff6ff;
  border-color: #3b82f6;
}
.dashboard-page .da-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  flex-shrink: 0;
}
.dashboard-page .da-ico i {
  color: #fff;
  font-size: 0.78rem;
}
.dashboard-page .da-body {
  flex: 1;
  color: var(--color-text-primary);
}
.dashboard-page .da-body strong {
  font-weight: 700;
  color: inherit;
}
.dashboard-page .da-cta {
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 0.71rem;
  font-weight: 700;
  background: var(--da-cta-bg, #1e293b);
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition:
    background 0.14s,
    transform 0.14s;
}
.dashboard-page .da-cta span {
  color: #fff;
  mix-blend-mode: normal;
}
.dashboard-page .da-cta:hover {
  background: var(--da-cta-hover-bg, #0f172a);
  color: #fff;
  transform: translateY(-1px);
}

@keyframes slideInAlert {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ══════════════════════════════════════════════════════
   CARD BASE
══════════════════════════════════════════════════════ */
.dashboard-page .dc {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--dash-r);
  box-shadow: var(--dash-shadow);
  overflow: visible;
  transition:
    transform var(--dash-trans),
    box-shadow var(--dash-trans),
    background 0.3s,
    border-color 0.3s;
}
.dashboard-page .dc.hov:hover {
  transform: translateY(-2px);
  box-shadow: var(--dash-shadow-hover);
}
.dashboard-page .dc-body {
  padding: 22px 20px;
}
@media (min-width: 768px) {
  .dashboard-page .dc-body {
    padding: 24px 22px;
  }
}

/* card header */
.dashboard-page .ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.dashboard-page .ct {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.dashboard-page .ct-bar {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dashboard-page .ct-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-family: "DM Sans", sans-serif;
}
.dashboard-page .c-link {
  font-size: 0.71rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid currentColor;
  text-decoration: none;
  opacity: 0.7;
  transition:
    opacity 0.14s,
    background 0.14s;
  white-space: nowrap;
}
.dashboard-page .c-link:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ══════════════════════════════════════════════════════
   KPI CARDS  (new design: left accent strip + icon row)
══════════════════════════════════════════════════════ */
.dashboard-page .kc {
  position: relative;
  overflow: hidden;
  padding: 22px 74px 18px 18px;
  min-height: 106px;
  text-decoration: none;
  display: block;
  color: inherit;
}
.dashboard-page .kc-strip {
  display: none;
}
.dashboard-page .kc-glow {
  display: none;
}
.dashboard-page .kc-row1 {
  position: absolute !important;
  top: 20px;
  right: 18px;
  display: block !important;
  margin: 0 !important;
}
.dashboard-page .kc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  flex-shrink: 0;
  background: var(--kc-bg, rgba(26, 74, 122, 0.12));
  color: var(--kc-color, #1a4a7a);
}
.dashboard-page .kc-badge {
  display: none !important;
}
.dashboard-page .kc-lbl {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 4px;
}
.dashboard-page .kc-num {
  font-family: var(--dash-num-font);
  font-size: clamp(1.35rem, 2.5vw, 1.55rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
  color: var(--kc-color, #1a4a7a);
  white-space: nowrap;
}
.dashboard-page .kc-num.sm {
  font-size: clamp(1.2rem, 2.2vw, 1.42rem);
}
.dashboard-page .kc-sub {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 4px;
}
.dashboard-page .kc-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  margin-top: 7px;
}

[data-theme="dark"] .dashboard-page .kc-lbl {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .dashboard-page .kc-sub {
  color: rgba(255, 255, 255, 0.38);
}

[data-theme="dark"] .dashboard-page .kc-icon {
  background: color-mix(in srgb, var(--kc-color, #818cf8) 18%, transparent);
}
.dashboard-page .kc-chip.up {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.dashboard-page .kc-chip.dn {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.dashboard-page .kc-chip.warn {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* ══════════════════════════════════════════════════════
   MINI STAT STRIP  (inline 2-col inside a card)
══════════════════════════════════════════════════════ */
.dashboard-page .mstat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dashboard-page .mstat {
  padding: 14px 14px 12px;
  border-radius: var(--dash-r-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--dash-trans);
}
.dashboard-page .mstat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dashboard-page .mstat-num {
  font-family: var(--dash-num-font);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
}
.dashboard-page .mstat-lbl {
  font-size: 0.62rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════════ */
.dashboard-page .pbar-wrap {
  margin-top: 12px;
}
.dashboard-page .pbar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dashboard-page .pbar-label {
  font-size: 0.74rem;
  color: var(--color-text-secondary);
}
.dashboard-page .pbar-pct {
  font-family: var(--dash-num-font);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
}
.dashboard-page .pbar-track {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.dashboard-page .pbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.dashboard-page .pbar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  animation: pbarShine 3s ease-in-out infinite;
}

@keyframes pbarShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
.dashboard-page .pbar-note {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 5px;
}

/* ══════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════ */
.dashboard-page .dt-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1px;
}
.dashboard-page .dt {
  width: 100%;
  font-size: 0.79rem;
  border-collapse: separate;
  border-spacing: 0;
}
.dashboard-page .dt thead th {
  font-size: 0.61rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: 8px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.dashboard-page .dt tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.dashboard-page .dt tbody tr:hover {
  background: rgba(26, 74, 122, 0.04);
}

[data-theme="dark"] .dashboard-page .dt tbody tr:hover {
  background: rgba(46, 90, 154, 0.08);
}
.dashboard-page .dt td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--color-text-primary);
}
.dashboard-page .dt tbody tr:last-child td {
  border-bottom: none;
}
.dashboard-page .td-cut {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-page .td-dim {
  color: var(--color-text-muted) !important;
  font-size: 0.73rem;
}

/* ref pill */
.dashboard-page .ref-p {
  display: inline-flex;
  font-size: 0.67rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

/* status badge */
.dashboard-page .sb {
  display: inline-flex;
  align-items: center;
  font-size: 0.63rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.dashboard-page .sb-ok {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.dashboard-page .sb-blue {
  background: rgba(30, 77, 122, 0.12);
  color: #2563eb;
}
.dashboard-page .sb-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.dashboard-page .sb-red {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.dashboard-page .sb-dim {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.dashboard-page .sb-sky {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

/* ══════════════════════════════════════════════════════
   TOP CUSTOMERS
══════════════════════════════════════════════════════ */
.dashboard-page .tcr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}
.dashboard-page .tcr:last-child {
  border-bottom: none;
}
.dashboard-page .tcr-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}
.dashboard-page .r1 {
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
}
.dashboard-page .r2 {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.dashboard-page .r3 {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}
.dashboard-page .rn {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.dashboard-page .tcr-name {
  flex: 1;
  min-width: 0;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.dashboard-page .tcr-name:hover {
  color: var(--color-accent-dark);
}
.dashboard-page .tcr-amt {
  font-size: 0.79rem;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
}
.dashboard-page .tcr-prog {
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.dashboard-page .tcr-prog-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #0a2647, #1a4a7a);
  transition: width 0.6s ease;
}

/* ══════════════════════════════════════════════════════
   BREAKDOWN BOXES
══════════════════════════════════════════════════════ */
.dashboard-page .bk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dashboard-page .bk-grid.cols3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 360px) {
  .dashboard-page .bk-grid.cols3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dashboard-page .bk {
  padding: 14px 10px;
  border-radius: var(--dash-r-sm);
  text-align: center;
  background: var(--bk-bg, var(--color-surface-2));
  border: 1px solid var(--color-border);
  transition: transform 0.15s;
}
.dashboard-page .bk:hover {
  transform: translateY(-2px);
}
.dashboard-page .bk-ico {
  font-size: 1.1rem;
  margin-bottom: 5px;
}
.dashboard-page .bk-num {
  font-family: var(--dash-num-font);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
}
.dashboard-page .bk-lbl {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════
   QUICK ACTIONS BAR
══════════════════════════════════════════════════════ */
.dashboard-page .qa-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--dash-gap);
}

@media (min-width: 768px) {
  .dashboard-page .qa-bar {
    gap: 10px;
  }
}
.dashboard-page .qa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--dash-r-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.16s;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
}
.dashboard-page .qa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events: none;
}
.dashboard-page .qa:hover {
  transform: translateY(-2px);
}
.dashboard-page .qa-indigo {
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  color: #fff !important;
  border-color: #2e5a9a;
  box-shadow: 0 4px 14px rgba(10, 38, 71, 0.28);
}
.dashboard-page .qa-indigo:hover {
  background: linear-gradient(135deg, #1a4a7a, #2e5a9a);
  box-shadow: 0 6px 20px rgba(10, 38, 71, 0.4);
}
.dashboard-page .qa-green {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff !important;
  border-color: #059669;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
}
.dashboard-page .qa-green:hover {
  background: linear-gradient(135deg, #047857, #036847);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
}
.dashboard-page .qa-ghost {
  background: var(--color-surface);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border);
}
.dashboard-page .qa-ghost:hover {
  border-color: #1a4a7a;
  color: #1a4a7a !important;
  box-shadow: 0 4px 12px rgba(26, 74, 122, 0.1);
}

/* ══════════════════════════════════════════════════════
   CHART WRAPPER
══════════════════════════════════════════════════════ */
.dashboard-page .chart-wrap {
  position: relative;
  height: 200px;
  margin-top: 4px;
}
.dashboard-page .chart-wrap.chart-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ══════════════════════════════════════════════════════
   SECTION LABEL (small uppercase divider)
══════════════════════════════════════════════════════ */
.dashboard-page .sec-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 24px 0 16px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

@media (min-width: 1200px) {
  .dashboard-page .row.g-3 {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .dashboard-page .hero {
    padding: 0;
  }

  .dashboard-page .hero-top {
    padding: 16px;
  }

  .dashboard-page .kc {
    min-height: 112px;
    padding: 18px 70px 16px 18px;
  }
}
.dashboard-page .sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ══════════════════════════════════════════════════════
   STAGGER ANIMATION
══════════════════════════════════════════════════════ */
.dashboard-page .anim-in {
  animation: fadeUpIn 0.35s ease both;
}
.dashboard-page .anim-in:nth-child(1) {
  animation-delay: 0.04s;
}
.dashboard-page .anim-in:nth-child(2) {
  animation-delay: 0.08s;
}
.dashboard-page .anim-in:nth-child(3) {
  animation-delay: 0.12s;
}
.dashboard-page .anim-in:nth-child(4) {
  animation-delay: 0.16s;
}
.dashboard-page .anim-in:nth-child(5) {
  animation-delay: 0.2s;
}
.dashboard-page .anim-in:nth-child(6) {
  animation-delay: 0.24s;
}
@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-page canvas {
  max-width: 100% !important;
}

.dashboard-page .dw .hstrip-num,
.dashboard-page .dw .kc-num,
.dashboard-page .dw .mstat-num,
.dashboard-page .dw .pbar-pct,
.dashboard-page .dw .bk-num,
.dashboard-page .dw .tcr-rank,
.dashboard-page .dw .tcr-amt,
.dashboard-page .dw .dt td,
.dashboard-page .dw .sb,
.dashboard-page .dw .ref-p,
.dashboard-page .dw .kc-sub,
.dashboard-page .dw .mstat-lbl {
  font-family: var(--dash-num-font) !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0 !important;
  font-variant-numeric: normal !important;
  font-feature-settings: normal !important;
  text-rendering: geometricPrecision;
  transform: none !important;
}
/* ════════════════════════════════════════════════════════
   END DASHBOARD CSS
   ═══════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   PREMIUM DASHBOARD REDESIGN (pr-* classes)
   Complete redesign - navy + gold corporate premium
   ═══════════════════════════════════════════════════════ */

.pr-dash {
  padding: 20px 16px 80px;
  min-height: 100vh;
  background: var(--color-bg);
  position: relative;
}

.pr-dash::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(201,149,61,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(26,74,122,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(15,52,96,.03) 0%, transparent 50%);
}

.pr-dash > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .pr-dash { padding: 24px 24px 80px; }
}
@media (min-width: 1280px) {
  .pr-dash { padding: 28px 32px 80px; }
}

/* ── Hero ── */
.pr-hero {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(145deg, #0a1628 0%, #0f2850 35%, #1a4a7a 70%, #2e5a9a 100%);
  padding: 24px 24px 20px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10,22,40,.45), 0 1px 0 rgba(255,255,255,.06) inset;
}

.pr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.pr-hero-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  top: -150px;
  right: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,149,61,.1) 0%, transparent 60%);
  pointer-events: none;
}

.pr-hero-glow-2 {
  position: absolute;
  width: 250px;
  height: 250px;
  bottom: -80px;
  left: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,90,154,.15) 0%, transparent 60%);
  pointer-events: none;
}

.pr-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.pr-hero-left {
  flex: 1;
}

.pr-hero-greeting {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: .85rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
  margin-bottom: 2px;
}

.pr-hero-name {
  display: block;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.pr-hero-name span {
  background: linear-gradient(135deg, #c9953d, #dfb66b, #e8c47a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(201,149,61,.3));
}

.pr-hero-line {
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, #c9953d, #dfb66b);
  border-radius: 2px;
  margin: 10px 0 12px;
  box-shadow: 0 0 16px rgba(201,149,61,.25);
}

.pr-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pr-hero-date {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  font-weight: 400;
}

.pr-hero-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  font-size: .67rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pr-hero-role i {
  font-size: .6rem;
  opacity: .6;
}

.pr-hero-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pr-hero-period {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}

.pr-hero-period-value {
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
}

.pr-hero-filters {
  display: flex;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 2px;
}

.pr-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: all .15s;
}

.pr-filter-btn.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.pr-filter-btn:hover:not(.active) {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
}

/* ── Stats Strip ── */
.pr-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 991px) {
  .pr-strip { grid-template-columns: repeat(2, 1fr); }
}

.pr-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  text-decoration: none;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.pr-strip-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 50%);
  pointer-events: none;
}

.pr-strip-item:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.06) inset;
}

.pr-strip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
  position: relative;
  transition: transform .2s;
}

.pr-strip-item:hover .pr-strip-icon {
  transform: scale(1.08);
}

.pr-strip-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.pr-strip-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pr-strip-value {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -.01em;
}

.pr-strip-label {
  font-size: .64rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* dark mode hero */
[data-theme="dark"] .pr-hero {
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
}

[data-theme="dark"] .pr-strip-item {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .pr-strip-item:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}

/* ── Section ── */
.pr-section {
  margin-bottom: 20px;
}

.pr-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.pr-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.pr-section-title::before {
  content: "";
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, #c9953d, #dfb66b);
  border-radius: 2px;
}

.pr-section-period {
  font-size: .62rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid var(--color-border);
}

/* ── Metric Card ── */
.pr-metric {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all .2s;
  overflow: hidden;
}

.pr-metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mc), transparent);
}

.pr-metric::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mc) 0%, transparent 70%);
  opacity: .08;
  pointer-events: none;
}

.pr-metric:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-md);
}

.pr-metric-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pr-metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  position: relative;
  overflow: hidden;
}

.pr-metric-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%);
  pointer-events: none;
}

.pr-metric-badge {
  padding: 2px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: .58rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pr-metric-label {
  font-size: .66rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.pr-metric-value {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: proportional-nums;
}

.pr-metric-value.sm {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
}

.pr-metric-sub {
  font-size: .72rem;
  color: var(--color-text-secondary);
  margin-top: 5px;
}

.pr-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 8px;
}

.pr-metric-chip.up { background: rgba(16,185,129,.1); color: #059669; }
.pr-metric-chip.dn { background: rgba(239,68,68,.1); color: #dc2626; }
.pr-metric-chip.warn { background: rgba(245,158,11,.1); color: #d97706; }

/* dark mode metric */
[data-theme="dark"] .pr-metric {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .pr-metric:hover {
  border-color: var(--color-accent-border);
}

/* ── Card ── */
.pr-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
  transition: all .2s;
  height: 100%;
}

.pr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 50%);
  pointer-events: none;
}

.pr-card:hover {
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-md);
}

.pr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px 0;
  gap: 12px;
}

.pr-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pr-card-title-bar {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.pr-card-action {
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pr-card-action:hover {
  color: var(--color-accent);
  gap: 6px;
}

.pr-card-body {
  padding: 14px 18px 18px;
}

/* ── Chart Area ── */
.pr-chart-wrap {
  height: 200px;
  position: relative;
  margin-top: 4px;
}
.pr-chart-wrap.loading {
  opacity: .55;
  pointer-events: none;
}

/* ── Alerts ── */
.pr-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.pr-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: all .2s;
}

.pr-alert:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pr-alert-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.pr-alert-body {
  flex: 1;
  font-size: .82rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.pr-alert-body strong {
  font-weight: 700;
}

.pr-alert-cta {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .18s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pr-alert-cta:hover {
  transform: translateY(-1px);
}

/* Alert variants */
.pr-alert-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}
.pr-alert-danger .pr-alert-icon {
  background: rgba(239,68,68,.12);
  color: #dc2626;
}
.pr-alert-danger .pr-alert-cta {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  box-shadow: 0 4px 12px rgba(220,38,38,.3);
}

.pr-alert-warning {
  border-color: rgba(245,158,11,.2);
  background: rgba(245,158,11,.06);
}
.pr-alert-warning .pr-alert-icon {
  background: rgba(245,158,11,.12);
  color: #d97706;
}
.pr-alert-warning .pr-alert-cta {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  box-shadow: 0 4px 12px rgba(217,119,6,.3);
}

.pr-alert-info {
  border-color: rgba(26,74,122,.18);
  background: rgba(26,74,122,.06);
}
.pr-alert-info .pr-alert-icon {
  background: rgba(26,74,122,.12);
  color: #1a4a7a;
}
.pr-alert-info .pr-alert-cta {
  background: linear-gradient(135deg, #1a4a7a, #0f3460);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15,52,96,.3);
}

/* ── Quick Actions ── */
.pr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .pr-actions { gap: 10px; }
}

.pr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .16s;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
}

.pr-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}

.pr-btn:hover { transform: translateY(-2px); }

.pr-btn-primary {
  background: linear-gradient(135deg, #0a2647, #1a4a7a);
  color: #fff !important;
  border-color: #2e5a9a;
  box-shadow: 0 4px 14px rgba(10,38,71,.28);
}
.pr-btn-primary:hover {
  background: linear-gradient(135deg, #1a4a7a, #2e5a9a);
  box-shadow: 0 6px 20px rgba(10,38,71,.4);
}

.pr-btn-success {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff !important;
  border-color: #059669;
  box-shadow: 0 4px 14px rgba(5,150,105,.28);
}
.pr-btn-success:hover {
  background: linear-gradient(135deg, #047857, #036847);
  box-shadow: 0 6px 20px rgba(5,150,105,.4);
}

.pr-btn-ghost {
  background: var(--color-surface);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border);
}
.pr-btn-ghost:hover {
  border-color: #1a4a7a;
  box-shadow: 0 4px 12px rgba(26,74,122,.1);
}

/* ── Progress ── */
.pr-progress {
  margin-top: 2px;
}

.pr-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pr-progress-label {
  font-size: .74rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.pr-progress-pct {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: proportional-nums;
}

.pr-progress-track {
  height: 7px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.pr-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
  position: relative;
}

.pr-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  animation: prShine 3s ease-in-out infinite;
}

@keyframes prShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.pr-progress-note {
  font-size: .7rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* ── Breakdown Grid ── */
.pr-bk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 360px) {
  .pr-bk-grid { grid-template-columns: repeat(2, 1fr); }
}

.pr-bk-item {
  padding: 14px 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--color-border);
  transition: all .15s;
  background: var(--color-surface);
}

.pr-bk-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.pr-bk-icon {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.pr-bk-value {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: proportional-nums;
}

.pr-bk-label {
  font-size: .6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  margin-top: 3px;
}

/* ── Mini Stats ── */
.pr-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pr-mini-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all .2s;
}

.pr-mini-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pr-mini-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: proportional-nums;
}

.pr-mini-label {
  font-size: .62rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px;
}

/* ── Table ── */
.pr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pr-table {
  width: 100%;
  font-size: .78rem;
  border-collapse: separate;
  border-spacing: 0;
}

.pr-table thead th {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: 8px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.pr-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}

.pr-table tbody tr:hover {
  background: rgba(26,74,122,.04);
}

[data-theme="dark"] .pr-table tbody tr:hover {
  background: rgba(46,90,154,.08);
}

.pr-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.pr-table tbody tr:last-child td {
  border-bottom: none;
}

.pr-table .td-dim {
  color: var(--color-text-muted) !important;
  font-size: .72rem;
}

.pr-table .td-cut {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ref pill */
.pr-ref {
  display: inline-flex;
  font-size: .66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

/* Status Badge */
.pr-badge {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.pr-badge-success { background: rgba(16,185,129,.12); color: #059669; }
.pr-badge-blue { background: rgba(30,77,122,.12); color: #2563eb; }
.pr-badge-warning { background: rgba(245,158,11,.12); color: #d97706; }
.pr-badge-danger { background: rgba(239,68,68,.12); color: #dc2626; }
.pr-badge-neutral { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.pr-badge-sky { background: rgba(14,165,233,.12); color: #0284c7; }

/* ── Rank List (Top Customers) ── */
.pr-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.pr-rank:last-of-type {
  border-bottom: none;
}

.pr-rank-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: .62rem;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-rank-num.r1 { background: rgba(201,149,61,.15); color: #c9953d; }
.pr-rank-num.r2 { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.pr-rank-num.r3 { background: rgba(249,115,22,.1); color: #ea580c; }
.pr-rank-num.rn { background: var(--color-surface-2); color: var(--color-text-muted); }

.pr-rank-name {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.pr-rank-name:hover { color: var(--color-accent-dark); }

.pr-rank-value {
  font-size: .78rem;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
}

.pr-rank-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.pr-rank-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #0a2647, #1a4a7a);
  transition: width .6s ease;
}

/* ── Empty State ── */
.pr-empty {
  text-align: center;
  padding: 20px 0;
}

.pr-empty-icon {
  font-size: 2.2rem;
  color: var(--color-border);
  display: block;
  margin-bottom: 8px;
}

.pr-empty-text {
  font-size: .76rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Animations ── */
.pr-fade-up {
  animation: prFadeUp .35s ease both;
}

.pr-fade-up:nth-child(1) { animation-delay: 0s; }
.pr-fade-up:nth-child(2) { animation-delay: .04s; }
.pr-fade-up:nth-child(3) { animation-delay: .08s; }
.pr-fade-up:nth-child(4) { animation-delay: .12s; }
.pr-fade-up:nth-child(5) { animation-delay: .16s; }
.pr-fade-up:nth-child(6) { animation-delay: .2s; }
.pr-fade-up:nth-child(7) { animation-delay: .24s; }
.pr-fade-up:nth-child(8) { animation-delay: .28s; }

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

/* ── Responsive ── */
@media (max-width: 575px) {
  .pr-hero { padding: 18px 16px 14px; }
  .pr-hero-top { flex-direction: column; gap: 14px; }
  .pr-hero-right { width: 100%; justify-content: space-between; }
  .pr-metric { padding: 14px; }
  .pr-card-head { flex-direction: column; align-items: flex-start; }
  .pr-card-body { padding: 12px 14px 14px; }
}

/* ── Invoice Amount ── */
.pr-inv-amount {
  font-weight: 600;
  font-size: .76rem;
}

/* ════════════════════════════════════════════════════════
   END OF UNIFIED CSS
   ═══════════════════════════════════════════════════════ */