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

/*
 * ORTEC brand tokens — single source of truth.
 * Primary palette (Design Guidelines): Burgundy #3F0123, Breeze #D9E8FF,
 * White, Coral #FF7458 (accent for interactive components / CTAs), Greys.
 * Burgundy = deep brand colour (text, headers, compositional fields);
 * Coral = accent for buttons, calls-to-action and key interface details;
 * Breeze = soft supporting field.
 */

:root {
    color-scheme: light dark;

    /* brand constants (available in every mode) */
    --bol-color-burgundy: #3F0123;
    --bol-color-burgundy-light: #521A39;
    --bol-color-breeze: #D9E8FF;
    --bol-color-coral: #FF7458;
    --bol-color-coral-light: #FFAD9D;
    --bol-color-coral-dark: #F05A3B;

    /* corner radii — rounded corners are a brand signature */
    --bol-radius: 12px;
    --bol-radius-sm: 8px;
    --bol-radius-pill: 999px;

    --bol-color-primary: #3F0123;
    --bol-color-primary-lighter: #D9E8FF;
    --bol-color-accent: #FF7458;
    --bol-color-accent-lighter: #FFE4DD;
    --bol-color-positive: #007D34;
    --bol-color-negative: #DB0000;
    --bol-color-negative-lighter: #FFD6D6;
    --bol-color-warning: #F08400;
    --bol-color-text-primary: #3F0123;
    --bol-color-text-secondary: #6E5A62;
    --bol-color-text-contrast: #FFFFFF;
    --bol-color-text-disabled: #3F012399;
    --bol-color-text-light: #ced4da;
    --bol-color-hover: #EDF3FF;
    --bol-color-focus: #3F0123;
    /* selection / active / candidate states — Breeze as the counterweight to
       burgundy & coral. Surface = Breeze, ink = --bol-color-primary (burgundy). */
    --bol-color-selected: #D9E8FF;
    --bol-color-selected-border: #6FA8DC;
    --bol-color-blue: #521A39;
    --bol-color-green: #5D7508;
    --bol-color-orange: #BD4411;
    --bol-color-purple: #BA0063;
    --bol-color-logo-blue: #3F0123;
    --bol-color-logo-green: #BA0063;
    --bol-color-logo-orange: #F05A3B;
    --bol-color-logo-purple: #8C004B;
    --bol-color-background-primary: #F4F4F5;
    --bol-color-background-secondary: #FFFFFF;
    --bol-color-background-tertiary: #E9E9E9;
    --bol-color-border: #3F012326;
}

/* dark palette — Breeze on Burgundy, per the brandmark dark-mode guidance.
   Shared by the OS-preference (Auto) path and the explicit Dark choice. */
@media (prefers-color-scheme: dark) {
    /* Auto: follow the OS unless the user explicitly picked Light */
    :root:not([data-theme="light"]) {
        --bol-color-primary: #D9E8FF;
        --bol-color-primary-lighter: #22262E;
        --bol-color-accent: #FF7458;
        --bol-color-accent-lighter: #3A231E;
        --bol-color-positive: #00C250;
        --bol-color-negative: #FF6666;
        --bol-color-negative-lighter: #4A2A2A;
        --bol-color-warning: #FFAB61;
        --bol-color-text-primary: #ECECEE;
        --bol-color-text-secondary: #9A9AA0;
        --bol-color-text-contrast: #121212;
        --bol-color-text-disabled: #FFFFFF66;
        --bol-color-hover: #232326;
        --bol-color-focus: #D9E8FF;
        --bol-color-selected: #263449;
        --bol-color-selected-border: #5B82BE;
        --bol-color-blue: #D9E8FF;
        --bol-color-green: #8BAE0C;
        --bol-color-orange: #EF851F;
        --bol-color-purple: #BA0063;
        --bol-color-logo-blue: #D9E8FF;
        --bol-color-logo-green: #FFAD9D;
        --bol-color-logo-orange: #FF7458;
        --bol-color-logo-purple: #BA0063;
        --bol-color-background-primary: #0F0F11;
        --bol-color-background-secondary: #1A1A1D;
        --bol-color-background-tertiary: #26262A;
        --bol-color-border: #FFFFFF1F;
    }
}

/* explicit Dark choice — wins regardless of OS preference */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bol-color-primary: #D9E8FF;
    --bol-color-primary-lighter: #22262E;
    --bol-color-accent: #FF7458;
    --bol-color-accent-lighter: #3A231E;
    --bol-color-positive: #00C250;
    --bol-color-negative: #FF6666;
    --bol-color-negative-lighter: #4A2A2A;
    --bol-color-warning: #FFAB61;
    --bol-color-text-primary: #ECECEE;
    --bol-color-text-secondary: #9A9AA0;
    --bol-color-text-contrast: #121212;
    --bol-color-text-disabled: #FFFFFF66;
    --bol-color-hover: #232326;
    --bol-color-focus: #D9E8FF;
    --bol-color-selected: #263449;
    --bol-color-selected-border: #5B82BE;
    --bol-color-blue: #D9E8FF;
    --bol-color-green: #8BAE0C;
    --bol-color-orange: #EF851F;
    --bol-color-purple: #BA0063;
    --bol-color-logo-blue: #D9E8FF;
    --bol-color-logo-green: #FFAD9D;
    --bol-color-logo-orange: #FF7458;
    --bol-color-logo-purple: #BA0063;
    --bol-color-background-primary: #0F0F11;
    --bol-color-background-secondary: #1A1A1D;
    --bol-color-background-tertiary: #26262A;
    --bol-color-border: #FFFFFF1F;
}

/* explicit Light choice — pin the scheme so light-dark() and native controls follow it */
:root[data-theme="light"] {
    color-scheme: light;
}

body {font-family:Roboto, sans-serif;font-weight:300;font-style:normal;background-color:var(--bol-color-background-primary);color:var(--bol-color-text-primary);}

/* override bootstrap defaults */

.form-control {background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);border-radius:var(--bol-radius-sm);}
.form-control:focus {background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);border-color:var(--bol-color-primary);box-shadow:0 0 0 0.2rem var(--bol-color-accent-lighter);}
.form-control::placeholder {color:var(--bol-color-text-secondary);}
.form-control:disabled, .form-control[readonly] {background-color:var(--bol-color-background-tertiary);color:var(--bol-color-text-secondary);}
.form-select {background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-secondary);border-radius:var(--bol-radius-sm);}

.accordion-button:not(.collapsed) {color:var(--bol-color-text-primary);background-color:var(--bol-color-background-secondary);}
.accordion-button:focus {border-color:var(--bol-color-border);}

/* Buttons — pill-shaped, Roboto Medium with brand letter-spacing */
.btn {border-radius:var(--bol-radius-pill);font-weight:500;letter-spacing:0.02em;}

.btn-outline-primary {border-color:var(--bol-color-primary);color:var(--bol-color-primary);}
.btn-outline-primary:hover {background-color:var(--bol-color-primary);border-color:var(--bol-color-primary);color:var(--bol-color-text-contrast);}

.btn-outline-secondary {border-color:var(--bol-color-text-secondary);color:var(--bol-color-text-secondary);}
.btn-outline-secondary:hover {background-color:var(--bol-color-text-secondary);border-color:var(--bol-color-text-secondary);color:var(--bol-color-background-secondary);}

/* Primary CTA — Coral pill with Burgundy label (brand button treatment) */
.btn-primary {border-color:var(--bol-color-accent);background-color:var(--bol-color-accent);color:var(--bol-color-burgundy);}
.btn-primary:hover, .btn-primary:focus {border-color:var(--bol-color-coral-dark);background-color:var(--bol-color-coral-dark);color:var(--bol-color-burgundy);}
.btn-primary:disabled, .btn-primary.disabled {border-color:var(--bol-color-accent);background-color:var(--bol-color-accent);color:var(--bol-color-burgundy);}

/* Selection controls — Coral when checked (visible on both light and dark),
   high-contrast Burgundy glyph. Switch knobs stay white. */
.form-check-input {background-color:var(--bol-color-background-secondary);border-color:var(--bol-color-text-secondary);}
.form-check-input:checked {background-color:var(--bol-color-accent);border-color:var(--bol-color-accent);}
.form-check-input[type="checkbox"]:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%233F0123' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");}
.form-check-input[type="radio"]:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.2' fill='%233F0123'/%3E%3C/svg%3E");}
.form-switch .form-check-input:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");}
.form-check-input:focus {border-color:var(--bol-color-accent);box-shadow:0 0 0 0.2rem var(--bol-color-accent-lighter);}

.table {color:var(--bol-color-text-primary);background-color:var(--bol-color-background-primary);}
.table a {color:var(--bol-color-text-primary);}
.table-striped>tbody>tr:nth-of-type(odd){color:var(--bol-color-text-primary);background-color:var(--bol-color-background-tertiary);}

.modal-content {background-color:var(--bol-color-background-secondary);border-radius:var(--bol-radius);}

.offcanvas {background-color:var(--bol-color-background-primary);color:var(--bol-color-text-primary);}
.offcanvas-header .btn-close {background-color:#fff;}