/* /Components/UpgradeModal.razor.rz.scp.css */
/* UpgradeModal -- overlay + centered card */

.upgrade-modal-backdrop[b-b3zrogiqg2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fade-in-b-b3zrogiqg2 0.15s ease;
}

.upgrade-modal[b-b3zrogiqg2] {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 2rem 1.5rem;
    max-width: 420px;
    width: calc(100vw - 2rem);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    animation: slide-up-b-b3zrogiqg2 0.18s ease;
}

.upgrade-modal-icon[b-b3zrogiqg2] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}

.upgrade-modal-title[b-b3zrogiqg2] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.upgrade-modal-body[b-b3zrogiqg2] {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.upgrade-modal-actions[b-b3zrogiqg2] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

@keyframes fade-in-b-b3zrogiqg2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up-b-b3zrogiqg2 {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout.razor.css

   Full-screen shell: dark left sidebar + right content area.
   The sidebar uses grouped nav cards with colored left-border
   accents, matching the tracker portal visual language.
   ============================================================ */

/* ----------------------------------------------------------
   Outer shell: sidebar + content side by side, full viewport
   ---------------------------------------------------------- */
.db-shell[b-sfpmvrgbbx] {
    display: flex;
    min-height: 100vh;
    background: #f5f7fa;
}

/* ----------------------------------------------------------
   Sidebar
   ---------------------------------------------------------- */
.db-sidebar[b-sfpmvrgbbx] {
    width: 220px;
    flex-shrink: 0;
    background: #1e2130;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0 1rem;
    overflow-y: auto;
    /* Stays fixed so it does not scroll away as the content scrolls */
    position: sticky;
    top: 0;
    height: 100vh;
}

/* Brand mark at the top of the sidebar */
.db-sidebar-brand[b-sfpmvrgbbx] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0.4rem;
}

/* Reset Bootstrap link defaults inside the sidebar so NavLink <a>
   elements don't inherit the blue colour or underline. */
.db-sidebar a[b-sfpmvrgbbx],
.db-sidebar a:hover[b-sfpmvrgbbx],
.db-sidebar a:focus[b-sfpmvrgbbx],
.db-sidebar a:visited[b-sfpmvrgbbx] {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.db-sidebar-logo[b-sfpmvrgbbx] {
    height: 26px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.db-sidebar-name[b-sfpmvrgbbx] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   Nav groups (colored left-border category cards)
   ---------------------------------------------------------- */
.db-nav-group[b-sfpmvrgbbx] {
    display: flex;
    flex-direction: column;
    margin: 0 0.5rem 0.2rem;
    padding: 0.2rem 0 0.25rem 0.55rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-left: 3px solid transparent;
}

.db-nav-group-label[b-sfpmvrgbbx] {
    padding: 0.35rem 0.4rem 0.1rem 0;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.28);
    user-select: none;
}

/* Color accents */
.group-teal[b-sfpmvrgbbx]   { border-left-color: #2dd4bf; }
.group-blue[b-sfpmvrgbbx]   { border-left-color: #60a5fa; }
.group-violet[b-sfpmvrgbbx] { border-left-color: #a78bfa; }
.group-amber[b-sfpmvrgbbx]  { border-left-color: #fbbf24; }

.group-teal   .db-nav-group-label[b-sfpmvrgbbx] { color: rgba(45, 212, 191, 0.65); }
.group-blue   .db-nav-group-label[b-sfpmvrgbbx] { color: rgba(96, 165, 250, 0.65); }
.group-violet .db-nav-group-label[b-sfpmvrgbbx] { color: rgba(167, 139, 250, 0.65); }
.group-amber  .db-nav-group-label[b-sfpmvrgbbx] { color: rgba(251, 191, 36, 0.65); }

/* ----------------------------------------------------------
   Individual nav items (NavLink + buttons)
   NavLink renders its own <a> tag internally, so ::deep is
   required for scoped styles to reach the rendered anchor.
   ---------------------------------------------------------- */
[b-sfpmvrgbbx] .db-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.4rem 0.45rem 0;
    margin: 0 0.2rem;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    width: 100%;
}

[b-sfpmvrgbbx] .db-nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

/* Blazor NavLink injects .active when route matches */
[b-sfpmvrgbbx] .db-nav-item.active {
    font-weight: 600;
}

/* Per-group active accent */
.group-teal[b-sfpmvrgbbx]    .db-nav-item.active { background: rgba(45,  212, 191, 0.14); color: #5eead4; }
.group-blue[b-sfpmvrgbbx]    .db-nav-item.active { background: rgba(96,  165, 250, 0.14); color: #93c5fd; }
.group-violet[b-sfpmvrgbbx]  .db-nav-item.active { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
.group-amber[b-sfpmvrgbbx]   .db-nav-item.active { background: rgba(251, 191,  36, 0.14); color: #fde68a; }

/* Per-group icon color on hover / active */
.group-teal[b-sfpmvrgbbx]    .db-nav-item:hover .db-nav-icon,
.group-teal[b-sfpmvrgbbx]    .db-nav-item.active .db-nav-icon   { color: #5eead4; }
.group-blue[b-sfpmvrgbbx]    .db-nav-item:hover .db-nav-icon,
.group-blue[b-sfpmvrgbbx]    .db-nav-item.active .db-nav-icon   { color: #93c5fd; }
.group-violet[b-sfpmvrgbbx]  .db-nav-item:hover .db-nav-icon,
.group-violet[b-sfpmvrgbbx]  .db-nav-item.active .db-nav-icon   { color: #c4b5fd; }
.group-amber[b-sfpmvrgbbx]   .db-nav-item:hover .db-nav-icon,
.group-amber[b-sfpmvrgbbx]   .db-nav-item.active .db-nav-icon   { color: #fde68a; }

/* Nav icon */
.db-nav-icon[b-sfpmvrgbbx] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.12s ease;
}

/* ----------------------------------------------------------
   Sub-nav: expanded context items inside a parent group
   These appear when the user is on a config sub-page (kiosk,
   remote check-in, monitor) and replace the old page-level
   inner side-navs. Visually identical to the tracker style:
   colored left-border sub-groups with small uppercase labels
   and compact icon+text items.
   ---------------------------------------------------------- */

/* Expanded parent label (non-link header showing which item is open) */
.db-nav-subparent[b-sfpmvrgbbx] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.4rem 0.4rem 0;
    margin: 0 0.2rem 0.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    /* left inset rule to show it is "expanded" */
    border-left: 2px solid rgba(255, 255, 255, 0.35);
    padding-left: 0.35rem;
}

.db-nav-subparent-icon[b-sfpmvrgbbx] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
}

/* Sub-groups (nested category cards) */
.db-nav-subgroup[b-sfpmvrgbbx] {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.2rem 0.35rem;
    padding: 0.15rem 0 0.15rem 0.5rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-left: 2px solid transparent;
}

/* Reuse group color classes for sub-group borders */
.db-nav-subgroup.group-teal[b-sfpmvrgbbx]   { border-left-color: #2dd4bf; }
.db-nav-subgroup.group-blue[b-sfpmvrgbbx]   { border-left-color: #60a5fa; }
.db-nav-subgroup.group-violet[b-sfpmvrgbbx] { border-left-color: #a78bfa; }
.db-nav-subgroup.group-amber[b-sfpmvrgbbx]  { border-left-color: #fbbf24; }

.db-nav-subgroup-label[b-sfpmvrgbbx] {
    padding: 0.22rem 0.3rem 0.05rem 0;
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.22);
    user-select: none;
}

.db-nav-subgroup.group-teal   .db-nav-subgroup-label[b-sfpmvrgbbx] { color: rgba(45,  212, 191, 0.55); }
.db-nav-subgroup.group-blue   .db-nav-subgroup-label[b-sfpmvrgbbx] { color: rgba(96,  165, 250, 0.55); }
.db-nav-subgroup.group-violet .db-nav-subgroup-label[b-sfpmvrgbbx] { color: rgba(167, 139, 250, 0.55); }
.db-nav-subgroup.group-amber  .db-nav-subgroup-label[b-sfpmvrgbbx] { color: rgba(251, 191,  36, 0.55); }

/* Sub-items (smaller than top-level items) */
[b-sfpmvrgbbx] .db-nav-subitem {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.35rem 0.32rem 0;
    margin: 0 0.15rem;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.74rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    width: 100%;
}

[b-sfpmvrgbbx] .db-nav-subitem:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

[b-sfpmvrgbbx] .db-nav-subitem.active {
    font-weight: 700;
}

/* Active accent per sub-group color */
.db-nav-subgroup.group-teal[b-sfpmvrgbbx]    .db-nav-subitem.active { background: rgba(45,  212, 191, 0.12); color: #5eead4; }
.db-nav-subgroup.group-blue[b-sfpmvrgbbx]    .db-nav-subitem.active { background: rgba(96,  165, 250, 0.12); color: #93c5fd; }
.db-nav-subgroup.group-violet[b-sfpmvrgbbx]  .db-nav-subitem.active { background: rgba(167, 139, 250, 0.12); color: #c4b5fd; }
.db-nav-subgroup.group-amber[b-sfpmvrgbbx]   .db-nav-subitem.active { background: rgba(251, 191,  36, 0.12); color: #fde68a; }

.db-nav-subicon[b-sfpmvrgbbx] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.28);
    transition: color 0.12s ease;
}

[b-sfpmvrgbbx] .db-nav-subitem:hover .db-nav-subicon                              { color: rgba(255, 255, 255, 0.65); }
.db-nav-subgroup.group-teal[b-sfpmvrgbbx]    .db-nav-subitem.active .db-nav-subicon { color: #5eead4; }
.db-nav-subgroup.group-blue[b-sfpmvrgbbx]    .db-nav-subitem.active .db-nav-subicon { color: #93c5fd; }
.db-nav-subgroup.group-violet[b-sfpmvrgbbx]  .db-nav-subitem.active .db-nav-subicon { color: #c4b5fd; }
.db-nav-subgroup.group-amber[b-sfpmvrgbbx]   .db-nav-subitem.active .db-nav-subicon { color: #fde68a; }

/* ----------------------------------------------------------
   Sign-out button at the bottom of the sidebar
   ---------------------------------------------------------- */
.db-sidebar-footer[b-sfpmvrgbbx] {
    margin-top: auto;
    padding: 0.4rem 0.5rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Sign-out uses the same db-nav-item class plus this override for red accent */
.db-signout-btn:hover[b-sfpmvrgbbx] {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
}
.db-signout-btn:hover .db-nav-icon[b-sfpmvrgbbx] {
    color: #fca5a5 !important;
}

/* ----------------------------------------------------------
   Content wrapper: grows to fill remaining space
   ---------------------------------------------------------- */
.db-content-wrap[b-sfpmvrgbbx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ----------------------------------------------------------
   Main content area
   ---------------------------------------------------------- */
.db-main[b-sfpmvrgbbx] {
    flex: 1 0 auto;
    padding: 2rem 2rem;
    background: #f5f7fa;
    color: #0b1020;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Public routes (login, signup, tv, kiosk) -- full-page, no sidebar */
.db-main-public[b-sfpmvrgbbx] {
    min-height: 100vh;
    padding: 0;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.db-footer[b-sfpmvrgbbx] {
    padding: 1rem 2rem;
    font-size: 0.8rem;
    color: #94a3b8;
    background: #1e2130;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Responsive: collapse sidebar to a top bar on small screens
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .db-shell[b-sfpmvrgbbx] {
        flex-direction: column;
    }

    .db-sidebar[b-sfpmvrgbbx] {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
        padding: 0.4rem 0.5rem;
        gap: 0.2rem;
    }

    .db-sidebar-brand[b-sfpmvrgbbx] {
        display: none;
    }

    .db-nav-group[b-sfpmvrgbbx] {
        flex-direction: row;
        flex-wrap: wrap;
        border-left-width: 0;
        border-bottom: 3px solid transparent;
        margin: 0 0.15rem;
        padding: 0.1rem 0.35rem 0.1rem 0.35rem;
    }

    .group-teal[b-sfpmvrgbbx]   { border-bottom-color: #2dd4bf; }
    .group-blue[b-sfpmvrgbbx]   { border-bottom-color: #60a5fa; }
    .group-violet[b-sfpmvrgbbx] { border-bottom-color: #a78bfa; }
    .group-amber[b-sfpmvrgbbx]  { border-bottom-color: #fbbf24; }

    .db-nav-group-label[b-sfpmvrgbbx] {
        display: none;
    }

    .db-nav-item[b-sfpmvrgbbx] {
        padding: 0.35rem 0.55rem;
        font-size: 0.72rem;
        width: auto;
    }

    .db-sidebar-footer[b-sfpmvrgbbx] {
        margin-top: 0;
        padding: 0.1rem 0.15rem;
        border-top: none;
    }

    .db-main[b-sfpmvrgbbx] {
        padding: 1.25rem 1rem;
    }

    .db-footer[b-sfpmvrgbbx] {
        padding: 0.75rem 1rem;
    }
}


/* /Layout/TvLayout.razor.rz.scp.css */
.db-tv-shell[b-n30tb7mfak] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
/* /Pages/Admin.razor.rz.scp.css */
/*
 * Two-column flex layout: tabs on the left fill available space, preview
 * panel on the right stays at a fixed width. Using flex rather than Bootstrap
 * col-md-* prevents the right panel from wrapping to a second row when the
 * host container does not resolve to a true 12-column grid context.
 */
.admin-layout[b-68nsgbok7g] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Left column: tabs + all tab panes */
.admin-tabs-col[b-68nsgbok7g] {
    flex: 1 1 0;
    min-width: 0; /* allows text/inputs to shrink without overflowing */
}

/* Right column: live preview panel -- fixed width, never shrinks */
.admin-preview-col[b-68nsgbok7g] {
    flex: 0 0 340px;
    width: 340px;
}

/* On very narrow viewports, stack the columns vertically */
@media (max-width: 767px) {
    .admin-layout[b-68nsgbok7g] {
        flex-direction: column;
    }
    .admin-preview-col[b-68nsgbok7g] {
        flex: 1 1 auto;
        width: 100%;
    }
}

/*
 * Sticky preview panel: stays in view while the user scrolls through
 * the settings tabs on the left. top offset accounts for the navbar height.
 */
.admin-preview-sticky[b-68nsgbok7g] {
    position: sticky;
    top: 4.5rem;
}

/*
 * Preview card mimics the TV display surface. Colors, font, and background
 * are applied via inline PreviewStyle so they update live as the user edits.
 */
.admin-preview-card[b-68nsgbok7g] {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Small "Preview" label shown above the card */
.admin-preview-label[b-68nsgbok7g] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.4rem;
}


/* ===== User management tab ================================================ */

.user-table[b-68nsgbok7g] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.user-table th[b-68nsgbok7g],
.user-table td[b-68nsgbok7g] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: middle;
}

.user-table th[b-68nsgbok7g] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.user-actions[b-68nsgbok7g] {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.role-badge[b-68nsgbok7g] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.role-badge--admin[b-68nsgbok7g] { background: rgba(13, 148, 136, 0.2); color: #2dd4bf; }
.role-badge--pad[b-68nsgbok7g]   { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

.user-form[b-68nsgbok7g] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
}

/* ===== Billing management tab ============================================= */

.billing-status-card[b-68nsgbok7g] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

.billing-badge[b-68nsgbok7g] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.billing-badge--active[b-68nsgbok7g]    { background: rgba(13, 148, 136, 0.2);  color: #2dd4bf; }
.billing-badge--trialing[b-68nsgbok7g]  { background: rgba(245, 158, 11, 0.2);   color: #fbbf24; }
.billing-badge--past_due[b-68nsgbok7g]  { background: rgba(239, 68, 68, 0.2);    color: #f87171; }
.billing-badge--canceled[b-68nsgbok7g],
.billing-badge--cancelled[b-68nsgbok7g] { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

.billing-detail[b-68nsgbok7g] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-bottom: 0;
}

.btn-xs[b-68nsgbok7g] {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.btn-teal[b-68nsgbok7g]         { background: #0d9488; color: #fff; border: none; }
.btn-teal:hover[b-68nsgbok7g]   { background: #0f766e; color: #fff; }
.btn-outline-teal[b-68nsgbok7g] { border: 1px solid #0d9488; color: #0d9488; background: transparent; }
.btn-outline-teal:hover[b-68nsgbok7g] { background: rgba(13, 148, 136, 0.1); }
/* /Pages/KioskAdmin.razor.rz.scp.css */
/* ============================================================
   KioskAdmin.razor.css  --  scoped styles for the kiosk admin
   configuration page.

   Layout: left dark side-nav + right light content panel.
   Side-nav groups mirror the tracker portal style (colored
   left-border cards, uppercase labels, icon+text items).
   Mirrors RemoteAdmin.razor.css so all configuration pages
   share the same visual language.
   ============================================================ */

/* ----------------------------------------------------------
   Page shell
   ---------------------------------------------------------- */
.ka-page[b-am9751b6ru] {
    display: flex;
    min-height: 100%;
    background: #f5f7fa;
}

/* ----------------------------------------------------------
   Side-nav panel
   ---------------------------------------------------------- */
.ka-sidenav[b-am9751b6ru] {
    width: 220px;
    flex-shrink: 0;
    background: #1e2130;
    padding: 0.75rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

/* Branding header inside the nav */
.ka-sidenav-header[b-am9751b6ru] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0.35rem;
}

.ka-sidenav-icon[b-am9751b6ru] {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.ka-sidenav-title[b-am9751b6ru] {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   Nav groups (category cards with colored left border)
   ---------------------------------------------------------- */
.ka-nav-group[b-am9751b6ru] {
    display: flex;
    flex-direction: column;
    margin: 0 0.5rem;
    padding: 0.2rem 0 0.2rem 0.55rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
}

.ka-nav-group-label[b-am9751b6ru] {
    padding: 0.35rem 0.4rem 0.1rem 0;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

/* Color accents */
.group-teal[b-am9751b6ru]   { border-left-color: #2dd4bf; }
.group-blue[b-am9751b6ru]   { border-left-color: #60a5fa; }
.group-violet[b-am9751b6ru] { border-left-color: #a78bfa; }
.group-amber[b-am9751b6ru]  { border-left-color: #fbbf24; }

.group-teal   .ka-nav-group-label[b-am9751b6ru] { color: rgba(45, 212, 191, 0.65); }
.group-blue   .ka-nav-group-label[b-am9751b6ru] { color: rgba(96, 165, 250, 0.65); }
.group-violet .ka-nav-group-label[b-am9751b6ru] { color: rgba(167, 139, 250, 0.65); }
.group-amber  .ka-nav-group-label[b-am9751b6ru] { color: rgba(251, 191, 36, 0.65); }

/* ----------------------------------------------------------
   Individual nav items
   ---------------------------------------------------------- */
.ka-nav-item[b-am9751b6ru] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.45rem 0.45rem 0;
    margin: 0 0.2rem;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    width: 100%;
}

.ka-nav-item:hover[b-am9751b6ru] {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.ka-nav-icon[b-am9751b6ru] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.12s ease;
}

.ka-nav-item:hover .ka-nav-icon[b-am9751b6ru] {
    color: rgba(255, 255, 255, 0.75);
}

/* Active state per group */
.group-teal .ka-nav-item.active[b-am9751b6ru] {
    background: rgba(45, 212, 191, 0.14);
    color: #5eead4;
}
.group-teal .ka-nav-item.active .ka-nav-icon[b-am9751b6ru] { color: #5eead4; }

.group-blue .ka-nav-item.active[b-am9751b6ru] {
    background: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
}
.group-blue .ka-nav-item.active .ka-nav-icon[b-am9751b6ru] { color: #93c5fd; }

.group-violet .ka-nav-item.active[b-am9751b6ru] {
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}
.group-violet .ka-nav-item.active .ka-nav-icon[b-am9751b6ru] { color: #c4b5fd; }

.group-amber .ka-nav-item.active[b-am9751b6ru] {
    background: rgba(251, 191, 36, 0.14);
    color: #fde68a;
}
.group-amber .ka-nav-item.active .ka-nav-icon[b-am9751b6ru] { color: #fde68a; }

/* ----------------------------------------------------------
   Right content panel
   ---------------------------------------------------------- */
.ka-content[b-am9751b6ru] {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

/* Content header row: title/subtitle left, actions right */
.ka-content-header[b-am9751b6ru] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ka-content-title[b-am9751b6ru] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    color: #1a202c;
}

.ka-content-sub[b-am9751b6ru] {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}

.ka-header-actions[b-am9751b6ru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Section cards (white content blocks)
   ---------------------------------------------------------- */
.ka-section-card[b-am9751b6ru] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.ka-section-heading[b-am9751b6ru] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin: 0 0 0.85rem;
}

/* ----------------------------------------------------------
   Toggle switch (custom, replaces form-check-input sizing)
   ---------------------------------------------------------- */
.ka-toggle[b-am9751b6ru] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.ka-toggle input[b-am9751b6ru] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.ka-toggle-slider[b-am9751b6ru] {
    display: inline-block;
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 20px;
    transition: background 0.18s ease;
    position: relative;
}

.ka-toggle-slider[b-am9751b6ru]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}

.ka-toggle input:checked ~ .ka-toggle-slider[b-am9751b6ru] {
    background: #14b8a6;
}

.ka-toggle input:checked ~ .ka-toggle-slider[b-am9751b6ru]::after {
    transform: translateX(16px);
}

/* ----------------------------------------------------------
   Switch rows (toggle + label description)
   ---------------------------------------------------------- */
.ka-switch-row[b-am9751b6ru] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.85rem;
}

.ka-switch-info[b-am9751b6ru] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ka-switch-label[b-am9751b6ru] {
    font-size: 0.83rem;
    font-weight: 600;
    color: #1f2937;
}

.ka-switch-hint[b-am9751b6ru] {
    font-size: 0.73rem;
    color: #6b7280;
    line-height: 1.4;
}

/* ----------------------------------------------------------
   Label + input field rows
   ---------------------------------------------------------- */
.ka-field-row[b-am9751b6ru] {
    margin-bottom: 0.85rem;
}

.ka-field-label[b-am9751b6ru] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}

/* ----------------------------------------------------------
   Intake fields table: tighter checkboxes + compact headers
   ---------------------------------------------------------- */
.ka-fields-table th[b-am9751b6ru] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    background: #f9fafb;
    white-space: nowrap;
}

.ka-check-sm[b-am9751b6ru] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #14b8a6;
    display: block;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   Responsive: collapse side-nav on small screens
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .ka-page[b-am9751b6ru] {
        flex-direction: column;
    }

    .ka-sidenav[b-am9751b6ru] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
        overflow-x: auto;
    }

    .ka-sidenav-header[b-am9751b6ru] {
        display: none;
    }

    .ka-nav-group[b-am9751b6ru] {
        flex-direction: row;
        flex-wrap: wrap;
        border-left-width: 0;
        border-bottom: 3px solid transparent;
        padding: 0.1rem 0.4rem;
    }

    .group-teal[b-am9751b6ru]   { border-bottom-color: #2dd4bf; }
    .group-blue[b-am9751b6ru]   { border-bottom-color: #60a5fa; }
    .group-violet[b-am9751b6ru] { border-bottom-color: #a78bfa; }
    .group-amber[b-am9751b6ru]  { border-bottom-color: #fbbf24; }

    .ka-nav-group-label[b-am9751b6ru] {
        display: none;
    }

    .ka-nav-item[b-am9751b6ru] {
        padding: 0.35rem 0.6rem;
        font-size: 0.72rem;
    }

    .ka-content[b-am9751b6ru] {
        padding: 1rem;
    }
}

/* ----------------------------------------------------------
   Content-only layout (global sidebar owns the nav)
   ---------------------------------------------------------- */
.ka-content-only[b-am9751b6ru] {
    padding: 1.5rem 2rem;
    min-height: 100%;
    background: #f5f7fa;
}

@media (max-width: 600px) {
    .ka-content-only[b-am9751b6ru] {
        padding: 1rem;
    }
}
/* /Pages/Remote.razor.rz.scp.css */
/* Scoped styles for the visitor-facing Remote check-in page.
   These mirror the kiosk check-in look so both surfaces feel consistent,
   but are kept here so they do not bleed into other components. */

/* ---- outer wrapper ---- */
.kiosk[b-9zjx9jvd17] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem;
    background: #f8fafc;
}

.kiosk-card[b-9zjx9jvd17] {
    width: 100%;
    max-width: 540px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    padding: 2rem;
}

.kiosk-logo[b-9zjx9jvd17] {
    max-height: 56px;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.kiosk-card h1[b-9zjx9jvd17] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #0f172a;
}

/* ---- form fields ---- */
/* Each field is a full-width block so label and input stack vertically
   and the card never wraps two fields side by side. */
.kiosk-form[b-9zjx9jvd17] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kiosk-field[b-9zjx9jvd17] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.kiosk-field span[b-9zjx9jvd17] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.kiosk-field input[b-9zjx9jvd17],
.kiosk-field select[b-9zjx9jvd17],
.kiosk-field textarea[b-9zjx9jvd17] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background: #ffffff;
    color: #111827;
    transition: border-color .15s;
}

.kiosk-field input:focus[b-9zjx9jvd17],
.kiosk-field select:focus[b-9zjx9jvd17],
.kiosk-field textarea:focus[b-9zjx9jvd17] {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
}

/* ---- opt-in notification checkbox ---- */
.kiosk-check[b-9zjx9jvd17] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.kiosk-check input[type="checkbox"][b-9zjx9jvd17] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #0d9488;
    flex-shrink: 0;
}

.kiosk-check span[b-9zjx9jvd17] {
    font-size: 0.875rem;
    color: #374151;
}

/* ---- service selector ---- */
.kiosk-services[b-9zjx9jvd17] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kiosk-svc-btn[b-9zjx9jvd17] {
    text-align: left;
    padding: 0.65rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #111827;
    transition: border-color .15s, background .15s;
}

.kiosk-svc-btn.selected[b-9zjx9jvd17],
.kiosk-svc-btn:hover[b-9zjx9jvd17] {
    border-color: #0d9488;
    background: #f0fdfa;
    color: #0f766e;
}

/* ---- submit / action buttons ---- */
.kiosk-buttons[b-9zjx9jvd17] {
    margin-top: 0.5rem;
}

.kiosk-buttons .btn[b-9zjx9jvd17] {
    width: 100%;
}

/* ---- ticket confirmation card ---- */
.kiosk-ticket[b-9zjx9jvd17] {
    text-align: center;
    padding: 1rem 0;
}

.kiosk-ticket .ticket-number[b-9zjx9jvd17] {
    font-size: 4rem;
    font-weight: 900;
    color: #0d9488;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.kiosk-ticket .ticket-service[b-9zjx9jvd17] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.kiosk-ticket .ticket-position[b-9zjx9jvd17] {
    font-size: 0.875rem;
    color: #374151;
}

/* ---- error / info banners ---- */
.kiosk-error[b-9zjx9jvd17] {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* ---- responsive tweaks ---- */
@media (max-width: 480px) {
    .kiosk-card[b-9zjx9jvd17] {
        padding: 1.25rem;
    }
}
/* /Pages/RemoteAdmin.razor.rz.scp.css */
/* ============================================================
   RemoteAdmin.razor.css  --  scoped styles for the remote
   check-in admin page.

   Layout: left dark side-nav + right light content panel.
   Side-nav groups mirror the tracker portal style (colored
   left-border cards, uppercase labels, icon+text items).
   ============================================================ */

/* ----------------------------------------------------------
   Page shell: side-nav + content side by side
   ---------------------------------------------------------- */
.ra-page[b-b3cj5enel3] {
    display: flex;
    min-height: 100%;
    background: #f5f7fa;
}

/* ----------------------------------------------------------
   Side-nav panel
   ---------------------------------------------------------- */
.ra-sidenav[b-b3cj5enel3] {
    width: 220px;
    flex-shrink: 0;
    background: #1e2130;
    padding: 0.75rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

/* Branding header inside the nav */
.ra-sidenav-header[b-b3cj5enel3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0.35rem;
}

.ra-sidenav-icon[b-b3cj5enel3] {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.ra-sidenav-title[b-b3cj5enel3] {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   Nav groups (category cards with colored left border)
   ---------------------------------------------------------- */
.ra-nav-group[b-b3cj5enel3] {
    display: flex;
    flex-direction: column;
    margin: 0 0.5rem;
    padding: 0.2rem 0 0.2rem 0.55rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
}

.ra-nav-group-label[b-b3cj5enel3] {
    padding: 0.35rem 0.4rem 0.1rem 0;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

/* Color accents -- same palette as the tracker portal */
.group-teal[b-b3cj5enel3]   { border-left-color: #2dd4bf; }
.group-blue[b-b3cj5enel3]   { border-left-color: #60a5fa; }
.group-violet[b-b3cj5enel3] { border-left-color: #a78bfa; }

.group-teal   .ra-nav-group-label[b-b3cj5enel3] { color: rgba(45, 212, 191, 0.65); }
.group-blue   .ra-nav-group-label[b-b3cj5enel3] { color: rgba(96, 165, 250, 0.65); }
.group-violet .ra-nav-group-label[b-b3cj5enel3] { color: rgba(167, 139, 250, 0.65); }

/* ----------------------------------------------------------
   Individual nav items (buttons, not links)
   ---------------------------------------------------------- */
.ra-nav-item[b-b3cj5enel3] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.45rem 0.45rem 0;
    margin: 0 0.2rem;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    width: 100%;
}

.ra-nav-item:hover[b-b3cj5enel3] {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.ra-nav-icon[b-b3cj5enel3] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.12s ease;
}

.ra-nav-item:hover .ra-nav-icon[b-b3cj5enel3] {
    color: rgba(255, 255, 255, 0.75);
}

/* Active state -- each group accent color */
.group-teal .ra-nav-item.active[b-b3cj5enel3] {
    background: rgba(45, 212, 191, 0.14);
    color: #5eead4;
}
.group-teal .ra-nav-item.active .ra-nav-icon[b-b3cj5enel3] {
    color: #5eead4;
}

.group-blue .ra-nav-item.active[b-b3cj5enel3] {
    background: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
}
.group-blue .ra-nav-item.active .ra-nav-icon[b-b3cj5enel3] {
    color: #93c5fd;
}

.group-violet .ra-nav-item.active[b-b3cj5enel3] {
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}
.group-violet .ra-nav-item.active .ra-nav-icon[b-b3cj5enel3] {
    color: #c4b5fd;
}

/* ----------------------------------------------------------
   Right content panel
   ---------------------------------------------------------- */
.ra-content[b-b3cj5enel3] {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

/* Content header row: title/subtitle left, actions right */
.ra-content-header[b-b3cj5enel3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ra-content-title[b-b3cj5enel3] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    color: #1a202c;
}

.ra-content-sub[b-b3cj5enel3] {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}

.ra-header-actions[b-b3cj5enel3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Section cards (white content blocks)
   ---------------------------------------------------------- */
.ra-section-card[b-b3cj5enel3] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.ra-section-heading[b-b3cj5enel3] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin: 0 0 0.85rem;
}

/* ----------------------------------------------------------
   Toggle switch (custom, replaces form-check-input sizing)
   ---------------------------------------------------------- */
.ra-toggle[b-b3cj5enel3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.ra-toggle input[b-b3cj5enel3] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.ra-toggle-slider[b-b3cj5enel3] {
    display: inline-block;
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 20px;
    transition: background 0.18s ease;
    position: relative;
}

.ra-toggle-slider[b-b3cj5enel3]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.18s ease;
}

.ra-toggle input:checked ~ .ra-toggle-slider[b-b3cj5enel3] {
    background: #14b8a6; /* teal-500 -- matches the portal accent */
}

.ra-toggle input:checked ~ .ra-toggle-slider[b-b3cj5enel3]::after {
    transform: translateX(16px);
}

/* Smaller toggle variant for sub-options */
.ra-toggle-sm .ra-toggle-slider[b-b3cj5enel3] {
    width: 28px;
    height: 16px;
}
.ra-toggle-sm .ra-toggle-slider[b-b3cj5enel3]::after {
    width: 12px;
    height: 12px;
}
.ra-toggle-sm input:checked ~ .ra-toggle-slider[b-b3cj5enel3]::after {
    transform: translateX(12px);
}

/* ----------------------------------------------------------
   Switch rows (toggle + label description)
   ---------------------------------------------------------- */
.ra-switch-row[b-b3cj5enel3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.85rem;
}

.ra-switch-info[b-b3cj5enel3] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ra-switch-label[b-b3cj5enel3] {
    font-size: 0.83rem;
    font-weight: 600;
    color: #1f2937;
}

.ra-switch-hint[b-b3cj5enel3] {
    font-size: 0.73rem;
    color: #6b7280;
    line-height: 1.4;
}

/* Sub-option row (e.g. "make phone required") */
.ra-sub-option[b-b3cj5enel3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0 0.55rem 0.25rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.85rem;
}

/* ----------------------------------------------------------
   Label + input field rows
   ---------------------------------------------------------- */
.ra-field-row[b-b3cj5enel3] {
    margin-bottom: 0.85rem;
}

.ra-field-label[b-b3cj5enel3] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}

/* ----------------------------------------------------------
   Intake fields table: tighter checkboxes
   ---------------------------------------------------------- */
.ra-fields-table th[b-b3cj5enel3] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    background: #f9fafb;
    white-space: nowrap;
}

/* Small, centered checkbox for the table cells */
.ra-check-sm[b-b3cj5enel3] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #14b8a6;
    display: block;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   Responsive: collapse side-nav on small screens
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .ra-page[b-b3cj5enel3] {
        flex-direction: column;
    }

    .ra-sidenav[b-b3cj5enel3] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
        overflow-x: auto;
    }

    .ra-sidenav-header[b-b3cj5enel3] {
        display: none;
    }

    .ra-nav-group[b-b3cj5enel3] {
        flex-direction: row;
        flex-wrap: wrap;
        border-left-width: 0;
        border-bottom: 3px solid transparent;
        padding: 0.1rem 0.4rem;
    }

    .group-teal[b-b3cj5enel3]   { border-bottom-color: #2dd4bf; }
    .group-blue[b-b3cj5enel3]   { border-bottom-color: #60a5fa; }
    .group-violet[b-b3cj5enel3] { border-bottom-color: #a78bfa; }

    .ra-nav-group-label[b-b3cj5enel3] {
        display: none; /* hidden on mobile; colour-coding still visible */
    }

    .ra-nav-item[b-b3cj5enel3] {
        padding: 0.35rem 0.6rem;
        font-size: 0.72rem;
    }

    .ra-content[b-b3cj5enel3] {
        padding: 1rem;
    }
}

/* ----------------------------------------------------------
   Content-only layout (global sidebar owns the nav)
   ---------------------------------------------------------- */
.ra-content-only[b-b3cj5enel3] {
    padding: 1.5rem 2rem;
    min-height: 100%;
    background: #f5f7fa;
}

@media (max-width: 600px) {
    .ra-content-only[b-b3cj5enel3] {
        padding: 1rem;
    }
}

/* ----------------------------------------------------------
   QR code -- share tab
   ---------------------------------------------------------- */
.ra-qr-wrapper[b-b3cj5enel3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* White bordered card that frames the QR image */
.ra-qr-image[b-b3cj5enel3] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    display: inline-block;
    line-height: 0; /* collapse whitespace gap below the svg */
    /* Fixed container width; the viewBox SVG scales to fill it exactly */
    width: 220px;
    height: 220px;
}

/* The inline SVG uses SizingMode.ViewBoxAttribute (no width/height attrs),
   so it fills the container through normal block-level sizing. */
.ra-qr-image svg[b-b3cj5enel3] {
    display: block;
    width: 100%;
    height: 100%;
}

.ra-qr-actions[b-b3cj5enel3] {
    max-width: 260px;
}