/* Global SVG Icon Bounding Rules */
svg, svg.heroicon, .heroicon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ==========================================================================
   Modern Minimalist Scandinavian SaaS Design System
   Inspired by Minimal Clean Multi-Tenant Cloud ERP & Workstations
   ========================================================================== */

:root {
  /* Color Palette - AndersenLab Enterprise Accounting Theme (Muted Blue & Crisp Contrast) */
  --bg-app: #F8FAFC;           /* Crisp, clean slate-50 canvas */
  --bg-card: #FFFFFF;          /* Pure white cards */
  --bg-subtle: #F1F5F9;        /* Soft neutral background */
  --bg-sidebar: #FFFFFF;       /* Clean executive white sidebar */
  --bg-input: #FFFFFF;         /* Crisp white input */
  
  --primary: #0F172A;          /* Executive Deep Slate */
  --primary-hover: #1E293B;    /* Slate 800 hover */
  --primary-light: #F0F9FF;    /* Soft sky blue tint */
  --primary-accent: #0284C7;   /* Andersen Sky Blue */
  --primary-accent-dark: #0369A1; /* Deep Corporate Blue */
  --primary-accent-light: #E0F2FE; /* Light Blue Tint */
  --primary-gradient: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  --card-gradient-sky: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
  --card-gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  
  --text-main: #0F172A;         /* Slate 900 */
  --text-body: #334155;         /* Slate 700 */
  --text-muted: #64748B;        /* Slate 500 */
  --text-subtle: #94A3B8;       /* Slate 400 */
  
  --border-color: #E2E8F0;      /* Crisp modern border */
  --border-subtle: #F1F5F9;     /* Ultra-soft dividers */
  
  --accent-emerald: #10B981;
  --accent-emerald-bg: #ECFDF5;
  --accent-emerald-border: #A7F3D0;
  
  --accent-rose: #EF4444;
  --accent-rose-bg: #FEF2F2;
  --accent-rose-border: #FECDD3;
  
  --accent-amber: #F59E0B;
  --accent-amber-bg: #FFFBEB;
  --accent-amber-border: #FDE68A;
  
  --accent-indigo: #6366F1;
  --accent-indigo-bg: #EEF2FF;
  --accent-indigo-border: #C7D2FE;
  
  --accent-purple: #8B5CF6;
  --accent-purple-bg: #F5F3FF;
  --accent-purple-border: #DDD6FE;
  
  /* Radii - Clean Curvature */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  
  /* Soft Elevation Shadows (AndersenLab Depth Hierarchy) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
  --shadow-card: 0 4px 14px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 12px 28px -4px rgba(2, 132, 199, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --shadow-active-pill: 0 2px 8px rgba(2, 132, 199, 0.25);
  --shadow-dropdown: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  
  /* Unified Modern Typography - Google Font Prompt (FlowAccount Standard) */
  --font-sans: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Prompt', monospace, sans-serif;
  --font-main: 'Prompt', sans-serif;
  --font-heading: 'Prompt', sans-serif;
}

/* Base Reset & FlowAccount Global Typography */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Prompt', var(--font-sans);
}

body {
  font-family: 'Prompt', var(--font-sans) !important;
  background-color: var(--bg-app);
  color: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  height: 100vh;
}

input, select, textarea, button, table, th, td, h1, h2, h3, h4, h5, h6, span, p, div, a, label, strong, b {
  font-family: 'Prompt', var(--font-sans);
}

/* ==========================================================================
   FlowAccount System-Wide Type Hierarchy Specifications
   ========================================================================== */

/* 2.1 Sidebar, Topbar & Navigation */
#sidebar, .sidebar {
  font-family: 'Prompt', sans-serif;
}
.sidebar-category-header, .nav-category-title {
  font-family: 'Prompt', sans-serif;
  font-size: 11px;
  font-weight: 600;
}
.nav-link, .sidebar-nav-item, .sidebar-link {
  font-family: 'Prompt', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.nav-link:hover, .nav-link.active, .sidebar-nav-item:hover, .sidebar-nav-item.active {
  font-weight: 500 !important;
}
.badge, .tag, .status-badge, [class*="badge-"] {
  font-family: 'Prompt', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.topbar-user, .user-profile, .workspace-title, .user-info, #current-user-display, .topbar-company, .workspace-subtitle {
  font-family: 'Prompt', sans-serif;
  font-size: 13px;
  font-weight: 400;
}

/* 2.2 Form Inputs & Voucher Entries */
label, .form-label, .control-label, .field-label, .input-label {
  font-family: 'Prompt', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important; /* Slate-700 */
}
input, select, textarea, .form-control, .input-field, .rapid-date-segment {
  font-family: 'Prompt', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #1E293B;
}
.btn, button, .action-btn, .button {
  font-family: 'Prompt', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* 2.3 Data Grids & Financial Tables */
table th, .data-table th, .gl-table th, .report-table th, .voucher-table th {
  font-family: 'Prompt', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #475569 !important; /* Slate-600 */
}
table td, .data-table td, .gl-table td, .report-table td, .voucher-table td {
  font-family: 'Prompt', sans-serif !important;
  font-size: 13px;
  font-weight: 400;
}

/* Strict Tabular Numbers for Financial Entries (Debit, Credit, Net Total) */
.num-col, [class*="num-col"], .financial-num, .tabular-nums,
table td.num-col, table th.num-col,
.amount-cell, .debit-col, .credit-col, .net-total,
input[type="number"], .gl-amount, .voucher-amount,
.gl-line-debit, .gl-line-credit, .account-suggestion-code, .account-code-badge {
  font-family: 'Prompt', var(--font-num) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -0.01em;
}

/* Accounting Parentheses and Decimal Alignment */
.acc-num-cell {
  font-family: var(--font-num, monospace) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.acc-paren-pad {
  display: inline-block !important;
  visibility: hidden !important;
  user-select: none !important;
  pointer-events: none !important;
  width: 0.65ch !important;
  margin-left: 1px !important;
}

.acc-neg, .is-neg {
  color: #DC2626;
  font-weight: inherit;
}

.acc-pos, .is-pos {
  font-weight: inherit;
}

/* Grand Totals */
.grand-total, .table-grand-total, .total-row, .total-row td, .summary-total,
.voucher-summary-card .summary-value, .gl-total-row td, .grand-total-cell {
  font-family: 'Prompt', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* 2.4 Dashboard KPI Cards */
.kpi-title, .kpi-label, .reports-kpi-label, .fa-kpi-card-label, .adv-kpi-label,
.daily-log-kpi-label, .sales-kpi-title, .cfo-kpi-label {
  font-family: 'Prompt', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #64748B !important; /* Slate-500 */
}
.kpi-value, .kpi-val, .reports-kpi-val, .fa-kpi-card-val, .adv-kpi-value,
.daily-log-kpi-val, .sales-kpi-val, .cfo-kpi-value {
  font-family: 'Prompt', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}


/* Main Container Layout */
#app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg-app);
}

/* ==========================================================================
   1. Left Sidebar Navigation (Modern Minimalist Style)
   ========================================================================== */
#sidebar {
  width: 250px;
  min-width: 250px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
  transition: width 0.2s ease, min-width 0.2s ease;
}

.sidebar-section-header:hover {
  background-color: #F8FAFC !important;
}

.sidebar-nav-item:hover {
  background-color: #F0F9FF !important;
  color: var(--primary-accent) !important;
}

/* Minimalist Workspace Header Card */
.sidebar-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 14px 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.workspace-badge-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 1;
  overflow: hidden;
}

.workspace-squircle-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #18181B;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.workspace-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.2;
}

.workspace-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.workspace-toggle-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.workspace-toggle-btn:hover {
  background: #F1F3F5;
  color: #0F172A;
}

/* Sidebar Quick Search Box */
.sidebar-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.15s ease;
}

.sidebar-search-box:focus-within {
  border-color: #CBD5E1;
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.05);
}

.sidebar-search-icon {
  color: #94A3B8;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.sidebar-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-main);
  width: 100%;
  font-weight: 500;
}

.sidebar-search-input::placeholder {
  color: #94A3B8;
}

.sidebar-search-kbd {
  background: #F4F5F7;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
}

/* Sidebar Navigation Items */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px 6px 10px;
}

.nav-category-title {
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.nav-category-action {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.nav-category-action:hover {
  color: var(--text-main);
}

/* Minimalist Nav Link Items */
.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: #64748B;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  margin-bottom: 2px;
  border: 1px solid transparent;
}

.nav-link-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-link .nav-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: #64748B;
  transition: color 0.15s;
}

.nav-link:hover {
  background-color: #F1F3F5;
  color: #0F172A;
}

.nav-link:hover .nav-icon {
  color: #0F172A;
}

/* Active Minimalist Card Pill */
.nav-link.active {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 700;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-active-pill);
}

.nav-link.active .nav-icon {
  color: #0F172A;
}

/* Tree-View Submenus (Matching Reference Image 1) */
.nav-tree-container {
  margin-left: 22px;
  border-left: 1.5px solid #E2E8F0;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  margin-bottom: 6px;
}

.nav-tree-item {
  font-size: 12px;
  color: #64748B;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s;
  display: block;
}

.nav-tree-item:hover, .nav-tree-item.active {
  color: #0F172A;
  font-weight: 700;
  background: #F1F3F5;
}

/* Colored Squircle Project Badges (Matching Reference Images 2 & 3) */
.project-squircle-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Minimal User Footer Card */
.sidebar-user-card {
  margin-top: auto;
  padding: 10px 12px;
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F4F4F5;
  color: #18181B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  border: 1px solid #E4E4E7;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.2;
}

.user-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* ==========================================================================
   2. Main Content Wrapper & Top Navbar (Modern Minimalist)
   ========================================================================== */
#main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-app);
}

#navbar {
  min-height: 60px;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  z-index: 10;
  flex-wrap: nowrap;
  gap: 12px;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.breadcrumb-minimal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
}

.breadcrumb-minimal a {
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb-minimal a:hover {
  color: #0F172A;
}

.breadcrumb-minimal .breadcrumb-sep {
  color: #CBD5E1;
  font-size: 11px;
}

.breadcrumb-minimal .breadcrumb-current {
  color: #0F172A;
  font-weight: 700;
}

.page-header-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-pill-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-pill-btn:hover {
  background: #FFFFFF;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.tenant-select-dropdown {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

.tenant-select-dropdown:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* ==========================================================================
   Global Layout Wrapper Standard (Fixed 24px Margin / 8-Point Grid Alignment)
   ========================================================================== */
#content-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px 32px 24px;
  box-sizing: border-box;
  width: 100%;
}

#content-viewport > div,
#content-viewport > form,
.main-content-wrapper,
.sales-unified-container,
.reports-hub-wrapper,
.reports-vault-wrapper,
.bank-recon-wrapper,
.fa-hub-wrapper,
.cfo-dashboard-wrapper,
.accrued-hub-wrapper,
.drongo-workstation-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Explicit Layout Directives for Hotfixed Modules */
.bank-recon-wrapper,
.reports-vault-wrapper {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   3. Card-based Dashboard Layout (3 Sections: Metrics, Action, Right Panel)
   ========================================================================== */
.dashboard-grid-3col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.dashboard-main-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-right-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Top Metric Cards */
.top-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  position: relative;
  transition: all 0.2s ease;
}

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

.metric-card.primary-gradient {
  background: var(--card-gradient-sky);
  color: #FFFFFF;
  border: none;
  box-shadow: var(--shadow-primary);
}

.metric-card.primary-gradient .metric-title {
  color: #E0F2FE;
}

.metric-card.primary-gradient .metric-sub {
  color: #BAE6FD;
}

.metric-card.primary-gradient .metric-amount {
  color: #FFFFFF;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.metric-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.metric-amount {
  font-family: var(--font-num) !important;
  font-size: 26px;
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.metric-sub {
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.text-emerald { color: var(--accent-emerald); }
.text-rose { color: var(--accent-rose); }
.text-amber { color: var(--accent-amber); }

/* Quick Invoicing / Action Card */
.clean-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.clean-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 18px;
}

.clean-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.clean-card-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Forms & Inputs */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  transition: all 0.15s ease;
  outline: none;
}

.form-control:focus {
  background-color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Rapid Date Input Component (High-Speed Keyboard Entry) */
.rapid-date-wrapper {
  display: inline-block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.rapid-date-box {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  background-color: var(--bg-subtle, #F8FAFC);
  border: 1px solid var(--border-color, #CBD5E1);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  font-family: var(--font-num, 'Prompt', sans-serif);
  color: var(--text-main, #1E293B);
  transition: all 0.15s ease;
  box-sizing: border-box;
  position: relative;
}

.rapid-date-box:focus-within {
  background-color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.rapid-date-segment {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.rapid-date-segment:focus {
  background-color: #E0F2FE;
  color: #0284C7;
  border-radius: 4px;
}

.rapid-date-day,
.rapid-date-month {
  width: 24px;
}

.rapid-date-year {
  width: 44px;
}

.rapid-date-separator {
  color: #94A3B8;
  font-weight: 700;
  padding: 0 4px;
  user-select: none;
}

.rapid-date-calendar-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.15s ease;
}

.rapid-date-calendar-btn:hover {
  background: #E2E8F0;
  color: #0284C7;
}

.rapid-date-native-picker {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-primary);
}

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

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

.btn-secondary:hover {
  background: #FFFFFF;
  border-color: var(--text-muted);
}

.btn-success {
  background: var(--accent-emerald);
  color: #FFFFFF;
}

.btn-danger {
  background: var(--accent-rose);
  color: #FFFFFF;
}

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

/* Right Panel Elements */
.bank-metallic-card {
  background: var(--card-gradient-sky);
  border-radius: var(--radius-2xl);
  padding: 22px;
  color: #FFFFFF;
  box-shadow: var(--shadow-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  position: relative;
  overflow: hidden;
}

.bank-card-chip {
  width: 34px;
  height: 26px;
  background: #fde047;
  border-radius: 4px;
  opacity: 0.9;
}

.bank-card-accno {
  font-family: var(--font-num) !important;
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin: 12px 0 6px 0;
  font-variant-numeric: tabular-nums lining-nums;
}

.bank-card-balance {
  font-family: var(--font-num) !important;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-feature-settings: "tnum" 1, "lnum" 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Action / Cheque items list */
.action-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: 12px;
  margin-bottom: 8px;
}

.action-item-card:last-child {
  margin-bottom: 0;
}

/* Data Tables - AndersenLab High Readability & Clean Aesthetics */
.data-table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: #FFFFFF;
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 12.5px;
}

.data-table th {
  background-color: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 11.5px;
  padding: 13px 16px;
  border-bottom: 1.5px solid #E2E8F0;
  white-space: nowrap;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #F1F5F9;
  color: var(--text-body);
  background: #FFFFFF;
  transition: background-color 0.15s ease;
}

.data-table tr:nth-child(even) td {
  background-color: #FCFDFE;
}

.data-table tr:hover td {
  background-color: #F0F9FF !important;
}

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

.data-table td.num-col, 
.data-table th.num-col,
.num-col {
  text-align: right;
  font-family: var(--font-num) !important;
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Status Badges - Clean Pill Shape & High Contrast */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

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

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

.badge-warning {
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
}

.badge-info {
  background: var(--primary-light);
  color: var(--primary);
}

.badge-pv { background: #FEF2F2; color: #DC2626; }
.badge-sv { background: #ECFDF5; color: #059669; }
.badge-uv { background: #EFF6FF; color: #2563EB; }
.badge-rv { background: #F5F3FF; color: #7C3AED; }
.badge-fa { background: #FFFBEB; color: #D97706; }
.badge-jv { background: #F1F5F9; color: #475569; }

/* Modals */
.modal,
.modal-overlay,
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none !important;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
  padding: 20px;
}

.modal.active,
.modal-overlay.active,
.modal-backdrop.active {
  display: flex !important;
  pointer-events: auto !important;
}

.modal-content,
.modal-card {
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 750px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  animation: modalScaleIn 0.2s ease;
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* Glass panel compatibility */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

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

.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   POS Terminal & Cart Layout
   ========================================================================== */
.pos-grid-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  height: calc(100vh - 140px);
}

.pos-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: calc(100vh - 220px);
}

.product-card-pos {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.product-card-pos:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.product-card-pos .prod-code {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

.product-card-pos .prod-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  margin: 6px 0;
  line-height: 1.3;
}

.product-card-pos .prod-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.product-card-pos .prod-stock {
  font-size: 11px;
  color: var(--text-muted);
}

.pos-cart-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.pos-cart-items-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.pos-cart-summary {
  padding: 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .dashboard-grid-3col {
    grid-template-columns: 1fr;
  }
  .top-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pos-grid-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

@media (max-width: 768px) {
  #app-container {
    flex-direction: column;
  }
  #sidebar {
    width: 100%;
    height: auto;
  }
  .top-metrics-grid {
    grid-template-columns: 1fr;
  }
  .form-grid-2, .form-grid-3, .form-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Main Page Voucher Type Filter Tabs */
#voucher-type-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  background: #F8FAFC;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
}

#voucher-type-tabs button {
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748B;
  transition: all 0.15s ease;
}

#voucher-type-tabs button:hover {
  background: #FFFFFF;
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#voucher-type-tabs button.active {
  background: #FFFFFF;
  color: #0284C7;
  border-color: #BAE6FD;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
}

/* Modern Ultra-Premium Segmented Tab Bar for Journal Types */
/* Modern Card-Style Segmented Grid for Journal Types (Matching Requested Design) */
.voucher-segmented-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.voucher-segment-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 8px;
  border-radius: 14px;
  cursor: pointer;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #0F172A;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  user-select: none;
  min-height: 88px;
}

.voucher-segment-tab .vtab-badge {
  font-family: var(--font-num) !important;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 3px 12px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #475569;
  margin-bottom: 6px;
  transition: all 0.2s ease;
  display: inline-block;
}

.voucher-segment-tab .vtab-main-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.voucher-segment-tab .vtab-sub-title {
  font-size: 10.5px;
  font-weight: 500;
  color: #94A3B8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hover State on Inactive Cards */
.voucher-segment-tab:not(.active):hover {
  border-color: #94A3B8;
  background: #F8FAFC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Active State for each journal tab with solid crisp card */
.voucher-segment-tab.active {
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.voucher-segment-tab.active .vtab-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.voucher-segment-tab.active .vtab-main-title {
  color: #FFFFFF !important;
}

.voucher-segment-tab.active .vtab-sub-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Specific Active Colors */
.voucher-segment-tab.tab-pv.active {
  background: #E11D48 !important;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35) !important;
}

.voucher-segment-tab.tab-rv.active {
  background: #059669 !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35) !important;
}

.voucher-segment-tab.tab-sv.active {
  background: #0284C7 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35) !important;
}

.voucher-segment-tab.tab-uv.active {
  background: #D97706 !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35) !important;
}

.voucher-segment-tab.tab-jv.active {
  background: #4F46E5 !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35) !important;
}

.voucher-segment-tab.tab-fa.active {
  background: #7C3AED !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35) !important;
}



/* History Scroller Bar */
.voucher-scroller-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-xl);
  flex-wrap: wrap;
  gap: 12px;
}

.voucher-nav-controls {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.voucher-nav-btn {
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.voucher-nav-btn:hover:not(:disabled) {
  background: #F0F9FF;
  color: var(--primary);
}

.voucher-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.voucher-nav-btn + .voucher-nav-btn {
  border-left: 1px solid var(--border-subtle);
}

.voucher-number-badge {
  padding: 6px 14px;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  background: #FFFFFF;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  min-width: 140px;
  text-align: center;
}

/* Interactive COA Tree-Table */
.coa-tree-table tr {
  transition: background-color 0.15s ease;
}

.coa-tree-table tr:hover {
  background-color: #F8FAFC !important;
}

.coa-tree-row.coa-level-1 {
  background: #F8FAFC;
  font-weight: 700;
}

.coa-tree-row.coa-level-2 {
  background: #FFFFFF;
  font-weight: 600;
}

.coa-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.coa-toggle-btn:hover {
  background: #E2E8F0;
  color: var(--text-main);
}

.coa-action-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.coa-tree-row:hover .coa-action-group {
  opacity: 1;
}

.coa-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.coa-action-btn:hover {
  background: var(--bg-subtle);
  color: var(--primary);
}

.coa-action-btn.btn-delete:hover {
  background: var(--accent-rose-bg);
  color: var(--accent-rose);
}

.coa-action-btn.btn-add-sub:hover {
  background: var(--accent-emerald-bg);
  color: var(--accent-emerald);
}

/* =========================================================================
   Account Search Combobox (ช่องค้นหาและเลือกรหัสบัญชีอัจฉริยะ)
   ========================================================================= */
.account-combobox-wrapper {
  position: relative;
  width: 100%;
}

.account-combobox-input-box {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 4px 8px;
  gap: 6px;
  cursor: text;
  transition: all 0.15s ease;
  min-height: 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.account-combobox-input-box:hover {
  border-color: #94A3B8;
}

.account-combobox-input-box.focused,
.account-combobox-input-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
  background: #FFFFFF;
}

.account-code-badge {
  background: transparent;
  color: var(--text-main, #0F172A);
  border: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-num) !important;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.line-account-search-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100%;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-main);
  padding: 0 !important;
  min-width: 90px;
}

.account-combobox-clear-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #94A3B8;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.account-combobox-clear-btn:hover {
  background: #FEE2E2;
  color: #EF4444;
}

.account-combobox-chevron {
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.account-combobox-wrapper.open .account-combobox-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.account-suggestions-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 480px;
  max-width: 620px;
  background: #FFFFFF;
  border: 1.5px solid #94A3B8;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 99999 !important;
  max-height: 340px;
  overflow-y: auto;
  padding: 0;
  animation: fadeInDown 0.15s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.account-suggestions-header {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.coa-category-filter-strip {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: #F1F5F9;
  border-bottom: 1px solid #E2E8F0;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 35px;
  z-index: 9;
}
.coa-category-filter-strip::-webkit-scrollbar {
  display: none;
}

.coa-cat-pill {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.coa-cat-pill:hover {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.coa-cat-pill.active {
  background: #0284C7;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}

.account-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #F1F5F9;
  transition: all 0.12s ease;
}

.account-suggestion-item:last-child {
  border-bottom: none;
}

.account-suggestion-item:hover,
.account-suggestion-item.highlighted {
  background: #EFF6FF;
  border-left: 3px solid #2563EB;
}

.account-suggestion-item.selected {
  background: #E0F2FE;
  font-weight: 600;
}

.account-suggestion-code {
  font-family: var(--font-num) !important;
  font-weight: 800;
  color: #1D4ED8;
  font-size: 13px;
  min-width: 85px;
  letter-spacing: 0.3px;
}

.account-suggestion-name {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  flex: 1;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure table container in workstation allows dropdowns to float cleanly without being clipped */
#voucher-workstation-panel .data-table-container {
  overflow-x: visible !important;
  overflow-y: visible !important;
  min-height: 260px;
}

#voucher-lines-tbody tr {
  position: relative;
}

#voucher-lines-tbody tr:has(.account-combobox-wrapper.open) {
  position: relative;
  z-index: 99999 !important;
}

/* =========================================================================
   GL LINES - DEBIT & CREDIT GRID (ตารางบันทึกบัญชีแยกประเภทสัดส่วนสมดุล)
   ========================================================================= */
.gl-grid-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate;
  border-spacing: 0;
}

.gl-grid-table th {
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  background-color: #F8FAFC !important;
  border-bottom: 1.5px solid #CBD5E1 !important;
  white-space: nowrap;
}

.gl-grid-table td {
  padding: 4px 8px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #F1F5F9;
  background-color: #FFFFFF;
  height: 42px;
}

.gl-grid-table tr:hover td {
  background-color: #F8FAFC !important;
}

.gl-grid-table .account-combobox-input-box {
  min-height: 34px !important;
  height: 34px !important;
  padding: 2px 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gl-grid-table .line-desc,
.gl-grid-table .line-debit,
.gl-grid-table .line-credit {
  height: 34px !important;
  padding: 4px 8px !important;
  font-size: 12.5px !important;
  border-radius: 6px;
}

.gl-grid-table .btn-remove-line {
  color: #94A3B8 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.gl-grid-table .btn-remove-line:hover {
  color: #EF4444 !important;
  background: #FEE2E2 !important;
  border-color: #FECDD3 !important;
}

/* =========================================================================
   VOUCHER WORKSTATION: STRICT READ-ONLY / LOCKED MODE & EDIT MODE
   ========================================================================= */
.voucher-workstation-locked #voucher-form input,
.voucher-workstation-locked #voucher-form select,
.voucher-workstation-locked #voucher-form textarea,
.voucher-workstation-locked .rapid-date-segment-input,
.voucher-workstation-locked .account-combobox-input-box,
#voucher-form.form-locked input,
#voucher-form.form-locked select,
#voucher-form.form-locked textarea {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
  user-select: text !important;
}

/* Hide Stepper Arrows on number inputs completely in locked mode */
.voucher-workstation-locked input[type="number"]::-webkit-inner-spin-button,
.voucher-workstation-locked input[type="number"]::-webkit-outer-spin-button,
#voucher-form.form-locked input[type="number"]::-webkit-inner-spin-button,
#voucher-form.form-locked input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.voucher-workstation-locked input[type="number"],
#voucher-form.form-locked input[type="number"] {
  -moz-appearance: textfield !important;
}

/* Hide row delete and add row buttons in Locked Mode */
.voucher-workstation-locked #btn-add-line,
.voucher-workstation-locked .btn-remove-line,
.voucher-workstation-locked .account-combobox-clear-btn,
#voucher-form.form-locked #btn-add-line,
#voucher-form.form-locked .btn-remove-line,
#voucher-form.form-locked .account-combobox-clear-btn {
  display: none !important;
}

.voucher-workstation-locked .rapid-date-btn,
.voucher-workstation-locked .account-combobox-toggle-btn,
#voucher-form.form-locked .rapid-date-btn,
#voucher-form.form-locked .account-combobox-toggle-btn {
  pointer-events: none !important;
  opacity: 0.4 !important;
}

/* Visual cues for Edit Mode */
.voucher-workstation-editing #voucher-form input:not([disabled]),
.voucher-workstation-editing #voucher-form select:not([disabled]),
.voucher-workstation-editing #voucher-form textarea:not([disabled]),
.voucher-workstation-editing .account-combobox-input-box {
  border-color: #93C5FD !important;
  background-color: #FFFFFF !important;
  cursor: text !important;
}

.voucher-workstation-editing #voucher-form input:focus,
.voucher-workstation-editing #voucher-form select:focus,
.voucher-workstation-editing #voucher-form textarea:focus,
.voucher-workstation-editing .account-combobox-input-box:focus-within {
  border-color: #0284C7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* ==========================================================================
   Modern Minimal Report & Filter Toolbar System (Extract > History Style)
   ========================================================================== */
.report-breadcrumb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.report-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.report-breadcrumbs .crumb-active {
  color: var(--text-main);
  font-weight: 600;
}

.report-page-title {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

.report-filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.report-search-wrap {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}

.report-search-wrap input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  font-size: 13.5px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: #FFFFFF;
  color: #0F172A;
  transition: all 0.2s ease;
}

.report-search-wrap input:focus {
  border-color: #0284C7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.report-search-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 14px;
  pointer-events: none;
}

.report-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-btn-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-btn-dropdown:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}

.report-btn-dropdown:focus {
  border-color: #0284C7;
  outline: none;
}

/* Modern Minimal Data Table */
.minimal-table-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}

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

.minimal-data-table th {
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  background: #FFFFFF;
  border-bottom: 1.5px solid #E2E8F0;
  white-space: nowrap;
  user-select: none;
}

.minimal-data-table th.sortable-th {
  cursor: pointer;
  transition: color 0.15s ease;
}

.minimal-data-table th.sortable-th:hover {
  color: #0284C7;
  background: #F8FAFC;
}

.minimal-data-table th .sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: #94A3B8;
}

.minimal-data-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: #1E293B;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.minimal-data-table tbody tr {
  transition: background-color 0.1s ease;
}

.minimal-data-table tbody tr:hover {
  background-color: #F8FAFC;
}

/* Status Badges */
.badge-pill-success {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #059669;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #A7F3D0;
}

.badge-pill-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EFF6FF;
  color: #0284C7;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #BAE6FD;
}

.badge-pill-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFF1F2;
  color: #E11D48;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #FECDD3;
}

/* Action Buttons in Table */
.btn-table-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-table-action:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
}

.btn-icon-copy {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.btn-icon-copy:hover {
  color: #0284C7;
  background: #E0F2FE;
}

/* Pagination Bar */
.report-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  font-size: 12.5px;
  color: #64748B;
  flex-wrap: wrap;
  gap: 12px;
}

.report-pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-nav button {
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-nav button:hover:not(:disabled) {
  background: #F1F5F9;
  color: #0F172A;
}

.pagination-nav button.active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
}

.pagination-nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}



/* Financial Reports & General Ledger Workstation Styles */
.report-segmented-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #F1F5F9;
  padding: 5px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  margin-bottom: 14px;
}

.report-segmented-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-weight: 700;
  font-size: 13.5px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.report-segmented-tab:hover:not(.active) {
  background: #FFFFFF;
  color: #0F172A;
}

.report-segmented-tab.active {
  background: #FFFFFF;
  color: #7C3AED;
  border-color: #DDD6FE;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}

.report-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.report-quick-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* General Ledger Official Report Sheet */
.gl-report-sheet {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  font-family: 'Prompt', sans-serif;
  color: #0F172A;

}

.gl-official-title {
  font-size: 22px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.35em;
  text-align: left;
  margin: 6px 0 10px 0;
  text-transform: uppercase;
}

.gl-account-block {
  margin-bottom: 24px;
  border-bottom: 1px dashed #CBD5E1;
  padding-bottom: 18px;
}

.gl-account-block:last-child {
  border-bottom: none;
}

.gl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-family: 'Prompt', sans-serif !important;
}

.gl-table th {
  padding: 10px 14px;
  border-bottom: 1.5px solid #CBD5E1;
  font-weight: 700;
  font-size: 12px;
  color: #475569;
  background: #F8FAFC;
}

.gl-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #F1F5F9;
  font-family: 'Prompt', sans-serif !important;
}

.gl-table tr:hover td {
  background-color: #F8FAFC;
}

/* Asset Registry & TAS 16 / TAS 38 Registration Styles */
.asset-type-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.asset-type-card {
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.asset-type-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.asset-type-card.active-tas16 {
  border-color: #0284C7 !important;
  background: #F0F9FF !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.asset-type-card.active-tas38 {
  border-color: #0284C7 !important;
  background: #F0F9FF !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.asset-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #F1F5F9;
  flex-shrink: 0;
}

.active-tas16 .asset-card-icon {
  background: #E0F2FE;
  color: #0284C7;
}

.active-tas38 .asset-card-icon {
  background: #E0F2FE;
  color: #0284C7;
}

.asset-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #475569;
}

.active-tas16 .asset-card-badge {
  background: #0284C7;
  color: #FFFFFF;
}

.active-tas38 .asset-card-badge {
  background: #0284C7;
  color: #FFFFFF;
}

/* Monthly Matrix Table */
.asset-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.asset-matrix-table th {
  padding: 8px 6px;
  text-align: center;
  background: #F8FAFC;
  border-bottom: 2px solid #E2E8F0;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.asset-matrix-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #F1F5F9;
  font-family: var(--font-num);
}

/* E-Commerce Excel Import Workstation Styles */
.ecommerce-import-banner {
  transition: all 0.2s ease;
}

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

.aggregation-card {
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.aggregation-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.aggregation-card.active {
  border-color: #2563EB !important;
  background: #EFF6FF !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.aggregation-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  color: #94A3B8;
}

.aggregation-card.active .aggregation-card-badge {
  color: #2563EB;
}

.excel-drop-zone {
  border: 2px dashed #CBD5E1;
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  background: #FAFBFD;
  cursor: pointer;
  transition: all 0.2s ease;
}

.excel-drop-zone:hover {
  border-color: #7C3AED;
  background: #FAF5FF;
}

.excel-drop-zone.dragover {
  border-color: #2563EB;
  background: #EFF6FF;
}

.preset-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  transition: all 0.15s ease;
}

.preset-pill-btn:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.preset-pill-btn.active-tiktok {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  border-color: #7C3AED !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
}

.preset-pill-btn.active-shopee {
  background: #EA580C !important;
  color: #FFFFFF !important;
  border-color: #EA580C !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25) !important;
}

.preset-pill-btn.active-lazada {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

.preset-pill-btn.active-pos {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}

.preset-pill-btn.active-line {
  background: #059669 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}




/* Print Styles for ภ.พ.30, VAT reports, and Vouchers */
@media print {
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 12pt;
  }
  .app-sidebar,
  .app-header,
  .no-print,
  #reports-nav-tabs,
  .btn,
  .voucher-filter-bar,
  #voucher-search-input,
  .report-breadcrumb-bar,
  .report-segmented-tabs,
  .report-quick-pill,
  #report-filter-card {
    display: none !important;
  }
  .app-main {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .glass-panel,
  .clean-card,
  .print-page,
  .gl-report-sheet {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .gl-official-title {
    font-size: 18pt !important;
  }
  .data-table-container {
    overflow: visible !important;
    border: 1px solid #000000 !important;
  }
  .data-table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .data-table th,
  .data-table td {
    border: 1px solid #000000 !important;
    padding: 4px 6px !important;
    color: #000000 !important;
  }
  .voucher-ref-link {
    color: #000000 !important;
    text-decoration: none !important;
  }
  .voucher-ref-link span:last-child {
    display: none !important;
  }
}

.voucher-ref-link:hover {
  text-decoration: underline !important;
  color: #0369A1 !important;
}

/* ==========================================================================
/* ==========================================================================
   Modern Table Action System, Pill Buttons & Rich Floating Tooltips
   ========================================================================== */

.table-action-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  vertical-align: middle;
}

.btn-icon,
.btn-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 8px;
  font-size: 13.5px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  line-height: 1;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.btn-icon-sm,
.btn-action-pill.btn-sm {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 12px;
  border-radius: 7px;
}

.btn-icon-lg {
  width: 38px;
  height: 38px;
  min-width: 38px;
  font-size: 16px;
  border-radius: 10px;
}

.btn-icon:hover,
.btn-action-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn-icon:active,
.btn-action-pill:active {
  transform: translateY(0);
}

.btn-icon svg,
.btn-action-pill svg,
.btn-icon .heroicon,
.btn-action-pill .heroicon {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.btn-icon:hover svg,
.btn-action-pill:hover svg,
.btn-icon:hover .heroicon,
.btn-action-pill:hover .heroicon {
  transform: scale(1.1);
}

/* Specific Action Variants with Soft Pastel Badges & Vibrant Hover States */

/* 1. Stock Card / Blue / View */
.btn-action-stockcard,
.btn-icon-sky,
.btn-icon-blue {
  background: #F0F9FF !important;
  color: #0284C7 !important;
  border-color: #BAE6FD !important;
}
.btn-action-stockcard:hover,
.btn-icon-sky:hover,
.btn-icon-blue:hover {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

/* 2. Edit / Indigo / Purple */
.btn-action-edit,
.btn-icon-indigo,
.btn-icon-purple {
  background: #EEF2FF !important;
  color: #4F46E5 !important;
  border-color: #C7D2FE !important;
}
.btn-action-edit:hover,
.btn-icon-indigo:hover,
.btn-icon-purple:hover {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
}

/* 3. Stock In / Success / Emerald */
.btn-action-stockin,
.btn-icon-emerald,
.btn-icon-success {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border-color: #A7F3D0 !important;
}
.btn-action-stockin:hover,
.btn-icon-emerald:hover,
.btn-icon-success:hover {
  background: #059669 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

/* 4. Stock Out / Warning / Amber */
.btn-action-stockout,
.btn-icon-amber,
.btn-icon-orange {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border-color: #FDE68A !important;
}
.btn-action-stockout:hover,
.btn-icon-amber:hover,
.btn-icon-orange:hover {
  background: #D97706 !important;
  color: #FFFFFF !important;
  border-color: #D97706 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

/* 5. Delete / Danger / Rose */
.btn-action-delete,
.btn-icon-rose,
.btn-icon-danger {
  background: #FFF1F2 !important;
  color: #E11D48 !important;
  border-color: #FECDD3 !important;
}
.btn-action-delete:hover,
.btn-icon-rose:hover,
.btn-icon-danger:hover {
  background: #E11D48 !important;
  color: #FFFFFF !important;
  border-color: #E11D48 !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
}

/* 6. Primary Action */
.btn-icon-primary {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #1D4ED8 !important;
}
.btn-icon-primary:hover {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* 7. Secondary Action */
.btn-icon-secondary {
  background: #F8FAFC !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
}
.btn-icon-secondary:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 10px rgba(51, 65, 85, 0.3) !important;
}

/* ==========================================================================
   Global Rich Floating Micro-Tooltip
   ========================================================================== */

.app-floating-tooltip {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(4px) scale(0.96);
  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
}

.app-floating-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.app-floating-tooltip.pos-bottom {
  transform: translateY(-4px) scale(0.96);
}
.app-floating-tooltip.pos-bottom.visible {
  transform: translateY(0) scale(1);
}

.tooltip-content-box {
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  padding: 6px 11px;
  max-width: 290px;
  text-align: center;
  box-sizing: border-box;
}

.tooltip-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tooltip-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.tooltip-shortcut {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #E2E8F0;
}

.tooltip-body {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.35;
}

.tooltip-single {
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
}

.tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transform: rotate(45deg);
}

.app-floating-tooltip.pos-top .tooltip-arrow {
  bottom: -4px;
  border-top: none;
  border-left: none;
}

.app-floating-tooltip.pos-bottom .tooltip-arrow {
  top: -4px;
  border-bottom: none;
  border-right: none;
}


/* ==========================================================================
   Login Page & Multi-Tenant Company Selection Styles
   ========================================================================== */

.login-page-wrapper {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EBF3FA 0%, #F1F6FB 50%, #E2EDF8 100%);
  padding: 24px 16px;
  overflow-y: auto;
}

.login-card-container {
  width: 100%;
  max-width: 520px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 20px;
  box-shadow: 0 12px 36px -6px rgba(14, 165, 233, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.04);
  padding: 32px 36px;
  margin: auto 0;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E2E8F0;
}

.login-brand-logo {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
  color: #FFFFFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.login-brand-text h1 {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.2;
}

.login-brand-subtitle {
  font-size: 11.5px;
  color: #64748B;
  font-weight: 500;
}

.login-heading-box {
  margin-bottom: 20px;
}

.login-alert-danger {
  background: #FEF2F2;
  border: 1px solid #FECDD3;
  color: #DC2626;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 16px;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-wrapper .input-icon-left {
  position: absolute;
  left: 14px;
  color: #94A3B8;
  font-size: 15px;
  pointer-events: none;
}

.login-input {
  width: 100%;
  padding: 11px 14px 11px 40px !important;
  font-size: 13.5px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  transition: all 0.2s ease;
}

.login-input:focus {
  background: #FFFFFF !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
  outline: none;
}

.btn-toggle-password {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.btn-toggle-password:hover {
  color: #334155;
}

.btn-login-submit {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

.demo-personas-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #CBD5E1;
}

.demo-divider {
  text-align: center;
  margin-bottom: 12px;
}

.demo-divider span {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  padding: 0 8px;
}

.demo-users-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.demo-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  width: 100%;
}

.demo-user-card:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.08);
}

.demo-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #E0F2FE;
  color: #0284C7;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demo-user-info {
  flex: 1;
  min-width: 0;
}

.demo-user-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-user-role {
  font-size: 11px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-user-comps {
  font-size: 10.5px;
  color: #0284C7;
  font-weight: 600;
}

.demo-user-action {
  color: #94A3B8;
  font-size: 13px;
}

.demo-user-card:hover .demo-user-action {
  color: var(--primary);
}

/* Company Selection Cards List */
.accessible-companies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.company-select-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.company-select-card:hover {
  background: #FFFFFF;
  border-color: #38BDF8;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
  transform: translateY(-2px);
}

.comp-select-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #E0F2FE;
  color: #0284C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.comp-select-info {
  flex: 1;
  min-width: 0;
}

.comp-select-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
}

.comp-select-meta {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: #64748B;
  font-family: var(--font-num);
}

.comp-select-role-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background: #F1F5F9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

.login-page-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: #64748B;
}




/* =========================================================================
   Fixed Asset Categories, Badges & Custom Dropdown Selector
   ========================================================================= */

.category-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num, 'Prompt', sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Category Badges for TAS 16 */
.cat-badge-off { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.cat-badge-com { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; }
.cat-badge-ele { background: #F0FDFA; color: #0D9488; border: 1px solid #99F6E4; }
.cat-badge-fur { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.cat-badge-veh { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }
.cat-badge-mac { background: #F8FAFC; color: #334155; border: 1px solid #CBD5E1; }
.cat-badge-bld { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.cat-badge-lhi { background: #FAF5FF; color: #9333EA; border: 1px solid #E9D5FF; }
.cat-badge-oth { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }

/* Category Badges for TAS 38 */
.cat-badge-sfw { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.cat-badge-lic { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; }
.cat-badge-cpy { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.cat-badge-trd { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.cat-badge-frn { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; }
.cat-badge-oth-ia { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }

/* Custom Category Dropdown Selector (Matching User Screenshot) */
.custom-category-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-category-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  min-height: 42px;
}

.custom-category-trigger:hover,
.custom-category-trigger.active {
  border-color: #0284C7;
  background: #F0F9FF;
}

.custom-category-trigger .trigger-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-category-trigger .trigger-chevron {
  color: #64748B;
  font-size: 11px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.custom-category-trigger.active .trigger-chevron {
  transform: rotate(180deg);
  color: #0284C7;
}

.custom-category-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1050;
  padding: 6px;
}

.custom-category-menu.show {
  display: block;
}

.custom-category-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  user-select: none;
  margin-bottom: 2px;
}

.custom-category-option:hover {
  background: #F8FAFC;
  color: #0F172A;
}

.custom-category-option.selected {
  background: #F0F9FF;
  color: #0284C7;
  font-weight: 700;
}

.custom-category-option .opt-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-category-option .opt-check {
  color: #0284C7;
  font-weight: 800;
  font-size: 14px;
}

/* Category Group Header Rows in Tables */
.category-group-header-row {
  background: linear-gradient(90deg, #F8FAFC 0%, #F1F5F9 100%) !important;
  border-top: 2px solid #CBD5E1 !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
}

.category-group-header-row td {
  padding: 10px 14px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.category-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
}

.category-subtotal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #E2E8F0;
  color: #334155;
}


/* ==========================================================================
   Heroicons Vector SVG Icon System (Tailwind CSS Team - MIT License)
   ========================================================================== */
.heroicon {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-icon svg,
.nav-icon .heroicon {
  width: 18px;
  height: 18px;
}

.btn svg,
.btn .heroicon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.btn-icon svg,
.btn-icon .heroicon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  margin: 0 auto;
}

.btn-icon-sm svg,
.btn-icon-sm .heroicon {
  width: 13px;
  height: 13px;
}

.btn-icon-lg svg,
.btn-icon-lg .heroicon {
  width: 18px;
  height: 18px;
}

.input-icon-left svg,
.input-icon-left .heroicon {
  width: 15px;
  height: 15px;
  color: #94A3B8;
}

.trigger-chevron svg,
.trigger-chevron .heroicon {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.opt-check svg,
.opt-check .heroicon {
  width: 14px;
  height: 14px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* 500+ Multi-Tenant Company Selector & Filter Pills */
.btn-filter-pill {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.btn-filter-pill:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
}

.btn-filter-pill.active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.company-select-card:hover {
  border-color: #0284C7 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.12) !important;
}

.demo-user-card:hover {
  border-color: #0284C7 !important;
  background: #EFF6FF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   CLEAN MODERN SAAS LOGIN PORTAL (MATCHING INNER ERP DESIGN)
   ========================================================================== */

.clean-login-wrapper {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F0F9FF 0%, #F8FAFC 50%, #E0F2FE 100%);
  padding: 32px 16px;
  overflow-y: auto;
  position: relative;
}

.clean-login-container {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.02);
  padding: 36px 32px;
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 10;
  transition: max-width 0.25s ease;
}

/* Header */
.clean-login-header {
  text-align: center;
  margin-bottom: 24px;
}

.clean-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.brand-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
  letter-spacing: -0.5px;
}

.brand-text-block {
  text-align: left;
}

.clean-brand-name {
  font-size: 22px;
  font-weight: 900;
  color: #0F172A;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.clean-brand-tag {
  font-size: 11.5px;
  color: #0284C7;
  font-weight: 700;
}

.clean-login-subtext {
  font-size: 12.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
}

/* Step Views */
.clean-step-view {
  width: 100%;
}

/* Role Tabs */
.clean-role-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.clean-role-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 3px;
  font-family: inherit;
}

.clean-role-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.6);
  color: #0F172A;
}

.clean-role-tab.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.clean-role-tab .tab-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.clean-role-tab.active .tab-icon svg {
  stroke: #0284C7 !important;
}

.clean-role-tab .tab-label {
  font-size: 10.5px;
  white-space: nowrap;
}

/* Role Hint Box */
.clean-role-hint-card {
  background: linear-gradient(135deg, #F0F9FF 0%, #FFFFFF 100%);
  border: 1.5px solid #BAE6FD;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.05);
}

.role-hint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.role-hint-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0284C7;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.role-hint-meta {
  flex: 1;
  min-width: 0;
}

.role-hint-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
}

.role-hint-role {
  font-size: 11px;
  color: #0284C7;
  font-weight: 700;
}

.role-hint-desc {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
  border-top: 1px dashed #E2E8F0;
  padding-top: 6px;
}

/* Divider */
.clean-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 14px 0 16px 0;
}

.clean-divider::before, .clean-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px dashed #E2E8F0;
}

.clean-divider span {
  padding: 0 10px;
  font-size: 11.5px;
  color: #94A3B8;
  font-weight: 600;
}

/* Form Inputs */
.clean-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.clean-input-box .input-icon-left {
  position: absolute;
  left: 12px;
  color: #94A3B8;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.clean-input-box .form-control {
  width: 100%;
  height: 40px !important;
  padding: 8px 12px 8px 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  transition: all 0.15s ease;
}

.clean-input-box .form-control:focus {
  background: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  outline: none;
}

/* Footer Badge */
.clean-compliance-footer {
  margin-top: 20px;
  text-align: center;
}

.compliance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
  background: #F8FAFC;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
}

.compliance-pill svg {
  width: 13px !important;
  height: 13px !important;
  color: #0284C7 !important;
}



/* =========================================================================
   Executive Financial Reports & Tax Center 2026 Redesign
   ========================================================================= */

.reports-hub-wrapper {
  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #0F172A;
}

.reports-header-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.reports-title-area {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reports-title-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  flex-shrink: 0;
}

.reports-title-icon svg {
  width: 26px;
  height: 26px;
}

.reports-title-text h1 {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
}

.reports-title-text p {
  font-size: 13px;
  color: #64748B;
  margin: 4px 0 0 0;
}

.reports-top-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Categorized Report Tabs */
.reports-category-nav {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reports-nav-category-label {
  font-size: 11px;
  font-weight: 800;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 0 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reports-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.reports-nav-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.reports-nav-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.reports-nav-btn.active svg {
  color: #38BDF8 !important;
}

.reports-nav-btn.active-emerald {
  background: #059669 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}

.reports-nav-btn.active-purple {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}

.reports-nav-btn.active-rose {
  background: #E11D48 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25) !important;
}

/* Unified Filter Card */
.reports-filter-panel {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.reports-filter-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1.6fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1024px) {
  .reports-filter-grid {
    grid-template-columns: 1fr;
  }
}

.reports-filter-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.reports-filter-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 5px;
}

.reports-quick-scope-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.reports-scope-pill {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.reports-scope-pill:hover {
  background: #F0F9FF;
  color: #0284C7;
  border-color: #BAE6FD;
}

.reports-scope-pill.active {
  background: #E0F2FE;
  color: #0284C7;
  border-color: #7DD3FC;
  font-weight: 800;
}

/* Date Range Inputs */
.reports-date-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 4px 8px;
  transition: all 0.15s ease;
}

.reports-date-box:focus-within {
  background: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.reports-date-input {
  border: none !important;
  background: transparent !important;
  font-family: var(--font-num) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  padding: 4px !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
}

.reports-quick-date-bar {
  display: flex;
  gap: 4px;
}

.reports-date-pill {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
}

.reports-date-pill:hover {
  background: #F1F5F9;
}

.reports-date-pill.active {
  background: #4F46E5;
  color: #FFFFFF;
  border-color: #4F46E5;
}

/* Filter Options Footer */
.reports-filter-footer {
  border-top: 1px solid #F1F5F9;
  margin-top: 16px;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.reports-options-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.reports-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.reports-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #4F46E5;
  cursor: pointer;
}

/* Report Action CTA Button */
.btn-fetch-cta {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 10px 24px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-fetch-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4) !important;
}

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

.btn-fetch-cta:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* KPI Overview Banner */
.reports-kpi-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.reports-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.reports-kpi-card.emerald {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.reports-kpi-card.rose {
  background: #FFF1F2;
  border-color: #FECDD3;
}

.reports-kpi-card.sky {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

.reports-kpi-card.indigo {
  background: #EEF2FF;
  border-color: #C7D2FE;
}

.reports-kpi-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reports-kpi-val {
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font-num);
  color: #0F172A;
}

/* Report Paper Sheet */
.gl-report-sheet {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  color: #0F172A;
}

/* Classic Standard Accounting Table */
.classic-accounting-table {
  width: 100%;
  border-collapse: collapse;
  border: none !important;
  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0F172A;
}

.classic-accounting-table th {
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-weight: 700;
  border-top: 1.5px solid #0F172A !important;
  border-bottom: 1.5px solid #0F172A !important;
  border-left: none !important;
  border-right: none !important;
  padding: 5px 6px;
}

.classic-accounting-table td {
  border-top: none !important;
  border-bottom: 1px dashed #E2E8F0 !important;
  border-left: none !important;
  border-right: none !important;
  padding: 4px 6px;
  color: #0F172A;
}

.classic-accounting-table tfoot td {
  border-top: 1.5px solid #0F172A !important;
  border-bottom: 3px double #0F172A !important;
  border-left: none !important;
  border-right: none !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-weight: 800;
  padding: 6px 6px;
}

/* Express Style Hierarchical Tree Menu */
.express-report-tree-pane {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.express-tree-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 11.5px;
  color: #1E293B;
  transition: all 0.15s ease;
  user-select: none;
}

.express-tree-group-header:hover {
  background: #F1F5F9;
  color: #0284C7;
}

.express-tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  color: #475569;
  transition: all 0.15s ease;
  user-select: none;
}

.express-tree-item:hover {
  background: #F8FAFC;
  color: #0284C7;
}

.express-tree-item.active {
  background: #E0F2FE;
  color: #0369A1;
  font-weight: 700;
  border-left: 2.5px solid #0284C7;
}

.report-criteria-box {
  background: #FFFDF7;
  border: 1.5px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

/* =========================================================================
   Dynamic Report Print Orientation (Portrait vs Landscape Live Preview)
   ========================================================================= */
.report-orientation-segmented {
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.btn-orientation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: #475569;
  line-height: 1.3;
}

.btn-orientation-toggle:hover {
  color: #0F172A;
  background: #E2E8F0;
}

.btn-orientation-toggle.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3) !important;
}

/* Live Preview Sheet Dimensions (Screen Only) */
.printable-a4-sheet,
.a4-sheet-container {
  transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.printable-a4-sheet.orientation-portrait,
.a4-sheet-container.orientation-portrait,
.gl-report-wrapper.orientation-portrait {
  max-width: 210mm !important;
  width: 100% !important;
  min-height: 297mm;
}

.printable-a4-sheet.orientation-landscape,
.a4-sheet-container.orientation-landscape,
.gl-report-wrapper.orientation-landscape {
  max-width: 297mm !important;
  width: 100% !important;
  min-height: 210mm;
}

@media print {
  .no-print,
  .app-sidebar,
  .app-header,
  .reports-top-toolbar,
  .btn-period-quick,
  .report-criteria-box,
  .express-report-tree-pane,
  .reports-category-pill {
    display: none !important;
  }
  
  #printable-a4-sheet,
  .printable-a4-sheet {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 194mm !important;
    min-height: 275mm !important;
    margin: 0 auto !important;
    padding: 12mm 15mm !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    border: none !important;
  }

  body[data-print-orientation="landscape"] #printable-a4-sheet,
  body[data-print-orientation="landscape"] .printable-a4-sheet,
  .printable-a4-sheet.orientation-landscape {
    max-width: 280mm !important;
    min-height: 195mm !important;
    padding: 8mm 10mm !important;
  }

  .gl-report-sheet {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  table.report-table,
  table.gl-table,
  table.trial-balance-table,
  .data-table {
    width: 100% !important;
    page-break-inside: auto !important;
    border-collapse: collapse !important;
  }

  table.report-table tr,
  table.gl-table tr,
  table.trial-balance-table tr,
  .data-table tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  table.report-table thead,
  table.gl-table thead,
  table.trial-balance-table thead,
  .data-table thead {
    display: table-header-group !important;
  }

  table.report-table tfoot,
  table.gl-table tfoot,
  table.trial-balance-table tfoot,
  .data-table tfoot {
    display: table-footer-group !important;
  }

  .printable-a4-sheet th,
  .printable-a4-sheet td {
    padding: 3px 5px !important;
    font-size: 9pt !important;
  }
}



/* =========================================================================
   Executive Fixed Assets (TAS 16 & TAS 38) Category & Hub Styles
   ========================================================================= */

.fa-hub-wrapper {
  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #0F172A;
}

/* 1. Header Card */
.fa-header-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

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

.fa-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  flex-shrink: 0;
}

.fa-header-titles h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fa-header-titles p {
  margin: 3px 0 0 0;
  font-size: 12.5px;
  color: #64748B;
  font-weight: 500;
}

.fa-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 2. KPI Metric Cards (Ultra-Clean Vantus Style) */
.fa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

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

@media (max-width: 640px) {
  .fa-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.fa-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fa-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

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

.fa-kpi-card-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.fa-kpi-card-val {
  font-size: 21px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #0F172A;
  line-height: 1.2;
}

.fa-kpi-card-sub {
  font-size: 11.5px;
  color: #94A3B8;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 3. Master Tabs Navigation (Segmented Pill Bar) */
.fa-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  overflow-x: auto;
  gap: 4px;
}

.fa-tabs-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.fa-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.fa-tab-btn:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.fa-tab-btn.active {
  background: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.fa-tab-badge {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 9999px;
  background: #F1F5F9;
  color: #64748B;
}

.fa-tab-btn.active .fa-tab-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* 4. Unified Clean Toolbar */
.fa-unified-toolbar {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.fa-category-ribbon {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}

.fa-category-ribbon::-webkit-scrollbar {
  display: none;
}

.fa-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  user-select: none;
}

.fa-category-pill:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
  transform: translateY(-1px);
}

.fa-category-pill.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
}

.fa-category-pill.active-tas16 {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}

.fa-category-pill.active-tas38 {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  border-color: #7C3AED !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
}

.fa-category-pill-count {
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #E2E8F0;
  color: #475569;
}

.fa-category-pill.active .fa-category-pill-count,
.fa-category-pill.active-tas16 .fa-category-pill-count,
.fa-category-pill.active-tas38 .fa-category-pill-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Category Group Accordion Header */
.category-group-header-row {
  background: #F8FAFC !important;
  border-top: 1.5px solid #CBD5E1 !important;
  border-bottom: 1.5px solid #CBD5E1 !important;
}

.category-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
  padding: 6px 0;
}

.category-code-badge {
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.category-subtotal-badge {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 2px 8px;
  border-radius: 6px;
}



/* =========================================================================
   LUXURY EXECUTIVE FINANCIAL REPORTS HUB (Next-Gen UI Redesign)
   ========================================================================= */

.reports-hub-wrapper {
  font-family: 'Prompt', 'Inter', -apple-system, sans-serif;
  color: #0F172A;
  padding-bottom: 40px;
}

/* Master Category Hero Cards (4-Quadrant Switcher) */
.reports-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.reports-hero-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reports-hero-card:hover {
  border-color: #0284C7;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
}

.reports-hero-card.active {
  background: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16);
}

.reports-hero-card.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0284C7 0%, #0369A1 100%);
}

.reports-hero-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
  background: #F0F9FF;
  color: #0284C7;
  transition: all 0.2s ease;
}

.reports-hero-card.active .reports-hero-card-icon {
  background: #0284C7;
  color: #FFFFFF;
}

.reports-hero-card-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
}

.reports-hero-card-desc {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.4;
  margin-bottom: 12px;
  flex: 1;
}

.reports-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reports-hero-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #475569;
}

.reports-hero-card.active .reports-hero-badge {
  background: #E0F2FE;
  color: #0369A1;
}

/* Sub-Report Pills Bar */
.reports-subnav-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  flex-wrap: wrap;
}

.reports-subnav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.reports-subnav-pill:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

.reports-subnav-pill.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
}

/* Smart Filter Island */
.reports-filter-island {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.reports-filter-island-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 0.9fr;
  gap: 18px;
  margin-bottom: 14px;
}

.reports-filter-island-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #F1F5F9;
  padding-top: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   Salary Advances Overview & Grouped Cards
   ========================================================================== */
.adv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.adv-kpi-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.adv-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.adv-kpi-card.amber::before { background: #D97706; }
.adv-kpi-card.emerald::before { background: #059669; }
.adv-kpi-card.sky::before { background: #0284C7; }
.adv-kpi-card.indigo::before { background: #4F46E5; }

.adv-kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.adv-kpi-value {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #0F172A;
}

.adv-kpi-sub {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 600;
}

.adv-filter-bar {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.adv-view-switcher {
  display: inline-flex;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  gap: 4px;
}

.adv-view-pill {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.adv-view-pill.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.adv-emp-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.adv-emp-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.adv-emp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.adv-emp-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.adv-emp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.adv-emp-metrics {
  display: flex;
  align-items: center;
  gap: 24px;
}

.adv-metric-box {
  text-align: right;
}

.adv-metric-box .label {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
}

.adv-metric-box .val {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-num);
}

.adv-slips-container {
  margin-top: 14px;
  border-top: 1px solid #F1F5F9;
  padding-top: 14px;
}

/* ==========================================================================
   Attendance & Work Schedule Calendar Component
   ========================================================================== */
.attendance-calendar-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
}

.calendar-header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-month-title {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  min-width: 200px;
  text-align: center;
}

.calendar-legend-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  flex-wrap: wrap;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.calendar-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.calendar-grid-wrapper {
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #F1F5F9;
  border-bottom: 1.5px solid #CBD5E1;
  text-align: center;
}

.calendar-header-cell {
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}

.calendar-header-cell.weekend {
  color: #E11D48;
  background: #FFF1F2;
}

.calendar-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #E2E8F0;
  gap: 1px;
}

.cal-day-cell {
  background: #FFFFFF;
  min-height: 105px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cal-day-cell:hover {
  background: #F8FAFC;
}

.cal-day-cell.other-month {
  background: #FAFAFA;
  opacity: 0.45;
}

.cal-day-cell.selected {
  background: #EFF6FF !important;
  box-shadow: inset 0 0 0 2px #0284C7;
}

.cal-day-cell.in-cutoff-range {
  background: #F0F9FF;
  border-top: 2px solid #38BDF8;
}

.cal-day-cell.in-cutoff-range:hover {
  background: #E0F2FE;
}

.cal-day-cell.today .cal-day-num {
  background: #0284C7;
  color: #FFFFFF;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-day-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.cal-day-num {
  font-size: 12.5px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #0F172A;
}

.cal-day-count-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #475569;
}

.cal-emp-chips-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  max-height: 75px;
}

.cal-emp-chip {
  font-size: 10.5px;
  padding: 2px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cal-emp-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  filter: brightness(0.96);
}

.cal-emp-chip.present {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.cal-emp-chip.late {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.cal-emp-chip.ot {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

.cal-emp-chip.leave {
  background: #FFF1F2;
  color: #9F1239;
  border: 1px solid #FECDD3;
}

/* Selected Day Inspector */
.calendar-day-inspector {
  background: #FFFFFF;
  border: 1.5px solid #0284C7;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid #F1F5F9;
  padding-bottom: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.inspector-emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.inspector-emp-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.inspector-emp-card:hover {
  border-color: #BAE6FD;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
  transform: translateY(-2px);
}

.inspector-emp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inspector-time-box {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.inspector-time-box:hover {
  border-color: #0284C7;
  background: #F0F9FF;
}

/* ==========================================================================
   Attendance Split Workspace & Employee Roster Dock (Drag & Assign)
   ========================================================================== */
.attendance-calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1280px) {
  .attendance-calendar-workspace {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 16px;
  }
}

@media (max-width: 1080px) {
  .attendance-calendar-workspace {
    grid-template-columns: 1fr;
  }
}

.employee-roster-dock {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.roster-emp-item {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: grab;
  transition: all 0.15s ease;
}

.roster-emp-item:hover {
  background: #F0F9FF;
  border-color: #0284C7;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.12);
  transform: translateY(-1px);
}

.roster-emp-item.dragging {
  opacity: 0.4;
  border: 2px dashed #0284C7;
  background: #E0F2FE;
}

.roster-quick-btn {
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  color: #0284C7;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.roster-quick-btn:hover {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.cal-day-cell.drop-hover,
.cal-day-cell.drag-over {
  background: #E0F2FE !important;
  border: 2px dashed #0284C7 !important;
  box-shadow: inset 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
}

/* Make roster items visually indicate they are draggable */
.roster-emp-item[draggable="true"] {
  cursor: grab;
}
.roster-emp-item[draggable="true"]:active {
  cursor: grabbing;
}

/* ==========================================================================
   Daily Attendance & Shift Log Grid (ทะเบียนบันทึกเวลาเข้า-ออกงานรายวัน)
   ========================================================================== */
.daily-attendance-log-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-top: 24px;
}

.daily-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid #F1F5F9;
  margin-bottom: 16px;
}

.daily-log-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.daily-log-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 1200px) {
  .daily-log-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .daily-log-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.daily-log-kpi-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.daily-log-kpi-item:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.daily-log-kpi-item.primary {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

.daily-log-kpi-item.emerald {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.daily-log-kpi-item.amber {
  background: #FFFBEB;
  border-color: #FDE68A;
}

.daily-log-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
}

.daily-log-kpi-val {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #0F172A;
}

.daily-log-table-container {
  overflow-x: auto;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
}

.daily-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.daily-log-table thead th {
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 11.5px;
  padding: 10px 14px;
  border-bottom: 1.5px solid #E2E8F0;
  white-space: nowrap;
}

.daily-log-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.daily-log-table tbody tr:hover {
  background: #F8FAFC;
}

.daily-log-table tfoot td {
  background: #F8FAFC;
  border-top: 2px solid #CBD5E1;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 12.5px;
}

.status-dot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.status-dot-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot-badge.on-time {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.status-dot-badge.on-time .dot {
  background: #10B981;
}

.status-dot-badge.late {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}
.status-dot-badge.late .dot {
  background: #F59E0B;
}

.status-dot-badge.ot {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}
.status-dot-badge.ot .dot {
  background: #3B82F6;
}

.status-dot-badge.leave {
  background: #FDF2F8;
  color: #9D174D;
  border: 1px solid #FBCFE8;
}
.status-dot-badge.leave .dot {
  background: #EC4899;
}

.status-dot-badge.absent {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.status-dot-badge.absent .dot {
  background: #EF4444;
}

/* Date Group Accordion & Daily Attendance Styles */
.daily-date-group-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.daily-date-group-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.daily-date-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
  gap: 10px;
  transition: background 0.15s ease;
}

.daily-date-group-header:hover {
  background: #F1F5F9;
}

.daily-date-group-header.collapsed {
  border-bottom: none;
}

.daily-date-group-body {
  transition: all 0.25s ease;
}

.daily-date-group-body.collapsed {
  display: none !important;
}

.btn-toggle-date-group .toggle-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.daily-date-group-header.collapsed .btn-toggle-date-group .toggle-icon,
.btn-toggle-date-group.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

/* ==========================================================================
   Voucher Reference & Interactive GL Drill-Down Styles
   ========================================================================== */
.voucher-ref-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.voucher-ref-link {
  font-family: var(--font-num, monospace);
  font-weight: 700;
  color: #0284C7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  transition: all 0.15s ease;
}

.voucher-ref-link:hover {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.voucher-ref-link:hover .no-print svg {
  stroke: #FFFFFF;
}

.badge-journal-pv {
  background: #FFE4E6;
  color: #BE123C;
  border: 1px solid #FECDD3;
}

.badge-journal-uv {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1px solid #E9D5FF;
}

.badge-journal-sv {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.badge-journal-jv {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
}

.badge-journal-rv {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.badge-journal-fa {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

/* GL Quick Edit Modal Styles */
.modal-gl-quick-edit {
  max-width: 880px !important;
  width: 95% !important;
}

.gl-quick-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .gl-quick-edit-grid {
    grid-template-columns: 1fr;
  }
}

.gl-quick-edit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
}

.gl-quick-edit-table th {
  background: #F8FAFC;
  padding: 8px 10px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1.5px solid #CBD5E1;
  text-align: left;
}

.gl-quick-edit-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

@media print {
  .voucher-ref-link {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
  .voucher-ref-wrapper {
    gap: 2px !important;
  }
}


/* ==========================================================================
   VANTUS ERP Modern Design System
   ========================================================================== */

.vantus-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.vantus-kpi-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.vantus-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.02);
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
}

.vantus-dots-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.vantus-dots-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.vantus-trend-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  font-family: var(--font-num);
  display: inline-flex;
  align-items: center;
}

.vantus-trend-pill.positive {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.vantus-trend-pill.negative {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.vantus-select-pill {
  display: inline-flex;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vantus-select-pill:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
}

.vantus-rank-row {
  display: grid;
  grid-template-columns: 20px 130px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}

.vantus-rank-num {
  font-weight: 800;
  color: #64748B;
  font-family: var(--font-num);
}

.vantus-rank-title {
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vantus-rank-meter-box {
  position: relative;
  height: 32px;
  background: #F1F5F9;
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.vantus-rank-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #38BDF8 0%, #0284C7 100%);
  border-radius: 9999px;
  opacity: 0.85;
  z-index: 1;
}

.vantus-rank-val {
  position: relative;
  z-index: 2;
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 700;
  color: #0F172A;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.vantus-rank-icon {
  position: absolute;
  right: 10px;
  z-index: 2;
  font-size: 14px;
}

.vantus-toggle {
  appearance: none;
  width: 32px;
  height: 18px;
  background: #CBD5E1;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease;
  vertical-align: middle;
}

.vantus-toggle::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background: #FFFFFF;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.vantus-toggle:checked {
  background: #0284C7;
}

.vantus-toggle:checked::before {
  transform: translateX(14px);
}

.vantus-tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.vantus-tab-btn:hover {
  color: #0F172A;
}

.vantus-tab-btn.active {
  color: #0284C7;
  border-bottom: 2px solid #0284C7;
  font-weight: 800;
}

/* Document Hub & Filing Center */
.vantus-folder-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.vantus-folder-card:hover {
  border-color: #0284C7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
}

.folder-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.folder-title {
  font-size: 12px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-count {
  font-size: 10.5px;
  color: #94A3B8;
  font-family: var(--font-num);
}

.vantus-doc-tab {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vantus-doc-tab:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.vantus-doc-tab.active {
  background: #EFF6FF;
  color: #0284C7;
  font-weight: 800;
}

.vantus-folder-card.active {
  border-color: #0284C7 !important;
  background: #F0F9FF !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

.quick-view-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-view-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.quick-view-item.active {
  background: #EFF6FF;
  color: #0284C7;
  font-weight: 800;
}

.upload-file-dropzone {
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  background: #F8FAFC;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-file-dropzone:hover,
.upload-file-dropzone.dragover {
  border-color: #0284C7;
  background: #EFF6FF;
}

/* =========================================================================
   Ultra-Modern Executive Commercial Invoice & Billing Suite (TAS / Revenue Compliant)
   ========================================================================= */
.modern-invoice-sheet,
.formal-accounting-sheet,
.modern-borderless-invoice {
  background: #FFFFFF;
  color: #0F172A;
  padding: 44px 48px;
  border-radius: 4px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
  border: none;
  max-width: 820px;
  margin: 0 auto 24px auto;
  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.45;
  position: relative;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.modern-invoice-toolbar {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.theme-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-color-dot:hover {
  transform: scale(1.15);
}

.theme-color-dot.active {
  outline: 2px solid #0F172A;
  outline-offset: 1px;
}

.invoice-header-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 14px;
}

.invoice-meta-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.invoice-modern-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 11.5px;
  border: none;
}

.invoice-modern-table thead tr {
  border-top: 1px solid #E2E8F0;
  border-bottom: 1.5px solid #CBD5E1;
  background: #F8FAFC;
}

.invoice-modern-table th {
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.2px;
  border: none;
}

.invoice-modern-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #F1F5F9;
  border-left: none;
  border-right: none;
  vertical-align: middle;
}

.invoice-summary-container {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  border: none;
  margin: 16px 0 24px 0;
}

.invoice-signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border: none;
  border-top: 1px solid #F1F5F9;
  margin-top: 24px;
  padding-top: 20px;
  font-size: 11px;
}

/* =========================================================================
   Unified Executive Sales Workstation & Excel-like Filter Engine
   ========================================================================= */

.sales-unified-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Unified KPI Ribbon (4 Cohesive Stats) */
.sales-kpi-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
}

.sales-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sales-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #CBD5E1;
}

.sales-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #CBD5E1;
}

.sales-kpi-card.kpi-revenue::before {
  background: linear-gradient(90deg, #10B981, #059669);
}

.sales-kpi-card.kpi-ar::before {
  background: linear-gradient(90deg, #F59E0B, #D97706);
}

.sales-kpi-card.kpi-vat::before {
  background: linear-gradient(90deg, #0284C7, #0369A1);
}

.sales-kpi-card.kpi-stock::before {
  background: linear-gradient(90deg, #8B5CF6, #6D28D9);
}

.sales-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sales-kpi-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.sales-kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  font-family: var(--font-num);
  line-height: 1.2;
}

.sales-kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Pipeline Flow Toolbar (Unified, No floating isolated box) */
.sales-flow-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sales-pipeline-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: relative;
}

.sales-flow-tab {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sales-flow-tab:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.sales-flow-tab.active {
  background: #F8FAFC;
  border-color: #CBD5E1;
  border-bottom: 3px solid #0F172A;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.sales-flow-tab-no {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
}

.sales-flow-tab.active .sales-flow-tab-no {
  color: #0F172A;
  font-weight: 800;
}

.sales-flow-tab-title {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}

.sales-flow-tab-desc {
  font-size: 11px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-flow-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9999px;
  background: #F1F5F9;
  color: #475569;
  font-family: var(--font-num);
  border: 1px solid #E2E8F0;
}

.sales-flow-tab.active .sales-flow-pill {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

/* Sales Action Menu (Contextual 3-Dots Dropdown) */
.sales-action-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.sales-action-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 1050;
  min-width: 220px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  padding: 6px;
  display: none;
  text-align: left;
  animation: fadeIn 0.1s ease-out;
}

.sales-action-menu.active {
  display: block;
}

.sales-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
  font-family: 'Prompt', sans-serif;
}

.sales-menu-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.sales-menu-item-danger {
  color: #E11D48;
}

.sales-menu-item-danger:hover {
  background: #FFF1F2;
  color: #BE123C;
}

.sales-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #64748B;
  flex-shrink: 0;
}

.sales-menu-item-danger .sales-menu-icon {
  color: #E11D48;
}

.sales-menu-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 4px 0;
}

/* Subtle Pastel Status Badges */
.sales-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sales-badge-success {
  background: #ECFDF5;
  color: #065F46;
  border-color: #A7F3D0;
}

.sales-badge-warning {
  background: #FFFBEB;
  color: #92400E;
  border-color: #FDE68A;
}

.sales-badge-blue {
  background: #F0F9FF;
  color: #075985;
  border-color: #BAE6FD;
}

.sales-badge-purple {
  background: #F5F3FF;
  color: #5B21B6;
  border-color: #DDD6FE;
}

.sales-badge-gray {
  background: #F8FAFC;
  color: #334155;
  border-color: #CBD5E1;
}

.sales-badge-danger {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FECACA;
}

.sales-type-pill-sm {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  font-family: var(--font-num);
}

/* Excel-like Table Header & Filters */
.sales-table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: visible;
  position: relative;
}

.sales-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #FAFAFA;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.sales-quick-presets {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sales-preset-btn {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sales-preset-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.sales-preset-btn.active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
}

/* Filter Active Ribbon */
.sales-active-filters-ribbon {
  background: #F0F9FF;
  border-bottom: 1px solid #BAE6FD;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.filter-tag-chip {
  background: #FFFFFF;
  border: 1px solid #7DD3FC;
  color: #0369A1;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.filter-tag-chip-remove {
  cursor: pointer;
  color: #0284C7;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.filter-tag-chip-remove:hover {
  color: #E11D48;
}

/* Excel Filter Trigger on Table Header */
.excel-th {
  position: relative;
  user-select: none;
  white-space: nowrap;
}

.excel-th-content {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

.excel-filter-trigger {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94A3B8;
  transition: all 0.15s ease;
  background: transparent;
  border: none;
  padding: 0;
  opacity: 0;
}

.excel-th:hover .excel-filter-trigger,
.excel-filter-trigger.has-filter,
.excel-filter-trigger.active {
  opacity: 1;
}

.excel-filter-trigger:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.excel-filter-trigger.has-filter {
  background: #0284C7;
  color: #FFFFFF;
  opacity: 1;
}

.excel-sort-indicator {
  font-size: 10px;
  color: #0284C7;
  font-weight: 800;
  margin-left: 2px;
}

/* Excel Filter Floating Popover */
.excel-filter-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  width: 260px;
  display: none;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  text-align: left;
  font-weight: normal;
}

.excel-filter-popover.active {
  display: flex;
}

.excel-popover-sort-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 6px;
}

.excel-popover-sort-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  transition: all 0.15s ease;
}

.excel-popover-sort-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.excel-popover-sort-btn.active {
  background: #EFF6FF;
  color: #0284C7;
  font-weight: 700;
}

.excel-popover-search-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 11.5px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  outline: none;
}

.excel-popover-search-input:focus {
  border-color: #0284C7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.1);
}

.excel-popover-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 0 2px;
}

.excel-popover-checklist {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #F8FAFC;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.excel-popover-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.excel-popover-item:hover {
  background: #E2E8F0;
}

.excel-popover-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: #0284C7;
}

.excel-popover-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1E293B;
}

.excel-popover-item-count {
  font-size: 10px;
  color: #94A3B8;
  font-family: var(--font-num);
}

.excel-popover-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid #E2E8F0;
  padding-top: 6px;
}

/* Clean & Elegant Sales Document Typography & Reference Flow */
.sales-doc-no {
  color: #0284C7;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s ease;
}

.sales-doc-no:hover {
  color: #0369A1;
  text-decoration: underline;
}

.sales-doc-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
}

.sales-doc-flow .flow-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sales-doc-flow .flow-muted {
  color: #94A3B8;
  font-size: 10.5px;
  font-weight: 500;
}

.sales-doc-flow .flow-link {
  color: #0284C7;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 11px;
  text-decoration: none;
  border-bottom: 1px dashed #BAE6FD;
  transition: all 0.15s ease;
}

.sales-doc-flow .flow-link:hover {
  color: #0369A1;
  border-bottom-color: #0284C7;
}

.sales-doc-flow .flow-sep {
  color: #CBD5E1;
  font-size: 10px;
  margin: 0 1px;
}

/* Document Type Tags - Clean & Modern (Flat, No heavy chunky borders) */
.doc-type-text {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

.doc-type-text.type-qt { background: #FDF2F8; color: #9D174D; }
.doc-type-text.type-so { background: #FEF3C7; color: #92400E; }
.doc-type-text.type-iv { background: #E0F2FE; color: #0369A1; }
.doc-type-text.type-cs { background: #DCFCE7; color: #166534; }
.doc-type-text.type-bl { background: #EDE9FE; color: #6D28D9; }
.doc-type-text.type-re { background: #F0FDF4; color: #15803D; }
.doc-type-text.type-dp { background: #CCFBF1; color: #0F766E; }
.doc-type-text.type-cn { background: #FFE4E6; color: #BE123C; }
.doc-type-text.type-dn { background: #DBEAFE; color: #1D4ED8; }

/* Interactive Reference Badges & Jump Links (Cleaned & Minimalist) */
.doc-ref-clickable-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-num);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.doc-ref-clickable-badge.ref-parent {
  color: #1D4ED8;
  background: transparent;
  border-bottom: 1px dashed #93C5FD;
}

.doc-ref-clickable-badge.ref-parent:hover {
  color: #1E40AF;
  border-bottom-color: #1D4ED8;
}

.doc-ref-clickable-badge.ref-child {
  color: #7C3AED;
  background: transparent;
  border-bottom: 1px dashed #C4B5FD;
}

.doc-ref-clickable-badge.ref-child:hover {
  color: #6D28D9;
  border-bottom-color: #7C3AED;
}

.doc-ref-clickable-badge.ref-gl {
  color: #059669;
  background: transparent;
  border-bottom: 1px dashed #86EFAC;
}

.doc-ref-clickable-badge.ref-gl:hover {
  color: #047857;
  border-bottom-color: #059669;
}

/* Document Lifecycle Trail in Preview Modal */
.doc-lifecycle-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.trail-step-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.trail-step-card:hover {
  border-color: #0284C7;
  background: #EFF6FF;
}

.trail-step-card.active-step {
  border-color: #0284C7;
  background: #0284C7;
  color: #FFFFFF;
  font-weight: 700;
}

.trail-step-card.active-step .badge {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border: none;
}

/* =========================================================================
   Payroll Interactive Number Drilldowns & Mathematical Audit Trails
   ========================================================================= */
.clickable-payroll-drilldown {
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  user-select: none;
}

.clickable-payroll-drilldown:hover {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  color: #0284C7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
  transform: translateY(-1px);
}

.clickable-payroll-drilldown.drilldown-att:hover {
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
  color: #0284C7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
}

.clickable-payroll-drilldown.drilldown-ot:hover {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #059669 !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
}

.clickable-payroll-drilldown.drilldown-advance:hover {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #D97706 !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
}

.clickable-payroll-drilldown.drilldown-tax:hover {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #DC2626 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
}

.audit-formula-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #0284C7;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 12.5px;
}

.drilldown-kpi-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.drilldown-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 14px;
}

.drilldown-kpi-card .kpi-label {
  font-size: 11px;
  color: #64748B;
  font-weight: 700;
  margin-bottom: 2px;
}

.drilldown-kpi-card .kpi-val {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  font-family: var(--font-num);
}

/* ==========================================================================
   Universal Ghost Button Styling
   ========================================================================== */

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: all 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.btn-ghost:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.btn-ghost.active {
  background: #FFFFFF;
  color: #0284C7;
  border-color: #BAE6FD;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-weight: 700;
}

/* ==========================================================================
   Inventory Modern Toolbar, Filter Bar, & Segmented Tabs System
   ========================================================================== */

/* 1. Action Capsule Group */
.inventory-action-group {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  padding: 2px;
}

.inv-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.16s ease;
  color: #475569;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.inv-toolbar-btn .inv-btn-icon {
  display: inline-flex;
  align-items: center;
}

.inv-toolbar-btn .inv-btn-icon svg {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.inv-btn-stockin {
  color: #059669;
}
.inv-btn-stockin:hover {
  background: #ECFDF5;
  color: #047857;
}

.inv-btn-stockout {
  color: #D97706;
}
.inv-btn-stockout:hover {
  background: #FFFBEB;
  color: #B45309;
}

.inv-btn-adjust {
  color: #475569;
}
.inv-btn-adjust:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.inv-toolbar-divider {
  width: 1px;
  height: 18px;
  background: #E2E8F0;
  margin: 0 1px;
}

/* 2. As Of Date Filter Bar */
.inventory-filter-bar {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  width: 100%;
  box-sizing: border-box;
}

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

.inv-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
}

.inv-filter-icon {
  color: #0284C7;
  display: inline-flex;
}

.inv-date-input-wrap {
  display: flex;
  align-items: center;
  background: #F0F9FF;
  border: 1.5px solid #BAE6FD;
  border-radius: 8px;
  overflow: hidden;
  padding: 1px;
}

.inv-date-input {
  height: 32px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0284C7;
  background: transparent;
  border: none;
  padding: 0 10px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

.inv-date-apply-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  background: #0284C7;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 6px;
  outline: none;
}
.inv-date-apply-btn:hover {
  background: #0369A1;
}

.inv-date-presets-group {
  display: inline-flex;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.inv-preset-pill {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: #64748B;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.inv-preset-pill:hover {
  color: #0F172A;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.inv-preset-pill.active {
  background: #0284C7;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}

.inv-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
}

.inv-status-pill.live {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.inv-status-pill.historical {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.pulse-emerald {
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: dotPulse 2s infinite;
}

.status-dot.amber {
  background: #F59E0B;
}

@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 3. Modern Segmented View Navigation Tabs */
.inventory-segmented-tabs {
  display: flex;
  gap: 4px;
  background: #F8FAFC;
  padding: 4px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  overflow-x: auto;
  scrollbar-width: none;
}
.inventory-segmented-tabs::-webkit-scrollbar {
  display: none;
}

.inv-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #64748B;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.inv-tab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.7);
}

.inv-tab-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  font-weight: 800;
  border-color: #BAE6FD;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1);
}

.inv-tab-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.inv-tab-icon svg {
  width: 16px;
  height: 16px;
}
.inv-tab-icon.success { color: #059669; }
.inv-tab-icon.warning { color: #D97706; }
.inv-tab-icon.purple { color: #7C3AED; }

.inv-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: #E2E8F0;
  color: #334155;
  margin-left: 2px;
}

.inv-tab-badge.badge-emerald {
  background: #DCFCE7;
  color: #166534;
}

.inv-tab-badge.badge-amber {
  background: #FEF3C7;
  color: #92400E;
}

/* ==========================================================================
   Custom Voucher Switcher Dropdown (Workstation Toolbar)
   ========================================================================== */

.voucher-switcher-dropdown-wrapper {
  position: relative;
  min-width: 300px;
  max-width: 420px;
}

.voucher-switcher-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1E293B;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
  font-family: inherit;
}

.voucher-switcher-trigger:hover {
  border-color: #38BDF8;
  background: #F8FAFC;
}

.voucher-switcher-dropdown-wrapper.open .voucher-switcher-trigger {
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.voucher-switcher-icon {
  color: #0284C7;
  display: inline-flex;
  font-size: 15px;
  flex-shrink: 0;
}

.voucher-switcher-selected-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-main);
  text-align: left;
}

.voucher-switcher-chevron {
  color: #64748B;
  display: inline-flex;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.voucher-switcher-dropdown-wrapper.open .voucher-switcher-chevron {
  transform: rotate(180deg);
  color: #0284C7;
}

.voucher-switcher-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 460px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.06);
  z-index: 99999 !important;
  overflow: hidden;
  animation: fadeInDown 0.15s ease-out;
}

.voucher-switcher-search-box {
  padding: 8px 12px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.voucher-switcher-search-icon {
  color: #94A3B8;
  display: inline-flex;
  font-size: 14px;
}

.voucher-switcher-search-input {
  flex: 1;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  color: #0F172A;
  outline: none;
  transition: border-color 0.15s ease;
}

.voucher-switcher-search-input:focus {
  border-color: #0284C7;
}

.voucher-switcher-list {
  max-height: 280px;
  overflow-y: auto;
}

.voucher-switcher-header-label {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  background: #F1F5F9;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.voucher-switcher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #F8FAFC;
  transition: all 0.12s ease;
}

.voucher-switcher-item:hover,
.voucher-switcher-item.highlighted {
  background: #EFF6FF;
  border-left: 3px solid #0284C7;
}

.voucher-switcher-item.selected {
  background: #E0F2FE;
  font-weight: 700;
}

.voucher-switcher-create-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F0FDF4;
  color: #15803D;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid #DCFCE7;
  transition: background 0.15s ease;
}

.voucher-switcher-create-item:hover {
  background: #DCFCE7;
}

.v-item-code-badge {
  font-family: var(--font-num) !important;
  font-weight: 800;
  font-size: 12.5px;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.v-item-party {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.v-item-amount {
  font-family: var(--font-num) !important;
  font-weight: 700;
  font-size: 12px;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ==========================================================================
   Journal Voucher Search Modal & Quick Search Trigger Button
   ========================================================================== */

.btn-journal-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  background: #FFFFFF;
  border: 1.5px solid #0284C7;
  border-radius: 8px;
  color: #0284C7;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.08);
  font-family: inherit;
  white-space: nowrap;
}

.btn-journal-search-trigger:hover {
  background: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
  transform: translateY(-1px);
}

.btn-journal-search-trigger:hover .search-btn-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}

.search-btn-icon {
  display: inline-flex;
  font-size: 14px;
}

.search-btn-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  background: #E0F2FE;
  color: #0369A1;
  border-radius: 4px;
  border: 1px solid #BAE6FD;
  font-family: var(--font-num);
  margin-left: 2px;
  transition: all 0.15s ease;
}

.voucher-number-badge.clickable-badge {
  cursor: pointer;
  transition: all 0.15s ease;
}

.voucher-number-badge.clickable-badge:hover {
  background: #F0F9FF;
  color: #0284C7;
}

.jv-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.jv-type-pill:hover:not(.active) {
  background: rgba(255, 255, 255, 0.7);
  color: #0F172A;
}

.jv-type-pill.active {
  background: #FFFFFF;
  color: #0284C7;
  border: 1px solid #E2E8F0;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.jv-type-pill.active .jv-pill-count {
  background: #E0F2FE;
  color: #0369A1;
}

.jv-pill-badge {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-num);
}

.jv-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #E2E8F0;
  color: #475569;
  font-size: 10.5px;
  font-family: var(--font-num);
  font-weight: 700;
}

.jv-search-row {
  cursor: pointer;
  transition: all 0.12s ease;
  border-bottom: 1px solid #F1F5F9;
}

.jv-search-row:hover {
  background-color: #F8FAFC !important;
}

.jv-search-row.highlighted {
  background-color: #F0F9FF !important;
  border-left: 3px solid #0284C7 !important;
}

.jv-highlight-match {
  background-color: #FEF08A;
  color: #854D0E;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

/* VAT In-Sheet Tab Controls */
.vat-in-sheet-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 5px 8px;
  border-radius: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-vat-sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-vat-sheet-tab:hover:not(.active) {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #CBD5E1;
}

.btn-vat-sheet-tab.active {
  background: #FFFFFF;
  color: #0284C7;
  border-color: #BAE6FD;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.12);
}

/* =========================================================================
   Part-Time & Hourly Wage Configuration Styles
   ========================================================================= */

.parttime-wage-tabs {
  display: flex;
  gap: 6px;
  background: #E0F2FE;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #BAE6FD;
  margin-bottom: 12px;
}

.parttime-wage-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #0369A1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.parttime-wage-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #0284C7;
}

.parttime-wage-tab.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
}

.preset-rate-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.preset-rate-pill {
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-num);
  border-radius: 6px;
  border: 1px solid #BAE6FD;
  background: #FFFFFF;
  color: #0284C7;
  cursor: pointer;
  transition: all 0.12s ease;
}

.preset-rate-pill:hover {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
}

.parttime-calc-card {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1.5px solid #CBD5E1;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
}

.parttime-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.parttime-calc-stat {
  display: flex;
  flex-direction: column;
}

.parttime-calc-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

.parttime-calc-stat-val {
  font-size: 13.5px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #0F172A;
}

.parttime-calc-stat-val.highlight {
  color: #0284C7;
}

/* =========================================================================
   Modern Address Cascade & Smart Autocomplete UX Styles
   ========================================================================= */

.address-container-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.address-mode-switch {
  display: inline-flex;
  background: #E2E8F0;
  padding: 3px;
  border-radius: 8px;
  gap: 3px;
}

.address-mode-btn {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  transition: all 0.12s ease;
}

.address-mode-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.address-preview-box {
  background: #FFFFFF;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
}

.address-preview-box .badge-preview {
  font-size: 10.5px;
  font-weight: 700;
  background: #E0F2FE;
  color: #0369A1;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* =========================================================================
   Thailand Address Autocomplete & Cascading Dropdown Portal Styles
   ========================================================================= */

.thai-address-dropdown-portal {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.18), 0 4px 10px -2px rgba(15, 23, 42, 0.08);
  max-height: 280px;
  overflow-y: auto;
  font-family: 'Prompt', sans-serif;
  animation: fadeInDownAddr 0.15s ease-out;
}

@keyframes fadeInDownAddr {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.thai-addr-list-header {
  padding: 8px 12px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thai-addr-item {
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  transition: all 0.1s ease;
}

.thai-addr-item:last-child {
  border-bottom: none;
}

.thai-addr-item:hover,
.thai-addr-item.active {
  background: #EFF6FF;
}

.thai-addr-item-main {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1E293B;
}

.thai-addr-sub {
  color: #0284C7;
  font-weight: 700;
}

.thai-addr-dist {
  color: #334155;
}

.thai-addr-prov {
  color: #64748B;
  font-size: 12px;
}

.thai-addr-slash {
  color: #CBD5E1;
  font-size: 11px;
}

.thai-addr-zip-badge {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 800;
  color: #0284C7;
  background: #E0F2FE;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #BAE6FD;
}

.thai-addr-empty {
  padding: 16px;
  text-align: center;
  color: #94A3B8;
  font-size: 12.5px;
}

/* =========================================================================
   Company Organization Chart & Hierarchy System Styles
   ========================================================================= */

.org-chart-wrapper {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  min-height: 600px;
  position: relative;
  overflow-x: auto;
}

.org-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: #FFFFFF;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.org-view-mode-pill {
  display: inline-flex;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 8px;
  gap: 3px;
}

.org-view-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.org-view-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.12);
}

/* --- Hierarchy Tree View Layout --- */
.org-tree-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 960px;
  padding: 10px 0 40px 0;
}

.org-tree-level {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}

.org-tree-level.level-exec {
  margin-bottom: 36px;
}

.org-tree-level.level-dept {
  display: flex;
  justify-content: center;
  gap: 28px;
  position: relative;
}

.org-tree-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 280px;
}

/* Tree Connector Lines */
.org-line-vertical-down {
  width: 2px;
  height: 24px;
  background: #CBD5E1;
  margin: 0 auto;
}

.org-branches-bar {
  position: absolute;
  top: -24px;
  left: 120px;
  right: 120px;
  height: 2px;
  background: #CBD5E1;
}

.org-branch-vertical-in {
  width: 2px;
  height: 24px;
  background: #CBD5E1;
  margin-bottom: 0;
}

/* Employee Node Card */
.org-node-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  max-width: 260px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  text-align: left;
}

.org-node-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.12);
  border-color: #0284C7;
}

.org-node-card.executive-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 100%);
  border: 2px solid #0284C7;
  max-width: 320px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15);
}

.org-node-card.dept-head-card {
  border-top: 4px solid #0284C7;
}

.org-node-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.org-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
  background: #0284C7;
  flex-shrink: 0;
}

.org-avatar.gold {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
}

.org-avatar.blue {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
}

.org-avatar.green {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.org-avatar.purple {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
}

.org-avatar.teal {
  background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%);
}

.org-node-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-node-code {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-num);
  color: #0284C7;
}

.org-node-pos {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.org-node-dept-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: #F1F5F9;
  color: #475569;
}

.org-node-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748B;
}

/* Subordinates list under each Dept */
.org-sub-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  position: relative;
}

.org-sub-member-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  padding: 10px 12px;
  transition: all 0.15s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.org-sub-member-card:hover {
  border-color: #0284C7;
  background: #F0F9FF;
  transform: translateX(3px);
}

.org-sub-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11.5px;
  color: #FFFFFF;
  background: #64748B;
  flex-shrink: 0;
}

/* --- Department Grid Matrix View --- */
.org-dept-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.org-dept-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.org-dept-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #CBD5E1;
}

.org-dept-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.org-dept-title {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-dept-stats-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.org-dept-stat-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
}

.org-dept-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #F8FAFC;
  cursor: pointer;
  transition: background 0.12s ease;
}

/* ==========================================================================
   INTERACTIVE DRAG & DROP ORG CHART & UNASSIGNED STAGING DOCK
   ========================================================================== */
.org-unassigned-dock {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px dashed #F59E0B;
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
  transition: all 0.2s ease;
}

.org-unassigned-dock.drop-target-active {
  background: #FEF9C3 !important;
  border: 2px dashed #D97706 !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25) !important;
  transform: scale(1.005);
}

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

.org-unassigned-title {
  font-size: 14px;
  font-weight: 800;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-unassigned-tray {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  min-height: 80px;
  align-items: center;
}

.org-drag-card {
  cursor: grab;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, opacity 0.18s ease;
  position: relative;
}

.org-drag-card:active {
  cursor: grabbing;
}

.org-drag-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.org-drag-card.is-dragging {
  opacity: 0.35 !important;
  transform: scale(0.95) !important;
  border: 2px dashed #0284C7 !important;
}

.org-drag-handle {
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  cursor: grab;
  transition: color 0.15s ease;
}

.org-drag-card:hover .org-drag-handle {
  color: #0284C7;
}

.org-drop-zone {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 10px;
  min-height: 48px;
}

.org-drop-zone.drop-target-active {
  background: #EFF6FF !important;
  border: 2px dashed #0284C7 !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2) !important;
  transform: scale(1.01);
}

.org-head-drop-slot {
  border: 1.5px dashed #CBD5E1;
  border-radius: 10px;
  padding: 10px;
  background: #F8FAFC;
  text-align: center;
  font-size: 11.5px;
  color: #64748B;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.org-head-drop-slot.drop-target-active {
  border-color: #D97706 !important;
  background: #FFFBEB !important;
  color: #92400E !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important;
}

.org-empty-dept-drop-hint {
  border: 1.5px dashed #CBD5E1;
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  color: #94A3B8;
  font-size: 11.5px;
  font-weight: 600;
}

/* ==========================================================================
   OFFICIAL REVENUE DEPARTMENT FORM 50 ทวิ (WITHHOLDING TAX CERTIFICATE) STYLES
   ========================================================================== */
.doc-50tawi-sheet {
  background: #FFFFFF;
  color: #000000;
  border: 1.5px solid #000000;
  padding: 16px 20px;
  font-family: 'Prompt', sans-serif;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

.doc-50tawi-top-copies {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
}

.doc-50tawi-header-center {
  text-align: center;
  margin-bottom: 8px;
}

.doc-50tawi-main-title {
  font-size: 17px;
  font-weight: 900;
  color: #000000;
  margin: 0;
  letter-spacing: 0.5px;
}

.doc-50tawi-sub-title {
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  margin: 1px 0 0 0;
}

.doc-50tawi-party-box {
  border: 1.2px solid #000000;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: #FFFFFF;
}

.doc-50tawi-party-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.doc-50tawi-party-title {
  font-weight: 800;
  font-size: 11.5px;
  color: #000000;
}

.tax-13digit-container {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-num);
  font-weight: 800;
}

.tax-13digit-box {
  width: 16px;
  height: 18px;
  border: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: #FFFFFF;
  color: #000000;
}

.tax-13digit-dash {
  font-weight: 800;
  margin: 0 1px;
  color: #000000;
}

.doc-50tawi-filing-row {
  border: 1.2px solid #000000;
  padding: 6px 10px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
}

.doc-50tawi-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000000;
  font-weight: 600;
}

.checkbox-square {
  width: 13px;
  height: 13px;
  border: 1.2px solid #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: #FFFFFF;
}

.table-50tawi-categories {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  font-size: 10.5px;
  border: 1.2px solid #000000;
}

.table-50tawi-categories th,
.table-50tawi-categories td {
  border: 1px solid #000000;
  padding: 3px 6px;
  vertical-align: top;
  color: #000000;
}

.table-50tawi-categories th {
  background: #FFFFFF;
  font-weight: 800;
  text-align: center;
  vertical-align: middle;
}

.doc-50tawi-funds-row {
  border: 1.2px solid #000000;
  padding: 5px 8px;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.doc-50tawi-payer-condition-row {
  border: 1.2px solid #000000;
  padding: 5px 8px;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.doc-50tawi-bottom-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  border: 1.2px solid #000000;
}

.doc-50tawi-warning-box {
  font-size: 9.5px;
  color: #000000;
  line-height: 1.35;
  border-right: 1px solid #000000;
  padding: 6px 8px;
}

.doc-50tawi-signature-box {
  padding: 6px 10px;
  font-size: 10.5px;
  line-height: 1.4;
  color: #000000;
  position: relative;
}

.doc-50tawi-stamp-area {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 76px;
  height: 56px;
  border: 1.2px solid #000000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  color: #000000;
  line-height: 1.1;
  text-align: center;
}

.doc-50tawi-footnote {
  font-size: 9px;
  color: #000000;
  margin-top: 4px;
  line-height: 1.3;
}

/* ==========================================================================
   DRONGO UNIFIED SAAS ENTERPRISE DESIGN SYSTEM
   Modern, Consistent, Clean Scandinavian SaaS Experience
   ========================================================================== */

:root {
  --drongo-canvas: #F8F9FA;
  --drongo-card-bg: #FFFFFF;
  --drongo-border: #E2E8F0;
  --drongo-border-subtle: #F1F5F9;
  --drongo-orange: var(--primary-accent);
  --drongo-orange-hover: var(--primary-accent-dark);
  --drongo-orange-light: var(--primary-light);
  --drongo-orange-ring: rgba(2, 132, 199, 0.18);
  --drongo-text-main: #0F172A;
  --drongo-text-muted: #64748B;
  --drongo-text-subtle: #94A3B8;
}

.drongo-workstation-container {
  padding: 0;
  background: transparent;
  min-height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 1. Header & Page Action Ribbon */
.drongo-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.drongo-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drongo-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--drongo-text-main);
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drongo-page-subtitle {
  font-size: 13px;
  color: var(--drongo-text-muted);
  margin: 0;
  font-weight: 500;
}

.drongo-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-drongo-primary {
  background: var(--drongo-orange);
  color: #FFFFFF;
  border: 1px solid var(--drongo-orange);
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 1px 3px rgba(224, 90, 52, 0.25);
  text-decoration: none;
}

.btn-drongo-primary:hover {
  background: var(--drongo-orange-hover);
  border-color: var(--drongo-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(224, 90, 52, 0.3);
  color: #FFFFFF;
}

.btn-drongo-outline {
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid var(--drongo-border);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.16s ease;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.btn-drongo-outline:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

/* 2. Metric KPI Cards Ribbon */
.drongo-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.drongo-metric-card {
  background: #FFFFFF;
  border: 1px solid var(--drongo-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 105px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  position: relative;
  text-decoration: none;
}

.drongo-metric-card:hover {
  border-color: #CBD5E1;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.drongo-metric-card.active {
  border: 1.5px solid var(--drongo-orange);
  box-shadow: 0 0 0 1px var(--drongo-orange), 0 4px 12px var(--drongo-orange-ring);
  background: #FFFFFF;
}

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

.drongo-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drongo-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.drongo-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.drongo-card-count {
  color: #94A3B8;
  font-weight: 600;
}

.drongo-card-menu-btn {
  color: #94A3B8;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
}

.drongo-card-menu-btn:hover {
  color: #1E293B;
  background: #F1F5F9;
}

.drongo-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.drongo-card-value {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  font-family: var(--font-num) !important;
  line-height: 1.1;
}

.drongo-badge-trend {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.drongo-trend-up {
  background: #DCFCE7;
  color: #16A34A;
}

.drongo-trend-down {
  background: #FEE2E2;
  color: #DC2626;
}

.drongo-trend-neutral {
  background: #F1F5F9;
  color: #64748B;
}

/* 3. Filter Bar & Workstation Controls */
.drongo-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: transparent;
}

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

.drongo-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--drongo-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: #64748B;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  min-width: 220px;
}

.drongo-search-input-wrap input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #0F172A;
  width: 100%;
  font-family: inherit;
}

.drongo-date-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--drongo-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.drongo-filter-pill-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--drongo-border);
}

.drongo-pill-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drongo-pill-btn:hover {
  color: #1E293B;
}

.drongo-pill-btn.active {
  background: #FFFFFF;
  color: var(--drongo-orange);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.drongo-filter-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 4. Unified Data Table Container */
.drongo-table-card {
  background: #FFFFFF;
  border: 1px solid var(--drongo-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

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

.drongo-table thead th {
  background: #F8FAFC;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--drongo-border);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.drongo-table thead th.sortable {
  cursor: pointer;
}

.drongo-table thead th.sortable:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.drongo-table tbody td {
  background: #FFFFFF;
  color: #1E293B;
  font-size: 13px;
  font-weight: 500;
  padding: 14px 16px;
  border-bottom: 1px solid var(--drongo-border-subtle);
  vertical-align: middle;
}

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

.drongo-table tbody tr:hover td {
  background: #F8FAFC;
}

/* Checkbox Style */
.drongo-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #CBD5E1;
  cursor: pointer;
  accent-color: var(--drongo-orange);
}

/* 5. Unified Status Badges */
.drongo-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.drongo-badge-purple {
  background: #F3E8FF;
  color: #7E22CE;
}

.drongo-badge-gray {
  background: #F1F5F9;
  color: #475569;
}

.drongo-badge-green {
  background: #DCFCE7;
  color: #15803D;
}

.drongo-badge-red {
  background: #FEE2E2;
  color: #B91C1C;
}

.drongo-badge-amber {
  background: #FEF3C7;
  color: #B45309;
}

.drongo-badge-blue {
  background: #E0F2FE;
  color: #0369A1;
}

/* 6. Pagination Footer */
.drongo-pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #FFFFFF;
  border-top: 1px solid var(--drongo-border);
  font-size: 12.5px;
  color: var(--drongo-text-muted);
}

.drongo-pagination-btn {
  background: #FFFFFF;
  border: 1px solid var(--drongo-border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drongo-pagination-btn:hover:not(:disabled) {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.drongo-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 7. Action Icon Buttons in Table */
.drongo-action-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.drongo-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drongo-icon-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #E2E8F0;
}

.drongo-icon-btn-danger:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}

/* 8. Tree Navigation in Sidebar */
.drongo-tree-container {
  padding-left: 18px;
  margin-top: 2px;
  margin-bottom: 4px;
  position: relative;
}

.drongo-tree-container::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 10px;
  width: 1.5px;
  background: #E2E8F0;
}

.drongo-tree-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 12px 6px 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.drongo-tree-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: #E2E8F0;
}

.drongo-tree-item:hover {
  color: #0F172A;
  background: #F8FAFC;
}

.drongo-tree-item.active {
  color: var(--drongo-orange);
  font-weight: 700;
  background: var(--drongo-orange-light);
}

.drongo-tree-item.active::before {
  background: var(--drongo-orange);
}

/* Account Multi-Select Checkbox Dropdown */
#btn-account-multiselect-trigger:hover {
  border-color: #0284C7 !important;
  background: #E0F2FE !important;
}

.acc-chk-row:hover {
  background: #F1F5F9 !important;
}

.btn-acc-cat-pill:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* VAT ภ.พ.30 Filter Island & Subview Tabs */
.btn-tax-month-pill:hover {
  border-color: #0284C7 !important;
  color: #0284C7 !important;
  background: #F0F9FF !important;
}

.btn-tax-month-pill.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
}

.vat-official-sheet {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.vat-tax-list-sheet {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Executive CFO Financial Dashboard Styles
   ========================================================================== */
.cfo-dashboard-wrapper {
  animation: fadeIn 0.2s ease-out;
}

.cfo-metric-card {
  transition: all 0.2s ease;
}

.cfo-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.cfo-icon-pill {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.series-toggle-btn {
  transition: all 0.15s ease;
  user-select: none;
}

.series-toggle-btn:hover {
  opacity: 0.85;
}

.chart-period-btn {
  transition: all 0.15s ease;
  user-select: none;
}

.chart-period-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #0F172A !important;
}

.ratio-metric-tile {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.ratio-metric-tile:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.top-ranked-item {
  transition: all 0.15s ease;
}

.top-ranked-item:hover {
  background: #F1F5F9 !important;
  transform: translateX(2px);
}

/* Sales Modal - Interactive GL Account Selector Styles */
.gl-posting-row {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 8px;
  transition: all 0.15s ease;
}

.gl-posting-row:hover {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

.gl-acc-select {
  border: 1px solid #CBD5E1 !important;
  background-color: #FFFFFF !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  color: #1E293B !important;
  transition: all 0.2s ease !important;
}

.gl-acc-select:focus {
  border-color: #0284C7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
  outline: none !important;
}

.btn-remove-gl-line {
  transition: all 0.15s ease;
}

.btn-remove-gl-line:hover {
  color: #DC2626 !important;
  transform: scale(1.15);
}


/* Explicitly enforce Prompt font for all print previews and modals */
.modal-content, .print-page, #sales-print-content, [id$="-print-content"] {
  font-family: 'Prompt', sans-serif !important;
}

[id$="-print-content"] * {
  font-family: 'Prompt', sans-serif !important;
}

/* ==========================================================================
   Flexible Part-Time Payout & Multi-Day Calendar Selection Styles
   ========================================================================== */
.cal-day-cell.payout-selected {
  background: #FFFDF0 !important;
  box-shadow: inset 0 0 0 2px #F59E0B, 0 2px 8px rgba(245, 158, 11, 0.15) !important;
  border-color: #FCD34D !important;
}

.cal-day-cell.payout-selected .cal-day-num {
  background: #D97706 !important;
  color: #FFFFFF !important;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.cal-day-payout-check-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-payout-checkbox {
  width: 15px;
  height: 15px;
  accent-color: #D97706;
  cursor: pointer;
  border-radius: 4px;
}

.cal-day-pt-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.cal-day-pt-tag.unpaid {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.cal-day-pt-tag.paid {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  cursor: pointer;
}

.cal-day-pt-tag.paid:hover {
  background: #D1FAE5;
  border-color: #6EE7B7;
  box-shadow: 0 1px 4px rgba(6, 95, 70, 0.18);
  transform: translateY(-0.5px);
}

.cal-day-pt-tag.partial {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
  cursor: pointer;
}

.cal-day-pt-tag.partial:hover {
  background: #FDE68A;
  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.18);
}

.cal-day-ft-tag {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.cal-emp-chip.chip-pt.paid {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}

/* Floating Payout Action Dock (Positioned Above Calendar) - Clean Light Corporate Tone */
.floating-payout-dock {
  background: #FFFFFF;
  color: #1E293B;
  border-radius: 14px;
  padding: 14px 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 0px;
  animation: slideDownDock 0.25s ease-out;
}

@keyframes slideDownDock {
  from {
    transform: translateY(-15px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.floating-payout-dock .selected-chips-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.floating-payout-dock .dock-day-chip {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.floating-payout-dock .dock-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.floating-payout-dock .dock-stat-label {
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
}

.floating-payout-dock .dock-stat-val {
  font-size: 17px;
  font-weight: 800;
  color: #0284C7;
  font-family: var(--font-num);
}

.floating-payout-dock .dock-stat-val.gold {
  color: #0F172A;
}

/* Itemized Part-Time Payslip Table */
.itemized-slip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 10px;
}

.itemized-slip-table th {
  background: #F1F5F9;
  color: #334155;
  font-weight: 700;
  padding: 6px 10px;
  text-align: left;
  border: 1px solid #E2E8F0;
}

.itemized-slip-table td {
  padding: 6px 10px;
  border: 1px solid #E2E8F0;
  color: #1E293B;
}

.itemized-slip-table tr:nth-child(even) {
  background: #F8FAFC;
}

/* ==========================================================================
   Itemized Payout Batches, Multi-Cycle Table & High-Visibility Status
   ========================================================================== */

.payroll-viewmode-segmented {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border-radius: 10px;
  padding: 3px;
  border: 1px solid #E2E8F0;
  gap: 2px;
}

.payroll-viewmode-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.payroll-viewmode-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.payroll-viewmode-btn:hover:not(.active) {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.5);
}

.batch-filter-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.batch-filter-pill {
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.batch-filter-pill:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.batch-filter-pill.active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.batch-period-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.batch-period-chip.pending {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}

.batch-period-chip.monthly {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
}

.highlight-recent-batch {
  background: #F0FDF4 !important;
  border-left: 4px solid #10B981 !important;
  animation: pulseGlowBorder 3s infinite alternate;
}

@keyframes pulseGlowBorder {
  0% {
    background-color: #F0FDF4;
    box-shadow: inset 0 0 0 1px #86EFAC;
  }
  100% {
    background-color: #DCFCE7;
    box-shadow: inset 0 0 0 1.5px #10B981, 0 0 10px rgba(16, 185, 129, 0.2);
  }
}

.badge-recent-payout {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
  animation: bounceMini 1.5s infinite;
}

@keyframes bounceMini {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* =========================================================================
   DISCRETE PAYOUT BATCH TABLE CARDS (แยกตารางตามงวดที่สั่งจ่าย)
   ========================================================================= */
.payroll-batch-card-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}

.payroll-batch-section-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.25s ease;
}

.payroll-batch-section-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  border-color: #CBD5E1;
}

.payroll-batch-section-card.highlight-recent-batch-card {
  border: 2px solid #10B981 !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.18) !important;
  background: #FFFFFF;
}

.payroll-batch-section-card.active-staged-batch-card {
  border: 2px solid #F59E0B !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.2) !important;
  background: #FFFFFF;
}

.batch-card-header {
  padding: 14px 20px;
  background: #F8FAFC;
  border-bottom: 1.5px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.payroll-batch-section-card.highlight-recent-batch-card .batch-card-header {
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border-bottom: 1.5px solid #A7F3D0;
}

.payroll-batch-section-card.active-staged-batch-card .batch-card-header {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-bottom: 1.5px solid #FDE68A;
}

.payroll-batch-section-card.pending-batch-card .batch-card-header {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-bottom: 1.5px solid #FDE68A;
}

.batch-card-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.batch-card-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.batch-card-icon-badge.paid {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.batch-card-icon-badge.pending {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}

.batch-card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-card-subinfo {
  font-size: 11.5px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.batch-card-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  font-weight: 700;
  font-size: 11px;
}

.batch-card-right-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.batch-card-total-box {
  text-align: right;
}

.batch-card-total-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
}

.batch-card-total-amount {
  font-size: 18px;
  font-weight: 800;
  color: #059669;
  font-family: var(--font-num);
}

.batch-card-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.batch-card-table thead tr {
  background: #F1F5F9;
  border-bottom: 1px solid #CBD5E1;
}

.batch-card-table th {
  padding: 9px 12px;
  font-weight: 700;
  color: #475569;
  font-size: 11.5px;
  white-space: nowrap;
}

.batch-card-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.batch-card-table tbody tr:last-child td {
  border-bottom: none;
}

.batch-card-table tbody tr:hover {
  background: #F8FAFC;
}

.batch-card-table tfoot tr {
  background: #F8FAFC;
  border-top: 1.5px solid #CBD5E1;
  font-weight: 800;
}

.batch-card-table tfoot td {
  padding: 10px 12px;
}

/* =========================================================================
   MODERN PAYOUT CONFIRMATION MODAL & ANTI-DUPLICATE GUARD STYLES
   ========================================================================= */
.payout-confirm-modal-content {
  max-width: 680px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.22);
}

.payout-guard-shield-banner {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1.5px solid #86EFAC;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.payout-guard-shield-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #10B981;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.payout-confirm-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .payout-confirm-spec-grid {
    grid-template-columns: 1fr;
  }
}

.payout-confirm-spec-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
}

.payout-confirm-spec-card.highlight {
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border: 1.5px solid #A7F3D0;
}

.payout-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed #E2E8F0;
}

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

.payout-confirm-row .label {
  color: #64748B;
  font-weight: 500;
}

.payout-confirm-row .val {
  font-weight: 700;
  color: #0F172A;
  font-family: var(--font-num);
}

.payout-confirm-total-box {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.payout-confirm-total-title {
  font-size: 12px;
  font-weight: 600;
  color: #D1FAE5;
}

.payout-confirm-total-val {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-num);
  color: #FFFFFF;
}

.payout-confirm-emp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
  padding: 8px;
  background: #F1F5F9;
  border-radius: 10px;
  margin-bottom: 18px;
}

.payout-confirm-emp-chip {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.payout-confirm-emp-chip .badge-emp-pay {
  color: #059669;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 11px;
}

.payout-gl-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-bottom: 18px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
}

.payout-gl-preview-table th {
  background: #F8FAFC;
  padding: 8px 12px;
  font-weight: 700;
  color: #475569;
  text-align: left;
  border-bottom: 1px solid #E2E8F0;
}

.payout-gl-preview-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #F1F5F9;
}

.payout-gl-preview-table tr:last-child td {
  border-bottom: none;
}

.payout-confirm-success-card {
  text-align: center;
  padding: 24px 16px;
}

.payout-success-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
  animation: modalScaleIn 0.3s ease;
}

.payout-already-paid-card {
  text-align: center;
  padding: 20px 16px;
}

.payout-already-paid-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #D97706;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 14px;
}

/* ========================================================================= */
/* UNPAID SETTLEMENT AUDIT NOTICE BANNER & INDIVIDUAL MONTHLY LEDGER STYLES */
/* ========================================================================= */

.unpaid-settlement-banner {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid #FCD34D;
  border-radius: 16px;
  padding: 14px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08);
  animation: fadeIn 0.25s ease;
}

.unpaid-settlement-banner.all-settled {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border-color: #86EFAC;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}

.unpaid-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.unpaid-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #FDE68A;
  color: #B45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.15);
}

.unpaid-settlement-banner.all-settled .unpaid-banner-icon {
  background: #A7F3D0;
  color: #047857;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.15);
}

.unpaid-banner-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #78350F;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.unpaid-settlement-banner.all-settled .unpaid-banner-title {
  color: #064E3B;
}

.unpaid-banner-subtitle {
  font-size: 11.5px;
  color: #92400E;
  margin-top: 2px;
}

.unpaid-settlement-banner.all-settled .unpaid-banner-subtitle {
  color: #047857;
}

.unpaid-banner-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.unpaid-stat-pill {
  background: #FFFFFF;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}

.unpaid-stat-pill strong {
  font-family: var(--font-num);
  font-weight: 800;
}

.btn-settle-all-unpaid {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  color: #FFFFFF !important;
  border: none;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-settle-all-unpaid:hover {
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
  transform: translateY(-1px);
}

/* Individual Monthly Ledger View */
.individual-ledger-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  margin-bottom: 24px;
}

.individual-ledger-header {
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #FAFBFD;
}

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

.individual-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.individual-ledger-table thead th {
  background: #F8FAFC;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  text-align: left;
  border-bottom: 1.5px solid #E2E8F0;
  white-space: nowrap;
}

.individual-ledger-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.individual-ledger-table tbody tr:hover {
  background: #F8FAFC;
}

.individual-ledger-table tbody tr:last-child td {
  border-bottom: none;
}

.ledger-workday-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 280px;
}

.ledger-workday-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  font-size: 10px;
  font-family: var(--font-num);
  font-weight: 700;
  border-radius: 4px;
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
}

.ledger-workday-chip.paid {
  background: #ECFDF5;
  color: #065F46;
  border-color: #A7F3D0;
}

.ledger-workday-chip.unpaid {
  background: #FFFBEB;
  color: #92400E;
  border-color: #FDE68A;
}

.ledger-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ledger-status-pill.paid {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.ledger-status-pill.unpaid {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.ledger-status-pill.partial {
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.cal-payout-checkbox:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cal-day-cell.payout-paid-day {
  background: #F0FDF4;
}

.cal-day-cell.payout-paid-day:hover {
  background: #DCFCE7;
}

/* ==========================================
   Year-End Closing & Period 0 Roll-Forward
   ========================================== */
.yec-modal-content {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  border: 1px solid #E2E8F0;
  overflow: hidden;
}

.yec-modal-header {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  padding: 20px 24px;
}

.yec-step-pill {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.btn-close-yec {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

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

/* Multi-Select Account Tag Pills & Modal Rows */
.account-tag-pill {
  transition: all 0.12s ease;
}

.account-tag-pill:hover {
  background: #DBEAFE !important;
  border-color: #93C5FD !important;
}

.coa-modal-row:hover {
  background: #F8FAFC !important;
}

.coa-modal-row.selected-row {
  background: #F0F9FF !important;
}

/* Excel-Style Column Filters */
.btn-col-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #94A3B8;
  padding: 3px 5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-col-filter:hover {
  color: #0284C7 !important;
  background: #F1F5F9 !important;
}

.btn-col-filter.active {
  color: #0284C7 !important;
  background: #E0F2FE !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}

.excel-filter-popover {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #CBD5E1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 14px;
  font-family: 'Prompt', sans-serif;
  font-size: 12px;
  color: #0F172A;
  box-sizing: border-box;
}

.excel-filter-popover input[type="text"],
.excel-filter-popover input[type="number"],
.excel-filter-popover input[type="date"],
.excel-filter-popover select {
  font-family: 'Prompt', sans-serif;
}

/* ==========================================================================
   Company Profile & Official Branding Workbench
   ========================================================================== */
.company-profile-page {
  animation: fadeIn 0.2s ease-out;
}

.company-profile-layout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1080px) {
  .company-profile-layout-grid {
    grid-template-columns: 1fr;
  }
}

.upload-dropzone {
  border: 2px dashed #CBD5E1;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.upload-dropzone:hover {
  border-color: #0284C7;
  background: #F0F9FF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}

.upload-dropzone.dragover {
  border-color: #0284C7 !important;
  background: #E0F2FE !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
  transform: scale(1.01);
}

#dropzone-company-seal:hover {
  border-color: #E11D48;
  background: #FFF1F2;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.08);
}

#dropzone-company-seal.dragover {
  border-color: #E11D48 !important;
  background: #FFE4E6 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.2) !important;
}

/* Simulated A4 Document Live Preview Card */
.simulated-a4-preview-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.05);
  font-family: 'Prompt', sans-serif;
  color: #0F172A;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.simulated-a4-preview-card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

/* PV 3-Tier Package Unified Dropdown */
.pv-dropdown-item {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: inherit;
  transition: all 0.15s ease;
}

.pv-dropdown-item:hover {
  background-color: #FFF1F2 !important;
}

.pv-dropdown-item:active {
  background-color: #FFE4E6 !important;
}


/* ========================================================= */
/* FEAT-GL-VAT-DUPLICATE-PREVENTION-01                       */
/* VAT COLOR-CODING THEMES                                   */
/* ========================================================= */

.vat-input-theme {
    background-color: #ECFDF5 !important; /* Soft Emerald Tint */
    border: 1.5px solid #10B981 !important;
}
.vat-input-theme .badge {
    background-color: #059669 !important;
    color: #FFFFFF !important;
}

.vat-output-theme {
    background-color: #EEF2FF !important; /* Soft Indigo Tint */
    border: 1.5px solid #6366F1 !important;
}
.vat-output-theme .badge {
    background-color: #4338CA !important;
    color: #FFFFFF !important;
}