/* ============================================================================
   Fluent UI (Fluent 2) style layer — PILOT
   A self-contained token + component set modeled on Microsoft Fluent 2 for web
   (https://fluent2.microsoft.design / https://developer.microsoft.com/fluentui).
   Everything is prefixed `fui-` and scoped under `.fui-page` so it can be trialed
   on a single page and later rolled out app-wide without clashing with the
   existing `v2-*` design system.
   ============================================================================ */

.fui-page {
    /* Fluent 2 STRUCTURE (shapes, elevation, tabs) driven by the app's own palette.
       All colors below map onto the existing v2 design tokens so this style layer
       matches the rest of the app — only the styling is Fluent, the palette is ours. */
    /* Literal fallbacks are REQUIRED here: these tokens forward to --v2-* via a
       single indirection. If a --v2-* token is missing in some render context,
       `var(--v2-x)` collapses to the guaranteed-invalid value, and a downstream
       `color: var(--fui-on-brand, #fallback)` will NOT use its fallback (the
       property IS defined, just invalid) — the whole declaration is dropped and
       the label inherits gold/white, giving unreadable gold-on-gold buttons.
       Baking the literal in here keeps every token resolvable on its own. */
    --fui-brand: var(--v2-accent, #B09E80);
    --fui-brand-hover: var(--v2-accent-hover, #C4B291);
    --fui-brand-pressed: var(--v2-accent-pressed, #9C8A6E);
    --fui-brand-tint: var(--v2-accent-soft, #FBF8F4);
    --fui-on-brand: var(--v2-text-on-accent, #1C2B3A); /* dark text reads on the gold accent */

    --fui-fg-1: var(--v2-text-primary, #1C2B3A);
    --fui-fg-2: var(--v2-text-secondary, #374151);
    --fui-fg-3: var(--v2-text-muted, #6B7D8F);
    --fui-fg-disabled: var(--v2-text-disabled, #9CA3AF);

    --fui-bg-canvas: var(--v2-bg-app);
    --fui-bg-surface: var(--v2-bg-surface-1);
    --fui-bg-subtle: var(--v2-bg-surface-2);
    --fui-bg-hover: var(--v2-bg-surface-2);

    --fui-stroke-1: var(--v2-border-strong);
    --fui-stroke-2: var(--v2-border-subtle);
    --fui-stroke-subtle: rgba(122, 143, 166, 0.14);

    /* Status — mapped to v2 semantic colors */
    --fui-success-fg: var(--v2-success);
    --fui-success-bg: var(--v2-success-soft);
    --fui-success-border: #A7F3D0;
    --fui-warning-fg: var(--v2-warning);
    --fui-warning-bg: var(--v2-warning-soft);
    --fui-warning-border: #FDE68A;
    --fui-danger-fg: var(--v2-danger);
    --fui-danger-bg: var(--v2-danger-soft);
    --fui-danger-border: #FECACA;
    --fui-info-fg: var(--v2-info);
    --fui-info-bg: var(--v2-info-soft);
    --fui-info-border: #BFDBFE;

    /* Elevation (Fluent 2 soft shadow ramp) */
    --fui-shadow-2: 0 0 2px rgba(28,43,58,.10), 0 1px 2px rgba(28,43,58,.12);
    --fui-shadow-4: 0 0 2px rgba(28,43,58,.10), 0 2px 4px rgba(28,43,58,.12);
    --fui-shadow-8: 0 0 2px rgba(28,43,58,.10), 0 4px 8px rgba(28,43,58,.12);
    --fui-shadow-16: 0 0 2px rgba(28,43,58,.10), 0 8px 16px rgba(28,43,58,.14);

    /* Radius (Fluent scale) */
    --fui-radius-sm: 4px;
    --fui-radius-md: 6px;
    --fui-radius-lg: 8px;

    font-family: var(--v2-font-sans);
    color: var(--fui-fg-1);
    -webkit-font-smoothing: antialiased;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.fui-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.fui-header-copy { flex: 1; min-width: 0; }
.fui-title { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.fui-subtitle { font-size: 13px; color: var(--fui-fg-3); margin-top: 4px; }

.fui-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--fui-brand);
    text-decoration: none; margin-bottom: 12px; padding: 4px 8px 4px 4px;
    border-radius: var(--fui-radius-sm);
}
.fui-back:hover { background: var(--fui-brand-tint); color: var(--fui-brand-hover); }

/* ── Command bar (top action row) ────────────────────────────────────────── */
.fui-command-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.fui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 32px; padding: 0 14px; border-radius: var(--fui-radius-sm);
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
    border: 1px solid var(--fui-stroke-1); background: var(--fui-bg-surface); color: var(--fui-fg-1);
    cursor: pointer; transition: background .1s ease, border-color .1s ease, color .1s ease;
    white-space: nowrap;
}
.fui-btn:hover { background: var(--fui-bg-hover); }
.fui-btn:active { background: var(--v2-bg-surface-3); }
.fui-btn:disabled { color: var(--fui-fg-disabled); background: var(--fui-bg-subtle); border-color: var(--fui-stroke-2); cursor: default; }
.fui-btn .bi { font-size: 15px; }

/* Primary actions move the workflow forward, so keep their label and icon white
   in every render context and interaction state. */
.fui-btn-primary { background: var(--fui-brand, #B09E80); border-color: var(--fui-brand, #B09E80); color: #fff; }
.fui-btn-primary:hover { background: var(--fui-brand-hover); border-color: var(--fui-brand-hover); }
.fui-btn-primary:active { background: var(--fui-brand-pressed); border-color: var(--fui-brand-pressed); }
.fui-btn-primary:disabled { background: var(--fui-bg-subtle); border-color: var(--fui-stroke-2); color: var(--fui-fg-disabled); }

/* Subtle (transparent) button — used in the command bar */
.fui-btn-subtle { border-color: transparent; background: transparent; color: var(--fui-fg-2); font-weight: 600; }
.fui-btn-subtle:hover { background: var(--fui-bg-hover); color: var(--fui-fg-1); }

.fui-btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.fui-btn-danger { background: var(--fui-danger-fg); border-color: var(--fui-danger-fg); color: #fff; }
.fui-btn-danger:hover { filter: brightness(.93); }

/* Anchors styled as buttons (e.g. <a class="fui-btn fui-btn-primary" href=...>
   for "Confirm Receipt" / "Receive") must keep their button text color in every
   link state. These selectors re-assert the button colors with enough specificity
   to prevent global link styles from overriding them. */
a.fui-btn, a.fui-btn:link, a.fui-btn:visited, a.fui-btn:hover, a.fui-btn:focus { color: var(--fui-fg-1, #1C2B3A); }
a.fui-btn-primary, a.fui-btn-primary:link, a.fui-btn-primary:visited, a.fui-btn-primary:hover, a.fui-btn-primary:focus { color: #fff; }
a.fui-btn-subtle, a.fui-btn-subtle:link, a.fui-btn-subtle:visited { color: var(--fui-fg-2, #374151); }
a.fui-btn-subtle:hover, a.fui-btn-subtle:focus { color: var(--fui-fg-1, #1C2B3A); }
a.fui-btn-danger, a.fui-btn-danger:link, a.fui-btn-danger:visited, a.fui-btn-danger:hover, a.fui-btn-danger:focus { color: #fff; }

.fui-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--fui-radius-sm);
    border: none; background: transparent; color: var(--fui-fg-2); cursor: pointer; font-size: 16px;
}
.fui-icon-btn:hover { background: var(--fui-bg-hover); color: var(--fui-fg-1); }

/* ── Tabs (Fluent TabList — underline indicator) ─────────────────────────── */
.fui-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--fui-stroke-2); margin-bottom: 16px; flex-wrap: wrap; }
.fui-tab {
    position: relative; appearance: none; border: none; background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fui-fg-3);
    padding: 10px 12px 12px; cursor: pointer; transition: color .1s ease;
}
.fui-tab:hover { color: var(--fui-fg-1); }
.fui-tab::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
    border-radius: 2px; background: transparent; transition: background .15s ease;
}
.fui-tab.is-active { color: var(--fui-brand); }
.fui-tab.is-active::after { background: var(--fui-brand); }

/* ── Cards / surfaces ────────────────────────────────────────────────────── */
.fui-card {
    background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2);
    border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-2);
    padding: 20px 22px; margin-bottom: 16px;
}
.fui-card-pad-0 { padding: 0; overflow: hidden; }
.fui-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fui-card-title { font-size: 16px; font-weight: 600; color: var(--fui-fg-1); }
.fui-card-meta { font-size: 13px; color: var(--fui-fg-3); }

/* ── Meta grid (label / value pairs) ─────────────────────────────────────── */
.fui-meta-grid { display: grid; gap: 20px; }
.fui-meta-label { font-size: 11px; font-weight: 600; color: var(--fui-fg-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.fui-meta-value { font-size: 14px; font-weight: 500; color: var(--fui-fg-1); }

/* ── Toolbar (search + controls) ─────────────────────────────────────────── */
.fui-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.fui-search { position: relative; flex: 1; min-width: 240px; max-width: 420px; display: flex; align-items: center; }
.fui-search .bi { position: absolute; inset-inline-start: 10px; color: var(--fui-fg-3); font-size: 15px; pointer-events: none; }
.fui-search input {
    width: 100%; height: 32px; padding: 0 12px 0 32px; padding-inline-start: 32px; padding-inline-end: 12px;
    border: 1px solid var(--fui-stroke-1); border-radius: var(--fui-radius-sm);
    font-family: inherit; font-size: 14px; color: var(--fui-fg-1); background: var(--fui-bg-surface);
    outline: none; transition: border-color .1s ease;
}
.fui-search input::placeholder { color: var(--fui-fg-3); }
.fui-search input:focus { border-color: var(--fui-brand); box-shadow: inset 0 -1px 0 0 var(--fui-brand); }

/* ── Form controls ───────────────────────────────────────────────────────── */
.fui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fui-field { display: flex; flex-direction: column; gap: 6px; }
.fui-label { font-size: 13px; font-weight: 600; color: var(--fui-fg-2); }
.fui-input, .fui-select {
    height: 32px; padding: 0 10px; width: 100%; box-sizing: border-box;
    border: 1px solid var(--fui-stroke-1); border-radius: var(--fui-radius-sm);
    font-family: inherit; font-size: 14px; color: var(--fui-fg-1); background: var(--fui-bg-surface);
    outline: none; transition: border-color .1s ease;
}
.fui-input:focus, .fui-select:focus { border-color: var(--fui-brand); box-shadow: inset 0 -1px 0 0 var(--fui-brand); }
.fui-input:disabled, .fui-select:disabled { background: var(--fui-bg-subtle); color: var(--fui-fg-2); }
.fui-help { font-size: 12px; color: var(--fui-fg-3); }

/* Segmented control (Fluent choice group, compact) */
.fui-segmented { display: inline-flex; border: 1px solid var(--fui-stroke-1); border-radius: var(--fui-radius-sm); overflow: hidden; background: var(--fui-bg-surface); }
.fui-segmented button {
    appearance: none; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--fui-fg-2); padding: 7px 16px; cursor: pointer; transition: background .1s ease, color .1s ease;
}
.fui-segmented button + button { border-inline-start: 1px solid var(--fui-stroke-2); }
.fui-segmented button.is-active { background: var(--fui-brand); color: var(--fui-on-brand); }

/* ── Badges (Fluent filled-tint) ─────────────────────────────────────────── */
.fui-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
    border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 1;
    border: 1px solid transparent;
}
.fui-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fui-badge-success { color: var(--fui-success-fg); background: var(--fui-success-bg); border-color: var(--fui-success-border); }
.fui-badge-warning { color: var(--fui-warning-fg); background: var(--fui-warning-bg); border-color: var(--fui-warning-border); }
.fui-badge-danger  { color: var(--fui-danger-fg);  background: var(--fui-danger-bg);  border-color: var(--fui-danger-border); }
.fui-badge-info    { color: var(--fui-info-fg);    background: var(--fui-info-bg);    border-color: var(--fui-info-border); }
.fui-badge-brand   { color: var(--fui-brand-pressed); background: var(--fui-brand-tint); border-color: var(--fui-stroke-1); }
.fui-badge-neutral { color: var(--fui-fg-2);       background: var(--fui-bg-subtle);  border-color: var(--fui-stroke-2); }

/* ── Table (Fluent DetailsList) ──────────────────────────────────────────── */
.fui-table { width: 100%; border-collapse: collapse; }
.fui-table thead th {
    font-size: 12px; font-weight: 600; color: var(--fui-fg-3); text-align: start;
    padding: 10px 12px; border-bottom: 1px solid var(--fui-stroke-2); white-space: nowrap;
}
.fui-table tbody td { padding: 12px; font-size: 14px; color: var(--fui-fg-1); border-bottom: 1px solid var(--fui-stroke-subtle); vertical-align: top; }
.fui-table tbody tr:hover td { background: var(--fui-bg-hover); }
.fui-table .fui-num { text-align: end; font-variant-numeric: tabular-nums; }

/* ── List rows (invoice cards) ───────────────────────────────────────────── */
.fui-list { display: flex; flex-direction: column; background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2); border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-2); overflow: hidden; }
.fui-row {
    display: flex; align-items: center; gap: 16px; padding: 14px 18px;
    border-bottom: 1px solid var(--fui-stroke-subtle); cursor: pointer; transition: background .1s ease;
    border-inline-start: 3px solid transparent;
}
.fui-row:last-child { border-bottom: none; }
.fui-row:hover { background: var(--fui-bg-hover); }
.fui-row-avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: var(--fui-brand-tint); color: var(--fui-brand);
}
.fui-row-body { flex: 1; min-width: 0; }
.fui-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--fui-fg-1); }
.fui-row-sub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fui-fg-3); margin-top: 3px; }
.fui-row-amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 190px; }
.fui-chev { color: var(--fui-fg-disabled); font-size: 16px; flex-shrink: 0; }

.fui-tag { font-size: 11px; font-weight: 600; color: var(--fui-fg-2); background: var(--fui-bg-subtle); border: 1px solid var(--fui-stroke-2); border-radius: var(--fui-radius-sm); padding: 2px 7px; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.fui-progress { height: 4px; background: var(--fui-stroke-2); border-radius: 2px; overflow: hidden; }
.fui-progress > span { display: block; height: 100%; border-radius: 2px; transition: width .25s ease; }

/* ── Amount readout ──────────────────────────────────────────────────────── */
.fui-amount-cap { font-size: 11px; font-weight: 600; color: var(--fui-fg-3); text-transform: uppercase; letter-spacing: .03em; }
.fui-amount-val { font-size: 18px; font-weight: 700; color: var(--fui-fg-1); font-variant-numeric: tabular-nums; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.fui-divider { height: 1px; background: var(--fui-stroke-2); border: none; margin: 16px 0; }
.fui-empty { text-align: center; padding: 56px 20px; color: var(--fui-fg-3); font-size: 14px; }
.fui-empty-title { font-size: 16px; font-weight: 600; color: var(--fui-fg-2); margin-bottom: 4px; }

.fui-alert { border-radius: var(--fui-radius-md); padding: 10px 14px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; }
.fui-alert-danger { background: var(--fui-danger-bg); color: var(--fui-danger-fg); border: 1px solid var(--fui-danger-border); }
.fui-alert-success { background: var(--fui-success-bg); color: var(--fui-success-fg); border: 1px solid var(--fui-success-border); }

.fui-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.fui-muted { color: var(--fui-fg-3); font-size: 13px; }

/* Fluent restyle of the shared Pagination component, scoped to Fluent pages only so the
   Bootstrap-styled pagination on not-yet-migrated pages is left untouched. */
.fui-page .pagination-wrap { margin: 0; }
.fui-page .pagination { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.fui-page .pagination .page-item { list-style: none; }
.fui-page .pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--fui-stroke-1); background: var(--fui-bg-surface); color: var(--fui-fg-1);
    border-radius: var(--fui-radius-sm); font-family: inherit; font-size: 14px; font-weight: 600;
    line-height: 1; cursor: pointer; transition: background .1s ease, border-color .1s ease; box-shadow: none;
}
.fui-page .pagination .page-link:hover { background: var(--fui-bg-hover); }
.fui-page .pagination .page-item.active .page-link { background: var(--fui-brand); border-color: var(--fui-brand); color: var(--fui-on-brand); }
.fui-page .pagination .page-item.disabled .page-link { color: var(--fui-fg-disabled); background: var(--fui-bg-subtle); border-color: var(--fui-stroke-2); cursor: default; }
.fui-page .pagination .page-ellipsis .page-link { border-color: transparent; background: transparent; cursor: default; }

/* ── Dialog (Fluent surface) ─────────────────────────────────────────────── */
.fui-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; padding: 24px; z-index: 1000; }
.fui-dialog { background: var(--fui-bg-surface); border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-16); width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 24px; }
.fui-dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fui-dialog-title { font-size: 20px; font-weight: 600; }

/* ── Stat / metric cards ─────────────────────────────────────────────────── */
.fui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fui-stat { background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2); border-top: 3px solid var(--fui-stroke-1); border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-2); padding: 16px 18px; }
.fui-stat-label { font-size: 12px; font-weight: 600; color: var(--fui-fg-3); text-transform: uppercase; letter-spacing: .03em; }
.fui-stat-value { font-size: 24px; font-weight: 700; color: var(--fui-fg-1); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fui-stat-value.sm { font-size: 20px; }
.fui-stat-meta { font-size: 12px; color: var(--fui-fg-3); margin-top: 2px; }
.fui-stat.is-info { border-top-color: var(--fui-info-fg); }
.fui-stat.is-success { border-top-color: var(--fui-success-fg); }
.fui-stat.is-warning { border-top-color: var(--fui-warning-fg); }
.fui-stat.is-brand { border-top-color: var(--fui-brand); }

/* ── Workflow stepper ────────────────────────────────────────────────────── */
.fui-steps { display: flex; align-items: center; background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2); border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-2); padding: 18px 22px; margin-bottom: 16px; }
.fui-step { display: flex; align-items: center; flex: 1; }
.fui-step-node { display: flex; flex-direction: column; align-items: center; flex: 1; }
.fui-step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--fui-stroke-1); background: var(--fui-bg-surface); color: var(--fui-fg-3); }
.fui-step-dot .bi { font-size: 13px; }
.fui-step-label { font-size: 11px; font-weight: 600; color: var(--fui-fg-3); margin-top: 6px; text-align: center; white-space: nowrap; }
.fui-step-line { flex: 1; height: 2px; background: var(--fui-stroke-2); margin: 0 -2px 18px; }
.fui-step.is-done .fui-step-dot { background: var(--fui-success-bg); border-color: var(--fui-success-fg); color: var(--fui-success-fg); }
.fui-step.is-done .fui-step-label { color: var(--fui-success-fg); }
.fui-step.is-done .fui-step-line { background: var(--fui-success-fg); }
.fui-step.is-active .fui-step-dot { background: var(--fui-brand-tint); border-color: var(--fui-brand); color: var(--fui-brand-pressed); }
.fui-step.is-active .fui-step-label { color: var(--fui-brand-pressed); }
.fui-step.is-rejected .fui-step-dot { background: var(--fui-danger-bg); border-color: var(--fui-danger-fg); color: var(--fui-danger-fg); }
.fui-step.is-rejected .fui-step-label { color: var(--fui-danger-fg); }

/* ── Inline banner (status callout) ──────────────────────────────────────── */
.fui-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--fui-radius-md); margin-bottom: 16px; }
.fui-banner > i { font-size: 20px; flex-shrink: 0; line-height: 1.3; }
.fui-banner-title { font-size: 13px; font-weight: 600; }
.fui-banner-sub { font-size: 12px; color: var(--fui-fg-3); margin-top: 2px; }
.fui-banner-success { background: var(--fui-success-bg); border: 1px solid var(--fui-success-border); }
.fui-banner-success > i, .fui-banner-success .fui-banner-title { color: var(--fui-success-fg); }
.fui-banner-warning { background: var(--fui-warning-bg); border: 1px solid var(--fui-warning-border); }
.fui-banner-warning > i, .fui-banner-warning .fui-banner-title { color: var(--fui-warning-fg); }
.fui-banner-danger { background: var(--fui-danger-bg); border: 1px solid var(--fui-danger-border); }
.fui-banner-danger > i, .fui-banner-danger .fui-banner-title { color: var(--fui-danger-fg); }
.fui-banner-info { background: var(--fui-info-bg); border: 1px solid var(--fui-info-border); }
.fui-banner-info > i, .fui-banner-info .fui-banner-title { color: var(--fui-info-fg); }

.fui-section-label { font-size: 11px; font-weight: 700; color: var(--fui-fg-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.fui-required { color: var(--fui-danger-fg); }

/* ── Item tiles (catalog picker) ─────────────────────────────────────────── */
.fui-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.fui-tile { position: relative; background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2); border-radius: var(--fui-radius-md); padding: 14px 12px; cursor: pointer; text-align: center; transition: border-color .1s ease, box-shadow .1s ease; }
.fui-tile:hover { border-color: var(--fui-brand); box-shadow: var(--fui-shadow-4); }
.fui-tile.is-selected { border-color: var(--fui-brand); background: var(--fui-brand-tint); }
.fui-tile-icon { font-size: 22px; color: var(--fui-brand); }
.fui-tile-name { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--fui-fg-1); }
.fui-tile-code { font-size: 11px; color: var(--fui-fg-3); margin-top: 2px; }
.fui-tile-badge { position: absolute; top: 8px; inset-inline-end: 8px; background: var(--fui-brand); color: var(--fui-on-brand); font-size: 11px; font-weight: 700; border-radius: 10px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.fui-tile-scroll { max-height: 440px; overflow: auto; padding: 2px; }

/* ── Qty stepper ─────────────────────────────────────────────────────────── */
.fui-qty { display: inline-flex; align-items: center; border: 1px solid var(--fui-stroke-1); border-radius: var(--fui-radius-sm); overflow: hidden; background: var(--fui-bg-surface); height: 32px; }
.fui-qty button { appearance: none; border: none; background: transparent; width: 30px; height: 100%; font-size: 16px; color: var(--fui-fg-2); cursor: pointer; }
.fui-qty button:hover { background: var(--fui-bg-hover); }
.fui-qty input { width: 54px; height: 100%; border: none; border-inline: 1px solid var(--fui-stroke-2); text-align: center; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fui-fg-1); outline: none; background: transparent; -moz-appearance: textfield; }
.fui-qty input::-webkit-outer-spin-button, .fui-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Basket FAB + drawer ─────────────────────────────────────────────────── */
.fui-fab { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--fui-brand); color: var(--fui-on-brand); border: none; border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-8); padding: 12px 18px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fui-fab-count { background: rgba(0,0,0,.14); border-radius: 10px; padding: 2px 8px; font-size: 12px; }
.fui-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 900; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.fui-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.fui-drawer { position: fixed; top: 0; inset-inline-end: 0; height: 100%; width: min(460px, 100%); background: var(--fui-bg-canvas); box-shadow: var(--fui-shadow-16); z-index: 901; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
[dir="rtl"] .fui-drawer { transform: translateX(-100%); }
.fui-drawer.is-open { transform: translateX(0); }
.fui-drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--fui-stroke-2); background: var(--fui-bg-surface); }
.fui-drawer-body { flex: 1; overflow: auto; padding: 16px 22px; }
.fui-drawer-foot { padding: 16px 22px; border-top: 1px solid var(--fui-stroke-2); background: var(--fui-bg-surface); }
.fui-btn-fw { width: 100%; }

.fui-basket-item { background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2); border-radius: var(--fui-radius-md); padding: 14px; margin-bottom: 10px; }
.fui-mini-label { display: block; font-size: 11px; font-weight: 600; color: var(--fui-fg-3); margin-bottom: 5px; }

.fui-total-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--fui-fg-2); padding: 4px 0; }
.fui-total-row.grand { font-size: 16px; font-weight: 700; color: var(--fui-fg-1); border-top: 1px solid var(--fui-stroke-2); margin-top: 6px; padding-top: 10px; }

/* ============================================================================
   Fluent skin for the app sidebar (NavMenu).
   Pure re-skin of the existing v2-sidebar-* classes — no markup change, so the
   collapse toggle, NavLink active state, and layout mechanics keep working.
   Loads after primitives.css and uses higher-specificity selectors to win.
   Keeps the dark navy palette (--v2-bg-sidebar); adds Fluent polish + the
   signature start indicator bar on the active item. All color values come from
   the existing v2 tokens (available inside .v2) or dark neutrals, never --fui-*
   (those are scoped to .fui-page and don't resolve here).
   ============================================================================ */

.v2 .v2-sidebar {
    border-inline-end: 1px solid rgba(122, 143, 166, .10);
}

/* Brand */
.v2 .v2-sidebar-brand { padding: 16px 16px 12px; gap: 11px; }
.v2 .v2-sidebar-brand-name { letter-spacing: -.01em; font-size: 15px; }
.v2 .v2-sidebar-brand-sub { color: #8296ab; font-size: 10px; letter-spacing: .02em; }

/* Nav list + group headings */
.v2 .v2-sidebar-nav { padding: 8px 10px; gap: 1px; }
.v2 .v2-sidebar-group-label {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #8296ab; opacity: .8; padding: 14px 10px 6px;
}

/* Nav item — Fluent proportions, rounded, subtle hover */
.v2 .v2-sidebar .v2-sidebar-nav-item {
    gap: 11px; padding: 9px 12px; border: none; border-radius: 6px;
    color: #C8D8E8; font-size: 13px; font-weight: 500; margin-bottom: 2px;
    transition: background-color .12s ease, color .12s ease;
}
.v2 .v2-sidebar .v2-sidebar-nav-item:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
}
/* Active — accent tint + brand text + Fluent start indicator bar */
.v2 .v2-sidebar .v2-sidebar-nav-item.v2-active {
    background-color: rgba(176, 158, 128, .16);
    color: var(--v2-accent);
    font-weight: 600;
}
.v2 .v2-sidebar .v2-sidebar-nav-item.v2-active::before {
    display: block; content: ''; position: absolute;
    inset-inline-start: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 3px; background: var(--v2-accent);
}
.v2 .v2-sidebar .v2-sidebar-nav-item .bi {
    font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; opacity: .6;
}
.v2 .v2-sidebar .v2-sidebar-nav-item:hover .bi { opacity: .9; }
.v2 .v2-sidebar .v2-sidebar-nav-item.v2-active .bi { opacity: 1; color: var(--v2-accent); }

/* Collapsed rail: drop the indicator bar (icon-only, centered) */
.v2 .v2-app-shell.v2-collapsed .v2-sidebar-nav-item.v2-active::before { display: none; }

/* Language switcher — segmented look on the dark rail */
.v2 .v2-sidebar-lang .v2-btn {
    flex: 1; justify-content: center; height: 30px; border-radius: 6px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(122, 143, 166, .18);
    color: #C8D8E8; font-weight: 600; font-size: 12px;
}
.v2 .v2-sidebar-lang .v2-btn:hover { background: rgba(255, 255, 255, .09); color: #ffffff; }
.v2 .v2-sidebar-lang .v2-btn.v2-btn-secondary {
    background: var(--v2-accent); border-color: var(--v2-accent); color: #1C2B3A;
}

/* Collapse toggle */
.v2 .v2-sidebar-collapse-btn {
    border-radius: 6px; border-color: rgba(122, 143, 166, .18); font-size: 12px;
}
.v2 .v2-sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, .06); border-color: rgba(122, 143, 166, .3); color: #ffffff;
}

/* User footer */
.v2 .v2-sidebar-user { border-top: 1px solid rgba(122, 143, 166, .12); padding: 12px 10px 14px; }
.v2 .v2-sidebar-user:hover { background-color: rgba(255, 255, 255, .04); border-radius: 6px; }
.v2 .v2-sidebar-user-avatar { border-radius: 50%; }
.v2 .v2-sidebar-context { border-radius: 6px; }

/* ============================================================================
   Home dashboard — launch cards (quick-action tiles, Fluent card treatment)
   ============================================================================ */
.fui-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.fui-launch-card {
    display: flex; flex-direction: column; align-items: flex-start; text-align: start;
    background: var(--fui-bg-surface); border: 1px solid var(--fui-stroke-2);
    border-radius: var(--fui-radius-lg); box-shadow: var(--fui-shadow-2);
    padding: 18px; cursor: pointer; font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.fui-launch-card:hover { border-color: var(--fui-brand); box-shadow: var(--fui-shadow-8); transform: translateY(-1px); }
.fui-launch-card:active { transform: none; }
.fui-launch-icon {
    width: 42px; height: 42px; border-radius: var(--fui-radius-md); margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: var(--fui-brand-tint); color: var(--fui-brand);
}
.fui-launch-name { font-size: 15px; font-weight: 600; color: var(--fui-fg-1); }
.fui-launch-desc { font-size: 12px; color: var(--fui-fg-3); margin-top: 2px; }

/* Filter panel — labeled subsections (audit log, etc.) */
.fui-filter-groups { display: flex; flex-direction: column; }
.fui-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* Checklist (admin tools, feature bullets) */
.fui-checklist { display: flex; flex-direction: column; gap: 10px; }
.fui-checklist-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--fui-fg-2); line-height: 1.45; }
.fui-checklist-item .bi { color: var(--fui-brand); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* Fluent skin for the CompanyEnvironmentPicker "panel" trigger (Admin Panel page).
   Overrides the legacy .admin-panel-page rules — same specificity, but fluent.css
   loads after app.css so these win. */
.fui-page .selection-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; min-height: 42px; padding: 8px 14px; box-sizing: border-box;
    border: 1px solid var(--fui-stroke-1); border-radius: var(--fui-radius-md);
    background: var(--fui-bg-surface); color: var(--fui-fg-1); text-align: start;
    box-shadow: none; transition: border-color .1s ease, box-shadow .1s ease;
}
.fui-page .selection-trigger:hover { border-color: var(--fui-brand); box-shadow: var(--fui-shadow-4); transform: none; }
.fui-page .selection-trigger-copy { display: flex; flex-direction: column; min-width: 0; }
.fui-page .selection-trigger-value { font-size: 14px; font-weight: 600; color: var(--fui-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fui-page .selection-trigger-meta { font-size: 12px; color: var(--fui-fg-3); }
.fui-page .selection-trigger-icon { flex-shrink: 0; color: var(--fui-fg-3); font-size: 13px; }

/* ============================================================================
   Auth pages (login / forgot-password) — Fluent split layout.
   Self-contained: driven by the .fui-page token scope, so it needs no v2 wrapper.
   ============================================================================ */
.fui-auth {
    min-height: 100vh; min-height: 100svh;
    display: grid; grid-template-columns: 1.05fr .95fr;
    background: var(--fui-bg-canvas);
}

/* Left — form on a clean white surface */
.fui-auth-form {
    display: flex; flex-direction: column; justify-content: center;
    padding: 48px 56px; background: var(--fui-bg-surface);
}
.fui-auth-inner { width: 100%; max-width: 400px; margin: 0 auto; }

.fui-auth-brandmark { margin-bottom: 36px; }
.fui-auth-brandmark h1 {
    font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1.2;
    color: var(--fui-fg-1); margin: 0 0 6px;
}
.fui-auth-tagline { font-size: 13px; color: var(--fui-fg-3); font-style: italic; margin: 0; }

.fui-auth-heading { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--fui-fg-1); margin: 0 0 6px; }
.fui-auth-sub { font-size: 14px; color: var(--fui-fg-3); margin: 0 0 28px; }

.fui-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fui-auth-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--fui-fg-2); }
.fui-auth-label .bi { color: var(--fui-brand); font-size: 14px; }
.fui-auth-input {
    width: 100%; height: 42px; padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--fui-stroke-1); border-radius: var(--fui-radius-md);
    font-family: inherit; font-size: 14px; color: var(--fui-fg-1); background: var(--fui-bg-surface);
    outline: none; transition: border-color .1s ease, box-shadow .1s ease;
}
.fui-auth-input::placeholder { color: var(--fui-fg-3); }
.fui-auth-input:focus { border-color: var(--fui-brand); box-shadow: 0 0 0 3px var(--fui-brand-tint); }

.fui-auth-forgot { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--fui-brand); text-decoration: none; margin-top: 2px; }
.fui-auth-forgot:hover { color: var(--fui-brand-hover); text-decoration: underline; }

.fui-auth-check { display: flex; align-items: center; gap: 9px; margin: 4px 0 22px; font-size: 13px; color: var(--fui-fg-2); }
.fui-auth-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--fui-brand); }

.fui-auth-submit {
    width: 100%; height: 44px; border: none; border-radius: var(--fui-radius-md);
    background: var(--fui-brand); color: var(--fui-on-brand);
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
    box-shadow: 0 4px 14px rgba(176,158,128,.28);
}
.fui-auth-submit:hover { background: var(--fui-brand-hover); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(176,158,128,.34); }
.fui-auth-submit:active { background: var(--fui-brand-pressed); transform: none; }
.fui-auth-submit:disabled { background: var(--fui-bg-subtle); color: var(--fui-fg-disabled); box-shadow: none; cursor: default; transform: none; }

.fui-auth-foot { margin-top: 18px; font-size: 13px; color: var(--fui-fg-3); }
.fui-auth-foot a, .fui-auth-link { color: var(--fui-brand); font-weight: 600; text-decoration: none; }
.fui-auth-foot a:hover, .fui-auth-link:hover { text-decoration: underline; }

.fui-auth-alert { padding: 12px 14px; border-radius: var(--fui-radius-md); font-size: 13px; margin-bottom: 22px; }
.fui-auth-alert.is-error { background: var(--fui-danger-bg); border: 1px solid var(--fui-danger-border); color: var(--fui-danger-fg); }
.fui-auth-alert.is-success { background: var(--fui-success-bg); border: 1px solid var(--fui-success-border); color: var(--fui-success-fg); }

/* Right — navy brand panel with floating accent orbs */
.fui-auth-visual {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #1C2B3A 0%, #22334A 55%, #2A3D57 100%);
}
.fui-auth-visual::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 28% 22%, rgba(176,158,128,.14), transparent 52%),
        radial-gradient(ellipse at 72% 82%, rgba(93,168,224,.10), transparent 52%);
}
.fui-auth-visual-content { position: relative; z-index: 1; text-align: center; padding: 48px; }
.fui-auth-orbs { width: 280px; height: 280px; margin: 0 auto 32px; position: relative; }
.fui-auth-orb { position: absolute; border-radius: 50%; animation: fui-auth-float 6s ease-in-out infinite; }
.fui-auth-orb:nth-child(1) { width: 140px; height: 140px; top: 20%; left: 10%; background: linear-gradient(135deg, var(--fui-brand), rgba(176,158,128,.3)); opacity: .75; }
.fui-auth-orb:nth-child(2) { width: 100px; height: 100px; top: 10%; right: 15%; background: linear-gradient(135deg, #5DA8E0, rgba(93,168,224,.3)); opacity: .6; animation-delay: -2s; }
.fui-auth-orb:nth-child(3) { width: 80px; height: 80px; bottom: 15%; right: 25%; background: linear-gradient(135deg, #2ECC71, rgba(46,204,113,.3)); opacity: .5; animation-delay: -4s; }
.fui-auth-orb:nth-child(4) { width: 60px; height: 60px; bottom: 25%; left: 20%; background: linear-gradient(135deg, #B09E80, rgba(176,158,128,.25)); opacity: .5; animation-delay: -1s; }
@keyframes fui-auth-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-12px) rotate(2deg); }
    66% { transform: translateY(8px) rotate(-1deg); }
}
.fui-auth-visual-tagline { font-size: 18px; font-weight: 600; color: rgba(255,255,255,.78); max-width: 320px; margin: 0 auto; line-height: 1.5; }

@media (max-width: 960px) {
    .fui-auth { grid-template-columns: 1fr; }
    .fui-auth-visual { display: none; }
}
@media (max-width: 600px) {
    .fui-auth-form { padding: 32px 24px; }
}

/* ============================================================================
   Print — isolates a `.print-area` block (e.g. a posted count adjustment) so the
   browser print dialog outputs just the document, not the app shell.
   ============================================================================ */
@media print {
    body * { visibility: hidden; }
    .print-area, .print-area * { visibility: visible; }
    .print-area {
        position: absolute; inset-inline-start: 0; top: 0; width: 100%;
    }
    .print-area .fui-card { box-shadow: none; border-color: #ccc; }
    .fui-command-bar, .fui-back, .fui-banner { display: none !important; }
}