/* ==============================================================
   GLOBAL THEME VARIABLES
   Dynamic theming system - ALL colors via CSS variables
   NO hardcoded colors allowed anywhere in the project
   ============================================================== */

:root {
  /* =====================================================
     PRIMARY & SECONDARY (User-selectable)
     ===================================================== */
  --primary-color: #010241;
  --secondary-color: #407bff;

  /* =====================================================
     DERIVED / COMPUTED SHADES
     ===================================================== */
  --primary-light: color-mix(in srgb, var(--primary-color) 20%, #ffffff);
  --primary-dark: color-mix(in srgb, var(--primary-color) 80%, #000000);
  --secondary-light: color-mix(in srgb, var(--secondary-color) 20%, #ffffff);
  --secondary-dark: color-mix(in srgb, var(--secondary-color) 80%, #000000);

  /* =====================================================
     BACKGROUND COLORS
     ===================================================== */
  --bg-color: #f4f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-body: #f4f6fa;
  --bg-body-solid: #f4f6fa;

  /* =====================================================
     TEXT COLORS
     ===================================================== */
  --text-color: #1e293b;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-on-primary: #ffffff;
  --text-on-secondary: #ffffff;
  --text-on-backtop: var(--text-on-secondary);
  --text-dark: #1e293b;
  --text-link: var(--secondary-color);

  /* =====================================================
     CARD
     ===================================================== */
  --card-bg: #ffffff;
  --card-text: #1e293b;
  --card-title-color: #1e293b;
  --card-border: #dee2e6;

  /* =====================================================
     BORDER
     ===================================================== */
  --border-color: #dee2e6;
  --border-light: #e9ecef;

  /* =====================================================
     INPUT / FORM
     ===================================================== */
  --input-bg: #ffffff;
  --input-text: #1e293b;
  --input-border: #ced4da;
  --input-placeholder: #6c757d;
  --input-focus-border: var(--secondary-color);
  --input-focus-bg: #ffffff;
  --focus-ring-color: rgba(64, 123, 255, 0.35);

  /* =====================================================
     TABLE
     ===================================================== */
  --table-bg: #ffffff;
  --table-text: #1e293b;
  --table-border: #dee2e6;
  --table-header-bg: var(--secondary-color);
  --table-header-text: var(--text-on-secondary);
  --table-stripe-bg: #f8f9fa;
  --table-hover-bg: #e9ecef;

  /* =====================================================
     HOVER / ACTIVE
     ===================================================== */
  --hover-color: var(--secondary-color);
  --active-color: var(--secondary-color);
  --hover-bg: #f8f9fa;
  --hover-bg-themed: var(--secondary-color);
  --hover-text-themed: var(--text-on-secondary);
  --active-bg-themed: var(--primary-color);
  --active-text-themed: var(--text-on-primary);
  --secondary-rgb-r: 64;
  --secondary-rgb-g: 123;
  --secondary-rgb-b: 255;

  /* =====================================================
     NAVBAR / HEADER
     ===================================================== */
  --navbar-bg: #ffffff;
  --navbar-bg-scrolled: #ffffff;
  --navbar-text: #1e293b;
  --navbar-icon: #1e293b;

  /* =====================================================
     SIDEBAR
     ===================================================== */
  --sidebar-bg: #ffffff;
  --sidebar-text: #012970;
  --sidebar-icon: #899bbd;
  --sidebar-link-bg: transparent;
  --sidebar-link-hover-bg: var(--secondary-color);
  --sidebar-link-active-bg: #f6f9ff;
  --sidebar-active-text: #FFD700;
  --sidebar-active-indicator: var(--secondary-color);
  --sidebar-hover-text: var(--text-on-secondary);
  --sidebar-hover-icon: var(--text-on-secondary);
  --sidebar-border: #e9ecef;
  --sidebar-scrollbar: #c1c1c1;

  /* =====================================================
     DROPDOWN
     ===================================================== */
  --dropdown-bg: #ffffff;
  --dropdown-text: #1e293b;
  --dropdown-hover-bg: #f8f9fa;
  --dropdown-border: #dee2e6;
  --dropdown-divider: #e9ecef;
  --dropdown-shadow: 0 5px 30px rgba(82, 63, 105, 0.05);

  /* =====================================================
     MODAL
     ===================================================== */
  --modal-bg: #ffffff;
  --modal-text: #1e293b;
  --modal-border: #dee2e6;
  --modal-header-border: #dee2e6;
  --modal-backdrop: rgba(0, 0, 0, 0.5);

  /* =====================================================
     OFFCANVAS
     ===================================================== */
  --offcanvas-bg: #ffffff;
  --offcanvas-text: #1e293b;

  /* =====================================================
     FOOTER
     ===================================================== */
  --footer-bg: transparent;
  --footer-text: #899bbd;
  --footer-border: #e9ecef;

  /* =====================================================
     BADGE / PILL COLORS
     ===================================================== */
  --badge-primary-bg: var(--primary-color);
  --badge-primary-text: var(--text-on-primary);
  --badge-secondary-bg: var(--secondary-color);
  --badge-secondary-text: var(--text-on-secondary);

  /* =====================================================
     SEMANTIC COLORS (these stay fixed)
     ===================================================== */
  --success-color: #16a34a;
  --warning-color: #f59e0b;
  --warning-bright: #ffff00;
  --danger-color: #dc3545;
  --info-color: #0dcaf0;

  /* =====================================================
     SCROLLBAR
     ===================================================== */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c1c1c1;
  --scrollbar-thumb-hover: var(--secondary-color);

  /* =====================================================
     BACK TO TOP
     ===================================================== */
  --backtop-bg: var(--secondary-color);
  --backtop-hover-bg: var(--primary-color);

  /* =====================================================
     SHADOWS
     ===================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* =====================================================
     MISC
     ===================================================== */
  --loader-color: #25b09b;
  --breadcrumb-color: #899bbd;
  --breadcrumb-active: var(--secondary-color);
  --page-title-color: #012970;
  --label-color: #374151;
  --datatable-info-color: #475569;
  --accordion-active-color: var(--secondary-color);
  --nav-tab-color: #475569;
  --nav-tab-hover: #5ef840;
  --nav-tab-active: #1e293b;
  --pagination-color: #1e293b;
  --pagination-active-bg: var(--secondary-color);

  /* =====================================================
     PROFILE
     ===================================================== */
  --profile-card-name: #2c384e;
  --profile-label: rgba(1, 41, 112, 0.6);
  --profile-title: #012970;

  /* =====================================================
     LOGIN
     ===================================================== */
  --login-gradient-end: #c8e1ff;
  --login-bg-gradient: linear-gradient(180deg, var(--secondary-color) 50%, var(--login-gradient-end) 50%);
  --login-bg-gradient-mobile: linear-gradient(90deg, var(--secondary-color) 50%, var(--login-gradient-end) 50%);
  --login-card-bg: linear-gradient(90deg, #ffffff 50%, #dce3eb 50%);
  --login-card-overlay: rgba(255, 255, 255, 0.8);

  /* Tab-specific colors */
  --tab1-bg: #EF5350;
  --tab2-bg: #EC407A;
  --tab3-bg: #AB47BC;
  --tab4-bg: #42A5F5;
  --tab5-bg: #26A69A;
  --tab6-bg: #9CCC65;
  --tab7-bg: #FFB300;
  --tab7-text: #2B2B2B;
  --tab8-bg: #cac8d8;
  --tab8-text: #2B2B2B;

  /* bmTabs active borders */
  /* bmTabs active tab */
  --bmtabs-active-bg: var(--card-bg);
  --bmtabs-active-text: var(--text-color);
  --bmtabs-active-border: #444;
  --bmtabs-active-outline: #aaa;

  /* Custom white button on primary bg */
  --btn-on-primary: var(--text-on-primary);
  --btn-on-primary-hover: var(--text-on-primary);

  /* Preview box */
  --preview-box-bg: #fff;
  --preview-box-border: #ccc;

  /* Search bar mobile */
  --search-bar-bg: var(--card-bg);

  /* =====================================================
     PRINT VIEW
     ===================================================== */
  --print-header-bg: #DBE0DD;

  /* =====================================================
     BTN CLOSE
     ===================================================== */
  --btn-close-filter: none;

  /* =====================================================
     TYPOGRAPHY
     ===================================================== */
  --font-family: "Chakra Petch", sans-serif;
  --font-family-heading: "Chakra Petch", sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.8125rem; /* 13px */
  --font-size-base: 0.875rem;/* 14px */
  --font-size-lg: 1rem;      /* 16px */
  --font-size-xl: 1.125rem;  /* 18px */
  --font-size-2xl: 1.25rem;  /* 20px */
  --font-size-3xl: 1.5rem;   /* 24px */
  --font-size-4xl: 2rem;     /* 32px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* =====================================================
     SPACING SCALE (4px base unit)
     ===================================================== */
  --spacing-0: 0;
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */

  /* =====================================================
     BORDER RADIUS
     ===================================================== */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;

  /* =====================================================
     TRANSITION
     ===================================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ==============================================================
   CUSTOM DARK MODE OVERRIDES (CSS fallback for custom + dark)
   JS inline styles on :root handle all palettes at runtime.
   This block scoped to .custom-theme to avoid conflicting with
   default-dark mode (original colored design set via JS).
   ============================================================== */
body.dark-mode.custom-theme {
  --bg-color: #111111;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a2a;
  --bg-body: #111111;
  --bg-body-solid: #111111;

  --text-color: #e0e0e0;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #888888;
  --text-on-primary: #ffffff;
  --text-on-secondary: #ffffff;
  --text-dark: #e0e0e0;
  --text-link: var(--secondary-color);

  --card-bg: rgb(54, 54, 54);
  --card-text: #ffffff;
  --card-title-color: #ffffff;
  --card-border: rgba(255, 255, 255, 0.08);

  --border-color: #444444;
  --border-light: #333333;

  --input-bg: #505050;
  --input-text: #dbdbdb;
  --input-border: #909090;
  --input-placeholder: #aaaaaa;
  --input-focus-border: var(--secondary-color);
  --input-focus-bg: #3a3a3a;
  --focus-ring-color: rgba(64, 123, 255, 0.35);

  --table-bg: #505050;
  --table-text: #ffffff;
  --table-border: #909090;
  --table-header-bg: #101215;
  --table-header-text: #ffffff;
  --table-stripe-bg: rgb(53, 53, 53);
  --table-hover-bg: rgb(13, 110, 253);

  --hover-color: var(--secondary-color);
  --active-color: var(--secondary-color);
  --hover-bg: rgba(255, 255, 255, 0.08);

  --navbar-bg: rgb(54, 54, 54);
  --navbar-bg-scrolled: rgb(54, 54, 54);
  --navbar-text: var(--text-on-primary);
  --navbar-icon: var(--text-on-primary);

  --sidebar-bg: rgb(54, 54, 54);
  --sidebar-text: var(--text-on-primary);
  --sidebar-icon: var(--text-on-primary);
  --sidebar-link-bg: #000000;
  --sidebar-link-hover-bg: #3a3a3a;
  --sidebar-link-active-bg: #3a3a3a;
  --sidebar-active-text: #FFD700;
  --sidebar-active-indicator: var(--secondary-color);
  --sidebar-border: #444444;
  --sidebar-scrollbar: #555555;

  --dropdown-bg: #505050;
  --dropdown-text: #eeeeee;
  --dropdown-hover-bg: #3a3a3a;
  --dropdown-border: #666666;
  --dropdown-divider: #666666;
  --dropdown-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);

  --modal-bg: rgb(54, 54, 54);
  --modal-text: #eeeeee;
  --modal-border: #555555;
  --modal-header-border: #555555;
  --modal-backdrop: rgba(0, 0, 0, 0.7);

  --offcanvas-bg: #2b2b2b;
  --offcanvas-text: #eeeeee;

  --footer-bg: transparent;
  --footer-text: #818181;
  --footer-border: #363636;

  --scrollbar-track: #363636;
  --scrollbar-thumb: #555;
  --scrollbar-thumb-hover: var(--secondary-color);

  --backtop-bg: var(--secondary-color);
  --backtop-hover-bg: var(--primary-color);

  --breadcrumb-color: #aaaaaa;
  --breadcrumb-active: var(--secondary-color);
  --page-title-color: #ffffff;
  --label-color: #cccccc;
  --datatable-info-color: #cccccc;
  --nav-tab-color: #dbdbdb;
  --nav-tab-active: #ffffff;
  --pagination-color: #ffffff;
  --pagination-active-bg: #505050;

  --profile-card-name: #ffffff;
  --profile-label: rgba(255, 255, 255, 0.6);
  --profile-title: #ffffff;

  --login-gradient-end: #222;
  --login-bg-gradient: linear-gradient(180deg, #333 50%, var(--login-gradient-end) 50%);
  --login-bg-gradient-mobile: linear-gradient(90deg, #333 50%, var(--login-gradient-end) 50%);
  --login-card-bg: linear-gradient(90deg, #2a2a2a 50%, #333 50%);
  --login-card-overlay: rgba(42, 42, 42, 0.8);
  --warning-bright: #ffff00;

  --tab1-bg: #C62828;
  --tab2-bg: #AD1457;
  --tab3-bg: #7B1FA2;
  --tab4-bg: #1565C0;
  --tab5-bg: #00897B;
  --tab6-bg: #558B2F;
  --tab7-bg: #FF8F00;
  --tab7-text: #ffffff;
  --tab8-bg: #555;
  --tab8-text: #ffffff;

  --bmtabs-active-border: #888;
  --bmtabs-active-outline: #666;

  --bmtabs-active-bg: var(--card-bg);
  --bmtabs-active-text: var(--text-color);
  --btn-on-primary: var(--text-on-primary);
  --btn-on-primary-hover: var(--text-on-primary);
  --search-bar-bg: var(--card-bg);

  --preview-box-bg: var(--card-bg);
  --preview-box-border: var(--border-color);
}