/* ============================================================================
   QWAITON — app theme ("Aurora Console")

   The product wears the marketing site's design system (qwaiton.com) so a
   visitor going website -> signup -> app never sees the brand change.

   HOW THIS WORKS
   An OVERRIDE LAYER loaded AFTER the app-assets/ Materialize bundle. The
   project has no build step (no package.json — see CLAUDE.md), so the vendor
   CSS cannot be recompiled; everything here is plain CSS that wins on source
   order and specificity instead.

   LAYERING — vendor CSS -> THIS FILE -> brand_theme.
   brand_theme.blade.php is emitted last and owns every tenant-brandable
   COLOUR (--brand-*). This file owns SHAPE: layout, spacing, radii, shadows,
   typography, and the neutral chrome a tenant cannot recolour. Do not fight
   brand_theme on colour here — a tenant's palette must always win.

   SPECIFICITY NOTES (read before editing)
   Materialize ships several rules this file has to out-specify. The two that
   bite hardest:
     * .sidenav li > a > i.material-icons  {color: rgba(0,0,0,.54)}  (0,2,3)
       — black icons on the dark sidebar. Every sidebar icon rule below is
       written at (0,3,4) with :not(.active) so it beats that one while
       leaving the ACTIVE icon to brand_theme's --brand-on-primary.
     * .input-field > label — absolutely positioned INSIDE the field, which
       only works with Materialize's underline inputs. This file draws filled
       boxes instead, so labels are pinned above the box in both states.
   `!important` is used only where the vendor declaration is itself
   `!important` (marked inline); everything else wins on specificity so that
   inline colours in the Blade — the red delete buttons, the served/no-show
   status colours — keep theirs.
   ========================================================================== */

:root {
    /* ---- Palette: lifted verbatim from the site's /css/style.css ---------
       If the site's palette changes, re-copy this block rather than
       hand-editing values. */
    --ink-900: #060B1E;
    --ink-800: #0A1128;
    --ink-700: #101A3A;
    --ink-600: #1A2547;
    --indigo: #818CF8;
    --indigo-deep: #6366F1;
    --cyan: #22D3EE;
    --mint: #4ADE80;
    --amber: #F59E0B;
    --pink: #F472B6;

    --grad: linear-gradient(100deg, #818CF8, #22D3EE);
    --grad-btn: linear-gradient(100deg, #6366F1, #0EA5E9);

    --paper: #F7F9FE;
    --paper-2: #FFFFFF;
    --line: #E4E9F4;
    --text-dark: #0B1229;
    --text-mut: #5B6478;
    --text-light: rgba(235, 240, 255, 0.72);

    --font-head: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius: 20px;
    --radius-sm: 12px;
    --shadow-lg: 0 24px 60px -12px rgba(11, 18, 41, 0.18);
    --shadow-sm: 0 6px 24px -6px rgba(11, 18, 41, 0.10);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- App-shell tokens (not on the site — console chrome only) ------- */
    --sidebar-w: 250px;
    --topbar-h: 64px;
    --nav-idle: #AEB9D8;          /* sidebar label, resting */
    --nav-icon: #7C89B0;          /* sidebar icon, resting */
    --card-radius: 16px;
    --field-bg: #FBFCFF;
    --field-radius: 12px;
    --ring: 0 0 0 4px rgba(99, 102, 241, 0.14);
}

/* ========================================================================
   1. TYPE & BASE SURFACE
   ===================================================================== */

html body,
body input,
body select,
body textarea,
body button,
body .btn,
body .btn-large,
body .btn-small,
body .btn-flat {
    font-family: var(--font-body);
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .card-title,
body .breadcrumbs-title,
body .brand-sidebar span.logo-text {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-dark);
}

body {
    color: var(--text-dark);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
}

body.vertical-layout #main,
body #main {
    background: var(--paper);
}

/* A calm aurora wash behind the workspace, so large empty pages (an empty
   services table, a fresh dashboard) still read as a designed surface
   rather than a blank sheet. Fixed so it never scrolls out from under.

   Excluded from .brand-public-screen (kiosk, display, signage): those zero
   #main's sidebar margin and run full-bleed, so a wash inset by --sidebar-w
   renders as a stray rectangle down one side. They also carry the tenant's
   own --brand-display-bg, which this must not tint. */
body.vertical-layout:not(.brand-public-screen) #main::before {
    content: "";
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    left: var(--sidebar-w);
    height: 420px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 100% at 82% 0%, rgba(34, 211, 238, 0.10), transparent 70%),
        radial-gradient(52% 100% at 18% 0%, rgba(99, 102, 241, 0.12), transparent 72%);
}

body.vertical-layout:not(.brand-public-screen) #main > * {
    position: relative;
    z-index: 1;
}

/* Below the sidenav's breakpoint the rail is off-canvas, so the wash starts
   at the viewport edge. */
@media only screen and (max-width: 992px) {
    body.vertical-layout:not(.brand-public-screen) #main::before { left: 0; }
}

/* ========================================================================
   2. TOP BAR
   By DEFAULT the bar is the same ink as the sidebar and the footer, so the
   three read as one continuous dark frame around the paper workspace.
   brand_theme overrides all three with the tenant's own gradient once they
   have set a palette — see the @if($theme['customized']) block there.
   ===================================================================== */

body .page-topbar .navbar-main,
body .page-topbar nav.navbar-color {
    background-color: var(--ink-800);
    background-image:
        radial-gradient(120% 300% at 0% 0%, rgba(99, 102, 241, 0.20), transparent 60%),
        radial-gradient(90% 260% at 100% 100%, rgba(34, 211, 238, 0.10), transparent 70%);
    color: #FFFFFF;
    box-shadow: 0 2px 18px -6px rgba(11, 18, 41, 0.45);
    border-bottom: 1px solid rgba(129, 140, 248, 0.14);
}

/* The sidebar's brand block carries the same fill, so the top strip reads as
   one bar instead of showing a seam at x = --sidebar-w. */
body .brand-sidebar {
    background-color: var(--ink-800);
    background-image: radial-gradient(220% 300% at 0% 0%, rgba(99, 102, 241, 0.20), transparent 60%);
    border-bottom: 1px solid rgba(129, 140, 248, 0.14);
}

body .page-topbar nav .nav-wrapper {
    height: var(--topbar-h);
    line-height: var(--topbar-h);
}

body .page-topbar .navbar-list > li > a,
body .page-topbar .navbar-list > li > span {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The wordmark at the left of the bar. */
body .page-topbar .navbar-list.left > li > span {
    font-size: 1.18rem !important; /* beats the inline font-size: x-large */
    letter-spacing: -0.03em;
}

@media only screen and (min-width: 993px) {
    /*
     * The top bar spans the full width and starts this list at a 60px inset,
     * which is INSIDE the 250px rail — so the sidebar's fixed brand block
     * simply covers it. It only surfaced when the rail was collapsed, and
     * then it read as a second, duplicate "Qwaiton" next to the logo mark.
     *
     * So: hidden while the rail is expanded (the brand block is the wordmark
     * there), shown and cleared of the 64px rail once it is collapsed.
     */
    /* Scoped to the wrapper's OWN child list: both layouts also put the
       signed-in user in an <li class="navbar-list left"> nested inside the
       RIGHT-hand <ul>, and a loose `.navbar-list.left` hides that too. */
    body .page-topbar nav.nav-collapsible > .nav-wrapper > ul.navbar-list.left {
        visibility: hidden;
    }

    body .page-topbar nav.nav-collapsible.nav-collapsed > .nav-wrapper > ul.navbar-list.left {
        visibility: visible;
        padding-left: 86px !important; /* beats the inline padding-left: 60px */
    }
}

/* Icon buttons get a glassy chip so they read as controls, not loose glyphs. */
body .page-topbar .navbar-list.right > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0 3px;
    padding: 0 10px;
    border-radius: 12px;
    line-height: 40px;
    transition: background 0.25s var(--ease);
}

body .page-topbar .navbar-list.right > li > a:hover {
    background: rgba(255, 255, 255, 0.16);
}

body .page-topbar .navbar-list.right > li > a > i.material-icons {
    height: 40px;
    line-height: 40px;
}

body .page-topbar .navbar-list .avatar-status img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    object-fit: cover;
}

/* ========================================================================
   3. SIDEBAR
   ===================================================================== */

body .sidenav-main,
body .sidenav.sidenav-fixed,
body aside.sidenav-main .sidenav {
    background-color: var(--ink-800);
    background-image:
        radial-gradient(120% 40% at 0% 0%, rgba(99, 102, 241, 0.20), transparent 62%),
        radial-gradient(90% 30% at 100% 100%, rgba(34, 211, 238, 0.10), transparent 70%);
    border-right: 1px solid rgba(129, 140, 248, 0.14);
}

body .brand-sidebar {
    height: var(--topbar-h);
    line-height: var(--topbar-h);
}

body .brand-sidebar .logo-wrapper {
    height: var(--topbar-h);
    line-height: var(--topbar-h);
    margin: 0;
}

body .brand-sidebar span.logo-text {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

/* --- the Qwaiton mark, as used on the marketing site ------------------- */

body .brand-sidebar .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Reserve the collapse toggle's corner. The toggle is absolutely
       positioned at the right of the rail, so without this the wordmark
       (worst case "Qwaiton" + the console's ADMIN chip) simply runs under
       it. Clipping a long wordmark is the better failure. */
    max-width: calc(100% - 58px);
    overflow: hidden;
    white-space: nowrap;
}

body .brand-sidebar .qw-logo-mark {
    flex: none;
    width: 30px;
    height: 30px;
    display: block;
}

/* The wordmark's trailing dot is cyan on the site. */
body .brand-sidebar .qw-logo-dot {
    color: var(--cyan);
}

/* --- collapsed rail ---------------------------------------------------
   The vendor treats "collapsed" as a transient hover state and HIDES the
   toggle in it, which strands a user who collapsed the rail on purpose with
   no way back. In the 64px rail the toggle takes the brand block's place,
   centred — it is the only affordance that fits, and it is the one that gets
   the rail back.

   IT HIDES THE TOGGLE WITH visibility/opacity, NOT display (style.css:9341):

       .nav-collapsed .brand-sidebar .navbar-toggler,
       .nav-collapsed .brand-sidebar .brand-logo span {
           visibility: hidden;
           transition: visibility 0s 2s, opacity .05s linear;
           opacity: 0;
       }

   Overriding `display` alone therefore did nothing — the control was laid
   out and hit-testable in the DOM but painted at zero opacity, so the rail
   looked like it had no way out. All three declarations must be reset, and
   the transition with them: its `visibility 0s 2s` would otherwise hold the
   toggle invisible for two seconds every time the rail collapses.

   This selector is (0,3,1) against the vendor's (0,3,0), so it wins on
   specificity — no !important needed (see the layering note at the top). */
body .nav-collapsed .brand-sidebar .navbar-toggler {
    visibility: visible;
    opacity: 1;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

body .nav-collapsed .brand-sidebar .brand-logo {
    display: none;
}

/* The call page's right-hand panel ("Next to call" / "Called") is a
   persistent reference list, opened and closed only from its toggle — see
   jlRightSidenav() in public/js/app.js, which also drops Materialize's
   backdrop click-to-close. What is left of that backdrop must neither dim the
   work area nor swallow clicks on it, or the call page would be unusable for
   as long as the panel is open.

   !important is required here: Materialize animates the overlay's opacity
   through INLINE styles, and an inline declaration otherwise beats any
   selector this file can write. */
body .sidenav-overlay.qw-overlay-passthrough {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Centre the icons once the labels are gone. */
body .nav-collapsed .sidenav li > a,
body .nav-collapsed .sidenav li > a.collapsible-header {
    margin-right: 0;
    border-radius: 0;
}

body .nav-collapsed .sidenav li > a > i.material-icons {
    margin-right: 0;
    width: 100%;
    text-align: center;
    float: none;
}

/* The aurora wash and the footer both key off the expanded rail width. */
body.vertical-layout:not(.brand-public-screen) #main.main-full::before {
    left: 64px;
}

@media only screen and (min-width: 993px) {
    /* The vendor pads the footer off `.nav-lock` alone; the collapse keeps
       that class (so hover cannot undo the user's choice), so the collapsed
       width has to be restated here or the footer stays indented 257px. */
    body aside.sidenav-main.nav-lock.nav-collapsed ~ footer {
        padding-left: 71px;
    }
}

body .sidenav.sidenav-fixed {
    padding-top: 14px !important; /* beats the inline padding-top: 20px */
}

/* "Admin" badge next to the wordmark in the superadmin console. Mark +
   wordmark + chip + collapse toggle all have to fit inside the 250px rail,
   so the console's wordmark runs a size smaller than the tenant app's. */
body .brand-sidebar .qw-console-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

body .brand-sidebar .logo-text.qw-console-wordmark {
    font-size: 1.1rem;
}

/* --- nav items ------------------------------------------------------- */

body .sidenav li > a,
body .sidenav li > a.collapsible-header {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    height: 46px;
    line-height: 46px;
    margin: 2px 14px 2px 0;
    border-radius: 0 999px 999px 0;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

body .sidenav li > a > i.material-icons,
body .sidenav li > a.collapsible-header > i.material-icons {
    height: 46px;
    line-height: 46px;
    margin-right: 16px;
    font-size: 20px;
    transition: color 0.25s var(--ease);
}

/* THE FIX: out-specifies materialize.css:9657
   `.sidenav li > a > i.material-icons {color: rgba(0,0,0,.54)}` (0,2,3),
   which painted the icons black on the dark sidebar. Scoped to :not(.active)
   so the active item's icon still takes --brand-on-primary from brand_theme. */
body .sidenav li > a:not(.active) > i.material-icons,
body .sidenav li > a.collapsible-header:not(.active) > i.material-icons {
    color: var(--nav-icon);
}

body .sidenav li > a:not(.active),
body .sidenav li > a.collapsible-header:not(.active) {
    color: var(--nav-idle);
}

body .sidenav li > a:not(.active):hover {
    /* vendor sets this !important */
    background-color: rgba(129, 140, 248, 0.14) !important;
    color: #FFFFFF;
}

body .sidenav li > a:not(.active):hover > i.material-icons {
    color: var(--indigo);
}

/* Active item: brand_theme paints the fill; the shape and lift are here. */
body .sidenav-active-rounded .sidenav li > a.active,
body .sidenav li > a.active {
    font-weight: 600;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 10px 24px -12px rgba(99, 102, 241, 0.9);
}

/* Sub-menu (Reports) */
body .sidenav .collapsible-body {
    background-color: rgba(6, 11, 30, 0.42);
}

body .sidenav .collapsible-body li > a {
    font-size: 0.85rem;
    height: 40px;
    line-height: 40px;
}

body .sidenav .collapsible-body li > a > i.material-icons {
    height: 40px;
    line-height: 40px;
    font-size: 9px;
}

body .sidenav li.open {
    background: rgba(129, 140, 248, 0.06);
}

/* Nav rows are a fixed 46px; a label that wraps spills into the next item. */
body .sidenav li > a .menu-title {
    white-space: nowrap;
}

/* "Upgrade" pills on plan-gated nav links. */
body .sidenav .new.badge {
    display: inline-block;
    float: none;
    min-width: 0; /* vendor sets min-width: 3rem, which forces a wrap */
    margin-left: 8px;
    padding: 0 9px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 18px;
    height: 18px;
    text-transform: uppercase;
}

body .sidenav::-webkit-scrollbar { width: 6px; }
body .sidenav::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.35);
    border-radius: 999px;
}

/* ========================================================================
   4. PAGE HEADER (#breadcrumbs-wrapper)
   Every content view opens with this band; the vendor ships it flat grey.
   ===================================================================== */

body #breadcrumbs-wrapper {
    background: transparent;
    padding: 26px 0 6px;
}

body #breadcrumbs-wrapper .breadcrumbs-title {
    position: relative;
    margin: 0;
    padding-left: 15px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/* Gradient tick to the left of every page title — a small, consistent
   signature that ties the console to the site's aurora gradient. */
body #breadcrumbs-wrapper .breadcrumbs-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 1.15em;
    border-radius: 999px;
    background: var(--grad);
    transform: translateY(-50%);
}

body #breadcrumbs-wrapper .breadcrumbs {
    margin: 0;
    line-height: 1;
}

/* The round action button that sits at the right of the page header. */
body #breadcrumbs-wrapper .breadcrumbs .btn-floating {
    box-shadow: 0 10px 24px -10px rgba(99, 102, 241, 0.75);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

body #breadcrumbs-wrapper .breadcrumbs .btn-floating:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -10px rgba(99, 102, 241, 0.85);
}

/* ========================================================================
   5. CARDS
   ===================================================================== */

body .card,
body .card-panel,
body .collection {
    border-radius: var(--card-radius);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(11, 18, 41, 0.04), 0 12px 32px -18px rgba(11, 18, 41, 0.20);
    background: var(--paper-2);
}

body .card .card-content {
    padding: 24px 26px;
}

body .card .card-title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

body .divider {
    background-color: var(--line);
}

/* ========================================================================
   6. DASHBOARD KPI TILES
   The four tiles ship with Materialize's stock cyan/red/orange/green utility
   classes, which read as a different product next to the site's palette.
   Re-tinted here rather than in the Blade so the markup (and its
   translations) stay untouched. Materialize sets these !important.
   ===================================================================== */

#card-stats .card-content.cyan   { background-image: linear-gradient(135deg, #6366F1, #4F46E5); background-color: #6366F1 !important; }
#card-stats .card-action.cyan    { background-color: #4338CA !important; }

#card-stats .card-content.red    { background-image: linear-gradient(135deg, #22C55E, #15803D); background-color: #16A34A !important; }
#card-stats .card-action.red     { background-color: #15803D !important; }

#card-stats .card-content.orange { background-image: linear-gradient(135deg, #FBBF24, #D97706); background-color: #F59E0B !important; }
#card-stats .card-action.orange  { background-color: #B45309 !important; }

#card-stats .card-content.green  { background-image: linear-gradient(135deg, #22D3EE, #0284C7); background-color: #0EA5E9 !important; }
#card-stats .card-action.green   { background-color: #0369A1 !important; }

/* The action strip is an empty footer band on these tiles; keep it a thin,
   deliberate base rather than a floating grey shelf. */
#card-stats .card-action {
    padding: 0;
    height: 8px;
    border: 0 !important; /* vendor sets a top border !important */
}

#card-stats .card {
    border: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
    box-shadow: 0 14px 34px -18px rgba(11, 18, 41, 0.55);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

#card-stats .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -20px rgba(11, 18, 41, 0.6);
}

#card-stats .card-content {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 20px;
}

/* A soft highlight in the corner keeps the flat fill from looking like a
   solid block of colour. */
#card-stats .card-content::after {
    content: "";
    position: absolute;
    top: -55%;
    right: -18%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    pointer-events: none;
}

#card-stats .card-stats-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

#card-stats .card-stats-number {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2.35rem;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

/* ========================================================================
   7. BUTTONS
   Pill buttons with the site's shape. Deliberately NOT !important so that
   elements carrying an explicit inline colour keep theirs.
   ===================================================================== */

body .btn,
body .btn-large,
body .btn-small {
    height: auto;
    min-height: 40px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 8px 22px -12px rgba(11, 18, 41, 0.55);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s;
}

body .btn:hover,
body .btn-large:hover,
body .btn-small:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
    box-shadow: 0 16px 30px -14px rgba(11, 18, 41, 0.6);
}

body .btn:active,
body .btn-large:active,
body .btn-small:active {
    transform: translateY(0);
}

body .btn-flat {
    text-transform: none;
    font-family: var(--font-head);
    font-weight: 600;
    border-radius: 999px;
    box-shadow: none;
}

body .btn-floating {
    box-shadow: 0 10px 22px -10px rgba(11, 18, 41, 0.55);
}

body .btn i.material-icons {
    line-height: inherit;
}

/* ========================================================================
   8. FORMS
   Materialize draws underline inputs with the label absolutely positioned
   INSIDE the field. This file draws filled boxes, so that label lands on top
   of the value (empty fields) or clipped by the box edge (filled fields) —
   which is exactly what was happening. Fix: pin every label ABOVE the box in
   both states, matching the site's `.field label` treatment.
   ===================================================================== */

/* The label's gutter is PADDING, not margin, and the label sits at top:0 of
   the padding box. Several views carry an inline `margin-top: 0` on
   .input-field (branding, service create/edit — 12 of them), written back
   when the label lived inside the box; a margin-based gutter collapses under
   those and the label lands on the heading above it. Padding cannot be
   collapsed by them, so every field keeps its room. */
body .input-field,
/* Most fields are also grid columns, and Materialize's `.row .col
   {padding: 0 .75rem}` (0,2,0) zeroes the gutter through the shorthand.
   This second selector is (0,3,1) so the top padding survives; the
   left/right gutter is left to the vendor rule. */
body .row .input-field.col {
    padding-top: 24px;
    margin-top: 0.6rem;
    margin-bottom: 1.1rem;
}

body .input-field > label,
body .input-field > label:not(.label-icon).active {
    position: absolute;
    top: 0;
    /* `left` is deliberately NOT set: the vendor aligns it per context
       (0 normally, .75rem inside a .col) and the two rules here have
       different specificities, so hard-coding it would shift the label by
       12px between the .active and resting states. */
    /* One resting position for both states: no jump on focus, and nothing
       ever overlaps the box. Replaces the vendor's translateY(12px) /
       translateY(-14px) scale(.8) pair. */
    transform: none;
    transform-origin: 0 0;
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: var(--text-mut);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body .input-field > input:focus:not([readonly]) ~ label,
body .input-field > input:focus:not([readonly]) + label,
body .input-field > textarea:focus:not([readonly]) + label {
    color: var(--indigo-deep);
}

/* Fields with a leading icon (login) keep the icon's 3rem gutter. */
body .input-field .prefix ~ label {
    margin-left: 3rem;
}

/* Offsets are from the padding box, so a leading icon has to clear the
   label gutter above it. */
body .input-field .prefix {
    top: calc(24px + 0.6rem);
    font-size: 1.4rem;
    color: var(--text-mut);
}

body .input-field .prefix.active {
    color: var(--indigo-deep);
}

/* --- the box itself --------------------------------------------------- */

body .input-field input[type=text],
body .input-field input[type=email],
body .input-field input[type=password],
body .input-field input[type=number],
body .input-field input[type=tel],
body .input-field input[type=url],
body .input-field input[type=date],
body .input-field input[type=time],
body .input-field input[type=search],
body .input-field textarea.materialize-textarea,
body input[type=text].browser-default,
body input[type=number].browser-default,
body select.browser-default,
body textarea.browser-default {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 46px;
    margin: 0;
    padding: 11px 15px;
    font-size: 0.94rem;
    color: var(--text-dark);
    background: var(--field-bg);
    border: 1.5px solid var(--line);
    border-radius: var(--field-radius);
    box-shadow: none;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

body .input-field input:focus:not([readonly]),
body .input-field textarea.materialize-textarea:focus:not([readonly]),
body input.browser-default:focus,
body select.browser-default:focus,
body textarea.browser-default:focus {
    outline: none;
    background: var(--paper-2);
    border: 1.5px solid var(--indigo-deep);
    box-shadow: var(--ring);
}

body .input-field input[disabled],
body .input-field input[readonly] {
    background: #F1F4FB;
    color: var(--text-mut);
    border-style: dashed;
}

body .input-field textarea.materialize-textarea {
    min-height: 92px;
    line-height: 1.5;
    padding-top: 12px;
}

/* Materialize's JS-built select trigger is an <input readonly>; it must not
   pick up the disabled/readonly treatment above, hence the reset. */
body .select-wrapper input.select-dropdown,
body .input-field .select-wrapper input.select-dropdown[readonly] {
    box-sizing: border-box;
    height: auto;
    min-height: 46px;
    margin: 0;
    padding: 11px 40px 11px 15px;
    font-size: 0.94rem;
    line-height: 22px;
    background: var(--field-bg);
    border: 1.5px solid var(--line);
    border-style: solid;
    border-radius: var(--field-radius);
    color: var(--text-dark);
    cursor: pointer;
}

body .select-wrapper input.select-dropdown:focus {
    border: 1.5px solid var(--indigo-deep);
    box-shadow: var(--ring);
}

body .select-wrapper .caret {
    right: 14px;
    fill: var(--text-mut);
}

body .dropdown-content {
    border-radius: var(--field-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    padding: 6px;
}

body .dropdown-content li > a,
body .dropdown-content li > span {
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 10px 14px;
    color: var(--text-dark);
}

body .dropdown-content li:hover,
body .dropdown-content li.active {
    background-color: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
}

body .dropdown-content li.divider {
    margin: 4px 0;
    background-color: var(--line);
}

/* File input: Materialize splits it into a button + a text field. */
body .file-field .btn,
body .file-field .btn-large {
    height: 46px;
    line-height: 46px;
    border-radius: var(--field-radius);
}

body .file-field .file-path-wrapper {
    padding-left: 12px;
}

body .file-field input.file-path {
    min-height: 46px;
    padding: 11px 15px;
    background: var(--field-bg);
    border: 1.5px solid var(--line);
    border-radius: var(--field-radius);
}

/* Switches & checkboxes pick up the brand indigo. */
body .switch label input[type=checkbox]:checked + .lever {
    background-color: rgba(99, 102, 241, 0.4);
}

body .switch label input[type=checkbox]:checked + .lever:after {
    background-color: var(--indigo-deep);
}

body [type="checkbox"]:checked + span:not(.lever):before {
    border-right-color: var(--indigo-deep);
    border-bottom-color: var(--indigo-deep);
}

body [type="radio"]:checked + span:after {
    background-color: var(--indigo-deep);
    border-color: var(--indigo-deep);
}

/* Inline validation copy from jquery-validate. */
body label.error,
body div.error {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #DC2626;
}

body .helper-text {
    font-size: 0.76rem;
    color: var(--text-mut);
}

/* ========================================================================
   9. TABLES & DATATABLES
   ===================================================================== */

body table {
    border-collapse: separate;
    border-spacing: 0;
}

body table thead th {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-mut);
    border-bottom: 1px solid var(--line);
    padding: 14px 12px;
}

body table > tbody > tr,
body table.highlight > tbody > tr {
    border-bottom: 1px solid var(--line);
    transition: background 0.2s;
}

body table > tbody > tr > td {
    padding: 14px 12px;
    font-size: 0.92rem;
}

body table.highlight > tbody > tr:hover,
body table.dataTable > tbody > tr:hover {
    background-color: rgba(129, 140, 248, 0.07);
}

body .dataTables_wrapper .dataTables_filter input,
body .dataTables_wrapper .dataTables_length select {
    height: 40px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--field-bg);
    font-size: 0.88rem;
}

body .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--indigo-deep);
    box-shadow: var(--ring);
}

body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter {
    font-size: 0.85rem;
    color: var(--text-mut);
}

body .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important; /* vendor sets radius !important */
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.85rem;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--grad-btn) !important; /* vendor sets background !important */
    border-color: transparent !important;
    color: #fff !important;
}

/* An empty table must not collapse to a stub — it looks broken. */
body table.dataTable {
    width: 100% !important; /* DataTables sets an inline width */
}

body table.dataTable td.dataTables_empty {
    padding: 34px 12px;
    text-align: center;
    color: var(--text-mut);
    font-size: 0.92rem;
}

/* ========================================================================
   10. TABS, BADGES, MODALS, TOASTS, PAGINATION
   ===================================================================== */

body .tabs {
    border-radius: var(--card-radius);
    overflow: hidden;
    background: transparent;
}

body .tabs .tab a {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-mut);
}

body .tabs .indicator {
    height: 3px;
    border-radius: 999px 999px 0 0;
}

body .new.badge {
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.7rem;
}

body .chip {
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.78rem;
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--indigo-deep);
}

body .modal {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}

body .modal .modal-content {
    padding: 28px 30px;
}

body .modal .modal-footer {
    border-top: 1px solid var(--line);
    padding: 14px 24px;
    height: auto;
}

body .toast {
    border-radius: var(--field-radius);
    font-family: var(--font-head);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
}

body .pagination li.active {
    background: var(--grad-btn);
    border-radius: 999px;
}

body .pagination li a {
    font-family: var(--font-head);
    font-weight: 600;
}

body .collection .collection-item {
    border-bottom: 1px solid var(--line);
}

body .card-alert {
    border-radius: var(--field-radius);
}

/* ========================================================================
   11. FOOTER
   ===================================================================== */

body .page-footer {
    background: var(--ink-800);
    border-top: 1px solid rgba(129, 140, 248, 0.14);
}

body .page-footer .footer-copyright {
    background: transparent;
    color: var(--text-light);
    font-size: 0.8rem;
    min-height: 46px;
    line-height: 46px;
}

body .page-footer .footer-copyright a {
    color: #fff;
}

/* ========================================================================
   12. SHARED SITE PIECES
   Helpers for pages written directly against this theme (signup, login,
   billing, upgrade prompts) rather than against Materialize.
   ===================================================================== */

.qw-gradient-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.qw-eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--indigo-deep);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 7px 16px;
    border-radius: 999px;
}

.qw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--grad-btn);
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.qw-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -8px rgba(99, 102, 241, 0.65);
    color: #fff;
}

/* The Qwaiton mark, drawn in CSS — no logo binary ships with the app. */
.qw-mark {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    border: 2.5px solid var(--indigo);
    box-sizing: border-box;
}

.qw-mark::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: 1px;
    width: 11px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--cyan);
    transform: rotate(45deg);
}