/* ==========================================================================
   dbv2 Design System — Theme & Layout

   Single source of truth for all visual design tokens and the application
   shell layout. Overrides Radzen's material theme via --dbv2-* tokens.

   Load order (index.html):
   1. _content/Radzen.Blazor/css/material.css  (Radzen theme — structure + defaults)
   2. css/dbv2-theme.css                       (this file — webfont @font-face + all visual overrides)
   3. css/app.css                              (app-specific styles)

   Webfont: Plus Jakarta Sans is self-hosted (wwwroot/fonts/, OFL-1.1) and
   declared in section 0 below — no Google Fonts CDN dependency.

   Naming: all tokens use --dbv2-{category}-{variant}.
   Developers must reference --dbv2-* tokens, never raw hex/px values.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. WEBFONT — Plus Jakarta Sans (self-hosted, variable, OFL-1.1)

   Self-hosted from wwwroot/fonts/ (no Google Fonts CDN — GDPR + no CDN
   round-trip). One variable woff2 per Unicode subset covers the whole 200–800
   weight axis; the four blocks below mirror Google's subsetting (latin,
   latin-ext, vietnamese, cyrillic-ext) for zero glyph regression.

   Vertical-metric normalization (the ascent/descent/line-gap-override trio):
   Plus Jakarta Sans ships USE_TYPO_METRICS=0 with strongly asymmetric vertical
   metrics — ascent/descent 1038/-222 (win 1296/356) against a 745 cap height.
   So under line-height:normal the baseline sits well below the line-box centre,
   and any flex/line-centred label (buttons, chips, inputs, tabs, menu items)
   renders its glyphs low — visible for sentence-case, masked by all-caps. The
   overrides replace those metrics with a box that centres the CAP BAND,
   identically across Chrome/Firefox/Safari (unlike text-box-trim, Chrome-only):
       ascent − descent = capHeight        = 74.5%   → cap band centred
       ascent + descent = natural typo box = 126%    → 1038+222, spacing kept
       ⇒ ascent 100.25%, descent 25.75%, line-gap 0%
   This makes the old per-component nudges unnecessary. To shift the optical
   centre, move ~1% between ascent/descent (more descent ⇒ labels sit lower). */

/* stylelint-disable declaration-property-value-disallowed-list --
   `font-weight: 200 800` is the variable-font weight-RANGE descriptor (one woff2
   spanning the 200–800 wght axis), not a value usage — it cannot be a --dbv2-*
   token. The token-discipline rule stays active for every component declaration. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    ascent-override: 100.25%;
    descent-override: 25.75%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    ascent-override: 100.25%;
    descent-override: 25.75%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    ascent-override: 100.25%;
    descent-override: 25.75%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    ascent-override: 100.25%;
    descent-override: 25.75%;
    line-gap-override: 0%;
}
/* stylelint-enable declaration-property-value-disallowed-list */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* ── Accent (Brand) — Terracotta clay ramp ─────────────────────────── */
    --dbv2-primary:         #B8714A;
    --dbv2-primary-light:   #CFA07A;
    --dbv2-primary-lighter: rgb(184 113 74 / 12%);
    --dbv2-primary-dark:    #955B38;
    --dbv2-primary-darker:  #955B38;
    --dbv2-primary-wash:    #E4CAB3;   /* soft clay — hover highlights, tag fills */
    --dbv2-primary-tint:    #F5E8DC;   /* palest clay — subtle backgrounds */
    --dbv2-on-primary:      #FFF;   /* foreground on saturated brand — text, icons, dots */

    /* ── Core surfaces — four-tier depth model ─────────────────────────── *
     *
     *  Canvas  → page background (deepest layer)
     *  Muted   → middleground: sidebar, secondary panels (present, not loud)
     *  Surface → foreground: cards, islands, dialogs (where content lives)
     *  Accent  → brand highlights (sparing, draws the eye)
     *
     * ──────────────────────────────────────────────────────────────────── */
    --dbv2-canvas:      #FAF8F5;   /* warm linen — page background */
    --dbv2-muted:       #F0EAE2;   /* parchment — sidebar, secondary panels */
    --dbv2-surface:     #FDFCFA;   /* warm off-white — cards, islands */

    /* editor views only — warm charcoal workspace background */
    --dbv2-editor-workspace: #3A332E;
    --dbv2-header-bg:   var(--dbv2-primary);
    --dbv2-header-text: var(--dbv2-on-primary);

    /* ── Sidebar (muted surface) ───────────────────────────────────────── */
    --dbv2-sidebar-bg:           var(--dbv2-muted);
    --dbv2-sidebar-text:         #6B6058;
    --dbv2-sidebar-text-hover:   #3D3530;
    --dbv2-sidebar-text-active:  #3D3530;
    --dbv2-sidebar-width:            15rem;
    --dbv2-sidebar-collapsed-width:   4rem;

    /* ── Text — warm charcoal hierarchy ────────────────────────────────── */
    --dbv2-text-primary:   #3D3530;
    --dbv2-text-secondary: #6B6058;
    --dbv2-text-tertiary:  #8A7E76;
    --dbv2-text-disabled:  #B0A79E;

    /* ── Borders — warm sand tones ─────────────────────────────────────── */
    --dbv2-border:       #E8E2DB;
    --dbv2-border-light: #F0EAE2;
    --dbv2-border-strong: #D4CCC3;

    /* ── Spacing (4px base) ────────────────────────────────────────────── */
    --dbv2-space-1:   0.25rem;   /*  4px */
    --dbv2-space-2:   0.5rem;    /*  8px */
    --dbv2-space-3:   0.75rem;   /* 12px */
    --dbv2-space-4:   1rem;      /* 16px */
    --dbv2-space-5:   1.25rem;   /* 20px */
    --dbv2-space-6:   1.5rem;    /* 24px */
    --dbv2-space-8:   2rem;      /* 32px */
    --dbv2-space-10:  2.5rem;    /* 40px */
    --dbv2-space-12:  3rem;      /* 48px */

    /* ── Island layout ──────────────────────────────────────────────────── */
    --dbv2-island-gap: var(--dbv2-space-5);   /* 20px — uniform x/y gap for all island grids */

    /* ── Typography scale ──────────────────────────────────────────────── */
    --dbv2-font-size-xs:       0.75rem;     /* 12px — captions, metadata */
    --dbv2-font-size-sm:       0.8125rem;   /* 13px — small text, table cells */
    --dbv2-font-size-base:     0.9375rem;   /* 15px — body text */
    --dbv2-font-size-md:       1rem;        /* 16px — section headings */
    --dbv2-font-size-lg:       1.25rem;     /* 20px — page titles */
    --dbv2-font-size-xl:       1.5rem;      /* 24px — hero/display */
    --dbv2-font-size-overline: 0.6875rem;   /* 11px — overlines, uppercase labels */

    /* Canonical monospace stack — keycap chips, key columns, tabular code. */
    --dbv2-font-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, monospace;

    /* ── Font weights ──────────────────────────────────────────────────── */
    --dbv2-font-weight-regular:  400;
    --dbv2-font-weight-medium:   500;
    --dbv2-font-weight-semibold: 600;
    --dbv2-font-weight-bold:     700;

    /* ── Border Radius ─────────────────────────────────────────────────── */
    --dbv2-radius-xs:   0.125rem;   /* 2px — hairline accent bars only */
    --dbv2-radius-sm:   0.5rem;
    --dbv2-radius-md:   0.875rem;
    --dbv2-radius-lg:   1rem;
    --dbv2-radius-full: 625rem;

    /* ── Shadows — soft, diffused ──────────────────────────────────────── */
    --dbv2-shadow-sm:   0 0.125rem 0.75rem rgb(0 0 0 / 4%);
    --dbv2-shadow-md:   0 0.125rem 0.75rem rgb(0 0 0 / 8%);
    --dbv2-shadow-lg:   0 0.5rem 1.5rem rgb(0 0 0 / 12%);
    --dbv2-shadow-none: none;

    /* ── Overlays — modal backdrops, image hints ───────────────────────── */
    --dbv2-overlay:       rgb(0 0 0 / 50%);
    --dbv2-overlay-heavy: rgb(0 0 0 / 70%);

    /* ── Component sizes ───────────────────────────────────────────────── */
    --dbv2-icon-button-size: 1.75rem;
    --dbv2-icon-size-sm: 1rem;
    --dbv2-icon-size-lg: 2rem;

    /* Refine-attachment thumbnail tile + its overlaid remove (×) button. */
    --dbv2-attachment-thumb-size: 4rem;      /* 64px */
    --dbv2-attachment-remove-size: 1.25rem;  /* 20px */

    /* ── Semantic — warm earthy variants ────────────────────────────────── */
    --dbv2-error:           #C25450;
    --dbv2-error-light:     #D4807D;   /* 16% white mix */
    --dbv2-error-lighter:   #FDF0EF;   /* palette toast-error bg */
    --dbv2-error-dark:      #943B37;   /* palette toast-error text */
    --dbv2-error-darker:    #7A302D;   /* 25% black mix */
    --dbv2-success:         #6B8F71;
    --dbv2-success-light:   #8FAF94;   /* 16% white mix */
    --dbv2-success-lighter: #EEF4EF;   /* palette toast-success bg */
    --dbv2-success-dark:    #3D6044;   /* palette toast-success text */
    --dbv2-success-darker:  #2F4A34;   /* 25% black mix */
    --dbv2-warning:         #C49A3C;
    --dbv2-warning-light:   #D4B46C;   /* 16% white mix */
    --dbv2-warning-lighter: #FBF3E4;   /* palette toast-warning bg */
    --dbv2-warning-dark:    #7A5E1E;   /* palette toast-warning text */
    --dbv2-warning-darker:  #5E4817;   /* 25% black mix */
    --dbv2-info:            #5E8B8D;
    --dbv2-info-light:      #84AAAB;   /* 16% white mix */
    --dbv2-info-lighter:    #EBF1F1;   /* palette toast-info bg */
    --dbv2-info-dark:       #3A5E60;   /* palette toast-info text */
    --dbv2-info-darker:     #2C4748;   /* 25% black mix */

    /* ── Button ───────────────────────────────────────────────────────── */
    --dbv2-btn-disabled-opacity: 0.6;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --dbv2-header-height: 3.5rem;

    /* ── Motion ────────────────────────────────────────────────────────── *
     *
     * Easings and durations for every UI transition. See ADR-0023 for the
     * decision context and the six motion roles these tokens serve.
     *
     * ──────────────────────────────────────────────────────────────────── */

    /* Easings */
    --dbv2-ease-out:     cubic-bezier(0.23, 1, 0.32, 1);     /* default UI ease-out — reveals, dismisses, presses */
    --dbv2-ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement — reposition, FLIP, expand */
    --dbv2-ease-settle:  cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-style settle — drawers, sheets, modal slides */
    --dbv2-ease-linear:  linear;                              /* progress, marquees, hold-to-act */

    /* Durations — exits run at ~60% of the matching enter */
    --dbv2-dur-press:    120ms;   /* button down/up, scale feedback */
    --dbv2-dur-hover:    160ms;   /* color, border, shadow swap */
    --dbv2-dur-tooltip:  160ms;   /* tooltip in/out */
    --dbv2-dur-popover:  200ms;   /* dropdown, popover, menu */
    --dbv2-dur-modal:    240ms;   /* dialog open */
    --dbv2-dur-drawer:   320ms;   /* side/bottom sheet */
    --dbv2-dur-page:     280ms;   /* route transitions */
    --dbv2-dur-exit:     180ms;   /* generic exit — ~60% of typical enter */

    /* --------------------------------------------------------------------------
       2. RADZEN TOKEN OVERRIDES
       -------------------------------------------------------------------------- */

    /* Map Radzen primary to dbv2 brand */
    --rz-primary:            var(--dbv2-primary);
    --rz-primary-light:      var(--dbv2-primary-light);
    --rz-primary-lighter:    var(--dbv2-primary-lighter);
    --rz-primary-dark:       var(--dbv2-primary-dark);
    --rz-primary-darker:     var(--dbv2-primary-darker);
    --rz-on-primary:         var(--dbv2-on-primary);
    --rz-on-primary-lighter: var(--dbv2-primary);

    /* Map Radzen secondary to warm grey from palette */
    --rz-secondary:            #6B6058;
    --rz-secondary-light:      #8A7E76;
    --rz-secondary-lighter:    rgb(107 96 88 / 12%);
    --rz-secondary-dark:       #3D3530;
    --rz-secondary-darker:     #3D3530;
    --rz-on-secondary:         #FFF;
    --rz-on-secondary-lighter: #6B6058;

    /* Semantic — override Material defaults with warm earthy tones */
    --rz-danger:         var(--dbv2-error);
    --rz-danger-light:   var(--dbv2-error-light);
    --rz-danger-lighter: var(--dbv2-error-lighter);
    --rz-danger-dark:    var(--dbv2-error-dark);
    --rz-danger-darker:  var(--dbv2-error-darker);
    --rz-success:         var(--dbv2-success);
    --rz-success-light:   var(--dbv2-success-light);
    --rz-success-lighter: var(--dbv2-success-lighter);
    --rz-success-dark:    var(--dbv2-success-dark);
    --rz-success-darker:  var(--dbv2-success-darker);
    --rz-warning:         var(--dbv2-warning);
    --rz-warning-light:   var(--dbv2-warning-light);
    --rz-warning-lighter: var(--dbv2-warning-lighter);
    --rz-warning-dark:    var(--dbv2-warning-dark);
    --rz-warning-darker:  var(--dbv2-warning-darker);
    --rz-info:         var(--dbv2-info);
    --rz-info-light:   var(--dbv2-info-light);
    --rz-info-lighter: var(--dbv2-info-lighter);
    --rz-info-dark:    var(--dbv2-info-dark);
    --rz-info-darker:  var(--dbv2-info-darker);

    /* Typography */
    --rz-text-font-family: 'Plus Jakarta Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
    --rz-body-font-size:   var(--dbv2-font-size-base);
    --rz-body-line-height: 1.5;
    --rz-body-background-color: var(--dbv2-canvas);
    --rz-body-color:        var(--dbv2-text-primary);

    /* Shape */
    --rz-border-radius:      var(--dbv2-radius-sm);
    --rz-card-border-radius: var(--dbv2-radius-lg);
    --rz-card-shadow:        var(--dbv2-shadow-sm);

    /* Dialog — body + title bar use Surface, not Radzen's default pure white */
    --rz-dialog-background-color:       var(--dbv2-surface);
    --rz-dialog-title-background-color: var(--dbv2-surface);

    /* Dialog geometry + title typography. Material bleeds 8px corners (via --rz-border-radius
       → radius-sm) and a loose 500-weight, +0.0125em-tracked 1.25rem title. Map to the modal
       radius + heading scale so every DialogService surface (AddBrand, CopyWorkflow, InviteUser,
       ExtraDetail, PromptEditor, RejectReason, …) reads on-system. */
    --rz-dialog-border-radius:        var(--dbv2-radius-lg);            /* 16px modal radius (was 8px) */
    --rz-dialog-title-font-size:      var(--dbv2-font-size-lg);         /* 20px — bridge the Material 1.25rem literal */
    --rz-dialog-title-font-weight:    var(--dbv2-font-weight-semibold); /* 600 (was Material 500) */
    --rz-dialog-title-letter-spacing: normal;                          /* neutralize Material +0.0125em tracking */
    --rz-dialog-content-padding:      var(--dbv2-space-6);             /* 24px — bridge the Material 1.5rem literal */
    --rz-dialog-title-padding-block:  var(--dbv2-space-6) 0;
    --rz-dialog-title-padding-inline: var(--dbv2-space-6);

    /* Notification toasts — Material ships flat (shadow:none), 8px corners and a 10px off-grid
       gap. Float them above the canvas at the floating-surface radius. ~12 NotificationService surfaces. */
    --rz-notification-border-radius: var(--dbv2-radius-md);            /* 14px floating-surface radius (was 8px) */
    --rz-notification-shadow:        var(--dbv2-shadow-lg);            /* lift off canvas (was none) */
    --rz-notification-gap:           var(--dbv2-space-2);              /* 8px on-grid (was 10px) */

    /* Form fields (Variant.Flat is the dbv2 default) — Material's 54px filled-textfield geometry
       with a 23px top inset bleeds in. Collapse to a compact 40px control on the 4px grid; warm the
       cool-grey fill; drop the top-only underline shape. ~59 input uses. */
    --rz-form-field-filled-height:           2.5rem;                  /* 40px compact control (was 54px) */
    --rz-form-field-filled-padding-block:    var(--dbv2-space-2) var(--dbv2-space-2); /* symmetric 8px (was 23px/7px) */
    --rz-form-field-filled-background-color: var(--dbv2-surface);     /* warm linen (was cool #eeeeee) */
    --rz-form-field-filled-border-radius:    var(--dbv2-radius-sm);   /* 8px all four corners (was top-only) */

    /* DataGrid row-detail / row-expansion (QueryableDataGrid, spec #24).
       Radzen's expanded-row detail panel (.rz-expanded-row-template / .rz-expanded-row-content > td)
       defaults its background to var(--rz-base-100) = #f5f5f5 — a COOL grey that reads as an
       off-system blue-grey tint against our warm clay surfaces. Map it onto the system tokens so the
       expanded detail reads as a recessed slice of the same warm surface, not a foreign panel. We map
       the Radzen variable (mirroring the primary / dialog mappings above) rather than restyling the
       markup, so every grid's row-detail inherits the fix.
       Border/radius/padding stay neutral (0/none) — the fused .qdg-surface owns the frame, and each
       detail Template owns its own inner padding. */
    --rz-grid-detail-template-background-color: var(--dbv2-canvas);
    --rz-grid-detail-template-border:           none;
    --rz-grid-detail-template-border-radius:    0;
    --rz-grid-detail-template-padding:          0;

    /* The expanded parent row is rendered as a SELECTED row; keep its highlight + foreground on the
       clay ramp. Radzen's grid-selected pair defaults to the indigo --rz-primary-lighter (#4340D2)
       from the Material base; the primary / on-primary-lighter vars are already mapped to clay above,
       but we pin the grid-selected pair explicitly so the expanded row never falls back to Material
       blue. */
    --rz-grid-selected-background-color: var(--dbv2-primary-lighter);
    --rz-grid-selected-color:            var(--dbv2-text-primary);

    /* Row hover + zebra stripe also default to the cool --rz-base greys; warm them to system tokens
       so the grid body matches the surrounding linen rather than reading cold. */
    --rz-grid-hover-background-color:  var(--dbv2-primary-tint);
    --rz-grid-stripe-background-color: var(--dbv2-canvas);

    /* DataGrid + pager TYPE ONLY — bridge the off-scale 14px (0.875rem) cells/headers/filter onto the
       13px "table cells" step, and the pager 14px summary + 2rem pill buttons onto scale. Deliberately
       NOT mapping --rz-grid-border-radius: the grid FRAME is owned by .qdg-surface (see comment above) —
       bare grids are wrapped in QueryableDataGrid instead. QueryableDataGrid is unaffected (its ::deep
       radius wins and it sets no cell font-size, so it harmlessly inherits 13px). */
    --rz-grid-cell-font-size:        var(--dbv2-font-size-sm);  /* 13px (was 14px off-scale) */
    --rz-grid-header-font-size:      var(--dbv2-font-size-sm);  /* 13px */
    --rz-grid-filter-font-size:      var(--dbv2-font-size-sm);  /* 13px */
    --rz-pager-summary-font-size:    var(--dbv2-font-size-xs);  /* 12px metadata (was 14px) */
    --rz-pager-button-border-radius: var(--dbv2-radius-sm);     /* 8px button radius (was 2rem pill) */
}


/* --------------------------------------------------------------------------
   2b. RADZEN COMPONENT OVERRIDES
   -------------------------------------------------------------------------- */

.rz-button .rz-button-icon-left {
    margin-right: 0.35em;
}

/* Icon-only buttons: no trailing margin when icon is the last child */
.rz-button .rz-button-icon-left:last-child {
    margin-right: 0;
}

.rz-button:disabled {
    opacity: var(--dbv2-btn-disabled-opacity);
}

/* Button typography — Material renders ALL-CAPS, +1.25px tracking, weight 500, 0.875rem/14px
   (off-scale) on every size variant. dbv2 uses sentence-case labels on the type scale. dbv2-theme
   loads after material.css, so this equal-specificity rule wins the size-class defaults. ~114 buttons. */
.rz-button,
.rz-button-md,
.rz-button-sm,
.rz-button-xs {
    font-size:      var(--dbv2-font-size-base);   /* 15px on-scale (was 14px) */
    font-weight:    var(--dbv2-font-weight-medium);
    letter-spacing: normal;                       /* drop Material 0.75–1.25px tracking */
    text-transform: none;                         /* sentence-case, not ALL-CAPS */
}

/* Button-label vertical centring is handled globally by the Plus Jakarta Sans
   ascent/descent-override (section 0) — no per-button line-height or text-box
   trim needed, and it now holds cross-browser, not just Chrome. */

/* ── Dbv2Button — shared button polish ────────────────────────────────────
   The <Dbv2Button> wrapper renders a .rz-button and adds .dbv2-btn (+ a
   per-variant + optional --icon-only modifier). This block owns the cross-cutting
   interaction polish — press feedback, gated hover lift, focus ring, icon-only
   sizing — on top of the Radzen structure. Global, equal-specificity overrides
   (NOT scoped ::deep) so it matches the .rz-button override pattern above. */
.dbv2-btn {
    margin: 0;   /* the button owns no external margin — spacing lives on the row (.dbv2-actions) */
    transition:
        transform        var(--dbv2-dur-press) var(--dbv2-ease-out),
        box-shadow       var(--dbv2-dur-hover) var(--dbv2-ease-out),
        color            var(--dbv2-dur-hover) var(--dbv2-ease-out),
        background-color var(--dbv2-dur-hover) var(--dbv2-ease-out);
}

.dbv2-btn:active {
    transform: scale(0.97);   /* tactile press feedback */
}

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

/* Hover lift only where hover is a real, precise affordance — never on touch. */
@media (hover: hover) and (pointer: fine) {
    .dbv2-btn:hover {
        box-shadow: var(--dbv2-shadow-md);
    }
}

/* Icon-only: a fixed square that centers the glyph, with no label-gap reservation. */
.dbv2-btn--icon-only {
    width:  var(--dbv2-icon-button-size);
    height: var(--dbv2-icon-button-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dbv2-btn--icon-only .rz-button-icon-left {
    margin: 0;   /* no trailing gap when the icon is the only content */
}

/* Respect reduced-motion: drop the press scale and interaction transitions. */
@media (prefers-reduced-motion: reduce) {
    .dbv2-btn {
        transition: none;
    }

    .dbv2-btn:active {
        transform: none;
    }
}

/* Notification toast — fluid width + wrap long text */
.rz-notification {
    max-width: clamp(20rem, 40vw, 35rem);
}

.rz-notification .rz-notification-detail {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   3. BASE STYLES
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    height: 100%;
    font-size: 100%; /* stylelint-disable-line declaration-property-value-disallowed-list -- rem scale anchor */
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-regular);
    line-height: 1.5;
    color: var(--dbv2-text-primary);
    background: var(--dbv2-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   4. APPLICATION SHELL
   -------------------------------------------------------------------------- */

.dbv2-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--dbv2-primary);
    overflow: hidden;
}


/* ── Header ─────────────────────────────────────────────────────────────── */

.dbv2-header {
    display: flex;
    align-items: center;
    height: var(--dbv2-header-height);
    padding: 0 var(--dbv2-space-6);
    background: var(--dbv2-header-bg);
    color: var(--dbv2-header-text);
    flex-shrink: 0;
    z-index: 100;
}

.dbv2-header-start {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    min-width: 11.25rem;
}

.dbv2-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 var(--dbv2-space-8);
}

.dbv2-header-end {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    min-width: 11.25rem;
    justify-content: flex-end;
}

/* Logo */
.dbv2-logo {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-header-text);
    letter-spacing: -0.02em;
    user-select: none;
}

/* Sidebar toggle */
.dbv2-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: rgb(255 255 255 / 10%);
    border-radius: var(--dbv2-radius-sm);
    color: var(--dbv2-header-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dbv2-sidebar-toggle:hover { background: rgb(255 255 255 / 20%); }

.dbv2-sidebar-toggle svg   {
    width: 1.25rem;
    height: 1.25rem;
}

/* Search */
.dbv2-search {
    position: relative;
    width: 100%;
    max-width: 30rem;
    min-width: 15rem;
}

.dbv2-search-icon {
    position: absolute;
    left: var(--dbv2-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: rgb(255 255 255 / 55%); /* stylelint-disable-line declaration-property-value-disallowed-list -- translucent on-brand text, no opacity token */
    pointer-events: none;
}

.dbv2-search-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 var(--dbv2-space-3) 0 calc(var(--dbv2-space-3) + 1.125rem + var(--dbv2-space-2)); /* left inset clears the icon: gutter + glyph + gap */
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--dbv2-radius-md);
    background: rgb(255 255 255 / 12%);
    font-family: inherit;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-header-text);
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dbv2-search-input::placeholder { color: rgb(255 255 255 / 50%); /* stylelint-disable-line declaration-property-value-disallowed-list -- translucent on-brand text, no opacity token */ }

.dbv2-search-input:focus {
    background: rgb(255 255 255 / 20%);
    border-color: rgb(255 255 255 / 40%);
}

/* Header icon button */
.dbv2-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    border-radius: var(--dbv2-radius-full);
    color: rgb(255 255 255 / 80%); /* stylelint-disable-line declaration-property-value-disallowed-list -- translucent on-brand text, no opacity token */
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dbv2-header-icon-btn:hover {
    background: rgb(255 255 255 / 15%);
    color: var(--dbv2-on-primary);
}

.dbv2-header-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* User menu trigger */
.dbv2-user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    padding: var(--dbv2-space-1) var(--dbv2-space-2) var(--dbv2-space-1) var(--dbv2-space-1);
    border-radius: var(--dbv2-radius-full);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dbv2-user-menu-trigger:hover { background: rgb(255 255 255 / 12%); }

.dbv2-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--dbv2-radius-full);
    background: rgb(255 255 255 / 20%);
    color: var(--dbv2-header-text);
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
    flex-shrink: 0;
}

.dbv2-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.dbv2-user-name {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-header-text);
}

.dbv2-user-company {
    font-size: var(--dbv2-font-size-overline);
    color: rgb(255 255 255 / 70%); /* stylelint-disable-line declaration-property-value-disallowed-list -- translucent on-brand text, no opacity token */
}

/* User menu wrapper (positions dropdown relative) */
.dbv2-user-menu-wrapper {
    position: relative;
}

/* User menu dropdown */
.dbv2-user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dbv2-user-menu {
    position: absolute;
    top: calc(100% + var(--dbv2-space-1));
    right: 0;
    min-width: 10rem;
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-md);
    box-shadow: var(--dbv2-shadow-lg);
    padding: var(--dbv2-space-1);
    z-index: 100;
}

.dbv2-user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    width: 100%;
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border: none;
    border-radius: var(--dbv2-radius-sm);
    background: none;
    color: var(--dbv2-text-primary);
    font-size: var(--dbv2-font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dbv2-user-menu-item:hover {
    background: var(--dbv2-canvas);
}


/* ── Content Area (rounded top corners) ─────────────────────────────────── */

.dbv2-content-area {
    display: flex;
    flex: 1;
    border-radius: var(--dbv2-radius-lg) var(--dbv2-radius-lg) 0 0;
    overflow: hidden;
    min-height: 0;
}


/* ── Sidebar ────────────────────────────────────────────────────────────── */

.dbv2-sidebar {
    width: var(--dbv2-sidebar-width);
    background: var(--dbv2-sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s ease;
    border-right: 0.0625rem solid var(--dbv2-border);
}

.sidebar-collapsed .dbv2-sidebar {
    width: var(--dbv2-sidebar-collapsed-width);
}

/* Navigation container */
.dbv2-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--dbv2-space-3);
    overflow: hidden auto;
}

/* Group divider */
.dbv2-nav-divider {
    height: 0.0625rem;
    background: var(--dbv2-border);
    margin: var(--dbv2-space-2) var(--dbv2-space-2);
}

/* Nav item */
.dbv2-nav-item {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-3);
    height: 2.5rem;
    padding: 0 var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-sm);
    color: var(--dbv2-sidebar-text);
    text-decoration: none;
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    transition: color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.dbv2-nav-item:hover {
    color: var(--dbv2-sidebar-text-hover);
    background: rgb(0 0 0 / 4%);
    text-decoration: none;
}

.dbv2-nav-item.active {
    color: var(--dbv2-sidebar-text-active);
    background: var(--dbv2-primary-lighter);
}

.dbv2-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 0.1875rem;
    background: var(--dbv2-primary);
    border-radius: 0 var(--dbv2-radius-xs) var(--dbv2-radius-xs) 0;
}

/* Nav icon */
.dbv2-nav-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dbv2-nav-icon > * {
    font-size: var(--dbv2-font-size-lg) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    line-height: 1 !important;
}

/* Nav label */
.dbv2-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed sidebar */
.sidebar-collapsed .dbv2-nav-label,
.sidebar-collapsed .dbv2-sidebar-footer-text {
    display: none;
}

.sidebar-collapsed .dbv2-nav-item {
    padding: 0 var(--dbv2-space-2) 0 var(--dbv2-space-3);
}

.sidebar-collapsed .dbv2-nav-divider {
    width: 2rem;
    margin-left: auto;
    margin-right: auto;
}

/* Nav group (expandable parent with child items) */
.dbv2-nav-group-toggle {
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
}

.dbv2-nav-chevron {
    margin-left: auto;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.dbv2-nav-chevron > * {
    font-size: var(--dbv2-icon-size-sm);
    width: var(--dbv2-icon-size-sm);
    height: var(--dbv2-icon-size-sm);
    line-height: 1;
}
.dbv2-nav-group-toggle:hover .dbv2-nav-chevron { opacity: 0.8; }

.dbv2-nav-group.expanded .dbv2-nav-chevron,
.dbv2-nav-group:hover > .dbv2-nav-group-toggle .dbv2-nav-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}

.dbv2-nav-children {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}

.dbv2-nav-group.expanded .dbv2-nav-children,
.dbv2-nav-group:hover > .dbv2-nav-children {
    grid-template-rows: 1fr;
}

.dbv2-nav-children-inner {
    overflow: hidden;
}

.dbv2-nav-child {
    height: 2.25rem;
    padding-left: var(--dbv2-space-3) !important;
    font-size: var(--dbv2-font-size-sm);
}

/* Nav subgroup (third-level nesting) */
.dbv2-nav-subgroup-toggle {
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
}
.dbv2-nav-subgroup-toggle:hover .dbv2-nav-chevron { opacity: 0.8; }

.dbv2-nav-subgroup .dbv2-nav-children--nested {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}

.dbv2-nav-subgroup.expanded .dbv2-nav-children--nested,
.dbv2-nav-subgroup:hover > .dbv2-nav-children--nested {
    grid-template-rows: 1fr;
}

.dbv2-nav-subgroup.expanded > .dbv2-nav-subgroup-toggle .dbv2-nav-chevron,
.dbv2-nav-subgroup:hover > .dbv2-nav-subgroup-toggle .dbv2-nav-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}

.dbv2-nav-grandchild {
    padding-left: calc(var(--dbv2-space-3) + 1.25rem + var(--dbv2-space-3) + var(--dbv2-space-4)) !important;
    font-size: var(--dbv2-font-size-xs);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sidebar-collapsed .dbv2-nav-children,
.sidebar-collapsed .dbv2-nav-chevron {
    display: none;
}

/* Sidebar footer (tenant badge) */
.dbv2-sidebar-footer {
    padding: var(--dbv2-space-3);
    border-top: 0.0625rem solid var(--dbv2-border);
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}
.sidebar-collapsed .dbv2-sidebar-footer { justify-content: center; }

.dbv2-tenant-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--dbv2-radius-full);
    background: var(--dbv2-primary);
    flex-shrink: 0;
}

.dbv2-sidebar-footer-text {
    font-size: var(--dbv2-font-size-overline);
    font-weight: var(--dbv2-font-weight-medium);
    color: var(--dbv2-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Main Content ───────────────────────────────────────────────────────── */

.dbv2-main {
    flex: 1;
    background: var(--dbv2-canvas);
    overflow: hidden auto;
    min-width: 0;
}

.dbv2-page {
    padding: var(--dbv2-space-6);
    max-width: 100%;
}

/* Full-height opt-in: individual pages can request this modifier so that
   children with height:100% resolve against the full viewport rather than
   auto-height content. Applied via PageLayoutService on routes that need it
   (e.g. the framing editor). Do NOT apply globally. */
.dbv2-page--full-height {
    height: 100%;
}


/* --------------------------------------------------------------------------
   5. PAGE ELEMENTS
   -------------------------------------------------------------------------- */

.dbv2-page-header {
    margin-bottom: var(--dbv2-space-6);
}

.dbv2-page-title {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    color: var(--dbv2-text-primary);
    margin: 0 0 var(--dbv2-space-1) 0;
    line-height: 1.4;
}

h1:focus {
    outline: none;
}

.dbv2-page-subtitle {
    font-size: var(--dbv2-font-size-base);
    color: var(--dbv2-text-secondary);
    margin: 0;
}


/* --------------------------------------------------------------------------
   6. ISLAND CARDS
   -------------------------------------------------------------------------- */

.dbv2-island {
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-lg);
    border: 1px solid var(--dbv2-border-light);
    box-shadow: var(--dbv2-shadow-sm);
    padding: var(--dbv2-space-6);
}

.dbv2-island-compact {
    background: var(--dbv2-surface);
    border-radius: var(--dbv2-radius-lg);
    border: 1px solid var(--dbv2-border-light);
    box-shadow: var(--dbv2-shadow-sm);
    padding: var(--dbv2-space-4);
}

/* Page content stack — uniform gap matching island-grid column gap */
.dbv2-page-content {
    display: grid;
    gap: var(--dbv2-island-gap);
}

/* Interactive variant */
.dbv2-island-interactive {
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

.dbv2-island-interactive:hover {
    box-shadow: var(--dbv2-shadow-md);
}

/* Island grid */
.dbv2-island-grid {
    display: grid;
    gap: var(--dbv2-island-gap);
}
.dbv2-island-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dbv2-island-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dbv2-island-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Island internal heading */
.dbv2-island-title {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-semibold);
    color: var(--dbv2-text-primary);
    margin: 0 0 var(--dbv2-space-4) 0;
}


/* --------------------------------------------------------------------------
   7. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */

.dbv2-text-page-title {
    font-size: var(--dbv2-font-size-lg);
    font-weight: var(--dbv2-font-weight-bold);
    line-height: 1.5;
}

.dbv2-text-section     {
    font-size: var(--dbv2-font-size-md);
    font-weight: var(--dbv2-font-weight-bold);
    line-height: 1.5;
}

.dbv2-text-body        {
    font-size: var(--dbv2-font-size-base);
    font-weight: var(--dbv2-font-weight-regular);
    line-height: 1.5;
}

.dbv2-text-small       {
    font-size: var(--dbv2-font-size-sm);
    font-weight: var(--dbv2-font-weight-regular);
    line-height: 1.5;
}

.dbv2-text-caption     {
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-regular);
    line-height: 1.5;
}

.dbv2-text-overline    {
    font-size: var(--dbv2-font-size-overline);
    font-weight: var(--dbv2-font-weight-medium);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dbv2-color-primary   { color: var(--dbv2-text-primary); }
.dbv2-color-secondary { color: var(--dbv2-text-secondary); }
.dbv2-color-tertiary  { color: var(--dbv2-text-tertiary); }
.dbv2-color-accent    { color: var(--dbv2-primary); }


/* --------------------------------------------------------------------------
   7b. CHIPS & BADGES — canonical inline-label primitive (Chip) plus its
   positioned-overlay sibling (Badge).

   Chip roles:
     KindChip   (--kind):     immutable category label (e.g. WorkflowType).
                              Uppercase overline, filled muted background. No
                              intent modifier.
     StatusChip (--status-*): lifecycle state. Semantic colour ramp drawn from
                              the same palette as toast variants.
   Badge:                     chip-shape positioned absolutely on top of an
                              image, card, or thumbnail. Host must be
                              position: relative.

   Modifier syntax: double-dash `--kind` / `--status-*` (standard BEM).

   See ADR-0021 and dbv2.Web.Client/UBIQUITOUS_LANGUAGE.md (Chips & Badges).
   -------------------------------------------------------------------------- */

.dbv2-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-1);
    font-family: inherit;
    font-size: var(--dbv2-font-size-xs);
    font-weight: var(--dbv2-font-weight-semibold);
    line-height: 1;

    /* Symmetric padding — vertical centring now comes from the font's
       ascent/descent-override (section 0), so no top/bottom nudge is needed. */
    padding: var(--dbv2-space-2) var(--dbv2-space-3);
    border-radius: var(--dbv2-radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
    color: var(--dbv2-text-secondary);
    background: var(--dbv2-muted);
}

/* KindChip — uppercase category label, no semantic intent. */
.dbv2-chip--kind {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dbv2-text-primary);
    background: var(--dbv2-muted);
}

/* StatusChip — semantic intent ramp (mirrors toast palette). */
.dbv2-chip--status-neutral {
    color: var(--dbv2-text-secondary);
    background: var(--dbv2-muted);
}

.dbv2-chip--status-subtle  {
    color: var(--dbv2-text-secondary);
    background: var(--dbv2-canvas);
    border-color: var(--dbv2-border);
}

.dbv2-chip--status-info    {
    color: var(--dbv2-info-dark);
    background: var(--dbv2-info-lighter);
}

.dbv2-chip--status-success {
    color: var(--dbv2-success-dark);
    background: var(--dbv2-success-lighter);
}

.dbv2-chip--status-warning {
    color: var(--dbv2-warning-dark);
    background: var(--dbv2-warning-lighter);
}

.dbv2-chip--status-error   {
    color: var(--dbv2-error-dark);
    background: var(--dbv2-error-lighter);
}

/* Badge — positioned overlay variant. Inherits chip shape, adds absolute
   positioning so it can sit on top of an image or card. */
.dbv2-badge {
    position: absolute;
    top: var(--dbv2-space-2);
    left: var(--dbv2-space-2);
    z-index: 1;
}


/* --------------------------------------------------------------------------
   7c. ICON UTILITIES — two sizes (16/32px) for inline vs. hero icons.

   sm (16px): inline icons, chip rows, button-adjacent.
   lg (32px): hero icons in upload zones, empty-state illustrations.
   -------------------------------------------------------------------------- */

.dbv2-icon--sm {
    font-size: var(--dbv2-icon-size-sm);
    width: var(--dbv2-icon-size-sm);
    height: var(--dbv2-icon-size-sm);
    line-height: 1;
}

.dbv2-icon--lg {
    font-size: var(--dbv2-icon-size-lg);
    width: var(--dbv2-icon-size-lg);
    height: var(--dbv2-icon-size-lg);
    line-height: 1;
}


/* --------------------------------------------------------------------------
   7c-bis. ICON-IN-TEXT — the one way to mix an icon into a line of text.

   This is NOT the standalone-icon case above (--sm/--lg, which size to a fixed
   rem grid). When a glyph LEADS a label — menu items, the nav, an inline prompt
   — it must read as the same visual weight as the text beside it, not as a
   chunky adornment that overpowers it. Material glyphs fill their full em box
   while letters fill only ~0.7em, so a bare <RadzenIcon> next to text always
   looks too big. The fix is a fixed 1em square box, centered, with the glyph
   pinned to 1em + line-height:1 inside it (exactly how .dbv2-nav-icon tames the
   left-nav glyphs). Use the <IconText> component, or these classes directly.
   The icon inherits `color` (currentColor), so the surrounding text's color
   carries the glyph too — no per-icon color needed. -------------------------- */

.dbv2-icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--dbv2-space-2);
}

.dbv2-icon-text__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.dbv2-icon-text__icon > * {
    /* inherit, not a token: the glyph tracks the surrounding text's size in EVERY context (the box is
       1em too), so the icon always reads at text size. !important beats Radzen's .rzi default. */
    font-size: inherit !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
}

.dbv2-icon-text__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   7d. UTILITIES
   Canonical action-row utility. Replaces all ad-hoc `*-actions` classes.
   Default justifies right; modifiers override.
   -------------------------------------------------------------------------- */

/* ── Action button rows ──────────────────────────────────────────────── */
.dbv2-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dbv2-space-3);
    justify-content: flex-end;
}
.dbv2-actions--start    { justify-content: flex-start; }
.dbv2-actions--between  { justify-content: space-between; }
.dbv2-actions--center   { justify-content: center; }

/* Vertical full-width stack — sidebar/panel button columns. */
.dbv2-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

.dbv2-actions--footer {
    padding-top: var(--dbv2-space-4);
    border-top: 0.0625rem solid var(--dbv2-border);
}


/* --------------------------------------------------------------------------
   8. SCROLLBAR
   -------------------------------------------------------------------------- */

.dbv2-main::-webkit-scrollbar,
.dbv2-nav::-webkit-scrollbar {
    width: 0.375rem;
}

.dbv2-main::-webkit-scrollbar-track,
.dbv2-nav::-webkit-scrollbar-track {
    background: transparent;
}

.dbv2-main::-webkit-scrollbar-thumb {
    background: var(--dbv2-border);
    border-radius: var(--dbv2-radius-full);
}

.dbv2-nav::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 8%);
    border-radius: var(--dbv2-radius-full);
}

.dbv2-main::-webkit-scrollbar-thumb:hover {
    background: var(--dbv2-text-tertiary);
}

.dbv2-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 15%);
}


/* --------------------------------------------------------------------------
   9. PROMPT HISTORY MODAL
   -------------------------------------------------------------------------- */

.prompt-history-modal {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--dbv2-space-3);
}

.history-row {
    border: 1px solid var(--dbv2-border-light);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-3);
}

.history-row-header {
    display: flex;
    align-items: center;
    gap: var(--dbv2-space-2);
    margin-bottom: var(--dbv2-space-2);
}

.history-timestamp {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.history-actor {
    font-size: var(--dbv2-font-size-xs);
    color: var(--dbv2-text-tertiary);
}

.history-text {
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    margin-bottom: var(--dbv2-space-2);
    line-height: 1.5;
}

.history-text-full {
    margin: 0;
    white-space: pre-wrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--dbv2-font-size-sm);
    color: var(--dbv2-text-secondary);
    background: var(--dbv2-canvas);
    border-radius: var(--dbv2-radius-sm);
    padding: var(--dbv2-space-2);
}

.history-row-actions {
    display: flex;
    gap: var(--dbv2-space-2);
    align-items: center;
}

.source-badge.source-other {
    color: var(--dbv2-warning);
    background: color-mix(in srgb, var(--dbv2-warning) 12%, transparent);
}