/* ==========================================================
   Modern UI components replacing Kendo (pilot 2026-11: Property list).
   Scripts: Scripts/Custom/mi-ui.js. Colours: Content/ui-tokens.css.
   Loaded by _Layout.cshtml after Site.css / Forms.css and before
   Mobile.css.
   ========================================================== */

/* ---- Fluid form controls (all pages) ----------------------------------------------------
   Site.css / Forms.css give inputs a fixed 300px (textareas 500px). They keep that width on
   desktop but can no longer push past a narrow screen. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    max-width: 100%;
}

/* The hidden attribute always hides, whatever display a class gives the element. Kendo's CSS
   used to enforce this for every page; it's kept here now Kendo is gone. */
[hidden] { display: none !important; }

/* ---- Buttons ----------------------------------------------------------------------------- */
.mi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--mi-tap);
    padding: 0.5rem 1rem;
    margin: 0;
    border: 1px solid var(--mi-border-strong);
    border-radius: var(--mi-radius);
    background: var(--mi-surface);
    color: var(--mi-ink);
    font: 600 0.95rem/1.2 var(--mi-font);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mi-btn:hover { background: var(--mi-surface-2); border-color: #A0AEC0; }
.mi-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mi-accent-ring); border-color: var(--mi-accent); }
.mi-btn:disabled,
.mi-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Primary buttons are navy, as they always were (Forms.css); teal is kept for Save. */
.mi-btn-primary { background: var(--mi-dark); border-color: var(--mi-dark); color: #fff; }
.mi-btn-primary:hover:not(:disabled) { background: var(--mi-dark-dk); border-color: var(--mi-dark-dk); }
.mi-btn-danger { background: var(--mi-danger); border-color: var(--mi-danger); color: #fff; }
.mi-btn-danger:hover:not(:disabled) { background: var(--mi-danger-dk); border-color: var(--mi-danger-dk); }
.mi-btn-sm { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
td .mi-btn { margin: 0; }

/* ---- Table (replaces the Kendo grid) ----------------------------------------------------- */
.mi-table-host {
    background: var(--mi-surface);
    border-radius: var(--mi-radius-lg);
    box-shadow: var(--mi-shadow);
    overflow: hidden;
    margin: 1rem 0;
    transition: opacity 0.15s ease;
}
.mi-tabpanel .mi-table-host { box-shadow: none; border: 1px solid var(--mi-border); }
.mi-table-host.is-loading .mi-table tbody { opacity: 0.55; }
.mi-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--mi-ink);
}
.mi-table thead th {
    background: var(--mi-surface-2);
    color: var(--mi-text);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mi-border);
    white-space: nowrap;
}
.mi-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--mi-line);
    vertical-align: middle;
}
.mi-table tbody tr:last-child td { border-bottom: none; }
/* Every other row grey, so a long list is easy to follow across. */
.mi-table tbody tr:nth-child(even) td { background: var(--mi-stripe); }
.mi-table tbody tr:not(.mi-table-msg):not(.grid-skeleton-row):hover td { background: var(--mi-row-hover); }
.mi-table td a { color: var(--mi-accent); font-weight: 500; text-decoration: none; padding: 0; }
.mi-table td a:hover { color: var(--mi-accent-dk); background: none; text-decoration: underline; }
.mi-table td a.icon-btn:hover { text-decoration: none; }
.mi-table .mi-col-select { width: 44px; text-align: center; }
.mi-table .mi-col-select input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--mi-accent); }
.mi-table .mi-col-num { text-align: right; }
.mi-table .mi-col-actions { white-space: nowrap; }
.mi-table-msg td { padding: 2rem 1rem; text-align: center; color: var(--mi-muted); }

/* Pager */
.mi-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--mi-border);
    background: var(--mi-surface);
    font-size: 0.9rem;
    color: var(--mi-text);
}
.mi-pager:empty { display: none; }
.mi-pages { display: flex; gap: 2px; }
.mi-page {
    min-width: 32px;
    height: 32px;
    padding: 0 0.4rem;
    margin: 0;
    border: 0;
    border-radius: var(--mi-radius-sm);
    background: transparent;
    color: var(--mi-text);
    font: 500 0.8125rem var(--mi-font);
    cursor: pointer;
}
.mi-page:hover:not(:disabled) { background: var(--mi-surface-2); color: var(--mi-ink); }
.mi-page.is-current { background: var(--mi-dark); color: #fff; }
.mi-page:disabled { color: #CBD5E0; cursor: default; }
.mi-page:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 1px; }
.mi-page-size { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 400; font-size: 0.9rem; color: var(--mi-muted); }
.mi-page-size select {
    height: 32px;
    padding: 0 0.5rem;
    border: 1px solid var(--mi-border-strong);
    border-radius: var(--mi-radius-sm);
    background: #fff;
    font: inherit;
    color: var(--mi-ink);
}
.mi-page-info { margin-left: auto; }

/* ---- Tabs (replaces the Kendo TabStrip) --------------------------------------------------- */
.mi-tablist {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mi-border);
    margin-bottom: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mi-tablist::-webkit-scrollbar { display: none; }
.mi-tab {
    flex-shrink: 0;
    margin: 0 0 -1px;
    padding: 0.65rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--mi-muted);
    font: 600 0.9rem var(--mi-font);
    cursor: pointer;
    white-space: nowrap;
}
.mi-tab:hover { color: var(--mi-ink); }
.mi-tab.is-active { color: var(--mi-accent); border-bottom-color: var(--mi-accent); }
.mi-tab:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: -2px; border-radius: var(--mi-radius-sm) var(--mi-radius-sm) 0 0; }

/* ---- Dialog (replaces the Kendo Window) ---------------------------------------------------- */
dialog.mi-dialog {
    width: min(640px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    border: 0;
    border-radius: var(--mi-radius-lg);
    box-shadow: var(--mi-shadow-lg);
    color: var(--mi-text);
    background: var(--mi-surface);
    overflow: hidden;
}
dialog.mi-dialog[open] { display: flex; flex-direction: column; }
dialog.mi-dialog-sm { width: min(560px, calc(100vw - 2rem)); }
/* A dialog with a searchable dropdown lets the list hang below the panel instead of clipping it. */
dialog.mi-dialog-picker,
dialog.mi-dialog-picker .mi-dialog-body { overflow: visible; }
dialog.mi-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.mi-dialog-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mi-border);
}
.mi-dialog-head h3 {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    color: var(--mi-ink);
}
.mi-dialog-close {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mi-radius);
    background: transparent;
    color: var(--mi-muted);
    font-size: 1.1rem;
    cursor: pointer;
}
.mi-dialog-close:hover { background: var(--mi-surface-2); color: var(--mi-ink); }
.mi-dialog-body { padding: 1.25rem; overflow-y: auto; }
.mi-dialog-body p { margin-top: 0; }
.mi-dialog-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--mi-border);
    border-radius: var(--mi-radius);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}
.mi-dialog-list label { margin: 0; padding: 0.35rem 0; font-weight: 400; cursor: pointer; }
.mi-dialog-list ul { margin: 0; padding-left: 1.1rem; }
.mi-dialog-foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--mi-border);
    background: var(--mi-surface-2);
}
.mi-dialog-status { color: var(--mi-danger); margin-top: 0.5rem; }
.mi-dialog-status:empty { display: none; }
.mi-dialog label.mi-field-label { margin-top: 0.75rem; font-weight: 600; }

/* ---- Searchable dropdown (Tom Select) in the app's look ------------------------------------ */
.ts-wrapper { max-width: 100%; }
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
    min-height: var(--mi-tap);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--mi-border-strong);
    border-radius: var(--mi-radius);
    background: #fff;
    box-shadow: none;
    font: 0.9375rem var(--mi-font);
    color: var(--mi-ink);
}
.ts-wrapper .ts-control input { margin: 0; padding: 0; border: 0; border-radius: 0; width: auto; font: inherit; box-shadow: none; }
.ts-wrapper.focus .ts-control { border-color: var(--mi-accent); box-shadow: 0 0 0 3px var(--mi-accent-ring); }
.ts-dropdown {
    border: 1px solid var(--mi-border);
    border-radius: var(--mi-radius);
    box-shadow: var(--mi-shadow-lg);
    font: 0.9rem var(--mi-font);
    color: var(--mi-ink);
    margin-top: 4px;
    z-index: 2000;
}
.ts-dropdown .option { padding: 0.55rem 0.75rem; }
.ts-dropdown .active { background: var(--mi-accent-soft); color: var(--mi-ink); }
.ts-dropdown .spinner::after { border-color: var(--mi-accent) transparent var(--mi-accent) transparent; }

/* ---- Notice banners (were inline styles in _Layout.cshtml) -------------------------------- */
.mi-banner {
    padding: 0.6rem 1rem;
    border-bottom: 2px solid;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
}
.mi-banner a { text-decoration: underline; font-weight: 600; }
.mi-banner-warning { background: var(--mi-warning-soft); border-color: var(--mi-warning); color: #78350F; padding: 0.5rem 1rem; font-size: 0.8125rem; }
.mi-banner-warning a { color: #92400E; }
.mi-banner-danger { background: var(--mi-danger-soft); border-color: var(--mi-danger); color: #7F1D1D; }
.mi-banner-danger a { color: #991B1B; }
.mi-banner-info { background: var(--mi-info-soft); border-color: var(--mi-info); color: #2A4365; }
.mi-banner-info a { color: #2B6CB0; }
.mi-banner-orange { background: var(--mi-orange-soft); border-color: var(--mi-orange); color: #7C2D12; }
.mi-banner-orange a { color: #C2410C; }

/* ---- Touch tablets: the sidebar slides in from the menu button, as on phones -------------
   On desktop the collapsed sidebar opens on mouse hover, which touch screens don't have.
   Same rules as Mobile.css's phone block. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1366px) {
    #sidebar { transform: translateX(-100%); transition: transform 0.2s ease; width: 220px !important; }
    body.sidebar-open #sidebar { transform: translateX(0); }
    body.sidebar-open #sidebar .nav-text,
    body.sidebar-open #sidebar .sidebar-brand-text { opacity: 1 !important; }
    body.sidebar-open #sidebar .sidebar-logo-icon { display: none; }
    body.sidebar-open #sidebar .sidebar-logo-full { display: block; }
    #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1039; }
    body.sidebar-open #sidebar-backdrop { display: block; }
    body.sidebar-open { overflow: hidden; }
    #main-content-wrapper { margin-left: 0 !important; }
    #sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 0.5rem;
        background: transparent;
        border: none;
        color: var(--mi-text);
        font-size: 1.25rem;
        cursor: pointer;
        border-radius: 0.25rem;
    }
}

/* ---- Phones ------------------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Every row becomes a card; every column is still shown, labelled. */
    .mi-table-host { background: transparent; box-shadow: none; overflow: visible; }
    .mi-tabpanel .mi-table-host { border: 0; }
    .mi-table-scroll { overflow: visible; }
    .mi-table, .mi-table tbody, .mi-table tr, .mi-table td { display: block; width: 100%; }
    .mi-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mi-table tbody tr {
        position: relative;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
        background: var(--mi-surface);
        border-radius: var(--mi-radius-lg);
        box-shadow: var(--mi-shadow);
    }
    .mi-table tbody tr:hover td, .mi-table tbody tr:nth-child(even) td { background: transparent !important; }
    .mi-table td {
        display: flex;
        gap: 0.75rem;
        align-items: baseline;
        padding: 0.4rem 1rem;
        border: 0;
        word-break: break-word;
    }
    .mi-table td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: var(--mi-muted);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .mi-table td[data-label=""]::before { display: none; }
    .mi-table .mi-col-num { text-align: left; }
    /* Tick box sits in the card's top-right corner. */
    .mi-table td.mi-col-select { position: absolute; top: 0.5rem; right: 0.5rem; width: auto; padding: 0.4rem; }
    .mi-table td.mi-col-select::before { display: none; }
    .mi-table td.mi-col-select input[type="checkbox"] { width: 24px; height: 24px; transform: none; }
    .mi-table tr:has(td.mi-col-select) td:nth-child(2) { padding-right: 3rem; }
    /* Actions become a row of tap targets along the bottom of the card. */
    .mi-table td.mi-col-actions { margin-top: 0.25rem; padding-top: 0.6rem; border-top: 1px solid var(--mi-line); align-items: center; }
    .mi-table td.mi-col-actions .icon-btn { width: var(--mi-tap); height: var(--mi-tap); font-size: 1.15rem; }
    .mi-table td.mi-col-actions .mi-btn { flex: 1; }
    .mi-table .grid-skeleton-row { height: auto; padding: 0.75rem 0; }
    .mi-table .grid-skeleton-cell { background: transparent; border: 0 !important; }
    .mi-table .grid-skeleton-cell::before { display: none; }
    .mi-table-msg td { display: block; background: var(--mi-surface); border-radius: var(--mi-radius-lg); }
    .mi-table-msg td::before { display: none; }

    .mi-pager { justify-content: center; border: 0; border-radius: var(--mi-radius-lg); box-shadow: var(--mi-shadow); }
    .mi-pages { flex-wrap: wrap; justify-content: center; max-width: 100%; }
    .mi-page { min-width: 36px; height: var(--mi-tap); }
    .mi-page-info { margin-left: 0; width: 100%; text-align: center; }

    /* A tab strip inside a card: the cards sit straight on the page background. */
    .card-modern:has(> .mi-tabs) { background: transparent; box-shadow: none; padding: 0; }

    /* Dialogs become a full-height sheet. */
    dialog.mi-dialog,
    dialog.mi-dialog-sm {
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .mi-dialog-body { flex: 1; }
    dialog.mi-dialog-picker .mi-dialog-body { overflow-y: auto; }
    .mi-dialog-list { max-height: none; }
    .mi-dialog-foot .mi-btn { flex: 1; }

    #bulk-action-bar { flex-wrap: wrap; gap: 0.5rem; }
    #bulk-action-bar .mi-btn { flex: 1 1 auto; }
}

/* ---- Sortable headers (local lists, e.g. Property History) and tab counts ----------------- */
.mi-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.mi-sort:hover { color: var(--mi-ink); }
.mi-sort:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 2px; }
.mi-table thead th input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--mi-accent); }
.mi-tab-count { font-weight: 500; }

/* ---- Dialog holding a page in an iframe (e.g. Merge Property) ---------------------------- */
dialog.mi-dialog-frame { width: min(1100px, 75vw); }
.mi-dialog-iframe { display: block; width: 100%; height: 400px; border: 0; }
.mi-dialog-iframe-tall { height: min(500px, 70vh); } /* the report pop-ups (Re-Inventory, Copy, Send) */
@media (max-width: 768px) {
    dialog.mi-dialog-frame { width: 100vw; }
    .mi-dialog-iframe { flex: 1; height: auto; }
}

/* A list straight inside a card (no second card around it). */
.card-modern .mi-table-host.mi-table-flat { box-shadow: none; border: 1px solid var(--mi-border); margin: 0; }
@media (max-width: 768px) {
    .card-modern .mi-table-host.mi-table-flat { border: 0; }
}

/* ---- Plain dropdown in the app's look (pages moved off Kendo) ----------------------------- */
select.mi-select {
    display: block;
    width: 300px;
    max-width: 100%;
    min-height: var(--mi-tap);
    margin: 4px 0 6px;
    padding: 0.45rem 2.25rem 0.45rem 0.75rem;
    border: 1px solid var(--mi-border-strong);
    border-radius: var(--mi-radius);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23718096' d='M1.6 5.1a.75.75 0 0 1 1.06 0L8 10.44l5.34-5.34a.75.75 0 1 1 1.06 1.06l-5.87 5.87a.75.75 0 0 1-1.06 0L1.6 6.16a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    color: var(--mi-ink);
    font: 0.9375rem var(--mi-font);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
select.mi-select:focus { outline: none; border-color: var(--mi-accent); box-shadow: 0 0 0 3px var(--mi-accent-ring); }
input[type="date"] { min-height: var(--mi-tap); font-family: var(--mi-font); }

/* ---- Working spinner (MiUI.busy) ---------------------------------------------------------- */
.mi-busy { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; gap: 0.75rem; flex-direction: column; background: rgba(255, 255, 255, 0.6); color: var(--mi-ink); font: 600 0.9rem var(--mi-font); }
.mi-busy.show { display: flex; }
.mi-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--mi-border); border-top-color: var(--mi-accent); animation: mi-spin 0.8s linear infinite; }
@keyframes mi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mi-spinner { animation-duration: 2.4s; } }

/* Single-choice dropdowns show a down arrow like a select. */
.ts-wrapper.single .ts-control { padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23718096' d='M1.6 5.1a.75.75 0 0 1 1.06 0L8 10.44l5.34-5.34a.75.75 0 1 1 1.06 1.06l-5.87 5.87a.75.75 0 0 1-1.06 0L1.6 6.16a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.ts-wrapper.single.dropdown-active .ts-control { background-image: none; }
.ts-wrapper.single.disabled .ts-control { background-image: none; }

/* ==========================================================
   Fields across the whole dashboard (Modern UI, 2026-11): one look and one spacing for every
   form in the signed-in app, the same as the report editor. Scoped with :where(#app-wrapper),
   which adds no weight, so these rules sit just above the old Site.css / Forms.css ones and
   below anything with its own class (the editor, Tom Select, sign-up and comeback pages).
   Kendo widgets still in use are matched as far as possible until their pages move off Kendo.
   ========================================================== */
:where(#app-wrapper) :is(.col-25, .col-33, .col-50, .col-66, .col-75, .col-100) { padding-left: 9px; padding-right: 9px; margin-bottom: 14px; }
:where(#app-wrapper) .row > :is(.col-25, .col-33, .col-50, .col-66, .col-75, .col-100):first-child { padding-left: 0; }
:where(#app-wrapper) form label { display: block; margin: 0 0 5px; padding: 0; font-size: 0.9rem; font-weight: 600; color: var(--mi-dark); }

:where(#app-wrapper) :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"]):where(:not(.k-input, .k-formatted-value, .dropdown-input)),
:where(#app-wrapper) textarea,
:where(#app-wrapper) select:where(:not([multiple])) {
    min-height: var(--mi-tap);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mi-border-strong);
    border-radius: var(--mi-radius);
    background-color: #fff;
    color: var(--mi-ink);
    font-family: var(--mi-font);
    font-size: 1rem;
    line-height: 1.35;
}
:where(#app-wrapper) textarea { min-height: 92px; }
:where(#app-wrapper) :is(input, textarea, select):focus { border-color: var(--mi-accent); box-shadow: 0 0 0 3px var(--mi-accent-ring); outline: none; }
:where(#app-wrapper) :is(input, textarea, select):disabled { background-color: var(--mi-surface-2); color: var(--mi-muted); }
:where(#app-wrapper) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--mi-accent); }

/* In the form grid a field fills its column. */
:where(#app-wrapper) :is(.col-25, .col-33, .col-50, .col-66, .col-75, .col-100) > :is(input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"], textarea, select) { width: 100%; margin: 0; }

/* Plain dropdowns: the same arrow as the searchable ones. */
:where(#app-wrapper) select:where(:not([multiple]):not(.ts-hidden-accessible)) {
    padding-right: 2.25rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23718096' d='M1.6 5.1a.75.75 0 0 1 1.06 0L8 10.44l5.34-5.34a.75.75 0 1 1 1.06 1.06l-5.87 5.87a.75.75 0 0 1-1.06 0L1.6 6.16a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}

/* Save / Search buttons: one style. */
:where(#app-wrapper) :is(input[type="submit"], input[type="button"], a.button:link, a.button:visited, a.button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
    min-width: 0;
    min-height: var(--mi-tap);
    margin: 0.5rem 0 1rem;
    padding: 0.55rem 1.4rem;
    border: 1px solid var(--mi-dark);
    border-radius: var(--mi-radius);
    background: var(--mi-dark);
    color: #fff;
    font-family: var(--mi-font);
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
}
:where(#app-wrapper) :is(input[type="submit"], input[type="button"], a.button):hover { background: var(--mi-dark-dk); border-color: var(--mi-dark-dk); color: #fff; }
:where(#app-wrapper) :is(a.button.delete-button:link, a.button.delete-button:visited, a.button.delete-button) { background: var(--mi-danger); color: #fff; border-color: var(--mi-danger); }
:where(#app-wrapper) a.button.delete-button:hover { background: var(--mi-danger-dk); border-color: var(--mi-danger-dk); color: #fff; }

/* Kendo boxes still in use, matched to the fields above. */
:where(#app-wrapper) :is(.col-25, .col-33, .col-50, .col-100) > .k-widget { width: 100% !important; }
:where(#app-wrapper) :is(.k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap, .k-multiselect-wrap) {
    min-height: calc(var(--mi-tap) - 2px);
    border-color: var(--mi-border-strong);
    border-radius: var(--mi-radius);
    background: #fff;
    box-shadow: none;
}
:where(#app-wrapper) :is(.k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap) .k-input { height: calc(var(--mi-tap) - 4px); line-height: calc(var(--mi-tap) - 4px); font-family: var(--mi-font); font-size: 1rem; color: var(--mi-ink); }
:where(#app-wrapper) :is(.k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap).k-state-focused { border-color: var(--mi-accent); box-shadow: 0 0 0 3px var(--mi-accent-ring); }

@media (max-width: 800px) {
    :where(#app-wrapper) .row > :is(.col-25, .col-33, .col-50, .col-66, .col-75) { padding-left: 0; padding-right: 0; }
    :where(#app-wrapper) :is(input[type="text"], input[type="number"], input[type="date"], textarea, select) { font-size: 1rem; }
}

/* Buttons that are links keep their own colours over the site's link colour. */
a.mi-btn, a.mi-btn:link, a.mi-btn:visited { color: var(--mi-ink); text-decoration: none; }
a.mi-btn-primary, a.mi-btn-primary:link, a.mi-btn-primary:visited, a.mi-btn-primary:hover,
a.mi-btn-danger, a.mi-btn-danger:link, a.mi-btn-danger:visited, a.mi-btn-danger:hover { color: #fff; }
:where(#app-wrapper) :is(.k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap, .k-multiselect-wrap).k-state-default,
:where(#app-wrapper) .k-multiselect-wrap { background-image: none; background-color: #fff; }
:where(#app-wrapper) :is(.k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap) .k-select { background: transparent; border: 0; }
/* The field style above never reaches inputs inside a Kendo widget. */
:where(#app-wrapper) .k-widget :is(input, select) { border: 0; box-shadow: none; min-height: 0; background-color: transparent; }
:where(#app-wrapper) .k-multiselect-wrap .k-input { min-height: calc(var(--mi-tap) - 4px); padding: 0 0.6rem; }

/* ---- Top bar: the breadcrumbs, with Back under them on every page that has one ----------- */
/* Pages set ViewBag.BackUrl (and BackLabel); _Layout.cshtml draws it here and marks the body. */
body.mi-has-back { --mi-topbar-h: 84px; }
#top-bar .mi-topbar-nav { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
body.mi-has-back #top-bar { height: auto; min-height: var(--mi-topbar-h); padding-top: 8px; padding-bottom: 8px; }
a.mi-back, a.mi-back:link, a.mi-back:visited {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 0.4rem;
    min-height: 34px; padding: 0.3rem 0.85rem 0.3rem 0.6rem; border: 1px solid var(--mi-border-strong); border-radius: var(--mi-radius);
    background: #fff; color: var(--mi-dark); font: 600 0.95rem var(--mi-font); text-decoration: none;
}
a.mi-back:hover { background: var(--mi-surface-2); border-color: var(--mi-dark); color: var(--mi-dark-dk); }
a.mi-back:focus-visible { outline: 2px solid var(--mi-accent); outline-offset: 2px; }

/* ---- Pages shown inside a pop-up (ViewBag.Window): the pop-up carries the title ------------ */
body#window-layout, #window-layout #app-wrapper, #window-layout #main-content-wrapper, #window-layout main { background: #fff; }
#window-layout .content-area > h1, #window-layout footer { display: none; }
#window-layout main { padding: 1rem 1.25rem 1.5rem; }
#window-layout .main-content { padding: 0; margin: 0; }

/* ---- MiUI.upload: an upload button (replaces kendoUpload) ---------------------------------- */
.mi-upload { position: relative; cursor: pointer; }
.mi-upload.is-busy { opacity: 0.7; pointer-events: none; }
.mi-upload:focus-within { box-shadow: 0 0 0 3px var(--mi-accent-ring); border-color: var(--mi-accent); }

/* ---- MiRichText (Scripts/Custom/mi-richtext.js): replaces the Kendo Editor ------------------ */
.mi-rte { border: 1px solid var(--mi-border-strong); border-radius: var(--mi-radius); background: #fff; overflow: hidden; }
.mi-rte:focus-within { border-color: var(--mi-accent); box-shadow: 0 0 0 3px var(--mi-accent-ring); }
.mi-rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--mi-border); background: var(--mi-surface-2); }
.mi-rte-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--mi-ink); font-size: 1.05rem; cursor: pointer; }
.mi-rte-btn:hover { background: #fff; border-color: var(--mi-border-strong); }
.mi-rte-btn[aria-pressed="true"] { background: var(--mi-dark); color: #fff; }
.mi-rte-btn:disabled { opacity: 0.4; cursor: default; }
.mi-rte-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--mi-border-strong); }
.mi-rte-format { width: auto !important; min-height: 36px !important; padding: 0.2rem 2rem 0.2rem 0.6rem !important; font-size: 0.95rem !important; }
.mi-rte-color { position: relative; overflow: hidden; }
.mi-rte-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mi-rte-area { padding: 0.75rem 0.9rem; font-size: 1rem; line-height: 1.5; color: var(--mi-ink); overflow-y: auto; max-height: 70vh; outline: none; }
.mi-rte-area p { margin: 0 0 0.6em; }
textarea.mi-rte-source { width: 100%; max-width: none; margin: 0; border: 0 !important; border-radius: 0 !important; font-family: Consolas, "Courier New", monospace !important; font-size: 0.9rem !important; box-shadow: none !important; }

/* A number with its unit beside it (£, %): replaces the Kendo NumericTextBox formats. */
.mi-affix { display: flex; align-items: stretch; }
.mi-affix > span { display: grid; place-items: center; padding: 0 0.75rem; border: 1px solid var(--mi-border-strong); background: var(--mi-surface-2); color: var(--mi-text); font-weight: 600; }
.mi-affix > span:first-child { border-right: 0; border-radius: var(--mi-radius) 0 0 var(--mi-radius); }
.mi-affix > span:last-child { border-left: 0; border-radius: 0 var(--mi-radius) var(--mi-radius) 0; }
.mi-affix > input { flex: 1; min-width: 0; width: auto !important; }
.mi-affix > span:first-child + input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.mi-affix > input:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Colour: the swatch beside the hex code (replaces the Kendo ColorPicker). */
.mi-colour { display: flex; align-items: center; gap: 8px; }
.mi-colour input[type="color"] { width: 52px; height: 44px; padding: 3px; border: 1px solid var(--mi-border-strong); border-radius: var(--mi-radius); background: #fff; cursor: pointer; }
.mi-colour input[type="text"] { width: 9rem !important; font-family: Consolas, "Courier New", monospace; }

/* A file box posted with its form (replaces the synchronous Kendo Upload). */
.mi-file input[type="file"] { display: block; width: 100%; padding: 0.55rem; border: 1.5px dashed var(--mi-border-strong); border-radius: var(--mi-radius); background: #fff; font-size: 0.95rem; cursor: pointer; }
.mi-file input[type="file"]::file-selector-button { margin-right: 0.75rem; padding: 0.45rem 0.9rem; border: 0; border-radius: 6px; background: var(--mi-dark); color: #fff; font: 600 0.92rem var(--mi-font); cursor: pointer; }

/* ---- MiTable for wide reports: tools, a pinned first column, scrolling rows, row selection ----- */
.mi-table-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--mi-border); }
.mi-colmenu { position: relative; }
.mi-colmenu > summary { list-style: none; }
.mi-colmenu > summary::-webkit-details-marker { display: none; }
.mi-colmenu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 2px; min-width: 220px; max-height: 60vh; overflow-y: auto; padding: 0.5rem; border: 1px solid var(--mi-border-strong); border-radius: var(--mi-radius); background: #fff; box-shadow: var(--mi-shadow-lg); }
.mi-colmenu-list label { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.3rem 0.4rem; font-weight: 500; font-size: 0.92rem; cursor: pointer; border-radius: 4px; }
.mi-colmenu-list label:hover { background: var(--mi-surface-2); }
.mi-table-tall .mi-table-scroll { overflow: auto; }
.mi-table-tall .mi-table thead th { position: sticky; top: 0; z-index: 2; }
.mi-table-lock .mi-table th:first-child, .mi-table-lock .mi-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--mi-border); }
.mi-table-lock .mi-table tbody tr:nth-child(even) td:first-child { background: var(--mi-stripe); }
.mi-table-lock .mi-table tbody tr:not(.mi-table-msg):hover td:first-child { background: var(--mi-row-hover); }
.mi-table-lock .mi-table thead th:first-child { z-index: 3; background: var(--mi-surface-2); }
.mi-table-rows .mi-table tbody tr[data-i] { cursor: pointer; }
.mi-table tbody tr.is-selected td, .mi-table-lock .mi-table tbody tr.is-selected td:first-child { background: var(--mi-accent-soft); }
@media (max-width: 768px) {
    /* Phones show rows as cards (above), so no pinned column or inner scrolling. */
    .mi-table-tall .mi-table-scroll { max-height: none !important; overflow: visible; }
    .mi-table-lock .mi-table td:first-child { position: static; box-shadow: none; }
}

/* Full custom branding sales panel (report Download pop-up + Share link pop-up). */
.mi-brand-cta {
    margin: 1rem 0 0;
    padding: 1rem;
    text-align: left;
    background: var(--mi-accent-soft);
    border: 1px solid var(--mi-accent);
    border-radius: 0.625rem;
}
.mi-brand-cta .mi-brand-cta-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mi-ink);
}
.mi-brand-cta .mi-brand-cta-title i { color: var(--mi-accent); margin-right: 0.25rem; }
.mi-brand-cta .mi-brand-cta-text {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mi-text);
}
.mi-brand-cta a.mi-brand-cta-btn,
.mi-brand-cta a.mi-brand-cta-btn:visited {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: var(--mi-accent);
    border-radius: 0.5rem;
}
.mi-brand-cta a.mi-brand-cta-btn:hover,
.mi-brand-cta a.mi-brand-cta-btn:focus {
    background: var(--mi-accent-dk);
    color: #fff;
    text-decoration: none;
}
.mi-brand-cta a.mi-brand-cta-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--mi-accent-ring); }
@media (max-width: 480px) {
    .mi-brand-cta { padding: 0.875rem; }
    .mi-brand-cta .mi-brand-cta-title { font-size: 0.9375rem; }
}