/* =========================================================
   POP QUOTE - ULTRA-CLEAN, MODERN & EXECUTIVE APP DESIGN
   All-Device Friendly • Pixel-Perfect Alignment • Light/Dark
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root {
  /* Ultra-Clean Executive Light Palette (Default) */
  --bg-app: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #F1F5F9;
  --bg-surface-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-input: #F8FAFC;
  --bg-input-focus: #FFFFFF;

  /* Neutral Borders & Dividers */
  --border-subtle: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-strong: #94A3B8;
  --border-focus: #2563EB;

  /* High-Legibility Typography */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  /* Brand Accents (Navy, Cobalt Blue & Light Highlights) */
  --brand-primary: #0F172A;
  --brand-primary-hover: #1E293B;
  --brand-accent: #2563EB;
  --brand-accent-hover: #1D4ED8;
  --brand-accent-subtle: #EFF6FF;
  --gold-primary: #2563EB;
  --gold-light: #38BDF8;

  /* Functional Status Colors */
  --emerald-primary: #059669;
  --emerald-hover: #047857;
  --emerald-bg: #ECFDF5;
  --emerald-border: #A7F3D0;

  --amber-primary: #D97706;
  --amber-bg: #FFFBEB;
  --amber-border: #FDE68A;

  --rose-primary: #E11D48;
  --rose-hover: #BE123C;
  --rose-bg: #FFF1F2;
  --rose-border: #FECDD3;

  --blue-primary: #0284C7;
  --blue-bg: #F0F9FF;
  --blue-border: #BAE6FD;

  --indigo-primary: #4F46E5;
  --indigo-bg: #EEF2FF;
  --indigo-border: #C7D2FE;

  /* Geometry & Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Layered Shadows */
  --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-elevated: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

  /* Transitions */
  --trans-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-spring: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Dimensions */
  --sidebar-width: 220px;
  --header-height: 64px;
  --mobile-nav-height: 64px;
}

/* Deep Midnight Dark Theme Variables */
[data-theme="dark"] {
  --bg-app: #080C14;
  --bg-surface: #0F172A;
  --bg-surface-subtle: #1E293B;
  --bg-surface-elevated: #162036;
  --bg-card: #111C30;
  --bg-card-hover: #182744;
  --bg-input: #0B1220;
  --bg-input-focus: #111C30;

  --border-subtle: #1E293B;
  --border-medium: #334155;
  --border-strong: #475569;
  --border-focus: #38BDF8;

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0F172A;

  --brand-primary: #F8FAFC;
  --brand-primary-hover: #E2E8F0;
  --brand-accent: #38BDF8;
  --brand-accent-hover: #0EA5E9;
  --brand-accent-subtle: rgba(56, 189, 248, 0.12);
  --gold-primary: #38BDF8;
  --gold-light: #7DD3FC;

  --emerald-primary: #34D399;
  --emerald-hover: #10B981;
  --emerald-bg: rgba(52, 211, 153, 0.12);
  --emerald-border: rgba(52, 211, 153, 0.25);

  --amber-primary: #FBBF24;
  --amber-bg: rgba(251, 191, 36, 0.12);
  --amber-border: rgba(251, 191, 36, 0.25);

  --rose-primary: #FB7185;
  --rose-hover: #F43F5E;
  --rose-bg: rgba(251, 113, 133, 0.12);
  --rose-border: rgba(251, 113, 133, 0.25);

  --blue-primary: #38BDF8;
  --blue-bg: rgba(56, 189, 248, 0.12);
  --blue-border: rgba(56, 189, 248, 0.25);

  --indigo-primary: #818CF8;
  --indigo-bg: rgba(129, 140, 248, 0.12);
  --indigo-border: rgba(129, 140, 248, 0.25);

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 16px 36px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   GLOBAL RESET & TYPOGRAPHY
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 13px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--trans-fast);
}

/* Sleek Modern Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* =========================================================
   APP SHELL & LAYOUT ARCHITECTURE
   ========================================================= */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar Navigation (Executive Dark Bar) */
.sidebar {
  width: var(--sidebar-width);
  background: #0B1120;
  border-right: 1px solid #1E293B;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  transition: width var(--trans-normal), transform var(--trans-spring), box-shadow var(--trans-spring);
  color: #F8FAFC;
}

.sidebar-header {
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #1E293B;
  position: relative;
}

.brand-badge-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #2563EB, #0284C7);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.brand-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
}

.brand-name span {
  color: #38BDF8;
}

.brand-role {
  font-size: 0.7rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.sidebar-close-btn {
  display: none;
  color: #94A3B8;
  font-size: 1.25rem;
  padding: 4px;
  border-radius: var(--radius-xs);
}

.sidebar-close-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

/* Sidebar Nav Items */
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}

.nav-category-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  font-weight: 700;
  padding: 10px 8px 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 12px;
  border-radius: 8px;
  color: #94A3B8;
  font-weight: 600;
  font-size: 0.86rem;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 2px;
  user-select: none;
}

.nav-item:has(.nav-quick-add) {
  padding-right: 0;
}

.nav-item i {
  font-size: 1.18rem;
  color: #94A3B8;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.nav-item span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mouse Hover State for Non-Active Items: Matches User Screenshot */
.nav-item:hover:not(.active) {
  color: #FFFFFF;
  background: #202738;
  /* Dark slate-navy pill matching screenshot */
}

.nav-item:hover:not(.active) i {
  color: #FFFFFF;
}

/* Clicked / Selected Active State: BLUE with + icon */
.nav-item.active {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  /* Rich Blue */
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  font-weight: 700;
}

.nav-item.active:hover {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important;
  color: #FFFFFF !important;
}

.nav-item.active i {
  color: #FFFFFF !important;
}

.nav-item .badge-count {
  margin-left: auto;
  background: #1E293B;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-item.active .badge-count {
  background: #FFFFFF;
  color: #0F172A;
  border: none;
}

/* Nav Item Quick Add (+) Right End-Cap Button */
/* When not hovered and not active: NO plus icon */
.nav-quick-add {
  margin-left: auto;
  width: 38px;
  height: 40px;
  border: none;
  border-radius: 0 8px 8px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(4px);
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.nav-quick-add i {
  font-size: 1.15rem !important;
  color: inherit !important;
}

/* 1. When mouse hover (not active): Show + icon with shaded right partition like screenshot */
.nav-item:hover:not(.active) .nav-quick-add {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  background: rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  color: #94A3B8;
}

.nav-item:hover:not(.active) .nav-quick-add:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

/* 2. When clicked / active: Show + icon with blue tone partition */
.nav-item.active .nav-quick-add {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  background: rgba(0, 0, 0, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.nav-item.active .nav-quick-add:hover {
  background: rgba(0, 0, 0, 0.28) !important;
  color: #FFFFFF !important;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 10px 10px;
  border-top: 1px solid #1E293B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-mini-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: #1E293B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38BDF8;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.user-meta-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-meta-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #F8FAFC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta-status {
  font-size: 0.68rem;
  color: #34D399;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.user-meta-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #34D399;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
}

/* Sidebar Collapse Button */
.sidebar-collapse-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #1E293B;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: #334155;
}

/* Collapsed Sidebar State (Desktop) */
body.sidebar-collapsed {
  --sidebar-width: 72px;
}

body.sidebar-collapsed .brand-details,
body.sidebar-collapsed .nav-category-label,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-item .nav-quick-add,
body.sidebar-collapsed .nav-item .badge-count,
body.sidebar-collapsed .user-meta-info {
  display: none !important;
}

body.sidebar-collapsed .sidebar-header {
  padding: 18px 0;
  justify-content: center;
}

body.sidebar-collapsed .brand-badge-icon {
  margin: 0 auto;
}

body.sidebar-collapsed .sidebar-nav {
  padding: 16px 8px;
}

body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  width: 44px;
  height: 44px;
  margin: 0 auto 6px;
  gap: 0;
}

body.sidebar-collapsed .nav-item i {
  font-size: 1.25rem;
}

body.sidebar-collapsed .sidebar-footer {
  padding: 14px 6px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

body.sidebar-collapsed .user-mini-profile {
  justify-content: center;
  flex: none;
}

@media (max-width: 991px) {
  body.sidebar-collapsed {
    --sidebar-width: 0px !important;
  }
}

/* Mobile Sidebar Backdrop Overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans-normal);
}

.sidebar-backdrop.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Main Content Wrapper */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  transition: var(--trans-normal);
  background-color: var(--bg-app);
}

/* Top App Header */
.top-header {
  height: var(--header-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-menu-toggle {
  display: none;
  font-size: 1.35rem;
  color: var(--text-primary);
  padding: 8px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  align-items: center;
  justify-content: center;
}

.mobile-menu-toggle:hover {
  background: var(--border-subtle);
}

.page-breadcrumb {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-add-btn {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem !important;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  transition: all var(--trans-fast);
}

.header-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.header-theme-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--trans-fast);
}

.header-theme-toggle:hover {
  color: var(--brand-accent);
  background: var(--bg-surface-subtle);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

/* Content Body Container */
.content-body {
  padding: 24px 28px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.tab-view {
  display: none;
  animation: viewFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-view.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

/* =========================================================
   CORE BUTTONS & CHIPS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.86rem;
  transition: var(--trans-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--brand-accent);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: var(--brand-accent-hover);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn-secondary:hover {
  background: var(--bg-surface-subtle);
  border-color: var(--border-strong);
}

.btn-success {
  background: var(--emerald-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.btn-success:hover {
  background: var(--emerald-hover);
  transform: translateY(-1px);
}

.btn-outline-gold {
  background: var(--bg-surface);
  color: var(--brand-accent);
  border: 1px solid var(--blue-border);
}

.btn-outline-gold:hover {
  background: var(--brand-accent-subtle);
  border-color: var(--brand-accent);
}

.btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  border: 1px solid #20BD5A;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp:hover {
  background: #20BD5A;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 211, 102, 0.35);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.btn-icon:hover {
  color: var(--text-primary);
  background: var(--bg-surface-subtle);
  border-color: var(--border-medium);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.78rem;
  border-radius: var(--radius-xs);
}

/* =========================================================
   SURFACES & CARDS SYSTEM
   ========================================================= */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: var(--trans-fast);
}

.glass-card:hover {
  box-shadow: var(--shadow-elevated);
}

.section-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge-draft {
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge-sent {
  background: var(--blue-bg);
  color: var(--blue-primary);
  border: 1px solid var(--blue-border);
}

.badge-accepted {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
  border: 1px solid var(--emerald-border);
}

.badge-declined {
  background: var(--rose-bg);
  color: var(--rose-primary);
  border: 1px solid var(--rose-border);
}

/* Quick Status Changer Dropdown in Tables with Smart Icons */
.quote-status-pill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  border-radius: var(--radius-full);
  padding: 3px 8px 3px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
  transition: var(--trans-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.quote-status-pill-wrap:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.quote-status-pill-wrap.badge-status-draft {
  background-color: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border-color: var(--border-medium);
}

.quote-status-pill-wrap.badge-status-sent {
  background-color: var(--blue-bg);
  color: var(--blue-primary);
  border-color: var(--blue-border);
}

.quote-status-pill-wrap.badge-status-accepted {
  background-color: var(--emerald-bg);
  color: var(--emerald-primary);
  border-color: var(--emerald-border);
}

.quote-status-pill-wrap.badge-status-declined {
  background-color: var(--rose-bg);
  color: var(--rose-primary);
  border-color: var(--rose-border);
}

.status-smart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  flex-shrink: 0;
}

.quote-status-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  padding: 0 16px 0 0;
  margin: 0;
  line-height: 1.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 8px;
}

.quote-status-dropdown option {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 10px;
}

.badge-unit {
  background: var(--bg-surface-subtle);
  color: var(--brand-accent);
  font-weight: 800;
  border: 1px solid var(--border-medium);
  padding: 3px 10px;
  font-size: 0.75rem;
  border-radius: var(--radius-xs);
  letter-spacing: 0.03em;
}

.badge-category {
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge-payment-paid {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
  border: 1px solid var(--emerald-border);
}

.badge-payment-partial {
  background: var(--amber-bg);
  color: var(--amber-primary);
  border: 1px solid var(--amber-border);
}

.badge-payment-unpaid {
  background: var(--rose-bg);
  color: var(--rose-primary);
  border: 1px solid var(--rose-border);
}

/* =========================================================
   1. OVERVIEW & KPI DASHBOARD
   ========================================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.kpi-card {
  border-top: 3px solid var(--border-medium);
  padding: 18px 20px;
}

.kpi-card.kpi-gold {
  border-top-color: var(--brand-accent);
}

.kpi-card.kpi-emerald {
  border-top-color: var(--emerald-primary);
}

.kpi-card.kpi-rose {
  border-top-color: var(--rose-primary);
}

.kpi-card.kpi-blue {
  border-top-color: var(--blue-primary);
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-title {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.kpi-icon.gold {
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
}

.kpi-icon.emerald {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
}

.kpi-icon.rose {
  background: var(--rose-bg);
  color: var(--rose-primary);
}

.kpi-icon.blue {
  background: var(--blue-bg);
  color: var(--blue-primary);
}

.kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.1;
}

.kpi-subtitle {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

/* Quick Action Banner */
.quick-action-banner {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-subtle));
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  box-shadow: var(--shadow-card);
}

.banner-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--text-primary);
}

.banner-text p {
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}


/* Overview Date Filter Bar */
.overview-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

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

.overview-filter-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

/* Overview Stacked Section Cards */
.overview-section-card {
  margin-bottom: 0;
}

.section-title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}

.overview-section-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-weight: 500;
}

/* Pipeline Distribution Layout — full-width single column */
.pipeline-dist-grid {
  display: block;
}

.pipeline-legend {
  display: none;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-emerald {
  background: var(--emerald-primary);
}

.dot-blue {
  background: var(--blue-primary);
}

.dot-gold {
  background: var(--brand-accent);
}

.dot-rose {
  background: var(--rose-primary);
}

/* Overview Two-Column Grid (kept for compat, no longer used as main layout) */
.overview-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}


/* Financial Progress Breakdown */
.financial-bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fin-bar-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fin-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
}

.fin-bar-label .title {
  color: var(--text-secondary);
  font-weight: 500;
}

.fin-bar-label .amount {
  font-weight: 700;
  color: var(--text-primary);
}

.progress-track {
  height: 10px;
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.fill-emerald {
  background: var(--emerald-primary);
}

.fill-blue {
  background: var(--blue-primary);
}

.fill-gold {
  background: var(--brand-accent);
}

.fill-rose {
  background: var(--rose-primary);
}

/* Pipeline status pills (replace plain text labels in bars) */
.pipeline-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pill-emerald {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
  border: 1px solid var(--emerald-border);
}

.pill-blue {
  background: var(--blue-bg);
  color: var(--blue-primary);
  border: 1px solid var(--blue-border);
}

.pill-gold {
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  border: 1px solid #BFDBFE;
}

.pill-rose {
  background: var(--rose-bg);
  color: var(--rose-primary);
  border: 1px solid var(--rose-border);
}


/* Tables in Overview */
.data-table-container {
  overflow-x: auto;
}

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

.data-table th {
  padding: 11px 14px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
}

.data-table td {
  padding: 12px 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.data-table tr:hover td {
  background: var(--bg-surface-subtle);
}

.table-client-name {
  font-weight: 700;
  color: var(--text-primary);
}

.table-client-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* =========================================================
   2. FILTER TOOLBARS, SEARCH & VIEW SWITCHERS
   ========================================================= */
.filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* iOS Segmented Control Style Filter Pills */
.filter-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface-subtle);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.filter-pills::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: var(--trans-fast);
}

.filter-pill:hover {
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--bg-surface);
  color: var(--brand-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

/* Dropdown Filters in Toolbar */
.filter-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.filter-select-wrap i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
}

.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 8px 30px 8px 32px;
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  box-sizing: border-box;
  height: 38px;
  line-height: 1.2;
}

.filter-select:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-surface-subtle);
}

.filter-select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  background-color: var(--bg-surface);
}

.custom-date-range-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-subtle);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  animation: viewFadeIn 0.2s ease-out;
  height: 38px;
  box-sizing: border-box;
}

.filter-date-input {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  transition: var(--trans-fast);
  height: 28px;
  box-sizing: border-box;
}

.filter-date-input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.custom-date-sep {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.search-input-wrap {
  position: relative;
  flex: 1 1 180px;
  min-width: 130px;
  max-width: 280px;
}

.search-input-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
}

.search-input-wrap input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 8px 12px 8px 36px;
  color: var(--text-primary);
  font-size: 0.84rem;
  transition: var(--trans-fast);
  box-sizing: border-box;
  height: 38px;
}

.search-input-wrap input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  background: var(--bg-surface);
}

.toolbar-right-actions,
.toolbar-left-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.toolbar-right-actions .desktop-only-btn,
.toolbar-left-actions .desktop-only-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* View Mode Switcher */
.view-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}

.view-toggle-btn {
  width: 34px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--trans-fast);
}

.view-toggle-btn:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.05);
}

.view-toggle-btn.active {
  background: var(--bg-surface);
  color: var(--brand-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

/* =========================================================
   3. ITEM CARDS GRID (QUOTATIONS, RATES, CUSTOMERS, EXPENSES)
   ========================================================= */
.customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Pagination System */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-number-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--trans-fast);
}

.page-number-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.page-number-btn.active {
  background: var(--brand-accent);
  color: #FFFFFF;
  border-color: var(--brand-accent);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}

.quote-card,
.rate-item-card,
.customer-card,
.expense-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: var(--trans-fast);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}

.quote-card:hover,
.rate-item-card:hover,
.customer-card:hover,
.expense-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

.quote-card-top,
.rate-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.quote-number {
  font-family: monospace;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--brand-accent);
  background: var(--brand-accent-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--blue-border);
}

.quote-title,
.rate-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.quote-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.quote-amount-block {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.quote-amount-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.quote-amount-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
}

.quote-card-actions,
.rate-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin-top: 10px;
}

/* Rate Master Card Component (Matching Design Screenshot) */
.rate-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: var(--trans-fast);
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
}

.rate-item-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-card);
}

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

.rate-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.rate-card-badges .badge-category {
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}

.rate-card-badges .badge-unit {
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-block;
  text-transform: uppercase;
}

.rate-item-price-tag {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 8px 16px;
  text-align: right;
  flex-shrink: 0;
}

.rate-item-price-tag .amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-accent);
  line-height: 1.1;
}

.rate-item-price-tag .unit {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 3px;
}

.rate-item-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.38;
  margin: 0 0 12px 0;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.rate-item-title:hover {
  color: var(--brand-accent);
}

.rate-item-brands {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 18px;
  cursor: pointer;
}

.rate-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  border-top: none;
  padding-top: 0;
}

.rate-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-rate-action {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: var(--trans-fast);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.btn-view-specs {
  border: 1px solid var(--brand-accent);
  color: var(--brand-accent);
  background: var(--bg-surface);
}

.btn-view-specs:hover {
  background: var(--brand-accent);
  color: #FFFFFF;
}

.btn-edit-rate {
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
}

.btn-edit-rate:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-surface);
}

.btn-delete-rate {
  border: 1px solid var(--rose-border);
  color: var(--rose-primary);
  background: var(--bg-surface);
}

.btn-delete-rate:hover {
  background: var(--rose-primary);
  color: #FFFFFF;
  border-color: var(--rose-primary);
}

/* Customer & Expense Elements */
.customer-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.customer-company {
  font-size: 0.8rem;
  color: var(--brand-accent);
  font-weight: 600;
  margin-bottom: 10px;
}

.customer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.customer-contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.customer-contact-item i {
  color: var(--text-muted);
  width: 14px;
}

/* =========================================================
   LIST VIEW TABLES (PIXEL-PERFECT ALIGNMENT)
   ========================================================= */
.list-view-container {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
  contain: paint;
}

.list-view-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.list-view-table th {
  padding: 10px 14px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 var(--border-subtle);
}

.list-view-table th:first-child {
  border-top-left-radius: calc(var(--radius-md) - 1px);
}

.list-view-table th:last-child {
  border-top-right-radius: calc(var(--radius-md) - 1px);
}

.list-view-table td {
  padding: 11px 14px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.list-view-table tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--radius-md) - 1px);
}

.list-view-table tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--radius-md) - 1px);
}

.list-view-table th.col-actions,
.list-view-table td.col-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.list-view-table tr:last-child td {
  border-bottom: none;
}

.list-view-table tr:hover td {
  background: var(--bg-surface-subtle);
}

.list-view-table tr.empty-row:hover td {
  background: transparent;
}

.list-view-table .cell-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.3;
}

.list-view-table .cell-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.list-view-table .cell-amount {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 0.94rem;
  white-space: nowrap;
}

/* Multi-Select Table Checkboxes — Hidden by default */
.bulk-select-th,
.bulk-select-td {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

.table-checkbox {
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}



/* Row highlight when selected */
.row-selected {
  background-color: var(--brand-accent-subtle) !important;
}

/* Bulk action toolbar — hidden since checkboxes are removed */
.toolbar-bulk-btn-group {
  display: none !important;
}

@keyframes fadeInBulkGroup {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

.bulk-count-pill {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bulk-count-pill span {
  color: var(--rose-primary);
  font-weight: 800;
}

.toolbar-bulk-btn-group .btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   FRESH MODERN QUOTATIONS TABLE DESIGN
   ========================================================= */
.quote-modern-table td {
  padding: 13px 14px;
}

.quote-row-item {
  transition: background-color 0.18s ease;
}

/* Quote & Client Info Primary Stack */
.quote-info-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 3px 0;
}

.quote-header-tag-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quote-number-pill {
  font-family: 'Plus Jakarta Sans', monospace;
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 0 5px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
}

.quote-meta-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quote-meta-date i {
  font-size: 0.8rem;
  color: var(--brand-accent);
}

.quote-project-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-client-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quote-client-name-bold {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.quote-phone-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.quote-phone-chip i {
  color: var(--brand-accent);
  font-size: 0.72rem;
}

.quote-phone-chip:hover {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  background: var(--brand-accent-subtle);
}

.quote-client-phone-row {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.quote-client-phone-row i {
  color: var(--brand-accent);
  font-size: 0.82rem;
}

.quote-phone-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.quote-phone-link:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}

/* Dedicated Phone column styles */
.col-phone {
  white-space: nowrap;
  vertical-align: middle;
}

.col-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.col-phone-link i {
  font-size: 0.82rem;
  color: var(--brand-accent);
  flex-shrink: 0;
}

.col-phone-link span {
  letter-spacing: 0.01em;
}

.col-phone-link:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}

.col-phone-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.quote-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-wrap: wrap;
  margin-top: 1px;
}

.quote-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.quote-meta-sep {
  color: var(--border-medium);
  font-size: 0.8rem;
}

.quote-address-item {
  color: var(--text-muted);
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Payment Status Badge (Partial / Paid / Unpaid) */
.badge-pay-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.badge-pay-paid {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.badge-pay-partial {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.28);
}

.badge-pay-unpaid {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

/* Financials: Total & Due */
.quote-financials-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.quote-grand-val {
  font-weight: 800;
  font-size: 0.94rem;
  color: var(--text-primary);
}

.quote-due-val {
  font-size: 0.76rem;
  font-weight: 700;
}

.quote-due-val.due-pending {
  color: var(--rose-primary);
}

.quote-due-val.due-cleared {
  color: var(--emerald-primary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Desktop Single Options Button & Dropdown for Quotations */
.desktop-quote-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.mobile-quote-actions {
  display: none;
}

.quote-actions-dropdown {
  position: relative;
  display: inline-block;
}

.quote-options-btn {
  height: 32px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.15s ease;
  cursor: pointer;
}

.quote-options-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-medium);
  color: var(--brand-accent);
}

.quote-list-table-wrap {
  overflow: visible !important;
  contain: none !important;
}

.quote-row-item {
  position: relative;
  transition: background-color 0.18s ease;
}

.quote-row-item:hover,
.quote-row-item:focus-within {
  z-index: 2;
  position: relative;
}

/* Bring open dropdown row & container to front within table scope */
.quote-row-item.dropdown-active,
.quote-row-item:has(.quote-options-menu.show) {
  z-index: 30 !important;
  position: relative !important;
}

.quote-row-item.dropdown-active td,
.quote-row-item:has(.quote-options-menu.show) td {
  position: relative;
  z-index: 30 !important;
}

.quote-row-item.dropdown-active td.col-actions,
.quote-row-item td.col-actions:has(.quote-options-menu.show) {
  z-index: 35 !important;
  position: relative !important;
}

.quote-actions-dropdown.dropdown-active,
.quote-actions-dropdown:has(.quote-options-menu.show) {
  z-index: 40 !important;
  position: relative !important;
}

.quote-options-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 205px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60 !important;
  animation: dropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-options-menu.show {
  display: flex;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

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

.quote-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: all 0.12s ease;
}

.quote-menu-item i {
  font-size: 1rem;
  flex-shrink: 0;
}

.quote-menu-item:hover {
  background: var(--bg-surface-subtle);
  color: var(--brand-accent);
}

.quote-menu-item.item-danger {
  color: var(--rose-primary);
}

.quote-menu-item.item-danger:hover {
  background: rgba(244, 63, 94, 0.08);
  color: #E11D48;
}

.quote-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* Uniform Table & Card Action Buttons (32x32px) */
.table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.btn-action-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  flex-shrink: 0;
  padding: 0;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: var(--trans-fast);
  box-sizing: border-box;
}

.btn-action-icon:hover {
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.btn-action-icon.action-pay {
  color: var(--emerald-primary);
  background: var(--emerald-bg);
  border-color: var(--emerald-border);
}

.btn-action-icon.action-pay:hover {
  background: var(--emerald-primary);
  color: #FFFFFF;
  border-color: var(--emerald-primary);
}

.btn-action-icon.action-history {
  color: var(--blue-primary);
  background: var(--blue-bg);
  border-color: var(--blue-border);
}

.btn-action-icon.action-history:hover {
  background: var(--blue-primary);
  color: #FFFFFF;
  border-color: var(--blue-primary);
}

.btn-action-icon.action-print {
  color: var(--indigo-primary);
  background: var(--indigo-bg);
  border-color: var(--indigo-border);
}

.btn-action-icon.action-share {
  color: #059669;
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.btn-action-icon.action-share:hover {
  background: #059669;
  color: #FFFFFF;
  border-color: #059669;
}

.btn-action-icon.action-view {
  color: var(--blue-primary);
  background: var(--blue-bg);
  border-color: var(--blue-border);
}

.btn-action-icon.action-view:hover {
  background: var(--blue-primary);
  color: #FFFFFF;
  border-color: var(--blue-primary);
}

.btn-action-icon.action-edit {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

.btn-action-icon.action-edit:hover {
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn-action-icon.action-delete {
  color: var(--rose-primary);
}

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

/* =========================================================
   SHARE QUOTATION MODAL OPTIONS GRID
   ========================================================= */
.share-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .share-options-grid {
    grid-template-columns: 1fr;
  }
}

.share-option-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--trans-fast);
  box-shadow: var(--shadow-subtle);
}

.share-option-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.share-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.share-whatsapp .share-icon-wrap {
  background: #ECFDF5;
  color: #10B981;
}

.share-email .share-icon-wrap {
  background: #F0F9FF;
  color: #0284C7;
}

.share-print .share-icon-wrap {
  background: #EEF2FF;
  color: #4F46E5;
}

.share-download .share-icon-wrap {
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
}

.share-option-details {
  flex: 1;
  min-width: 0;
}

.share-option-details h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.share-option-details p {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.share-option-card .arrow-icon {
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: var(--trans-fast);
}

.share-option-card:hover .arrow-icon {
  color: var(--text-primary);
  transform: translateX(3px);
}

/* =========================================================
   4. QUOTATION BUILDER - FULL SCREEN EXECUTIVE INTERFACE
   ========================================================= */

#quoteBuilderModal.modal-overlay {
  left: var(--sidebar-width) !important;
  width: calc(100vw - var(--sidebar-width)) !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  background: var(--bg-body, #FAFAF9) !important;
  backdrop-filter: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  z-index: 1000 !important;
}

#quoteBuilderModal.modal-overlay.active {
  animation: qbFullScreenFadeIn 0.15s ease-out;
}

@keyframes qbFullScreenFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.qb-modal-dialog {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  background: var(--bg-body, #FAFAF9) !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

[data-theme="dark"] #quoteBuilderModal.modal-overlay {
  background: #0B0F19 !important;
}

[data-theme="dark"] .qb-modal-dialog {
  background: #0B0F19 !important;
  border-color: transparent !important;
}

.qb-modal-header {
  padding: 14px 32px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.qb-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qb-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.qb-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qb-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.qb-quote-num-pill {
  font-family: 'JetBrains Mono', monospace, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-accent);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.qb-modal-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.qb-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qb-status-pill-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-subtle);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.qb-status-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
}

.qb-status-select {
  background: transparent;
  border: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  padding-right: 4px;
  outline: none;
}

.qb-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qb-close-btn:hover {
  background: rgba(225, 29, 72, 0.08);
  color: var(--rose-primary);
  border-color: rgba(225, 29, 72, 0.2);
}

.qb-modal-body {
  padding: 0;
  flex: 1 1 auto;
  overflow: hidden !important;
  height: calc(100vh - 70px) !important;
  display: flex;
  flex-direction: column;
}

#quoteBuilderForm {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;
  overflow-x: hidden;
  width: 100%;
}

/* CARDS IN QUOTE BUILDER */
.qb-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.qb-card-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.qb-card-section-title span {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-card-section-title i {
  color: var(--brand-accent);
  font-size: 1rem;
}

/* FORM ELEMENTS */
.qb-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.qb-label .req {
  color: var(--rose-primary);
}

.qb-input,
.qb-textarea {
  background: var(--bg-body, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: var(--text-primary);
  width: 100%;
  transition: all 0.15s ease;
}

[data-theme="dark"] .qb-input,
[data-theme="dark"] .qb-textarea {
  background: #131B2E;
  border-color: rgba(255, 255, 255, 0.12);
}

.qb-input:focus,
.qb-textarea:focus {
  background: var(--bg-surface);
  border-color: var(--brand-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.qb-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-input-icon-wrap i {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.qb-input-icon-wrap input {
  padding-left: 36px;
}

/* GRIDS */
.qb-meta-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .qb-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .qb-col-title {
    grid-column: span 2;
  }
}

.qb-client-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 12px 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
}

.qb-client-divider span {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.qb-add-cust-btn {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: var(--brand-accent);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.qb-add-cust-btn:hover {
  background: var(--brand-accent);
  color: #fff;
}

.qb-client-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
}

.qb-col-cust-select {
  grid-column: span 1;
}

.qb-col-full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .qb-client-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* SCOPE BREAKDOWN HEADER */
.qb-scope-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 12px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.qb-section-main-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.qb-section-main-heading i {
  color: var(--brand-accent);
}

.qb-section-main-sub {
  margin: 2px 0 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.qb-add-room-btn {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
}

/* ROOM / SECTION CARD */
.quote-section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s ease;
}

.quote-section-card:hover {
  border-color: var(--border-medium);
}

.quote-section-header {
  padding: 12px 18px;
  background: var(--bg-surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.qb-section-badge {
  background: #0F172A;
  color: #F8FAFC;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

[data-theme="dark"] .qb-section-badge {
  background: var(--brand-accent);
  color: #fff;
}

.section-name-input {
  font-size: 1rem;
  font-weight: 800;
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text-primary);
  flex: 1;
  min-width: 180px;
  transition: all 0.15s ease;
}

.section-name-input:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border-subtle);
}

.section-name-input:focus {
  background: var(--bg-surface);
  border-color: var(--brand-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* =========================================================
   UNIVERSAL NUMBER INPUT: REMOVE UP/DOWN STEPPER ARROWS
   ========================================================= */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* SECTION BADGE PILL */
.qb-sec-badge-pill {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* =========================================================
   REDESIGNED QUOTE BUILDER: TWO-TIER ITEM CARD
   1) PRODUCT / ITEM TITLE & DESCRIPTION FIRST
   2) UNDER THAT: UNIT, QTY/DIMENSIONS, RATE, DISC %, AMOUNT
   ========================================================= */
.qb-section-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.qb-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
  position: relative;
}

.qb-item-card:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .qb-item-card {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .qb-item-card:hover {
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* TIER 1: PRODUCT / ITEM TITLE & DESCRIPTION */
.qb-item-top-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.qb-item-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.qb-item-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.qb-item-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-surface-subtle, #f1f5f9);
  color: var(--text-muted, #64748b);
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid var(--border-subtle, #e2e8f0);
  flex-shrink: 0;
}

[data-theme="dark"] .qb-item-num-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

.qb-item-thumb-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1.5px dashed var(--border-subtle, #cbd5e1);
  background: var(--bg-surface-subtle, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.qb-item-thumb-box:hover {
  border-color: var(--brand-accent, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.qb-item-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qb-item-thumb-empty {
  color: var(--text-muted, #94a3b8);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qb-item-title-container {
  flex: 1;
  min-width: 0;
}

.qb-item-card .item-title-field {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border-subtle, #cbd5e1);
  background: var(--bg-surface);
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.qb-item-card .item-title-field:focus {
  border-color: var(--brand-accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

.qb-item-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qb-photo-clear-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.qb-photo-clear-btn:hover {
  border-color: var(--rose-primary, #f43f5e);
  color: var(--rose-primary, #f43f5e);
  background: rgba(244, 63, 94, 0.05);
}

.qb-item-remove-btn {
  color: var(--rose-primary, #f43f5e) !important;
  background: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.qb-item-remove-btn:hover {
  background: rgba(244, 63, 94, 0.2) !important;
  transform: scale(1.04);
}

/* Description / Specs & Recommended Brands */
.qb-item-details-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

@media (max-width: 900px) {
  .qb-item-details-row {
    grid-template-columns: 1fr;
  }
}

.qb-item-specs-box,
.qb-item-brands-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qb-sub-field-label {
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 5px;
}

.qb-item-card .item-specs-field,
.qb-item-card .item-brands-field {
  font-size: 0.84rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, #cbd5e1);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 54px;
  resize: vertical;
  line-height: 1.45;
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.qb-item-card .item-specs-field:focus,
.qb-item-card .item-brands-field:focus {
  border-color: var(--brand-accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

/* TIER 2: UNDER THAT - UNIT, QTY/DIMENSIONS, RATE, DISC %, AMOUNT */
.qb-item-bottom-bar {
  display: grid;
  grid-template-columns: 115px minmax(230px, 1.4fr) 130px 105px minmax(130px, 0.9fr);
  gap: 12px;
  align-items: flex-end;
  background: var(--bg-surface-subtle, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  padding: 10px 14px;
}

[data-theme="dark"] .qb-item-bottom-bar {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 960px) {
  .qb-item-bottom-bar {
    grid-template-columns: 1fr 1fr;
  }

  .qb-col-qty {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .qb-item-bottom-bar {
    grid-template-columns: 1fr;
  }
}

.qb-col-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qb-field-mini-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
}

.qb-field-mini-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.qb-append-dim-link {
  background: none;
  border: none;
  color: var(--brand-accent, #2563eb);
  font-size: 0.69rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: opacity 0.15s ease;
}

.qb-append-dim-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.qb-input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.qb-symbol-prefix {
  position: absolute;
  left: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  pointer-events: none;
  user-select: none;
}

.qb-symbol-suffix {
  position: absolute;
  right: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  pointer-events: none;
  user-select: none;
}

.qb-rate-input {
  padding-left: 24px !important;
  text-align: right !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum";
  height: 38px !important;
  border-radius: 7px !important;
  border: 1.5px solid var(--border-subtle, #cbd5e1) !important;
  box-sizing: border-box !important;
}

.qb-disc-input {
  padding-right: 24px !important;
  text-align: right !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum";
  height: 38px !important;
  border-radius: 7px !important;
  border: 1.5px solid var(--border-subtle, #cbd5e1) !important;
  box-sizing: border-box !important;
}

.qb-unit-select {
  height: 38px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  text-align: center !important;
  border: 1.5px solid var(--border-subtle, #cbd5e1) !important;
  box-sizing: border-box !important;
}

.qb-qty-input {
  height: 38px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  border: 1.5px solid var(--border-subtle, #cbd5e1) !important;
  box-sizing: border-box !important;
}

.qb-metric-amount-val {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.05rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--brand-accent, #2563eb);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  white-space: nowrap;
}

/* EMPTY STATE FOR SECTION */
.qb-section-empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
}

.qb-section-empty-state i {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: 6px;
  display: block;
}

.qb-section-empty-state p {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}

/* ADD ROOM BANNER */
.qb-add-room-banner {
  border: 2px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  transition: all 0.15s ease;
  background: rgba(0, 0, 0, 0.01);
}

.qb-add-room-banner:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
  background: rgba(37, 99, 235, 0.04);
}

/* BOTTOM SUMMARY & TOTALS */
.qb-bottom-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 440px);
  gap: 20px;
  margin-top: 20px;
}

/* =========================================================
   NEW QUOTE REDESIGN - DOCUMENT-STYLE LAYOUT
   ========================================================= */

.qb-doc-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 110px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================================================
   MODERN QUOTATION BUILDER REDESIGN (Screenshot Matching)
   ========================================================= */

/* Generic Card Container */
.qb-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-medium, #e2e8f0);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

/* Card Header */
.qb-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.qb-card-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qb-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.qb-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 3px 0;
  letter-spacing: -0.01em;
}

.qb-card-subtitle {
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.qb-card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Outline Buttons in Headers */
.qb-btn-outline-primary {
  height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid #bfdbfe;
  border-radius: 8px;
  color: #2563eb;
  font-size: 0.86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.qb-btn-outline-primary:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.qb-btn-outline-secondary {
  height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  color: var(--text-secondary, #475569);
  font-size: 0.86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.qb-btn-outline-secondary:hover {
  background: var(--bg-surface-subtle, #f8fafc);
  border-color: var(--border-strong, #94a3b8);
  color: var(--text-primary);
}

.qb-kebab-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--border-medium, #e2e8f0);
  background: transparent;
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qb-kebab-btn:hover {
  background: var(--bg-surface-subtle, #f8fafc);
  color: var(--text-primary);
}

/* =========================================================
   CARD 1: METADATA GRID (2 rows x 3 cols)
   ========================================================= */
.qb-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}

.qb-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.qb-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #334155);
  margin: 0;
}

.qb-required-star {
  color: #ef4444;
  font-weight: 700;
}

.qb-input-icon-box {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: var(--bg-surface, #ffffff);
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  width: 100%;
}

.qb-input-icon-box:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.qb-input-left-icon {
  color: #94a3b8;
  font-size: 1.15rem;
  margin-right: 10px;
  flex-shrink: 0;
}

.qb-inner-text-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 0.88rem;
  color: var(--text-primary);
  font-family: inherit;
  padding: 0;
}

.qb-input-append-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.qb-modern-input {
  height: 42px;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: var(--bg-surface, #ffffff);
  font-size: 0.88rem;
  padding: 0 12px;
  color: var(--text-primary);
  width: 100%;
}

.qb-modern-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.qb-append-icon-btn {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: var(--bg-surface, #ffffff);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.qb-append-icon-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

/* Customer Picker Box within Icon Box */
.qb-cust-picker-wrapper {
  position: relative;
  width: 100%;
}

.qb-cust-input-box {
  cursor: pointer;
  user-select: none;
}

.qb-cust-selected-placeholder {
  color: #94a3b8;
  font-size: 0.88rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-cust-box-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.qb-cust-clear-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.qb-cust-clear-btn:hover {
  color: #e11d48;
}

.qb-cust-view-profile-btn {
  height: 28px;
  padding: 0 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.qb-cust-chevron {
  color: #94a3b8;
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

/* Dropdown Menu Overlay */
.qb-cust-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 360px;
  background: var(--bg-surface, #ffffff);
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  z-index: 1080;
  overflow: hidden;
}

.qb-cust-search-container {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  background: var(--bg-surface-subtle, #f8fafc);
}

.qb-cust-search-icon {
  color: #94a3b8;
  font-size: 1.1rem;
  margin-right: 8px;
}

.qb-cust-search-field {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  outline: none;
  color: var(--text-primary);
}

.qb-cust-options-list {
  max-height: 250px;
  overflow-y: auto;
}

.qb-cust-opt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-subtle, #f8fafc);
}

.qb-cust-opt-item:hover {
  background: #f1f5f9;
}

.qb-cust-opt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qb-cust-opt-details {
  flex: 1;
  min-width: 0;
}

.qb-cust-opt-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qb-cust-opt-metarow {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-cust-opt-empty {
  padding: 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}

.qb-cust-footer-action {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  background: var(--bg-surface, #ffffff);
}

.qb-cust-add-customer-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2563eb;
  font-weight: 700;
  font-size: 0.88rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* =========================================================
   CARD 2: ITEMS & SERVICES TABLE WITH HR & VR LINES
   ========================================================= */
.qb-table-wrapper {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface, #ffffff);
  margin-top: 10px;
}

/* Horizontal scroll shell — wraps the table so mobile can swipe left/right */
.qb-table-scroll-shell {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Thin custom scrollbar on desktop */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.qb-table-scroll-shell::-webkit-scrollbar {
  height: 4px;
}

.qb-table-scroll-shell::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Inner content that must never shrink below its natural width (minimum 920px for 9 columns) */
.qb-table-inner {
  min-width: max(100%, 920px);
  width: max-content;
  display: flex;
  flex-direction: column;
}

.qb-table-header-grid {
  display: grid;
  grid-template-columns: 60px minmax(220px, 3fr) 130px 65px 85px 105px 85px 115px 50px;
  background: #f8fafc;
  border-bottom: 1.5px solid #cbd5e1;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-items: stretch;
}

.qb-th-col {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  border-right: 1px solid #e2e8f0;
  /* VR line */
}

.qb-th-col:last-child {
  border-right: none;
}

.qb-th-img {
  justify-content: center;
}

.qb-th-item {
  justify-content: flex-start;
  padding-left: 12px;
}

.qb-th-dim {
  justify-content: center;
}

.qb-th-qty {
  justify-content: center;
}

.qb-th-unit {
  justify-content: center;
}

.qb-th-rate {
  justify-content: flex-end;
  padding-right: 10px;
}

.qb-th-disc {
  justify-content: center;
}

.qb-th-amt {
  justify-content: flex-end;
  padding-right: 10px;
}

.qb-th-act {
  justify-content: center;
}

/* Sections List inside Table */
.qb-sections-list {
  display: flex;
  flex-direction: column;
}

.quote-section-card {
  border: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

.quote-section-header {
  padding: 8px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  /* HR line */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-name-input {
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  padding: 2px 6px;
  border-radius: 4px;
}

.section-name-input:hover,
.section-name-input:focus {
  border-color: #cbd5e1;
  background: #ffffff;
}

.qb-sec-badge-pill {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Individual Item Row with HR and VR lines */
.qb-grid-row {
  display: grid;
  grid-template-columns: 60px minmax(220px, 3fr) 130px 65px 85px 105px 85px 115px 50px;
  border-bottom: 1px solid #e2e8f0;
  /* HR line */
  align-items: stretch;
  background: var(--bg-surface, #ffffff);
  transition: background 0.15s ease;
}

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

.qb-grid-row:hover {
  background: #f8fafc;
}

/* Vertical grid cells (VR line) */
.qb-grid-cell {
  padding: 8px;
  border-right: 1px solid #e2e8f0;
  /* VR line */
  display: flex;
  align-items: center;
  min-width: 0;
}

.qb-grid-cell:last-child {
  border-right: none;
}

.qb-cell-img {
  justify-content: center;
  padding: 6px;
}

.qb-cell-details {
  align-items: flex-start;
  padding: 8px 12px;
}

.qb-cell-dims {
  justify-content: center;
}

.qb-cell-qty {
  justify-content: center;
}

.qb-cell-unit {
  justify-content: center;
}

.qb-cell-rate {
  justify-content: flex-end;
}

.qb-cell-disc {
  justify-content: center;
}

.qb-cell-amount {
  justify-content: flex-end;
  padding-right: 10px;
}

.qb-cell-actions {
  justify-content: center;
}

/* Image Thumbnail in Col 1 */
.qb-item-thumb-box {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.qb-item-thumb-box:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

.qb-item-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qb-item-thumb-empty {
  color: #94a3b8;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qb-item-thumb-box:hover .qb-item-thumb-empty {
  color: #2563eb;
}

.qb-grid-title-input {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
  width: 100%;
  font-family: inherit;
}

.qb-grid-title-input:hover,
.qb-grid-title-input:focus {
  border-color: #cbd5e1;
  background: var(--bg-surface, #ffffff);
}

.qb-grid-desc-input {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
  width: 100%;
  font-family: inherit;
  line-height: 1.35;
}

.qb-grid-desc-input:hover,
.qb-grid-desc-input:focus {
  border-color: #cbd5e1;
  background: var(--bg-surface, #ffffff);
}

.qb-grid-tags-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.qb-tag-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}

.qb-tag-blue {
  background: #eff6ff;
  color: #1d4ed8;
}

.qb-tag-purple {
  background: #f5f3ff;
  color: #6d28d9;
}

.qb-tag-green {
  background: #ecfdf5;
  color: #047857;
}

.qb-tag-amber {
  background: #fffbeb;
  color: #b45309;
}

/* Col 3: Dimensions */
.qb-dim-cell-box {
  display: flex;
  align-items: center;
  background: var(--bg-surface, #ffffff);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  height: 34px;
  padding: 0 4px;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
}

.qb-dim-num-input {
  width: 32px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.84rem;
  text-align: center;
  color: var(--text-primary);
  font-weight: 600;
  padding: 0;
}

.qb-dim-sep {
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 700;
  user-select: none;
}

.qb-dim-unit-toggle {
  border: none;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 5px;
  cursor: pointer;
  margin-left: auto;
}

/* Col 4 & 6: Qty and Rate */
.qb-grid-qty-input,
.qb-grid-rate-input {
  height: 34px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface, #ffffff);
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
}

.qb-grid-rate-input {
  text-align: right;
  padding: 0 8px;
}

.qb-grid-qty-input:focus,
.qb-grid-rate-input:focus,
.qb-grid-unit-select:focus {
  border-color: #2563eb;
  outline: none;
}

/* Col 5: Unit */
.qb-grid-unit-select {
  height: 34px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface, #ffffff);
  padding: 0 6px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

/* Col 7: Discount */
.qb-grid-disc-box {
  display: flex;
  align-items: center;
  background: var(--bg-surface, #ffffff);
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  height: 34px;
  padding: 0 4px;
  width: 100%;
  box-sizing: border-box;
}

.qb-grid-disc-num {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.86rem;
  text-align: center;
  color: var(--text-primary);
  font-weight: 600;
  padding: 0;
}

.qb-grid-disc-unit {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  padding-right: 4px;
}

/* Col 8: Amount */
.qb-grid-amount-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  text-align: right;
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Col 9: Actions */
.qb-grid-act-btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qb-action-del-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #e11d48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s ease;
}

.qb-action-del-btn:hover {
  background: #ffe4e6;
  color: #be123c;
}

/* Card 2 Footer Bar */
.qb-items-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 14px;
}

.qb-items-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qb-footer-action-btn {
  height: 38px;
  padding: 0 18px;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qb-items-counter-text {
  font-size: 0.92rem;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

.qb-items-counter-text strong {
  color: var(--text-primary, #0f172a);
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* =========================================================
   BOTTOM CARDS: ADDITIONAL INFO & QUOTATION SUMMARY
   ========================================================= */
.qb-bottom-cards-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.qb-sub-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.qb-modern-textarea {
  width: 100%;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  background: var(--bg-surface);
  padding: 10px 12px;
  font-size: 0.86rem;
  color: var(--text-primary);
  resize: vertical;
  line-height: 1.45;
  box-sizing: border-box;
  font-family: inherit;
}

.qb-modern-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

.qb-char-counter {
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Card 4: Summary rows */
.qb-sum-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.qb-sum-line-label {
  font-weight: 500;
}

.qb-sum-line-val {
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Blue Hero Total Card */
.qb-summary-hero-banner {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
}

.qb-hero-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e40af;
}

.qb-hero-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1d4ed8;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Tax Settings Info Callout */
.qb-tax-info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
}

.qb-tax-info-banner a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
}

/* =========================================================
   DOCUMENT FOOTER BAR
   ========================================================= */
.qb-footer-bar {
  flex-shrink: 0;
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--bg-surface, #ffffff);
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.qb-footer-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qb-footer-brand-tag {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.qb-footer-brand-tag small {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.qb-footer-sep-dot {
  color: #cbd5e1;
}

.qb-footer-tagline {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.qb-footer-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qb-save-btn {
  padding: 9px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
}

.qb-cancel-btn {
  padding: 9px 20px;
  font-size: 0.9rem;
  border-radius: 8px;
}

/* =========================================================
   DARK THEME OVERRIDES
   ========================================================= */
[data-theme="dark"] .qb-card {
  background: #131B2E;
  border-color: #1E293B;
}

[data-theme="dark"] .qb-card-icon-box {
  background: rgba(37, 99, 235, 0.18);
  color: #60a5fa;
}

[data-theme="dark"] .qb-table-wrapper {
  background: #131B2E;
  border-color: #1E293B;
}

[data-theme="dark"] .qb-table-header-grid {
  background: #0B1120;
  border-color: #1E293B;
  color: #94A3B8;
}

[data-theme="dark"] .qb-th-col {
  border-color: #1E293B;
}

[data-theme="dark"] .quote-section-header {
  background: #0B1120;
  border-color: #1E293B;
}

[data-theme="dark"] .qb-grid-row {
  background: #131B2E;
  border-color: #1E293B;
}

[data-theme="dark"] .qb-grid-row:hover {
  background: #182238;
}

[data-theme="dark"] .qb-grid-cell {
  border-color: #1E293B;
}

[data-theme="dark"] .qb-item-thumb-box {
  background: #0B1120;
  border-color: #334155;
}

[data-theme="dark"] .qb-input-icon-box,
[data-theme="dark"] .qb-modern-input,
[data-theme="dark"] .qb-dim-cell-box,
[data-theme="dark"] .qb-grid-qty-input,
[data-theme="dark"] .qb-grid-rate-input,
[data-theme="dark"] .qb-grid-unit-select,
[data-theme="dark"] .qb-grid-disc-box,
[data-theme="dark"] .qb-modern-textarea,
[data-theme="dark"] .qb-append-icon-btn,
[data-theme="dark"] .qb-kebab-btn {
  background: #0B1120;
  border-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .qb-summary-hero-banner {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.35);
}

[data-theme="dark"] .qb-hero-title {
  color: #93c5fd;
}

[data-theme="dark"] .qb-hero-amount {
  color: #60a5fa;
}

[data-theme="dark"] .qb-tax-info-banner {
  background: rgba(37, 99, 235, 0.12);
  color: #93c5fd;
}

[data-theme="dark"] .qb-footer-bar {
  background: #131B2E;
  border-color: #1E293B;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .qb-doc-container {
    padding: 10px 8px 4px 8px;
  }

  .qb-doc-row {
    flex-direction: column;
    gap: 8px;
  }

  .qb-doc-row-split {
    flex-direction: column;
    gap: 14px;
  }

  .qb-doc-half-field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .qb-doc-row-label {
    width: auto;
    padding-top: 0;
  }

  .qb-client-meta-strip {
    grid-template-columns: 1fr;
  }

  .qb-table-header-row {
    display: none;
  }

  .qb-bottom-doc-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .qb-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.qb-totals-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qb-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.88rem;
}

.qb-calc-lbl {
  color: var(--text-secondary);
  font-weight: 600;
}

.qb-calc-val {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.qb-discount-ctrl-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.qb-discount-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-disc-type-select {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--bg-body, #F8FAFC);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}

.qb-disc-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.qb-disc-input {
  width: 90px;
  padding: 5px 24px 5px 8px;
  text-align: right;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-body, #F8FAFC);
  color: var(--text-primary);
}

.qb-disc-unit {
  position: absolute;
  right: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  pointer-events: none;
}

.qb-calc-row-disc-val {
  padding-left: 12px;
}

.qb-calc-lbl-sub {
  font-size: 0.78rem;
  color: #DC2626;
  font-weight: 600;
}

.qb-calc-val-sub {
  font-size: 0.84rem;
  color: #DC2626;
  font-weight: 800;
}

.qb-tax-rate-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qb-tax-input {
  width: 55px;
  padding: 4px 6px;
  text-align: right;
  font-weight: 700;
  font-size: 0.84rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-body, #F8FAFC);
  color: var(--text-primary);
}

.qb-grand-total-banner {
  background: linear-gradient(135deg, #0F172A, #1E293B);
  color: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

[data-theme="dark"] .qb-grand-total-banner {
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.qb-grand-lbl {
  display: flex;
  flex-direction: column;
}

.qb-grand-lbl span {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.qb-grand-lbl small {
  font-size: 0.72rem;
  opacity: 0.7;
}

.qb-grand-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #FBBF24;
  letter-spacing: -0.01em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.qb-words-box {
  background: var(--bg-surface-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  line-height: 1.4;
}

.qb-words-lbl {
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 4px;
}

.qb-words-val {
  color: var(--brand-accent);
  font-weight: 700;
}

/* FOOTER ACTIONS */
.qb-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

/* only show fixed footer when quote builder is open */
#quoteBuilderModal:not(.active) .qb-footer-bar {
  display: none;
}

.qb-save-btn {
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ----------------------------------------------------
   QUOTATION BUILDER MOBILE OPTIMIZATION (<= 768px)
   ---------------------------------------------------- */
@media (max-width: 768px) {
  #quoteBuilderModal.modal-overlay {
    bottom: var(--mobile-nav-height) !important;
    height: calc(100dvh - var(--mobile-nav-height)) !important;
    max-height: calc(100dvh - var(--mobile-nav-height)) !important;
  }

  .qb-modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - var(--mobile-nav-height)) !important;
    max-height: calc(100dvh - var(--mobile-nav-height)) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }

  /* ── HEADER ── */
  .qb-modal-header {
    padding: 11px 14px;
    gap: 8px;
    flex-shrink: 0;
    min-height: 54px;
  }

  .qb-header-left {
    gap: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .qb-header-icon {
    display: none;
    /* fully hidden on mobile */
  }

  .qb-title-wrap {
    gap: 7px;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .qb-modal-title {
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }

  .qb-quote-num-pill {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 5px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .qb-modal-subtitle {
    display: none;
  }

  .qb-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .qb-status-pill-wrap {
    padding: 4px 8px;
    gap: 4px;
    border-radius: 7px;
    border: 1px solid var(--border-subtle);
  }

  .qb-status-label {
    display: none;
  }

  .qb-status-select {
    font-size: 0.78rem;
    font-weight: 700;
    padding-right: 2px;
    max-width: 80px;
  }

  .qb-close-btn {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-radius: 7px;
    flex-shrink: 0;
  }

  /* ── BODY / SCROLL AREA ── */
  .qb-modal-body {
    padding: 8px 8px 24px 8px !important;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  .qb-doc-container {
    flex: 1 0 auto;
    padding: 8px 8px 0 8px !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
  }

  #quoteBuilderForm {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  /* ── CARDS ── */
  .qb-card {
    padding: 12px 11px;
    margin-bottom: 0;
    border-radius: 10px;
  }

  /* Card header: stack icon+title then action button below on very small screens */
  .qb-card-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .qb-card-header-left {
    gap: 10px;
  }

  .qb-card-icon-box {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .qb-card-title {
    font-size: 0.92rem;
  }

  .qb-card-subtitle {
    font-size: 0.76rem;
  }

  .qb-card-header-right {
    width: 100%;
  }

  .qb-card-header-right .btn,
  .qb-card-header-right button {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .qb-card-section-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .qb-card-section-title span {
    font-size: 0.76rem;
  }

  /* ── META GRID (Customer & Project Details) ── */
  .qb-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .qb-col-title {
    grid-column: span 1 !important;
  }

  .qb-field-group {
    width: 100%;
  }

  .qb-field-label {
    font-size: 0.76rem;
    margin-bottom: 5px;
  }

  /* Customer picker */
  .qb-cust-picker-wrapper {
    width: 100%;
  }

  .qb-input-icon-box {
    width: 100%;
  }

  .qb-inner-text-input,
  .qb-select {
    font-size: 0.88rem;
    padding: 9px 10px 9px 36px;
    height: 40px;
  }

  .qb-cust-dropdown-menu {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ── CLIENT DIVIDER ── */
  .qb-client-divider {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0 10px 0;
    padding-top: 10px;
  }

  .qb-client-divider span {
    font-size: 0.74rem;
  }

  .qb-add-cust-btn {
    padding: 4px 10px;
    font-size: 0.74rem;
  }

  .qb-client-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .qb-col-cust-select {
    grid-column: span 1 !important;
  }

  /* ── SCOPE / ROOMS SECTION ── */
  .qb-scope-header-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 14px 0 10px 0;
  }

  .qb-section-main-heading {
    font-size: 0.95rem;
  }

  .qb-section-main-sub {
    font-size: 0.74rem;
  }

  .qb-add-room-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
    font-size: 0.84rem;
  }

  .quote-section-card {
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }

  .quote-section-header {
    padding: 8px 14px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .quote-section-header>div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
  }

  .section-name-input {
    font-size: 0.88rem;
    min-width: 0;
    flex: 1;
  }

  .quote-section-header>div:last-child {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .quote-section-header>div:last-child .btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* ── ITEM ROWS ── */
  .qb-section-items-list {
    padding: 0 !important;
    gap: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .qb-item-card {
    padding: 12px;
    border-radius: 8px;
  }

  .qb-item-thumb-box {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .qb-item-card .item-title-field {
    font-size: 0.88rem;
    height: 38px;
    padding: 7px 10px;
  }

  .qb-item-card .item-specs-field {
    font-size: 0.8rem;
    padding: 7px 10px;
    min-height: 50px;
  }

  .qb-item-card .item-brands-field {
    font-size: 0.78rem;
    height: 36px;
  }

  /* Item pricing row: stack vertically */
  .qb-item-pricing-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .qb-item-pricing-row>* {
    width: 100%;
  }

  /* ── BANNER ── */
  .qb-add-room-banner {
    padding: 14px 12px;
    font-size: 0.82rem;
    margin-bottom: 14px;
    border-radius: 10px;
    text-align: center;
  }

  /* ── BOTTOM GRID (Additional Info + Quotation Summary) ── */
  .qb-bottom-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Quotation Summary first, Additional Info below */
  .qb-card-summary {
    order: -1;
  }

  .qb-card-notes {
    order: 0;
  }

  .qb-terms-card,
  .qb-notes-card,
  .qb-totals-card {
    padding: 14px 12px;
  }

  .qb-calc-row {
    font-size: 0.84rem;
    padding: 5px 0;
  }

  /* Discount controls */
  .qb-discount-ctrl-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .qb-discount-input-group {
    width: 100%;
  }

  .qb-disc-type-select {
    font-size: 0.8rem;
    padding: 7px 8px;
  }

  /* Grand total */
  .qb-grand-total-banner {
    padding: 12px 14px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
  }

  .qb-grand-lbl span {
    font-size: 0.88rem;
  }

  .qb-grand-val {
    font-size: 1.25rem;
  }

  /* ── FOOTER ACTIONS (in-flow directly under the form on mobile) ── */
  .qb-footer-bar {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 16px 0 16px 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 4px !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Brand tagline hidden on mobile */
  .qb-footer-bar-left {
    display: none !important;
  }

  /* Hide cancel button at bottom on mobile (close 'X' exists in header) */
  .qb-footer-bar .qb-cancel-btn,
  .qb-footer-bar .btn-secondary {
    display: none !important;
  }

  .qb-footer-bar-right {
    width: 100% !important;
    display: flex !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .qb-save-btn {
    width: 100% !important;
    flex: 1 !important;
    padding: 13px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
  }
}

/* Extra small screens (phones ≤ 390px) */
@media (max-width: 390px) {
  .qb-modal-header {
    padding: 9px 10px;
  }

  .qb-modal-title {
    font-size: 0.92rem;
  }

  .qb-quote-num-pill {
    display: none;
    /* hide quote number pill on very small screens — shown in form */
  }

  .qb-modal-body {
    padding: 8px 8px 0 8px !important;
  }

  .qb-card {
    padding: 11px 10px;
  }
}

/* =========================================================
   5. SETTINGS INTERFACE - FRESH EXECUTIVE REDESIGN
   ========================================================= */
.mobile-settings-hub,
.mobile-settings-nav-header {
  display: none;
}

.settings-card-wrapper {
  padding: 0 !important;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
}

.settings-layout-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 600px;
}

/* Left Sub-Nav Sidebar */
.settings-nav-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}

.settings-sidebar-header {
  padding: 0 24px 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-sidebar-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.settings-nav-list {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  gap: 2px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.settings-nav-item i {
  font-size: 1.05rem;
  opacity: 0.85;
}

.settings-nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-surface-subtle);
}

.settings-nav-item.active {
  color: var(--brand-accent);
  font-weight: 700;
  border-left-color: var(--brand-accent);
  background: rgba(37, 99, 235, 0.05);
}

.settings-nav-item.active i {
  opacity: 1;
  color: var(--brand-accent);
}

/* Right Content Pane */
.settings-content-pane {
  padding: 32px 36px;
  background: var(--bg-surface);
  overflow-y: auto;
}

/* Standalone Full Tab Panel Card (Backup & Data, Team & Access) */
.standalone-panel-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
  max-width: 1200px;
  width: 100%;
}

@media (max-width: 768px) {
  .standalone-panel-card {
    padding: 20px 16px;
    border-radius: var(--radius-md);
  }
}

/* =========================================================
   REPORTS & ANALYTICS WORKSPACE STYLING
   ========================================================= */

/* Filter & Action Bar */
.reports-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

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

.reports-filter-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

.reports-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* KPI Metric Cards in Reports - 3 Cards per Row on Desktop (Row 1: 3, Row 2: 3) */
.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.kpi-card.kpi-amber {
  border-top-color: var(--amber-primary);
}

.kpi-icon.amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber-primary);
}

.kpi-card.kpi-net {
  border-top: 3px solid var(--emerald-primary);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-surface) 100%);
  transition: all 0.2s ease;
}

.kpi-icon.net {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-primary);
}

.kpi-card.kpi-net.is-loss {
  border-top-color: var(--rose-primary);
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.05) 0%, var(--bg-surface) 100%);
}

.kpi-card.kpi-net.is-loss .kpi-icon.net {
  background: rgba(244, 63, 94, 0.15);
  color: var(--rose-primary);
}

/* Sub-Report Navigation Bar (Segmented Control) */
.reports-subtabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.report-subtabs-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface-subtle);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
  max-width: 100%;
}

.report-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: calc(var(--radius-md) - 3px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.report-subtab-btn i {
  font-size: 1rem;
  transition: color 0.18s ease;
}

.report-subtab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.report-subtab-btn.active {
  background: var(--bg-surface);
  color: var(--brand-accent);
  box-shadow: var(--shadow-subtle), 0 2px 6px rgba(0, 0, 0, 0.06);
  font-weight: 700;
}

.report-subtab-btn.active i {
  color: var(--brand-accent);
}

/* Report Panel Cards & Grids */
.report-panel-card {
  padding: 22px 24px;
  margin-bottom: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.report-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.report-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
}

.report-panel-title i {
  font-size: 1.15rem;
}

.report-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

/* Stat Rows */
.report-stat-rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.report-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.report-stat-row .stat-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-stat-row .stat-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.report-stat-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

.report-stat-row.total-row {
  padding-top: 6px;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 700;
  border-top: 1px solid var(--border-subtle);
}

/* Progress Bars */
.report-progress-wrap {
  margin-top: 16px;
}

.report-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.report-progress-track {
  height: 7px;
  border-radius: 6px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
}

.report-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-progress-fill.fill-emerald {
  background: linear-gradient(90deg, #10B981, #059669);
}

.report-progress-fill.fill-rose {
  background: linear-gradient(90deg, #F43F5E, #E11D48);
}

.report-progress-fill.fill-blue {
  background: linear-gradient(90deg, #3B82F6, #2563EB);
}

.report-progress-fill.fill-amber {
  background: linear-gradient(90deg, #F59E0B, #D97706);
}

.report-progress-fill.fill-purple {
  background: linear-gradient(90deg, #8B5CF6, #7C3AED);
}

/* Chips & Badges */
.report-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.chip-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald-primary);
  border-color: rgba(16, 185, 129, 0.25);
}

.chip-rose {
  background: rgba(244, 63, 94, 0.12);
  color: var(--rose-primary);
  border-color: rgba(244, 63, 94, 0.25);
}

.chip-amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber-primary);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Mini Metric Cards (Quotations Stages) */
.report-mini-stat {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.report-mini-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}

.report-mini-stat .mini-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.report-mini-stat .mini-val {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.report-mini-stat .mini-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Tables in Reports */
.report-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.report-data-table th {
  padding: 10px 14px;
  background: var(--bg-surface-subtle);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.report-data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.report-data-table tr:last-child td {
  border-bottom: none;
}

.report-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.report-quote-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--brand-accent);
  background: var(--brand-accent-subtle);
  border: 1px solid rgba(37, 99, 235, 0.2);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-quote-pill:hover {
  background: rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

.report-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.report-status-badge.status-positive {
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald-primary);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.report-status-badge.status-negative {
  background: rgba(244, 63, 94, 0.12);
  color: var(--rose-primary);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.report-status-badge.status-pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber-primary);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* WhatsApp Reminder Action Button */
.btn-whatsapp-reminder {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: rgba(37, 211, 102, 0.12);
  color: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.3);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-whatsapp-reminder:hover {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .reports-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .reports-filter-left {
    width: 100%;
  }

  .reports-filter-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .reports-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .report-section-grid {
    grid-template-columns: 1fr;
  }
}

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

.settings-pane-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-pane-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.settings-pane-subtitle {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* Settings Form & Grid */
/* Settings Form & Grouped Cards */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-group-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-group-header i {
  font-size: 1.1rem;
  color: var(--brand-accent);
}

.settings-group-header h4 {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.settings-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--brand-accent-subtle);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-sm);
  color: var(--brand-accent);
  font-size: 0.82rem;
  line-height: 1.4;
}

.settings-info-banner i {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.subcard-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.subcard-title-wrap i {
  font-size: 1.35rem;
  color: var(--brand-accent);
  margin-top: 2px;
}

.upi-virtual-preview-card {
  display: none;
  /* Only visible on mobile */
}

.settings-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

/* Company Logo Upload Component */
.settings-logo-block {
  margin-bottom: 8px;
}

.company-logo-uploader {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.company-logo-preview {
  width: 74px;
  height: 74px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.company-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-logo-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF6B35 0%, #E63946 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.company-logo-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.upload-logo-btn {
  cursor: pointer;
  padding: 7px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: var(--trans-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.upload-logo-btn:hover {
  background: var(--bg-surface-subtle);
  border-color: var(--border-strong);
}

.btn-text-danger {
  background: none;
  border: none;
  color: var(--rose-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}

.btn-text-danger:hover {
  text-decoration: underline;
}

.logo-hint-text {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* UPI ID Link Box */
.settings-highlight-box {
  background: var(--brand-accent-subtle);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.highlight-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.highlight-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-accent);
}

.btn-link-action {
  background: none;
  border: none;
  color: var(--brand-accent);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-link-action:hover {
  text-decoration: underline;
}

.highlight-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.upi-link-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.upi-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.upi-input-wrapper i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
}

.upi-input-wrapper input {
  padding-left: 36px;
  font-family: monospace;
  font-size: 0.82rem;
}

/* Save Action Bar */
.settings-action-bar {
  margin-top: 38px !important;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-start;
}

.settings-save-btn {
  padding: 10px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Custom Fields Sub-Tabs Selector */
.custom-fields-selector-bar {
  display: flex;
  gap: 8px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 6px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  width: 100%;
}

.cf-option-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.cf-option-btn i {
  font-size: 1.05rem;
  opacity: 0.85;
}

.cf-option-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.6);
}

.cf-option-btn.active {
  background: var(--bg-surface);
  color: var(--brand-accent);
  border-color: var(--border-subtle);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-weight: 700;
}

.cf-option-btn.active i {
  opacity: 1;
  color: var(--brand-accent);
}

.cf-subpane {
  animation: viewFadeIn 0.2s ease-out;
  width: 100%;
}

.settings-subcard {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.subcard-header h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.subcard-header p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.subcard-input-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.subcard-unit-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-subtle);
}

.unit-code-name-row {
  display: flex;
  gap: 14px;
  width: 100%;
}

.unit-desc-row {
  display: flex;
  gap: 14px;
  width: 100%;
  align-items: center;
}

.settings-terms-wrapper {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-backup-boxes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-backup-item {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.backup-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.backup-icon.restore {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
}

.backup-icon.reset {
  background: var(--rose-bg);
  color: var(--rose-primary);
}

.settings-backup-item.reset-card {
  border-color: rgba(244, 63, 94, 0.25);
  background: rgba(244, 63, 94, 0.02);
}

.backup-details h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.backup-details p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 14px;
}

.settings-section {
  display: none;
  animation: viewFadeIn 0.2s ease-out;
}

.settings-section.active {
  display: block;
}

.settings-list-manage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.settings-list-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  transition: var(--trans-fast);
}

.settings-list-item:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-subtle);
}

/* Custom Billing Units Grid & Cards */
.units-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding: 2px;
}

.unit-card-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-subtle);
  transition: all 0.2s ease;
}

.unit-card-tile:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.unit-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.unit-badge-box {
  width: 64px;
  min-width: 64px;
  height: 42px;
  background: var(--brand-accent-subtle);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.unit-code-text {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--brand-accent);
  letter-spacing: 0.04em;
}

.unit-text-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.unit-title-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-desc-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-delete-btn {
  flex-shrink: 0;
}

/* Category Card Tile */
.categories-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding: 2px;
}

.category-card-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-subtle);
  transition: all 0.2s ease;
}

.category-card-tile:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.category-tile-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.category-icon-box {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.category-name-text {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* =========================================================
   FORMS, INPUTS & VALIDATION
   ========================================================= */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-sizing: border-box;
}

.form-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  color: var(--text-primary);
  font-size: 0.86rem;
  transition: var(--trans-fast);
  width: 100%;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-accent);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

textarea.form-control {
  min-height: 75px;
  resize: vertical;
  line-height: 1.45;
}

/* =========================================================
   MODAL SYSTEM (DESKTOP CENTERED + MOBILE BOTTOM SHEET)
   ========================================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

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

.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.modal-dialog.modal-lg {
  max-width: 920px;
}

.modal-dialog.modal-fullscreen {
  max-width: 1160px;
  height: 92vh;
}

.modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  position: relative;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg-surface-subtle);
}

/* Payment History Metric Summary */
.payment-history-summary-box {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  text-align: center;
}

.pay-sum-item .lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 700;
}

.pay-sum-item .val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Transaction History Modal Layout */
.pay-history-project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  flex-wrap: wrap;
}

.pay-history-project-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 3px;
}

.pay-history-project-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.pay-history-project-meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pay-history-quote-num {
  font-family: monospace;
  font-weight: 700;
  color: var(--brand-accent);
}

.pay-history-dot {
  color: var(--text-muted);
}

.pay-history-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pay-history-action-btn {
  padding: 9px 16px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.pay-history-section-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pay-history-section-heading i {
  color: var(--brand-accent);
  font-size: 1rem;
}

/* Desktop table shown, mobile cards hidden by default */
.pay-history-table-wrap {
  display: block;
}

.pay-history-cards {
  display: none;
}

/* Mobile Payment Receipt Card Layout */
.pay-receipt-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pay-receipt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.pay-receipt-card-amount {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--emerald-primary);
}

.pay-receipt-card-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.pay-receipt-card-mode {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.pay-receipt-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.pay-receipt-card-actions .btn {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem !important;
  padding: 7px 10px !important;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-msg {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow-elevated);
  animation: toastSlide 0.25s ease-out;
  min-width: 280px;
}

.toast-msg.toast-success i {
  color: var(--emerald-primary);
  font-size: 1.2rem;
}

.toast-msg.toast-error i {
  color: var(--rose-primary);
  font-size: 1.2rem;
}

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

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

/* =========================================================
   NATIVE MOBILE BOTTOM BAR (ALL 6 TABS)
   ========================================================= */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: #0B1120;
  border-top: 1px solid #1E293B;
  z-index: 1200 !important;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.3);
}

.mobile-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: var(--radius-xs);
  flex: 1;
  transition: var(--trans-fast);
}

.mobile-nav-btn i {
  font-size: 1.25rem;
  transition: var(--trans-fast);
}

.mobile-nav-btn.active {
  color: #38BDF8;
}

.mobile-nav-btn.active i {
  transform: translateY(-2px);
  color: #38BDF8;
}

/* =========================================================
   CONTEXT-AWARE MOBILE FLOATING ACTION BUTTON (FAB)
   ========================================================= */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 8px) + 16px);
  right: 18px;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  z-index: 1100 !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

.mobile-fab i {
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.mobile-fab .mobile-fab-label {
  display: none !important;
}

.mobile-fab:active {
  transform: scale(0.9) !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
}

/* Hide FAB when modal is open so it never obstructs or captures clicks */
body.modal-open .mobile-fab,
.modal-overlay.active~.mobile-fab,
#quoteBuilderModal.active~.mobile-fab {
  display: none !important;
}

/* =========================================================
   PRODUCT IMAGE UPLOAD & THUMBNAIL COMPONENT STYLES
   ========================================================= */
.product-image-uploader {
  width: 100%;
}

.product-image-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: var(--bg-surface-subtle);
  border: 1.5px dashed var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--trans-fast);
  text-align: center;
}

.product-image-dropzone:hover {
  border-color: var(--brand-accent);
  background: rgba(37, 99, 235, 0.04);
}

.product-image-dropzone .dropzone-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 8px;
  transition: var(--trans-fast);
}

.product-image-dropzone:hover .dropzone-icon-wrap {
  transform: scale(1.08);
}

.product-image-preview-box {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface-subtle);
  padding: 10px;
  text-align: center;
}

.product-image-preview-box img {
  max-height: 180px;
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #0b0f19;
  display: block;
  margin: 0 auto 10px;
}

.product-image-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* Rate Master List View Image Thumbnails */
.rate-item-thumb-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--trans-fast);
}

.rate-item-thumb-wrap:hover {
  border-color: var(--brand-accent);
  transform: scale(1.05);
}

.rate-item-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rate-item-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.15rem;
  background: var(--bg-surface-subtle);
}

/* Rate Picker in Quote Modal */
.rate-picker-item {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  user-select: none;
}

.rate-picker-item:hover {
  border-color: var(--border-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rate-picker-item.selected {
  border-color: var(--brand-accent, #2563eb);
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 0 0 1px var(--brand-accent, #2563eb);
}

.rate-picker-cb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  flex-shrink: 0;
}

.rate-picker-cb {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--brand-accent, #2563eb);
}

.rate-picker-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
  flex-shrink: 0;
}

.rate-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rate-picker-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.2rem;
  background: var(--bg-surface-subtle);
}

/* Quote Builder Row Thumbnail */
.qb-item-thumb-box {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
  flex-shrink: 0;
  margin-top: 2px;
}

.qb-item-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qb-item-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* View Modal Photo */
.view-item-image-box {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  max-height: 240px;
  background: #0b0f19;
  text-align: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.view-item-image-box img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

/* Printable PDF Items Photo & Text Flexbox (for browser preview modal) */
.print-item-content-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.print-item-thumb-container {
  flex-shrink: 0;
  width: 1.2in;
  height: 1.2in;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.print-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.print-item-text-container {
  flex: 1;
  min-width: 0;
}

/* =========================================================
   RESPONSIVENESS & ALL-DEVICE FRIENDLINESS
   ========================================================= */

/* =========================================================
   RESPONSIVENESS & NATIVE MOBILE APP SYSTEM
   ========================================================= */

/* Tablets & Laptops (<=1024px) */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 0px;
    --header-height: 58px;
  }

  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: none;
    z-index: 200;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
  }

  .main-wrapper {
    margin-left: 0;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 16px) + 24px);
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-bottom-nav {
    display: flex !important;
  }

  .modal-overlay {
    bottom: var(--mobile-nav-height) !important;
  }

  .mobile-fab {
    display: flex;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .customer-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .filter-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .search-input-wrap {
    flex: 1 1 180px;
    min-width: 140px;
  }

  .pipeline-dist-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-legend {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-width: unset;
  }

  .overview-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .overview-filter-label {
    display: none;
  }
}

/* Medium Tablets & Phones (<=850px) */
@media (max-width: 850px) {
  .settings-layout-container {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE DEVICES & SMARTPHONES (<=640px) - APP LOOK & FEEL
   ========================================================= */
@media (max-width: 640px) {
  :root {
    --header-height: 56px;
    --mobile-nav-height: 64px;
  }

  /* Safe Area Support & App Bar */
  .top-header {
    padding: 0 14px;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  [data-theme="light"] .top-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border-subtle);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .page-title {
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-subtitle {
    display: none !important;
  }

  /* Hide redundant desktop button from header on mobile */
  .top-header .header-right .btn,
  .top-header .header-right .btn-primary,
  .desktop-only-btn {
    display: none !important;
  }

  .main-wrapper {
    margin-left: 0 !important;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 16px) + 70px) !important;
  }

  .content-body {
    padding: 12px 14px 28px 14px !important;
  }

  /* Floating Action Button (FAB) - Round with + */
  .mobile-fab {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 8px) + 16px) !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    z-index: 1100 !important;
  }

  /* =========================================================
     DEDICATED MOBILE DASHBOARD (OVERVIEW) REDESIGN
     ========================================================= */
  .overview-filter-bar {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
  }

  .overview-filter-left {
    width: 100% !important;
  }

  .overview-filter-bar .filter-select-wrap {
    width: 100% !important;
  }

  .overview-filter-bar .filter-select {
    width: 100% !important;
    height: 42px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: var(--bg-surface) !important;
  }

  /* 4 KPI Fintech Mobile Cards */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .kpi-card {
    padding: 14px 12px !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
  }

  .kpi-card.kpi-gold::after {
    background: linear-gradient(90deg, #F59E0B, #D97706);
  }

  .kpi-card.kpi-emerald::after {
    background: linear-gradient(90deg, #10B981, #059669);
  }

  .kpi-card.kpi-rose::after {
    background: linear-gradient(90deg, #F43F5E, #E11D48);
  }

  .kpi-card.kpi-blue::after {
    background: linear-gradient(90deg, #38BDF8, #0284C7);
  }

  .kpi-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  .kpi-title {
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted) !important;
  }

  .kpi-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .kpi-value {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  .kpi-subtitle {
    font-size: 0.66rem !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
  }

  /* Quick Action Banner on Mobile */
  .quick-action-banner {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(99, 102, 241, 0.08)) !important;
    border: 1px solid var(--blue-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .banner-text h3 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin-bottom: 4px !important;
  }

  .banner-text p {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
  }

  .banner-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .banner-actions .btn {
    width: 100% !important;
    height: 44px !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    padding: 0 8px !important;
  }

  /* Pipeline Distribution Card on Mobile */
  .overview-section-card {
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .section-card-title {
    margin-bottom: 14px !important;
  }

  .financial-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .fin-bar-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .fin-bar-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .progress-track {
    height: 8px !important;
    border-radius: 99px !important;
  }

  /* Overview Recent Quotations Responsive Card Layout */
  .overview-section-card .data-table-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .overview-section-card table.data-table,
  .overview-section-card table.data-table tbody {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .overview-section-card table.data-table thead {
    display: none !important;
  }

  .overview-section-card table.data-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  }

  .overview-section-card table.data-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
  }

  .overview-section-card table.data-table td:first-child {
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }

  .overview-section-card table.data-table td:last-child {
    padding-top: 8px !important;
    border-top: 1px solid var(--border-subtle) !important;
    margin-top: 2px !important;
  }

  .overview-section-card table.data-table td:last-child .table-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .overview-section-card table.data-table td:last-child .table-actions .btn-action-icon {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: 36px !important;
  }

  /* Filter Toolbar & Search Bars on Mobile */
  .filter-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .filter-toolbar>div {
    width: 100% !important;
  }

  .toolbar-right-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .filter-select-wrap {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .filter-select-wrap .filter-select {
    width: 100% !important;
    height: 40px !important;
    font-size: 0.84rem !important;
  }

  .search-input-wrap {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .search-input-wrap input {
    width: 100% !important;
    height: 40px !important;
    font-size: 0.88rem !important;
  }

  .category-filter-chips {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .category-filter-chips::-webkit-scrollbar {
    display: none;
  }

  /* =========================================================
     LIST VIEW TO NATIVE MOBILE CARDS (QUOTES, RATES, EXPENSES)
     ========================================================= */
  .list-view-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    max-height: none !important;
    margin-top: 6px !important;
  }

  .list-view-table,
  .list-view-table tbody {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .list-view-table thead {
    display: none !important;
  }

  /* Base Mobile Card Container */
  .list-view-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 14px 12px 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .list-view-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border-bottom: none !important;
    font-size: 0.84rem !important;
    box-sizing: border-box !important;
  }

  /* ----------------------------------------------------
     COMPACT & MODERN QUOTATIONS MOBILE CARD (.quote-row-item)
     ---------------------------------------------------- */
  .quote-row-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px 10px 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Multi-Select Checkbox Top-Left on Mobile (Hidden) */
  .quote-row-item td.bulk-select-td {
    display: none !important;
  }

  /* Row 1: Client & Quotation Details (Full Width with Right Offset for Badges) */
  .quote-row-item td.col-client-info {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    padding-right: 90px !important;
    box-sizing: border-box !important;
  }

  .quote-row-item .quote-info-stack {
    gap: 6px !important;
    padding: 2px 0 !important;
  }

  .quote-row-item .quote-header-tag-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    flex-wrap: wrap !important;
  }

  .quote-row-item .quote-number-pill {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 0 5px !important;
  }

  .quote-row-item .quote-meta-date {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
  }

  .quote-row-item .quote-project-badge {
    font-size: 0.68rem !important;
    padding: 1px 5px !important;
    max-width: 130px !important;
  }

  .quote-row-item .quote-client-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 1px !important;
  }

  .quote-row-item .quote-client-name-bold {
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    line-height: 1.25 !important;
  }

  .quote-row-item .quote-phone-chip {
    font-size: 0.72rem !important;
    padding: 1px 6px !important;
  }

  /* Hide separate Phone column on mobile */
  .quote-row-item td.col-phone,
  .quote-modern-table th.col-phone {
    display: none !important;
  }

  /* Top Right Badges: Payment Badge (Top) & Status Dropdown (Underneath) */
  .quote-row-item td.col-payment {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .quote-row-item td.col-payment .badge-pay-status {
    padding: 2px 7px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
  }

  .quote-row-item td.col-status {
    position: absolute !important;
    top: 36px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .quote-row-item td.col-status::before {
    display: none !important;
  }

  .quote-row-item .quote-status-pill-wrap {
    height: 22px !important;
    padding: 1px 5px !important;
    width: auto !important;
    border-radius: 4px !important;
  }

  .quote-row-item .quote-status-dropdown {
    font-size: 0.68rem !important;
    padding-right: 14px !important;
  }

  /* Row 2: Financials Strip (Full Width) */
  .quote-row-item td.col-financials {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--bg-surface-subtle) !important;
    padding: 6px 10px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-subtle) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
  }

  .quote-row-item td.col-financials::before {
    content: 'Grand Total' !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
  }

  .quote-row-item .quote-financials-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
  }

  .quote-row-item .quote-grand-val {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .quote-row-item .quote-due-val {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
  }

  /* Row 3: Action Buttons (Full Width on Mobile) */
  .quote-row-item td.col-actions {
    display: block !important;
    width: 100% !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--border-subtle) !important;
    margin-top: 2px !important;
  }

  .quote-row-item .desktop-quote-actions {
    display: none !important;
  }

  .quote-row-item .mobile-quote-actions {
    display: block !important;
    width: 100% !important;
  }

  .quote-row-item td.col-actions .table-actions {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .quote-row-item td.col-actions .table-actions .btn-action-icon {
    flex: 1 !important;
    width: auto !important;
    height: 32px !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    background: var(--bg-surface-subtle) !important;
  }

  /* ----------------------------------------------------
     RATE MASTER MOBILE CARD LAYOUT (.rate-row-item)
     ---------------------------------------------------- */
  .rate-row-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px 10px 14px !important;
    gap: 8px !important;
  }

  .rate-row-item td.rate-col-info,
  .rate-row-item td:first-child {
    display: block !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    padding-right: 110px !important;
    /* Reserves room for top-right price & variant badge */
    border-bottom: 1px solid var(--border-subtle) !important;
    box-sizing: border-box !important;
  }

  .rate-row-item td:first-child>div {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .rate-row-item .rate-item-thumb-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
  }

  /* Place Price per Unit and Variant Badge at Top Right on Mobile */
  .rate-row-item td.rate-col-pricing,
  .rate-row-item td:nth-child(2) {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    text-align: right !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .rate-row-item .rate-pricing-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
  }

  .rate-row-item .rate-price-line {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }

  .rate-row-item .rate-price-val {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--brand-accent) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    line-height: 1.2 !important;
  }

  .rate-row-item .rate-price-unit {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    line-height: 1.2 !important;
  }

  .rate-row-item .rate-variant-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 1px !important;
  }

  .rate-row-item .badge-variant-count,
  .rate-row-item td:nth-child(2) .badge-variant-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    color: #059669 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    font-family: inherit !important;
  }

  .rate-row-item .badge-variant-count i {
    font-size: 0.6rem !important;
    font-weight: normal !important;
  }

  .rate-row-item td.col-actions {
    display: block !important;
    width: 100% !important;
    padding-top: 2px !important;
    border-top: none !important;
    margin-top: 0 !important;
  }

  .rate-row-item td.col-actions .table-actions {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .rate-row-item td.col-actions .table-actions .btn-action-icon {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 36px !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    background: var(--bg-surface-subtle) !important;
  }

  /* ----------------------------------------------------
     EXPENSE CARDS MOBILE LAYOUT (.expense-row-item)
     ---------------------------------------------------- */
  .expense-row-item td:nth-child(1) {
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .expense-row-item td:nth-child(2) {
    font-size: 0.82rem !important;
    color: var(--brand-accent) !important;
    font-weight: 600 !important;
  }

  .expense-row-item td:nth-child(3),
  .expense-row-item td:nth-child(4) {
    display: inline-flex !important;
    width: auto !important;
    margin-right: 6px !important;
    margin-top: 4px !important;
  }

  .expense-row-item td:nth-child(5) {
    margin-top: 6px !important;
  }

  .expense-row-item td:nth-child(5) span {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    color: var(--rose-primary) !important;
  }

  .expense-row-item td.col-actions {
    display: block !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--border-subtle) !important;
    margin-top: 4px !important;
  }

  .expense-row-item td.col-actions .table-actions {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .expense-row-item td.col-actions .table-actions .btn-action-icon {
    width: 44px !important;
    max-width: 44px !important;
    height: 38px !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ----------------------------------------------------
     OVERVIEW RECENT TABLES & PAYMENT LEDGERS
     ---------------------------------------------------- */
  #recentQuotesTableBody tr,
  #viewPayHistoryTableBody tr {
    padding: 12px !important;
    gap: 6px !important;
  }

  #viewPayHistoryTableBody tr td.col-actions .table-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  /* =========================================================
     DEDICATED MOBILE SETTINGS DIRECTORY HUB & FORM SUITE
     ========================================================= */

  /* =========================================================
     DEDICATED MOBILE SETTINGS DIRECTORY HUB & FORM SUITE
     ========================================================= */

  /* Tab view container reset on mobile - 100% fit */
  #tab-settings {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     1. MOBILE SETTINGS DIRECTORY HUB (NATIVE APP SETTINGS HOME)
     ========================================================= */
  .mobile-settings-hub {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    animation: mobileHubFadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-bottom: 24px !important;
    overflow-x: hidden !important;
  }

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

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

  /* Profile Overview Hero Card */
  .mobile-hub-profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-hub-profile-card:active {
    transform: scale(0.988) !important;
  }

  .mobile-hub-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .mobile-hub-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2563EB 0%, #0284C7 100%) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
  }

  .mobile-hub-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
  }

  .mobile-hub-avatar-edit-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--brand-accent) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.68rem !important;
    border: 2px solid var(--bg-card) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  .mobile-hub-profile-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .mobile-hub-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .mobile-hub-company-name {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
  }

  .mobile-hub-verified-badge {
    color: #10B981 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }

  .mobile-hub-company-tagline {
    font-size: 0.74rem !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }

  .mobile-hub-meta-chips {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
    flex-wrap: wrap !important;
  }

  .mobile-hub-meta-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    background: var(--bg-surface-subtle) !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-xs) !important;
    border: 1px solid var(--border-subtle) !important;
    max-width: 110px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-hub-meta-chip i {
    font-size: 0.7rem !important;
    color: var(--brand-accent) !important;
  }

  .mobile-hub-profile-edit-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  .mobile-hub-profile-edit-btn:active {
    background: var(--brand-accent) !important;
    color: #FFFFFF !important;
  }

  /* Grouped Inset Menu Sections */
  .mobile-hub-sections-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-hub-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-hub-group-header {
    padding: 0 6px 4px 6px !important;
  }

  .mobile-hub-group-title {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .mobile-hub-group-cards {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-hub-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-hub-group-cards .mobile-hub-card:last-child {
    border-bottom: none !important;
  }

  .mobile-hub-card:active {
    background: var(--bg-surface-subtle) !important;
  }

  .mobile-hub-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }

  .mobile-hub-icon-box.brand {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(2, 132, 199, 0.18)) !important;
    color: #2563EB !important;
  }

  .mobile-hub-icon-box.bank {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.18)) !important;
    color: #10B981 !important;
  }

  .mobile-hub-icon-box.fields {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(124, 58, 237, 0.18)) !important;
    color: #8B5CF6 !important;
  }

  .mobile-hub-icon-box.terms {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.18)) !important;
    color: #F59E0B !important;
  }

  .mobile-hub-icon-box.backup {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(56, 189, 248, 0.18)) !important;
    color: #0284C7 !important;
  }

  .mobile-hub-card-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .mobile-hub-card-title {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }

  .mobile-hub-card-desc {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .mobile-hub-card-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .mobile-hub-badge {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: var(--radius-full) !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .mobile-hub-badge.badge-brand {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #2563EB !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
  }

  .mobile-hub-badge.badge-bank {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
  }

  .mobile-hub-badge.badge-fields {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #8B5CF6 !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
  }

  .mobile-hub-badge.badge-terms {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #F59E0B !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
  }

  .mobile-hub-badge.badge-backup {
    background: rgba(2, 132, 199, 0.1) !important;
    color: #0284C7 !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
  }

  .mobile-hub-card-right i {
    font-size: 1.1rem !important;
    color: var(--text-muted) !important;
  }

  /* App Info Footer Card */
  .mobile-hub-footer-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 14px 10px !important;
    text-align: center !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-hub-footer-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
  }

  .mobile-hub-footer-brand i {
    font-size: 0.88rem !important;
    color: var(--brand-accent) !important;
  }

  .mobile-hub-footer-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.68rem !important;
    color: var(--text-muted) !important;
  }

  /* =========================================================
     2. MOBILE DRILL-DOWN SUB-SCREENS (APP PAGE VIEWS)
     ========================================================= */
  #tab-settings:not(.mobile-detail-open) #settingsDetailWrapper {
    display: none !important;
  }

  #tab-settings.mobile-detail-open #mobileSettingsHub {
    display: none !important;
  }

  #tab-settings.mobile-detail-open #settingsDetailWrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    animation: mobileSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-bottom: 80px !important;
    overflow-x: hidden !important;
  }

  @keyframes mobileSlideInRight {
    from {
      opacity: 0;
      transform: translateX(16px);
    }

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

  /* Mobile Sticky App Bar */
  .mobile-settings-nav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .mobile-settings-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 6px 10px 6px 6px !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-full) !important;
    color: var(--brand-accent) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important;
  }

  .mobile-settings-back-btn:active {
    background: var(--brand-accent) !important;
    color: #FFFFFF !important;
  }

  .mobile-settings-back-btn i {
    font-size: 1.15rem !important;
    margin-left: -2px !important;
  }

  .mobile-settings-header-center {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .mobile-settings-current-title {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
    max-width: 100% !important;
  }

  .mobile-settings-current-subtitle {
    font-size: 0.66rem !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .mobile-settings-header-action {
    flex-shrink: 0 !important;
  }

  .mobile-settings-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    padding: 3px 7px !important;
    border-radius: var(--radius-full) !important;
  }

  /* Hide duplicate horizontal pill bar inside sub-screen so full screen is clean */
  .settings-nav-sidebar {
    display: none !important;
  }

  /* Content Pane Layout */
  .settings-layout-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
  }

  .settings-content-pane {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .settings-pane-header {
    display: none !important;
    /* Managed by sticky app bar */
  }

  .settings-section {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-section.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* App Inset Grouped Form Cards */
  .settings-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-group-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    padding: 14px 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .settings-group-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-group-header i {
    font-size: 1.1rem !important;
    color: var(--brand-accent) !important;
  }

  .settings-group-header h4 {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
  }

  .settings-grid-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-form .form-group {
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-form .form-label {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .settings-form .form-control {
    height: 46px !important;
    font-size: 16px !important;
    /* Prevents auto-zoom in iOS Safari */
    border-radius: 12px !important;
    border: 1px solid var(--border-medium) !important;
    background: var(--bg-surface) !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-form textarea.form-control,
  #setCompanyAddress {
    height: auto !important;
    min-height: 95px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    margin-top: 4px !important;
  }

  /* Registered Business Address Card Mobile Spacing */
  #cardCompanyAddress {
    margin-top: 14px !important;
    margin-bottom: 24px !important;
  }

  #cardCompanyAddress .form-label {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  /* Company Logo Uploader */
  .company-logo-uploader {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    background: var(--bg-surface-subtle) !important;
    border-radius: 14px !important;
    border: 1px dashed var(--border-medium) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .company-logo-preview {
    width: 78px !important;
    height: 78px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  .company-logo-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .upload-logo-btn {
    width: 100% !important;
    height: 44px !important;
    justify-content: center !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  /* =========================================================
     3. PAYMENT SETTINGS: UPI VIRTUAL CARD PREVIEW
     ========================================================= */
  .upi-virtual-preview-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 45%, #0369A1 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 140px !important;
  }

  .upi-virtual-preview-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 160px !important;
    height: 160px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  .upi-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }

  .upi-card-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
    letter-spacing: 0.02em !important;
  }

  .upi-card-chip i {
    font-size: 1.05rem !important;
  }

  .upi-pill-badge {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    padding: 2px 7px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }

  .upi-card-mid {
    margin: 10px 0 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }

  .upi-card-label {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }

  .upi-card-vpa {
    font-family: 'SF Mono', Consolas, monospace !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .upi-card-bot {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
  }

  .upi-card-holder,
  .upi-card-bank {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
  }

  /* UPI Highlight Box on Mobile (Direct UPI Payment Link) */
  .settings-highlight-box {
    padding: 14px 12px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-surface-subtle) !important;
    border: 1px solid var(--border-subtle) !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
  }

  .highlight-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
  }

  .highlight-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .highlight-title i {
    color: var(--brand-accent) !important;
    font-size: 1rem !important;
  }

  .btn-link-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--brand-accent) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }

  .btn-link-action:active {
    background: var(--brand-accent) !important;
    color: #FFFFFF !important;
  }

  .highlight-desc {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.35 !important;
    margin: 4px 0 10px 0 !important;
  }

  .upi-link-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .upi-input-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .upi-input-wrapper i {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--brand-accent) !important;
    font-size: 1.05rem !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .upi-input-wrapper input {
    padding-left: 36px !important;
    padding-right: 12px !important;
    height: 46px !important;
    font-family: 'SF Mono', Consolas, monospace !important;
    font-size: 0.78rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    text-overflow: ellipsis !important;
  }

  .upi-btn-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .upi-btn-actions .btn {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     4. STICKY BOTTOM ACTION BAR ON MOBILE
     ========================================================= */
  .settings-action-bar {
    position: sticky !important;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 8px) + 8px) !important;
    z-index: 25 !important;
    background: var(--bg-card) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    margin-top: 38px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-save-btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .settings-save-btn:active {
    transform: scale(0.985) !important;
  }

  /* =========================================================
     5. CUSTOM FIELDS: 3-COLUMN EQUAL SEGMENTED CONTROLS & CARDS
     ========================================================= */
  .custom-fields-selector-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cf-option-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px 2px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .cf-option-btn i {
    font-size: 1.1rem !important;
  }

  .cf-option-btn.active {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35) !important;
  }

  .cf-option-btn.active i {
    color: #FFFFFF !important;
  }

  .settings-subcard {
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    overflow-x: hidden !important;
  }

  .subcard-title-wrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .subcard-title-wrap i {
    font-size: 1.15rem !important;
    color: var(--brand-accent) !important;
    margin-top: 1px !important;
  }

  .subcard-title-wrap h4 {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin-bottom: 2px !important;
  }

  .subcard-title-wrap p {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    line-height: 1.3 !important;
  }

  .subcard-input-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .subcard-input-row .form-control {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .subcard-input-row .btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Unit inputs */
  .subcard-unit-inputs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-surface-subtle) !important;
    border-radius: 14px !important;
    border: 1px solid var(--border-subtle) !important;
  }

  .unit-code-name-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .unit-code-input,
  .unit-name-input,
  .unit-desc-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .unit-desc-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .unit-add-btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Category & Unit Cards Grid */
  .categories-card-grid,
  .units-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0 !important;
    margin-top: 4px !important;
    box-sizing: border-box !important;
  }

  .category-card-tile,
  .unit-card-tile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  }

  .category-card-tile .btn-action-icon,
  .unit-card-tile .btn-action-icon,
  .settings-list-item .btn-action-icon {
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 1.05rem !important;
    border-radius: 10px !important;
  }

  /* =========================================================
     6. TERMS & CONDITIONS: MOBILE APP DESIGN
     ========================================================= */
  .settings-terms-wrapper {
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    overflow-x: hidden !important;
  }

  .settings-info-banner {
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: 0.74rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-list-manage {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  .settings-list-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 14px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    word-break: break-word !important;
  }

  /* =========================================================
     7. BACKUP & RESTORE: ACTION BOXES
     ========================================================= */
  .settings-backup-boxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-backup-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    overflow-x: hidden !important;
  }

  .settings-backup-item.restore-card {
    border-color: rgba(16, 185, 129, 0.3) !important;
  }

  .settings-backup-item .backup-details {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .settings-backup-item .backup-details h4 {
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    margin-bottom: 3px !important;
  }

  .settings-backup-item .backup-details p {
    font-size: 0.74rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
  }

  .settings-backup-item .btn,
  .settings-backup-item label.btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* =========================================================
     NATIVE MOBILE BOTTOM-SHEETS FOR ALL MODALS
     ========================================================= */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    bottom: var(--mobile-nav-height) !important;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    animation: mobileSheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  }

  @keyframes mobileSheetSlideUp {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  /* Drag Handle Indicator */
  .modal-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    background: var(--border-medium);
    border-radius: 99px;
  }

  .modal-header {
    position: relative;
    padding: 22px 16px 12px 16px;
    flex-shrink: 0;
  }

  .modal-body {
    padding: 14px 16px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 8px)) 16px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1;
    justify-content: center;
    padding: 10px 14px;
  }

  /* Sticky Quick Action Menu for Invoice, Quote & Receipt Preview Modals on Mobile */
  #invoicePrintModal .modal-dialog,
  #quotePrintModal .modal-dialog,
  #receiptPrintModal .modal-dialog {
    display: flex !important;
    flex-direction: column !important;
    height: 94vh !important;
    max-height: 94vh !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #invoicePrintModal .modal-body,
  #quotePrintModal .modal-body,
  #receiptPrintModal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #invoicePrintModal .modal-footer,
  #quotePrintModal .modal-footer,
  #receiptPrintModal .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 8px)) !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-subtle) !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18) !important;
    gap: 8px !important;
  }

  /* Hide redundant close button in mobile footer for invoice & receipt previews */
  #invoicePrintModal .modal-footer .preview-close-btn,
  #receiptPrintModal .modal-footer .preview-close-btn,
  #invoicePrintModal .modal-footer>.btn-secondary:first-child,
  #receiptPrintModal .modal-footer>.btn-secondary:first-child {
    display: none !important;
  }

  #invoicePrintModal .modal-footer .btn,
  #quotePrintModal .modal-footer .btn,
  #receiptPrintModal .modal-footer .btn {
    flex: 1 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* Form Elements in Mobile Sheets */
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-control {
    font-size: 0.92rem;
    padding: 9px 12px;
  }

  /* Quote Builder Sections on Mobile */
  .quote-section-card {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  .qb-item-scope-card {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 8px;
  }

  /* Toast Messages Safe Positioning */
  .toast-container {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 12px) + 18px);
    right: 14px;
    left: 14px;
  }

  .toast-msg {
    min-width: unset;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  /* =========================================================
     TRANSACTION HISTORY MODAL — MOBILE LAYOUT
     ========================================================= */
  .pay-history-project-header {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pay-history-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .pay-history-action-btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    padding: 9px 10px !important;
  }

  .payment-history-summary-box {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .pay-sum-item .lbl {
    font-size: 0.65rem !important;
  }

  .pay-sum-item .val {
    font-size: 1rem !important;
  }

  /* On mobile: hide table, show cards */
  .pay-history-table-wrap {
    display: none !important;
  }

  .pay-history-cards {
    display: block !important;
  }
}

/* =========================================================
   PDF & LETTERHEAD TEMPLATES SIMPLE LIST VIEW
   ========================================================= */
.pdf-templates-simple-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.pdf-template-item {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.2s ease;
}

.pdf-template-item:hover {
  border-color: var(--brand-accent);
}

.pdf-template-item.active {
  border-color: var(--brand-accent);
  background: rgba(2, 132, 199, 0.03);
  box-shadow: 0 0 0 1px var(--brand-accent);
}

.template-item-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.template-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.template-item-icon.modern {
  background: #0F172A;
  color: #38BDF8;
}

.template-item-icon.minimal {
  background: #F0F9FF;
  color: #0284C7;
  border: 1.5px solid #BAE6FD;
}

.template-item-icon.classic {
  background: #FEF3C7;
  color: #92400E;
  border: 1.5px solid #FDE68A;
}

.template-item-icon.nordic {
  background: #1E293B;
  color: #94A3B8;
  border: 1.5px solid #334155;
}

.template-item-icon.emerald {
  background: #ECFDF5;
  color: #047857;
  border: 1.5px solid #A7F3D0;
}

.template-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.template-item-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-item-title-row h4 {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.template-feature-tag.item-image-tag {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  background: rgba(14, 165, 233, 0.12);
  color: #0284C7;
  border: 1px solid rgba(14, 165, 233, 0.3);
  padding: 2.5px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.template-feature-tag.no-image-tag {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.3);
  padding: 2.5px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.template-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2.5px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}

.template-item-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.template-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.template-item-actions .btn {
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .pdf-template-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .template-item-actions {
    justify-content: flex-end;
  }

  .template-item-actions .btn {
    flex: 1;
  }
}

/* =========================================================
   EMAIL & SMTP TEMPLATE CARDS (MINIMAL & HORIZONTAL)
   ========================================================= */
.email-templates-picker-wrap {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.8));
}

.email-templates-picker-header {
  margin-bottom: 14px;
}

.email-templates-picker-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.email-templates-picker-sub {
  font-size: 0.8rem;
  color: var(--text-muted, var(--text-secondary));
  margin: 0;
}

.email-template-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.email-tpl-card {
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  min-height: 104px;
}

.email-tpl-card:hover {
  border-color: var(--brand-accent, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.08);
}

.email-tpl-card.active {
  border-color: var(--brand-accent, #2563eb);
  background: rgba(37, 99, 235, 0.035);
  box-shadow: 0 0 0 1px var(--brand-accent, #2563eb), 0 4px 12px -2px rgba(37, 99, 235, 0.12);
}

.email-tpl-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.email-tpl-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.email-tpl-card:hover .email-tpl-icon {
  transform: scale(1.05);
}

.email-tpl-icon.modern {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.email-tpl-icon.classic {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.email-tpl-icon.emerald,
.email-tpl-icon.compact {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.email-tpl-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.email-tpl-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.email-tpl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
}

.email-tpl-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.email-tpl-btn-preview {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--bg-surface-subtle, #f8fafc);
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  height: 30px;
  line-height: 1;
}

.email-tpl-btn-preview:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-primary, #0f172a);
  border-color: var(--border-color, #cbd5e1);
}

.email-tpl-btn-group .btn {
  flex: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  height: 30px;
  line-height: 1;
  margin: 0;
}

.email-tpl-btn-group .btn-secondary {
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: transparent;
  color: var(--text-secondary, #64748b);
}

.email-tpl-btn-group .btn-secondary:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-primary, #0f172a);
  border-color: var(--border-color, #cbd5e1);
}

.email-tpl-btn-group .btn-primary {
  background: var(--brand-accent, #2563eb);
  color: #ffffff;
  border: 1px solid var(--brand-accent, #2563eb);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.email-tpl-btn-group .btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Dark mode adjustments */
[data-theme="dark"] .email-tpl-card {
  background: var(--bg-card, #111c30);
  border-color: var(--border-subtle, #1e293b);
}

[data-theme="dark"] .email-tpl-card.active {
  background: rgba(56, 189, 248, 0.08);
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px #38bdf8;
}

[data-theme="dark"] .email-tpl-btn-preview {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

[data-theme="dark"] .email-tpl-btn-preview:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

[data-theme="dark"] .email-tpl-icon.classic {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .email-tpl-icon.emerald,
[data-theme="dark"] .email-tpl-icon.compact {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .email-template-cards-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================
   ANDROID APP DOWNLOAD TAB STYLES (MINIMAL & CLEAN)
   ========================================================= */
.android-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.android-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

[data-theme="dark"] .android-version-badge {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.25);
}

/* App Hero Card */
.android-app-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

.android-app-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.android-app-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #16a34a, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.android-app-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.android-app-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.android-app-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.android-meta-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.android-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: 6px;
}

.android-app-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.android-btn-download {
  background: linear-gradient(135deg, #16a34a, #059669) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25) !important;
}

.android-btn-download:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
}

/* Bottom 2-Column Grid */
.android-details-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-bottom: 20px;
}

.android-subcard {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.android-subcard-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.android-subcard-header h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.android-subcard-icon {
  font-size: 1.1rem;
  color: #16a34a;
}

/* Steps List */
.android-clean-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.android-clean-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.android-clean-step .step-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

[data-theme="dark"] .android-clean-step .step-circle {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.android-clean-step strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

.android-clean-step p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.android-clean-step code {
  font-size: 0.74rem;
  padding: 1px 4px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

/* QR Code Section */
.android-qr-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.android-qr-frame {
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: inline-flex;
}

.android-qr-image {
  width: 120px;
  height: 120px;
  display: block;
}

.android-qr-caption {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0;
}

.android-link-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 8px;
  width: 100%;
  max-width: 300px;
}

.android-link-url {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.btn-icon-subtle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  transition: all 0.15s ease;
}

.btn-icon-subtle:hover {
  color: var(--brand-accent);
  background: var(--bg-surface);
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .android-app-card {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 16px;
  }

  .android-app-info {
    align-items: flex-start;
  }

  .android-app-actions {
    width: 100%;
    flex-direction: row;
  }

  .android-app-actions .btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .android-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .android-app-actions {
    flex-direction: column;
  }

  .android-app-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   LOGIN & AUTHENTICATION VIEW
   ========================================================= */
.login-view-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(147, 51, 234, 0.08) 0%, transparent 40%),
    var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.login-container {
  width: 100%;
  max-width: 420px;
  margin: auto;
  animation: loginCardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

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

.login-card {
  padding: 36px 32px;
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.login-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-brand-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 0 0 4px rgba(37, 99, 235, 0.12);
  border: 2px solid #FFFFFF;
  padding: 4px;
}

.login-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.login-brand-icon i {
  font-size: 2rem;
  color: var(--brand-accent);
}

.login-title {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.login-title span {
  color: var(--brand-accent);
}

.login-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

.login-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #EF4444;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrap>i {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
}

.input-icon-wrap .form-control {
  padding-left: 42px;
  padding-right: 42px;
}

.btn-input-icon-action {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: color 0.15s ease;
}

.btn-input-icon-action:hover {
  color: var(--text-primary);
}

.login-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}

.login-remember-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.login-remember-wrap input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--brand-accent);
}

.login-submit-btn {
  height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

/* =========================================================
   TOP HEADER COMPANY LOGO & USER DROPDOWN
   ========================================================= */
.user-header-dropdown-wrap {
  position: relative;
}

.company-header-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 40px;
  height: 40px;
  box-shadow: var(--shadow-xs);
}

.company-header-logo-btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--brand-accent);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.header-brand-logo-box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FFFFFF;
  padding: 2px;
}

.header-brand-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.header-brand-logo-box i {
  font-size: 1.2rem;
  color: var(--brand-accent);
}

.company-header-logo-btn .user-header-arrow {
  display: none;
}

.user-header-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 30px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary);
}

.user-header-pill-btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-medium);
}

.user-header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-accent), #4f46e5);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
}

.user-header-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-header-role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 1px;
}

.user-header-arrow {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.role-admin {
  background: rgba(147, 51, 234, 0.15);
  color: #9333EA;
  border: 1px solid rgba(147, 51, 234, 0.25);
}

.role-executive {
  background: rgba(37, 99, 235, 0.15);
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

/* User Dropdown Menu Card */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.15);
  padding: 6px;
  z-index: 1000;
  animation: dropDownFadeIn 0.18s ease-out;
}

@keyframes dropDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

.user-dropdown-header {
  padding: 8px 10px;
}

.user-dropdown-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-email {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.user-dropdown-item i {
  font-size: 1.05rem;
}

.user-dropdown-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.user-dropdown-item.text-danger {
  color: #EF4444;
}

.user-dropdown-item.text-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
}

/* =========================================================
   USER MANAGEMENT CARDS & GRID
   ========================================================= */
.users-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.user-admin-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.user-admin-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-card-avatar.exec-avatar {
  background: linear-gradient(135deg, #0EA5E9, #2563EB);
}

.user-card-info {
  min-width: 0;
  flex: 1;
}

.user-card-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-email {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.user-status-pill.status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.user-status-pill.status-inactive {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.user-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.user-card-date {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.user-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-card-actions .btn-icon {
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
}

/* =========================================================
   REDESIGNED ADD / EDIT TEAM USER MODAL & RBAC PERMISSIONS
   ========================================================= */
.modal-user-dialog {
  max-width: 660px;
  width: 94%;
}

.user-modal-header {
  padding: 18px 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
}

.modal-title-wrap {
  min-width: 0;
  flex: 1;
}

.modal-title-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(99, 102, 241, 0.18));
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.modal-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.3;
}

.user-modal-body {
  padding: 24px 26px;
  max-height: calc(85vh - 130px);
  overflow-y: auto;
}

.user-form-section {
  display: flex;
  flex-direction: column;
}

.user-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.user-section-pill {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-accent);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.user-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.user-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .user-form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.form-input-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.3;
}

.required-star {
  color: var(--rose-primary);
  font-weight: bold;
  margin-left: 2px;
}

/* Select icon wrap */
.select-icon-wrap {
  position: relative;
}

.select-icon-wrap select.form-control {
  padding-left: 36px;
}

.select-icon-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 1rem;
}

/* User Permissions Card in Modal */
.user-perms-section-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.user-perms-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.user-perms-subtext {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.user-perms-quick-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.user-perm-toggle-btn {
  padding: 3px 10px;
  font-size: 11.5px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}

.user-perms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 600px) {
  .user-perms-grid {
    grid-template-columns: 1fr;
  }
}

.perm-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.perm-checkbox-card:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--brand-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.perm-checkbox-card input[type="checkbox"] {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--brand-accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.perm-card-content {
  min-width: 0;
  flex: 1;
}

.perm-card-title {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.perm-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.perm-icon-overview {
  background: rgba(99, 102, 241, 0.12);
  color: #6366F1;
}

.perm-icon-quotes {
  background: rgba(37, 99, 235, 0.12);
  color: #2563EB;
}

.perm-icon-ratemaster {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.perm-icon-customers {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

.perm-icon-expenses {
  background: rgba(244, 63, 94, 0.12);
  color: #F43F5E;
}

.perm-icon-settings {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
}

.perm-card-desc {
  font-size: 0.71rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* User Card in Team Settings */
.user-card-perms-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-xs);
  border: 1px dashed var(--border-subtle);
}

.user-card-perms-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-card-perms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.user-perm-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-accent);
  border: 1px solid rgba(37, 99, 235, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.quote-creator-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366F1;
  border: 1px solid rgba(99, 102, 241, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.user-modal-footer {
  padding: 16px 24px;
  background: var(--bg-surface-subtle);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-user-save {
  padding: 9px 20px;
  font-weight: 600;
}

.btn-user-cancel {
  padding: 9px 16px;
}

/* =========================================================
   CLEAN MINIMALIST DELETE CONFIRMATION MODAL
   ========================================================= */
.delete-confirm-overlay {
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-delete-dialog {
  max-width: 440px;
  width: 92%;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: deleteModalFadeIn 0.18s ease-out;
}

@keyframes deleteModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }

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

.delete-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
}

.delete-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.delete-modal-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delete-modal-close-btn:hover {
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
}

.delete-modal-body {
  padding: 18px 20px 20px 20px;
  text-align: left;
}

.delete-modal-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 14px 0;
}

.delete-modal-item-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.delete-item-badge-row {
  margin-bottom: 4px;
}

.delete-item-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.delete-item-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.35;
}

.delete-item-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.delete-warning-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #DC2626;
  line-height: 1.35;
}

[data-theme="dark"] .delete-warning-banner {
  background: rgba(239, 68, 68, 0.1);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.delete-warning-banner i {
  font-size: 1rem;
  flex-shrink: 0;
}

.delete-modal-footer {
  padding: 12px 22px;
  background: var(--bg-surface-subtle);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.btn-delete-cancel {
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 8px;
}

.btn-delete-confirm {
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  background: #DC2626;
  border: 1px solid #DC2626;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-delete-confirm:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}

@media (max-width: 640px) {
  .modal-delete-dialog {
    width: 95%;
  }

  .delete-modal-header {
    padding: 16px 18px 4px 18px;
  }

  .delete-modal-body {
    padding: 12px 18px 16px 18px;
  }

  .delete-modal-footer {
    padding: 12px 18px;
  }
}

/* =========================================================
   SUPER-ADMIN & MULTI-TENANT COMPANIES MANAGEMENT (EXECUTIVE)
   ========================================================= */
.role-superadmin {
  background: linear-gradient(135deg, #4338CA, #6366F1) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 1. Hero Header Banner */
.company-hero-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #312E81 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.company-hero-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0) 70%);
  pointer-events: none;
}

.company-hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.company-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #A5B4FC;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.company-hero-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.company-hero-subtitle {
  font-size: 0.88rem;
  color: #CBD5E1;
  margin: 0;
  line-height: 1.45;
}

.company-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btn-hero-provision {
  background: linear-gradient(135deg, #2563EB, #4F46E5) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
}

.btn-hero-provision:hover {
  background: linear-gradient(135deg, #1D4ED8, #4338CA) !important;
  transform: translateY(-1px);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

/* 2. Command Bar & Status Filter Pills */
.company-command-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.company-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.company-filter-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.company-filter-pill-btn:hover {
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
}

.company-filter-pill-btn.active {
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  border-color: rgba(37, 99, 235, 0.2);
  font-weight: 700;
}

.company-filter-pill-btn .pill-badge {
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 700;
}

.company-filter-pill-btn.active .pill-badge {
  background: var(--brand-accent);
  color: #FFFFFF;
}

.pulse-dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.company-command-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-search-wrap {
  width: 280px;
}

/* 3. Studio Cards (Grid View) */
.company-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.company-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}

.company-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: var(--brand-accent);
}

.company-card-suspended {
  background: var(--bg-surface-subtle);
  border-style: dashed;
}

.company-card-header {
  padding: 16px 16px 12px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.company-card-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.company-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid #C7D2FE;
  overflow: hidden;
}

.company-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-avatar-box-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.company-avatar-box-sm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-info-meta {
  min-width: 0;
}

.company-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.company-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-tenant-tag {
  color: #2563EB;
  font-size: 13px;
  flex-shrink: 0;
}

.company-id-pill {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
}

.company-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.company-badge-status.active {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
  border: 1px solid var(--emerald-border);
}

.badge-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
}

.company-badge-status.suspended {
  background: var(--rose-bg);
  color: var(--rose-primary);
  border: 1px solid var(--rose-border);
}

.company-card-body {
  padding: 14px 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-admin-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface-subtle);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.company-admin-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.company-admin-details {
  min-width: 0;
  flex-grow: 1;
}

.company-admin-details .admin-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-role-tag {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 800;
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-accent);
  padding: 1px 5px;
  border-radius: 4px;
}

.admin-email-row {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-top: 2px;
}

.admin-email-row:hover .admin-email {
  color: var(--brand-accent);
  text-decoration: underline;
}

.admin-email-row:hover .copy-icon {
  color: var(--brand-accent);
}

.company-admin-details .admin-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: monospace;
}

.copy-icon {
  font-size: 11px;
  color: var(--text-muted);
}

.company-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 6px;
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.company-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-metric-item .metric-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.company-metric-item .metric-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.company-metric-item .metric-val-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.company-card-primary-action {
  padding: 0 16px 14px 16px;
}

.btn-access-workspace {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-access-workspace:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #4338CA 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px);
}

.btn-access-workspace .arrow-icon {
  margin-left: auto;
  opacity: 0.8;
  font-size: 15px;
  transition: transform 0.2s ease;
}

.btn-access-workspace:hover .arrow-icon {
  transform: translateX(4px);
  opacity: 1;
}

.company-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
}

.company-card-sub-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.btn-sub-action {
  flex: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  height: 32px !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-sub-action.btn-icon-only {
  flex: 0 0 34px !important;
  padding: 0 !important;
  font-size: 14px !important;
}


/* 4. Empty State Hero */
.company-empty-hero {
  text-align: center;
  padding: 56px 24px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.company-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand-accent-subtle);
  color: var(--brand-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.company-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.company-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto 20px auto;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .company-hero-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .company-command-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .company-command-right {
    flex-direction: column;
    align-items: stretch;
  }

  .company-search-wrap {
    width: 100%;
  }
}

/* =========================================================
   SUPER-ADMIN IMPERSONATION TOP BANNER
   ========================================================= */
.impersonation-top-banner {
  background: linear-gradient(90deg, #312E81 0%, #1E1B4B 50%, #4338CA 100%);
  border-bottom: 2px solid #F59E0B;
  color: #FFFFFF;
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 4px 16px rgba(49, 46, 129, 0.25);
  animation: slideDownBanner 0.25s ease-out;
}

@keyframes slideDownBanner {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

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

.impersonation-banner-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.impersonation-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.impersonation-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #FDE68A;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.impersonation-pulse-badge .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
  animation: pulseGold 1.5s infinite;
}

@keyframes pulseGold {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px #F59E0B;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.impersonation-info-text {
  font-size: 13px;
  color: #E0E7FF;
}

.impersonation-info-text strong {
  color: #FFFFFF;
  font-weight: 700;
}

.btn-impersonation-exit {
  background: #F59E0B !important;
  color: #1E1B4B !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-impersonation-exit:hover {
  background: #D97706 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5) !important;
}

@media (max-width: 768px) {
  .impersonation-top-banner {
    padding: 10px 14px;
  }

  .impersonation-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .btn-impersonation-exit {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   RATE MASTER PICKER MODAL — MOBILE FULL-SCREEN FIX
   ========================================================= */
@media (max-width: 768px) {

  /* Make the picker dialog fill the full screen like a sheet */
  #rateMasterPickerModal .modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Header: tighter on mobile */
  #rateMasterPickerModal .modal-header {
    padding: 12px 16px;
    flex-shrink: 0;
  }

  /* Body: grows to fill, no excess height */
  #rateMasterPickerModal .modal-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 12px 14px 0 !important;
  }

  /* Item list: scrollable, fills remaining space — no blank white area */
  #rateMasterPickerContainer {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer: stays at bottom, no float */
  #rateMasterPickerModal .modal-footer {
    flex-shrink: 0;
    padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* Footer buttons: save button full width */
  #rateMasterPickerModal .modal-footer>div:last-child {
    flex: 1;
    justify-content: flex-end;
  }

  #btnInsertSelectedRateItems {
    flex: 1;
    justify-content: center;
  }
}


.sqft-calc-clean {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.sqft-clean-dim {
  flex: 1;
  min-width: 0;
  height: 34px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-align: center;
  padding: 0 4px !important;
  border: 1.5px solid var(--border-subtle, #cbd5e1) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--text-primary, #0f172a) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Hide native up/down stepper arrows completely */
.sqft-clean-dim::-webkit-outer-spin-button,
.sqft-clean-dim::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

.sqft-clean-dim::placeholder {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.sqft-clean-dim:focus {
  border-color: var(--brand-accent, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.sqft-clean-op {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-muted, #94a3b8);
  user-select: none;
  flex-shrink: 0;
}

.sqft-clean-res {
  flex: 1.25;
  font-weight: 700 !important;
  color: var(--brand-accent, #2563eb) !important;
  border-color: var(--border-subtle, #cbd5e1) !important;
}

.sqft-clean-unit-btn {
  height: 34px;
  min-width: 32px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #475569;
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle, #cbd5e1);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sqft-clean-unit-btn:hover {
  border-color: var(--brand-accent, #2563eb);
  background: #eff6ff;
  color: var(--brand-accent, #2563eb);
}

[data-theme="dark"] .sqft-clean-dim {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .sqft-clean-dim::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .sqft-clean-res {
  color: #60a5fa !important;
}

[data-theme="dark"] .sqft-clean-unit-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

/* =========================================================
   RATE MASTER ITEM MODAL - FULL SCREEN WORKSPACE
   ========================================================= */

#rateItemModal.modal-overlay {
  left: var(--sidebar-width) !important;
  width: calc(100vw - var(--sidebar-width)) !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  background: var(--bg-body, #FAFAF9) !important;
  backdrop-filter: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  z-index: 1000 !important;
}

#rateItemModal.modal-overlay.active {
  animation: qbFullScreenFadeIn 0.15s ease-out;
}

/* Rate Master Picker must appear above the full-screen Quote Builder and sidebar */
#rateMasterPickerModal.modal-overlay {
  z-index: 1100 !important;
}

.rm-modal-dialog {
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  background: var(--bg-body, #FAFAF9) !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

[data-theme="dark"] #rateItemModal.modal-overlay {
  background: #0B0F19 !important;
}

[data-theme="dark"] .rm-modal-dialog {
  background: #0B0F19 !important;
  border-color: transparent !important;
}

.rm-modal-header {
  padding: 14px 32px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  z-index: 10;
}

.rm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rm-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.rm-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.rm-modal-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.rm-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rm-close-btn:hover {
  background: rgba(225, 29, 72, 0.08);
  color: var(--rose-primary);
  border-color: rgba(225, 29, 72, 0.2);
}

.rm-modal-body {
  padding: 24px 32px 60px 32px;
  flex: 1 1 auto;
  max-height: none !important;
  height: calc(100vh - 75px) !important;
  overflow-y: auto !important;
}

#rateItemForm {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.rm-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.rm-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rm-card-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* Variable pricing list and rows */
.rm-variables-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-var-empty {
  text-align: center;
  padding: 20px;
  background: var(--bg-surface-subtle, #f8fafc);
  border: 1.5px dashed var(--border-subtle, #cbd5e1);
  border-radius: 8px;
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
}

.rm-var-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface-subtle, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.15s ease;
}

.rm-var-row:focus-within {
  border-color: var(--brand-accent, #2563eb);
}

.rm-var-index {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted, #94a3b8);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.rm-var-name-wrap {
  flex: 1.2;
  min-width: 140px;
}

.rm-var-desc-wrap {
  flex: 2;
  min-width: 180px;
}

.rm-var-price-wrap {
  flex: 0.9;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rm-var-price-prefix {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-muted, #64748b);
}

.rm-var-del-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, #cbd5e1);
  background: var(--bg-surface, #ffffff);
  color: var(--rose-primary, #e11d48);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rm-var-del-btn:hover {
  background: rgba(225, 29, 72, 0.1);
  border-color: var(--rose-primary, #e11d48);
}

.rm-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.rm-save-btn {
  padding: 10px 26px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Rate Master Picker Variant UI */
.picker-variants-wrap {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.picker-variant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(37, 99, 235, 0.04);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.picker-variant-item:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--brand-accent, #2563eb);
}

.picker-variant-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.picker-variant-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--brand-accent, #2563eb);
}

.badge-variant-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.22);
  font-size: 0.62rem;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.badge-variant-count i {
  font-size: 0.65rem;
  font-weight: normal;
}

[data-theme="dark"] .badge-variant-count {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.badge-variant-select {
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-accent, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.3);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  height: 24px;
  line-height: 1.2;
  max-width: 240px;
  transition: all 0.15s ease;
  vertical-align: middle;
}

.badge-variant-select:hover,
.badge-variant-select:focus {
  border-color: var(--brand-accent, #2563eb);
  background: rgba(37, 99, 235, 0.14);
}

[data-theme="dark"] .badge-variant-select {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .badge-variant-select option {
  background: #1e293b;
  color: #f8fafc;
}

/* =========================================================
   RATE MASTER UPLOAD & EXPORT STYLING
   ========================================================= */
.rate-export-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.rate-export-menu {
  top: calc(100% + 6px);
  right: 0;
  width: 210px;
}

.rm-file-dropzone {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-surface-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rm-file-dropzone:hover {
  border-color: var(--brand-accent);
  background: rgba(37, 99, 235, 0.05);
}

.rm-mode-card {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s ease;
}

.rm-mode-card:hover {
  border-color: var(--border-medium);
}

.rm-mode-card.active {
  border-color: var(--brand-accent);
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 0 0 1px var(--brand-accent);
}

.rm-mode-card input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--brand-accent);
  cursor: pointer;
}