/* ============================================================================
   CAA BRAND STYLESHEET
   Ported directly from compliance-assurance.com's real, live stylesheet
   (colors and component classes copied verbatim from the actual site,
   provided by Michael on 2026-08-15) -- not a reinterpretation.

   The real site builds on a Tailwind base (its own comments reference
   "Tailwind preflight" and "equivalent to Tailwind mb-4"); this file
   doesn't pull in Tailwind itself, since our pages aren't built with
   Tailwind utility classes throughout -- instead it includes the minimal
   base resets needed so these same component classes render identically
   without that underlying framework.
   ============================================================================ */

/* -------------------------------------------------------------
   BASE RESETS
   Minimal equivalent of what Tailwind's preflight would otherwise
   handle on the real site.
   ------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin: 0;
}

/* -------------------------------------------------------------
   BODY COPY
   ------------------------------------------------------------- */
body {
    color: #444444;
}
body p {
    margin-top: 0;
    font-size: 16px;
    color: #444444;
    line-height: 1.75;
    margin-bottom: 1rem;
}


/* -------------------------------------------------------------
   LINKS
   Brand quirk, deliberate: links are blue by default, RED on hover
   (not a darker blue) -- copied exactly as-is.
   ------------------------------------------------------------- */
body a {
    color: #005da0;
    text-decoration: none;
}
body a:hover {
    color: #b82027;
}


/* -------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------- */

/* Primary: blue -- main CTAs */
.btn-primary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #005da0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0.375rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-primary:hover {
    background-color: #004a80;
    color: #ffffff;
}

/* Michael, 2026-09-06 -- disabled/not-built-yet variant of .btn-primary,
   same shape and size, greyed instead of blue -- for buttons in a real
   grid layout whose destination page doesn't exist yet, so the grid's
   own symmetry isn't broken by simply omitting the tile. */
.btn-primary-disabled {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #d1d5db;
    color: #999999;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0.375rem;
    letter-spacing: 0.04em;
    cursor: default;
}
.btn-primary:disabled {
    background-color: #a9c3d8;
    cursor: not-allowed;
}

/* Secondary: red -- secondary CTAs */
.btn-secondary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #b82027;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0.375rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-secondary:hover {
    background-color: #9a1a20;
    color: #ffffff;
}

/* Full-width variant */
.btn-primary.btn-full,
.btn-secondary.btn-full {
    display: block;
    width: 100%;
    text-align: center;
}

/* White button -- for use on colored backgrounds (promo bars, etc.) */
.btn-white {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #ffffff;
    color: #005da0;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0.375rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}
.btn-white:hover {
    background-color: #f0f4f8;
    color: #005da0;
}


/* -------------------------------------------------------------
   BOX HEADERS
   Section boxes: session pricing, roster summary, etc.
   ------------------------------------------------------------- */
.caa-box-header-blue {
    padding: 0.5rem 1rem;
    background-color: #005da0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0.375rem 0.375rem 0 0;
}
.caa-box-header-red {
    padding: 0.5rem 1rem;
    background-color: #b82027;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 0.375rem 0.375rem 0 0;
}


/* -------------------------------------------------------------
   PROMO BAR
   Full-width blue section
   ------------------------------------------------------------- */
.caa-promo {
    background-color: #005da0;
    color: rgba(255, 255, 255, 0.85);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.caa-promo h1, .caa-promo h2, .caa-promo h3, .caa-promo h4 {
    color: #ffffff;
    text-transform: none;
}
.caa-promo p {
    color: rgba(255, 255, 255, 0.85);
}
.caa-promo a {
    color: #ffffff;
}
.caa-promo a:hover {
    color: rgba(255, 255, 255, 0.75);
}
.caa-promo .btn-primary {
    background-color: #004a80;
}
.caa-promo .btn-primary:hover {
    background-color: #003d6b;
}

/* Michael, 2026-09-05 -- found live: .caa-promo a { color: #ffffff }
   (an element+class selector, specificity 0,0,1,1) is genuinely HIGHER
   specificity than .btn-white alone (0,0,1,0) -- meaning any
   .btn-white button nested inside a .caa-promo section always
   rendered with invisible white text on its own white background,
   regardless of source order. A real, pre-existing bug in this file,
   not something introduced by any one specific page -- it simply
   never surfaced as visibly broken until a page actually used this
   exact nesting. This override (0,0,2,0) genuinely, definitively
   wins over .caa-promo a's own rule. */
.caa-promo .btn-white {
    color: #005da0;
}
.caa-promo .btn-white:hover {
    color: #005da0;
}


/* -------------------------------------------------------------
   RED CALLOUT BOX
   ------------------------------------------------------------- */
.caa-box-red {
    background-color: #b82027;
    color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 0.375rem;
}
.caa-box-red p {
    color: rgba(255, 255, 255, 0.9);
}
.caa-box-red a {
    color: #ffffff;
}
.caa-box-red a:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* -------------------------------------------------------------
   LISTS
   ------------------------------------------------------------- */
body ul, body ol {
    font-size: 16px;
    color: #444444;
    line-height: 1.75;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
body ul { list-style-type: disc; }
body ol { list-style-type: decimal; }
body li { margin-bottom: 0.25rem; }


/* -------------------------------------------------------------
   TABLES
   ------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
th {
    font-weight: 700;
    color: #005da0;
    text-align: left;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid #005da0;
}
td {
    color: #444444;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    /* Michael, 2026-08-31 -- top-aligned, not the browser's default
       middle -- found while cleaning up the Employees roster table,
       where multi-line cells (name+student#, email+phone) looked
       noticeably worse vertically centered against neighboring rows
       of varying height. A safe default for any data table with mixed
       content length, not specific to that one page. */
    vertical-align: top;
}
tr:hover td {
    background-color: #f9fafb;
}


/* -------------------------------------------------------------
   UTILITY OVERRIDES
   ------------------------------------------------------------- */
.text-red { color: #b82027; }
.text-blue { color: #005da0; }
.text-note {
    font-size: 14px;
    color: #b82027;
    line-height: 1.75;
}

/* -------------------------------------------------------------
   ADMIN SHARED UI COMPONENTS
   Michael, 2026-08-31 -- consolidated here after finding the same
   handful of patterns (hint text, status badges, labeled info rows)
   reinvented slightly differently in nearly every admin page's own
   <style> block -- different font sizes for the same hint text,
   status-inactive rendered red on one page and grey on another for
   the identical concept. Confirmed with Michael: one shared theme
   across admin and portal UI, not a per-page reinterpretation each
   time. Lives here, in the real, shared brand stylesheet, not a
   separate admin-only file -- Michael confirmed no harm in a single,
   unified design system across both.
   ------------------------------------------------------------- */
.hint {
    font-size: 0.85rem;
    color: #888888;
}

/* Michael, 2026-08-31 -- grey for inactive, not red: red is reserved
   for genuine alerts/problems elsewhere in this brand (.btn-secondary,
   .caa-box-red) -- "inactive" is a neutral, dimmed state, not a
   warning, so it shouldn't compete visually with things that actually
   need attention (e.g. an invalid 5-Filter calibration, which
   legitimately does use red elsewhere in the admin UI). */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-active {
    background-color: #e6f4ea;
    color: #16803c;
}
.status-inactive {
    background-color: #f3f4f6;
    color: #888888;
}
/* Michael, 2026-08-31 -- deliberately distinct from .status-inactive
   above, not a reuse of it: this is for a genuine compliance alert
   (e.g. an expired/failed 5-Filter calibration) that needs real
   attention, not a neutral "currently not active" administrative
   fact. Conflating the two would be semantically wrong, not just
   inconsistent -- confirmed by checking the real usage before
   unifying anything. */
.status-alert {
    background-color: #fdecea;
    color: #b71c1c;
}
/* Michael, 2026-08-31 -- Staff Accounts' own role badges -- a
   genuinely different concept from active/inactive/alert (a role
   designation, not a status), but the exact same pill-shaped
   .status-badge wrapper, so these just add their own color on top of
   it rather than duplicating the wrapper styling again. */
.status-role-admin {
    background-color: #fdeceb;
    color: #b82027;
}
.status-role-staff {
    background-color: #eef4fa;
    color: #005da0;
}

/* -------------------------------------------------------------
   ADMIN CARD
   Michael, 2026-08-31 -- wraps a distinct "block" of information
   (e.g. a student's core info, a Lecture Certificate section, a
   trailer's TestingSystem) in a bordered card, purely visual --
   confirmed with Michael as a general pattern, not specific to any
   one page. Generalized from Truck/Trailer Equipment's own
   .system-card, which already had nearly this exact treatment.
   ------------------------------------------------------------- */
.admin-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 1.25rem;
    margin-top: 1.25rem;
}
.admin-card h2, .admin-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.info-row {
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}
.info-row strong {
    display: inline-block;
    width: 140px;
}

/* Michael, 2026-08-31 -- generalized from Staff Accounts' own
   .staff-form-wrap/.staff-field/.staff-row/.staff-errors -- confirmed
   these aren't actually staff-specific at all, just generic
   form-building blocks that happened to get named after one feature.
   .sd-hint (found applied inline, never actually defined anywhere --
   pure style="font-size:0.78rem; color:#888888;" duplicating .hint
   above under yet another name) folds into the real, shared .hint
   instead of getting its own class at all. */
.admin-form-wrap {
    max-width: 560px;
}
.admin-form-field {
    margin-bottom: 1.1rem;
}
.admin-form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.35rem;
}
.admin-form-field input,
.admin-form-field select {
    width: 100%;
    max-width: 360px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}
.admin-form-field input:focus,
.admin-form-field select:focus {
    outline: none;
    border-color: #005da0;
    box-shadow: 0 0 0 3px rgba(0, 93, 160, 0.12);
}
.admin-form-field input[disabled] {
    background-color: #f3f4f6;
    color: #888888;
}
.admin-form-row {
    display: flex;
    gap: 1rem;
}
.admin-form-row .admin-form-field {
    flex: 1;
}
.admin-form-errors {
    background-color: #fdeceb;
    border: 1px solid #f2b8b5;
    color: #b82027;
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}
.admin-form-errors p {
    margin: 0;
    color: #b82027;
}
.admin-form-errors p + p {
    margin-top: 0.35rem;
}

/* Michael, 2026-08-31 -- generalized from Manual Enroll's own
   .client-search-wrap/-flyout/-option, found to be structurally
   identical to Employee Search's own .employee-search-* classes --
   the same absolute-positioned dropdown pattern reinvented twice under
   different prefixes. Shared here so a third occurrence doesn't repeat
   the same drift. */
.admin-search-wrap {
    position: relative;
    display: inline-block;
}
/* Michael, 2026-08-31 -- the search input itself, not just its
   wrap/flyout/option -- recurring across every one of these pages
   (Employee Search, Manual Enroll, Add/Combine/Reassign Employee) with
   nearly identical values, just a different fixed pixel width each
   time. width: 100% here instead -- more flexible, adapts to whatever
   container each page actually puts it in, rather than one more
   arbitrary fixed number to keep in sync. */
.admin-search-box {
    width: 100%;
    min-width: 280px;
    max-width: 400px;
    padding: 0.55rem 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.95rem;
}
.admin-search-flyout {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.admin-search-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.admin-search-option:hover {
    background-color: #f0f6fb;
}

/* Michael, 2026-08-31 -- generalized from Manual Enroll's own
   .enroll-confirm-box/.enroll-error -- a dynamically-shown, inline
   lookup confirmation (info by default, error variant), a genuinely
   different pattern from .admin-form-errors above (that's a
   server-rendered list of validation errors; this is a single,
   JS-populated confirmation box) -- plausible to recur on any future
   "look this up and confirm it's right" form, not specific to
   enrollment. */
.admin-inline-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    background-color: #f0f6fb;
    border: 1px solid #cfe3f2;
    font-size: 0.9rem;
    display: none;
}
.admin-inline-feedback.admin-inline-feedback-error {
    background-color: #fdeceb;
    border-color: #f2b8b5;
    color: #b82027;
}



/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
footer p {
    color: inherit;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 0;
}


/* -------------------------------------------------------------
   ADMIN SIDEBAR
   Modernized from DIBs' left nav (solid green fill, Font Awesome
   icons) using the same brand tokens as the rest of the site --
   white background, blue accents, red hover, matching body a's
   established link convention rather than a colored panel.
   ------------------------------------------------------------- */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 1rem 0;
    overflow-y: auto;
}

.admin-sidebar-brand {
    padding: 0 1.25rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.admin-sidebar-brand a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
}
.admin-sidebar-brand a:hover {
    color: #005da0;
}

.admin-nav-section {
    border-bottom: 1px solid #f3f4f6;
}

.admin-nav-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.65rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444444;
    text-align: left;
}
.admin-nav-toggle:hover {
    background-color: #f0f4f8;
    color: #005da0;
}
.admin-nav-toggle.is-current {
    color: #005da0;
    background-color: #f0f4f8;
    border-left: 3px solid #005da0;
    padding-left: calc(1.25rem - 3px);
}
.admin-nav-toggle .admin-nav-icon {
    width: 1.25rem;
    margin-right: 0.6rem;
    text-align: center;
    color: #005da0;
    font-size: 0.95rem;
}
.admin-nav-toggle .admin-nav-arrow {
    margin-left: auto;
    font-size: 0.7rem;
    color: #999999;
    transition: transform 0.15s;
}
.admin-nav-toggle[aria-expanded="true"] .admin-nav-arrow {
    transform: rotate(90deg);
}

.admin-submenu {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0 0.5rem;
}
.admin-submenu li {
    margin: 0;
}
.admin-submenu a {
    display: block;
    padding: 0.4rem 1.25rem 0.4rem 2.85rem;
    font-size: 0.85rem;
    color: #444444;
    text-decoration: none;
}
.admin-submenu a:hover {
    color: #005da0;
    background-color: #f9fafb;
}

/* Not-yet-built items -- same visual convention DIBs already uses
   for permission-restricted links (greyed, struck-through), reused
   here for "doesn't exist yet" instead of "not authorized." */
.admin-submenu .admin-nav-disabled {
    display: block;
    padding: 0.4rem 1.25rem 0.4rem 2.85rem;
    font-size: 0.85rem;
    color: #999999;
    text-decoration: line-through;
    cursor: default;
}

.admin-sidebar-utility {
    padding-top: 0.5rem;
}
.admin-sidebar-utility button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #005da0;
    text-align: left;
}
.admin-sidebar-utility button:hover {
    color: #b82027;
}
.admin-sidebar-utility .admin-nav-icon {
    width: 1.25rem;
    margin-right: 0.6rem;
    text-align: center;
}

.admin-sidebar-stats {
    margin-top: 0.75rem;
    padding: 0.75rem 1.25rem 0.25rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.78rem;
    color: #666666;
    line-height: 1.6;
}
.admin-sidebar-stats strong {
    color: #444444;
}

.admin-content {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
}

/* -------------------------------------------------------------
   ADMIN DASHBOARD ICON MENU
   Same "honest links only" convention as the sidebar -- real
   destinations get the blue tile + link, not-yet-built ones get a
   greyed, unclickable tile with the same "Not built yet" title.
   ------------------------------------------------------------- */
.admin-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 84px);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.admin-icon-tile {
    width: 84px;
    text-align: center;
    text-decoration: none;
}
.admin-icon-tile .admin-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.35rem;
    background-color: #005da0;
}
.admin-icon-tile .admin-icon-box i {
    color: #ffffff;
    font-size: 1.4rem;
}
.admin-icon-tile .admin-icon-label {
    font-size: 0.78rem;
    color: #444444;
    line-height: 1.2;
}
.admin-icon-tile:hover .admin-icon-box {
    background-color: #004a80;
}
.admin-icon-tile.admin-icon-disabled {
    cursor: default;
}
.admin-icon-tile.admin-icon-disabled .admin-icon-box {
    background-color: #d1d5db;
}
.admin-icon-tile.admin-icon-disabled:hover .admin-icon-box {
    background-color: #d1d5db;
}
.admin-icon-tile.admin-icon-disabled .admin-icon-label {
    color: #999999;
}

/* -------------------------------------------------------------
   PUBLIC INFO PAGES
   Michael, 2026-09-05 -- Smoke School Discovery pages (VR,
   In-Person, Public, Private). Found live: these pages had been
   reusing .admin-card / .sd-row / .sd-label / .sd-input -- none of
   which exist in this file at all (.sd-* live locally inside one
   admin page's own <style> block; .admin-card was never defined
   anywhere), so they were rendering with effectively no real styling
   on the public site. These are real, new, on-brand components
   instead -- same border-radius (0.375rem), same border/background
   tokens, same blue/red palette already established everywhere else
   in this file, not a new, competing visual language.

   .public-page-header is deliberately distinct from home.blade.php's
   own .hero -- the real, live DIBs source consistently used a
   left-aligned header (not a centered hero) for exactly this class of
   informational sub-page, reserving the centered hero treatment for
   the homepage alone. Kept that same, real distinction here rather
   than flattening every page to look identical.
   ------------------------------------------------------------- */
.public-page-header {
    margin-bottom: 2rem;
}
/* Michael, 2026-09-05 -- found live: confirmed against the real, live
   DIBs site directly (its own compiled Tailwind CSS isn't something
   we have direct access to, only the raw HTML) -- H1/H2 render blue
   there, not the shared, generic #1a1a1a dark used elsewhere on this
   page. Matched here explicitly. */
.public-page-header h1 {
    font-size: 2rem;
    color: #005da0;
}
.public-page-header .public-page-subhead {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: #005da0;
    margin-top: 0.35rem;
}

.public-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.public-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
}
.public-card:last-child {
    margin-bottom: 0;
}

/* A public-card meant specifically to hold a request/inquiry form --
   same shape, tinted blue instead of white, so it reads as "do
   something here" rather than "read this," without a second, separate
   visual language. */
.public-card-action {
    background-color: rgba(0, 93, 160, 0.06);
    border: 1px solid rgba(0, 93, 160, 0.15);
    border-radius: 0.375rem;
    padding: 1.75rem;
}
.public-card-action h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

/*
    Michael, 2026-09-06 -- real "icon nav card" grid, used by hub pages
    that link out to several real sub-pages (About, VEO Services,
    In-Person Smoke Schools) -- horizontal icon + label, distinct from
    the vertical .public-card content pattern above. .public-nav-card
    is the real, clickable version (once its destination page exists);
    .public-nav-card-disabled is the plain, non-clickable version for
    a card whose destination doesn't exist yet -- same shape and icon
    tile, but greyed and without hover/pointer affordances, so hub
    pages under active construction don't need two different visual
    languages side by side.
*/
.public-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.public-nav-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.public-nav-card:hover {
    border-color: #005da0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.public-nav-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    background-color: #005da0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.public-nav-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #005da0;
}
.public-nav-card-disabled {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}
.public-nav-card-disabled .public-nav-card-icon {
    background-color: #d1d5db;
}
.public-nav-card-disabled .public-nav-card-label {
    color: #999999;
}

.public-field {
    margin-bottom: 1rem;
}
.public-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.35rem;
}
.public-field input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    color: #1a1a1a;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.public-field input:focus {
    outline: none;
    border-color: #005da0;
    box-shadow: 0 0 0 3px rgba(0, 93, 160, 0.12);
}