/* NCSOC EDR Registry - Phase 1 UI */
:root {
    --bg: #08090c;
    --panel: rgba(18, 20, 25, 0.84);
    --panel-solid: #121419;
    --panel-soft: #171a20;
    --text: #f7f7f9;
    --muted: #9ca3af;
    --muted-2: #6b7280;
    --line: rgba(255,255,255,.08);

    --red: #9d1227;
    --red-2: #c21e3a;
    --red-3: #ef455f;
    --red-soft: rgba(194, 30, 58, .14);

    --green: #2bd576;
    --amber: #f3ad38;

    --shadow: 0 24px 70px rgba(0, 0, 0, .36);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 10% 0%, rgba(157,18,39,.14), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(194,30,58,.09), transparent 34%),
        var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.ambient {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(90px);
    opacity: .11;
    z-index: -1;
}

.ambient-one { background: var(--red-2); top: -160px; right: -120px; }
.ambient-two { background: #731020; bottom: -220px; left: 18%; }

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

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 28px 20px 22px;
    border-right: 1px solid var(--line);
    background: rgba(8,9,12,.79);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--red-2), #72101e);
    box-shadow: 0 10px 28px rgba(194,30,58,.28), inset 0 1px rgba(255,255,255,.16);
    font-weight: 900;
    letter-spacing: -.03em;
}

.brand strong { display: block; font-size: 16px; letter-spacing: .08em; }
.brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.nav {
    display: grid;
    gap: 7px;
    margin-top: 42px;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #aeb3bc;
    padding: 12px 13px;
    border-radius: 13px;
    transition: .2s ease;
    position: relative;
}

.nav a:hover {
    background: rgba(255,255,255,.045);
    color: white;
    transform: translateX(2px);
}

.nav a.active {
    color: white;
    background: linear-gradient(90deg, rgba(194,30,58,.22), rgba(194,30,58,.06));
    border: 1px solid rgba(239,69,95,.15);
}

.nav a.active::before {
    content: "";
    position: absolute;
    left: -20px;
    width: 3px;
    height: 22px;
    border-radius: 4px;
    background: var(--red-3);
    box-shadow: 0 0 15px var(--red-2);
}

.nav-icon {
    width: 22px;
    text-align: center;
    color: var(--red-3);
    font-size: 17px;
}

.sidebar-footer {
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}

.sidebar-footer strong { display: block; font-size: 12px; }
.sidebar-footer small { color: var(--muted); }

.status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 14px rgba(43,213,118,.7);
}

.main { min-width: 0; }

.topbar {
    height: 94px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: rgba(8,9,12,.54);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar h1 {
    margin: 2px 0 0;
    font-size: 22px;
    letter-spacing: -.025em;
}

.eyebrow {
    margin: 0;
    color: var(--red-3);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--red-soft);
    border: 1px solid rgba(239,69,95,.18);
    font-weight: 800;
}

.user-copy strong, .user-copy span { display: block; }
.user-copy strong { font-size: 13px; }
.user-copy span { color: var(--muted); font-size: 11px; margin-top: 2px; }

.logout-link {
    margin-left: 10px;
    padding: 8px 10px;
    color: #b8bdc5;
    font-size: 12px;
    border-radius: 10px;
    transition: .2s ease;
}

.logout-link:hover { background: rgba(255,255,255,.05); color: white; }

.content { padding: 30px 34px 48px; }

.hero-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background:
        linear-gradient(115deg, rgba(157,18,39,.18), rgba(18,20,25,.72) 42%),
        var(--panel);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.hero-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -110px;
    border-radius: 999px;
    border: 30px solid rgba(194,30,58,.06);
    transform: rotate(18deg);
}

.hero-panel h2 {
    margin: 14px 0 7px;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.04em;
}

.hero-panel p { margin: 0; color: var(--muted); max-width: 720px; }

.pill, .mini-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(239,69,95,.18);
    background: rgba(194,30,58,.09);
    color: #f3899a;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.stat-card, .panel {
    border: 1px solid var(--line);
    background: var(--panel);
    backdrop-filter: blur(16px);
    box-shadow: 0 15px 45px rgba(0,0,0,.18);
}

.stat-card {
    border-radius: 18px;
    padding: 21px;
    transition: transform .2s ease, border-color .2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239,69,95,.18);
}

.stat-label {
    color: var(--muted);
    font-size: 12px;
}

.stat-value {
    display: block;
    font-size: 34px;
    margin: 8px 0 2px;
    letter-spacing: -.04em;
}

.stat-card small { color: var(--muted-2); }

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    gap: 18px;
}

.tenant-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
}

.panel {
    border-radius: var(--radius);
    padding: 22px;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.panel-head h3 { margin: 4px 0 0; font-size: 18px; }
.panel-head > a { color: #d36a7b; font-size: 12px; }

.table-wrap {
    overflow-x: auto;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.05);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

th, td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

th {
    color: #747b86;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 800;
}

td { color: #d8dbe0; font-size: 13px; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(255,255,255,.025); }
tbody tr:last-child td { border-bottom: 0; }

code {
    color: #f18a9a;
    background: rgba(194,30,58,.08);
    border: 1px solid rgba(239,69,95,.09);
    padding: 4px 7px;
    border-radius: 7px;
}

.status {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-installed { color: #76e4a7; background: rgba(43,213,118,.10); border: 1px solid rgba(43,213,118,.14); }
.status-offline { color: #ffc363; background: rgba(243,173,56,.10); border: 1px solid rgba(243,173,56,.15); }
.status-pending, .status-unregistered { color: #f08da0; background: rgba(194,30,58,.10); border: 1px solid rgba(239,69,95,.14); }
.status-retired { color: #9ca3af; background: rgba(156,163,175,.08); border: 1px solid rgba(156,163,175,.12); }

.progress-list { display: grid; gap: 17px; }
.progress-item { display: grid; gap: 8px; }
.progress-row { display: flex; justify-content: space-between; gap: 20px; }
.progress-row strong { font-size: 12px; }
.progress-row span { color: var(--muted); font-size: 11px; }
.progress-track { height: 7px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-3)); border-radius: inherit; box-shadow: 0 0 16px rgba(194,30,58,.25); }

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
}
.empty-state.compact { padding: 30px 15px; }
.empty-state h4 { margin: 12px 0 5px; color: white; }
.empty-state p { margin: 0; }
.empty-icon {
    margin: 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--red-soft);
    border: 1px solid rgba(239,69,95,.12);
    color: var(--red-3);
}

.btn {
    appearance: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn-primary {
    color: white;
    background: linear-gradient(135deg, var(--red-2), #811020);
    box-shadow: 0 12px 26px rgba(157,18,39,.25);
}
.btn-primary:hover { box-shadow: 0 16px 32px rgba(157,18,39,.35); }
.btn-secondary { color: white; background: #23262d; border: 1px solid var(--line); }
.btn-large { padding: 14px 16px; width: 100%; justify-content: space-between; }
.btn-arrow { font-size: 18px; }

.form-stack { display: grid; gap: 15px; }
.form-stack label { display: grid; gap: 7px; }
.form-stack label > span { color: #c6c9ce; font-size: 11px; font-weight: 700; }

input {
    width: 100%;
    outline: 0;
    color: white;
    background: #0d0f13;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 12px;
    padding: 12px 13px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus {
    border-color: rgba(239,69,95,.48);
    box-shadow: 0 0 0 4px rgba(194,30,58,.09);
    background: #101217;
}

.search-form { display: flex; gap: 8px; min-width: min(100%, 420px); }
.search-form input { min-width: 0; }

.alert {
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 12px;
    margin-bottom: 15px;
}
.alert-danger { color: #ffadbb; background: rgba(194,30,58,.09); border: 1px solid rgba(239,69,95,.17); }
.alert-success { color: #86e7b0; background: rgba(43,213,118,.08); border: 1px solid rgba(43,213,118,.16); }

.tenant-list { display: grid; gap: 10px; }
.tenant-card {
    display: grid;
    grid-template-columns: 45px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.02);
    transition: .18s ease;
}
.tenant-card:hover { background: rgba(255,255,255,.035); transform: translateX(2px); }
.tenant-monogram {
    width: 45px; height: 45px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--red-soft);
    color: #ef8294;
    font-weight: 900;
    font-size: 12px;
}
.tenant-copy strong, .tenant-copy span, .tenant-count strong, .tenant-count span { display: block; }
.tenant-copy strong { font-size: 13px; }
.tenant-copy span, .tenant-count span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.tenant-count { text-align: right; }
.tenant-count strong { font-size: 12px; }

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.75,.25,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.mobile-only { display: none; }
.icon-btn {
    border: 1px solid var(--line);
    background: #15181e;
    color: white;
    border-radius: 10px;
    width: 38px; height: 38px;
}

/* Login */
.login-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(194,30,58,.18), transparent 26%),
        radial-gradient(circle at 85% 70%, rgba(130,12,31,.12), transparent 25%),
        #08090c;
}

.login-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .19;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 40% 40%, black, transparent 80%);
}

.login-glow {
    position: fixed;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    filter: blur(90px);
    opacity: .18;
    animation: floatGlow 9s ease-in-out infinite alternate;
}
.glow-one { top: -150px; left: 12%; background: var(--red-2); }
.glow-two { bottom: -180px; right: 5%; background: #7b0f20; animation-delay: -3s; }

@keyframes floatGlow {
    from { transform: translate3d(-15px, -5px, 0) scale(.95); }
    to { transform: translate3d(25px, 20px, 0) scale(1.08); }
}

.login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
    gap: 50px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 50px 34px;
}

.brand-large .brand-mark { width: 50px; height: 50px; border-radius: 16px; }
.brand-large strong { font-size: 28px; }
.brand-large span { font-size: 14px; }

.hero-copy { margin-top: 80px; max-width: 650px; }
.hero-copy h1 {
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.02;
    letter-spacing: -.055em;
    margin: 18px 0;
    max-width: 700px;
}
.hero-copy p {
    color: #a5abb4;
    line-height: 1.7;
    max-width: 590px;
    font-size: 15px;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 580px;
    margin-top: 42px;
}
.hero-metrics div {
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.hero-metrics strong, .hero-metrics span { display: block; }
.hero-metrics strong { font-size: 17px; }
.hero-metrics span { color: var(--muted); font-size: 10px; margin-top: 3px; }

.login-card {
    width: 100%;
    max-width: 430px;
    justify-self: end;
    border: 1px solid rgba(255,255,255,.085);
    background: rgba(17,19,24,.86);
    backdrop-filter: blur(25px);
    border-radius: 26px;
    padding: 30px;
    box-shadow: 0 30px 100px rgba(0,0,0,.44);
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-3), transparent);
    opacity: .65;
}
.login-card-head h2 { margin: 13px 0 6px; font-size: 26px; letter-spacing: -.035em; }
.login-card-head p { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 65px; }
.password-toggle {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #d87687;
    cursor: pointer;
    font-size: 11px;
}
.security-note {
    margin: 18px 0 0;
    text-align: center;
    color: #686e78;
    font-size: 10px;
    line-height: 1.5;
}

/* Scan */
.scan-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #08090c;
}
.scan-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(194,30,58,.18), transparent 30%),
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}
.scan-wrap {
    position: relative;
    z-index: 2;
    width: min(92vw, 520px);
    padding: 30px 0;
}
.scan-card {
    padding: 28px;
    border-radius: 27px;
    border: 1px solid var(--line);
    background: rgba(17,19,24,.92);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    text-align: center;
}
.scan-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    justify-content: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.scan-brand strong, .scan-brand span { display: block; }
.scan-brand strong { font-size: 14px; letter-spacing: .08em; }
.scan-brand span { color: var(--muted); font-size: 10px; }
.verification-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: 29px auto 16px;
    border-radius: 999px;
    font-size: 30px;
    font-weight: 900;
}
.verification-icon.valid {
    color: #91efb8;
    background: rgba(43,213,118,.08);
    border: 1px solid rgba(43,213,118,.22);
    box-shadow: 0 0 45px rgba(43,213,118,.10);
}
.verification-icon.pending {
    color: #ffbb65;
    background: rgba(243,173,56,.08);
    border: 1px solid rgba(243,173,56,.20);
}
.verification-icon.invalid {
    color: #ff8396;
    background: var(--red-soft);
    border: 1px solid rgba(239,69,95,.20);
}
.scan-kicker {
    color: var(--red-3);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 800;
    font-size: 9px;
}
.scan-card h1 { margin: 8px 0 9px; font-size: 30px; letter-spacing: -.04em; }
.scan-copy { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 auto 22px; max-width: 390px; }
.scan-details { display: grid; gap: 8px; text-align: left; }
.scan-details > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.02);
    border-radius: 13px;
    padding: 12px 13px;
}
.scan-details span { color: var(--muted); font-size: 10px; }
.scan-details strong { text-align: right; font-size: 11px; overflow-wrap: anywhere; }
.scan-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: #777e88;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Responsive */
@media (max-width: 1050px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two-column, .tenant-layout { grid-template-columns: 1fr; }
    .login-wrap { grid-template-columns: 1fr 420px; gap: 30px; }
    .hero-copy h1 { font-size: 44px; }
}

@media (max-width: 820px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-102%);
        width: 260px;
        transition: transform .25s ease;
        box-shadow: 20px 0 50px rgba(0,0,0,.35);
    }
    .sidebar.open { transform: translateX(0); }
    .mobile-only { display: grid; place-items: center; }
    .topbar { padding: 0 18px; gap: 10px; }
    .topbar > div:first-of-type { flex: 1; }
    .eyebrow { display: none; }
    .content { padding: 20px 18px 35px; }
    .user-copy { display: none; }
    .logout-link { margin-left: 0; }
    .login-wrap { grid-template-columns: 1fr; max-width: 620px; padding: 36px 22px; }
    .login-intro { text-align: center; }
    .login-intro .brand { justify-content: center; }
    .hero-copy { margin: 55px auto 0; }
    .hero-copy h1 { font-size: 42px; }
    .hero-copy p { margin-left: auto; margin-right: auto; }
    .hero-metrics { margin-left: auto; margin-right: auto; }
    .login-card { justify-self: center; max-width: 470px; }
}
@media (max-width: 580px) {
    .stats-grid { grid-template-columns: 1fr; }
    .hero-panel { align-items: flex-start; flex-direction: column; padding: 22px; }
    .topbar h1 { font-size: 18px; }
.avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}
    .hero-copy h1 { font-size: 35px; }
    .hero-metrics { grid-template-columns: 1fr; text-align: left; }
    .login-card { padding: 23px; }
    .search-form { width: 100%; }
    .stack-mobile { align-items: stretch; flex-direction: column; }
    .scan-card { padding: 22px; }
    .scan-details > div { align-items: flex-start; flex-direction: column; gap: 4px; }
    .scan-details strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   Phase 2 - QR Asset Management
   ============================================================ */

select,
textarea {
    width: 100%;
    outline: 0;
    color: white;
    background: #0d0f13;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 12px;
    padding: 12px 13px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    font: inherit;
}

select:focus,
textarea:focus {
    border-color: rgba(239,69,95,.48);
    box-shadow: 0 0 0 4px rgba(194,30,58,.09);
    background: #101217;
}

textarea {
    resize: vertical;
    min-height: 104px;
}

label em {
    color: var(--muted-2);
    font-style: normal;
    font-weight: 500;
}

.page-alert {
    margin-bottom: 18px;
}

.qr-hero {
    position: relative;
    min-height: 190px;
    padding: 30px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 86% 22%, rgba(239,69,95,.13), transparent 26%),
        linear-gradient(112deg, rgba(157,18,39,.17), rgba(18,20,25,.72) 46%),
        var(--panel);
    box-shadow: var(--shadow);
}

.qr-hero > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 690px;
}

.qr-hero h2 {
    margin: 14px 0 8px;
    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: -.045em;
}

.qr-hero p {
    margin: 0;
    max-width: 620px;
    color: var(--muted);
    line-height: 1.65;
}

.qr-hero-orbit {
    position: absolute;
    right: 54px;
    top: 50%;
    width: 126px;
    height: 126px;
    transform: translateY(-50%);
    border: 1px solid rgba(239,69,95,.12);
    border-radius: 28px;
    rotate: 8deg;
    animation: qrOrbit 7s ease-in-out infinite alternate;
}

.qr-hero-orbit::before,
.qr-hero-orbit::after,
.qr-hero-orbit span {
    content: "";
    position: absolute;
    border-radius: 5px;
    background: rgba(239,69,95,.16);
    border: 1px solid rgba(239,69,95,.12);
}

.qr-hero-orbit::before { width: 34px; height: 34px; left: 16px; top: 16px; }
.qr-hero-orbit::after { width: 34px; height: 34px; right: 16px; top: 16px; }
.qr-hero-orbit span:nth-child(1) { width: 34px; height: 34px; left: 16px; bottom: 16px; }
.qr-hero-orbit span:nth-child(2) { width: 15px; height: 15px; right: 30px; bottom: 26px; }
.qr-hero-orbit span:nth-child(3) { width: 10px; height: 10px; right: 48px; bottom: 47px; }

@keyframes qrOrbit {
    from { transform: translateY(-50%) translate3d(0, -3px, 0) rotate(-3deg); }
    to { transform: translateY(-50%) translate3d(-9px, 7px, 0) rotate(3deg); }
}

.qr-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qr-layout {
    grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
}

.security-chip {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: #79e0a4;
    background: rgba(43,213,118,.075);
    border: 1px solid rgba(43,213,118,.13);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.generator-form {
    display: grid;
    gap: 19px;
}

.quantity-control {
    display: grid;
    gap: 8px;
}

.quantity-control > label {
    color: #c6c9ce;
    font-size: 11px;
    font-weight: 700;
}

.quantity-control small {
    color: var(--muted-2);
    font-size: 10px;
}

.quantity-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
}

.quantity-row input {
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.quick-qty {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.quick-qty button {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: #b8bec8;
    cursor: pointer;
    transition: .18s ease;
}

.quick-qty button:hover,
.quick-qty button.selected {
    border-color: rgba(239,69,95,.22);
    background: rgba(194,30,58,.11);
    color: white;
    transform: translateY(-1px);
}

.generator-preview {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}

.generator-preview strong,
.generator-preview span {
    display: block;
}

.generator-preview strong {
    font-size: 12px;
}

.generator-preview span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.mini-qr-grid {
    width: 47px;
    height: 47px;
    flex: 0 0 auto;
    border-radius: 8px;
    background:
        linear-gradient(90deg, #f1f2f4 18%, transparent 18% 31%, #f1f2f4 31% 43%, transparent 43% 58%, #f1f2f4 58% 76%, transparent 76%),
        linear-gradient(#f1f2f4 18%, transparent 18% 33%, #f1f2f4 33% 45%, transparent 45% 59%, #f1f2f4 59% 79%, transparent 79%),
        #171a20;
    box-shadow: inset 0 0 0 5px #f1f2f4;
}

.generate-btn.loading {
    opacity: .75;
    pointer-events: none;
}

.batch-list {
    display: grid;
    gap: 8px;
    max-height: 350px;
    overflow: auto;
    padding-right: 3px;
}

.batch-row {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255,255,255,.018);
    transition: .18s ease;
}

.batch-row:hover,
.batch-row.selected {
    transform: translateX(2px);
    background: rgba(194,30,58,.065);
    border-color: rgba(239,69,95,.15);
}

.batch-row strong,
.batch-row span {
    display: block;
}

.batch-row > div:first-child strong {
    font-size: 11px;
}

.batch-row > div:first-child span,
.batch-meta span {
    color: var(--muted);
    margin-top: 3px;
    font-size: 9px;
}

.batch-meta {
    text-align: right;
    flex: 0 0 auto;
}

.batch-meta strong {
    font-size: 11px;
    color: #ef8b9b;
}

.panel-subtitle {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.batch-detail-panel {
    margin-top: 18px;
}

.qr-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
}

.qr-asset-card {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.018);
    transition: .2s ease;
}

.qr-asset-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239,69,95,.17);
    background: rgba(255,255,255,.027);
}

.qr-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 9px;
    background: white;
}

.qr-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 7px;
}

.scan-line {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    top: 12%;
    background: rgba(194,30,58,.55);
    box-shadow: 0 0 10px rgba(194,30,58,.45);
    opacity: 0;
}

.qr-asset-card:hover .scan-line {
    opacity: 1;
    animation: qrScan 1.8s ease-in-out infinite;
}

@keyframes qrScan {
    0%, 100% { top: 12%; }
    50% { top: 86%; }
}

.qr-asset-copy {
    padding-top: 10px;
}

.qr-asset-copy > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.qr-asset-copy small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.registration-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.registration-main {
    padding: 28px;
}

.registration-heading {
    margin-bottom: 24px;
}

.registration-heading h2 {
    margin: 12px 0 7px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.registration-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.registration-badge {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #f0a06e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 0 rgba(243,173,56,.35);
    animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(243,173,56,.3); }
    70% { box-shadow: 0 0 0 8px rgba(243,173,56,0); }
    100% { box-shadow: 0 0 0 0 rgba(243,173,56,0); }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field-span-2 {
    grid-column: 1 / -1;
}

.registration-actions {
    margin-top: 7px;
    padding-top: 17px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.asset-sidecard {
    text-align: center;
}

.side-qr {
    width: 210px;
    max-width: 100%;
    margin: 18px auto 13px;
    padding: 12px;
    border-radius: 16px;
    background: white;
}

.side-qr img {
    width: 100%;
    height: auto;
    display: block;
}

.asset-sidecard > strong,
.asset-sidecard > span {
    display: block;
}

.asset-sidecard > strong {
    font-size: 13px;
}

.asset-sidecard > span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.security-note-box {
    margin-top: 18px;
    padding: 12px;
    border-radius: 13px;
    text-align: left;
    background: rgba(43,213,118,.045);
    border: 1px solid rgba(43,213,118,.09);
}

.security-note-box span {
    color: #6fe09f;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.security-note-box p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.55;
}

.scan-action {
    width: 100%;
    margin-top: 14px;
}

@media (max-width: 1250px) {
    .qr-card-grid {
        grid-template-columns: repeat(4, minmax(140px, 1fr));
    }
}

@media (max-width: 1050px) {
    .qr-layout {
        grid-template-columns: 1fr;
    }

    .qr-card-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .registration-shell {
        grid-template-columns: 1fr;
    }

    .asset-sidecard {
        display: grid;
        grid-template-columns: 150px 1fr;
        text-align: left;
        align-items: center;
        column-gap: 18px;
    }

    .asset-sidecard .eyebrow,
    .asset-sidecard .security-note-box {
        grid-column: 1 / -1;
    }

    .side-qr {
        grid-row: 2 / span 2;
        width: 145px;
        margin: 10px 0;
    }
}

@media (max-width: 820px) {
    .qr-hero-orbit {
        opacity: .45;
        right: -30px;
    }

    .qr-card-grid {
        grid-template-columns: repeat(2, minmax(135px, 1fr));
    }
}

@media (max-width: 580px) {
    .qr-stats {
        grid-template-columns: 1fr;
    }

    .quantity-row {
        grid-template-columns: 1fr;
    }

    .quick-qty {
        min-height: 42px;
    }

    .qr-card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .qr-asset-card {
        padding: 8px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-span-2 {
        grid-column: auto;
    }

    .registration-actions {
        flex-direction: column-reverse;
    }

    .registration-actions .btn {
        width: 100%;
    }

    .asset-sidecard {
        display: block;
        text-align: center;
    }

    .side-qr {
        width: 190px;
        margin: 14px auto;
    }
}


/* ============================================================
   Phase 3 - tenant-specific QR operations
   ============================================================ */

.hero-panel::after,
.qr-hero-orbit {
    pointer-events: none;
}

.hero-action {
    position: relative;
    z-index: 2;
}

.btn-danger {
    color: #ffbdc8;
    background: rgba(194,30,58,.09);
    border: 1px solid rgba(239,69,95,.18);
}

.btn-danger:hover {
    color: white;
    background: rgba(194,30,58,.18);
}

.btn-compact {
    padding: 9px 11px;
    font-size: 10px;
    border-radius: 10px;
}

.btn-tiny {
    padding: 7px 9px;
    font-size: 9px;
    border-radius: 9px;
}

.tenant-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.add-tenant-panel {
    position: sticky;
    top: 114px;
}

.tenant-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.tenant-management-card {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(194,30,58,.035), transparent 40%),
        rgba(255,255,255,.018);
    transition: .2s ease;
}

.tenant-management-card:hover {
    transform: translateY(-2px);
    border-color: rgba(239,69,95,.16);
}

.tenant-card-top {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 11px;
    align-items: center;
}

.tenant-prefix {
    margin-top: 15px;
    padding: 11px;
    border-radius: 12px;
    background: #0e1014;
    border: 1px solid rgba(255,255,255,.05);
}

.tenant-prefix span,
.code-preview span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-bottom: 7px;
}

.tenant-prefix code,
.code-preview code {
    display: inline-block;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.tenant-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.tenant-mini-stats div {
    padding: 9px;
    border-radius: 11px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.045);
}

.tenant-mini-stats strong,
.tenant-mini-stats span {
    display: block;
}

.tenant-mini-stats strong {
    font-size: 15px;
}

.tenant-mini-stats span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
}

.tenant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.tenant-actions form {
    display: contents;
}

.code-preview {
    padding: 11px;
    border-radius: 12px;
    border: 1px dashed rgba(239,69,95,.18);
    background: rgba(194,30,58,.04);
}

.field-help {
    margin: -3px 0 2px;
    color: var(--muted-2);
    font-size: 9px;
    line-height: 1.55;
}

.qr-stats-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tenant-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 15px;
}

.tenant-filter-pills a {
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--muted);
    border: 1px solid var(--line);
    background: rgba(255,255,255,.018);
    font-size: 9px;
    font-weight: 800;
    transition: .16s ease;
}

.tenant-filter-pills a:hover,
.tenant-filter-pills a.active {
    color: white;
    border-color: rgba(239,69,95,.18);
    background: rgba(194,30,58,.10);
}

.batch-row-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
}

.batch-row-wrap .batch-row {
    min-width: 0;
}

.batch-delete-form {
    display: flex;
}

.icon-danger-btn {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(239,69,95,.15);
    border-radius: 9px;
    background: rgba(194,30,58,.065);
    color: #e87588;
    cursor: pointer;
    transition: .16s ease;
}

.icon-danger-btn:hover {
    color: white;
    background: rgba(194,30,58,.18);
}

.batch-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qr-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.qr-card-actions form {
    display: contents;
}

.tenant-generator-preview strong {
    color: #f29aaa;
}

.locked-tenant-card {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 20px;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid rgba(43,213,118,.10);
    background: rgba(43,213,118,.035);
}

.locked-tenant-card span,
.locked-tenant-card strong,
.locked-tenant-card small {
    display: block;
}

.locked-tenant-card span {
    color: #6adf9d;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.locked-tenant-card strong {
    margin-top: 3px;
    font-size: 13px;
}

.locked-tenant-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.side-print-btn {
    margin-top: 12px;
}

.endpoint-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(150px, .8fr) minmax(130px, .65fr) auto auto;
    gap: 8px;
    margin-bottom: 17px;
}

.endpoint-table .table-primary,
.endpoint-table .table-secondary {
    display: block;
}

.endpoint-table .table-primary {
    font-size: 12px;
}

.endpoint-table .table-secondary {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.table-actions form {
    display: contents;
}

.scan-legacy-warning {
    margin-top: 14px;
    margin-bottom: 0;
}

@media (max-width: 1150px) {
    .tenant-page-grid {
        grid-template-columns: 1fr;
    }

    .add-tenant-panel {
        position: static;
    }

    .endpoint-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 850px) {
    .tenant-management-grid {
        grid-template-columns: 1fr;
    }

    .qr-stats-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .qr-stats-four {
        grid-template-columns: 1fr;
    }

    .endpoint-filter-bar {
        grid-template-columns: 1fr;
    }

    .batch-print-actions {
        width: 100%;
    }

    .batch-print-actions .btn {
        flex: 1 1 100%;
    }

    .tenant-card-top {
        grid-template-columns: 42px 1fr;
    }

    .tenant-card-top .status {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


/* ============================================================
   Phase 4 - capacity, range printing, dashboards & alignment
   ============================================================ */

.brand-mark-logo {
    padding: 5px;
    overflow: hidden;
}

.brand-mark-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.generator-form > label.generator-field,
.generator-form .quantity-control {
    width: 100%;
}

.generator-form > label.generator-field {
    display: grid;
    gap: 8px;
}

.generator-form > label.generator-field > span,
.dashboard-range-form label > span,
.capacity-form label > span {
    display: block;
    color: #c6c9ce;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 7px;
}

.generator-form select,
.generator-form input,
.quick-qty button {
    min-height: 46px;
}

.generator-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #8e949e 50%),
        linear-gradient(135deg, #8e949e 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.quantity-row {
    align-items: stretch;
}

.quick-qty button {
    font-weight: 800;
}

.capacity-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.capacity-strip > div {
    padding: 11px;
    border-radius: 12px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.05);
}

.capacity-strip span,
.capacity-strip strong {
    display: block;
}

.capacity-strip span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.capacity-strip strong {
    margin-top: 4px;
    font-size: 17px;
}

.tenant-mini-stats.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tenant-mini-stats.four > div {
    min-width: 0;
}

.print-range-card {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(239,69,95,.10);
    background: rgba(194,30,58,.035);
}

.print-range-card > div:first-child {
    margin-bottom: 12px;
}

.print-range-card > div:first-child strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.range-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
}

.range-form label {
    display: grid;
    gap: 6px;
}

.range-form label span {
    color: var(--muted);
    font-size: 9px;
}

.range-form input {
    min-height: 40px;
}

.tenant-dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    padding: 28px;
    margin-bottom: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 86% 20%, rgba(194,30,58,.12), transparent 28%),
        linear-gradient(110deg, rgba(157,18,39,.14), rgba(18,20,25,.72) 46%),
        var(--panel);
    box-shadow: var(--shadow);
}

.tenant-dashboard-hero h2 {
    margin: 11px 0 7px;
    font-size: clamp(27px, 3vw, 38px);
    letter-spacing: -.045em;
}

.tenant-dashboard-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.tenant-dashboard-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tenant-dashboard-stats {
    margin-top: 0;
}

.coverage-panel {
    margin-bottom: 18px;
}

.coverage-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.coverage-track.compact {
    height: 6px;
}

.coverage-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--red), var(--red-3));
    box-shadow: 0 0 18px rgba(194,30,58,.25);
}

.tenant-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-range-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dashboard-range-form .btn {
    grid-column: 1 / -1;
}

.full-width-btn {
    width: 100%;
    margin-top: 8px;
}

.capacity-management {
    display: grid;
    gap: 12px;
}

.capacity-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
}

.capacity-form label {
    min-width: 0;
}

.capacity-history {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.capacity-history > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.capacity-history span,
.capacity-history small {
    color: var(--muted);
    font-size: 8px;
}

.capacity-history strong {
    font-size: 10px;
}

.capacity-history small {
    grid-column: 1 / -1;
}

.dashboard-tenant-section,
.dashboard-recent-panel {
    margin-top: 18px;
}

.dashboard-tenant-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-tenant-card {
    display: block;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
    transition: .2s ease;
}

.dashboard-tenant-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239,69,95,.15);
    background: rgba(194,30,58,.04);
}

.dashboard-tenant-head {
    display: grid;
    grid-template-columns: 43px 1fr auto;
    gap: 10px;
    align-items: center;
}

.dashboard-tenant-head strong,
.dashboard-tenant-head small {
    display: block;
}

.dashboard-tenant-head strong {
    font-size: 12px;
}

.dashboard-tenant-head small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.dashboard-chevron {
    color: var(--red-3);
    font-size: 18px;
}

.dashboard-tenant-numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 14px 0 11px;
}

.dashboard-tenant-numbers div {
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}

.dashboard-tenant-numbers strong,
.dashboard-tenant-numbers span {
    display: block;
}

.dashboard-tenant-numbers strong {
    font-size: 14px;
}

.dashboard-tenant-numbers span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
}

.dashboard-coverage {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 8px;
}

@media (max-width: 1150px) {
    .dashboard-tenant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tenant-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .tenant-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .tenant-dashboard-actions {
        width: 100%;
    }

    .tenant-dashboard-actions .btn {
        flex: 1 1 100%;
    }

    .range-form,
    .capacity-form {
        grid-template-columns: 1fr;
    }

    .dashboard-tenant-grid {
        grid-template-columns: 1fr;
    }

    .tenant-mini-stats.four {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   Phase 5 - logo treatment, endpoint cleanup, reports
   ============================================================ */

/* Official logo: no red tile behind the artwork. */
.brand-mark-logo {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.brand-large .brand-mark-logo {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px;
}

.brand-mark-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

.sidebar .brand {
    gap: 14px;
}

.sidebar .brand strong {
    font-size: 17px;
}

.scan-brand .brand-mark-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px;
}

.legacy-cleanup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
    padding: 15px 16px;
    border: 1px solid rgba(243,173,56,.16);
    border-radius: 14px;
    background: rgba(243,173,56,.055);
}

.legacy-cleanup-banner strong,
.legacy-cleanup-banner p {
    display: block;
}

.legacy-cleanup-banner strong {
    margin-top: 4px;
    font-size: 13px;
}

.legacy-cleanup-banner p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.02);
}

.bulk-action-bar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 10px;
}

.bulk-action-bar input,
.check-col input {
    width: 15px;
    height: 15px;
    accent-color: var(--red-2);
}

.check-col {
    width: 36px;
    text-align: center;
}

@media (max-width: 760px) {
    .legacy-cleanup-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .legacy-cleanup-banner .btn {
        width: 100%;
    }
}




/* ============================================================
   Login page - mobile layout only
   ============================================================ */
@media (max-width: 700px) {

    .login-shell {
        display: block;
        min-height: 100dvh;
        width: 100%;
        overflow-x: hidden;
    }

    .login-story {
        width: 100%;
        min-height: auto;
        padding: 28px 20px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

    /* Logo + NCSOC heading */
    .login-story .brand-large {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 auto 24px;
        text-align: center;
    }

    .login-story .brand-large .brand-mark-logo {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        margin: 0 auto;
    }

    .login-story .brand-large > div {
        width: 100%;
        text-align: center;
    }

    .login-story .brand-large strong {
        display: block;
        width: 100%;
        margin: 0;
        font-size: 24px;
        line-height: 1.15;
        text-align: center;
    }

    .login-story .brand-large span {
        display: block;
        width: 100%;
        margin-top: 5px;
        font-size: 12px;
        text-align: center;
    }

    /* Secure / Auditable / Multi-tenant badge */
    .login-story .pill,
    .login-story .story-badge {
        margin-left: auto;
        margin-right: auto;
    }

    /* Main login-page heading */
    .login-story h1,
    .login-story h2 {
        width: 100%;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 30px;
        line-height: 1.08;
    }

    .login-story > p,
    .login-story .story-copy,
    .login-story .story-text {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 1.55;
    }

    /*
     * These feature blocks make the mobile page unnecessarily tall.
     * Hide them only on mobile so the login form appears immediately.
     */
    .login-features,
    .story-features,
    .feature-strip {
        display: none !important;
    }

    /* Login form section */
    .login-panel,
    .login-form-panel {
        width: 100%;
        min-height: auto;
        padding: 24px 18px 36px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .login-card {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 24px 20px;
    }

    .login-card h2,
    .login-card h3,
    .login-card > p {
        text-align: center;
    }

    .login-card form {
        width: 100%;
    }

    .login-card input,
    .login-card button {
        width: 100%;
    }
}

/* ============================================================
   Login mobile final fixes
   ============================================================ */
@media (max-width: 700px) {

    /* Hide QR / RBAC / Audit feature section on mobile */
    .login-story .feature-grid,
    .login-story .features-grid,
    .login-story .login-features,
    .login-story .story-features,
    .login-story .story-points,
    .login-story .feature-strip {
        display: none !important;
    }


    /* --------------------------------------------------------
       Password field + Show/Hide button
       -------------------------------------------------------- */

    .login-card .password-wrap,
    .login-card .password-field,
    .login-card .password-input-wrap {
        position: relative;
        width: 100%;
    }

    .login-card input[type="password"],
    .login-card input[type="text"][data-password-input] {
        width: 100%;
        padding-right: 68px;
    }

    /* Undo the previous width:100% rule for Show/Hide only */
    .login-card .password-toggle,
    .login-card button[data-password-toggle],
    .login-card #togglePassword,
    .login-card .password-wrap button,
    .login-card .password-field button,
    .login-card .password-input-wrap button {
        position: absolute;
        right: 12px;
        top: 50%;

        width: auto !important;
        min-width: auto !important;
        height: auto;

        transform: translateY(-50%);

        margin: 0;
        padding: 5px 8px;

        border: 0;
        background: transparent;

        color: #ef7185;
        font-size: 11px;
        font-weight: 600;

        box-shadow: none;
        cursor: pointer;
    }

    /* Submit button remains full width */
    .login-card button[type="submit"] {
        width: 100% !important;
    }
}

/* Hide QR / RBAC / Audit metrics on small screens */
@media (max-width: 700px) {
    .login-page .hero-metrics {
        display: none !important;
    }
}

/* Mobile login branding: logo above title */
@media (max-width: 700px) {

    .login-page .login-intro .brand.brand-large {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .login-page .login-intro .brand.brand-large .brand-mark-logo {
        margin: 0 auto;
    }

    .login-page .login-intro .brand.brand-large > div:last-child {
        width: 100%;
        text-align: center;
    }

    .login-page .login-intro .brand.brand-large strong,
    .login-page .login-intro .brand.brand-large span {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Center NCSOC Staff Access badge on mobile */
@media (max-width: 700px) {
    .login-page .login-card-head {
        text-align: center;
    }

    .login-page .login-card-head .mini-badge {
        display: flex;
        width: fit-content;
        margin: 0 auto;
        justify-content: center;
    }
}


/* Tenant dashboard - give endpoint table more room */
@media (min-width: 1151px) {
    .tenant-dashboard-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(380px, 0.85fr);
    }

    .tenant-dashboard-grid .table-wrap td:first-child code {
        white-space: nowrap;
    }
}




/* ============================================================
   LOGIN PAGE - ACTIVE CYBER NETWORK ANIMATION
   ============================================================ */

/* Remove the matrix/grid effect completely */
.login-page::before {
    background: none !important;
    animation: none !important;
}


/* ------------------------------------------------------------
   LARGE RED NETWORK NODES
   ------------------------------------------------------------ */

.login-page .login-shell::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;

    width: 6px;
    height: 6px;

    z-index: -1;
    pointer-events: none;

    border-radius: 50%;

    background: rgba(255, 45, 80, 0.95);

    box-shadow:
        6vw 12vh 0 1px rgba(255, 50, 85, 0.90),
        14vw 34vh 0 2px rgba(255, 70, 100, 0.70),
        22vw 18vh 0 1px rgba(255, 45, 80, 0.85),
        31vw 66vh 0 2px rgba(255, 70, 100, 0.65),
        39vw 27vh 0 1px rgba(255, 40, 75, 0.85),
        48vw 82vh 0 2px rgba(255, 80, 110, 0.75),
        57vw 43vh 0 1px rgba(255, 45, 80, 0.90),
        66vw 16vh 0 2px rgba(255, 90, 115, 0.75),
        74vw 69vh 0 1px rgba(255, 55, 90, 0.90),
        82vw 31vh 0 2px rgba(255, 60, 95, 0.70),
        91vw 74vh 0 1px rgba(255, 50, 85, 0.90),

        10vw 88vh 0 2px rgba(255, 65, 100, 0.75),
        27vw 49vh 0 1px rgba(255, 45, 80, 0.85),
        44vw 12vh 0 2px rgba(255, 80, 110, 0.70),
        61vw 91vh 0 1px rgba(255, 45, 80, 0.85),
        87vw 52vh 0 2px rgba(255, 70, 105, 0.75);

    filter:
        drop-shadow(0 0 5px rgba(255, 45, 80, 0.95))
        drop-shadow(0 0 12px rgba(190, 20, 50, 0.55));

    animation:
        activeNodeDrift 10s ease-in-out infinite alternate,
        activeNodePulse 2.2s ease-in-out infinite;
}


/* ------------------------------------------------------------
   BLUE / WHITE DATA NODES
   ------------------------------------------------------------ */

.login-page .login-intro::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;

    width: 4px;
    height: 4px;

    z-index: -1;
    pointer-events: none;

    border-radius: 50%;

    background: rgba(170, 220, 255, 0.95);

    box-shadow:
        9vw 22vh 0 1px rgba(160, 215, 255, 0.85),
        18vw 71vh 0 2px rgba(190, 230, 255, 0.65),
        29vw 39vh 0 1px rgba(140, 205, 255, 0.80),
        41vw 88vh 0 2px rgba(190, 230, 255, 0.70),
        52vw 21vh 0 1px rgba(145, 210, 255, 0.90),
        63vw 59vh 0 2px rgba(180, 225, 255, 0.70),
        72vw 10vh 0 1px rgba(150, 215, 255, 0.85),
        83vw 82vh 0 2px rgba(190, 230, 255, 0.70),
        94vw 37vh 0 1px rgba(150, 210, 255, 0.90),

        35vw 12vh 0 1px rgba(180, 225, 255, 0.75),
        68vw 79vh 0 2px rgba(150, 210, 255, 0.70);

    filter:
        drop-shadow(0 0 5px rgba(135, 205, 255, 0.9))
        drop-shadow(0 0 10px rgba(90, 160, 255, 0.4));

    animation:
        activeNodeDriftReverse 13s ease-in-out infinite alternate,
        blueNodePulse 3s ease-in-out infinite;
}


/* ------------------------------------------------------------
   MOVING DATA / TRAFFIC STREAKS
   ------------------------------------------------------------ */

.login-page::after {
    content: "";
    position: fixed;

    inset: -20%;

    z-index: -2;
    pointer-events: none;

    background:

        linear-gradient(
            120deg,
            transparent 0%,
            transparent 44%,
            rgba(255, 45, 80, 0.00) 47%,
            rgba(255, 45, 80, 0.20) 49%,
            rgba(255, 45, 80, 0.00) 51%,
            transparent 54%,
            transparent 100%
        ),

        linear-gradient(
            35deg,
            transparent 0%,
            transparent 54%,
            rgba(120, 190, 255, 0.00) 57%,
            rgba(120, 190, 255, 0.12) 59%,
            rgba(120, 190, 255, 0.00) 61%,
            transparent 64%,
            transparent 100%
        ),

        radial-gradient(
            circle at 20% 30%,
            rgba(180, 15, 45, 0.20),
            transparent 27%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(70, 120, 190, 0.09),
            transparent 25%
        );

    background-size:
        180% 180%,
        190% 190%,
        auto,
        auto;

    animation: dataTrafficMove 8s linear infinite;
}


/* ------------------------------------------------------------
   STRONGER SCANNING PULSE
   ------------------------------------------------------------ */

.login-page .login-shell::before {
    content: "";
    position: fixed;

    left: 0;
    top: -20%;

    width: 100%;
    height: 90px;

    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 40, 75, 0.02),
        rgba(255, 40, 75, 0.16),
        rgba(255, 90, 115, 0.08),
        transparent
    );

    filter:
        blur(2px)
        drop-shadow(0 0 12px rgba(255, 30, 70, 0.28));

    animation: activeCyberScan 6s linear infinite;
}


/* ------------------------------------------------------------
   LOGIN CARD ACTIVE BORDER GLOW
   ------------------------------------------------------------ */

.login-page .login-card {
    animation: activeLoginPulse 3.5s ease-in-out infinite;
}


/* Logo remains completely static */
.login-page .login-intro .brand-mark-logo {
    animation: none !important;
    transform: none !important;
}


/* ============================================================
   MOTION
   ============================================================ */

@keyframes activeNodeDrift {

    0% {
        transform: translate3d(-15px, 25px, 0);
    }

    25% {
        transform: translate3d(25px, -15px, 0);
    }

    50% {
        transform: translate3d(45px, 15px, 0);
    }

    75% {
        transform: translate3d(10px, -35px, 0);
    }

    100% {
        transform: translate3d(-30px, -10px, 0);
    }
}


@keyframes activeNodeDriftReverse {

    0% {
        transform: translate3d(25px, -20px, 0);
    }

    25% {
        transform: translate3d(-20px, 20px, 0);
    }

    50% {
        transform: translate3d(-40px, -10px, 0);
    }

    75% {
        transform: translate3d(15px, 35px, 0);
    }

    100% {
        transform: translate3d(35px, 5px, 0);
    }
}


@keyframes activeNodePulse {

    0%,
    100% {
        opacity: 0.40;
        filter:
            drop-shadow(0 0 4px rgba(255, 45, 80, 0.70));
    }

    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 8px rgba(255, 45, 80, 1))
            drop-shadow(0 0 18px rgba(200, 20, 55, 0.70));
    }
}


@keyframes blueNodePulse {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.95;
    }
}


@keyframes dataTrafficMove {

    0% {
        background-position:
            160% 160%,
            -70% 120%,
            center,
            center;
    }

    100% {
        background-position:
            -70% -70%,
            150% -80%,
            center,
            center;
    }
}


@keyframes activeCyberScan {

    0% {
        transform: translateY(-10vh);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        transform: translateY(125vh);
        opacity: 0;
    }
}


@keyframes activeLoginPulse {

    0%,
    100% {
        box-shadow:
            0 18px 55px rgba(0, 0, 0, 0.35),
            0 0 0 rgba(195, 30, 58, 0);
    }

    50% {
        box-shadow:
            0 18px 55px rgba(0, 0, 0, 0.35),
            0 0 34px rgba(195, 30, 58, 0.16);
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    /*
     * Keep movement active on mobile,
     * but reduce GPU load and visual clutter.
     */

    .login-page .login-shell::after {
        width: 5px;
        height: 5px;

        opacity: 0.75;

        animation-duration:
            14s,
            3s;
    }

    .login-page .login-intro::before {
        width: 4px;
        height: 4px;

        opacity: 0.62;

        animation-duration:
            17s,
            4s;
    }

    .login-page::after {
        opacity: 0.75;
        animation-duration: 11s;
    }

    .login-page .login-shell::before {
        animation-duration: 8s;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .login-page::after,
    .login-page .login-shell::before,
    .login-page .login-shell::after,
    .login-page .login-intro::before,
    .login-page .login-card {
        animation: none !important;
    }
}


/* Login page copyright */
.login-copyright {
    width: 100%;
    padding: 18px 16px 22px;
    text-align: center;
    color: rgba(190, 195, 205, 0.68);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

@media (max-width: 700px) {
    .login-copyright {
        padding: 16px 14px 20px;
        font-size: 10px;
    }
}


/* Administrator profile picture */

.avatar.avatar-photo {
    padding: 0;
    overflow: hidden;
    background: #15171b;
}

.avatar.avatar-photo img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;
    object-position: center;

    padding: 2px;
}


/* ============================================================
   APPLICATION DIALOGS / CONFIRMATIONS
   Replaces native browser confirm() boxes.
   ============================================================ */

.app-dialog-open {
    overflow: hidden;
}

.app-dialog-backdrop[hidden] {
    display: none !important;
}

.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 5, 9, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.app-dialog {
    width: min(540px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    padding: 22px;
    background:
        radial-gradient(circle at top right, rgba(194,30,58,.10), transparent 36%),
        #11141a;
    box-shadow: 0 28px 80px rgba(0,0,0,.48);
}

.app-dialog-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
    color: #d8dde7;
    font-size: 18px;
    font-weight: 900;
}

.app-dialog-danger .app-dialog-icon {
    border-color: rgba(239,69,95,.28);
    background: rgba(194,30,58,.14);
    color: #ff8da0;
}

.app-dialog-copy h3 {
    margin: 5px 0 9px;
    font-size: 18px;
}

.app-dialog-body {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}

.app-dialog-body p {
    margin: 0;
}

.app-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.app-dialog-alternative {
    margin-right: auto;
}

.availability-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin: 4px 0 18px;
}

.availability-summary > div {
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.availability-summary strong,
.availability-summary span {
    display: block;
}

.availability-summary strong {
    color: #f2f4f7;
    font-size: 14px;
}

.availability-summary span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.25;
}

.availability-range-heading {
    display: block;
    margin-bottom: 8px;
    color: #f0f2f5;
    font-size: 10px;
}

.availability-range-list {
    display: grid;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
}

.availability-range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}

.availability-range-row code {
    color: #f4a0ad;
    font-size: 10px;
    font-weight: 800;
}

.availability-range-row span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 9px;
}

.availability-note {
    margin-top: 12px !important;
    padding: 10px 11px;
    border-left: 2px solid rgba(239,69,95,.55);
    border-radius: 0 8px 8px 0;
    background: rgba(194,30,58,.07);
    color: #cdd2db;
}

.availability-empty {
    padding: 13px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.batch-row-main {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
}

.batch-row-main strong,
.batch-row-main span {
    display: block;
}

.batch-row-main strong {
    font-size: 11px;
}

.batch-row-main span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.batch-range-button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 5px 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: .16s ease;
}

.batch-range-button:hover,
.batch-range-button:focus-visible {
    border-color: rgba(239,69,95,.18);
    background: rgba(194,30,58,.09);
    outline: none;
}

.batch-range-button.loading {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 700px) {
    .app-dialog-backdrop {
        padding: 12px;
        align-items: end;
    }

    .app-dialog {
        width: 100%;
        max-height: 86vh;
        border-radius: 18px;
        padding: 18px;
    }

    .availability-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-dialog-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .app-dialog-actions .btn,
    .app-dialog-alternative {
        width: 100%;
        margin-right: 0;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-dialog-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}