/**
 * Accountify Global CSS Variables
 * ================================
 * AUTHORITATIVE SOURCE - This is the ONLY file that should define :root CSS variables.
 * DO NOT create additional :root blocks in other CSS files.
 *
 * This file should be loaded first in the CSS stack (before Bootstrap).
 *
 * @see CLAUDE.md for CSS architecture documentation
 */

:root {
    /* ===== Pluse Brand Colors (variable names kept as --emmber-* for compatibility) ===== */
    --emmber-core:     #5E5CE6;  /* Primary — CTAs, accents, active nav, logo (Apple Indigo / systemIndigo) */
    --emmber-glow:     #7D7AFF;  /* Secondary — highlights, hover states, badges (light indigo) */
    --emmber-warm:     #4B49C7;  /* Depth — active/pressed states (deep indigo) */
    --emmber-deep:     #3634B0;  /* Deep accent — borders on dark, shadows (dark indigo) */
    --emmber-honey:    #A5A4F0;  /* Soft — light accents, highlights (soft indigo) */
    --emmber-disabled: #8281C9;  /* Muted — disabled button states (muted indigo) */
    --emmber-core-rgb: 94, 92, 230;  /* RGB values for rgba() transparency */

    /* Pluse Neutrals — zinc palette (true neutral, no warm/cool bias) */
    --emmber-brand-dark: #09090B; /* Brand background — true near-black */
    --emmber-charcoal: #18181B;  /* App surface — sidebar, panels (zinc-900) */
    --emmber-ash:      #27272A;  /* Card/content area background (zinc-800) */
    --emmber-smoke:    #3F3F46;  /* Borders, dividers (zinc-700) */
    --emmber-light:    #FAFAFA;  /* Light mode background — clean near-white (zinc-50) */
    --emmber-cream:    #F4F4F5;  /* Neutral surface — text on dark (zinc-100) */

    /* Brand RGBA variants (Pluse indigo) */
    --emmber-core-2: rgba(94, 92, 230, 0.02);
    --emmber-core-3: rgba(94, 92, 230, 0.03);
    --emmber-core-4: rgba(94, 92, 230, 0.04);
    --emmber-core-5: rgba(94, 92, 230, 0.05);
    --emmber-core-6: rgba(94, 92, 230, 0.06);
    --emmber-core-8: rgba(94, 92, 230, 0.08);
    --emmber-core-10: rgba(94, 92, 230, 0.1);
    --emmber-core-12: rgba(94, 92, 230, 0.12);
    --emmber-core-15: rgba(94, 92, 230, 0.15);
    --emmber-core-20: rgba(94, 92, 230, 0.2);
    --emmber-core-25: rgba(94, 92, 230, 0.25);
    --emmber-core-30: rgba(94, 92, 230, 0.3);
    --emmber-core-35: rgba(94, 92, 230, 0.35);
    --emmber-core-40: rgba(94, 92, 230, 0.4);
    --emmber-core-50: rgba(94, 92, 230, 0.5);
    --emmber-core-85: rgba(94, 92, 230, 0.85);

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Text Colors — all values meet WCAG 2.1 AA (≥4.5:1 on white) */
    --text-primary: #111827;     /* 16.3:1 on white */
    --text-secondary: #4b5563;   /* 7.6:1 on white — bumped from #6b7280 for stronger hierarchy */
    --text-muted: #6b7280;       /* 4.83:1 on white — bumped from #9ca3af (was 2.54:1, FAIL) */
    --text-disabled: #6b7280;    /* 4.83:1 on white — bumped from #a1a1aa (was 2.56:1, FAIL) */
    --text-white: #ffffff;
    --text-dark: var(--text-primary);
    --dark-text: #1d1d1f;                  /* Legacy alias — used in 25+ files */
    --gray-text: var(--text-secondary);    /* Legacy alias — used in serviceLines.css */
    --warning-color: var(--warning);       /* Legacy alias — used in plaid-integration.css */

    /* Accessible text variants for use on light backgrounds (≥4.5:1 normal text) */
    --emmber-core-text: #4B49C7;  /* 7.0:1 on white — use for body links, inline cues. --emmber-core (#5E5CE6) is only 4.7:1 and fails AA for normal text */
    --success-text: #1F7A35;      /* 5.8:1 on white / success-light bg — use for success badge/pill text. --success (#4CAF50) is only 2.7:1 */
    --warning-text: #92400E;      /* 7.6:1 on #FEF3C7 — same value as --warning-light-text; use for warning text on light bg. --warning (#d97706) is only 2.9:1 */
    --danger-text-accessible: #991B1B;  /* 7.0:1 on white — use for danger text in body copy */

    /* Background Colors — Pluse Light Palette (clean white) */
    --bg-primary: #FFFFFF;                /* White canvas — page/sidebar bg */
    --bg-secondary: var(--emmber-cream);  /* White — card/surface bg */
    --bg-hover: #F3F4F6;                 /* neutral hover state */
    --bg-active: #E5E7EB;               /* neutral active/pressed state */
    --bg-dark: #111827;
    --bg-light: var(--emmber-cream);     /* white surface */
    --bg-white: #FFFFFF;                 /* pure white — cards, surfaces */
    --apple-hover: #F3F4F6;             /* neutral hover */

    /* Auth/Universal page backgrounds */
    --background-color: var(--emmber-cream);    /* warm off-white page bg */
    --form-background: var(--bg-white);         /* white form surfaces */
    --form-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --form-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --white-overlay: rgba(255, 255, 255, 0.7);  /* frosted glass overlay */

    /* Status Colors — Semantic (consistent across all sections) */
    --success: #4CAF50;
    --success-light: rgba(76, 175, 80, 0.1);
    --success-dark: #388E3C;
    --warning: #d97706;
    --warning-light: rgba(245, 158, 11, 0.1);
    --warning-light-bg: #FEF3C7;    /* Light amber bg — alerts, warning notices */
    --warning-light-text: #92400E;  /* Dark amber text on light amber bg — WCAG AA */
    --warning-amber: #FFB800;       /* Invoice limit progress bar */
    --warning-amber-high: #FF9800;  /* Invoice limit — high usage state */
    --warning-amber-dark: #d97706;
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.1);
    --danger-light-bg: #FEE2E2;     /* Solid light red background — alerts, error notices */
    --danger-light-border: #fecaca; /* Solid light red border */
    --danger-light-text: #991B1B;   /* Dark red text on light red bg — WCAG AA */
    --danger-lighter: #f87171;      /* Lighter red — dark mode badge text */
    --danger-dark: #dc2626;
    --danger-darker: #b91c1c;       /* Deep red — hover/pressed danger state */
    --error-red: #dc2626;
    --info: #7D7AFF;
    --info-light: rgba(125, 122, 255, 0.1);
    --info-dark: #4B49C7;

    /* Semantic aliases (per BRAND.md) */
    --emmber-success: #22C55E;  /* green-500 */
    --emmber-warning: #F59E0B;  /* amber-500 */
    --emmber-danger:  #EF4444;  /* red-500 */
    --emmber-info:    #7D7AFF;  /* glow — brand indigo */

    /* BPI Tier Colors */
    --bpi-thriving:  var(--success);       /* 85-100 */
    --bpi-strong:    var(--emmber-core);    /* 70-84 — brand indigo */
    --bpi-steady:    var(--warning);        /* 50-69 */
    --bpi-attention: var(--emmber-warm);    /* 30-49 — deep indigo */
    --bpi-critical:  var(--danger);         /* 0-29 */

    /* Badge Colors */
    --badge-blue: #60a5fa;
    --badge-purple: #a78bfa;
    --badge-yellow: #fbbf24;

    /* Avatar Colors (semantic aliases for entity-specific styling) */
    --avatar-purple: #8b5cf6;           /* Service lines */
    --avatar-blue: #3b82f6;             /* Employees */
    --avatar-client: #5E5CE6;           /* Clients — Pluse Core */

    /* Apple Design System Colors */
    --text-apple: #1d1d1f;              /* Apple dark text */
    --text-apple-muted: #86868b;        /* Apple muted/secondary text */
    --border-apple: #d2d2d7;            /* Apple light border */
    --border-apple-light: #e5e5e7;      /* Apple very light border */
    --bg-apple-light: #fbfbfd;          /* Apple very light background */

    /* Third-party Brand Colors */
    --gusto-primary: #F45D48;
    --gusto-hover: #E04D38;
    --gusto-active: #D43D28;
    --stripe-purple: #635bff;
    --stripe-purple-hover: #5247e5;

    /* Extended Status Colors */
    --warning-bg: #fef9c3;
    --warning-dark: #b45309;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;

    /* Purple/Violet (service lines, badges) */
    --violet: #7c3aed;
    --violet-light: #ede9fe;

    /* Teal */
    --teal: #0d9488;
    --teal-light: #ccfbf1;

    /* Neutral Extended */
    --neutral-bg: #f5f5f7;
    --neutral-border: #e5e5ea;
    --neutral-fill: #f0f0f2;

    /* Account Type Colors (QuickBooks Standard) */
    --account-type-asset: #5E5CE6;      /* Pluse Core */
    --account-type-liability: #ef4444;  /* Red - same as danger */
    --account-type-equity: #7D7AFF;     /* Indigo */
    --account-type-income: #14b8a6;     /* Teal */
    --account-type-expense: #f59e0b;    /* Amber - same as warning */
    --account-type-cogs: #f97316;       /* Orange */

    /* Layout Dimensions */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --navbar-height: 64px;          /* alias used by modules */
    --header-height: 64px;
    --nav-height: 64px;
    --page-header-height: 96px;
    --filter-height: 72px;
    --btn-height: 48px;            /* Standard button height */
    --btn-height-sm: 44px;         /* Small button height */
    --max-content-width: 1320px;
    --content-padding: 56px; /* 2cm margin on left/right (56px ≈ 0.75in ≈ 2cm at 96 DPI) */
    --footer-height: 48px;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Gap Utilities (for flexbox/grid) */
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --radius-btn: 10px;        /* Standard button border radius */
    --radius-btn-sm: 6px;      /* Small button border radius */

    /* Shadows (when enabled) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    /* Focus Ring Shadows (Pluse accent) */
    --shadow-focus-ring: 0 0 0 4px rgba(94, 92, 230, 0.15);
    --shadow-focus-ring-lg: 0 0 0 6px rgba(94, 92, 230, 0.1);
    --shadow-focus-emmber: 0 0 0 3px rgba(94, 92, 230, 0.1);

    /* Modal & Overlay Shadows */
    --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-modal-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-notification: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* Card & Button Shadows */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-button-emmber: 0 4px 12px rgba(94, 92, 230, 0.3);
    --shadow-button-emmber-hover: 0 8px 24px rgba(94, 92, 230, 0.25);

    /* Accent/Brand Shadows (Pluse glow) */
    --shadow-emmber-sm: 0 2px 8px rgba(94, 92, 230, 0.08);
    --shadow-emmber-md: 0 4px 16px rgba(94, 92, 230, 0.1);
    --shadow-emmber-lg: 0 4px 16px rgba(94, 92, 230, 0.15);
    --shadow-emmber-glow: 0 4px 20px rgba(94, 92, 230, 0.1);

    /* Error/Danger Shadows */
    --shadow-danger-focus: 0 0 0 4px rgba(255, 59, 48, 0.1);
    --shadow-danger-glow: 0 4px 12px rgba(239, 68, 68, 0.3);
    --shadow-danger-glow-lg: 0 4px 16px rgba(239, 68, 68, 0.5);

    /* Warning Shadows */
    --shadow-warning-glow: 0 2px 8px rgba(251, 191, 36, 0.3);

    /* Z-Index Scale - Authoritative Values */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-page-header: 100;
    --z-sidebar: 500;
    --z-header: 600;
    --z-helper: 1035;             /* Contextual helper (ash-helper) — below mobile nav */
    --z-mobile-nav: 1040;        /* Mobile bottom navigation (below modals) */
    --z-mobile-header: 1041;     /* Mobile top header (above nav, below modals) */
    --z-overlay: 9000;
    --z-modal-backdrop: 9998;
    --z-modal: 9999;
    --z-edit-form-backdrop: 10000;  /* Backdrop behind form */
    --z-edit-form: 10001;           /* Form on top of backdrop */
    --z-notification: 10100;
    --z-tooltip: 10200;
    --z-session-timeout: 99999;     /* Session timeout overlay — must be above all modals */
    --z-accessibility: 100000;      /* Accessibility panel — topmost UI layer */
    --z-max: 999999;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-dyslexic: 'OpenDyslexic', 'Inter', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

    /* Font Weights */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Modal Dimensions */
    --modal-max-width: 900px;
    --modal-max-width-lg: 1200px;  /* Large modals (Add Client, Add Invoice, etc.) */
    --modal-max-width-xl: 1400px;  /* Extra large modals */
    --modal-max-height: calc(100vh - 40px);
    --modal-padding: 24px;

    /* Border Styles */
    --border-color: #d1d5db; /* Standard border color (same as --gray-300) */
    --border-thin: 0.5px solid rgba(229, 231, 235, 0.5);
    --border-standard: 0.5px solid #e5e7eb;

    /* Table Styles */
    --table-header-bg: #FFFFFF;  /* white/flat — column labels distinguished by font-weight only */
    --table-border: #e5e7eb;
    --table-row-hover-accent: rgba(94, 92, 230, 0.1); /* Pluse hover for tables */
    --table-row-hover: var(--table-row-hover-accent);  /* standardized: Pluse indigo tint */

    /* Form Elements */
    --input-border: #d1d5db;
    --input-focus-border: var(--emmber-core);
    --input-bg: #ffffff;
    --input-disabled-bg: #f3f4f6;

    /* Scrollbar Styles */
    --scrollbar-width: 8px;
    --scrollbar-bg: #F3F4F6;
    --scrollbar-thumb: #d1d5db;
    --scrollbar-thumb-hover: #9ca3af;

    /* Modal Type/Option Card States */
    /* Unselected State */
    --modal-card-bg-unselected: #ffffff;
    --modal-card-border-unselected: #e5e7eb;
    --modal-card-icon-bg-unselected: #f3f4f6;
    --modal-card-icon-color-unselected: #6b7280;

    /* Selected State */
    --modal-card-bg-selected: linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 100%);
    --modal-card-border-selected: var(--emmber-core);
    --modal-card-icon-bg-selected: var(--emmber-core);
    --modal-card-icon-color-selected: #ffffff;
    --modal-card-shadow-selected: 0 4px 12px rgba(94, 92, 230, 0.2);

    /* Hover State */
    --modal-card-border-hover: var(--emmber-core);
    --modal-card-shadow-hover: 0 4px 12px rgba(94, 92, 230, 0.1);
}

/* ===== Pluse Dark Theme =====
   Activated by adding class="emmber-dark" to <body>.
   All semantic variables remap to dark palette. */
body.emmber-dark {
    /* Text — all values meet WCAG 2.1 AA on charcoal bg (#18181B) */
    --text-primary: #ffffff;     /* 17.7:1 */
    --text-secondary: #B8B8B8;   /* 8.4:1 — bumped from #999999 for cleaner hierarchy */
    --text-muted: #A1A1AA;       /* 5.3:1 — bumped from #8a8a8a (was 3.9:1, FAIL) */
    --text-disabled: #8E8E93;    /* 4.5:1 — bumped from #707070 (was 2.7:1, FAIL) */
    --text-apple: #ffffff;
    --text-apple-muted: #A1A1AA;
    --dark-text: #ffffff;
    --gray-text: #B8B8B8;
    --warning-color: var(--warning);

    /* Accessible text variants on dark bg */
    --emmber-core-text: #A5A4F0;    /* 7.4:1 on charcoal — soft indigo for body links/cues */
    --success-text: #5EE5A1;        /* 9.1:1 — light green for body text */
    --warning-text: #FBBF24;        /* 9.8:1 — bright amber for body text */
    --danger-text-accessible: #F87171;  /* 5.5:1 — light red for body text */

    /* Backgrounds */
    --bg-primary: var(--emmber-charcoal);
    --bg-secondary: var(--emmber-ash);
    --bg-hover: var(--emmber-smoke);
    --bg-active: #444444;
    --bg-dark: #000000;
    --bg-light: var(--emmber-ash);
    --bg-white: var(--emmber-ash);
    --bg-apple-light: var(--emmber-ash);
    --apple-hover: var(--emmber-smoke);

    /* Auth/Universal page backgrounds (dark) */
    --background-color: var(--emmber-charcoal);
    --form-background: var(--emmber-ash);
    --form-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --form-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --white-overlay: rgba(30, 27, 22, 0.7);

    /* Grays — remapped for dark context */
    --gray-50: #1A1A1A;
    --gray-100: #222222;
    --gray-200: #2A2A2A;
    --gray-300: #3A3A3A;
    --gray-400: #555555;
    --gray-500: #777777;
    --gray-600: #999999;
    --gray-700: #bbbbbb;
    --gray-800: #dddddd;
    --gray-900: #f0f0f0;

    /* Borders */
    --border-color: var(--emmber-smoke);
    --border-apple: var(--emmber-smoke);
    --border-apple-light: #333333;

    /* Tables */
    --table-header-bg: #222222;
    --table-border: var(--emmber-smoke);
    --table-row-hover: rgba(94, 92, 230, 0.06);

    /* Forms */
    --input-border: var(--emmber-smoke);
    --input-bg: var(--emmber-ash);
    --input-disabled-bg: #333333;

    /* Cards */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Modals */
    --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.4);

    /* Modal Card States */
    --modal-card-bg-unselected: var(--emmber-ash);
    --modal-card-border-unselected: var(--emmber-smoke);
    --modal-card-icon-bg-unselected: var(--emmber-smoke);
    --modal-card-icon-color-unselected: #999999;
    --modal-card-bg-selected: linear-gradient(135deg, rgba(94, 92, 230, 0.15) 0%, rgba(94, 92, 230, 0.08) 100%);

    /* Scrollbar */
    --scrollbar-bg: #222222;
    --scrollbar-thumb: #444444;
    --scrollbar-thumb-hover: #555555;

    /* Extended — Third-party, Status, Accent */
    --stripe-purple: #7c73ff;
    --stripe-purple-hover: #6b62e5;
    --warning-bg: rgba(217, 119, 6, 0.15);
    --warning-dark: #fbbf24;
    --danger-bg: rgba(220, 38, 38, 0.15);
    --danger-text: #fca5a5;
    --violet: #a78bfa;
    --violet-light: rgba(124, 58, 237, 0.15);
    --teal: #2dd4bf;
    --teal-light: rgba(13, 148, 136, 0.15);
    --neutral-bg: var(--emmber-ash);
    --neutral-border: var(--emmber-smoke);
    --neutral-fill: var(--emmber-smoke);

    /* Global dark body */
    background-color: var(--emmber-charcoal);
    color: #ffffff;
    font-family: var(--font-sans);
}

/* ===== Pluse Light Mode =====
   Default state (no class needed on <body>).
   Clean white page background. */
body:not(.emmber-dark) {
    background-color: var(--emmber-light);
    color: var(--emmber-charcoal);
    font-family: var(--font-sans);
}

/* ============================================
   RESPONSIVE BREAKPOINTS - STANDARDIZED
   Updated: December 2025

   Use these values directly in @media queries.
   Prefer max-width for desktop-first approach.
   ============================================

   LAPTOP/DESKTOP BREAKPOINTS (max-width, desktop-first):
   - 1536px: Large laptops (15"+) - reduce padding, scale typography
   - 1440px: Medium laptops (14") - sidebar auto-collapses
   - 1280px: Small laptops (13") - further reduce spacing
   - 1024px: Large tablets/small laptops - minimum spacing

   TABLET/MOBILE BREAKPOINTS (min-width, mobile-first):
   - 768px: Tablets - show desktop elements
   - 640px: Large phones - landscape adjustments

   CRITICAL FILES USING THESE BREAKPOINTS:
   - layout.css: Sidebar auto-collapse, content padding, typography
   - tables-global.css: Table padding, cell sizing, horizontal scroll
   - dashboard-inline-main.js: SIDEBAR_AUTO_COLLAPSE_BREAKPOINT = 1440
*/

/* RTL (Right-to-Left) Support for Arabic */
[dir="rtl"] {
    /* Text alignment */
    text-align: right;
}

[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* RTL Flex/Margin adjustments */
[dir="rtl"] .ms-auto {
    margin-left: unset !important;
    margin-right: auto !important;
}

[dir="rtl"] .me-auto {
    margin-right: unset !important;
    margin-left: auto !important;
}

[dir="rtl"] .ms-1, [dir="rtl"] .ms-2, [dir="rtl"] .ms-3 {
    margin-left: unset !important;
}

[dir="rtl"] .me-1, [dir="rtl"] .me-2, [dir="rtl"] .me-3 {
    margin-right: unset !important;
}

[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; }

[dir="rtl"] .me-1 { margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; }

/* RTL Padding adjustments */
[dir="rtl"] .ps-1, [dir="rtl"] .ps-2, [dir="rtl"] .ps-3 {
    padding-left: unset !important;
}

[dir="rtl"] .pe-1, [dir="rtl"] .pe-2, [dir="rtl"] .pe-3 {
    padding-right: unset !important;
}

[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3 { padding-right: 1rem !important; }

[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-left: 1rem !important; }

/* RTL Sidebar adjustments */
[dir="rtl"] .sidebar {
    left: unset;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--gray-200);
}

[dir="rtl"] .main-content-area {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

[dir="rtl"] .sidebar.collapsed + .main-content-area {
    margin-right: var(--sidebar-collapsed-width);
}

/* RTL Icon adjustments */
[dir="rtl"] .bi-chevron-right::before {
    content: "\F284"; /* chevron-left */
}

[dir="rtl"] .bi-chevron-left::before {
    content: "\F285"; /* chevron-right */
}

/* RTL Dropdown menu position */
[dir="rtl"] .dropdown-menu {
    left: unset;
    right: 0;
}

[dir="rtl"] .dropdown-menu-end {
    left: 0;
    right: unset;
}

/* RTL Modal close button */
[dir="rtl"] .modal-header .btn-close {
    margin-right: unset;
    margin-left: calc(-.5 * var(--bs-modal-header-padding-x));
}

/* RTL Table column alignments */
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right;
}

[dir="rtl"] table .text-end {
    text-align: left !important;
}

/* ============================================
   RESPONSIVE CSS VARIABLE OVERRIDES
   Added: December 2025
   Target: 13"-15" laptop screens and tablets

   These media queries update CSS variables that are
   used with !important in other files, ensuring
   responsive behavior cascades properly.
   ============================================ */

/* === LARGE LAPTOPS (≤1536px) === */
@media (max-width: 1536px) {
    :root {
        --content-padding: 40px;
    }
}

/* === MEDIUM LAPTOPS (≤1440px) === */
@media (max-width: 1440px) {
    :root {
        --content-padding: 36px;
    }
}

/* === SMALL LAPTOPS (≤1280px) === */
@media (max-width: 1280px) {
    :root {
        --content-padding: 32px;
    }
}

/* === TABLETS & SMALL SCREENS (≤1024px) === */
@media (max-width: 1024px) {
    :root {
        --content-padding: 24px;
    }
}

/* === iPad Pro Portrait (1024x1366) === */
@media (max-width: 1024px) and (min-height: 1200px) {
    :root {
        --content-padding: 32px; /* Slightly more padding for tall screens */
    }
}

/* === iPad Pro Landscape (1366x1024) === */
/* Only targets 1281px-1366px width to avoid conflicting with small laptop (≤1280px) */
@media (max-width: 1366px) and (max-height: 1100px) and (min-width: 1281px) {
    :root {
        --content-padding: 36px;
    }
}