/*
 * Occam's Model Design Tokens
 * Single source of truth for all design values
 * Based on: context/style-guide.md
 */

:root {
  /* ===== BRAND COLORS ===== */
  /* Primary - Professional Blue */
  --om-primary: #0066cc;
  --om-primary-light: #3385ff;
  --om-primary-dark: #0052a3;
  --om-primary-rgb: 0, 102, 204;
  
  /* Accent - Trust Green */
  --om-accent: #00a86b;
  --om-accent-light: #33c78f;
  --om-accent-dark: #008a56;
  --om-accent-rgb: 0, 168, 107;

  /* ===== APPLICATION-SPECIFIC COLOR SCHEMES ===== */
  /* Freedom Number - Athletic Greens Palette (Growth, Achievement) */
  --om-freedom-primary: #0d7c66;        /* Athletic Greens forest green base */
  --om-freedom-primary-light: #14b8a6;  /* Teal highlight */
  --om-freedom-primary-dark: #0a6854;   /* Darker forest green for hover states */
  --om-freedom-accent: #06b6d4;         /* Cyan bridge */
  --om-freedom-rgb: 13, 124, 102;
  
  /* Freedom Number Display Gradients */
  --om-freedom-gradient: linear-gradient(135deg, #0d7c66 0%, #14b8a6 30%, #0891b2 100%);
  --om-freedom-gradient-hover: linear-gradient(135deg, #0f766e 0%, #06b6d4 30%, #0ea5e9 100%);
  
  /* Blueprint - Professional Blue Palette (Structure, Planning) */
  --om-blueprint-primary: #0066cc;      /* Professional blue */
  --om-blueprint-primary-light: #3385ff; /* Lighter blue */
  --om-blueprint-primary-dark: #0052a3;  /* Deep blue */
  --om-blueprint-accent: #6366f1;       /* Indigo accent */
  --om-blueprint-rgb: 0, 102, 204;
  --om-blueprint-secondary: #001F3A;     /* Very Dark Blue for deep accents */
  --om-blueprint-tertiary: #E6F0FF;     /* Light Blue for backgrounds */
  --om-blueprint-glossy: #4DA4D4;       /* Bright accent for glossy effects */

  /* ===== FINANCIAL SEMANTIC COLORS ===== */
  /* Financial States */
  --om-financial-positive: #10b981;      /* Surplus/Profit */
  --om-financial-negative: #ef4444;      /* Deficit/Loss */
  --om-financial-neutral: #6b7280;       /* Break-even */
  --om-financial-warning: #f59e0b;       /* Attention needed */
  --om-financial-info: #3b82f6;          /* Informational */
  
  /* Scenario Comparison */
  --om-scenario-current: var(--om-primary);
  --om-scenario-optimal: var(--om-financial-positive);
  --om-scenario-comparison: #8b5cf6;
  --om-scenario-alternate: #ec4899;

  /* ===== NEUTRAL SCALE ===== */
  /* Gray Scale */
  --om-gray-50: #f9fafb;
  --om-gray-100: #f3f4f6;
  --om-gray-200: #e5e7eb;
  --om-gray-300: #d1d5db;
  --om-gray-400: #9ca3af;
  --om-gray-500: #6b7280;
  --om-gray-600: #4b5563;
  --om-gray-700: #374151;
  --om-gray-800: #1f2937;
  --om-gray-900: #111827;
  --om-gray-950: #030712;
  
  /* Semantic Backgrounds */
  --om-bg-primary: #ffffff;
  --om-bg-secondary: var(--om-gray-50);
  --om-bg-tertiary: var(--om-gray-100);
  
  /* Semantic Text Colors */
  --om-text-primary: var(--om-gray-900);
  --om-text-secondary: var(--om-gray-600);
  --om-text-tertiary: var(--om-gray-500);
  --om-text-disabled: var(--om-gray-400);

  /* ===== TYPOGRAPHY ===== */
  /* Font Stacks */
  --om-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                      Roboto, 'Helvetica Neue', Arial, sans-serif;
  --om-font-financial: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 
                        'Roboto Mono', Consolas, monospace;
  --om-font-display: 'Manrope', var(--om-font-primary);

  /* Font Sizes */
  --om-text-xs: 0.75rem;     /* 12px */
  --om-text-sm: 0.875rem;    /* 14px */
  --om-text-base: 1rem;      /* 16px */
  --om-text-lg: 1.125rem;    /* 18px */
  --om-text-xl: 1.25rem;     /* 20px */
  --om-text-2xl: 1.5rem;     /* 24px */
  --om-text-3xl: 1.875rem;   /* 30px */
  --om-text-4xl: 2.25rem;    /* 36px */
  --om-text-5xl: 3rem;       /* 48px */
  --om-text-6xl: 3.75rem;    /* 60px */
  
  /* Line Heights */
  --om-leading-none: 1;
  --om-leading-tight: 1.25;
  --om-leading-snug: 1.375;
  --om-leading-normal: 1.5;
  --om-leading-relaxed: 1.625;
  --om-leading-loose: 1.75;
  
  /* Font Weights */
  --om-font-light: 300;
  --om-font-normal: 400;
  --om-font-medium: 500;
  --om-font-semibold: 600;
  --om-font-bold: 700;
  --om-font-extrabold: 800;
  
  /* Letter Spacing */
  --om-tracking-tighter: -0.05em;
  --om-tracking-tight: -0.025em;
  --om-tracking-normal: 0;
  --om-tracking-wide: 0.025em;
  --om-tracking-wider: 0.05em;
  --om-tracking-widest: 0.1em;

  /* ===== SPACING SYSTEM ===== */
  /* 8px Base Unit */
  --om-space-0: 0;
  --om-space-px: 1px;
  --om-space-0-5: 0.125rem;  /* 2px */
  --om-space-1: 0.25rem;     /* 4px */
  --om-space-1-5: 0.375rem;  /* 6px */
  --om-space-2: 0.5rem;      /* 8px */
  --om-space-2-5: 0.625rem;  /* 10px */
  --om-space-3: 0.75rem;     /* 12px */
  --om-space-3-5: 0.875rem;  /* 14px */
  --om-space-4: 1rem;        /* 16px */
  --om-space-5: 1.25rem;     /* 20px */
  --om-space-6: 1.5rem;      /* 24px */
  --om-space-7: 1.75rem;     /* 28px */
  --om-space-8: 2rem;        /* 32px */
  --om-space-9: 2.25rem;     /* 36px */
  --om-space-10: 2.5rem;     /* 40px */
  --om-space-12: 3rem;       /* 48px */
  --om-space-14: 3.5rem;     /* 56px */
  --om-space-16: 4rem;       /* 64px */
  --om-space-20: 5rem;       /* 80px */
  --om-space-24: 6rem;       /* 96px */
  --om-space-28: 7rem;       /* 112px */
  --om-space-32: 8rem;       /* 128px */

  /* ===== BORDERS & RADIUS ===== */
  /* Border Radius */
  --om-radius-none: 0;
  --om-radius-sm: 0.125rem;   /* 2px */
  --om-radius-base: 0.25rem;  /* 4px */
  --om-radius-md: 0.375rem;   /* 6px */
  --om-radius-lg: 0.5rem;     /* 8px */
  --om-radius-xl: 0.75rem;    /* 12px */
  --om-radius-2xl: 1rem;      /* 16px */
  --om-radius-3xl: 1.5rem;    /* 24px */
  --om-radius-full: 9999px;   /* Circle */
  
  /* Border Width */
  --om-border-0: 0;
  --om-border: 1px;
  --om-border-2: 2px;
  --om-border-4: 4px;
  --om-border-8: 8px;
  
  /* Border Colors */
  --om-border-color: var(--om-gray-200);
  --om-border-color-dark: var(--om-gray-300);

  /* ===== SHADOWS & EFFECTS ===== */
  /* Box Shadows */
  --om-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --om-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --om-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --om-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --om-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --om-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --om-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  
  /* Financial Card Shadows */
  --om-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.04), 0 6px 12px rgba(0, 0, 0, 0.08);
  --om-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 20px rgba(0, 0, 0, 0.1);
  
  /* Glassmorphism Effects */
  --om-glass-bg: rgba(255, 255, 255, 0.7);
  --om-glass-bg-dark: rgba(31, 41, 55, 0.7);
  --om-glass-border: rgba(255, 255, 255, 0.18);
  --om-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  --om-glass-blur: blur(10px);

  /* ===== HEADER CAP COMPONENTS ===== */
  /* Blue Header Cap - Standard page headers with blue background */
  --om-header-cap-bg: var(--om-primary);
  --om-header-cap-color: #ffffff;
  --om-header-cap-padding: var(--om-space-4) var(--om-space-6);
  --om-header-cap-radius: var(--om-radius-lg) var(--om-radius-lg) 0 0;
  --om-header-cap-shadow: var(--om-shadow-sm);

  /* ===== ANIMATION & TRANSITIONS ===== */
  /* Durations */
  --om-duration-75: 75ms;
  --om-duration-100: 100ms;
  --om-duration-150: 150ms;
  --om-duration-200: 200ms;
  --om-duration-300: 300ms;
  --om-duration-500: 500ms;
  --om-duration-700: 700ms;
  --om-duration-1000: 1000ms;
  
  /* Easing Functions */
  --om-ease-linear: linear;
  --om-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --om-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --om-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --om-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Standard Transitions */
  --om-transition-colors: background-color, border-color, color, fill, stroke;
  --om-transition-opacity: opacity;
  --om-transition-shadow: box-shadow;
  --om-transition-transform: transform;
  --om-transition-all: all;
}

/* ===== UTILITY CLASSES ===== */
/* Financial Value Styling */
.fin-value {
  font-family: var(--om-font-financial);
  font-variant-numeric: tabular-nums;
}

.fin-value-positive {
  color: var(--om-financial-positive);
}

.fin-value-negative {
  color: var(--om-financial-negative);
}

.fin-value-neutral {
  color: var(--om-financial-neutral);
}

/* Typography Utilities */
.font-financial {
  font-family: var(--om-font-financial);
}

.font-primary {
  font-family: var(--om-font-primary);
}

.font-display {
  font-family: var(--om-font-display);
}

/* Common Transition */
.transition-standard {
  transition: var(--om-transition-all) var(--om-duration-150) var(--om-ease-in-out);
}

/* Application-Specific Highlights */
.highlight-blueprint {
  font-weight: 700;
  background: linear-gradient(135deg, var(--om-blueprint-primary), var(--om-blueprint-primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.highlight-freedom {
  font-weight: 700;
  background: linear-gradient(135deg, var(--om-freedom-primary), var(--om-freedom-primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== HEADER CAP COMPONENT ===== */
/* Standard blue header cap for page headers */
.header-cap {
  background: var(--om-header-cap-bg);
  color: var(--om-header-cap-color);
  padding: var(--om-header-cap-padding);
  border-radius: var(--om-header-cap-radius);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.header-cap h1,
.header-cap h2,
.header-cap h3,
.header-cap h4,
.header-cap h5,
.header-cap h6 {
  margin: 0;
  color: inherit;
  font-weight: var(--om-font-semibold);
}

/* Header cap variants */
.header-cap--accent {
  background: var(--om-accent);
}

.header-cap--success {
  background: var(--om-financial-positive);
}

.header-cap--warning {
  background: var(--om-financial-warning);
}

.header-cap--danger {
  background: var(--om-financial-negative);
}

/* Freedom Number specific header cap - uses Athletic Greens color scheme */
.header-cap--freedom {
  background: var(--om-freedom-primary) !important;
  color: #ffffff !important;
}


/* ===== FREEDOM NUMBER DISPLAY COMPONENTS ===== */
/* Athletic Greens-inspired Freedom Number styling token */
.freedom-number-display {
  background: var(--om-freedom-gradient);
  color: white;
  border-radius: var(--om-radius-2xl);
  box-shadow: 
    0 2px 8px rgba(var(--om-freedom-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.freedom-number-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.25) 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0) 100%);
  border-radius: inherit;
  pointer-events: none;
}

.freedom-number-display:hover {
  background: var(--om-freedom-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(var(--om-freedom-rgb), 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.freedom-number-display > * {
  position: relative;
  z-index: 1;
}

/* Freedom Number text styling - for large display numbers */
.freedom-number-text {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}

/* Freedom Number modal header styling token */
.freedom-number-modal-header {
  background: var(--om-freedom-gradient);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.freedom-number-modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.25) 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Freedom Number gradient text - for modal display */
.freedom-number-gradient-text {
  background: var(--om-freedom-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle Freedom Number text - for table/breakdown use */
.freedom-number-subtle {
  color: var(--om-freedom-primary) !important;
  opacity: 0.85;
  font-weight: var(--om-font-bold);
}

/* Freedom Number subtle background and text utilities */
.bg-freedom-subtle {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1px solid #d1d5db;
}

.text-freedom-dark {
  color: #059669 !important;
}

.border-freedom-dark {
  border-color: #059669 !important;
}

/* Combined freedom number accent styling */
.freedom-accent-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #d1d5db;
  color: #059669;
}

.freedom-accent-badge {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  color: #059669;
  border: 1px solid #d1d5db;
}

/* For use with Bootstrap card components */
.card-header.header-cap {
  border-bottom: none;
  padding: var(--om-header-cap-padding);
  border-radius: var(--om-header-cap-radius);
}

/* ===== FREEDOM NUMBER FORM STYLING ===== */
/* Green-themed form styling for Freedom Number forms */
.freedom-form .form-control {
  background-color: white !important; /* Keep inputs white */
  border-color: rgba(13, 124, 102, 0.2) !important;
}

.freedom-form .form-control:focus {
  background-color: white !important;
  border-color: var(--om-freedom-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 124, 102, 0.25) !important;
}

.freedom-form .input-group-text {
  background-color: rgba(13, 124, 102, 0.06) !important; /* Very subtle light greyish green */
  color: var(--om-freedom-primary) !important; /* Dark green icon */
  border-color: rgba(13, 124, 102, 0.2) !important;
  font-weight: 600;
}

/* Radio buttons and checkboxes */
.freedom-form .form-check-input:checked {
  background-color: var(--om-freedom-primary) !important;
  border-color: var(--om-freedom-primary) !important;
}

.freedom-form .form-check-input:focus {
  border-color: var(--om-freedom-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 124, 102, 0.25) !important;
}

/* ===== FREEDOM NUMBER RADIO BUTTONS ===== */
/* Dedicated class for Freedom Number themed radio buttons */
.fn-radio-buttons .form-check-input:checked {
  background-color: var(--om-freedom-primary) !important;
  border-color: var(--om-freedom-primary) !important;
}

.fn-radio-buttons .form-check-input:focus {
  border-color: var(--om-freedom-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 124, 102, 0.25) !important;
}

/* Target Django-rendered radio buttons (without Bootstrap classes) */
.fn-radio-buttons input[type="radio"]:checked {
  accent-color: var(--om-freedom-primary) !important;
}

.fn-radio-buttons input[type="radio"]:focus {
  outline-color: var(--om-freedom-primary) !important;
}

/* ===== MODERN TABLE SYSTEM ===== */
/* Modern Apple-esque Table Styling - Moved from freedom_number/css/modern-tables.css */

/* Override core CSS table styles with higher specificity */
table.modern-table,
table.modern-table th,
table.modern-table td {
    background: #ffffff !important;
    border: none !important;
    color: #374151 !important;
}

/* Base Modern Table */
.modern-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.modern-table-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Modern Table Header */
table.modern-table thead th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.modern-table thead th:first-child {
    border-top-left-radius: 12px;
}

.modern-table thead th:last-child {
    border-top-right-radius: 12px;
}

/* Allow specific alignment overrides for headers */
.modern-table thead th.text-start {
    text-align: left;
}

.modern-table thead th.text-end {
    text-align: right;
}

.modern-table thead th.text-center {
    text-align: center;
}

/* Modern Table Body */
table.modern-table tbody td {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #374151 !important;
    font-size: 0.9375rem !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    text-align: center !important;
}

/* Allow specific alignment overrides for body cells */
.modern-table tbody td.text-start {
    text-align: left;
}

.modern-table tbody td.text-end {
    text-align: right;
}

.modern-table tbody td.text-center {
    text-align: center;
}

.modern-table tbody tr {
    transition: all 0.2s ease;
    border: none;
}

.modern-table tbody tr:hover {
    background: #f9fafb;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

.modern-table tbody tr:last-child:first-child td:first-child {
    border-bottom-left-radius: 12px;
}

.modern-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Modern Table Footer */
table.modern-table tfoot td,
table.modern-table tfoot th {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    padding: 1.25rem 1.5rem !important;
    border-top: 2px solid #d1d5db !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
}

/* Allow specific alignment overrides for footer cells */
.modern-table tfoot td.text-start,
.modern-table tfoot th.text-start {
    text-align: left;
}

.modern-table tfoot td.text-end,
.modern-table tfoot th.text-end {
    text-align: right;
}

.modern-table tfoot td.text-center,
.modern-table tfoot th.text-center {
    text-align: center;
}

.modern-table tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.modern-table tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Action Buttons in Tables */
.modern-table .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
}

.modern-table .btn-outline-primary {
    color: #3b82f6;
    border-color: #3b82f6;
    background: transparent;
}

.modern-table .btn-outline-primary:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.modern-table .btn-outline-danger {
    color: #ef4444;
    border-color: #ef4444;
    background: transparent;
}

.modern-table .btn-outline-danger:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Responsive Wrapper */
.modern-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Badge Styling in Tables */
.modern-table .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
}

.modern-table .badge.bg-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

.modern-table .badge.bg-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}

.modern-table .badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.modern-table .badge.bg-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* Financial Values Styling */
.modern-table .financial-value {
    font-weight: 600;
    color: #1f2937;
}

.modern-table .financial-positive {
    color: #059669;
}

.modern-table .financial-negative {
    color: #dc2626;
}

/* Empty State */
.modern-table-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
    font-style: italic;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
}

.modern-table-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Compact Variant */
.modern-table.compact tbody td {
    padding: 0.875rem 1.25rem;
}

.modern-table.compact thead th {
    padding: 0.875rem 1.25rem;
}

/* Custom Expense Table Specific Styles */
.custom-expense-table {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.custom-expense-table .form-control,
.custom-expense-table .form-select {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 0.875rem;
}

.custom-expense-table .form-control:focus,
.custom-expense-table .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.custom-expense-table .input-group-text {
    background: #f9fafb;
    border: none;
    color: #6b7280;
    font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .modern-table thead th,
    .modern-table tbody td,
    .modern-table tfoot td {
        padding: 0.875rem;
        font-size: 0.8125rem;
    }
    
    .modern-table .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Stack table on mobile for better readability */
    .modern-table.mobile-stack thead {
        display: none;
    }
    
    .modern-table.mobile-stack tbody,
    .modern-table.mobile-stack tr,
    .modern-table.mobile-stack td {
        display: block;
        width: 100%;
    }
    
    .modern-table.mobile-stack tr {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 1rem;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .modern-table.mobile-stack td {
        border: none;
        padding: 0.5rem 0;
        text-align: left !important;
    }
    
    .modern-table.mobile-stack td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #374151;
    }
}

/* Dark mode support (if needed in the future) */
@media (prefers-color-scheme: dark) {
    .modern-table {
        background: #1f2937;
        color: #f9fafb;
    }
    
    .modern-table thead th {
        background: linear-gradient(180deg, #374151 0%, #2d3748 100%);
        color: #f9fafb;
        border-bottom-color: #4b5563;
    }
    
    .modern-table tbody td {
        background: #1f2937;
        color: #f9fafb;
        border-bottom-color: #374151;
    }
    
    .modern-table tbody tr:hover {
        background: #374151;
    }
    
    .modern-table tfoot td {
        background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
        color: #f9fafb;
        border-top-color: #4b5563;
    }
}

/* ===== FREEDOM NUMBER TABLE THEME ===== */
/* Child class that inherits all modern-table styling and only overrides colors */
.modern-table-freedom {
    /* Inherits all .modern-table styles automatically via CSS cascade */
}

/* Override core styles for Freedom Number theme */
table.modern-table-freedom,
table.modern-table-freedom th,
table.modern-table-freedom td {
    background: #ffffff !important;
    border: none !important;
    color: #374151 !important;
}

/* Apply the same base styles with Freedom Number specific dimensions */
.modern-table-freedom {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Freedom Number Header - Very subtle greyish-green theme */
table.modern-table-freedom thead th {
    background: linear-gradient(180deg, rgba(13, 124, 102, 0.03) 0%, rgba(13, 124, 102, 0.05) 100%) !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Freedom Number Footer - Slightly more prominent but still very subtle greyish-green */
table.modern-table-freedom tfoot td,
table.modern-table-freedom tfoot th {
    background: linear-gradient(180deg, rgba(13, 124, 102, 0.05) 0%, rgba(13, 124, 102, 0.08) 100%) !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    padding: 1.25rem 1.5rem !important;
    border-top: 2px solid #d1d5db !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
}

/* Inherit all other modern-table styles (body, alignment, buttons, badges, etc.) */
.modern-table-freedom thead th:first-child { border-top-left-radius: 12px; }
.modern-table-freedom thead th:last-child { border-top-right-radius: 12px; }
.modern-table-freedom thead th.text-start { text-align: left; }
.modern-table-freedom thead th.text-end { text-align: right; }
.modern-table-freedom thead th.text-center { text-align: center; }

table.modern-table-freedom tbody td {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #374151 !important;
    font-size: 0.9375rem !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    text-align: center !important;
}

.modern-table-freedom tbody td.text-start { text-align: left; }
.modern-table-freedom tbody td.text-end { text-align: right; }
.modern-table-freedom tbody td.text-center { text-align: center; }
.modern-table-freedom tbody tr { transition: all 0.2s ease; border: none; }
.modern-table-freedom tbody tr:hover { background: #f9fafb; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.modern-table-freedom tbody tr:last-child td { border-bottom: none; }
.modern-table-freedom tbody tr:last-child:first-child td:first-child { border-bottom-left-radius: 12px; }
.modern-table-freedom tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }

.modern-table-freedom tfoot td.text-start,
.modern-table-freedom tfoot th.text-start { text-align: left; }
.modern-table-freedom tfoot td.text-end,
.modern-table-freedom tfoot th.text-end { text-align: right; }
.modern-table-freedom tfoot td.text-center,
.modern-table-freedom tfoot th.text-center { text-align: center; }
.modern-table-freedom tfoot tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.modern-table-freedom tfoot tr:last-child td:last-child { border-bottom-right-radius: 12px; }

/* Blueprint themed tables (placeholder for future) */
.modern-table-blueprint thead th {
  background-color: rgba(0, 102, 204, 0.06) !important; /* Very subtle blue grey */
}

/* ===== ALERT VARIANTS ===== */
/* Light green informational alert with dark text for good readability */
.alert-info-green {
  background-color: #d1fae5;
  border-color: var(--om-freedom-primary);
  color: #064e3b;
}

/* ===== FREEDOM NUMBER SECTION COMPONENTS ===== */
/* Main section header - uses h4 with subtle border bottom */
.fn-section-header {
  margin-bottom: var(--om-space-3) !important; /* mb-3 */
  border-bottom: var(--om-border) solid var(--om-border-color) !important;
  padding-bottom: var(--om-space-2) !important; /* pb-2 */
  color: var(--om-text-primary);
  font-size: var(--om-text-2xl) !important; /* h4 equivalent - 24px */
  font-weight: var(--om-font-semibold);
  line-height: var(--om-leading-tight);
}

/* Sub-section card component - elevated card with freedom-themed header */
.fn-subsection-card {
  box-shadow: var(--om-shadow-sm) !important; /* shadow-sm */
  border-radius: var(--om-radius-lg) !important;
  border: var(--om-border) solid var(--om-border-color);
  margin-top: var(--om-space-4) !important; /* mt-4 */
  overflow: hidden;
}

/* Sub-section card header - freedom-themed with icon support */
.fn-subsection-header {
  background-color: var(--om-gray-50) !important; /* bg-light */
  color: var(--om-freedom-primary) !important;
  padding: var(--om-space-4) var(--om-space-6) !important;
  border-bottom: var(--om-border) solid var(--om-border-color);
  margin-bottom: 0 !important;
  font-size: var(--om-text-lg); /* h5 equivalent */
  font-weight: var(--om-font-medium);
  line-height: var(--om-leading-snug);
}

/* Icon styling within sub-section headers */
.fn-subsection-header .fas {
  color: var(--om-freedom-primary) !important;
  margin-right: var(--om-space-2) !important; /* me-2 */
}

/* Sub-section card body - proper spacing */
.fn-subsection-body {
  padding: var(--om-space-6) !important;
}

/* ===== FREEDOM NUMBER BUTTON VARIANTS ===== */

/* Freedom Number Primary Button - inherits btn-primary but uses FN green colors */
.btn-primary-fn,
.btn-fn-primary {
  /* Freedom Number specific colors - let Bootstrap handle all other styling */
  background-color: var(--om-freedom-primary) !important;
  border-color: var(--om-freedom-primary) !important;
  color: #ffffff !important;
}

.btn-primary-fn:hover,
.btn-fn-primary:hover,
button.btn-primary-fn:hover,
button.btn-fn-primary:hover {
  background-color: var(--om-freedom-primary-dark) !important;
  border-color: var(--om-freedom-primary-dark) !important;
  color: #ffffff !important;
}

.btn-primary-fn:focus,
.btn-fn-primary:focus,
.btn-primary-fn.focus,
.btn-fn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--om-freedom-rgb), 0.5) !important;
  background-color: var(--om-freedom-primary-dark) !important;
  border-color: var(--om-freedom-primary-dark) !important;
  color: #ffffff !important;
}

.btn-primary-fn:active,
.btn-fn-primary:active,
.btn-primary-fn.active,
.btn-fn-primary.active {
  background-color: var(--om-freedom-primary-dark) !important;
  border-color: var(--om-freedom-primary-dark) !important;
}

.btn-primary-fn:disabled,
.btn-fn-primary:disabled,
.btn-primary-fn.disabled,
.btn-fn-primary.disabled {
  background-color: var(--om-gray-400) !important;
  border-color: var(--om-gray-400) !important;
  opacity: 0.65 !important;
}

/* ===== FREEDOM NUMBER ACTION BUTTON VARIANTS ===== */

/* Freedom Number View Button - Light teal outline */
.btn-view-fn {
  background-color: transparent !important;
  border-color: var(--om-freedom-primary-light) !important;
  color: var(--om-freedom-primary-light) !important;
}

.btn-view-fn:hover,
button.btn-view-fn:hover {
  background-color: var(--om-freedom-primary-light) !important;
  border-color: var(--om-freedom-primary-light) !important;
  color: #ffffff !important;
}

.btn-view-fn:focus,
.btn-view-fn.focus {
  box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.25) !important;
  background-color: var(--om-freedom-primary-light) !important;
  border-color: var(--om-freedom-primary-light) !important;
  color: #ffffff !important;
}

.btn-view-fn:active,
.btn-view-fn.active {
  background-color: var(--om-freedom-primary-light) !important;
  border-color: var(--om-freedom-primary-light) !important;
  color: #ffffff !important;
}

/* Freedom Number Edit Button - Main green outline */
.btn-edit-fn {
  background-color: transparent !important;
  border-color: var(--om-freedom-primary) !important;
  color: var(--om-freedom-primary) !important;
}

.btn-edit-fn:hover,
button.btn-edit-fn:hover {
  background-color: var(--om-freedom-primary) !important;
  border-color: var(--om-freedom-primary) !important;
  color: #ffffff !important;
}

.btn-edit-fn:focus,
.btn-edit-fn.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--om-freedom-rgb), 0.25) !important;
  background-color: var(--om-freedom-primary) !important;
  border-color: var(--om-freedom-primary) !important;
  color: #ffffff !important;
}

.btn-edit-fn:active,
.btn-edit-fn.active {
  background-color: var(--om-freedom-primary) !important;
  border-color: var(--om-freedom-primary) !important;
  color: #ffffff !important;
}

/* ===== BLUEPRINT ACTION BUTTON VARIANTS ===== */

/* Blueprint Primary Button - Professional Blue */
.btn-primary-blueprint {
  background-color: var(--om-blueprint-primary) !important;
  border-color: var(--om-blueprint-primary) !important;
  color: #ffffff !important;
  font-weight: var(--om-font-semibold);
  box-shadow: 
    0 2px 4px rgba(var(--om-blueprint-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.btn-primary-blueprint:hover,
button.btn-primary-blueprint:hover {
  background-color: var(--om-blueprint-primary-dark) !important;
  border-color: var(--om-blueprint-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(var(--om-blueprint-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary-blueprint:focus,
.btn-primary-blueprint.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--om-blueprint-rgb), 0.25) !important;
  background-color: var(--om-blueprint-primary-dark) !important;
  border-color: var(--om-blueprint-primary-dark) !important;
  color: #ffffff !important;
}

.btn-primary-blueprint:active,
.btn-primary-blueprint.active {
  background-color: var(--om-blueprint-primary-dark) !important;
  border-color: var(--om-blueprint-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(0);
}

.btn-primary-blueprint:disabled,
.btn-primary-blueprint.disabled {
  background-color: var(--om-gray-400) !important;
  border-color: var(--om-gray-400) !important;
  opacity: 0.65 !important;
  transform: none;
}

/* Blueprint View Button - Light blue outline */
.btn-view-blueprint {
  background-color: transparent !important;
  border-color: var(--om-blueprint-primary-light) !important;
  color: var(--om-blueprint-primary-light) !important;
}

.btn-view-blueprint:hover,
button.btn-view-blueprint:hover {
  background-color: var(--om-blueprint-primary-light) !important;
  border-color: var(--om-blueprint-primary-light) !important;
  color: #ffffff !important;
}

.btn-view-blueprint:focus,
.btn-view-blueprint.focus {
  box-shadow: 0 0 0 0.2rem rgba(51, 133, 255, 0.25) !important;
  background-color: var(--om-blueprint-primary-light) !important;
  border-color: var(--om-blueprint-primary-light) !important;
  color: #ffffff !important;
}

.btn-view-blueprint:active,
.btn-view-blueprint.active {
  background-color: var(--om-blueprint-primary-light) !important;
  border-color: var(--om-blueprint-primary-light) !important;
  color: #ffffff !important;
}

/* Blueprint Edit Button - Professional blue outline */
.btn-edit-blueprint {
  background-color: transparent !important;
  border-color: var(--om-blueprint-primary) !important;
  color: var(--om-blueprint-primary) !important;
}

.btn-edit-blueprint:hover,
button.btn-edit-blueprint:hover {
  background-color: var(--om-blueprint-primary) !important;
  border-color: var(--om-blueprint-primary) !important;
  color: #ffffff !important;
}

.btn-edit-blueprint:focus,
.btn-edit-blueprint.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--om-blueprint-rgb), 0.25) !important;
  background-color: var(--om-blueprint-primary) !important;
  border-color: var(--om-blueprint-primary) !important;
  color: #ffffff !important;
}

.btn-edit-blueprint:active,
.btn-edit-blueprint.active {
  background-color: var(--om-blueprint-primary) !important;
  border-color: var(--om-blueprint-primary) !important;
  color: #ffffff !important;
}