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

/* CSS Custom Properties for Light/Dark Mode */
:root {
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Gradient accents */
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-header: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%);
  
  /* Background colors */
  --bg-primary: #f5f7fa;
  --bg-secondary: #fff;
  --bg-tertiary: #f3f4f6;
  --bg-header: #1f2937;
  --bg-sidebar: #111827;
  --bg-sidebar-hover: #1f2937;
  --bg-sidebar-active: #374151;
  --bg-config-header: #e5e7eb;
  --bg-config-header-hover: #d1d5db;
  --bg-overlay: rgba(0,0,0,0.5);
  
  /* Text colors */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-light: #fff;
  --text-sidebar: #cbd5e1;
  
  /* Border colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-tertiary: #9ca3af;
  
  /* Brand colors (keep consistent) */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-success: #10b981;
  --color-error: #dc2626;
  --color-warning: #f59e0b;
  
  /* Shadow colors */
  --shadow-sm: rgba(0,0,0,0.08);
  --shadow-md: rgba(0,0,0,0.15);
  --shadow-lg: rgba(0,0,0,0.3);
  
  /* Input backgrounds */
  --input-bg: #fff;
  --input-border: #d1d5db;
  
  /* Card/Tile backgrounds */
  --card-bg: #fff;
  --stat-bg: #f8fafc;
  
  /* Table colors */
  --table-header-bg: #f9fafb;
  --table-row-hover: #f3f4f6;
  --table-border: #e5e7eb;
  
  /* Chart colors - light mode */
  --chart-text: #374151;
  --chart-grid: rgba(0, 0, 0, 0.1);
  --chart-legend: #374151;
  --chart-datalabel: #374151;
  --chart-gradient-start: #2563eb;
  --chart-gradient-end: #60a5fa;
  --chart-bar-primary: #3b82f6;
  --chart-bar-secondary: #10b981;
  --chart-bar-tertiary: #f59e0b;
  --chart-line-total: #dc2626;
}

/* Dark Mode Color Overrides */
[data-theme="dark"] {
  /* Glassmorphism - dark mode */
  --glass-bg: rgba(30, 41, 59, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  
  /* Background colors */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-header: #0f172a;
  --bg-sidebar: #0f172a;
  --bg-sidebar-hover: #1e293b;
  --bg-sidebar-active: #334155;
  --bg-config-header: #334155;
  --bg-config-header-hover: #475569;
  --bg-overlay: rgba(0,0,0,0.7);
  
  /* Text colors */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-light: #fff;
  --text-sidebar: #cbd5e1;
  
  /* Border colors */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-tertiary: #64748b;
  
  /* Shadow colors */
  --shadow-sm: rgba(0,0,0,0.3);
  --shadow-md: rgba(0,0,0,0.4);
  --shadow-lg: rgba(0,0,0,0.6);
  
  /* Input backgrounds */
  --input-bg: #1e293b;
  --input-border: #475569;
  
  /* Card/Tile backgrounds */
  --card-bg: #1e293b;
  --stat-bg: #334155;
  
  /* Table colors */
  --table-header-bg: #334155;
  --table-row-hover: #334155;
  --table-border: #475569;
  
  /* Chart colors - dark mode */
  --chart-text: #e2e8f0;
  --chart-grid: rgba(255, 255, 255, 0.15);
  --chart-legend: #e2e8f0;
  --chart-datalabel: #ffffff;
  --chart-gradient-start: #3b82f6;
  --chart-gradient-end: #93c5fd;
  --chart-bar-primary: #60a5fa;
  --chart-bar-secondary: #34d399;
  --chart-bar-tertiary: #fbbf24;
  --chart-line-total: #f87171;
}

/* Smooth scrolling and better text rendering */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:"Inter", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x:hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Better focus states for accessibility */
*:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Smooth transitions for interactive elements */
button, select, input, a, .nav-item {
  transition: all 0.2s ease;
}

/* ============================================
   MICRO-INTERACTIONS & POLISH
   Subtle hover effects, focus states, and transitions
   ============================================ */

/* Enhanced button hover effects */
button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow-sm);
}

button:not(:disabled):active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 4px var(--shadow-sm);
}

/* Enhanced input focus states */
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Table row hover effects */
table tbody tr {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

table tbody tr:hover {
  background-color: var(--table-row-hover);
}

/* Clickable table rows */
table tbody tr.clickable {
  cursor: pointer;
}

table tbody tr.clickable:hover {
  background-color: rgba(59, 130, 246, 0.08);
}

table tbody tr.clickable:active {
  background-color: rgba(59, 130, 246, 0.12);
}

/* Card/tile hover effects */
.card, .summary-tile, .stat-card, .kpi-tile {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover, .summary-tile:hover, .stat-card:hover, .kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-sm);
}

/* Link hover effects */
a:not(.nav-item):not(.btn-primary):not(.btn-secondary):hover {
  color: var(--color-primary-hover);
}

/* Badge/tag hover effects */
.cc-code-badge, .status-badge, .role-badge {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cc-code-badge:hover, .status-badge:hover, .role-badge:hover {
  transform: scale(1.02);
}

/* Dropdown/select enhanced focus */
select {
  cursor: pointer;
}

select:hover:not(:disabled) {
  border-color: var(--border-tertiary);
}

/* Icon button hover effects */
.icon-btn, .action-btn, [class*="btn-icon"] {
  transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.icon-btn:hover, .action-btn:hover, [class*="btn-icon"]:hover {
  transform: scale(1.08);
  opacity: 0.9;
}

/* Chart container hover effects */
.chart-container, .chart-wrapper {
  transition: box-shadow 0.2s ease;
}

.chart-container:hover, .chart-wrapper:hover {
  box-shadow: 0 4px 16px var(--shadow-sm);
}

/* Config panel header hover improvement */
.config-header {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.config-header:hover {
  padding-left: 18px;
}

/* Modal/overlay fade transitions */
.modal, .overlay, .popup {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal.visible, .overlay.visible, .popup.visible {
  opacity: 1;
  visibility: visible;
}

/* Skeleton loading animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton, .loading-skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* Pulse animation for loading states */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Expand/collapse transitions for sections */
.collapsible-content {
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

.collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Tooltip fade-in */
.tooltip {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.tooltip.visible, *:hover > .tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Progress bar animation */
.progress-bar {
  transition: width 0.4s ease;
}

/* Notification/toast slide-in */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.toast, .notification {
  animation: slideInRight 0.3s ease forwards;
}

.toast.hiding, .notification.hiding {
  animation: slideOutRight 0.3s ease forwards;
}

/* Ripple effect for buttons (optional, activated via JS) */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10);
  opacity: 0;
  transition: transform 0.4s, opacity 0.8s;
}

.ripple:active::after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}

/* Checkbox/toggle enhanced transitions */
input[type="checkbox"] {
  transition: box-shadow 0.15s ease;
}

input[type="checkbox"]:checked {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Prevent text selection on interactive elements */
button, .nav-item, .config-header, .dropdown-item {
  user-select: none;
  -webkit-user-select: none;
}

/* Touch-action optimization for better mobile scrolling */
.content, .sidebar {
  -webkit-overflow-scrolling: touch;
}

/* Prevent tap highlight flash on iOS */
button, a, select, input, .nav-item, .config-header, .ai-analysis-header {
  -webkit-tap-highlight-color: transparent;
}

/* CONFIG PANEL - Collapsible Configuration Options */
.config-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  display: block;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.config-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-config-header);
  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
}

.config-header:hover {
  background: var(--bg-config-header-hover);
}

.config-toggle {
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.config-header.collapsed .config-toggle {
  transform: rotate(-90deg);
}

.config-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.config-expand-btn {
  margin-left: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.config-expand-btn:hover {
  background: var(--border-primary);
  color: var(--text-primary);
}

.config-body {
  padding: 12px 14px;
  transition: max-height 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
  overflow: hidden;
  background: var(--bg-secondary);
  font-size: 11px;
}

.config-body * {
  font-size: inherit;
}

.config-body label,
.config-body select,
.config-body input,
.config-body button,
.config-body span,
.config-body div {
  font-size: 11px;
}

.config-body .overview-config-box > div[style*="font-weight"] {
  font-size: 11px !important;
}

.config-body.collapsed {
  display: none !important;
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}

.config-panel .rev-controls,
.config-panel .is-controls {
  font-size: 13px;
}

.config-panel .rev-controls label,
.config-panel .is-controls label {
  font-size: 12px;
}

.config-panel .rev-controls select,
.config-panel .is-controls select {
  font-size: 12px;
  padding: 4px 8px;
}

.config-panel .checkbox-label,
.config-panel .is-checkbox-label {
  font-size: 12px;
}

/* OVERVIEW CONFIG BOXES */
.overview-config-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}

/* Overview Config Rows - Separate row for Visuals and Metrics */
.overview-config-row {
  margin-bottom: 12px;
}

.overview-config-row .overview-config-box {
  margin-bottom: 0;
}

/* Visuals and Metrics boxes layout */
.overview-visuals-box {
  display: flex;
  flex-direction: column;
}

.overview-metrics-box {
  max-width: 100%;
}

/* Visuals checkboxes - single column stack */
.visuals-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visuals-checkboxes .checkbox-label {
  font-size: 12px;
  white-space: nowrap;
}

/* Show Metrics checkboxes - 2 columns (4 left, 3 right) aligned at top */
#overview .metric-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  gap: 6px 20px;
}

#overview .metric-checkboxes .checkbox-label:nth-child(1) { grid-column: 1; grid-row: 1; }
#overview .metric-checkboxes .checkbox-label:nth-child(2) { grid-column: 1; grid-row: 2; }
#overview .metric-checkboxes .checkbox-label:nth-child(3) { grid-column: 1; grid-row: 3; }
#overview .metric-checkboxes .checkbox-label:nth-child(4) { grid-column: 1; grid-row: 4; }
#overview .metric-checkboxes .checkbox-label:nth-child(5) { grid-column: 2; grid-row: 1; }
#overview .metric-checkboxes .checkbox-label:nth-child(6) { grid-column: 2; grid-row: 2; }
#overview .metric-checkboxes .checkbox-label:nth-child(7) { grid-column: 2; grid-row: 3; }

/* Time Period Buttons */
.time-period-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.time-period-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.time-period-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
  color: var(--text-primary);
}

.time-period-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.year-slider-section {
  margin-top: 8px;
}

.year-slider-section > label,
.year-slider-section .year-range-label {
  display: block;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 12px;
  color: var(--text-primary, #374151);
}

body.dark-mode .year-slider-section > label,
body.dark-mode .year-slider-section .year-range-label {
  color: #e2e8f0;
}

.year-slider-section .range-container {
  width: calc(100% - 40px);
  min-width: 200px;
  max-width: 700px;
  position: relative;
  height: 6px;
  margin-top: 8px;
  margin-bottom: 16px;
  margin-left: 20px;
  margin-right: 20px;
}

.year-slider-section .range-container input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

/* First slider shows the track */
.year-slider-section .range-container input[type="range"]:first-of-type {
  background: var(--border-primary, #e2e8f0);
  border-radius: 3px;
  z-index: 1;
}

/* Second slider is transparent track, sits on top */
.year-slider-section .range-container input[type="range"]:last-of-type {
  background: transparent;
  z-index: 2;
}

.year-slider-section .range-container input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 3px;
}

.year-slider-section .range-container input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 3px;
}

.year-slider-section .range-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #2563eb;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: -6px;
}

.year-slider-section .range-container input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #2563eb;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .year-slider-section .range-container input[type="range"]:first-of-type {
  background: #475569;
}

body.dark-mode .year-slider-section .range-container input[type="range"]::-webkit-slider-thumb {
  background: #3b82f6;
  border-color: #1e293b;
}

body.dark-mode .year-slider-section .range-container input[type="range"]::-moz-range-thumb {
  background: #3b82f6;
  border-color: #1e293b;
}

.year-slider-section .range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  margin-top: 4px;
  padding-left: 20px;
  padding-right: 20px;
}

body.dark-mode .year-slider-section .range-labels {
  color: #60a5fa;
}

@media (max-width: 768px) {
  .year-slider-section {
    width: 100%;
  }
  
  .year-slider-section .range-container {
    width: calc(100% - 30px);
    min-width: unset;
    max-width: 100%;
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .year-slider-section .range-labels {
    font-size: 11px;
    margin-top: 6px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* INLINE YEAR RANGE SLIDERS (shared style) */
.year-range-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.year-range-inline > label {
  font-weight: 500;
  font-size: 12px;
  color: #374151;
}

body.dark-mode .year-range-inline > label {
  color: #e2e8f0;
}

.year-range-inline .year-slider {
  width: 80px;
  height: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: #e2e8f0;
  border-radius: 2px;
}

body.dark-mode .year-range-inline .year-slider {
  background: #475569;
}

.year-range-inline .year-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #2563eb;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.year-range-inline .year-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #2563eb;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .year-range-inline .year-slider::-webkit-slider-thumb {
  background: #3b82f6;
  border-color: #1e293b;
}

body.dark-mode .year-range-inline .year-slider::-moz-range-thumb {
  background: #3b82f6;
  border-color: #1e293b;
}

.year-range-inline .year-label {
  font-weight: 600;
  font-size: 12px;
  color: #3b82f6;
  min-width: 32px;
  text-align: center;
}

.year-range-inline .range-separator {
  color: #6b7280;
  font-size: 12px;
}

body.dark-mode .year-range-inline .range-separator {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .year-range-inline {
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  
  .year-range-inline > label {
    font-size: 11px;
  }
  
  .year-range-inline .year-slider {
    width: 70px;
    height: 4px;
  }
  
  .year-range-inline .year-label {
    font-size: 11px;
    min-width: 30px;
  }
  
  .year-range-inline .range-separator {
    font-size: 11px;
  }
}

/* SAVED VIEWS ROW */
.saved-views-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-primary);
}

.saved-views-select {
  flex: 1;
  max-width: 200px;
  height: 28px;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.saved-views-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.save-view-btn,
.rev-controls .save-view-btn,
.is-controls .save-view-btn,
.config-panel .save-view-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #fff !important;
  background: #2563eb !important;
  border: none !important;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  box-shadow: none !important;
}

.save-view-btn:hover,
.rev-controls .save-view-btn:hover,
.is-controls .save-view-btn:hover,
.config-panel .save-view-btn:hover {
  background: #1d4ed8 !important;
}

.delete-view-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.delete-view-btn:hover {
  color: #dc2626;
  border-color: #dc2626;
  background: #fef2f2;
}

.delete-view-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Utility class for hiding elements */
.hidden {
  display: none !important;
}

/* LOGIN SCREEN */
.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1f2937, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-screen.hidden { display: none; }

.login-box {
  background: var(--bg-secondary);
  padding: 40px 50px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 40px var(--shadow-lg);
  max-width: 400px;
  width: 90%;
  transition: background-color 0.3s ease;
}

.login-logo {
  height: 60px;
  margin-bottom: 16px;
}

.login-box h2 {
  margin-bottom: 8px;
  color: var(--text-primary);
}

.login-box p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 14px;
}

.login-box form {
  width: 100%;
}

.login-box input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 16px;
  background: var(--input-bg);
  color: var(--text-primary);
  margin-bottom: 16px;
}

.login-box input:focus {
  outline: none;
  border-color: #3b82f6;
}

.login-box button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
  transition: all 0.2s ease;
}

.login-box button:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 6px 16px rgba(59,130,246,0.4);
  transform: translateY(-1px);
}

.login-box button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}

.login-error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 12px;
}

/* HEADER */
.header {
  display:flex;
  align-items:center;
  background: var(--bg-header);
  color: var(--text-light);
  padding:16px 22px;
  position: relative;
  z-index: 150;
  box-shadow: 0 2px 8px var(--shadow-sm);
  transition: background-color 0.3s ease;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* DARK MODE TOGGLE BUTTON */
.dark-mode-toggle {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dark-mode-toggle:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
}

.dark-mode-icon-light,
.dark-mode-icon-dark {
  font-size: 18px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dark-mode-icon-light {
  opacity: 0;
  transform: rotate(-90deg);
}

.dark-mode-icon-dark {
  opacity: 1;
  transform: rotate(0deg);
}

[data-theme="dark"] .dark-mode-icon-light {
  opacity: 1;
  transform: rotate(0deg);
}

[data-theme="dark"] .dark-mode-icon-dark {
  opacity: 0;
  transform: rotate(90deg);
}

.mobile-menu-btn {
  display:none;
  font-size:26px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:8px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  margin-right: 8px;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:active {
  background: rgba(255,255,255,0.1);
}

.header-left {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.logo {
  font-size:22px;
  font-weight:600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-logo {
  height:32px;
  object-fit:contain;
  flex-shrink: 0;
}

.header-right { 
  margin-left: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* User label - reset base styles, styled by parent container */
.user-label {
  font-weight: 500;
}

.user-label:empty {
  display: none;
}

/* User label inside dropdown button inherits button styling */
.user-dropdown-btn .user-label {
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* EXPORT DROPDOWN */
.export-dropdown {
  position: relative;
}

.export-dropdown-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.export-dropdown-btn:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.5);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--shadow-md);
  min-width: 160px;
  margin-top: 8px;
  z-index: 1000;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dropdown-menu.hidden {
  display: none;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  transition: background 0.2s ease, color 0.3s ease;
}

.dropdown-item:first-child {
  border-radius: 5px 5px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 5px 5px;
}

.dropdown-item:hover {
  background: var(--bg-tertiary);
}

.dropdown-item.theme-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: default;
}

.dropdown-item.theme-selector:hover {
  background: none;
}

.dropdown-item.theme-selector select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
}

.dropdown-item.theme-selector select:focus {
  outline: none;
  border-color: #3b82f6;
}

.logout-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 40px;
}

.logout-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}

.logout-btn:active {
  background: rgba(255,255,255,0.2);
  transform: scale(0.98);
}

/* LAYOUT */
.layout {
  display:flex;
  height:calc(100vh - 70px);
  overflow:hidden;
}

/* SIDEBAR */
.sidebar {
  width: 240px;
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  padding-top: 20px;
  overflow-y: auto;
  transition: width 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  position: relative;
}

.sidebar ul { list-style: none; }

/* Hide sidebar header on desktop - only visible on mobile */
.sidebar .sidebar-header {
  display: none;
}

/* Sidebar Collapse Button */
.sidebar-collapse-btn {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  border: 2px solid var(--border-primary);
  color: var(--text-sidebar);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 10;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}

.sidebar:hover .sidebar-collapse-btn {
  opacity: 1;
}

.sidebar-collapse-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1.1);
}

.sidebar-collapse-btn .collapse-icon {
  transition: transform 0.3s ease;
}

/* Collapsed sidebar state */
.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed .sidebar-collapse-btn {
  opacity: 1;
}

.sidebar.collapsed .sidebar-collapse-btn .collapse-icon {
  transform: rotate(180deg);
}

.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-section-toggle,
.sidebar.collapsed .nav-item.nav-child {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar.collapsed .nav-section-items {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

/* Show submenu on hover when sidebar is collapsed */
.sidebar.collapsed .nav-section:hover .nav-section-items.expanded {
  position: absolute;
  left: 60px;
  top: 0;
  width: 200px;
  max-height: 400px !important;
  opacity: 1;
  background: var(--bg-sidebar);
  border-radius: 0 8px 8px 0;
  box-shadow: 4px 4px 12px var(--shadow-md);
  z-index: 100;
  padding: 8px 0;
}

.sidebar.collapsed .nav-section {
  position: relative;
}

.sidebar.collapsed .nav-section:hover .nav-section-label,
.sidebar.collapsed .nav-section:hover .nav-section-toggle {
  opacity: 0;
  width: 0;
}

.sidebar.collapsed .nav-section-header {
  justify-content: center;
  padding: 14px 0;
}

.sidebar.collapsed .nav-section-icon {
  margin-right: 0;
}

.sidebar.collapsed .nav-item.admin-nav-item {
  justify-content: center;
  padding: 14px 0;
}

.sidebar.collapsed .nav-item.admin-nav-item .nav-item-icon {
  margin-right: 0;
}

/* Layout adjustment for collapsed sidebar */
.layout.sidebar-collapsed .sidebar {
  width: 60px;
}

.layout.sidebar-collapsed .content {
  margin-left: 0;
}

/* Nav Section Styles */
.nav-section {
  margin-bottom: 4px;
}

.nav-section-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-section-header:hover {
  background: linear-gradient(135deg, #1f1f3a 0%, #1a2744 100%);
  padding-left: 22px;
}

.nav-section-header.expanded {
  border-left-color: var(--color-primary);
}

.nav-section-icon {
  font-size: 14px;
  margin-right: 10px;
  transition: transform 0.2s ease;
}

.nav-section-label {
  flex: 1;
  transition: opacity 0.2s ease, width 0.2s ease;
}

.nav-section-toggle {
  font-size: 10px;
  color: #9ca3af;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-section-header.expanded .nav-section-toggle {
  transform: rotate(180deg);
}

/* Nav Section Items (children container) */
.nav-section-items {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
}

.nav-section-items.expanded {
  max-height: 700px;
  opacity: 1;
}

/* Navigation Subgroup (nested accordion within section) */
.nav-subgroup {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-subgroup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 8px 32px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin: 4px 0;
}

.nav-subgroup-header:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
}

.nav-subgroup-header.expanded {
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.08);
}

.nav-subgroup-toggle {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

.nav-subgroup-header.expanded .nav-subgroup-toggle {
  transform: rotate(90deg);
}

.nav-subgroup-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  background: rgba(0, 0, 0, 0.03);
}

.nav-subgroup-items.expanded {
  max-height: 200px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.nav-item.nav-subchild {
  padding-left: 48px !important;
  font-size: 13px;
}

/* Dark mode for subgroups */
[data-theme="dark"] .nav-subgroup-header {
  color: #64748b;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-subgroup-header:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .nav-subgroup-header.expanded {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .nav-subgroup-items {
  background: rgba(0, 0, 0, 0.25);
}

/* Admin nav item with icon */
.nav-item.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.nav-item-label {
  transition: opacity 0.2s ease, width 0.2s ease;
}

/* Dark mode adjustments for section headers */
[data-theme="dark"] .nav-section-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .nav-section-header:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

[data-theme="dark"] .nav-section-items {
  background: rgba(0, 0, 0, 0.3);
}

.nav-item {
  padding:14px 22px;
  font-size:15px;
  cursor:pointer;
  transition: all 0.15s ease;
  border-left:4px solid transparent;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.nav-item:hover { 
  background: var(--bg-sidebar-hover);
}

.nav-item:active {
  background: var(--bg-sidebar-active);
  transform: translateX(2px);
}

.nav-item.active {
  background: var(--bg-sidebar-active);
  border-left-color: var(--color-primary);
  color: var(--text-light);
  font-weight: 500;
}

.nav-item.placeholder {
  color: #9ca3af !important;
}

.nav-item.placeholder:hover {
  color: #b0b8c4 !important;
}

.nav-item.placeholder.active {
  color: #9ca3af !important;
}

/* Expandable nav parent items - solid opaque background */
.nav-item.nav-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #000000;
  color: #ffffff;
  font-weight: 600;
}

.nav-item.nav-parent:hover {
  background: #1a1a1a;
}

.nav-item.nav-parent.expanded {
  background: #0a0a0a;
}

body.dark-mode .nav-item.nav-parent {
  background: #000000;
  color: #ffffff;
}

body.dark-mode .nav-item.nav-parent:hover {
  background: #1a1a1a;
}

body.dark-mode .nav-item.nav-parent.expanded {
  background: #0a0a0a;
}

.nav-parent-label {
  flex: 1;
  font-weight: 600;
}

.nav-item[data-section="overview"],
.nav-item.admin-nav-item {
  font-weight: 600;
}

.nav-expand-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #9ca3af;
}

.nav-item.nav-parent.expanded .nav-expand-icon {
  transform: rotate(90deg);
}

.nav-children {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-children.expanded {
  max-height: 500px;
}

.nav-item.nav-child {
  padding-left: 36px;
  font-size: 14px;
  border-left: 4px solid transparent;
}

.nav-item.nav-child:hover {
  background: var(--bg-sidebar-hover);
}

.nav-item.nav-child.active {
  background: var(--bg-sidebar-active);
  border-left-color: var(--color-primary);
}

/* Report Headers */
.report-header {
  text-align: center;
  margin-bottom: 12px;
  padding: 10px 0;
}

.report-header-company {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.report-header-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.report-header-period {
  font-size: 14px;
  color: var(--text-secondary);
}

/* MOBILE SIDEBAR */
@media (max-width:768px){
  .mobile-menu-btn{ display:block; }

  /* Lock background scrolling when menu is open */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    transform:translateX(-100%);
    width:280px;
    z-index:1001;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    background: var(--sidebar-bg);
  }

  .sidebar.open { 
    transform:translateX(0);
  }
  
  /* Fixed header inside sidebar */
  .sidebar .sidebar-header {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--sidebar-bg);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .sidebar .sidebar-header img {
    height: 36px;
    width: auto;
  }
  
  .sidebar .sidebar-header span {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }
  
  /* Scrollable nav content */
  .sidebar nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 100px;
  }
  
  .nav-item {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
  }
  
  /* Nav section styling for mobile */
  .nav-section-header {
    padding: 12px 16px;
    font-size: 12px;
    min-height: 44px;
  }
  
  .nav-section-icon {
    font-size: 16px;
    margin-right: 12px;
  }
  
  .nav-section-toggle {
    font-size: 10px;
  }
  
  .nav-section-items.expanded {
    max-height: 800px;
  }
  
  .nav-section-items .nav-item.nav-child {
    padding: 12px 16px 12px 44px;
    font-size: 14px;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Ensure sidebar fills screen properly */
  .sidebar.open {
    width: min(280px, 85vw);
  }
  
  /* Keep sidebar collapse button circular on mobile */
  .sidebar-collapse-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 0;
  }
  
  .overlay {
    z-index: 1000;
  }
}

.overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.overlay.hidden { 
  display:none;
  opacity: 0;
}

/* CONTENT */
.content {
  flex:1;
  padding:30px;
  overflow-y:auto;
  scroll-behavior: smooth;
  position: relative;
}

/* Export area positioned top right of content area */
.content-export-area {
  position: absolute;
  top: 10px;
  right: 30px;
  z-index: 100;
}

/* Desktop Export Ribbon */
.export-ribbon {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 6px 10px;
}

.ribbon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  min-width: 50px;
}

.ribbon-btn:hover {
  background: var(--border-primary);
}

.ribbon-icon {
  font-size: 18px;
  line-height: 1;
}

.ribbon-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ribbon-btn:hover .ribbon-label {
  color: var(--text-primary);
}

/* Mobile dropdown - hidden on desktop */
.export-dropdown.mobile-only {
  display: none;
}

.content-export-area .export-dropdown-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.content-export-area .export-dropdown-btn:hover {
  background: var(--border-primary);
  border-color: var(--border-tertiary);
}

.content-export-area .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
}

/* Tablet breakpoint - show dropdown instead of ribbon */
@media (max-width:1024px) {
  .export-ribbon {
    display: none;
  }
  
  .export-dropdown.mobile-only {
    display: block;
  }
}

@media (max-width:768px) {
  .content {
    padding: 20px 16px;
    position: relative;
  }
  
  .content-export-area {
    position: fixed;
    top: auto;
    bottom: 80px;
    right: 16px;
    z-index: 1000;
  }
  
  /* Hide ribbon on mobile, show dropdown */
  .export-ribbon {
    display: none !important;
  }
  
  .export-dropdown.mobile-only {
    display: block !important;
  }
  
  /* Floating action button style on mobile */
  .content-export-area .export-dropdown-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
    border-radius: 50%;
    background: var(--primary-color, #3b82f6);
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  
  .content-export-area .export-dropdown-btn:hover,
  .content-export-area .export-dropdown-btn:active {
    background: var(--primary-hover, #2563eb);
  }
  
  .content-export-area .dropdown-menu {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
    margin-top: 0;
  }
  
  /* Table export buttons - compact on mobile */
  .table-export-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .table-export-btns .export-table-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
}

.dashboard-section { 
  display: none;
  opacity: 0;
  transform: translateY(15px);
}

.dashboard-section.visible { 
  display: block;
  animation: sectionFadeIn 0.35s ease-out forwards;
}

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

.dashboard-section h2 { 
  margin-bottom:20px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Placeholder Content for Under Construction Pages */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.placeholder-content h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.placeholder-content p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* KPI CARDS */
.card-container {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
  margin-top:20px;
}

.card {
  background: var(--card-bg);
  padding:20px;
  border-radius:8px;
  box-shadow: 0 2px 8px var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.card-title { font-size:14px; font-weight:600; color:var(--text-secondary); }
.card-value { font-size:26px; font-weight:700; margin-top:4px; }

/* CHART WITH TILES LAYOUT */
.chart-with-tiles {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  align-items: stretch;
}

.summary-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
  width: 180px;
  flex-shrink: 0;
}

.summary-tile {
  background: var(--card-bg);
  padding: 20px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow-sm);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.summary-tile:hover {
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.tile-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.tile-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.tile-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* Larger screens - bigger tiles */
@media (min-width: 1200px) {
  .summary-tiles {
    min-width: 200px;
    width: 200px;
  }
  
  .tile-label {
    font-size: 15px;
  }
  
  .tile-value {
    font-size: 28px;
  }
  
  .tile-sub {
    font-size: 13px;
  }
}

@media (min-width: 1600px) {
  .summary-tiles {
    min-width: 220px;
    width: 220px;
  }
  
  .tile-label {
    font-size: 16px;
  }
  
  .tile-value {
    font-size: 32px;
  }
  
  .tile-sub {
    font-size: 14px;
  }
}

.partial-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-primary);
}

/* OVERVIEW METRIC TILES */
.overview-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
  width: 80%;
  margin-left: 0;
  margin-right: auto;
}

.overview-metric-tile {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 12px var(--shadow-sm);
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease;
  cursor: pointer;
}

.overview-metric-tile:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.overview-metric-tile:active {
  transform: translateY(0);
}

.metric-tile-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.metric-tile-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0;
}

.metric-tile-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 6px;
}

.metric-tile-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  position: relative;
}

.metric-info-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
  display: none;
}

.metric-info-btn:hover {
  color: #3b82f6;
  background: #e0f2fe;
}

.metric-info-btn:active {
  background: #bfdbfe;
}

@media (max-width: 768px) {
  .metric-info-btn {
    display: inline-block;
  }
}

.metric-info-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1f2937;
  color: #fff;
  padding: 16px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 10000;
  max-width: 300px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  animation: popupFadeIn 0.2s ease-out;
}

.metric-info-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  animation: overlayFadeIn 0.2s ease-out;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

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

.metric-info-popup-close {
  display: block;
  margin: 12px auto 0;
  padding: 8px 20px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.metric-info-popup-close:hover {
  background: #2563eb;
}

.overview-metric-tile canvas {
  display: block;
  max-width: 100%;
  height: 180px !important;
  min-height: 180px;
  max-height: 180px;
  flex-shrink: 0;
  flex-grow: 0;
}

.metric-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-primary);
}

.stat-box {
  background: var(--stat-bg);
  border-radius: 5px;
  padding: 6px 4px;
  text-align: center;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-box:hover {
  background: var(--bg-tertiary);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}

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

.stat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-value.negative {
  color: #dc2626;
}

.stat-period {
  font-size: 8px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.chart-data-toggle {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-data-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--primary);
}

.chart-data-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  opacity: 0;
}

.chart-data-wrapper.collapsed {
  max-height: 0;
  opacity: 0;
}

.chart-data-wrapper.expanded {
  max-height: 400px;
  opacity: 1;
  overflow-y: auto;
  margin-top: 10px;
}

.overview-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.overview-data-table th,
.overview-data-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border-primary);
}

.overview-data-table th:first-child,
.overview-data-table td:first-child {
  text-align: left;
}

.overview-data-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
}

.overview-data-table tr:hover {
  background: var(--bg-tertiary);
}

.overview-data-table td {
  color: var(--text-primary);
}

@media (max-width: 1024px) {
  .overview-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
  }
}

@media (max-width: 600px) {
  .overview-tiles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
  }
  
  .overview-metric-tile {
    padding: 16px;
  }
  
  .overview-metric-tile canvas {
    max-width: 100%;
    height: 160px !important;
    min-height: 160px;
    max-height: 160px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  
  .metric-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  
  .stat-box {
    padding: 6px 2px;
  }
  
  .stat-label {
    font-size: 8px;
  }
  
  .stat-value {
    font-size: 11px;
  }
}

.partial-indicator {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #f59e0b;
  border-radius: 3px;
}

/* CHART BOX */
.chart-box {
  background: var(--card-bg);
  padding:30px 40px;
  border-radius:10px;
  box-shadow:0 2px 8px var(--shadow-sm);
  max-height: 70vh;
  overflow: hidden;
  flex: 1;
  position: relative;
}

.chart-box .chart-expand-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

#revChart, #acctChart {
  width: 100% !important;
  height: min(400px, 55vh) !important;
  max-width: 900px;
  margin: 20px auto 0 auto;
  display: block;
}

.chart-title div {
  font-size:20px;
  font-weight:600;
}

#revChartTitleLine2, #acctChartTitleLine2 { font-size:16px; opacity:0.9; }

.chart-updated {
  font-size:12px !important;
  font-weight:400 !important;
  color: var(--text-secondary);
  opacity:0.8;
  margin-top:4px;
}


/* LOADING SPINNER */
.loading-spinner {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px;
  color: var(--text-secondary);
}

.loading-spinner.hidden { display:none; }

.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.table-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.table-loading-overlay .spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.table-loading-overlay .loading-text {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.table-container-relative {
  position: relative;
  min-height: 200px;
}

.spinner {
  width:40px;
  height:40px;
  border:4px solid var(--border-primary);
  border-top-color: var(--color-primary);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-bottom:12px;
}

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

/* GROWTH INDICATORS */
.growth-positive { color:#10b981; font-weight:600; }
.growth-negative { color:#dc2626; font-weight:600; }
.growth-neutral { color: var(--text-secondary); }

/* REVENUE CONTROLS */
.rev-controls {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:0;
  align-items:flex-start;
}

.rev-controls > label {
  font-weight:500;
  white-space:nowrap;
  font-size: 11px;
  color: var(--text-primary);
}

.rev-controls select,
.rev-controls button {
  padding:5px 8px;
  min-height:28px;
  border-radius:4px;
  border:1px solid var(--input-border);
  font-size: 11px;
  background: var(--input-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.rev-controls select:hover {
  border-color: var(--border-tertiary);
}

.rev-controls select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.rev-controls button {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color:#fff;
  font-weight:600;
  border:none;
  box-shadow: 0 2px 4px rgba(59,130,246,0.3);
}

.rev-controls button:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 8px rgba(59,130,246,0.4);
  transform: translateY(-1px);
}

.rev-controls button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(59,130,246,0.3);
}

#revYearWrapper,
#revCompareWrapper,
#revTrendWrapper,
#acctYearWrapper,
#acctCompareWrapper,
#acctTrendWrapper {
  display:flex;
  align-items:center;
  gap:8px;
}

.checkbox-label { 
  display:flex; 
  align-items:center; 
  gap:4px;
  cursor: pointer;
  padding: 1px 0;
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.2;
}

.checkbox-label input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.checkbox-label:hover {
  color: var(--text-primary);
}

.dropdown-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dropdown-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-row label {
  min-width: 32px;
  font-size: 11px;
  display: flex;
  align-items: center;
}

.custom-date-range {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
}

.date-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.date-input-row:last-child {
  margin-bottom: 0;
}

.date-input-row label {
  min-width: 40px;
  font-size: 12px;
  color: var(--text-primary);
}

.date-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--input-bg);
}

.date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.metric-visibility-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 6px 8px;
  background: var(--surface-2);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.metric-visibility-section .section-label {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.metric-checkboxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 16px;
}

.metric-checkboxes .checkbox-label {
  font-size: 12px;
  white-space: nowrap;
}

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

@media (max-width: 900px) {
  .metric-checkboxes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .checkbox-label {
    padding: 2px 0 !important;
    font-size: 13px;
    line-height: 1.2;
    min-height: auto !important;
  }
  
  .checkbox-stack {
    gap: 0 !important;
  }
  
  .metric-visibility-section {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* RANGE SLIDER (DUAL) */
.range-wrapper.hidden{ display:none; }

.range-wrapper {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.range-wrapper > label {
  font-weight:600;
  margin-bottom:4px;
}

.range-container{
  position:relative;
  width:260px;
  height:32px;
}

/* Gray track line as pseudo-element (behind everything) */
.range-container::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 7px;
  background: #d1d5db;
  border-radius: 4px;
  z-index: 1;
}

.range-container input[type="range"]{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:32px;
  -webkit-appearance:none;
  background:transparent;
  pointer-events:none;
  z-index:2;
}

/* Both sliders on same z-index, thumbs handle interaction */
.range-container input[type="range"]::-webkit-slider-runnable-track{
  height:7px;
  background:transparent;
  border-radius:4px;
  pointer-events:none;
}

.range-container input[type="range"]::-moz-range-track{
  height:7px;
  background:transparent;
  border-radius:4px;
  pointer-events:none;
}

.range-container input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  height:26px;
  width:26px;
  background:#3b82f6;
  border-radius:50%;
  margin-top:-9.5px;
  pointer-events:auto;
  cursor:grab;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.range-container input[type="range"]::-webkit-slider-thumb:active {
  cursor:grabbing;
}

.range-container input[type="range"]::-moz-range-thumb{
  height:26px;
  width:26px;
  background:#3b82f6;
  border:none;
  border-radius:50%;
  pointer-events:auto;
  cursor:grab;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.range-container input[type="range"]::-moz-range-thumb:active {
  cursor:grabbing;
}

.range-labels{
  display:flex;
  justify-content:space-between;
  font-weight:600;
  font-size:14px;
  margin-top:8px;
}

/* TABLE */
.rev-table-box {
  background: var(--card-bg);
  padding:24px 30px;
  border-radius:10px;
  box-shadow:0 2px 8px var(--shadow-sm);
  margin-top:12px;
  width: fit-content;
  display: block;
}

.rev-table-box h3 {
  margin-bottom:18px;
  font-size:18px;
  color: var(--text-primary);
  font-weight:600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.export-table-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
}

.export-table-btn:hover {
  background: #2563eb;
}

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

.table-export-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
  margin-top: 8px;
  margin-right: 8px;
  margin-bottom: 4px;
}

.table-export-btns .export-table-btn {
  margin-left: 0;
  padding: 5px 10px;
  font-size: 11px;
}

.table-export-btns .export-table-btn.csv-btn {
  background: #10b981;
}

.table-export-btns .export-table-btn.csv-btn:hover {
  background: #059669;
}

.table-export-btns .export-table-btn.excel-btn {
  background: #217346;
}

.table-export-btns .export-table-btn.excel-btn:hover {
  background: #1a5c38;
}

.table-scroll{ overflow-x:auto; }

#revTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:400px;
}

#revTable th, #revTable td, #acctTable th, #acctTable td {
  padding:12px 16px;
  text-align:left;
  white-space:nowrap;
  border:1px solid var(--table-border);
  color: var(--text-primary);
}

#revTable th, #acctTable th {
  background: var(--table-header-bg);
  font-weight:700;
  position:sticky;
  top:0;
}

#acctTable {
  width:100%;
  border-collapse:collapse;
  min-width:300px;
}

#revTable tbody tr {
  transition:background 0.15s ease;
  background: var(--card-bg);
}

#revTable tbody tr:hover {
  background: var(--table-row-hover);
}

/* Ensure table is readable on small screens */
.table-scroll {
  max-height:400px;
  overflow-y:auto;
}

/* RESPONSIVE */
@media (max-width:768px){
  .content{ padding:18px; }
  
  .chart-with-tiles {
    flex-direction: column-reverse;
    width: 100%;
  }
  
  .summary-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: auto;
    width: 100%;
    gap: 4px;
  }
  
  .summary-tile {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
  }
  
  .summary-tile .tile-label {
    font-size: 9px;
  }
  
  .summary-tile .tile-value {
    font-size: 12px;
  }
  
  .summary-tile .tile-sub {
    font-size: 8px;
  }
  
  .rev-controls{ 
    flex-direction:column; 
    width:100%; 
    align-items:stretch;
    gap:16px;
    margin-bottom:24px;
  }
  .rev-controls > label { margin-bottom:-6px; font-size:13px; }
  .rev-controls select, .rev-controls button{ width:100%; min-height:44px; font-size:14px; }
  
  #revYearWrapper,
  #revCompareWrapper,
  #revTrendWrapper {
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  #revYearWrapper label,
  #revCompareWrapper label,
  #revTrendWrapper label { font-size:13px; }
  #revYearWrapper select { flex:1; margin-left:8px; }
  
  .range-container{ width:100%; }
  .range-wrapper { margin-bottom:12px; }
  
  .chart-box { padding:14px 18px; margin-bottom:20px; }
  .chart-title div { font-size:15px; margin-bottom: 2px; }
  .chart-header-row { margin-bottom: 4px; }
  #revChartTitleLine2, #acctChartTitleLine2 { font-size: 13px; }
  .chart-updated { margin-top: 2px; font-size: 10px !important; }
  .chart-expand-btn, .chart-close-btn { width: 16px; height: 16px; min-width: 16px; min-height: 16px; max-width: 16px; max-height: 16px; font-size: 9px; }
  
  .rev-table-box { padding:18px; }
  #revTable th, #revTable td { padding:11px 12px; font-size:13px; }
}

@media (max-width:500px){
  .content { padding:14px; }
  h2{ font-size:20px; margin-bottom:18px; }
  
  .rev-controls { gap:14px; margin-bottom:18px; }
  .rev-controls select, .rev-controls button { font-size:13px; }
  
  .chart-box { padding:10px 12px; margin-bottom:16px; }
  .chart-title div { font-size:14px; margin-bottom: 0; }
  #revChartTitleLine2, #acctChartTitleLine2 { font-size: 12px; }
  .chart-updated { display: none; }
  .chart-expand-btn, .chart-close-btn { width: 14px; height: 14px; min-width: 14px; min-height: 14px; max-width: 14px; max-height: 14px; font-size: 8px; }
  
  .rev-table-box { padding:14px; }
  #revTable { min-width:320px; }
  #revTable th, #revTable td { padding:9px 10px; font-size:12px; }
  
  .logout-btn { padding:6px 10px; font-size:12px; }
  
  .range-container { width:100%; height:36px; }
}

/* ============================================================
   INCOME STATEMENT STYLES
============================================================ */
.is-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
  
  row-gap: 14px;
}

.is-period-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.is-period-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.is-period-row label {
  font-size: 11px;
  font-weight: 500;
  min-width: 70px;
  white-space: nowrap;
}

.is-period-row select {
  font-size: 11px;
  padding: 4px 6px;
  min-height: 28px;
  border-radius: 4px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}

.is-controls > label {
  font-weight: 500;
  white-space: nowrap;
}

.is-controls select,
.is-controls button {
  padding: 5px 8px;
  min-height: 28px;
  border-radius: 4px;
  border: 1px solid var(--input-border);
  font-size: 11px;
  background: var(--input-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.is-controls select:hover {
  border-color: var(--border-tertiary);
}

.is-controls select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.is-toggle-btn {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.is-toggle-btn:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

.is-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.bs-negative {
  color: #dc2626;
}

.cf-negative {
  color: #dc2626;
}

.is-table-box {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--shadow-sm);
  padding: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  min-width: 50%;
  width: fit-content;
}

.is-table-box table {
  width: 100%;
}

#incomeStatementTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#incomeStatementTable th,
#incomeStatementTable td {
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
  color: var(--text-primary);
}

#incomeStatementTable th {
  background: var(--table-header-bg);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  position: relative;
}

/* Resizable columns for financial tables */
.is-table th .resize-handle,
#incomeStatementTable th .resize-handle,
#balanceSheetTable th .resize-handle,
#cashFlowTable th .resize-handle,
.transaction-table th .resize-handle {
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  cursor: col-resize;
  background: var(--border-primary);
  border-radius: 2px;
  z-index: 10;
  opacity: 0.4;
  transition: opacity 0.2s, background 0.2s, width 0.15s;
}

.is-table th .resize-handle:hover,
.is-table th .resize-handle.resizing,
#incomeStatementTable th .resize-handle:hover,
#incomeStatementTable th .resize-handle.resizing,
#balanceSheetTable th .resize-handle:hover,
#balanceSheetTable th .resize-handle.resizing,
#cashFlowTable th .resize-handle:hover,
#cashFlowTable th .resize-handle.resizing,
.transaction-table th .resize-handle:hover,
.transaction-table th .resize-handle.resizing {
  background: var(--primary-color);
  opacity: 1;
  width: 5px;
}

.is-table.resizing,
#incomeStatementTable.resizing,
#balanceSheetTable.resizing,
#cashFlowTable.resizing,
.transaction-table.resizing {
  cursor: col-resize;
  user-select: none;
}

/* Column resize indicator on header hover */
.is-table th,
#incomeStatementTable th,
#balanceSheetTable th,
#cashFlowTable th,
.transaction-table th {
  cursor: default;
}

.is-table th:not(:last-child):hover,
#incomeStatementTable th:not(:last-child):hover,
#balanceSheetTable th:not(:last-child):hover,
#cashFlowTable th:not(:last-child):hover,
.transaction-table th:not(:last-child):hover {
  cursor: default;
}

.is-table th:not(:last-child):hover .resize-handle,
#incomeStatementTable th:not(:last-child):hover .resize-handle,
#balanceSheetTable th:not(:last-child):hover .resize-handle,
#cashFlowTable th:not(:last-child):hover .resize-handle,
.transaction-table th:not(:last-child):hover .resize-handle {
  opacity: 0.7;
}

#incomeStatementTable td:first-child,
#incomeStatementTable th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--card-bg);
  z-index: 1;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  padding-right: 40px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

#incomeStatementTable th:first-child {
  background: var(--table-header-bg);
  z-index: 2;
}

#incomeStatementTable tbody tr:hover {
  background: var(--table-row-hover);
}

#incomeStatementTable tbody tr {
  transition: background 0.15s ease;
}

.is-row-header td {
  font-weight: 400;
  background: #f3f4f6 !important;
  border-top: 2px solid #d1d5db;
  color: #1f2937;
}

.is-row-subtotal td {
  font-weight: 400;
}

.is-major-total {
  background: #e5e7eb !important;
}

.is-major-total td {
  font-weight: 700;
  background: transparent !important;
}

.is-blue-subtotal {
  background: #dbeafe !important;
}

.is-blue-subtotal td {
  font-weight: 700;
  background: transparent !important;
}

.is-blue-subtotal td:first-child {
  padding-left: 24px !important;
}

.is-profit-row {
  background: #e0e7ef !important;
}

.is-profit-row td {
  font-weight: 700;
  background: transparent !important;
}

.is-expense-section-expanded {
  background: #fef9c3 !important;
}

.is-expense-section-expanded td {
  font-weight: 700;
  background: transparent !important;
}

.is-gray-section-expanded {
  background: #e5e7eb !important;
}

.is-gray-section-expanded td {
  font-weight: 600;
  background: transparent !important;
}

.is-tan-section-expanded {
  background: #f5e6d3 !important;
}

.is-tan-section-expanded td {
  font-weight: 600;
  background: transparent !important;
}

.is-opexp-gray-expanded {
  background: #e5e7eb !important;
}

.is-opexp-gray-expanded td {
  font-weight: 600;
  background: transparent !important;
}

.is-spacer-row td {
  height: 8px;
  background: #fff !important;
  border: none !important;
}

/* Cash Flow Statement specific styles */
.cf-operating,
.cf-investing,
.cf-financing {
  background: #dbeafe !important;
}

.cf-operating td,
.cf-investing td,
.cf-financing td {
  font-weight: 700;
  background: transparent !important;
  color: #1e3a5f !important;
}

#cashFlowTable tr.cf-operating td,
#cashFlowTable tr.cf-investing td,
#cashFlowTable tr.cf-financing td {
  background: transparent !important;
  color: #1e3a5f !important;
}

.cf-toggle, .bs-toggle {
  cursor: pointer;
  font-size: 0.7rem;
  margin-right: 6px;
  color: #6b7280;
  user-select: none;
}

.cf-toggle:hover, .bs-toggle:hover {
  color: #1f2937;
}

.cf-toggle-placeholder, .bs-toggle-placeholder {
  display: inline-block;
  width: 14px;
  margin-right: 6px;
}

#cashFlowTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#cashFlowTable th, #cashFlowTable td {
  padding: 4px 12px;
  text-align: right;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#cashFlowTable th:first-child, #cashFlowTable td:first-child {
  text-align: left;
  background: #fff;
  z-index: 1;
  padding-right: 12px;
  position: sticky;
  left: 0;
  min-width: 180px;
  max-width: 280px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

#cashFlowTable th:first-child {
  background: #f8fafc;
  color: #374151;
  z-index: 3;
}

#cashFlowTable th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  z-index: 1;
}

/* Cash Flow subtotal rows - light gray in light mode */
#cashFlowTable tr.is-subtotal {
  background: #e5e7eb !important;
}

#cashFlowTable tr.is-subtotal td {
  background: transparent !important;
  font-weight: 600;
}

#cashFlowTable tbody tr:hover {
  background: #f9fafb;
}

#cashFlowTable tbody tr {
  transition: background 0.15s ease;
}

#cashFlowTable tbody tr:nth-child(odd) {
  background: transparent;
}

#cashFlowTable tbody tr:nth-child(even) {
  background: transparent;
}

#cashFlowTable tbody tr.is-spacer-row {
  background: #fff !important;
}

#incomeStatementTable tbody tr:nth-child(odd) {
  background: transparent;
}

#incomeStatementTable tbody tr:nth-child(even) {
  background: transparent;
}

#incomeStatementTable tbody tr.is-spacer-row {
  background: #fff !important;
}

.is-partial-indicator {
  color: #d97706;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 4px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: -8px;
  margin-bottom: 4px;
  font-weight: 400;
}

.data-as-of {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: -4px;
  margin-bottom: 12px;
}

/* AI Analysis Styles */
.ai-analysis-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  margin-top: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  display: block;
}

.ai-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-config-header);
  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  user-select: none;
}

.ai-analysis-header:hover {
  background: var(--bg-config-header-hover);
}

.ai-analysis-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-analysis-toggle-icon {
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.ai-analysis-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.ai-analysis-panel.collapsed .ai-analysis-toggle-icon {
  transform: rotate(-90deg);
}

.ai-analysis-panel.collapsed .ai-analysis-body {
  display: none;
}

.ai-run-btn {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: #166534;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.ai-run-btn:hover {
  background: #14532d;
}

.ai-run-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-analysis-body {
  border-top: 1px solid var(--border-secondary);
}

.ai-analysis-content {
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-primary);
}

.ai-analysis-content h1,
.ai-analysis-content h2,
.ai-analysis-content h3 {
  color: #166534 !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  font-size: 12px !important;
  text-indent: 0 !important;
  display: block !important;
}

.ai-analysis-content h1:first-child,
.ai-analysis-content h2:first-child,
.ai-analysis-content h3:first-child {
  margin-top: 0 !important;
}

.ai-analysis-content ul,
.ai-analysis-content ol {
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 0 0 18px !important;
  list-style-position: outside !important;
}

.ai-analysis-content > h2,
.ai-analysis-content > h3 {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.ai-analysis-content li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

.ai-analysis-content p {
  margin: 0 !important;
  padding: 0 !important;
}

.ai-analysis-content strong {
  color: var(--text-primary);
}

.ai-analysis-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  color: var(--text-secondary);
}

.ai-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #166534;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.partial-footnote {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.bs-footnote {
  font-size: 12px;
  color: #6b7280;
  margin-top: 12px;
  padding: 8px 0;
}

.bs-toggle {
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
  font-size: 11px;
  color: #4b5563;
  display: inline-block;
  width: 14px;
  text-align: center;
  transition: transform 0.15s ease;
}

.bs-toggle:hover {
  color: #1f2937;
  transform: scale(1.2);
}

.bs-toggle-placeholder {
  display: inline-block;
  width: 14px;
  margin-right: 8px;
}

#balanceSheetTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#balanceSheetTable th,
#balanceSheetTable td {
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#balanceSheetTable th:first-child,
#balanceSheetTable td:first-child {
  text-align: left;
  padding-right: 12px;
  position: sticky;
  left: 0;
  background: #fff;
  min-width: 180px;
  max-width: 280px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

#balanceSheetTable th:first-child {
  background: #f8fafc;
  z-index: 2;
}

#balanceSheetTable th {
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  position: sticky;
  top: 0;
  z-index: 1;
}

#balanceSheetTable thead th:first-child {
  z-index: 3;
}

#balanceSheetTable tbody tr:nth-child(even) {
  background: transparent;
}

#balanceSheetTable tbody tr.is-spacer-row {
  background: #fff !important;
}

#balanceSheetTable tbody tr:hover:not(.is-spacer-row):not(.is-row-header) {
  background: #f0f9ff;
}

#balanceSheetTable tbody tr.is-major-total {
  background: #e5e7eb !important;
}

#balanceSheetTable tbody tr.is-major-total:hover {
  background: #d1d5db !important;
}

.is-subtotal-col {
  border-left: 1px solid #000 !important;
}

.is-row-ratio td {
  font-style: italic;
  color: #6b7280;
}

.is-row-detail td {
  font-weight: 400;
}

.is-row-hidden {
  display: none;
}

.is-indent-0 td:first-child { padding-left: 14px; }
.is-indent-1 td:first-child { padding-left: 28px; }
.is-indent-2 td:first-child { padding-left: 42px; }
.is-indent-3 td:first-child { padding-left: 56px; }
.is-indent-4 td:first-child { padding-left: 70px; }

#balanceSheetTable tr.is-row-subtotal,
#balanceSheetTable tr.is-subtotal {
  font-weight: 500;
}

#balanceSheetTable tr.is-row-subtotal.is-expanded-subtotal,
#balanceSheetTable tr.is-subtotal.is-expanded-subtotal {
  background: #f0f9ff;
}

#balanceSheetTable tr.is-row-subtotal.is-expanded-subtotal td:first-child,
#balanceSheetTable tr.is-subtotal.is-expanded-subtotal td:first-child {
  color: #1d4ed8;
}

.is-toggle {
  cursor: pointer;
  user-select: none;
  margin-right: 6px;
  font-size: 10px;
  color: #6b7280;
}

.is-toggle:hover {
  color: #1f2937;
}

.is-negative {
  color: #dc2626;
}

.is-variance-positive {
  color: #10b981;
}

.is-variance-negative {
  color: #dc2626;
}

.var-col-left {
  border-left: 1px solid #000;
}

#isPeriodWrapper,
#isMatrixWrapper,
#isSingleControls,
#isMatrixControls,
#isMatrixYearWrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.is-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.is-checkbox-label.small {
  font-size: 12px;
  font-weight: 400;
}

.is-checkbox-label.small input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.is-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.is-options-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  background: #f3f4f6;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* Wrapper for Compare/Detail on desktop - just a container */
.is-compare-detail-wrapper {
  display: contents;
}

/* Mobile: combine Compare and Detail into one box */
@media (max-width: 768px) {
  .is-compare-detail-wrapper {
    display: flex;
    flex-direction: row;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    padding: 6px 8px;
    gap: 12px;
  }
  
  .is-compare-detail-wrapper .is-options-stack {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    flex: 1;
    gap: 0;
  }
  
  .is-compare-detail-wrapper .is-compare-box {
    border-right: 1px solid #e5e7eb;
    padding-right: 10px;
  }
  
  .is-compare-detail-wrapper .radio-group-stacked {
    gap: 0;
  }
  
  .is-compare-detail-wrapper .radio-label {
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    height: 18px;
  }
  
  .is-compare-detail-wrapper .radio-label input[type="radio"] {
    width: 12px;
    height: 12px;
    margin: 0;
  }
  
  .is-compare-detail-wrapper > .is-options-stack > label {
    font-size: 11px;
    margin-bottom: 2px;
    line-height: 1;
  }
}

.is-detail-radio {
  display: flex;
  align-items: center;
  gap: 10px;
}

.is-detail-radio.stacked {
  flex-direction: column;
  
  gap: 4px;
}

.is-detail-radio > label {
  font-weight: 500;
  margin: 0;
}

.radio-group {
  display: flex;
  gap: 12px;
}

.radio-group-stacked {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.radio-group-stacked .radio-label {
  font-size: 13px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}

.radio-label input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #2563eb;
}

/* Expanded subtotal row styling */
.is-expanded-subtotal {
  background-color: #fef9c3 !important;
}

.is-expanded-subtotal td {
  font-weight: 600;
  background-color: #fef9c3 !important;
}

/* Child rows of expanded subtotals - additional indent */
.is-child-row td:first-child {
  padding-left: 24px !important;
}

.is-child-row.is-indent-1 td:first-child {
  padding-left: 32px !important;
}

.is-child-row.is-indent-2 td:first-child {
  padding-left: 40px !important;
}

.is-child-row.is-indent-3 td:first-child {
  padding-left: 48px !important;
}

.is-matrix-tabs {
  display: flex;
  gap: 4px;
  background: #e5e7eb;
  padding: 4px;
  border-radius: 6px;
}

.is-matrix-tab {
  padding: 6px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  transition: all 0.15s ease;
}

.is-matrix-tab:hover {
  background: #d1d5db;
}

.is-matrix-tab.active {
  background: white;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}


@media (max-width: 768px) {
  /* ========================================
     ULTRA COMPACT IS/BS/CF MOBILE CONFIG
     Time Period + Compare/Detail side-by-side
  ======================================== */
  
  /* Main controls container - flex row for side-by-side layout */
  #incomeStatement .is-controls,
  #balanceSheet .is-controls,
  #cashFlows .is-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  
  /* Time Period box - full width on its own row */
  #incomeStatement .overview-config-box,
  #balanceSheet .overview-config-box,
  #cashFlows .overview-config-box {
    padding: 6px 8px !important;
    margin: 0 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  
  #incomeStatement .overview-config-box > div:first-child,
  #balanceSheet .overview-config-box > div:first-child,
  #cashFlows .overview-config-box > div:first-child {
    font-size: 9px !important;
    margin-bottom: 3px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7280;
  }
  
  /* Period rows ultra compact - horizontal inline */
  #incomeStatement .is-period-stack,
  #balanceSheet .is-period-stack,
  #cashFlows .is-period-stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
  }
  
  #incomeStatement .is-period-row,
  #balanceSheet .is-period-row,
  #cashFlows .is-period-row {
    gap: 3px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  #incomeStatement .is-period-row label,
  #balanceSheet .is-period-row label,
  #cashFlows .is-period-row label {
    font-size: 9px !important;
    min-width: auto !important;
    color: #6b7280;
  }
  
  #incomeStatement .is-period-row select,
  #balanceSheet .is-period-row select,
  #cashFlows .is-period-row select {
    font-size: 10px !important;
    padding: 2px 4px !important;
    min-height: 22px !important;
  }
  
  /* Compare/Detail wrapper - shares row with checkboxes */
  #incomeStatement .is-compare-detail-wrapper,
  #balanceSheet .is-compare-detail-wrapper,
  #cashFlows .is-compare-detail-wrapper {
    padding: 4px 6px !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 50% !important;
  }
  
  #incomeStatement .is-compare-detail-wrapper .config-section-label,
  #balanceSheet .is-compare-detail-wrapper .config-section-label,
  #cashFlows .is-compare-detail-wrapper .config-section-label {
    font-size: 9px;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7280;
  }
  
  /* Radio buttons - tighter line height */
  #incomeStatement .is-compare-detail-wrapper .radio-label,
  #balanceSheet .is-compare-detail-wrapper .radio-label,
  #cashFlows .is-compare-detail-wrapper .radio-label {
    font-size: 10px;
    height: 14px;
    gap: 2px;
    line-height: 1;
  }
  
  #incomeStatement .is-compare-detail-wrapper .radio-label input[type="radio"],
  #balanceSheet .is-compare-detail-wrapper .radio-label input[type="radio"],
  #cashFlows .is-compare-detail-wrapper .radio-label input[type="radio"] {
    width: 10px;
    height: 10px;
  }
  
  /* Checkboxes stack - side-by-side with Compare/Detail on mobile */
  #incomeStatement .is-controls > .is-options-stack:not(.is-compare-box):not(.is-detail-box),
  #balanceSheet .is-controls > .is-options-stack:not(.is-compare-box):not(.is-detail-box),
  #cashFlows .is-controls > .is-options-stack:not(.is-compare-box):not(.is-detail-box) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding: 4px 6px !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 50% !important;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
  }
  
  #incomeStatement .is-checkbox-label.small,
  #balanceSheet .is-checkbox-label.small,
  #cashFlows .is-checkbox-label.small {
    font-size: 9px !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  
  #incomeStatement .is-checkbox-label.small input[type="checkbox"],
  #balanceSheet .is-checkbox-label.small input[type="checkbox"],
  #cashFlows .is-checkbox-label.small input[type="checkbox"] {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* Year Range sliders - compact inline on mobile */
  #incomeStatement .range-wrapper.year-range-inline,
  #balanceSheet .range-wrapper.year-range-inline,
  #cashFlows .range-wrapper.year-range-inline,
  #bsMatrixRangeControls,
  #cfMatrixYearControls,
  #isMatrixYearControls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 4px 6px;
    background: #f3f4f6;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
  
  #incomeStatement .range-wrapper.year-range-inline > label,
  #balanceSheet .range-wrapper.year-range-inline > label,
  #cashFlows .range-wrapper.year-range-inline > label {
    font-size: 9px;
    margin-bottom: 0;
    white-space: nowrap;
  }
  
  #incomeStatement .year-slider,
  #balanceSheet .year-slider,
  #cashFlows .year-slider {
    height: 4px;
    width: 60px;
    min-width: 50px;
  }
  
  #incomeStatement .year-label,
  #balanceSheet .year-label,
  #cashFlows .year-label {
    font-size: 9px;
    min-width: 24px;
  }
  
  #incomeStatement .range-separator,
  #balanceSheet .range-separator,
  #cashFlows .range-separator {
    font-size: 10px;
    margin: 0 4px;
  }
  
  /* Year Range row layout on mobile */
  #incomeStatement .year-range-inline,
  #balanceSheet .year-range-inline,
  #cashFlows .year-range-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  
  /* Compare/Detail section labels more compact */
  #incomeStatement .is-compare-detail-wrapper label[style*="font-weight"],
  #balanceSheet .is-compare-detail-wrapper label[style*="font-weight"],
  #cashFlows .is-compare-detail-wrapper label[style*="font-weight"] {
    font-size: 10px !important;
    margin-bottom: 2px;
  }
  
  /* Dark mode support for compact mobile labels */
  [data-theme="dark"] #incomeStatement .overview-config-box > div:first-child,
  [data-theme="dark"] #balanceSheet .overview-config-box > div:first-child,
  [data-theme="dark"] #cashFlows .overview-config-box > div:first-child,
  [data-theme="dark"] #incomeStatement .is-compare-detail-wrapper .config-section-label,
  [data-theme="dark"] #balanceSheet .is-compare-detail-wrapper .config-section-label,
  [data-theme="dark"] #cashFlows .is-compare-detail-wrapper .config-section-label,
  [data-theme="dark"] #incomeStatement .is-period-row label,
  [data-theme="dark"] #balanceSheet .is-period-row label,
  [data-theme="dark"] #cashFlows .is-period-row label {
    color: #94a3b8;
  }
  
  [data-theme="dark"] #incomeStatement .range-wrapper.year-range-inline,
  [data-theme="dark"] #balanceSheet .range-wrapper.year-range-inline,
  [data-theme="dark"] #cashFlows .range-wrapper.year-range-inline,
  [data-theme="dark"] #bsMatrixRangeControls,
  [data-theme="dark"] #cfMatrixYearControls,
  [data-theme="dark"] #isMatrixYearControls {
    background: #1e293b;
    border-color: #475569;
  }

  .is-controls {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 16px;
  }
  
  .is-controls > label {
    margin-bottom: -6px;
    font-size: 13px;
  }
  
  .is-controls select,
  .is-controls button {
    width: 100%;
    min-height: 28px;
    font-size: 11px;
  }
  
  #isPeriodWrapper,
  #isMatrixWrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .is-table-box {
    padding: 12px;
    margin: 0 0 12px 0;
    border-radius: 8px;
    width: 100%;
  }
  
  #incomeStatementTable {
    width: 100%;
    max-width: none;
    font-size: 11px;
  }
  
  #incomeStatementTable th,
  #incomeStatementTable td {
    padding: 6px 8px;
  }
  
  #balanceSheetTable {
    width: 100%;
    max-width: none;
    font-size: 11px;
  }
  
  #balanceSheetTable th,
  #balanceSheetTable td {
    padding: 6px 8px;
  }
  
  .is-indent-1 td:first-child { padding-left: 16px !important; }
  .is-indent-2 td:first-child { padding-left: 24px !important; }
  .is-indent-3 td:first-child { padding-left: 32px !important; }
  
  #acctTable {
    font-size: 12px;
  }
  
  #acctTable th,
  #acctTable td {
    padding: 8px 10px;
  }
  
  /* Config panel mobile - consistent alignment */
  .config-panel {
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
  }
  
  /* Both panels same horizontal alignment on mobile */
  .config-panel,
  .ai-analysis-panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .config-body {
    padding: 8px 12px;
  }
  
  .config-body .rev-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  
  .config-body .rev-controls > label {
    margin-bottom: -2px;
    font-size: 12px;
  }
  
  .config-body .rev-controls select {
    width: 100%;
    min-height: 36px;
    font-size: 15px;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 20px;
    padding-right: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  
  .config-body #overviewYearWrapper,
  .config-body #revYearWrapper,
  .config-body #acctYearWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  
  .config-body #overviewYearWrapper select,
  .config-body #revYearWrapper select,
  .config-body #acctYearWrapper select {
    flex: 1;
  }
  
  .config-body .checkbox-stack {
    margin-top: 0;
    gap: 0;
  }
  
  .config-body .checkbox-label {
    padding: 2px 0;
    font-size: 13px;
    min-height: 24px;
  }
  
  .config-body .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  
  .config-body .range-wrapper {
    padding: 2px 0;
  }
  
  /* Income Statement compact mobile layout */
  .is-options-stack {
    padding: 4px 8px;
    gap: 2px;
  }
  
  .is-options-stack > label {
    font-size: 11px;
    margin-bottom: 0;
  }
  
  .radio-group-stacked {
    gap: 1px;
  }
  
  .radio-group-stacked .radio-label {
    font-size: 12px;
    padding: 1px 0;
  }
  
  .radio-label input[type="radio"] {
    width: 12px;
    height: 12px;
  }
  
  .is-controls {
    gap: 6px !important;
  }
  
  .is-controls > label {
    font-size: 12px;
    margin-bottom: -4px;
  }
  
  .is-checkbox-label {
    font-size: 12px;
    padding: 2px 0;
  }
  
  .is-checkbox-label.small {
    font-size: 11px;
    padding: 2px 0;
  }
  
  .is-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }
  
  .overview-metric-tile {
    min-height: 280px;
  }
}

@media (max-width: 500px) {
  .is-table-box {
    padding: 8px;
    margin: 0 0 10px 0;
    width: 100%;
  }
  
  #incomeStatementTable {
    font-size: 10px;
  }
  
  #incomeStatementTable th,
  #incomeStatementTable td {
    padding: 5px 6px;
  }
  
  #balanceSheetTable {
    font-size: 10px;
  }
  
  #balanceSheetTable th,
  #balanceSheetTable td {
    padding: 5px 6px;
  }
  
  .is-indent-1 td:first-child { padding-left: 12px !important; }
  .is-indent-2 td:first-child { padding-left: 18px !important; }
  .is-indent-3 td:first-child { padding-left: 24px !important; }
  
  #acctTable {
    font-size: 11px;
  }
  
  #acctTable th,
  #acctTable td {
    padding: 6px 8px;
  }
  
  .config-panel {
    margin: 0 0 12px 0;
    width: 100%;
  }
}

/* PRINT STYLES */
@media print {
  /* Hide non-printable elements - config panels and controls only */
  .header,
  .sidebar,
  .overlay,
  .mobile-menu-btn,
  .logout-btn,
  .export-dropdown,
  .content-export-area,
  .rev-controls,
  .export-bar,
  .config-panel,
  .config-header,
  .config-body,
  .is-toggle,
  .cf-toggle,
  .chart-expand-btn,
  .page-chart-expand-btn,
  .saved-views-row,
  .modal-overlay,
  #loginScreen,
  .user-dropdown,
  .dark-mode-toggle,
  .ai-analysis-panel .analyze-btn,
  .ai-analysis-panel .ai-run-btn,
  .ai-analysis-panel:not(.has-analysis),
  .cash-controls,
  .cash-config-box,
  #cashAccountCheckboxes,
  #cashSelectAll,
  #cashSelectNone,
  .cash-header-toggle,
  .is-controls,
  .bs-controls,
  .cf-controls,
  .acct-controls,
  .chart-close-btn,
  .metric-info-btn {
    display: none !important;
  }
  
  /* Reset layout for printing */
  html, body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: #fff !important;
    color: #1f2937 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 11pt;
  }
  
  .layout {
    height: auto;
    display: block;
    width: 100%;
  }
  
  .content {
    padding: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible !important;
  }
  
  /* Show only the visible section */
  .dashboard-section {
    display: none !important;
  }
  
  .dashboard-section.visible {
    display: block !important;
    page-break-after: avoid;
    width: 100% !important;
  }
  
  /* Charts and content boxes - preserve appearance */
  .chart-box,
  .rev-table-box,
  .overview-grid,
  .metric-tile,
  .overview-metric-tile,
  .cash-chart-container,
  .daily-balance-table-container,
  .chart-with-tiles,
  .summary-tiles,
  .summary-tile {
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
  }
  
  /* Ensure charts render properly and fit page width */
  .chart-box,
  .chart-container,
  .cash-chart-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .chart-box canvas,
  #cashChart,
  #revenueChart,
  #accountChart,
  canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Overview tiles grid */
  .overview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .overview-metric-tile,
  .metric-tile {
    padding: 10px !important;
    border: 1px solid #e5e7eb !important;
    break-inside: avoid;
  }
  
  .overview-metric-tile canvas {
    max-height: 120px !important;
  }
  
  /* Chart with tiles layout (Revenue, Account, Cash pages) */
  .chart-with-tiles {
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
  }
  
  .summary-tiles {
    min-width: 100px !important;
    flex-shrink: 0;
  }
  
  .summary-tile {
    padding: 8px !important;
  }
  
  /* Tables - fit to page */
  .table-scroll {
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }
  
  table {
    width: 100% !important;
    font-size: 9pt !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
  }
  
  th, td {
    padding: 3px 5px !important;
    border: 1px solid #e5e7eb !important;
    word-wrap: break-word;
  }
  
  /* Financial statement tables */
  #incomeStatementTable,
  #balanceSheetTable,
  #cashFlowTable {
    font-size: 8pt !important;
  }
  
  #incomeStatementTable th,
  #incomeStatementTable td,
  #balanceSheetTable th,
  #balanceSheetTable td,
  #cashFlowTable th,
  #cashFlowTable td {
    padding: 2px 4px !important;
  }
  
  /* Cash balances specific */
  .cash-current-header {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
  }
  
  .cash-header-accounts {
    display: block !important;
    max-height: none !important;
  }
  
  .cash-header-accounts.collapsed {
    display: block !important;
  }
  
  /* AI Analysis panel - show content but hide button */
  .ai-analysis-panel {
    page-break-inside: avoid;
    border: 1px solid #d1d5db !important;
  }
  
  .ai-analysis-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Page title */
  h2 {
    margin-top: 0;
    margin-bottom: 10px;
    page-break-after: avoid;
    font-size: 14pt;
  }
  
  .data-as-of {
    margin-bottom: 8px;
    font-size: 9pt;
    color: #6b7280;
  }
  
  /* Report headers */
  .report-header {
    margin-bottom: 10px !important;
    padding: 8px 0 !important;
  }
  
  /* Metric stats */
  .metric-stats {
    display: flex !important;
  }
  
  /* Fit to page width - landscape for wide tables */
  @page {
    size: auto;
    margin: 0.4in;
  }
}

/* ============================================================
   EMAIL MODAL
============================================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 450px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1f2937;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: #1f2937;
}

.modal-body {
  padding: 20px;
}

.modal-body label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}

.modal-body input[type="email"],
.modal-body input[type="text"],
.modal-body input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.modal-body input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.btn-primary {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.btn-secondary:hover {
  background: #f3f4f6;
}

.email-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 8px;
}

.email-status:empty {
  display: none;
}

.email-status.success {
  background: #d1fae5;
  color: #065f46;
}

.email-status.error {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 500px) {
  .modal-content {
    width: 95%;
    margin: 10px;
  }
  
  .modal-header {
    padding: 14px 16px;
  }
  
  .modal-header h3 {
    font-size: 16px;
  }
  
  .modal-body {
    padding: 16px;
  }
  
  .modal-body input[type="email"],
  .modal-body input[type="text"],
  .modal-body input[type="password"] {
    padding: 12px;
    font-size: 16px;
  }
  
  .modal-footer {
    padding: 14px 16px;
    flex-direction: column;
    gap: 10px;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 12px;
  }
}

/* ============================================================
   SCHEDULE EMAIL MODAL
============================================================ */
.schedule-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.schedule-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.schedule-tab:hover {
  color: #374151;
  background: #f9fafb;
}

.schedule-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.schedule-tab-content {
  display: block;
}

.schedule-tab-content.hidden {
  display: none;
}

.modal-body .form-row {
  margin-bottom: 16px;
}

.modal-body .form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}

.modal-body .form-row select,
.modal-body .form-row input[type="time"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

.modal-body .form-row select:focus,
.modal-body .form-row input[type="time"]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.scheduled-reports-list {
  max-height: 300px;
  overflow-y: auto;
}

.scheduled-report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #e5e7eb;
}

.scheduled-report-item:last-child {
  margin-bottom: 0;
}

.scheduled-report-info {
  flex: 1;
}

.scheduled-report-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.scheduled-report-details {
  font-size: 12px;
  color: #6b7280;
}

.scheduled-report-actions {
  display: flex;
  gap: 8px;
}

.scheduled-report-actions button {
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: none;
}

.scheduled-report-actions .btn-edit {
  background: #e0e7ff;
  color: #4338ca;
}

.scheduled-report-actions .btn-edit:hover {
  background: #c7d2fe;
}

.scheduled-report-actions .btn-delete {
  background: #fee2e2;
  color: #dc2626;
}

.scheduled-report-actions .btn-delete:hover {
  background: #fecaca;
}

.scheduled-report-item.inactive {
  opacity: 0.6;
}

.scheduled-report-item.inactive .scheduled-report-name::after {
  content: " (Paused)";
  font-weight: 400;
  color: #9ca3af;
  font-size: 12px;
}

.loading-message,
.empty-message {
  text-align: center;
  color: #6b7280;
  padding: 20px;
}

[data-theme="dark"] .schedule-tab {
  color: #94a3b8;
}

[data-theme="dark"] .schedule-tab:hover {
  color: #e2e8f0;
  background: #334155;
}

[data-theme="dark"] .schedule-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

[data-theme="dark"] .scheduled-report-item {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .scheduled-report-name {
  color: #f1f5f9;
}

[data-theme="dark"] .scheduled-report-details {
  color: #94a3b8;
}

/* ============================================================
   CHART FULLSCREEN MODAL
============================================================ */
.metric-tile-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  position: relative;
}

.metric-tile-buttons {
  display: flex;
  gap: 4px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.chart-expand-btn,
.chart-close-btn {
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 2px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.chart-expand-btn svg,
.chart-close-btn svg {
  width: 10px;
  height: 10px;
}


.chart-expand-btn:hover,
.chart-close-btn:hover {
  background: #f3f4f6;
  color: #374151;
  border-color: #9ca3af;
}

.chart-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 20000;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.chart-fullscreen-modal.hidden {
  display: none;
}

.chart-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.chart-fullscreen-header h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.chart-fullscreen-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 0 10px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.chart-fullscreen-close:hover {
  opacity: 1;
}

.chart-fullscreen-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

.chart-fullscreen-body canvas {
  max-width: 100%;
  height: 100% !important;
}

/* Force white text for all Chart.js elements in fullscreen mode */
.chart-fullscreen-modal,
.chart-fullscreen-modal * {
  --chart-text-color: #ffffff !important;
}

.chart-fullscreen-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}

.chart-fullscreen-stats .stat-box {
  text-align: center;
  background: #fff !important;
  padding: 12px 20px;
  border-radius: 8px;
  min-width: 100px;
}

.chart-fullscreen-stats .stat-label {
  color: #374151 !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.chart-fullscreen-stats .stat-value {
  color: #111827 !important;
  font-size: 20px;
  font-weight: 700;
}

.chart-fullscreen-stats .stat-value.negative {
  color: #dc2626 !important;
}

.chart-fullscreen-stats .stat-period {
  color: #6b7280 !important;
  font-size: 11px;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .chart-fullscreen-modal {
    padding: 12px;
  }
  
  .chart-fullscreen-header h3 {
    font-size: 18px;
  }
  
  .chart-fullscreen-stats {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .chart-fullscreen-stats .stat-value {
    font-size: 16px;
  }
}

@media print {
  .chart-expand-btn {
    display: none !important;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE POLISH
============================================================ */

/* Mobile-specific control improvements */
@media (max-width: 768px) {
  /* Section titles */
  .dashboard-section h2 {
    font-size: 20px;
    margin-bottom: 16px;
  }
  
  /* Config panel mobile improvements - compact */
  .config-panel {
    margin-bottom: 10px;
  }
  
  .config-header {
    padding: 10px 14px;
    min-height: 40px;
  }
  
  .config-title {
    font-size: 12px;
  }
  
  .config-body {
    padding: 8px 12px;
  }
  
  /* Rev controls mobile layout - compact */
  .rev-controls {
    gap: 4px;
  }
  
  .rev-controls select {
    width: 100%;
    min-width: unset;
    font-size: 15px;
    padding: 8px 12px;
    min-height: 36px;
  }
  
  .rev-controls > label {
    width: 100%;
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: -2px;
  }
  
  /* Wrapper controls stack on mobile */
  #revYearWrapper,
  #revCompareWrapper,
  #revTrendWrapper,
  #acctYearWrapper,
  #acctCompareWrapper,
  #acctTrendWrapper {
    flex-wrap: wrap;
    width: 100%;
  }
  
  #revYearWrapper select,
  #acctYearWrapper select {
    flex: 1;
    min-width: 100px;
  }
  
  /* Range slider mobile */
  .range-wrapper {
    width: 100%;
  }
  
  .range-container {
    width: 100%;
  }
  
  /* Chart box mobile */
  .chart-box {
    padding: 16px;
    max-height: none;
    overflow: visible;
  }
  
  .chart-title div {
    font-size: 16px;
  }
  
  #revChartTitleLine2, #acctChartTitleLine2 {
    font-size: 14px;
  }
  
  /* Chart with tiles - stack on mobile */
  .chart-with-tiles {
    flex-direction: column-reverse;
    width: 100%;
  }
  
  .summary-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: unset;
    width: 100%;
    gap: 4px;
  }
  
  .summary-tile {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
  }
  
  .summary-tile .tile-label {
    font-size: 9px;
    margin-bottom: 2px;
  }
  
  .summary-tile .tile-value {
    font-size: 12px;
  }
  
  .summary-tile .tile-sub {
    font-size: 8px;
    margin-top: 2px;
  }
  
  /* Chart 100% width on mobile */
  .chart-box {
    width: 100%;
    box-sizing: border-box;
  }
  
  .chart-box canvas {
    width: 100% !important;
    max-width: 100%;
  }
  
  /* Expand/close buttons mobile - identical sizing */
  .chart-expand-btn,
  .chart-close-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    padding: 0;
  }
  
  .chart-expand-btn svg,
  .chart-close-btn svg {
    width: 12px;
    height: 12px;
  }
  
  /* Reduce chart title spacing on mobile by ~50% */
  .overview-metric-tile {
    padding: 4px 14px 14px;
  }
  
  .metric-tile-header {
    margin-bottom: 1px;
  }
  
  .chart-header-row {
    margin-bottom: 2px;
  }
  
  .chart-title div {
    margin-bottom: 1px;
  }
  
  /* Income statement mobile - compact */
  .is-controls {
    gap: 4px !important;
  }
  
  .is-controls select {
    font-size: 11px !important;
    padding: 5px 8px !important;
    min-height: 28px;
  }
  
  .is-options-stack {
    padding: 4px 8px !important;
    gap: 0 !important;
  }
  
  .radio-group-stacked {
    gap: 0 !important;
  }
  
  .radio-group-stacked .radio-label {
    padding: 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  
  .is-checkbox-label,
  .is-checkbox-label.small {
    padding: 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    min-height: auto !important;
  }
  
  .checkbox-stack {
    gap: 0 !important;
  }
  
  .checkbox-label {
    padding: 3px 0 !important;
    min-height: auto !important;
    line-height: 1.3 !important;
  }
  
  /* Data table mobile improvements */
  .data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th {
    padding: 6px 6px;
    white-space: nowrap;
    font-size: 10px;
  }
  
  .data-table td {
    padding: 6px 6px;
    white-space: nowrap;
  }
  
  /* Compact table header row */
  .table-header-row {
    padding: 6px 0 4px 0;
    font-size: 12px;
  }
  
  /* Dropdown menu mobile */
  .dropdown-menu {
    min-width: 180px;
  }
  
  .dropdown-item {
    padding: 14px 18px;
    font-size: 15px;
  }
  
  /* Header adjustments - 100% width on mobile */
  .header {
    padding: 12px 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .header-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .header-logo {
    height: 28px;
    flex-shrink: 0;
  }
  
  .logo {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .header-right {
    flex-shrink: 0;
    gap: 8px;
  }
  
  .dark-mode-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }
  
  .user-dropdown-btn {
    padding: 6px 8px;
    font-size: 12px;
    max-width: 100px;
  }
  
  .user-dropdown-btn .user-label {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .user-dropdown-arrow {
    font-size: 10px;
  }
  
  .logout-btn {
    padding: 10px 14px;
    font-size: 12px;
    min-height: 44px;
  }
  
  /* Export dropdown mobile */
  .export-dropdown-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

/* Small mobile devices */
@media (max-width: 400px) {
  .content {
    padding: 16px 12px;
  }
  
  .overview-metric-tile {
    padding: 14px;
  }
  
  .metric-tile-title {
    font-size: 13px;
  }
  
  .stat-label {
    font-size: 9px;
  }
  
  .stat-value {
    font-size: 13px;
  }
  
  .summary-tile {
    min-width: 0;
    padding: 4px 2px;
  }
  
  .summary-tile .tile-label {
    font-size: 8px;
  }
  
  .summary-tile .tile-value {
    font-size: 10px;
  }
  
  .summary-tile .tile-sub {
    font-size: 7px;
  }
  
  .chart-fullscreen-stats {
    gap: 12px;
  }
  
  .chart-fullscreen-stats .stat-box {
    padding: 10px 14px;
    min-width: 80px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects that don't work well on touch */
  .overview-metric-tile:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  
  .nav-item:hover {
    background: transparent;
  }
  
  .nav-item:active {
    background: #1f2937;
  }
  
  /* Ensure touch targets are large enough */
  button, 
  select, 
  .nav-item,
  .dropdown-item {
    min-height: 44px;
  }
  
  /* Checkboxes can be smaller - the label wraps them */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 18px;
  }
  
  .checkbox-label,
  .radio-label,
  .is-checkbox-label {
    min-height: 28px;
    padding: 2px 0;
  }
  
  /* Better touch feedback */
  .overview-metric-tile:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
  
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.97);
  }
  
  /* Saved views controls - larger touch targets */
  .saved-views-select {
    min-height: 44px;
    font-size: 16px;
    max-width: none;
  }
  
  .save-view-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .delete-view-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .saved-views-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  /* AI analysis panel touch improvements */
  .ai-analysis-header {
    min-height: 48px;
    padding: 12px 16px;
  }
  
  .ai-run-btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 12px;
  }
  
  /* Login box touch improvements */
  .login-box input {
    min-height: 48px;
    font-size: 16px;
  }
  
  .login-box button {
    min-height: 48px;
    font-size: 16px;
  }
  
  /* Config panel header touch target */
  .config-header {
    min-height: 48px;
  }
  
  /* Table row touch targets for expandable rows */
  .is-expandable td:first-child,
  .bs-expandable td:first-child {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  
  /* Export dropdown touch target */
  .export-dropdown-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Range slider thumbs - larger for touch */
  .range-container input[type="range"]::-webkit-slider-thumb {
    height: 32px;
    width: 32px;
    margin-top: -12.5px;
  }
  
  .range-container input[type="range"]::-moz-range-thumb {
    height: 32px;
    width: 32px;
  }
  
  /* Modal close button */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
  }
  
  /* Matrix tabs touch targets */
  .is-matrix-tab,
  .bs-matrix-tab {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* Improve scrollbar styling for webkit browsers */
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
  width: 8px;
}

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

.content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  .content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  .sidebar {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   PWA UPDATE BANNER
============================================================ */
.update-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10001;
  animation: slideUp 0.4s ease-out;
}

.update-banner button {
  background: #fff;
  color: #2563eb;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.update-banner button:hover {
  background: #f0f9ff;
  transform: scale(1.02);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================
   VIEW TRANSITION ANIMATIONS
============================================================ */

/* Fade in animation for content loading */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.overview-metric-tile {
  animation: fadeInUp 0.4s ease-out backwards;
}

.overview-metric-tile:nth-child(1) { animation-delay: 0.05s; }
.overview-metric-tile:nth-child(2) { animation-delay: 0.1s; }
.overview-metric-tile:nth-child(3) { animation-delay: 0.15s; }
.overview-metric-tile:nth-child(4) { animation-delay: 0.2s; }
.overview-metric-tile:nth-child(5) { animation-delay: 0.25s; }
.overview-metric-tile:nth-child(6) { animation-delay: 0.3s; }

/* Chart container fade in */
.chart-box,
.chart-with-tiles,
.is-table-box,
.rev-table-box {
  animation: fadeInUp 0.4s ease-out;
}

/* Summary tiles staggered animation */
.summary-tile {
  animation: fadeInUp 0.3s ease-out backwards;
}

.summary-tile:nth-child(1) { animation-delay: 0.1s; }
.summary-tile:nth-child(2) { animation-delay: 0.15s; }
.summary-tile:nth-child(3) { animation-delay: 0.2s; }
.summary-tile:nth-child(4) { animation-delay: 0.25s; }

/* Config panel animation */
.config-panel {
  animation: fadeInUp 0.3s ease-out;
}

/* Stat box hover scale */
.stat-box {
  transition: transform 0.2s ease, background 0.15s ease;
}

.stat-box:hover {
  transform: scale(1.03);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .dashboard-section,
  .dashboard-section.visible,
  .overview-metric-tile,
  .chart-box,
  .chart-with-tiles,
  .is-table-box,
  .rev-table-box,
  .summary-tile,
  .config-panel {
    animation: none !important;
    transition: none !important;
  }
  
  .update-banner {
    animation: none;
  }
}

/* Config and AI panels - width by section */
#overview > .config-panel,
#overview > .ai-analysis-panel {
  width: 80%;
  box-sizing: border-box;
}

#revenue > .config-panel,
#revenue > .ai-analysis-panel,
#revenue > .chart-with-tiles,
#accounts > .config-panel,
#accounts > .ai-analysis-panel,
#accounts > .chart-with-tiles,
#incomeStatement > .config-panel,
#incomeStatement > .ai-analysis-panel,
#balanceSheet > .config-panel,
#balanceSheet > .ai-analysis-panel,
#cashFlows > .config-panel,
#cashFlows > .ai-analysis-panel,
#costCodes > .config-panel,
#costCodes > .cc-charts-row {
  width: 70%;
  box-sizing: border-box;
}

/* Chart header with expand button */
.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.chart-header-row .chart-title {
  margin-bottom: 0;
}


/* Overview config: Time Period, Visuals, and Metrics side by side on desktop */
#overview .overview-time-visuals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

#overview .overview-time-period-box,
#overview .overview-visuals-box,
#overview .overview-metrics-box {
  width: fit-content;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

#overview .overview-visuals-box .visuals-checkboxes {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#overview .overview-config-row {
  margin-top: 12px;
}

/* Time period and year slider inline on desktop */
.overview-time-period-row {
  display: flex;
  flex-wrap: wrap;
  
  gap: 24px;
}

.overview-time-period-row .time-period-group {
  flex: 0 0 auto;
}

.overview-time-period-row .year-slider-section {
  flex: 0 0 auto;
  margin-top: 0;
}

.overview-year-select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.overview-year-select-wrapper label {
  font-weight: 500;
  font-size: 12px;
  color: #374151;
}

body.dark-mode .overview-year-select-wrapper label {
  color: #e2e8f0;
}

.overview-year-select-wrapper select {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 80px;
}

.overview-year-select-wrapper select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

@media (max-width: 768px) {
  .overview-time-period-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* Mobile overrides for equal-width panels */
@media (max-width: 768px) {
  #overview > .config-panel,
  #overview > .ai-analysis-panel,
  #revenue > .config-panel,
  #revenue > .ai-analysis-panel,
  #revenue > .chart-with-tiles,
  #accounts > .config-panel,
  #accounts > .ai-analysis-panel,
  #accounts > .chart-with-tiles,
  #incomeStatement > .config-panel,
  #incomeStatement > .ai-analysis-panel,
  #balanceSheet > .config-panel,
  #balanceSheet > .ai-analysis-panel,
  #cashFlows > .config-panel,
  #cashFlows > .ai-analysis-panel,
  #costCodes > .config-panel,
  #costCodes > .cc-charts-row {
    display: block;
    width: 100%;
  }
  
  /* COMPACT MOBILE CONFIG - Overview page */
  /* Visuals + Metrics side-by-side, Time Period above */
  
  /* Overview: Visuals + Metrics side-by-side, Time Period above */
  #overview .overview-time-visuals-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  
  #overview .overview-time-period-box {
    width: 100% !important;
    flex: 1 0 100% !important;
  }
  
  #overview .overview-visuals-box,
  #overview .overview-metrics-box {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  /* Tighter padding for all config boxes on mobile */
  #overview .overview-config-box,
  #overview .overview-time-period-box,
  #overview .overview-visuals-box,
  #overview .overview-metrics-box {
    padding: 6px 8px;
    margin: 0;
  }
  
  /* Compact section labels */
  #overview .overview-config-box > div:first-child,
  #overview .overview-time-period-box > div:first-child,
  #overview .overview-visuals-box > div:first-child,
  #overview .overview-metrics-box > div:first-child {
    font-size: 10px;
    margin-bottom: 4px;
    font-weight: 600;
  }
  
  /* Time period buttons smaller and tighter */
  #overview .time-period-tabs {
    gap: 4px;
  }
  
  #overview .time-period-tabs button {
    padding: 4px 10px;
    font-size: 11px;
    min-height: 28px;
  }
  
  /* Year selector compact */
  #overview .overview-year-select-wrapper {
    margin-top: 4px;
    gap: 6px;
  }
  
  #overview .overview-year-select-wrapper label {
    font-size: 10px;
  }
  
  #overview .overview-year-select-wrapper select {
    padding: 3px 6px;
    font-size: 11px;
    min-width: 60px;
  }
  
  /* Visuals checkboxes - vertical stack when side-by-side */
  #overview .visuals-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  #overview .visuals-checkboxes .checkbox-label {
    font-size: 10px !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  
  #overview .visuals-checkboxes .checkbox-label input[type="checkbox"] {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* Metrics checkboxes - single column when side-by-side with visuals */
  #overview .overview-metrics-box .metric-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  #overview .overview-metrics-box .checkbox-label {
    font-size: 10px !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  
  #overview .overview-metrics-box .checkbox-label input[type="checkbox"] {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* AI Analysis panel mobile improvements */
  .ai-analysis-panel {
    width: 100%;
    display: block !important;
    visibility: visible !important;
    margin-top: 12px;
  }
  
  .ai-analysis-header {
    padding: 10px 14px;
    min-height: auto;
    background: #e5e7eb;
    border: none;
    border-bottom: 1px solid #d1d5db;
  }
  
  .ai-run-btn {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
    min-width: 80px;
    font-weight: 700;
  }
  
  .ai-analysis-content {
    font-size: 13px;
    line-height: 1.5;
    padding: 14px;
  }
  
  .ai-analysis-content h1,
  .ai-analysis-content h2,
  .ai-analysis-content h3 {
    font-size: 14px !important;
  }
  
  /* Config panel 100% width on mobile */
  .config-panel {
    width: 100%;
  }
  
  /* Table containers horizontal scroll */
  .is-table-box,
  .rev-table-box,
  .bs-table-box,
  .cf-table-box {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Touch-friendly buttons */
  .ai-run-btn,
  .config-header,
  .ai-analysis-header,
  .dropdown-item,
  .nav-item {
    min-height: 44px;
  }
  
  /* Saved views controls mobile */
  .saved-view-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .saved-view-controls select {
    flex: 1;
    min-width: 120px;
  }
  
  .saved-view-controls button {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* Extra small devices */
@media (max-width: 400px) {
  .ai-analysis-content {
    font-size: 12px;
    padding: 10px;
  }
  
  .ai-run-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .saved-view-controls {
    flex-direction: column;
  }
  
  .saved-view-controls select,
  .saved-view-controls button {
    width: 100%;
  }
}

/* Cash Flow table mobile styles */
@media (max-width: 768px) {
  #cashFlowTable {
    font-size: 12px;
    min-width: 500px;
  }
  
  #cashFlowTable th,
  #cashFlowTable td {
    padding: 8px 10px;
  }
}

@media (max-width: 500px) {
  #cashFlowTable {
    font-size: 10px;
    min-width: 400px;
  }
  
  #cashFlowTable th,
  #cashFlowTable td {
    padding: 5px 6px;
  }
  
  .is-indent-1 td:first-child { padding-left: 12px !important; }
  .is-indent-2 td:first-child { padding-left: 18px !important; }
  .is-indent-3 td:first-child { padding-left: 24px !important; }
}

/* Balance Sheet table container scroll */
@media (max-width: 768px) {
  .bs-table-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  
  #balanceSheetTable {
    min-width: 500px;
  }
}

/* Login screen mobile improvements */
@media (max-width: 500px) {
  .login-box {
    width: 95%;
    padding: 24px 20px;
    margin: 10px;
  }
  
  .login-box h2 {
    font-size: 20px;
  }
  
  .login-box input {
    font-size: 16px;
    padding: 14px;
    min-height: 48px;
  }
  
  .login-box button {
    font-size: 16px;
    padding: 14px;
    min-height: 48px;
  }
}

/* Header user info mobile */
@media (max-width: 768px) {
  .header-right {
    gap: 8px;
  }
  
  .current-user {
    font-size: 12px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Sidebar touch improvements */
@media (max-width: 768px) {
  .nav-item {
    padding: 16px 24px;
    min-height: 52px;
    display: flex;
    align-items: center;
  }
  
  .sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* User dropdown menu */
.user-dropdown {
  position: relative;
  z-index: 200;
}

.user-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.user-dropdown-btn:hover {
  background: rgba(255,255,255,0.25);
}

.user-dropdown-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.user-dropdown .dropdown-menu {
  right: 0;
  min-width: 160px;
  z-index: 1100;
}

/* Export bar - positioned below header */
.export-bar {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 20px;
  display: flex;
  justify-content: flex-end;
}

.export-bar .export-dropdown-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.export-bar .export-dropdown-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.export-bar .dropdown-menu {
  right: 0;
}

/* Export bar - ensure it's always visible and below header */
.export-bar {
  display: flex !important;
  position: relative;
  z-index: 99;
}

/* Mobile user label scaling */
@media (max-width: 768px) {
  /* Ensure header-right doesn't push too wide */
  .header-right {
    flex-shrink: 0;
    gap: 8px;
  }
  
  .user-dropdown-btn {
    padding: 4px 8px;
    font-size: 10px;
    max-width: 80px;
  }
  
  .user-dropdown-btn .user-label {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  
  .user-dropdown-arrow {
    font-size: 7px;
  }
  
  /* Export bar below header on mobile */
  .export-bar {
    padding: 8px 16px;
    display: flex !important;
  }
}

@media (max-width: 500px) {
  .user-dropdown-btn {
    padding: 3px 6px;
    font-size: 9px;
    max-width: 70px;
  }
  
  .user-dropdown-btn .user-label {
    max-width: 40px;
    font-size: 9px;
  }
  
  .user-dropdown-arrow {
    font-size: 6px;
  }
}

/* ============================================================
   CASH BALANCES PAGE
============================================================ */
.cash-balances-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.cash-balances-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

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

.cash-balances-table thead {
  background: #f9fafb;
}

.cash-balances-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.cash-balances-table th:last-child {
  text-align: right;
}

.cash-balances-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.cash-balances-table tbody tr:hover {
  background: #f9fafb;
}

.cash-balances-table .account-name {
  font-weight: 500;
  color: #1f2937;
}

.cash-balances-table .account-balance {
  text-align: right;
  font-weight: 600;
  color: #10b981;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.cash-balances-table .account-balance.negative {
  color: #dc2626;
}

.cash-balances-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #1e3a5f;
  color: #fff;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 18px;
}

.cash-balances-total .total-label {
  font-weight: 600;
}

.cash-balances-total .total-value {
  font-weight: 700;
  font-size: 24px;
  font-family: 'SF Mono', 'Consolas', monospace;
}

@media (max-width: 600px) {
  .cash-balances-container {
    padding: 12px;
  }
  
  .cash-balances-table th,
  .cash-balances-table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .cash-balances-total {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* Cash Summary and History Sections */
.cash-summary-section {
  margin-bottom: 24px;
}

.cash-history-section {
  margin-bottom: 24px;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

.cash-summary-section h3,
.cash-history-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* Daily Balance Table */
.daily-balance-table-container {
  margin-top: 12px;
}

.table-expand-toggle {
  margin-bottom: 8px;
}

.table-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.table-expand-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.table-expand-btn .expand-icon {
  font-size: 10px;
  color: #6b7280;
}

.daily-balance-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.daily-balance-table {
  width: auto;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: auto;
}

.daily-balance-table th,
.daily-balance-table td {
  white-space: nowrap;
  width: auto;
}

.daily-balance-table .account-col {
  display: none;
}

.daily-balance-table.expanded .account-col {
  display: table-cell;
}

.daily-balance-table.expanded th.total-col {
  background: #0a1f35;
}

.daily-balance-table.expanded td.total-col {
  background: #e8f5e9;
}

.daily-balance-table thead {
  background: #1e3a5f;
  color: #fff;
  position: sticky;
  top: 0;
}

.daily-balance-table th {
  padding: 8px 10px;
  text-align: right;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  line-height: 1.3;
  vertical-align: bottom;
}

.daily-balance-table th.date-col {
  text-align: left;
}

.daily-balance-table th.total-col {
  background: #0f2942;
}

.daily-balance-table th.account-col {
}

.daily-balance-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  white-space: nowrap;
}

.daily-balance-table td.date-col {
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  font-size: 11px;
}

.daily-balance-table td.total-col {
  font-weight: 700;
  background: #f9fafb;
  color: #10b981;
}

.daily-balance-table td.balance-col {
  color: #1f2937;
}

.daily-balance-table td.negative {
  color: #dc2626;
}

.daily-balance-table tbody tr:hover {
  background: #f3f4f6;
}

.daily-balance-table tbody tr.today-row {
  background: #ecfdf5;
}

.daily-balance-table tbody tr.today-row:hover {
  background: #d1fae5;
}

.daily-balance-table tbody tr.today-row td.date-col {
  font-weight: 700;
  color: #10b981;
}

@media (max-width: 768px) {
  .daily-balance-table {
    font-size: 12px;
  }
  
  .daily-balance-table th,
  .daily-balance-table td {
    padding: 6px 8px;
  }
}

/* Cash Balances Config */
.cash-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.account-select-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  background: #e5e7eb;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #374151;
}

.btn-small:hover {
  background: #d1d5db;
}

.account-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 8px;
}

.account-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}

.account-checkbox-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.loading-spinner-small {
  font-size: 12px;
  color: #6b7280;
  padding: 8px;
}

/* Cash Current Header */
#cashReports .cash-current-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  color: #fff !important;
  width: 80% !important;
  max-width: 80% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
}

#cashReports .cash-header-left {
  flex-shrink: 0;
}

#cashReports .cash-header-right {
  flex: 1;
  min-width: 0;
}

#cashReports .cash-header-accounts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
}

#cashReports .cash-header-accounts-grid.with-checkboxes {
  gap: 4px 16px;
}

#cashReports .cash-header-account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  opacity: 0.9;
}

#cashReports .cash-header-account-item.dimmed {
  opacity: 0.5;
}

#cashReports .cash-acct-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

#cashReports .cash-acct-filter-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

#cashReports .cash-acct-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cashReports .cash-acct-value {
  white-space: nowrap;
  font-weight: 500;
}

.cash-header-title {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 4px;
}

.cash-header-total {
  font-size: 26px;
  font-weight: 700;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.cash-header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  border-top: 1px solid rgba(255,255,255,0.2);
  transition: color 0.2s;
}

.cash-header-toggle:hover {
  color: #fff;
}

.cash-header-toggle .toggle-icon {
  font-size: 10px;
}

.cash-header-accounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.2);
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.cash-header-accounts.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.cash-header-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.cash-header-account-name {
  font-size: 10px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.cash-header-account-value {
  font-size: 12px;
  font-weight: 600;
  font-family: 'SF Mono', 'Consolas', monospace;
  white-space: nowrap;
}

@media (max-width: 500px) {
  .cash-header-accounts {
    grid-template-columns: 1fr;
  }
  
  .cash-header-account-name {
    max-width: 150px;
  }
}

/* Cash Chart Section */
.cash-chart-section {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cash-chart-section .chart-wrapper {
  min-height: 300px;
  height: 350px;
}

@media (max-width: 768px) {
  .cash-chart-section .chart-wrapper {
    min-height: 280px;
    height: 300px;
  }
}

.cash-chart-section .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cash-chart-section .chart-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cash-chart-section .chart-header-controls .checkbox-label.compact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.cash-chart-section .chart-header-controls .checkbox-label.compact input {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.cash-chart-section .chart-header .chart-expand-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #6b7280;
}

.cash-chart-section .chart-header .chart-expand-btn:hover {
  background: #e5e7eb;
  color: #374151;
  border-color: #9ca3af;
}

[data-theme="dark"] .cash-chart-section .chart-header .chart-expand-btn {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

[data-theme="dark"] .cash-chart-section .chart-header .chart-expand-btn:hover {
  background: #4b5563;
  color: #e5e7eb;
}

.cash-chart-section .chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.cash-range-buttons {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 16px 0 8px;
  background: #1e293b;
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.cash-range-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.cash-range-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.1);
}

.cash-range-btn.active {
  background: #334155;
  color: #ffffff;
  font-weight: 600;
}

.cash-range-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

[data-theme="light"] .cash-range-divider {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .cash-range-buttons {
  background: #e5e7eb;
}

[data-theme="light"] .cash-range-btn {
  color: #6b7280;
}

[data-theme="light"] .cash-range-btn:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cash-range-btn.active {
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cash-custom-range-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.cash-custom-range-inline input[type="date"] {
  padding: 6px 10px;
  border: 1px solid #374155;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 13px;
}

.cash-custom-range-inline span {
  color: #94a3b8;
  font-size: 13px;
}

.cash-apply-btn {
  padding: 6px 14px;
  background: #2d5a3d;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cash-apply-btn:hover {
  background: #3a7a52;
}

[data-theme="light"] .cash-custom-range-inline input[type="date"] {
  background: #ffffff;
  border-color: #d1d5db;
  color: #374151;
}

[data-theme="light"] .cash-custom-range-inline span {
  color: #6b7280;
}

@media (max-width: 768px) {
  .cash-range-buttons {
    width: 100%;
    box-sizing: border-box;
  }
  
  .cash-range-btn {
    flex: 1;
    padding: 8px 8px;
    font-size: 12px;
  }
  
  .cash-custom-range-inline {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .cash-custom-range-inline input[type="date"] {
    flex: 1;
    min-width: 100px;
  }
}

.cash-summary-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* Labor Range Buttons - similar to Cash Range Buttons */
.labor-range-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px;
  background: #1e293b;
  padding: 6px 10px;
  border-radius: 8px;
  width: fit-content;
}

.labor-range-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.labor-range-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.1);
}

.labor-range-btn.active {
  background: #334155;
  color: #ffffff;
  font-weight: 600;
}

[data-theme="light"] .labor-range-buttons {
  background: #e5e7eb;
}

[data-theme="light"] .labor-range-btn {
  color: #6b7280;
}

[data-theme="light"] .labor-range-btn:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .labor-range-btn.active {
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.labor-custom-range-inline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.labor-custom-range-inline input[type="date"] {
  padding: 6px 10px;
  border: 1px solid #374155;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 13px;
}

.labor-custom-range-inline span {
  color: #94a3b8;
  font-size: 13px;
}

[data-theme="light"] .labor-custom-range-inline input[type="date"] {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1f2937;
}

[data-theme="light"] .labor-custom-range-inline span {
  color: #6b7280;
}

/* Desktop: Larger font sizes for Cash Balances tiles */
@media (min-width: 769px) {
  .cash-summary-tiles .summary-tile .tile-label {
    font-size: 14px;
  }
  
  .cash-summary-tiles .summary-tile .tile-value,
  .cash-summary-tiles .summary-tile .tile-value.positive,
  .cash-summary-tiles .summary-tile .tile-value.negative {
    font-size: 24px;
  }
  
  .cash-summary-tiles .summary-tile .tile-subvalue {
    font-size: 12px;
  }
}

/* Revenue & Account Detail summary tiles - larger fonts */
#revenue .summary-tile,
#accounts .summary-tile {
  text-align: center;
  padding: 20px 16px;
  background: var(--card-bg, #f9fafb);
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
}

#revenue .summary-tile .tile-label,
#accounts .summary-tile .tile-label {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

#revenue .summary-tile .tile-value,
#accounts .summary-tile .tile-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e3a5f;
}

#revenue .summary-tile .tile-value.positive,
#accounts .summary-tile .tile-value.positive {
  color: #10b981;
}

#revenue .summary-tile .tile-value.negative,
#accounts .summary-tile .tile-value.negative {
  color: #dc2626;
}

#revenue .summary-tile .tile-sub,
#accounts .summary-tile .tile-sub {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 6px;
}

@media (min-width: 1200px) {
  #revenue .summary-tile .tile-label,
  #accounts .summary-tile .tile-label {
    font-size: 15px;
  }
  
  #revenue .summary-tile .tile-value,
  #accounts .summary-tile .tile-value {
    font-size: 32px;
  }
  
  #revenue .summary-tile .tile-sub,
  #accounts .summary-tile .tile-sub {
    font-size: 14px;
  }
}

@media (min-width: 1600px) {
  #revenue .summary-tile .tile-label,
  #accounts .summary-tile .tile-label {
    font-size: 16px;
  }
  
  #revenue .summary-tile .tile-value,
  #accounts .summary-tile .tile-value {
    font-size: 36px;
  }
  
  #revenue .summary-tile .tile-sub,
  #accounts .summary-tile .tile-sub {
    font-size: 15px;
  }
}

/* Dark mode for Revenue & Account Detail tiles */
[data-theme="dark"] #revenue .summary-tile .tile-value,
body.dark-mode #revenue .summary-tile .tile-value,
[data-theme="dark"] #accounts .summary-tile .tile-value,
body.dark-mode #accounts .summary-tile .tile-value {
  color: #e2e8f0;
}

[data-theme="dark"] #revenue .summary-tile .tile-label,
body.dark-mode #revenue .summary-tile .tile-label,
[data-theme="dark"] #accounts .summary-tile .tile-label,
body.dark-mode #accounts .summary-tile .tile-label {
  color: #94a3b8;
}

/* Generic summary tile fallback (for other sections) */
.summary-tile {
  text-align: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.summary-tile .tile-label {
  font-size: 9px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.summary-tile .tile-value {
  font-size: 12px;
  font-weight: 700;
  color: #1e3a5f;
}

.summary-tile .tile-value.positive,
.summary-tile .tile-value.negative {
  font-size: 12px;
  font-weight: 700;
}

.summary-tile .tile-subvalue {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .cash-summary-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
  }
  
  .cash-summary-tiles .summary-tile {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
  }
  
  .cash-summary-tiles .summary-tile .tile-label {
    font-size: 9px;
  }
  
  .cash-summary-tiles .summary-tile .tile-value {
    font-size: 12px;
  }
  
  .cash-summary-tiles .summary-tile .tile-subvalue {
    font-size: 8px;
  }
  
  .cash-header-total {
    font-size: 24px;
  }
  
  /* Cash Balances - 100% width elements on mobile */
  #cashReports .cash-current-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  #cashReports .cash-header-accounts-grid {
    grid-template-columns: 1fr;
  }
  
  #cashReports .cash-chart-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #cashReports .cash-chart-section .chart-wrapper {
    width: 100% !important;
  }
  
  #cashReports .cash-chart-section .chart-wrapper canvas {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .cash-history-section {
    width: 100%;
    box-sizing: border-box;
  }
  
  .daily-balance-table-container,
  .transaction-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  #cashBalances .config-panel {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ============================================================
   CASH REPORT PAGE
============================================================ */

/* Page header row */
#cashReport .page-header-row {
  display: flex;
  justify-content: space-between;
  
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

#cashReport .page-header-row h2 {
  margin: 0 0 4px 0;
}

#cashReport .section-description {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Daily/Weekly Toggle */
.dcr-view-toggle {
  display: inline-flex;
  width: fit-content;
  gap: 0;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.dcr-toggle-btn {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dcr-toggle-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.dcr-toggle-btn.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

[data-theme="dark"] .dcr-toggle-btn.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

/* Chart Container */
.dcr-chart-container {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.dcr-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

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

.dcr-chart-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

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

/* Metric Tiles Row */
.dcr-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.dcr-metric-tile {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}

.dcr-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.dcr-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dcr-metric-value.positive {
  color: #10b981;
}

.dcr-metric-value.negative {
  color: #dc2626;
}

.dcr-metric-sublabel {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Delta Badges for Week-over-Week Comparison */
.dcr-metric-delta {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 4px;
  min-height: 18px;
}

.dcr-metric-delta.delta-positive {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.dcr-metric-delta.delta-negative {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.dcr-metric-delta.delta-neutral {
  background: rgba(107, 114, 128, 0.15);
  color: var(--text-secondary);
}

/* Executive Summary Section */
.dcr-executive-summary {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dcr-summary-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dcr-summary-text {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
}

.dcr-summary-text .highlight-positive {
  color: #16a34a;
  font-weight: 700;
}

.dcr-summary-text .highlight-negative {
  color: #dc2626;
  font-weight: 700;
}

.dcr-summary-text .highlight-neutral {
  color: #1e293b;
  font-weight: 700;
}

/* Dark mode - Executive Summary */
[data-theme="dark"] .dcr-executive-summary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

[data-theme="dark"] .dcr-summary-text {
  color: #ffffff;
}

[data-theme="dark"] .dcr-summary-text .highlight-positive {
  color: #86efac;
}

[data-theme="dark"] .dcr-summary-text .highlight-negative {
  color: #fca5a5;
}

[data-theme="dark"] .dcr-summary-text .highlight-neutral {
  color: #ffffff;
}

/* AI Summary Panel (replaces executive summary) */
.dcr-ai-summary-panel {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

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

.dcr-ai-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dcr-ai-run-btn {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dcr-ai-run-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.dcr-ai-run-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.dcr-ai-btn-group {
  display: flex;
  gap: 8px;
}

.dcr-ai-email-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dcr-ai-email-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.dcr-ai-email-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

[data-theme="dark"] .dcr-ai-email-btn {
  background: rgba(16, 185, 129, 0.3);
  border: 1px solid rgba(16, 185, 129, 0.5);
}

[data-theme="dark"] .dcr-ai-email-btn:hover {
  background: rgba(16, 185, 129, 0.4);
}

.dcr-ai-summary-content {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.6;
}

.dcr-ai-summary-content strong {
  color: #1e40af;
  font-weight: 700;
}

.dcr-ai-placeholder {
  color: #64748b;
  font-style: italic;
}

.dcr-ai-summary-content .ai-analysis-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #3b82f6;
}

.dcr-ai-summary-content .highlight-positive {
  color: #16a34a;
  font-weight: 700;
}

.dcr-ai-summary-content .highlight-negative {
  color: #dc2626;
  font-weight: 700;
}

.dcr-ai-summary-content .highlight-neutral {
  color: #1e293b;
  font-weight: 700;
}

/* Dark mode - AI Summary Panel */
[data-theme="dark"] .dcr-ai-summary-panel {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

[data-theme="dark"] .dcr-ai-summary-title {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .dcr-ai-run-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .dcr-ai-run-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .dcr-ai-summary-content {
  color: #ffffff !important;
}

[data-theme="dark"] .dcr-ai-summary-content strong {
  color: #67e8f9 !important;
  font-weight: 700;
}

[data-theme="dark"] .dcr-ai-summary-content p,
[data-theme="dark"] .dcr-ai-summary-content li,
[data-theme="dark"] .dcr-ai-summary-content ul {
  color: #ffffff !important;
}

[data-theme="dark"] .dcr-ai-placeholder {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .dcr-ai-summary-content .highlight-positive {
  color: #4ade80 !important;
}

[data-theme="dark"] .dcr-ai-summary-content .highlight-negative {
  color: #f87171 !important;
}

[data-theme="dark"] .dcr-ai-summary-content .highlight-neutral {
  color: #ffffff !important;
}

/* Executive Layout Enhancements */
.dcr-executive-layout .dcr-metric-tile {
  padding: 20px;
}

.dcr-executive-layout .dcr-metric-value {
  font-size: 28px;
}

/* Table Section */
.dcr-table-section {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
}

.dcr-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

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

.dcr-table-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.dcr-table-container {
  max-height: 400px;
  overflow-y: auto;
}

/* Transaction Table */
.dcr-transaction-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dcr-transaction-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.dcr-transaction-table th {
  background: var(--table-header-bg);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-primary);
}

.dcr-transaction-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
}

.dcr-transaction-table tbody tr:hover {
  background: var(--table-row-hover);
}

.dcr-transaction-table .txn-date {
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 12px;
}

.dcr-transaction-table .txn-account {
  color: var(--text-secondary);
  font-size: 12px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcr-transaction-table .txn-description {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcr-transaction-table .txn-amount {
  text-align: right;
  font-weight: 600;
  font-family: 'Menlo', 'Monaco', monospace;
}

.dcr-transaction-table .txn-amount.positive {
  color: #10b981;
}

.dcr-transaction-table .txn-amount.negative {
  color: #dc2626;
}

/* Transactions Grid (Top 5 Deposits/Withdrawals) */
.dcr-transactions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.dcr-top-transactions {
  font-size: 12px;
}

.dcr-top-transactions .txn-description {
  max-width: 180px;
}

.dcr-top-transactions .txn-attribution {
  max-width: 200px;
  font-size: 11px;
  color: var(--text-secondary);
}

.dcr-top-transactions .txn-attribution .match-indicator {
  font-size: 8px;
  vertical-align: middle;
}

.dcr-top-transactions .txn-attribution .match-indicator.match-high {
  color: #10b981;
}

.dcr-top-transactions .txn-attribution .match-indicator.match-medium {
  color: #f59e0b;
}

.dcr-top-transactions .txn-attribution .match-info {
  font-style: italic;
}

.dcr-no-data {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Transaction Match Row (Cross-reference info) */
.dcr-match-row {
  background: var(--bg-tertiary);
  border-top: none;
}

.dcr-match-row td {
  padding: 4px 12px 8px 12px !important;
  font-size: 10px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-secondary);
}

.dcr-match-row .match-indicator {
  display: inline-block;
  font-size: 8px;
  margin-right: 6px;
  vertical-align: middle;
}

.dcr-match-row.match-high .match-indicator {
  color: #10b981;
}

.dcr-match-row.match-medium .match-indicator {
  color: #f59e0b;
}

.dcr-match-row .match-info {
  font-style: italic;
  color: var(--text-secondary);
}

.dcr-match-row.match-high .match-info {
  color: #10b981;
}

.dcr-match-row.match-medium .match-info {
  color: #f59e0b;
}

.dcr-transaction-table tbody tr:has(+ .dcr-match-row) {
  border-bottom: none;
}

.dcr-transaction-table tbody tr:has(+ .dcr-match-row) td {
  border-bottom: none;
  padding-bottom: 4px;
}

/* Cash Balance Safety Check Section */
.dcr-safety-check-section {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}

.dcr-safety-header {
  margin-bottom: 16px;
}

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

.dcr-safety-content {
  overflow-x: auto;
}

.dcr-safety-calculation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 12px 0;
}

.dcr-safety-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 16px 20px;
  min-width: 120px;
  height: 110px;
}

.dcr-safety-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  text-align: center;
  white-space: nowrap;
}

.dcr-safety-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.dcr-safety-value.positive {
  color: #10b981;
}

.dcr-safety-value.negative {
  color: #dc2626;
}

.dcr-safety-subtitle {
  display: block;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.2;
  max-width: 90px;
  text-align: center;
}

.dcr-safety-operator {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 8px;
}

.dcr-safety-equals {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 12px;
}

.dcr-safety-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  padding: 16px 24px;
  min-width: 130px;
  height: 110px;
}

.dcr-safety-total {
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
}

.dcr-safety-total.positive {
  color: #10b981;
}

.dcr-safety-total.negative {
  color: #dc2626;
}

/* Dark mode for Safety Check */
[data-theme="dark"] .dcr-safety-check-section {
  background: #1e293b;
  border-color: #374151;
}

[data-theme="dark"] .dcr-safety-item {
  background: #334155;
  border-color: #475569;
}

[data-theme="dark"] .dcr-safety-result {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1));
  border-color: #475569;
}

/* Dark mode overrides */
[data-theme="dark"] .dcr-chart-container,
[data-theme="dark"] .dcr-table-section {
  background: #1e293b;
  border-color: #374151;
}

[data-theme="dark"] .dcr-metric-tile {
  background: #334155 !important;
  border: 1px solid #475569 !important;
}

[data-theme="dark"] .dcr-metric-label {
  color: #9ca3af;
}

[data-theme="dark"] .dcr-metric-sublabel {
  color: #6b7280;
}

[data-theme="dark"] .dcr-transaction-table th {
  background: #1f2937;
}

[data-theme="dark"] .dcr-transaction-table tbody tr:hover {
  background: #374151;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #cashReport .page-header-row {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .dcr-view-toggle {
    align-self: flex-start;
  }
  
  .dcr-transactions-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dcr-safety-calculation {
    flex-direction: column;
    gap: 8px;
  }
  
  .dcr-safety-item {
    width: 100%;
    max-width: 200px;
  }
  
  .dcr-safety-operator,
  .dcr-safety-equals {
    font-size: 20px;
  }
  
  .dcr-safety-result {
    width: 100%;
    max-width: 200px;
  }
  
  .dcr-chart-container {
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    margin-bottom: 16px;
  }
  
  .dcr-chart-wrapper {
    height: 200px;
  }
  
  .dcr-metrics-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px;
  }
  
  .dcr-metric-tile {
    padding: 12px 8px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 10px !important;
    text-align: center;
  }
  
  [data-theme="dark"] .dcr-metric-tile {
    background: #334155 !important;
    border: 1px solid #475569 !important;
  }
  
  .dcr-metric-label {
    font-size: 10px;
    display: block;
    margin-bottom: 6px;
  }
  
  .dcr-metric-value {
    font-size: 16px;
    font-weight: 700;
    display: block;
  }
  
  .dcr-metric-sublabel {
    font-size: 9px;
    display: block;
    margin-top: 4px;
  }
  
  .dcr-table-section {
    padding: 12px;
  }
  
  .dcr-table-container {
    max-height: 300px;
  }
  
  .dcr-transaction-table {
    font-size: 12px;
  }
  
  .dcr-transaction-table th,
  .dcr-transaction-table td {
    padding: 8px 6px;
  }
  
  .dcr-transaction-table .txn-account {
    max-width: 80px;
  }
  
  .dcr-transaction-table .txn-description {
    max-width: 120px;
  }
}

/* Cash Tabs */
.cash-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid #e5e7eb;
}

.cash-tab {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}

.cash-tab:hover {
  color: #374151;
  background: #f9fafb;
}

.cash-tab:active {
  background: #e5e7eb;
}

.cash-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: #f0f5ff;
}

.cash-tab-content {
  display: none;
  padding-top: 16px;
}

.cash-tab-content.active {
  display: block;
}

/* Transaction Table */
.transaction-table-container {
  overflow-x: auto;
  max-height: 500px;
  overflow-y: auto;
}

.transaction-table {
  width: auto;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.transaction-table th,
.transaction-table td {
  white-space: nowrap;
  width: auto;
}

.transaction-table th {
  position: sticky;
  top: 0;
  background: #1e3a5f;
  color: #fff;
  font-weight: 600;
  position: relative;
}

/* Resizable column handle */
.transaction-table th .resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}

.transaction-table th .resize-handle:hover,
.transaction-table th .resize-handle.resizing {
  background: rgba(255, 255, 255, 0.3);
}

.transaction-table.resizing {
  cursor: col-resize;
  user-select: none;
}

.transaction-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  white-space: nowrap;
}

.transaction-table tr:nth-child(even) {
  background: #f9fafb;
}

.transaction-table tr:hover {
  background: #f3f4f6;
}

.transaction-table .txn-date {
  white-space: nowrap;
  color: #6b7280;
  font-size: 12px;
}

.transaction-table .txn-account {
  font-weight: 500;
  color: #374151;
  line-height: 1.3;
  font-size: 12px;
}

.transaction-table .txn-description {
  color: #374151;
  white-space: nowrap;
  line-height: 1.4;
}

.transaction-table .txn-category {
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
}

.transaction-table .txn-amount {
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-weight: 600;
  white-space: nowrap;
}

.transaction-table .txn-amount.positive {
  color: #10b981;
}

.transaction-table .txn-amount.negative {
  color: #dc2626;
}

@media (max-width: 768px) {
  .cash-tab {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .transaction-table {
    font-size: 11px;
  }
  
  .transaction-table th,
  .transaction-table td {
    padding: 6px 8px;
  }
  
}

/* ============================================================
   MATRIX VIEW MOBILE ENHANCEMENTS
============================================================ */

/* Scroll indicator for matrix tables */
.is-table-box::after,
.matrix-table-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.is-table-box.show-scroll-hint::after,
.matrix-table-wrapper.show-scroll-hint::after {
  opacity: 1;
}

/* Make matrix tables fit content on mobile */
@media (max-width: 768px) {
  #incomeStatementTable,
  #balanceSheetTable,
  #cashFlowTable {
    width: 100%;
    min-width: auto;
    table-layout: fixed;
    font-size: clamp(12px, 3.5vw, 16px);
  }
  
  #incomeStatementTable th,
  #incomeStatementTable td,
  #balanceSheetTable th,
  #balanceSheetTable td,
  #cashFlowTable th,
  #cashFlowTable td {
    padding: 6px 8px;
    white-space: nowrap;
    width: auto;
  }
  
  /* First column allows wrapping on mobile */
  #incomeStatementTable td:first-child,
  #incomeStatementTable th:first-child,
  #balanceSheetTable td:first-child,
  #balanceSheetTable th:first-child,
  #cashFlowTable td:first-child,
  #cashFlowTable th:first-child {
    position: static;
    background: inherit;
    z-index: auto;
    box-shadow: none;
    width: 55%;
    max-width: 55%;
    min-width: 55%;
    padding-right: 8px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  /* Second column for numbers */
  #incomeStatementTable td:nth-child(2),
  #incomeStatementTable th:nth-child(2),
  #balanceSheetTable td:nth-child(2),
  #balanceSheetTable th:nth-child(2),
  #cashFlowTable td:nth-child(2),
  #cashFlowTable th:nth-child(2) {
    width: 45%;
    text-align: right;
    white-space: nowrap;
    background: transparent !important;
  }
  
  /* All header columns after first - transparent for matrix view */
  #incomeStatementTable th:not(:first-child),
  #balanceSheetTable th:not(:first-child),
  #cashFlowTable th:not(:first-child) {
    background: transparent !important;
  }
  
  /* All table cells transparent on mobile to inherit row background */
  #incomeStatementTable tbody td,
  #balanceSheetTable tbody td,
  #cashFlowTable tbody td {
    background: transparent !important;
  }
  
  /* Scroll hint indicator */
  .is-table-box,
  .bs-table-box,
  .cf-table-box {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 500px) {
  #incomeStatementTable,
  #balanceSheetTable,
  #cashFlowTable {
    width: 100%;
    min-width: auto;
    table-layout: fixed;
    font-size: clamp(11px, 3vw, 14px);
  }
  
  #incomeStatementTable th,
  #incomeStatementTable td,
  #balanceSheetTable th,
  #balanceSheetTable td,
  #cashFlowTable th,
  #cashFlowTable td {
    padding: 4px 6px;
    width: auto;
  }
  
  /* First column on small screens */
  #incomeStatementTable td:first-child,
  #incomeStatementTable th:first-child,
  #balanceSheetTable td:first-child,
  #balanceSheetTable th:first-child,
  #cashFlowTable td:first-child,
  #cashFlowTable th:first-child {
    position: static;
    padding-right: 6px;
    width: 55%;
    min-width: 55%;
    max-width: 55%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ============================================================
   TRANSACTIONS TABLE SEARCH FILTER
============================================================ */
.transaction-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.transaction-filter-row label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.transaction-filter-row input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  min-width: 150px;
}

.transaction-filter-row input[type="text"]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.transaction-filter-row .filter-clear-btn {
  padding: 6px 12px;
  background: #e5e7eb;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}

.transaction-filter-row .filter-clear-btn:hover {
  background: #d1d5db;
}

@media (max-width: 768px) {
  .transaction-filter-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
  }
  
  .transaction-filter-row label {
    font-size: 11px;
  }
  
  .transaction-filter-row input[type="text"] {
    order: 1;
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    min-width: 0;
  }
  
  .transaction-filter-row .filter-clear-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .cash-tabs {
    gap: 0;
  }
  
  .cash-tab {
    padding: 8px 10px;
    font-size: 11px;
  }
  
  .cash-tab-content {
    padding-top: 10px;
  }
}

/* ============================================================
   TABLE EXPORT BUTTONS
============================================================ */
.table-export-header {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.btn-export-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-export-small:hover {
  background: #059669;
}

.btn-export-small svg {
  flex-shrink: 0;
}

.transaction-filter-row .btn-export-small {
  margin-left: auto;
}

[data-theme="dark"] .table-export-header {
  background: transparent;
}

[data-theme="dark"] .btn-export-small {
  background: #059669;
}

[data-theme="dark"] .btn-export-small:hover {
  background: #047857;
}

/* ============================================================
   DARK MODE COMPREHENSIVE OVERRIDES
============================================================ */

/* Balance Sheet Table */
[data-theme="dark"] #balanceSheetTable th,
[data-theme="dark"] #balanceSheetTable td {
  border-bottom-color: var(--table-border);
}

[data-theme="dark"] #balanceSheetTable th:first-child,
[data-theme="dark"] #balanceSheetTable td:first-child {
  background: var(--card-bg);
}

[data-theme="dark"] #balanceSheetTable th:first-child {
  background: var(--table-header-bg);
}

[data-theme="dark"] #balanceSheetTable th {
  background: var(--table-header-bg);
  color: var(--text-primary);
}

[data-theme="dark"] #balanceSheetTable tbody tr:nth-child(even) {
  background: transparent;
}

[data-theme="dark"] #balanceSheetTable tbody tr.is-spacer-row {
  background: var(--card-bg) !important;
}

[data-theme="dark"] #balanceSheetTable tbody tr:hover:not(.is-spacer-row):not(.is-row-header) {
  background: var(--bg-tertiary);
}

[data-theme="dark"] #balanceSheetTable tbody tr.is-major-total {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] #balanceSheetTable tbody tr.is-major-total:hover {
  background: var(--border-secondary) !important;
}

[data-theme="dark"] #balanceSheetTable tr.is-row-subtotal,
[data-theme="dark"] #balanceSheetTable tr.is-subtotal {
  background: #374151 !important;
}

[data-theme="dark"] #balanceSheetTable tr.is-row-subtotal td,
[data-theme="dark"] #balanceSheetTable tr.is-subtotal td {
  background: transparent !important;
  color: #fff;
}

[data-theme="dark"] #balanceSheetTable tr.is-row-subtotal.is-expanded-subtotal,
[data-theme="dark"] #balanceSheetTable tr.is-subtotal.is-expanded-subtotal {
  background: #374151 !important;
}

[data-theme="dark"] #balanceSheetTable tr.is-row-subtotal.is-expanded-subtotal td:first-child,
[data-theme="dark"] #balanceSheetTable tr.is-subtotal.is-expanded-subtotal td:first-child {
  color: #fff;
}

[data-theme="dark"] .bs-toggle:hover {
  color: var(--text-primary);
}

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

[data-theme="dark"] .is-toggle:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .is-row-ratio td {
  color: var(--text-secondary);
}

/* Expanded subtotal row styling */
[data-theme="dark"] .is-expanded-subtotal,
[data-theme="dark"] .is-expanded-subtotal td {
  background-color: #374151 !important;
}

/* Matrix tabs */
[data-theme="dark"] .is-matrix-tabs {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .is-matrix-tab {
  color: var(--text-secondary);
}

[data-theme="dark"] .is-matrix-tab:hover {
  background: var(--border-secondary);
}

[data-theme="dark"] .is-matrix-tab.active {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* Options stack */
[data-theme="dark"] .is-options-stack {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

/* Dark mode text colors for config options */
[data-theme="dark"] .is-options-stack label,
[data-theme="dark"] .is-options-stack .radio-label,
[data-theme="dark"] .is-compare-box label,
[data-theme="dark"] .is-detail-box label,
[data-theme="dark"] .config-section-label,
[data-theme="dark"] .is-checkbox-label {
  color: #e2e8f0 !important;
}

/* Compare detail wrapper mobile */
@media (max-width: 768px) {
  [data-theme="dark"] .is-compare-detail-wrapper {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
  }
  
  [data-theme="dark"] .is-compare-detail-wrapper .is-compare-box {
    border-right-color: var(--border-primary);
  }
}

/* Config panel mobile */
@media (max-width: 768px) {
  [data-theme="dark"] .config-panel {
    border-color: var(--border-primary);
  }
  
  [data-theme="dark"] .config-body .rev-controls select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
  }
  
  [data-theme="dark"] .ai-analysis-header {
    background: var(--bg-tertiary);
    border-bottom-color: var(--border-primary);
  }
}

/* Modal Overlay and Content */
[data-theme="dark"] .modal-content {
  background: var(--card-bg);
}

[data-theme="dark"] .modal-header {
  background: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .modal-header h3 {
  color: var(--text-primary);
}

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

[data-theme="dark"] .modal-close:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-body label {
  color: var(--text-primary);
}

[data-theme="dark"] .modal-body input[type="email"],
[data-theme="dark"] .modal-body input[type="text"],
[data-theme="dark"] .modal-body input[type="password"] {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
  background: var(--bg-tertiary);
  border-top-color: var(--border-primary);
}

[data-theme="dark"] .btn-secondary {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--bg-tertiary);
}

/* Chart expand/close buttons */
[data-theme="dark"] .chart-expand-btn,
[data-theme="dark"] .chart-close-btn {
  border-color: var(--input-border);
  color: var(--text-secondary);
}

[data-theme="dark"] .chart-expand-btn:hover,
[data-theme="dark"] .chart-close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-tertiary);
}

/* Chart fullscreen stats */
[data-theme="dark"] .chart-fullscreen-stats .stat-box {
  background: var(--card-bg) !important;
}

[data-theme="dark"] .chart-fullscreen-stats .stat-label {
  color: #e5e7eb !important;
}

[data-theme="dark"] .chart-fullscreen-stats .stat-value {
  color: #ffffff !important;
}

[data-theme="dark"] .chart-fullscreen-stats .stat-period {
  color: var(--text-tertiary) !important;
}

/* Delete view button */
[data-theme="dark"] .delete-view-btn:hover {
  background: #450a0a;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  [data-theme="dark"] .nav-item:active {
    background: var(--bg-sidebar-active);
  }
}

/* Scrollbar styling */
[data-theme="dark"] .content::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
}

[data-theme="dark"] .content::-webkit-scrollbar-thumb:hover {
  background: var(--border-tertiary);
}

/* Export bar */
[data-theme="dark"] .export-bar {
  background: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .export-bar .export-dropdown-btn {
  background: var(--card-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .export-bar .export-dropdown-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-tertiary);
}

/* Cash Balances */
[data-theme="dark"] .cash-balances-content {
  background: var(--card-bg);
}

[data-theme="dark"] .cash-balances-table thead {
  background: var(--table-header-bg);
}

[data-theme="dark"] .cash-balances-table th {
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .cash-balances-table td {
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .cash-balances-table tbody tr:hover {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .cash-balances-table .account-name {
  color: var(--text-primary);
}

[data-theme="dark"] .cash-summary-section h3,
[data-theme="dark"] .cash-history-section h3 {
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}

/* Daily balance table */
[data-theme="dark"] .daily-balance-table-wrapper {
  border-color: var(--border-primary);
}

[data-theme="dark"] .daily-balance-table td {
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .daily-balance-table td.date-col {
  color: var(--text-primary);
}

[data-theme="dark"] .daily-balance-table td.total-col {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .daily-balance-table td.balance-col {
  color: var(--text-primary);
}

[data-theme="dark"] .daily-balance-table tbody tr:hover {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .daily-balance-table tbody tr.today-row {
  background: #064e3b;
}

[data-theme="dark"] .daily-balance-table tbody tr.today-row:hover {
  background: #065f46;
}

[data-theme="dark"] .daily-balance-table.expanded td.total-col {
  background: var(--bg-tertiary);
}

/* Table expand button */
[data-theme="dark"] .table-expand-btn {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-color: var(--input-border);
}

[data-theme="dark"] .table-expand-btn:hover {
  background: var(--border-secondary);
  border-color: var(--border-tertiary);
}

[data-theme="dark"] .table-expand-btn .expand-icon {
  color: var(--text-secondary);
}

/* Btn small */
[data-theme="dark"] .btn-small {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-small:hover {
  background: var(--border-secondary);
}

/* Account checkbox list */
[data-theme="dark"] .account-checkbox-list label {
  color: var(--text-primary);
}

/* Cash chart section */
[data-theme="dark"] .cash-chart-section {
  background: var(--card-bg);
}

[data-theme="dark"] .cash-chart-section .chart-header h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .cash-summary-tiles {
  border-top-color: var(--border-primary);
}

[data-theme="dark"] .summary-tile {
  background: var(--stat-bg);
}

[data-theme="dark"] .summary-tile .tile-label {
  color: #e5e7eb;
}

[data-theme="dark"] .summary-tile .tile-value {
  color: #ffffff;
}

[data-theme="dark"] .summary-tile .tile-subvalue {
  color: #cbd5e1;
}

/* Cash tabs */
[data-theme="dark"] .cash-tabs {
  border-bottom-color: var(--border-primary);
}

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

[data-theme="dark"] .cash-tab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

[data-theme="dark"] .cash-tab:active {
  background: var(--border-secondary);
}

[data-theme="dark"] .cash-tab.active {
  background: rgba(37, 99, 235, 0.15);
}

/* Transaction table */
[data-theme="dark"] .transaction-table td {
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .transaction-table tr:nth-child(even) {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .transaction-table tr:hover {
  background: var(--border-secondary);
}

[data-theme="dark"] .transaction-table .txn-date {
  color: var(--text-secondary);
}

[data-theme="dark"] .transaction-table .txn-account {
  color: var(--text-primary);
}

[data-theme="dark"] .transaction-table .txn-description {
  color: var(--text-primary);
}

[data-theme="dark"] .transaction-table .txn-category {
  color: var(--text-secondary);
}

/* Transaction filter row */
[data-theme="dark"] .transaction-filter-row {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

[data-theme="dark"] .transaction-filter-row label {
  color: var(--text-primary);
}

[data-theme="dark"] .transaction-filter-row input[type="text"] {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .transaction-filter-row .filter-clear-btn {
  background: var(--border-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .transaction-filter-row .filter-clear-btn:hover {
  background: var(--border-tertiary);
}

/* Matrix view scroll hints */
[data-theme="dark"] .is-table-box::after,
[data-theme="dark"] .matrix-table-wrapper::after {
  background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.9));
}

/* Mobile sticky columns */
@media (max-width: 768px) {
  [data-theme="dark"] #incomeStatementTable td:first-child,
  [data-theme="dark"] #balanceSheetTable td:first-child,
  [data-theme="dark"] #cashFlowTable td:first-child {
    background: var(--card-bg);
  }
  
  /* Header row first column - transparent/inherit like Balance Sheet */
  [data-theme="dark"] #incomeStatementTable th:first-child,
  [data-theme="dark"] #balanceSheetTable th:first-child,
  [data-theme="dark"] #cashFlowTable th:first-child {
    background: transparent !important;
  }
  
  [data-theme="dark"] .is-subtotal td:first-child,
  [data-theme="dark"] .cf-subtotal td:first-child {
    background: #1e3a5f !important;
  }
  
  [data-theme="dark"] .is-header td:first-child,
  [data-theme="dark"] .cf-header td:first-child {
    background: var(--bg-tertiary) !important;
  }
  
  /* Cash Flow category rows - dark gray in dark mode on mobile */
  [data-theme="dark"] #cashFlowTable tr.cf-operating,
  [data-theme="dark"] #cashFlowTable tr.cf-investing,
  [data-theme="dark"] #cashFlowTable tr.cf-financing {
    background: #374151 !important;
  }
  
  [data-theme="dark"] #cashFlowTable tr.cf-operating td,
  [data-theme="dark"] #cashFlowTable tr.cf-investing td,
  [data-theme="dark"] #cashFlowTable tr.cf-financing td {
    background: transparent !important;
    color: #fff !important;
  }
}

/* Income Statement table rows */
[data-theme="dark"] .is-row-header td {
  background: var(--bg-tertiary) !important;
  border-top-color: var(--border-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .is-major-total {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .is-major-total td {
  background: transparent !important;
}

[data-theme="dark"] .is-blue-subtotal {
  background: #1e3a5f !important;
}

[data-theme="dark"] .is-blue-subtotal td,
[data-theme="dark"] .is-blue-subtotal td:first-child {
  background: transparent !important;
  color: #93c5fd;
}

[data-theme="dark"] .is-profit-row {
  background: #1e3a5f !important;
}

[data-theme="dark"] .is-profit-row td {
  background: transparent !important;
}

[data-theme="dark"] .is-expense-section-expanded {
  background: #1e3a5f !important;
}

[data-theme="dark"] .is-expense-section-expanded td {
  background: transparent !important;
  color: #fff;
}

[data-theme="dark"] .is-gray-section-expanded,
[data-theme="dark"] .is-opexp-gray-expanded {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .is-gray-section-expanded td,
[data-theme="dark"] .is-opexp-gray-expanded td {
  background: transparent !important;
}

[data-theme="dark"] .is-tan-section-expanded {
  background: #1e3a5f !important;
}

[data-theme="dark"] .is-tan-section-expanded td {
  background: transparent !important;
  color: #fff;
}

[data-theme="dark"] .is-spacer-row td {
  background: var(--card-bg) !important;
}

[data-theme="dark"] #incomeStatementTable tbody tr:nth-child(odd) {
  background: transparent;
}

[data-theme="dark"] #incomeStatementTable tbody tr:nth-child(even) {
  background: transparent;
}

[data-theme="dark"] #incomeStatementTable tbody tr.is-spacer-row {
  background: var(--card-bg) !important;
}

/* Cash Flow Statement table */
[data-theme="dark"] .cf-operating,
[data-theme="dark"] .cf-investing,
[data-theme="dark"] .cf-financing {
  background: #374151 !important;
}

[data-theme="dark"] .cf-operating td,
[data-theme="dark"] .cf-investing td,
[data-theme="dark"] .cf-financing td {
  background: transparent !important;
  color: #fff !important;
}

[data-theme="dark"] #cashFlowTable tr.cf-operating td,
[data-theme="dark"] #cashFlowTable tr.cf-investing td,
[data-theme="dark"] #cashFlowTable tr.cf-financing td {
  color: #fff !important;
}

[data-theme="dark"] .cf-toggle,
[data-theme="dark"] .bs-toggle {
  color: var(--text-secondary);
}

[data-theme="dark"] .cf-toggle:hover,
[data-theme="dark"] .bs-toggle:hover {
  color: var(--text-primary);
}

[data-theme="dark"] #cashFlowTable th,
[data-theme="dark"] #cashFlowTable td {
  border-bottom-color: var(--table-border);
}

[data-theme="dark"] #cashFlowTable th:first-child,
[data-theme="dark"] #cashFlowTable td:first-child {
  background: var(--card-bg);
}

[data-theme="dark"] #cashFlowTable th:first-child {
  background: var(--table-header-bg);
}

[data-theme="dark"] #cashFlowTable th {
  background: var(--table-header-bg);
  color: var(--text-primary);
}

/* Cash Flow subtotal rows - dark gray in dark mode */
[data-theme="dark"] #cashFlowTable tr.is-subtotal {
  background: #374151 !important;
}

[data-theme="dark"] #cashFlowTable tr.is-subtotal td {
  background: transparent !important;
  color: #fff;
}

[data-theme="dark"] #cashFlowTable tbody tr:hover {
  background: var(--bg-tertiary);
}

[data-theme="dark"] #cashFlowTable tbody tr:nth-child(odd) {
  background: transparent;
}

[data-theme="dark"] #cashFlowTable tbody tr:nth-child(even) {
  background: transparent;
}

[data-theme="dark"] #cashFlowTable tbody tr.is-spacer-row {
  background: var(--card-bg) !important;
}

/* BS Table box and toggles */
[data-theme="dark"] .bs-table-box {
  background: var(--card-bg);
  border-color: var(--border-primary);
}

[data-theme="dark"] .bs-table-title {
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}

/* Nav expand icon */
[data-theme="dark"] .nav-expand-icon {
  color: var(--text-tertiary);
}

/* Range slider styling */
[data-theme="dark"] .range-container input[type="range"] {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .range-labels span {
  color: var(--text-secondary);
}

/* Loading spinner */
[data-theme="dark"] .loading-spinner-small {
  color: var(--text-secondary);
}

/* Stat box */
[data-theme="dark"] .stat-box {
  background: var(--stat-bg);
}

[data-theme="dark"] .stat-label {
  color: #e5e7eb;
}

[data-theme="dark"] .stat-value {
  color: #ffffff;
}

/* Revenue table box */
[data-theme="dark"] .rev-table-box {
  background: var(--card-bg);
  border-color: var(--border-primary);
}

[data-theme="dark"] #revTable th,
[data-theme="dark"] #acctTable th {
  background: var(--table-header-bg);
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] #revTable td,
[data-theme="dark"] #acctTable td {
  border-bottom-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] #revTable tbody tr:hover,
[data-theme="dark"] #acctTable tbody tr:hover {
  background: var(--bg-tertiary);
}

/* Chart box */
[data-theme="dark"] .chart-box {
  background: var(--card-bg);
}

[data-theme="dark"] .chart-title div {
  color: var(--text-primary);
}

/* Email status */
[data-theme="dark"] .email-status.success {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme="dark"] .email-status.error {
  background: #7f1d1d;
  color: #fca5a5;
}

/* Print styles - force light mode */
@media print {
  [data-theme="dark"] body {
    background: #fff;
    color: #1f2937;
  }
  
  [data-theme="dark"] .chart-box,
  [data-theme="dark"] .rev-table-box {
    border-color: #e5e7eb;
  }
}

/* ========================================
   DISTRIBUTION REPORTS PLACEHOLDER STYLES
   ======================================== */

/* Ensure Distribution Reports nav section gets same background as other sections */
#navDistReportsChildren {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #navDistReportsChildren {
  background: rgba(0, 0, 0, 0.3);
}

#navDistReportsChildren.expanded {
  max-height: 700px;
  opacity: 1;
}

.section-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 14px;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px dashed var(--border-color);
  text-align: center;
  margin-top: 20px;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.placeholder-content p {
  color: var(--text-secondary);
  font-size: 16px;
  margin: 0;
}

/* ========================================
   WEEKLY PM REPORT STYLES
   ======================================== */

/* Key Metrics Tiles */
.wpr-metrics-section {
  margin-bottom: 20px;
}

.wpr-metrics-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .wpr-metrics-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .wpr-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wpr-metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wpr-metric-card.primary {
  border-left: 3px solid var(--accent-primary);
}

.wpr-metric-card.positive .wpr-metric-value {
  color: #10b981;
}

.wpr-metric-card.negative .wpr-metric-value {
  color: #ef4444;
}

.wpr-metric-icon {
  font-size: 20px;
  opacity: 0.8;
}

.wpr-metric-content {
  flex: 1;
  min-width: 0;
}

.wpr-metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpr-metric-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Mini Heat Map */
.wpr-heatmap-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.wpr-heatmap-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.wpr-heatmap-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 0 12px 0;
}

.wpr-heatmap-container {
  overflow-x: auto;
}

.wpr-heatmap-placeholder {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.wpr-heatmap-grid {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 2px;
  min-width: 500px;
}

.wpr-heatmap-cell {
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
}

.wpr-heatmap-cell.header {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 10px;
  text-transform: uppercase;
}

.wpr-heatmap-cell.row-label {
  text-align: left;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.wpr-heatmap-cell.data-cell {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.wpr-heatmap-cell.no-data {
  color: var(--text-tertiary);
  background: var(--bg-primary);
}

.wpr-heatmap-cell.weighted-avg {
  font-weight: 700;
  border-top: 2px solid var(--border-color);
}

/* Mini Charts Section */
.wpr-charts-section {
  margin-bottom: 20px;
}

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

@media (max-width: 1000px) {
  .wpr-charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.wpr-chart-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
}

.wpr-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  text-align: center;
}

.wpr-chart-wrapper {
  height: 140px;
  position: relative;
}

.wpr-pm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-primary);
}

.wpr-pm-tabs-loading {
  color: var(--text-secondary);
  font-size: 14px;
  padding: 10px 0;
}

.wpr-pm-tab {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.wpr-pm-tab:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.wpr-pm-tab.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.wpr-content {
  margin-top: 16px;
}

.wpr-table-container {
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.wpr-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

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

.wpr-client-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.wpr-table-wrapper {
  overflow-x: auto;
}

.wpr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wpr-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.wpr-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

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

.wpr-table .text-right {
  text-align: right;
}

.wpr-empty-state {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--text-secondary);
}

/* Client row styling */
.wpr-client-row {
  background: var(--bg-secondary);
  font-weight: 600;
}

.wpr-client-row td {
  border-bottom: none !important;
  padding-bottom: 4px;
}

/* Job row styling - indented under client */
.wpr-job-row {
  background: var(--bg-primary);
}

.wpr-job-row td {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.wpr-job-row:last-of-type td,
.wpr-job-row + .wpr-client-row td {
  border-bottom: 1px solid var(--border-color) !important;
}

.wpr-job-row td:first-child {
  padding-left: 28px;
}

.wpr-job-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpr-job-number {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 12px;
}

.wpr-job-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

/* Subtotal row */
.wpr-subtotal-row {
  background: var(--bg-tertiary);
  font-weight: 600;
}

.wpr-subtotal-row td {
  border-top: 2px solid var(--border-color);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Margin color classes */
.wpr-table .margin-good { color: #10b981; }
.wpr-table .margin-bad { color: #ef4444; }
.wpr-table .margin-neutral { color: var(--text-secondary); }

[data-theme="dark"] .wpr-table .margin-good { color: #34d399; }
[data-theme="dark"] .wpr-table .margin-bad { color: #f87171; }

/* Toggle button */
.wpr-toggle-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.wpr-toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* Section description */
.wpr-section-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Expandable columns */
.wpr-expandable-col {
  display: none;
}

.wpr-table.expanded .wpr-expandable-col {
  display: table-cell;
}

/* Over/Under billing colors */
.wpr-table .over-billed { color: #10b981; }
.wpr-table .under-billed { color: #ef4444; }

[data-theme="dark"] .wpr-table .over-billed { color: #34d399; }
[data-theme="dark"] .wpr-table .under-billed { color: #f87171; }

/* Detail rows hidden by default */
.wpr-ou-detail-row {
  display: none;
}

.wpr-table.expanded .wpr-ou-detail-row {
  display: table-row;
}

/* Issue badges for Missing Budgets */
.wpr-issue-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.wpr-issue-badge.no-both {
  background: #fef2f2;
  color: #dc2626;
}

.wpr-issue-badge.no-revenue {
  background: #fefce8;
  color: #ca8a04;
}

.wpr-issue-badge.no-cost {
  background: #eff6ff;
  color: #2563eb;
}

[data-theme="dark"] .wpr-issue-badge.no-both {
  background: #450a0a;
  color: #fca5a5;
}

[data-theme="dark"] .wpr-issue-badge.no-revenue {
  background: #422006;
  color: #fde047;
}

[data-theme="dark"] .wpr-issue-badge.no-cost {
  background: #172554;
  color: #93c5fd;
}

/* Job status badge */
.wpr-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.wpr-status-badge.status-active {
  background: #dcfce7;
  color: #16a34a;
}

.wpr-status-badge.status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}

[data-theme="dark"] .wpr-status-badge.status-active {
  background: #14532d;
  color: #86efac;
}

[data-theme="dark"] .wpr-status-badge.status-inactive {
  background: #374151;
  color: #9ca3af;
}

/* ========================================
   ADMIN SECTION STYLES
   ======================================== */

/* Admin nav item styling */
.admin-nav-item {
  border-top: 1px solid var(--bg-sidebar-hover);
  margin-top: 12px;
  padding-top: 12px;
}

.admin-nav-item:not(.hidden) {
  display: list-item;
}

/* Admin description */
.admin-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 0;
}

.admin-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.admin-tab:hover {
  color: var(--color-primary);
}

.admin-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Admin tab content */
.admin-tab-content {
  display: none;
}

.admin-tab-content.active {
  display: block;
}

/* Admin toolbar */
.admin-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.admin-search {
  flex: 1;
  max-width: 300px;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
}

.audit-filter-select {
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
  min-width: 140px;
}

/* Admin table */
.admin-table-container {
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.admin-table th,
.admin-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
}

.admin-table th {
  background: var(--table-header-bg);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-table td {
  color: var(--text-primary);
  font-size: 14px;
}

.admin-table tbody tr:hover {
  background: var(--table-row-hover);
}

.loading-cell {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #dcfce7;
  color: #166534;
}

.status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

[data-theme="dark"] .status-badge.active {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme="dark"] .status-badge.inactive {
  background: #7f1d1d;
  color: #fca5a5;
}

/* Role badge */
.role-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #e0e7ff;
  color: #3730a3;
}

.role-badge.admin {
  background: #fef3c7;
  color: #92400e;
}

.role-badge.manager {
  background: #dbeafe;
  color: #1e40af;
}

[data-theme="dark"] .role-badge {
  background: #312e81;
  color: #c7d2fe;
}

[data-theme="dark"] .role-badge.admin {
  background: #78350f;
  color: #fde68a;
}

[data-theme="dark"] .role-badge.manager {
  background: #1e3a8a;
  color: #93c5fd;
}

/* Action buttons */
.action-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 4px;
  transition: all 0.2s;
}

.action-btn.edit {
  background: var(--color-primary);
  color: white;
}

.action-btn.edit:hover {
  background: var(--color-primary-hover);
}

.action-btn.delete {
  background: var(--color-error);
  color: white;
}

.action-btn.delete:hover {
  background: #b91c1c;
}

.action-btn.reset {
  background: var(--color-warning);
  color: white;
}

.action-btn.reset:hover {
  background: #d97706;
}

/* Roles container */
.roles-container {
  display: block;
}

.roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
}

.role-card {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 12px 16px;
  flex: 0 0 auto;
  max-width: 100%;
}

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

.role-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

.role-card-description {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 10px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
}

.permissions-grid-modal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-primary);
}

.permissions-grouped {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.permission-group {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 8px 10px;
  min-width: auto;
  flex: 0 0 auto;
}

.permission-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-primary);
}

.permission-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permission-group .permission-item {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.permission-group .permission-item label {
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}

.permission-group .permission-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .permissions-grouped {
    flex-direction: column;
  }
  
  .permission-group {
    min-width: 100%;
  }
}

.role-card-actions {
  display: flex;
  gap: 8px;
}

.role-card-actions .action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: none;
}

.role-card-actions .action-btn.edit {
  background: var(--primary-color);
  color: white;
}

.role-card-actions .action-btn.delete {
  background: var(--danger-color);
  color: white;
}

.roles-header {
  display: flex;
  flex-direction: column;
  
  gap: 12px;
  margin-bottom: 20px;
}

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

.role-protected-badge {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
}

.permission-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.permission-item label {
  font-size: 13px;
  color: var(--text-primary);
}

/* Modal wide variant */
.modal-wide {
  max-width: 500px;
}

/* Form row */
.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-primary);
}

.form-row input,
.form-row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
}

.form-hint {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.form-error {
  color: var(--color-error);
  font-size: 13px;
  margin-top: 8px;
  padding: 8px;
  background: #fee2e2;
  border-radius: 4px;
}

.form-error:empty {
  display: none;
}

[data-theme="dark"] .form-error {
  background: #7f1d1d;
}

/* Toggle switch */
.toggle-switch {
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
  gap: 10px;
}

.form-row .toggle-switch {
  display: inline-flex !important;
}

.toggle-switch input {
  display: none;
}

.toggle-slider {
  width: 44px;
  height: 24px;
  background: var(--text-tertiary);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  overflow: hidden;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

.toggle-label {
  font-weight: 400;
  color: var(--text-primary);
}

/* Small toggle switch variant */
.toggle-switch.small .toggle-slider {
  width: 36px;
  height: 20px;
  border-radius: 10px;
}

.toggle-switch.small .toggle-slider::after {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.toggle-switch.small input:checked + .toggle-slider::after {
  transform: translateX(16px);
}

/* PM View toggle in dropdown */
.pm-view-toggle {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.pm-view-toggle span {
  color: var(--text-primary);
}

/* My PM View indicator badge */
.pm-view-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.pm-view-badge:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: scale(1.02);
}

.pm-view-badge .close-badge {
  font-size: 14px;
  opacity: 0.8;
  cursor: pointer;
}

.pm-view-badge .close-badge:hover {
  opacity: 1;
}

/* Primary and secondary buttons */
.btn-primary {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

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

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

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

.btn-danger {
  background: #dc2626;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

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

.btn-danger:disabled {
  background: #6b7280;
  cursor: not-allowed;
}

/* Role Reassignment Modal */
.reassign-message {
  margin-bottom: 16px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.reassign-users-list {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  max-height: 150px;
  overflow-y: auto;
}

.reassign-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-primary);
}

.reassign-user-item:last-child {
  border-bottom: none;
}

.reassign-user-icon {
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.reassign-user-name {
  color: var(--text-primary);
  font-weight: 500;
}

/* Responsive admin */
@media (max-width: 768px) {
  .admin-toolbar {
    flex-wrap: wrap;
  }
  
  .admin-search {
    max-width: 100%;
    order: 2;
    width: 100%;
  }
  
  .admin-table th,
  .admin-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  .admin-table-container {
    margin: 0 -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .permissions-grid {
    grid-template-columns: 1fr;
  }
  
  .roles-header {
    flex-direction: column;
    gap: 12px;
    
  }
  
  .roles-header .btn-primary {
    width: 100%;
  }
  
  .role-card {
    padding: 16px;
  }
  
  .role-card-header {
    flex-direction: column;
    gap: 12px;
    
  }
  
  .role-card-actions {
    width: 100%;
  }
  
  .role-card-actions .action-btn {
    flex: 1;
    text-align: center;
  }
  
  .permissions-grid-modal {
    grid-template-columns: 1fr;
  }
  
  .modal-wide {
    max-width: 95%;
    margin: 10px;
  }
}

/* ============================================================
   MISSING BUDGETS TABS
   ============================================================ */

.missing-budgets-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-secondary);
}

.mb-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mb-tab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.mb-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  font-weight: 600;
}

body.dark-mode .mb-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

#missingBudgets .config-panel {
  width: 70%;
  max-width: 70%;
}

@media (max-width: 900px) {
  #missingBudgets .config-panel {
    max-width: 100%;
  }
  
  .mb-tab {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ============================================================
   JOB BUDGETS STYLES
   ============================================================ */

/* Config Label - Theme Aware */
.config-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}

body.dark-mode .config-label {
  color: #e5e7eb;
}

/* Job Budgets Config Panel - 60% width */
#jobBudgets .config-panel {
  width: 60%;
  max-width: 60%;
}

@media (max-width: 900px) {
  #jobBudgets .config-panel {
    max-width: 100%;
  }
}

/* Job Budgets Controls */
.job-budgets-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Compact Configuration for All Job Pages */
#jobOverview .job-budgets-controls,
#jobBudgets .job-budgets-controls,
#jobActuals .job-budgets-controls,
#missingBudgets .job-budgets-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
}

#jobOverview .job-budgets-controls .overview-config-box,
#jobBudgets .job-budgets-controls .overview-config-box,
#jobActuals .job-budgets-controls .overview-config-box,
#missingBudgets .job-budgets-controls .overview-config-box {
  padding: 8px 12px;
  margin-bottom: 0;
}

#jobOverview .job-budgets-controls .config-label,
#jobBudgets .job-budgets-controls .config-label,
#jobActuals .job-budgets-controls .config-label,
#missingBudgets .job-budgets-controls .config-label {
  font-size: 11px;
  margin-bottom: 4px;
}

#jobOverview .job-budgets-controls .checkbox-stack,
#jobBudgets .job-budgets-controls .checkbox-stack,
#jobActuals .job-budgets-controls .checkbox-stack,
#costCodes .job-budgets-controls .checkbox-stack,
#missingBudgets .job-budgets-controls .checkbox-stack {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 16px;
}

#jobOverview .job-budgets-controls .checkbox-label,
#jobBudgets .job-budgets-controls .checkbox-label,
#jobActuals .job-budgets-controls .checkbox-label,
#missingBudgets .job-budgets-controls .checkbox-label {
  font-size: 12px;
  white-space: nowrap;
}

#jobOverview .job-budgets-controls .filter-select,
#jobBudgets .job-budgets-controls .filter-select,
#jobActuals .job-budgets-controls .filter-select,
#missingBudgets .job-budgets-controls .filter-select {
  padding: 6px 10px;
  font-size: 13px;
  min-width: 160px;
}

/* Job Overview filter stack - horizontal layout */
#jobOverview .job-filter-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-select {
  width: 100%;
  max-width: 250px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  background: #fff;
}

body.dark-mode .filter-select {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

/* Job Search Bar */
.job-search-bar {
  position: relative;
  margin-bottom: 16px;
}

.job-search-input {
  width: 100%;
  max-width: 400px;
  padding: 10px 40px 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  background: #fff;
}

.job-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.dark-mode .job-search-input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

body.dark-mode .job-search-input:focus {
  border-color: #60a5fa;
}

.job-search-icon {
  position: absolute;
  right: calc(100% - 390px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #9ca3af;
  pointer-events: none;
}

/* Quick Sort Buttons */
.quick-sort-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.quick-sort-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-right: 4px;
}

body.dark-mode .quick-sort-label {
  color: #9ca3af;
}

.quick-sort-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-sort-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.quick-sort-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

body.dark-mode .quick-sort-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark-mode .quick-sort-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
}

body.dark-mode .quick-sort-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* Job Summary Metrics */
.job-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.summary-metric {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 150px;
  flex: 1;
}

body.dark-mode .summary-metric {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: #475569;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

body.dark-mode .metric-label {
  color: #94a3b8;
}

.metric-value {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

body.dark-mode .metric-value {
  color: #f1f5f9;
}

.metric-value.positive {
  color: #10b981;
}

.metric-value.negative {
  color: #dc2626;
}

/* Job Budgets Table Container */
.job-table-container {
  position: relative;
  overflow-x: auto;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

body.dark-mode .job-table-container {
  border-color: #4b5563;
}

/* Job Budgets Table */
.job-budgets-table {
  width: auto;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.job-budgets-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.job-budgets-table th {
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.job-budgets-table th:hover {
  background: #f1f5f9;
}

.job-budgets-table th.sortable::after {
  content: ' ↕';
  opacity: 0.3;
  font-size: 10px;
}

.job-budgets-table th.sortable.sort-asc::after {
  content: ' ↑';
  opacity: 1;
}

.job-budgets-table th.sortable.sort-desc::after {
  content: ' ↓';
  opacity: 1;
}

body.dark-mode .job-budgets-table th {
  background: #1e293b;
  color: #cbd5e1;
  border-bottom-color: #475569;
}

body.dark-mode .job-budgets-table th:hover {
  background: #334155;
}

.job-budgets-table th.number-col,
.job-budgets-table td.number-col {
  text-align: right;
}

/* Original Contract, Change Orders, Original Cost, Cost Adjustments - Yellow Shading */
.job-budgets-table th.contract-detail-col,
.job-budgets-table td.contract-detail-col,
.job-budgets-table th.cost-detail-col,
.job-budgets-table td.cost-detail-col {
  background: rgba(251, 191, 36, 0.15);
}

body.dark-mode .job-budgets-table th.contract-detail-col,
body.dark-mode .job-budgets-table td.contract-detail-col,
body.dark-mode .job-budgets-table th.cost-detail-col,
body.dark-mode .job-budgets-table td.cost-detail-col {
  background: rgba(251, 191, 36, 0.2);
}

.job-budgets-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  white-space: nowrap;
}

body.dark-mode .job-budgets-table td {
  border-bottom-color: #4b5563;
  color: #e5e7eb;
}

.job-budgets-table tbody tr:hover {
  background: #f8fafc;
}

body.dark-mode .job-budgets-table tbody tr:hover {
  background: #334155;
}

.job-budgets-table td.positive {
  color: #10b981;
  font-weight: 600;
}

.job-budgets-table td.negative {
  color: #dc2626;
  font-weight: 600;
}

.job-budgets-table td.loading-cell {
  text-align: center;
  padding: 40px;
  color: #6b7280;
  font-style: italic;
}

/* Job Status Badges */
.job-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.job-status-badge.active {
  background: #dcfce7;
  color: #166534;
}

.job-status-badge.inactive {
  background: #fef3c7;
  color: #92400e;
}

.job-status-badge.closed {
  background: #e5e7eb;
  color: #4b5563;
}

.job-status-badge.overhead {
  background: #dbeafe;
  color: #1e40af;
}

body.dark-mode .job-status-badge.active {
  background: #166534;
  color: #dcfce7;
}

body.dark-mode .job-status-badge.inactive {
  background: #92400e;
  color: #fef3c7;
}

body.dark-mode .job-status-badge.closed {
  background: #4b5563;
  color: #e5e7eb;
}

body.dark-mode .job-status-badge.overhead {
  background: #1e40af;
  color: #dbeafe;
}

/* Pagination */
.job-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}

.pagination-btn {
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: #2563eb;
}

.pagination-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.page-info {
  font-size: 13px;
  color: #6b7280;
}

body.dark-mode .page-info {
  color: #9ca3af;
}

.page-size-select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #374151;
}

body.dark-mode .page-size-select {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

/* Job Pages Mobile Responsive - 100% width */
@media (max-width: 768px) {
  /* All job sections - 100% width */
  #jobOverview,
  #jobBudgets,
  #jobActuals,
  #missingBudgets,
  #jobAnalytics {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  /* Reduce config header heights on mobile */
  .config-header {
    padding: 4px 8px !important;
  }
  
  .config-title {
    font-size: 10px !important;
  }
  
  .config-expand-btn {
    padding: 2px 6px !important;
    font-size: 9px !important;
  }
  
  .config-body {
    padding: 6px 8px !important;
  }
  
  /* Job Budgets/Actuals config - ultra compact */
  #jobBudgets .config-panel,
  #jobActuals .config-panel {
    margin-bottom: 8px !important;
  }
  
  #jobBudgets .config-body,
  #jobActuals .config-body {
    padding: 6px !important;
  }
  
  #jobBudgets .job-budgets-controls,
  #jobActuals .job-budgets-controls {
    gap: 6px !important;
  }
  
  /* Config boxes - compact */
  #jobBudgets .overview-config-box,
  #jobActuals .overview-config-box {
    padding: 6px !important;
    margin-bottom: 4px !important;
  }
  
  /* Job Status label */
  #jobBudgets .config-label,
  #jobActuals .config-label {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  
  /* Checkboxes - 2x2 grid layout */
  #jobBudgets .checkbox-stack,
  #jobActuals .checkbox-stack {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px 12px !important;
  }
  
  #jobBudgets .checkbox-label,
  #jobActuals .checkbox-label {
    font-size: 10px !important;
    padding: 2px 0 !important;
    gap: 4px !important;
  }
  
  #jobBudgets .checkbox-label input,
  #jobActuals .checkbox-label input {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Filter dropdowns - side by side */
  #jobBudgets .job-filter-stack,
  #jobActuals .job-filter-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  
  #jobBudgets .filter-select,
  #jobActuals .filter-select {
    padding: 4px 6px !important;
    font-size: 9px !important;
    height: auto !important;
    min-height: 26px !important;
    width: 100% !important;
  }
  
  /* Reduce section title heights */
  .section-title,
  .job-key-metrics-section .section-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
  }
  
  /* ========== FINANCIAL CONFIG SECTIONS - MOBILE COMPACT ========== */
  
  /* Config panel base - all financial pages */
  #overview .config-panel,
  #revenue .config-panel,
  #incomeStatement .config-panel,
  #balanceSheet .config-panel,
  #cashFlows .config-panel,
  #accounts .config-panel {
    margin-bottom: 8px !important;
  }
  
  #overview .config-body,
  #revenue .config-body,
  #incomeStatement .config-body,
  #balanceSheet .config-body,
  #cashFlows .config-body,
  #accounts .config-body {
    padding: 8px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Saved views row - compact */
  .saved-views-row {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }
  
  .saved-views-row select {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
  
  .save-view-btn,
  .delete-view-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  
  /* Config boxes - stacked vertically, compact */
  #overview .overview-config-box,
  #revenue .overview-config-box,
  #incomeStatement .overview-config-box,
  #balanceSheet .overview-config-box,
  #cashFlows .overview-config-box,
  #accounts .overview-config-box {
    padding: 8px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }
  
  /* Section headers - light blue in dark mode */
  .overview-config-box > div[style*="font-weight"],
  .overview-config-box > .section-label,
  .config-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
  }
  
  body.dark-mode .overview-config-box > div[style*="font-weight"],
  body.dark-mode .overview-config-box > .section-label,
  body.dark-mode .config-label {
    color: #93c5fd !important;
  }
  
  /* Rev controls container - stack on mobile */
  #overview .rev-controls,
  #revenue .rev-controls,
  #accounts .rev-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Dropdown rows - side by side within a box */
  #overview .dropdown-stack,
  #revenue .dropdown-stack,
  #accounts .dropdown-stack,
  #accounts .overview-config-box .dropdown-stack,
  .dropdown-stack {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: center !important;
  }
  
  #overview .dropdown-row,
  #revenue .dropdown-row,
  #accounts .dropdown-row,
  #accounts .overview-config-box .dropdown-row,
  #acctYearWrapper,
  .dropdown-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  
  #overview .dropdown-row label,
  #revenue .dropdown-row label,
  #accounts .dropdown-row label,
  #acctYearWrapper label,
  .dropdown-row label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  
  #overview .dropdown-row select,
  #revenue .dropdown-row select,
  #accounts .dropdown-row select,
  #acctYearWrapper select,
  .dropdown-row select {
    font-size: 10px !important;
    padding: 4px 6px !important;
    min-height: 28px !important;
    width: auto !important;
    min-width: 70px !important;
  }
  
  /* Force Account Detail Time Period dropdowns side-by-side */
  #accounts .overview-config-box .dropdown-stack {
    display: flex !important;
    flex-direction: row !important;
  }
  
  /* Checkbox stacks - 2 columns */
  .checkbox-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 8px !important;
  }
  
  .checkbox-stack .checkbox-label,
  .checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .checkbox-stack input[type="checkbox"],
  .checkbox-label input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  
  /* Metric checkboxes - 3 columns for compact display */
  .metric-checkboxes {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px 6px !important;
  }
  
  .metric-checkboxes .checkbox-label {
    font-size: 9px !important;
  }
  
  /* Range wrapper - full width, compact */
  .range-wrapper {
    padding: 8px !important;
    margin-top: 4px !important;
  }
  
  .range-wrapper label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  
  .range-labels {
    font-size: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
  }
  
  /* IS/BS/CF controls container */
  #incomeStatement .is-controls,
  #balanceSheet .is-controls,
  #cashFlows .is-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* IS/BS/CF select rows - compact side by side */
  #incomeStatement .is-controls > div:first-child,
  #balanceSheet .is-controls > div:first-child,
  #cashFlows .is-controls > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
  
  #incomeStatement .is-controls .select-wrapper,
  #balanceSheet .is-controls .select-wrapper,
  #cashFlows .is-controls .select-wrapper,
  #incomeStatement .is-controls > div > div,
  #balanceSheet .is-controls > div > div,
  #cashFlows .is-controls > div > div {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  
  #incomeStatement .is-controls label,
  #balanceSheet .is-controls label,
  #cashFlows .is-controls label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  
  #incomeStatement .is-controls select,
  #balanceSheet .is-controls select,
  #cashFlows .is-controls select {
    font-size: 10px !important;
    padding: 4px 6px !important;
    min-height: 28px !important;
  }
  
  /* Radio groups - horizontal wrap */
  .radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
  }
  
  .radio-group label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  
  .radio-group input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  
  /* Dark mode label visibility */
  body.dark-mode .checkbox-label,
  body.dark-mode .checkbox-stack label,
  body.dark-mode .dropdown-row label,
  body.dark-mode .radio-group label,
  body.dark-mode .range-wrapper label,
  body.dark-mode .is-controls label,
  body.dark-mode .rev-controls label,
  body.dark-mode .metric-checkboxes label {
    color: #e5e7eb !important;
  }
  
  /* Reduce donut chart empty space - compact on mobile */
  .breakdown-chart-wrapper {
    height: 120px !important;
    margin-bottom: 4px !important;
    padding: 2px !important;
  }
  
  .breakdown-chart-wrapper canvas {
    max-height: 120px !important;
  }
  
  .breakdown-card {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }
  
  .breakdown-card > .chart-subtitle {
    padding: 2px 6px 0 !important;
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  
  /* Legend compact on mobile */
  .breakdown-card .chart-legend,
  .donut-legend {
    font-size: 10px !important;
    line-height: 1.3 !important;
    padding: 4px !important;
    margin-bottom: 4px !important;
  }
  
  /* Expand button compact */
  .breakdown-card .expand-btn,
  .expand-table-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    margin-top: 4px !important;
  }
  
  /* Job metric tiles - compact 3 across layout (all job pages) */
  .job-metrics-grid,
  #jobBudgets .job-metrics-grid,
  #jobActuals .job-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  
  .job-metrics-grid.five-col,
  #jobBudgets .job-metrics-grid.five-col,
  #jobActuals .job-metrics-grid.five-col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .job-metric-card,
  #jobBudgets .job-metric-card,
  #jobActuals .job-metric-card {
    padding: 8px 6px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }
  
  .job-metric-card .metric-icon,
  #jobBudgets .job-metric-card .metric-icon,
  #jobActuals .job-metric-card .metric-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }
  
  .job-metric-card .metric-value,
  #jobBudgets .job-metric-card .metric-value,
  #jobActuals .job-metric-card .metric-value {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  .job-metric-card .metric-label,
  #jobBudgets .job-metric-card .metric-label,
  #jobActuals .job-metric-card .metric-label {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  
  /* Job Budgets/Actuals donut charts - 50% larger (300px) */
  #jobBudgets .breakdown-chart-wrapper,
  #jobActuals .breakdown-chart-wrapper {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  #jobBudgets .breakdown-chart-wrapper canvas,
  #jobActuals .breakdown-chart-wrapper canvas {
    width: 300px !important;
    height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
  }
  
  #jobBudgets .breakdown-card,
  #jobActuals .breakdown-card {
    padding: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
    gap: 2px !important;
  }
  
  /* Legend - wider, compact */
  #jobBudgets .chart-legend,
  #jobActuals .chart-legend,
  #jobBudgets .donut-legend,
  #jobActuals .donut-legend {
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* Expand button - very compact */
  #jobBudgets .breakdown-footer,
  #jobActuals .breakdown-footer,
  #jobBudgets .expand-btn,
  #jobActuals .expand-btn,
  #jobBudgets .expand-table-btn,
  #jobActuals .expand-table-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  
  /* Collapsed details - no padding/margin */
  #jobBudgets .breakdown-details,
  #jobActuals .breakdown-details {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Quick sort buttons - compact single row on mobile */
  .quick-sort-buttons,
  #jobBudgets .quick-sort-buttons,
  #jobActuals .quick-sort-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .quick-sort-label,
  #jobBudgets .quick-sort-label,
  #jobActuals .quick-sort-label {
    font-size: 9px !important;
    margin-right: 2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  .quick-sort-btn,
  #jobBudgets .quick-sort-btn,
  #jobActuals .quick-sort-btn {
    padding: 4px 6px !important;
    font-size: 9px !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Config panels */
  #jobOverview .config-panel,
  #jobBudgets .config-panel,
  #jobActuals .config-panel,
  #missingBudgets .config-panel {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Job summary metrics */
  .job-summary-metrics {
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .summary-metric {
    min-width: 100px;
    padding: 10px 12px;
    flex: 1;
  }
  
  .metric-value {
    font-size: 15px;
  }
  
  /* Search and controls */
  .job-budgets-controls {
    width: 100%;
    box-sizing: border-box;
  }
  
  .job-search-bar {
    width: 100%;
  }
  
  .job-search-input {
    width: 100%;
    max-width: 100%;
  }
  
  .job-search-icon {
    right: 14px;
  }
  
  /* Tables - 100% width with horizontal scroll */
  .job-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .job-budgets-table {
    font-size: 12px;
    min-width: 600px;
  }
  
  .job-budgets-table th,
  .job-budgets-table td {
    padding: 8px 10px;
  }
  
  /* Charts and metrics sections */
  .job-key-metrics-section {
    width: 100%;
    box-sizing: border-box;
  }
  
  .job-metrics-grid,
  .job-metrics-grid.five-col {
    width: 100%;
    max-width: 100%;
  }
  
  .jo-key-metrics-wrapper {
    width: 100%;
    box-sizing: border-box;
  }
  
  .jo-charts-section {
    width: 100%;
    box-sizing: border-box;
  }
  
  .jo-charts-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .jo-chart-card {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Breakdown cards */
  .breakdown-card {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Pagination */
  .job-pagination {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .pagination-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ============================================================
   JOB KEY METRICS SECTION
   ============================================================ */

.job-key-metrics-section {
  margin-bottom: 24px;
}

.job-key-metrics-section .section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

body.dark-mode .job-key-metrics-section .section-title {
  color: #f1f5f9;
  border-bottom-color: #475569;
}

.job-metrics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 60%;
  max-width: 60%;
}

.job-metrics-grid.five-col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

.job-metrics-grid.six-col {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

.job-metrics-grid.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1200px) {
  .job-metrics-grid.five-col,
  .job-metrics-grid.six-col {
    grid-template-columns: repeat(3, 1fr);
  }
  .job-metrics-grid.four-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .job-metrics-grid {
    width: 100%;
    max-width: 100%;
  }
  
  .job-metrics-grid.five-col,
  .job-metrics-grid.six-col,
  .job-metrics-grid.four-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.job-metric-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  flex: 0 0 auto;
}

.job-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.dark-mode .job-metric-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: #475569;
}

.job-metric-card.primary {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #e2e8f0;
}

.job-metric-card.primary .metric-icon,
.job-metric-card.primary .metric-value,
.job-metric-card.primary .metric-label {
  color: #1e293b;
}

.job-metric-card.primary .metric-icon {
  background: #f1f5f9;
}

body.dark-mode .job-metric-card.primary {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: #475569;
}

body.dark-mode .job-metric-card.primary .metric-icon,
body.dark-mode .job-metric-card.primary .metric-value,
body.dark-mode .job-metric-card.primary .metric-label {
  color: #f1f5f9;
}

body.dark-mode .job-metric-card.primary .metric-icon {
  background: #475569;
}

.job-metric-card.profit .metric-value {
  color: #10b981;
}

.job-metric-card.profit .metric-value.negative {
  color: #dc2626;
}

.job-metric-card.margin .metric-value {
  color: #10b981;
}

.job-metric-card.margin .metric-value.negative {
  color: #dc2626;
}

body.dark-mode .job-metric-card.margin .metric-value {
  color: #10b981;
}

body.dark-mode .job-metric-card.margin .metric-value.negative {
  color: #ef4444;
}

/* Compact Job Actuals Key Metrics */
#jobActuals .job-key-metrics-section {
  margin-bottom: 16px;
}

#jobActuals .job-key-metrics-section .section-title {
  margin-bottom: 8px;
  font-size: 14px;
}

#jobActuals .job-metrics-grid.five-col {
  gap: 10px;
}

#jobActuals .job-metric-card {
  padding: 10px 14px;
  border-radius: 8px;
  gap: 8px;
}

#jobActuals .job-metric-card .metric-icon {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 6px;
}

#jobActuals .job-metric-card .metric-value {
  font-size: 16px;
  line-height: 1.2;
}

#jobActuals .job-metric-card .metric-label {
  font-size: 10px;
  margin-bottom: 2px;
}

.metric-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 10px;
  flex-shrink: 0;
}

body.dark-mode .metric-icon {
  background: #475569;
}

.metric-content {
  flex: 1;
  min-width: 0;
}

.job-metric-card .metric-value {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 2px;
}

body.dark-mode .job-metric-card .metric-value {
  color: #f1f5f9;
}

.job-metric-card .metric-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.dark-mode .job-metric-card .metric-label {
  color: #94a3b8;
}

/* Breakdown Section */
.job-breakdown-section {
  margin-bottom: 24px;
}

.breakdown-container {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: 60%;
  max-width: 60%;
}

.breakdown-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  flex: 1 1 45%;
  min-width: 280px;
  max-width: 48%;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.dark-mode .breakdown-card {
  background: #1e293b;
  border-color: #475569;
}

.breakdown-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  padding: 14px 16px;
  margin: 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

body.dark-mode .breakdown-title {
  color: #f1f5f9;
  background: #334155;
  border-bottom-color: #475569;
}

.breakdown-table-wrapper {
  max-height: none;
  overflow-y: visible;
}

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

.breakdown-table th {
  background: #f1f5f9;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1;
}

body.dark-mode .breakdown-table th {
  background: #334155;
  color: #94a3b8;
  border-bottom-color: #475569;
}

.breakdown-table th.number-col,
.breakdown-table td.number-col {
  text-align: right;
}

.breakdown-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
}

body.dark-mode .breakdown-table td {
  border-bottom-color: #374151;
  color: #e5e7eb;
}

.breakdown-table tbody tr:hover {
  background: #f8fafc;
}

body.dark-mode .breakdown-table tbody tr:hover {
  background: #334155;
}

.breakdown-table td.positive {
  color: #10b981;
  font-weight: 600;
}

.breakdown-table td.negative {
  color: #dc2626;
  font-weight: 600;
}

.breakdown-table td.loading-cell {
  text-align: center;
  padding: 24px;
  color: #6b7280;
  font-style: italic;
}

/* Mobile Responsive */
@media (max-width: 1200px) {
  .job-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .breakdown-container {
    flex-direction: column;
  }
  
  .breakdown-card {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .job-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .job-metric-card {
    padding: 14px;
    gap: 12px;
  }
  
  .metric-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .job-metric-card .metric-value {
    font-size: 18px;
  }
  
  .job-metric-card .metric-label {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .job-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Expandable Columns */
.job-budgets-table .hidden {
  display: none;
}

.job-budgets-table .expand-icon {
  cursor: pointer;
  font-size: 10px;
  color: #6b7280;
  margin-right: 4px;
  transition: transform 0.2s;
  display: inline-block;
}

.job-budgets-table .expand-icon:hover {
  color: #3b82f6;
}

.job-budgets-table .expand-icon.expanded {
  transform: rotate(90deg);
}

body.dark-mode .job-budgets-table .expand-icon {
  color: #9ca3af;
}

body.dark-mode .job-budgets-table .expand-icon:hover {
  color: #60a5fa;
}

.expandable-col {
  cursor: pointer;
}

/* Compact breakdown tables */
.job-breakdown-section table {
  width: auto;
  table-layout: auto;
}

.job-breakdown-section th,
.job-breakdown-section td {
  white-space: nowrap;
  padding: 6px 12px;
}

/* Compact key metrics */
.job-key-metrics {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
}

.job-key-metrics .metric-card {
  flex: 0 0 auto;
  min-width: auto;
  padding: 12px 16px;
}

/* ============================================================
   JOB BUDGETS - ENHANCED MOBILE & DARK MODE
   ============================================================ */

/* Dark mode for breakdown section */
body.dark-mode .breakdown-card {
  background: #1e293b;
  border-color: #475569;
}

body.dark-mode .breakdown-title {
  color: #f1f5f9;
  border-bottom-color: #475569;
}

body.dark-mode .breakdown-table th {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}

body.dark-mode .breakdown-table td {
  color: #e2e8f0;
  border-color: #475569;
}

body.dark-mode .breakdown-table tbody tr:hover {
  background: #334155;
}

/* Dark mode for job budgets controls */
body.dark-mode .job-budgets-controls {
  background: transparent;
}

body.dark-mode .filter-select {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

/* Dark mode pagination */
body.dark-mode .pagination-btn {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
  background: #4b5563;
}

body.dark-mode .pagination-btn:disabled {
  background: #1f2937;
  color: #6b7280;
}

body.dark-mode .page-info {
  color: #d1d5db;
}

@media (max-width: 768px) {
  /* Controls stack vertically on mobile */
  .job-budgets-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .job-budgets-controls .overview-config-box {
    width: 100%;
  }
  
  /* Key metrics responsive */
  .job-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .job-metric-card {
    padding: 14px;
    gap: 12px;
  }
  
  .metric-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .job-metric-card .metric-value {
    font-size: 18px;
  }
  
  .job-metric-card .metric-label {
    font-size: 10px;
  }
  
  /* Breakdown tables horizontal scroll */
  .breakdown-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .breakdown-table {
    min-width: 500px;
  }
  
  /* Main table horizontal scroll */
  .job-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .job-budgets-table {
    min-width: 800px;
  }
  
  /* Search bar full width */
  .job-search-bar {
    margin: 12px 0;
  }
  
  .job-search-input {
    font-size: 14px;
    padding: 10px 40px 10px 14px;
  }
}

@media (max-width: 480px) {
  .job-metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .job-metric-card {
    padding: 12px;
  }
  
  .job-metric-card .metric-value {
    font-size: 16px;
  }
  
  .breakdown-card {
    padding: 12px;
  }
  
  .breakdown-title {
    font-size: 13px;
  }
  
  .job-pagination {
    justify-content: center;
  }
  
  .page-size-select {
    width: 100%;
    margin-top: 8px;
  }
}

/* Profit card color in dark mode - green text */
body.dark-mode .job-metric-card.profit .metric-value {
  color: #34d399;
}

body.dark-mode .job-metric-card.profit .metric-value.negative {
  color: #f87171;
}

/* Margin card styles defined in comprehensive fix section below */

/* Breakdown table positive/negative colors in dark mode */
body.dark-mode .breakdown-table td.positive {
  color: #34d399;
}

body.dark-mode .breakdown-table td.negative {
  color: #f87171;
}

/* Job status badges dark mode */
body.dark-mode .job-status-badge.active {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

body.dark-mode .job-status-badge.inactive {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

body.dark-mode .job-status-badge.closed {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

body.dark-mode .job-status-badge.overhead {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Breakdown Chart Wrapper */
.breakdown-chart-wrapper {
  height: 180px;
  margin-bottom: 12px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.breakdown-chart-wrapper canvas {
  max-height: 180px;
}

/* Donut Chart Flex Layout with External Legend */
.donut-flex-container {
  display: flex;
  flex-direction: row;
  
  gap: 16px;
  padding: 12px;
  min-height: 220px;
}

.donut-canvas-wrapper {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-canvas-wrapper canvas {
  width: 180px !important;
  height: 180px !important;
}

.donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #374151;
  line-height: 1.3;
}

.donut-legend-color {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.donut-legend-label {
  flex: 1;
  word-break: break-word;
}

.donut-legend-value {
  flex: 0 0 auto;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

body.dark-mode .donut-legend-item {
  color: #e2e8f0;
}

body.dark-mode .donut-legend-value {
  color: #94a3b8;
}

@media (max-width: 768px) {
  .donut-flex-container {
    flex-direction: column;
    align-items: center;
    min-height: auto;
  }
  
  .donut-canvas-wrapper {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
  }
  
  .donut-canvas-wrapper canvas {
    width: 140px !important;
    height: 140px !important;
  }
  
  .donut-legend {
    max-height: none;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    overflow-y: visible;
  }
  
  .donut-legend-item {
    font-size: 10px;
  }
  
  .donut-legend-value {
    display: none;
  }
}

/* Child nav items in Financials and Jobs - dark forest green theme */
#navFinancialStatementsChildren .nav-child,
#navJobsChildren .nav-child,
#navDistReportsChildren .nav-child {
  background: #1a3320;
  border-left: 3px solid #2d5a3a;
  color: #d4e6d8;
  opacity: 1;
  font-weight: 500;
}

#navFinancialStatementsChildren .nav-child:hover,
#navJobsChildren .nav-child:hover,
#navDistReportsChildren .nav-child:hover {
  background: #254530;
  color: #e8f0ea;
}

#navFinancialStatementsChildren .nav-child.active,
#navJobsChildren .nav-child.active,
#navDistReportsChildren .nav-child.active {
  background: #2d5a3a;
  border-left-color: #4a8a5a;
  color: #ffffff;
  font-weight: 600;
}

/* Dark mode adjustments - dark forest green theme */
body.dark-mode #navFinancialStatementsChildren .nav-child,
body.dark-mode #navJobsChildren .nav-child,
body.dark-mode #navDistReportsChildren .nav-child {
  background: #0f1f14;
  border-left-color: #2d5a3a;
  color: #c4d6c8;
  opacity: 1;
  font-weight: 500;
}

body.dark-mode #navFinancialStatementsChildren .nav-child:hover,
body.dark-mode #navJobsChildren .nav-child:hover,
body.dark-mode #navDistReportsChildren .nav-child:hover {
  background: #1a3320;
  color: #e0efe4;
}

body.dark-mode #navFinancialStatementsChildren .nav-child.active,
body.dark-mode #navJobsChildren .nav-child.active,
body.dark-mode #navDistReportsChildren .nav-child.active {
  background: #254530;
  border-left-color: #4a8a5a;
  color: #ffffff;
  font-weight: 600;
}

/* Chart subtitle */
.chart-subtitle {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  padding: 4px 16px 0;
  font-weight: 500;
}

/* Job Overview Charts Grid */
.job-overview-charts {
  margin-top: 24px;
  width: 80%;
  max-width: 80%;
  box-sizing: border-box;
}

#jobOverview .job-overview-charts {
  width: 80% !important;
  max-width: 80% !important;
}

.overview-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 80%;
  margin: 0;
}

@media (max-width: 1200px) {
  .overview-chart-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 90%;
  }
}

@media (max-width: 768px) {
  .overview-chart-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.overview-chart-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overview-chart-card .chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  text-align: center;
}

.overview-chart-card .chart-container {
  height: 200px;
  position: relative;
}

body.dark-mode .overview-chart-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .overview-chart-card .chart-title {
  color: #f1f5f9;
}

/* Job Overview Key Metrics Layout */
.jo-key-metrics-wrapper {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .jo-key-metrics-wrapper {
    grid-template-columns: 1fr;
  }
}

.jo-metric-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jo-metric-stack .job-metric-card {
  flex: 1;
  height: 110px;
}

.jo-metrics-chart-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.jo-metrics-chart-card .chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  text-align: center;
}

.jo-metrics-chart-card .chart-container {
  flex: 1;
  min-height: 180px;
  position: relative;
}

body.dark-mode .jo-metrics-chart-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .jo-metrics-chart-card .chart-title {
  color: #f1f5f9;
}

/* Job Overview config panel - 60% width */
.jo-config-panel {
  max-width: 60%;
}

@media (max-width: 768px) {
  .jo-config-panel {
    max-width: 100%;
  }
}

/* Job Overview metrics row - side by side compact tiles */
.jo-metrics-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.jo-metrics-row .job-metric-card.compact {
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 200px;
}

@media (max-width: 768px) {
  .jo-metrics-row {
    flex-direction: column;
  }
  
  .jo-metrics-row .job-metric-card.compact {
    max-width: 100%;
  }
}

/* Job Overview 5-tile row - using CSS grid for responsive sizing */
.jo-metrics-row-5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  width: 60%;
  max-width: 60%;
}

.jo-metrics-row-5 .job-metric-card.compact {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  padding: clamp(6px, 1vw, 14px) clamp(8px, 1.2vw, 18px);
}

.jo-metrics-row-5 .job-metric-card.compact .metric-value {
  font-size: clamp(11px, 1.4vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo-metrics-row-5 .job-metric-card.compact .metric-label {
  font-size: clamp(7px, 0.8vw, 11px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo-metrics-row-5 .job-metric-card.compact .metric-icon {
  width: clamp(20px, 2.2vw, 36px);
  height: clamp(20px, 2.2vw, 36px);
  font-size: clamp(10px, 1.1vw, 18px);
  flex-shrink: 0;
}

.jo-metrics-row-5 .job-metric-card.compact .metric-content {
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .jo-metrics-row-5 {
    grid-template-columns: repeat(6, 1fr);
    width: 80%;
    max-width: 80%;
  }
}

@media (max-width: 900px) {
  .jo-metrics-row-5 {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Job Overview - Heat map and key metrics 100% width on mobile */
  #jobOverview > .profitability-heatmap-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Key metrics - 2 tiles per row on mobile */
  .jo-metrics-row-5 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .jo-metrics-row-5 .job-metric-card.compact {
    min-width: 0 !important;
    padding: 10px 8px !important;
    flex-direction: row !important;
    text-align: left !important;
  }
  
  .jo-metrics-row-5 .job-metric-card.compact .metric-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  .jo-metrics-row-5 .job-metric-card.compact .metric-value {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  .jo-metrics-row-5 .job-metric-card.compact .metric-label {
    font-size: 9px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
  
  .jo-metrics-row-5 .job-metric-card.compact .metric-content {
    text-align: left !important;
    min-width: 0 !important;
  }
}

/* Job Overview section headers */
.jo-section-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e3a8a;
  margin: 8px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #3b82f6;
}

body.dark-mode .jo-section-header {
  color: #93c5fd;
  border-bottom-color: #60a5fa;
}

/* Job Overview 3-column chart grid */
.jo-chart-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 1100px) {
  .jo-chart-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .jo-chart-grid-3 {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Center the chart sections on mobile */
  .job-overview-charts {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .job-overview-charts .jo-section-header {
    text-align: center;
    width: 100%;
  }
  
  .overview-chart-card {
    width: 100%;
    max-width: 400px;
  }
}

/* Job Overview 2x2 chart grid */
.jo-chart-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .jo-chart-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

/* Totals Row Styling */
.totals-row {
  background-color: #f0f9ff;
  border-top: 3px solid #3b82f6;
  border-bottom: 3px solid #3b82f6;
  font-weight: 600;
}

.totals-row td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-top: none !important;
  border-bottom: none !important;
}

body.dark-mode .totals-row {
  background-color: #1e3a5f;
  border-top-color: #60a5fa;
  border-bottom-color: #60a5fa;
}

body.dark-mode .chart-subtitle {
  color: #94a3b8;
}

.jo-chart-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-primary);
}

/* Job Overview: Config, AI Analysis, and Key Metrics at 60% width to match config panel */
#jobOverview > .config-panel,
#jobOverview > #joAiAnalysisPanel,
#jobOverview > .job-key-metrics-section,
#jobOverview > .job-key-metrics-section.jo-key-metrics-constrained {
  width: 60% !important;
  max-width: 60% !important;
  box-sizing: border-box;
}

.jo-key-metrics-constrained .jo-metrics-row-5 {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

.jo-key-metrics-constrained .job-metric-card.compact {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 12px 10px;
  overflow: hidden;
}

.jo-key-metrics-constrained .job-metric-card.compact .metric-content {
  overflow: hidden;
  min-width: 0;
}

.jo-key-metrics-constrained .job-metric-card.compact .metric-value {
  font-size: clamp(0.85rem, 2vw, 1.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo-key-metrics-constrained .job-metric-card.compact .metric-label {
  font-size: clamp(0.55rem, 1.1vw, 0.7rem);
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
}

.jo-chart-stats .stat-period {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Job Overview Dark Mode */
body.dark-mode .jo-chart-stats {
  border-top-color: #475569;
}

body.dark-mode .jo-chart-stats .stat-box {
  background: #334155;
}

body.dark-mode .jo-chart-stats .stat-box:hover {
  background: #3f5170;
}

body.dark-mode .jo-chart-stats .stat-label {
  color: #94a3b8;
}

body.dark-mode .jo-chart-stats .stat-value {
  color: #f1f5f9;
}

body.dark-mode .jo-chart-stats .stat-period {
  color: #64748b;
}

/* Job Overview Mobile Responsiveness */
@media (max-width: 768px) {
  #jobOverview > .config-panel,
  #jobOverview > #joAiAnalysisPanel,
  #jobOverview > .job-key-metrics-section,
  #jobOverview > .job-key-metrics-section.jo-key-metrics-constrained,
  #jobOverview > .profitability-heatmap-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .jo-key-metrics-constrained {
    max-width: 100%;
    width: 100%;
  }
  
  /* 3 tiles per row on mobile - 2 rows of 3, 1 row of 2 centered */
  .jo-key-metrics-constrained .jo-metrics-row-5 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-items: center;
  }
  
  /* Center the last 2 tiles when there are 8 total (3+3+2) */
  .jo-key-metrics-constrained .jo-metrics-row-5 .job-metric-card.compact:nth-child(7) {
    grid-column: 1 / 2;
    justify-self: end;
    margin-right: 4px;
  }
  
  .jo-key-metrics-constrained .jo-metrics-row-5 .job-metric-card.compact:nth-child(8) {
    grid-column: 2 / 3;
    justify-self: start;
    margin-left: 4px;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact {
    min-width: 0 !important;
    padding: 10px 8px !important;
    flex-direction: column !important;
    width: 100%;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-value {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-label {
    font-size: 9px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-content {
    text-align: left !important;
    min-width: 0 !important;
  }
  
  .jo-chart-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  
  .jo-chart-stats .stat-box {
    padding: 6px 4px;
  }
  
  .jo-chart-stats .stat-label {
    font-size: 8px;
  }
  
  .jo-chart-stats .stat-value {
    font-size: 10px;
  }
  
  .jo-chart-stats .stat-period {
    font-size: 7px;
  }
}

@media (max-width: 480px) {
  /* 3 tiles per row on small mobile - same 3+3+2 layout centered */
  .jo-key-metrics-constrained .jo-metrics-row-5 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-items: center;
  }
  
  /* Center the last 2 tiles when there are 8 total (3+3+2) */
  .jo-key-metrics-constrained .jo-metrics-row-5 .job-metric-card.compact:nth-child(7) {
    grid-column: 1 / 2;
    justify-self: end;
    margin-right: 3px;
  }
  
  .jo-key-metrics-constrained .jo-metrics-row-5 .job-metric-card.compact:nth-child(8) {
    grid-column: 2 / 3;
    justify-self: start;
    margin-left: 3px;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact {
    min-width: 0 !important;
    padding: 8px 4px !important;
    flex-direction: column !important;
    width: 100%;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    margin-bottom: 4px !important;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-value {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-label {
    font-size: 7px !important;
    white-space: nowrap !important;
  }
  
  .jo-key-metrics-constrained .job-metric-card.compact .metric-content {
    text-align: center !important;
    min-width: 0 !important;
  }
  
  .jo-section-header {
    font-size: 1rem;
    margin: 6px 0 12px 0;
  }
}

/* ============================================================
   JOB BUDGETS - COMPREHENSIVE DARK MODE FIXES
   ============================================================ */

/* Key Metrics Section Title - ensure white text */
body.dark-mode .job-key-metrics-section .section-title,
body.dark-mode .job-key-metrics .section-title,
body.dark-mode #jobBudgetsView .section-title,
body.dark-mode .job-budgets-view .section-title {
  color: #f1f5f9 !important;
}

/* All metric values in dark mode */
body.dark-mode .job-metric-card .metric-value,
body.dark-mode .job-metrics-grid .metric-value,
body.dark-mode #jobBudgetsView .metric-value {
  color: #f1f5f9 !important;
}

/* Keep profit colors - margin styles defined in comprehensive fix section */
body.dark-mode .job-metric-card.profit .metric-value:not(.negative) {
  color: #34d399 !important;
}

body.dark-mode .job-metric-card.profit .metric-value.negative {
  color: #f87171 !important;
}

/* Over/Under Bill metric - respect inline color styles */
body.dark-mode #joOverUnderValue {
  color: inherit !important;
}
#joOverUnderValue.positive {
  color: #10b981 !important;
}
#joOverUnderValue.negative {
  color: #ef4444 !important;
}
body.dark-mode #joOverUnderValue.positive {
  color: #34d399 !important;
}
body.dark-mode #joOverUnderValue.negative {
  color: #f87171 !important;
}

/* Metric labels */
body.dark-mode .job-metric-card .metric-label,
body.dark-mode .job-metrics-grid .metric-label {
  color: #94a3b8 !important;
}

/* Primary card text stays white */
body.dark-mode .job-metric-card.primary .metric-value,
body.dark-mode .job-metric-card.primary .metric-label {
  color: #ffffff !important;
}

/* Job Budgets Table - all text white/light in dark mode */
body.dark-mode .job-budgets-table th {
  color: #e2e8f0 !important;
  background: #334155 !important;
}

body.dark-mode .job-budgets-table td {
  color: #e5e7eb !important;
}

/* Table positive/negative values */
body.dark-mode .job-budgets-table td.positive {
  color: #34d399 !important;
}

body.dark-mode .job-budgets-table td.negative {
  color: #f87171 !important;
}

/* Breakdown table headers and cells */
body.dark-mode .breakdown-table th {
  color: #cbd5e1 !important;
  background: #334155 !important;
}

body.dark-mode .breakdown-table td {
  color: #e5e7eb !important;
}

body.dark-mode .breakdown-table td.positive {
  color: #34d399 !important;
}

body.dark-mode .breakdown-table td.negative {
  color: #f87171 !important;
}

/* Breakdown card titles */
body.dark-mode .breakdown-title {
  color: #f1f5f9 !important;
  background: #334155 !important;
}

/* Chart subtitle in dark mode */
body.dark-mode .chart-subtitle {
  color: #94a3b8 !important;
}

/* Configuration panel labels and text */
body.dark-mode .overview-config-box label,
body.dark-mode .overview-config-box .checkbox-group label {
  color: #e2e8f0 !important;
}

body.dark-mode .overview-config-box .checkbox-item label {
  color: #cbd5e1 !important;
}

/* Config section headers in dark mode */
body.dark-mode .overview-config-box > div[style*="font-weight"],
[data-theme="dark"] .overview-config-box > div[style*="font-weight"] {
  color: #ffffff !important;
}

/* Pagination controls */
body.dark-mode .job-pagination,
body.dark-mode .pagination-info {
  color: #cbd5e1 !important;
}

body.dark-mode .pagination-btn {
  color: #e2e8f0 !important;
  background: #334155 !important;
  border-color: #475569 !important;
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
  background: #475569 !important;
}

body.dark-mode .pagination-btn:disabled {
  color: #64748b !important;
  background: #1e293b !important;
}

body.dark-mode .page-size-select {
  color: #e2e8f0 !important;
  background: #334155 !important;
  border-color: #475569 !important;
}

/* Search input */
body.dark-mode .job-search-input {
  color: #e2e8f0 !important;
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .job-search-input::placeholder {
  color: #64748b !important;
}

body.dark-mode .job-search-icon {
  color: #94a3b8 !important;
}

/* Select dropdowns in config */
body.dark-mode .filter-select,
body.dark-mode .overview-config-box select {
  color: #e2e8f0 !important;
  background: #1e293b !important;
  border-color: #475569 !important;
}

/* Expand icons */
body.dark-mode .job-budgets-table .expand-icon {
  color: #94a3b8 !important;
}

body.dark-mode .job-budgets-table .expand-icon:hover {
  color: #e2e8f0 !important;
  background: #475569 !important;
}

/* Hidden columns text (sub-values) */
body.dark-mode .job-budgets-table .sub-value {
  color: #94a3b8 !important;
}

/* Loading cell text */
body.dark-mode .job-budgets-table td.loading-cell,
body.dark-mode .breakdown-table td.loading-cell {
  color: #94a3b8 !important;
}

/* Job table container scrollbar */
body.dark-mode .job-table-container::-webkit-scrollbar-thumb {
  background: #475569;
}

body.dark-mode .job-table-container::-webkit-scrollbar-track {
  background: #1e293b;
}

/* Margin column with gradient formatting */
body.dark-mode .job-budgets-table td.margin-cell {
  font-weight: 600;
}

/* Breakdown container and chart subtitle styles defined in comprehensive fix section below */

/* ============================================================
   JOB BUDGETS - COMPREHENSIVE MOBILE STYLES
   ============================================================ */

@media (max-width: 768px) {
  /* Stacked breakdown cards full width on mobile */
  .breakdown-container.stacked .breakdown-card {
    min-width: auto;
    max-width: 100%;
  }
  
  /* Chart wrapper smaller on mobile */
  .breakdown-chart-wrapper {
    height: 160px;
    padding: 8px;
  }
  
  /* Chart subtitle styling on mobile */
  .breakdown-card > .chart-subtitle {
    font-size: 12px;
    padding: 10px 12px 6px;
  }
  
  /* Pagination mobile layout - single row */
  .job-pagination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    flex-wrap: nowrap;
  }
  
  .pagination-controls {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  
  .pagination-btn {
    padding: 5px 10px;
    font-size: 11px;
    min-width: auto;
    min-height: 28px;
  }
  
  .page-info {
    font-size: 10px;
    white-space: nowrap;
  }
  
  .page-size-select {
    padding: 4px 6px;
    font-size: 11px;
    min-height: 28px;
    width: auto;
    min-width: 70px;
  }
  
  /* Config panel improvements */
  .overview-config-box {
    padding: 12px;
  }
  
  .overview-config-box .config-header {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .overview-config-box .config-content {
    padding: 12px;
    gap: 12px;
  }
  
  .filter-group label {
    font-size: 12px;
  }
  
  .filter-select {
    padding: 10px 12px;
    font-size: 14px;
    min-height: 44px;
  }
  
  /* Checkbox groups on mobile */
  .checkbox-group {
    gap: 8px;
  }
  
  .checkbox-item {
    padding: 8px 0;
  }
  
  .checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  
  /* Table cell padding for touch */
  .job-budgets-table th,
  .job-budgets-table td {
    padding: 12px 10px;
  }
  
  /* Expand icons larger for touch */
  .job-budgets-table .expand-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  /* Status badges */
  .job-status-badge {
    padding: 4px 10px;
    font-size: 10px;
  }
  
  /* Key metrics - 2 per row */
  .job-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .job-metric-card {
    flex-direction: column;
    text-align: center;
    padding: 12px 10px;
    gap: 8px;
  }
  
  .job-metric-card .metric-icon {
    margin: 0 auto;
  }
  
  .job-metric-card .metric-content {
    text-align: center;
  }
  
  /* Job Overview key metrics - keep horizontal layout with fluid sizing */
  #jobOverview .jo-metrics-row-5 .job-metric-card.compact {
    flex-direction: row !important;
    text-align: left !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  
  #jobOverview .jo-metrics-row-5 .job-metric-card.compact .metric-icon {
    margin: 0 !important;
    width: clamp(20px, 3vw, 28px) !important;
    height: clamp(20px, 3vw, 28px) !important;
    font-size: clamp(10px, 1.5vw, 14px) !important;
    flex-shrink: 0 !important;
  }
  
  #jobOverview .jo-metrics-row-5 .job-metric-card.compact .metric-content {
    text-align: left !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  #jobOverview .jo-metrics-row-5 .job-metric-card.compact .metric-value {
    font-size: clamp(11px, 1.5vw, 14px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  #jobOverview .jo-metrics-row-5 .job-metric-card.compact .metric-label {
    font-size: clamp(7px, 0.9vw, 9px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  /* Single column metrics on small phones */
  .job-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .job-metric-card {
    padding: 10px 8px;
  }
  
  .job-metric-card .metric-value {
    font-size: 15px;
  }
  
  .job-metric-card .metric-label {
    font-size: 9px;
  }
  
  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  /* Table text smaller */
  .job-budgets-table {
    font-size: 11px;
    min-width: 700px;
  }
  
  .job-budgets-table th,
  .job-budgets-table td {
    padding: 10px 8px;
  }
  
  /* Breakdown table smaller */
  .breakdown-table {
    font-size: 11px;
    min-width: 450px;
  }
  
  /* Chart even smaller */
  .breakdown-chart-wrapper {
    height: 140px;
  }
  
  /* Pagination compact */
  .pagination-btn {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 40px;
    min-height: 40px;
  }
  
  /* Search input */
  .job-search-input {
    font-size: 16px; /* Prevents iOS zoom */
    padding: 12px 40px 12px 14px;
  }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .job-budgets-table .expand-icon {
    width: 32px;
    height: 32px;
  }
  
  .pagination-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  .filter-select,
  .page-size-select {
    min-height: 44px;
  }
  
  /* Remove hover effects on touch */
  .job-budgets-table tbody tr:hover {
    background: transparent;
  }
  
  body.dark-mode .job-budgets-table tbody tr:hover {
    background: transparent;
  }
  
  /* Active state for touch feedback */
  .job-budgets-table tbody tr:active {
    background: #f1f5f9;
  }
  
  body.dark-mode .job-budgets-table tbody tr:active {
    background: #334155;
  }
  
  .pagination-btn:active {
    transform: scale(0.95);
  }
}

/* Landscape phone adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .job-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .breakdown-container.stacked {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .breakdown-container.stacked .breakdown-card {
    flex: 0 1 auto;
    min-width: 280px;
    max-width: 400px;
  }
}

/* Margin cell text should be dark/black for readability on colored backgrounds */
.margin-cell,
.breakdown-table .margin-cell,
.job-budgets-table .margin-cell {
  color: #1f2937 !important;
  font-weight: 600;
}

body.dark-mode .margin-cell,
body.dark-mode .breakdown-table .margin-cell,
body.dark-mode .job-budgets-table .margin-cell {
  color: #1f2937 !important;
}

/* Avg Actual Margin - styles defined in comprehensive fix section below */

/* ============================================================
   JOB BUDGETS - COMPREHENSIVE FIX FOR ALL ISSUES
   ============================================================ */

/* JOB BUDGETS PAGE - Align config, AI analysis, metrics, and donut charts at 60% width */
#jobBudgets > .config-panel,
#jobActuals > .config-panel,
#jobBudgets > #jbAiAnalysisPanel,
#jobActuals > #jaAiAnalysisPanel {
  width: 60%;
  max-width: 60%;
  box-sizing: border-box;
}

#jobBudgets > .job-key-metrics-section,
#jobActuals > .job-key-metrics-section {
  width: 60% !important;
  max-width: 60% !important;
  box-sizing: border-box;
}

#jobBudgets > .job-key-metrics-section .job-metrics-grid,
#jobActuals > .job-key-metrics-section .job-metrics-grid,
#jobBudgets > .job-key-metrics-section .job-metrics-grid.five-col,
#jobActuals > .job-key-metrics-section .job-metrics-grid.five-col {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
}

#jobBudgets > .job-key-metrics-section .job-metric-card,
#jobActuals > .job-key-metrics-section .job-metric-card {
  min-width: 0;
  overflow: hidden;
  padding: 10px 8px;
}

#jobBudgets > .job-key-metrics-section .job-metric-card .metric-value,
#jobActuals > .job-key-metrics-section .job-metric-card .metric-value {
  font-size: clamp(12px, 1.8vw, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#jobBudgets > .job-key-metrics-section .job-metric-card .metric-label,
#jobActuals > .job-key-metrics-section .job-metric-card .metric-label {
  font-size: clamp(8px, 1vw, 11px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  #jobBudgets > .config-panel,
  #jobActuals > .config-panel,
  #jobBudgets > #jbAiAnalysisPanel,
  #jobActuals > #jaAiAnalysisPanel,
  #jobBudgets > .job-key-metrics-section,
  #jobActuals > .job-key-metrics-section {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 1. FILTER DROPDOWNS - Stack vertically with no titles */
.job-filter-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.job-filter-stack .filter-select {
  width: 200px;
}

@media (max-width: 768px) {
  #jobOverview .job-filter-stack {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  
  #jobOverview .job-filter-stack .filter-select {
    flex: 1;
    min-width: 120px;
    max-width: none;
    width: auto;
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* 2. BREAKDOWN CONTAINER - 60% screen width total, side by side */
.breakdown-container.stacked {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 20px;
  justify-content: flex-start;
  width: 60%;
  max-width: 60%;
}

.breakdown-container.stacked .breakdown-card {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
  max-width: calc(50% - 10px);
  overflow-x: hidden;
}

/* Donut chart legend text colors */
.breakdown-card .chart-legend,
.breakdown-card .legend-text,
.breakdown-card canvas + div,
.donut-legend,
.chart-legend-item {
  color: #1f2937;
}

body.dark-mode .breakdown-card .chart-legend,
body.dark-mode .breakdown-card .legend-text,
body.dark-mode .breakdown-card canvas + div,
body.dark-mode .donut-legend,
body.dark-mode .chart-legend-item {
  color: #ffffff !important;
}

/* Stack on mobile only */
@media (max-width: 900px) {
  .breakdown-container.stacked {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  
  .breakdown-container.stacked .breakdown-card {
    max-width: 100%;
    width: 100%;
    min-height: 320px;
  }
}

/* Extra small screens - ensure full width */
@media (max-width: 480px) {
  .breakdown-container.stacked .breakdown-card {
    min-height: 350px;
    padding: 12px;
  }
  
  .breakdown-card .chart-container {
    min-height: 280px;
  }
}

/* 3. SHOW CHART TITLES */
.breakdown-card > .chart-subtitle {
  display: block !important;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: center;
  padding: 12px 16px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.dark-mode .breakdown-card > .chart-subtitle {
  color: #e2e8f0 !important;
}

/* 4. BREAKDOWN CARD - Allow horizontal scroll for table */
.breakdown-card {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 600px;
}

/* 5. BREAKDOWN CARD CHART HEADER - Proper layout for expand button */
.breakdown-card .chart-header {
  display: flex;
  justify-content: space-between;
  
  padding: 12px 16px 8px;
  position: relative;
}

.breakdown-card .chart-header-title {
  flex: 1;
}

.breakdown-card .chart-header-title h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #374151;
}

body.dark-mode .breakdown-card .chart-header-title h3,
[data-theme="dark"] .breakdown-card .chart-header-title h3 {
  color: #f1f5f9;
}

.breakdown-card .chart-header-controls {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* 6. PAGE CHART EXPAND BUTTON - Square button with proper dimensions */
.page-chart-expand-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  margin: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.page-chart-expand-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.page-chart-expand-btn:hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #cbd5e1;
}

body.dark-mode .page-chart-expand-btn,
[data-theme="dark"] .page-chart-expand-btn {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

body.dark-mode .page-chart-expand-btn:hover,
[data-theme="dark"] .page-chart-expand-btn:hover {
  background: #475569;
  color: #f1f5f9;
}

/* Mobile adjustments for page-chart-expand-btn */
@media (max-width: 768px) {
  .page-chart-expand-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
  }
  
  .page-chart-expand-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .breakdown-card .chart-header-controls {
    top: 6px;
    right: 6px;
  }
}

.breakdown-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.breakdown-table-wrapper.collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

/* When table is expanded on desktop, allow chart-box to expand horizontally */
@media (min-width: 769px) {
  .chart-box.table-expanded {
    max-height: none;
    overflow: visible;
    min-width: fit-content;
  }
  
  .chart-box.table-expanded .breakdown-table-wrapper {
    overflow: visible;
    min-width: fit-content;
  }
  
  .chart-box.table-expanded .breakdown-table {
    min-width: max-content;
  }
  
  /* Also expand the parent container */
  .chart-with-tiles:has(.chart-box.table-expanded) {
    overflow-x: auto;
    min-width: fit-content;
  }
}

.breakdown-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 4px 12px;
  margin: 4px 0;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.breakdown-expand-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

.breakdown-expand-btn .expand-arrow {
  transition: transform 0.3s ease;
}

.breakdown-expand-btn.expanded .expand-arrow {
  transform: rotate(180deg);
}

body.dark-mode .breakdown-expand-btn {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode .breakdown-expand-btn:hover {
  background: #475569;
  color: #f1f5f9;
}

/* Table header row inside collapsible sections */
.table-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 8px 0;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 8px;
}

.table-header-row .export-table-btn {
  font-size: 12px;
  padding: 4px 10px;
}

body.dark-mode .table-header-row {
  color: #e2e8f0;
  border-bottom-color: #475569;
}

/* Mobile: ensure table wrapper scrolls */
@media (max-width: 768px) {
  .breakdown-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .breakdown-table-wrapper {
    min-width: 100%;
  }
  
  .breakdown-table {
    min-width: 450px;
  }
}

/* 5. DARK MODE TEXT FIXES - Force white/light text */
body.dark-mode .job-budgets-table th {
  color: #e2e8f0 !important;
  background: #334155 !important;
}

body.dark-mode .job-budgets-table td {
  color: #e2e8f0 !important;
  border-bottom-color: #475569 !important;
}

body.dark-mode .job-budgets-table td.positive {
  color: #34d399 !important;
}

body.dark-mode .job-budgets-table td.negative {
  color: #f87171 !important;
}

/* Breakdown table dark mode */
body.dark-mode .breakdown-table th {
  color: #cbd5e1 !important;
  background: #334155 !important;
}

body.dark-mode .breakdown-table td {
  color: #e2e8f0 !important;
}

body.dark-mode .breakdown-table td.positive {
  color: #34d399 !important;
}

body.dark-mode .breakdown-table td.negative {
  color: #f87171 !important;
}

/* 6. AVG PROFIT MARGIN - Fix % visibility in dark mode */
body.dark-mode .job-metric-card.margin .metric-value {
  color: #1e293b !important;
}

/* Also fix the margin icon to be visible */
body.dark-mode .job-metric-card.margin .metric-icon {
  color: #1e293b !important;
}

/* 7. Key Metrics section title dark mode */
body.dark-mode .job-key-metrics-section .section-title,
body.dark-mode #jobBudgetsView .section-title {
  color: #f1f5f9 !important;
}

/* 8. All metric values in dark mode */
body.dark-mode .job-metric-card .metric-value {
  color: #f1f5f9 !important;
}

body.dark-mode .job-metric-card .metric-label {
  color: #94a3b8 !important;
}

/* Primary card stays white */
body.dark-mode .job-metric-card.primary .metric-value,
body.dark-mode .job-metric-card.primary .metric-label {
  color: #ffffff !important;
}

/* Profit card green */
body.dark-mode .job-metric-card.profit .metric-value:not(.negative) {
  color: #34d399 !important;
}

body.dark-mode .job-metric-card.profit .metric-value.negative {
  color: #f87171 !important;
}

/* Margin card - dark gray background in dark mode with white text */
body.dark-mode .job-metric-card.margin {
  background: #374151 !important;
}

body.dark-mode .job-metric-card.margin .metric-value {
  color: #ffffff !important;
}

body.dark-mode .job-metric-card.margin .metric-label {
  color: #ffffff !important;
}

body.dark-mode .job-metric-card.margin .metric-icon {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 9. Margin cells in tables - dark text on colored background */
.margin-cell {
  color: #1f2937 !important;
  font-weight: 600;
}

body.dark-mode .margin-cell {
  color: #1f2937 !important;
}

/* 10. Config panel elements in dark mode */
body.dark-mode .job-budgets-controls .config-label {
  color: #e2e8f0 !important;
}

body.dark-mode .job-budgets-controls .checkbox-label {
  color: #e2e8f0 !important;
}

body.dark-mode .job-budgets-controls .filter-select {
  color: #e2e8f0 !important;
  background: #1e293b !important;
  border-color: #475569 !important;
}

/* 11. Search bar dark mode */
body.dark-mode .job-search-input {
  color: #e2e8f0 !important;
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .job-search-input::placeholder {
  color: #64748b !important;
}

/* 12. Pagination dark mode */
body.dark-mode .job-pagination .pagination-info,
body.dark-mode .job-pagination .page-info {
  color: #cbd5e1 !important;
}

body.dark-mode .pagination-btn {
  color: #e2e8f0 !important;
  background: #334155 !important;
  border-color: #475569 !important;
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
  background: #475569 !important;
}

body.dark-mode .pagination-btn:disabled {
  color: #64748b !important;
  background: #1e293b !important;
}

body.dark-mode .page-size-select {
  color: #e2e8f0 !important;
  background: #334155 !important;
  border-color: #475569 !important;
}

/* Subtotal row styling */
.subtotal-row {
  background: #f1f5f9 !important;
  border-top: 2px solid #cbd5e1;
}

.subtotal-row td {
  font-weight: 600;
  color: #1e293b !important;
}

body.dark-mode .subtotal-row {
  background: #334155 !important;
  border-top-color: #64748b;
}

body.dark-mode .subtotal-row td {
  color: #f1f5f9 !important;
}

body.dark-mode .subtotal-row td.positive {
  color: #34d399 !important;
}

body.dark-mode .subtotal-row td.negative {
  color: #f87171 !important;
}

/* Ensure "Key Metrics" title is white in dark mode */
body.dark-mode .section-title,
body.dark-mode .job-key-metrics-section .section-title {
  color: #f1f5f9 !important;
}

/* Ensure "Job Status:" label is white in dark mode */
body.dark-mode .config-label,
body.dark-mode .job-budgets-controls .config-label {
  color: #f1f5f9 !important;
}

/* Checkbox labels in dark mode */
body.dark-mode .checkbox-label,
body.dark-mode .job-budgets-controls .checkbox-label {
  color: #e2e8f0 !important;
}

/* Action button variants */
.action-btn.warning {
  background: #f59e0b;
  color: #fff;
}

.action-btn.warning:hover {
  background: #d97706;
}

.action-btn.success {
  background: #10b981;
  color: #fff;
}

.action-btn.success:hover {
  background: #059669;
}

body.dark-mode .action-btn.warning {
  background: #f59e0b;
}

body.dark-mode .action-btn.success {
  background: #10b981;
}

/* ============================================================
   JOB BUDGETS - LIGHT AND DARK MODE TEXT COLORS (FINAL FIX)
   ============================================================ */

/* LIGHT MODE (default) - Black/dark text */
#jobBudgets .config-label {
  color: #374151 !important;
}

#jobBudgets .section-title {
  color: #1e293b !important;
}

#jobBudgets .breakdown-table td {
  color: #374151 !important;
}

#jobBudgets .breakdown-table th {
  color: #374151 !important;
}

#jobBudgets .job-budgets-table td {
  color: #374151 !important;
}

#jobBudgets .job-budgets-table th {
  color: #374151 !important;
}

#jobBudgets .checkbox-label {
  color: #374151 !important;
}

/* Keep margin cells dark for readability on colored backgrounds */
#jobBudgets .margin-cell {
  color: #1f2937 !important;
}

/* DARK MODE - White/light text */
[data-theme="dark"] #jobBudgets .config-label {
  color: #f1f5f9 !important;
}

[data-theme="dark"] #jobBudgets .section-title {
  color: #f1f5f9 !important;
}

[data-theme="dark"] #jobBudgets .breakdown-table td {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #jobBudgets .breakdown-table th {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #jobBudgets .job-budgets-table td {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #jobBudgets .job-budgets-table th {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #jobBudgets .checkbox-label {
  color: #e2e8f0 !important;
}

/* Keep margin cells dark even in dark mode for readability */
[data-theme="dark"] #jobBudgets .margin-cell {
  color: #1f2937 !important;
}

/* Profit cells should show green/red */
#jobBudgets .job-budgets-table td.positive {
  color: #10b981 !important;
}

#jobBudgets .job-budgets-table td.negative {
  color: #dc2626 !important;
}

/* Dark mode - Financial pages config labels (inline styled labels) */
[data-theme="dark"] #overview .config-body div[style*="color"],
[data-theme="dark"] #revenue .config-body div[style*="color"],
[data-theme="dark"] #accounts .config-body div[style*="color"],
[data-theme="dark"] #incomeStatement .config-body div[style*="color"],
[data-theme="dark"] #balanceSheet .config-body div[style*="color"],
[data-theme="dark"] #cashFlow .config-body div[style*="color"],
[data-theme="dark"] #cashBalances .config-body div[style*="color"] {
  color: #fff !important;
}

#jobBudgets .breakdown-table td.positive {
  color: #10b981 !important;
}

#jobBudgets .breakdown-table td.negative {
  color: #dc2626 !important;
}

/* Job Actuals - Keep Over/(Under) Bill column dark in dark mode */
[data-theme="dark"] #jobActuals .job-budgets-table td[style*="background-color"] {
  color: #1e293b !important;
}

/* ============================================================
   COLUMN FILTER DROPDOWNS
   ============================================================ */

/* Table header cell structure */
.job-budgets-table th.filterable {
  position: relative;
  padding-right: 50px !important;
}

.job-budgets-table th .column-header-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.job-budgets-table th .column-header-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sort and filter controls container */
.column-controls {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Sort buttons */
.sort-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  color: #9ca3af;
  opacity: 0.6;
  transition: all 0.15s ease;
}

.sort-btn:hover {
  opacity: 1;
  color: #3b82f6;
}

.sort-btn.active {
  opacity: 1;
  color: #3b82f6;
}

/* Sort button container for vertical stacking */
.sort-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Inline sort controls for numeric columns */
.sort-controls.inline-sort {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: 4px;
}

.sortable-number {
  white-space: nowrap;
}

.sortable-number .column-header-text {
  display: inline;
}

/* Filter button */
.filter-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  font-size: 11px;
  color: #9ca3af;
  opacity: 0.6;
  transition: all 0.15s ease;
  border-radius: 3px;
}

.filter-btn:hover {
  opacity: 1;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.filter-btn.has-filter {
  opacity: 1;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
}

/* Filter dropdown panel */
.column-filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  max-width: 280px;
  max-height: calc(100vh - 200px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  overflow: hidden;
}

.column-filter-dropdown.open {
  display: block;
}

/* Search filter wrapper for autocomplete inputs */
.search-filter-wrapper {
  position: relative;
  width: 100%;
}

.search-filter-wrapper .filter-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  background: #fff;
}

.search-filter-wrapper .filter-search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

.search-suggestions.open {
  display: block;
}

.search-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.search-suggestion-item:hover {
  background: #f3f4f6;
}

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

.search-suggestion-item.clear-filter {
  color: #6b7280;
  font-style: italic;
}

body.dark-mode .search-filter-wrapper .filter-search-input,
[data-theme="dark"] .search-filter-wrapper .filter-search-input {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode .search-suggestions,
[data-theme="dark"] .search-suggestions {
  background: #1e293b;
  border-color: #475569;
}

body.dark-mode .search-suggestion-item,
[data-theme="dark"] .search-suggestion-item {
  color: #e2e8f0;
  border-bottom-color: #334155;
}

body.dark-mode .search-suggestion-item:hover,
[data-theme="dark"] .search-suggestion-item:hover {
  background: #334155;
}

/* Search input in filter dropdown */
.filter-search-input {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  outline: none;
  background: #f9fafb;
}

.filter-search-input::placeholder {
  color: #9ca3af;
}

.filter-search-input:focus {
  background: #fff;
}

/* Filter options list */
.filter-options-list {
  max-height: min(200px, calc(100vh - 350px));
  overflow-y: auto;
  padding: 6px 0;
}

.filter-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
  font-size: 13px;
  color: #374151;
}

.filter-option:hover {
  background: #f3f4f6;
}

.filter-option input[type="checkbox"] {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}

.filter-option-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-option.hidden {
  display: none;
}

/* ============================================================
   COLUMN PICKER
============================================================= */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.table-toolbar .job-search-bar {
  margin-bottom: 0;
  flex: 1;
  min-width: 250px;
}

.column-picker-container {
  position: relative;
}

.column-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.column-picker-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.column-picker-btn svg {
  opacity: 0.7;
}

.column-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.column-picker-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.column-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px 12px 0 0;
}

.column-picker-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.column-picker-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.column-picker-close:hover {
  background: #e5e7eb;
  color: #374151;
}

.column-picker-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
}

.column-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.column-picker-item:hover {
  background: #f3f4f6;
}

.column-picker-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.column-picker-item label {
  flex: 1;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

.column-picker-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.column-picker-item.disabled input,
.column-picker-item.disabled label {
  cursor: not-allowed;
}

.column-picker-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.column-picker-reset {
  flex: 1;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.column-picker-reset:hover {
  background: #f3f4f6;
  color: #374151;
}

.column-picker-apply {
  flex: 1;
  padding: 10px 16px;
  background: #3b82f6;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.column-picker-apply:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* Dark mode for column picker */
body.dark-mode .column-picker-btn,
[data-theme="dark"] .column-picker-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

body.dark-mode .column-picker-btn:hover,
[data-theme="dark"] .column-picker-btn:hover {
  background: #334155;
  border-color: #475569;
}

body.dark-mode .column-picker-dropdown,
[data-theme="dark"] .column-picker-dropdown {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .column-picker-header,
[data-theme="dark"] .column-picker-header {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .column-picker-title,
[data-theme="dark"] .column-picker-title {
  color: #f1f5f9;
}

body.dark-mode .column-picker-close,
[data-theme="dark"] .column-picker-close {
  color: #94a3b8;
}

body.dark-mode .column-picker-close:hover,
[data-theme="dark"] .column-picker-close:hover {
  background: #334155;
  color: #e2e8f0;
}

body.dark-mode .column-picker-item:hover,
[data-theme="dark"] .column-picker-item:hover {
  background: #334155;
}

body.dark-mode .column-picker-item label,
[data-theme="dark"] .column-picker-item label {
  color: #e2e8f0;
}

body.dark-mode .column-picker-footer,
[data-theme="dark"] .column-picker-footer {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .column-picker-reset,
[data-theme="dark"] .column-picker-reset {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

body.dark-mode .column-picker-reset:hover,
[data-theme="dark"] .column-picker-reset:hover {
  background: #475569;
  color: #e2e8f0;
}

/* Filter quick links */
.filter-quick-links {
  display: flex;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.filter-quick-link {
  font-size: 11px;
  color: #3b82f6;
  cursor: pointer;
  text-decoration: underline;
}

.filter-quick-link:hover {
  color: #2563eb;
}

/* Filter actions */
.filter-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.filter-actions button {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-ok-btn {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}

.filter-ok-btn:hover {
  background: #2563eb;
}

.filter-cancel-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #6b7280;
}

.filter-cancel-btn:hover {
  background: #f3f4f6;
}

.filter-select-all-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.filter-select-all-btn:hover {
  background: #f3f4f6;
}

.filter-clear-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #6b7280;
}

.filter-clear-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.filter-apply-btn {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #fff;
}

.filter-apply-btn:hover {
  background: #2563eb;
}

/* Dark mode styles */
body.dark-mode .column-filter-dropdown,
[data-theme="dark"] .column-filter-dropdown {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .filter-search-input,
[data-theme="dark"] .filter-search-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

body.dark-mode .filter-search-input::placeholder,
[data-theme="dark"] .filter-search-input::placeholder {
  color: #64748b;
}

body.dark-mode .filter-option,
[data-theme="dark"] .filter-option {
  color: #e2e8f0;
}

body.dark-mode .filter-option:hover,
[data-theme="dark"] .filter-option:hover {
  background: #334155;
}

body.dark-mode .filter-actions,
[data-theme="dark"] .filter-actions {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .filter-select-all-btn,
body.dark-mode .filter-clear-btn,
[data-theme="dark"] .filter-select-all-btn,
[data-theme="dark"] .filter-clear-btn {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode .filter-select-all-btn:hover,
[data-theme="dark"] .filter-select-all-btn:hover {
  background: #475569;
}

body.dark-mode .filter-clear-btn:hover,
[data-theme="dark"] .filter-clear-btn:hover {
  background: #7f1d1d;
  border-color: #991b1b;
  color: #fecaca;
}

body.dark-mode .filter-quick-links,
[data-theme="dark"] .filter-quick-links {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .filter-quick-link,
[data-theme="dark"] .filter-quick-link {
  color: #60a5fa;
}

body.dark-mode .filter-quick-link:hover,
[data-theme="dark"] .filter-quick-link:hover {
  color: #93c5fd;
}

body.dark-mode .filter-ok-btn,
[data-theme="dark"] .filter-ok-btn {
  background: #3b82f6;
  border-color: #3b82f6;
}

body.dark-mode .filter-cancel-btn,
[data-theme="dark"] .filter-cancel-btn {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode #paymentsTable .retention-col,
[data-theme="dark"] #paymentsTable .retention-col {
  background-color: #1e293b;
}

body.dark-mode #paymentsTable thead .retention-col,
[data-theme="dark"] #paymentsTable thead .retention-col {
  background-color: #334155;
}

body.dark-mode #paymentsTable .totals-row .retention-col,
[data-theme="dark"] #paymentsTable .totals-row .retention-col {
  background-color: #1e293b;
}

body.dark-mode .sort-btn,
[data-theme="dark"] .sort-btn {
  color: #64748b;
}

body.dark-mode .sort-btn:hover,
body.dark-mode .sort-btn.active,
[data-theme="dark"] .sort-btn:hover,
[data-theme="dark"] .sort-btn.active {
  color: #60a5fa;
}

body.dark-mode .filter-btn,
[data-theme="dark"] .filter-btn {
  color: #64748b;
}

body.dark-mode .filter-btn:hover,
[data-theme="dark"] .filter-btn:hover {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
}

body.dark-mode .filter-btn.has-filter,
[data-theme="dark"] .filter-btn.has-filter {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.2);
}

/* Active filter count badge */
.filter-count-badge {
  background: #3b82f6;
  color: white;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 8px;
  margin-left: 4px;
  min-width: 14px;
  text-align: center;
}

/* Mobile responsiveness for column filters */
@media (max-width: 900px) {
  .job-budgets-table th.filterable {
    padding-right: 36px !important;
  }
  
  .column-controls {
    display: flex;
    right: 4px;
    gap: 2px;
  }
  
  .sort-controls {
    display: none;
  }
  
  .filter-btn {
    padding: 4px 6px;
    font-size: 12px;
  }
  
  .column-filter-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: auto;
    min-width: 280px;
    max-width: 90vw;
    max-height: 70vh;
    z-index: 9999;
  }
  
  .column-filter-dropdown .filter-options-list {
    max-height: 40vh;
  }
}

@media (max-width: 600px) {
  .job-budgets-table th.filterable {
    padding-right: 30px !important;
  }
  
  .filter-btn {
    padding: 3px 5px;
    font-size: 11px;
  }
}

/* Skeleton loading animation */
.skeleton-row td {
  padding: 12px 8px;
}

.skeleton-text {
  height: 16px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  width: 80%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body.dark-mode .skeleton-text,
[data-theme="dark"] .skeleton-text {
  background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.filter-loading, .filter-error {
  padding: 12px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

.filter-error {
  color: #dc2626;
}

.retry-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-left: 8px;
}

.retry-btn:hover {
  background: #2563eb;
}

.error-cell {
  text-align: center;
  padding: 20px !important;
  color: #64748b;
}

.collapsible-col.hidden {
  display: none;
}

.expand-toggle-btn {
  background: #e2e8f0;
  border: none;
  border-radius: 3px;
  width: 18px;
  height: 18px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 4px;
  color: #475569;
  line-height: 1;
}

.expand-toggle-btn:hover {
  background: #cbd5e1;
}

.expandable-col {
  white-space: nowrap;
}

.expand-hint {
  font-size: 10px;
  color: #64748b;
  font-weight: normal;
  margin-top: 2px;
}

#paymentsTable {
  width: 100%;
  table-layout: fixed;
}

#paymentsTable th,
#paymentsTable td {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  vertical-align: middle;
}

#paymentsTable th {
  font-size: 10px;
  padding: 6px 4px;
  line-height: 1.2;
  hyphens: auto;
}

#paymentsTable th .column-header-text {
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

#paymentsTable td {
  font-size: 11px;
  padding: 6px 4px;
}

/* Desktop: Payments table fits to full width with text wrapping */
@media (min-width: 769px) {
  #paymentsTable th,
  #paymentsTable td {
    font-size: 11px;
    padding: 8px 6px;
  }
  
  #paymentsTable th {
    font-size: 10px;
  }
}

@media (min-width: 1200px) {
  #paymentsTable th,
  #paymentsTable td {
    font-size: 12px;
    padding: 8px 8px;
  }
  
  #paymentsTable th {
    font-size: 11px;
  }
}

#paymentsTable .collapsible-col {
  background-color: #f1f5f9;
}

#paymentsTable thead .collapsible-col {
  background-color: #e2e8f0;
}

#paymentsTable .totals-row .collapsible-col {
  background-color: #e8ecf1;
}

#paymentsTable .status-paid {
  background-color: #dcfce7;
  color: #000000 !important;
}

#paymentsTable .status-retention-due {
  background-color: #fef3c7;
  color: #000000 !important;
}

#paymentsTable .retention-col {
  background-color: #f1f5f9;
}

#paymentsTable thead .retention-col {
  background-color: #e2e8f0;
}

#paymentsTable .totals-row .retention-col {
  background-color: #e8ecf1;
}

/* ============================================================
   COST CODE ANALYSIS STYLES
============================================================ */
.cc-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cc-metric-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
}

.cc-metric-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.cc-metric-card.highlight {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-color: transparent;
}

.cc-metric-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin-bottom: 8px;
}

.cc-metric-card.highlight .cc-metric-label {
  color: rgba(255, 255, 255, 0.85);
}

.cc-metric-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}

.cc-metric-card.highlight .cc-metric-value {
  color: white;
  font-size: 22px;
}

.cc-metric-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}

.cc-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.cc-chart-container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  position: relative;
}

.cc-chart-container .chart-header {
  display: flex;
  justify-content: space-between;
  
  margin-bottom: 12px;
  position: relative;
}

.cc-chart-container .chart-header-title h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #374151;
}

[data-theme="dark"] .cc-chart-container .chart-header-title h3,
body.dark-mode .cc-chart-container .chart-header-title h3 {
  color: #f1f5f9;
}

.cc-chart-container .chart-header-controls {
  position: absolute;
  top: 0;
  right: 0;
}

.cc-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cc-chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.cc-chart-controls {
  display: flex;
  gap: 8px;
}

.cc-chart-wrapper {
  height: 300px;
  position: relative;
}

.cc-breakdown-section {
  margin-bottom: 24px;
}

.cc-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
}

.cc-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cc-breakdown-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.cc-breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}

.cc-breakdown-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

.cc-breakdown-toggle {
  color: #6b7280;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.cc-breakdown-body {
  max-height: 300px;
  overflow-y: auto;
}

.cc-breakdown-body.collapsed {
  display: none;
}

.cc-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cc-breakdown-table th,
.cc-breakdown-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
}

.cc-breakdown-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #4b5563;
  position: sticky;
  top: 0;
}

.cc-breakdown-table td.number-col,
.cc-breakdown-table th.number-col {
  text-align: right;
}

.cc-breakdown-table tbody tr:hover {
  background: #f9fafb;
}

.cc-breakdown-table tbody tr:last-child td {
  border-bottom: none;
}

.distribution-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.distribution-bar-bg {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.distribution-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.distribution-pct {
  font-size: 12px;
  color: #6b7280;
  min-width: 40px;
  text-align: right;
}

.filter-select.compact {
  padding: 6px 10px;
  font-size: 12px;
}

.radio-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  accent-color: #3b82f6;
}

#costCodesTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#costCodesTable th,
#costCodesTable td {
  padding: 8px 10px;
  font-size: 13px;
}

#costCodesTable th {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

#costCodesTable td {
  border-bottom: 1px solid #e5e7eb;
}

#costCodesTable tbody tr:hover {
  background-color: #f1f5f9;
}

#costCodesTable .totals-row {
  background: #f1f5f9;
  font-weight: 600;
}

#costCodesTable .totals-row td {
  border-top: 2px solid #cbd5e1;
}

[data-theme="dark"] #costCodesTable td {
  border-bottom-color: #334155;
}

[data-theme="dark"] #costCodesTable tbody tr:hover {
  background-color: #1e293b;
}

.cc-cost-positive {
  color: #10b981;
}

.cc-cost-negative {
  color: #dc2626;
}

.ai-analysis-section {
  margin-top: 24px;
  text-align: center;
}

.ai-analysis-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-analysis-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

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

.ai-icon {
  font-size: 18px;
}

/* Dark mode support */
[data-theme="dark"] .cc-metric-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .cc-metric-label {
  color: #94a3b8;
}

[data-theme="dark"] .cc-metric-value {
  color: #f1f5f9;
}

[data-theme="dark"] .cc-chart-container,
[data-theme="dark"] .cc-breakdown-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .cc-chart-title,
[data-theme="dark"] .cc-section-title {
  color: #f1f5f9;
}

[data-theme="dark"] .cc-breakdown-header {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .cc-breakdown-header h4 {
  color: #e2e8f0;
}

[data-theme="dark"] .cc-breakdown-table th {
  background: #0f172a;
  color: #94a3b8;
}

[data-theme="dark"] .cc-breakdown-table td {
  border-color: #334155;
}

[data-theme="dark"] .cc-breakdown-table tbody tr:hover {
  background: #0f172a;
}

[data-theme="dark"] .distribution-bar-bg {
  background: #334155;
}

[data-theme="dark"] #costCodesTable .totals-row {
  background: #0f172a;
}

[data-theme="dark"] #costCodesTable .totals-row td {
  border-top-color: #475569;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cc-metrics-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .cc-metric-card {
    padding: 14px;
  }
  
  .cc-metric-value {
    font-size: 22px;
  }
  
  .cc-metric-card.highlight .cc-metric-value {
    font-size: 18px;
  }
  
  .cc-charts-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .cc-chart-wrapper {
    height: 250px;
  }
  
  .cc-breakdown-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .cc-chart-header {
    flex-direction: column;
    
    gap: 12px;
  }
  
  .cc-breakdown-table th,
  .cc-breakdown-table td {
    padding: 8px 12px;
    font-size: 12px;
  }
}

.cc-code-badge {
  display: inline-block;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .cc-code-badge {
  background: linear-gradient(135deg, #312e81 0%, #3730a3 100%);
  color: #a5b4fc;
}

/* Cost Codes - Actions Bar */
.cc-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.cc-quick-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-filter-badge {
  padding: 8px 16px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cc-filter-badge:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.cc-filter-badge.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.cc-export-btns {
  display: flex;
  gap: 8px;
}

.cc-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cc-export-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.cc-export-btn span {
  font-size: 14px;
}

/* Cost Codes - Chart Enhancements */
.cc-chart-wrapper.clickable {
  cursor: pointer;
}

.cc-chart-hint {
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 8px;
  font-style: italic;
}

.cc-chart-container.full-width {
  grid-column: 1 / -1;
}

.cc-chart-wrapper.tall {
  height: 350px;
}

.cc-trend-section {
  margin: 20px 0;
}

.cc-trend-section .cc-chart-controls {
  display: flex;
  gap: 12px;
}

/* Cost Codes - Drill-Down Modal */
.cc-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.cc-modal-overlay.hidden {
  display: none;
}

.cc-modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

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

.cc-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s;
}

.cc-modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.cc-modal-summary {
  display: flex;
  gap: 24px;
  padding: 16px 24px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.cc-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-modal-stat-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
}

.cc-modal-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.cc-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

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

.cc-modal-table th,
.cc-modal-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.cc-modal-table th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}

.cc-modal-table td.number-col,
.cc-modal-table th.number-col {
  text-align: right;
}

.cc-modal-table tbody tr:hover {
  background: #f9fafb;
}

.cc-modal-table tbody tr:last-child td {
  border-bottom: none;
}

/* Hierarchical cost code table */
.cc-hierarchical-table {
  width: 100%;
  border-collapse: collapse;
}

.cc-hierarchical-table th,
.cc-hierarchical-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.cc-hierarchical-table th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
}

.cc-expand-cell {
  width: 40px;
  text-align: center;
}

.cc-expand-icon {
  cursor: pointer;
  color: #6b7280;
  font-size: 12px;
  user-select: none;
}

.cc-parent-row.expandable {
  cursor: pointer;
}

.cc-parent-row.expandable:hover {
  background: #f0f9ff;
}

.cc-parent-row.expanded {
  background: #eff6ff;
}

.cc-vendor-row {
  background: #f8fafc;
}

.cc-vendor-row.expandable {
  cursor: pointer;
}

.cc-vendor-row.expandable:hover {
  background: #e0f2fe;
}

.cc-vendor-row.expanded {
  background: #dbeafe;
}

.cc-vendor-badge {
  background: #e0e7ff;
  color: #4338ca;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 500;
}

.cc-invoice-row {
  background: #fefce8;
}

.cc-invoice-row td {
  border-bottom: 1px dashed #e5e7eb;
}

.cc-filter-bar {
  margin-bottom: 16px;
}

.cc-filter-bar .job-search-input {
  max-width: 400px;
}

[data-theme="dark"] .cc-hierarchical-table th {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

[data-theme="dark"] .cc-hierarchical-table td {
  border-color: #334155;
}

[data-theme="dark"] .cc-parent-row.expandable:hover {
  background: #1e3a5f;
}

[data-theme="dark"] .cc-parent-row.expanded {
  background: #1e3a5f;
}

[data-theme="dark"] .cc-vendor-row {
  background: #0f172a;
}

[data-theme="dark"] .cc-vendor-row.expandable:hover {
  background: #1e293b;
}

[data-theme="dark"] .cc-vendor-row.expanded {
  background: #1e293b;
}

[data-theme="dark"] .cc-vendor-badge {
  background: #312e81;
  color: #a5b4fc;
}

[data-theme="dark"] .cc-invoice-row {
  background: #1c1917;
}

[data-theme="dark"] .cc-invoice-row td {
  border-color: #44403c;
  color: #a8a29e;
}

/* Dark mode for new components */
[data-theme="dark"] .cc-filter-badge {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .cc-filter-badge:hover {
  background: #334155;
}

[data-theme="dark"] .cc-filter-badge.active {
  background: #3b82f6;
  border-color: #3b82f6;
}

[data-theme="dark"] .cc-export-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .cc-export-btn:hover {
  background: #334155;
}

[data-theme="dark"] .cc-modal {
  background: #1e293b;
}

[data-theme="dark"] .cc-modal-header {
  border-color: #334155;
}

[data-theme="dark"] .cc-modal-header h3 {
  color: #f1f5f9;
}

[data-theme="dark"] .cc-modal-close {
  color: #94a3b8;
}

[data-theme="dark"] .cc-modal-close:hover {
  background: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .cc-modal-summary {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .cc-modal-stat-label {
  color: #94a3b8;
}

[data-theme="dark"] .cc-modal-stat-value {
  color: #f1f5f9;
}

[data-theme="dark"] .cc-modal-table th {
  background: #0f172a;
  color: #94a3b8;
}

[data-theme="dark"] .cc-modal-table td {
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .cc-modal-table tbody tr:hover {
  background: #0f172a;
}

[data-theme="dark"] .cc-chart-hint {
  color: #6b7280;
}

/* Mobile responsive for new components */
@media (max-width: 768px) {
  .cc-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cc-quick-filters {
    justify-content: center;
  }
  
  .cc-export-btns {
    justify-content: center;
  }
  
  .cc-trend-section .cc-chart-controls {
    flex-direction: column;
    gap: 8px;
  }
  
  .cc-chart-wrapper.tall {
    height: 280px;
  }
  
  .cc-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .cc-modal-summary {
    flex-direction: column;
    gap: 12px;
  }
  
  .cc-modal-stat {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ========================================
   OVER/(UNDER) BILLING STYLES
======================================== */

.oub-positive {
  color: #10b981 !important;
}

.oub-negative {
  color: #ef4444 !important;
}

#oubTable .totals-row {
  border-top: 3px solid #3b82f6;
  border-bottom: 3px solid #3b82f6;
}

#oubTable .totals-row td {
  border-top: none !important;
  border-bottom: none !important;
}

#oubTable .totals-row .oub-positive {
  color: #10b981 !important;
}

#oubTable .totals-row .oub-negative {
  color: #ef4444 !important;
}

/* Dark mode */
[data-theme="dark"] .oub-positive {
  color: #10b981 !important;
}

[data-theme="dark"] .oub-negative {
  color: #ef4444 !important;
}

[data-theme="dark"] #oubTable .totals-row {
  border-top-color: #60a5fa;
  border-bottom-color: #60a5fa;
}

[data-theme="dark"] #oubTable .totals-row .oub-positive {
  color: #10b981 !important;
}

[data-theme="dark"] #oubTable .totals-row .oub-negative {
  color: #ef4444 !important;
}

body.dark-mode .oub-positive {
  color: #10b981 !important;
}

body.dark-mode .oub-negative {
  color: #ef4444 !important;
}

/* Over/(Under) Billing filters */
#overUnderBilling .filter-group {
  display: flex;
  align-items: center;
}

#overUnderBilling .search-input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

[data-theme="dark"] #overUnderBilling .search-input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

body.dark-mode #overUnderBilling .search-input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

#overUnderBilling .oub-metrics .tile {
  min-width: 140px;
}

/* Over/(Under) Billing - Compact Single Row Metrics */
#overUnderBilling .job-metrics-row {
  margin-bottom: 16px;
}

#overUnderBilling .job-metrics-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
}

#overUnderBilling .job-metric-card.compact {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#overUnderBilling .job-metric-card.compact .metric-icon {
  width: 28px;
  height: 28px;
  font-size: 14px;
  flex-shrink: 0;
}

#overUnderBilling .job-metric-card.compact .metric-content {
  min-width: 0;
}

#overUnderBilling .job-metric-card.compact .metric-value {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

#oubTotalOverUnder.metric-value.positive {
  color: #10b981 !important;
}

#oubTotalOverUnder.metric-value.negative {
  color: #ef4444 !important;
}

body.dark-mode #oubTotalOverUnder.metric-value.positive,
[data-theme="dark"] #oubTotalOverUnder.metric-value.positive {
  color: #10b981 !important;
}

body.dark-mode #oubTotalOverUnder.metric-value.negative,
[data-theme="dark"] #oubTotalOverUnder.metric-value.negative {
  color: #ef4444 !important;
}

#overUnderBilling .job-metric-card.compact .metric-label {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  #overUnderBilling .job-metrics-container {
    flex-wrap: wrap;
  }
  
  #overUnderBilling .job-metric-card.compact {
    flex: 1 1 calc(33% - 8px);
    min-width: 100px;
  }
}

@media (max-width: 600px) {
  #overUnderBilling .job-metric-card.compact {
    flex: 1 1 calc(50% - 8px);
  }
}

/* Filter Bar Spacer - pushes column picker to the right */
.filter-spacer {
  flex: 1;
}

/* Payments Chart Section */
.payments-chart-section {
  width: 50%;
  margin: 0 0 24px 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
}

body.dark-mode .payments-chart-section,
[data-theme="dark"] .payments-chart-section {
  background: #1e293b;
  border-color: #334155;
}

.chart-footnote {
  font-size: 10px;
  color: #6b7280;
  margin-top: 8px;
  font-style: italic;
}

body.dark-mode .chart-footnote,
[data-theme="dark"] .chart-footnote {
  color: #9ca3af;
}

.payments-year-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.payments-year-range label {
  font-weight: 500;
  font-size: 12px;
  color: #374151;
}

body.dark-mode .payments-year-range label {
  color: #e2e8f0;
}

.payments-year-range .year-slider {
  width: 80px;
  height: 4px;
  cursor: pointer;
}

.payments-year-range .year-label {
  font-weight: 600;
  font-size: 12px;
  color: #3b82f6;
  min-width: 32px;
  text-align: center;
}

.payments-year-range .range-separator {
  color: #6b7280;
  font-size: 12px;
}

body.dark-mode .payments-year-range .range-separator {
  color: #9ca3af;
}

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

@media (max-width: 768px) {
  .payments-chart-section {
    width: 100%;
  }
  
  .payments-chart-wrapper {
    height: 220px;
  }
  
  .payments-year-range {
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  
  .payments-year-range label {
    font-size: 11px;
  }
  
  .payments-year-range .year-slider {
    width: 70px;
    height: 4px;
  }
  
  .payments-year-range .year-label {
    font-size: 11px;
    min-width: 30px;
  }
  
  .payments-year-range .range-separator {
    font-size: 11px;
  }
  
  .metrics-section-header {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .dashboard-section h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }
  
  .data-as-of {
    font-size: 11px;
    margin-bottom: 10px;
  }
}

/* Over/(Under) Billing Key Metrics */
.oub-key-metrics-section {
  width: 80%;
  margin: 0 0 20px 0;
}

.oub-metrics-row {
  margin-bottom: 0 !important;
}

.oub-metrics-container {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap !important;
}

.oub-metrics-container .job-metric-card {
  flex: 1;
  min-width: 0;
}

/* Over/(Under) Billing Charts */
.oub-charts-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  width: 80%;
}

.oub-chart-container {
  flex: 1;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.oub-chart-container .chart-header {
  display: flex;
  justify-content: space-between;
  
  margin-bottom: 12px;
  position: relative;
}

.oub-chart-container .chart-header-title h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #374151;
}

[data-theme="dark"] .oub-chart-container .chart-header-title h3,
body.dark-mode .oub-chart-container .chart-header-title h3 {
  color: #f1f5f9;
}

.oub-chart-container .chart-header-controls {
  position: absolute;
  top: 0;
  right: 0;
}

body.dark-mode .oub-chart-container {
  background: #1e293b;
  border-color: #334155;
}

.oub-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 12px 0;
  text-align: center;
}

body.dark-mode .oub-chart-title {
  color: #f1f5f9;
}

.oub-chart-wrapper {
  height: 220px;
  position: relative;
}

@media (max-width: 768px) {
  /* Over/Under Billing - 100% width on mobile */
  .oub-key-metrics-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #overUnderBilling .job-metrics-container {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  
  #overUnderBilling .job-metric-card.compact {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .oub-charts-row {
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .oub-chart-container {
    width: 100% !important;
  }
  
  .oub-chart-wrapper {
    height: 180px;
  }
}

/* Over/(Under) Billing Table Polish */
#oubTable {
  border-collapse: collapse;
  width: 100%;
}

#oubTable thead th {
  background: #1e293b;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 10px;
  border-bottom: 2px solid #334155;
  position: sticky;
  top: 0;
  z-index: 10;
}

#oubTable tbody tr {
  border-bottom: 1px solid #e2e8f0;
}

#oubTable tbody tr:hover {
  background-color: #f1f5f9;
}

#oubTable tbody td {
  padding: 10px;
  font-size: 13px;
}

#oubTable .desc-col {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Totals row at top of table body */
#oubTable .oub-totals-row {
  background: #f1f5f9 !important;
  border-top: 3px solid #3b82f6 !important;
  border-bottom: 3px solid #3b82f6 !important;
  font-weight: 600;
}

#oubTable .oub-totals-row td {
  padding: 12px 10px;
}

/* Shaded columns (Est Profit and % Complete) */
#oubTable .shaded-col {
  background-color: #f8fafc;
}

#oubTable tbody tr:hover .shaded-col {
  background-color: #e2e8f0;
}

#oubTable .oub-totals-row .shaded-col {
  background-color: #e2e8f0;
}

/* Hide the tfoot since we now use tbody totals row */
#oubTable tfoot {
  display: none;
}

/* Dark mode for OUB table */
[data-theme="dark"] #oubTable thead th,
body.dark-mode #oubTable thead th {
  background: #0f172a;
  border-bottom-color: #475569;
}

[data-theme="dark"] #oubTable tbody tr,
body.dark-mode #oubTable tbody tr {
  border-bottom-color: #334155;
}

[data-theme="dark"] #oubTable tbody tr:hover,
body.dark-mode #oubTable tbody tr:hover {
  background-color: #1e293b;
}

[data-theme="dark"] #oubTable .oub-totals-row,
body.dark-mode #oubTable .oub-totals-row {
  background: #1e293b !important;
  border-top-color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

[data-theme="dark"] #oubTable .shaded-col,
body.dark-mode #oubTable .shaded-col {
  background-color: #1e293b;
}

[data-theme="dark"] #oubTable tbody tr:hover .shaded-col,
body.dark-mode #oubTable tbody tr:hover .shaded-col {
  background-color: #334155;
}

[data-theme="dark"] #oubTable .oub-totals-row .shaded-col,
body.dark-mode #oubTable .oub-totals-row .shaded-col {
  background-color: #334155;
}

/* ===== Unified Page Filter Bar Styles ===== */
.page-filter-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.page-filter-bar .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-filter-bar .filter-group label {
  font-weight: 500;
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
}

.page-filter-bar .filter-input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  height: 36px;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.page-filter-bar .filter-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.page-filter-bar .filter-input::placeholder {
  color: #9ca3af;
}

/* Dark mode for page filter bars */
[data-theme="dark"] .page-filter-bar,
body.dark-mode .page-filter-bar {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .page-filter-bar .filter-group label,
body.dark-mode .page-filter-bar .filter-group label {
  color: #94a3b8;
}

[data-theme="dark"] .page-filter-bar .filter-input,
body.dark-mode .page-filter-bar .filter-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .page-filter-bar .filter-input:focus,
body.dark-mode .page-filter-bar .filter-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .page-filter-bar .filter-input::placeholder,
body.dark-mode .page-filter-bar .filter-input::placeholder {
  color: #64748b;
}

/* Mobile compact styles for page filter bars - 2 filters per row */
@media (max-width: 768px) {
  .page-filter-bar {
    padding: 8px 10px;
    gap: 6px 8px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .page-filter-bar .filter-group {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    gap: 3px;
    flex-direction: column;
    
  }
  
  .page-filter-bar .filter-group label {
    font-size: 10px;
  }
  
  .page-filter-bar .filter-input {
    padding: 5px 8px;
    font-size: 12px;
    height: 28px;
    width: 100% !important;
    max-width: 100%;
  }
  
  .page-filter-bar select {
    padding: 5px 8px;
    font-size: 12px;
    height: 28px;
    width: 100% !important;
    max-width: 100%;
  }
  
  .page-filter-bar .filter-spacer {
    display: none;
  }
  
  .page-filter-bar .column-picker-container {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
  
  .page-filter-bar .column-picker-btn {
    padding: 5px 10px;
    font-size: 11px;
    height: 28px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-filter-bar {
    padding: 6px 8px;
    gap: 5px 6px;
    margin-bottom: 8px;
  }
  
  .page-filter-bar .filter-group {
    flex: 0 0 calc(50% - 3px);
    max-width: calc(50% - 3px);
    gap: 2px;
  }
  
  .page-filter-bar .filter-group label {
    font-size: 9px;
  }
  
  .page-filter-bar .filter-input {
    padding: 4px 6px;
    font-size: 11px;
    height: 26px;
  }
  
  .page-filter-bar select {
    padding: 4px 6px;
    font-size: 11px;
    height: 26px;
  }
  
  .page-filter-bar .column-picker-container {
    flex: 0 0 calc(50% - 3px);
    max-width: calc(50% - 3px);
  }
  
  .page-filter-bar .column-picker-btn {
    padding: 4px 8px;
    font-size: 10px;
    height: 26px;
  }
}

/* ============================================================
   AP AGING REPORT STYLES
============================================================ */

/* AR Aging Filter Bar */
.ar-aging-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 85%;
  max-width: 900px;
}

.ar-aging-filter-bar .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ar-aging-filter-bar label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ar-aging-filter-bar .filter-select {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-width: 180px;
  cursor: pointer;
}

.ar-aging-filter-bar .filter-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

@media (max-width: 768px) {
  .ar-aging-filter-bar {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  
  .ar-aging-filter-bar .filter-select {
    width: 100%;
    min-width: unset;
  }
}

/* Common width for AP/AR Aging sections to match table */
#apAging .ap-aging-summary,
#apAging .ap-aging-chart-section,
#arAging .ap-aging-summary,
#arAging .ap-aging-chart-section {
  width: 85%;
  max-width: 900px;
}

.ap-aging-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.ap-aging-summary .summary-card {
  flex: 1 1 0;
  min-width: 100px;
  min-height: 70px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 18px;
  text-align: center;
}

.ap-aging-summary .summary-label,
  .ap-aging-summary .summary-label-sub {
  font-size: clamp(7px, 0.7vw, 10px);
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
  white-space: normal;
  line-height: 1.3;
}

.ap-aging-summary .summary-label-sub {
  font-size: clamp(6px, 0.55vw, 8px);
  text-transform: lowercase;
  opacity: 0.8;
  font-weight: 400;
}

.ap-aging-summary .summary-value {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
}

.ap-aging-summary .summary-value.negative {
  color: #dc2626;
}

.ap-aging-summary .summary-value.aging-0-30 {
  color: #22c55e;
}

.ap-aging-summary .summary-value.aging-31-60 {
  color: #eab308;
}

.ap-aging-summary .summary-value.aging-61-90 {
  color: #f97316;
}

.ap-aging-summary .summary-value.aging-retainage {
  color: #3b82f6;
}

/* Responsive font scaling for larger screens */
@media (min-width: 1200px) {
  .ap-aging-summary .summary-label,
  .ap-aging-summary .summary-label-sub {
    font-size: clamp(8px, 0.65vw, 11px);
  }
  .ap-aging-summary .summary-value {
    font-size: 22px;
  }
  .ap-aging-summary .summary-card {
    padding: 16px 20px;
  }
}

@media (min-width: 1600px) {
  .ap-aging-summary .summary-label,
  .ap-aging-summary .summary-label-sub {
    font-size: clamp(9px, 0.6vw, 12px);
  }
  .ap-aging-summary .summary-value {
    font-size: 24px;
  }
}

/* AP Aging Chart */
.ap-aging-chart-section {
  margin-bottom: 16px;
  display: block;
  text-align: left;
  position: relative;
}

.ap-aging-chart-section .chart-header {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  
  justify-content: center;
  padding: 0 16px;
}

.ap-aging-chart-section .chart-header-title {
  text-align: center;
}

.ap-aging-chart-section .chart-header-title h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1e293b;
}

[data-theme="dark"] .ap-aging-chart-section .chart-header-title h3 {
  color: #f1f5f9;
}

.ap-aging-chart-section .chart-header-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

[data-theme="dark"] .ap-aging-chart-section .chart-header-subtitle {
  color: #94a3b8;
}

.ap-aging-chart-section .chart-header-controls {
  position: absolute;
  top: 0;
  right: 16px;
}

.ap-aging-chart-section .page-chart-expand-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-aging-chart-section .page-chart-expand-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

[data-theme="dark"] .ap-aging-chart-section .page-chart-expand-btn {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

[data-theme="dark"] .ap-aging-chart-section .page-chart-expand-btn:hover {
  background: #475569;
  color: #f1f5f9;
}

.ap-aging-chart-wrapper {
  width: 100%;
  height: 280px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 48px 16px 16px 16px;
  box-sizing: border-box;
}

[data-theme="dark"] .ap-aging-chart-wrapper,
body.dark-mode .ap-aging-chart-wrapper {
  background: #1e293b;
  border-color: #334155;
}

@media (max-width: 768px) {
  #apAging .ap-aging-summary,
  #apAging .ap-aging-chart-section,
  #arAging .ap-aging-summary,
  #arAging .ap-aging-chart-section {
    width: 100%;
    max-width: 100%;
  }
  .ap-aging-chart-wrapper {
    height: 220px;
  }
  .ap-aging-summary .summary-card {
    flex: 1 1 calc(33% - 8px);
    min-width: 80px;
    padding: 8px 10px;
  }
  .ap-aging-summary .summary-value {
    font-size: 14px;
  }
  .ap-aging-summary .summary-label,
  .ap-aging-summary .summary-label-sub {
    font-size: 9px;
  }
}

/* Mobile: Horizontal scroll wrapper for aging tables */
@media (max-width: 768px) {
    #apAging .table-wrapper,
    #arAging .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
  }
  
  .ap-aging-table,
  .ar-aging-table {
    min-width: 700px;
  }
  
  /* Improved touch targets for vendor/customer links */
  .vendor-link,
  .customer-link {
    display: inline-block;
    padding: 8px 4px;
    margin: -8px -4px;
    min-height: 44px;
    line-height: 28px;
  }
  
  /* Larger filter dropdowns for touch */
  .ar-aging-filter-bar .filter-select,
  .ap-aging-filter-bar .filter-select {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 12px;
  }
  
  /* Larger filter labels */
  .ar-aging-filter-bar label,
  .ap-aging-filter-bar label {
    font-size: 13px;
    margin-bottom: 6px;
  }
}

/* Clickable vendor name in AP Aging table */
.vendor-link {
  color: #3b82f6;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.vendor-link:hover {
  text-decoration: underline;
  color: #2563eb;
}

/* Vendor Invoice Modal */
.modal-dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 450px;
  overflow: hidden;
}

[data-theme="dark"] .modal-dialog,
body.dark-mode .modal-dialog {
  background: #1e293b;
}

.modal-dialog.modal-xl {
  max-width: 1100px;
}

.vendor-invoice-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

[data-theme="dark"] .vendor-invoice-summary,
body.dark-mode .vendor-invoice-summary {
  background: #1e293b;
}

.vendor-invoice-summary .summary-item {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.vendor-invoice-summary .summary-item .label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 500;
}

.vendor-invoice-summary .summary-item .value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

[data-theme="dark"] .vendor-invoice-summary .summary-item .value,
body.dark-mode .vendor-invoice-summary .summary-item .value {
  color: #f1f5f9;
}

.vendor-invoices-table {
  font-size: 12px;
}

.vendor-invoices-table th,
.vendor-invoices-table td {
  padding: 8px 10px;
}

.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 12px;
  color: #64748b;
}

/* Vendor Invoice Modal Mobile */
@media (max-width: 768px) {
  .modal-xl {
    max-width: 100%;
    margin: 8px;
    max-height: calc(100vh - 16px);
  }
  
  .modal-xl .modal-body {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  
  .vendor-invoice-summary {
    gap: 8px;
    padding: 8px;
  }
  
  .vendor-invoice-summary .summary-item {
    min-width: 80px;
  }
  
  .vendor-invoice-summary .summary-item .value {
    font-size: 12px;
  }
  
  .vendor-invoices-table {
    font-size: 10px;
    min-width: 800px;
  }
  
  .vendor-invoices-table th,
  .vendor-invoices-table td {
    padding: 6px 4px;
  }
}

/* Dark mode for vendor invoice modal table */
[data-theme="dark"] .vendor-invoices-table,
body.dark-mode .vendor-invoices-table {
  background: #1e293b;
  color: #e2e8f0;
}

[data-theme="dark"] .vendor-invoices-table th,
body.dark-mode .vendor-invoices-table th {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

[data-theme="dark"] .vendor-invoices-table td,
body.dark-mode .vendor-invoices-table td {
  border-color: #334155;
}

[data-theme="dark"] .vendor-invoices-table tr:nth-child(even),
body.dark-mode .vendor-invoices-table tr:nth-child(even) {
  background: #1e293b;
}

[data-theme="dark"] .vendor-invoices-table tr:hover,
body.dark-mode .vendor-invoices-table tr:hover {
  background: #334155;
}

[data-theme="dark"] .modal-loading,
body.dark-mode .modal-loading {
  color: #94a3b8;
}

/* AP Aging totals row */
.ap-aging-table .totals-row {
  background: #f8fafc;
  font-weight: 600;
}

.ap-aging-table .totals-row td {
  border-top: 2px solid #374151;
  border-bottom: 2px solid #374151;
}

/* Dark mode for AP Aging */
[data-theme="dark"] .ap-aging-summary .summary-card,
body.dark-mode .ap-aging-summary .summary-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .ap-aging-summary .summary-label,
[data-theme="dark"] .ap-aging-summary .summary-label-sub,
body.dark-mode .ap-aging-summary .summary-label,
body.dark-mode .ap-aging-summary .summary-label-sub {
  color: #94a3b8;
}

[data-theme="dark"] .ap-aging-summary .summary-value,
body.dark-mode .ap-aging-summary .summary-value {
  color: #e2e8f0;
}

[data-theme="dark"] .ap-aging-summary .summary-value.aging-0-30,
body.dark-mode .ap-aging-summary .summary-value.aging-0-30 {
  color: #22c55e;
}

[data-theme="dark"] .ap-aging-summary .summary-value.aging-31-60,
body.dark-mode .ap-aging-summary .summary-value.aging-31-60 {
  color: #eab308;
}

[data-theme="dark"] .ap-aging-summary .summary-value.aging-61-90,
body.dark-mode .ap-aging-summary .summary-value.aging-61-90 {
  color: #f97316;
}

[data-theme="dark"] .ap-aging-summary .summary-value.aging-retainage,
body.dark-mode .ap-aging-summary .summary-value.aging-retainage {
  color: #3b82f6;
}

[data-theme="dark"] .ap-aging-summary .summary-value.negative,
body.dark-mode .ap-aging-summary .summary-value.negative {
  color: #dc2626;
}

[data-theme="dark"] .ap-aging-table .totals-row,
body.dark-mode .ap-aging-table .totals-row {
  background: #1e293b;
}

[data-theme="dark"] .ap-aging-table .totals-row td,
body.dark-mode .ap-aging-table .totals-row td {
  border-top-color: #94a3b8;
  border-bottom-color: #94a3b8;
}


/* AP & AR Aging Table Header Compact Styling */
.ap-aging-table th,
.ar-aging-table th {
  padding: 6px 10px;
  font-size: 10px;
  color: #374151;
}

.ap-aging-table th .sort-btn,
.ar-aging-table th .sort-btn {
  font-size: 8px;
  padding: 1px;
}

.ap-aging-table th .inline-sort,
.ar-aging-table th .inline-sort {
  gap: 0;
}

/* Dark mode - white text for AP/AR aging headers */
[data-theme="dark"] .ap-aging-table th,
body.dark-mode .ap-aging-table th,
[data-theme="dark"] .ar-aging-table th,
body.dark-mode .ar-aging-table th {
  color: #e2e8f0;
  background: #1e293b;
}

[data-theme="dark"] .ap-aging-table th:hover,
body.dark-mode .ap-aging-table th:hover,
[data-theme="dark"] .ar-aging-table th:hover,
body.dark-mode .ar-aging-table th:hover {
  background: #334155;
}

/* Mobile - even more compact table headers with sort arrows */
@media (max-width: 768px) {
  .ap-aging-table th,
  .ar-aging-table th,
  .job-budgets-table th,
  .job-actuals-table th,
  .pmr-over-under-table th,
  .pmr-client-summary-table th,
  .pmr-missing-budgets-table th,
  #paymentsTable th,
  #costCodesTable th {
    padding: 3px 4px !important;
    font-size: 9px;
    line-height: 1.1 !important;
  }
  
  .ap-aging-table th .sort-btn,
  .ar-aging-table th .sort-btn,
  .job-budgets-table th .sort-btn,
  .job-actuals-table th .sort-btn,
  .pmr-over-under-table th .sort-btn,
  .pmr-client-summary-table th .sort-btn,
  .pmr-missing-budgets-table th .sort-btn,
  #paymentsTable th .sort-btn,
  #costCodesTable th .sort-btn {
    font-size: 5px !important;
    line-height: 0.8 !important;
  }
  
  .inline-sort,
  .sort-controls.inline-sort {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 1px !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
  }
  
  .inline-sort .sort-btn,
  .sort-controls.inline-sort .sort-btn {
    font-size: 5px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

/* =====================================================
   AP/AR AGING EXPANDABLE ROWS
===================================================== */

.ap-vendor-row,
.ar-customer-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ap-vendor-row:hover,
.ar-customer-row:hover {
  background-color: rgba(59, 130, 246, 0.08);
}

.ap-vendor-row.ap-expanded,
.ar-customer-row.ar-expanded {
  background-color: rgba(59, 130, 246, 0.12);
  font-weight: 600;
}

.ap-expand-toggle,
.ar-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

.ap-expand-icon,
.ar-expand-icon {
  transition: transform 0.2s ease;
  color: #6b7280;
}

.ap-vendor-row.ap-expanded .ap-expand-icon,
.ar-customer-row.ar-expanded .ar-expand-icon {
  transform: rotate(90deg);
  color: #3b82f6;
}

.ap-invoice-container,
.ar-invoice-container {
  background-color: #f8fafc;
}

[data-theme="dark"] .ap-invoice-container,
body.dark-mode .ap-invoice-container,
[data-theme="dark"] .ar-invoice-container,
body.dark-mode .ar-invoice-container {
  background-color: #0f172a;
}

.ap-invoice-cell,
.ar-invoice-cell {
  padding: 8px 12px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ar-job-table,
.ar-invoice-detail-table {
  width: auto !important;
  min-width: auto;
}

.ar-job-table th,
.ar-job-table td,
.ar-invoice-detail-table th,
.ar-invoice-detail-table td {
  white-space: nowrap;
}

.ap-invoice-loading,
.ap-invoice-empty,
.ap-invoice-error,
.ar-invoice-loading,
.ar-invoice-empty,
.ar-invoice-error {
  padding: 12px;
  text-align: center;
  color: #6b7280;
  font-style: italic;
}

.ap-invoice-error,
.ar-invoice-error {
  color: #ef4444;
}

/* Expanded invoice table */
.ap-invoice-table,
.ar-invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.ap-invoice-table th,
.ar-invoice-table th {
  background: #e5e7eb;
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  color: #374151;
  border-bottom: 1px solid #d1d5db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-invoice-table th.text-right,
.ar-invoice-table th.text-right {
  text-align: right;
}

[data-theme="dark"] .ap-invoice-table th,
body.dark-mode .ap-invoice-table th,
[data-theme="dark"] .ar-invoice-table th,
body.dark-mode .ar-invoice-table th {
  background: #1e293b;
  color: #e2e8f0;
  border-bottom-color: #334155;
}

.ap-invoice-row td,
.ar-invoice-row td {
  padding: 4px 6px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .ap-invoice-row td,
body.dark-mode .ap-invoice-row td,
[data-theme="dark"] .ar-invoice-row td,
body.dark-mode .ar-invoice-row td {
  border-bottom-color: #334155;
}

.ap-invoice-row:hover,
.ar-invoice-row:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

/* Job rows for two-level AR aging drill-down */
.ar-job-row {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
  touch-action: manipulation;
}
.ar-job-row:hover {
  background-color: rgba(59, 130, 246, 0.08);
}
.ar-job-row.ar-job-expanded {
  background-color: rgba(59, 130, 246, 0.1);
}
.ar-expand-icon {
  width: 30px;
  text-align: center;
}
.ar-expand-icon .expand-arrow {
  font-size: 10px;
  color: #64748b;
  transition: transform 0.2s;
}
.ar-job-expanded .expand-arrow {
  color: #3b82f6;
}
.ar-job-invoices-row {
  background-color: rgba(59, 130, 246, 0.03);
}
.ar-job-invoices-cell {
  padding: 10px !important;
}
.ar-invoice-detail-table {
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="dark"] .ar-invoice-detail-table,
body.dark-mode .ar-invoice-detail-table {
  background: #1e293b;
}
[data-theme="dark"] .ar-job-invoices-row,
body.dark-mode .ar-job-invoices-row {
  background-color: rgba(59, 130, 246, 0.08);
}
.ar-job-num { width: 8%; }
.ar-job-desc { width: 25%; }
.ar-job-pm { width: 12%; }

/* Column widths for invoice tables */
.ap-inv-num,
.ar-inv-num { width: 7%; }
.ap-inv-job,
.ar-inv-job { width: 6%; }
.ap-inv-desc,
.ar-inv-desc { width: 20%; }
.ap-inv-pm,
.ar-inv-pm { width: 10%; }
.ap-inv-date,
.ar-inv-date { width: 8%; }

/* Ensure text doesn't overflow */
.ap-invoice-table td,
.ar-invoice-table td {
  max-width: 0;
}

.ap-invoice-table td.text-right,
.ar-invoice-table td.text-right {
  text-align: right;
  width: 8%;
}

/* Mobile adjustments for expanded rows */
@media (max-width: 768px) {
  .ap-invoice-table,
  .ar-invoice-table {
    font-size: 9px;
  }
  
  .ap-invoice-table th,
  .ar-invoice-table th {
    font-size: 8px;
    padding: 3px 4px;
  }
  
  .ap-invoice-row td,
  .ar-invoice-row td {
    padding: 3px 4px;
  }
  
  .ap-inv-desc,
  .ar-inv-desc { width: 18%; }
  .ap-inv-pm,
  .ar-inv-pm { width: 10%; }
  
  /* Mobile styles for job-level drill-down */
  .ar-job-table {
    font-size: 9px;
  }
  .ar-job-row td {
    padding: 3px 4px;
  }
  .ar-expand-icon {
    width: 20px;
    padding: 2px !important;
  }
  .ar-expand-icon .expand-arrow {
    font-size: 8px;
  }
  .ar-job-desc { 
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ar-job-pm { 
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ar-job-invoices-cell {
    padding: 5px !important;
  }
  .ar-invoice-detail-table {
    margin-left: 10px !important;
    width: calc(100% - 10px) !important;
    font-size: 8px;
  }
  .ar-invoice-detail-table th,
  .ar-invoice-detail-table td {
    padding: 2px 3px;
  }
  
  /* Hide less important columns on mobile */
  .ar-job-table th:nth-child(5),
  .ar-job-table td:nth-child(5),
  .ar-job-table th:nth-child(8),
  .ar-job-table td:nth-child(8),
  .ar-job-table th:nth-child(9),
  .ar-job-table td:nth-child(9) {
    display: none;
  }
  .ar-invoice-detail-table th:nth-child(5),
  .ar-invoice-detail-table td:nth-child(5),
  .ar-invoice-detail-table th:nth-child(6),
  .ar-invoice-detail-table td:nth-child(6) {
    display: none;
  }
}

/* =====================================================
   GENERIC PM TABS & FILTER BAR (Used across Job pages)
===================================================== */

/* PM Tabs Container */
.pm-tabs-bar {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.pm-tabs-bar-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: block;
}

.pm-tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-tabs-loading {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  padding: 6px 0;
}

.pm-tab-btn {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pm-tab-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.pm-tab-btn.active {
  background: #fff;
  border-color: #fff;
  color: #1e3a5f;
  font-weight: 600;
}

/* All PM tab - slightly different styling */
.pm-tab-btn.all-pm {
  font-style: italic;
}

/* OUB Date Filter Row - Below PM tabs */
.oub-date-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
}

.oub-date-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.oub-date-input {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1e3a5f;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oub-date-input:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.oub-date-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
}

/* Status Filter Row - Match PM tabs bar styling */
.status-filter-bar {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.status-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.status-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
}

.status-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #60a5fa;
  cursor: pointer;
}

/* Options group (for data labels checkbox etc) */
.options-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Dark mode adjustments */
[data-theme="dark"] .pm-tabs-bar,
body.dark-mode .pm-tabs-bar,
[data-theme="dark"] .status-filter-bar,
body.dark-mode .status-filter-bar {
  background: linear-gradient(135deg, #1a2e4a 0%, #234566 100%);
}

[data-theme="dark"] .pm-tab-btn,
body.dark-mode .pm-tab-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pm-tab-btn:hover,
body.dark-mode .pm-tab-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .pm-tab-btn.active,
body.dark-mode .pm-tab-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .pm-tabs-bar {
    padding: 12px 14px;
  }
  
  .pm-tab-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .status-filter-bar {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .status-filter-group {
    gap: 8px;
  }
  
  .status-checkboxes {
    gap: 8px;
  }
  
  .status-checkbox-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .pm-tabs-container {
    gap: 6px;
  }
  
  .pm-tab-btn {
    padding: 5px 8px;
    font-size: 11px;
  }
  
  .status-filter-bar {
    flex-direction: column;
    
  }
  
  .options-filter-group {
    margin-left: 0;
  }
}

/* =====================================================
   JOB MODULE PAGE FILTER BARS - Consistent Widths
===================================================== */

/* Job Overview - 70% width rules consolidated at end of file */

/* Job Budgets - match content width */
#jobBudgets > .pm-tabs-bar,
#jobBudgets > .status-filter-bar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Job Actuals - match content width */
#jobActuals > .pm-tabs-bar,
#jobActuals > .status-filter-bar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Cost Codes - match content width */
#costCodes > .pm-tabs-bar,
#costCodes > .status-filter-bar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* =====================================================
   PM REPORT STYLES
===================================================== */

/* Desktop: 50% width for key sections, aligned left */
#pmReport > .pm-tabs-bar,
#pmReport > .status-filter-bar,
#pmReport > #pmrAiAnalysisPanel {
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* PM Report Desktop Layout - Two Column */
.pmr-desktop-layout {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

.pmr-left-column {
  flex: 1;
  min-width: 0;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

/* Make radar section and metrics fill the left column height */
.pmr-left-column .pm-radar-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  margin-top: 0;
}

.pmr-left-column .pm-radar-section .radar-description {
  margin-bottom: 8px;
  font-size: 12px;
}

.pmr-left-column .pm-radar-section .radar-chart-container {
  flex: 1;
  height: auto;
  max-width: none;
  margin: 0;
}

/* Desktop only: larger radar chart */
@media (min-width: 1025px) {
  .pmr-left-column .pm-radar-section .radar-chart-container {
    min-height: 450px;
  }
}

.pmr-left-column .pm-radar-section .radar-legend-box {
  margin-top: 8px;
}

.pmr-left-column .pmr-metrics-wrapper {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  margin-bottom: 0;
}

/* Desktop: Bigger metric tiles with larger text */
@media (min-width: 1025px) {
  .pmr-left-column .pmr-metric-tile {
    padding: 12px 10px;
  }
  
  .pmr-left-column .pmr-metric-label {
    font-size: 10px;
    margin-bottom: 4px;
  }
  
  .pmr-left-column .pmr-metric-value {
    font-size: 18px;
  }
  
  .pmr-left-column .pmr-metric-subtext {
    font-size: 11px;
    margin-top: 3px;
  }
  
  .pmr-left-column .pmr-metric-trend {
    font-size: 11px;
    margin-top: 3px;
  }
  
  .pmr-left-column .pmr-metrics-row {
    gap: 10px;
    margin-bottom: 10px;
  }
}

.pmr-right-column {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pmr-right-column .pmr-chart-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pmr-right-column .pmr-chart-title {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--text-primary);
}

.pmr-right-column canvas {
  width: 100% !important;
  flex: 1;
  height: 110px;
}

/* Mobile: Stack columns vertically */
@media (max-width: 1024px) {
  .pmr-desktop-layout {
    flex-direction: column;
  }
  
  .pmr-left-column {
    max-width: 100%;
  }
  
  .pmr-right-column {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .pmr-right-column .pmr-chart-container {
    flex: 1 1 calc(50% - 6px);
    min-width: 200px;
  }
}

/* Make metric tiles equal width within their container */
#pmReport .pmr-metrics-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

#pmReport .pmr-metric-tile {
  flex: 1 1 0;
  min-width: 0;
}

/* PM Report 4-column grid layout for Key Metrics */
.pmr-metrics-4col {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Partial row (2 tiles) - keep them sized like 4-col but left-aligned */
.pmr-metrics-4col.pmr-metrics-partial {
  grid-template-columns: repeat(4, 1fr);
}

.pmr-metrics-4col.pmr-metrics-partial .pmr-metric-tile {
  grid-column: span 1;
}

@media (max-width: 900px) {
  .pmr-metrics-4col {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  
  .pmr-metrics-4col.pmr-metrics-partial {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* PM Report - 3 tiles per row on mobile (3-3-3-1 layout for 10 tiles) */
  #pmReport .pmr-metrics-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Collapse row divs so tiles flow in wrapper grid */
  #pmReport .pmr-metrics-wrapper .pmr-metrics-4col {
    display: contents !important;
  }
  
  /* Keep the section title spanning full width */
  #pmReport .pmr-metrics-wrapper > .pmr-section-title {
    grid-column: 1 / -1 !important;
  }
  
  .pmr-metric-tile {
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    padding: 8px 6px !important;
    text-align: center !important;
  }
  
  .pmr-metric-label {
    font-size: 8px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .pmr-metric-value {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .pmr-metric-subtext {
    font-size: 7px !important;
  }
}

@media (max-width: 480px) {
  .pmr-metrics-4col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .pmr-metrics-4col.pmr-metrics-partial {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .pmr-metric-tile {
    padding: 6px 4px !important;
  }
  
  .pmr-metric-label {
    font-size: 7px !important;
  }
  
  .pmr-metric-value {
    font-size: 11px !important;
  }
}

.pmr-filter-bar {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.pmr-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pmr-filter-row label {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.pmr-pm-select,
.pmr-status-select {
  flex: 1;
  max-width: 350px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

.pmr-status-select {
  max-width: 180px;
}

.pmr-pm-select:focus,
.pmr-status-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* PM Report Metrics Wrapper with title */
.pmr-metrics-wrapper {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.pmr-metrics-wrapper > .pmr-section-title {
  margin-top: 0;
  margin-bottom: 12px;
}

/* PM Report Metrics Row - Compact tiles */
.pmr-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.pmr-metrics-row:last-child {
  margin-bottom: 0;
}

.pmr-metric-tile {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.pmr-metric-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.pmr-metric-label {
  font-size: 9px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmr-metric-value {
  font-size: clamp(10px, 2vw, 14px);
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pmr-metric-value.fit-text {
  font-size: clamp(11px, 2.5vw, 15px);
}

.pmr-metric-value.positive {
  color: #10b981;
}

.pmr-metric-value.negative {
  color: #dc2626;
}

.pmr-metric-subtext {
  font-size: clamp(8px, 1.5vw, 10px);
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmr-metric-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: clamp(8px, 1.5vw, 10px);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmr-metric-trend.up { color: #10b981; }
.pmr-metric-trend.down { color: #dc2626; }
.pmr-metric-trend.neutral { color: #6b7280; }
.pmr-metric-trend.compare { color: #3b82f6; font-weight: 500; }
.pmr-metric-trend.compare.better { color: #10b981; }
.pmr-metric-trend.compare.worse { color: #dc2626; }

[data-theme="dark"] .pmr-metric-trend.up,
body.dark-mode .pmr-metric-trend.up { color: #34d399; }
[data-theme="dark"] .pmr-metric-trend.down,
body.dark-mode .pmr-metric-trend.down { color: #f87171; }
[data-theme="dark"] .pmr-metric-trend.neutral,
body.dark-mode .pmr-metric-trend.neutral { color: #9ca3af; }
[data-theme="dark"] .pmr-metric-trend.compare,
body.dark-mode .pmr-metric-trend.compare { color: #60a5fa; }
[data-theme="dark"] .pmr-metric-trend.compare.better,
body.dark-mode .pmr-metric-trend.compare.better { color: #34d399; }
[data-theme="dark"] .pmr-metric-trend.compare.worse,
body.dark-mode .pmr-metric-trend.compare.worse { color: #f87171; }

/* PM Comparison Bar */
.pmr-comparison-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  padding: 0 4px;
}

.pmr-comparison-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.pmr-comparison-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.pmr-comparison-label {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
}

[data-theme="dark"] .pmr-comparison-label,
body.dark-mode .pmr-comparison-label {
  color: #9ca3af;
}

.pmr-progress-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.pmr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* PM Report Charts Row */
.pmr-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 16px;
  margin-bottom: 24px;
}

.pmr-charts-row-3 {
  grid-template-columns: 1fr 1fr 1.5fr;
}

.pmr-chart-container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  min-height: 200px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.pmr-chart-container canvas {
  max-height: 180px !important;
  height: 180px !important;
  flex-shrink: 0;
}

.pmr-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pmr-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 11px;
}

.pmr-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

@media (max-width: 900px) {
  .pmr-charts-row {
    grid-template-columns: 1fr;
  }
  .pmr-chart-container {
    max-height: 260px;
  }
  .pmr-chart-container canvas {
    max-height: 160px !important;
    height: 160px !important;
  }
}

@media (max-width: 600px) {
  .pmr-metric-tile {
    padding: 6px 10px;
    min-width: 80px;
  }
}

/* Dark mode for new PM Report elements */
[data-theme="dark"] .pmr-chart-container,
body.dark-mode .pmr-chart-container {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .pmr-chart-title,
body.dark-mode .pmr-chart-title {
  color: #e2e8f0;
}

[data-theme="dark"] .pmr-metric-subtext,
body.dark-mode .pmr-metric-subtext {
  color: #94a3b8;
}

[data-theme="dark"] .pmr-progress-bar,
body.dark-mode .pmr-progress-bar {
  background: #334155;
}

[data-theme="dark"] .pmr-legend-item,
body.dark-mode .pmr-legend-item {
  color: #cbd5e1;
}

/* Two-chart row layout */
.pmr-charts-row-2 {
  grid-template-columns: 1fr 1.5fr;
}

@media (max-width: 900px) {
  .pmr-charts-row-2 {
    grid-template-columns: 1fr;
  }
}

/* PM Report Sections */
.pmr-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.pmr-section-header {
  display: flex;
  justify-content: space-between;
  
  margin-bottom: 16px;
}

.pmr-section-header .pmr-section-desc {
  margin-bottom: 0;
}

.pmr-toggle-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pmr-toggle-btn:hover {
  background: #e5e7eb;
}

.pmr-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0 0 4px 0;
}

.pmr-section-desc {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px;
}

/* Subtotal row styling */
.pmr-subtotal-row {
  background: #f0f9ff !important;
  font-weight: 600;
}

.pmr-subtotal-row td {
  border-top: 2px solid #3b82f6 !important;
  border-bottom: 2px solid #3b82f6 !important;
}

/* Collapsible detail rows */
.pmr-detail-row {
  transition: opacity 0.2s ease;
}

.pmr-detail-row.collapsed {
  display: none;
}

.pmr-table-container {
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px;
}

.pmr-over-under-table,
.pmr-missing-budgets-table,
.pmr-client-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pmr-over-under-table th,
.pmr-missing-budgets-table th,
.pmr-client-summary-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

.pmr-over-under-table td,
.pmr-missing-budgets-table td,
.pmr-client-summary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

.pmr-over-under-table tbody tr:hover,
.pmr-missing-budgets-table tbody tr:hover,
.pmr-client-summary-table tbody tr:hover {
  background: #f9fafb;
}

.pmr-table-footer {
  margin-top: 12px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

/* Over/Under coloring */
.pmr-over-under-table .over-billed {
  color: #10b981;
  font-weight: 600;
}

.pmr-over-under-table .under-billed {
  color: #dc2626;
  font-weight: 600;
}

/* Missing budgets issue badge */
.pmr-issue-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.pmr-issue-badge.no-revenue {
  background: #fef3c7;
  color: #92400e;
}

.pmr-issue-badge.no-cost {
  background: #fee2e2;
  color: #991b1b;
}

.pmr-issue-badge.no-both {
  background: #fce7f3;
  color: #9d174d;
}

/* Empty state */
.pmr-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.pmr-empty-state-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.pmr-empty-state-text {
  font-size: 14px;
}

/* Detail rows visible by default for pagination */
.pmr-over-under-table tr.jo-detail-row,
.pmr-missing-budgets-table tr.jo-detail-row,
.pmr-client-summary-table tr.jo-detail-row {
  display: table-row;
}

/* Subtotal row styling */
.pmr-subtotal-row td {
  font-weight: 600;
  background: #f3f4f6;
  border-top: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
}

.pmr-subtotal-row td:first-child {
  font-weight: 700;
}

[data-theme="dark"] .pmr-subtotal-row td,
body.dark-mode .pmr-subtotal-row td {
  background: #334155;
  border-color: #64748b;
}

/* Dark Mode */
[data-theme="dark"] .pmr-filter-bar,
body.dark-mode .pmr-filter-bar {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}

[data-theme="dark"] .pmr-pm-select,
body.dark-mode .pmr-pm-select,
[data-theme="dark"] .pmr-status-select,
body.dark-mode .pmr-status-select {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}

[data-theme="dark"] .pmr-metrics-wrapper,
body.dark-mode .pmr-metrics-wrapper,
[data-theme="dark"] .pmr-metric-tile,
body.dark-mode .pmr-metric-tile,
[data-theme="dark"] .pmr-section,
body.dark-mode .pmr-section {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .pmr-metric-label,
body.dark-mode .pmr-metric-label {
  color: #94a3b8;
}

[data-theme="dark"] .pmr-metric-value,
body.dark-mode .pmr-metric-value {
  color: #f1f5f9;
}

[data-theme="dark"] .pmr-section-title,
body.dark-mode .pmr-section-title {
  color: #93c5fd;
}

[data-theme="dark"] .pmr-section-desc,
body.dark-mode .pmr-section-desc {
  color: #94a3b8;
}

[data-theme="dark"] .pmr-over-under-table th,
body.dark-mode .pmr-over-under-table th,
[data-theme="dark"] .pmr-missing-budgets-table th,
body.dark-mode .pmr-missing-budgets-table th,
[data-theme="dark"] .pmr-client-summary-table th,
body.dark-mode .pmr-client-summary-table th {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

[data-theme="dark"] .pmr-over-under-table td,
body.dark-mode .pmr-over-under-table td,
[data-theme="dark"] .pmr-missing-budgets-table td,
body.dark-mode .pmr-missing-budgets-table td,
[data-theme="dark"] .pmr-client-summary-table td,
body.dark-mode .pmr-client-summary-table td {
  color: #e2e8f0;
  border-color: #334155;
}

[data-theme="dark"] .pmr-over-under-table tbody tr:hover,
body.dark-mode .pmr-over-under-table tbody tr:hover,
[data-theme="dark"] .pmr-missing-budgets-table tbody tr:hover,
body.dark-mode .pmr-missing-budgets-table tbody tr:hover,
[data-theme="dark"] .pmr-client-summary-table tbody tr:hover,
body.dark-mode .pmr-client-summary-table tbody tr:hover {
  background: #334155;
}

[data-theme="dark"] .pmr-table-footer,
body.dark-mode .pmr-table-footer {
  color: #94a3b8;
}

[data-theme="dark"] .pmr-subtotal-row,
body.dark-mode .pmr-subtotal-row {
  background: #1e3a5f !important;
}

[data-theme="dark"] .pmr-subtotal-row td,
body.dark-mode .pmr-subtotal-row td {
  color: #f1f5f9 !important;
  border-color: #3b82f6 !important;
}

/* Mobile Responsive - Compact Heights */
@media (max-width: 768px) {
  #pmReport > .pmr-filter-bar,
  #pmReport > #pmrAiAnalysisPanel,
  #pmReport > .pm-radar-section,
  #pmReport > .pmr-comparison-bar,
  #pmReport > .pmr-metrics-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .pmr-filter-bar {
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  
  .pmr-filter-row {
    flex-direction: column;
    
    gap: 6px;
  }
  
  .pmr-filter-row label {
    font-size: 12px;
    margin-bottom: 0;
  }
  
  .pmr-pm-select,
  .pmr-status-select {
    width: 100%;
    max-width: none;
    padding: 6px 10px;
    font-size: 13px;
  }
  
  .pmr-metrics-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 8px;
  }
  
  .pmr-metrics-row {
    display: contents;
  }
  
  .pmr-metric-tile {
    padding: 3px 4px;
    min-width: calc(25% - 3px);
    max-width: calc(25% - 3px);
    flex: 0 0 calc(25% - 3px);
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .pmr-metric-label {
    font-size: 7px;
    margin-bottom: 0;
    line-height: 1.1;
  }
  
  .pmr-metric-value {
    font-size: 11px;
    line-height: 1.1;
  }
  
  .pmr-metric-subtext {
    font-size: 7px;
    margin-top: 1px;
  }
  
  .pmr-progress-bar {
    height: 3px;
    margin-top: 2px;
  }
  
  .pmr-charts-row,
  .pmr-charts-row-2,
  .pmr-charts-row-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  
  .pmr-charts-row-3 {
    grid-template-columns: 1fr;
  }
  
  .pmr-charts-row-3 .pmr-billing-chart {
    grid-column: span 1;
  }
  
  .pmr-metric-trend {
    font-size: 9px;
    margin-top: 2px;
  }
  
  .pmr-comparison-bar {
    margin-bottom: 8px;
  }
  
  .pmr-comparison-label {
    font-size: 11px;
  }
  
  .pmr-chart-container {
    padding: 10px;
    min-height: 140px;
    max-height: 180px;
  }
  
  .pmr-chart-container canvas {
    max-height: 110px !important;
    height: 110px !important;
  }
  
  .pmr-chart-title {
    font-size: 11px;
    margin-bottom: 6px;
  }
  
  .pmr-chart-legend {
    gap: 8px;
    margin-top: 6px;
    font-size: 9px;
  }
  
  .pmr-section {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 6px;
  }
  
  .pmr-section-header {
    margin-bottom: 8px;
  }
  
  .pmr-section-title {
    font-size: 14px;
    margin-bottom: 2px;
  }
  
  .pmr-section-desc {
    font-size: 11px;
    margin-bottom: 8px;
  }
  
  .pmr-toggle-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  
  .pmr-table-container {
    margin: 0 -12px;
    padding: 0 12px;
  }
  
  .pmr-over-under-table,
  .pmr-missing-budgets-table,
  .pmr-client-summary-table {
    font-size: 11px;
  }
  
  .pmr-over-under-table th,
  .pmr-missing-budgets-table th,
  .pmr-client-summary-table th {
    padding: 6px 4px;
    font-size: 10px;
  }
  
  .pmr-over-under-table td,
  .pmr-missing-budgets-table td,
  .pmr-client-summary-table td {
    padding: 5px 4px;
  }
  
  .pmr-table-footer {
    padding: 6px 0;
    font-size: 11px;
  }
  
  .pmr-empty-state {
    padding: 16px;
  }
  
  .pmr-empty-state-icon {
    font-size: 28px;
  }
  
  .pmr-empty-state-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .pmr-filter-bar {
    padding: 6px 10px;
    margin-bottom: 6px;
  }
  
  .pmr-filter-row {
    gap: 4px;
  }
  
  .pmr-pm-select,
  .pmr-status-select {
    padding: 5px 8px;
    font-size: 12px;
  }
  
  .pmr-metrics-wrapper {
    gap: 2px;
    margin-bottom: 6px;
  }
  
  .pmr-metric-tile {
    min-width: calc(25% - 2px);
    max-width: calc(25% - 2px);
    flex: 0 0 calc(25% - 2px);
    padding: 2px 3px;
  }
  
  .pmr-metric-label {
    font-size: 6px;
  }
  
  .pmr-metric-value {
    font-size: 10px;
  }
  
  .pmr-metric-subtext {
    font-size: 6px;
  }
  
  .pmr-chart-container {
    padding: 8px;
    min-height: 120px;
    max-height: 150px;
  }
  
  .pmr-chart-container canvas {
    max-height: 90px !important;
    height: 90px !important;
  }
  
  .pmr-chart-title {
    font-size: 10px;
    margin-bottom: 4px;
  }
  
  .pmr-section {
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  
  .pmr-section-title {
    font-size: 13px;
  }
  
  .pmr-section-desc {
    font-size: 10px;
    margin-bottom: 6px;
  }
  
  .pmr-over-under-table th,
  .pmr-missing-budgets-table th,
  .pmr-client-summary-table th,
  .pmr-over-under-table td,
  .pmr-missing-budgets-table td,
  .pmr-client-summary-table td {
    padding: 4px 3px;
    font-size: 10px;
  }
}

/* =====================================================
   AI INSIGHTS PAGE STYLES
===================================================== */

/* Under Construction Banner */
.under-construction-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.under-construction-banner .uc-icon {
  font-size: 20px;
}

.under-construction-banner .uc-text {
  flex: 1;
}

[data-theme="dark"] .under-construction-banner,
body.dark-mode .under-construction-banner {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}

.ai-insights-container {
  max-width: 900px;
  margin: 0 auto;
}

.ai-insights-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #1e40af 100%);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 10px 40px rgba(30, 58, 95, 0.3);
}

.ai-insights-hero-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.ai-insights-hero h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.ai-insights-hero p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto 24px auto;
  line-height: 1.6;
}

.ai-insights-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.ai-insights-run-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.ai-insights-run-btn:active {
  transform: translateY(0);
}

.ai-insights-run-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ai-insights-run-btn .btn-icon {
  font-size: 22px;
}

/* Progress Bar */
.ai-insights-progress {
  margin-top: 24px;
}

.ai-insights-progress .progress-bar {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.ai-insights-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.ai-insights-progress .progress-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* Results Container */
.ai-insights-results {
  display: grid;
  gap: 20px;
}

.ai-insights-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ai-insights-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
}

.ai-insights-section-title .section-icon {
  font-size: 22px;
}

.ai-insights-content {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
}

.ai-insights-content p {
  margin: 0 0 12px 0;
}

.ai-insights-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.ai-insights-content li {
  margin-bottom: 6px;
}

.ai-insights-content strong {
  color: #1f2937;
}

/* Error State */
.ai-insights-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}

.ai-insights-error .error-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.ai-insights-error .error-message {
  color: #991b1b;
  font-size: 16px;
  margin-bottom: 20px;
}

.ai-insights-retry-btn {
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.ai-insights-retry-btn:hover {
  background: #b91c1c;
}

/* Dark Mode */
[data-theme="dark"] .ai-insights-hero,
body.dark-mode .ai-insights-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
}

[data-theme="dark"] .ai-insights-section,
body.dark-mode .ai-insights-section {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .ai-insights-section-title,
body.dark-mode .ai-insights-section-title {
  color: #93c5fd;
  border-color: #334155;
}

[data-theme="dark"] .ai-insights-content,
body.dark-mode .ai-insights-content {
  color: #e2e8f0;
}

[data-theme="dark"] .ai-insights-content strong,
body.dark-mode .ai-insights-content strong {
  color: #f1f5f9;
}

[data-theme="dark"] .ai-insights-error,
body.dark-mode .ai-insights-error {
  background: #450a0a;
  border-color: #7f1d1d;
}

[data-theme="dark"] .ai-insights-error .error-message,
body.dark-mode .ai-insights-error .error-message {
  color: #fca5a5;
}

/* AI Q&A Chat Panel */
.ai-qa-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.ai-qa-panel h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.ai-qa-panel > p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}

.ai-qa-input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-qa-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-qa-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ai-qa-input::placeholder {
  color: var(--text-tertiary);
}

.ai-qa-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.ai-qa-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ai-qa-submit-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ai-qa-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.ai-qa-examples .examples-label {
  color: var(--text-tertiary);
}

.ai-qa-example-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-qa-example-btn:hover {
  background: var(--bg-tertiary);
  border-color: #10b981;
  color: #10b981;
}

.ai-qa-conversation {
  margin-top: 20px;
  max-height: 500px;
  overflow-y: auto;
  border-top: 1px solid var(--border-secondary);
  padding-top: 16px;
}

.ai-qa-message {
  margin-bottom: 16px;
  animation: fadeInUp 0.3s ease-out;
}

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

.ai-qa-message.user {
  text-align: right;
}

.ai-qa-message.user .message-content {
  display: inline-block;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  padding: 10px 16px;
  border-radius: 16px 16px 4px 16px;
  max-width: 85%;
  text-align: left;
}

.ai-qa-message.assistant .message-content {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  max-width: 90%;
  line-height: 1.5;
}

.ai-qa-message.loading .message-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-qa-loading-dots {
  display: flex;
  gap: 4px;
}

.ai-qa-loading-dots span {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: dotPulse 1.4s infinite ease-in-out both;
}

.ai-qa-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-qa-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.ai-qa-loading-dots span:nth-child(3) { animation-delay: 0; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* AI Q&A Mobile Responsive */
@media (max-width: 768px) {
  .ai-qa-input-row {
    flex-direction: column;
  }
  
  .ai-qa-submit-btn {
    width: 100%;
  }
  
  .ai-qa-examples {
    justify-content: center;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .ai-insights-hero {
    padding: 30px 20px;
  }
  
  .ai-insights-hero-icon {
    font-size: 48px;
  }
  
  .ai-insights-hero h3 {
    font-size: 22px;
  }
  
  .ai-insights-hero p {
    font-size: 14px;
  }
  
  .ai-insights-run-btn {
    padding: 14px 28px;
    font-size: 16px;
  }
  
  .ai-insights-section {
    padding: 16px;
  }
  
  .ai-insights-section-title {
    font-size: 16px;
  }
}

/* ===========================================
   AI CHAT INTERFACE (ChatGPT-style)
   =========================================== */
.ai-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  min-height: 500px;
  max-height: 800px;
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  overflow: hidden;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Welcome Screen */
.ai-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  margin: auto;
}

.ai-chat-welcome-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.ai-chat-welcome-icon svg {
  color: #fff;
}

.ai-chat-welcome h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.ai-chat-welcome p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

/* Suggestion Buttons */
.ai-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 600px;
}

.ai-suggestion-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-suggestion-btn:hover {
  background: var(--bg-tertiary);
  border-color: #10b981;
  color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.ai-suggestion-btn .suggestion-icon {
  font-size: 16px;
}

/* Chat Messages */
.ai-chat-message {
  display: flex;
  gap: 12px;
  max-width: 85%;
  animation: fadeIn 0.3s ease;
}

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

.ai-chat-message.user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.ai-chat-message .message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.ai-chat-message.user .message-avatar {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
}

.ai-chat-message.assistant .message-avatar {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
}

.ai-chat-message.error .message-avatar {
  background: #fef2f2;
  font-size: 20px;
}

.ai-chat-message .message-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.ai-chat-message.user .message-content {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  border: none;
  border-radius: 16px 16px 4px 16px;
}

.ai-chat-message.assistant .message-content {
  border-radius: 16px 16px 16px 4px;
}

.ai-chat-message .message-header {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

/* Progress Bar */
.ai-chat-progress {
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
}

.ai-chat-progress .progress-bar {
  height: 6px;
  background: var(--border-primary);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ai-chat-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 6px;
  width: 0%;
  transition: width 0.3s ease;
}

.ai-chat-progress .progress-text {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

/* Input Area */
.ai-chat-input-area {
  padding: 16px 24px 20px;
  background: var(--card-bg);
  border-top: 1px solid var(--border-primary);
}

.ai-chat-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-chat-analysis-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.ai-chat-analysis-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.ai-chat-analysis-btn:disabled {
  background: #6b7280;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.ai-chat-analysis-btn .btn-icon {
  font-size: 18px;
}

.ai-chat-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-chat-input-wrapper:focus-within {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ai-chat-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  outline: none;
}

.ai-chat-input::placeholder {
  color: var(--text-tertiary);
}

.ai-chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ai-chat-send-btn:disabled {
  background: #6b7280;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Hide old elements when conversation starts */
.ai-chat-welcome.hidden {
  display: none;
}

/* Updated Results styling for chat context */
.ai-chat-container .ai-insights-results {
  padding: 0;
  background: none;
  border: none;
}

.ai-chat-container .ai-insights-content {
  font-size: 14px;
  line-height: 1.7;
}

.ai-chat-container .ai-insights-error {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .ai-chat-container {
    height: calc(100vh - 160px);
    min-height: 400px;
    max-height: none;
    border-radius: 12px;
  }
  
  .ai-chat-welcome h3 {
    font-size: 20px;
  }
  
  .ai-chat-welcome p {
    font-size: 14px;
  }
  
  .ai-chat-suggestions {
    gap: 8px;
  }
  
  .ai-suggestion-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .ai-chat-input-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .ai-chat-analysis-btn {
    width: 100%;
    justify-content: center;
  }
  
  .ai-chat-input-wrapper {
    width: 100%;
  }
}

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .ai-chat-container {
    height: calc(100vh - 180px);
    min-height: 500px;
  }
  
  .ai-chat-welcome h3 {
    font-size: 22px;
  }
  
  .ai-chat-suggestions {
    max-width: 550px;
    gap: 10px;
  }
  
  .ai-suggestion-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .ai-chat-message {
    max-width: 80%;
  }
}

/* Dark Mode */
[data-theme="dark"] .ai-chat-container,
body.dark-mode .ai-chat-container {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .ai-chat-welcome-icon,
body.dark-mode .ai-chat-welcome-icon {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .ai-chat-input-area,
body.dark-mode .ai-chat-input-area {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .ai-chat-message .message-content,
body.dark-mode .ai-chat-message .message-content {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .ai-chat-progress,
body.dark-mode .ai-chat-progress {
  background: #0f172a;
  border-color: #334155;
}

/* Margin percentage color classes for PM Report Client Summary */
.margin-good {
  color: #10b981 !important;
}

.margin-bad {
  color: #dc2626 !important;
}

.margin-neutral {
  color: #374151;
}

/* Dark mode: neutral margin text should be white */
body.dark-mode .margin-neutral,
[data-theme="dark"] .margin-neutral {
  color: #ffffff;
}

/* ===========================================
   CUSTOM GREETING SECTION
   =========================================== */
.greeting-section {
  margin-bottom: 24px;
  padding: 20px 24px;
  background: var(--gradient-header);
  border-radius: 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.greeting-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.greeting-text {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.greeting-subtext {
  font-size: 14px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.greeting-date {
  font-size: 13px;
  opacity: 0.75;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .greeting-section {
    padding: 16px 18px;
    margin-bottom: 16px;
  }
  
  .greeting-text {
    font-size: 22px;
  }
  
  .greeting-subtext {
    font-size: 13px;
  }
}

/* ===========================================
   SMOOTH PAGE TRANSITIONS
   =========================================== */
.dashboard-section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.dashboard-section.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===========================================
   GRADIENT SECTION HEADERS
   =========================================== */
.dashboard-section > h2 {
  background: var(--gradient-header);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 8px;
}

[data-theme="dark"] .dashboard-section > h2,
body.dark-mode .dashboard-section > h2 {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===========================================
   GLASSMORPHISM EFFECTS
   =========================================== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
}

/* Apply glassmorphism to modals */
.modal-content,
.dropdown-menu,
.user-dropdown {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Config panels with subtle glass effect */
.config-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}

/* ===========================================
   DRAG AND DROP TILES
   =========================================== */
.overview-tiles-grid {
  position: relative;
}

.overview-tiles-grid.drag-enabled .overview-metric-tile {
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.overview-tiles-grid.drag-enabled .overview-metric-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.overview-metric-tile.dragging {
  opacity: 0.8;
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  z-index: 1000;
  cursor: grabbing !important;
}

.overview-metric-tile.drag-over {
  border: 2px dashed var(--color-primary);
  background: rgba(59, 130, 246, 0.05);
}

.overview-metric-tile.drag-ghost {
  opacity: 0.4;
}

/* Drag handle indicator */
.drag-handle {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: grab;
  z-index: 10;
}

.overview-tiles-grid.drag-enabled .overview-metric-tile:hover .drag-handle {
  opacity: 0.5;
}

.drag-handle::before,
.drag-handle::after {
  content: '';
  width: 12px;
  height: 2px;
  background: var(--text-tertiary);
  border-radius: 1px;
}

.drag-handle span {
  width: 12px;
  height: 2px;
  background: var(--text-tertiary);
  border-radius: 1px;
}

/* Tile order saved indicator */
.tile-order-saved {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-success);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 9999;
}

.tile-order-saved.show {
  transform: translateY(0);
  opacity: 1;
}

/* Reset tile order button */
.reset-tile-order-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.overview-tiles-grid.drag-enabled:hover .reset-tile-order-btn {
  opacity: 1;
}

.reset-tile-order-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .overview-tiles-grid.drag-enabled .overview-metric-tile {
    cursor: default;
  }
  
  .drag-handle {
    display: none;
  }
  
  .reset-tile-order-btn {
    display: none;
  }
}

/* ============================================================
   LANDSCAPE MOBILE/TABLET COMPATIBILITY
   Comprehensive fixes for phones and tablets in landscape mode
   ============================================================ */

/* Phone landscape (narrow height, wider width) */
@media (max-width: 900px) and (orientation: landscape) {
  
  /* --- GLOBAL METRIC CARDS - Keep horizontal layout --- */
  .job-metric-card {
    flex-direction: row !important;
    text-align: left !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }
  
  .job-metric-card .metric-icon {
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }
  
  .job-metric-card .metric-content {
    text-align: left !important;
  }
  
  .job-metric-card .metric-value {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  
  .job-metric-card .metric-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  
  /* --- JOB METRICS GRIDS - Side by side --- */
  .job-metrics-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  
  .job-metrics-grid .job-metric-card {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: none !important;
  }
  
  /* --- JOB OVERVIEW PAGE SPECIFICS --- */
  .jo-key-metrics-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .jo-metric-stack {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .jo-metric-stack .job-metric-card {
    flex: 1 1 auto !important;
    min-height: auto !important;
    min-width: 120px !important;
  }
  
  .overview-chart-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  .overview-chart-card {
    padding: 10px !important;
  }
  
  .overview-chart-card .chart-container {
    height: 150px !important;
  }
  
  .jo-metrics-chart-card .chart-container {
    min-height: 140px !important;
  }
  
  /* --- JO METRICS ROW - Keep inline --- */
  .jo-metrics-row,
  .jo-metrics-row-5 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }
  
  .jo-metrics-row .job-metric-card.compact,
  .jo-metrics-row-5 .job-metric-card.compact {
    flex: 0 0 auto !important;
    min-width: auto !important;
    padding: 8px 12px !important;
    flex-direction: row !important;
  }
  
  /* --- FILTER BARS - Keep horizontal --- */
  .job-filter-stack,
  .page-filter-bar,
  .filter-group,
  .job-budgets-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .filter-select {
    min-width: 120px !important;
    max-width: 180px !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
  
  .checkbox-stack {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* --- PM TABS BAR - Landscape --- */
  .pm-tabs-bar {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .pm-tabs-container {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .pm-tab-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  
  .pm-tabs-bar-label {
    font-size: 11px !important;
    margin-right: 8px !important;
  }
  
  /* --- STATUS FILTER BAR - Landscape --- */
  .status-filter-bar {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .status-checkboxes {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }
  
  .status-checkbox-label {
    font-size: 11px !important;
  }
  
  /* --- AR/AP AGING FILTER BARS - Landscape --- */
  .ar-aging-filter-bar,
  .ap-aging-filter-bar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .ar-aging-filter-bar .filter-group,
  .ap-aging-filter-bar .filter-group {
    flex: 0 0 auto !important;
  }
  
  /* --- CONFIG PANELS - Compact --- */
  .config-panel,
  .overview-config-box {
    padding: 10px !important;
  }
  
  .config-body {
    padding: 10px !important;
  }
  
  /* --- BREAKDOWN CONTAINERS - Side by side --- */
  .breakdown-container,
  .breakdown-container.stacked {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  .breakdown-card {
    flex: 1 1 280px !important;
    min-width: 250px !important;
    max-width: 400px !important;
    min-height: auto !important;
  }
  
  /* --- CHARTS - Remove fixed heights --- */
  .chart-wrapper,
  .breakdown-chart-wrapper {
    min-height: auto !important;
    height: auto !important;
  }
  
  .breakdown-chart-wrapper {
    height: 180px !important;
  }
  
  .jo-chart-box {
    min-height: auto !important;
  }
  
  .jo-chart-box canvas {
    max-height: 200px !important;
  }
  
  /* --- CHART GRIDS - 2-column minimum --- */
  .jo-chart-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  .jo-chart-grid-2x2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  /* --- PM REPORT METRICS --- */
  .pm-metrics-container,
  .pm-summary-metrics {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .pm-metric-card {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    flex-direction: row !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  
  .pm-metric-card .metric-value {
    font-size: 14px !important;
  }
  
  .pm-metric-card .metric-label {
    font-size: 9px !important;
  }
  
  /* --- OVER/UNDER BILLING METRICS --- */
  .oub-metrics-container,
  .oub-key-metrics-section {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .oub-metric-card,
  .oub-key-metrics-section .job-metric-card {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }
  
  /* --- AI INSIGHTS PAGE --- */
  .ai-insights-grid,
  .ai-section-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .ai-insight-card {
    padding: 12px !important;
  }
  
  /* --- SUMMARY TILES (GENERIC - Revenue/Account Detail) --- */
  .summary-tiles {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  
  .summary-tiles .summary-tile {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .summary-tile .tile-value {
    font-size: 16px !important;
    word-break: break-word !important;
  }
  
  .summary-tile .tile-label {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .summary-tile .tile-sub {
    font-size: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* --- CASH BALANCES --- */
  .cash-range-buttons {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px 0 6px !important;
  }
  
  .cash-range-btn {
    flex: 1 !important;
    padding: 6px 6px !important;
    font-size: 11px !important;
  }
  
  .cash-custom-range-inline {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  
  .cash-custom-range-inline input[type="date"] {
    flex: 1 1 100px !important;
    min-width: 90px !important;
    font-size: 11px !important;
    padding: 5px 6px !important;
  }
  
  .cash-apply-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  
  .cash-summary-tiles {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .cash-summary-tiles .summary-tile {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }
  
  .cash-chart-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .cash-chart-section .chart-wrapper {
    min-height: 280px !important;
    height: 280px !important;
  }
  
  .cash-chart-section .chart-wrapper canvas {
    min-height: 260px !important;
  }
  
  /* --- AP/AR AGING --- */
  .ap-aging-summary {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .ap-aging-summary .summary-card {
    flex: 1 1 auto !important;
    min-width: 80px !important;
  }
  
  .ap-aging-chart-section {
    display: block !important;
  }
  
  .ap-aging-chart-wrapper {
    min-width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
  }
  
  /* --- TABLES - Scrollable with readable text --- */
  .table-wrapper {
    overflow-x: auto !important;
  }
  
  .job-budgets-table,
  .ap-aging-table,
  .ar-aging-table {
    font-size: 11px !important;
  }
  
  .job-budgets-table th,
  .job-budgets-table td,
  .ap-aging-table th,
  .ap-aging-table td,
  .ar-aging-table th,
  .ar-aging-table td {
    padding: 8px 6px !important;
  }
  
  /* --- OVERVIEW/REVENUE/ACCOUNT DETAIL TILES --- */
  .overview-tiles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  
  .overview-metric-tile {
    padding: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .overview-metric-tile .tile-value {
    font-size: 16px !important;
    word-break: break-word !important;
  }
  
  .overview-metric-tile .tile-label {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .overview-metric-tile .tile-sub {
    font-size: 8px !important;
  }
  
  /* --- AI ANALYSIS PANELS --- */
  .ai-analysis-panel {
    padding: 10px !important;
  }
  
  .ai-analysis-content {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  /* --- MODALS - Full width in landscape --- */
  .modal-dialog {
    max-width: 90vw !important;
    max-height: 85vh !important;
  }
  
  /* --- SIDEBAR - Compact --- */
  .sidebar {
    width: 180px !important;
  }
  
  .sidebar.collapsed {
    width: 50px !important;
  }
  
  /* --- PREVENT HORIZONTAL OVERFLOW --- */
  .main-content {
    overflow-x: hidden !important;
    max-width: calc(100vw - 180px) !important;
  }
  
  .sidebar.collapsed ~ .main-content {
    max-width: calc(100vw - 50px) !important;
  }
  
  .dashboard-section {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  /* --- PAYMENTS PAGE --- */
  .payments-summary,
  .payments-metrics {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* --- COST CODES PAGE --- */
  .cost-codes-metrics,
  .cc-summary-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* --- STAT CARDS & KPI TILES --- */
  .stat-card,
  .kpi-tile {
    flex-direction: row !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  
  /* --- LOGIN PAGE --- */
  .login-container {
    padding: 20px !important;
    max-width: 90vw !important;
  }
  
  .login-form {
    padding: 20px !important;
  }
  
  /* --- ADMIN DASHBOARD --- */
  .admin-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  
  .admin-stat-card {
    padding: 10px !important;
  }
  
  /* --- MAIN CONTENT AREA --- */
  .main-content {
    padding: 12px !important;
  }
  
  .dashboard-section {
    padding: 12px !important;
  }
  
  /* --- PAGE HEADERS --- */
  .page-header,
  .section-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* --- SCHEDULED REPORTS --- */
  .scheduled-reports-list {
    max-height: 50vh !important;
  }
  
  .scheduled-report-item {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .scheduled-report-info {
    flex: 1 1 auto !important;
  }
  
  /* --- EXPORT BARS --- */
  .export-bar,
  .export-ribbon {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .export-dropdown-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  
  /* --- USER DROPDOWN --- */
  .user-dropdown {
    max-width: 150px !important;
  }
  
  .user-dropdown-btn .user-label {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* --- ACCOUNT/CHECKBOX LISTS --- */
  .account-checkbox-list {
    max-height: 30vh !important;
    overflow-y: auto !important;
  }
  
  .account-select-buttons {
    flex-direction: row !important;
    gap: 6px !important;
  }
  
  /* --- REPORT HEADER --- */
  .report-header {
    padding: 10px !important;
  }
  
  .report-header-title {
    font-size: 16px !important;
  }
  
  .report-header-period {
    font-size: 11px !important;
  }
  
  /* --- CHART CONTAINERS --- */
  .chart-container {
    min-height: auto !important;
    height: auto !important;
  }
  
  /* --- MIN FONT SIZE FLOOR --- */
  .metric-value,
  .tile-value,
  .summary-value,
  .stat-value {
    font-size: clamp(14px, 3vw, 18px) !important;
  }
  
  .metric-label,
  .tile-label,
  .summary-label,
  .stat-label {
    font-size: clamp(9px, 2vw, 12px) !important;
  }
  
  /* --- INCOME STATEMENT PAGE --- */
  #incomeStatement .config-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #incomeStatement .is-controls-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  #incomeStatement .table-wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  #incomeStatementTable {
    font-size: 10px !important;
  }
  
  #incomeStatementTable th,
  #incomeStatementTable td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  
  .is-waterfall-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  
  /* --- BALANCE SHEET PAGE --- */
  #balanceSheet .config-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #balanceSheet .table-wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  #balanceSheetTable {
    font-size: 10px !important;
  }
  
  #balanceSheetTable th,
  #balanceSheetTable td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  
  /* --- CASH FLOWS PAGE --- */
  #cashFlows .config-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #cashFlows .table-wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  #cashFlowTable {
    font-size: 10px !important;
  }
  
  #cashFlowTable th,
  #cashFlowTable td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  
  /* --- PM REPORT DESKTOP LAYOUT --- */
  .pmr-desktop-layout {
    flex-direction: column !important;
  }
  
  .pmr-left-column {
    max-width: 100% !important;
  }
  
  .pmr-right-column {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  
  .pmr-right-column .pmr-chart-container {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 180px !important;
  }
  
  /* --- MISSING BUDGETS PAGE --- */
  #missingBudgets .config-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #missingBudgets .table-wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  .mb-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  
  .mb-tab {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
  
  /* --- JOB ANALYTICS PAGE --- */
  #jobAnalytics .config-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  .analytics-card {
    padding: 10px !important;
  }
  
  /* --- LANDSCAPE MOBILE: AUTO-COLLAPSE SIDEBAR --- */
  .sidebar:not(.collapsed) {
    width: 50px !important;
    min-width: 50px !important;
  }
  
  .sidebar:not(.collapsed) .nav-link span,
  .sidebar:not(.collapsed) .sidebar-category-label,
  .sidebar:not(.collapsed) .sidebar-logo-text,
  .sidebar:not(.collapsed) .admin-section-label {
    display: none !important;
  }
  
  .sidebar:not(.collapsed) .nav-link {
    justify-content: center !important;
    padding: 10px 8px !important;
  }
  
  .sidebar:not(.collapsed) .sidebar-header {
    justify-content: center !important;
    padding: 10px 5px !important;
  }
  
  .sidebar:not(.collapsed) .sidebar-logo img {
    width: 28px !important;
    height: 28px !important;
  }
  
  .main-content {
    max-width: calc(100vw - 50px) !important;
    margin-left: 50px !important;
  }
  
  /* --- EXPORT RIBBON: ULTRA COMPACT --- */
  .export-ribbon {
    gap: 3px !important;
    padding: 4px !important;
  }
  
  .ribbon-btn {
    padding: 3px 5px !important;
    min-width: auto !important;
    font-size: 10px !important;
  }
  
  .ribbon-btn svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  .ribbon-btn .ribbon-label {
    font-size: 7px !important;
  }
  
  .export-dropdown-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
  
  /* --- PM REPORT KEY METRICS: HORIZONTAL SCROLL --- */
  .pmr-metrics-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .pmr-metrics-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .pmr-metrics-row .pmr-metric-tile {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    max-width: 110px !important;
    padding: 6px 8px !important;
  }
  
  .pmr-metric-tile .pmr-metric-value {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  
  .pmr-metric-tile .pmr-metric-label {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }
  
  .pmr-metric-tile .pmr-metric-subtext,
  .pmr-metric-tile .pmr-metric-trend {
    font-size: 7px !important;
  }
  
  .pmr-section-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  
  /* --- JOB OVERVIEW KEY METRICS: HORIZONTAL SCROLL --- */
  .jo-metrics-row,
  .jo-metrics-row-5 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .jo-metrics-row .job-metric-card,
  .jo-metrics-row-5 .job-metric-card {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    max-width: 120px !important;
    padding: 6px 8px !important;
    flex-direction: column !important;
  }
  
  .jo-metrics-row .job-metric-card .metric-icon,
  .jo-metrics-row-5 .job-metric-card .metric-icon {
    display: none !important;
  }
  
  .jo-metrics-row .job-metric-card .metric-value,
  .jo-metrics-row-5 .job-metric-card .metric-value {
    font-size: 13px !important;
  }
  
  .jo-metrics-row .job-metric-card .metric-label,
  .jo-metrics-row-5 .job-metric-card .metric-label {
    font-size: 7px !important;
  }
  
  /* --- REVENUE/ACCOUNT DETAIL SUMMARY TILES: COMPACT GRID --- */
  .summary-tiles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  
  .summary-tile {
    padding: 8px !important;
    min-height: auto !important;
  }
  
  .summary-tile .tile-value {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  .summary-tile .tile-label {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  
  .summary-tile .tile-sub {
    font-size: 7px !important;
  }
  
  /* --- CHART BOX ON REVENUE/ACCOUNT DETAIL --- */
  .chart-box {
    padding: 8px !important;
  }
  
  .chart-box .chart-title,
  .chart-box h3 {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  
  .chart-box .chart-subtitle,
  .chart-box .chart-period {
    font-size: 9px !important;
  }
  
  .chart-box .chart-wrapper,
  .chart-box .chart-container {
    height: 120px !important;
    min-height: 120px !important;
  }
  
  .chart-box .expand-btn {
    padding: 2px 4px !important;
    font-size: 10px !important;
  }
  
  /* --- PAGE HEADERS: COMPACT --- */
  .page-header h2,
  .section-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  
  .page-header p,
  .page-subtitle {
    font-size: 10px !important;
  }
  
  .data-as-of {
    font-size: 9px !important;
  }
  
  /* --- FILTER CONTROLS: COMPACT --- */
  .pmr-filter-bar,
  .filter-bar {
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
  }
  
  .pmr-filter-bar select,
  .filter-bar select {
    padding: 5px 8px !important;
    font-size: 11px !important;
    min-width: 100px !important;
  }
  
  .pmr-filter-bar label,
  .filter-bar label {
    font-size: 10px !important;
  }
  
  /* --- AI ANALYSIS: COMPACT --- */
  .ai-section-header,
  .ai-analysis-header {
    padding: 8px !important;
  }
  
  .ai-analysis-header h3 {
    font-size: 12px !important;
  }
  
  .ai-analysis-btn,
  .run-analysis-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  
  /* --- OVERVIEW TILES GRID: COMPACT --- */
  .overview-tiles-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  
  .overview-metric-tile {
    padding: 8px !important;
  }
  
  .overview-metric-tile .tile-value {
    font-size: 14px !important;
  }
  
  .overview-metric-tile .tile-label {
    font-size: 8px !important;
  }
  
  /* --- MAIN CONTENT AREA: TIGHTER --- */
  .main-content {
    padding: 8px !important;
  }
  
  .dashboard-section {
    padding: 10px !important;
  }
  
  /* --- HEADER: COMPACT --- */
  .header {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 40px !important;
  }
  
  .header-left h1 {
    font-size: 14px !important;
  }
  
  .user-dropdown-btn {
    padding: 4px 8px !important;
  }
  
  .user-dropdown-btn .user-label {
    font-size: 11px !important;
  }
  
  .theme-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
}

/* Tablet landscape (more space available) */
@media (min-width: 901px) and (max-width: 1200px) and (orientation: landscape) {
  
  /* Slightly larger sizing for tablets */
  .job-metric-card .metric-value {
    font-size: 16px !important;
  }
  
  .job-metric-card .metric-label {
    font-size: 11px !important;
  }
  
  .jo-chart-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .overview-tiles-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  
  .breakdown-card {
    flex: 1 1 300px !important;
    max-width: 450px !important;
  }
}

/* ============================================================
   PROFITABILITY HEAT MAP + KEY METRICS WRAPPER
   ============================================================ */

.jo-heatmap-metrics-wrapper {
  display: flex;
  gap: 16px;
  margin-top: 30px;
  width: auto;
  max-width: 80%;
  box-sizing: border-box;
  align-items: stretch;
}

.jo-heatmap-metrics-wrapper .profitability-heatmap-section {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-top: 0;
}

.jo-key-metrics-column {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 20px;
  min-width: 200px;
}

.jo-key-metrics-column .jo-section-header {
  margin-bottom: 12px;
}

.jo-metrics-column-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: space-between;
}

.jo-metrics-column-tiles .job-metric-card.compact {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 0;
}

.jo-metrics-column-tiles .job-metric-card.compact .metric-icon {
  font-size: 16px;
}

.jo-metrics-column-tiles .job-metric-card.compact .metric-value {
  font-size: 1rem;
  white-space: nowrap;
}

.jo-metrics-column-tiles .job-metric-card.compact .metric-label {
  font-size: 0.55rem;
  white-space: nowrap;
  overflow: visible;
}

.profitability-heatmap-section {
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

#jobOverview > .profitability-heatmap-section {
  margin-top: 30px;
  margin-bottom: 24px;
  width: 60% !important;
  max-width: 60% !important;
  box-sizing: border-box;
}

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

.heatmap-header .jo-section-header {
  margin-bottom: 0;
}

.heatmap-filters {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.heatmap-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.heatmap-filter select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.heatmap-filter select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.heatmap-description {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 15px;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-gradient {
  width: 200px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(to right, #dc2626, #f59e0b, #fbbf24, #84cc16, #10b981, #059669);
}

.legend-label {
  font-weight: 500;
}

.heatmap-container {
  overflow-x: auto;
  display: inline-block;
}

.heatmap-grid {
  display: table;
  border-collapse: collapse;
  width: auto;
  table-layout: auto;
}

.heatmap-row {
  display: table-row;
}

.heatmap-row.header-row {
  font-weight: 600;
  background: var(--bg-tertiary);
}

.heatmap-cell {
  display: table-cell;
  padding: 6px 6px;
  text-align: center;
  border: 1px solid var(--border-color);
  font-size: 12px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.heatmap-cell.pm-label {
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding-right: 12px;
  width: 1%;
  max-width: none;
}

.heatmap-cell.header {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.heatmap-cell.header.pm-header {
  text-align: left;
}

.heatmap-cell.data-cell {
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: transform 0.15s ease;
  cursor: default;
}

.heatmap-cell.data-cell:hover {
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.heatmap-cell.no-data {
  background: var(--bg-primary);
  color: var(--text-muted);
  font-weight: 400;
}

.heatmap-row.subtotal-row {
  border-top: 2px solid var(--border-color);
}

.heatmap-row.subtotal-row .heatmap-cell {
  border-top: 2px solid var(--text-muted);
}

.heatmap-tooltip {
  position: relative;
}

.heatmap-tooltip .tooltip-content {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: 1px solid var(--border-color);
  z-index: 100;
  text-shadow: none;
}

.heatmap-tooltip:hover .tooltip-content {
  display: block;
}

/* Dark mode adjustments */
[data-theme="dark"] .profitability-heatmap-section {
  background: rgba(30, 41, 59, 0.6);
}

[data-theme="dark"] .jo-key-metrics-column {
  background: rgba(30, 41, 59, 0.6);
}

[data-theme="dark"] .heatmap-cell.no-data {
  background: rgba(30, 41, 59, 0.4);
}

/* Mobile responsive - Portrait */
@media (max-width: 768px) {
  .jo-heatmap-metrics-wrapper {
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px;
  }
  
  .jo-heatmap-metrics-wrapper .profitability-heatmap-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .jo-key-metrics-column {
    width: 100%;
    min-width: 0;
  }
  
  .jo-metrics-column-tiles {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .jo-metrics-column-tiles .job-metric-card.compact {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  
  #jobOverview > .profitability-heatmap-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px;
    margin-top: 15px;
  }
  
  .heatmap-grid {
    width: 100%;
    table-layout: auto;
  }
  
  .heatmap-cell {
    padding: 6px 3px;
    font-size: 9px;
  }
  
  .heatmap-cell.pm-label {
    font-size: 9px;
    padding: 6px 6px 6px 4px;
    white-space: nowrap;
  }
  
  .heatmap-cell.header {
    font-size: 8px;
    padding: 5px 2px;
  }
  
  .legend-gradient {
    width: 100px;
  }
  
  .heatmap-legend {
    font-size: 10px;
    gap: 6px;
    flex-wrap: wrap;
  }
}

/* Landscape mobile/tablet */
@media (max-width: 900px) and (orientation: landscape) {
  .profitability-heatmap-section {
    padding: 10px;
  }
  
  .heatmap-grid {
    width: 100%;
    table-layout: auto;
  }
  
  .heatmap-cell {
    padding: 6px 4px;
    font-size: 10px;
  }
  
  .heatmap-cell.pm-label {
    font-size: 10px;
    padding: 6px 8px 6px 5px;
    white-space: nowrap;
  }
  
  .heatmap-cell.header {
    font-size: 9px;
  }
  
  .heatmap-legend {
    font-size: 10px;
  }
}

/* ============================================================
   PM PERFORMANCE RADAR CHART
   ============================================================ */

.pm-radar-section {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

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

.radar-header .jo-section-header {
  margin-bottom: 0;
}

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

.radar-controls select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  min-width: 180px;
}

.radar-controls select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.radar-description {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 15px;
}

.radar-chart-container {
  position: relative;
  height: 350px;
  max-width: 500px;
  margin: 0 auto;
}

.radar-legend-box {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 15px;
  font-size: 13px;
  flex-wrap: wrap;
}

.radar-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

[data-theme="dark"] .pm-radar-section {
  background: rgba(30, 41, 59, 0.6);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .pm-radar-section {
    padding: 12px;
    margin-top: 15px;
  }
  
  .radar-chart-container {
    height: 280px;
  }
  
  .radar-controls select {
    min-width: 150px;
    font-size: 12px;
  }
  
  .radar-legend-box {
    gap: 15px;
    font-size: 11px;
  }
}

/* ============================================================
   REVENUE TO PROFIT WATERFALL CHART
   ============================================================ */

.waterfall-section {
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

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

.waterfall-header .jo-section-header {
  margin-bottom: 0;
}

.waterfall-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.waterfall-refresh-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.waterfall-refresh-btn svg {
  transition: transform 0.3s ease;
}

.waterfall-refresh-btn:hover svg {
  transform: rotate(180deg);
}

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

.waterfall-controls select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  min-width: 150px;
}

.waterfall-controls select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.waterfall-description {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 15px;
}

.waterfall-chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

/* Make Income Statement waterfall same width as AI analysis section */
#incomeStatement .waterfall-section {
  width: 70%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .waterfall-section {
  background: rgba(30, 41, 59, 0.6);
}

.waterfall-options {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.config-section-label {
  font-weight: 600;
  color: var(--text-primary);
}

/* Dark mode select option styling for Income Statement config */
[data-theme="dark"] .is-controls select,
[data-theme="dark"] .is-controls select option {
  background-color: #1e293b;
  color: #e2e8f0;
}

[data-theme="dark"] #isCompareMode,
[data-theme="dark"] #isCompareMode option,
[data-theme="dark"] #isDetailLevel,
[data-theme="dark"] #isDetailLevel option {
  background-color: #1e293b;
  color: #e2e8f0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .waterfall-section,
  #incomeStatement .waterfall-section {
    padding: 12px;
    margin-top: 15px;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .waterfall-chart-container {
    height: 250px;
  }
  
  .waterfall-controls select {
    min-width: 130px;
    font-size: 12px;
  }
}

/* ========================================
   MOBILE EXPORT OVERRIDES - MUST BE LAST
   ======================================== */
@media (max-width: 768px) {
  /* Export button at top-right corner on mobile */
  .content-export-area {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    bottom: auto !important;
    z-index: 100 !important;
  }
  
  /* Hide desktop ribbon completely */
  .export-ribbon {
    display: none !important;
  }
  
  /* Show mobile dropdown */
  .export-dropdown.mobile-only {
    display: block !important;
  }
  
  /* Small button style for mobile */
  .content-export-area .export-dropdown-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    background: var(--bg-tertiary, #334155) !important;
    border: 1px solid var(--border-secondary, #475569) !important;
    color: var(--text-primary, #e2e8f0) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Dropdown opens downward on mobile */
  .content-export-area .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    right: 0 !important;
    min-width: 140px !important;
  }
  
  /* Hide ALL table export buttons on mobile - users use desktop for spreadsheet exports */
  .table-export-row,
  .table-export-btns,
  .export-table-btn,
  .table-export-dropdown-btn,
  .table-export-dropdown-menu {
    display: none !important;
  }
}

/* Desktop: show CSV/Excel buttons, hide dropdown trigger */
@media (min-width: 769px) {
  .table-export-dropdown-btn {
    display: none !important;
  }
  
  .table-export-dropdown-menu {
    display: none !important;
  }
}

/* Quick recipient buttons for email modal */
.quick-recipient-btn {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  margin-right: 6px;
  margin-bottom: 4px;
  transition: all 0.2s ease;
}

.quick-recipient-btn:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.quick-recipient-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}



/* ============================================= */
/* PDF Export Mode - Override glassmorphism     */
/* ============================================= */
/* ============================================= */
/* PDF Export Mode - COMPREHENSIVE OVERRIDES    */
/* ============================================= */
body.pdf-export-mode {
  --glass-bg: #ffffff !important;
  --glass-border: #e2e8f0 !important;
  --glass-shadow: none !important;
}

body.pdf-export-mode,
body.pdf-export-mode .dashboard-section,
body.pdf-export-mode .main-content,
body.pdf-export-mode .sidebar,
body.pdf-export-mode #arAging,
body.pdf-export-mode #apAging,
body.pdf-export-mode #overview {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Kill ALL pseudo-elements */
body.pdf-export-mode *::before,
body.pdf-export-mode *::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Force solid backgrounds on ALL elements that might have rgba */
body.pdf-export-mode .summary-card,
body.pdf-export-mode .metric-tile,
body.pdf-export-mode .chart-card,
body.pdf-export-mode .welcome-card,
body.pdf-export-mode .glass-panel,
body.pdf-export-mode .glass-card,
body.pdf-export-mode .config-panel,
body.pdf-export-mode .overview-tile,
body.pdf-export-mode .pm-tabs-bar,
body.pdf-export-mode .pm-tabs-container,
body.pdf-export-mode .pm-tab-btn,
body.pdf-export-mode .ap-aging-summary,
body.pdf-export-mode .ap-aging-chart-section,
body.pdf-export-mode .ap-aging-chart-wrapper,
body.pdf-export-mode .chart-wrapper,
body.pdf-export-mode table,
body.pdf-export-mode thead,
body.pdf-export-mode tbody,
body.pdf-export-mode tr,
body.pdf-export-mode td,
body.pdf-export-mode th,
body.pdf-export-mode .job-budgets-table,
body.pdf-export-mode .section-title,
body.pdf-export-mode .data-as-of,
body.pdf-export-mode .filter-row,
body.pdf-export-mode .search-container,
body.pdf-export-mode input,
body.pdf-export-mode select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body.pdf-export-mode .pm-tab-btn {
  background: #e2e8f0 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

body.pdf-export-mode .pm-tab-btn.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

body.pdf-export-mode canvas {
  opacity: 1 !important;
}

body.pdf-export-mode * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Hide Run Analysis button in PDF export */
body.pdf-export-mode .dcr-ai-run-btn {
  display: none !important;
}

/* Preserve AI Summary light blue background in PDF */
body.pdf-export-mode .dcr-ai-summary-panel {
  background: #f0f9ff !important;
  background-color: #f0f9ff !important;
}

body.pdf-export-mode .dcr-ai-summary-header,
body.pdf-export-mode .dcr-ai-summary-title {
  background: transparent !important;
  background-color: transparent !important;
}

/* Preserve Commentary yellow background in PDF */
body.pdf-export-mode .dcr-commentary-panel {
  background: #fefce8 !important;
  background-color: #fefce8 !important;
}

body.pdf-export-mode .dcr-commentary-header,
body.pdf-export-mode .dcr-commentary-title {
  background: transparent !important;
  background-color: transparent !important;
}


/* Job Overview Table Pagination Controls */
.jo-pagination-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
}

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

.jo-page-size-select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-background, #fff);
  color: var(--text-color, #111827);
  font-size: 12px;
  cursor: pointer;
}

.jo-page-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-background, #fff);
  color: var(--text-color, #111827);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.jo-page-btn:hover:not(:disabled) {
  background: var(--hover-background, #f3f4f6);
}

.jo-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.jo-page-info {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  min-width: 80px;
  text-align: center;
}

/* Dark mode support for pagination */
.dark-mode .jo-page-size-select,
.dark-mode .jo-page-btn {
  border-color: #374151;
  background: #1f2937;
  color: #e5e7eb;
}

.dark-mode .jo-page-btn:hover:not(:disabled) {
  background: #374151;
}

.dark-mode .jo-page-info {
  color: #9ca3af;
}

/* ============================================================
   FULLSCREEN CHART - FORCE WHITE TEXT IN DAY MODE
   Since fullscreen always has dark background, force white text
   ============================================================ */

/* Force white text color on all chart text elements in fullscreen */
.chart-fullscreen-modal .chartjs-render-monitor,
.chart-fullscreen-modal canvas {
  --chart-text-color: #ffffff !important;
}

/* Override day mode dark text in fullscreen modal */
.chart-fullscreen-modal .chart-legend,
.chart-fullscreen-modal .chart-legend *,
.chart-fullscreen-modal .chart-title,
.chart-fullscreen-modal .chart-subtitle,
.chart-fullscreen-modal label,
.chart-fullscreen-modal span:not(.stat-label):not(.stat-value):not(.stat-period),
.chart-fullscreen-modal p,
.chart-fullscreen-modal .text-muted,
.chart-fullscreen-modal .chart-container label,
.chart-fullscreen-modal .chart-container span {
  color: #ffffff !important;
}

/* Fullscreen header and title always white */
.chart-fullscreen-header,
.chart-fullscreen-header h3,
.chart-fullscreen-header * {
  color: #ffffff !important;
}

/* Force axis labels white in fullscreen (for Chart.js elements not in canvas) */
.chart-fullscreen-body .chart-axis-label,
.chart-fullscreen-body .chart-label {
  color: #ffffff !important;
}

/* Missing Budgets Filter Buttons */
.jo-mb-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.jo-mb-filter-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.jo-mb-filter-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* Missing Budgets Cost Component Columns - Shaded */
.mb-cost-component {
  background: rgba(59, 130, 246, 0.08) !important;
}
body.dark-mode .mb-cost-component {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* Missing Budgets Compact Table */
.pmr-missing-budgets-table.compact-table {
  font-size: 11px;
}
.pmr-missing-budgets-table.compact-table th,
.pmr-missing-budgets-table.compact-table td {
  padding: 6px 8px;
  white-space: nowrap;
}
.pmr-missing-budgets-table.compact-table .mb-desc-cell,
.pmr-missing-budgets-table.compact-table .mb-client-cell {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Job Overview Sortable Table Headers */
.jo-sortable-table th.jo-sortable {
  cursor: pointer;
  position: relative;
  padding-right: 18px !important;
  user-select: none;
  transition: background-color 0.15s ease;
}
.jo-sortable-table th.jo-sortable:hover {
  background: var(--bg-hover);
}
.jo-sortable-table th.jo-sortable::after {
  content: ' \2195';
  opacity: 0.3;
  font-size: 10px;
  position: absolute;
  right: 4px;
}
.jo-sortable-table th.jo-sortable.sort-asc::after {
  content: ' \2191';
  opacity: 1;
}
.jo-sortable-table th.jo-sortable.sort-desc::after {
  content: ' \2193';
  opacity: 1;
}

/* Mobile optimizations for sortable tables */
@media (max-width: 768px) {
  .jo-sortable-table th.jo-sortable {
    padding-right: 14px !important;
    font-size: 10px;
  }
  .jo-sortable-table th.jo-sortable::after {
    font-size: 8px;
    right: 2px;
  }
  .jo-sortable-table td {
    font-size: 10px;
    padding: 4px 6px;
  }
}

/* ============================================
   CLOSED JOB ANALYSIS TABLE
   ============================================ */
.cja-table-wrapper {
  width: auto;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cja-table {
  width: auto;
  max-width: 100%;
  table-layout: auto;
}

.cja-table th,
.cja-table td {
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.cja-table th {
  font-weight: 600;
  text-align: left;
}

.cja-table th.number-col,
.cja-table td.number-col {
  text-align: right;
}

.cja-table .positive {
  color: #10b981;
}

.cja-table .negative {
  color: #dc2626;
}

/* Subtotal row styling */
.cja-subtotal-row {
  background: var(--bg-secondary);
  font-weight: 600;
}

.cja-subtotal-row td {
  border-top: 2px solid var(--border-primary);
  border-bottom: 2px solid var(--border-primary);
}

.cja-subtotal-row .subtotal-label {
  text-align: left;
  font-weight: 700;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cja-table {
    font-size: 11px;
  }
  
  .cja-table th,
  .cja-table td {
    padding: 6px 8px;
  }
}

/* Dark mode */
[data-theme="dark"] .cja-subtotal-row {
  background: #1e293b;
}

[data-theme="dark"] .cja-subtotal-row td {
  border-color: #475569;
}

/* Job Overview - Charts Row (4 charts side by side) */
.jo-charts-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.jo-chart-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
}

.jo-chart-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  text-align: center;
}

.jo-chart-card canvas {
  width: 100% !important;
  height: 140px !important;
}

/* Job Overview - Heat Map and Radar Side by Side */
.jo-heatmap-radar-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  margin-bottom: 20px;
  width: 70%;
  max-width: 70%;
  align-items: start;
}

.jo-heatmap-col {
  min-width: 0;
}

.profitability-heatmap-section.jo-heatmap-col {
  margin: 0;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.jo-radar-col {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.jo-radar-col .radar-header {
  margin-bottom: 4px;
}

.jo-radar-col .radar-description {
  margin: 0 0 8px 0;
  font-size: 11px;
}

.jo-radar-col .jo-section-header {
  margin: 0;
}

.jo-radar-compact {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: none;
  min-height: 280px;
}

.jo-radar-compact canvas {
  width: 100% !important;
  height: 300px !important;
}

/* Responsive for smaller screens */
@media (max-width: 1200px) {
  .jo-charts-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .jo-heatmap-radar-row {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .jo-heatmap-radar-row {
    grid-template-columns: 1fr;
  }
  
  .jo-radar-col {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .jo-charts-row {
    grid-template-columns: 1fr;
  }
}

/* Job Actuals Table - Compact and Scrollable */
#jobActualsTable {
  font-size: 12px;
  min-width: 1200px;
}

#jobActualsTable th,
#jobActualsTable td {
  padding: 6px 8px;
  white-space: nowrap;
}

#jobActualsTable th {
  font-size: 11px;
}

#jobActualsTable .column-header-text {
  font-size: 11px;
}

/* Limit text column widths */
#jobActualsTable td:nth-child(2) {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#jobActualsTable td:nth-child(3) {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#jobActualsTable td:nth-child(5) {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Number columns more compact */
#jobActualsTable .number-col {
  padding: 6px 6px;
  font-size: 12px;
}

/* Closed Job Analysis - Collapsible Columns */
.cja-column-toggle {
  margin-bottom: 12px;
}

.expand-cols-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-cols-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.expand-cols-btn .expand-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.expand-cols-btn.expanded .expand-icon {
  transform: rotate(90deg);
}

/* Hidden detail columns by default */
.cja-table th.cja-detail-col,
.cja-table td.cja-detail-col {
  display: none !important;
}

.cja-table.show-details th.cja-detail-col,
.cja-table.show-details td.cja-detail-col {
  display: table-cell !important;
}

/* Job Overview - Aligned Section Widths (70% desktop, left-aligned) */
#jobOverview > .pm-tabs-bar,
#jobOverview > .status-filter-bar,
#jobOverview > #joAiAnalysisPanel,
#jobOverview .jo-top-metrics,
#jobOverview .jo-charts-row,
#jobOverview .jo-trend-charts-row {
  width: 70% !important;
  max-width: 70% !important;
  margin-left: 0;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  #jobOverview > .pm-tabs-bar,
  #jobOverview > .status-filter-bar,
  #jobOverview > #joAiAnalysisPanel,
  #jobOverview .jo-top-metrics,
  #jobOverview .jo-charts-row,
  #jobOverview .jo-trend-charts-row {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Closed Job Analysis - Compact Table for Full View */
.cja-table {
  font-size: 11px;
  table-layout: auto;
}

.cja-table th,
.cja-table td {
  padding: 5px 6px;
  white-space: nowrap;
}

.cja-table .text-col {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cja-table th:first-child,
.cja-table td:first-child {
  max-width: 60px;
}

.cja-table .number-col {
  font-size: 11px;
  padding: 5px 4px;
}

/* OUB Page - Overbilled (green) and Underbilled (red) colors for dark mode */
#oubTotalOverbilled {
  color: #10b981 !important;
}

#oubTotalUnderbilled {
  color: #ef4444 !important;
}

body.dark-mode #oubTotalOverbilled,
[data-theme="dark"] #oubTotalOverbilled {
  color: #34d399 !important;
}

body.dark-mode #oubTotalUnderbilled,
[data-theme="dark"] #oubTotalUnderbilled {
  color: #f87171 !important;
}

/* Force hide subtotal detail cells - maximum specificity */
#cjaTable .cja-subtotal-row td.cja-detail-col,
#cjaTable thead tr td.cja-detail-col,
table.cja-table .cja-subtotal-row .cja-detail-col {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  padding: 0 !important;
  border: none !important;
}

#cjaTable.show-details .cja-subtotal-row td.cja-detail-col,
#cjaTable.show-details thead tr td.cja-detail-col,
table.cja-table.show-details .cja-subtotal-row .cja-detail-col {
  display: table-cell !important;
  visibility: visible !important;
  width: auto !important;
  padding: 5px 6px !important;
  border: inherit !important;
}

/* Override any legacy margin on heatmap inside the grid row */
.jo-heatmap-radar-row > .profitability-heatmap-section.jo-heatmap-col {
  margin: 0 !important;
  margin-top: 0 !important;
}

/* Closed Job Analysis - 70% width constraint for PM tabs and AI panel */
#closedJobAnalysis > .pm-tabs-bar,
#closedJobAnalysis > #cjaAiAnalysisPanel,
#closedJobAnalysis > .cja-key-metrics {
  width: 70%;
  max-width: 70%;
  margin-left: 0;
  margin-right: auto;
  box-sizing: border-box;
}

#closedJobAnalysis .pm-tabs-container {
  flex-wrap: wrap;
  gap: 6px;
}

#closedJobAnalysis .pm-tabs-container .pm-tab {
  margin-bottom: 4px;
}

/* CJA Key Metrics Section */
.cja-key-metrics {
  margin-top: 16px;
  margin-bottom: 16px;
}

.cja-key-metrics-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.cja-key-metrics-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.cja-metric-tile {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.cja-metric-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cja-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* CJA Charts Row */
.cja-charts-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  width: 70%;
  justify-content: flex-start;
}

.cja-chart-container {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  min-height: 280px;
}

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

.cja-chart-container .chart-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.cja-chart-wrapper {
  position: relative;
  height: 220px;
}

.cja-chart-wrapper canvas {
  max-height: 220px;
}

@media (max-width: 900px) {
  .cja-charts-row {
    flex-direction: column;
    width: 100%;
  }
  
  .cja-chart-container {
    min-height: 250px;
  }
}

@media (max-width: 1200px) {
  #closedJobAnalysis > .pm-tabs-bar,
  #closedJobAnalysis > #cjaAiAnalysisPanel,
  #closedJobAnalysis > .cja-key-metrics {
    width: 100%;
    max-width: 100%;
  }
  
  .cja-key-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .cja-key-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fix alignment: Remove margin-top from pm-radar-section when inside jo-heatmap-radar-row */
.jo-heatmap-radar-row .pm-radar-section,
.pm-radar-section.jo-radar-col {
  margin-top: 0 !important;
  margin: 0 !important;
}

/* CJA column toggle and export buttons row */
.cja-column-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cja-export-btns {
  display: flex;
  gap: 8px;
}

/* Force table wrapper to respect container width */
.cja-table-wrapper {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  overflow-y: visible;
}

/* Job Overview table export buttons */
.jo-export-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}

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

/* Cash Report Commentary Panel */
.dcr-commentary-panel {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.dark-mode .dcr-commentary-panel {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  border-color: #1e40af;
}

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

.dcr-commentary-title {
  font-size: 16px;
  font-weight: 600;
  color: #0369a1;
}

.dark-mode .dcr-commentary-title {
  color: #7dd3fc;
}

.dcr-commentary-save-btn {
  background: #0369a1;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.dcr-commentary-save-btn:hover {
  background: #0284c7;
}

.dcr-commentary-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  background: white;
  color: #1e293b;
}

.dark-mode .dcr-commentary-input {
  background: #0f172a;
  border-color: #1e40af;
  color: #e2e8f0;
}

.dcr-commentary-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.1);
}

/* Mobile styles for Commentary Panel */
@media (max-width: 768px) {
  .dcr-commentary-panel {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .dcr-commentary-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .dcr-commentary-title {
    font-size: 14px;
  }
  
  .dcr-commentary-input {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 10px;
    min-height: 100px;
  }
  
  .dcr-commentary-save-btn {
    padding: 8px 20px;
  }
}

/* Commentary button group */
.dcr-commentary-btn-group {
  display: flex;
  gap: 8px;
}

.dcr-commentary-cancel-btn {
  background: #64748b;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.dcr-commentary-cancel-btn:hover {
  background: #475569;
}

.dcr-commentary-edit-btn {
  background: #0369a1;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.dcr-commentary-edit-btn:hover {
  background: #0284c7;
}

.dcr-commentary-display {
  padding: 12px;
  background: white;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #1e293b;
  white-space: pre-wrap;
}

.dark-mode .dcr-commentary-display {
  background: #0f172a;
  border-color: #1e40af;
  color: #e2e8f0;
}

/* ========================================
   PDF EXPORT SPECIFIC STYLES
   ======================================== */

/* When pdf-export-mode is active, force light mode colors */
body.pdf-export-mode {
  background: #ffffff !important;
  color: #1f2937 !important;
}

body.pdf-export-mode [data-theme="dark"] {
  color: #1f2937 !important;
}

/* Force light backgrounds on all elements during PDF export */
body.pdf-export-mode .dcr-safety-check-section,
body.pdf-export-mode .dcr-safety-item,
body.pdf-export-mode .dcr-safety-result {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

body.pdf-export-mode .dcr-safety-value,
body.pdf-export-mode .dcr-safety-total,
body.pdf-export-mode .dcr-safety-label,
body.pdf-export-mode .dcr-safety-operator,
body.pdf-export-mode .dcr-safety-equals {
  background: transparent !important;
}

body.pdf-export-mode .dcr-chart-container,
body.pdf-export-mode .dcr-table-section,
body.pdf-export-mode .dcr-metric-tile,
body.pdf-export-mode .dcr-transaction-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

body.pdf-export-mode .dcr-metric-tile,
body.pdf-export-mode .dcr-metric-value,
body.pdf-export-mode .dcr-metric-label {
  background: transparent !important;
}

/* Remove gradient backgrounds for PDF */
body.pdf-export-mode .dcr-safety-result {
  background: #f0f9ff !important;
}

/* Ensure text colors are dark for readability */
body.pdf-export-mode .dcr-safety-label,
body.pdf-export-mode .dcr-metric-label,
body.pdf-export-mode .dcr-table-section h3,
body.pdf-export-mode .dcr-section-header h3 {
  color: #374151 !important;
}

body.pdf-export-mode .dcr-safety-operator,
body.pdf-export-mode .dcr-safety-equals {
  color: #6b7280 !important;
}

/* Scale content to fit page - prevent overflow */
body.pdf-export-mode .dcr-safety-calculation {
  transform: scale(0.9);
  transform-origin: left center;
}

body.pdf-export-mode .dcr-safety-item {
  min-width: 90px !important;
  padding: 12px 14px !important;
}

body.pdf-export-mode .dcr-safety-value {
  font-size: 20px !important;
}

body.pdf-export-mode .dcr-safety-total {
  font-size: 24px !important;
}

body.pdf-export-mode .dcr-safety-result {
  min-width: 110px !important;
  padding: 12px 18px !important;
}

/* Ensure tables don't overflow */
body.pdf-export-mode .dcr-transaction-table {
  font-size: 12px !important;
}

body.pdf-export-mode .dcr-transaction-table th,
body.pdf-export-mode .dcr-transaction-table td {
  padding: 8px 6px !important;
}

/* Commentary panel styling for PDF */
body.pdf-export-mode .dcr-commentary-panel {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
}

body.pdf-export-mode .dcr-commentary-display {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Force all text to be dark */
body.pdf-export-mode * {
  color: inherit;
}

body.pdf-export-mode .dcr-safety-value.positive,
body.pdf-export-mode .dcr-safety-total.positive {
  color: #059669 !important;
}

body.pdf-export-mode .dcr-safety-value.negative,
body.pdf-export-mode .dcr-safety-total.negative {
  color: #dc2626 !important;
}

/* ============================================================
   MONTH END REPORTING STYLES
============================================================ */
.mer-waterfall-row {
  width: 75%;
  justify-content: flex-start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.mer-chart-box {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.mer-chart-box h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
}

.mer-chart-box canvas {
  width: 100% !important;
  height: 300px !important;
}

.mer-charts-row {
  width: 75%;
  justify-content: flex-start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.mer-chart-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.mer-chart-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
}

.mer-chart-container {
  height: 280px;
  margin-bottom: 20px;
}

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

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

.mer-tile {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.mer-tile-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mer-tile-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.mer-tile-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mer-tile-value.positive {
  color: #10b981;
}

.mer-tile-value.negative {
  color: #ef4444;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .mer-waterfall-row,
  .mer-charts-row {
  width: 75%;
  justify-content: flex-start;
    grid-template-columns: 1fr;
  }
  
  .mer-tiles-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mer-tiles-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .mer-tile-value {
    font-size: 16px;
  }
}

/* Enhanced Heatmap Job List Tooltips */
.heatmap-tooltip .tooltip-content {
  white-space: normal;
  max-width: 320px;
  max-height: 350px;
  overflow-y: auto;
}

.heatmap-job-tooltip {
  min-width: 280px;
}

.heatmap-job-tooltip .tooltip-header {
  font-weight: 600;
  font-size: 12px;
  color: var(--primary-color);
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.heatmap-job-tooltip .tooltip-summary {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.heatmap-job-tooltip .tooltip-job-list {
  max-height: 250px;
  overflow-y: auto;
}

.heatmap-job-tooltip .tooltip-job-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 11px;
}

.heatmap-job-tooltip .tooltip-job-row:last-child {
  border-bottom: none;
}

.heatmap-job-tooltip .job-number {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 50px;
}

.heatmap-job-tooltip .job-desc {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatmap-job-tooltip .job-margin {
  font-weight: 600;
  min-width: 45px;
  text-align: right;
}

.heatmap-job-tooltip .job-margin.positive {
  color: #059669;
}

.heatmap-job-tooltip .job-margin.low {
  color: #d97706;
}

.heatmap-job-tooltip .job-margin.negative {
  color: #dc2626;
}

[data-theme="dark"] .heatmap-job-tooltip .tooltip-job-row {
  border-bottom-color: rgba(255,255,255,0.05);
}

/* Month End Reporting Key Metrics */
.mer-metrics-row {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 24px;
  width: 70%;
}

/* MER Page AI Summary and Commentary panels - match metrics tiles width */
#merAiAnalysisPanel.dcr-ai-summary-panel,
#merCommentaryPanel.dcr-commentary-panel {
  width: 70%;
  max-width: 70%;
}


.mer-metric-card {
  flex: 1;
  min-width: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
  min-height: 85px;
}

/* Health-based gradient backgrounds */
.mer-metric-card.health-excellent {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.08) 100%);
  border-color: rgba(34, 197, 94, 0.3);
}
.mer-metric-card.health-good {
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.15) 0%, rgba(163, 230, 53, 0.08) 100%);
  border-color: rgba(132, 204, 22, 0.3);
}
.mer-metric-card.health-neutral {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.15) 0%, rgba(253, 224, 71, 0.08) 100%);
  border-color: rgba(250, 204, 21, 0.3);
}
.mer-metric-card.health-warning {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(253, 186, 116, 0.08) 100%);
  border-color: rgba(251, 146, 60, 0.3);
}
.mer-metric-card.health-critical {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(252, 165, 165, 0.08) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}

.mer-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mer-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.mer-metric-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.mer-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.mer-metric-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.mer-metric-compare {
  font-size: 10px;
  color: #64748b;
  margin-top: auto;
  padding-top: 6px;
  line-height: 1.3;
}

/* Stacked Deposits/Withdrawals display */
.cf-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.cf-stack .cf-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.cf-stack .cf-label {
  font-size: 10px;
  color: #64748b;
  min-width: 28px;
}
.cf-stack .cf-deposits {
  color: #16a34a;
  font-weight: 600;
}
.cf-stack .cf-withdrawals {
  color: #dc2626;
  font-weight: 600;
}
.cf-stack .cf-subtotal-line {
  border-bottom: 1px solid #64748b;
  padding-bottom: 3px;
  margin-bottom: 2px;
}
[data-theme="dark"] .cf-stack .cf-label,
body.dark-mode .cf-stack .cf-label {
  color: #94a3b8;
}

.mer-metric-compare .positive {
  color: #16a34a;
}

.mer-metric-compare .negative {
  color: #dc2626;
}

/* Dark mode */
[data-theme="dark"] .mer-metric-card,
body.dark-mode .mer-metric-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
}

/* Dark mode health gradients */
[data-theme="dark"] .mer-metric-card.health-excellent,
body.dark-mode .mer-metric-card.health-excellent {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
  border-color: rgba(34, 197, 94, 0.4);
}
[data-theme="dark"] .mer-metric-card.health-good,
body.dark-mode .mer-metric-card.health-good {
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.2) 0%, rgba(132, 204, 22, 0.05) 100%);
  border-color: rgba(132, 204, 22, 0.4);
}
[data-theme="dark"] .mer-metric-card.health-neutral,
body.dark-mode .mer-metric-card.health-neutral {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.2) 0%, rgba(250, 204, 21, 0.05) 100%);
  border-color: rgba(250, 204, 21, 0.4);
}
[data-theme="dark"] .mer-metric-card.health-warning,
body.dark-mode .mer-metric-card.health-warning {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.05) 100%);
  border-color: rgba(251, 146, 60, 0.4);
}
[data-theme="dark"] .mer-metric-card.health-critical,
body.dark-mode .mer-metric-card.health-critical {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .mer-metric-value,
body.dark-mode .mer-metric-value {
  color: #f1f5f9;
}

[data-theme="dark"] .mer-metric-label,
[data-theme="dark"] .mer-metric-compare,
body.dark-mode .mer-metric-label,
body.dark-mode .mer-metric-compare {
  color: #94a3b8;
}

/* Responsive */
@media (max-width: 1200px) {
  .mer-metrics-row {
    width: 100%;
    flex-wrap: wrap;
  }
  .mer-metric-card {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .mer-metrics-row {
    flex-direction: column;
  }
  .mer-metric-card {
    flex: 1 1 100%;
  }
}

/* MER Cash Flow metric styling */
.mer-cash-flow {
  font-size: 14px !important;
  display: flex;
  gap: 4px;
  align-items: center;
}

.mer-cash-flow .cf-deposits {
  color: #16a34a;
  font-weight: 600;
}

.mer-cash-flow .cf-withdrawals {
  color: #dc2626;
  font-weight: 600;
}

[data-theme="dark"] .mer-cash-flow .cf-deposits,
body.dark-mode .mer-cash-flow .cf-deposits {
  color: #4ade80;
}

[data-theme="dark"] .mer-cash-flow .cf-withdrawals,
body.dark-mode .mer-cash-flow .cf-withdrawals {
  color: #f87171;
}

/* Labor Chart Section */
.labor-chart-section {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-mode .labor-chart-section {
  background: var(--card-bg, #1e293b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.labor-chart-section .chart-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.labor-chart-section .chart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin: 0;
}

body.dark-mode .labor-chart-section .chart-title {
  color: var(--text-primary, #f1f5f9);
}

.labor-chart-section .chart-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.labor-chart-section .filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.labor-chart-section .filter-group label {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}

.labor-chart-section .date-input {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--input-bg, #ffffff);
  color: var(--text-primary, #1e293b);
}

body.dark-mode .labor-chart-section .date-input {
  background: var(--input-bg, #0f172a);
  border-color: var(--border-color, #334155);
  color: var(--text-primary, #f1f5f9);
}

.labor-chart-section .filter-select {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--input-bg, #ffffff);
  color: var(--text-primary, #1e293b);
}

body.dark-mode .labor-chart-section .filter-select {
  background: var(--input-bg, #0f172a);
  border-color: var(--border-color, #334155);
  color: var(--text-primary, #f1f5f9);
}

@media (max-width: 768px) {
  .labor-chart-section .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .labor-chart-section .chart-filters {
    width: 100%;
  }
  
  .labor-chart-section .filter-group {
    flex: 1 1 auto;
    min-width: 120px;
  }
  
  .labor-chart-section .filter-select {
    width: 100% !important;
  }
}

/* Hide datalist dropdown arrows from autocomplete inputs */
input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
}

input[list]::-webkit-list-button {
  display: none !important;
}

/* Firefox */
input[list] {
  -moz-appearance: textfield;
}

/* Edge/IE */
input[list]::-ms-clear,
input[list]::-ms-reveal {
  display: none;
}


/* MER Period Selector - Polished Card Style */
.mer-period-card {
  display: inline-flex;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mer-period-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mer-period-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
  border-radius: 10px;
  color: white;
  flex-shrink: 0;
}

.mer-period-selector label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.mer-period-dropdown {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--primary-color);
  cursor: pointer;
  min-width: 140px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  transition: all 0.2s ease;
}

.mer-period-dropdown:hover {
  background-color: rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.mer-period-dropdown:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Mobile responsiveness for period selector */
@media (max-width: 480px) {
  .mer-period-card {
    padding: 12px 16px;
    margin-bottom: 16px;
  }
  
  .mer-period-selector {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  
  .mer-period-icon {
    display: none;
  }
  
  .mer-period-selector label {
    font-size: 14px;
  }
  
  .mer-period-dropdown {
    width: 100%;
    min-width: unset;
    text-align: center;
    padding: 12px 16px;
    font-size: 16px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .mer-period-card {
    padding: 14px 20px;
  }
  
  .mer-period-icon {
    width: 36px;
    height: 36px;
  }
  
  .mer-period-dropdown {
    min-width: 130px;
  }
}

/* MER Grade Card */
.mer-grade-card {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.mer-grade-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
  border-radius: 16px;
  color: white;
  flex-shrink: 0;
}

.mer-grade-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mer-grade-letter {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.mer-grade-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mer-grade-score {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Grade-based conditional fill colors */
.mer-grade-card.grade-a-plus,
.mer-grade-card.grade-a {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.03) 100%);
  border-color: rgba(34, 197, 94, 0.4);
}
.mer-grade-card.grade-a-plus .mer-grade-icon,
.mer-grade-card.grade-a .mer-grade-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.mer-grade-card.grade-a-plus .mer-grade-letter,
.mer-grade-card.grade-a .mer-grade-letter {
  color: #16a34a;
}

.mer-grade-card.grade-a-minus {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
  border-color: rgba(34, 197, 94, 0.3);
}
.mer-grade-card.grade-a-minus .mer-grade-icon {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}
.mer-grade-card.grade-a-minus .mer-grade-letter {
  color: #22c55e;
}

.mer-grade-card.grade-b-plus,
.mer-grade-card.grade-b,
.mer-grade-card.grade-b-minus {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.03) 100%);
  border-color: rgba(59, 130, 246, 0.4);
}
.mer-grade-card.grade-b-plus .mer-grade-icon,
.mer-grade-card.grade-b .mer-grade-icon,
.mer-grade-card.grade-b-minus .mer-grade-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.mer-grade-card.grade-b-plus .mer-grade-letter,
.mer-grade-card.grade-b .mer-grade-letter,
.mer-grade-card.grade-b-minus .mer-grade-letter {
  color: #2563eb;
}

.mer-grade-card.grade-c-plus,
.mer-grade-card.grade-c,
.mer-grade-card.grade-c-minus {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 100%);
  border-color: rgba(245, 158, 11, 0.4);
}
.mer-grade-card.grade-c-plus .mer-grade-icon,
.mer-grade-card.grade-c .mer-grade-icon,
.mer-grade-card.grade-c-minus .mer-grade-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.mer-grade-card.grade-c-plus .mer-grade-letter,
.mer-grade-card.grade-c .mer-grade-letter,
.mer-grade-card.grade-c-minus .mer-grade-letter {
  color: #d97706;
}

.mer-grade-card.grade-d-plus,
.mer-grade-card.grade-d,
.mer-grade-card.grade-d-minus {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0.03) 100%);
  border-color: rgba(249, 115, 22, 0.4);
}
.mer-grade-card.grade-d-plus .mer-grade-icon,
.mer-grade-card.grade-d .mer-grade-icon,
.mer-grade-card.grade-d-minus .mer-grade-icon {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.mer-grade-card.grade-d-plus .mer-grade-letter,
.mer-grade-card.grade-d .mer-grade-letter,
.mer-grade-card.grade-d-minus .mer-grade-letter {
  color: #ea580c;
}

.mer-grade-card.grade-f {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.03) 100%);
  border-color: rgba(239, 68, 68, 0.4);
}
.mer-grade-card.grade-f .mer-grade-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.mer-grade-card.grade-f .mer-grade-letter {
  color: #dc2626;
}

/* Dark mode adjustments for grade card */
[data-theme="dark"] .mer-grade-card.grade-a-plus .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-a .mer-grade-letter {
  color: #4ade80;
}
[data-theme="dark"] .mer-grade-card.grade-a-minus .mer-grade-letter {
  color: #86efac;
}
[data-theme="dark"] .mer-grade-card.grade-b-plus .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-b .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-b-minus .mer-grade-letter {
  color: #60a5fa;
}
[data-theme="dark"] .mer-grade-card.grade-c-plus .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-c .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-c-minus .mer-grade-letter {
  color: #fbbf24;
}
[data-theme="dark"] .mer-grade-card.grade-d-plus .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-d .mer-grade-letter,
[data-theme="dark"] .mer-grade-card.grade-d-minus .mer-grade-letter {
  color: #fb923c;
}
[data-theme="dark"] .mer-grade-card.grade-f .mer-grade-letter {
  color: #f87171;
}

/* Grade info link */
.mer-grade-info-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.mer-grade-info-link:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.mer-grade-info-link svg {
  opacity: 0.8;
}

/* Grade details modal styles */
.grade-summary-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.08) 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

.grade-summary-letter {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.grade-summary-score {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
}

.grade-details-table,
.grade-thresholds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.grade-details-table th,
.grade-details-table td,
.grade-thresholds-table th,
.grade-thresholds-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.grade-details-table th,
.grade-thresholds-table th {
  background: var(--card-bg);
  font-weight: 600;
  color: var(--text-color);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grade-details-table td:nth-child(2),
.grade-details-table td:nth-child(4),
.grade-details-table td:nth-child(5),
.grade-thresholds-table td:not(:first-child) {
  text-align: center;
}

.grade-details-table tbody tr:hover,
.grade-thresholds-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.05);
}

.grade-score-bar {
  display: inline-block;
  height: 8px;
  border-radius: 4px;
  background: var(--primary-color);
  margin-right: 8px;
  vertical-align: middle;
}

.grade-score-excellent { color: #16a34a; }
.grade-score-good { color: #2563eb; }
.grade-score-average { color: #d97706; }
.grade-score-poor { color: #ea580c; }
.grade-score-failing { color: #dc2626; }

/* Mobile responsiveness for grade card */
@media (max-width: 480px) {
  .mer-grade-card {
    padding: 16px 20px;
    gap: 16px;
    flex-wrap: wrap;
  }
  
  .mer-grade-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  
  .mer-grade-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .mer-grade-letter {
    font-size: 36px;
  }
  
  .mer-grade-label {
    font-size: 12px;
  }
  
  .mer-grade-score {
    font-size: 11px;
  }
  
  .mer-grade-info-link {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  
  .grade-summary-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .grade-details-table,
  .grade-thresholds-table {
    font-size: 12px;
  }
  
  .grade-details-table th,
  .grade-details-table td,
  .grade-thresholds-table th,
  .grade-thresholds-table td {
    padding: 8px 6px;
  }
}

/* MER Grade Row - Grade Card + Trend Chart side by side */
.mer-grade-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mer-grade-row .mer-grade-card {
  margin-bottom: 0;
  flex-shrink: 0;
}

.mer-grade-trend-card {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mer-grade-trend-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mer-grade-trend-card canvas {
  width: 100% !important;
  height: 80px !important;
}

@media (max-width: 600px) {
  .mer-grade-row {
    flex-direction: column;
  }
  
  .mer-grade-trend-card {
    max-width: 100%;
  }
}

/* Enhanced MER Grade Trend Card */
.mer-grade-trend-card {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.03) 100%);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.mer-grade-trend-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.mer-grade-trend-card:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
  transform: translateY(-2px);
}

.mer-grade-trend-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mer-grade-trend-header::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

.mer-grade-trend-card canvas {
  width: 100% !important;
  height: 100px !important;
}

.dark-mode .mer-grade-trend-card {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.08) 100%);
}

/* MER Page Comprehensive Mobile Styles */
@media (max-width: 768px) {
  /* Period and Grade Row */
  .mer-grade-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .mer-grade-card {
    width: 100%;
    display: flex;
    padding: 14px 18px;
    gap: 14px;
  }
  
  .mer-grade-icon {
    width: 48px;
    height: 48px;
  }
  
  .mer-grade-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .mer-grade-letter {
    font-size: 36px;
  }
  
  .mer-grade-score {
    font-size: 12px;
  }
  
  .mer-grade-trend-card {
    max-width: 100%;
    min-width: unset;
  }
  
  /* AI Summary Panel */
  .dcr-ai-summary-panel {
    padding: 16px;
  }
  
  .dcr-ai-summary-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .dcr-ai-btn-group {
    width: 100%;
  }
  
  .dcr-ai-run-btn {
    width: 100%;
    padding: 12px 16px;
  }
  
  /* Metric Cards Row 1 and Row 2 */
  .mer-metrics-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .mer-metric-card {
    flex: 1 1 100%;
    padding: 14px 16px;
  }
  
  .mer-metric-icon {
    width: 40px;
    height: 40px;
  }
  
  .mer-metric-value {
    font-size: 18px;
  }
  
  .mer-metric-label {
    font-size: 12px;
  }
  
  .mer-metric-compare {
    font-size: 11px;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  /* Waterfall Charts */
  .mer-waterfall-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .mer-chart-box {
    width: 100%;
    min-height: 280px;
  }
  
  .mer-chart-box canvas {
    height: 250px !important;
  }
  
  /* Revenue Chart */
  .mer-chart-section {
    padding: 16px;
  }
  
  .mer-chart-section h3 {
    font-size: 14px;
  }
  
  /* Tiles Row */
  .mer-tiles-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .mer-tile {
    padding: 14px 16px;
  }
  
  .mer-tile-label {
    font-size: 12px;
  }
  
  .mer-tile-value {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .mer-grade-card {
    padding: 12px 14px;
    gap: 12px;
  }
  
  .mer-grade-icon {
    width: 40px;
    height: 40px;
  }
  
  .mer-grade-letter {
    font-size: 32px;
  }
  
  .mer-grade-info-link {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .mer-metric-card {
    padding: 12px 14px;
  }
  
  .mer-metric-icon {
    width: 36px;
    height: 36px;
  }
  
  .mer-metric-value {
    font-size: 16px;
  }
  
  .dcr-ai-summary-content {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .mer-chart-box canvas {
    height: 220px !important;
  }
  
  .mer-grade-trend-card canvas {
    height: 80px !important;
  }
}

/* Tablet landscape improvements */
@media (min-width: 769px) and (max-width: 1024px) {
  .mer-metrics-row {
    flex-wrap: wrap;
  }
  
  .mer-metric-card {
    flex: 1 1 calc(50% - 8px);
  }
  
  .mer-waterfall-row {
    gap: 16px;
  }
  
  .mer-chart-box {
    min-height: 300px;
  }
}

/* OUB Status Column Styles */
.status-col {
  min-width: 180px;
  max-width: 220px;
}

.oub-status-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.oub-status-text {
  font-size: 0.85em;
  color: var(--text-secondary, #64748b);
}

.oub-status-edit-link {
  font-size: 0.75em;
  color: var(--accent-color, #3b82f6);
  text-decoration: none;
  cursor: pointer;
}

.oub-status-edit-link:hover {
  text-decoration: underline;
}

.oub-status-editor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oub-status-select {
  font-size: 0.8em;
  padding: 4px 6px;
  border: 1px solid var(--border-color, #334155);
  border-radius: 4px;
  background: var(--bg-secondary, #1e293b);
  color: var(--text-primary, #f1f5f9);
  width: 100%;
}

.oub-status-other-input {
  font-size: 0.8em;
  padding: 4px 6px;
  border: 1px solid var(--border-color, #334155);
  border-radius: 4px;
  background: var(--bg-secondary, #1e293b);
  color: var(--text-primary, #f1f5f9);
  width: 100%;
}

.oub-status-save-btn {
  font-size: 0.75em;
  padding: 3px 8px;
  background: var(--accent-color, #3b82f6);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-start;
}

.oub-status-save-btn:hover {
  background: var(--accent-hover, #2563eb);
}

/* MER AI Summary Structured Format */
#merAiAnalysisContent p {
  margin: 0 0 6px 0;
  line-height: 1.5;
}

#merAiAnalysisContent p strong {
  color: var(--accent-color, #3b82f6);
  font-weight: 600;
}

#merAiAnalysisContent ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

#merAiAnalysisContent ul li {
  margin-bottom: 4px;
  font-size: 0.9em;
  color: var(--text-secondary, #94a3b8);
}

#merAiAnalysisContent ul li strong {
  color: var(--text-primary, #e2e8f0);
  font-weight: 500;
}

/* MER Summary Edit Buttons */
.dcr-ai-edit-btn,
.dcr-ai-save-btn,
.dcr-ai-cancel-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dcr-ai-edit-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.dcr-ai-edit-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dcr-ai-save-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.dcr-ai-save-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.dcr-ai-cancel-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.dcr-ai-cancel-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dcr-ai-summary-content[contenteditable="true"] {
  min-height: 150px;
  cursor: text;
}

/* Dark mode - Save/Cancel/Edit buttons */
[data-theme="dark"] .dcr-ai-save-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .dcr-ai-save-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.5);
}

[data-theme="dark"] .dcr-ai-cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}

[data-theme="dark"] .dcr-ai-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

[data-theme="dark"] .dcr-ai-edit-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}

[data-theme="dark"] .dcr-ai-edit-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* ============================================================
   IS FORECAST PAGE STYLES
============================================================ */

.forecast-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.forecast-view-toggle {
  display: flex;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--border-primary);
}

.forecast-view-toggle .view-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.forecast-view-toggle .view-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.forecast-view-toggle .view-btn.active {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.forecast-status {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.forecast-status.has-changes {
  color: #f59e0b;
  font-weight: 500;
}

.forecast-timestamp {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: auto;
}

.forecast-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-dot.actual {
  background: #e8f5e9;
  border: 1px solid #4caf50;
}

.legend-dot.forecast {
  background: #e3f2fd;
  border: 1px solid #2196f3;
}

.legend-dot.comment {
  background: #fff3e0;
  border: 1px solid #ff9800;
}

.forecast-table-wrapper {
  overflow-x: auto;
  max-height: calc(100vh - 280px);
  position: relative;
}

.forecast-table {
  width: auto;
  border-collapse: collapse;
  font-size: 0.8rem;
  table-layout: auto;
}

.forecast-table th,
.forecast-table td {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.forecast-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card-bg);
}

.forecast-table th {
  background: var(--card-bg);
  font-weight: 600;
  text-align: center;
}

.forecast-table th.account-col {
  width: 250px;
  text-align: left;
}

.forecast-table th.method-col {
  width: 100px;
}

.forecast-table th.month-col {
  min-width: 70px;
  width: auto;
}

.forecast-table td {
  min-width: 60px;
  padding: 0.4rem 0.3rem;
}

.forecast-table th.actual-month {
  background: #e8f5e9;
}

.forecast-table th.forecast-month {
  background: #e3f2fd;
}

.frozen-col {
  position: sticky;
  left: 0;
  background: var(--card-bg);
  z-index: 10;
}

.forecast-header-row td {
  background: linear-gradient(135deg, #e8f4fd 0%, #d4e8f8 100%);
  color: #1a1a2e;
  font-weight: 600;
  padding: 0.6rem;
}

[data-theme="dark"] .forecast-header-row td,
body.dark-mode .forecast-header-row td {
  background: var(--primary-gradient);
  color: white;
}

.forecast-subtotal-row td {
  background: rgba(var(--primary-rgb), 0.1);
  border-top: 2px solid var(--primary-color);
}

.forecast-subtotal-row td.frozen-col {
  position: sticky;
  left: 0;
  z-index: 15;
  background: #e8f0fc;
}

[data-theme="dark"] .forecast-subtotal-row td.frozen-col,
body.dark-mode .forecast-subtotal-row td.frozen-col {
  background: #2a3a4f;
}
/* Collapsible forecast row styles */
.forecast-subtotal-row.expandable-row {
  cursor: pointer;
}

.forecast-subtotal-row.expandable-row:hover td {
  background: rgba(var(--primary-rgb), 0.2);
}

[data-theme="dark"] .forecast-subtotal-row.expandable-row:hover td,
body.dark-mode .forecast-subtotal-row.expandable-row:hover td {
  background: rgba(var(--primary-rgb), 0.25);
}

.forecast-chevron {
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--primary-color);
}

.forecast-chevron.collapsed {
  transform: rotate(0deg);
}

.forecast-spacer-row td {
  height: 20px;
  background: transparent !important;
  border: none !important;
}


.forecast-calculated-row td {
  background: rgba(var(--primary-rgb), 0.15);
  border-top: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.forecast-calculated-row td.frozen-col {
  position: sticky;
  left: 0;
  z-index: 15;
  background: #d4e4f7;
}

[data-theme="dark"] .forecast-calculated-row td.frozen-col,
body.dark-mode .forecast-calculated-row td.frozen-col {
  background: #354a60;
}

.forecast-account-row td.level-1 {
  padding-left: 1.5rem;
}

.actual-cell {
  background: #f8fdf8;
  text-align: right;
}

.forecast-cell {
  background: #f8fbff;
  text-align: right;
  position: relative;
}

.forecast-cell.has-comment {
  background: #fffbf0;
}

.forecast-input {
  width: 100%;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  text-align: right;
  font-size: 0.8rem;
  transition: border-color 0.2s;
}

.forecast-input:hover {
  border-color: var(--border-color);
}

.forecast-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: white;
}

.method-col {
  text-align: center;
}

.method-select {
  font-size: 0.75rem;
  padding: 0.2rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.method-fixed {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.comment-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  opacity: 0.5;
  padding: 2px;
  line-height: 1;
}

.comment-btn:hover,
.comment-btn.has-comment {
  opacity: 1;
}

.comment-indicator {
  color: #ff9800;
  font-weight: bold;
  margin-left: 4px;
}

.positive-value {
  color: #2e7d32;
}

.negative-value {
  color: #c62828;
}

#forecastCommentModal .modal-content.small-modal {
  max-width: 400px;
}

#forecastCommentInput {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.9rem;
  resize: vertical;
}

#forecastCommentModal .modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.loading-cell,
.error-cell {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.error-cell {
  color: #c62828;
}

/* Dark mode adjustments */
[data-theme="dark"] .forecast-table th.actual-month {
  background: rgba(76, 175, 80, 0.2);
}

[data-theme="dark"] .forecast-table th.forecast-month {
  background: rgba(33, 150, 243, 0.2);
}

[data-theme="dark"] .actual-cell {
  background: rgba(76, 175, 80, 0.1);
}

[data-theme="dark"] .forecast-cell {
  background: rgba(33, 150, 243, 0.1);
}

[data-theme="dark"] .forecast-cell.has-comment {
  background: rgba(255, 152, 0, 0.15);
}

[data-theme="dark"] .forecast-input {
  color: var(--text-color);
  background: transparent;
}

[data-theme="dark"] .forecast-input:focus {
  background: var(--input-bg);
  color: var(--text-color);
  border-color: var(--primary-color);
}

[data-theme="dark"] .forecast-input:hover {
  border-color: var(--border-color);
}

[data-theme="dark"] .method-select {
  background: var(--input-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .legend-dot.actual {
  background: rgba(76, 175, 80, 0.3);
}

[data-theme="dark"] .legend-dot.forecast {
  background: rgba(33, 150, 243, 0.3);
}

[data-theme="dark"] .legend-dot.comment {
  background: rgba(255, 152, 0, 0.3);
}

/* ============================================================
   VISUAL POLISH ENHANCEMENTS
============================================================ */

/* 1. Animated Number Counter Styles */
.animated-value {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.animated-value.counting {
  opacity: 0.7;
}

/* 2. Skeleton Loading States */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--border-primary) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 1em;
  width: 80%;
  margin: 0.5em 0;
}

.skeleton-value {
  height: 2em;
  width: 60%;
  margin: 0.3em 0;
}

.skeleton-chart {
  height: 200px;
  width: 100%;
  border-radius: 8px;
}

.skeleton-row {
  height: 40px;
  width: 100%;
  margin: 4px 0;
}

.skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Card skeleton layout */
.skeleton-card {
  padding: 20px;
  background: var(--card-bg);
  border-radius: 8px;
}

.skeleton-card .skeleton-title {
  height: 14px;
  width: 40%;
  margin-bottom: 12px;
}

.skeleton-card .skeleton-number {
  height: 32px;
  width: 70%;
}

/* 3. Micro-interactions - Enhanced hover effects */
.card, .summary-tile, .stat-card, .kpi-tile, .overview-metric-tile, .metric-tile {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover, .summary-tile:hover, .stat-card:hover, .kpi-tile:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overview-metric-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Button micro-interactions */
.btn, button:not(.nav-item):not(.config-header):not(.sidebar-collapse-btn) {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn:active:not(:disabled), .ribbon-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* Glow effect on interactive elements */
.glow-hover:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Table row micro-interactions */
.data-table tbody tr, .is-table tbody tr, .bs-table tbody tr {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.data-table tbody tr:hover, .is-table tbody tr:hover, .bs-table tbody tr:hover {
  background-color: var(--bg-hover);
}

/* 4. Gradient accent borders */
.gradient-border {
  position: relative;
  border: none !important;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-primary), #8b5cf6, #ec4899);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-border:focus-within::before,
.gradient-border:hover::before,
.gradient-border.active::before {
  opacity: 1;
}

/* Focus state gradient borders for inputs */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 0 0 4px rgba(59, 130, 246, 0.1);
  border-color: var(--color-primary) !important;
}

/* Selected nav item gradient accent */
.nav-item.active {
  position: relative;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--color-primary), #8b5cf6);
  border-radius: 0 2px 2px 0;
}

/* 5. Progressive data loading - Fade in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

.data-loaded .card,
.data-loaded .overview-metric-tile,
.data-loaded .summary-tile {
  animation: fadeInUp 0.4s ease-out forwards;
}

.data-loaded .card:nth-child(1) { animation-delay: 0ms; }
.data-loaded .card:nth-child(2) { animation-delay: 50ms; }
.data-loaded .card:nth-child(3) { animation-delay: 100ms; }
.data-loaded .card:nth-child(4) { animation-delay: 150ms; }
.data-loaded .card:nth-child(5) { animation-delay: 200ms; }
.data-loaded .card:nth-child(6) { animation-delay: 250ms; }

/* Staggered animation for overview tiles */
.overview-metrics-grid.data-loaded .overview-metric-tile:nth-child(1) { animation-delay: 0ms; }
.overview-metrics-grid.data-loaded .overview-metric-tile:nth-child(2) { animation-delay: 60ms; }
.overview-metrics-grid.data-loaded .overview-metric-tile:nth-child(3) { animation-delay: 120ms; }
.overview-metrics-grid.data-loaded .overview-metric-tile:nth-child(4) { animation-delay: 180ms; }
.overview-metrics-grid.data-loaded .overview-metric-tile:nth-child(5) { animation-delay: 240ms; }
.overview-metrics-grid.data-loaded .overview-metric-tile:nth-child(6) { animation-delay: 300ms; }

/* Chart fade in */
.chart-loaded {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Table rows stagger */
.table-loaded tbody tr {
  opacity: 0;
  animation: fadeInUp 0.3s ease-out forwards;
}

.table-loaded tbody tr:nth-child(1) { animation-delay: 0ms; }
.table-loaded tbody tr:nth-child(2) { animation-delay: 30ms; }
.table-loaded tbody tr:nth-child(3) { animation-delay: 60ms; }
.table-loaded tbody tr:nth-child(4) { animation-delay: 90ms; }
.table-loaded tbody tr:nth-child(5) { animation-delay: 120ms; }
.table-loaded tbody tr:nth-child(6) { animation-delay: 150ms; }
.table-loaded tbody tr:nth-child(7) { animation-delay: 180ms; }
.table-loaded tbody tr:nth-child(8) { animation-delay: 210ms; }
.table-loaded tbody tr:nth-child(9) { animation-delay: 240ms; }
.table-loaded tbody tr:nth-child(10) { animation-delay: 270ms; }
.table-loaded tbody tr:nth-child(n+11) { animation-delay: 300ms; }

/* Dark mode adjustments for skeleton */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
}

/* Dark mode glow adjustments */
[data-theme="dark"] .card:hover, 
[data-theme="dark"] .summary-tile:hover, 
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .kpi-tile:hover {
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .overview-metric-tile:hover {
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.2), 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* AI Period Selector */
.ai-period-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 8px;
  padding: 6px 12px;
}

.ai-period-selector label {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.ai-period-dropdown {
  background: var(--bg-tertiary, #f9fafb);
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary, #1f2937);
  cursor: pointer;
  min-width: 160px;
}

.ai-period-dropdown:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.ai-period-dropdown option {
  background: var(--card-bg, #fff);
  color: var(--text-primary, #1f2937);
}

/* Dark mode support */
[data-theme="dark"] .ai-period-selector {
  background: var(--card-bg, #1f2937);
  border-color: var(--border-primary, #374151);
}

[data-theme="dark"] .ai-period-dropdown {
  background: var(--bg-tertiary, #111827);
  border-color: var(--border-primary, #374151);
  color: var(--text-primary, #f3f4f6);
}

/* Responsive */
@media (max-width: 768px) {
  .ai-period-selector {
    flex-direction: column;
    gap: 4px;
  }
  
  .ai-period-selector label {
    font-size: 11px;
  }
  
  .ai-period-dropdown {
    min-width: 140px;
    font-size: 12px;
  }
}

/* Job Overview Trend Charts Row */
.jo-trend-charts-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.jo-trend-chart-container {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  min-height: 280px;
}

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

.jo-trend-chart-container .chart-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.jo-trend-chart-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 10px;
}

.jo-trend-chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.jo-trend-chart-wrapper {
  position: relative;
  height: 220px;
}

.jo-trend-chart-wrapper canvas {
  max-height: 220px;
}

@media (max-width: 900px) {
  .jo-trend-charts-row {
    flex-direction: column;
  }
  
  .jo-trend-chart-container {
    min-height: 250px;
  }
  
  .jo-trend-chart-legend {
    display: none;
  }
}

/* AI Analysis Edit Button Spacing */
.ai-edit-btn,
.ai-save-btn,
.ai-cancel-btn,
.dcr-ai-edit-btn {
  margin: 12px 0 12px 12px;
}

.ai-analysis-buttons {
  padding: 8px 12px 12px 12px;
}

/* DCR/MER AI Edit Button Spacing */
.dcr-ai-edit-btn,
.dcr-ai-save-btn,
.dcr-ai-cancel-btn {
  margin: 12px 0 12px 12px !important;
}

/* Payments page - content-sized table and filters */
#payments .page-filter-bar {
  margin-bottom: 16px;
  width: fit-content;
}

#payments .job-table-container {
  width: fit-content;
}

#payments #paymentsTable {
  width: auto;
  table-layout: auto;
}

#payments #paymentsTable th,
#payments #paymentsTable td {
  white-space: nowrap;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* Cost Codes page - width alignment for filters and chart */
#costCodes .pm-tabs-bar,
#costCodes .status-filter-bar {
  max-width: 70%;
}

#costCodes .cc-charts-row {
  max-width: 70%;
}

#costCodes .page-filter-bar {
  display: inline-block;
  width: 70%;
  max-width: 70%;
}

#costCodes .job-table-container {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

#costCodes #costCodesTable {
  width: auto;
  table-layout: auto;
}

/* Mobile: allow full width on small screens */
@media (max-width: 768px) {
  #costCodes .pm-tabs-bar,
  #costCodes .status-filter-bar,
  #costCodes .cc-charts-row,
  #costCodes .page-filter-bar {
    max-width: 100%;
    width: 100%;
  }
  
  #costCodes .page-filter-bar {
    display: flex;
  }
  
  #costCodes .job-table-container {
    display: block;
    width: 100%;
  }
  
  #costCodes #costCodesTable {
    width: 100%;
  }
}

/* ============================================
   2026 Goal Tracking Page Styles
   ============================================ */

/* Company Objective Card */
.goal-objective-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  color: white;
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(30, 58, 95, 0.3);
}

.goal-objective-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #93c5fd;
}

.goal-objective-text {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
  color: #e2e8f0;
}

.goal-objective-text strong {
  color: #fbbf24;
  font-weight: 600;
}

/* Goal Section */
.goal-section {
  margin-bottom: 32px;
}

.goal-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
}

/* Financial Metrics Grid */
.goal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.goal-metric-card {
  background: var(--card-bg, white);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.goal-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.goal-metric-card.goal-metric-pending {
  opacity: 0.7;
  border-style: dashed;
}

.goal-metric-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.goal-metric-icon {
  font-size: 1.5rem;
}

.goal-metric-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  flex: 1;
}

.goal-health-indicator {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
}

.goal-health-indicator.on-track {
  background: #dcfce7;
  color: #166534;
}

.goal-health-indicator.at-risk {
  background: #fef3c7;
  color: #92400e;
}

.goal-health-indicator.behind {
  background: #fee2e2;
  color: #991b1b;
}

.goal-metric-target {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 12px;
}

.goal-metric-current {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.goal-metric-label {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

.goal-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
}

.goal-progress-bar {
  height: 8px;
  background: var(--bg-tertiary, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.goal-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-out;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.goal-progress-fill.on-track {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.goal-progress-fill.at-risk {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.goal-progress-fill.behind {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.goal-metric-pace {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}

/* Strategic Goals Cards Grid */
.goal-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.goal-card {
  background: var(--card-bg, white);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.goal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.goal-card.goal-clients { border-left-color: #3b82f6; }
.goal-card.goal-people { border-left-color: #8b5cf6; }
.goal-card.goal-unity { border-left-color: #06b6d4; }
.goal-card.goal-safety { border-left-color: #22c55e; }
.goal-card.goal-community { border-left-color: #f59e0b; }
.goal-card.goal-operations { border-left-color: #6366f1; }

.goal-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.goal-card-icon {
  font-size: 1.5rem;
}

.goal-card-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  margin: 0;
}

.goal-card-target {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-color, #3b82f6);
  margin-bottom: 8px;
}

.goal-card-description {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.6;
  margin: 0;
}

/* Footer */
.goal-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  text-align: right;
}

.goal-last-updated {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin: 0;
}

/* Dark Mode */
[data-theme="dark"] .goal-objective-card,
body.dark-mode .goal-objective-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}

[data-theme="dark"] .goal-metric-card,
body.dark-mode .goal-metric-card,
[data-theme="dark"] .goal-card,
body.dark-mode .goal-card {
  background: var(--card-bg, #1e293b);
  border-color: var(--border-color, #334155);
}

[data-theme="dark"] .goal-health-indicator.on-track,
body.dark-mode .goal-health-indicator.on-track {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .goal-health-indicator.at-risk,
body.dark-mode .goal-health-indicator.at-risk {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .goal-health-indicator.behind,
body.dark-mode .goal-health-indicator.behind {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .goal-objective-card {
    padding: 20px;
  }
  
  .goal-objective-text {
    font-size: 1rem;
  }
  
  .goal-metrics-grid,
  .goal-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Year Progress Indicator */
.goal-year-progress {
  background: var(--card-bg, white);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.goal-year-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.goal-year-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}

.goal-year-percent {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-color, #3b82f6);
}

.goal-year-bar {
  position: relative;
  height: 10px;
  background: var(--bg-tertiary, #e5e7eb);
  border-radius: 5px;
  overflow: visible;
}

.goal-year-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 5px;
  transition: width 0.8s ease-out;
}

.goal-year-marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 18px;
  background: #1f2937;
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.goal-year-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}

/* Quick Financial Summary */
.goal-quick-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: var(--card-bg, white);
  border-radius: 12px;
  padding: 20px 32px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
}

.goal-quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 120px;
}

.goal-quick-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  line-height: 1.2;
}

.goal-quick-stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 4px;
}

.goal-quick-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-color, #e5e7eb);
}

/* Progress bar animation */
.goal-progress-fill {
  animation: progressFadeIn 0.8s ease-out;
}

@keyframes progressFadeIn {
  from {
    width: 0%;
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* Card hover animations */
.goal-metric-card,
.goal-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dark mode for new elements */
[data-theme="dark"] .goal-year-progress,
body.dark-mode .goal-year-progress,
[data-theme="dark"] .goal-quick-stats,
body.dark-mode .goal-quick-stats {
  background: var(--card-bg, #1e293b);
  border-color: var(--border-color, #334155);
}

[data-theme="dark"] .goal-year-marker,
body.dark-mode .goal-year-marker {
  background: #e2e8f0;
}

/* Mobile responsive for new elements */
@media (max-width: 768px) {
  .goal-quick-stats {
    gap: 16px;
    padding: 16px;
  }
  
  .goal-quick-stat {
    min-width: 80px;
  }
  
  .goal-quick-stat-value {
    font-size: 1.25rem;
  }
  
  .goal-quick-stat-divider {
    display: none;
  }
}

/* Fix job overview charts on mobile */
@media (max-width: 900px) {
  .jo-trend-chart-wrapper {
    height: 200px;
    min-height: 200px;
  }
  
  .jo-trend-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: 200px;
  }
}

@media (max-width: 600px) {
  .jo-trend-chart-wrapper {
    height: 180px;
    min-height: 180px;
  }
  
  .jo-trend-chart-wrapper canvas {
    max-height: 180px;
  }
}

/* Additional mobile fixes for job overview charts */
@media (max-width: 900px) {
  .jo-trend-chart-container {
    width: 100%;
    flex: none;
  }
}

/* Goal Tracking Page - Enhanced Mobile Responsive Styles */
@media (max-width: 768px) {
  #goalTracking2026 {
    padding: 12px;
  }
  
  #goalTracking2026 h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }
  
  #goalTracking2026 .section-description {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }
  
  .goal-objective-card {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .goal-objective-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  
  .goal-objective-text {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .goal-year-progress {
    padding: 12px 16px;
    margin-bottom: 16px;
  }
  
  .goal-quick-stats {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .goal-quick-stat {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
  }
  
  .goal-quick-stat:last-child {
    border-bottom: none;
  }
  
  .goal-quick-stat-value {
    font-size: 1.25rem;
    order: 2;
  }
  
  .goal-quick-stat-label {
    font-size: 0.85rem;
    order: 1;
    margin-top: 0;
  }
  
  .goal-quick-stat-divider {
    display: none;
  }
  
  .goal-section {
    margin-bottom: 16px;
  }
  
  .goal-section-title {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  
  .goal-metrics-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .goal-metric-card {
    padding: 14px;
    min-height: auto;
  }
  
  .goal-metric-header {
    margin-bottom: 8px;
  }
  
  .goal-metric-icon {
    font-size: 1.25rem;
  }
  
  .goal-metric-name {
    font-size: 0.95rem;
  }
  
  .goal-health-indicator {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  
  .goal-metric-target {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }
  
  .goal-metric-current {
    margin-bottom: 8px;
  }
  
  .goal-metric-value {
    font-size: 1.25rem;
  }
  
  .goal-progress-bar {
    height: 6px;
    margin-bottom: 6px;
  }
  
  .goal-metric-pace {
    font-size: 0.75rem;
  }
  
  .goal-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .goal-card {
    padding: 14px;
  }
  
  .goal-card-header {
    margin-bottom: 8px;
  }
  
  .goal-card-icon {
    font-size: 1.25rem;
  }
  
  .goal-card-header h4 {
    font-size: 1rem;
  }
  
  .goal-card-target {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }
  
  .goal-card-description {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  #goalTracking2026 {
    padding: 8px;
  }
  
  #goalTracking2026 h2 {
    font-size: 1.25rem;
  }
  
  .goal-objective-card {
    padding: 12px;
  }
  
  .goal-objective-title {
    font-size: 0.9rem;
  }
  
  .goal-objective-text {
    font-size: 0.85rem;
  }
  
  .goal-metric-card,
  .goal-card {
    padding: 12px;
  }
  
  .goal-metric-value {
    font-size: 1.1rem;
  }
  
  .goal-quick-stat-value {
    font-size: 1.1rem;
  }
}

/* ============================================================
   WORKFORCE DASHBOARD STYLES
============================================================= */

.workforce-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.workforce-kpis .kpi-tile {
  flex: 1;
  min-width: 150px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.workforce-kpis .kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.workforce-kpis .kpi-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.workforce-kpis .kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.workforce-kpis .kpi-subvalue {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.8;
}

.workforce-charts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}

.workforce-charts-row .chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.workforce-charts-row .chart-card.half-width {
  flex: 1;
  min-width: 300px;
}

.workforce-charts-row .chart-card.quarter-width {
  flex: 1;
  min-width: 200px;
}

.workforce-charts-row .chart-card.third-width {
  flex: 1;
  min-width: 250px;
}

.workforce-charts-row .chart-card.third-width .chart-wrapper {
  height: 220px;
}

.workforce-charts-row .chart-card.full-width {
  width: 100%;
}

.workforce-charts-row .chart-header {
  margin-bottom: 16px;
}

.workforce-charts-row .chart-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.workforce-charts-row .chart-wrapper {
  position: relative;
  height: 250px;
}

.workforce-charts-row .chart-card.quarter-width .chart-wrapper {
  height: 200px;
}

/* Dark mode adjustments */
body.dark-mode .workforce-kpis .kpi-tile {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .workforce-charts-row .chart-card {
  background: var(--card-bg);
  border-color: var(--border-color);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .workforce-kpis {
    gap: 10px;
  }
  
  .workforce-kpis .kpi-tile {
    min-width: calc(50% - 10px);
    padding: 14px;
  }
  
  .workforce-kpis .kpi-value {
    font-size: 1.4rem;
  }
  
  .workforce-charts-row {
    flex-direction: column;
  }
  
  .workforce-charts-row .chart-card.half-width,
  .workforce-charts-row .chart-card.third-width,
  .workforce-charts-row .chart-card.quarter-width {
    min-width: 100%;
  }
  
  .workforce-charts-row .chart-wrapper {
    height: 220px !important;
  }
}

@media (max-width: 480px) {
  .workforce-kpis .kpi-tile {
    min-width: 100%;
    padding: 12px;
  }
  
  .workforce-kpis .kpi-label {
    font-size: 0.8rem;
  }
  
  .workforce-kpis .kpi-value {
    font-size: 1.25rem;
  }
}

/* Workforce Employee Table */
.workforce-table-section {
  margin-top: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.workforce-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  align-items: center;
}

.workforce-table-filters .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.workforce-table-filters .checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
}

.workforce-table-filters .filter-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 200px;
}

.workforce-table-footer {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

#wfEmployeeTable {
  width: 100%;
}

#wfEmployeeTable th {
  cursor: pointer;
  user-select: none;
}

#wfEmployeeTable th:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* Workforce Chart Toggle Buttons */
.workforce-charts-row .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.workforce-charts-row .chart-header h3 {
  margin: 0;
}

.workforce-charts-row .chart-toggle-btns {
  display: flex;
  gap: 4px;
}

.workforce-charts-row .toggle-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.workforce-charts-row .toggle-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.workforce-charts-row .toggle-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
  color: var(--primary-color);
  font-weight: 500;
}

/* Generic table wrapper for mobile scrolling */
.workforce-table-section .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Workforce Mobile Responsive Styles */
@media (max-width: 768px) {
  .workforce-table-section {
    padding: 14px;
    margin-top: 16px;
  }
  
  .workforce-table-section .table-wrapper {
    margin: 0 -14px;
    padding: 0 14px;
  }
  
  .workforce-table-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .workforce-table-filters .filter-input {
    min-width: 100%;
  }
  
  .workforce-table-filters .checkbox-group {
    display: flex;
    gap: 16px;
  }
  
  #wfEmployeeTable {
    font-size: 0.85rem;
  }
  
  #wfEmployeeTable th,
  #wfEmployeeTable td {
    padding: 8px 6px;
  }
  
  .workforce-charts-row .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .workforce-charts-row .chart-toggle-btns {
    width: 100%;
  }
  
  .workforce-charts-row .toggle-btn {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .workforce-table-section {
    padding: 10px;
    border-radius: 8px;
  }
  
  .workforce-table-section h3 {
    font-size: 1rem;
  }
  
  #wfEmployeeTable {
    font-size: 0.8rem;
  }
  
  #wfEmployeeTable th,
  #wfEmployeeTable td {
    padding: 6px 4px;
  }
  
  .workforce-kpis .kpi-comparison {
    font-size: 0.7rem;
  }
  
  .workforce-charts-row .chart-wrapper {
    height: 180px !important;
  }
}