@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-VariableItalic.woff2') format('woff2');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Keep application copy and controls in Inter while headings adopt the
       Academy's Manrope display character. */
    --mm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mm-font-heading: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-font-sans-serif: var(--mm-font-body);
    --bs-body-font-family: var(--mm-font-body);
    --rz-text-font-family: var(--mm-font-body);

    /* === Shared MentorMate design tokens
       These names describe intent rather than a framework so Bootstrap, Radzen,
       isolated Blazor CSS, and future surfaces can consume the same palette. */
    --mm-paper: #f7f9fa;
    --mm-surface: #ffffff;
    --mm-mist: #edf1f3;
    --mm-rule: #d5dde1;
    --mm-slate: #60717b;
    --mm-ink: #132536;
    --mm-deep-ink: #0b1824;
    --mm-primary: #00609f;
    --mm-primary-rgb: 0, 96, 159;
    --mm-primary-hover: #004f82;
    --mm-primary-active: #00446f;
    --mm-accent: #704c73;
    --mm-accent-strong: #4d3150;
    --mm-accent-wash: #f0eaf1;

    /* Bootstrap primary utilities read these root variables. Keep structural
       headings, links, focus states, and other semantic accents on one blue. */
    --bs-primary: var(--mm-primary);
    --bs-primary-rgb: var(--mm-primary-rgb);
    --bs-link-color: var(--mm-primary);
    --bs-link-color-rgb: var(--mm-primary-rgb);
    --bs-link-hover-color: var(--mm-primary-hover);
    --bs-link-hover-color-rgb: 0, 79, 130;
    --bs-focus-ring-color: rgba(var(--mm-primary-rgb), 0.25);

    /* Radzen Material uses its pink secondary role for selected dates by
       default. Calendar selection is a primary action in MentorMate. */
    --rz-datepicker-calendar-selected-background-color: var(--mm-primary);
    --rz-datepicker-calendar-selected-color: #ffffff;
    --rz-datepicker-calendar-selected-hover-background-color: var(--mm-primary-hover);
    --rz-datepicker-calendar-selected-hover-color: #ffffff;

    /* Dark-shell roles use the Academy dark scheme so text and active states
       remain clear on the Deep Ink navigation surface. */
    --mm-dark-surface: #172a38;
    --mm-dark-rule: #293d4b;
    --mm-dark-text: #f4f6f7;
    --mm-dark-text-muted: #e3e8ea;
    --mm-dark-accent: #c8a7cb;

    /* Application-specific experiment: retain recognisable blue and purple
       colour while ending in the shared muted aubergine accent. */
    --mm-sidebar-start: #173f6f;
    --mm-sidebar-middle: #343a70;
    --mm-sidebar-end: #704c73;
    --mm-sidebar-background: linear-gradient(170deg, var(--mm-sidebar-start) 0%, var(--mm-sidebar-middle) 50%, var(--mm-sidebar-end) 100%);

    --mm-focus-ring: rgb(112 76 115 / 0.55);
    --mm-shadow-soft: 0 0.75rem 2rem rgb(19 37 54 / 0.08);

}

/* Bootstrap compiles button colors into component-local variables, so the
   root primary token alone does not recolor filled and outline buttons. */
.btn-primary {
    --bs-btn-bg: var(--mm-primary);
    --bs-btn-border-color: var(--mm-primary);
    --bs-btn-hover-bg: var(--mm-primary-hover);
    --bs-btn-hover-border-color: var(--mm-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--mm-primary-rgb);
    --bs-btn-active-bg: var(--mm-primary-active);
    --bs-btn-active-border-color: var(--mm-primary-active);
    --bs-btn-disabled-bg: var(--mm-primary);
    --bs-btn-disabled-border-color: var(--mm-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--mm-primary);
    --bs-btn-border-color: var(--mm-primary);
    --bs-btn-hover-bg: var(--mm-primary);
    --bs-btn-hover-border-color: var(--mm-primary);
    --bs-btn-focus-shadow-rgb: var(--mm-primary-rgb);
    --bs-btn-active-bg: var(--mm-primary-active);
    --bs-btn-active-border-color: var(--mm-primary-active);
    --bs-btn-disabled-color: var(--mm-primary);
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
    background-color: var(--mm-primary);
    border-color: var(--mm-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--mm-primary-rgb), 0.65);
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem rgba(var(--mm-primary-rgb), 0.35);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.nav-link:focus-visible {
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem rgba(var(--mm-primary-rgb), 0.35);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mm-primary);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--mm-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--mm-primary);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--mm-primary-hover);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--mm-primary-hover);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(var(--mm-primary-rgb), 0.35);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(var(--mm-primary-rgb), 0.35);
}

input[type='checkbox'] {
    accent-color: var(--mm-primary);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--mm-font-body);
    font-optical-sizing: auto;
}

/* Desktop density trial: Inter's generous x-height reads larger than the
   previous typeface at the same nominal size. Scale rem-based typography and
   spacing together, while retaining the mobile-safe 16px browser default.
   Remove this media rule, or restore 16px, to return to the browser default. */
@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--mm-font-heading);
}

/* Shared compact action button used by data-grid action columns. */
.btn-soft-blue-sm {
    margin: 0.175rem 0 0.175rem 0.2rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.4rem;
    outline: none;
    background-color: #e3f2fd;
    color: #1976d2;
    font-size: 0.875rem;
}

.btn-soft-blue-sm:hover {
    background-color: #bbdefb;
    color: #0d47a1;
}

.btn-soft-blue-sm:focus,
.btn-soft-blue-sm:active,
.btn-soft-blue-sm:focus-visible {
    border-radius: 0.4rem;
    outline: none;
    box-shadow: 0 0 0 3px #90caf9;
    --bs-btn-focus-box-shadow: none !important;
}

a.btn-soft-blue-sm:focus {
    outline: none !important;
}

/* Shared compact Radzen DataGrid filter row. Apply to an ancestor of the grid. */
.compact-filter-grid thead tr:nth-child(2) th {
    padding: 0.25rem 0.5rem !important;
}

.compact-filter-grid .rz-cell-filter {
    padding: 0.125rem 0.5rem !important;
}

.compact-filter-grid .rz-cell-filter-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    width: 100%;
    min-width: 0 !important;
    height: 2rem !important;
}

.compact-filter-grid .rz-filter-button {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 0.25rem !important;
    width: auto !important;
    height: 1.6rem !important;
    min-height: 1.6rem !important;
    padding: 0 0.4rem !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

.compact-filter-grid .rz-filter-button.rz-grid-filter-active,
.compact-filter-grid .rz-cell-filter .rz-button {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.compact-filter-grid .rz-filter-button .rzi {
    font-size: 1rem !important;
}

.compact-filter-grid .rz-cell-filter .rz-textbox {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 1.6rem !important;
    padding: 0.125rem 0.5rem !important;
    box-sizing: border-box;
    font-size: 0.95rem !important;
}