/*!
 * OptimaGrid Brand Palette & Design Tokens
 * -----------------------------------------------------------------------------
 * OptimaGrid Web Portal. Authored in-house to replace the commercial
 * Color Admin theme bundle. This file defines the OptimaGrid brand colours and
 * Bootstrap design tokens (the ":root" CSS custom properties that Bootstrap 5.3
 * reads to colour every component). Loaded AFTER the stock Bootstrap stylesheet
 * so these values win, giving all Bootstrap components the OptimaGrid look.
 *
 * Light theme only. Dark-mode and alternate-theme switching are intentionally
 * omitted.
 */

:root {
    /* Base named colours */
    --bs-blue: #1f6bff;
    --bs-indigo: #640DF3;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #e6180d;
    --bs-orange: #FF9500;
    --bs-yellow: #FFCC00;
    --bs-green: #028824;
    --bs-teal: #20c997;
    --bs-lime: #90ca4b;
    --bs-cyan: #30beff;
    --bs-black: #000000;
    --bs-white: #FFFFFF;
    --bs-muted: #869ac0;
    --bs-gray: #657eae;
    --bs-gray-dark: #3c4e71;
    --bs-gray-100: #ebeef4;
    --bs-gray-200: #dae0ec;
    --bs-gray-300: #c9d2e3;
    --bs-gray-400: #a8b6d1;
    --bs-gray-500: #869ac0;
    --bs-gray-600: #657eae;
    --bs-gray-700: #4d6593;
    --bs-gray-800: #3c4e71;
    --bs-gray-900: #212837;

    /* Brand / theme accent (OptimaGrid blue) */
    --bs-default: #dae0ec;
    --bs-theme: #1f6bff;
    --bs-theme-color: #FFFFFF;
    --bs-theme-rgb: 31,107,255;
    --bs-theme-color-rgb: 255,255,255;

    /* Semantic colours */
    --bs-primary: #1f6bff;
    --bs-secondary: #c9d2e3;
    --bs-success: #028824;
    --bs-info: #30beff;
    --bs-warning: #FF9500;
    --bs-danger: #e6180d;
    --bs-light: #ebeef4;
    --bs-dark: #212837;

    /* RGB channel variants (used by rgba() utilities) */
    --bs-default-rgb: 218,224,236;
    --bs-primary-rgb: 31,107,255;
    --bs-secondary-rgb: 201,210,227;
    --bs-success-rgb: 2,136,36;
    --bs-info-rgb: 48,190,255;
    --bs-warning-rgb: 255,149,0;
    --bs-danger-rgb: 230,24,13;
    --bs-light-rgb: 235,238,244;
    --bs-dark-rgb: 33,40,55;
    --bs-blue-rgb: 31,107,255;
    --bs-indigo-rgb: 100,13,243;
    --bs-purple-rgb: 111,66,193;
    --bs-pink-rgb: 214,51,132;
    --bs-red-rgb: 230,24,13;
    --bs-orange-rgb: 255,149,0;
    --bs-yellow-rgb: 255,204,0;
    --bs-green-rgb: 2,136,36;
    --bs-teal-rgb: 32,201,151;
    --bs-lime-rgb: 144,202,75;
    --bs-cyan-rgb: 48,190,255;
    --bs-white-rgb: 255,255,255;
    --bs-muted-rgb: 134,154,192;
    --bs-black-rgb: 0,0,0;
    --bs-gray-100-rgb: 235,238,244;
    --bs-gray-200-rgb: 218,224,236;
    --bs-gray-300-rgb: 201,210,227;
    --bs-gray-400-rgb: 168,182,209;
    --bs-gray-500-rgb: 134,154,192;
    --bs-gray-600-rgb: 101,126,174;
    --bs-gray-700-rgb: 77,101,147;
    --bs-gray-800-rgb: 60,78,113;
    --bs-gray-900-rgb: 33,40,55;

    /* Emphasis / subtle variants (Bootstrap 5.3 colour system) */
    --bs-primary-text-emphasis: #0c2b66;
    --bs-secondary-text-emphasis: #50545b;
    --bs-success-text-emphasis: #01360e;
    --bs-info-text-emphasis: #134c66;
    --bs-warning-text-emphasis: #663c00;
    --bs-danger-text-emphasis: #5c0a05;
    --bs-light-text-emphasis: #4d6593;
    --bs-dark-text-emphasis: #4d6593;
    --bs-primary-bg-subtle: #d2e1ff;
    --bs-secondary-bg-subtle: #ebeef4;
    --bs-success-bg-subtle: #cce7d3;
    --bs-info-bg-subtle: #d6f2ff;
    --bs-warning-bg-subtle: #fff5cc;
    --bs-danger-bg-subtle: #fad1cf;
    --bs-light-bg-subtle: #f5f7fa;
    --bs-dark-bg-subtle: #a8b6d1;
    --bs-primary-border-subtle: #a5c4ff;
    --bs-secondary-border-subtle: #dae0ec;
    --bs-success-border-subtle: #9acfa7;
    --bs-info-border-subtle: #ace5ff;
    --bs-warning-border-subtle: #ffeb99;
    --bs-danger-border-subtle: #f5a39e;
    --bs-light-border-subtle: #dae0ec;
    --bs-dark-border-subtle: #869ac0;

    /* Typography */
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;

    /* Body & surfaces */
    --bs-body-color: #212837;
    --bs-body-color-rgb: 33,40,55;
    --bs-body-bg: #ebeef4;
    --bs-body-bg-rgb: 235,238,244;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: rgba(33, 40, 55, 0.75);
    --bs-secondary-color-rgb: 33,40,55;
    --bs-secondary-bg: #ebeef4;
    --bs-secondary-bg-rgb: 235,238,244;
    --bs-tertiary-color: rgba(33, 40, 55, 0.5);
    --bs-tertiary-color-rgb: 33,40,55;
    --bs-tertiary-bg: #ebeef4;
    --bs-tertiary-bg-rgb: 235,238,244;
    --bs-component-bg: #FFFFFF;
    --bs-heading-color: #000000;

    /* Links */
    --bs-link-color: #1f6bff;
    --bs-link-color-rgb: 31,107,255;
    --bs-link-decoration: underline;
    --bs-link-hover-color: rgba(31, 107, 255, 0.5);
    --bs-link-hover-color-rgb: 31,107,255;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212837;
    --bs-highlight-bg: #fff5cc;

    /* Borders & radius */
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #d1d9e7;
    --bs-border-color-translucent: rgba(60, 78, 113, 0.2);
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 9px;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;

    /* Shadows & focus */
    --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-black-rgb), 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-black-rgb), 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--bs-black-rgb), 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--bs-black-rgb), 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(31, 107, 255, 0.25);

    /* Form validation */
    --bs-form-valid-color: #028824;
    --bs-form-valid-border-color: #028824;
    --bs-form-invalid-color: #e6180d;
    --bs-form-invalid-border-color: #e6180d;
}

/*
 * Extended dark-shade colour utilities used by the app (e.g. toast headers).
 * Bootstrap only ships the base semantic colours; these -700/-800 shades were
 * part of the old theme's extended scale, reproduced here for the classes the
 * application actually references.
 */
.bg-success-800 { --bs-bg-opacity: 1; background-color: rgba(1,54,14,var(--bs-bg-opacity)) !important; }
.bg-success-700 { --bs-bg-opacity: 1; background-color: rgba(1,82,22,var(--bs-bg-opacity)) !important; }
.bg-danger-800  { --bs-bg-opacity: 1; background-color: rgba(92,10,5,var(--bs-bg-opacity)) !important; }
.bg-warning-800 { --bs-bg-opacity: 1; background-color: rgba(102,60,0,var(--bs-bg-opacity)) !important; }
.bg-info-800    { --bs-bg-opacity: 1; background-color: rgba(19,76,102,var(--bs-bg-opacity)) !important; }
.text-info-800  { --bs-text-opacity: 1; color: rgba(19,76,102,var(--bs-text-opacity)) !important; }

/*
 * Headings. Stock Bootstrap uses a larger heading scale (h1 2.5rem ... h6 1rem)
 * which reads noticeably bigger than the previous theme. Reproduce the previous
 * theme's smaller responsive scale so page titles match the original.
 */
h1, .h1 { font-size: calc(1.34375rem + 1.125vw); }
h2, .h2 { font-size: calc(1.3rem + .6vw); }
h3, .h3 { font-size: calc(1.278125rem + .3375vw); }
h4, .h4 { font-size: calc(1.25625rem + .075vw); }
h5, .h5 { font-size: 1.09375rem; }
h6, .h6 { font-size: .875rem; }
@media (min-width: 1200px) {
    h1, .h1 { font-size: 2.1875rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.53125rem; }
    h4, .h4 { font-size: 1.3125rem; }
}

/*
 * Component surfaces.
 * The page background (--bs-body-bg) is a light blue-grey. Stock Bootstrap 5.3
 * defaults every raised surface (cards, dropdowns, modals, form controls, ...)
 * to --bs-body-bg, which would tint them all grey. The previous theme decoupled
 * these onto a white "component" colour; we reproduce that here so cards, menus
 * and inputs stay white on the grey page.
 */
:root {
    --bs-component-bg: #FFFFFF;
    --bs-component-bg-rgb: 255,255,255;
}
.card         { --bs-card-bg: var(--bs-component-bg); --bs-card-cap-bg: var(--bs-light); }
.dropdown-menu{ --bs-dropdown-bg: var(--bs-component-bg); }
.modal        { --bs-modal-bg: var(--bs-component-bg); }
.list-group   { --bs-list-group-bg: var(--bs-component-bg); }
.accordion    { --bs-accordion-bg: var(--bs-component-bg); }
.pagination   { --bs-pagination-bg: var(--bs-component-bg); }
.toast        { --bs-toast-bg: rgba(var(--bs-component-bg-rgb), 0.85); }
.form-control, .form-select { background-color: var(--bs-component-bg); }
/* Stock Bootstrap ties table row bg to --bs-body-bg (grey here), which turns
   striped rows grey/darker-grey. Make rows transparent so they show the white
   card behind them: even rows = white, striped rows = light grey. */
.table        { --bs-table-bg: transparent; }

/* Buttons. Stock Bootstrap's default button is 1rem / weight 400, which is
   oversized against this 0.875rem UI. The previous theme sized buttons to the
   body font (0.875rem, weight 500). Applied at the base so every default button
   across all forms is corrected, not page by page. */
.btn                            { --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; }
.btn-lg, .btn-group-lg > .btn   { --bs-btn-font-size: 1.09375rem; --bs-btn-border-radius: 9px; }
.btn-sm, .btn-group-sm > .btn   { --bs-btn-font-size: .765625rem; --bs-btn-border-radius: 3px; }