/* ==========================================================================
   CSS Custom Properties (Variables) for MRG_LHI Project
   ========================================================================== */

/* ==========================================================================
   Brand Colors - Default Theme
   ========================================================================== */
:root,
:root[data-theme="default"] {
    /* Primary Brand Colors */
    --primary-color: #ff6d41;
    --primary-hover: #df582f;
    --primary-active: #c94c27;
    /* Secondary Brand Colors */
    --secondary-color: #479cc8;
    --secondary-hover: #3f8cb3;
    --secondary-active: #59a6cd;
    /* Brand Green */
    --brand-green: #172A40;
    --brand-green-light: #2a4d73;
    --brand-green-dark: #152a40;
    --brand-green-darker: #0f2133;
    --brand-green-darkest: #0a1826;
    /* Link Colors */
    --link-color: #479CC8;
    --link-bootstrap: #0366d6;
    /* Status Colors */
    --success-color: #5dbf74;
    --warning-color: #e6c54f;
    --error-color: #f9777f;
    --danger-color: #f9777f;
    --info-color: #68d5c8;
    /* Training Status Colors */
    --training-approved: #198754;
    --training-pending: #a6acb1;
    --training-rejected: #dc3545;
    --training-warning: #BA3329;
    /* Trip Status Colors */
    --trip-past: #ffb169;
    --trip-active: #d4a2fc;
    --trip-next-week: #5afa6a;
    --trip-beyond-next-week: #fff15c;
    /* Job Req AG Grid Colors */
    --highlight-yellow: #fff7cc;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
:root[data-theme="dark"] {
    /* Primary Brand Colors */
    --primary-color: #ff8561;
    --primary-hover: #ff6d41;
    --primary-active: #df582f;
    /* Secondary Brand Colors */
    --secondary-color: #5badd8;
    --secondary-hover: #479cc8;
    --secondary-active: #6bb8dd;
    /* Brand Green */
    --brand-green: #4a7d4d;
    --brand-green-light: #4a7f4d;
    --brand-green-dark: #1a1f1c;
    --brand-green-darker: #15191a;
    --brand-green-darkest: #0d1113;
    /* Link Colors */
    --link-color: #5badd8;
    --link-bootstrap: #4a9eff;
    /* Status Colors */
    --success-color: #6dd084;
    --warning-color: #f0d45f;
    --error-color: #ff8a92;
    --danger-color: #ff8a92;
    --info-color: #78e5d8;
    /* Training Status Colors */
    --training-approved: #28a75e;
    --training-pending: #98a2a8;
    --training-rejected: #ec454f;
    --training-warning: #ca4339;
    /* Trip Status Colors */
    --trip-past: #ffbb79;
    --trip-active: #deb2fc;
    --trip-next-week: #6aff7a;
    --trip-beyond-next-week: #fff16c;
    /* Job Req AG Grid Colors */
    --highlight-yellow: #fff9dc;
}

/* ==========================================================================
   Light Theme
   ========================================================================== */
:root[data-theme="light"] {
    /* Primary Brand Colors */
    --primary-color: #ff5d31;
    --primary-hover: #cf4820;
    --primary-active: #b93c18;
    /* Secondary Brand Colors */
    --secondary-color: #378cb8;
    --secondary-hover: #2f7ca3;
    --secondary-active: #4996bd;
    /* Brand Green */
    --brand-green: #264d29;
    --brand-green-light: #264f29;
    --brand-green-dark: #172319;
    --brand-green-darker: #18262c;
    --brand-green-darkest: #0f1b21;
    /* Link Colors */
    --link-color: #378cb8;
    --link-bootstrap: #0256c6;
    /* Status Colors */
    --success-color: #4daf64;
    --warning-color: #d6b53f;
    --error-color: #e9676f;
    --danger-color: #e9676f;
    --info-color: #58c5b8;
    /* Training Status Colors */
    --training-approved: #097744;
    --training-pending: #969ca1;
    --training-rejected: #cc2535;
    --training-warning: #aa2319;
    /* Trip Status Colors */
    --trip-past: #ffa159;
    --trip-active: #c492ec;
    --trip-next-week: #4aea5a;
    --trip-beyond-next-week: #ffe14c;
    /* Job Req AG Grid Colors */
    --highlight-yellow: #fff5bc;
}

/* ==========================================================================
   MPX Theme
   ========================================================================== */
:root[data-theme="MPX"] {
    /* Primary Brand Colors */
    --primary-color: #C8A951;
    --primary-hover: #b89745;
    --primary-active: #a6853b;
    /* Secondary Brand Colors */
    --secondary-color: #1e90ff;
    --secondary-hover: #1a7ee6;
    --secondary-active: #3a9fff;
    /* Brand Green */
    --brand-green: #1c3755;
    --brand-green-light: #2a4a6b;
    --brand-green-dark: #162c44;
    --brand-green-darker: #112234;
    --brand-green-darkest: #0b1826;
    /* Link Colors */
    --link-color: #1e90ff;
    --link-bootstrap: #0366d6;
    /* Status Colors */
    --success-color: #5dbf74;
    --warning-color: #e6c54f;
    --error-color: #f9777f;
    --danger-color: #f9777f;
    --info-color: #68d5c8;
    /* Training Status Colors */
    --training-approved: #198754;
    --training-pending: #a6acb1;
    --training-rejected: #dc3545;
    --training-warning: #BA3329;
    /* Trip Status Colors */
    --trip-past: #ffb169;
    --trip-active: #d4a2fc;
    --trip-next-week: #5afa6a;
    --trip-beyond-next-week: #fff15c;
    /* Job Req AG Grid Colors */
    --highlight-yellow: #fff7cc;
}

/* ==========================================================================
   Purple Theme
   ========================================================================== */
:root[data-theme="purple"] {
    /* Primary Brand Colors */
    --primary-color: #8b5cf6;
    --primary-hover: #7546d6;
    --primary-active: #6540be;
    /* Secondary Brand Colors */
    --secondary-color: #a78bfa;
    --secondary-hover: #9175e0;
    --secondary-active: #b79bfa;
    /* Brand Green */
    --brand-green: #5d3d75;
    --brand-green-light: #5f3d75;
    --brand-green-dark: #3d2955;
    --brand-green-darker: #3e2c58;
    --brand-green-darkest: #2f213d;
    /* Link Colors */
    --link-color: #a78bfa;
    --link-bootstrap: #7c3aed;
    /* Status Colors */
    --success-color: #5dbf74;
    --warning-color: #e6c54f;
    --error-color: #f9777f;
    --danger-color: #f9777f;
    --info-color: #c4b5fd;
    /* Training Status Colors */
    --training-approved: #198754;
    --training-pending: #a6acb1;
    --training-rejected: #dc3545;
    --training-warning: #BA3329;
    /* Trip Status Colors */
    --trip-past: #ffb169;
    --trip-active: #d4a2fc;
    --trip-next-week: #5afa6a;
    --trip-beyond-next-week: #fff15c;
    /* Job Req AG Grid Colors */
    --highlight-yellow: #fff7cc;
}

/* ==========================================================================
   Neutral Colors & Grays
   ========================================================================== */
:root {
    /* White & Black */
    --white: #ffffff;
    --black: #000000;
    /* Light Grays */
    --light-gray: #e6ecef;
    --border-gray: #dadfe2;
    --border-gray-light: #eaeaea;
    --border-gray-lighter: #eaeef0;
    --border-gray-dark: #cecece;
    --header-border: #d6d5d5;
    /* Medium Grays */
    --medium-gray: #6d787d;
    --placeholder-gray: #6a6a6a;
    --disabled-gray: #88989b;
    /* Dark Grays */
    --text-primary: #212529;
    --text-secondary: #3a474d;
    --text-tertiary: #d7d7d7;
    --disabled-text: rgba(58, 58, 58, 0.4);
    /* Background Grays */
    --bg-light: #f7f7f7;
    --bg-disabled: rgba(255, 255, 255, 0.7);
    --scrollbar-thumb: #babac0;
}

/* ==========================================================================
   Font Families
   ========================================================================== */
:root {
    /* Primary Font Stack */
    --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Source Sans Pro', Arial, sans-serif;
    /* Specialty Fonts */
    --font-stick: 'Stick No Bills', sans-serif;
    --font-icons: 'Material Icons';
}

/* ==========================================================================
   Font Sizes
   ========================================================================== */
:root {
    /* Headings */
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1.125rem;
    --font-size-h5: 1rem;
    --font-size-h6: 0.875rem;
    /* Body Text */
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.6875rem;
    --font-size-lg: 1.0625rem;
    --font-size-xl: 1.1rem;
    --font-size-xxl: 1.25rem;
    --font-size-modal-header: 1.375rem;
    --font-size-login-btn: 1.75rem;
    /* Icons */
    --icon-size-sm: 0.9375rem;
    --icon-size-md: 1.0625rem;
    --icon-size-base: 1.5rem;
    --icon-size-lg: 1.25rem;
}

/* ==========================================================================
   Font Weights
   ========================================================================== */
:root {
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-bolder: bold;
}

/* ==========================================================================
   Spacing & Layout
   ========================================================================== */
:root {
    /* Base Spacing Units */
    --spacing-xs: 0.125rem; /* 2px */
    --spacing-sm: 0.25rem; /* 4px */
    --spacing-md: 0.5rem; /* 8px */
    --spacing-lg: 1rem; /* 16px */
    --spacing-xl: 1.5rem; /* 24px */
    --spacing-xxl: 2rem; /* 32px */
    /* Component Specific Spacing */
    --card-padding-x: 1.5625rem;
    --card-padding-y: 1.25rem;
    --card-spacing-bottom: 1rem;
    --button-padding-x: 2rem;
    --button-padding-sm-x: 2.875rem;
    --input-padding-x: 0.625rem;
    --input-padding-y: 0.1875rem;
    /* Layout Spacing */
    --content-padding: 1rem;
    --sidebar-width: 10.9375rem; /* 175px */
    --sidebar-max-width: 10.9375rem; /* 175px */
    --header-height: 3rem;
    --modal-width: 43.75rem; /* 700px */
    --modal-header-height: 10.625rem; /* 170px */
}

/* ==========================================================================
   Border Radius
   ========================================================================== */
:root {
    --border-radius-sm: 0.125rem; /* 2px */
    --border-radius-base: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-pill: 50%;
    --border-radius-circular: 50%;
}

/* ==========================================================================
   Component Heights
   ========================================================================== */
:root {
    /* Button Heights */
    --button-height-sm: 1.75rem;
    --button-height-md: 2.1875rem;
    /* Input Heights */
    --input-height: 2.1875rem;
    --input-line-height: 1.75rem;
    /* Component Heights */
    --checkbox-size: 1.25rem;
    --radio-size: 1.25rem;
    --switch-width: 3rem;
    --switch-height: 1.8rem;
    --steps-number-size: 2rem;
    --gravatar-size: 2rem;
}

/* ==========================================================================
   Shadows & Effects
   ========================================================================== */
:root {
    /* Box Shadows */
    --shadow-sm: 0 0.375rem 0.875rem 0 rgba(0, 0, 0, 0.06); /* 0 6px 14px 0 */
    --shadow-md: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    --shadow-lg: 0 0.625rem 0.5rem 0 rgba(58, 71, 77, 0.06); /* 0 10px 8px 0 */
    --shadow-modal: 0 0 0.625rem rgba(0, 0, 0, 0.2); /* 0 0 10px */
    /* Inset Shadows */
    --shadow-inset: inset 0 0.25rem 0.1875rem 0 rgba(0, 0, 0, 0.03); /* inset 0 4px 3px 0 */
    --shadow-inset-hover: inset 0 0.25rem 0.4375rem 0 rgba(0, 0, 0, 0.03); /* inset 0 4px 7px 0 */
    --shadow-inset-button: inset 0 0.1875rem 0 0 rgba(0, 0, 0, 0.1); /* inset 0 3px 0 0 */
    /* Button Effects */
    --button-hover-overlay: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    --button-active-overlay: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    --button-hover-shadow: inset 0 -0.1875rem 0 0 rgba(255, 255, 255, 0.2); /* inset 0 -3px 0 0 */
}

/* ==========================================================================
   Opacity & Transparency
   ========================================================================== */
:root {
    --opacity-disabled: 0.2;
    --opacity-medium: 0.4;
    --opacity-high: 0.5;
    --opacity-overlay: 0.35;
    /* Background Overlays */
    --bg-overlay-light: rgba(255, 255, 255, 0.25);
    --bg-overlay-lighter: rgba(255, 255, 255, 0.1);
    --bg-overlay-card: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   Z-Index Layers
   ========================================================================== */
:root {
    --z-sidebar: 2;
    --z-header: 2;
    --z-footer: 2;
    --z-dropdown: 3;
    --z-modal: 9999;
    --z-help-button: 9999;
    --z-dialog: 1001;
}

/* ==========================================================================
   Transitions & Animations
   ========================================================================== */
:root {
    /* Transition Durations */
    --transition-fast: 0.1s;
    --transition-base: 0.2s;
    --transition-slow: 1s;
    /* Transition Easings */
    --transition-ease: linear;
    --transition-ease-in-out: ease-in-out;
}

/* ==========================================================================
   Grid & Layout Breakpoints
   ========================================================================== */
:root {
    /* Responsive Breakpoints */
    --breakpoint-xs: 36rem; /* 576px */
    --breakpoint-sm: 48rem; /* 768px */
    --breakpoint-md: 64rem; /* 1024px */
    --breakpoint-lg: 80rem; /* 1280px */
    --breakpoint-xl: 120rem; /* 1920px */
    --breakpoint-xxl: 160rem; /* 2560px */
    /* Grid Columns */
    --grid-columns-3: repeat(3, 1fr);
    --grid-columns-5: repeat(5, 1fr);
}

/* ==========================================================================
   Component-Specific Variables
   ========================================================================== */
:root {
    /* Training Session */
    --training-grid-gap: 1.5rem;
    --training-field-gap: 0.5rem;
    --training-row-gap: 2rem;
    /* Cards */
    --card-min-height: 25rem; /* 400px */
    --card-min-height-sm: 6.25rem; /* 100px */
    /* TM Dashboard */
    --tm-card-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); /* 1px 1px 10px */
    /* Manual Modal */
    --modal-border-radius: 0.25rem; /* 4px */
    --modal-input-height: 2.625rem; /* 42px */
}

/* ==========================================================================
   Bootstrap Variables
   ========================================================================== */
:root {
    --bs-card-spacer-y: 2rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-spacer-bottom: 1rem;
    --bs-card-title-spacer-y: 1rem;
    --bs-card-border-width: 0.0625rem; /* 1px */
    --bs-card-border-color: transparent;
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: calc(1rem - 0.0625rem); /* calc(1rem - 1px) */
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 2rem;
    --bs-card-cap-bg: rgba(0,0,0,.03);
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
}

/* ==========================================================================
   Radzen Variables
   ========================================================================== */
/*:root {*/
/* Grid */
/*--rz-grid-filter-color: #88989b;
    --rz-grid-header-filter-icon-margin-inline: 5px 0;
    --rz-grid-header-filter-icon-font-size: 1rem;
    --rz-grid-state-transition: none;
}*/
:root {
    /* Theme Colors */
    --rz-base-600: var(--placeholder-gray);
    /* Theme Constants */
    --rz-border-width: 1px;
    --rz-body-font-size: 1.0625rem;
    --rz-body-font-size: 0.875rem;
    --rz-body-line-height: 1.5;
    --rz-body-background-color: var(--rz-base-100);
    --rz-text-font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --rz-outline-offset: 2px;
    --rz-outline-width: 2px;
    --rz-outline-color: var(--rz-secondary);
    /* Button */
    --rz-button-line-height: initial;
    --rz-button-vertical-align: middle;
    --rz-button-disabled-opacity: 0.6;
    --rz-button-empty-opacity: 0.4;
    /* Checkbox */
    --rz-checkbox-border-width: 1px;
    /* DatePicker */
    --rz-datepicker-trigger-icon-hover-color: #479cc8;
    --rz-datepicker-year-dropdown-width: 6rem;
    /* Dialog */
    --rz-dialog-title-font-weight: normal;
    --rz-dialog-title-letter-spacing: normal;
    /* DropDown */
    --rz-dropdown-trigger-icon-width: 1.1875rem;
    --rz-dropdown-trigger-icon-height: 1.1875rem;
    --rz-dropdown-item-padding: 0.25rem 0.625rem;
    --rz-dropdown-item-font-size: 0.875rem;
    --rz-dropdown-item-hover-background-color: #59a6cd;
    --rz-dropdown-item-selected-background-color: #479cc8;
    /* Fieldset */
    --rz-fieldset-legend-color: #88989b;
    --rz-fieldset-legend-font-size: 0.875rem;
    /* Grid */
    --rz-grid-cell-padding: 0.5rem 0.625rem 0.5rem 0.625rem;
    --rz-grid-cell-color: #48606c;
    --rz-grid-cell-font-size: 0.875rem;
    --rz-grid-cell-line-height: 1.5;
    --rz-grid-header-font-weight: normal;
    --rz-grid-selected-color: var(--white);
    /* Icon */
    --rz-icon-font-family: Material Icons;
    --rz-icon-size: 1.0625;
    /* Input */
    --rz-input-font-size: 1rem;
    --rz-input-height: 2.5rem;
    /*    --rz-input-line-height: 1.5*/
    --rz-input-padding-block: 0;
    --rz-input-padding-inline: 0;
    --rz-input-disabled-color: #212529;
    /* Panel */
    --rz-panel-background-color: var(--rz-base-background-color);
    --rz-panel-padding: 0.5rem;
    --rz-panel-title-line-height: 1.25rem;
    --rz-panel-title-font-weight: 600;
    --rz-panel-content-margin: 0;
    --rz-panel-toggle-icon-width: var(--rz-icon-size);
    --rz-panel-toggle-icon-height: var(--rz-icon-size);
    --rz-panel-toggle-icon-font-size: var(--rz-icon-size);
    --rz-panel-toggle-icon-border-radius: 0.125rem;
    --rz-panel-toggle-icon-background-color: var(--rz-base-200);
    --rz-panel-toggle-icon-focus-outline: var(--rz-outline-focus);
    --rz-panel-toggle-icon-focus-outline-offset: var(--rz-outline-offset);
    --rz-panel-hover-color: var(--rz-secondary);
    --rz-panel-border-radius: var(--rz-border-radius);
    --rz-panel-shadow: none;
    /* Scheduler */
    --rz-scheduler-toolbar-title-font-size: inherit;
    --rz-scheduler-toolbar-title-font-weight: inherit;
    --rz-scheduler-toolbar-title-color: #6a6a6a;
    --rz-scheduler-prev-next-button-background-color: var(--secondary-color);
    --rz-scheduler-prev-next-button-font-size: 0.6875rem;
    --rz-scheduler-today-button-padding: 0.25rem 0.5rem;
    --rz-scheduler-today-button-font-size: 0.6875rem;
    --rz-scheduler-event-background-color: none;
    --rz-scheduler-event-font-size: 0.6875rem;
    --rz-scheduler-event-line-height: 0.75rem;
    --rz-scheduler-event-content-padding: 0.25rem;
    /* SelectBar */
    --rz-selectbar-background-color: var(--rz-base-background-color);
    /* Tabs */
    --rz-tabs-border: solid 0.0625rem #dfe7ec;
    --rz-tabs-tab-font-weight: 600;
    --rz-tabs-tab-background-color: #e6ecef;
}