/* ============================================================== */
/* FuelerLinx 2026 theme                                          */
/* Loaded AFTER app.css so these tokens win.                       */
/* Stage 1: design tokens + Radzen variable overrides.             */
/* ============================================================== */


/* ─── Stage 1a: design tokens ─────────────────────────────────── */
:root {
    /* Brand */
    --fl-blue:     #0d63ce;
    --fl-blue-d:   #0a4fa4;
    --fl-blue-l:   #e7f0fb;
    --fl-accent:   #0d63ce;

    /* Status */
    --fl-green:    #16a34a;
    --fl-green-l:  #dcfce7;
    --fl-amber:    #d97706;
    --fl-amber-l:  #fef3c7;
    --fl-red:      #dc2626;
    --fl-red-l:    #fee2e2;
    --fl-violet:   #7c3aed;
    --fl-violet-l: #ede9fe;

    /* Ink (text) scale */
    --ink-0: #0f172a;
    --ink-1: #1e293b;
    --ink-2: #475569;
    --ink-3: #64748b;
    --ink-4: #94a3b8;
    --ink-5: #cbd5e1;

    /* Lines + surfaces */
    --line:         #e2e8f0;
    --line-strong:  #cbd5e1;
    --bg:           #f6f8fb;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;

    /* Layout primitives */
    --row-h:  52px;
    --row-py: 10px;
    --top-h:  56px;
    --side-w: 60px;
}


/* ─── Stage 1b: Radzen variable overrides ─────────────────────── */
/* These map Radzen's --rz-* palette onto the FuelerLinx tokens so every
   existing Radzen component (button, input, badge, grid, dialog, etc.)
   picks up the new theme without per-component changes. */
:root {
    --rz-primary:           var(--fl-blue);
    --rz-primary-darker:    var(--fl-blue-d);
    --rz-primary-lighter:   var(--fl-blue-l);
    --rz-on-primary:        #ffffff;

    --rz-success:           var(--fl-green);
    --rz-success-lighter:   var(--fl-green-l);
    --rz-info:              var(--fl-blue);
    --rz-info-lighter:      var(--fl-blue-l);
    --rz-warning:           var(--fl-amber);
    --rz-warning-lighter:   var(--fl-amber-l);
    --rz-danger:            var(--fl-red);
    --rz-danger-lighter:    var(--fl-red-l);
    --rz-secondary:         var(--ink-2);

    --rz-text-color:            var(--ink-0);
    --rz-text-secondary-color:  var(--ink-3);
    --rz-text-tertiary-color:   var(--ink-4);
    --rz-text-disabled-color:   var(--ink-4);

    --rz-border-color:          var(--line);
    --rz-base-50:               var(--surface-2);
    --rz-base-100:              var(--line);
    --rz-base-background-color: var(--bg);
    --rz-panel-background-color: var(--surface);
}


/* ─── Stage 2: typography ─────────────────────────────────────── */
/* One family, assigned once at the root (design shell.css sets var(--font-sans) on the body and lets
   everything inherit). The DS declares Open Sans for sans, mono and display alike — Dega.UI's
   tokens.css owns --font-sans; the fallback stack only covers a page without those tokens. */
:root {
    --fl-font: var(--font-sans, 'Open Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif);
}

html,
body {
    font-family: var(--fl-font);
    font-size: 13.5px;
    color: var(--ink-0);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    letter-spacing: -0.02em;
}

h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 600; }

/* Tabular figures keep numeric columns aligned without a monospace face. */
.fl-tabular,
.fl-tabular *,
[data-tabular] {
    font-variant-numeric: tabular-nums;
}

/* Visually hide an element while keeping it mounted (preserves child component state).
   Used for tab-based grid swaps where we don't want to re-fetch / re-render on switch. */
.fl-grid-hidden {
    display: none;
}


/* ─── Stage 3: Radzen component shape overrides ───────────────── */
:root {
    --rz-border-radius:         8px;
    --rz-border-radius-sm:      6px;
    --rz-border-radius-lg:      10px;
    --rz-button-border-radius:  8px;
    --rz-input-border-radius:   8px;
    --rz-panel-border-radius:   10px;
    --rz-card-border-radius:    10px;
    --rz-dialog-border-radius:  12px;
    --rz-badge-border-radius:   6px;

    /* Subtle elevation — a single soft shadow rather than Radzen's default heavier one. */
    --rz-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --rz-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
    --rz-shadow-3: 0 8px 24px rgba(15, 23, 42, 0.10);
}

/* Buttons */
.rz-button {
    font-weight: 500;
    letter-spacing: -0.005em;
}

.rz-button.rz-button-md {
    border-radius: var(--rz-button-border-radius);
}

.rz-button.rz-primary {
    background-color: var(--fl-blue);
    border-color: var(--fl-blue);
}
.rz-button.rz-primary:hover {
    background-color: var(--fl-blue-d);
    border-color: var(--fl-blue-d);
}
.rz-button.rz-success {
    background-color: var(--fl-green);
    border-color: var(--fl-green);
}
.rz-button.rz-success:hover {
    background-color: #15803d;
    border-color: #15803d;
}

/* Inputs — flatter, no built-in shadow, tighter radius. */
.rz-textbox,
.rz-dropdown,
.rz-numeric,
.rz-datepicker {
    border-radius: var(--rz-input-border-radius);
}

/* Cards / panels — drop the Radzen material elevation in favor of a 1px border. */
.rz-card {
    box-shadow: none;
    border: 1px solid var(--line);
    border-radius: var(--rz-card-border-radius);
}

/* Dialogs */
.rz-dialog-content {
    border-radius: var(--rz-dialog-border-radius);
}

/* Badges — refine corner radius only; leave sizing & weight to Radzen so existing
   fixed-width columns aren't pushed past their bounds. Soft pastel coloring AND the
   heavier 600 weight only apply to the FILLED variant (default). Outlined and Text
   variants keep their natural Radzen rendering so existing screens lay out as-is.

   Open Sans renders wider than Roboto at the same nominal size; where a
   fixed-width column no longer fits its label (e.g. "Reconciled" in the
   TransactionGrid Status column), prefer widening the column over micro-adjusting
   badge metrics. */
.rz-badge {
    border-radius: var(--rz-badge-border-radius);
}

/* Filled badges → soft pastel-bg + dark-text "tag" look. */
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text) {
    font-weight: 600;
}
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text).rz-badge-primary,
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text).rz-badge-info {
    background: var(--fl-blue-l); color: var(--fl-blue);
}
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text).rz-badge-success {
    background: var(--fl-green-l); color: #166534;
}
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text).rz-badge-warning {
    background: var(--fl-amber-l); color: #92400e;
}
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text).rz-badge-danger {
    background: var(--fl-red-l); color: #991b1b;
}
.rz-badge:not(.rz-variant-outlined):not(.rz-variant-text).rz-badge-secondary {
    background: var(--line); color: var(--ink-2);
}


/* ────────────────────────────────────────────────────────────────────
   Stage 4: new shell primitives.
   These classes are *available* to feature pages opting into the new
   layout (combined Trip Management surface, KPI strips, the Smart
   Assistant ribbon, etc.). Existing screens are unaffected until they
   adopt them.
   ──────────────────────────────────────────────────────────────────── */


/* ─── App shell ────────────────────────────────────────────────── */
.fl-app {
    min-height: 100vh;
    padding-top: var(--top-h);
    padding-left: var(--side-w);
}

.fl-main {
    padding: 22px 28px 80px;
    max-width: 1680px;
    margin: 0 auto;
}


/* ─── Top bar ──────────────────────────────────────────────────── */
.fl-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--top-h);
    background: linear-gradient(180deg, #1370d8 0%, #0d63ce 100%);
    color: #fff;
    display: flex; align-items: center;
    padding: 0 22px; gap: 36px;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 2px 10px rgba(13, 99, 206, 0.15);
}
.fl-topnav { display: flex; gap: 4px; }
.fl-topnav a {
    padding: 8px 14px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.78);
    cursor: pointer; letter-spacing: -0.005em;
    transition: background 0.15s;
}
.fl-topnav a:hover  { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fl-topnav a.active { background: rgba(255, 255, 255, 0.15); color: #fff; }
.fl-topright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.fl-search-mini {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 6px 10px; border-radius: 8px;
    color: #fff; font-size: 12.5px; min-width: 240px;
}
.fl-avatar {
    width: 32px; height: 32px; border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: #422006;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}


/* ─── Sidebar ──────────────────────────────────────────────────── */
.fl-sidebar {
    position: fixed; top: var(--top-h); left: 0; bottom: 0; width: var(--side-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 0; gap: 4px;
    z-index: 90;
}
.fl-side-item {
    position: relative;
    width: 40px; height: 40px; border-radius: 10px; border: 0;
    background: transparent; color: var(--ink-3); cursor: pointer;
    display: grid; place-items: center;
    transition: all 0.15s;
}
.fl-side-item:hover { background: var(--surface-2); color: var(--ink-0); }
.fl-side-item.active {
    background: var(--fl-blue-l);
    color: var(--fl-blue);
}
.fl-side-item.active::before {
    content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px;
    width: 3px; background: var(--fl-blue); border-radius: 0 3px 3px 0;
}


/* ─── Page header ──────────────────────────────────────────────── */
.fl-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 18px;
}
.fl-page-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 4px; color: var(--ink-0);
}
.fl-page-sub  { margin: 0; color: var(--ink-3); font-size: 13px; }
.fl-page-cta  { display: flex; gap: 8px; }


/* ─── KPI cards ────────────────────────────────────────────────── */
.fl-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 14px;
}
.fl-kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px 14px 18px;
    position: relative; overflow: hidden;
}
.fl-kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--kpi-accent, var(--fl-blue));
}
.fl-kpi-label {
    font-size: 11.5px; font-weight: 500; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.fl-kpi-value {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink-0); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.fl-kpi-sub {
    font-size: 12px; color: var(--ink-3); margin-top: 4px;
    display: flex; align-items: center;
}


/* ─── Smart Assistant ribbon ───────────────────────────────────── */
.fl-asst {
    display: grid; grid-template-columns: 280px 1fr auto;
    gap: 18px; align-items: center;
    background: linear-gradient(135deg, #0d63ce 0%, #1e3a8a 100%);
    color: #fff;
    border-radius: 12px; padding: 14px 16px;
    margin-bottom: 14px;
    position: relative; overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                0 6px 20px rgba(13, 99, 206, 0.18);
}
.fl-asst::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.15), transparent 60%);
    pointer-events: none;
}
.fl-asst-left { display: flex; align-items: center; gap: 14px; position: relative; }
.fl-asst-avatar {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: grid; place-items: center;
    color: #fff; position: relative;
}
.fl-asst-ring {
    position: absolute; inset: -4px; border-radius: 14px;
    border: 2px solid rgba(34, 197, 94, 0.7);
    animation: fl-pulse-ring 2.2s ease-out infinite;
}
@keyframes fl-pulse-ring {
    0%   { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1.15); opacity: 0; }
}
.fl-asst-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fl-asst-status {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
}
.fl-asst-status.on  { background: rgba(34, 197, 94, 0.22); color: #4ade80; }
.fl-asst-status.off { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); }
.fl-asst-sub   { font-size: 12px; color: rgba(255, 255, 255, 0.78); margin-top: 2px; }
.fl-asst-sub b { color: #fff; font-weight: 600; }

.fl-asst-feed {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px; padding: 8px 12px;
    position: relative; min-height: 56px;
}
.fl-asst-feed-label {
    font-size: 9.5px; letter-spacing: 0.12em; font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    display: flex; align-items: center; gap: 6px;
}
.fl-asst-feed-label::before {
    content: ''; width: 6px; height: 6px; border-radius: 999px; background: #4ade80;
    animation: fl-pulse-dot 1.6s infinite;
}
@keyframes fl-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.fl-asst-feed-track {
    position: relative;
    height: 26px;
    overflow: hidden;
    margin-top: 4px;
}
.fl-asst-feed-item {
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: 8px;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
    font-size: 12.5px;
}
.fl-asst-feed-item.is-active {
    opacity: 1; transform: translateY(0);
}
.fl-asst-feed-dot {
    width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
}
.fl-asst-feed-dot.kind-pick   { background: #4ade80; }
.fl-asst-feed-dot.kind-alert  { background: #fb923c; }
.fl-asst-feed-dot.kind-work   { background: #60a5fa; }
.fl-asst-feed-dot.kind-done   { background: #a78bfa; }
.fl-asst-feed-dot.kind-sync   { background: #94a3b8; }
.fl-asst-feed-dot.kind-human  { background: #fbbf24; }
.fl-asst-feed-text {
    color: #fff; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-asst-feed-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

/* Expanded activity list: the rotating one-line carousel swapped for the full
   feed, mirroring the design's assistant activity rail. */
.fl-asst-feed-head { display: flex; align-items: center; justify-content: space-between; }
.fl-asst-feed-expand {
    background: transparent; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, 0.65); padding: 0; line-height: 1;
}
.fl-asst-feed-expand:hover { color: #fff; }
.fl-asst-feed-expand .rzi { font-size: 16px; }
.fl-asst-feed-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px; max-height: 132px; overflow-y: auto;
}
.fl-asst-feed-item.is-static {
    position: relative; inset: auto;
    opacity: 1; transform: none;
}

/* Pending-changes prompt: the assistant finished a run and produced new data.
   Lets the track grow past its fixed rotation height so the Refresh action is
   fully visible, and keeps the item pinned (no fade/slide) until applied. */
.fl-asst-feed-track.is-pending {
    height: auto;
    overflow: visible;
}
.fl-asst-feed-item--pending {
    position: relative;
    opacity: 1;
    transform: none;
}
.fl-asst-feed-item--pending .fl-asst-feed-text {
    color: #fde68a;
    font-weight: 600;
    white-space: normal;
}

/* The right-hand action cluster (Settings / Pause / Re-enable). Radzen buttons
   inside the dark ribbon get a translucent fill so they read on the gradient bg. */
.fl-asst-actions { display: flex; gap: 6px; align-items: center; }
.fl-asst-actions .rz-button {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}
.fl-asst-actions .rz-button:hover {
    background: rgba(255, 255, 255, 0.20) !important;
}
.fl-asst-actions .rz-button.rz-success {
    /* "Re-enable Assistant" call-to-action stays solid green. */
    background: var(--fl-green) !important;
    border-color: var(--fl-green) !important;
}
.fl-asst-actions .rz-button.rz-success:hover {
    background: #15803d !important;
    border-color: #15803d !important;
}


/* ─── Filter bar ───────────────────────────────────────────────── */
.fl-filterbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 10px; flex-wrap: wrap;
}
.fl-views {
    display: flex; gap: 2px; padding: 3px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 9px;
}
.fl-view-tab {
    appearance: none; border: 0; background: transparent;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 7px;
    transition: all 0.15s;
}
.fl-view-tab:hover  { color: var(--ink-0); }
.fl-view-tab.active { background: var(--fl-blue); color: #fff; }
.fl-view-count {
    font-size: 11px; font-weight: 600; padding: 1px 6px;
    border-radius: 999px; background: var(--line); color: var(--ink-2);
}
.fl-view-tab.active .fl-view-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Row that holds the Dispatch Status tab strip on the left and the global
   search + date range filter on the right. The tab strip's own .fl-views
   container provides its pill styling; this row just lays out the two halves. */
.fl-tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.fl-tab-row-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fl-tab-row-search {
    min-width: 240px;
}
.fl-tab-row-sep {
    color: var(--ink-2);
    font-size: 12px;
}

/* Slim row above the assistant ribbon that now holds only the bulk-action
   buttons (Optimize / Dispatch / etc.). The search and date controls that
   used to share this row moved down to live with the tab strip. */
.fl-actions-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0.25rem 0 0.5rem 0;
}

/* Compact reveal button that brings the Smart Assistant ribbon back when
   it's been hidden. Slotted into TripManagementActions' TrailingActions
   between the kebab and the info button, brand-styled with the assistant's
   conveyor_belt icon. */
.fl-asst-reveal {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--fl-blue);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.fl-asst-reveal:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.fl-asst-reveal .rzi {
    font-size: 18px;
}

/* KPI strip collapse: a subtle hide button anchored to the strip's top-right
   corner, plus a compact reveal pill (mirrors .fl-asst-reveal) slotted into the
   actions row when the strip is hidden, so users can reclaim vertical space. */
.kpi-strip {
    position: relative;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.fl-kpi-hide {
    appearance: none;
    position: absolute;
    top: -2px;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2, var(--rz-text-secondary-color));
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
}
.fl-kpi-hide:hover {
    opacity: 1;
    background: var(--rz-base-200, #eee);
}
.fl-kpi-hide .rzi {
    font-size: 16px;
}
.fl-kpi-reveal {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--fl-blue);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.fl-kpi-reveal:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.fl-kpi-reveal .rzi {
    font-size: 18px;
}

/* Panel chrome for the "Leg Statuses" Advanced-filter popup. The app ships only
   material-base (no decorative theme), so the grid filter popup has no background
   of its own — give the custom filter content the same panel styling the app uses
   elsewhere (cf. .rz-popup.info-popup) so it reads as a proper popover. */
.fl-leg-status-filter {
    min-width: 16rem;
    padding: 0.625rem;
    background-color: var(--rz-panel-background-color, #fff);
    border: var(--rz-panel-border, 1px solid var(--line));
    border-radius: var(--rz-border-radius, 6px);
    box-shadow: var(--rz-panel-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
}


/* ─── Button extensions ────────────────────────────────────────── */
.fl-btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-1);
    border-radius: 8px; font-size: 13px; font-weight: 500;
    transition: all 0.12s;
    white-space: nowrap;
}
.fl-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.fl-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.fl-btn-primary { background: var(--fl-blue); color: #fff; border-color: var(--fl-blue); }
.fl-btn-primary:hover { background: var(--fl-blue-d); border-color: var(--fl-blue-d); }
.fl-btn-success { background: var(--fl-green); color: #fff; border-color: var(--fl-green); }
.fl-btn-success:hover { background: #15803d; border-color: #15803d; }


/* ─── Bulk action bar ──────────────────────────────────────────── */
.fl-bulk {
    display: flex; align-items: center; gap: 10px;
    background: var(--ink-0); color: #fff;
    padding: 8px 10px 8px 16px; border-radius: 10px; margin-bottom: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
    animation: fl-slide-down 0.2s ease-out;
}
@keyframes fl-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fl-bulk-count { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.fl-bulk-num {
    background: var(--fl-blue); color: #fff;
    min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 6px; display: inline-grid; place-items: center;
    font-weight: 700; font-size: 12.5px;
}


/* ─── Soft status pills (for feature-specific labels) ──────────── */
.fl-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600;
    padding: 4px 8px; border-radius: 6px;
}
.fl-pill-blue   { background: var(--fl-blue-l);   color: var(--fl-blue); }
.fl-pill-green  { background: var(--fl-green-l);  color: #166534; }
.fl-pill-amber  { background: var(--fl-amber-l);  color: #92400e; }
.fl-pill-red    { background: var(--fl-red-l);    color: #991b1b; }
.fl-pill-violet { background: var(--fl-violet-l); color: var(--fl-violet); }
.fl-pill-neutral { background: var(--line); color: var(--ink-2); }


/* ─── Toast (bottom-center) ────────────────────────────────────── */
.fl-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    background: var(--ink-0); color: #fff;
    padding: 10px 16px; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
    font-size: 13px; font-weight: 500;
    z-index: 200;
    animation: fl-toast-in 0.25s ease-out;
}
.fl-toast.kind-success { background: var(--fl-green); }
.fl-toast.kind-info    { background: var(--fl-blue); }
@keyframes fl-toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}