/* =========================================================================
   POS Register — pages.css
   Per-page and per-layout rules migrated out of Pages/*.razor.css and
   Layout/*.razor.css.

   Every rule is anchored under its page's root class (.login-screen-section,
   .crc-page, .home-container, .pos-container, …). Bespoke pages keep their
   page-local custom-property block on that same root — see README.
   ========================================================================= */

/* =========================================================================
   MainLayout  (.page > main > article.content)

   Dropped as dead — default Blazor template chrome this layout no longer
   renders: .sidebar, .nav-scrollable, .top-row, .user-info, .welcome-text,
   .login-layout, .btn, .btn-sm, .btn-link, .btn-outline-danger
   Not migrated (already in base.css, which is a superset):
     .content padding, #blazor-error-ui, #blazor-error-ui .dismiss
   The bare `main` element selector is anchored to .page — as a CHILD
   (.page > main): the ConnectRegister pages render their own <main> body
   inside it, which a descendant selector was also clipping and flexing.

   .content is the scroller for every page in this layout at every width
   (ConnectRegister* on a short or portrait screen scrolls rather than
   clips). ProcessSales is unaffected: its .pos-container is fixed, and the
   `contain` below makes <main> — not .content — its containing block.
   ========================================================================= */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: transparent;
}

.page > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* MAUI performance optimizations */
.page,
.page > main {
    contain: layout style paint;
}

/* Smooth scrolling for better MAUI performance */
.content {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* The layout's scroller, at every width (see the section note above). */
.page .content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Platform-specific optimizations */
@supports (-webkit-touch-callout: none) {
    /* iOS */
    .page {
        -webkit-overflow-scrolling: touch;
    }
}

@supports (display: -ms-flexbox) {
    /* Windows/Edge */
    .page {
        display: -ms-flexbox;
        -ms-flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .page {
        flex-direction: column;
    }

    .content {
        padding: 0 !important;
        background-color: transparent;
    }
}

@media (min-width: 768px) {
    .page {
        flex-direction: row;
    }

    .page article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .content {
        background-color: transparent;
        padding: 0 !important;
    }
}

@media (min-width: 1200px) {
    .content {
        padding: 0 !important;
        background-color: transparent;
    }
}

/* =========================================================================
   HomeLayout
   ========================================================================= */
.home-layout-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--pos-surface);
}

/* =========================================================================
   LoginLayout
   ========================================================================= */
.login-layout-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* =========================================================================
   Home  (root: .home-container)

   Ported from the deleted Pages/Home.razor.css when the Custom Branding merge
   brought in the card-grid redesign. Two conversions were needed:

     - The `::deep` combinators are gone. That file relied on Blazor CSS
       isolation, which this project does not use (index.html never links
       Kensium.POS.styles.css), so `::deep` was inert and the selectors are
       plain descendants now.
     - Bespoke page, so it follows the README "Page-scoped tokens" pattern:
       the redesign introduces its own darker palette that deliberately does
       not consolidate onto the register tokens. Exact values are declared
       once on the root below and referenced by everything after it.
   ========================================================================= */
.home-container {
    /* Chrome */
    --home-canvas: #eef2f0;
    --home-chrome: #1e2b38;
    --home-chrome-line: rgba(255, 255, 255, 0.06);

    /* User chip */
    --home-chip: #27394f;
    --home-chip-border: rgba(255, 255, 255, 0.08);

    /* Accent green */
    --home-accent: #6fbf95;
    --home-accent-soft: rgba(111, 191, 149, 0.14);
    --home-accent-ring: rgba(111, 191, 149, 0.55);
    --home-on-accent: #16222c;

    /* Text */
    --home-text: #f2f5f7;
    --home-text-muted: #9db0c3;
    --home-text-dim: #aab6bf;
    --home-heading: #1e2b38;
    --home-heading-accent: #396354;
    --home-subtitle: #44545f;

    /* Action cards */
    --home-card-from: rgba(69, 74, 79, 0.96);
    --home-card-to: rgba(52, 57, 62, 0.96);
    --home-card-border: rgba(255, 255, 255, 0.07);
    --home-card-shadow: 0 8px 24px rgba(30, 43, 56, 0.18);
    --home-card-shadow-hover: 0 14px 32px rgba(30, 43, 56, 0.28);

    /* Primary card — Process Sales */
    --home-primary-from: #396354;
    --home-primary-to: #2e5245;
    --home-primary-shadow: 0 16px 36px rgba(57, 99, 84, 0.45);
    --home-primary-desc: rgba(255, 255, 255, 0.75);

    /* Function-key badge */
    --home-key-bg: #1a2530;
    --home-key-border: rgba(255, 255, 255, 0.14);
    --home-key-bg-primary: #24382e;
    --home-key-border-primary: rgba(0, 0, 0, 0.35);
    --home-kbd-border: rgba(255, 255, 255, 0.12);
    --home-mono: Consolas, 'Courier New', monospace;

    /* Status */
    --home-danger: #e2564f;
    --home-danger-soft: rgba(226, 86, 79, 0.12);
    --home-danger-ring: rgba(226, 86, 79, 0.55);
    --home-danger-glow: rgba(226, 86, 79, 0.8);
    --home-ok: #45c26f;
    --home-ok-glow: rgba(69, 194, 111, 0.8);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: var(--home-canvas);
    padding: 0;
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
    outline: none;
}

/* ---------- Header ---------- */

/* The safe-area insets (viewport-fit=cover, index.html) are 0 on desktop, so
   the header and footer paddings below reduce to their plain values there. */
.top-header {
    background: var(--home-chrome);
    width: 100%;
    padding: calc(var(--pos-space-7) + env(safe-area-inset-top, 0px)) max(var(--pos-space-9), env(safe-area-inset-right, 0px)) var(--pos-space-7) max(var(--pos-space-9), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--home-chrome-line);
    position: relative;
    z-index: var(--pos-z-raised);
    color: var(--pos-text-on-dark);
    flex-shrink: 0;
}

/* Full width (no centered max-width cap) so the header edges line up with the footer's. */
.header-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pos-space-9);
    flex-wrap: wrap;
    gap: var(--pos-space-8);
}

.header-logo-section2 {
    display: flex;
    align-items: center;
    gap: var(--pos-space-5);
}

.header-logo-section2 .header-logo2 {
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* margin-left: auto keeps the register info, clock and user chip hard right even if
   the logo section is narrow or the header wraps to a single row. */
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: var(--pos-space-9);
}

.register-info {
    text-align: right;
    line-height: 1.4;
}

.store-line {
    font-size: var(--pos-font-md);
    color: var(--home-text-muted);
}

.clock-line {
    font-size: 15px;
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-on-dark);
    font-variant-numeric: tabular-nums;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--pos-space-5);
    background: var(--home-chip);
    border: 1px solid var(--home-chip-border);
    padding: var(--pos-space-3) var(--pos-space-8) var(--pos-space-3) var(--pos-space-3);
    border-radius: 999px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--home-accent);
    color: var(--home-on-accent);
    display: grid;
    place-items: center;
    font-weight: var(--pos-weight-bold);
    font-size: var(--pos-font-lg);
}

.user-meta {
    text-align: left;
    line-height: 1.25;
}

.user-name {
    font-size: var(--pos-font-md);
    font-weight: var(--pos-weight-semibold);
    color: var(--pos-text-on-dark);
}

.user-role {
    font-size: var(--pos-font-sm);
    color: var(--home-text-muted);
}

/* ---------- Main area ---------- */

.home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 42px var(--pos-space-12) var(--pos-space-11);
    position: relative;
}

.welcome {
    text-align: center;
    margin-bottom: 36px;
}

.welcome-title {
    font-size: 26px;
    font-weight: var(--pos-weight-semibold);
    color: var(--home-heading);
    margin: 0;
}

.welcome-title span {
    color: var(--home-heading-accent);
}

.welcome-subtitle {
    margin: var(--pos-space-3) 0 0;
    font-size: 13.5px;
    font-weight: var(--pos-weight-normal);
    color: var(--home-subtitle);
}

/* ---------- Menu grid ---------- */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 260px));
    gap: 22px;
    width: 100%;
    max-width: 1160px;
    justify-content: center;
}

/* Action cards. These land on the MudButton root element, which is why the
   original used ::deep; a plain descendant selector reaches it now. */
.menu-grid .menu-card {
    position: relative;
    background: linear-gradient(180deg, var(--home-card-from), var(--home-card-to));
    border: 1px solid var(--home-card-border);
    border-radius: var(--pos-radius-xl);
    padding: var(--pos-space-10) var(--pos-space-9) var(--pos-space-9);
    min-height: 170px;
    color: var(--home-text);
    text-align: left;
    text-transform: none;
    box-shadow: var(--home-card-shadow);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    touch-action: manipulation;
    user-select: none;
}

.menu-grid .menu-card:hover,
.menu-grid .menu-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--home-accent-ring);
    box-shadow: var(--home-card-shadow-hover);
}

.menu-grid .menu-card:active {
    transform: translateY(-1px);
}

/* MudButton wraps its content in .mud-button-label; lay the card out there */
.menu-grid .menu-card .mud-button-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pos-space-7);
    width: 100%;
    white-space: normal;
}

.card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--pos-radius-xl);
    background: var(--home-accent-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--home-accent);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-label {
    font-size: var(--pos-font-xl);
    font-weight: var(--pos-weight-semibold);
    letter-spacing: 0.3px;
    color: inherit;
}

.card-desc {
    font-size: 12.5px;
    font-weight: var(--pos-weight-normal);
    color: var(--home-text-dim);
    line-height: 1.45;
    text-align: left;
}

.card-key {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--home-key-bg);
    border: 1px solid var(--home-key-border);
    border-bottom-width: 3px;
    border-radius: var(--pos-radius-lg);
    padding: var(--pos-space-2) var(--pos-space-5);
    font-size: var(--pos-font-base);
    font-weight: var(--pos-weight-bold);
    color: var(--home-accent);
    font-family: var(--home-mono);
    letter-spacing: 0.5px;
}

/* Primary card — Process Sales */
.menu-grid .menu-card-primary {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--home-primary-from) 0%, var(--home-primary-to) 100%);
    border-color: transparent;
    color: var(--pos-text-on-dark);
}

.menu-grid .menu-card-primary:hover,
.menu-grid .menu-card-primary:focus-visible {
    border-color: transparent;
    box-shadow: var(--home-primary-shadow);
}

.menu-card-primary .card-icon {
    background: var(--pos-overlay-light-2);
}

.menu-card-primary .card-icon svg {
    stroke: var(--pos-text-on-dark);
}

.menu-card-primary .card-label {
    font-size: 19px;
}

.menu-card-primary .card-desc {
    color: var(--home-primary-desc);
}

.menu-card-primary .card-key {
    background: var(--home-key-bg-primary);
    color: var(--pos-text-on-dark);
    border-color: var(--home-key-border-primary);
}

/* Danger card — Logout */
.menu-grid .menu-card-danger:hover,
.menu-grid .menu-card-danger:focus-visible {
    border-color: var(--home-danger-ring);
}

.menu-card-danger .card-icon {
    background: var(--home-danger-soft);
}

.menu-card-danger .card-icon svg {
    stroke: var(--home-danger);
}

.menu-card-danger .card-key {
    color: var(--home-danger);
}

/* ---------- Footer ---------- */

.home-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-8);
    flex-wrap: wrap;
    padding: var(--pos-space-5) var(--pos-space-12) calc(var(--pos-space-5) + env(safe-area-inset-bottom, 0px));
    background: var(--home-chrome);
    border-top: 1px solid var(--home-chrome-line);
    font-size: var(--pos-font-base);
    color: var(--pos-text-on-dark);
    flex-shrink: 0;
}

.home-footer .footer-status,
.home-footer .footer-hint,
.home-footer .footer-copy {
    color: var(--pos-text-on-dark);
}

.footer-status {
    display: flex;
    align-items: center;
    gap: var(--pos-space-4);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot-ok {
    background: var(--home-ok);
    box-shadow: 0 0 8px var(--home-ok-glow);
}

.status-dot-off {
    background: var(--home-danger);
    box-shadow: 0 0 8px var(--home-danger-glow);
}

.footer-hint kbd {
    background: var(--home-chip);
    border: 1px solid var(--home-kbd-border);
    border-radius: var(--pos-radius);
    padding: 1px var(--pos-space-3);
    font-size: var(--pos-font-sm);
    color: var(--home-text);
    font-family: var(--home-mono);
}

/* ---------- Responsive ---------- */

@media (min-width: 1920px) {
    .menu-grid {
        max-width: 1400px;
        grid-template-columns: repeat(4, minmax(240px, 320px));
        gap: var(--pos-space-10);
    }
}

/* Narrow landscape (1024px to 1199px): three columns, so the seven cards
   take three rows (Process Sales spans two) rather than four. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1000px;
    }
}

/* Tablet portrait (up to 1023px): two columns. */
@media (max-width: 1023.98px) {
    .menu-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        max-width: 900px;
    }

    .menu-grid .menu-card-primary {
        grid-column: span 2;
    }
}

/* Short landscape tablets / terminals (≤820px tall, e.g. 1024×768,
   1366×768, 1280×800): tighten the vertical rhythm so the header, welcome
   and card rows fit without scrolling. Capped at the tablet band so a
   desktop browser window (1600×900 has ~800px of viewport) is unchanged. */
@media (min-width: 768px) and (max-width: 1366.98px) and (max-height: 820px) {
    .home-main {
        padding-top: var(--pos-space-10);
        padding-bottom: var(--pos-space-9);
    }

    .welcome {
        margin-bottom: var(--pos-space-9);
    }

    .menu-grid .menu-card {
        min-height: 140px;
        padding: var(--pos-space-9) var(--pos-space-9) var(--pos-space-8);
    }
}

@media (max-width: 767.98px) {
    .home-main {
        padding: 28px var(--pos-space-9) var(--pos-space-10);
    }

    .home-footer {
        justify-content: center;
        text-align: center;
        padding: var(--pos-space-5) var(--pos-space-8) calc(var(--pos-space-5) + env(safe-area-inset-bottom, 0px));
    }

    .header-content {
        flex-direction: column;
        text-align: center;
        padding: 0 var(--pos-space-5);
    }

    .header-logo-section2 .header-logo2 {
        height: 35px;
    }

    .welcome-title {
        font-size: 22px;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        gap: var(--pos-space-7);
    }

    .menu-grid .menu-card {
        min-height: 0;
        padding: var(--pos-space-9) 18px 18px;
    }

    .menu-grid .menu-card-primary {
        grid-column: span 1;
    }
}

@media (max-width: 375px) {
    .header-logo-section2 .header-logo2 {
        height: 30px;
    }

    .welcome-title {
        font-size: 19px;
    }
}

/* =========================================================================
   ProcessSales  (root: .pos-container)
   ========================================================================= */
/* Full-screen loader shown while the page runs its initial load. Sits above the
   page content with a translucent scrim so the page stays visible (dimmed)
   behind the spinner. Reuses the shared `@keyframes spin` defined below. */
.pos-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(34, 52, 68, 0.6); /* --pos-canvas @ 60% */
    backdrop-filter: blur(1px);
}

.pos-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pos-space-8);
}

.pos-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--pos-blue);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.pos-loading-text {
    color: var(--pos-text-on-dark);
    font-size: var(--pos-font-md);
    font-weight: var(--pos-weight-medium);
    letter-spacing: 0.3px;
}

/* Amber twin of .refund-sale-indicator. ProcessSales.razor renders it, but it
   had no rule in the shared layer, so the badge was showing unstyled. */
.new-item-indicator {
    background-color: var(--pos-amber);
    color: var(--pos-text-on-dark);
    font-size: var(--pos-font-xs);
    font-weight: var(--pos-weight-semibold);
    padding: var(--pos-space-1) var(--pos-space-4);
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.refund-sale-indicator {
    background-color: var(--pos-danger-2);
    color: var(--pos-text-on-dark);
    font-size: var(--pos-font-xs);
    font-weight: var(--pos-weight-semibold);
    padding: var(--pos-space-1) var(--pos-space-4);
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.refund-mode-banner {
    background-color: var(--pos-danger-2);
    color: var(--pos-text-on-dark);
    text-align: center;
    font-size: var(--pos-font-lg);
    font-weight: var(--pos-weight-bold);
    letter-spacing: 2px;
    padding: var(--pos-space-3) 0;
    margin: 0 var(--pos-space-8);
    width: auto;
    text-transform: uppercase;
    border-radius: var(--pos-radius-lg);
}

/* =========================================================================
   Bespoke pages — ConnectRegister* and Login

   These four pages keep their own design language rather than the register
   palette, so each declares page-local custom properties on its root and
   references them below (see README, "Page-scoped tokens").

   Every selector below is anchored under that root. This is load-bearing:
   .btn, .btn-cancel, .btn-create, .form-control, .required, .text-center
   and .mb-2 are Bootstrap / shared names that these pages redefine, and
   CSS isolation used to keep those redefinitions local.
   ========================================================================= */

/* ---- ConnectRegister (dropped as dead: .crc-help) ---------------------- */
/* Connect Register - Register Key entry page (two-column) */

.crc-page {

    /* Page-scoped tokens (exact values preserved) */
    --cr-page-bg: #f0f2f5;
    --cr-topbar-bg: #1B2937;
    --cr-help: #cbd3dc;
    --cr-white: #ffffff;
    --cr-heading: #1f2937;
    --cr-muted: #6b7280;
    --cr-label: #374151;
    --cr-primary: #47856F;
    --cr-primary-soft: rgba(71, 133, 111, 0.12);
    --cr-primary-hover: #3d6757;
    --cr-primary-active: #335544;
    --cr-border: #e5e7eb;
    --cr-input-border: #d1d5db;
    --cr-input-disabled-bg: #f9fafb;
    --cr-placeholder: #9ca3af;
    --cr-cancel-text: #4a5568;
    --cr-cancel-active-bg: #f3f4f6;
    --cr-required: #e53e3e;
    --cr-error-bg: #fef2f2;
    --cr-error-border: #fecaca;
    --cr-error-text: #b91c1c;
    --cr-error-icon: #dc3545;
    --cr-success-bg: #f0fdf4;
    --cr-success-border: #bbf7d0;
    --cr-success-text: #15803d;
    --cr-success-icon: #28a745;
    --cr-footer-bg: #eceff3;
    --cr-footer-border: #e2e6ea;
    --cr-card-shadow: 0 10px 35px rgba(27, 41, 55, 0.08);
    --cr-focus-ring: 0 0 0 3px rgba(71, 133, 111, 0.12);
    --cr-btn-shadow: 0 4px 14px rgba(71, 133, 111, 0.25);
    --cr-btn-shadow-hover: 0 6px 18px rgba(71, 133, 111, 0.32);
    --cr-btn-shadow-active: 0 2px 8px rgba(71, 133, 111, 0.25);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: var(--cr-page-bg);
    box-sizing: border-box;
    overflow-x: hidden;

}

/* Top bar */

/* 56px bar plus any top safe-area inset (0 on desktop); the side padding
   never drops under 28px. Same treatment on the Intro and Success bars. */
.crc-page .crc-topbar {

    background: var(--cr-topbar-bg);
    width: 100%;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

}

.crc-page .crc-logo {

    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;

}

/* Body: two columns */

.crc-page .crc-body {

    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--pos-space-12) var(--pos-space-12) var(--pos-space-11);
    box-sizing: border-box;
    display: grid;
    /* minmax(0, …): a column never grows past half on its content's min
       width, so nothing pushes the page wider than the viewport. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;

}

/* Left column */

.crc-page .crc-left {

    display: flex;
    flex-direction: column;

}

.crc-page .crc-title {

    font-size: 2rem;
    font-weight: var(--pos-weight-bold);
    color: var(--cr-heading);
    margin: 0 0 var(--pos-space-7);
    line-height: 1.2;
    letter-spacing: -0.5px;

}

.crc-page .crc-lead {

    font-size: 0.95rem;
    color: var(--cr-muted);
    line-height: 1.6;
    margin: 0 0 var(--pos-space-4);
    max-width: 380px;

}

.crc-page .crc-illustration {

    margin-top: var(--pos-space-11);
    max-width: 340px;

}

.crc-page .crc-illustration svg {

    width: 100%;
    height: auto;

}

/* Feature callouts */

.crc-page .crc-features {

    display: flex;
    gap: 28px;
    margin-top: 36px;
    flex-wrap: wrap;

}

.crc-page .crc-feature {

    display: flex;
    align-items: center;
    gap: var(--pos-space-6);
    max-width: 220px;

}

.crc-page .crc-feature-icon {

    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--pos-radius-lg);
    background: var(--cr-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cr-primary);
    font-size: 0.85rem;

}

.crc-page .crc-feature-text {

    display: flex;
    flex-direction: column;
    gap: var(--pos-space-2);

}

.crc-page .crc-feature-title {

    font-size: 0.85rem;
    font-weight: var(--pos-weight-semibold);
    color: var(--cr-label);

}

.crc-page .crc-feature-desc {

    font-size: 0.78rem;
    color: var(--cr-muted);
    line-height: 1.45;

}

/* Right column - card */

.crc-page .crc-right {

    display: flex;
    justify-content: center;

}

.crc-page .crc-card {

    width: 100%;
    max-width: 460px;
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: 14px;
    box-shadow: var(--cr-card-shadow);
    padding: 34px 36px 30px;
    box-sizing: border-box;
    animation: crcCardIn 0.35s ease;

}

@keyframes crcCardIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.crc-page .crc-card-title {

    font-size: 1.35rem;
    font-weight: var(--pos-weight-bold);
    color: var(--cr-heading);
    margin: 0 0 var(--pos-space-5);
    letter-spacing: -0.3px;

}

.crc-page .crc-card-lead {

    font-size: 0.875rem;
    color: var(--cr-muted);
    line-height: 1.55;
    margin: 0 0 var(--pos-space-9);

}

/* Alert Banner */

.crc-page .alert-banner {

    width: 100%;
    padding: var(--pos-space-7) 18px;
    border-radius: var(--pos-radius-lg);
    margin-bottom: var(--pos-space-9);
    display: flex;
    align-items: flex-start;
    gap: var(--pos-space-6);
    font-size: 0.9rem;
    font-weight: var(--pos-weight-medium);
    line-height: 1.4;
    box-sizing: border-box;
    animation: crcSlideDown 0.3s ease;

}

@keyframes crcSlideDown {

    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.crc-page .alert-banner i {

    font-size: 1.1rem;
    margin-top: 1px;
    flex-shrink: 0;

}

.crc-page .alert-error {

    background: var(--cr-error-bg);
    border: 1px solid var(--cr-error-border);
    color: var(--cr-error-text);

}

.crc-page .alert-error i {

    color: var(--cr-error-icon);

}

.crc-page .alert-success {

    background: var(--cr-success-bg);
    border: 1px solid var(--cr-success-border);
    color: var(--cr-success-text);

}

.crc-page .alert-success i {

    color: var(--cr-success-icon);

}

/* Form */

.crc-page .simple-form {

    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-9);

}

.crc-page .form-field {

    display: flex;
    flex-direction: column;
    gap: var(--pos-space-4);
    width: 100%;

}

.crc-page .form-label {

    font-size: 0.9rem;
    font-weight: var(--pos-weight-semibold);
    color: var(--cr-label);
    margin: 0;

}

.crc-page .form-control {

    width: 100%;
    padding: var(--pos-space-7) var(--pos-space-8);
    border: 1px solid var(--cr-input-border);
    border-radius: var(--pos-radius-lg);
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--cr-white);
    color: var(--cr-heading);
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.crc-page .form-control:focus {

    outline: none;
    border-color: var(--cr-primary);
    box-shadow: var(--cr-focus-ring);

}

.crc-page .form-control:disabled {

    background: var(--cr-input-disabled-bg);
    cursor: not-allowed;
    opacity: 0.6;

}

.crc-page .form-control::placeholder {

    color: var(--cr-placeholder);

}

/* Form hint */

.crc-page .form-hint {

    display: flex;
    align-items: flex-start;
    gap: var(--pos-space-4);
    font-size: 0.8rem;
    color: var(--cr-muted);
    line-height: 1.5;
    margin-top: var(--pos-space-1);

}

.crc-page .form-hint i {

    color: var(--cr-placeholder);
    font-size: 0.85rem;
    margin-top: var(--pos-space-1);
    flex-shrink: 0;

}

/* Validation Error */

.crc-page .validation-message {

    color: var(--cr-required) !important;
    font-size: 0.825rem;
    font-weight: var(--pos-weight-medium);
    margin-top: var(--pos-space-1);
    display: block;

}

/* Form Actions */

/* Wraps (button over button) when the card is too narrow for both labels on
   one line — e.g. the two-column layout just above 900px. */
.crc-page .form-actions {

    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-6);
    margin-top: var(--pos-space-2);

}

/* Buttons */

/* flex-basis 0 so both buttons take exactly half the row regardless of label length,
   and nowrap so the longer label ("Connect device") stays on one line like "Back". */
.crc-page .btn {

    flex: 1 1 0;
    white-space: nowrap;
    padding: var(--pos-space-6) var(--pos-space-6);
    border: none;
    border-radius: var(--pos-radius-lg);
    font-size: 0.95rem;
    font-weight: var(--pos-weight-semibold);
    cursor: pointer;
    transition: var(--pos-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-4);
    min-height: 48px;

}

.crc-page .btn:disabled {

    opacity: 0.55;
    cursor: not-allowed;

}

.crc-page .btn-create {

    background: var(--cr-primary);
    color: var(--cr-white);
    border: 1px solid var(--cr-primary);
    box-shadow: var(--cr-btn-shadow);

}

.crc-page .btn-create:hover:not(:disabled) {

    background: var(--cr-primary-hover);
    box-shadow: var(--cr-btn-shadow-hover);

}

.crc-page .btn-create:active:not(:disabled) {

    background: var(--cr-primary-active);
    box-shadow: var(--cr-btn-shadow-active);

}

.crc-page .btn-create:focus-visible {

    outline: 2px solid var(--cr-primary);
    outline-offset: 2px;

}

.crc-page .btn-cancel {

    background: var(--cr-white);
    color: var(--cr-cancel-text);
    border: 1px solid var(--cr-input-border);

}

.crc-page .btn-cancel:hover:not(:disabled) {

    background: var(--cr-input-disabled-bg);
    border-color: var(--cr-placeholder);

}

.crc-page .btn-cancel:active:not(:disabled) {

    background: var(--cr-cancel-active-bg);

}

.crc-page .btn-cancel:focus-visible {

    outline: 2px solid var(--cr-primary);
    outline-offset: 2px;

}

/* Loading Spinner */

.crc-page .fa-spinner {

    animation: crcSpin 1s linear infinite;

}

@keyframes crcSpin {

    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }

}

.crc-page .required {

    color: var(--cr-required);

}

/* Footer */

.crc-page .crc-footer {

    flex-shrink: 0;
    width: 100%;
    text-align: center;
    padding: var(--pos-space-8) var(--pos-space-8) calc(var(--pos-space-8) + env(safe-area-inset-bottom, 0px));
    font-size: 0.75rem;
    color: var(--cr-placeholder);
    background: var(--cr-footer-bg);
    border-top: 1px solid var(--cr-footer-border);

}

/* Responsive */

@media (max-width: 900px) {

    .crc-page .crc-body {
        grid-template-columns: 1fr;
        gap: var(--pos-space-11);
        padding: var(--pos-space-11) var(--pos-space-9);
    }
    .crc-page .crc-left {
        align-items: center;
        text-align: center;
    }
    .crc-page .crc-lead {
        max-width: none;
    }
    .crc-page .crc-illustration {
        display: none;
    }
    .crc-page .crc-features {
        justify-content: center;
    }
    .crc-page .crc-right {
        justify-content: center;
    }

}

@media (max-width: 600px) {

    .crc-page .form-actions {
        flex-direction: column-reverse;
    }

}

/* Accessibility */

.crc-page .form-control:focus-visible,
.crc-page .btn:focus-visible {

    outline: 2px solid var(--cr-primary);
    outline-offset: 2px;

}

/* ---- ConnectRegisterIntro (dropped as dead: .cri-help) ----------------- */
/* Connect Register - "Before you begin" intro page */

.cri-page {

    /* Page-scoped tokens (exact values preserved) */
    --cri-page-bg: #f0f2f5;
    --cri-topbar-bg: #1B2937;
    --cri-help: #cbd3dc;
    --cri-white: #ffffff;
    --cri-heading: #1f2937;
    --cri-muted: #6b7280;
    --cri-border: #e5e7eb;
    --cri-divider: #f0f1f3;
    --cri-checklist-text: #4b5563;
    --cri-primary: #47856F;
    --cri-primary-hover: #3d6757;
    --cri-primary-active: #335544;
    --cri-input-border: #d1d5db;
    --cri-cancel-text: #4a5568;
    --cri-cancel-hover-bg: #f9fafb;
    --cri-cancel-active-bg: #f3f4f6;
    --cri-placeholder: #9ca3af;
    --cri-footer-bg: #eceff3;
    --cri-footer-border: #e2e6ea;
    --cri-card-shadow: 0 10px 35px rgba(27, 41, 55, 0.08);
    --cri-btn-shadow: 0 4px 14px rgba(71, 133, 111, 0.25);
    --cri-btn-shadow-hover: 0 6px 18px rgba(71, 133, 111, 0.32);
    --cri-btn-shadow-active: 0 2px 8px rgba(71, 133, 111, 0.25);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: var(--cri-page-bg);
    box-sizing: border-box;
    overflow-x: hidden;

}

/* Top bar */

.cri-page .cri-topbar {

    background: var(--cri-topbar-bg);
    width: 100%;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

}

.cri-page .cri-logo {

    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;

}

/* Body: two columns */

.cri-page .cri-body {

    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--pos-space-12) var(--pos-space-12) var(--pos-space-11);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;

}

/* Left column */

.cri-page .cri-left {

    display: flex;
    flex-direction: column;

}

.cri-page .cri-title {

    font-size: 2rem;
    font-weight: var(--pos-weight-bold);
    color: var(--cri-heading);
    margin: 0 0 var(--pos-space-7);
    line-height: 1.2;
    letter-spacing: -0.5px;

}

.cri-page .cri-lead {

    font-size: 0.95rem;
    color: var(--cri-muted);
    line-height: 1.6;
    margin: 0 0 var(--pos-space-4);
    max-width: 380px;

}

.cri-page .cri-illustration {

    margin-top: var(--pos-space-12);
    max-width: 360px;

}

.cri-page .cri-illustration svg {

    width: 100%;
    height: auto;

}

/* Right column - card */

.cri-page .cri-right {

    display: flex;
    justify-content: center;

}

.cri-page .cri-card {

    width: 100%;
    max-width: 460px;
    background: var(--cri-white);
    border: 1px solid var(--cri-border);
    border-radius: 14px;
    box-shadow: var(--cri-card-shadow);
    padding: 34px 36px 30px;
    box-sizing: border-box;
    animation: criCardIn 0.35s ease;

}

@keyframes criCardIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.cri-page .cri-card-title {

    font-size: 1.35rem;
    font-weight: var(--pos-weight-bold);
    color: var(--cri-heading);
    margin: 0 0 var(--pos-space-5);
    letter-spacing: -0.3px;

}

.cri-page .cri-card-lead {

    font-size: 0.875rem;
    color: var(--cri-muted);
    line-height: 1.55;
    margin: 0 0 var(--pos-space-5);

}

/* Checklist */

.cri-page .cri-checklist {

    list-style: none;
    margin: var(--pos-space-9) 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-2);

}

.cri-page .cri-checklist li {

    display: flex;
    align-items: flex-start;
    gap: var(--pos-space-7);
    padding: var(--pos-space-6) var(--pos-space-2);
    border-bottom: 1px solid var(--cri-divider);
    font-size: 0.85rem;
    color: var(--cri-checklist-text);
    line-height: 1.5;

}

.cri-page .cri-checklist li:last-child {

    border-bottom: none;

}

.cri-page .cri-check-icon {

    flex-shrink: 0;
    width: 20px;
    display: flex;
    justify-content: center;
    color: var(--cri-primary);
    font-size: 0.9rem;
    margin-top: 1px;

}

/* Action row */

.cri-page .cri-actions {

    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-6);
    margin-top: var(--pos-space-2);

}

/* Buttons */

.cri-page .btn {

    flex: 1;
    padding: var(--pos-space-6) var(--pos-space-10);
    border: none;
    border-radius: var(--pos-radius-lg);
    font-size: 0.95rem;
    font-weight: var(--pos-weight-semibold);
    cursor: pointer;
    transition: var(--pos-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-4);
    min-height: 48px;

}

.cri-page .btn:disabled {

    opacity: 0.55;
    cursor: not-allowed;

}

.cri-page .btn-create {

    background: var(--cri-primary);
    color: var(--cri-white);
    border: 1px solid var(--cri-primary);
    box-shadow: var(--cri-btn-shadow);

}

.cri-page .btn-create:hover:not(:disabled) {

    background: var(--cri-primary-hover);
    box-shadow: var(--cri-btn-shadow-hover);

}

.cri-page .btn-create:active:not(:disabled) {

    background: var(--cri-primary-active);
    box-shadow: var(--cri-btn-shadow-active);

}

.cri-page .btn-create:focus-visible {

    outline: 2px solid var(--cri-primary);
    outline-offset: 2px;

}

.cri-page .btn-cancel {

    background: var(--cri-white);
    color: var(--cri-cancel-text);
    border: 1px solid var(--cri-input-border);

}

.cri-page .btn-cancel:hover:not(:disabled) {

    background: var(--cri-cancel-hover-bg);
    border-color: var(--cri-placeholder);

}

.cri-page .btn-cancel:active:not(:disabled) {

    background: var(--cri-cancel-active-bg);

}

.cri-page .btn-cancel:focus-visible {

    outline: 2px solid var(--cri-primary);
    outline-offset: 2px;

}

/* Footer */

.cri-page .cri-footer {

    flex-shrink: 0;
    width: 100%;
    text-align: center;
    padding: var(--pos-space-8) var(--pos-space-8) calc(var(--pos-space-8) + env(safe-area-inset-bottom, 0px));
    font-size: 0.75rem;
    color: var(--cri-placeholder);
    background: var(--cri-footer-bg);
    border-top: 1px solid var(--cri-footer-border);

}

/* Responsive */

@media (max-width: 900px) {

    .cri-page .cri-body {
        grid-template-columns: 1fr;
        gap: var(--pos-space-11);
        padding: var(--pos-space-11) var(--pos-space-9);
    }
    .cri-page .cri-left {
        align-items: center;
        text-align: center;
    }
    .cri-page .cri-lead {
        max-width: none;
    }
    .cri-page .cri-illustration {
        display: none;
    }
    .cri-page .cri-right {
        justify-content: center;
    }

}

/* ---- ConnectRegisterSuccess (dropped as dead: .crs-help) --------------- */
/* Connect Register - success confirmation page */

.crs-page {

    /* Page-scoped tokens (exact values preserved) */
    --crs-page-bg: #f0f2f5;
    --crs-topbar-bg: #1B2937;
    --crs-help: #cbd3dc;
    --crs-white: #ffffff;
    --crs-heading: #1f2937;
    --crs-muted: #6b7280;
    --crs-border: #e5e7eb;
    --crs-detail-bg: #fbfcfd;
    --crs-primary: #47856F;
    --crs-primary-hover: #3d6757;
    --crs-primary-active: #335544;
    --crs-placeholder: #9ca3af;
    --crs-footer-bg: #eceff3;
    --crs-footer-border: #e2e6ea;
    --crs-check-gradient: linear-gradient(135deg, #5F9B85 0%, #47856F 100%);
    --crs-card-shadow: 0 10px 35px rgba(27, 41, 55, 0.08);
    --crs-check-shadow: 0 8px 20px rgba(71, 133, 111, 0.3);
    --crs-btn-shadow: 0 4px 14px rgba(71, 133, 111, 0.25);
    --crs-btn-shadow-hover: 0 6px 18px rgba(71, 133, 111, 0.32);
    /* min-height, not a fixed height + overflow: hidden as before: on a
       short or portrait screen the page now grows and the layout's .content
       scrolls it, instead of clipping the card's button off the bottom. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: var(--crs-page-bg);
    box-sizing: border-box;
    overflow-x: hidden;

}

/* Top bar */

.crs-page .crs-topbar {

    background: var(--crs-topbar-bg);
    width: 100%;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

}

.crs-page .crs-logo {

    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;

}

/* Body: two columns */

.crs-page .crs-body {

    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--pos-space-12) var(--pos-space-12) var(--pos-space-11);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;

}

/* Left decorative panel */

.crs-page .cri-left {

    display: flex;
    flex-direction: column;

}

.crs-page .cri-title {

    font-size: 2rem;
    font-weight: var(--pos-weight-bold);
    color: var(--crs-heading);
    margin: 0 0 var(--pos-space-7);
    line-height: 1.2;
    letter-spacing: -0.5px;

}

.crs-page .cri-lead {

    font-size: 0.95rem;
    color: var(--crs-muted);
    line-height: 1.6;
    margin: 0 0 var(--pos-space-4);
    max-width: 380px;

}

.crs-page .cri-illustration {

    margin-top: var(--pos-space-12);
    max-width: 360px;

}

.crs-page .cri-illustration svg {

    width: 100%;
    height: auto;

}

/* Right column - card holder */

.crs-page .crs-right {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pos-space-10);
    box-sizing: border-box;
    overflow-y: auto;

}

.crs-page .crs-card {

    width: 100%;
    max-width: 420px;
    background: var(--crs-white);
    border: 1px solid var(--crs-border);
    border-radius: 14px;
    box-shadow: var(--crs-card-shadow);
    padding: var(--pos-space-12) 36px 34px;
    box-sizing: border-box;
    text-align: center;
    animation: crsCardIn 0.35s ease;

}

@keyframes crsCardIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* Check badge */

.crs-page .crs-check {

    width: 64px;
    height: 64px;
    margin: 0 auto var(--pos-space-9);
    border-radius: 50%;
    background: var(--crs-check-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--crs-check-shadow);
    animation: crsPop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);

}

.crs-page .crs-check i {

    font-size: 1.7rem;
    color: var(--crs-white);

}

@keyframes crsPop {

    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }

}

.crs-page .crs-title {

    font-size: 1.4rem;
    font-weight: var(--pos-weight-bold);
    color: var(--crs-heading);
    margin: 0 0 var(--pos-space-5);
    letter-spacing: -0.3px;

}

.crs-page .crs-subtitle {

    font-size: 0.9rem;
    color: var(--crs-muted);
    line-height: 1.55;
    margin: 0 0 26px;

}

/* Detail rows */

.crs-page .crs-details {

    display: flex;
    flex-direction: column;
    gap: var(--pos-space-5);
    margin-bottom: 26px;
    text-align: left;

}

.crs-page .crs-detail-row {

    display: flex;
    align-items: center;
    gap: var(--pos-space-7);
    padding: var(--pos-space-7) var(--pos-space-8);
    border: 1px solid var(--crs-border);
    border-radius: 10px;
    background: var(--crs-detail-bg);

}

.crs-page .crs-detail-icon {

    flex-shrink: 0;
    width: 20px;
    display: flex;
    justify-content: center;
    color: var(--crs-primary);
    font-size: 0.95rem;

}

.crs-page .crs-detail-text {

    display: flex;
    flex-direction: column;
    gap: var(--pos-space-1);

}

.crs-page .crs-detail-label {

    font-size: 0.75rem;
    color: var(--crs-placeholder);
    font-weight: var(--pos-weight-medium);

}

.crs-page .crs-detail-value {

    font-size: 0.95rem;
    color: var(--crs-heading);
    font-weight: var(--pos-weight-semibold);

}

/* Primary button */

.crs-page .crs-btn-primary {

    width: 100%;
    padding: var(--pos-space-7) var(--pos-space-10);
    border: none;
    border-radius: var(--pos-radius-lg);
    background: var(--crs-primary);
    color: var(--crs-white);
    font-size: 0.95rem;
    font-weight: var(--pos-weight-semibold);
    cursor: pointer;
    min-height: 50px;
    box-shadow: var(--crs-btn-shadow);
    transition: var(--pos-transition);

}

.crs-page .crs-btn-primary:hover {

    background: var(--crs-primary-hover);
    box-shadow: var(--crs-btn-shadow-hover);

}

.crs-page .crs-btn-primary:active {

    background: var(--crs-primary-active);

}

.crs-page .crs-btn-primary:focus-visible {

    outline: 2px solid var(--crs-primary);
    outline-offset: 2px;

}

/* Footer */

.crs-page .crs-footer {

    flex-shrink: 0;
    width: 100%;
    text-align: center;
    padding: var(--pos-space-8) var(--pos-space-8) calc(var(--pos-space-8) + env(safe-area-inset-bottom, 0px));
    font-size: 0.75rem;
    color: var(--crs-placeholder);
    background: var(--crs-footer-bg);
    border-top: 1px solid var(--crs-footer-border);

}

/* Responsive */

@media (max-width: 900px) {

    .crs-page .crs-body {
        grid-template-columns: 1fr;
        gap: var(--pos-space-11);
        padding: var(--pos-space-11) var(--pos-space-9);
    }
    .crs-page .cri-left {
        align-items: center;
        text-align: center;
    }
    .crs-page .cri-lead {
        max-width: none;
    }
    .crs-page .cri-illustration {
        display: none;
    }
    .crs-page .crs-right {
        justify-content: center;
    }

}

/* ---- Login -------------------------------------------------------------
   Dropped as dead: .login-page-container, .login-panel-right,
   .loading-indicator, .loading-spinner
   ----------------------------------------------------------------------- */
/* Login Page Styles - Professional Design with Original Slideshow */

.login-screen-section {

    /* Page-scoped design tokens (exact values preserved) */
    --login-gradient-page: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --login-gradient-slideshow: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --login-gradient-logo-underline: linear-gradient(90deg, transparent, #5F9B85, transparent);
    --login-gradient-panel: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100% );
    --login-gradient-btn: linear-gradient(135deg, #5F9B85 0%, #4a7c6b 100%);
    --login-gradient-btn-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    --login-gradient-btn-hover: linear-gradient(135deg, #4a7c6b 0%, #3d6757 100%);
    --login-gradient-error: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    --login-gradient-loading: linear-gradient(135deg, #e6f7f3 0%, #d4efe9 100%);
    --login-gradient-btn-disabled: linear-gradient(135deg, #6eaa94 0%, #5a8978 100%);
    --login-accent: #5F9B85;
    --login-heading: #2d3748;
    --login-label: #4a5568;
    --login-subtitle: #555;
    --login-required: #e53e3e;
    --login-placeholder: #a0aec0;
    --login-input-border: #e2e8f0;
    --login-input-hover-border: #cbd5e0;
    --login-input-bg: #ffffff;
    --login-input-disabled-bg: #f7fafc;
    --login-btn-text: white;
    --login-error-text: #c53030;
    --login-error-border: #fc8181;
    --login-loading-border: #9fd5c3;
    --login-loading-text: #2d5f4f;
    --login-slide-overlay: rgba(0, 0, 0, 0.3);
    --login-indicator-bg: rgba(255, 255, 255, 0.4);
    --login-indicator-border: rgba(255, 255, 255, 0.6);
    --login-indicator-active: rgba(255, 255, 255, 0.9);
    --login-indicator-hover: rgba(255, 255, 255, 0.7);
    --login-panel-shadow: rgba(0, 0, 0, 0.15);
    --login-panel-shadow-mobile: rgba(0, 0, 0, 0.25);
    --login-panel-bg-mobile: rgba(255, 255, 255, 0.98);
    --login-logo-shadow: rgba(0, 0, 0, 0.1);
    --login-toggle-hover-bg: rgba(0, 0, 0, 0.03);
    --login-btn-shadow: rgba(95, 155, 133, 0.35);
    --login-btn-shadow-hover: rgba(95, 155, 133, 0.45);
    --login-btn-shadow-active: rgba(95, 155, 133, 0.3);
    --login-btn-shadow-disabled: rgba(95, 155, 133, 0.2);
    --login-error-shadow: rgba(197, 48, 48, 0.1);
    --login-spinner-track: rgba(255, 255, 255, 0.3);
    --login-scrollbar-track: rgba(0, 0, 0, 0.05);
    --login-scrollbar-thumb-hover: rgba(95, 155, 133, 0.5);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: space-between;

}

.login-screen-section .left-login-section {

    width: 70%;
    position: relative;

}

/* LoginLayout clips (overflow: hidden), so the form panel is its own
   scroller: on a short landscape screen the Log In button scrolls into
   reach instead of being cut off. The side paddings never fall under the
   safe-area insets (0 on desktop). */
.login-screen-section .right-login-section {

    width: 30%;
    padding: 100px max(var(--pos-space-12), env(safe-area-inset-right, 0px)) 100px max(var(--pos-space-12), env(safe-area-inset-left, 0px));
    overflow-y: auto;

}

.login-screen-section .login-form-container {

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-6);
    flex-direction: column;

}

.login-screen-section .login-form-container form {

    width: 100%;

}

/* Background Slideshow - Full Page - Original Styling */

.login-screen-section .background-slideshow {

    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: var(--login-gradient-slideshow);

}

.login-screen-section .background-slideshow::after {

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--login-slide-overlay);
    z-index: var(--pos-z-raised);

}

.login-screen-section .background-slideshow .slide {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;

}

.login-screen-section .background-slideshow .slide.active {

    opacity: 1;
    transform: scale(1);

}

/* Slideshow Indicators - Original Design */

.login-screen-section .slideshow-indicators {

    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--pos-space-6);
    z-index: 3;

}

.login-screen-section .indicator {

    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--login-indicator-bg);
    cursor: pointer;
    transition: var(--pos-transition-slow);
    border: 2px solid var(--login-indicator-border);
    min-height: 10px;
    min-width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.login-screen-section .indicator::after {

    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--login-indicator-bg);

}

.login-screen-section .indicator.active::after {

    background: var(--login-indicator-active);

}

.login-screen-section .indicator:hover::after {

    background: var(--login-indicator-hover);
    transform: scale(1.1);

}

/* Login Panel on Right Side - Enhanced Design */

@keyframes slideInRight {

    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }

}

.login-screen-section .logo-section {

    text-align: center;
    margin-bottom: 30px;
    padding-bottom: var(--pos-space-9);
    position: relative;

}

.login-screen-section .logo-section::after {

    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--login-gradient-logo-underline);
    border-radius: 2px;

}

.login-screen-section .logo-section .logo {

    width: 160px;
    max-width: 80%;
    height: auto;
    margin-bottom: var(--pos-space-9);
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--login-logo-shadow));

}

.login-screen-section .logo-section h2 {

    font-size: 1.15rem;
    font-weight: var(--pos-weight-normal);
    color: var(--login-subtitle);
    margin: 0;
    margin-top: var(--pos-space-8);
    letter-spacing: 0.8px;
    opacity: 0.9;

}

/* Sits under the Log In button, at the trailing edge of the form.
   Ported from the deleted Pages/Login.razor.css; anchored under the page root
   because .auth-form is a generic name (README "Anchoring"). */
.login-screen-section .auth-form .powered-by {
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    margin-top: var(--pos-space-2);
}

.login-screen-section .auth-form h4 {

    color: var(--login-heading);
    margin-bottom: 35px;
    font-size: 1.2rem;
    font-weight: var(--pos-weight-bold);
    text-align: center;
    margin-top: 0;
    letter-spacing: -0.5px;
    line-height: 1.3;

}

/* Form Groups - Enhanced with Floating Label Effect */

.login-screen-section .form-group {

    margin-bottom: 28px;
    position: relative;

}

.login-screen-section .form-group label {

    display: block;
    margin-bottom: var(--pos-space-5);
    color: var(--login-label);
    font-weight: var(--pos-weight-semibold);
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    transition: var(--pos-transition-slow);

}

.login-screen-section .required {

    color: var(--login-required);
    margin-left: var(--pos-space-2);

}

.login-screen-section .password-input-wrapper {

    position: relative;

}

.login-screen-section .password-toggle {

    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--login-placeholder);
    cursor: pointer;
    padding: var(--pos-space-4);
    font-size: var(--pos-font-2xl);
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--pos-z-raised);
    transition: var(--pos-transition-slow);
    border-radius: var(--pos-radius-md);

}

.login-screen-section .password-toggle:hover {

    color: var(--login-label);
    background: var(--login-toggle-hover-bg);

}

.login-screen-section .form-control {

    width: 100%;
    padding: var(--pos-space-8) 50px var(--pos-space-8) 18px;
    border: 2px solid var(--login-input-border);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    background: var(--login-input-bg);
    color: var(--login-heading);
    font-weight: var(--pos-weight-normal);

}

.login-screen-section .form-control::placeholder {

    color: var(--login-placeholder);
    font-weight: var(--pos-weight-normal);

}

.login-screen-section .form-control:hover {

    border-color: var(--login-input-hover-border);

}

.login-screen-section .form-control:focus {

    outline: none;
    border-color: var(--login-accent);
    box-shadow: none;
    background: var(--login-input-bg);
    transform: translateY(-1px);

}

.login-screen-section .form-control:disabled {

    background-color: var(--login-input-disabled-bg);
    cursor: not-allowed;
    opacity: 0.6;

}

/* Button Styles - Modern and Professional */

.login-screen-section .btn {

    padding: var(--pos-space-8) 34px;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: var(--pos-weight-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pos-space-5);
    min-width: 150px;
    min-height: 56px;
    touch-action: manipulation;
    user-select: none;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;

}

.login-screen-section .btn-primary {

    background: var(--login-gradient-btn);
    color: var(--login-btn-text);
    box-shadow: 0 6px 20px var(--login-btn-shadow);
    width: 100%;

}

.login-screen-section .btn-primary::before {

    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--login-gradient-btn-shimmer);
    transition: left 0.5s ease;

}

.login-screen-section .btn-primary:hover:not(:disabled) {

    background: var(--login-gradient-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--login-btn-shadow-hover);

}

.login-screen-section .btn-primary:hover:not(:disabled)::before {

    left: 100%;

}

.login-screen-section .btn-primary:active:not(:disabled) {

    transform: translateY(0);
    box-shadow: 0 4px 15px var(--login-btn-shadow-active);

}

.login-screen-section .btn-primary:disabled {

    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 15px var(--login-btn-shadow-disabled);

}

.login-screen-section .mb-2 {

    margin-bottom: 0.5rem;

}

.login-screen-section .text-center {

    text-align: center;

}

/* Loading Spinner */

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }

}

/* Error Messages - Enhanced Design */

.login-screen-section .error-message {

    background: var(--login-gradient-error);
    color: var(--login-error-text);
    padding: var(--pos-space-8) var(--pos-space-9);
    border-radius: 10px;
    border: 1px solid var(--login-error-border);
    margin-bottom: var(--pos-space-10);
    font-size: 0.95rem;
    font-weight: var(--pos-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--pos-space-5);
    box-shadow: 0 2px 8px var(--login-error-shadow);
    animation: shake 0.4s ease-in-out;

}

@keyframes shake {

    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }

}

.login-screen-section .error-message::before {

    content: '?';
    font-size: 1.2rem;

}

/* Validation Messages */

.login-screen-section .validation-message {

    color: var(--login-required);
    font-size: 0.875rem;
    margin-top: var(--pos-space-4);
    display: block;
    font-weight: var(--pos-weight-medium);

}

/* Responsive Design - Large Desktop (1920px and above) */

@media (min-width: 1920px) {

    .login-screen-section .logo-section .logo {
        width: 180px;
    }
    .login-screen-section .logo-section h2 {
        font-size: 1.25rem;
    }
    .login-screen-section .form-control {
        font-size: 1.1rem;
        padding: 18px 55px 18px var(--pos-space-9);
    }
    .login-screen-section .btn {
        font-size: 1.15rem;
        min-height: 60px;
    }

}

/* Desktop (1200px to 1919px) */

/* Laptop (992px to 1199px) */

@media (min-width: 992px) and (max-width: 1199px) {

    .login-screen-section .logo-section .logo {
        width: 150px;
    }
    .login-screen-section .logo-section h2 {
        font-size: 1.05rem;
    }

}

/* Tablet Landscape (768px to 991px) */

@media (min-width: 768px) and (max-width: 991px) {

    .login-screen-section .logo-section .logo {
        width: 145px;
    }
    .login-screen-section .logo-section h2 {
        font-size: 1rem;
    }
    .login-screen-section .auth-form h4 {
        margin-bottom: 30px;
    }
    .login-screen-section .form-control {
        padding: var(--pos-space-8) var(--pos-space-13) var(--pos-space-8) var(--pos-space-8);
        font-size: 1rem;
    }
    .login-screen-section .btn {
        padding: var(--pos-space-8) 30px;
        font-size: 1rem;
        min-height: 52px;
    }

}

/* Tablet Portrait (600px to 767px) */

@media (min-width: 600px) and (max-width: 767px) {

    .login-screen-section .logo-section .logo {
        width: 140px;
    }
    .login-screen-section .logo-section h2 {
        font-size: 1rem;
    }
    .login-screen-section .auth-form h4 {
        margin-bottom: 28px;
    }
    .login-screen-section .slideshow-indicators {
        bottom: 30px;
    }

}

/* Mobile Landscape (576px to 599px) */

@media (min-width: 576px) and (max-width: 599px) {

    @keyframes slideInUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    .login-screen-section .logo-section .logo {
        width: 135px;
        margin-bottom: var(--pos-space-6);
    }
    .login-screen-section .logo-section h2 {
        font-size: 0.95rem;
    }
    .login-screen-section .form-group {
        margin-bottom: var(--pos-space-9);
    }
    .login-screen-section .form-control {
        padding: var(--pos-space-7) 46px var(--pos-space-7) var(--pos-space-8);
        font-size: 1rem;
        min-height: 50px;
    }
    .login-screen-section .btn {
        padding: var(--pos-space-7) 28px;
        font-size: 1rem;
        min-height: 52px;
    }
    .login-screen-section .slideshow-indicators {
        bottom: calc(78vh + 20px);
    }
    .login-screen-section .indicator {
        min-height: 40px;
        min-width: 40px;
    }

}

/* Mobile Portrait (up to 575px) */

@media (max-width: 575px) {

    .login-screen-section .logo-section .logo {
        width: 130px;
        margin-bottom: var(--pos-space-6);
    }
    .login-screen-section .logo-section h2 {
        font-size: 0.9rem;
        margin-top: var(--pos-space-5);
    }
    .login-screen-section .form-group {
        margin-bottom: var(--pos-space-9);
    }
    .login-screen-section .form-group label {
        font-size: 0.95rem;
        margin-bottom: var(--pos-space-4);
    }
    .login-screen-section .form-control {
        padding: var(--pos-space-7) 44px var(--pos-space-7) var(--pos-space-8);
        font-size: 0.95rem;
        min-height: 50px;
        border-width: 2px;
    }
    .login-screen-section .password-toggle {
        min-height: 42px;
        min-width: 42px;
        font-size: 17px;
    }
    .login-screen-section .btn {
        padding: var(--pos-space-7) 28px;
        font-size: 0.95rem;
        min-height: 50px;
    }
    .login-screen-section .error-message {
        padding: var(--pos-space-7) 18px;
        font-size: 0.9rem;
    }
    .login-screen-section .slideshow-indicators {
        bottom: calc(82vh + 18px);
        gap: var(--pos-space-6);
    }
    .login-screen-section .indicator {
        min-height: 40px;
        min-width: 40px;
    }
    .login-screen-section .indicator::after {
        width: 9px;
        height: 9px;
    }

}

/* Extra Small Mobile (up to 375px) */

@media (max-width: 375px) {

    .login-screen-section .logo-section .logo {
        width: 120px;
        margin-bottom: var(--pos-space-5);
    }
    .login-screen-section .logo-section h2 {
        font-size: 0.85rem;
    }
    .login-screen-section .form-group {
        margin-bottom: 18px;
    }
    .login-screen-section .form-group label {
        font-size: 0.9rem;
    }
    .login-screen-section .form-control {
        padding: var(--pos-space-6) 42px var(--pos-space-6) var(--pos-space-7);
        font-size: 0.9rem;
        min-height: 48px;
    }
    .login-screen-section .btn {
        padding: var(--pos-space-6) 26px;
        font-size: 0.9rem;
        min-height: 48px;
    }
    .login-screen-section .slideshow-indicators {
        bottom: calc(84vh + 16px);
        gap: var(--pos-space-5);
    }
    .login-screen-section .indicator {
        min-height: 38px;
        min-width: 38px;
    }
    .login-screen-section .indicator::after {
        width: 8px;
        height: 8px;
    }

}

/* Very Small Mobile (up to 320px) */

@media (max-width: 320px) {

    .login-screen-section .logo-section .logo {
        width: 110px;
        margin-bottom: var(--pos-space-4);
    }
    .login-screen-section .logo-section h2 {
        font-size: 0.8rem;
    }
    .login-screen-section .form-group {
        margin-bottom: var(--pos-space-8);
    }
    .login-screen-section .form-group label {
        font-size: 0.85rem;
        margin-bottom: var(--pos-space-3);
    }
    .login-screen-section .form-control {
        padding: var(--pos-space-6) var(--pos-space-12) var(--pos-space-6) var(--pos-space-6);
        font-size: 0.85rem;
        min-height: 46px;
    }
    .login-screen-section .btn {
        padding: var(--pos-space-6) var(--pos-space-10);
        font-size: 0.85rem;
        min-height: 46px;
    }
    .login-screen-section .error-message {
        padding: var(--pos-space-6) var(--pos-space-8);
        font-size: 0.85rem;
    }

}

/* Loading Indicator Styles */

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* Button Loading State Enhancements */

.login-screen-section .btn-primary .spinner-border {

    width: 1.1rem;
    height: 1.1rem;
    border-width: 2px;
    animation: spin 0.7s linear infinite;

}

.login-screen-section .btn-primary:disabled {

    background: var(--login-gradient-btn-disabled);
    cursor: progress;

}

.login-screen-section .slideshow-indicators {

    bottom: calc(86vh + 14px);
    gap: var(--pos-space-4);

}

.login-screen-section .indicator {

    min-height: 36px;
    min-width: 36px;

}

.login-screen-section .indicator::after {

    width: 7px;
    height: 7px;

}

/* Landscape orientation adjustments */

@media (max-height: 600px) and (orientation: landscape) {

    .login-screen-section .logo-section {
        margin-bottom: 18px;
        padding-bottom: var(--pos-space-6);
    }
    .login-screen-section .logo-section .logo {
        width: 100px;
        margin-bottom: var(--pos-space-4);
    }
    .login-screen-section .logo-section h2 {
        font-size: 0.85rem;
    }
    .login-screen-section .form-group {
        margin-bottom: var(--pos-space-8);
    }
    .login-screen-section .form-control {
        padding: var(--pos-space-6) 42px var(--pos-space-6) var(--pos-space-7);
        min-height: 44px;
    }
    .login-screen-section .btn {
        padding: var(--pos-space-6) var(--pos-space-10);
        min-height: 44px;
    }
    .login-screen-section .slideshow-indicators {
        bottom: 18px;
        gap: var(--pos-space-5);
    }

}

/* High DPI / Retina displays */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .login-screen-section .form-control,
    .login-screen-section .btn {
        border-width: 0.5px;
    }

}

/* Smooth scrollbar for login panel */

/* Focus visible for accessibility */

.login-screen-section .form-control:focus-visible,
.login-screen-section .btn:focus-visible,
.login-screen-section .password-toggle:focus-visible,
.login-screen-section .indicator:focus-visible {

    outline: none;
    outline-offset: 2px;

}

/* Reduce motion for users who prefer it */

@media(max-width:1200px) {

    .login-screen-section .left-login-section {
        width: 50%;
        position: relative;
    }
    .login-screen-section .right-login-section {
        width: 50%;
    }

}

/* Tablet portrait and below (up to 1023px): form only, no slideshow.
   Was max-width: 1024px, which put iPad landscape (exactly 1024px) on the
   portrait layout; 1024px now keeps the 50/50 split like every other
   tablet-landscape width. */
@media (max-width: 1023.98px) {

    .login-screen-section {
        flex-direction: column;
    }
    .login-screen-section .left-login-section,
    .login-screen-section .right-login-section {
        width: 100%;
    }
    /* "safe center": centred while it fits, top-aligned (still scrollable)
       when the screen is too short for it. */
    .login-screen-section .right-login-section {
        display: flex;
        align-content: center;
        align-items: safe center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }
    /* A readable form width rather than the full width of a portrait tablet. */
    .login-screen-section .login-form-container {
        max-width: 440px;
    }
    .login-screen-section .left-login-section {
        display: none;
    }

}

@media (max-width: 767.98px) {

    .login-screen-section .right-login-section {
        padding: 80px var(--pos-space-10);
    }

}
.no-pointer {
    cursor: not-allowed !important;
}