/* ==========================================================================
   WearSarey Design System — theme overlay
   --------------------------------------------------------------------------
   Loaded AFTER oneui.min.css. Restyles the OneUI/Bootstrap classes already
   present in the markup, so no Blade changes are required for the baseline.

   To roll back completely: remove the <link> in layouts/admin.blade.php.

   Scale note: html root stays at 16px. All rem values below are relative to
   that root, NOT to the 13.5px body size.
   ========================================================================== */

:root {
    /* --- Brand ------------------------------------------------------------
       STARK MONOCHROME. Wear Sarey's catalogue is Black-dominant by a wide
       margin — 301 SKUs vs 137 for the next colour — and the wordmark is a
       sharp Didone in pure black. So the UI is built from true black, white
       and COOL neutrals.

       Deliberately NOT warm: warm beige/brown is the territory of the sibling
       Oemah Etnik product (bg #f7f5f0, accent #a0714f). Zero hue overlap is a
       requirement here, not a preference — every neutral below is cool-shifted.

       There is no accent hue. Emphasis is carried by contrast and weight,
       which is how stark fashion retail (COS, Zara, Aritzia) actually works.
       ---------------------------------------------------------------------- */
    --wsy-ink: #0A0A0A;          /* true black — the wordmark                 */
    --wsy-bg: #F6F6F7;           /* cool grey app background                  */
    --wsy-surface: #FFFFFF;      /* card                                      */
    --wsy-border: #E4E4E7;       /* cool hairline                             */
    --wsy-accent: #0A0A0A;       /* monochrome — emphasis via contrast        */
    --wsy-accent-soft: rgba(10, 10, 10, .05);
    --wsy-accent-ring: rgba(10, 10, 10, .22);
    --wsy-on-dark: #FFFFFF;      /* active marker on the black sidebar        */

    /* --- Text (cool-shifted, never warm grey) ----------------------------- */
    --wsy-text: #18181B;
    --wsy-text-2: #71717A;
    --wsy-text-3: #A1A1AA;

    /* --- Semantic — kept saturated and cool so they read as STATE, never as
       decoration. These are the only hues in the entire system. ------------ */
    --wsy-success: #16A34A;
    --wsy-warning: #D97706;
    --wsy-danger: #DC2626;
    --wsy-info: #2563EB;

    /* --- Type scale ------------------------------------------------------- */
    --wsy-text-xs: .6875rem;     /* 11px   — meta, captions      */
    --wsy-text-sm: .75rem;       /* 12px   — secondary            */
    --wsy-text-base: .84375rem;  /* 13.5px — body                 */
    --wsy-text-md: .9375rem;     /* 15px   — emphasis             */
    --wsy-text-lg: 1.125rem;     /* 18px   — section title        */
    --wsy-text-xl: 1.375rem;     /* 22px   — page title           */
    --wsy-text-2xl: 1.75rem;     /* 28px   — hero metric          */

    /* --- Radius ----------------------------------------------------------- */
    --wsy-r-sm: 8px;
    --wsy-r: 12px;
    --wsy-r-lg: 16px;

    /* --- Elevation ---------------------------------------------------------
       Structure is carried by crisp 1px borders, NOT by soft drop shadows —
       the flat, hard-edged look of editorial fashion layouts. Shadows are
       reserved for things that genuinely float (modals, dropdowns), where
       they are deep and tight rather than soft and diffuse. This is also a
       structural break from the sibling product, which is shadow-led.
       ---------------------------------------------------------------------- */
    --wsy-shadow-xs: none;
    --wsy-shadow-sm: none;
    --wsy-shadow: 0 4px 16px rgba(9, 9, 11, .07);
    --wsy-shadow-lg: 0 16px 48px rgba(9, 9, 11, .13);

    /* --- Motion ----------------------------------------------------------- */
    --wsy-ease: cubic-bezier(.4, 0, .2, 1);
    --wsy-fast: 120ms;
    --wsy-med: 200ms;

    /* --- Type --------------------------------------------------------------
       ONE family: Plus Jakarta Sans — a geometric sans commissioned as the
       city typeface of Jakarta, where Wear Sarey is based.

       No display serif. A serif-heading + humanist-sans pairing is exactly
       the structure the sibling product uses (Marcellus + Work Sans), so
       hierarchy here is built from weight, size and tracking within a single
       geometric family instead. Modern, clean, simple — and unmistakably not
       the same system.
       ---------------------------------------------------------------------- */
    --wsy-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wsy-font-display: var(--wsy-font-body);

    /* Re-point Bootstrap's own token so components inherit correctly */
    --bs-font-sans-serif: var(--wsy-font-body);
    --bs-body-font-family: var(--wsy-font-body);
    --bs-primary: #0A0A0A;
    --bs-primary-rgb: 10, 10, 10;
    --bs-body-color: #18181B;
    --bs-border-color: #E4E4E7;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-base);
    line-height: 1.55;
    color: var(--wsy-text);
    background-color: var(--wsy-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "cv08" 1;
}

/* Unify the three competing backgrounds. The inline style on #page-container
   is overridden here so there is a single surface colour. */
#page-container,
#main-container {
    background-color: var(--wsy-bg) !important;
}

.bg-body-light,
.bg-body-extra-light {
    background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--wsy-font-body);
    color: var(--wsy-ink);
    font-weight: 600;
    letter-spacing: -.011em;
    line-height: 1.25;
}

h2, .h2 { font-size: var(--wsy-text-xl);  letter-spacing: -.016em; }
h3, .h3 { font-size: var(--wsy-text-lg); }
h4, .h4 { font-size: var(--wsy-text-md); }
h5, .h5 { font-size: var(--wsy-text-base); }
h6, .h6 { font-size: var(--wsy-text-sm); }

/* --- Page title ----------------------------------------------------------
   310 views use <h1 class="h3 fw-bold mb-2"> as the page title and
   <h3 class="block-title"> for card titles, so scoping to the h1 ELEMENT
   hits exactly the page title and nothing else — no markup changes needed.
   The .h3/.h4 selectors are repeated here to out-specify the utility class
   that would otherwise cap the title at 18px. */
h1,
h1.h1, h1.h2, h1.h3, h1.h4 {
    font-family: var(--wsy-font-display);
    font-size: 1.625rem;      /* 26px */
    font-weight: 800;         /* hierarchy from mass + tight tracking, not a serif */
    letter-spacing: -.032em;  /* tight: the modern-editorial signal */
    line-height: 1.15;
    color: var(--wsy-ink);
}

/* Modal titles are h1 in one view and must stay in the UI voice. */
h1.modal-title {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-md);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    h1, h1.h1, h1.h2, h1.h3, h1.h4 { font-size: 1.375rem; }
}

.fs-sm  { font-size: var(--wsy-text-sm) !important; }
.fs-xs  { font-size: var(--wsy-text-xs) !important; }
.fs-lg  { font-size: var(--wsy-text-md) !important; }

.text-muted { color: var(--wsy-text-2) !important; }

a { text-decoration: none; transition: color var(--wsy-fast) var(--wsy-ease); }

/* Numeric alignment — critical for an ERP. Money and quantities must line up. */
td, th, .fw-bold, .font-weight-bold,
input[type="number"], .text-end {
    font-variant-numeric: tabular-nums;
}

/* Breathing room. Was 1rem hard-coded in the layout. */
.content {
    padding: 1.5rem 1.5rem 1rem !important;
}

@media (max-width: 767.98px) {
    .content { padding: 1rem 1rem .5rem !important; }
}

/* ==========================================================================
   2. Focus — accessibility baseline (WCAG AA)
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--wsy-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
}

/* ==========================================================================
   3. Cards / blocks
   ========================================================================== */

.block {
    margin-bottom: 1.25rem;
    background-color: var(--wsy-surface);
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r-lg);
    box-shadow: var(--wsy-shadow-sm);
    transition: box-shadow var(--wsy-med) var(--wsy-ease);
}

.block.block-rounded { border-radius: var(--wsy-r-lg); }

/* Nested blocks stay flat — avoids the stacked-shadow "bubbly" look. */
.block .block,
.content-side .block {
    box-shadow: none;
    border-color: var(--wsy-border);
}

.block-header {
    padding: 1.125rem 1.375rem;
    border-bottom: 1px solid var(--wsy-border);
    background-color: transparent;
    min-height: auto;
}

.block-header-default { background-color: transparent; }

.block-title {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-md);
    font-weight: 600;
    letter-spacing: -.008em;
    color: var(--wsy-ink);
    text-transform: none;
}

.block-content {
    padding: 1.375rem;
}

.block-content.block-content-full { padding-bottom: 1.375rem; }

.block-header + .block-content { padding-top: 1.375rem; }

/* Rounded corners must clip the content, or tables bleed past the radius. */
.block.block-rounded > .block-content:last-child,
.block.block-rounded > .block-table:last-child {
    border-bottom-left-radius: var(--wsy-r-lg);
    border-bottom-right-radius: var(--wsy-r-lg);
    overflow: hidden;
}

.block.block-rounded > .block-header:first-child {
    border-top-left-radius: var(--wsy-r-lg);
    border-top-right-radius: var(--wsy-r-lg);
}

/* ==========================================================================
   4. Buttons
   --------------------------------------------------------------------------
   Semantics are preserved exactly — btn-success stays the "save" green,
   btn-danger stays destructive red. Only saturation and form are refined,
   because 373 btn-success + 348 btn-danger instances carry real meaning.
   ========================================================================== */

.btn {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-base);
    font-weight: 500;
    letter-spacing: -.002em;
    padding: .5rem 1rem;
    border-radius: var(--wsy-r-sm);
    border-width: 1px;
    transition: background-color var(--wsy-fast) var(--wsy-ease),
                border-color var(--wsy-fast) var(--wsy-ease),
                color var(--wsy-fast) var(--wsy-ease),
                box-shadow var(--wsy-fast) var(--wsy-ease),
                transform var(--wsy-fast) var(--wsy-ease);
}

.btn-sm { font-size: var(--wsy-text-sm); padding: .375rem .75rem; border-radius: 6px; }
.btn-lg { font-size: var(--wsy-text-md); padding: .625rem 1.25rem; border-radius: var(--wsy-r); }

.btn:active { transform: translateY(.5px); }

.btn:focus-visible { box-shadow: 0 0 0 3px var(--wsy-accent-ring); }

.btn:disabled,
.btn.disabled { opacity: .45; box-shadow: none; transform: none; }

/* --- Primary: near-black. The default "commit" action. ------------------- */
.btn-primary {
    background-color: var(--wsy-ink);
    border-color: var(--wsy-ink);
    color: #fff;
}
.btn-primary:hover {
    background-color: #27272A;
    border-color: #27272A;
    color: #fff;
    box-shadow: var(--wsy-shadow-sm);
}
.btn-primary:active,
.btn-primary:focus { background-color: #000; border-color: #000; color: #fff; }

/* --- Success ------------------------------------------------------------- */
.btn-success {
    background-color: var(--wsy-success);
    border-color: var(--wsy-success);
    color: #fff;
}
.btn-success:hover {
    background-color: #15803D;
    border-color: #15803D;
    color: #fff;
    box-shadow: var(--wsy-shadow-sm);
}
.btn-success:active,
.btn-success:focus { background-color: #15803D; border-color: #15803D; color: #fff; }

/* --- Danger -------------------------------------------------------------- */
.btn-danger {
    background-color: var(--wsy-danger);
    border-color: var(--wsy-danger);
    color: #fff;
}
.btn-danger:hover {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
    box-shadow: var(--wsy-shadow-sm);
}
.btn-danger:active,
.btn-danger:focus { background-color: #991B1B; border-color: #991B1B; color: #fff; }

/* --- Warning / Info ------------------------------------------------------ */
.btn-warning {
    background-color: var(--wsy-warning);
    border-color: var(--wsy-warning);
    color: #FFFFFF;
}
.btn-warning:hover { background-color: #B45309; border-color: #B45309; color: #FFFFFF; }

.btn-info {
    background-color: var(--wsy-info);
    border-color: var(--wsy-info);
    color: #fff;
}
.btn-info:hover { background-color: #1D4ED8; border-color: #1D4ED8; color: #fff; }

/* --- Secondary / alt: quiet neutral -------------------------------------- */
.btn-secondary,
.btn-alt-secondary {
    background-color: #fff;
    border-color: var(--wsy-border);
    color: var(--wsy-text);
}
.btn-secondary:hover,
.btn-alt-secondary:hover {
    background-color: #F4F4F5;
    border-color: #D4D4D8;
    color: var(--wsy-ink);
}

.btn-light { background-color: #F4F4F5; border-color: transparent; color: var(--wsy-text); }
.btn-light:hover { background-color: #E4E4E7; color: var(--wsy-ink); }

.btn-dark { background-color: var(--wsy-ink); border-color: var(--wsy-ink); color: #fff; }
.btn-dark:hover { background-color: #27272A; border-color: #27272A; color: #fff; }

/* --- Outlines: hairline weight, fill on hover ---------------------------- */
.btn-outline-primary   { border-color: var(--wsy-ink); color: var(--wsy-ink); background: transparent; }
.btn-outline-primary:hover { background-color: var(--wsy-ink); border-color: var(--wsy-ink); color: #fff; }

.btn-outline-success   { border-color: var(--wsy-success); color: var(--wsy-success); background: transparent; }
.btn-outline-success:hover { background-color: var(--wsy-success); border-color: var(--wsy-success); color: #fff; }

.btn-outline-danger    { border-color: var(--wsy-danger); color: var(--wsy-danger); background: transparent; }
.btn-outline-danger:hover { background-color: var(--wsy-danger); border-color: var(--wsy-danger); color: #fff; }

.btn-outline-secondary { border-color: var(--wsy-border); color: var(--wsy-text-2); background: transparent; }
.btn-outline-secondary:hover { background-color: #F4F4F5; border-color: #D4D4D8; color: var(--wsy-ink); }

.btn-outline-warning   { border-color: var(--wsy-warning); color: #B45309; background: transparent; }
.btn-outline-warning:hover { background-color: var(--wsy-warning); border-color: var(--wsy-warning); color: #FFFFFF; }

/* --- Ghost: for low-emphasis row actions --------------------------------- */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--wsy-text-2);
}
.btn-ghost:hover { background-color: #F4F4F5; color: var(--wsy-ink); }

/* --- Loading state ------------------------------------------------------- */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: wsy-spin .6s linear infinite;
}
.btn-outline-primary.is-loading::after,
.btn-outline-success.is-loading::after,
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after { color: var(--wsy-ink); }

@keyframes wsy-spin { to { transform: rotate(360deg); } }

.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* ==========================================================================
   5. Forms
   ========================================================================== */

.form-control,
.form-select {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-base);
    color: var(--wsy-text);
    background-color: #fff;
    border: 1px solid #DDDDE1;
    border-radius: var(--wsy-r-sm);
    padding: .5rem .75rem;
    min-height: 38px;
    transition: border-color var(--wsy-fast) var(--wsy-ease),
                box-shadow var(--wsy-fast) var(--wsy-ease);
}

.form-control-sm,
.form-select-sm { font-size: var(--wsy-text-sm); padding: .375rem .625rem; min-height: 32px; border-radius: 6px; }

.form-control:hover,
.form-select:hover { border-color: #C4C4CB; }

/* Gold focus ring — one of the few places the accent earns its place. */
.form-control:focus,
.form-select:focus {
    border-color: var(--wsy-accent);
    box-shadow: 0 0 0 3px var(--wsy-accent-ring);
    outline: none;
}

.form-control::placeholder { color: var(--wsy-text-3); }

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: #F4F4F5;
    color: var(--wsy-text-2);
    border-color: var(--wsy-border);
}

.form-control-alt {
    border-color: transparent;
    background-color: #F4F4F5;
}
.form-control-alt:focus {
    background-color: #fff;
    border-color: var(--wsy-accent);
}

.col-form-label,
.form-label {
    font-size: var(--wsy-text-sm);
    font-weight: 500;
    color: var(--wsy-text-2);
    letter-spacing: .002em;
}

.input-group-text {
    font-size: var(--wsy-text-sm);
    background-color: #F4F4F5;
    border-color: #DDDDE1;
    color: var(--wsy-text-2);
    border-radius: var(--wsy-r-sm);
}

textarea.form-control { min-height: 84px; line-height: 1.6; }

/* --- Checkbox / radio ---------------------------------------------------- */
.form-check-input {
    width: 1.05em;
    height: 1.05em;
    margin-top: .18em;
    border: 1px solid #C4C4CB;
    transition: background-color var(--wsy-fast) var(--wsy-ease),
                border-color var(--wsy-fast) var(--wsy-ease);
}
.form-check-input:checked {
    background-color: var(--wsy-ink);
    border-color: var(--wsy-ink);
}
.form-check-input:focus {
    border-color: var(--wsy-accent);
    box-shadow: 0 0 0 3px var(--wsy-accent-ring);
}
.form-check-label { font-size: var(--wsy-text-base); color: var(--wsy-text); }

/* --- Validation ---------------------------------------------------------- */
.is-invalid, .form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--wsy-danger) !important;
    background-image: none;
}
.is-invalid:focus, .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 72, 65, .18) !important;
}
.invalid-feedback, .text-danger {
    font-size: var(--wsy-text-sm);
    color: var(--wsy-danger) !important;
}
.is-valid, .form-control.is-valid { border-color: var(--wsy-success) !important; background-image: none; }

/* --- Select2 bridge (form-control-select2 appears 397×) ------------------ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #DDDDE1 !important;
    border-radius: var(--wsy-r-sm) !important;
    min-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: var(--wsy-text);
    font-size: var(--wsy-text-base);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--wsy-accent) !important;
    box-shadow: 0 0 0 3px var(--wsy-accent-ring);
}
.select2-dropdown {
    border-color: var(--wsy-border);
    border-radius: var(--wsy-r-sm);
    box-shadow: var(--wsy-shadow);
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wsy-ink);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--wsy-accent-soft);
    color: var(--wsy-ink);
}
.select2-container .select2-search--inline .select2-search__field { font-size: var(--wsy-text-base); }

/* ==========================================================================
   6. Tables
   ========================================================================== */

.table {
    font-size: var(--wsy-text-base);
    color: var(--wsy-text);
    border-color: var(--wsy-border);
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--wsy-text-2);
    background-color: #FAFAFA;
    border-bottom: 1px solid var(--wsy-border);
    padding: .75rem .875rem;
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: .75rem .875rem;
    border-bottom: 1px solid #F1F1F3;
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr,
.table > tbody > tr {
    transition: background-color var(--wsy-fast) var(--wsy-ease);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover {
    background-color: #FAFAFA;
    --bs-table-accent-bg: transparent;
}

/* Striping softened — the default zebra is heavy-handed at this density. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: #FAFAFA;
    color: var(--wsy-text);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--wsy-border);
}

.table-vcenter > tbody > tr > td,
.table-vcenter > thead > tr > th { vertical-align: middle; }

.table-sm > thead > tr > th,
.table-sm > tbody > tr > td { padding: .5rem .625rem; }

/* Opt-in sticky header. Not global — many tables here sit inside their own
   scroll containers and a blanket rule would misbehave. */
.table-sticky > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #FAFAFA;
    box-shadow: inset 0 -1px 0 var(--wsy-border);
}

.table-responsive { border-radius: var(--wsy-r-sm); }

/* ==========================================================================
   7. Sidebar
   --------------------------------------------------------------------------
   OneUI ships #sidebar at #161717 with #AFB2B4 links. Deepened to the brand
   near-black, respaced, and given a gold active state.
   ========================================================================== */

#sidebar {
    background-color: var(--wsy-ink);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

#sidebar .content-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    height: auto;
    min-height: 62px;
    padding: .5rem 1rem;
}

#sidebar .js-sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
#sidebar .js-sidebar-scroll::-webkit-scrollbar { width: 6px; }
#sidebar .js-sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .14);
    border-radius: 3px;
}
#sidebar .js-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

#sidebar .content-side { padding: .75rem .625rem; }

/* --- Top-level items ----------------------------------------------------- */
/* Modern / clean / simple: one weight, one size, generous line-height, and a
   little positive tracking. Menu labels are short nouns read at a glance, so
   they want air between letters — the opposite of the tight tracking that
   suits long headline text. */
.nav-main-dark .nav-main-link {
    font-family: var(--wsy-font-body);
    font-size: .8125rem;          /* 13px — quiet against the 13.5px content */
    font-weight: 450;
    letter-spacing: .005em;
    line-height: 1.4;
    color: #A1A1AA;
    padding: .5rem .6875rem;
    margin-bottom: 2px;
    border-radius: var(--wsy-r-sm);
    min-height: 36px;
    transition: color var(--wsy-fast) var(--wsy-ease),
                background-color var(--wsy-fast) var(--wsy-ease);
}

/* Icons are now inline Lucide SVGs rather than icon-font glyphs, so they need
   flex/box sizing instead of font-size, and they inherit colour via
   stroke="currentColor". Sized at 18px on a 20px rail so every label in the
   sidebar starts on the same optical line. */
.nav-main-dark .nav-main-link > .nav-main-link-icon {
    color: #71717A;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: .6875rem;
    min-width: 0;
    transition: color var(--wsy-fast) var(--wsy-ease);
}

/* Lucide's 2px default stroke reads heavy at 18px; 1.75 is set on the
   component, and the active item firms up very slightly to carry emphasis. */
.nav-main-dark .nav-main-link.active > .nav-main-link-icon { stroke-width: 2; }

.nav-main-dark .nav-main-link:hover,
.nav-main-dark .nav-main-link:focus {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, .055);
}

.nav-main-dark .nav-main-link:hover > .nav-main-link-icon,
.nav-main-dark .nav-main-link:focus > .nav-main-link-icon { color: #FFFFFF; }

/* Active: gold rule + gold icon. The accent's primary job in the whole UI. */
.nav-main-dark .nav-main-link.active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, .07);
    font-weight: 550;
    position: relative;
}

/* Uses ::after, NOT ::before — OneUI puts the submenu chevron on ::before, so
   an active parent item would otherwise lose its chevron entirely. */
.nav-main-dark .nav-main-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 17px;
    border-radius: 0 2px 2px 0;
    /* NOT --wsy-accent: the palette is monochrome, so the accent is black and
       would be invisible against the black sidebar. On dark surfaces the
       high-contrast counterpart is white. */
    background-color: var(--wsy-on-dark);
}

.nav-main-dark .nav-main-link.active > .nav-main-link-icon { color: var(--wsy-on-dark); }

/* --- Submenus ------------------------------------------------------------ */
/* OneUI collapses submenus with `height:0; overflow:hidden` — NOT display:none.
   So vertical padding and background must be applied only in the open state,
   or every collapsed submenu paints a stray bar between menu items. */
.nav-main-dark .nav-main-submenu {
    background-color: transparent;
    border-radius: var(--wsy-r-sm);
    padding-top: 0;
    padding-bottom: 0;
    /* OneUI indents the list by 2.875rem, which then ADDS to each item's own
       padding and pushes labels ~77px from the edge. Zeroed here so indentation
       is controlled in one place, on the item. */
    padding-left: 0;
    margin: 0;
}

/* Submenu items have no icon, so they align to a hairline rail instead —
   depth is shown by structure rather than by indentation alone. */
.nav-main-dark .nav-main-submenu .nav-main-link {
    font-size: .78125rem;         /* 12.5px */
    color: #8B8B94;
    padding: .375rem .6875rem .375rem 2.125rem;
    min-height: 30px;
    font-weight: 400;
    letter-spacing: .004em;
}

.nav-main-dark .nav-main-submenu {
    position: relative;
}

.nav-main-dark .nav-main-submenu::before {
    content: "";
    position: absolute;
    left: 1.3125rem;
    top: .25rem;
    bottom: .25rem;
    width: 1px;
    background-color: rgba(255, 255, 255, .09);
}

.nav-main-dark .nav-main-submenu .nav-main-link:hover,
.nav-main-dark .nav-main-submenu .nav-main-link:focus {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, .05);
}

.nav-main-dark .nav-main-submenu .nav-main-link.active {
    color: #FFFFFF;
    background-color: transparent;
    font-weight: 550;
}

/* Submenu active marker sits ON the hairline rail, so the rail reads as a
   track and the active item as a position along it. */
.nav-main-dark .nav-main-submenu .nav-main-link.active::after {
    left: 1.25rem;
    height: 14px;
    width: 2px;
    border-radius: 2px;
}

/* Third level — one more step of recession, so depth stays legible. */
/* Third level — background only when open, same collapse caveat as above. */
.nav-main-dark .nav-main-submenu .nav-main-submenu { background-color: transparent; }
.nav-main-dark .nav-main-submenu .nav-main-item.open > .nav-main-submenu {
    background-color: rgba(0, 0, 0, .2);
}
.nav-main-dark .nav-main-submenu .nav-main-submenu .nav-main-link {
    font-size: .78125rem;
    color: #7E7E88;
    padding-left: 2.625rem;
}

/* Open parent stays legible but doesn't compete with the true active item. */
.nav-main-dark .nav-main-item.open > .nav-main-link-submenu {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, .04);
}
.nav-main-dark .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon { color: #C4C4C0; }
.nav-main-dark .nav-main-item.open > .nav-main-submenu {
    background-color: rgba(0, 0, 0, .26);
    padding-top: .1875rem;
    padding-bottom: .1875rem;
    margin: 1px 0 3px;
}

/* Chevron: OneUI renders this as a Font Awesome glyph (content:"\f104" in
   "Font Awesome 5 Free"). Replaced with a pure-CSS chevron drawn from two
   borders — no icon font, matches Lucide's round-joined stroke, and scales
   with currentColor. Collapsed points right; open rotates down. */
/* OneUI's rule is `.nav-main-link.nav-main-link-submenu::before` (0-2-0), so
   these must be at least 0-3-0 to win. Every property OneUI sets is reset
   explicitly — otherwise its 1rem box and Font Awesome metrics leak through
   and the chevron renders as a misshapen corner. */
.nav-main-dark .nav-main-link.nav-main-link-submenu::before,
#sidebar .nav-main-link.nav-main-link-submenu::before {
    content: "";
    position: absolute;
    top: 50%;
    right: .875rem;
    display: block;
    margin-top: 0;
    width: 6px;
    height: 6px;
    line-height: 1;
    text-align: left;
    font-family: inherit;
    font-size: 0;
    font-weight: 400;
    border: 0 solid currentColor;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    border-radius: 0 0 1px 0;
    opacity: .35;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform var(--wsy-med) var(--wsy-ease),
                opacity var(--wsy-fast) var(--wsy-ease);
}

/* Open: chevron points down. Must also out-specify OneUI's
   `.nav-main-item.open>.nav-main-link-submenu::before` rotate(-90deg). */
.nav-main-dark .nav-main-item.open > .nav-main-link.nav-main-link-submenu::before,
#sidebar .nav-main-item.open > .nav-main-link.nav-main-link-submenu::before {
    transform: translateY(-50%) rotate(45deg);
    opacity: .6;
}

.nav-main-dark .nav-main-link.nav-main-link-submenu:hover::before,
#sidebar .nav-main-link.nav-main-link-submenu:hover::before { opacity: .7; }

/* Section labels: small, wide-tracked, low-contrast — they organise without
   competing with the items beneath them. */
.nav-main-dark .nav-main-heading {
    color: #6B6B75;
    font-size: .625rem;           /* 10px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .11em;
    padding: 1.375rem .6875rem .4375rem;
}

/* ==========================================================================
   8. Header
   ========================================================================== */

#page-header {
    background-color: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--wsy-border);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* This OneUI build only reserves 1rem for a fixed header. Match the actual
   64px toolbar height so the first page heading never sits underneath it. */
#page-container.page-header-fixed #main-container {
    padding-top: 64px;
}

#page-header .content-header {
    min-height: 64px;
    padding: .625rem 1.5rem;
}

.wsy-header-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
}

.wsy-header-context {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.wsy-header-eyebrow {
    margin-bottom: .1875rem;
    color: var(--wsy-text-3);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wsy-header-title {
    color: var(--wsy-ink);
    font-size: var(--wsy-text-md);
    font-weight: 700;
    letter-spacing: -.015em;
}

.wsy-user-menu {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 42px;
    padding: .25rem .375rem .25rem .25rem;
    color: var(--wsy-text);
    background: transparent;
    border: 1px solid transparent;
}

.wsy-user-menu:hover,
.wsy-user-menu:focus,
.wsy-user-menu[aria-expanded="true"] {
    color: var(--wsy-ink);
    background-color: #F4F4F5;
    border-color: var(--wsy-border);
    box-shadow: none;
}

.wsy-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: #fff;
    background-color: var(--wsy-ink);
    border-radius: 10px;
    font-size: var(--wsy-text-sm);
    font-weight: 700;
}

.wsy-user-copy {
    flex-direction: column;
    align-items: flex-start;
    min-width: 92px;
    line-height: 1.2;
}

.wsy-user-copy strong {
    max-width: 160px;
    overflow: hidden;
    color: var(--wsy-ink);
    font-size: var(--wsy-text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wsy-user-copy small {
    margin-top: .1875rem;
    color: var(--wsy-text-3);
    font-size: .625rem;
}

.wsy-user-chevron {
    width: 6px;
    height: 6px;
    margin: 0 .375rem 3px .125rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .5;
    transform: rotate(45deg);
}

.wsy-user-dropdown { min-width: 230px; }

.wsy-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
}

.wsy-user-dropdown-head > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wsy-user-dropdown-head strong,
.wsy-user-dropdown-head small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wsy-user-dropdown-head strong { color: var(--wsy-ink); font-size: var(--wsy-text-base); }
.wsy-user-dropdown-head small { color: var(--wsy-text-2); font-size: var(--wsy-text-xs); }

.wsy-user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
}

@media (max-width: 575.98px) {
    #page-header .content-header { padding: .625rem 1rem; }
    .wsy-header-context { display: none; }
    .wsy-user-menu { padding-right: .25rem; }
    .wsy-user-chevron { display: none; }
}

/* ==========================================================================
   9. Modals
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--wsy-r-lg);
    box-shadow: var(--wsy-shadow-lg);
    overflow: hidden;
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--wsy-border);
    background-color: #fff;
}

.modal-title,
.modal-header .block-title {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-md);
    font-weight: 600;
    color: var(--wsy-ink);
}

.modal-body { padding: 1.5rem; }

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--wsy-border);
    background-color: #FAFAFA;
    gap: .5rem;
}
.modal-footer > * { margin: 0; }

.modal-backdrop.show { opacity: .28; }
.modal.fade .modal-dialog {
    transition: transform var(--wsy-med) var(--wsy-ease), opacity var(--wsy-med) var(--wsy-ease);
    transform: translateY(-8px) scale(.995);
}
.modal.show .modal-dialog { transform: none; }

.btn-close { transition: opacity var(--wsy-fast) var(--wsy-ease); }

/* ==========================================================================
   10. Alerts, badges, pagination, misc
   ========================================================================== */

.alert {
    border: 1px solid transparent;
    border-radius: var(--wsy-r);
    padding: .875rem 1.125rem;
    font-size: var(--wsy-text-base);
    box-shadow: none;
}
.alert-success { background-color: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.alert-danger  { background-color: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.alert-warning { background-color: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.alert-info    { background-color: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }

.badge {
    font-family: var(--wsy-font-body);
    font-size: var(--wsy-text-xs);
    font-weight: 600;
    letter-spacing: .012em;
    padding: .3125rem .5rem;
    border-radius: 6px;
}
.badge.bg-success { background-color: #F0FDF4 !important; color: #15803D !important; }
.badge.bg-danger  { background-color: #FEF2F2 !important; color: #B91C1C !important; }
.badge.bg-warning { background-color: #FFFBEB !important; color: #B45309 !important; }
.badge.bg-info    { background-color: #EFF6FF !important; color: #1D4ED8 !important; }
.badge.bg-primary { background-color: #F1F1F3 !important; color: var(--wsy-ink) !important; }
.badge.bg-secondary { background-color: #F1F1F3 !important; color: var(--wsy-text-2) !important; }

.page-link {
    font-size: var(--wsy-text-sm);
    color: var(--wsy-text);
    border-color: var(--wsy-border);
    padding: .4375rem .75rem;
    transition: background-color var(--wsy-fast) var(--wsy-ease);
}
.page-link:hover { background-color: #F4F4F5; color: var(--wsy-ink); border-color: var(--wsy-border); }
.page-item.active .page-link {
    background-color: var(--wsy-ink);
    border-color: var(--wsy-ink);
    color: #fff;
}
.page-item:first-child .page-link { border-radius: var(--wsy-r-sm) 0 0 var(--wsy-r-sm); }
.page-item:last-child .page-link { border-radius: 0 var(--wsy-r-sm) var(--wsy-r-sm) 0; }

.breadcrumb {
    font-size: var(--wsy-text-sm);
    margin-bottom: 0;
    padding: 0;
    background: transparent;
}
.breadcrumb-item { color: var(--wsy-text-2); }
.breadcrumb-item.active { color: var(--wsy-text); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--wsy-text-3); }

.dropdown-menu {
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r);
    box-shadow: var(--wsy-shadow);
    padding: .3125rem;
    font-size: var(--wsy-text-base);
}
.dropdown-item {
    border-radius: 6px;
    padding: .4375rem .625rem;
    color: var(--wsy-text);
    transition: background-color var(--wsy-fast) var(--wsy-ease);
}
.dropdown-item:hover, .dropdown-item:focus { background-color: #F4F4F5; color: var(--wsy-ink); }
.dropdown-divider { border-color: var(--wsy-border); }

.nav-tabs { border-bottom: 1px solid var(--wsy-border); gap: .125rem; }
.nav-tabs .nav-link {
    font-size: var(--wsy-text-base);
    font-weight: 500;
    color: var(--wsy-text-2);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .625rem .875rem;
    transition: color var(--wsy-fast) var(--wsy-ease), border-color var(--wsy-fast) var(--wsy-ease);
}
.nav-tabs .nav-link:hover { color: var(--wsy-ink); border-bottom-color: var(--wsy-border); }
.nav-tabs .nav-link.active {
    color: var(--wsy-ink);
    background: transparent;
    border-bottom-color: var(--wsy-accent);
}

hr { border-color: var(--wsy-border); opacity: 1; }

#page-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--wsy-border);
    font-size: var(--wsy-text-sm);
    color: var(--wsy-text-2);
}
#page-footer a { color: var(--wsy-text-2); }
#page-footer a:hover { color: var(--wsy-ink); }

/* Legacy helper kept for compatibility — used by existing views. */
.text-red { color: var(--wsy-danger) !important; }
.text-green { color: var(--wsy-success) !important; }

/* ==========================================================================
   11. Authentication
   ========================================================================== */

.wsy-auth-page,
.wsy-auth-page #page-container,
.wsy-auth-page #main-container {
    min-height: 100%;
    background: #fff !important;
}

.wsy-auth-shell {
    display: grid;
    grid-template-columns: minmax(360px, 44%) 1fr;
    min-height: 100vh;
    background: #fff;
}

.wsy-auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
    color: #fff;
    background: #0A0A0A;
}

.wsy-auth-brand-content,
.wsy-auth-brand > small { position: relative; z-index: 2; }

.wsy-auth-kicker {
    display: inline-block;
    margin-bottom: clamp(5rem, 15vh, 10rem);
    color: #A1A1AA;
    font-size: var(--wsy-text-xs);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.wsy-auth-brand h1 {
    max-width: 640px;
    margin: 0 0 1.5rem;
    color: #fff;
    font-size: clamp(2.25rem, 4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.02;
}

.wsy-auth-brand p {
    max-width: 540px;
    margin: 0;
    color: #A1A1AA;
    font-size: clamp(.875rem, 1.25vw, 1.0625rem);
    line-height: 1.7;
}

.wsy-auth-brand > small {
    color: #71717A;
    font-size: var(--wsy-text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wsy-auth-grid {
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom right, transparent 5%, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom right, transparent 5%, #000 60%, transparent 100%);
}

.wsy-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    background: var(--wsy-bg);
}

.wsy-auth-panel-inner {
    width: 100%;
    max-width: 440px;
    min-width: 0;
}

.wsy-auth-card {
    width: 100%;
    box-sizing: border-box;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r-lg);
}

.wsy-auth-card-head { margin-bottom: 2rem; }

.wsy-auth-logo { margin: 0 0 2.75rem; }
.wsy-auth-logo img { display: block; width: min(100%, 245px); height: auto; }

.wsy-auth-card-head h2 {
    margin: 0 0 .5rem;
    font-size: var(--wsy-text-xl);
    font-weight: 700;
    letter-spacing: -.025em;
}

.wsy-auth-card-head > p:last-child { margin: 0; color: var(--wsy-text-2); }

.wsy-auth-card .form-control-lg {
    min-height: 46px;
    font-size: var(--wsy-text-base);
}

.wsy-auth-footer {
    padding: 1.25rem 0 0;
    color: var(--wsy-text-3);
    font-size: var(--wsy-text-xs);
    text-align: center;
}

@media (max-width: 991.98px) {
    .wsy-auth-shell { grid-template-columns: minmax(280px, 38%) 1fr; }
    .wsy-auth-brand { padding: 2rem; }
    .wsy-auth-kicker { margin-bottom: 5rem; }
}

@media (max-width: 767.98px) {
    .wsy-auth-shell { display: block; background: var(--wsy-bg); }
    .wsy-auth-brand { display: none; }
    .wsy-auth-panel { padding: 1rem; }
    .wsy-auth-card { padding: 1.5rem; }
    .wsy-auth-logo { margin-bottom: 2rem; }
}

/* ==========================================================================
   12. Complete component bridge
   --------------------------------------------------------------------------
   The application mixes OneUI, Bootstrap 5 and several jQuery plugins. These
   adapters make their generated DOM share the same Metronic-inspired tokens
   without replacing plugin JavaScript or changing form behaviour.
   ========================================================================== */

/* --- Bootstrap cards and utility colours -------------------------------- */
.card {
    color: var(--wsy-text);
    background-color: var(--wsy-surface);
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r-lg);
    box-shadow: none;
}

.card-header,
.card-footer {
    padding: 1rem 1.25rem;
    background-color: transparent;
    border-color: var(--wsy-border);
}

.card-header:first-child { border-radius: var(--wsy-r-lg) var(--wsy-r-lg) 0 0; }
.card-footer:last-child { border-radius: 0 0 var(--wsy-r-lg) var(--wsy-r-lg); }
.card-body { padding: 1.25rem; }
.card-title { color: var(--wsy-ink); font-weight: 600; }

.bg-primary { background-color: var(--wsy-ink) !important; }
.text-primary { color: var(--wsy-ink) !important; }
.border-primary { border-color: var(--wsy-ink) !important; }
.bg-success { background-color: var(--wsy-success) !important; }
.bg-danger { background-color: var(--wsy-danger) !important; }
.bg-warning { background-color: var(--wsy-warning) !important; }
.bg-info { background-color: var(--wsy-info) !important; }

.link-fx,
a:not(.btn):not(.nav-main-link):not(.dropdown-item):not(.page-link) {
    text-decoration-color: rgba(10, 10, 10, .3);
}

.btn-alt-primary {
    color: var(--wsy-ink);
    background-color: #F1F1F3;
    border-color: #F1F1F3;
}
.btn-alt-primary:hover,
.btn-alt-primary:focus {
    color: #fff;
    background-color: var(--wsy-ink);
    border-color: var(--wsy-ink);
}

.btn-block-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wsy-text-2);
    border-radius: 6px;
}
.btn-block-option:hover { color: var(--wsy-ink); background-color: #F4F4F5; }

/* --- Input families ------------------------------------------------------ */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text { min-height: 38px; }

.input-group-text { padding: .5rem .75rem; }
.form-floating > label { color: var(--wsy-text-2); }
.form-text { color: var(--wsy-text-2); font-size: var(--wsy-text-xs); }

fieldset {
    min-width: 0;
    padding: 1.125rem;
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r);
}
legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 .375rem;
    color: var(--wsy-ink);
    font-size: var(--wsy-text-sm);
    font-weight: 600;
}

.form-range::-webkit-slider-thumb { background-color: var(--wsy-ink); }
.form-range::-moz-range-thumb { background-color: var(--wsy-ink); border: 0; }

/* --- DataTables ---------------------------------------------------------- */
.dataTables_wrapper { color: var(--wsy-text); }
.dataTables_wrapper .row { align-items: center; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--wsy-text-2);
    font-size: var(--wsy-text-sm);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    min-height: 34px;
    margin: 0 .375rem;
    padding: .375rem .625rem;
    color: var(--wsy-text);
    background-color: #fff;
    border: 1px solid #DDDDE1;
    border-radius: 6px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--wsy-ink);
    box-shadow: 0 0 0 3px var(--wsy-accent-ring);
}

.dataTables_wrapper .dataTables_info { padding-top: .75rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .625rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .page-item .page-link {
    min-width: 32px;
    margin: 0 2px;
    padding: .375rem .625rem;
    color: var(--wsy-text) !important;
    background: #fff !important;
    border: 1px solid var(--wsy-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .page-item:not(.active) .page-link:hover {
    color: var(--wsy-ink) !important;
    background: #F4F4F5 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .page-item.active .page-link {
    color: #fff !important;
    background: var(--wsy-ink) !important;
    border-color: var(--wsy-ink) !important;
}

.dataTables_wrapper .dataTables_processing {
    padding: 1rem;
    color: var(--wsy-text-2);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r);
    box-shadow: var(--wsy-shadow);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-position: right .625rem center; }

/* --- Date and time pickers ---------------------------------------------- */
.flatpickr-calendar,
.datepicker,
.datepicker-dropdown,
.daterangepicker {
    color: var(--wsy-text);
    background: #fff;
    border: 1px solid var(--wsy-border) !important;
    border-radius: var(--wsy-r) !important;
    box-shadow: var(--wsy-shadow) !important;
    font-family: var(--wsy-font-body);
}

.flatpickr-months,
.flatpickr-weekdays,
.datepicker .datepicker-switch,
.daterangepicker .calendar-table { background: #fff; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday,
.datepicker table th,
.daterangepicker th {
    color: var(--wsy-text-2);
    font-size: var(--wsy-text-xs);
    font-weight: 600;
}

.flatpickr-day,
.datepicker table td,
.daterangepicker td {
    color: var(--wsy-text);
    border-radius: 7px !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.datepicker table tr td.day:hover,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    color: var(--wsy-ink);
    background: #F4F4F5;
    border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    color: #fff !important;
    background: var(--wsy-ink) !important;
    border-color: var(--wsy-ink) !important;
}

.flatpickr-day.today { border-color: var(--wsy-ink); }
.flatpickr-day.inRange,
.daterangepicker td.in-range { color: var(--wsy-ink); background: #F1F1F3; box-shadow: none; }

.daterangepicker .ranges li {
    margin: 2px .375rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: var(--wsy-text-sm);
}
.daterangepicker .ranges li:hover { background: #F4F4F5; }
.daterangepicker .ranges li.active { color: #fff; background: var(--wsy-ink); }

/* --- Rich editor and upload components --------------------------------- */
.note-editor.note-frame,
.note-editor.note-airframe {
    border: 1px solid var(--wsy-border) !important;
    border-radius: var(--wsy-r) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.note-editor .note-toolbar,
.note-editor .note-statusbar {
    padding: .5rem;
    background: #FAFAFA !important;
    border-color: var(--wsy-border) !important;
}
.note-editor .note-btn {
    color: var(--wsy-text);
    background: #fff;
    border-color: var(--wsy-border);
    border-radius: 5px;
}
.note-editor .note-btn:hover { color: var(--wsy-ink); background: #F4F4F5; }
.note-editor .note-editable { min-height: 160px; padding: 1rem; color: var(--wsy-text); background: #fff; }

.file-input .file-preview,
.file-preview,
.file-drop-zone {
    background: #FAFAFA;
    border: 1px dashed #C4C4CB !important;
    border-radius: var(--wsy-r) !important;
}
.file-drop-zone { padding: 1rem; }
.file-drop-zone:hover { background: #F4F4F5; border-color: var(--wsy-ink) !important; }
.file-preview-frame {
    background: #fff;
    border: 1px solid var(--wsy-border) !important;
    border-radius: var(--wsy-r-sm);
    box-shadow: none !important;
}
.file-caption-main .file-caption,
.kv-fileinput-caption { border-color: #DDDDE1; border-radius: var(--wsy-r-sm) 0 0 var(--wsy-r-sm); }
.file-caption-name { color: var(--wsy-text-2); }

/* --- SweetAlert, Toastr and generated notifications --------------------- */
.swal2-popup {
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.5rem;
    color: var(--wsy-text);
    background: #fff;
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r-lg);
    box-shadow: var(--wsy-shadow-lg);
    font-family: var(--wsy-font-body);
}
.swal2-title { padding: .5rem 1rem 0; color: var(--wsy-ink); font-size: var(--wsy-text-xl); font-weight: 700; }
.swal2-html-container { color: var(--wsy-text-2); font-size: var(--wsy-text-base); }
.swal2-actions { gap: .5rem; }
.swal2-styled { margin: 0 !important; padding: .5rem 1rem !important; border-radius: var(--wsy-r-sm) !important; box-shadow: none !important; font-size: var(--wsy-text-base) !important; font-weight: 500 !important; }
.swal2-confirm { background: var(--wsy-ink) !important; }
.swal2-cancel { color: var(--wsy-text) !important; background: #F1F1F3 !important; }
.swal2-deny { background: var(--wsy-danger) !important; }
.swal2-icon { transform: scale(.84); }

#toast-container > .toast,
.toast {
    color: var(--wsy-text);
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid var(--wsy-border);
    border-left: 4px solid var(--wsy-info);
    border-radius: var(--wsy-r);
    box-shadow: var(--wsy-shadow);
    opacity: 1;
}
#toast-container > .toast-success { border-left-color: var(--wsy-success); }
#toast-container > .toast-error { border-left-color: var(--wsy-danger); }
#toast-container > .toast-warning { border-left-color: var(--wsy-warning); }
#toast-container > .toast-info { border-left-color: var(--wsy-info); }
#toast-container .toast-title { color: var(--wsy-ink); font-weight: 600; }
#toast-container .toast-message { color: var(--wsy-text-2); }
#toast-container .toast-close-button { color: var(--wsy-text); text-shadow: none; }

[data-notify="container"] {
    border: 1px solid var(--wsy-border) !important;
    border-radius: var(--wsy-r) !important;
    box-shadow: var(--wsy-shadow) !important;
    font-family: var(--wsy-font-body);
}

/* --- Navigation, disclosure and overlays -------------------------------- */
.nav-pills { gap: .25rem; }
.nav-pills .nav-link {
    color: var(--wsy-text-2);
    border-radius: var(--wsy-r-sm);
    font-size: var(--wsy-text-base);
    font-weight: 500;
}
.nav-pills .nav-link:hover { color: var(--wsy-ink); background: #F4F4F5; }
.nav-pills .nav-link.active { color: #fff; background: var(--wsy-ink); }

.accordion-item {
    border-color: var(--wsy-border);
    background: #fff;
}
.accordion-item:first-of-type { border-radius: var(--wsy-r) var(--wsy-r) 0 0; }
.accordion-item:last-of-type { border-radius: 0 0 var(--wsy-r) var(--wsy-r); }
.accordion-button { color: var(--wsy-text); background: #fff; font-size: var(--wsy-text-base); font-weight: 600; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--wsy-ink); background: #FAFAFA; }
.accordion-button:focus { border-color: var(--wsy-border); box-shadow: 0 0 0 3px var(--wsy-accent-ring) !important; }

.list-group-item { padding: .75rem 1rem; color: var(--wsy-text); background: #fff; border-color: var(--wsy-border); }
.list-group-item-action:hover { color: var(--wsy-ink); background: #FAFAFA; }
.list-group-item.active { color: #fff; background: var(--wsy-ink); border-color: var(--wsy-ink); }

.offcanvas { color: var(--wsy-text); background: #fff; border-color: var(--wsy-border) !important; box-shadow: var(--wsy-shadow-lg); }
.offcanvas-header { padding: 1.25rem; border-bottom: 1px solid var(--wsy-border); }
.offcanvas-body { padding: 1.25rem; }

.tooltip-inner { padding: .375rem .625rem; color: #fff; background: var(--wsy-ink); border-radius: 6px; font-size: var(--wsy-text-xs); }
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--wsy-ink); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--wsy-ink); }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--wsy-ink); }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--wsy-ink); }

.popover { border: 1px solid var(--wsy-border); border-radius: var(--wsy-r); box-shadow: var(--wsy-shadow); font-family: var(--wsy-font-body); }
.popover-header { color: var(--wsy-ink); background: #FAFAFA; border-color: var(--wsy-border); font-size: var(--wsy-text-sm); font-weight: 600; }
.popover-body { color: var(--wsy-text-2); font-size: var(--wsy-text-sm); }

/* --- Progress, loaders and empty states --------------------------------- */
.progress { height: .5rem; background: #E4E4E7; border-radius: 999px; overflow: hidden; }
.progress-bar { background-color: var(--wsy-ink); border-radius: 999px; }
.spinner-border,
.spinner-grow { color: var(--wsy-ink); }

.placeholder { background-color: #E4E4E7; border-radius: 4px; }
.empty-state { padding: 2rem; color: var(--wsy-text-2); text-align: center; }

/* Responsive plugin controls should stack rather than overflow. */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { margin: .375rem 0; text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { width: calc(100% - 5.5rem); max-width: none; }
    .daterangepicker { max-width: calc(100vw - 1rem); }
}

/* ==========================================================================
   16. Searchable light sidebar
   --------------------------------------------------------------------------
   Keeps the existing permission-driven menu tree, while presenting it as a
   clean Metronic-style navigation rail. Search behavior lives in
   js/wsy-sidebar.js and works recursively through every submenu depth.
   ========================================================================== */

#sidebar {
    --wsy-sidebar-active: #337CF6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--wsy-text);
    background: #fff;
    border-right: 1px solid var(--wsy-border);
    box-shadow: none !important;
}

#sidebar .content-header {
    flex: 0 0 64px;
    min-height: 64px;
    padding: .625rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--wsy-border);
}

#sidebar .wsy-sidebar-logo {
    display: block;
    width: 170px;
    max-width: 100%;
    height: 42px;
    margin: 0;
    object-fit: contain;
}

#sidebar .wsy-sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--wsy-text-2);
}

#sidebar .wsy-sidebar-toggle:hover,
#sidebar .wsy-sidebar-toggle:focus {
    color: var(--wsy-ink);
}

.wsy-sidebar-search {
    flex: 0 0 auto;
    padding: 1rem .75rem;
    background: #fff;
    border-bottom: 1px solid var(--wsy-border);
}

.wsy-sidebar-search-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #7E8299;
    background: #fff;
    border: 1px solid #D9DCE3;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(24, 28, 50, .06);
    transition: border-color var(--wsy-fast) var(--wsy-ease),
                box-shadow var(--wsy-fast) var(--wsy-ease);
}

.wsy-sidebar-search-control:focus-within {
    color: var(--wsy-sidebar-active);
    border-color: var(--wsy-sidebar-active);
    box-shadow: 0 0 0 3px rgba(51, 124, 246, .13);
}

.wsy-sidebar-search-icon {
    position: absolute;
    left: .875rem;
    z-index: 1;
    flex: 0 0 auto;
    pointer-events: none;
}

.wsy-sidebar-search-input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: .625rem 2.5rem .625rem 2.65rem;
    color: var(--wsy-text);
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: .8125rem;
}

.wsy-sidebar-search-input::placeholder { color: #9CA0AE; opacity: 1; }
.wsy-sidebar-search-input::-webkit-search-cancel-button { display: none; }

.wsy-sidebar-search-clear {
    position: absolute;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #7E8299;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.wsy-sidebar-search-clear:hover { color: var(--wsy-text); background: #F1F1F3; }
.wsy-sidebar-search-empty { margin: 1.5rem .75rem; color: var(--wsy-text-2); font-size: var(--wsy-text-sm); text-align: center; }

#sidebar .js-sidebar-scroll {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-color: #D5D7DE transparent;
    scrollbar-gutter: stable;
}

#sidebar .js-sidebar-scroll::-webkit-scrollbar-thumb { background-color: #D5D7DE; }
#sidebar .content-side { padding: .875rem .75rem 1.25rem; }

#sidebar .nav-main-dark .nav-main-link {
    min-height: 40px;
    margin-bottom: 3px;
    padding: .575rem .75rem;
    color: #3F4254;
    background: transparent;
    border-radius: 9px;
    font-size: .8125rem;
    font-weight: 500;
}

#sidebar .nav-main-dark .nav-main-link > .nav-main-link-icon {
    width: 20px;
    height: 20px;
    margin-right: .75rem;
    color: #7E8299;
}

#sidebar .nav-main-dark .nav-main-link:hover,
#sidebar .nav-main-dark .nav-main-link:focus {
    color: #181C32;
    background: #F1F5F9;
}

#sidebar .nav-main-dark .nav-main-link:hover > .nav-main-link-icon,
#sidebar .nav-main-dark .nav-main-link:focus > .nav-main-link-icon { color: #4B5563; }

#sidebar .nav-main-dark > .nav-main-item > .nav-main-link.active,
#sidebar .nav-main-dark > .nav-main-item.open > .nav-main-link.active {
    color: #fff;
    background: var(--wsy-sidebar-active);
    font-weight: 600;
}

#sidebar .nav-main-dark > .nav-main-item > .nav-main-link.active > .nav-main-link-icon,
#sidebar .nav-main-dark > .nav-main-item.open > .nav-main-link.active > .nav-main-link-icon { color: #fff; }

#sidebar .nav-main-dark .nav-main-link.active::after { display: none; }

#sidebar .nav-main-dark .nav-main-submenu,
#sidebar .nav-main-dark .nav-main-item.open > .nav-main-submenu,
#sidebar .nav-main-dark .nav-main-submenu .nav-main-item.open > .nav-main-submenu {
    background: transparent;
}

#sidebar .nav-main-dark .nav-main-item.open > .nav-main-submenu {
    margin: 1px 0 .375rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
}

#sidebar .nav-main-dark .nav-main-submenu::before {
    left: 1.3rem;
    background: #E3E6EC;
}

#sidebar .nav-main-dark .nav-main-submenu .nav-main-link {
    min-height: 34px;
    padding: .425rem .75rem .425rem 2.2rem;
    color: #6B7280;
    font-size: .78125rem;
}

#sidebar .nav-main-dark .nav-main-submenu .nav-main-submenu .nav-main-link { padding-left: 2.75rem; }

#sidebar .nav-main-dark .nav-main-submenu .nav-main-link:hover,
#sidebar .nav-main-dark .nav-main-submenu .nav-main-link:focus {
    color: #181C32;
    background: #F1F5F9;
}

#sidebar .nav-main-dark .nav-main-submenu .nav-main-link.active {
    color: #246BD8;
    background: rgba(51, 124, 246, .1);
    font-weight: 600;
}

#sidebar .nav-main-dark .nav-main-item.open > .nav-main-link-submenu {
    color: #181C32;
    background: #F8FAFC;
}

#sidebar .nav-main-dark .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon { color: #4B5563; }

#sidebar .nav-main-dark .nav-main-link.nav-main-link-submenu::before {
    color: #7E8299;
    opacity: .75;
}

#sidebar .nav-main-dark .nav-main-heading {
    padding: 1.25rem .75rem .5rem;
    color: #8A8D9A;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .015em;
    text-transform: none;
}

#sidebar [hidden] { display: none !important; }

@media (min-width: 992px) {
    #page-container.sidebar-mini.sidebar-o #sidebar .wsy-sidebar-search {
        width: 240px;
        transform: translateX(180px) translateY(0) translateZ(0);
        transition: transform .28s ease-out;
        will-change: transform;
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:hover .wsy-sidebar-search {
        transform: translateX(0) translateY(0) translateZ(0);
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .wsy-sidebar-search {
        padding-right: .625rem;
        padding-left: .625rem;
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .wsy-sidebar-search-control {
        width: 40px;
        min-height: 40px;
        border-color: transparent;
        box-shadow: none;
    }

    /* The 19px glyph is centred on the 40px control rather than kept at a fixed
       inset, so it lands on the same rail axis as the nav icons below it. */
    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .wsy-sidebar-search-icon {
        left: 50%;
        transform: translateX(-50%);
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .wsy-sidebar-search-input,
    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .wsy-sidebar-search-clear { opacity: 0; pointer-events: none; }

    /* Collapsed rail: only the first 60px of the 240px sidebar stays on screen.
       `.content-side` is forced to 220px with auto margins (layout override in
       layouts/admin.blade.php) and `.nav-main` carries OneUI's -1.25rem bleed,
       so the item box starts 8px off the rail and its background runs past the
       sidebar edge — the icon then reads left-of-centre inside a pill that has
       no visible right edge. Neutralise both offsets while collapsed so every
       measurement below is taken from the rail itself. */
    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .content-side {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .nav-main-dark {
        margin-right: 0;
        margin-left: 0;
    }

    /* 40x40 pill centred in the 60px rail — (60 - 40) / 2 = 10, matching the
       collapsed search control — with the 20px icon centred inside it:
       (40 - 20) / 2 = 10. The label keeps its box and simply overflows out of
       the pill, so the hover-to-expand reveal is unaffected. */
    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .nav-main-dark > .nav-main-item > .nav-main-link {
        width: 40px;
        margin-left: 10px;
        padding-right: 0;
        padding-left: 10px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* OneUI pins the submenu caret to `right: .625rem`; inside a 40px pill that
       lands on top of the icon instead of off-rail. */
    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .nav-main-dark > .nav-main-item > .nav-main-link-submenu::before {
        display: none;
    }

    /* Same treatment for the brand row. The mini mark and the wordmark share one
       centred flex box, so while collapsed the (faded-out) wordmark still drags
       the mark ~4px off the rail axis; taking it out of flow leaves the mark
       alone to centre on the same 40px box as the search and nav icons. */
    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .content-header {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .content-header > a {
        position: relative;
        flex: 0 0 40px;
        width: 40px;
        margin-left: 10px;
        overflow: hidden;
    }

    #page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .content-header .wsy-sidebar-logo {
        position: absolute;
        left: 0;
        /* Keep its natural width against the 40px containing block, otherwise
           `max-width: 100%` squashes it mid-fade as the rail collapses. */
        max-width: none;
    }
}

@media (max-width: 991.98px) {
    #sidebar .content-header,
    .wsy-sidebar-search,
    #sidebar .content-side { width: min(100vw, 320px); }
}

/* --- Standalone authorization and member utility pages ----------------- */
.wsy-standalone-page {
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
    color: var(--wsy-text);
    background: var(--wsy-bg);
    font-family: var(--wsy-font-body);
}

.wsy-standalone-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 4rem);
}

.wsy-standalone-card {
    width: 100%;
    max-width: 480px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r-lg);
}

.wsy-standalone-brand {
    display: block;
    width: min(100%, 210px);
    height: auto;
    margin: 0 0 2rem;
}

.wsy-standalone-card h1,
.wsy-standalone-card h2 {
    margin: 0 0 .5rem;
    color: var(--wsy-ink);
    font-size: var(--wsy-text-xl);
    font-weight: 700;
    letter-spacing: -.025em;
}

.wsy-standalone-card > p { margin-bottom: 1.75rem; color: var(--wsy-text-2); }
.wsy-standalone-card .form-group { margin-bottom: 1rem; }

.wsy-checkpoint-page {
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
    overflow: auto;
    color: var(--wsy-text);
    background: var(--wsy-bg) !important;
    font-family: var(--wsy-font-body);
}

.wsy-checkpoint-page > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    margin: 0 auto !important;
    padding: 0;
}

.wsy-checkpoint-logo {
    display: block;
    width: min(70%, 230px);
    height: auto;
    margin: 0 auto 2.5rem;
}

.wsy-checkpoint-page .title-animate {
    margin-bottom: .5rem !important;
    color: var(--wsy-ink) !important;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    animation: none;
}

.wsy-checkpoint-page .wsy-checkpoint-subtitle {
    margin-bottom: 2rem;
    color: var(--wsy-text-2);
    text-align: center;
}

.wsy-checkpoint-page .card-custom {
    width: 100%;
    padding: clamp(1.25rem, 5vw, 2rem);
    text-align: left;
    background: #fff !important;
    border: 1px solid var(--wsy-border);
    border-radius: var(--wsy-r-lg);
    box-shadow: none;
    animation: none;
}

.wsy-checkpoint-page .input-custom {
    min-height: 42px;
    padding: .625rem .875rem;
    border-color: #DDDDE1;
    border-radius: var(--wsy-r-sm);
}

.wsy-checkpoint-page .btn-custom { min-height: 42px; height: auto; padding: .625rem 1rem; font-size: var(--wsy-text-base); }
.wsy-checkpoint-page .btn-glow:hover { box-shadow: none; transform: none; }
.wsy-checkpoint-page .spinner-custom { animation: wsy-spin .6s linear infinite; }

/* ==========================================================================
   13. Motion preferences & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .block {
        box-shadow: none !important;
        border-color: #ddd !important;
    }
    body { background: #fff !important; font-size: 11px; }
    #page-container, #main-container { background: #fff !important; }
}