/* ============================================================
   SCS Portal — Responsive App Shell & Content
   Breakpoints: desktop ≥1024 | tablet ≤1023 | phone ≤767
   (Layout/CSS only — no functional changes)
   ============================================================ */

:root {
    --app-sidebar-width: 216px;
    --app-sidebar-gap: 6px;
    /* Flush to sidebar right edge (no gap between sidebar and glass/header) */
    --app-sidebar-offset: calc(var(--app-sidebar-width) + var(--app-sidebar-gap));
    /* Navbar bar height (taller standalone card) */
    --app-topnav-height: 52px;
    --app-page-stack-gap: 0.65rem;
    --app-topnav-gap: var(--app-page-stack-gap, 0.65rem);
    --app-topnav-top: calc(var(--app-sidebar-gap) + var(--app-topnav-gap));
    --app-topnav-inset-y: 0px;
    --app-shell-gutter-x: 6px;
    --app-content-pad-x: 12px; /* main L pad; navbar inset to match page header */
    --app-main-pad-right: 10px;
}

/*
 * Use % not 100vw — 100vw includes scrollbar and makes .page wider than the
 * fixed navbar track (left/right), so page header looks narrower than navbar.
 */
html {
    max-width: 100%;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

body.fixed-sn,
body.fixed-sn .page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

body.fixed-sn main {
    max-width: 100%;
    box-sizing: border-box;
    /* visible — overflow-x:hidden makes main a containing block and breaks Telerik popup position */
    overflow-x: visible;
}

/* Wide tables / grids / cards scroll inside themselves */
body.fixed-sn main .table-responsive,
body.fixed-sn main .k-grid,
body.fixed-sn main .k-grid-content,
body.fixed-sn main .telerik-blazor,
body.fixed-sn main .card,
body.fixed-sn main .tab-content,
body.fixed-sn main form {
    max-width: 100%;
}

body.fixed-sn main table {
    max-width: 100%;
}

body.fixed-sn main .k-grid {
    overflow-x: auto;
}

body.fixed-sn main img,
body.fixed-sn main video,
body.fixed-sn main iframe,
body.fixed-sn main svg {
    max-width: 100%;
    height: auto;
}

/*
 * Kill MDB / app.css % left-right margins on main
 * (.fixed-sn main { margin: 2%/5%/6% } at various breakpoints)
 */
.fixed-sn main,
.fixed-sn footer,
.fixed-sn .page-footer .container-fluid,
body.fixed-sn main,
body.fixed-sn footer,
html body.fixed-sn main,
html body.fixed-sn footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ---------- Desktop: navbar + main share the SAME left/right edge ---------- */
@media (min-width: 1024px) {
    .app-side-nav.side-nav.fixed {
        transform: translateX(0) !important;
    }

    /* Fixed navbar shell — taller card; top gap = page-header stack gap */
    html body.fixed-sn .app-topnav-shell,
    body.fixed-sn .app-topnav-shell {
        position: fixed !important;
        top: var(--app-topnav-top, calc(var(--app-sidebar-gap) + var(--app-topnav-gap))) !important;
        left: calc(var(--app-sidebar-offset) + var(--app-content-pad-x)) !important;
        right: calc(var(--app-shell-gutter-x) + var(--app-main-pad-right, 10px)) !important;
        width: auto !important;
        max-width: none !important;
        height: var(--app-topnav-height) !important;
        min-height: var(--app-topnav-height) !important;
        max-height: var(--app-topnav-height) !important;
        background: #fff !important;
        background-color: #fff !important;
        border: 1px solid #e8eef4 !important;
        box-shadow: 0 1px 8px rgba(16, 24, 40, 0.04) !important;
        border-radius: 8px !important;
        z-index: 1029 !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
    }

    html body.fixed-sn .page > header,
    body.fixed-sn .page > header {
        position: relative !important;
        z-index: 1030 !important;
    }

    /* Fixed navbar fills shell (same L/R as page header card) */
    html body.fixed-sn .navbar.fixed-top.double-nav,
    html body.fixed-sn .navbar.double-nav,
    body.fixed-sn .navbar.double-nav,
    body.fixed-sn .double-nav {
        position: fixed !important;
        left: calc(var(--app-sidebar-offset) + var(--app-content-pad-x)) !important;
        right: calc(var(--app-shell-gutter-x) + var(--app-main-pad-right, 10px)) !important;
        width: auto !important;
        max-width: none !important;
        padding-left: var(--app-content-pad-x) !important;
        padding-right: var(--app-content-pad-x) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        z-index: 1030 !important;
        background: transparent !important;
        border-radius: 8px !important;
    }

    /*
     * Main/footer: identical insets — content width = navbar width.
     * Also kill MDB/app.min padding-left: 15rem/16rem (screens > 1440).
     */
    html body.fixed-sn main,
    html body.fixed-sn footer,
    .fixed-sn main,
    .fixed-sn footer,
    body.fixed-sn main,
    body.fixed-sn footer {
        margin-left: var(--app-sidebar-offset) !important;
        margin-right: var(--app-shell-gutter-x) !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* CLIP: fixed main. SCROLLBAR: window edge via spacer + JS sync */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scrollbar-gutter: stable;
    }

    html body.fixed-sn,
    body.fixed-sn {
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body.fixed-sn .page {
        height: auto !important;
        overflow: visible !important;
    }

    html body.fixed-sn main,
    .fixed-sn main,
    body.fixed-sn main {
        position: fixed !important;
        top: calc(var(--app-topnav-top, calc(var(--app-sidebar-gap) + var(--app-topnav-gap))) + var(--app-topnav-height)) !important;
        left: var(--app-sidebar-offset) !important;
        right: var(--app-shell-gutter-x) !important;
        bottom: var(--app-sidebar-gap) !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding: var(--app-topnav-gap, var(--app-page-stack-gap, 0.65rem)) 10px 20px var(--app-content-pad-x) !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        border-radius: 0 0 15px 0 !important;
        z-index: 2 !important;
        overflow: hidden !important;
    }

    body.fixed-sn main .app-main-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.fixed-sn main .app-main-scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.fixed-sn .app-page-scroll-spacer {
        display: block !important;
        width: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    html body.fixed-sn footer,
    .fixed-sn footer,
    body.fixed-sn footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
    }

    /* AppPage (animated fadeIn) + outer Telerik root only — not every DropDown/DatePicker */
    html body.fixed-sn main .app-main-scroll > .telerik-blazor,
    html body.fixed-sn main .app-main-scroll > .animated,
    html body.fixed-sn main .app-main-scroll > .fadeIn,
    html body.fixed-sn main > .telerik-blazor,
    html body.fixed-sn main .animated,
    html body.fixed-sn main .fadeIn {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Exception: home role DropDownList must stay compact inline picker */
    html body.fixed-sn main .home-role-bar .home-role-bar__dropdown,
    html body.fixed-sn main .home-role-bar .home-role-bar__dropdown.telerik-blazor {
        display: inline-flex !important;
        width: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        flex: 0 0 220px !important;
    }

    html body.fixed-sn main .home-role-bar .k-dropdownlist,
    html body.fixed-sn main .home-role-bar .k-picker {
        display: inline-flex !important;
        align-items: center !important;
        width: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        height: 1.75rem !important;
        min-height: 1.75rem !important;
    }

    /* Home role closed field only — never style shared .k-animation-container here */

    /* Page chrome = full main/navbar track (beats scoped / Bootstrap) */
    html body.fixed-sn main .app-module-page-header,
    html body.fixed-sn main header.app-module-page-header,
    html body.fixed-sn main .portal-welcome,
    html body.fixed-sn main .container-fluid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Restore header horizontal padding; height matches top navbar */
    html body.fixed-sn main .app-module-page-header,
    html body.fixed-sn main header.app-module-page-header {
        padding: 0 1rem !important;
        height: var(--app-topnav-height) !important;
        min-height: var(--app-topnav-height) !important;
        max-height: var(--app-topnav-height) !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    html body.fixed-sn main .app-module-page-header__inner {
        height: 100% !important;
        min-height: 0 !important;
        align-items: center !important;
    }

    /* Current Role bar removed from Home */
    html body.fixed-sn main .home-role-bar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    html body.fixed-sn main .portal-welcome {
        display: flex !important;
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
        margin-top: 0 !important;
        border-top: none !important;
        border-radius: 0 0 10px 10px !important;
    }

    /* Figma: join welcome flush under header */
    html body.fixed-sn main:has(.portal-welcome) .app-module-page-header,
    html body.fixed-sn main:has(.portal-welcome) header.app-module-page-header {
        margin-bottom: 0 !important;
        border-radius: 8px 8px 0 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .app-side-nav-toggle.button-collapse {
        display: none !important;
    }
}

/* ---------- Tablet & below: off-canvas sidebar ---------- */
@media (max-width: 1023px) {
    .app-side-nav.side-nav {
        width: min(var(--app-sidebar-width), 88vw) !important;
        max-width: 332px;
        z-index: 1055;
    }

    body.fixed-sn .navbar.double-nav,
    body.fixed-sn .double-nav,
    body.fixed-sn main,
    body.fixed-sn footer,
    .fixed-sn main,
    .fixed-sn footer {
        left: 0 !important;
        right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .app-side-nav-toggle.button-collapse {
        display: inline-flex !important;
        flex-shrink: 0;
    }

    /* Compact top navbar */
    body.fixed-sn .navbar.double-nav {
        gap: 6px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.fixed-sn .navbar.double-nav .top-nav-toolbar--main {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.fixed-sn .navbar.double-nav .top-nav-toolbar--actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    /* Hide less-critical header chrome */
    .top-nav-toolbar--actions .top-nav-toolbar__role .app-role-badge-shell__eyebrow {
        display: none !important;
    }

    .activeETOParticipantMetric--optional {
        display: none !important;
    }

    .activeETOParticipantAction__btn {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    /* Sidebar user snippet scales down */
    .app-side-nav__user-snippet h6 {
        font-size: 1rem !important;
    }

    .app-side-nav .collapsible a,
    .app-side-nav .collapsible .collapsible-header {
        font-size: 1rem !important;
        padding: 10px 14px !important;
    }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    :root {
        --app-topnav-height: auto;
        --app-content-pad-x: 0.75rem;
        /* Reserve for fixed 2-row navbar (actions row + client row + gaps/pads) */
        --app-topnav-phone-reserve: 8rem;
    }

    body.fixed-sn .app-topnav-shell {
        height: auto !important;
        min-height: 56px !important;
        max-height: none !important;
        left: 8px !important;
        right: 8px !important;
        top: var(--app-topnav-gap, 0.65rem) !important;
        border-radius: 8px !important;
        border: 1px solid #e8eef4 !important;
        box-shadow: 0 1px 8px rgba(16, 24, 40, 0.04) !important;
    }

    body.fixed-sn .navbar.double-nav {
        height: auto !important;
        min-height: 56px !important;
        max-height: none !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px !important;
        row-gap: 8px;
        top: var(--app-topnav-gap, 0.65rem) !important;
        left: 8px !important;
        right: 8px !important;
        position: fixed !important;
    }

    /* Row 1: hamburger + actions; Row 2: client bar full width */
    body.fixed-sn .navbar.double-nav .top-nav-toolbar--main {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-right: 0 !important;
    }

    body.fixed-sn .navbar.double-nav .top-nav-toolbar--actions {
        order: 2;
        margin-left: auto;
    }

    body.fixed-sn .navbar.double-nav .app-side-nav-toggle,
    body.fixed-sn .navbar.double-nav .button-collapse {
        order: 1;
    }

    body.fixed-sn .navbar.double-nav .main-nav-title-wrap {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
    }

    /* Space under fixed wrapped navbar — token instead of magic 7.5rem */
    body.fixed-sn main,
    body.hidden-sn main {
        padding-top: calc(var(--app-topnav-phone-reserve) + var(--app-topnav-gap, 0.65rem)) !important;
    }

    .top-nav-toolbar > li,
    .top-nav-toolbar > div,
    .top-nav-toolbar > app-notification {
        height: 44px !important;
        padding: 0 8px !important;
        border-radius: 10px !important;
    }

    .top-nav-toolbar__participant-item {
        height: auto !important;
        min-height: 44px !important;
        padding: 6px 10px !important;
    }

    /* Role: icon only */
    .top-nav-toolbar__role .app-role-badge-shell > div:last-child {
        display: none !important;
    }

    /* Language: icon + code stay; tighten */
    .top-nav-toolbar--actions .nav-item.dropdown span {
        font-size: 13px !important;
    }

    /* Participant card: keep ID + name; hide rest */
    .activeETOParticipantMetric--secondary {
        display: none !important;
    }

    .activeETOParticipantMetric__label {
        font-size: 11px !important;
    }

    .activeETOParticipantMetric__value {
        font-size: 12px !important;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .activeETOParticipantMetric--dob .activeETOParticipantMetric__value,
    .activeETOParticipantMetric--primary + .activeETOParticipantMetric--meta .activeETOParticipantMetric__value,
    .activeETOParticipantMetric--primary .activeETOParticipantMetric__value {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: max-content !important;
    }

    .activeETOParticipantAction__btn {
        font-size: 11px !important;
        padding: 7px 10px !important;
        max-width: none;
    }

    .activeETOParticipantEmpty {
        font-size: 12px !important;
        white-space: normal !important;
    }

    /* Page title / module headers */
    .app-module-page-header {
        padding: 0.65rem 0.85rem !important;
        margin-top: 0 !important;
        margin-bottom: var(--app-page-stack-gap) !important;
    }

    .app-module-page-header__title {
        font-size: 1.05rem !important;
    }

    /* Common Bootstrap/MDB helpers inside main */
    body.fixed-sn main .container,
    body.fixed-sn main .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    body.fixed-sn main .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    body.fixed-sn main .row > [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Buttons / forms don't overflow */
    body.fixed-sn main .btn,
    body.fixed-sn main .form-control,
    body.fixed-sn main .k-dropdown,
    body.fixed-sn main .k-picker,
    body.fixed-sn main .k-textbox,
    body.fixed-sn main .k-input {
        max-width: 100%;
    }

    /* Modals / dialogs fit viewport — do not stretch to full width */
    .modal-dialog,
    .k-window,
    .k-dialog {
        max-width: min(520px, calc(100vw - 1.5rem)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .k-dialog.ac-set-context-dialog {
        width: 400px !important;
        max-width: min(400px, calc(100vw - 1.5rem)) !important;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 480px) {
    .app-side-nav.side-nav {
        width: 92vw !important;
    }

    body.fixed-sn .navbar.double-nav .top-nav-toolbar--actions .nav-item.dropdown span,
    body.fixed-sn .navbar.double-nav .top-nav-toolbar--actions .fal.fa-chevron-down {
        display: none !important;
    }

    /* Search pill slightly smaller */
    .top-nav-toolbar--actions > li {
        padding: 0 6px !important;
    }

    .activeETOParticipantId {
        min-width: 44px !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
    }
}

/* ---------- Landscape phones: keep single-row nav when height is tight ---------- */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --app-topnav-phone-reserve: 3.75rem;
    }

    body.fixed-sn .navbar.double-nav {
        flex-wrap: nowrap !important;
        height: 52px !important;
        max-height: 52px !important;
        overflow: hidden;
    }

    body.fixed-sn .app-topnav-shell {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    body.fixed-sn .navbar.double-nav .top-nav-toolbar--main {
        order: unset;
        flex: 1 1 auto;
        width: auto;
    }

    body.fixed-sn main,
    body.hidden-sn main {
        padding-top: calc(var(--app-topnav-phone-reserve) + var(--app-topnav-gap, 0.65rem)) !important;
    }
}

/* ============================================================
   FULL RESPONSIVE PASS (CSS only)
   Stacks content, scrolls wide widgets, overrides legacy MDB
   width rules — no markup / logic / generated-file changes.
   ============================================================ */

/* Kill legacy MDB / app.css shell offsets that fight 1024 breakpoint */
@media (min-width: 600px) and (max-width: 1023px) {
    body.fixed-sn main,
    body.fixed-sn footer,
    .fixed-sn main,
    .fixed-sn footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (min-width: 992px) and (max-width: 1023px) {
    body.fixed-sn main,
    .fixed-sn main {
        margin-left: 0 !important;
        padding-left: 8px !important;
    }
}

@media (min-width: 1200px) {
    /* Beat app.css 15rem/16rem left padding on very wide screens */
    html body.fixed-sn main,
    body.fixed-sn main,
    .fixed-sn main {
        margin-left: var(--app-sidebar-offset) !important;
        padding-left: var(--app-content-pad-x) !important;
        padding-right: var(--app-content-pad-x) !important;
    }
}

@media (min-width: 1440px) {
    html body.fixed-sn main,
    body.fixed-sn main,
    .fixed-sn main,
    body.fixed-sn .double-nav,
    html body.fixed-sn .navbar.double-nav {
        margin-left: var(--app-sidebar-offset) !important;
        padding-left: var(--app-content-pad-x) !important;
    }

    html body.fixed-sn .navbar.double-nav,
    body.fixed-sn .navbar.double-nav {
        left: var(--app-sidebar-offset) !important;
        margin-left: 0 !important;
    }
}

/* Shared: anything wide must scroll in-place, never blow the page */
body.fixed-sn main .k-grid,
body.fixed-sn main .k-grid-header,
body.fixed-sn main .k-grid-content,
body.fixed-sn main .table-responsive,
body.fixed-sn main .k-listview,
body.fixed-sn main .k-scheduler,
body.fixed-sn main .k-gantt,
body.fixed-sn main .k-spreadsheet,
body.fixed-sn main pre,
body.fixed-sn main .overflow-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

body.fixed-sn main .k-tabstrip-items-wrapper,
body.fixed-sn main .nav-tabs,
body.fixed-sn main .nav-pills {
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
}

body.fixed-sn main .k-toolbar,
body.fixed-sn main .k-button-group {
    max-width: 100% !important;
    flex-wrap: wrap !important;
}

/* ---------- Tablet: stack md+ columns, tighten chrome ---------- */
@media (max-width: 1023px) {
    html body.fixed-sn::after,
    body.fixed-sn::after {
        top: 0.5rem;
        left: 8px;
        right: 8px;
        bottom: 0.5rem;
        border-radius: 12px;
    }

    html body.fixed-sn main,
    body.fixed-sn main,
    .fixed-sn main {
        background: transparent !important;
        border-radius: 12px !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: calc(var(--app-topnav-height, 48px) + 1rem) !important;
        min-height: calc(100vh - 1rem) !important;
        min-height: calc(100dvh - 1rem) !important;
        box-sizing: border-box !important;
    }

    body.fixed-sn main .app-module-page-header,
    body.fixed-sn main header.app-module-page-header,
    body.fixed-sn main .portal-welcome,
    body.fixed-sn main .container-fluid,
    body.fixed-sn main .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Bootstrap md/lg/xl columns → full width on tablet */
    body.fixed-sn main .row > [class*="col-md-"],
    body.fixed-sn main .row > [class*="col-lg-"],
    body.fixed-sn main .row > [class*="col-xl-"],
    body.fixed-sn main .row > [class*="col-xxl-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body.fixed-sn main .card,
    body.fixed-sn main .app-mini-card,
    body.fixed-sn main .k-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.fixed-sn main .d-flex.flex-row {
        flex-wrap: wrap !important;
    }

    body.fixed-sn main .home-role-bar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    body.fixed-sn main .home-role-bar .home-role-bar__dropdown,
    body.fixed-sn main .home-role-bar .home-role-bar__dropdown.telerik-blazor,
    body.fixed-sn main .home-role-bar .k-dropdownlist,
    body.fixed-sn main .home-role-bar .k-picker {
        width: min(220px, 100%) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Dialogs / windows stay inside viewport */
    .k-dialog-wrapper,
    .k-window-wrapper {
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }

    .k-dialog,
    .k-window,
    .modal-dialog {
        max-width: min(640px, calc(100vw - 1.5rem)) !important;
        width: auto !important;
    }

    .k-grid .k-grid-header,
    .k-grid .k-grid-content,
    .k-grid table {
        min-width: 560px;
    }
}

/* ---------- Phone: full stack + touch-friendly ---------- */
@media (max-width: 767px) {
    body.fixed-sn main,
    .fixed-sn main {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        padding-bottom: 1.25rem !important;
        border-radius: 10px !important;
    }

    /* All grid columns full-bleed */
    body.fixed-sn main .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body.fixed-sn main .btn-toolbar,
    body.fixed-sn main .k-toolbar,
    body.fixed-sn main .btn-group {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }

    body.fixed-sn main .btn,
    body.fixed-sn main .k-button {
        white-space: normal !important;
    }

    body.fixed-sn main .form-row,
    body.fixed-sn main .form-group,
    body.fixed-sn main .k-form-field,
    body.fixed-sn main .mb-3,
    body.fixed-sn main .k-floating-label-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.fixed-sn main input,
    body.fixed-sn main select,
    body.fixed-sn main textarea,
    body.fixed-sn main .form-control,
    body.fixed-sn main .k-textbox,
    body.fixed-sn main .k-input,
    body.fixed-sn main .k-picker,
    body.fixed-sn main .k-dropdownlist,
    body.fixed-sn main .k-datepicker,
    body.fixed-sn main .k-numerictextbox {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.fixed-sn main .home-role-bar {
        display: none !important;
    }

    body.fixed-sn main .home-role-bar .home-role-bar__label {
        display: none !important;
    }

    body.fixed-sn main .home-role-bar .home-role-bar__dropdown,
    body.fixed-sn main .home-role-bar .home-role-bar__dropdown.telerik-blazor,
    body.fixed-sn main .home-role-bar .k-dropdownlist,
    body.fixed-sn main .home-role-bar .k-picker {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.fixed-sn main .portal-welcome {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        flex-wrap: wrap !important;
    }

    body.fixed-sn main .app-module-page-header__inner {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    body.fixed-sn main .app-module-page-header__trailing {
        flex: 1 1 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* Tables: allow horizontal swipe, don't shrink text unreadably */
    body.fixed-sn main table {
        width: max-content !important;
        min-width: 100% !important;
    }

    body.fixed-sn main .table-responsive,
    body.fixed-sn main .k-grid {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    .k-grid .k-grid-header,
    .k-grid .k-grid-content,
    .k-grid table {
        min-width: 480px;
    }

    /* Notification / dropdown menus stay on-screen */
    body.fixed-sn .dropdown-menu,
    body.fixed-sn .k-animation-container {
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-dialog,
    .k-dialog,
    .k-window {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
    }

    .k-dialog.ac-set-context-dialog {
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Telerik popup lists shouldn't exceed viewport */
    body .k-animation-container .k-popup,
    body .k-animation-container .k-list-container {
        max-width: calc(100vw - 1rem) !important;
        max-height: min(50vh, 320px) !important;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 480px) {
    body.fixed-sn main,
    .fixed-sn main {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    body.fixed-sn main .app-module-page-header {
        padding: 0.5rem 0.65rem !important;
    }

    body.fixed-sn main .app-module-page-header__title {
        font-size: 0.95rem !important;
    }

    body.fixed-sn main .btn,
    body.fixed-sn main .k-button {
        font-size: 0.8125rem !important;
    }

    .k-grid .k-grid-header,
    .k-grid .k-grid-content,
    .k-grid table {
        min-width: 420px;
    }
}

/* Print: readable single column */
@media print {
    .app-side-nav,
    .navbar.double-nav,
    .app-side-nav-toggle,
    #sidenav-overlay {
        display: none !important;
    }

    body.fixed-sn main,
    .fixed-sn main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}