:root {
    /* System-wide variables */
    --bs-body-font-family: 'Montserrat', sans-serif;
    --kendo-font-family: 'Montserrat', sans-serif;
    --kendo-font-size: 18px;

    /* Optional: color and style variables */
    /*--kendo-color-base: #ddf;*/
    /*--kendo-color-base-hover: #eef;*/
    /*--kendo-color-base-active: #ccf;*/
    /*--kendo-color-on-base: #00c;*/
    /*--kendo-color-primary: #00c;*/
    /*--kendo-color-primary-hover: #00c;*/
    /*--kendo-color-primary-active: #00c;*/
    /*--kendo-color-on-primary: #00c;*/
    
    /*--kendo-border-radius-md: 1rem;*/
}
.k-button-solid-base{
    background-color: #6c757d;
    color: white;
}
/* Fix Telerik dropdown popups in Syncfusion dialogs */
.e-dialog .e-dlg-content {
    overflow: visible !important;
}

/* Ensure Telerik popup containers render above dialogs */
.k-animation-container,
.k-popup {
    z-index: 100002 !important; /* Higher than dialog z-index */
}
/* Only fix the displayed text layer — not the dropdown wrapper */
.k-input-inner {
    position: relative !important;
    z-index: 0 !important;
}

/* Optional: ensure parent stays normal */
.k-input {
    z-index: 0 !important;
}
/* Global font baseline */
html,
body {
    font-family: var(--bs-body-font-family);
    background-color: #F8FAFE;
    -webkit-font-smoothing: antialiased;
}

/* 
   Ensure text inherits Montserrat globally 
   BUT EXCLUDE icon classes (Syncfusion, Telerik, FontAwesome)
*/
*:not(.e-icons):not(.e-font-icon):not(.k-icon):not(.kendo-font-icon):not(.fa):not(.fas):not(.far):not(.fa-solid),
*:not(.e-icons):not(.e-font-icon):not(.k-icon):not(.kendo-font-icon):not(.fa):not(.fas):not(.far):not(.fa-solid)::before,
*:not(.e-icons):not(.e-font-icon):not(.k-icon):not(.kendo-font-icon):not(.fa):not(.fas):not(.far):not(.fa-solid)::after {
    font-family: 'Montserrat', sans-serif !important;
}

/* Apply Montserrat to Telerik text elements, not icon glyphs */
.k-font-family,
.k-theme-builder,
.k-widget:not(.k-icon):not(.k-font-icon):not(.kendo-font-icon),
.k-input:not(.k-icon):not(.k-font-icon):not(.kendo-font-icon),
.k-button:not(.k-icon):not(.k-font-icon):not(.kendo-font-icon),
.k-card:not(.k-icon):not(.k-font-icon):not(.kendo-font-icon) {
    font-family: 'Montserrat', sans-serif !important;
}

/* Links and buttons */
a,
.btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Content + misc UI styles */
.content {
    padding-top: 1.1rem;
}

.control-section {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Remove default white background under tabs */
.e-tab .e-content {
    background-color: #f8fafe !important;
}

/* Unify tab item area */
.e-tab .e-item {
    background-color: #f8fafe !important;
}

h1:focus {
    outline: none;
}

/* Fix white space between header controls and list inside tabs */
.e-tab-template .p-3 {
    background-color: transparent !important;
}

/* Make ticket cards match passes page padding and background */
.ticket-card {
    background-color: #f8fafe;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-card .k-card-body {
    padding: 1rem 1.25rem;
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Blazor error styling */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,...) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Forms */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- ICON FONT SAFETY RESETS ---- */
/* These make sure icon fonts keep their intended typeface */
.e-icons,
.e-icons::before,
.e-icons::after,
.e-font-icon,
.e-font-icon::before,
.e-font-icon::after {
    font-family: 'e-icons' !important;
}

.k-icon,
.k-icon::before,
.k-icon::after,
.kendo-font-icon,
.kendo-font-icon::before,
.kendo-font-icon::after {
    font-family: 'kendo-font-icons' !important;
}

.fa,
.fa::before,
.fa::after,
.fas,
.far,
.fa-solid {
    font-family: 'Font Awesome 6 Free' !important;
}
:where(.e-icons, .e-font-icon)::before,
:where(.e-icons, .e-font-icon)::after,
:where(.e-icons, .e-font-icon) {
    font-family: 'e-icons' !important;
    font-style: normal !important;
}

:where(.k-icon, .kendo-font-icon)::before,
:where(.k-icon, .kendo-font-icon)::after,
:where(.k-icon, .kendo-font-icon) {
    font-family: 'kendo-font-icons' !important;
    font-style: normal !important;
}

:where(.fa, .fas, .far, .fa-solid)::before,
:where(.fa, .fas, .far, .fa-solid)::after,
:where(.fa, .fas, .far, .fa-solid) {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900;
    font-style: normal !important;
}
/* --- FINAL FONT OVERRIDE --- */
:root {
    --bs-body-font-family: 'Montserrat', sans-serif !important;
    --kendo-font-family: 'Montserrat', sans-serif !important;
}

html, body {
    font-family: 'Montserrat', sans-serif !important;
}

/* Force Telerik & Syncfusion widgets to obey */
.k-widget,
.k-button,
.k-input,
.k-grid,
.k-card,
.k-dialog,
.k-window,
.e-control,
.e-btn,
.e-input,
.e-content {
    font-family: 'Montserrat', sans-serif !important;
}