/* ================================================================================
 * 38-v160-foundation.css — Hi Car Match v160 Design Foundation
 * --------------------------------------------------------------------------------
 * Loads AFTER all 37 legacy layers, so it wins the cascade on equal specificity.
 *
 * RESPONSIBILITIES
 *   1. Re-point legacy design tokens so the "sticker/cartoon" identity dies
 *      globally without editing any of the 37 legacy files.
 *   2. Publish the v160 semantic token set (--v160-*) that every downstream
 *      layer (39-public, 40-console, 41-mobile) and every view template builds on.
 *   3. Ship the global component primitives (.v160-*) used site-wide.
 *
 * TARGET AESTHETIC: Encar / KCar / AutoTrader — clean, dense, trustworthy.
 *   Hairline borders. Soft elevation. Cool neutrals. Brand red as accent only.
 *
 * PRESERVED, DO NOT CHANGE HERE:
 *   --gab-primary-50..900 (brand red #D8342C), logo SVG rendering, RTL support.
 *
 * BREAKPOINTS (CSS custom properties cannot be used in @media, so these are the
 * canonical literal values every layer must reuse):
 *   mobile   : @media (max-width: 640px)
 *   tablet   : @media (max-width: 1024px)
 *   desktop  : @media (min-width: 1025px)
 *   wide     : @media (min-width: 1441px)
 * ============================================================================== */


/* ================================================================================
 * 1. TOKENS
 * ============================================================================== */

:root {

    /* ---------------------------------------------------------------------------
     * 1.1  LEGACY OVERRIDE — kill the sticker identity at the source.
     * ------------------------------------------------------------------------- */

    /* Ink was a warm near-black used for 2px cartoon outlines. Now a cool slate
       so it reads as professional UI text / dark surface instead of marker ink. */
    --hicm-ink: #0F172A;
    --hicm-cream: #F8FAFC;
    --hicm-blue: #DBEAFE;
    --hicm-blue-soft: #EFF6FF;

    /* The two tokens responsible for every cartoon outline in the codebase. */
    --hicm-border: 1px solid #E2E8F0;
    --hicm-border-bold: 1px solid #CBD5E1;

    /* Hard offset "sticker" shadows -> real elevation. */
    --hicm-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.08);
    --hicm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);

    /* Kills 'Jua' everywhere in one move — it is only ever delivered through
       var(--gab-font-display). Display now === body stack. */
    --gab-font-display: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system,
                        BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Real elevation ramp replacing the offset-only shadow scale. */
    --gab-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
    --gab-shadow:     0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06);
    --gab-shadow-md:  0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.08);
    --gab-shadow-lg:  0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.10);
    --gab-shadow-xl:  0 8px 16px rgba(15, 23, 42, 0.05), 0 20px 36px rgba(15, 23, 42, 0.12);
    --gab-shadow-2xl: 0 12px 24px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.14);

    /* Tighter, professional radii. */
    --gab-radius-sm:  4px;
    --gab-radius:     8px;
    --gab-radius-md:  10px;
    --gab-radius-lg:  12px;
    --gab-radius-xl:  14px;
    --gab-radius-2xl: 16px;
    --gab-radius-full: 9999px;

    /* Cool slate neutral ramp (was warm beige #F6F5F2 / #E8E6E1). */
    --gab-gray-50:  #FFFFFF;
    --gab-gray-100: #F8FAFC;
    --gab-gray-200: #F1F5F9;
    --gab-gray-300: #E2E8F0;
    --gab-gray-400: #94A3B8;
    --gab-gray-500: #64748B;
    --gab-gray-600: #475569;
    --gab-gray-700: #334155;
    --gab-gray-800: #1E293B;
    --gab-gray-900: #0F172A;

    /* Status colours aligned to the cool ramp. */
    --gab-success: #15803D;
    --gab-warning: #B45309;
    --gab-danger:  #DC2626;
    --gab-info:    #1D4ED8;

    /* Dark navy surfaces cooled to match. */
    --gab-navy-950: #020617;
    --gab-navy-900: #0F172A;
    --gab-navy-800: #1E293B;
    --gab-navy-700: #334155;
    --gab-navy-600: #475569;

    /* Brand glow softened; --gab-primary-* and --gab-grad-* intentionally untouched. */
    --gab-glow-brand: 0 10px 28px -14px rgba(176, 35, 24, 0.34);


    /* ---------------------------------------------------------------------------
     * 1.2  V160 SEMANTIC SURFACES / TEXT / BORDERS
     * ------------------------------------------------------------------------- */

    --v160-surface:        #FFFFFF;   /* cards, panels, table body */
    --v160-surface-2:      #F8FAFC;   /* page background, table head */
    --v160-surface-3:      #F1F5F9;   /* inset wells, skeleton base, hover fill */
    --v160-surface-inset:  #F8FAFC;   /* disabled controls, read-only fields */
    --v160-surface-dark:   #0F172A;   /* inverse chrome, tooltips */
    --v160-surface-overlay: rgba(15, 23, 42, 0.48);

    --v160-border:         #E2E8F0;   /* default hairline */
    --v160-border-subtle:  #F1F5F9;   /* internal dividers inside a card */
    --v160-border-strong:  #CBD5E1;   /* control borders, emphasis */
    --v160-border-inverse: rgba(255, 255, 255, 0.14);

    --v160-text:           #0F172A;   /* primary copy, headings */
    --v160-text-muted:     #475569;   /* secondary copy, labels */
    --v160-text-subtle:    #64748B;   /* meta / tertiary copy — 4.76:1 on #FFF, 4.55:1 on #F8FAFC (AA) */
    --v160-text-placeholder: #94A3B8; /* ::placeholder and disabled controls ONLY (WCAG-exempt) */
    --v160-text-inverse:   #FFFFFF;
    --v160-text-link:      #1D4ED8;

    /* Accent = brand red. Values mirror --gab-primary-600/700/800 exactly. */
    --v160-accent:         #D8342C;
    --v160-accent-hover:   #B02318;
    --v160-accent-active:  #8C1812;
    --v160-accent-soft:    #FDF1EF;
    --v160-accent-border:  #F4BAB3;
    --v160-accent-contrast: #FFFFFF;

    --v160-success:        #15803D;
    --v160-success-soft:   #ECFDF3;
    --v160-success-border: #A7F3C4;

    --v160-warning:        #B45309;
    --v160-warning-soft:   #FFFBEB;
    --v160-warning-border: #FDE68A;

    --v160-danger:         #DC2626;
    --v160-danger-soft:    #FEF2F2;
    --v160-danger-border:  #FECACA;

    --v160-info:           #1D4ED8;
    --v160-info-soft:      #EFF6FF;
    --v160-info-border:    #BFDBFE;

    --v160-neutral:        #475569;
    --v160-neutral-soft:   #F1F5F9;
    --v160-neutral-border: #E2E8F0;


    /* ---------------------------------------------------------------------------
     * 1.3  ELEVATION
     * ------------------------------------------------------------------------- */

    --v160-elev-0: none;
    --v160-elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --v160-elev-2: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06);
    --v160-elev-3: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.08);
    --v160-elev-4: 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.10);
    --v160-elev-5: 0 12px 24px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.14);

    --v160-ring:         0 0 0 3px rgba(216, 52, 44, 0.18);
    --v160-ring-danger:  0 0 0 3px rgba(220, 38, 38, 0.18);
    --v160-ring-neutral: 0 0 0 3px rgba(100, 116, 139, 0.18);
    --v160-ring-info:    0 0 0 3px rgba(29, 78, 216, 0.18);


    /* ---------------------------------------------------------------------------
     * 1.4  RADIUS
     * ------------------------------------------------------------------------- */

    --v160-r-xs:  4px;
    --v160-r-sm:  6px;
    --v160-r-md:  8px;
    --v160-r-lg:  10px;
    --v160-r-xl:  12px;
    --v160-r-2xl: 16px;
    --v160-r-pill: 9999px;


    /* ---------------------------------------------------------------------------
     * 1.5  SPACING (4px base scale)
     * ------------------------------------------------------------------------- */

    --v160-space-1:  4px;
    --v160-space-2:  8px;
    --v160-space-3:  12px;
    --v160-space-4:  16px;
    --v160-space-5:  20px;
    --v160-space-6:  24px;
    --v160-space-7:  32px;
    --v160-space-8:  40px;
    --v160-space-9:  48px;
    --v160-space-10: 56px;
    --v160-space-11: 64px;
    --v160-space-12: 80px;


    /* ---------------------------------------------------------------------------
     * 1.6  TYPOGRAPHY
     * ------------------------------------------------------------------------- */

    --v160-font-sans: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system,
                      BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --v160-font-ar: 'Noto Sans Arabic', 'Tajawal', 'Pretendard', sans-serif;
    --v160-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    --v160-fs-2xs: 11px;
    --v160-fs-xs:  12px;
    --v160-fs-sm:  13px;
    --v160-fs-md:  14px;
    --v160-fs-lg:  16px;
    --v160-fs-xl:  18px;
    --v160-fs-2xl: 22px;
    --v160-fs-3xl: 28px;
    --v160-fs-4xl: 34px;

    --v160-lh-tight: 1.25;
    --v160-lh-snug:  1.4;
    --v160-lh-base:  1.6;

    --v160-track-tight: -0.02em;
    --v160-track-snug:  -0.01em;


    /* ---------------------------------------------------------------------------
     * 1.7  CONTROL SIZING
     * ------------------------------------------------------------------------- */

    --v160-control-h-sm: 32px;
    --v160-control-h:    40px;
    --v160-control-h-lg: 48px;
    --v160-tap: 44px;                 /* minimum touch target */
    --v160-control-pad-x: 14px;


    /* ---------------------------------------------------------------------------
     * 1.8  MOTION
     * ------------------------------------------------------------------------- */

    --v160-ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --v160-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --v160-dur-fast: 120ms;
    --v160-dur:      180ms;
    --v160-dur-slow: 260ms;


    /* ---------------------------------------------------------------------------
     * 1.9  Z-INDEX — deliberately mirrors the legacy --gab-z-* scale so v160
     *      components and legacy components interleave correctly.
     * ------------------------------------------------------------------------- */

    --v160-z-base:     1;
    --v160-z-raised:   10;
    --v160-z-dropdown: 100;
    --v160-z-sticky:   200;
    --v160-z-fixed:    300;
    --v160-z-overlay:  400;
    --v160-z-modal:    500;
    --v160-z-popover:  600;
    --v160-z-toast:    650;
    --v160-z-tooltip:  700;


    /* ---------------------------------------------------------------------------
     * 1.10 LAYOUT + BREAKPOINT REFERENCE (documentation values — @media needs literals)
     * ------------------------------------------------------------------------- */

    --v160-bp-mobile:  640px;
    --v160-bp-tablet:  1024px;
    --v160-bp-wide:    1440px;

    --v160-container:      1440px;
    --v160-container-tight: 1200px;
    --v160-container-pad: clamp(16px, 4vw, 40px);
}


/* ================================================================================
 * 2. BASE
 * ============================================================================== */

body {
    font-family: var(--v160-font-sans);
    color: var(--v160-text);
    background: var(--v160-surface-2);
    letter-spacing: var(--v160-track-snug);
}

body[dir="rtl"] {
    font-family: var(--v160-font-ar);
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--v160-font-sans);
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
}

body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3,
body[dir="rtl"] h4,
body[dir="rtl"] h5,
body[dir="rtl"] h6 {
    font-family: var(--v160-font-ar);
    letter-spacing: 0;
}

/* Tabular figures for every price / mileage / year / count in the product. */
.v160-num,
.v160-price,
.v160-table .is-numeric,
.v160-kpi__value,
.gab-num, .gab-price, .gab-stat-val, .gab-astat-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.v160-price {
    color: var(--v160-accent);
    font-weight: 700;
    letter-spacing: var(--v160-track-tight);
}

.v160-price__unit {
    font-size: 0.78em;
    font-weight: 600;
    margin-inline-start: 2px;
}


/* --------------------------------------------------------------------------------
 * 2.1  Global focus ring
 * ------------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: 2px;
}

/* Legacy UA outline on mouse click is suppressed only when :focus-visible applies. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

.v160-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================================================
 * 3. DE-STICKER SWEEP
 * --------------------------------------------------------------------------------
 * 25-hicm-skin.css hard-codes cartoon outlines (2px / 2.5px / 3px solid ink) and
 * translate-lift hovers on the selectors below. Token overrides cannot reach
 * literals, so these exact selectors are neutralised here. Single-class
 * specificity is preserved so layers 39/40/41 can still override freely.
 * ============================================================================== */

.gab-site-header,
.gab-nav-bar,
.gab-nav-badge,
.gab-hx-badge,
.gab-hx-btn,
.gab-hx-brand,
.gab-hx-makes-tabs,
.gab-aw-stats,
.gab-aw-stat,
.gab-aw-make,
.gab-aw-make-fallback,
.gab-shipmini,
.gab-shipmini-badge,
.gab-shipmini-select,
.gab-shipmini-btn,
.gab-ccg-ribbon,
.gab-car-card-fav,
.gab-how-section,
.gab-how-node-circle,
.gab-cta,
.gab-btn-accent,
.gab-btn-outline-white,
.gab-btn--primary,
.gab-btn--outline,
.gab-filter-apply,
.gab-fchip,
.gab-qchip,
.gab-filter-chip,
.gab-qbar-filter,
.gab-qbar-sort,
.gab-page-btn,
.gab-rslider-h,
.gab-quickfilters .gab-qf,
.gab-tabbar,
.gab-tabbar-cta-btn,
.gab-drawer,
.gab-drawer-search,
.gab-drawer-join,
.gab-lang-dropdown,
.gab-findmega,
.gab-mega,
.gab-fm-cta-card,
.gab-fm-cta-btn,
.gab-mkpick-brands,
.gab-mkpick-allbtn,
.gab-mkpick-model,
.gab-fb-otab,
.gab-fb-models,
.gab-seller-type,
.gab-safety-mascot,
.gab-list-toolbar,
.gab-cars-grid .gab-car-card,
.gab-cars-grid-3 .gab-car-card {
    border-width: 1px;
    border-color: var(--v160-border);
}

body[dir="rtl"] .gab-drawer,
body[dir="rtl"] .gab-mkpick-brands {
    border-width: 1px;
    border-color: var(--v160-border);
}

/* Directional cartoon rules (2.5px / 3px ink) used as section separators. */
.gab-site-header { border-bottom-width: 1px; }
.gab-nav-bar     { border-bottom-width: 1px; }
.gab-how-section { border-top-width: 1px; border-bottom-width: 1px; }
.gab-tabbar      { border-top-width: 1px; }
.gab-cta         { border-top-width: 1px; border-bottom-width: 1px; }

/* The sticker "lift" hover — replace with an elevation change. */
.gab-btn-primary:hover,
.gab-btn-accent:hover,
.gab-how-node:hover,
.gab-aw-make:hover,
.gab-car-card:hover,
.gab-fm-cta-card:hover,
.gab-mkpick-model:hover {
    transform: none;
    box-shadow: var(--v160-elev-3);
}

/* Mascot drop-shadows were hard offsets; soften without removing the art. */
.gab-safety-mascot,
.gab-shipmini-mascot,
.hicm-character,
.hicm-character-img {
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.14));
}

/* The header/nav pill buttons: restrained radius instead of full sticker pill. */
.gab-btn-primary,
.gab-btn-accent,
.gab-hx-btn,
.gab-filter-apply {
    border-radius: var(--v160-r-md);
    box-shadow: var(--v160-elev-1);
}


/* ================================================================================
 * 4. BUTTON  —  .v160-btn
 * ============================================================================== */

.v160-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v160-space-2);
    min-block-size: var(--v160-control-h);
    padding-inline: var(--v160-control-pad-x);
    padding-block: 0;
    border: 1px solid var(--v160-border-strong);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    color: var(--v160-text);
    font-family: inherit;
    font-size: var(--v160-fs-md);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--v160-track-snug);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--v160-elev-1);
    transition: background var(--v160-dur-fast) var(--v160-ease),
                border-color var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease),
                box-shadow var(--v160-dur-fast) var(--v160-ease);
}

.v160-btn:hover {
    background: var(--v160-surface-3);
    border-color: var(--v160-border-strong);
    color: var(--v160-text);
}

.v160-btn:active {
    background: var(--v160-surface-3);
    box-shadow: none;
}

.v160-btn:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: 2px;
}

.v160-btn[disabled],
.v160-btn.is-disabled,
.v160-btn[aria-disabled="true"] {
    background: var(--v160-surface-inset);
    border-color: var(--v160-border);
    color: var(--v160-text-subtle);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.v160-btn i,
.v160-btn .bi {
    font-size: 1.05em;
    line-height: 1;
}

/* -- variants -- */

.v160-btn--primary {
    background: var(--v160-accent);
    border-color: var(--v160-accent);
    color: var(--v160-accent-contrast);
}
.v160-btn--primary:hover {
    background: var(--v160-accent-hover);
    border-color: var(--v160-accent-hover);
    color: var(--v160-accent-contrast);
}
.v160-btn--primary:active {
    background: var(--v160-accent-active);
    border-color: var(--v160-accent-active);
}

.v160-btn--secondary {
    background: var(--v160-surface);
    border-color: var(--v160-border-strong);
    color: var(--v160-text);
}
.v160-btn--secondary:hover {
    background: var(--v160-surface-3);
}

.v160-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--v160-text-muted);
    box-shadow: none;
}
.v160-btn--ghost:hover {
    background: var(--v160-surface-3);
    border-color: transparent;
    color: var(--v160-text);
}

.v160-btn--danger {
    background: var(--v160-danger);
    border-color: var(--v160-danger);
    color: #FFFFFF;
}
.v160-btn--danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}
.v160-btn--danger:focus-visible {
    outline-color: var(--v160-danger);
}

.v160-btn--quiet {
    background: var(--v160-surface-3);
    border-color: transparent;
    color: var(--v160-text-muted);
    box-shadow: none;
}
.v160-btn--quiet:hover {
    background: var(--v160-border);
    color: var(--v160-text);
}

.v160-btn--accent-soft {
    background: var(--v160-accent-soft);
    border-color: var(--v160-accent-border);
    color: var(--v160-accent-hover);
    box-shadow: none;
}
.v160-btn--accent-soft:hover {
    background: #FADEDA;
    color: var(--v160-accent-active);
}

/* -- sizes -- */

.v160-btn--sm {
    min-block-size: var(--v160-control-h-sm);
    padding-inline: 10px;
    font-size: var(--v160-fs-sm);
    border-radius: var(--v160-r-sm);
    gap: 6px;
}

.v160-btn--lg {
    min-block-size: var(--v160-control-h-lg);
    padding-inline: 22px;
    font-size: var(--v160-fs-lg);
    border-radius: var(--v160-r-lg);
}

.v160-btn--block {
    display: flex;
    inline-size: 100%;
}

.v160-btn--icon {
    inline-size: var(--v160-control-h);
    min-inline-size: var(--v160-control-h);
    padding-inline: 0;
}
.v160-btn--icon.v160-btn--sm {
    inline-size: var(--v160-control-h-sm);
    min-inline-size: var(--v160-control-h-sm);
}
.v160-btn--icon.v160-btn--lg {
    inline-size: var(--v160-control-h-lg);
    min-inline-size: var(--v160-control-h-lg);
}

.v160-btn--pill { border-radius: var(--v160-r-pill); }

/* Directional glyphs inside buttons must flip in RTL. */
[dir="rtl"] .v160-btn .bi-arrow-right,
[dir="rtl"] .v160-btn .bi-arrow-left,
[dir="rtl"] .v160-btn .bi-chevron-right,
[dir="rtl"] .v160-btn .bi-chevron-left {
    transform: scaleX(-1);
}

/* -- button group / segmented control -- */

.v160-btn-group {
    display: inline-flex;
    align-items: stretch;
}
.v160-btn-group .v160-btn {
    border-radius: 0;
    margin-inline-start: -1px;
    box-shadow: none;
}
.v160-btn-group .v160-btn:first-child {
    margin-inline-start: 0;
    border-start-start-radius: var(--v160-r-md);
    border-end-start-radius: var(--v160-r-md);
}
.v160-btn-group .v160-btn:last-child {
    border-start-end-radius: var(--v160-r-md);
    border-end-end-radius: var(--v160-r-md);
}
.v160-btn-group .v160-btn:hover,
.v160-btn-group .v160-btn.is-active {
    position: relative;
    z-index: var(--v160-z-raised);
}
.v160-btn-group .v160-btn.is-active {
    background: var(--v160-accent-soft);
    border-color: var(--v160-accent-border);
    color: var(--v160-accent-hover);
}

.v160-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--v160-surface-3);
    border-radius: var(--v160-r-lg);
}
.v160-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-block-size: 32px;
    padding-inline: 14px;
    border: 0;
    border-radius: var(--v160-r-md);
    background: transparent;
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}
.v160-segmented__item:hover { color: var(--v160-text); }
.v160-segmented__item.is-active,
.v160-segmented__item[aria-selected="true"] {
    background: var(--v160-surface);
    color: var(--v160-text);
    box-shadow: var(--v160-elev-1);
}


/* ================================================================================
 * 5. FORM CONTROLS
 * ============================================================================== */

.v160-input,
.v160-select,
.v160-textarea {
    display: block;
    inline-size: 100%;
    min-block-size: var(--v160-control-h);
    padding-block: 9px;
    padding-inline: 12px;
    border: 1px solid var(--v160-border-strong);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    color: var(--v160-text);
    font-family: inherit;
    font-size: var(--v160-fs-md);
    line-height: 1.4;
    letter-spacing: var(--v160-track-snug);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--v160-dur-fast) var(--v160-ease),
                box-shadow var(--v160-dur-fast) var(--v160-ease);
}

.v160-input::placeholder,
.v160-textarea::placeholder {
    color: var(--v160-text-placeholder);
}

.v160-input:hover,
.v160-select:hover,
.v160-textarea:hover {
    border-color: #B6C2D2;
}

.v160-input:focus,
.v160-select:focus,
.v160-textarea:focus {
    outline: none;
    border-color: var(--v160-accent);
    box-shadow: var(--v160-ring);
}

.v160-input:focus-visible,
.v160-select:focus-visible,
.v160-textarea:focus-visible {
    outline: none;
}

.v160-input[disabled],
.v160-select[disabled],
.v160-textarea[disabled],
.v160-input[readonly],
.v160-textarea[readonly] {
    background: var(--v160-surface-inset);
    color: var(--v160-text-subtle);
    border-color: var(--v160-border);
    cursor: not-allowed;
}

.v160-textarea {
    min-block-size: 96px;
    resize: vertical;
}

/* Select: custom chevron drawn with a data-URI-free gradient-safe SVG background.
   background-position uses logical-safe right/left switched for RTL below. */
.v160-select {
    padding-inline-end: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}
[dir="rtl"] .v160-select {
    background-position: left 12px center;
}

.v160-input--sm,
.v160-select--sm {
    min-block-size: var(--v160-control-h-sm);
    padding-block: 5px;
    padding-inline: 10px;
    font-size: var(--v160-fs-sm);
    border-radius: var(--v160-r-sm);
}
.v160-select--sm { padding-inline-end: 30px; }

.v160-input--lg,
.v160-select--lg {
    min-block-size: var(--v160-control-h-lg);
    font-size: var(--v160-fs-lg);
    border-radius: var(--v160-r-lg);
}

/* Input with a leading icon or a trailing affix. */
.v160-input-group {
    position: relative;
    display: flex;
    align-items: center;
    inline-size: 100%;
}
.v160-input-group__icon {
    position: absolute;
    inset-inline-start: 12px;
    display: flex;
    align-items: center;
    color: var(--v160-text-subtle);
    font-size: 15px;
    pointer-events: none;
}
.v160-input-group__icon ~ .v160-input {
    padding-inline-start: 36px;
}
.v160-input-group__affix {
    position: absolute;
    inset-inline-end: 12px;
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-sm);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.v160-input-group__affix ~ .v160-input {
    padding-inline-end: 52px;
}


/* --------------------------------------------------------------------------------
 * 5.1  Checkbox / Radio
 * ------------------------------------------------------------------------------ */

.v160-checkbox,
.v160-radio {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
    border: 1px solid var(--v160-border-strong);
    background: var(--v160-surface);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                border-color var(--v160-dur-fast) var(--v160-ease);
    display: inline-grid;
    place-content: center;
}

.v160-checkbox { border-radius: var(--v160-r-xs); }
.v160-radio    { border-radius: var(--v160-r-pill); }

.v160-checkbox:hover,
.v160-radio:hover { border-color: var(--v160-accent); }

.v160-checkbox::before {
    content: "";
    inline-size: 10px;
    block-size: 6px;
    border-inline-start: 2px solid #FFFFFF;
    border-block-end: 2px solid #FFFFFF;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity var(--v160-dur-fast) var(--v160-ease);
}
[dir="rtl"] .v160-checkbox::before {
    transform: rotate(-45deg) translate(1px, -1px);
}

.v160-radio::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--v160-r-pill);
    background: #FFFFFF;
    transform: scale(0);
    transition: transform var(--v160-dur-fast) var(--v160-ease);
}

.v160-checkbox:checked,
.v160-radio:checked {
    background: var(--v160-accent);
    border-color: var(--v160-accent);
}
.v160-checkbox:checked::before { opacity: 1; }
.v160-radio:checked::before    { transform: scale(1); }

.v160-checkbox:indeterminate {
    background: var(--v160-accent);
    border-color: var(--v160-accent);
}
.v160-checkbox:indeterminate::before {
    opacity: 1;
    inline-size: 9px;
    block-size: 0;
    border-inline-start: 0;
    border-block-end: 2px solid #FFFFFF;
    transform: none;
}

.v160-checkbox:focus-visible,
.v160-radio:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: 2px;
}

.v160-checkbox[disabled],
.v160-radio[disabled] {
    background: var(--v160-surface-inset);
    border-color: var(--v160-border);
    cursor: not-allowed;
}
.v160-checkbox[disabled]:checked,
.v160-radio[disabled]:checked {
    background: var(--v160-text-subtle);
    border-color: var(--v160-text-subtle);
}

/* Row wrapper: guarantees a 44px tap target without inflating the box visually. */
.v160-check-row {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    min-block-size: var(--v160-tap);
    cursor: pointer;
    color: var(--v160-text);
    font-size: var(--v160-fs-md);
    line-height: 1.4;
}
.v160-check-row__label { flex: 1 1 auto; min-inline-size: 0; }
.v160-check-row__count {
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-xs);
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------------
 * 5.2  Switch
 * ------------------------------------------------------------------------------ */

.v160-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--v160-space-2);
    min-block-size: var(--v160-tap);
    cursor: pointer;
}

.v160-switch__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.v160-switch__track {
    position: relative;
    flex: none;
    display: block;
    inline-size: 40px;
    block-size: 22px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-border-strong);
    transition: background var(--v160-dur) var(--v160-ease);
}

.v160-switch__thumb {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: var(--v160-r-pill);
    background: #FFFFFF;
    box-shadow: var(--v160-elev-1);
    transition: transform var(--v160-dur) var(--v160-ease);
}

.v160-switch__input:checked ~ .v160-switch__track {
    background: var(--v160-accent);
}
.v160-switch__input:checked ~ .v160-switch__track .v160-switch__thumb {
    transform: translateX(18px);
}
[dir="rtl"] .v160-switch__input:checked ~ .v160-switch__track .v160-switch__thumb {
    transform: translateX(-18px);
}

.v160-switch__input:focus-visible ~ .v160-switch__track {
    outline: 2px solid var(--v160-accent);
    outline-offset: 2px;
}

.v160-switch__input[disabled] ~ .v160-switch__track {
    background: var(--v160-border);
    cursor: not-allowed;
}

.v160-switch__label {
    font-size: var(--v160-fs-md);
    color: var(--v160-text);
}


/* --------------------------------------------------------------------------------
 * 5.3  Field wrapper
 * ------------------------------------------------------------------------------ */

.v160-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.v160-field__label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    color: var(--v160-text-muted);
    letter-spacing: var(--v160-track-snug);
}

.v160-field__req {
    color: var(--v160-accent);
    font-weight: 700;
}

.v160-field__optional {
    color: var(--v160-text-subtle);
    font-weight: 500;
    font-size: var(--v160-fs-xs);
}

.v160-field__hint {
    margin: 0;
    font-size: var(--v160-fs-xs);
    line-height: 1.5;
    color: var(--v160-text-subtle);
}

.v160-field__error {
    display: none;
    margin: 0;
    font-size: var(--v160-fs-xs);
    line-height: 1.5;
    color: var(--v160-danger);
}

.v160-field.is-error .v160-field__error { display: block; }

.v160-field.is-error .v160-input,
.v160-field.is-error .v160-select,
.v160-field.is-error .v160-textarea,
.v160-input.is-error,
.v160-select.is-error,
.v160-textarea.is-error {
    border-color: var(--v160-danger);
}
.v160-field.is-error .v160-input:focus,
.v160-field.is-error .v160-select:focus,
.v160-field.is-error .v160-textarea:focus {
    box-shadow: var(--v160-ring-danger);
}

.v160-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--v160-space-3);
}
.v160-field--inline .v160-field__label {
    flex: none;
    inline-size: 120px;
}

.v160-fieldset {
    display: grid;
    gap: var(--v160-space-4);
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}
.v160-fieldset--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v160-fieldset--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v160-fieldset__legend {
    grid-column: 1 / -1;
    padding: 0;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    color: var(--v160-text);
}


/* ================================================================================
 * 6. CARD / PANEL
 * ============================================================================== */

.v160-card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background: var(--v160-surface);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    box-shadow: var(--v160-elev-1);
    overflow: hidden;
}

.v160-card__head {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    padding: var(--v160-space-4) var(--v160-space-5);
    border-block-end: 1px solid var(--v160-border-subtle);
    background: var(--v160-surface);
}

.v160-card__title {
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    font-size: var(--v160-fs-lg);
    font-weight: 700;
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
}

.v160-card__subtitle {
    margin: 2px 0 0;
    font-size: var(--v160-fs-sm);
    font-weight: 500;
    color: var(--v160-text-subtle);
    letter-spacing: 0;
}

.v160-card__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
}

.v160-card__body {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: var(--v160-space-5);
}

.v160-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--v160-space-2);
    padding: var(--v160-space-3) var(--v160-space-5);
    border-block-start: 1px solid var(--v160-border-subtle);
    background: var(--v160-surface-2);
}

.v160-card--flush .v160-card__body { padding: 0; }
.v160-card--tight .v160-card__body { padding: var(--v160-space-4); }
.v160-card--raised { box-shadow: var(--v160-elev-3); }
.v160-card--flat   { box-shadow: none; }

.v160-card--interactive {
    cursor: pointer;
    transition: border-color var(--v160-dur) var(--v160-ease),
                box-shadow var(--v160-dur) var(--v160-ease);
}
.v160-card--interactive:hover {
    border-color: var(--v160-border-strong);
    box-shadow: var(--v160-elev-3);
}
.v160-card--interactive:focus-within {
    border-color: var(--v160-accent);
    box-shadow: var(--v160-ring);
}

.v160-panel {
    min-inline-size: 0;
    background: var(--v160-surface);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-lg);
}
.v160-panel__head {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    padding: var(--v160-space-3) var(--v160-space-4);
    border-block-end: 1px solid var(--v160-border-subtle);
    font-size: var(--v160-fs-sm);
    font-weight: 700;
    color: var(--v160-text-muted);
}
.v160-panel__body { padding: var(--v160-space-4); }
.v160-panel--inset {
    background: var(--v160-surface-2);
    border-color: var(--v160-border-subtle);
}


/* ================================================================================
 * 7. TABLE
 * ============================================================================== */

.v160-table-wrap {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--v160-surface);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

/* When the table sits inside a card body that already draws the border. */
.v160-card__body > .v160-table-wrap,
.v160-card--flush .v160-table-wrap {
    border: 0;
    border-radius: 0;
}

.v160-table {
    inline-size: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--v160-fs-md);
    color: var(--v160-text);
}

.v160-table thead th {
    padding: 11px var(--v160-space-4);
    background: var(--v160-surface-2);
    border-block-end: 1px solid var(--v160-border);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: start;
    white-space: nowrap;
    vertical-align: middle;
}

.v160-table tbody td {
    padding: 13px var(--v160-space-4);
    border-block-end: 1px solid var(--v160-border-subtle);
    vertical-align: middle;
    line-height: 1.45;
}

.v160-table tbody tr:last-child td { border-block-end: 0; }

.v160-table tfoot td {
    padding: 11px var(--v160-space-4);
    border-block-start: 1px solid var(--v160-border);
    background: var(--v160-surface-2);
    font-weight: 700;
}

.v160-table .is-numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.v160-table .is-center  { text-align: center; }
.v160-table .is-nowrap  { white-space: nowrap; }
.v160-table .is-actions {
    text-align: end;
    white-space: nowrap;
    inline-size: 1%;
}

.v160-table__main {
    display: block;
    font-weight: 600;
    color: var(--v160-text);
}
.v160-table__sub {
    display: block;
    margin-block-start: 2px;
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
}

.v160-table--hover tbody tr {
    transition: background var(--v160-dur-fast) var(--v160-ease);
}
.v160-table--hover tbody tr:hover { background: var(--v160-surface-2); }

.v160-table tbody tr.is-selected { background: var(--v160-accent-soft); }

.v160-table--compact thead th { padding: 8px var(--v160-space-3); }
.v160-table--compact tbody td { padding: 9px var(--v160-space-3); font-size: var(--v160-fs-sm); }

.v160-table--sticky thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--v160-z-raised);
}

/* Freeze the first column on horizontal scroll (inventory / settlement grids). */
.v160-table--pin-first thead th:first-child,
.v160-table--pin-first tbody td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: var(--v160-z-base);
    background: var(--v160-surface);
}
.v160-table--pin-first thead th:first-child {
    z-index: calc(var(--v160-z-raised) + 1);
    background: var(--v160-surface-2);
}

.v160-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.v160-table__sort i { font-size: 10px; opacity: 0.5; }
.v160-table__sort[aria-sort="ascending"] i,
.v160-table__sort[aria-sort="descending"] i { opacity: 1; color: var(--v160-accent); }


/* ================================================================================
 * 8. CHIP
 * ============================================================================== */

.v160-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 32px;
    padding-inline: 12px;
    border: 1px solid var(--v160-border-strong);
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface);
    color: var(--v160-text-muted);
    font-family: inherit;
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                border-color var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}

.v160-chip:hover {
    border-color: var(--v160-text-subtle);
    color: var(--v160-text);
}

.v160-chip--active,
.v160-chip.is-active,
.v160-chip[aria-pressed="true"] {
    background: var(--v160-accent-soft);
    border-color: var(--v160-accent);
    color: var(--v160-accent-hover);
}

.v160-chip--removable { padding-inline-end: 6px; }

.v160-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 20px;
    block-size: 20px;
    border: 0;
    border-radius: var(--v160-r-pill);
    background: transparent;
    color: currentColor;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                opacity var(--v160-dur-fast) var(--v160-ease);
}
.v160-chip__x:hover {
    background: rgba(15, 23, 42, 0.08);
    opacity: 1;
}

.v160-chip__count {
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.v160-chip--sm {
    min-block-size: 26px;
    padding-inline: 9px;
    font-size: var(--v160-fs-xs);
}

.v160-chip[disabled],
.v160-chip.is-disabled {
    background: var(--v160-surface-inset);
    border-color: var(--v160-border);
    color: var(--v160-text-subtle);
    cursor: not-allowed;
    pointer-events: none;
}

.v160-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2);
    min-inline-size: 0;
}


/* ================================================================================
 * 9. BADGE
 * ============================================================================== */

.v160-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--v160-r-sm);
    background: var(--v160-neutral-soft);
    color: var(--v160-neutral);
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.v160-badge--neutral {
    background: var(--v160-neutral-soft);
    border-color: var(--v160-neutral-border);
    color: var(--v160-neutral);
}
.v160-badge--success {
    background: var(--v160-success-soft);
    border-color: var(--v160-success-border);
    color: var(--v160-success);
}
.v160-badge--warning {
    background: var(--v160-warning-soft);
    border-color: var(--v160-warning-border);
    color: var(--v160-warning);
}
.v160-badge--danger {
    background: var(--v160-danger-soft);
    border-color: var(--v160-danger-border);
    color: var(--v160-danger);
}
.v160-badge--info {
    background: var(--v160-info-soft);
    border-color: var(--v160-info-border);
    color: var(--v160-info);
}
.v160-badge--accent {
    background: var(--v160-accent-soft);
    border-color: var(--v160-accent-border);
    color: var(--v160-accent-hover);
}
.v160-badge--solid {
    background: var(--v160-accent);
    border-color: var(--v160-accent);
    color: #FFFFFF;
}
.v160-badge--outline {
    background: transparent;
    border-color: var(--v160-border-strong);
    color: var(--v160-text-muted);
}

.v160-badge__dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--v160-r-pill);
    background: currentColor;
    flex: none;
}

.v160-badge--pill { border-radius: var(--v160-r-pill); padding-inline: 10px; }

.v160-badge--lg {
    padding: 5px 10px;
    font-size: var(--v160-fs-sm);
}

/* Numeric counter badge for tabs / nav. */
.v160-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 6px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface-3);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.v160-count--accent { background: var(--v160-accent); color: #FFFFFF; }


/* ================================================================================
 * 10. TABS
 * ============================================================================== */

.v160-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--v160-space-5);
    border-block-end: 1px solid var(--v160-border);
    min-inline-size: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.v160-tabs::-webkit-scrollbar { display: none; }

.v160-tabs__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 12px;
    border: 0;
    background: none;
    color: var(--v160-text-muted);
    font-family: inherit;
    font-size: var(--v160-fs-md);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--v160-dur-fast) var(--v160-ease);
}

.v160-tabs__item::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    block-size: 2px;
    background: var(--v160-accent);
    transform: scaleX(0);
    transition: transform var(--v160-dur) var(--v160-ease);
}

.v160-tabs__item:hover { color: var(--v160-text); }

.v160-tabs__item.is-active,
.v160-tabs__item[aria-selected="true"],
.v160-tabs__item[aria-current="page"],
.v160-tabs__item[aria-current="true"] {
    color: var(--v160-accent);
}
.v160-tabs__item.is-active::after,
.v160-tabs__item[aria-selected="true"]::after,
.v160-tabs__item[aria-current="page"]::after,
.v160-tabs__item[aria-current="true"]::after {
    transform: scaleX(1);
}

.v160-tabs__count {
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--v160-text-subtle);
}
.v160-tabs__item.is-active .v160-tabs__count,
.v160-tabs__item[aria-selected="true"] .v160-tabs__count { color: var(--v160-accent); }

/* Pill variant — used for secondary filter rows. */
.v160-tabs--pill {
    gap: var(--v160-space-2);
    border-block-end: 0;
}
.v160-tabs--pill .v160-tabs__item {
    padding: 7px 14px;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface);
    font-size: var(--v160-fs-sm);
}
.v160-tabs--pill .v160-tabs__item::after { display: none; }
.v160-tabs--pill .v160-tabs__item.is-active,
.v160-tabs--pill .v160-tabs__item[aria-selected="true"] {
    background: var(--v160-accent-soft);
    border-color: var(--v160-accent);
    color: var(--v160-accent-hover);
}

.v160-tabs--fill .v160-tabs__item { flex: 1 1 0; justify-content: center; }


/* ================================================================================
 * 11. PAGINATION
 * ============================================================================== */

.v160-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-block: var(--v160-space-5);
}

.v160-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 36px;
    block-size: 36px;
    padding-inline: 8px;
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    color: var(--v160-text-muted);
    font-family: inherit;
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                border-color var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}

.v160-pagination__item:hover {
    background: var(--v160-surface-3);
    color: var(--v160-text);
}

.v160-pagination__item.is-active,
.v160-pagination__item[aria-current="page"] {
    background: var(--v160-accent);
    border-color: var(--v160-accent);
    color: #FFFFFF;
}

.v160-pagination__item.is-disabled,
.v160-pagination__item[aria-disabled="true"] {
    color: var(--v160-text-subtle);
    background: var(--v160-surface-inset);
    cursor: not-allowed;
    pointer-events: none;
}

.v160-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 28px;
    block-size: 36px;
    color: var(--v160-text-subtle);
}

[dir="rtl"] .v160-pagination__item .bi-chevron-left,
[dir="rtl"] .v160-pagination__item .bi-chevron-right,
[dir="rtl"] .v160-pagination__item .bi-chevron-double-left,
[dir="rtl"] .v160-pagination__item .bi-chevron-double-right {
    transform: scaleX(-1);
}

.v160-pagination__summary {
    inline-size: 100%;
    text-align: center;
    margin-block-start: var(--v160-space-2);
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
    font-variant-numeric: tabular-nums;
}


/* ================================================================================
 * 12. EMPTY STATE
 * ============================================================================== */

.v160-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--v160-space-3);
    padding: var(--v160-space-9) var(--v160-space-5);
    text-align: center;
    color: var(--v160-text-muted);
}

.v160-empty__art {
    inline-size: 120px;
    max-inline-size: 40vw;
    margin-block-end: var(--v160-space-1);
    opacity: 0.95;
}
.v160-empty__art img,
.v160-empty__art svg { inline-size: 100%; block-size: auto; }

.v160-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface-3);
    color: var(--v160-text-subtle);
    font-size: 24px;
}

.v160-empty__title {
    margin: 0;
    font-size: var(--v160-fs-lg);
    font-weight: 700;
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
}

.v160-empty__text {
    margin: 0;
    max-inline-size: 46ch;
    font-size: var(--v160-fs-md);
    line-height: 1.6;
    color: var(--v160-text-subtle);
}

.v160-empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--v160-space-2);
    margin-block-start: var(--v160-space-2);
}

.v160-empty--sm {
    padding: var(--v160-space-6) var(--v160-space-4);
    gap: var(--v160-space-2);
}
.v160-empty--sm .v160-empty__art { inline-size: 76px; }
.v160-empty--sm .v160-empty__title { font-size: var(--v160-fs-md); }
.v160-empty--sm .v160-empty__text { font-size: var(--v160-fs-sm); }

.v160-empty--inline {
    padding: var(--v160-space-5);
    border: 1px dashed var(--v160-border-strong);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface-2);
}

/* Empty state inside a table body. */
.v160-table .v160-empty { padding-block: var(--v160-space-8); }


/* ================================================================================
 * 13. SKELETON
 * ============================================================================== */

.v160-skeleton {
    display: block;
    background: var(--v160-surface-3);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: var(--v160-r-sm);
    animation: v160-shimmer 1.4s var(--v160-ease) infinite;
}

@keyframes v160-shimmer {
    from { background-position: -120% 0; }
    to   { background-position: 220% 0; }
}
[dir="rtl"] .v160-skeleton { animation-direction: reverse; }

.v160-skeleton--text   { block-size: 12px; inline-size: 100%; margin-block: 4px; }
.v160-skeleton--line   { block-size: 12px; inline-size: 72%; margin-block: 4px; }
.v160-skeleton--title  { block-size: 18px; inline-size: 48%; border-radius: var(--v160-r-sm); }
.v160-skeleton--circle { inline-size: 40px; block-size: 40px; border-radius: var(--v160-r-pill); }
.v160-skeleton--thumb  { inline-size: 100%; aspect-ratio: 4 / 3; border-radius: var(--v160-r-lg); }
.v160-skeleton--block  { inline-size: 100%; block-size: 120px; border-radius: var(--v160-r-lg); }
.v160-skeleton--btn    { inline-size: 96px; block-size: var(--v160-control-h); border-radius: var(--v160-r-md); }

.v160-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-3);
}


/* ================================================================================
 * 14. TOOLBAR
 * ============================================================================== */

.v160-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-3);
    min-inline-size: 0;
}

.v160-toolbar__lead {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    min-inline-size: 0;
}

.v160-toolbar__main {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    min-inline-size: 0;
}

.v160-toolbar__end {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    margin-inline-start: auto;
}

.v160-toolbar__title {
    margin: 0;
    font-size: var(--v160-fs-xl);
    font-weight: 700;
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
}

.v160-toolbar__meta {
    font-size: var(--v160-fs-sm);
    color: var(--v160-text-subtle);
    font-variant-numeric: tabular-nums;
}

.v160-toolbar--bar {
    padding: var(--v160-space-3) var(--v160-space-4);
    background: var(--v160-surface);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
}

.v160-toolbar--sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--v160-z-sticky);
    background: var(--v160-surface);
    border-block-end: 1px solid var(--v160-border);
    padding-block: var(--v160-space-3);
}


/* ================================================================================
 * 15. KPI
 * ============================================================================== */

.v160-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--v160-space-3);
    min-inline-size: 0;
}

.v160-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
    padding: var(--v160-space-4);
    background: var(--v160-surface);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    box-shadow: var(--v160-elev-1);
}

.v160-kpi__label {
    display: block;
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    color: var(--v160-text-subtle);
    letter-spacing: 0;
}

.v160-kpi__value {
    display: block;
    font-size: var(--v160-fs-3xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--v160-text);
    letter-spacing: var(--v160-track-tight);
    font-variant-numeric: tabular-nums;
}

.v160-kpi__unit {
    font-size: var(--v160-fs-md);
    font-weight: 600;
    color: var(--v160-text-subtle);
    margin-inline-start: 3px;
}

.v160-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--v160-text-subtle);
}
.v160-kpi__delta.is-up   { color: var(--v160-success); }
.v160-kpi__delta.is-down { color: var(--v160-danger); }
.v160-kpi__delta.is-flat { color: var(--v160-text-subtle); }

.v160-kpi__foot {
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
}

.v160-kpi__icon {
    position: absolute;
    inset-block-start: var(--v160-space-4);
    inset-inline-end: var(--v160-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--v160-r-md);
    background: var(--v160-surface-3);
    color: var(--v160-text-subtle);
    font-size: 15px;
}

.v160-kpi--accent .v160-kpi__value { color: var(--v160-accent); }
.v160-kpi--accent .v160-kpi__icon {
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
}

.v160-kpi--link {
    text-decoration: none;
    transition: border-color var(--v160-dur) var(--v160-ease),
                box-shadow var(--v160-dur) var(--v160-ease);
}
.v160-kpi--link:hover {
    border-color: var(--v160-border-strong);
    box-shadow: var(--v160-elev-3);
}


/* ================================================================================
 * 16. AVATAR
 * ============================================================================== */

.v160-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface-3);
    border: 1px solid var(--v160-border);
    overflow: hidden;
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-sm);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.v160-avatar__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.v160-avatar__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
}

.v160-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--v160-fs-2xs); }
.v160-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--v160-fs-lg); }
.v160-avatar--xl { inline-size: 80px; block-size: 80px; font-size: var(--v160-fs-2xl); }

.v160-avatar--square { border-radius: var(--v160-r-md); }

.v160-avatar__status {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--v160-r-pill);
    border: 2px solid var(--v160-surface);
    background: var(--v160-text-subtle);
}
.v160-avatar__status.is-online { background: var(--v160-success); }
.v160-avatar__status.is-busy   { background: var(--v160-danger); }

.v160-avatar-stack {
    display: inline-flex;
    align-items: center;
}
.v160-avatar-stack .v160-avatar {
    margin-inline-start: -10px;
    border: 2px solid var(--v160-surface);
}
.v160-avatar-stack .v160-avatar:first-child { margin-inline-start: 0; }


/* ================================================================================
 * 17. DIVIDER / SCROLL / ALERT / LAYOUT UTILITIES
 * ============================================================================== */

.v160-divider {
    border: 0;
    block-size: 1px;
    inline-size: 100%;
    background: var(--v160-border);
    margin-block: var(--v160-space-4);
}

.v160-divider--tight { margin-block: var(--v160-space-2); }
.v160-divider--subtle { background: var(--v160-border-subtle); }

.v160-divider--vertical {
    inline-size: 1px;
    block-size: auto;
    align-self: stretch;
    min-block-size: 16px;
    margin-block: 0;
    margin-inline: var(--v160-space-2);
}

.v160-divider-label {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    margin-block: var(--v160-space-4);
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-xs);
    font-weight: 600;
}
.v160-divider-label::before,
.v160-divider-label::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--v160-border);
}

.v160-scroll-x {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
}
.v160-scroll-x > * { flex: none; scroll-snap-align: start; }
.v160-scroll-x::-webkit-scrollbar { block-size: 6px; }
.v160-scroll-x::-webkit-scrollbar-thumb {
    background: var(--v160-border-strong);
    border-radius: var(--v160-r-pill);
}
.v160-scroll-x::-webkit-scrollbar-track { background: transparent; }

.v160-scroll-x--hide-bar { scrollbar-width: none; }
.v160-scroll-x--hide-bar::-webkit-scrollbar { display: none; }

.v160-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--v160-space-3);
    padding: var(--v160-space-3) var(--v160-space-4);
    border: 1px solid var(--v160-info-border);
    border-radius: var(--v160-r-lg);
    background: var(--v160-info-soft);
    color: var(--v160-text);
    font-size: var(--v160-fs-sm);
    line-height: 1.55;
}
.v160-alert__icon { flex: none; font-size: 16px; line-height: 1.4; color: var(--v160-info); }
.v160-alert__body { flex: 1 1 auto; min-inline-size: 0; }
.v160-alert__title { display: block; font-weight: 700; margin-block-end: 2px; }

.v160-alert--success { background: var(--v160-success-soft); border-color: var(--v160-success-border); }
.v160-alert--success .v160-alert__icon { color: var(--v160-success); }
.v160-alert--warning { background: var(--v160-warning-soft); border-color: var(--v160-warning-border); }
.v160-alert--warning .v160-alert__icon { color: var(--v160-warning); }
.v160-alert--danger  { background: var(--v160-danger-soft);  border-color: var(--v160-danger-border); }
.v160-alert--danger .v160-alert__icon { color: var(--v160-danger); }
.v160-alert--neutral { background: var(--v160-surface-2); border-color: var(--v160-border); }
.v160-alert--neutral .v160-alert__icon { color: var(--v160-text-muted); }

/* Micro layout helpers used by every downstream layer. */
.v160-stack   { display: flex; flex-direction: column; gap: var(--v160-space-4); min-inline-size: 0; }
.v160-stack--sm { gap: var(--v160-space-2); }
.v160-stack--lg { gap: var(--v160-space-6); }

.v160-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2);
    min-inline-size: 0;
}
.v160-cluster--between { justify-content: space-between; }

.v160-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
}
.v160-clamp-2,
.v160-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v160-clamp-2 { -webkit-line-clamp: 2; }
.v160-clamp-3 { -webkit-line-clamp: 3; }

.v160-muted  { color: var(--v160-text-muted); }
.v160-subtle { color: var(--v160-text-subtle); }

.v160-container {
    inline-size: 100%;
    max-inline-size: var(--v160-container);
    margin-inline: auto;
    padding-inline: var(--v160-container-pad);
}
.v160-container--tight { max-inline-size: var(--v160-container-tight); }


/* ================================================================================
 * 18. RESPONSIVE
 * --------------------------------------------------------------------------------
 * tablet  <= 1024px      mobile <= 640px
 * ============================================================================== */

@media (max-width: 1024px) {

    .v160-fieldset--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .v160-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

    .v160-card__head,
    .v160-card__foot { padding-inline: var(--v160-space-4); }

    .v160-card__body { padding: var(--v160-space-4); }
}

@media (max-width: 640px) {

    .v160-fieldset--2,
    .v160-fieldset--3 { grid-template-columns: minmax(0, 1fr); }

    .v160-field--inline { flex-direction: column; align-items: stretch; gap: 6px; }
    .v160-field--inline .v160-field__label { inline-size: auto; }

    /* Touch targets: every interactive primitive reaches 44px on mobile. */
    .v160-btn        { min-block-size: var(--v160-tap); }
    .v160-btn--sm    { min-block-size: 36px; }
    .v160-btn--icon  { inline-size: var(--v160-tap); min-inline-size: var(--v160-tap); }
    .v160-input,
    .v160-select,
    .v160-textarea   { min-block-size: var(--v160-tap); font-size: 16px; } /* 16px stops iOS zoom */
    .v160-chip       { min-block-size: 36px; }
    .v160-pagination__item { min-inline-size: var(--v160-tap); block-size: var(--v160-tap); }

    .v160-card { border-radius: var(--v160-r-lg); }
    .v160-card__head,
    .v160-card__foot,
    .v160-card__body { padding-inline: var(--v160-space-4); }

    .v160-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v160-space-2); }
    .v160-kpi { padding: var(--v160-space-3); }
    .v160-kpi__value { font-size: var(--v160-fs-2xl); }
    .v160-kpi__icon { display: none; }

    .v160-toolbar { gap: var(--v160-space-2); }
    .v160-toolbar__end { inline-size: 100%; margin-inline-start: 0; }
    .v160-toolbar__title { font-size: var(--v160-fs-lg); }

    .v160-table-wrap { border-radius: var(--v160-r-lg); }
    .v160-table thead th { padding-inline: var(--v160-space-3); }
    .v160-table tbody td { padding-inline: var(--v160-space-3); font-size: var(--v160-fs-sm); }

    .v160-empty { padding: var(--v160-space-7) var(--v160-space-4); }
    .v160-empty__art { inline-size: 96px; }

    .v160-tabs { gap: var(--v160-space-4); }
}

@media (min-width: 1441px) {
    .v160-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}


/* ================================================================================
 * 19. RTL FIXES
 * --------------------------------------------------------------------------------
 * Everything above uses logical properties. These rules cover the cases logical
 * properties cannot express: glyph direction and numeric shimmer direction.
 * ============================================================================== */

[dir="rtl"] .bi-arrow-right::before  { content: "\f12f"; } /* bi-arrow-left  */
[dir="rtl"] .bi-arrow-left::before   { content: "\f138"; } /* bi-arrow-right */

[dir="rtl"] .v160-tabs__item .bi-chevron-right,
[dir="rtl"] .v160-card__head .bi-chevron-right,
[dir="rtl"] .v160-toolbar .bi-chevron-right,
[dir="rtl"] .v160-kpi .bi-arrow-up-right,
[dir="rtl"] .v160-kpi .bi-arrow-down-right {
    transform: scaleX(-1);
}

/* Prices, mileage and dates stay LTR even inside Arabic copy. */
[dir="rtl"] .v160-num,
[dir="rtl"] .v160-price,
[dir="rtl"] .v160-kpi__value,
[dir="rtl"] .v160-table .is-numeric {
    direction: ltr;
    text-align: end;
    unicode-bidi: isolate;
}

[dir="rtl"] .v160-toolbar__end { margin-inline-start: auto; }


/* ================================================================================
 * 20. REDUCED MOTION
 * ============================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html { scroll-behavior: auto; }

    .v160-skeleton {
        animation: none;
        background-image: none;
        background: var(--v160-surface-3);
    }

    .v160-tabs__item::after { transition: none; }
    .v160-scroll-x { scroll-snap-type: none; }
}


/* ================================================================================
 * 21. PRINT
 * ============================================================================== */

@media print {

    :root {
        --v160-surface: #FFFFFF;
        --v160-surface-2: #FFFFFF;
        --v160-surface-3: #FFFFFF;
        --v160-border: #999999;
        --v160-border-subtle: #CCCCCC;
        --v160-border-strong: #666666;
        --v160-text: #000000;
        --v160-text-muted: #333333;
        --v160-text-subtle: #555555;
    }

    body { background: #FFFFFF; color: #000000; }

    .v160-card,
    .v160-panel,
    .v160-kpi,
    .v160-btn,
    .v160-table-wrap,
    .v160-toolbar--bar {
        box-shadow: none !important;
        border-color: #999999 !important;
        background: #FFFFFF !important;
    }

    .v160-table-wrap { overflow: visible !important; }
    .v160-table { font-size: 11px; }
    .v160-table thead th {
        background: #FFFFFF !important;
        border-block-end: 1px solid #000000 !important;
    }
    .v160-table--sticky thead th { position: static; }
    .v160-table tbody tr { break-inside: avoid; page-break-inside: avoid; }

    .v160-skeleton { animation: none; background: #EEEEEE !important; }

    .v160-toolbar--sticky { position: static; }

    /* Interactive-only chrome carries no meaning on paper. */
    .v160-pagination,
    .v160-btn--icon,
    .v160-chip__x,
    .v160-tabs,
    .v160-empty__art,
    .v160-switch {
        display: none !important;
    }

    .v160-card,
    .v160-kpi,
    .v160-panel { break-inside: avoid; page-break-inside: avoid; }

    a[href]::after { content: ""; }
}