/* ═══════════════════════════════════════════════════════════════════════════
   MIETWART DESIGN SYSTEM
   Modern admin console: dark navy sidebar, light content canvas, solid cards
   with soft elevation. Blue brand accent (never red as primary).

   Every component below reads from the tokens in :root — change a token to
   restyle the whole app instead of patching single components.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root,
[data-bs-theme="light"] {
    --mw-primary: #2563eb;
    --mw-primary-rgb: 37, 99, 235;
    --mw-primary-dark: #1d4ed8;
    --mw-primary-soft: rgba(37, 99, 235, 0.1);
    --mw-primary-glow: rgba(37, 99, 235, 0.24);
    --mw-accent: #ff7a00;

    --mw-radius-xl: 22px;
    --mw-radius-lg: 18px;
    --mw-radius-md: 14px;
    --mw-radius-sm: 12px;
    --mw-radius-xs: 10px;
    --mw-radius-pill: 999px;

    /* Surfaces are solid now — translucency made every panel look washed out. */
    --mw-surface: #ffffff;
    --mw-surface-muted: #f8fafc;
    --mw-surface-sunken: #f1f4f9;
    --mw-glass-bg: #ffffff;
    --mw-glass-bg-solid: #ffffff;
    --mw-shell-bg: #ffffff;
    --mw-glass-border: #e8ecf3;
    --mw-border-strong: #dbe1ea;
    --mw-glass-blur: 0px;

    --mw-page-bg: #f4f6fa;
    --mw-text: #101828;
    --mw-text-muted: #667085;

    --mw-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --mw-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px -8px rgba(16, 24, 40, 0.1);
    --mw-shadow-soft: 0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 28px -12px rgba(16, 24, 40, 0.12);
    --mw-shadow-hover: 0 8px 12px -6px rgba(16, 24, 40, 0.08), 0 24px 48px -16px rgba(16, 24, 40, 0.18);
    --mw-shadow-sidebar: none;

    /* Dark sidebar shell */
    --mw-sidebar-width: 276px;
    --mw-sidebar-bg: #101425;
    --mw-sidebar-glow: rgba(37, 99, 235, 0.35);
    --mw-sidebar-text: rgba(255, 255, 255, 0.68);
    --mw-sidebar-text-strong: #ffffff;
    --mw-sidebar-label: rgba(255, 255, 255, 0.36);
    --mw-sidebar-hover: rgba(255, 255, 255, 0.07);
    --mw-sidebar-active: rgba(255, 255, 255, 0.12);
    --mw-sidebar-border: rgba(255, 255, 255, 0.08);
    --mw-sidebar-accent: #7ba4ff;

    --tblr-primary: var(--mw-primary);
    --tblr-primary-rgb: var(--mw-primary-rgb);
    --tblr-body-bg: var(--mw-page-bg);
    --tblr-body-color: var(--mw-text);
    --tblr-secondary: var(--mw-text-muted);
    --tblr-border-color: var(--mw-glass-border);
    --tblr-border-color-translucent: var(--mw-glass-border);
    --tblr-card-bg: var(--mw-surface);
    --tblr-card-border-color: var(--mw-glass-border);
}

[data-bs-theme="dark"] {
    --mw-surface: #151b2c;
    --mw-surface-muted: #1a2136;
    --mw-surface-sunken: #111726;
    --mw-glass-bg: #151b2c;
    --mw-glass-bg-solid: #151b2c;
    --mw-shell-bg: #151b2c;
    --mw-glass-border: rgba(255, 255, 255, 0.09);
    --mw-border-strong: rgba(255, 255, 255, 0.16);
    --mw-page-bg: #0b1020;
    --mw-text: #e8ecf5;
    --mw-text-muted: #94a1b8;
    --mw-sidebar-bg: #0a0e1b;

    --mw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --mw-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
    --mw-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --mw-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
    --tblr-body-bg: var(--mw-page-bg);
    --tblr-body-color: var(--mw-text);
    --tblr-card-bg: var(--mw-surface);
    --tblr-card-border-color: var(--mw-glass-border);
}

/* ── Typography ─────────────────────────────────────────────────────────── */
html, body, .btn, .form-control, .form-select, .nav-link, .card, .table {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--mw-page-bg) !important;
    color: var(--mw-text);
    min-height: 100vh;
    letter-spacing: -.005em;
}

h1, h2, h3, h4, .card-title, .page-title {
    letter-spacing: -.02em;
}

/* Numbers align in tables and KPI tiles */
.table td, .stat-tile-value, .text-tabular {
    font-variant-numeric: tabular-nums;
}

.wrapper {
    position: relative;
    z-index: 1;
    /* Deliberately NO overflow-x guard here. It was added as a safety net against a
       stray decoration widening the document, but any clipping ancestor also clips the
       position:fixed overlays nested inside — the sidebar drawer and the Ctrl+K palette.
       Chrome lets them escape; real iOS Safari does not, and clipped the drawer down to
       the top bar's height. The document width is kept in check at the source instead
       (see #main-sidebar::after below). */
}

.page-wrapper {
    background: transparent !important;
}

/* Safari otherwise rescales text on its own once a page has been zoomed out */
html {
    -webkit-text-size-adjust: 100%;
}

.page-body {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    .page-body > .container-xl,
    .app-topbar > .container-xl,
    .page-wrapper > .container-xl {
        max-width: min(1600px, calc(100vw - var(--mw-sidebar-width) - 2.5rem));
        width: 100%;
    }
}

/* ── Glass utility ──────────────────────────────────────────────────────── */
.glass-surface {
    background: var(--mw-glass-bg) !important;
    backdrop-filter: blur(var(--mw-glass-blur));
    -webkit-backdrop-filter: blur(var(--mw-glass-blur));
    border: 1px solid var(--mw-glass-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — dark navy shell, fixed, profile card at bottom
   ═══════════════════════════════════════════════════════════════════════════ */
#main-sidebar {
    --tblr-body-color: var(--mw-sidebar-text);
    background: var(--mw-sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--mw-sidebar-text);
}

/* Indigo glow at the bottom of the rail, like the reference dashboards */
#main-sidebar::after {
    content: '';
    position: absolute;
    left: -40%;
    bottom: -160px;
    width: 180%;
    height: 320px;
    background: radial-gradient(ellipse at center, var(--mw-sidebar-glow) 0%, transparent 68%);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

#main-sidebar > .container-fluid {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    #main-sidebar.navbar-vertical {
        width: var(--mw-sidebar-width) !important;
        box-shadow: var(--mw-shadow-sidebar) !important;
        z-index: 1030;
        /* Tabler scrolls the whole rail; we scroll only the nav list above the profile card */
        overflow: hidden !important;
    }

    /* Push main content flush against the fixed sidebar */
    .navbar-vertical.navbar-expand-lg ~ .page-wrapper,
    .page-wrapper {
        margin-left: var(--mw-sidebar-width) !important;
        padding-left: 0 !important;
    }

    #main-sidebar .container-fluid {
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
        padding: 0 !important;
    }

    #main-sidebar .workspace-header {
        flex-shrink: 0;
    }

    #main-sidebar #sidebar-menu {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        height: auto !important;
    }

    #main-sidebar #sidebar-menu .navbar-nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: .75rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
        /* Fade the last rows instead of slicing a label in half when the rail scrolls */
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 20px), transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 20px), transparent 100%);
    }

    #main-sidebar #sidebar-menu .navbar-nav::-webkit-scrollbar {
        width: 6px;
    }

    #main-sidebar #sidebar-menu .navbar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.14);
        border-radius: 999px;
    }
}

.workspace-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.35rem 1.15rem 1.15rem;
    margin: 0;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    text-align: center;
    background: transparent !important;
    border-bottom: 1px solid var(--mw-sidebar-border);
}

.workspace-header:hover {
    background: var(--mw-sidebar-hover) !important;
}

.workspace-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 .5rem;
}

.workspace-header-logo img {
    width: 100%;
    max-width: 200px;
    height: auto;
    min-height: 48px;
    object-fit: contain;
    display: block;
}

.workspace-header-sub {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: var(--mw-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Nav items — pill rows with an accent bar on the active entry */
#main-sidebar .nav-link {
    position: relative;
    border-radius: var(--mw-radius-sm) !important;
    padding: .58rem .8rem !important;
    margin: 2px .7rem;
    font-weight: 500;
    font-size: .875rem;
    color: var(--mw-sidebar-text) !important;
    transition: background .15s ease, color .15s ease;
}

#main-sidebar .nav-link:hover {
    background: var(--mw-sidebar-hover) !important;
    color: var(--mw-sidebar-text-strong) !important;
}

#main-sidebar .nav-item.active > .nav-link,
#main-sidebar .nav-item.active > .nav-link:hover {
    background: var(--mw-sidebar-active) !important;
    color: var(--mw-sidebar-text-strong) !important;
    font-weight: 600;
    box-shadow: none;
}

#main-sidebar .nav-item.active > .nav-link::before {
    content: '';
    position: absolute;
    left: -.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 0 3px 3px 0;
    background: var(--mw-sidebar-accent);
}

#main-sidebar .nav-link-icon {
    width: 1.35rem;
    margin-right: .7rem;
    opacity: .7;
}

#main-sidebar .nav-link:hover .nav-link-icon,
#main-sidebar .nav-item.active .nav-link-icon {
    opacity: 1;
    color: var(--mw-sidebar-accent);
}

#main-sidebar .nav-item-section-label .nav-link-title {
    padding: 1.15rem 1.4rem .4rem !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    color: var(--mw-sidebar-label) !important;
    opacity: 1 !important;
}

/* Sidebar user profile — elevated card at the bottom of the rail */
.sidebar-profile-card {
    margin: .5rem .7rem .85rem;
    padding: .8rem .85rem;
    border-radius: var(--mw-radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    flex-shrink: 0;
}

.sidebar-profile-card .profile-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

.sidebar-profile-card .profile-avatar.avatar {
    flex-shrink: 0;
    border-radius: var(--mw-radius-sm, 12px) !important;
}

.sidebar-profile-card .profile-body {
    flex: 1;
    min-width: 0;
}

.sidebar-profile-card .profile-name {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
    color: var(--mw-sidebar-text-strong);
}

.sidebar-profile-card .profile-role {
    font-size: .72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: .15rem;
}

.sidebar-profile-card .profile-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, 0.45);
    width: 100%;
}

.sidebar-profile-card .profile-meta .profile-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP BAR — glass sticky header
   ═══════════════════════════════════════════════════════════════════════════ */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-left: 0 !important;
    background: var(--mw-surface) !important;
    border-bottom: 1px solid var(--mw-glass-border) !important;
}

.app-topbar-inner {
    min-height: 66px;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.app-topbar-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--tblr-secondary);
    white-space: nowrap;
}

.app-topbar-date .date-day {
    color: var(--tblr-body-color);
    font-weight: 600;
}

.app-topbar-search {
    border-radius: var(--mw-radius-pill) !important;
    border: 1px solid transparent !important;
    background: var(--mw-surface-sunken) !important;
    color: var(--mw-text-muted) !important;
    padding: .45rem .9rem !important;
    min-width: 200px;
    box-shadow: none;
}

.app-topbar-search:hover {
    border-color: var(--mw-border-strong) !important;
    background: var(--mw-surface-muted) !important;
}

.app-topbar-search .badge {
    background: var(--mw-surface) !important;
    color: var(--mw-text-muted) !important;
    border: 1px solid var(--mw-glass-border);
    font-weight: 500;
}

.app-topbar .btn-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--mw-radius-sm) !important;
    color: var(--mw-text-muted);
}

.app-topbar .btn-icon:hover {
    background: var(--mw-surface-sunken) !important;
    color: var(--mw-text) !important;
}

/* Notification dropdown */
.notify-dropdown-menu {
    min-width: 320px;
    max-width: 360px;
}

.notify-dropdown-menu .dropdown-item {
    white-space: normal;
    padding: .65rem .85rem !important;
}

.notify-empty {
    padding: 1.25rem .85rem;
    text-align: center;
    color: var(--tblr-secondary);
    font-size: .85rem;
}

.topbar-notify-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--mw-primary);
    border-radius: 50%;
    border: 2px solid var(--mw-glass-bg-solid);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS — soft glass panels, large radius
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--mw-surface) !important;
    border: 1px solid var(--mw-glass-border) !important;
    border-radius: var(--mw-radius-lg) !important;
    box-shadow: var(--mw-shadow-card) !important;
    overflow: visible;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
    padding: 1.05rem 1.35rem !important;
    min-height: auto;
}

.card-title {
    font-size: 1rem !important;
    font-weight: 650 !important;
    margin-bottom: 0;
}

.card-subtitle {
    font-size: .82rem;
    color: var(--mw-text-muted);
    margin-top: .15rem;
}

.card-body {
    padding: 1.35rem !important;
}

.card-footer {
    background: var(--mw-surface-muted) !important;
    border-top: 1px solid var(--tblr-border-color) !important;
    border-radius: 0 0 var(--mw-radius-lg) var(--mw-radius-lg);
}

a.card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.card:hover {
    transform: translateY(-2px);
    border-color: var(--mw-border-strong) !important;
    box-shadow: var(--mw-shadow-soft) !important;
}

/* Page header */
.page-header {
    padding-top: 1.75rem;
    padding-bottom: .35rem;
}

.page-title {
    font-weight: 700 !important;
    font-size: 1.6rem !important;
    letter-spacing: -.025em;
}

.page-pretitle {
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    color: var(--mw-text-muted) !important;
}

.page-subtitle {
    font-size: .9rem;
    color: var(--mw-text-muted);
}

.page-body {
    padding-top: 1.35rem;
    padding-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAT TILES — reference layout: label, value, icon top-right, sparkline
   ═══════════════════════════════════════════════════════════════════════════ */
.stat-tile,
.glass-stat-card {
    position: relative;
    height: 100%;
}

.stat-tile .card-body,
.glass-stat-card .card-body {
    padding: 1.15rem 1.25rem !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stat-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .85rem;
}

.stat-tile-label {
    font-size: .8rem !important;
    font-weight: 500 !important;
    line-height: 1.35;
    color: var(--mw-text-muted) !important;
    margin: 0;
}

.stat-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--mw-radius-xs) !important;
    flex-shrink: 0;
}

.stat-tile-value {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    letter-spacing: -.035em;
    line-height: 1.15 !important;
    color: var(--mw-text) !important;
    margin-top: auto;
}

.stat-tile-context {
    font-size: .75rem !important;
    margin-top: .4rem;
}

.stat-tile-trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    align-self: flex-start;
    margin-top: .5rem;
    padding: .15rem .5rem .15rem .35rem;
    border-radius: var(--mw-radius-pill);
    font-size: .72rem;
    font-weight: 600;
}

.stat-tile-trend.up { color: #14804a; background: rgba(20, 128, 74, 0.1); }
.stat-tile-trend.down { color: #c81e1e; background: rgba(200, 30, 30, 0.09); }

/* Stats panel container (recessed group like reference) */
.dash-panel-muted {
    background: var(--mw-surface) !important;
    border: 1px solid var(--mw-glass-border) !important;
    border-radius: var(--mw-radius-xl) !important;
    padding: 1.35rem !important;
    box-shadow: var(--mw-shadow-card);
}

.dash-panel-muted .stat-tile {
    background: var(--mw-surface-muted) !important;
    box-shadow: none !important;
}

.dash-panel-muted .stat-tile:hover {
    border-color: var(--mw-border-strong) !important;
}

.dash-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
}

.dash-panel-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.015em;
    margin: 0;
}

/* Payment-discipline headline number */
.health-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--mw-text);
}

.health-value-unit {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mw-text-muted);
    margin-left: .1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — pill primary, soft outline
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
    border-radius: var(--mw-radius-sm) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    padding: .5rem 1rem !important;
    transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn-pill {
    border-radius: var(--mw-radius-pill) !important;
}

.btn-primary {
    background: var(--mw-primary) !important;
    border-color: var(--mw-primary) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px -4px var(--mw-primary-glow);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--mw-primary-dark) !important;
    border-color: var(--mw-primary-dark) !important;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1), 0 8px 18px -6px var(--mw-primary-glow);
}

/* Legacy Tabler colour names — all map to the same dark brand blue */
.btn-azure,
.btn-info {
    background: var(--mw-primary) !important;
    border-color: var(--mw-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px -4px var(--mw-primary-glow);
}

.btn-azure:hover,
.btn-azure:focus,
.btn-info:hover,
.btn-info:focus {
    background: var(--mw-primary-dark) !important;
    border-color: var(--mw-primary-dark) !important;
    color: #fff !important;
}

.btn-outline-primary,
.btn-outline-info {
    border-color: var(--mw-primary) !important;
    color: var(--mw-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus {
    background: var(--mw-primary) !important;
    border-color: var(--mw-primary) !important;
    color: #fff !important;
}

.btn-white,
.btn-outline-secondary {
    background: var(--mw-surface) !important;
    border: 1px solid var(--mw-border-strong) !important;
    color: var(--mw-text) !important;
    box-shadow: var(--mw-shadow-xs);
}

.btn-white:hover,
.btn-outline-secondary:hover {
    background: var(--mw-surface-muted) !important;
    border-color: var(--mw-border-strong) !important;
    color: var(--mw-text) !important;
}

.btn-ghost-secondary {
    border-color: transparent !important;
    background: transparent !important;
}

.btn-sm {
    padding: .35rem .8rem !important;
    font-size: .8rem !important;
    border-radius: var(--mw-radius-xs) !important;
}

.btn-icon {
    padding: .4rem !important;
}

.btn-lg, .scan-hero-btn {
    padding: .7rem 1.5rem !important;
    font-size: .95rem !important;
    border-radius: var(--mw-radius-md) !important;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--mw-primary-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS — rounded inputs, soft borders
   ═══════════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    border-radius: var(--mw-radius-sm) !important;
    border: 1px solid var(--mw-border-strong) !important;
    background: var(--mw-surface) !important;
    padding: .55rem .85rem !important;
    font-size: .875rem !important;
    box-shadow: var(--mw-shadow-xs);
}

/* Tabler renders the icon absolutely inside .input-icon — the control needs room
   for it, otherwise the placeholder starts underneath the magnifier. */
.input-icon > .form-control:not(:last-child),
.input-icon .input-icon-addon:first-child ~ .form-control {
    padding-left: 2.5rem !important;
}

.input-icon .input-icon-addon {
    color: var(--mw-text-muted);
    pointer-events: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mw-primary) !important;
    box-shadow: 0 0 0 3px var(--mw-primary-soft) !important;
    background: #fff !important;
}

.form-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--tblr-secondary);
    margin-bottom: .4rem;
}

/* Filter bar: search grows, selects keep their natural width instead of
   stretching to 100% and pushing every control onto its own row. */
.filter-bar .card-body {
    padding: .85rem 1rem !important;
}

.filter-bar-search {
    min-width: 220px;
}

.filter-bar-select {
    width: auto !important;
    flex: 0 0 auto;
    min-width: 140px;
    border-radius: var(--mw-radius-sm) !important;
}

.filter-bar-select-sm {
    min-width: 120px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS — pill filters (Order Analytics style)
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-tabs.nav-pills .nav-link,
.dash-tabs.nav-pills button.nav-link {
    border-radius: var(--mw-radius-pill) !important;
    padding: .45rem 1rem !important;
    font-size: .82rem !important;
    font-weight: 500;
    color: var(--tblr-secondary);
    background: transparent;
    border: 1px solid transparent;
}

.dash-tabs.nav-pills button.nav-link {
    cursor: pointer;
}

.dash-tabs.nav-pills .nav-link:hover {
    background: rgba(var(--mw-primary-rgb), 0.06) !important;
    color: var(--mw-primary);
}

.dash-tabs.nav-pills .nav-link.active {
    background: var(--mw-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--mw-primary-glow);
}

.dash-tabs .badge {
    border-radius: var(--mw-radius-pill);
    font-weight: 600;
    font-size: .68rem;
    padding: .2em .55em;
    vertical-align: middle;
}

.dash-tabs .nav-link.active .badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.dash-tabs .nav-link:not(.active) .badge {
    background: rgba(var(--mw-primary-rgb), 0.1) !important;
    color: var(--mw-primary) !important;
}

/* ── Integrated tab panel (tabs + table in one card) ───────── */
.glass-tab-panel {
    background: var(--mw-glass-bg-solid);
    border: 1px solid var(--mw-glass-border);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-card);
    overflow: hidden;
}

.glass-tab-panel__nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.15rem;
    background: rgba(var(--mw-primary-rgb), 0.04);
    border-bottom: 1px solid var(--tblr-border-color);
}

.glass-tab-panel__nav .dash-tabs {
    margin: 0;
    gap: .35rem;
}

.glass-tab-panel__body .tab-content {
    margin: 0;
}

.glass-tab-panel__body .tab-pane {
    padding: 0;
}

/* Flatten nested data-table card inside tab panel */
.glass-tab-panel .tab-content .card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.glass-tab-panel .tab-content .card-footer {
    border-radius: 0 !important;
}

/* Hide ugly default Bootstrap nav-tabs if used elsewhere */
.nav-tabs {
    border-bottom: none !important;
    gap: .35rem;
}

.nav-tabs .nav-link {
    border: none !important;
    border-radius: var(--mw-radius-pill) !important;
    padding: .45rem 1rem !important;
    font-weight: 500;
    color: var(--tblr-secondary);
    margin-bottom: 0 !important;
}

.nav-tabs .nav-link:hover {
    background: rgba(var(--mw-primary-rgb), 0.06) !important;
    color: var(--mw-primary) !important;
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    background: var(--mw-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--mw-primary-glow);
}

[data-bs-theme="dark"] .glass-tab-panel__nav {
    background: rgba(15, 23, 42, 0.4);
}

[data-bs-theme="dark"] .dash-tabs .nav-link:not(.active) .badge {
    background: rgba(var(--mw-primary-rgb), 0.2) !important;
    color: #93c5fd !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES — minimal borders inside glass cards
   ═══════════════════════════════════════════════════════════════════════════ */
.card-table {
    border-collapse: separate;
    border-spacing: 0;
}

.card-table thead th {
    background: var(--mw-surface-muted) !important;
    color: var(--mw-text-muted) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    border-bottom: 1px solid var(--tblr-border-color) !important;
    border-top: 1px solid var(--tblr-border-color) !important;
    padding: .7rem 1.1rem !important;
}

.card-table thead th:first-child { padding-left: 1.35rem !important; }
.card-table thead th:last-child { padding-right: 1.35rem !important; }

.card-table tbody td {
    padding: .85rem 1.1rem !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
    vertical-align: middle;
    font-size: .875rem;
}

.card-table tbody td:first-child { padding-left: 1.35rem !important; }
.card-table tbody td:last-child { padding-right: 1.35rem !important; }

.card-table tbody tr:last-child td {
    border-bottom: none !important;
}

.card-table tbody tr:hover td {
    background: var(--mw-surface-muted) !important;
}

/* Primary column: the link that identifies the row */
.card-table tbody td a:not(.btn):not(.dropdown-item) {
    font-weight: 600;
    color: var(--mw-text);
    text-decoration: none;
}

.card-table tbody td a:not(.btn):not(.dropdown-item):hover {
    color: var(--mw-primary);
}

.table-bordered {
    border-radius: var(--mw-radius-md);
    overflow: hidden;
}

.table-bordered th,
.table-bordered td {
    border-color: var(--tblr-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWNS, BADGES, AVATARS, ALERTS
   ═══════════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
    border-radius: var(--mw-radius-md) !important;
    border: 1px solid var(--mw-glass-border) !important;
    background: var(--mw-glass-bg-solid) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--mw-shadow-hover) !important;
    padding: .5rem !important;
    z-index: 1060 !important;
}

/* Tom Select — portaled dropdown floats above glass cards */
.ts-dropdown {
    z-index: 1065 !important;
    border-radius: var(--mw-radius-md) !important;
    border: 1px solid var(--mw-glass-border) !important;
    background: var(--mw-glass-bg-solid) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--mw-shadow-hover) !important;
}

body > .ts-dropdown {
    margin: 0;
    max-width: calc(100vw - 2rem);
}

.ts-wrapper.form-select,
.ts-wrapper.single {
    width: 100%;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results {
    border-radius: var(--mw-radius-xs);
}

.ts-dropdown .active,
.ts-dropdown .option:hover {
    background: rgba(var(--mw-primary-rgb), 0.1) !important;
    color: var(--mw-primary) !important;
}

.ts-wrapper.dropdown-active {
    position: relative;
    z-index: auto;
}

.ts-wrapper .ts-control {
    border-radius: var(--mw-radius-sm) !important;
    /* The selected entry must never widen the control past its container. `.ts-control`
       is `flex-wrap: nowrap !important` (resources/css/app.css — the last stylesheet in
       the cascade), so a long option such as a full counter name made the control wider
       than the page, and iOS answered that by shrinking the whole page to fit. Truncate
       instead of growing. */
    min-width: 0;
    overflow: hidden;
}

.ts-wrapper .ts-control > .item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-wrapper .ts-control > input {
    min-width: 0;
}

.dropdown-item {
    border-radius: var(--mw-radius-xs) !important;
    padding: .5rem .75rem !important;
    font-size: .85rem;
    font-weight: 500;
}

.badge {
    border-radius: var(--mw-radius-pill) !important;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .32em .7em;
}

.avatar {
    border-radius: var(--mw-radius-xs) !important;
    font-weight: 600;
}

.avatar-list-stacked .avatar {
    box-shadow: 0 0 0 2px var(--mw-glass-bg-solid);
    border-radius: 50% !important;
}

.alert {
    border-radius: var(--mw-radius-md) !important;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
}

.alert-success { background: rgba(47, 179, 68, 0.12) !important; border-color: rgba(47, 179, 68, 0.2) !important; }
.alert-danger  { background: rgba(214, 57, 57, 0.1) !important; border-color: rgba(214, 57, 57, 0.2) !important; }
.alert-warning { background: rgba(247, 103, 7, 0.1) !important; border-color: rgba(247, 103, 7, 0.2) !important; }
.alert-info    { background: rgba(var(--mw-primary-rgb), 0.1) !important; border-color: rgba(var(--mw-primary-rgb), 0.2) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS, PAGINATION, FOOTER, MISC
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
    z-index: 1065 !important;
}

.modal-backdrop.show {
    z-index: 1065 !important;
}

.modal {
    z-index: 1070 !important;
}

.modal.show {
    z-index: 1070 !important;
    pointer-events: none;
}

.modal.show .modal-dialog {
    pointer-events: auto;
}

body.modal-open .ts-dropdown,
body.modal-open .dropdown-menu.show {
    display: none !important;
    pointer-events: none !important;
}

.modal-content {
    border-radius: var(--mw-radius-lg) !important;
    border: 1px solid var(--mw-glass-border) !important;
    background: var(--mw-glass-bg-solid) !important;
    backdrop-filter: blur(20px);
    box-shadow: var(--mw-shadow-hover) !important;
}

.modal-header, .modal-footer {
    border-color: var(--tblr-border-color) !important;
}

.page-link {
    border-radius: var(--mw-radius-sm) !important;
    margin: 0 2px;
    border: 1px solid var(--tblr-border-color) !important;
}

.page-item.active .page-link {
    background: var(--mw-primary) !important;
    border-color: var(--mw-primary) !important;
    box-shadow: 0 2px 8px var(--mw-primary-glow);
}

.footer {
    background: transparent !important;
    border: none !important;
    color: var(--mw-text-muted);
    font-size: .78rem;
    padding: 1.25rem 0 2rem !important;
}

.footer .container-xl {
    border-top: 1px solid var(--tblr-border-color);
    padding-top: 1.15rem;
}

/* Section groups (collapsible coloured headers) */
.section-group {
    border-radius: var(--mw-radius-lg) !important;
    background: var(--mw-glass-bg-solid) !important;
    border: 1px solid var(--mw-glass-border) !important;
    box-shadow: var(--mw-shadow-card);
}

.section-group-header {
    border-radius: var(--mw-radius-lg) var(--mw-radius-lg) 0 0;
}

/* Command palette overlay card */
[x-cloak] + .card,
.app-topbar [x-show] .card {
    border-radius: var(--mw-radius-lg) !important;
}

/* Breadcrumb */
.breadcrumb {
    font-size: .85rem;
    font-weight: 500;
}

.breadcrumb-item.active {
    color: var(--tblr-body-color);
    font-weight: 600;
}

/* Empty state */
.empty-state, .x-ui-empty-state {
    padding: 2.5rem 1rem;
}

/* Scan hero (meter hub) */
.scan-hero {
    border-radius: var(--mw-radius-xl) !important;
    border: 1px dashed rgba(var(--mw-primary-rgb), 0.3) !important;
    background: rgba(var(--mw-primary-rgb), 0.04) !important;
}

.scan-hero-btn {
    box-shadow: 0 8px 24px var(--mw-primary-glow) !important;
}

/* Chart card wrapper (stats page) */
.glass-chart-card .card-body {
    padding: 1.5rem !important;
}

.glass-chart-card .btn-outline-primary.active {
    background: var(--mw-primary) !important;
    color: #fff !important;
    border-color: var(--mw-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] body::before {
    background: radial-gradient(circle, rgba(32, 107, 196, 0.12) 0%, transparent 70%);
}

[data-bs-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(66, 153, 225, 0.08) 0%, transparent 70%);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .btn-white {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .card-table thead th {
    background: rgba(15, 23, 42, 0.5) !important;
}

[data-bs-theme="dark"] .card-table tbody tr:hover td {
    background: rgba(var(--mw-primary-rgb), 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH PAGES — split screen: dark brand panel + form panel
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-body {
    background: var(--mw-page-bg);
}

.auth-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .auth-shell {
        grid-template-columns: minmax(360px, 42%) 1fr;
    }
}

.auth-brand {
    display: none;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    background: var(--mw-sidebar-bg);
    color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 992px) {
    .auth-brand {
        display: flex;
    }
}

.auth-brand::after {
    content: '';
    position: absolute;
    left: -20%;
    bottom: -220px;
    width: 140%;
    height: 460px;
    background: radial-gradient(ellipse at center, var(--mw-sidebar-glow) 0%, transparent 68%);
    opacity: .6;
    pointer-events: none;
}

.auth-brand > * {
    position: relative;
    z-index: 1;
}

.auth-brand-logo img {
    width: 200px;
    max-width: 60%;
    height: auto;
}

.auth-brand-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: .85rem;
}

.auth-brand-text {
    font-size: .95rem;
    line-height: 1.6;
    max-width: 34rem;
    margin-bottom: 1.5rem;
}

.auth-brand-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .65rem;
}

.auth-brand-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .9rem;
}

.auth-brand-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--mw-sidebar-accent);
    box-shadow: 0 0 0 4px rgba(123, 164, 255, 0.18);
}

.auth-brand-footer {
    font-size: .78rem;
    color: rgba(255, 255, 255, 0.4);
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}

.auth-main-inner {
    width: 100%;
    max-width: 26rem;
}

.auth-main-logo {
    display: block;
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-main-logo img {
    max-width: 190px;
    height: auto;
}

.auth-main .card,
.page-center .card {
    background: var(--mw-surface) !important;
    border: 1px solid var(--mw-glass-border) !important;
    border-radius: var(--mw-radius-lg) !important;
    box-shadow: var(--mw-shadow-soft) !important;
}

.auth-main .card-body {
    padding: 1.75rem !important;
}

.auth-main .card-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}
@media (max-width: 991.98px) {
    /* The bottom glow is left:-40%/width:180%. On desktop the rail is 276px and
       overflow:hidden clips it; here the rail is the full-width top bar, so 180%
       reached ~525px and pushed the document past the viewport — iOS Safari answers
       that by shrinking the page to ~72%.
       Remove the glow rather than clip it. Clipping meant `overflow:hidden` on
       #main-sidebar, which makes the aside a clipping ancestor of the position:fixed
       drawer inside it. Chrome lets the fixed drawer escape; real iOS Safari clips it
       to the aside's ~56px box, so the drawer collapsed into a sliver showing only the
       first nav item. The glow is decoration for a tall vertical rail and is invisible
       on a short top bar anyway, so nothing is lost. */
    #main-sidebar::after {
        display: none;
    }

    #sidebar-menu.mobile-open {
        background: var(--mw-sidebar-bg) !important;
        border-radius: 0 var(--mw-radius-lg) var(--mw-radius-lg) 0;
        box-shadow: var(--mw-shadow-hover);
    }

    .app-topbar-date {
        display: none;
    }

    .workspace-header {
        flex-direction: row;
        justify-content: flex-start;
        gap: .75rem;
        padding: .5rem .75rem;
        border-bottom: none;
        text-align: left;
    }

    .workspace-header-logo img {
        max-width: 130px;
        min-height: 30px;
    }

    /* The role chip eats the whole mobile header — the sidebar shows it anyway */
    .workspace-header-meta {
        display: none;
    }

    .page-header,
    .page-body > .container-xl,
    .app-topbar > .container-xl,
    .footer > .container-xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-title {
        font-size: 1.35rem !important;
    }

    /* Stat tiles stack one per row on phones — no need to stretch them */
    .stat-tile .card-body,
    .glass-stat-card .card-body {
        padding: 1rem 1.1rem !important;
    }

    .stat-tile-value {
        margin-top: .25rem;
    }

    .stat-tile-head {
        margin-bottom: .35rem;
    }

    /* The page header repeats the breadcrumb, so the topbar keeps only the tools */
    .app-topbar-breadcrumb {
        display: none;
    }

    .app-topbar-inner {
        min-height: 56px;
        justify-content: flex-end;
    }

    /* Without its label the search pill would stretch as an empty bar */
    .app-topbar-search {
        min-width: 0;
        margin-right: auto;
        padding: .45rem .7rem !important;
    }

    /* Tables scroll horizontally instead of wrapping every cell onto 3 lines */
    .card-table,
    .table-responsive > .table {
        min-width: 40rem;
    }

    .card-table th,
    .card-table tbody td {
        white-space: nowrap;
    }

    /* Empty states and notes still need to wrap inside their cell */
    .card-table tbody td .empty,
    .card-table tbody td .text-wrap {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE CARDS — on phones a table row becomes a card of label/value pairs
   ═══════════════════════════════════════════════════════════════════════════
   Generalised from the meter-scan review table, which pioneered this pattern.
   Labels come from each cell's `data-label`; `public/js/self.js` fills those in
   from the matching <th> so a table only needs the `table-cards` class.
   Two optional markers change how a cell renders:
     data-cell="title"    → the card headline (no label, full width)
     data-cell="actions"  → the card footer (no label, right aligned)
     data-cell="select"   → row checkbox, pulled up next to the headline
   Deliberately capped at 767.98px: tablets keep horizontal scrolling, because an
   8-column row (generalCost) would become an absurdly tall card on a wide screen.
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767.98px) {
    /* Undo the tablet rules above — they win on width, so they must be reset here */
    .table-cards,
    .table-responsive > .table-cards {
        min-width: 0 !important;
        border-collapse: collapse;
        border-top: 0;
    }

    .table-cards thead {
        display: none;
    }

    /* Tabler stripes and hover-tints rows with `box-shadow: inset 0 0 0 9999px` on the
       CELLS, not with a background on the row — so a background on <tr> alone would be
       painted over and every second card would come out grey. */
    .table-cards > tbody > tr > * {
        --tblr-table-bg-type: transparent;
        --tblr-table-bg-state: transparent;
        --tblr-table-accent-bg: transparent;
        box-shadow: none !important;
    }

    .table-cards,
    .table-cards tbody,
    .table-cards tbody tr,
    .table-cards tbody td {
        display: block;
        width: 100%;
    }

    /* The row is the card. `!important` on the background beats table-striped,
       which would otherwise tint every second card. */
    .table-cards tbody tr {
        position: relative;
        border: 1px solid var(--tblr-border-color) !important;
        border-radius: var(--mw-radius-md);
        margin-bottom: .75rem;
        padding: .85rem 1rem;
        background: var(--tblr-card-bg, #fff) !important;
    }

    .table-cards tbody tr:last-child {
        margin-bottom: 0;
    }

    /* Label left, value right. Grid rather than flex: cells here hold anything from a
       bare number to a badge stacked over an amount, and forcing every element child
       into column 2 keeps multi-child cells stacked instead of strung out in a row.
       theme.css:1011 sets cell padding/borders with !important, so match that here. */
    .table-cards tbody td {
        display: grid;
        grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
        align-items: baseline;
        gap: .15rem .75rem;
        padding: .3rem 0 !important;
        border: 0 !important;
        white-space: normal !important;
        text-align: left !important;
        font-size: .875rem;
        overflow-wrap: anywhere;
    }

    .table-cards tbody td::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--mw-text-muted, var(--tblr-secondary));
    }

    /* A cell whose <th> was blank (row checkbox, icon column) must not reserve a label */
    .table-cards tbody td:not([data-label])::before,
    .table-cards tbody td[data-label=""]::before {
        display: none;
    }

    .table-cards tbody td:not([data-label]),
    .table-cards tbody td[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The value side may hold badges or stacked divs — keep them in column 2, right
       aligned, and let text-truncate chains keep working (they need min-width: 0). */
    .table-cards tbody td > * {
        grid-column: 2;
        min-width: 0;
        /* Without this a badge would be stretched across the whole value column */
        justify-self: end;
        text-align: right;
    }

    /* theme.css:1019-1020 indents the first and last cell of a row with !important;
       inside a card that reads as a stray indent on the headline and the actions. */
    .table-cards tbody tr td:first-child,
    .table-cards tbody tr td:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-cards tbody td:not([data-label]) > *,
    .table-cards tbody td[data-label=""] > * {
        grid-column: 1;
    }

    /* Stacked variant — label above, value below, full width. For tables whose cells
       hold form controls (payment entry, meter-reading review): a 7.5rem label column
       would squeeze a <select> or a date input into something untappable. */
    .table-cards--stacked tbody td {
        display: block;
    }

    .table-cards--stacked tbody td::before {
        display: block;
        margin-bottom: .2rem;
    }

    .table-cards--stacked tbody td > * {
        grid-column: auto;
        justify-self: stretch;
        text-align: left;
    }

    .table-cards--stacked tbody td .form-control,
    .table-cards--stacked tbody td .form-select,
    .table-cards--stacked tbody td .ts-wrapper {
        width: 100%;
    }

    /* Headline: the cell that identifies the row */
    .table-cards tbody td[data-cell="title"] {
        display: block;
        padding-bottom: .5rem !important;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .table-cards tbody td[data-cell="title"]::before {
        content: none;
    }

    .table-cards tbody td[data-cell="title"] > * {
        grid-column: auto;
        justify-self: start;
        text-align: left;
    }

    .table-cards tbody td[data-cell="title"] a:not(.btn) {
        font-size: 1rem;
    }

    /* Footer: actions sit together under a divider, thumb-reachable */
    .table-cards tbody td[data-cell="actions"] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: .5rem;
        padding-top: .65rem !important;
        border-top: 1px solid var(--tblr-border-color) !important;
    }

    .table-cards tbody td[data-cell="actions"]::before {
        content: none;
    }

    .table-cards tbody td[data-cell="actions"] > * {
        grid-column: auto;
    }

    /* Action clusters are flex-nowrap for the desktop table; in a card they may wrap */
    .table-cards tbody td[data-cell="actions"] .btn-list {
        flex-wrap: wrap !important;
        justify-content: flex-end;
    }

    /* Row checkbox belongs beside the headline, not on a line of its own */
    .table-cards tbody td[data-cell="select"] {
        position: absolute;
        top: .85rem;
        right: 1rem;
        width: auto;
        padding: 0 !important;
    }

    .table-cards tbody td[data-cell="select"]::before {
        content: none;
    }

    .table-cards tbody tr:has(> td[data-cell="select"]) td[data-cell="title"] {
        padding-right: 2rem;
    }

    /* A cell with no value would otherwise render as a lone floating label */
    .table-cards tbody td:empty {
        display: none;
    }

    /* Empty state and total/subtotal rows: no card chrome, no labels. Marked with a
       class rather than sniffed with :has(> td[colspan]), because the row that needs
       this is emitted by x-ui.data-table and can just say so. */
    .table-cards tbody tr.table-cards-plain {
        border: 0 !important;
        padding: 0;
        background: none !important;
    }

    .table-cards tbody tr.table-cards-plain > td,
    .table-cards tbody td[colspan="99"] {
        display: block;
        padding: 0 !important;
    }

    .table-cards tbody tr.table-cards-plain > td::before,
    .table-cards tbody td[colspan="99"]::before {
        content: none;
    }

    /* These cells are not label/value pairs, so the right-aligned value styling above
       must not reach them — an empty state would come out flush right. */
    .table-cards tbody tr.table-cards-plain > td > *,
    .table-cards tbody td[colspan="99"] > * {
        grid-column: auto;
        justify-self: stretch;
        text-align: initial;
    }

    /* The sticky header is hidden, so the scroll container has nothing left to do —
       and keeping overflow-x:auto would clip the row-actions dropdown in a card. */
    .table-cards-wrap {
        overflow-x: visible;
    }

    /* Pagination wraps instead of pushing the card wider */
    .card-footer,
    .pagination {
        flex-wrap: wrap;
    }
}

/* Printing a list must still produce a table, not a column of cards */
@media print {
    .table-cards thead {
        display: table-header-group !important;
    }

    .table-cards {
        display: table !important;
    }

    .table-cards tbody {
        display: table-row-group !important;
    }

    .table-cards tbody tr {
        display: table-row !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .table-cards tbody td {
        display: table-cell !important;
    }

    .table-cards tbody td::before {
        content: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM PAGES — structured edit/create layouts
   ═══════════════════════════════════════════════════════════════════════════ */
/* Single-column form pages stay readable instead of stretching to 1600px */
.form-narrow {
    max-width: 900px;
}

/* Destructive actions get their own visually separated block */
.danger-zone {
    border-color: rgba(214, 57, 57, 0.28) !important;
    background: rgba(214, 57, 57, 0.03) !important;
}

.form-hero {
    padding: 1.35rem 1.5rem !important;
}

.form-hero .avatar {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.1rem;
}

.form-section .card-header {
    padding: 1rem 1.35rem !important;
    background: transparent !important;
}

.form-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mw-radius-sm);
    flex-shrink: 0;
}

.form-section .card-title {
    font-size: 1rem;
    font-weight: 700;
}

/* File upload target — dashed frame that highlights on hover/drag */
.dropzone-tile {
    display: block;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--tblr-border-color);
    border-radius: var(--mw-radius-md);
    background: rgba(var(--mw-primary-rgb), 0.02);
    color: var(--mw-text-muted);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.dropzone-tile:hover,
.dropzone-tile.border-primary {
    border-color: var(--mw-primary);
    background: rgba(var(--mw-primary-rgb), 0.06);
    color: var(--mw-primary);
}

.checklist-panel {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--mw-radius-md);
    background: rgba(var(--mw-primary-rgb), 0.02);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.checklist-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    border-radius: var(--mw-radius-md) var(--mw-radius-md) 0 0;
}

.checklist-panel__head .form-control {
    max-width: 220px;
    min-width: 140px;
}

.checklist-panel__body {
    flex: 1;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: visible;
    padding: .75rem 1rem 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.checklist-panel__body .rc-group:last-child .checklist-item:last-child,
.checklist-panel__body .ct-group:last-child .checklist-item:last-child {
    margin-bottom: 0;
}

.checklist-group__title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tblr-gray-600, #667382);
    margin: .75rem 0 .35rem;
    padding: 0 .25rem .25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

.checklist-group__title:first-child {
    margin-top: 0;
}

.checklist-group__subtitle,
.checklist-item__meta {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tblr-gray-700, #3a4859);
    margin: .5rem 0 .35rem .25rem;
}

.checklist-item__meta {
    display: block;
    margin: .15rem 0 0;
    font-weight: 600;
    color: var(--tblr-gray-800, #182433);
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem .85rem;
    margin-bottom: .35rem;
    border-radius: var(--mw-radius-sm);
    border: 1px solid transparent;
    background: var(--mw-glass-bg-solid);
    transition: background .12s ease, border-color .12s ease;
    cursor: pointer;
}

/* Bootstrap .form-check uses negative margin-left on the input — clips inside scroll panels */
.checklist-item.form-check {
    padding-left: .85rem !important;
    margin-bottom: .35rem;
    min-height: auto;
}

.checklist-item:hover {
    background: rgba(var(--mw-primary-rgb), 0.04);
    border-color: rgba(var(--mw-primary-rgb), 0.12);
}

.checklist-item .form-check-input {
    margin-top: .2rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    position: static !important;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

.checklist-item .form-check-label {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    line-height: 1.4;
}

.checklist-item.is-stale {
    border-color: rgba(247, 103, 7, 0.45) !important;
    background: rgba(247, 103, 7, 0.06) !important;
}

.checklist-item.is-stale::after {
    content: 'Außerhalb Filter';
    font-size: .65rem;
    font-weight: 600;
    color: #f76707;
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
}

.house-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .5rem;
}

.form-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.25rem;
    margin-top: .5rem;
    border-radius: var(--mw-radius-lg);
    background: var(--mw-glass-bg-solid);
    border: 1px solid var(--mw-glass-border);
    box-shadow: var(--mw-shadow-card);
}

.form-actions-bar--sticky {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    margin-top: 1.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.form-actions-bar--sticky.is-dirty {
    border-color: rgba(32, 107, 196, 0.45);
    box-shadow: 0 -4px 24px rgba(32, 107, 196, 0.12), var(--mw-shadow-card);
}

.form-unsaved-hint {
    display: none;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tblr-primary, #206bc4);
}

.form-actions-bar--sticky.is-dirty .form-unsaved-hint {
    display: flex;
}

.form-section__save-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--mw-radius-sm);
    background: rgba(32, 107, 196, 0.08);
    border: 1px solid rgba(32, 107, 196, 0.2);
    font-size: .875rem;
    color: var(--tblr-gray-800, #182433);
}

[data-bs-theme="dark"] .checklist-panel__head {
    background: rgba(15, 23, 42, 0.5);
}

[data-bs-theme="dark"] .checklist-item {
    background: rgba(15, 23, 42, 0.4);
}

[data-bs-theme="dark"] .checklist-group__subtitle,
[data-bs-theme="dark"] .checklist-item__meta {
    color: #cbd5e1;
}

/* ── User show / read-only detail pages ─────────────────────────────── */

.detail-list {
    display: grid;
    gap: .9rem;
    margin: 0;
}

.detail-list--cols {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem 1.5rem;
}

.detail-list__row {
    display: grid;
    gap: .25rem;
    padding: .85rem 1rem;
    border-radius: var(--mw-radius-sm);
    background: var(--mw-surface-muted);
    border: 1px solid var(--tblr-border-color);
}

.detail-list__row dt {
    margin: 0;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mw-text-muted);
}

.detail-list__row dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--mw-text);
}

/* ── Change history timeline ────────────────────────────────────────── */

.history-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--tblr-border-color);
}

.history-timeline__item {
    position: relative;
    padding-bottom: 1.25rem;
}

.history-timeline__item:last-child {
    padding-bottom: 0;
}

.history-timeline__item::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: .3rem;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--mw-primary);
    box-shadow: 0 0 0 3px var(--mw-surface);
}

.history-timeline__meta {
    font-size: .8rem;
    color: var(--mw-text-muted);
}

.history-timeline__detail {
    font-size: .875rem;
    color: var(--mw-text-muted);
}

.assignment-group {
    margin-bottom: 1rem;
}

.assignment-group:last-child {
    margin-bottom: 0;
}

.assignment-group__title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tblr-gray-600, #6b7a8d);
    margin-bottom: .5rem;
}

.assignment-group__subtitle {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tblr-gray-700, #3a4859);
    margin: .5rem 0 .35rem .25rem;
}

.assignment-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .8rem;
    margin-bottom: .4rem;
    border-radius: var(--mw-radius-sm);
    background: var(--mw-surface-muted);
    border: 1px solid var(--tblr-border-color);
    font-size: .875rem;
}

.assignment-item:last-child {
    margin-bottom: 0;
}

.assignment-item a {
    font-weight: 600;
    color: var(--mw-text);
    text-decoration: none;
}

.assignment-item a:hover {
    color: var(--mw-primary);
}

.assignment-item__meta {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--mw-text-muted);
    margin-top: .1rem;
}

/* ── Tenant relocation actions (user edit) ─────────────────────────── */
.tenant-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--mw-radius-md);
    background: rgba(var(--mw-primary-rgb), 0.08);
    border: 1px solid rgba(var(--mw-primary-rgb), 0.22);
}

.tenant-action-bar--expanded {
    background: rgba(247, 103, 7, 0.08);
    border-color: rgba(247, 103, 7, 0.25);
}

.tenant-action-bar__text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    flex: 1 1 220px;
}

.tenant-action-bar__title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--tblr-body-color);
}

.tenant-action-bar .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Form field / button spacing ───────────────────────────────────── */
.input-group.form-stack-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: stretch;
}

.input-group.form-stack-inline > .form-select,
.input-group.form-stack-inline > .ts-wrapper,
.input-group.form-stack-inline > .btn {
    flex: 1 1 220px;
    min-width: 0;
}

.input-group.form-stack-inline > .btn {
    flex: 0 1 auto;
}

.d-flex.gap-2.align-items-start > .btn,
.d-flex.flex-wrap.gap-2 > .btn {
    margin-top: 0;
}

.card-body > .form-label + .input-group,
.card-body > .form-label + .d-flex {
    margin-top: 0;
}

/* ── Camera scan overlay (counterValue hub) ─────────────────────────── */
.scan-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.85);
    padding: 10vh 1rem 1rem;
}

.scan-modal-overlay.is-open {
    display: block;
}

.scan-modal-overlay__panel {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    pointer-events: auto;
}

/* ── Erfassungsmodus (tracking mode) ─────────────────────────────────── */

.scan-thumb {
    display: inline-block;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    overflow: hidden;
    cursor: zoom-in;
    flex-shrink: 0;
}

.scan-thumb img {
    display: block;
    object-fit: cover;
    border-radius: 0.375rem;
}

.scan-preview-hint {
    margin-top: 0.25rem;
}

dialog.scan-photo-lightbox:not([open]) {
    display: none;
}

.scan-photo-lightbox {
    border: none;
    padding: 0;
    margin: auto;
    max-width: min(96vw, 960px);
    max-height: 96vh;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
}

.scan-photo-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.scan-photo-lightbox img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    margin: 0 auto;
    object-fit: contain;
}

.scan-photo-lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

/* Superseded by .table-cards-wrap, which the review table's wrapper now carries. */

/* `screen and` matters: without it this block also applies to the print stylesheet,
   where an A4 page box is ~794px but a phone-sized media query still matched. */
@media screen and (max-width: 767.98px) {
    /* The card rules that used to live here are now the shared `.table-cards
       .table-cards--stacked` pattern, which this table opts into directly. */
    .scan-thumb--review img {
        width: 120px;
        height: 120px;
    }

    #filterRow .form-select,
    #filterRow .form-control,
    #houseBatchSelect {
        min-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-SCREEN CAMERA — Erfassungsmodus capture stage
   ═══════════════════════════════════════════════════════════════════════════
   Replaces the previous sticky-camera/sticky-controls pair, which had two
   independent failure modes on a real phone:
     1. every rule hung on max-width:767.98px, so in landscape (844px+) nothing
        was sticky and the buttons sat below the video, off-screen;
     2. .scan-controls had no compositing trigger while the <video> in a sticky
        wrapper is promoted to its own layer by WebKit — iOS Safari then paints
        the video OVER the higher-z-index bar. Chrome never reproduces this.
   A fixed, body-level layer removes the media-query dependency entirely, and the
   bars below carry an explicit compositing trigger so they always win.
   No max-width here on purpose: this applies at every size and orientation.
   ═══════════════════════════════════════════════════════════════════════════ */
.scan-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 1090; /* over topbar (100) and sidebar (1051), under Ctrl+K (1100) */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

html.scan-camera-active,
html.scan-camera-active body {
    overflow: hidden !important;
    width: 100%;
    max-width: 100vw;
    background: #000;
}

.scan-fullscreen .scan-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    background: #000;
}

/* Shutter feedback: a brief white wash over the frame */
.scan-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.scan-flash.is-firing {
    animation: scanFlash .32s ease-out;
}

@keyframes scanFlash {
    0%   { opacity: .85; }
    100% { opacity: 0; }
}

.scan-fs-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    color: #fff;
    /* The compositing trigger that keeps iOS from painting the video on top */
    isolation: isolate;
    transform: translateZ(0);
}

.scan-fs-bar--top {
    top: 0;
    padding-top: calc(.6rem + env(safe-area-inset-top));
    padding-left: calc(.8rem + env(safe-area-inset-left));
    padding-right: calc(.8rem + env(safe-area-inset-right));
    background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent);
}

.scan-fs-bar--bottom {
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
    padding-left: calc(.8rem + env(safe-area-inset-left));
    padding-right: calc(.8rem + env(safe-area-inset-right));
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 55%, transparent);
}

.scan-fs-count {
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: var(--mw-radius-pill);
    background: rgba(0, 0, 0, .5);
}

.scan-fs-ghost {
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .4);
    color: #fff;
    border-radius: var(--mw-radius-pill);
    padding: .35rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    min-height: 40px;
}

.scan-fs-ghost--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    border-radius: 50%;
}

.scan-fs-ghost[aria-pressed="true"] {
    background: #fff;
    color: #111;
}

.scan-fs-status {
    min-height: 1.25rem;
    font-size: .82rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.scan-fs-status.is-error {
    color: #ffb3b3;
}

/* Captured shots as a horizontal strip — never a vertical list that pushes the
   controls off-screen, which is what the old .list-group did. */
.scan-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.scan-strip::-webkit-scrollbar {
    display: none;
}

.scan-strip:empty {
    display: none;
}

/* `1fr auto 1fr` keeps the shutter exactly centred whatever the side items measure.
   A flex row could not: the Fertig button's max-width broke the symmetry and shoved
   the shutter off to one side. */
.scan-fs-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
}

.scan-fs-hint,
.scan-fs-finish {
    min-width: 0;
}

.scan-fs-hint {
    justify-self: start;
    font-size: .72rem;
    opacity: .75;
    text-align: left;
}

.scan-fs-finish {
    justify-self: end;
    border: 0;
    background: var(--mw-success, #2fb344);
    color: #fff;
    font-weight: 600;
    border-radius: var(--mw-radius-pill);
    padding: .55rem .9rem;
    min-height: 44px;
}

/* Shutter: one unmistakable primary target, not one of four equal buttons */
.scan-shutter {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scan-shutter__ring {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
    transition: transform .12s ease;
}

.scan-shutter:active .scan-shutter__ring {
    transform: scale(.88);
}

.scan-shutter[disabled] {
    opacity: .55;
}

.scan-shutter[disabled] .scan-shutter__ring {
    background: #cbd5e1;
}

/* One tile per shot. Appears immediately from the local canvas blob in a pending
   state, then fills in with the recognised value — the user must see that the
   shutter did something without waiting for the OCR round-trip. */
.scan-tile {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    cursor: zoom-in;
    animation: scanTileIn .22s ease-out;
}

@keyframes scanTileIn {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: none; }
}

.scan-tile__img {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: .5rem;
    border: 2px solid rgba(255, 255, 255, .45);
    background: #222;
}

.scan-tile__value {
    display: block;
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.scan-tile--pending .scan-tile__img {
    opacity: .5;
}

/* Spinner while the upload/OCR is in flight */
.scan-tile--pending::after {
    content: '';
    position: absolute;
    top: 19px;
    left: 19px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: scanSpin .7s linear infinite;
}

@keyframes scanSpin {
    to { transform: rotate(360deg); }
}

.scan-tile--error .scan-tile__img {
    border-color: #ff6b6b;
}

.scan-tile--duplicate .scan-tile__img {
    border-color: var(--mw-warning, #f59f00);
}

/* Landscape phones are short — claw back vertical space */
@media screen and (orientation: landscape) and (max-height: 520px) {
    .scan-fs-bar--bottom {
        gap: .35rem;
        padding-bottom: calc(.4rem + env(safe-area-inset-bottom));
    }

    /* visibility, not display: the hint keeps its flex slot so the shutter stays
       centred between it and the Fertig button */
    .scan-fs-hint {
        visibility: hidden;
    }

    .scan-shutter {
        width: 56px;
        height: 56px;
    }

    .scan-shutter__ring {
        width: 46px;
        height: 46px;
    }

    /* Smaller tiles so the strip does not eat the short landscape viewport */
    .scan-tile,
    .scan-tile__img {
        width: 44px;
    }

    .scan-tile__img {
        height: 44px;
    }

    .scan-tile--pending::after {
        top: 12px;
        left: 12px;
        width: 20px;
        height: 20px;
    }

    .scan-fs-status {
        min-height: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE UX — inputs, filter bar, touch targets, safe area
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767.98px) {
    /* iOS zooms the whole page in when a focused field is under 16px, and never
       zooms back out. Tabler's .form-control is .875rem (14px), so every tap on a
       field left the layout shifted. TomSelect replaces every .form-select with its
       own .ts-control input, so that has to be listed explicitly. */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    textarea.form-control,
    .ts-control,
    .ts-control input,
    .ts-dropdown {
        font-size: 16px !important;
    }

    .form-control,
    .form-select,
    .ts-control {
        min-height: 44px;
    }

    /* Filter bar: search on its own row, the two selects sharing the next one.
       `width: auto !important` from the desktop rule above has to be beaten here. */
    .filter-bar .d-flex {
        row-gap: .5rem;
    }

    .filter-bar-search {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .filter-bar-select,
    .filter-bar-select-sm {
        flex: 1 1 calc(50% - .25rem) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .filter-bar .btn[type="submit"] {
        flex: 1 1 100%;
        min-height: 44px;
    }

    /* Bespoke filter forms (counter, stats) and the bulk bar use their own markup */
    .filter-bar .ts-wrapper,
    #filterRow .ts-wrapper,
    .card-body > .d-flex > .ts-wrapper {
        min-width: 0 !important;
    }

    /* Page actions read as ragged pills when each is content-width */
    .page-header .btn-list > .btn {
        flex: 1 1 100%;
        min-height: 44px;
    }

    /* Touch targets — Tabler's small buttons and menu rows are ~32px */
    .btn-icon,
    .btn-sm.btn-icon {
        min-width: 40px;
        min-height: 40px;
    }

    .dropdown-item {
        padding-top: .6rem !important;
        padding-bottom: .6rem !important;
    }

    .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* A right-anchored menu this wide gets shoved off a 375px screen */
    .notify-dropdown-menu {
        min-width: 0 !important;
        max-width: calc(100vw - 2rem) !important;
    }

    /* Long German compounds have nowhere to break in a narrow card */
    .page-title,
    .card-title {
        overflow-wrap: anywhere;
    }

    /* viewport-fit=cover puts the notch and home indicator over our own chrome */
    .app-topbar-inner {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #sidebar-menu.mobile-open {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .scan-controls {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
    }

    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* 100vh on iOS is the URL-bar-hidden viewport, so every page scrolled ~80px past
   its own content. dvh tracks the visible area; the 100vh line stays as a fallback
   for browsers without dvh. */
body {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Apartment list inside the generalCost factor column. Bounded on wide screens so an
   8-column table stays readable, unbounded in the mobile card view. Replaces an inline
   max-width:220px + overflow-x:auto, which nested a touch scroller inside a scroller. */
.apartment-factor-list {
    max-width: 220px;
}

@media screen and (max-width: 767.98px) {
    .apartment-factor-list {
        max-width: none;
    }
}

/* ── Command palette (Strg+K) ──────────────────────────────────────────────
   Teleported to <body> so it escapes the sticky topbar stacking context.
   Panel sits directly below the navbar, not centered behind it. */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: calc(66px + env(safe-area-inset-top, 0px) + .5rem) 1rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cmdk-panel {
    width: calc(100% - 2rem);
    max-width: 640px;
    margin-top: 0;
    flex-shrink: 0;
}

.cmdk-results {
    max-height: 50vh;
    overflow-y: auto;
}

.cmdk-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

@media screen and (max-width: 767.98px) {
    .cmdk-overlay {
        padding-top: calc(56px + env(safe-area-inset-top, 0px) + .5rem);
    }

    .cmdk-panel {
        width: calc(100% - 1rem);
    }

    .cmdk-results {
        max-height: 60dvh;
    }
}

@media screen and (max-width: 767.98px) {
    /* .glass-tab-panel is overflow:hidden for its rounded corners, which clips the
       row-actions dropdown of the last card inside it (resourceContract/index). */
    .glass-tab-panel {
        overflow: visible;
    }
}

/* ── Duplicate shots in the review step ────────────────────────────────────
   A meter photographed several times shows as ONE row; these controls expose the
   other shots so the automatic pick (best confidence) can be overridden. */
.scan-alts {
    margin-top: .4rem;
}

.scan-alts__toggle {
    border: 1px solid var(--tblr-border-color);
    background: var(--mw-surface-muted, rgba(0, 0, 0, .03));
    color: var(--mw-text-muted, var(--tblr-secondary));
    border-radius: var(--mw-radius-pill);
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 600;
}

@media screen and (max-width: 767.98px) {
    /* Thumb-sized: at .2rem padding this chip was only 25px tall */
    .scan-alts__toggle {
        min-height: 40px;
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .scan-alt {
        min-height: 48px;
    }
}

.scan-alts__list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}

.scan-alt {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 2px solid var(--tblr-border-color);
    border-radius: var(--mw-radius-sm);
    background: transparent;
    padding: .25rem .5rem .25rem .25rem;
    font-size: .72rem;
    line-height: 1.2;
    text-align: left;
}

.scan-alt--active {
    border-color: var(--mw-primary);
    background: var(--mw-primary-soft, rgba(var(--mw-primary-rgb), .08));
}

.scan-alt__img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--mw-radius-xs);
    background: var(--mw-surface-muted, #e2e8f0);
}

.scan-alt__meta {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Review step: iOS Safari shrinks the page when anything forces horizontal overflow.
   Keep the card and table-cards layout within the viewport after "Fertig". */
@media screen and (max-width: 767.98px) {
    html.scan-review-active,
    body.scan-review-active {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }

    body.scan-review-active .wrapper {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body.scan-review-active .page-wrapper {
        margin-left: 0 !important;
        max-width: 100vw;
        width: 100%;
        overflow-x: hidden;
    }

    body.scan-review-active .page-body,
    body.scan-review-active .page-body > .container-xl {
        max-width: 100%;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-x: hidden;
    }

    body.scan-review-active .tracking-mode-shell {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    body.scan-review-active .page-wrapper > .container-xl {
        max-width: 100%;
        width: 100%;
    }

    #scan-review.tracking-mode-review {
        width: 100%;
        max-width: 100%;
    }

    #scan-review .table-cards-wrap,
    #scan-review .table-cards {
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
    }

    #scan-review .table-cards tbody tr {
        max-width: 100%;
    }

    #scan-review .form-select,
    #scan-review .form-control {
        max-width: 100%;
    }
}

/* Review footer: the two buttons ("Weiter fotografieren" / "Alle bestätigen &
   speichern") are long German labels and ran past the card edge on a phone. */
@media screen and (max-width: 575.98px) {
    .scan-review-actions {
        width: 100%;
    }

    .scan-review-actions > .btn {
        flex: 1 1 100%;
        min-height: 44px;
    }
}