/* ============================================================
   Online VA Team — client portal override layer
   ------------------------------------------------------------
   THIS FILE IS THE SINGLE SOURCE OF TRUTH for the client-portal
   visual design (Apr/May 2026 reskin). Loaded AFTER
   public/assets/css/theme.min.css in app/Views/clients/default.php
   so it overrides without touching the vendor sheet.

   Maps the Falcon admin theme onto the design tokens of the public
   marketing site (https://www.onlinevateam.com — Astro 5 build).

   Source of truth for the brand palette: --ovat-* below (section 1).
   We then remap --falcon-* (and --bs-* by extension) onto those
   tokens (section 2) so ~95% of the existing Bootstrap/Falcon class
   output recolors itself with no HTML changes.

   Anything below "Component restyles" is opinionated visual polish
   (radii, shadows, spacing, component-specific patterns) to bring
   the admin chrome in line with the marketing site.

   For deep context (intent, scope, what's NOT touched, rollback
   tag, file inventory, future work): see DEVELOPMENT.md →
   "Client portal UI reskin — Apr/May 2026".

   This file is loaded with a `?v=<filemtime>` query string from
   default.php so Cloudflare picks up edits without a manual purge.
   ============================================================ */


/* ============================================================
   1. Brand palette — source of truth
   ============================================================ */
:root {
    /* Brand blues */
    --ovat-blue:        #0e94dc;
    --ovat-blue-deep:   #0d78bc;
    --ovat-blue-deeper: #0a5c92;
    --ovat-blue-soft:   #4fb6e8;
    --ovat-blue-tint:   #e5f4fc;
    --ovat-blue-tint-2: #f3fafe;

    /* Accent (CTAs, badges) */
    --ovat-amber:       #fcb900;
    --ovat-amber-deep:  #e6a800;
    --ovat-on-amber:    #1a1a1a;

    /* Dark surfaces (used by the dark-mode block at the bottom) */
    --ovat-deep:        #101a29;
    --ovat-deep-2:      #1a2740;
    --ovat-deep-3:      #0a1220;

    /* Marketing-site "solid" navy. Same hue as --ovat-ink/--ovat-deep-3 but
       exposed as a semantic alias so component code reads cleanly when it
       wants a navy SURFACE (footer band, dropdown header strip, etc.) vs
       just a text color. Mirrors the deep navy hero on the public Astro site. */
    --ovat-navy:        #0b1220;
    --ovat-navy-2:      #131c2f;   /* hover/divider line on top of navy */
    --ovat-on-navy:     #ffffff;
    --ovat-on-navy-muted: #94a3b8; /* slate-400, for footer copyright etc. */

    /* Soft status tints — used by the new dashboard checklist bubbles
       (amber for "done" matches the marketing site's "what to expect"
       checkmarks) and by future alert/info components. */
    --ovat-amber-tint:   #fff5d6;
    --ovat-success:      #10b981;
    --ovat-success-tint: #d1fae5;

    /* Light surfaces */
    --ovat-surface:        #ffffff;
    --ovat-surface-muted:  #fbf8f1;   /* warm cream — closer to website's --color-surface-warm */
    --ovat-surface-soft:   #f4efe5;   /* slightly deeper warm tint for hover/header */
    --ovat-surface-cool:   #f8fafc;   /* original cool slate, kept for tables/legacy use */

    /* Ink (text) */
    --ovat-ink:        #0b1220;
    --ovat-ink-muted:  #334155;
    --ovat-ink-soft:   #64748b;

    /* Borders */
    --ovat-border:        #e2e8f0;
    --ovat-border-strong: #cbd5e1;

    /* Radius scale (matches the Astro site's --radius-* tokens) */
    --ovat-radius-sm: 0.375rem;
    --ovat-radius:    0.5rem;
    --ovat-radius-lg: 0.75rem;
    --ovat-radius-xl: 1rem;

    /* Shadow scale */
    --ovat-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    --ovat-shadow:    0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.04);
    --ovat-shadow-lg: 0 10px 25px -5px rgb(15 23 42 / 0.10), 0 4px 10px -3px rgb(15 23 42 / 0.06);

    /* Type stacks */
    --ovat-font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system,
                       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ovat-font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
}


/* ============================================================
   2. Remap Falcon / Bootstrap tokens onto the brand palette
   ------------------------------------------------------------
   These overrides cascade through every Falcon/Bootstrap class
   that consumes a CSS custom property (which is most of them).
   ============================================================ */
:root {
    /* Brand colors */
    --falcon-primary:       var(--ovat-blue);
    --falcon-primary-rgb:   14, 148, 220;
    --falcon-secondary:     var(--ovat-ink-soft);
    --falcon-secondary-rgb: 100, 116, 139;
    --falcon-info:          var(--ovat-blue-soft);
    --falcon-warning:       var(--ovat-amber);
    --falcon-warning-rgb:   252, 185, 0;

    /* Surfaces & text */
    --falcon-body-bg:      var(--ovat-surface-muted);
    --falcon-body-color:   var(--ovat-ink-muted);
    --falcon-border-color: var(--ovat-border);
    --falcon-card-bg:      var(--ovat-surface);

    /* Bootstrap "light" tokens that Falcon piggybacks for card-headers etc. */
    --falcon-light:        #faf6ec;
    --falcon-light-rgb:    250, 246, 236;

    /* Focus ring color (Bootstrap input/btn focus uses this) */
    --falcon-input-btn-focus-color: rgb(14 148 220 / 0.20);

    /* Falcon "ghost" button family — used heavily as .btn-falcon-* */
    --falcon-btn-falcon-primary-color:             var(--ovat-blue);
    --falcon-btn-falcon-primary-hover-color:       var(--ovat-blue-deep);
    --falcon-btn-falcon-primary-active-background: var(--ovat-blue-tint);
    --falcon-btn-falcon-primary-active-color:      var(--ovat-blue-deeper);
    --falcon-btn-falcon-warning-color:             var(--ovat-amber-deep);
    --falcon-btn-falcon-warning-hover-color:       var(--ovat-amber-deep);
    --falcon-btn-falcon-warning-active-background: #fff5d6;
    --falcon-btn-falcon-warning-active-color:      var(--ovat-amber-deep);

    /* Side / top navbar tokens */
    --falcon-navbar-vertical-link-color:          var(--ovat-ink-muted);
    --falcon-navbar-vertical-link-hover-color:    var(--ovat-ink);
    --falcon-navbar-vertical-link-active-color:   var(--ovat-blue);
    --falcon-navbar-light-brand-color:            var(--ovat-blue);

    /* Type stack (whole app) */
    --falcon-font-sans-serif: var(--ovat-font-sans);
}


/* ============================================================
   3. Base typography
   ============================================================ */
body {
    font-family: var(--ovat-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--ovat-surface-muted);
    color: var(--ovat-ink-muted);
    font-feature-settings: "cv11", "ss01", "ss03";  /* Inter's stylistic alternates */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ovat-font-sans);
    color: var(--ovat-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
h1, .h1 { font-size: 2.25rem;  letter-spacing: -0.03em; line-height: 1.1; }
h2, .h2 { font-size: 1.75rem;  letter-spacing: -0.025em; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; font-weight: 700; }
h5, .h5 { font-size: 1rem;     font-weight: 600; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; }

p { color: var(--ovat-ink-muted); }

a       { color: var(--ovat-blue); text-underline-offset: 2px; }
a:hover { color: var(--ovat-blue-deep); }

/* Opt-in serif display class for hero / marketing-style headings */
.display-serif {
    font-family: var(--ovat-font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* The dashboard's signature welcome heading (was `text-warning` amber) —
   now bold, ink-dark, and big enough to actually feel like a welcome. */
.welcome-heading {
    color: var(--ovat-ink);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin-top: 0.25rem;
}

/* Topbar dropdown's "Welcome Greg!" item (was amber) */
.dropdown-welcome {
    color: var(--ovat-ink) !important;
}
.dropdown-welcome .fa-crown {
    color: var(--ovat-amber-deep);  /* keep the crown amber, but only the icon */
}

/* "Onboarding..." placeholder buttons — quiet, secondary, not screaming amber */
.onboarding-placeholder {
    color: var(--ovat-ink-soft) !important;
    border-color: var(--ovat-border) !important;
    background-color: var(--ovat-surface) !important;
    font-weight: 500;
    opacity: 0.85;
}


/* ============================================================
   4. Component restyles — opinionated visual polish
   ============================================================ */

/* ---- Cards ------------------------------------------------- */
/* Polished "bubbles" floating on the warm cream chrome.

   Every card is solid white edge-to-edge with thin cool-grey internal
   borders for hierarchy. The previous Phase 2/3 design tinted card
   headers and footers in warm cream (#faf6ec) which created visible
   color "lines" at every header/body and body/footer boundary --
   reported as "the header still has these lines that are a mess".
   Now hierarchy is communicated by a single 1px cool-grey separator,
   the way the marketing site does it. */
.card {
    border: 1px solid var(--ovat-border);
    border-radius: var(--ovat-radius-lg);          /* 0.75rem, slightly tighter than the previous 1rem */
    box-shadow: var(--ovat-shadow);                /* a touch deeper, gives the bubble lift */
    background-color: var(--ovat-surface);
    overflow: hidden;                              /* clip header/footer corners cleanly */
}
.card .card-header {
    background-color: transparent;                 /* inherit card bg -- works in light AND dark */
    border-bottom: 1px solid var(--ovat-border);
    padding: 1.125rem 1.5rem;
}
.card .card-header h5,
.card .card-header .h5 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ovat-ink);
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

/* Card-header icon containers — wraps any leading icon inside an
   <h5>/<h6> in a 32px light-blue rounded-square container, mirroring the
   marketing site's bottom feature-strip pattern (each card has a small
   tinted-square icon to the left of the title). The base markup doesn't
   change — we just override the inline icon's display so the square is
   created from CSS alone.

   Catches both Bootstrap Icons (.bi-*) and FontAwesome (.fa-*, .far,
   .fas, .fab) so all the existing card headers across the portal pick
   up the new container regardless of which icon library they use:
     <h5><span class="text-900 fs-1 bi-people-fill"></span> My Team</h5>
     <h5><span class="far fa-credit-card fs-1"></span> Amex Credit Card</h5>
     <h5><i class="fas fa-file-signature"></i> Update Billing Method</h5>

   Scoped to `.card h5/h6 > span/i:first-child` so it only catches the
   leading-icon pattern and ignores body-text icons. user.css is only
   loaded on client pages (clients/default.php) so this does not leak
   into the employee/admin chrome. */
.card h5 > span:first-child[class*="bi-"],
.card h5 > span:first-child[class*="fa-"],
.card h5 > i:first-child[class*="bi-"],
.card h5 > i:first-child[class*="fa-"],
.card h6 > span:first-child[class*="bi-"],
.card h6 > span:first-child[class*="fa-"],
.card h6 > i:first-child[class*="bi-"],
.card h6 > i:first-child[class*="fa-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ovat-radius);
    background-color: var(--ovat-blue-tint);
    color: var(--ovat-blue) !important;
    font-size: 1.0625rem !important;
    line-height: 1;
    margin-right: 0.625rem;
    vertical-align: middle;
    flex-shrink: 0;
    /* The icon classes often come with Falcon sizing classes like fs-1
       / fa-lg that would otherwise blow the icon out of the square. */
    padding: 0;
}

.card .card-body   {
    background-color: transparent;
    padding: 1.5rem;
}
.card .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--ovat-border);
    padding: 1rem 1.5rem;
}

/* Falcon's `.bg-light` is sprinkled liberally across views (card-headers,
   card-bodies, card-footers, breadcrumb <nav>s, nested mini-cards on the
   funding source view, ...). Earlier in the reskin we kept the cream on
   card-bodies as "intentional wells", but in practice the cream-inside-a-
   white-card pattern reads as cluttered/dated — especially on the funding
   view (Chase/Amex mini-cards, Add New Bank breadcrumb) and on the
   dashboard welcome card.

   New rule: ANY .bg-light inside a .card -> transparent. The card
   provides the surface; the inner sections inherit it cleanly.
   Standalone .bg-light outside cards keeps the soft warm tint for any
   legacy section well that lives on the page bg directly.

   The !important is needed because Falcon's compiled .bg-light has its
   own !important and Bootstrap utility ordering means it would win
   without it. */
.card .bg-light,
.card.bg-light,
.card .card-header.bg-light,
.card .card-body.bg-light,
.card .card-footer.bg-light {
    background-color: transparent !important;
}
.bg-light {
    background-color: #faf6ec !important;
}

/* ---- Buttons ----------------------------------------------- */
.btn {
    border-radius: var(--ovat-radius);
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background-color .15s ease, color .15s ease,
                box-shadow .15s ease, border-color .15s ease;
}

.btn-primary {
    background-color: var(--ovat-blue);
    border-color:     var(--ovat-blue);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ovat-blue-deep);
    border-color:     var(--ovat-blue-deep);
    color: #fff;
}
.btn-primary:active,
.btn-primary.active {
    background-color: var(--ovat-blue-deeper) !important;
    border-color:     var(--ovat-blue-deeper) !important;
}

.btn-outline-primary {
    color: var(--ovat-blue);
    border-color: var(--ovat-blue);
}
.btn-outline-primary:hover {
    background-color: var(--ovat-blue);
    border-color:     var(--ovat-blue);
    color: #fff;
}

.btn-warning {
    background-color: var(--ovat-amber);
    border-color:     var(--ovat-amber);
    color: var(--ovat-on-amber);
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--ovat-amber-deep);
    border-color:     var(--ovat-amber-deep);
    color: var(--ovat-on-amber);
}

/* Falcon ghost buttons — flatten the inset shadow, brand-tint on hover */
.btn-falcon-primary,
.btn-falcon-default,
.btn-falcon-warning,
.btn-falcon-success,
.btn-falcon-danger,
.btn-falcon-info {
    border: 1px solid var(--ovat-border);
    box-shadow: none;
    background-color: var(--ovat-surface);
}
.btn-falcon-primary:hover,
.btn-falcon-primary:focus {
    background-color: var(--ovat-blue-tint);
    border-color:     var(--ovat-blue-soft);
    box-shadow: none;
}
.btn-falcon-default:hover,
.btn-falcon-default:focus {
    background-color: var(--ovat-surface-soft);
    border-color:     var(--ovat-border-strong);
    box-shadow: none;
}
.btn-falcon-warning:hover,
.btn-falcon-warning:focus {
    background-color: #fff5d6;
    border-color:     var(--ovat-amber);
    box-shadow: none;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgb(14 148 220 / 0.20);
}

/* ---- Form controls ----------------------------------------- */
.form-control,
.form-select {
    border: 1px solid var(--ovat-border);
    border-radius: var(--ovat-radius);
    padding: 0.5rem 0.875rem;
    color: var(--ovat-ink);
    background-color: var(--ovat-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ovat-blue);
    box-shadow: 0 0 0 3px rgb(14 148 220 / 0.18);
    outline: 0;
}
.form-check-input:checked {
    background-color: var(--ovat-blue);
    border-color:     var(--ovat-blue);
}
.form-check-input:focus {
    border-color: var(--ovat-blue);
    box-shadow: 0 0 0 3px rgb(14 148 220 / 0.18);
}
.form-label {
    font-weight: 500;
    color: var(--ovat-ink);
    margin-bottom: 0.375rem;
}
.input-group-text {
    background-color: var(--ovat-surface-soft);
    border-color: var(--ovat-border);
    color: var(--ovat-ink-muted);
}

/* ---- Tables ------------------------------------------------ */
.table {
    --falcon-table-color:        var(--ovat-ink-muted);
    --falcon-table-bg:           transparent;
    --falcon-table-border-color: var(--ovat-border);
    --falcon-table-striped-bg:   var(--ovat-surface-muted);
    --falcon-table-hover-bg:     var(--ovat-surface-soft);
    color: var(--ovat-ink-muted);
}
.table > thead {
    background-color: var(--ovat-surface-soft);
    color: var(--ovat-ink);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table > thead th {
    border-bottom: 1px solid var(--ovat-border);
    padding: 0.75rem 1rem;
    font-weight: 600;
}
.table > tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

/* ---- Badges ------------------------------------------------ */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    padding: 0.35em 0.75em;
}
.badge.bg-soft-primary,
.bg-soft-primary {
    background-color: var(--ovat-blue-tint)   !important;
    color:            var(--ovat-blue-deeper) !important;
}
.badge.bg-soft-warning,
.bg-soft-warning {
    background-color: #fff4d4 !important;
    color:            #8a5a00 !important;
}
.badge.bg-soft-info,
.bg-soft-info {
    background-color: var(--ovat-blue-tint-2) !important;
    color:            var(--ovat-blue-deep)   !important;
}
.badge.bg-primary { background-color: var(--ovat-blue)  !important; }
.badge.bg-warning {
    background-color: var(--ovat-amber)    !important;
    color:            var(--ovat-on-amber) !important;
}

/* ---- Top navigation ---------------------------------------- */
/* Topbar bg matches the sidebar's warm cream so the upper-left
   sidebar/topbar corner has no visible color seam (the previous
   white-on-cream join created the "lines that are a mess" reported
   on the header strip). border-bottom is removed for the same
   reason -- separation from the body comes from the white cards
   floating beneath, not from a horizontal rule. */
.navbar-top,
.navbar-glass,
.navbar-top.navbar-glass {
    background-color: var(--ovat-surface-muted) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.navbar-top .nav-link,
.navbar-glass .nav-link {
    color: var(--ovat-ink-muted);
    font-weight: 500;
}
.navbar-top .nav-link:hover,
.navbar-glass .nav-link:hover {
    color: var(--ovat-ink);
}
.navbar-brand {
    color: var(--ovat-ink) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
}
/* Avatar dropdown trigger in the topbar */
.navbar-top .avatar img,
.navbar-glass .avatar img {
    border: 2px solid var(--ovat-border);
    box-shadow: var(--ovat-shadow-sm);
}

/* ---- Side navigation --------------------------------------- */
/* The vertical sidebar should match the body's warm cream so it reads
   as one continuous warm surface, not a separate cool panel. Falcon
   sets the sidebar bg via --falcon-bg-navbar-glass on .navbar-collapse;
   we override the resolved selector directly.

   No border-right on the sidebar -- the warm-cream → white transition
   plus the cards floating with their own borders/shadows is enough
   visual separation. The earlier 1px cool-grey border-right was
   creating the "vertical grey line to the right of the logo" reported
   by the user (it ran the full sidebar height but was most visible
   inside the brand area at the top). */
.navbar-vertical,
.navbar-vertical .navbar-collapse {
    background-color: var(--ovat-surface-muted) !important;
    border-right: 0 !important;
}

/* Falcon's sidebar brand area has a subtle border-bottom that separates
   the logo from the first nav-label ("DASHBOARD"). Against the new
   warm-cream sidebar that 1px line reads as a stray "horizontal grey
   line under Remote Staffing Solutions" -- kill it. The brand and the
   first label are already visually separated by whitespace + the
   uppercase tracking on the label, so no rule is needed. */
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand-box,
.navbar-vertical > .d-flex,
.navbar-vertical > .d-flex.align-items-center {
    border-bottom: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

.navbar-vertical .navbar-vertical-content {
    padding-top: 1rem;
}
.navbar-vertical .navbar-nav .nav-link {
    color: var(--ovat-ink-muted);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--ovat-radius);
    margin: 0.125rem 0.5rem;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.navbar-vertical .navbar-nav .nav-link:hover {
    background-color: rgba(14, 148, 220, 0.06);
    color: var(--ovat-ink);
}
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link[aria-expanded="true"] {
    color: var(--ovat-blue);
    background-color: var(--ovat-blue-tint);
    box-shadow: inset 3px 0 0 0 var(--ovat-blue);
    font-weight: 600;
}
.navbar-vertical .nav-link-icon {
    color: var(--ovat-ink-soft);
    margin-right: 0.5rem;
}
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon {
    color: var(--ovat-blue);
}
.navbar-vertical-label {
    color: var(--ovat-ink-soft);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.navbar-vertical-divider hr,
.navbar-vertical hr.navbar-vertical-divider {
    border-top-color: var(--ovat-border) !important;
    opacity: 1;
}

/* ---- Pagination -------------------------------------------- */
.page-link {
    color: var(--ovat-blue);
    border-color: var(--ovat-border);
}
.page-link:hover {
    background-color: var(--ovat-blue-tint);
    color: var(--ovat-blue-deep);
}
.page-item.active .page-link {
    background-color: var(--ovat-blue);
    border-color:     var(--ovat-blue);
}

/* ---- Modals & dropdowns ------------------------------------ */
.modal-content {
    border-radius: var(--ovat-radius-xl);
    border: 1px solid var(--ovat-border);
}
.dropdown-menu {
    border: 1px solid var(--ovat-border);
    border-radius: var(--ovat-radius-lg);
    box-shadow: var(--ovat-shadow-lg);
}
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--ovat-blue);
}

/* ---- Alerts ------------------------------------------------ */
.alert         { border-radius: var(--ovat-radius-lg); }
.alert-primary { background-color: var(--ovat-blue-tint); color: var(--ovat-blue-deeper); border-color: var(--ovat-blue-soft); }
.alert-warning { background-color: #fff4d4;              color: #8a5a00;                  border-color: var(--ovat-amber); }

/* ---- Misc utility colors (used widely in templates) -------- */
.text-primary { color:            var(--ovat-blue)        !important; }
.bg-primary   { background-color: var(--ovat-blue)        !important; }
.text-warning { color:            var(--ovat-amber-deep)  !important; }
.bg-warning   { background-color: var(--ovat-amber)       !important; }

/* Falcon text-color scale (.text-900, .text-700, .text-500 etc.) is
   referenced everywhere in the views ("dark text", "muted text", etc.).
   Re-bind to our ink scale so it stops being a different greyscale
   ramp than the rest of the page. */
.text-900 { color: var(--ovat-ink)        !important; }
.text-800 { color: var(--ovat-ink)        !important; }
.text-700 { color: var(--ovat-ink-muted)  !important; }
.text-600 { color: var(--ovat-ink-muted)  !important; }
.text-500 { color: var(--ovat-ink-soft)   !important; }
.text-400 { color: #94a3b8                !important; }

/* Background scale used for badges, chip borders, etc. */
.bg-100   { background-color: var(--ovat-surface-muted) !important; }
.bg-200   { background-color: var(--ovat-surface-soft)  !important; }
.bg-300   { background-color: var(--ovat-border)        !important; }

/* Soft success/info/danger badges to match website's subdued accents */
.bg-soft-success { background-color: #ecfdf5 !important; color: #047857 !important; }
.bg-soft-danger  { background-color: #fef2f2 !important; color: #b91c1c !important; }

/* Status icons in tables (dashboard checklist uses .text-success / .text-danger
   on bi-check-square-fill and bi-x-square-fill) */
.text-success { color: #10b981 !important; }
.text-danger  { color: #ef4444 !important; }

/* ============================================================
   Dashboard "Let's get Started!" checklist
   ------------------------------------------------------------
   Inspired by the marketing site's "WHAT TO EXPECT ON THE CALL"
   amber-checkmark pattern. Each row is now annotated with
   .step-done or .step-pending in the view, and the bubble
   itself communicates state — no more separate red-X status
   icon floating at the right end of every pending row.
   ------------------------------------------------------------
   Done    -> solid amber 30px circle + white check (rewarding)
   Pending -> outlined brand-blue circle with the step number,
              with a brand-blue chevron-right at the row end
   ============================================================ */
.agreement-tbl th { padding: 0.75rem 0 !important; vertical-align: middle; }
.agreement-tbl tr.border-bottom { border-bottom-color: var(--ovat-border) !important; }

.agreement-tbl .step-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;       /* 30px */
    height: 1.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    margin-right: 0.625rem;
    flex-shrink: 0;
    vertical-align: middle;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease;
}

/* DONE: solid amber circle, white check inside (no number).
   Amber matches the marketing site's "what to expect" checkmarks
   and the brand CTA color — feels like a small reward. */
.agreement-tbl .step-done .step-bubble {
    background-color: var(--ovat-amber);
    color: var(--ovat-on-amber);
    border: 0;
    box-shadow: 0 1px 2px rgb(252 185 0 / 0.30);
}
.agreement-tbl .step-done .step-bubble i {
    font-size: 1.125rem;
    line-height: 1;
}

/* PENDING: white circle with a 1.5px brand-blue ring + brand-blue
   numeral. Reads as "open / inviting" rather than "missing / wrong". */
.agreement-tbl .step-pending .step-bubble {
    background-color: var(--ovat-surface);
    color: var(--ovat-blue-deep);
    border: 1.5px solid var(--ovat-blue);
}
.agreement-tbl .step-pending a:hover .step-bubble {
    background-color: var(--ovat-blue-tint);
    transform: translateY(-1px);
}

/* Right-end chevron — replaces the old solid red X. Only appears
   on pending rows; done rows leave the right cell empty. */
.agreement-tbl .step-chevron {
    color: var(--ovat-blue);
    font-size: 1.125rem;
    transition: transform 0.15s ease;
    display: inline-block;
}
.agreement-tbl .step-pending a:hover .step-chevron {
    transform: translateX(3px);
}

/* Row-level anchor styling. Done rows get the muted ink color so the
   user's eye is drawn to pending (actionable) rows instead. */
.agreement-tbl a {
    color: var(--ovat-ink-muted) !important;
    font-weight: 500;
    text-decoration: none;
}
.agreement-tbl .step-pending a {
    color: var(--ovat-ink) !important;
    font-weight: 600;
}
.agreement-tbl a:hover {
    color: var(--ovat-blue) !important;
}

/* "View all team members" link in My Team card footer */
.card-footer .btn-link {
    color: var(--ovat-blue) !important;
    text-decoration: none;
    font-weight: 500;
}
.card-footer .btn-link:hover {
    background-color: var(--ovat-blue-tint);
    color: var(--ovat-blue-deep) !important;
}

/* Spinner color in disabled placeholder buttons */
.onboarding-placeholder .spinner-border {
    color: var(--ovat-blue);
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Welcome card body — paragraphs get slightly more line-height and a
   tiny size bump so the section actually feels like a welcome and not
   a footnote. */
.card.welcome .card-body p,
.welcome-heading + p,
.welcome-heading ~ p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ovat-ink-muted);
    margin-bottom: 0.75rem;
}

/* Main content wrapper (Falcon's .content sits next to the sidebar).
   A touch more horizontal padding keeps cards from kissing the sidebar
   on smaller widths. */
.content {
    padding-top: 0.5rem;
}

/* ============================================================
   Footer
   ------------------------------------------------------------
   Originally tried as a navy "band" surface (mirroring the marketing
   site's deep-navy footer) -- pulled back per user feedback: the band
   looked too heavy on short pages where the cream body is otherwise
   uninterrupted. Reverting to a transparent footer that sits softly on
   the page bg, while keeping the cleaner markup (.page-footer-brand /
   .page-footer-copy / .social-icons rounded hit areas) in place.
   ============================================================ */
.content > footer {
    padding: 0;
    color: var(--ovat-ink-soft);
}
.page-footer-band {
    background-color: transparent;
    color: var(--ovat-ink-soft);
    padding: 0.75rem 0.25rem;
}
.page-footer-band p { color: inherit; }

.page-footer-band .page-footer-brand {
    color: var(--ovat-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
.page-footer-band .page-footer-brand:hover {
    color: var(--ovat-blue-deep);
}
.page-footer-band .page-footer-copy {
    margin-left: 0.375rem;
    color: var(--ovat-ink-soft);
}

/* Social icons — soft ink-muted by default, brand-blue on hover.
   Single visual weight so the footer reads as one row, not three
   competing brand logos. */
.page-footer-band .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: var(--ovat-ink-soft);
    margin-left: 0.25rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.page-footer-band .social-icons a:first-child { margin-left: 0; }
.page-footer-band .social-icons a:hover {
    background-color: var(--ovat-blue-tint);
    color: var(--ovat-blue);
}
.page-footer-band .social-icons [class*="bi-"] {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .page-footer-band {
        padding: 0.5rem 0.25rem;
        text-align: center;
    }
    .page-footer-band .social-icons a {
        margin-left: 0.125rem;
        margin-right: 0.125rem;
    }
}

/* Subtle status-online dot on team avatars — rebrand from Falcon green to ours */
.status-online::before,
.avatar.status-online::before {
    background-color: #10b981 !important;
    box-shadow: 0 0 0 2px var(--ovat-surface);
}


/* ============================================================
   4b. Vendor library overrides (CDN-loaded on a few client pages)
   ------------------------------------------------------------
   Flatpickr (clients/pages/index.php) and SweetAlert2 (index.php
   and funding-banking-view.php) ship hardcoded blues/purples that
   wouldn't pick up our --falcon-* token swap. Narrow targeted fixes:
   ============================================================ */

/* Flatpickr — selected day & today should be brand blue */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--ovat-blue);
    border-color: var(--ovat-blue);
    color: #fff;
}
.flatpickr-day.today {
    border-color: var(--ovat-blue);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--ovat-blue-tint);
    border-color: var(--ovat-blue);
    color: var(--ovat-blue-deeper);
}

/* SweetAlert2 — confirm button brand color, modal radius */
.swal2-popup {
    border-radius: var(--ovat-radius-xl) !important;
    font-family: var(--ovat-font-sans) !important;
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-confirm:not(:disabled):hover {
    background-color: var(--ovat-blue) !important;
    border-color: var(--ovat-blue) !important;
    border-radius: var(--ovat-radius) !important;
}
.swal2-styled.swal2-confirm:not(:disabled):hover {
    background-color: var(--ovat-blue-deep) !important;
    border-color: var(--ovat-blue-deep) !important;
}
.swal2-styled.swal2-cancel {
    border-radius: var(--ovat-radius) !important;
}


/* ============================================================
   5. Dark-mode override
   ------------------------------------------------------------
   Falcon ships a [data-bs-theme="dark"] palette toggled by the
   user via app/Views/clients/pages/settings.php. The marketing
   site has no dark mode, so we re-bind dark to the brand's
   --ovat-deep family so the toggle keeps working on-brand
   instead of looking like a different product.
   ============================================================ */
[data-bs-theme="dark"] {
    --falcon-body-bg:                          var(--ovat-deep);
    --falcon-body-color:                       #cbd5e1;
    --falcon-border-color:                     rgba(255, 255, 255, 0.08);
    --falcon-card-bg:                          var(--ovat-deep-2);
    --falcon-primary:                          var(--ovat-blue-soft);
    --falcon-primary-rgb:                      79, 182, 232;
    --falcon-navbar-vertical-link-color:       #94a3b8;
    --falcon-navbar-vertical-link-hover-color: #f1f5f9;
    --falcon-navbar-vertical-link-active-color: var(--ovat-blue-soft);
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] main.main {
    background-color: var(--ovat-deep);
    color: #cbd5e1;
}
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .card {
    background-color: var(--ovat-deep-2);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .navbar-top,
[data-bs-theme="dark"] .navbar-glass {
    background-color: var(--ovat-deep-2) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .navbar-brand {
    color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link {
    color: #94a3b8;
}
[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: #f1f5f9;
}
[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link[aria-expanded="true"] {
    background-color: rgba(14, 148, 220, 0.18);
    color: var(--ovat-blue-soft);
    box-shadow: inset 3px 0 0 0 var(--ovat-blue-soft);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--ovat-deep-3);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748b;
}
[data-bs-theme="dark"] .table > thead {
    background-color: var(--ovat-deep-3);
    color: #f1f5f9;
}
[data-bs-theme="dark"] .btn-falcon-primary,
[data-bs-theme="dark"] .btn-falcon-default,
[data-bs-theme="dark"] .btn-falcon-warning,
[data-bs-theme="dark"] .btn-falcon-success,
[data-bs-theme="dark"] .btn-falcon-danger,
[data-bs-theme="dark"] .btn-falcon-info {
    background-color: var(--ovat-deep-2);
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}


/* ============================================================
   8. Populated-data polish — clean up rows when content arrives
   ============================================================
   These styles target the "real data" states reported by the user
   ("when data is in these, it looks like this we need to improve").
   The dashboard's My Team mini-card and the supervisor contact row
   were both printing icons in `.text-warning` (amber) -- semantically
   wrong (these are info markers, not warnings) and visually clashing
   with the brand-blue link in the same card. The teammate-detail
   page banner was also still hardcoded to Falcon's #edf2f9 cool
   slate. All three are normalised here. */


/* ---- My Team mini-card (dashboard) ------------------------- */
/* Each teammate is now a single tappable row with avatar + name +
   compact meta line + truncated email. Matches the marketing site's
   contact-card density. */

/* Bootstrap 5.0.0-beta3 doesn't ship `.min-w-0`; we need it on the
   flex child that contains text-truncate, otherwise the email pushes
   the row wider than the card. */
.min-w-0 { min-width: 0 !important; }

.teammate-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.teammate-row {
    border-radius: var(--ovat-radius);
    transition: background-color .15s ease;
}
.teammate-link {
    display: flex;
    padding: 0.625rem 0.75rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--ovat-radius);
}
.teammate-link:hover,
.teammate-link:focus {
    background-color: var(--ovat-blue-tint);
    color: inherit;
    text-decoration: none;
}
.teammate-link:hover .teammate-name {
    color: var(--ovat-blue-deep);
}
.teammate-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ovat-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.125rem;
    line-height: 1.3;
}
.teammate-meta {
    font-size: 0.75rem;
    color: var(--ovat-ink-soft);
    line-height: 1.4;
}
.teammate-meta-sep {
    margin: 0 0.375rem;
    color: var(--ovat-border-strong);
}
.teammate-email {
    font-size: 0.75rem;
    color: var(--ovat-ink-muted);
    line-height: 1.4;
    /* `min-w-0` on parent + text-truncate on this <p> = ellipsis on overflow */
    max-width: 100%;
}
.teammate-icon {
    color: var(--ovat-blue);
    font-size: 0.6875rem;
    margin-right: 0.25rem;
    width: 0.875rem;
    text-align: center;
    display: inline-block;
}
/* Floor Supervisor contact rows (was `text-warning` icons + plain text) */
.supervisor-contact {
    color: var(--ovat-ink-muted);
    font-size: 0.8125rem;
}
.supervisor-contact a {
    color: var(--ovat-ink-muted);
    text-decoration: none;
}
.supervisor-contact a:hover {
    color: var(--ovat-blue-deep);
    text-decoration: underline;
}
.supervisor-contact .teammate-icon {
    font-size: 0.75rem;
    margin-right: 0.375rem;
}

/* Dark-mode counterparts for the teammate strip */
[data-bs-theme="dark"] .teammate-name {
    color: #f1f5f9;
}
[data-bs-theme="dark"] .teammate-link:hover,
[data-bs-theme="dark"] .teammate-link:focus {
    background-color: rgba(14, 148, 220, 0.18);
}


/* ---- Profile banner (used by both /profile and /team/:id) -- */
/* Single source of truth for the brand-tinted profile header.
   Previously /profile.php had this inline (with optional website
   screenshot underneath) and /teammate_profile.php hardcoded
   Falcon's #edf2f9 cool slate -- which read as a blank cool box
   against the new warm chrome. Now both views share the same
   brand gradient. profile.php still inlines its own override when
   a website screenshot is available (treats the gradient as an
   overlay); the teammate page just uses the gradient cleanly. */
.profile-banner-fill {
    background-image:
        linear-gradient(135deg,
            rgba(14, 148, 220, 0.45) 0%,
            rgba(79, 182, 232, 0.30) 45%,
            rgba(252, 185, 0, 0.25) 100%),
        linear-gradient(135deg, #e5f4fc 0%, #f3fafe 60%, #faf6ec 100%);
    background-size: cover;
    background-position: center;
}
[data-bs-theme="dark"] .profile-banner-fill {
    background-image:
        linear-gradient(135deg,
            rgba(14, 148, 220, 0.55) 0%,
            rgba(79, 182, 232, 0.35) 45%,
            rgba(252, 185, 0, 0.25) 100%),
        linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #1e293b 100%);
}


/* ---- Funding source / payment-method panels --------------- */
/* Used on funding-banking-view.php (and where else: funding-credit-card.php
   when we get to it). Replaces the old card-in-card-with-cream-bg pattern
   the user flagged as "tan inside the bubbles". A .payment-panel is a
   subtle outlined section (NO nested card, NO cream bg) that sits inside
   the main card-body and presents a single payment method cleanly. */
.payment-panel {
    border: 1px solid var(--ovat-border);
    border-radius: var(--ovat-radius-lg);
    background-color: var(--ovat-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.payment-panel:hover {
    border-color: var(--ovat-border-strong);
    box-shadow: var(--ovat-shadow-sm);
}
.payment-panel .payment-panel-header {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--ovat-border);
}
.payment-panel .payment-panel-header h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ovat-ink);
    /* The leading <i class="far fa-..."> is given a brand-blue rounded-square
       container by the .card h5 > i:first-child[class*="fa-"] rule above. */
}
.payment-panel .payment-panel-body {
    padding: 1rem 1.125rem;
}

/* Definition list for the labelled fields ("Account #", "Account Type",
   "Expires") inside a payment panel. Two-column grid: label left, value
   right, on a single row each. Reads cleanly without leaning on
   <strong>...inline text...<br> soup. */
.payment-meta {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}
.payment-meta dt {
    color: var(--ovat-ink-soft);
    font-weight: 500;
}
.payment-meta dd {
    color: var(--ovat-ink);
    font-weight: 600;
    margin: 0;
    word-break: break-word;
}
.payment-status-online {
    color: var(--ovat-success);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-left: 0.25rem;
}

/* Payment action row (Add New Bank / Add New Card / Make Primary /
   Remove). Inline buttons with consistent gap, no breadcrumb bg. */
.payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}


/* ============================================================
   9. Mobile polish (≤ 991px / md and below)
   ============================================================
   The Falcon admin theme was designed primarily for desktop and
   the portal had never been audited at iPhone-class viewports.
   The dashboard's hamburger menu collided with the topbar logo,
   the brand logo was 170px wide (eats half the topbar at 390px),
   the agreement-sign contract preview had hardcoded `pt` table
   widths that triggered a horizontal scrollbar inside the card,
   and form pages had unnecessary horizontal padding. Each fix
   below is scoped to the breakpoint where it actually matters
   so the desktop layout is untouched. */


/* ---- Mobile sidebar drawer (≤ 1199px / xl-) --------------- */
/* Falcon's `.navbar-expand-xl` collapses the sidebar at <1200px,
   and Bootstrap's default `.collapse` mechanism then expands the
   menu INLINE -- pushing all subsequent content (including the
   topbar) downward. That created two issues at mobile:
   1. The menu items are sandwiched between the topbar and the page
      content, with the first item ("Home") visually clipped by the
      topbar above it -- because Falcon doesn't add any top padding
      to the .navbar-collapse on mobile.
   2. The transition is a height-based slide, which feels janky
      compared to the modern "drawer slides in from the left"
      pattern that users expect from any mobile site (including
      our marketing site).
   Solution: at <1200px, lift the .navbar-collapse out of normal
   flow into a fixed-position drawer that slides in from the left,
   with a click-anywhere-to-close backdrop. The Bootstrap collapse
   JS still toggles the `.show` class for free; we just drive a CSS
   transform off it. */
@media (max-width: 1199.98px) {
    /* The drawer IS .navbar-vertical itself. Falcon defaults it to
       `position: fixed; top: 4.3125rem; width: 100%; margin: 0 -1rem;`
       (sit below the topbar, full width, with negative margin that
       caused horizontal scroll). We re-anchor it to a 280px slide-in
       drawer that covers the topbar too. */
    .navbar-vertical {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(280px, 80vw) !important;
        max-width: 80vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 1.25rem 0 !important;
        z-index: 1045 !important;               /* above topbar (1030), below modals (1055) */
        background-color: var(--ovat-surface-muted) !important;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        display: flex !important;
        flex-direction: column;
    }
    /* When the inner .navbar-collapse has Bootstrap's `.show` class
       (i.e., the user tapped the hamburger), slide the drawer in. We
       use :has() to bubble the inner state up to the outer .navbar-vertical
       container -- supported in Chrome/Edge/Firefox/Safari 15.4+, which
       covers all modern mobile browsers. */
    .navbar-vertical:has(.navbar-collapse.show) {
        transform: translateX(0);
    }
    /* Always render the inner collapse content -- we drive visibility
       off the drawer's transform, not the inner display:none. The
       width:100% defeats Falcon's collapsed-state width:3.125rem rule
       in case the html.navbar-vertical-collapsed class is set (it
       shouldn't, since default.php now resets that flag every page
       load, but defensive). */
    .navbar-vertical .navbar-collapse {
        display: block !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        background-color: transparent !important;
        flex: 1 1 auto;
    }
    .navbar-vertical .navbar-collapse.collapsing {
        transition: none;
    }
    /* Inner scroll container needs to be unconstrained so the drawer can
       scroll naturally. Falcon hardcodes `max-height: calc(100vh - 4.3125rem)`
       on .navbar-vertical-content -- override at mobile. Also disable the
       OverlayScrollbars-managed scroll wrapper here. */
    .navbar-vertical .navbar-vertical-content,
    .navbar-vertical .navbar-vertical-content.scrollbar {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 0.75rem !important;
        width: 100% !important;
    }
    /* Kill any OverlayScrollbars-injected wrappers inside the drawer at mobile */
    .navbar-vertical .navbar-vertical-content .os-host,
    .navbar-vertical .navbar-vertical-content .os-padding,
    .navbar-vertical .navbar-vertical-content .os-viewport {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Topbar overflow guard ----------------------------------
       navigation-top.php wraps each row in `<div class="row">` with no
       inner `.col-*`, so Bootstrap's row gutter (-12px each side)
       protrudes past the container -- on a 390px viewport the avatar
       dropdown ends up at x≈411, triggering a horizontal scrollbar.
       Zero out the gutter on the topbar's rows specifically. */
    .navbar-top .row,
    .navbar-glass .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /* Avatar dropdown nudge: pe-0 in the markup means the caret hugs
       the right edge of the topbar; on mobile this looks too tight. */
    .navbar-top .navbar-nav-icons,
    .navbar-glass .navbar-nav-icons {
        margin-right: 0 !important;
    }
    .navbar-top .nav-link.py-3.pe-0,
    .navbar-glass .nav-link.py-3.pe-0 {
        padding-right: 0.25rem !important;
    }

    /* Belt-and-suspenders: clip any sub-pixel horizontal overflow on
       the body so a runaway pixel from a third-party widget (Tawk
       chat bubble, etc.) can't cause the whole page to scroll
       sideways. The page never legitimately needs horizontal scroll. */
    body {
        overflow-x: hidden;
    }
    /* Backdrop: rendered when the inner navbar-collapse has .show.
       Targeting `:has()` keeps this CSS-only and reads the same source
       of truth as the drawer's transform rule above. */
    body:has(.navbar-vertical .navbar-collapse.show)::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: 1044;                          /* one less than the drawer */
        animation: ovat-fade-in 0.2s ease;
    }
    /* Tap-to-close is wired in default.php (small JS that calls
       bootstrap.Collapse#hide() on clicks outside the drawer) -- pure
       CSS can't capture clicks on the backdrop pseudo-element. */

    /* Topbar should always have the warm cream background (it was
       inheriting transparency from .navbar-glass at certain widths). */
    .navbar-top,
    .navbar-glass {
        background-color: var(--ovat-surface-muted) !important;
    }

    /* Brand logo in the topbar -- 170px hardcoded in the markup eats
       almost half of a 390px viewport. Constrain visually without
       touching the HTML. */
    .navbar-top .navbar-brand img,
    .navbar-glass .navbar-brand img {
        max-width: 130px;
        height: auto;
    }
}

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


/* ---- Mobile container/page padding (≤ 575px / sm-) -------- */
/* Tighten Falcon's default `.container` padding on phones so cards
   don't feel cramped and tap targets get the full screen width. */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left:  0.75rem;
        padding-right: 0.75rem;
    }
    /* Card internal padding is generous on desktop; trim a hair on
       phones so small screens don't waste real estate. */
    .card .card-header,
    .card .card-body {
        padding: 1rem 1rem;
    }
    .card .card-footer {
        padding: 0.875rem 1rem;
    }
    /* Brand logo even tighter on smallest phones */
    .navbar-top .navbar-brand img,
    .navbar-glass .navbar-brand img {
        max-width: 110px;
    }
    /* Welcome heading was h4 (1.5rem); trim on phones so it doesn't
       wrap to 3 lines. */
    .welcome-heading {
        font-size: 1.25rem;
    }
}


/* ---- Agreement contract preview (≤ 767px / md-) ----------- */
/* The contract preview inside agreement-sign.php has a 2-column
   header table with hardcoded `pt` widths (275pt + 277pt = ~736px)
   and a 246px-wide logo image. At <768px this overflows the .agreement
   card and triggers a horizontal scrollbar inside the preview --
   on a 390px viewport the entire right column ("Online VA Team /
   PH: ... / Email: ...") is unreachable without horizontal scrolling.

   Marking the agreement card as `.agreement` (which it already has),
   we override the inline styles with !important and stack the header
   on a single column. */
@media (max-width: 767.98px) {
    .agreement table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    .agreement table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0.5rem 0 !important;
    }
    .agreement img {
        max-width: 60% !important;
        height: auto !important;
    }
    /* The fixed max-height: 400px scroll-inside-a-card pattern is also
       cramped on small phones; let it grow to viewport-relative. */
    .agreement {
        max-height: 60vh !important;
        font-size: 0.875rem;
    }
}