/* =====================================================================
   MedSuite colour palette (ticket #1038)
   Single source of truth for UI colours. Components must use var(--ms-*)
   instead of hardcoded hex values.
   Loaded AFTER the Syncfusion theme (bootstrap5.3) so overrides win.
   ===================================================================== */

:root {
    /* --- Base palette (RAL Classic) --- */
    --ms-cream: #E7E4DF;          /* RAL 9001 Cream        - page background */
    --ms-pebble: #B1A79E;         /* RAL 7032 Pebble grey  - appointment body, secondary surfaces */
    --ms-pastel-blue: #7189AB;    /* RAL 5024 Pastel blue  - accent / primary */
    --ms-grey-white: #D7DFF4;     /* RAL 9002 Grey white   - day headers, grid headers, selection */
    --ms-blue-grey: #566578;      /* RAL 7031 Blue grey    - app bar, "foreign" appointments */
    --ms-anthracite: #383E42;     /* RAL 7016 Anthracite   - text instead of black */

    /* --- Derived --- */
    --ms-pastel-blue-dark: #5E7699;
    --ms-pastel-blue-darker: #4F6584;
    --ms-pastel-blue-rgb: 113, 137, 171;
    --ms-blue-grey-dark: #4A5767;
    --ms-cream-light: #F4F2EF;
    --ms-cream-dark: #D6D0C9;     /* non-working time blocks in the calendar */
    --ms-focus-border: #A9B8CD;
    --ms-surface: #FFFFFF;
    --ms-border: #CFC9C2;
    --ms-border-light: #E2DED9;
    --ms-text: var(--ms-anthracite);
    --ms-text-muted: #6B7278;
    --ms-on-dark: #FFFFFF;

    /* --- Semantic (muted to fit the palette) --- */
    --ms-danger: #B5473F;
    --ms-danger-dark: #9A3C35;
    --ms-danger-bg: #F4E1DE;
    --ms-success: #4F8A5B;
    --ms-success-dark: #43764D;
    --ms-success-bg: #DDEADF;
    --ms-warning: #C9A227;
    --ms-warning-bg: #F5EDD2;
    --ms-warning-strong: #B8862E;   /* toast background (white text) */
    --ms-info: var(--ms-pastel-blue);
    --ms-info-bg: #E3E9F4;

    /* --- Bootstrap 5.3 mapping (body-bg intentionally stays white: it paints inputs/cards/modals) --- */
    --bs-body-color: var(--ms-text);
    --bs-body-color-rgb: 56, 62, 66;
    --bs-emphasis-color: var(--ms-anthracite);
    --bs-secondary-color: rgba(56, 62, 66, .75);
    --bs-primary: var(--ms-pastel-blue);
    --bs-primary-rgb: var(--ms-pastel-blue-rgb);
    --bs-link-color: var(--ms-pastel-blue-dark);
    --bs-link-color-rgb: 94, 118, 153;
    --bs-link-hover-color: var(--ms-pastel-blue-darker);
    --bs-link-hover-color-rgb: 79, 101, 132;
    --bs-border-color: var(--ms-border);
    --bs-focus-ring-color: rgba(var(--ms-pastel-blue-rgb), .25);
    --bs-danger: var(--ms-danger);
    --bs-danger-rgb: 181, 71, 63;
    --bs-success: var(--ms-success);
    --bs-success-rgb: 79, 138, 91;

    /* --- Syncfusion bootstrap5.3 mapping (derived values are literal hex in the theme, so all are overridden) --- */
    --color-sf-primary: rgba(113, 137, 171, 1);
    --color-sf-primary-light: var(--ms-focus-border);
    --color-sf-primary-lighter: var(--ms-grey-white);
    --color-sf-primary-dark: var(--ms-pastel-blue-dark);
    --color-sf-primary-darker: var(--ms-blue-grey);
    --color-sf-primary-shadow: 113, 137, 171;
    --color-sf-primary-bg-color-hover: var(--ms-pastel-blue-dark);
    --color-sf-primary-border-color-hover: var(--ms-pastel-blue-darker);
    --color-sf-primary-bg-color-pressed: var(--ms-pastel-blue-darker);
    --color-sf-primary-border-color-pressed: var(--ms-pastel-blue-darker);
    --color-sf-primary-bg-color-disabled: rgba(113, 137, 171, .65);
    --color-sf-content-bg-color-selected: var(--ms-pastel-blue);
    --color-sf-flyout-bg-color-pressed: var(--ms-pastel-blue);
    --color-sf-border-focus: var(--ms-focus-border);
    --color-sf-border-selected: var(--ms-focus-border);
    --color-sf-border: var(--ms-border-light);
    --color-sf-border-light: var(--ms-border-light);
    --color-sf-content-text-color: var(--ms-anthracite);
    --color-sf-flyout-text-color: var(--ms-anthracite);
    --color-sf-secondary: rgba(86, 101, 120, 1);
    --color-sf-secondary-bg-color-hover: var(--ms-blue-grey-dark);
    --color-sf-secondary-border-color-hover: var(--ms-blue-grey-dark);
    --color-sf-secondary-bg-color-pressed: var(--ms-blue-grey-dark);
    --color-sf-secondary-border-color-pressed: var(--ms-blue-grey-dark);
    --color-sf-secondary-shadow: 86, 101, 120;
}

/* =====================================================================
   Page surfaces
   ===================================================================== */
body {
    background-color: var(--ms-cream);
    color: var(--ms-text);
}

/* =====================================================================
   Bootstrap component rules (compiled bootstrap.min.css hardcodes blue)
   ===================================================================== */
.btn-primary {
    --bs-btn-color: var(--ms-on-dark);
    --bs-btn-bg: var(--ms-pastel-blue);
    --bs-btn-border-color: var(--ms-pastel-blue);
    --bs-btn-hover-color: var(--ms-on-dark);
    --bs-btn-hover-bg: var(--ms-pastel-blue-dark);
    --bs-btn-hover-border-color: var(--ms-pastel-blue-darker);
    --bs-btn-focus-shadow-rgb: var(--ms-pastel-blue-rgb);
    --bs-btn-active-color: var(--ms-on-dark);
    --bs-btn-active-bg: var(--ms-pastel-blue-darker);
    --bs-btn-active-border-color: var(--ms-pastel-blue-darker);
    --bs-btn-disabled-color: var(--ms-on-dark);
    --bs-btn-disabled-bg: var(--ms-pastel-blue);
    --bs-btn-disabled-border-color: var(--ms-pastel-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--ms-pastel-blue-dark);
    --bs-btn-border-color: var(--ms-pastel-blue);
    --bs-btn-hover-color: var(--ms-on-dark);
    --bs-btn-hover-bg: var(--ms-pastel-blue);
    --bs-btn-hover-border-color: var(--ms-pastel-blue);
    --bs-btn-focus-shadow-rgb: var(--ms-pastel-blue-rgb);
    --bs-btn-active-color: var(--ms-on-dark);
    --bs-btn-active-bg: var(--ms-pastel-blue-dark);
    --bs-btn-active-border-color: var(--ms-pastel-blue-dark);
    --bs-btn-disabled-color: var(--ms-pastel-blue);
    --bs-btn-disabled-border-color: var(--ms-pastel-blue);
}

.btn-secondary {
    --bs-btn-bg: var(--ms-blue-grey);
    --bs-btn-border-color: var(--ms-blue-grey);
    --bs-btn-hover-bg: var(--ms-blue-grey-dark);
    --bs-btn-hover-border-color: var(--ms-blue-grey-dark);
    --bs-btn-active-bg: var(--ms-blue-grey-dark);
    --bs-btn-active-border-color: var(--ms-blue-grey-dark);
    --bs-btn-disabled-bg: var(--ms-blue-grey);
    --bs-btn-disabled-border-color: var(--ms-blue-grey);
}

.btn-danger {
    --bs-btn-bg: var(--ms-danger);
    --bs-btn-border-color: var(--ms-danger);
    --bs-btn-hover-bg: var(--ms-danger-dark);
    --bs-btn-hover-border-color: var(--ms-danger-dark);
    --bs-btn-active-bg: var(--ms-danger-dark);
    --bs-btn-active-border-color: var(--ms-danger-dark);
}

.btn-success {
    --bs-btn-bg: var(--ms-success);
    --bs-btn-border-color: var(--ms-success);
    --bs-btn-hover-bg: var(--ms-success-dark);
    --bs-btn-hover-border-color: var(--ms-success-dark);
    --bs-btn-active-bg: var(--ms-success-dark);
    --bs-btn-active-border-color: var(--ms-success-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ms-focus-border);
    box-shadow: 0 0 0 .25rem rgba(var(--ms-pastel-blue-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--ms-pastel-blue);
    border-color: var(--ms-pastel-blue);
}

.form-check-input:focus {
    border-color: var(--ms-focus-border);
    box-shadow: 0 0 0 .25rem rgba(var(--ms-pastel-blue-rgb), .25);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ms-pastel-blue);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--ms-anthracite);
    --bs-nav-tabs-border-color: var(--ms-border);
    --bs-nav-tabs-link-active-border-color: var(--ms-border) var(--ms-border) var(--bs-body-bg);
}

.nav {
    --bs-nav-link-color: var(--ms-pastel-blue-dark);
    --bs-nav-link-hover-color: var(--ms-pastel-blue-darker);
}

.pagination {
    --bs-pagination-color: var(--ms-pastel-blue-dark);
    --bs-pagination-hover-color: var(--ms-pastel-blue-darker);
    --bs-pagination-focus-color: var(--ms-pastel-blue-darker);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ms-pastel-blue-rgb), .25);
    --bs-pagination-active-bg: var(--ms-pastel-blue);
    --bs-pagination-active-border-color: var(--ms-pastel-blue);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ms-pastel-blue);
}

.list-group {
    --bs-list-group-active-bg: var(--ms-pastel-blue);
    --bs-list-group-active-border-color: var(--ms-pastel-blue);
}

.text-primary {
    color: var(--ms-pastel-blue-dark) !important;
}

.bg-primary {
    background-color: var(--ms-pastel-blue) !important;
}

/* =====================================================================
   Syncfusion overrides
   ===================================================================== */

/* --- Schedule --- */
/* Specificity must beat ".e-schedule .e-vertical-view .e-date-header-wrap table tbody td" from the theme */
.e-schedule .e-vertical-view .e-date-header-wrap table tbody td.e-header-cells,
.e-schedule .e-vertical-view .e-date-header-wrap table tbody td.e-all-day-cells,
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-header-cells {
    background-color: var(--ms-grey-white);
    color: var(--ms-anthracite);
}

.e-schedule .e-vertical-view .e-work-cells {
    background-color: var(--ms-surface);
}

.e-schedule .e-vertical-view .e-time-cells-wrap .e-time-cells,
.e-schedule .e-vertical-view .e-time-cells-wrap table td {
    color: var(--ms-anthracite);
}

/* Doctor non-working time, days off and vacations are rendered as block events */
.e-schedule .e-block-appointment {
    background: var(--ms-cream-dark);
    color: var(--ms-anthracite);
}

.e-schedule .e-vertical-view .e-work-cells.e-selected-cell,
.e-schedule .e-vertical-view .e-work-cells.e-selected-cell:hover {
    background-color: rgba(var(--ms-pastel-blue-rgb), .35);
}

.e-schedule .e-schedule-toolbar-container .e-toolbar,
.e-schedule .e-schedule-toolbar .e-toolbar-items {
    background-color: var(--ms-cream-light);
}

/* --- Calendar (mini calendar in the sidebar and date pickers) --- */
.e-calendar,
.e-bigger.e-small .e-calendar {
    background-color: var(--ms-cream-light);
    border-color: var(--ms-border);
}

.e-calendar .e-content td.e-today span.e-day {
    color: var(--ms-pastel-blue-darker);
    border-color: var(--ms-pastel-blue);
}

.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-selected:hover span.e-day {
    background-color: var(--ms-pastel-blue);
    color: var(--ms-on-dark);
}

/* --- Grid --- */
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-detailheadercell,
.e-grid .e-grouptopleftcell {
    background-color: var(--ms-grey-white);
    color: var(--ms-anthracite);
}

.e-grid .e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: rgba(var(--ms-pastel-blue-rgb), .10);
}

.e-grid td.e-active {
    background-color: rgba(var(--ms-pastel-blue-rgb), .22);
    color: var(--ms-anthracite);
}

/* --- Dialog --- */
.e-dialog .e-dlg-header-content {
    background-color: var(--ms-cream-light);
    border-bottom: 1px solid var(--ms-border-light);
}

.e-dialog .e-dlg-header {
    color: var(--ms-anthracite);
}

.e-dialog .e-footer-content {
    background-color: var(--ms-cream-light);
    border-top: 1px solid var(--ms-border-light);
}

/* --- Tabs --- */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--ms-pastel-blue-darker);
}

.e-tab .e-tab-header .e-indicator {
    background: var(--ms-pastel-blue);
}