:root {
    /* Typography */
    --app-font-size-xs: 0.8125rem;
    --app-font-size-sm: 0.875rem;
    --app-font-size-md: 1rem;
    --app-font-size-lg: 1.125rem;
    --app-font-size-xl: 1.5rem;
    --app-line-height-sm: 1.4;
    --app-line-height-md: 1.55;
    --app-line-height-tight: 1.25;
    /* Spacing (4px grid) */
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.5rem;
    --app-space-6: 2rem;
    /* Radii */
    --app-radius-sm: 0.25rem;
    --app-radius-md: 0.5rem;
    --app-radius-lg: 0.5rem;
    --app-radius-xl: 0.625rem;
    --app-radius-2xl: 0.75rem;
    --app-radius-pill: 999px;
    /* Color — surfaces & text */
    --app-color-primary: #24456D;
    --app-color-primary-dark: #1B3450;
    /* For rgba(..., α) overlays — must stay in sync with hex primaries above */
    --app-color-primary-rgb: 36, 69, 109;
    --app-color-primary-dark-rgb: 27, 52, 80;
    --app-color-accent: #3B6EA5;
    --app-surface-header: #ffffff;
    /* Monospace stack for IDs, prompts, durations (single source) */
    --app-font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "Segoe UI Mono", Monaco, "Courier New", monospace;
    --app-surface-page: #f4f4f4;
    --app-surface-card: #ffffff;
    --app-surface-muted: #f3f4f6;
    --app-border-subtle: #e0e0e0;
    --app-border-muted: #e5e7eb;
    --app-text-primary: #1f2937;
    --app-text-secondary: #4b5563;
    /* Slightly darker than classic Bootstrap #6c757d for small UI copy on white (WCAG AA). */
    --app-text-muted: #5d6675;
    /* Elevation */
    --app-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1);
    --app-shadow-card-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Motion */
    --app-transition-fast: 0.2s ease;
    /* Focus */
    --app-focus-color: #0d6efd;
    --app-focus-ring: 2px solid var(--app-focus-color);
    /* Admin grid chrome (Telerik integration) */
    --app-grid-header-bg: linear-gradient(135deg, rgba(var(--app-color-primary-rgb), 0.08), rgba(var(--app-color-primary-dark-rgb), 0.08));
}

html, body {
    /* Single source for app typography; layouts must not re-set :global(body). */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--app-font-size-md);
    line-height: var(--app-line-height-md);
    color: var(--app-text-primary);
}

/* --------------------------------------------------------------------------
   Layout shell (#page-container / #content-wrap): shared by MainLayout and
   PublicLayout. Scoped .razor.css stays for Telerik drawer + topbar only.
   See docs/css-override-contract.md.
   -------------------------------------------------------------------------- */

#page-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#content-wrap {
    flex: 1;
    display: flex;
    /* MainLayout: stack topbar (header) above drawer; row would place them side-by-side. */
    flex-direction: column;
    min-height: 0;
}

    /* MainLayout: first sibling after topbar is the drawer wrapper — must fill height. */
    #content-wrap > header ~ div {
        flex: 1;
        min-height: 0;
    }

#page-container .main-content {
    /* flex:1 alone is inert here — .k-drawer-content (its parent) isn't a flex container, so
       flex sizing never applied and .main-content just sized to its own content. height:100%
       resolves against .k-drawer-content's real bounded height (set in MainLayout.razor.css)
       instead, completing the chain a page needs to make ITS OWN content area (e.g. a grid)
       scroll internally rather than relying on the whole page scrolling. */
    height: 100%;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

#page-container .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#page-container .card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 15px;
}

#page-container .card-title {
    font-size: 1.25rem;
    color: #007bff;
}

#page-container .card-text {
    margin: 10px 0;
}

#page-container .card .btn {
    border-radius: var(--app-radius-md);
    transition: background-color var(--app-transition-fast);
}

@media (max-width: 768px) {
    #page-container .row {
        flex-direction: column;
    }

    #page-container .card {
        width: 100%;
    }
}

a, .btn-link {
    color: #0366d6;
}

:where(button, [role="button"], a, input, select, textarea, .k-button):focus-visible {
    outline: 2px solid var(--app-focus-color);
    outline-offset: 2px;
}

/*
 * PagesManage: same reason as the InputFile rule below — InputCheckbox's inner
 * <input type="checkbox"> is rendered outside PagesManage.razor.css's scoped CSS reach,
 * so its size must be fixed here instead of there.
 */
#isPublished {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/*
 * InputFile: inner <input type="file"> is rendered outside Blazor scoped CSS attribute
 * on the parent component, so feature .razor.css often fails to hide native “Choose file”.
 */
input[type="file"].hidden-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Skip to main content — visible only on keyboard focus (WCAG 2.4.1) */
.app-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: var(--app-space-2) var(--app-space-4);
    background: var(--app-surface-card);
    color: var(--app-text-primary);
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--app-radius-md);
    font-weight: 600;
    font-size: var(--app-font-size-sm);
    text-decoration: none;
    box-shadow: var(--app-shadow-card);
}

    .app-skip-link:focus {
        left: var(--app-space-4);
        top: var(--app-space-4);
        outline: var(--app-focus-ring);
        outline-offset: 2px;
    }

.app-btn {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--app-radius-sm);
    border: 1px solid transparent;
    font-size: var(--app-font-size-md);
    line-height: var(--app-line-height-sm);
    font-weight: 600;
}

    .app-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

.app-body-text {
    font-size: var(--app-font-size-md);
    line-height: var(--app-line-height-md);
    color: var(--app-text-primary);
}

.app-grid-text-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.app-grid-text-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

/*New*/

app {
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.btn-label {
    position: relative;
    left: -14px;
    display: inline-block;
    padding: 3px 5px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px 0 0 3px;
}

.btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
}

.btn-not-labeled {
    padding: 3px 5px;
}

/*--------------*/

.modalWindow {
    z-index: 44444 !important;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 11100;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Legacy form panels — aligned with app tokens (Segoe via inherit from body) */
.form-panel {
    background-color: var(--app-surface-muted, #f3f4f6);
    border: 1px solid var(--app-border-subtle, #e0e0e0);
    border-radius: var(--app-radius-xl, 0.625rem);
    margin-left: var(--app-space-2, 0.5rem);
    margin-right: var(--app-space-2, 0.5rem);
    margin-top: var(--app-space-2, 0.5rem);
}

.form-panel-title {
    border: 1px solid var(--app-border-subtle, #e0e0e0);
    border-radius: var(--app-radius-xl, 0.625rem);
    padding: var(--app-space-2, 0.5rem) !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--app-border-muted, #e5e7eb);
    background-color: var(--app-surface-card, #fff);
}

/* Search page header (title + search box + actions) stays visible while the results
   grid below scrolls — scoped to the admin search-page shell only, so it doesn't
   affect .form-panel-title reused inside modals/small panels. */
.app-page-shell .app-page-header,
.app-page-shell .form-panel-title {
    position: sticky;
    top: 0;
    z-index: 5;
}

.app-page-shell .app-page-header {
    border-radius: 0;
}

    .form-panel-title > h1 {
        margin: 0 var(--app-space-4, 1rem);
        font-size: var(--app-font-size-lg, 1.125rem);
        font-weight: 600;
        font-family: inherit;
        line-height: var(--app-line-height-tight, 1.25);
        color: var(--app-text-secondary, #4b5563);
    }

    .form-panel-title + .form-panel-subtitle {
        border-top: none !important;
        margin-top: 0;
    }

.form-panel-title-text {
    margin: 0 var(--app-space-4, 1rem);
    font-size: var(--app-font-size-lg, 1.125rem);
    font-weight: 600;
    font-family: inherit;
    line-height: var(--app-line-height-tight, 1.25);
    color: var(--app-text-secondary, #4b5563);
}

.btn:active {
    outline: none !important;
}

a.btn.disabled {
    pointer-events: all;
}

.panel-row .panel-text {
    color: var(--app-text-secondary, #4b5563);
    font-size: var(--app-font-size-xs, 0.8125rem);
    display: flex;
    align-items: center;
    font-family: inherit;
    justify-content: flex-end;
}

.footer-text {
    color: var(--app-text-secondary, #4b5563);
    font-size: var(--app-font-size-xs, 0.8125rem);
    font-family: inherit;
}

.panel-text {
    padding-right: 0 !important;
}

.panel-row {
    margin-bottom: var(--app-space-4, 1rem);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-left: var(--app-space-2, 0.5rem);
    padding-right: var(--app-space-2, 0.5rem);
    box-sizing: border-box;
}

    .panel-row:last-child {
        margin-bottom: var(--app-space-5, 1.5rem);
    }

.search-panel-title > h1 {
    font-size: var(--app-font-size-md, 1rem);
    font-weight: 600;
    font-family: inherit;
}

.search-panel-button .k-button {
    font-size: 1rem !important;
}

.search-panel-content {
    padding: 5px 10px 0 5px !important;
    /*position: absolute;*/
    /*z-index: 999999 !important;*/
    background: white;
    width: -moz-available;
    width: -webkit-fill-available;
}

.search-panel-title .search-input-container .k-textbox,
.search-panel-title .search-input-container .k-input {
    border: 1px solid var(--app-border-muted, #d1d5db) !important;
    border-radius: var(--app-radius-md, 0.5rem) !important;
    background-color: #f8f9fa !important;
    min-height: 2.5rem;
    transition: border-color var(--app-transition-fast), background-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.search-panel-title .search-input-container .k-input-inner {
    background-color: transparent !important;
}

.search-panel-title .search-input-container .k-textbox:hover,
.search-panel-title .search-input-container .k-input:hover {
    border-color: #b6bec9 !important;
    background-color: var(--app-surface-card, #fff) !important;
}

.search-panel-title .search-input-container .k-textbox:focus-within,
.search-panel-title .search-input-container .k-textbox.k-focus,
.search-panel-title .search-input-container .k-input:focus-within,
.search-panel-title .search-input-container .k-input.k-focus {
    border-color: rgba(var(--app-color-primary-rgb), 0.55) !important;
    background-color: var(--app-surface-card, #fff) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12), inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.search-row {
    margin-bottom: 5px;
}

.panel-row:last-child {
    margin-bottom: 5px;
}

.form-panel-content input, .form-panel-content select {
    width: 100%;
}

.small-panel .form-panel-content {
    border: 1px solid #DEDEDE;
}

.small-panel .form-panel-content {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
}

.form-panel-content {
    padding: var(--app-space-5, 1.5rem) var(--app-space-5, 1.5rem) 0 var(--app-space-5, 1.5rem);
}

.form-panel-content-small {
    padding: 15px;
}

.tab-content .small-panel .row .col-xs-4 .row:first-child .col-xs-12 .form-panel-subtitle {
    margin-top: 0;
}

.row .col-xs-4:first-child .form-panel-subtitle {
    border-right: 1px solid #eae7e7;
}

.form-panel-title + .form-panel-subtitle {
    border-top: none !important;
    margin-top: 0;
}

.form-panel-subtitle {
    padding: var(--app-space-2, 0.5rem) 0 var(--app-space-2, 0.5rem) var(--app-space-5, 1.5rem);
    text-transform: uppercase;
    font-size: var(--app-font-size-sm, 0.875rem);
    letter-spacing: 0.04em;
    font-family: inherit;
    font-weight: 600;
    color: var(--app-color-primary, #007bff);
    background-color: rgba(227, 227, 227, 0.45);
    border-bottom: 1px solid var(--app-border-muted, #e5e7eb);
    border-top: 1px solid var(--app-border-muted, #e5e7eb);
    margin: 0;
}

.small-panel .form-panel-subtitle {
    margin-bottom: 0;
    border: 1px solid #DEDEDE;
    border-bottom: none;
}

.small-panel .form-panel-subtitle {
    text-align: center;
    margin-left: 0;
    padding-left: 0;
}

.tab-content .small-panel .row .col-xs-4 .row:first-child .col-xs-12 .form-panel-subtitle {
    margin-top: 0;
}

.row .col-xs-4:first-child .form-panel-subtitle {
    border-right: 1px solid #eae7e7;
}

.right-space {
    margin-right: 15px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.form-panel-footer {
    padding: var(--app-space-4) var(--app-space-5);
    border-top: 1px solid var(--app-border-muted);
}

.panel-footer-col {
    display: block;
}

.left-float {
    float: left;
    margin-left: 15px !important;
}

.right-float {
    float: right;
}

.no-headers-grid .k-grid-header {
    display: none;
}

.no-headers-grid .k-grid-content {
    overflow-y: hidden;
}

.no-headers-grid .k-grouping-header {
    display: none;
}

.margin-bot-0 {
    margin-bottom: 0px !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

.padding-sides-5 {
    padding: 0 5px !important;
}

.padding-sides {
    padding: 5px 5px !important;
}

.row .col-xs-2.padding-sides-5.text-center {
    font-size: 12px;
    height: 27px !important;
    line-height: 30px !important;
}

.small-panel div.col-xs-3.padding-sides-5 i.form-control-feedback {
    top: -4px !important;
    right: 0px !important;
}

.small-panel div.col-xs-3.padding-sides-5 i.form-control-feedback {
    top: -4px !important;
    right: 0px !important;
}

.small-panel input, .small-panel select {
    height: 25px !important;
    font-size: 13px !important;
    padding: 0 5px 0 5px !important;
}

.small-panel .select2-selection {
    font-family: inherit !important;
    height: 25px !important;
    font-size: var(--app-font-size-xs, 0.8125rem) !important;
}

.small-panel .form-group {
    margin-bottom: 5px;
}

.small-panel-text {
    color: #5b6170;
    font-size: 13px;
    font-family: inherit;
}

.small-panel .form-panel-subtitle {
    margin-bottom: 0;
    border: 1px solid #DEDEDE;
    border-bottom: none;
}

.small-panel .form-panel-content {
    border: 1px solid #DEDEDE;
}

.small-panel .form-panel-subtitle {
    text-align: center;
    margin-left: 0;
    padding-left: 0;
}

.small-panel div.col-xs-3.padding-sides-5 i.form-control-feedback {
    top: -4px !important;
    right: 0px !important;
}

.small-panel div.col-xs-3.padding-sides-5 i.form-control-feedback {
    top: -4px !important;
    right: 0px !important;
}

.small-panel div.col-xs-3.padding-right-5 i.form-control-feedback {
    top: -4px !important;
    right: 0px !important;
}

.small-panel div.col-xs-3.padding-right-5 input {
    font-size: 11px !important;
}

.small-panel select + .form-control-feedback {
    width: 15px;
    top: -4px !important;
    right: 32px !important;
}

.select2-hidden-accessible ~ .form-control-feedback {
    top: 0px !important;
    right: 25px !important;
}

.small-panel .select2-container + .form-control-feedback {
    top: -4px !important;
    right: 23px !important;
}

.select2-hidden-accessible + .select2-container + .form-control-feedback {
    top: 0px !important;
    right: 25px !important;
}

.small-panel .select2-hidden-accessible + .select2-container + .form-control-feedback {
    top: -4px !important;
    right: 23px !important;
}

.small-panel input + .form-control-feedback {
    top: -4px !important;
    right: 10px !important;
}

.small-panel .form-panel-content {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
}

span.k-dropdown.k-state-valid.telerik-blazor.k-widget {
    height: 30px !important;
}

.k-input {
    margin: 0;
    padding: 0.375rem 0.75rem;
    width: 100%;
    min-width: 0;
    /*height: calc(1.5em + 0.75rem);*/
    height: auto !important;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    box-shadow: none;
    color: inherit;
    background: none;
    font: inherit;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;
}

.k-datepicker.k-header.k-state-valid.telerik-blazor.k-widget {
    height: 32px !important;
    width: 100% !important;
    padding: 0px !important;
    align-items: center !important;
}

.k-checkbox {
    height: 20px !important;
    width: 20px !important;
}

.checkboxHeader {
    width: 30px !important;
}

.left-panel {
    border: 1px solid #dedede;
    margin-left: -10px !important;
    margin-right: 10px !important;
}

.middle-panel {
    border: 1px solid #dedede;
    margin-right: 10px !important;
}

.right-panel {
    border: 1px solid #dedede;
    margin-right: -10px !important;
}

.panel-border {
    border: 1px solid #DEDEDE;
}

/* Legacy compact controls: constrain only to legacy panel surfaces. */
.form-panel-content input, .form-panel-content select,
.small-panel input, .small-panel select {
    min-height: 2rem;
    color: #343a40;
    font-family: inherit;
    align-items: center !important;
}

input:disabled {
    cursor: default;
    background-color: rgba(239, 239, 239, 0.3) !important;
    color: rgb(84, 84, 84) !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
    border-width: 1px !important;
}

.form-margin {
    margin-top: 15px !important;
    margin-bottom: 0px !important;
}

.k-tabstrip.telerik-blazor.k-widget.k-tabstrip-top {
    margin-top: 10px !important;
}

.k-window.k-dialog.k-alert {
    z-index: 99999 !important;
}

.k-tooltip {
    background-color: gray !important;
    font-size: 20px !important;
    font-family: 'Roboto Light' !important;
}

div.k-tooltip .k-callout {
    color: gray !important;
}

.validationError {
    outline: 2px solid red !important;
    border-width: 1px !important;
}

div.smallerFont,
span.smallerFont,
div.smallerFont .k-filtercell * {
    font-size: 12px;
}

    div.smallerFont .k-dropdown.k-header.k-dropdown-operator {
        width: calc(8px + 2em) !important;
    }

    div.smallerFont .k-grid-edit-cell input {
        font-size: 12px;
    }

.k-floating-label-container {
    width: 100%;
}

.card-header {
    padding: .15rem 1.25rem;
    /*height: 3.125rem;*/
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125)
}

.card-header-small {
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125)
}

.card-header-bodysub {
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125)
}

th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: whiteSmoke;
    z-index: 900;
}

/*** Default Components ***/

/*telerik grid headers sticky-top*/

.k-grid {
    /*allow overflows for sticky, img etc.*/
    overflow: visible !important;
}

.k-grid-aria-root {
    /*for sticky-top to work*/
    overflow: visible !important;
}

.k-grid-header {
    /*sticky-top*/
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 1020;
}

.modal-grid .k-grid-header {
    /*negate modal window content paddings*/
    top: -17px;
}

/*telerik grid manipulations*/

.k-grid tr td {
    font-size: 1rem;
    line-height: 1;
}

.k-grid.std-grid tr td {
    font-size: inherit;
    line-height: inherit;
}
/*.k-grid tr td.stateCircle-grid {
    font-size: 1rem;
    line-height: 1;
}*/

/*the following selectors target the locked/frozen columns*/
/*===*/
.k-grid .k-master-row.myCustomRowFormatting .k-grid-content-sticky,
.k-grid .k-master-row.myCustomRowFormatting.k-alt .k-grid-content-sticky
/*===*/ {
    background-color: inherit;
}

/** row conditional colors*/

.k-grid tr.gridRowLightRed:hover {
    background-color: #f87c7c !important;
}

.k-grid tr.gridRowLightRed {
    background-color: #f8baba;
}

.k-grid tr.gridRowGray:hover {
    background-color: #ccc !important;
}

.k-grid tr.gridRowGray {
    background-color: gray;
}

.disabled-checkbox.k-checkbox {
    pointer-events: none;
    background-color: #ced4da;
    border-color: #ced4da;
}

.panel-btn {
    margin-right: 10px !important
}

.panel-btn-divider {
    margin-right: 20px !important
}

/*** Telerik Components ***/

/* DropDownList */
.dropdown-bg-lgreen .k-input-inner {
    /* background: lightskyblue;  */
    background: lightgreen;
}

.paid-row {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

.in-progress-row {
    background-color: #fff3cd !important;
    color: #856404 !important;
}

/* Status / label chips: readable but not loud; works in grids + admin UI */
.badge {
    display: inline-block;
    padding: var(--app-space-2) var(--app-space-3);
    border-radius: var(--app-radius-pill);
    font-size: var(--app-font-size-sm);
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: var(--app-line-height-tight);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: box-shadow var(--app-transition-fast), border-color var(--app-transition-fast);
}

.badge-secondary {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #374151;
    border: 1px solid #d1d5db;
}

.badge-info {
    background: linear-gradient(135deg, rgba(var(--app-color-primary-rgb), 0.14), rgba(var(--app-color-primary-dark-rgb), 0.09));
    color: #1e40af;
    border: 1px solid rgba(30, 64, 175, 0.35);
}

.badge-warning {
    background: linear-gradient(135deg, rgba(253, 230, 138, 0.55), rgba(245, 158, 11, 0.2));
    color: #92400e;
    border: 1px solid rgba(146, 64, 14, 0.32);
}

.badge-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.1));
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.32);
}

.badge-danger {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.22), rgba(239, 68, 68, 0.12));
    color: #991b1b;
    border: 1px solid rgba(185, 28, 28, 0.35);
}

/*
 * Document / generic status chips — NOT Bootstrap’s `.badge` (Bootstrap loads after site.css
 * and forces light tints + white text). Use .app-doc-status* or alias .app-status-chip* in grids.
 */
.app-doc-status,
.app-status-chip {
    display: inline-block;
    padding: 0.35em 0.7em;
    border-radius: var(--app-radius-pill);
    font-size: var(--app-font-size-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.app-doc-status-neutral,
.app-status-chip-neutral {
    background-color: #e4e4e7;
    color: #18181b;
    border-color: #a1a1aa;
}

.app-doc-status-info,
.app-status-chip-info {
    background-color: #bfdbfe;
    color: #1e3a8a;
    border-color: #3b82f6;
}

.app-doc-status-warning,
.app-status-chip-warning {
    background-color: #fde68a;
    color: #713f12;
    border-color: #d97706;
}

.app-doc-status-processing,
.app-status-chip-processing {
    background-color: #ddd6fe;
    color: #5b21b6;
    border-color: #7c3aed;
}

.app-doc-status-success,
.app-status-chip-success {
    background-color: #bbf7d0;
    color: #14532d;
    border-color: #22c55e;
}

.app-doc-status-danger,
.app-status-chip-danger {
    background-color: #fecaca;
    color: #7f1d1d;
    border-color: #ef4444;
}

/* Compact metric pills (usage / duration / date in document grids) */
.app-metric-pill {
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
    min-width: 3rem;
    text-align: center;
}

.app-metric-pill--success {
    background: linear-gradient(135deg, #28a745, #20c997);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    min-width: 2rem;
    font-size: 0.85rem;
}

.app-metric-pill--primary {
    background: linear-gradient(135deg, var(--app-color-primary), var(--app-color-primary-dark));
    box-shadow: 0 2px 8px rgba(var(--app-color-primary-rgb), 0.3);
    font-family: var(--app-font-mono);
}

.app-metric-pill--violet {
    background: linear-gradient(135deg, #6f42c1, #5a2d91);
    box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3);
    font-family: var(--app-font-mono);
}

/* Inline / toast notifications: soft surfaces + dark text (NotificationInline, TelerikNotification) */
.k-notification-container .k-notification {
    border-radius: var(--app-radius-lg);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--app-border-muted);
    font-size: var(--app-font-size-sm);
}

    .k-notification-container .k-notification .k-notification-content {
        color: inherit;
    }

.k-notification-container .k-notification-primary {
    background: linear-gradient(135deg, rgba(var(--app-color-primary-rgb), 0.1), rgba(var(--app-color-primary-dark-rgb), 0.06));
    border-color: rgba(var(--app-color-primary-rgb), 0.22);
    color: var(--app-text-primary);
}

    .k-notification-container .k-notification-primary .k-icon,
    .k-notification-container .k-notification-primary .k-svg-icon {
        color: var(--app-color-primary) !important;
    }

.k-notification-container .k-notification-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(22, 163, 74, 0.08));
    border-color: rgba(22, 101, 52, 0.25);
    color: #166534;
}

    .k-notification-container .k-notification-success .k-icon,
    .k-notification-container .k-notification-success .k-svg-icon {
        color: #15803d !important;
    }

.k-notification-container .k-notification-error {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.18), rgba(239, 68, 68, 0.08));
    border-color: rgba(185, 28, 28, 0.28);
    color: #991b1b;
}

    .k-notification-container .k-notification-error .k-icon,
    .k-notification-container .k-notification-error .k-svg-icon {
        color: #b91c1c !important;
    }

.k-notification-container .k-notification-warning {
    background: linear-gradient(135deg, rgba(253, 230, 138, 0.45), rgba(245, 158, 11, 0.15));
    border-color: rgba(146, 64, 14, 0.28);
    color: #92400e;
}

    .k-notification-container .k-notification-warning .k-icon,
    .k-notification-container .k-notification-warning .k-svg-icon {
        color: #b45309 !important;
    }

.k-notification-container .k-notification-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.06));
    border-color: rgba(37, 99, 235, 0.22);
    color: #1e3a8a;
}

    .k-notification-container .k-notification-info .k-icon,
    .k-notification-container .k-notification-info .k-svg-icon {
        color: #2563eb !important;
    }

.k-notification-container .k-notification-secondary,
.k-notification-container .k-notification-tertiary,
.k-notification-container .k-notification-light {
    background: var(--app-surface-muted);
    color: var(--app-text-primary);
    border-color: var(--app-border-subtle);
}

/*
 * Bare .k-notification (no .k-notification-container ancestor) — this is the REAL popup a
 * <TelerikNotification> widget renders (e.g. DialogNotification's "Saved"/error toast), as
 * opposed to NotificationInline's hand-rolled markup above. TelerikNotification portals its
 * popup outside the component's own DOM subtree, so a scoped .razor.css rule can't reach it —
 * same reason InputFile's inner <input> needs a global rule further below. Left unstyled, the
 * Kendo Bootstrap theme's default alpha-blended background lets page content bleed through.
 */
.k-notification.k-notification-primary {
    background: var(--app-surface-card, #fff) !important;
    border: 1px solid rgba(var(--app-color-primary-rgb), 0.35) !important;
    color: var(--app-text-primary, #1f2937) !important;
}

.k-notification.k-notification-success {
    background: #ecfdf5 !important;
    border: 1px solid #22c55e !important;
    color: #166534 !important;
}

.k-notification.k-notification-error {
    background: #fef2f2 !important;
    border: 1px solid #ef4444 !important;
    color: #991b1b !important;
}

.k-notification.k-notification-warning {
    background: #fffbeb !important;
    border: 1px solid #f59e0b !important;
    color: #92400e !important;
}

/* Page content styling moved out of DB HTML — used by the public Static.razor header only;
   the admin MainLayout header no longer renders this element. */
.app-header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--app-color-primary) 0%, var(--app-color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    font-family: "Segoe UI", sans-serif;
}

/* MainLayout: CMS HeaderContent is raw HTML (no Blazor scoped attrs) — navy header, white title text */
.topbar-content-layout .topbar-title {
    color: #fff !important;
}

    .topbar-content-layout .topbar-title h1,
    .topbar-content-layout .topbar-title h2,
    .topbar-content-layout .topbar-title h3,
    .topbar-content-layout .topbar-title p {
        color: #fff !important;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .topbar-content-layout .topbar-title h1,
    .topbar-content-layout .topbar-title h2,
    .topbar-content-layout .topbar-title h3 {
        font-size: 1.125rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .topbar-content-layout .topbar-title p {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .topbar-content-layout .topbar-title .admin-header-title-fallback {
        color: #fff !important;
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

.topbar-header-overlay h1,
.static-header-content-overlay h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.static-header-image {
    height: 256px;
}

.static-header-content-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 15px 30px;
    z-index: 1;
    text-align: center;
    border-radius: 8px;
    color: white !important;
    width: auto;
    max-width: 90%;
}

.static-header-login-button {
    margin-top: var(--app-space-4, 1.5rem);
    display: flex;
    justify-content: center;
}

.static-info-section {
    margin-top: 3rem;
}

.static-info-section-title {
    color: #495057;
    margin-bottom: 1.5rem;
}

.static-info-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.static-info-card {
    flex: 1 1 300px;
}

.static-info-note {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #e7f3ff;
    border-left: 4px solid #007bff;
    border-radius: 4px;
}

/* Only left border should be colored/thick (matches legacy DB inline-style look). */
.static-info-card-border-primary {
    border-left: 4px solid #007bff !important;
}

.static-info-card-border-success {
    border-left: 4px solid #28a745 !important;
}

.static-info-card-border-warning {
    border-left: 4px solid #ffc107 !important;
}

.static-info-card-border-secondary {
    border-left: 4px solid #6c757d !important;
}

.static-info-card-border-info {
    border-left: 4px solid #17a2b8 !important;
}

.static-info-card-border-danger {
    border-left: 4px solid #dc3545 !important;
}

/* Pages CMS block builder (PageBlocksRenderer.razor) — global, not scoped, because this
   markup is shared between the admin live preview (inside PagesManage, a different
   Blazor scope) and the public DynamicPage — a scoped .razor.css on either page would
   only apply to one of the two renders. */
.page-block-wrapper {
    margin-bottom: var(--app-space-2, 0.5rem);
    border-radius: var(--app-radius-md, 0.5rem);
    outline: 3px solid transparent;
    outline-offset: 3px;
    transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}

/* Admin live-preview only (PagesManage passes SelectedBlockId) — marks which block the
   currently-open editor panel corresponds to, mirroring the selection in the block list.
   A light-blue dashed outline that pulses very slowly, rather than a static solid one. */
.page-block-wrapper.page-block-selected {
    outline-style: dashed;
    outline-color: #60a5fa;
    transition: none;
    animation: page-block-selected-pulse 3s ease-in-out infinite;
}

@keyframes page-block-selected-pulse {
    0%, 100% {
        outline-color: rgba(96, 165, 250, 0.35);
        box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.04);
    }

    50% {
        outline-color: rgba(96, 165, 250, 1);
        box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.16);
    }
}

/* Admin live-preview only — affordance for click-to-select / drag-to-reorder directly on
   the rendered blocks (PagesManage sets Interactive="true"; the public DynamicPage doesn't). */
.page-block-wrapper.page-block-interactive {
    cursor: grab;
}

    .page-block-wrapper.page-block-interactive:hover {
        outline-color: rgba(36, 69, 109, 0.35);
    }

    .page-block-wrapper.page-block-interactive:active {
        cursor: grabbing;
    }

/* Blocks with an actual inline background-color (e.g. a Hero) get generous breathing room
   and a softer band look — plain blocks stay tight, no double-padding with .page-block-div's
   own card padding below. */
.page-block-wrapper[style*="background-color"] {
    padding: var(--app-space-6, 2rem) var(--app-space-4, 1rem);
    border-radius: var(--app-radius-lg, 0.5rem);
    box-shadow: var(--app-shadow-card-md, 0 2px 8px rgba(0, 0, 0, 0.08));
}

    .page-block-wrapper[style*="background-color"] h1,
    .page-block-wrapper[style*="background-color"] h2,
    .page-block-wrapper[style*="background-color"] h3 {
        text-wrap: balance;
    }

.page-block-paragraph {
    white-space: pre-line;
}

/* Visually separate a leading heading (typically the page's own Header) from the content
   that follows, echoing a slim title bar rather than just another block in the stack.
   Excludes a Hero-style heading (inline background-color) — that already reads as its own
   band and a border-bottom would cut across the color. */
.page-block-wrapper:first-child:not([style*="background-color"]) h1,
.page-block-wrapper:first-child:not([style*="background-color"]) h2 {
    padding-bottom: var(--app-space-3, 0.75rem);
    margin-bottom: var(--app-space-3, 0.75rem);
    border-bottom: 1px solid var(--app-border-subtle, #e0e0e0);
}

/* Trailing paragraph (typically the Footer) reads as its own band — a muted surface, top
   border and generous padding — rather than just another paragraph in the stack. Kept within
   the block's normal width (no edge-to-edge bleed) since the surrounding padding differs
   between the admin preview panel and the public DynamicPage container. */
.page-block-wrapper:last-child:has(.page-block-paragraph) {
    background: var(--app-surface-muted, #f3f4f6);
    margin-top: var(--app-space-4, 1rem);
    padding: var(--app-space-4, 1rem) var(--app-space-5, 1.25rem);
    border-top: 1px solid var(--app-border-subtle, #e0e0e0);
    border-radius: var(--app-radius-lg, 0.5rem);
}

    .page-block-wrapper:last-child .page-block-paragraph {
        color: var(--app-text-secondary, #6b7280);
    }

/* Default "content card" look — background-color set inline (BackgroundColor picker in
   PagesManage) always wins over this since inline styles beat stylesheet rules regardless
   of specificity, so this is purely a tasteful default for an otherwise-unstyled Div block. */
.page-block-div {
    padding: var(--app-space-4, 1rem) var(--app-space-5, 1.5rem);
    background: var(--app-surface-card, #fff);
    border: 1px solid var(--app-border-subtle, #e0e0e0);
    border-left: 4px solid var(--app-color-primary, #24456D);
    border-radius: var(--app-radius-md, 0.5rem);
    box-shadow: var(--app-shadow-card, 0 2px 4px rgba(0, 0, 0, 0.08));
}

.page-block-div-title {
    margin: 0 0 var(--app-space-2, 0.5rem);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--app-text-primary, #1f2937);
    overflow-wrap: anywhere;
}

.page-block-div-body {
    margin: 0;
    color: var(--app-text-secondary, #6b7280);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Container block — a stack of rows, each with its own 1/2/3 equal-width columns (e.g. a
   "T" shape = one OneColumn row on top + one TwoColumns row below). Each column reuses
   .page-block-div for its card look, so only the row grid itself needs new CSS.
   The outer flex column + flex:1 on each row is what makes an explicit Height (set in
   PagesManage) actually stretch the rows/cards to fill it — without this, extra height just
   left the rows at their natural content size and appeared as dead space below. Harmless with
   no Height set too, since there's then no extra space for flex:1 to distribute. */
.page-block-container {
    display: flex;
    flex-direction: column;
}

.page-block-container-row {
    display: grid;
    flex: 1 1 auto;
    align-items: stretch;
    gap: var(--app-space-4, 1rem);
    margin-bottom: var(--app-space-4, 1rem);
}

    .page-block-container-row:last-child {
        margin-bottom: 0;
    }

/* minmax(0, 1fr), not plain 1fr — a bare 1fr track won't shrink below its content's
   min-content width, so a container narrower than 3 columns' natural width overflowed with
   a horizontal scrollbar instead of the columns actually shrinking/wrapping their text. */
.page-block-container-row-1 {
    grid-template-columns: minmax(0, 1fr);
}

.page-block-container-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-block-container-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* An empty column would otherwise render as a blank card with no visible content — this
   makes it obvious there's an editable slot there, inviting a click (which selects the
   block so it can be typed into via the sidebar). */
.page-block-container-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    background: transparent;
    border: 2px dashed var(--app-border-muted, #d1d5db);
    box-shadow: none;
}

.page-block-container-empty-icon {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--app-border-muted, #9ca3af);
}

@media (max-width: 768px) {
    .page-block-container-row-2,
    .page-block-container-row-3 {
        grid-template-columns: 1fr;
    }
}

/* Shared page shell — use tokens; see docs/ui-component-contract.md */
.app-page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: var(--app-surface-page);
    min-height: calc(100vh - 120px);
}

.app-page-header {
    background: var(--app-surface-card);
    border-bottom: 1px solid var(--app-border-subtle);
    margin-bottom: var(--app-space-3);
}

.app-page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--app-space-2) var(--app-space-4);
    background: linear-gradient(135deg, var(--app-color-primary) 0%, var(--app-color-primary-dark) 100%);
    color: #fff;
    border-radius: 0;
    /* Improves white-on-blue contrast at gradient mid-tones (WCAG). */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.app-page-title-section {
    display: flex;
    align-items: center;
    gap: var(--app-space-3);
}

.app-page-title-icon {
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--app-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--app-font-size-md);
}

.app-page-title-text {
    margin: 0;
    font-size: var(--app-font-size-lg, 1.125rem);
    font-weight: 600;
    line-height: var(--app-line-height-tight);
    color: #fff;
}

.app-page-content {
    padding: var(--app-space-4);
    background: var(--app-surface-card);
    margin: 0 var(--app-space-4) var(--app-space-4) var(--app-space-4);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-card);
}

    .app-page-content .text-muted,
    .app-page-shell .table .text-muted {
        color: var(--app-text-secondary) !important;
    }

/* Standard filter block + grid wrapper inside admin shells (reduces per-page duplication). */
.app-page-shell .search-filters {
    margin-bottom: var(--app-space-5);
    background: var(--app-surface-card, #fff);
    border: 1px solid var(--app-border-subtle, #e0e0e0);
    border-left: 3px solid var(--app-color-primary, #24456d);
    border-radius: var(--app-radius-lg, 0.5rem);
    padding: var(--app-space-4, 1rem);
    box-shadow: var(--app-shadow-card, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.app-page-shell .filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--app-space-4);
    margin-top: var(--app-space-3);
}

.app-page-shell .filter-item {
    min-width: 0;
}

/*
 * Telerik FloatingLabel + DatePicker / TextBox / DropDown in admin filter rows.
 * Theme input chrome is often flat (borderless inner .k-input); on white panels the
 * value area reads as dead space. Give a consistent “field” affordance.
 */
.app-page-shell .search-filters .k-floating-label-container .k-datepicker,
.app-page-shell .search-filters .k-floating-label-container .k-textbox,
.app-page-shell .search-filters .k-floating-label-container .k-dropdownlist,
.app-page-shell .search-filters .k-floating-label-container .k-combobox,
.app-page-shell .search-filters .k-floating-label-container .k-multiselect {
    border: 1px solid var(--app-border-muted, #d1d5db) !important;
    border-radius: var(--app-radius-md, 0.375rem) !important;
    background-color: var(--app-surface-muted, #f3f4f6) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
    min-height: 2.5rem;
    transition: border-color var(--app-transition-fast), background-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

    .app-page-shell .search-filters .k-floating-label-container .k-datepicker:hover,
    .app-page-shell .search-filters .k-floating-label-container .k-textbox:hover,
    .app-page-shell .search-filters .k-floating-label-container .k-dropdownlist:hover,
    .app-page-shell .search-filters .k-floating-label-container .k-combobox:hover,
    .app-page-shell .search-filters .k-floating-label-container .k-multiselect:hover {
        border-color: #b6bec9 !important;
        background-color: var(--app-surface-card, #fff) !important;
    }

.app-page-shell .search-filters .k-floating-label-container:focus-within .k-datepicker,
.app-page-shell .search-filters .k-floating-label-container.k-focus .k-datepicker,
.app-page-shell .search-filters .k-floating-label-container:focus-within .k-textbox,
.app-page-shell .search-filters .k-floating-label-container.k-focus .k-textbox,
.app-page-shell .search-filters .k-floating-label-container:focus-within .k-dropdownlist,
.app-page-shell .search-filters .k-floating-label-container.k-focus .k-dropdownlist,
.app-page-shell .search-filters .k-floating-label-container:focus-within .k-combobox,
.app-page-shell .search-filters .k-floating-label-container.k-focus .k-combobox,
.app-page-shell .search-filters .k-floating-label-container:focus-within .k-multiselect,
.app-page-shell .search-filters .k-floating-label-container.k-focus .k-multiselect {
    border-color: rgba(var(--app-color-primary-rgb), 0.55) !important;
    background-color: var(--app-surface-card, #fff) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12), inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.app-page-shell .search-filters .k-floating-label-container .k-input-inner,
.app-page-shell .search-filters .k-floating-label-container .k-input-value-text {
    color: var(--app-text-primary, #1f2937);
}

.app-page-shell .search-filters .k-floating-label-container > .k-floating-label {
    color: var(--app-text-secondary, #4b5563);
    font-weight: 600;
}

.app-page-shell .search-filters .k-floating-label-container .k-input-button {
    border-inline-start: 1px solid var(--app-border-muted, #d1d5db);
    color: var(--app-text-secondary, #4b5563);
}

/*
 * Shared Telerik FloatingLabel field chrome for create/edit forms.
 * This covers pages that use the same Telerik input wrappers outside search bars.
 */
.app-page-shell .k-floating-label-container .k-datepicker,
.app-page-shell .k-floating-label-container .k-textbox,
.app-page-shell .k-floating-label-container .k-dropdownlist,
.app-page-shell .k-floating-label-container .k-combobox,
.app-page-shell .k-floating-label-container .k-multiselect {
    border: 1px solid var(--app-border-muted, #d1d5db) !important;
    border-radius: var(--app-radius-md, 0.375rem) !important;
    background-color: var(--app-surface-muted, #f3f4f6) !important;
    min-height: 2.5rem;
    transition: border-color var(--app-transition-fast), background-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

    .app-page-shell .k-floating-label-container .k-datepicker:hover,
    .app-page-shell .k-floating-label-container .k-textbox:hover,
    .app-page-shell .k-floating-label-container .k-dropdownlist:hover,
    .app-page-shell .k-floating-label-container .k-combobox:hover,
    .app-page-shell .k-floating-label-container .k-multiselect:hover {
        border-color: #b6bec9 !important;
        background-color: var(--app-surface-card, #fff) !important;
    }

.app-page-shell .k-floating-label-container:focus-within .k-datepicker,
.app-page-shell .k-floating-label-container.k-focus .k-datepicker,
.app-page-shell .k-floating-label-container:focus-within .k-textbox,
.app-page-shell .k-floating-label-container.k-focus .k-textbox,
.app-page-shell .k-floating-label-container:focus-within .k-dropdownlist,
.app-page-shell .k-floating-label-container.k-focus .k-dropdownlist,
.app-page-shell .k-floating-label-container:focus-within .k-combobox,
.app-page-shell .k-floating-label-container.k-focus .k-combobox,
.app-page-shell .k-floating-label-container:focus-within .k-multiselect,
.app-page-shell .k-floating-label-container.k-focus .k-multiselect {
    border-color: rgba(var(--app-color-primary-rgb), 0.55) !important;
    background-color: var(--app-surface-card, #fff) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12), inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.app-page-shell .grid-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: var(--app-radius-xl);
    border: 1px solid var(--app-border-subtle);
}

/*
 * Telerik Grid — shared header + cell chrome for full admin shells and the embedded
 * SettingsSearch grid (no app-page-shell on that page).
 */
.app-page-shell .k-grid .k-grid-header,
.k-grid.settings-grid .k-grid-header {
    background: var(--app-grid-header-bg);
    font-weight: 600;
}

    .app-page-shell .k-grid .k-grid-header th,
    .k-grid.settings-grid .k-grid-header th {
        padding: 12px 8px;
        border-color: var(--app-border-subtle);
        font-size: var(--app-font-size-sm);
        color: var(--app-text-primary);
        font-weight: 600;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.3;
        min-width: 80px;
        vertical-align: middle;
    }

.app-page-shell .k-grid .k-grid-content td,
.k-grid.settings-grid .k-grid-content td {
    padding: 12px 8px;
    border-color: #f0f0f0;
    vertical-align: middle;
}

/* Bootstrap / Telerik buttons inside admin shell — single visual system */
.app-page-shell .btn {
    border-radius: var(--app-radius-2xl);
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), background-color var(--app-transition-fast), border-color var(--app-transition-fast);
}

.app-page-shell .btn-primary {
    background: linear-gradient(135deg, var(--app-color-primary), var(--app-color-primary-dark));
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--app-color-primary-rgb), 0.35);
    border-color: transparent;
}

    .app-page-shell .btn-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(var(--app-color-primary-rgb), 0.4);
    }

    .app-page-shell .btn-primary:disabled {
        background: #6c757d;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

.app-page-shell .btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

    .app-page-shell .btn-secondary:hover:not(:disabled) {
        background: #5a6268;
        border-color: #5a6268;
    }

.app-page-shell .btn-xs {
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

.app-page-shell .btn-outline-success {
    background: #fff;
    color: #28a745;
    border: 1px solid #28a745;
}

    .app-page-shell .btn-outline-success:hover:not(:disabled) {
        background: #28a745;
        color: #fff;
        transform: translateY(-1px);
    }

    .app-page-shell .btn-outline-success:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.app-page-shell .btn-outline-danger {
    background: #fff;
    color: #dc3545;
    border: 1px solid #dc3545;
}

    .app-page-shell .btn-outline-danger:hover:not(:disabled) {
        background: #dc3545;
        color: #fff;
        transform: translateY(-1px);
    }

/* Empty / loading placeholders for admin pages */
.app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-6);
    gap: var(--app-space-3);
    text-align: center;
    color: var(--app-text-secondary);
    font-size: var(--app-font-size-sm);
    line-height: var(--app-line-height-md);
}

    /* Table cell / compact variant — same contract, less vertical padding */
    .app-empty-state.app-empty-state--table {
        padding: var(--app-space-4) var(--app-space-3);
        align-items: center;
    }

.app-empty-state-title {
    margin: 0;
    font-size: var(--app-font-size-md);
    font-weight: 600;
    color: var(--app-text-secondary);
}

.app-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-6);
    gap: var(--app-space-4);
    color: var(--app-text-secondary);
    font-size: var(--app-font-size-sm);
}

    .app-loading-state p {
        margin: 0;
        color: var(--app-text-muted);
        font-size: var(--app-font-size-md);
        line-height: var(--app-line-height-md);
    }

    .app-loading-state .app-loading-spinner {
        width: 2.5rem;
        height: 2.5rem;
        border: 3px solid rgba(var(--app-color-primary-rgb), 0.15);
        border-top-color: var(--app-color-primary);
        border-radius: 50%;
        animation: app-spin 0.9s linear infinite;
    }

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-state .app-loading-spinner {
        animation: none;
    }

    .bell-icon.bell-ring {
        animation: none !important;
    }
}

/* Dialog / modal actions spacing (Telerik window) */
.dialog-wrapper .k-dialog-actions,
.dialog-confirm-wrapper .k-dialog-actions,
.agent-feedback-dialog-wrapper .k-dialog-actions {
    gap: var(--app-space-2);
    padding: var(--app-space-3) var(--app-space-4);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .app-page-header-content {
        flex-direction: column;
        gap: var(--app-space-4);
        text-align: center;
        padding: var(--app-space-3);
    }

    .app-page-content {
        margin: 0 var(--app-space-2) var(--app-space-2) var(--app-space-2);
        padding: var(--app-space-3);
    }

    .app-page-title-text {
        font-size: var(--app-font-size-lg);
    }

    .app-page-shell .roles-actions .btn,
    .app-page-shell .actions-section .btn {
        width: 100%;
    }

    .app-page-shell .btn-xs {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* --- Admin Telerik search grids: shared mobile horizontal scroll + header wrapping (FAQ, Settings, Chat statistics) --- */
.app-telerik-search-mobile {
    --app-tsm-grid-min: 900px;
    --app-tsm-cell-min: 100px;
}

@media (max-width: 768px) {
    .app-telerik-search-mobile .filter-row {
        grid-template-columns: 1fr;
    }

    .app-telerik-search-mobile .grid-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

        .app-telerik-search-mobile .grid-wrapper .k-grid {
            min-width: var(--app-tsm-grid-min);
        }

            .app-telerik-search-mobile .grid-wrapper .k-grid td,
            .app-telerik-search-mobile .grid-wrapper .k-grid th {
                min-width: var(--app-tsm-cell-min);
            }

        .app-telerik-search-mobile .grid-wrapper .k-grid-content {
            max-height: none;
            overflow-y: visible;
        }

            .app-telerik-search-mobile .grid-wrapper .k-grid-content::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }

        .app-telerik-search-mobile .grid-wrapper .k-grid-header {
            position: sticky;
            top: 0;
            z-index: 10;
            background: var(--app-grid-header-bg);
        }

            .app-telerik-search-mobile .grid-wrapper .k-grid-header th {
                padding: 10px 6px;
                font-size: 0.75rem;
                white-space: normal;
                word-wrap: break-word;
                overflow: visible;
                text-overflow: clip;
                min-width: var(--app-tsm-cell-min);
                line-height: 1.4;
                height: auto;
                min-height: 50px;
            }

                .app-telerik-search-mobile .grid-wrapper .k-grid-header th .k-header-column-menu {
                    margin-top: 2px;
                }
}

/*
 * Document filter dropdowns. The popup is rendered outside the page, so this cannot
 * live in DocumentsSearch.razor.css. The selected row stays solid blue, and hover
 * paints a second row, so two items look chosen. While the pointer is in the list,
 * only the row under the pointer keeps that fill.
 */
.documents-filter-popup:hover .k-list-item.k-selected:not(.k-hover):not(:hover),
.documents-filter-popup:hover .k-selected.k-list-optionlabel:not(.k-hover):not(:hover) {
    color: var(--kendo-color-on-app-surface, #212529);
    background-color: transparent;
    box-shadow: none;
}

.documents-filter-popup .k-list-item.k-hover,
.documents-filter-popup .k-list-item:hover,
.documents-filter-popup .k-list-optionlabel.k-hover,
.documents-filter-popup .k-list-optionlabel:hover {
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #0d6efd);
}