/* ===================
Root Variables
   =================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    /* Font Families */
    --font-primary: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'Fira Code', monospace;
    /* Typography Scale */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-heavy: 700;
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;
    /* Core Status Colors - using Bootstrap's semantic colors */
    --color-success: var(--bs-success);
    --color-warning: var(--bs-warning);
    --color-danger: var(--bs-danger);
    --color-neutral: var(--bs-secondary);
    --color-info: var(--bs-info);
    /* Background & Border Colors - using Bootstrap's surface colors */
    --bg-light: var(--bs-secondary-bg);
    --bg-lighter: var(--bs-tertiary-bg);
    --bg-main: var(--bs-body-bg);
    --border-light: var(--bs-border-color);
    --border-lighter: var(--bs-border-color-translucent);
    /* Text Colors - using Bootstrap's text colors */
    --text-dark: var(--bs-body-color);
    --text-muted: var(--bs-secondary-color);
    --text-disabled: var(--bs-tertiary-color);
    --text-nav: var(--bs-nav-link-color);
    --text-light: var(--bs-light);
    /* Common Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    --spacing-xxl: 2rem;
    /* Common Border Radius - use Bootstrap's radius */
    --radius-sm: var(--bs-border-radius-sm);
    --radius-md: var(--bs-border-radius);
    --radius-lg: var(--bs-border-radius-lg);
    /* Button/field heights */
    --height-field-standard: 40.45px;
}

/* ===================
Typography & Font Imports
   =================== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

/* Base Typography */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-dark);
}

/* Code Elements */
code,
pre,
.code {
    font-family: var(--font-code);
}

.validation-container {
    flex-grow: 1;
}

/* Validation Elements */
.validation-status {
    transition: all 0.3s ease;
    /* Use Bootstrap's border radius */
    border-radius: var(--bs-border-radius);
    /* Bootstrap button formatting */
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    position: relative;
    display: inline-flex !important;
    vertical-align: middle;


    margin: var(--spacing-sm) 0;
    align-items: center;
    gap: 0.5em;
    opacity: 1 !important;
    width: 100%;

    /* Grow to fill rest of line */
    flex: 1;
    flex-direction: row;
}

/* Nudge icons in line with validation text */
.validation-status fas,
.validation-status bi {
    margin-left: 1em !important;
    font-size: 1.2em !important;
}

.validation-complete {
    background-color: var(--color-success) !important;
    color: var(--bs-white) !important;
}

.validation-info {
    background-color: var(--color-neutral) !important;
    color: var(--bs-white) !important;
}

.validation-warning {
    background-color: var(--color-warning) !important;
    color: var(--bs-dark) !important;
}

.validation-error {
    background-color: var(--color-danger) !important;
    color: var(--bs-white) !important;
}

.validation-llm {
    background-color: var(--bs-blue) !important;
    color: var(--bs-black) !important;
}

.navigation-buttons-container {
    border-radius: var(--radius-sm);
    padding: 15px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
}

/* ===================
rhandsontable
   =================== */

/* Dark Mode Support */
[data-bs-theme="dark"] .rhandsontable {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Pulldown can break out of handsontable boundary Credit https://stackoverflow.com/questions/32593414/handsontable-dropdowns-hidden-in-overflowauto-div */
/* .htColumnHeaders {
    overflow-x: visible !important;
    overflow-y: visible !important;
} */

/* Dropdown menus inherit the whole table width, somehow */
.handsontableInput,
.listbox,
.wtHider,
.handsontableInputHolder {
    max-width: 550px !important;
    width: fit-content !important;
}

/* .ht_master .handsontable {
    margin-right: -200px !important;
    width: max-content !important;
    overflow-y: hidden !important;
}

textarea .handsontableInput {
    width: auto !important;
}

.ht_master>.wtHolder {
    height: unset !important;
    height: unset !important;
} */

/* ===================
Leaflet Dark Mode Support
   =================== */

/* Main leaflet container - Credit to https://dev.to/deepakdevanand/leaflet-map-dark-theme-5ej0 */
[data-bs-theme="dark"] .leaflet-container {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* ===================
Plotly Dark Mode Support
   =================== */

[data-bs-theme="dark"] .plot-container {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* ===================
CREED-Specific Formatting
   =================== */

.CREED-required {
    fill: #aaaaaa !important;
}

.CREED-recommended {
    fill: #ffc107 !important;
}

.criterion-disabled {
    opacity: 0.6;
    pointer-events: none;
}