/* ========================================
   AntDesign Override CSS
   This file MUST load after ant-design-blazor.css
   Sidebar and menu shell rules: app.css "Shell (I-024)" + the matching section at the end of this file
   ======================================== */

/* ========================================
   Global Text + Icon Color Defaults — TASK_04 systemic fix.
   AntDesign's bundled CSS sets `body { color: rgba(0, 0, 0, 0.85) }` which
   leaks light-theme text into any element rendered outside an AntDesign
   component class chain. We override here (loads AFTER ant-design-blazor.css)
   so every text element on a dark surface inherits white/secondary by default.
   Component-specific rules later in this file remain authoritative.
   ======================================== */
body {
    /* I-021 AD5: the flat page ground (F --bg). AntD's body rule (background-color: #fff) loads after app.css, so the
       colour is set here; app.css paints the same token as --gradient-bg. */
    background-color: var(--color-bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    /* I-021 AD7: 14px / 1.5. AntD's own body rule (line-height 1.5715, font-variant: tabular-nums) loads before this one. */
    font-size: var(--type-body);
    line-height: var(--type-body-line);
}

/* F .btn / .btn--sm side padding (I-033 TASK_07 fidelity, f.src.html 271, 280): 12px (small 10px, at 13px) instead of
   AntD's 15 / 7px. Placed first and kept at AntD's own specificity (`:where()`), so it only replaces AntD's defaults —
   every later rule here, and every app.css / scoped rule that already beat AntD, still wins. Icon-only and circle
   buttons keep AntD's zero side padding, and large buttons keep AntD's 15px (`.ant-btn-lg` has this rule's weight and
   loads earlier, so it is excluded here — PR 789 #12650); heights stay the control-density tokens below. */
.ant-btn:where(:not(.ant-btn-icon-only):not(.ant-btn-circle):not(.ant-btn-lg)) {
    padding-inline: 12px;
}

.ant-btn-sm:where(:not(.ant-btn-icon-only):not(.ant-btn-circle)) {
    padding-inline: 10px;
    font-size: 13px;
}

/* B-051 AD1: AntD's link colours (#1890ff / #40a9ff / #096dd9, plain and inside Typography) load after app.css, so
   the brand link colours live here. Equal specificity, later sheet wins — no !important. Links rest on --color-primary-fg
   (--color-primary in dark, F --primary-text in light, where #ed7200 is only 3.0:1 on white — I-023 TASK_04) and
   hover / press to --color-link-hover, which differs from the rest colour in both themes. */
a,
a.ant-typography,
.ant-typography a {
    color: var(--color-primary-fg);
}

/* Loading last, the bare a:hover / a:active (0,1,1) also beat AntD's later equal-specificity anchor colours that have no
   :hover / :active counterpart of their own — a[disabled] and .ant-radio-button-wrapper a (.ant-tabs-tab-disabled a is
   pointer-events: none) — so those are excluded inside :where() (zero specificity: the rule stays (0,1,1) and still
   beats AntD's own a:hover).
   B-054 run 14, measured: do NOT add `[class]` to this guard. AntD's own `a:hover { color: #40a9ff }` is also (0,1,1)
   and beats any single-class anchor colour (0,1,0), so excluding classed anchors does not hand them their own colour —
   it hands them AntD blue (a.status-indicator and the pagination jump link on /design-system went from the brand light
   colour to rgb(64, 169, 255)). A class that needs its own hover colour sets it with a `.cls:hover` rule ((0,2,0) beats
   both); CssFoundation_ClassedAnchor_ShouldNotFallBackToAntdBlueOnHover pins that. */
a:hover:where(:not([disabled], .ant-radio-button-wrapper a)),
a:active:where(:not([disabled], .ant-radio-button-wrapper a)),
a.ant-typography:hover,
.ant-typography a:hover,
a.ant-typography:focus-visible,
.ant-typography a:focus-visible,
a.ant-typography:active,
.ant-typography a:active {
    color: var(--color-link-hover);
}

.anticon,
.material-icons {
    color: currentColor;
}

/* ========================================
   Dropdown Overrides (Select panel + items)
   ======================================== */

/* Dropdown panel — matches .ant-dropdown-menu recipe (showcase "Dropdown Menu"
   section) so Select panels and menu panels share the same chrome. */
.ant-select-dropdown {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-popup) !important;
    padding: 4px !important;
}

/* Dropdown items */
.ant-select-item {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

/* F .mi:hover (I-033 TASK_01): the pointer / keyboard row is --panel-3 in --text; only the selected option is orange */
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: var(--color-panel-3) !important;
    color: var(--text-primary) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: rgba(var(--color-primary-rgb), 0.18) !important;
    color: var(--color-primary-text) !important;
    font-weight: 500;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
    color: var(--color-primary-text) !important;
}

/* Clear button */
.ant-select-clear {
    background: transparent !important;
    color: var(--text-muted) !important;
}

.ant-select-clear:hover {
    color: var(--text-secondary) !important;
}

/* Hide clear when empty, hide arrow when value selected */
.ant-select:not(:has(.ant-select-selection-item)) .ant-select-clear {
    display: none !important;
}

.ant-select:has(.ant-select-selection-item) .ant-select-arrow {
    display: none !important;
}

/* ========================================
   Calendar (full-page <Calendar>) - Dark Theme
   ======================================== */

/* Default AntD Calendar bg is solid white. Inherit the parent glass-card surface. */
.ant-picker-calendar,
.ant-picker-calendar-full,
.ant-picker-calendar .ant-picker-panel {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.ant-picker-calendar-header {
    border-bottom: 1px solid var(--glass-border) !important;
}

/* Year/Month switch — AntD renders this as an internal RadioGroup. We can't swap
   the component without overriding the whole HeaderRender, so we restyle the
   wrapper + buttons to be visually identical to .ant-segmented (matching every
   other variant switcher in the project). */
.ant-picker-calendar-mode-switch {
    /* the .ant-segmented track — an inset on the card, not the card surface (I-021 #11438) */
    background: var(--glass-bg-light) !important;
    border-radius: var(--radius-md) !important;
    padding: 2px !important;
    display: inline-flex !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base) !important;
    box-shadow: none !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper::before {
    display: none !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper:hover {
    color: var(--text-primary) !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper-checked {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3) !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper-checked:hover {
    color: var(--text-on-primary) !important;
}

/* Year/Month select dropdowns in the header */
.ant-picker-calendar-header .ant-select-selector {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

/* Day-of-week column headers */
.ant-picker-calendar thead th,
.ant-picker-calendar .ant-picker-content thead th {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* Cell separators */
.ant-picker-calendar-full .ant-picker-cell {
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-picker-calendar-date,
.ant-picker-calendar-date-today {
    border-top-color: var(--glass-border) !important;
    background: transparent !important;
}

.ant-picker-calendar-date:hover {
    background: var(--glass-bg-subtle) !important;
}

.ant-picker-calendar-date-value {
    color: var(--text-primary) !important;
}

/* B-009: the full calendar's selected day is a calm tint, not a solid block. !important
   beats the transparent .ant-picker-calendar-date rule above. */
.ant-picker-calendar-full .ant-picker-cell-selected .ant-picker-calendar-date {
    background: rgba(var(--color-primary-rgb), 0.12) !important;
}

.ant-picker-calendar-full .ant-picker-cell-selected .ant-picker-calendar-date-value {
    color: var(--color-primary-fg) !important;
}

/* Out-of-month cells — muted */
.ant-picker-cell:not(.ant-picker-cell-in-view) .ant-picker-calendar-date-value {
    color: var(--text-muted) !important;
}

/* ========================================
   DatePicker Dropdown (Calendar Panel) - Dark Theme
   ======================================== */

.ant-picker-dropdown {
    background: transparent !important;
}

.ant-picker-panel-container {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-popup) !important;
    overflow: hidden;
}

.ant-picker-panel {
    background: transparent !important;
    border: none !important;
}

.ant-picker-header {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-picker-header button {
    color: var(--text-muted) !important;
}

.ant-picker-header button:hover {
    color: var(--color-primary-fg) !important;
}

.ant-picker-content th {
    color: var(--text-muted) !important;
}

.ant-picker-cell {
    color: var(--text-disabled) !important;
}

.ant-picker-cell-in-view {
    color: var(--text-secondary) !important;
}

.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner {
    background: var(--glass-bg-light) !important;
}

.ant-picker-cell-today .ant-picker-cell-inner::before {
    border-color: var(--color-primary) !important;
}

/* B-009: solid primary only in the DatePicker dropdown and the mini calendar — the
   full-page <Calendar> gets a calm tint instead (Calendar block above). */
.ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner,
.ant-picker-calendar-mini .ant-picker-cell-selected .ant-picker-cell-inner {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
}

/* ----- RangePicker cell states — brand tint instead of AntD default blue ----- */

/* Confirmed range endpoints (start / end / single-confirmed) */
.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-range-end .ant-picker-cell-inner,
.ant-picker-cell-range-start-single .ant-picker-cell-inner,
.ant-picker-cell-range-end-single .ant-picker-cell-inner {
    background: var(--color-primary) !important;
    color: var(--text-on-primary) !important;
}

/* Connected fill spanning between confirmed start and end cells */
.ant-picker-cell-in-range::before,
.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* Hover preview fill (after start is picked, before end is committed) */
.ant-picker-cell-range-hover::before,
.ant-picker-cell-range-hover-start::before,
.ant-picker-cell-range-hover-end::before {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
}

/* Dashed edge markers on the hover-preview endpoints */
.ant-picker-cell-range-hover::after,
.ant-picker-cell-range-hover-start::after,
.ant-picker-cell-range-hover-end::after,
.ant-picker-cell-range-hover-edge-start::after,
.ant-picker-cell-range-hover-edge-end::after {
    border-color: var(--color-primary) !important;
}

/* Hovering a confirmed endpoint while picking the second — keep brand tint */
.ant-picker-cell-range-start.ant-picker-cell-range-hover-end::before,
.ant-picker-cell-range-end.ant-picker-cell-range-hover-start::before {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
}

.ant-picker-footer {
    border-top: 1px solid var(--glass-border) !important;
}

.ant-picker-today-btn {
    color: var(--color-primary-fg) !important;
}

/* Rests on --color-primary-fg, so hover is --color-link-hover: --color-primary-text equals the rest colour in light
   (I-023 #11575, tests/scripts/hover-feedback.test.js) */
.ant-picker-today-btn:hover {
    color: var(--color-link-hover) !important;
}

/* ========================================
   Message/Notification Overrides
   ======================================== */

/* F toast (I-033 TASK_01, f.src.html --sp-toast-*): --color-toast-bg with a --line-2 edge and a 10px radius */
.ant-message-notice-content {
    background: var(--color-toast-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-popup) !important;
}

.ant-message-success .anticon {
    color: var(--color-success) !important;
}

.ant-message-error .anticon {
    color: var(--color-error) !important;
}

.ant-message-warning .anticon {
    color: var(--color-warning) !important;
}

.ant-message-info .anticon {
    color: var(--color-info) !important;
}

.ant-message-notice-content .ant-message-custom-content span:last-child {
    color: var(--text-primary) !important;
}

/* ========================================
   Notification Overrides - Dark Theme
   ======================================== */

.ant-notification-notice {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-popup) !important;
    padding: 16px 20px !important;
}

.ant-notification-notice-message {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.ant-notification-notice-description {
    color: var(--text-secondary) !important;
}

.ant-notification-notice-icon-success {
    color: var(--color-success) !important;
}

.ant-notification-notice-icon-error {
    color: var(--color-error) !important;
}

.ant-notification-notice-icon-warning {
    color: var(--color-warning) !important;
}

.ant-notification-notice-icon-info {
    color: var(--color-info) !important;
}

.ant-notification-notice-close {
    color: var(--text-muted) !important;
}

.ant-notification-notice-close:hover {
    color: var(--text-primary) !important;
}

/* ========================================
   Table Overrides - Dark Theme
   ======================================== */

.ant-table {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.ant-table-container,
.ant-table-content,
.ant-table table {
    background: transparent !important;
}

.ant-table-thead > tr > th {
    background: var(--glass-bg-subtle) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-table-tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border-faint) !important;
    color: var(--text-secondary) !important;
}

.ant-table-tbody > tr {
    background: transparent !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr:hover > td {
    background: var(--color-row-hover) !important;
}

/* ========================================
   Card Overrides - Dark Theme
   ======================================== */

.ant-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.ant-card-body {
    background: transparent !important;
}

.ant-card-head {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.ant-card-head-title {
    color: var(--text-primary) !important;
}

/* ========================================
   Empty State Overrides
   ======================================== */

.ant-empty-description {
    color: var(--text-muted) !important;
}

.ant-empty-image svg {
    fill: var(--text-disabled) !important;
}

/* ========================================
   Spin/Loading Overrides
   ======================================== */

.ant-spin-text {
    color: var(--text-secondary) !important;
}

/* F .face__ic spinner (I-033 TASK_01): loading is neutral — orange only means "mine" */
.ant-spin {
    color: var(--text-muted);
}

.ant-spin-dot-item {
    background-color: var(--text-muted) !important;
}

/* ========================================
   Alert Overrides — prototype F .alert (I-033 TASK_01, f.src.html 325-327, 646-651, 910-911)
   A 10px panel, 11px 14px, 13.5px --text on the tone's ground with the tone at 40-45% as its edge; the icon carries the
   tone, a titled alert's title is 600 and its description --text-2. Error and success grounds are F's tone at 9% over
   --panel; info and warning read their -bg tokens.
   ======================================== */

.ant-alert {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 13.5px;
    color: var(--text-primary);
}

.ant-alert-message {
    color: var(--text-primary) !important;
}

.ant-alert-with-description .ant-alert-message {
    font-weight: 600;
}

.ant-alert-description {
    color: var(--text-secondary) !important;
}

.ant-alert-with-description .ant-alert-icon {
    font-size: 18px;
}

.ant-alert-info {
    background: var(--color-info-bg) !important;
    border-color: color-mix(in srgb, var(--color-info) 40%, transparent) !important;
}

.ant-alert-info .ant-alert-icon {
    color: var(--color-info) !important;
}

.ant-alert-success {
    background: color-mix(in srgb, var(--color-success) 9%, var(--glass-bg)) !important;
    border-color: color-mix(in srgb, var(--color-success) 45%, transparent) !important;
}

.ant-alert-success .ant-alert-icon {
    color: var(--color-success) !important;
}

.ant-alert-warning {
    background: var(--color-warning-bg) !important;
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent) !important;
}

.ant-alert-warning .ant-alert-icon {
    color: var(--color-warning) !important;
}

.ant-alert-error {
    background: color-mix(in srgb, var(--color-error) 9%, var(--glass-bg)) !important;
    border-color: color-mix(in srgb, var(--color-error) 45%, transparent) !important;
}

.ant-alert-error .ant-alert-icon {
    color: var(--color-error) !important;
}

/* ========================================
   Tag Overrides — prototype F .tag (I-033 TASK_01, f.src.html 202-208, 857-859)
   ======================================== */

/* F .tag: 22px, 7px sides, a 6px radius, a --line-2 edge on --panel-2, --text-2 in 500 11.5px mono. The size and face are
   not !important (AntD's .ant-tag is the same weight and loads first), so a page's own two-class tag rule still wins. */
.ant-tag {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    padding: 0 7px;
    font: 500 11.5px/20px var(--font-mono);
}

.ant-tag-close-icon,
.ant-tag .anticon-close {
    color: var(--text-muted) !important;
}

/* Semantic tag colours (B-001). They must follow the base .ant-tag rule above: every tag rule is
   single-class with !important, so the later rule wins. Every tag colour rule, semantic and named,
   lives in this Tag Overrides section — app.css has none.
   F's tones (program § 2 "Brand"): green / success = opportunity (F .tag--opp), red / error = threat (F .tag--threat),
   blue / processing = info (F .tag--info), gold / orange / warning = amber (F .tag--warn) — orange is never a tag tone.
   F draws each edge as color-mix(tone 40-45%, transparent). */
.ant-tag-success,
.ant-tag-green {
    background: var(--color-success-bg) !important;
    border-color: color-mix(in srgb, var(--rate-opportunity-text) 40%, transparent) !important;
    color: var(--rate-opportunity-text) !important;
}

.ant-tag-error,
.ant-tag-red {
    background: var(--rate-threat-bg-1) !important;
    border-color: color-mix(in srgb, var(--rate-threat-text) 40%, transparent) !important;
    color: var(--rate-threat-text) !important;
}

.ant-tag-warning,
.ant-tag-gold,
.ant-tag-orange {
    background: var(--color-warning-bg) !important;
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent) !important;
    color: var(--color-warning) !important;
}

.ant-tag-processing,
.ant-tag-blue {
    background: var(--color-info-bg) !important;
    border-color: color-mix(in srgb, var(--color-info) 40%, transparent) !important;
    color: var(--color-info) !important;
}

.ant-tag-default {
    /* F .tag: --panel-2 on the --panel card, so the tag reads on a card (I-021 #11438) */
    background: var(--glass-bg-light) !important;
    border-color: var(--glass-border-light) !important;
    color: var(--text-secondary) !important;
}

.ant-tag-cyan {
    background: rgba(var(--color-tag-cyan-rgb), 0.15) !important;
    border-color: rgba(var(--color-tag-cyan-rgb), 0.25) !important;
    color: var(--color-tag-cyan) !important;
}

.ant-tag-purple {
    background: rgba(var(--color-accent-purple-rgb), 0.15) !important;
    border-color: rgba(var(--color-accent-purple-rgb), 0.25) !important;
    color: var(--color-accent-purple-light) !important;
}

.ant-tag-magenta,
.ant-tag-pink {
    background: rgba(var(--color-tag-pink-rgb), 0.15) !important;
    border-color: rgba(var(--color-tag-pink-rgb), 0.25) !important;
    color: var(--color-tag-pink) !important;
}

.ant-tag-lime {
    background: rgba(var(--color-tag-lime-rgb), 0.15) !important;
    border-color: rgba(var(--color-tag-lime-rgb), 0.25) !important;
    color: var(--color-tag-lime) !important;
}

.ant-tag-volcano {
    background: rgba(var(--color-tag-volcano-rgb), 0.15) !important;
    border-color: rgba(var(--color-tag-volcano-rgb), 0.25) !important;
    color: var(--color-tag-volcano) !important;
}

.ant-tag-geekblue {
    background: rgba(var(--color-tag-geekblue-rgb), 0.15) !important;
    border-color: rgba(var(--color-tag-geekblue-rgb), 0.25) !important;
    color: var(--color-tag-geekblue) !important;
}

/* ========================================
   Steps Overrides — prototype F .steps (I-033 TASK_01, f.src.html 745-756)
   F's 26px badge everywhere (I-037 D-s): a plain <Steps> draws the wizard's .ob-steps badge size (I-032, app.css, which
   outranks these rules and keeps its own layout). Only the current step is orange (the selection); a done step is
   neutral — F .step.is-done.
   ======================================== */

/* Steps container */
.ant-steps {
    color: var(--text-secondary) !important;
}

/* Step titles: F .step 500 13.5px, on the 26px badge's line (AntD's 32px goes with its badge) */
.ant-steps-item-title {
    color: var(--text-secondary) !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 26px;
}

.ant-steps-item-description {
    color: var(--text-muted) !important;
}

/* The step badge: F .step__b — a 26 × 26 circle (AntD's 32px goes); the 1px ring leaves a 24px line for the number */
.ant-steps-item-icon {
    width: 26px;
    height: 26px;
    line-height: 24px;
    border-radius: 50%;
}

/* The step badge number: F .step__b 600 12px mono; the done check is the same 12px glyph */
.ant-steps-item-icon .ant-steps-icon {
    font: 600 12px var(--font-mono);
}

.ant-steps-item-icon .anticon {
    font-size: 12px;
}

/* The rail sits on the 26px badge's centre line (AntD's is at 16px) */
.ant-steps-item-title::after {
    top: 13px;
}

/* Waiting steps: F .step__b — --panel ground, --line-2 ring, --text-2 number, --muted title */
.ant-steps-item-wait .ant-steps-item-icon {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-light) !important;
}

.ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon {
    color: var(--text-secondary) !important;
}

.ant-steps-item-wait .ant-steps-item-title {
    color: var(--text-muted) !important;
}

/* Current step: F .step[aria-current] — the one orange badge, ink number, --text title in 600 */
.ant-steps-item-process .ant-steps-item-icon {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
    color: var(--text-on-primary) !important;
}

.ant-steps-item-process .ant-steps-item-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.ant-steps-item-process .ant-steps-item-description {
    color: var(--text-secondary) !important;
}

/* Done steps: F .step.is-done — --panel-3 ground, --line-2 ring, a --text check, --text-2 title; never orange */
.ant-steps-item-finish .ant-steps-item-icon {
    background: var(--color-panel-3) !important;
    border-color: var(--glass-border-light) !important;
}

.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
    color: var(--text-primary) !important;
}

.ant-steps-item-finish .ant-steps-item-title {
    color: var(--text-secondary) !important;
}

/* Rails between steps: F .steps__rail — 1px --line-2, --text-2 once the step is done */
.ant-steps-item-tail::after,
.ant-steps-item-title::after {
    background: var(--glass-border-light) !important;
}

.ant-steps-item-finish .ant-steps-item-tail::after,
.ant-steps-item-finish .ant-steps-item-title::after {
    background: var(--text-secondary) !important;
}

/* ========================================
   Primary Button Overrides - Orange Theme
   ======================================== */

/* Primary button - F .btn--primary (I-021 AD5, program § 2 Brand): solid --color-primary, ink text, no gradient,
   no glow, no lift */
.ant-btn-primary,
button.ant-btn-primary,
.ant-btn.ant-btn-primary {
    background: var(--color-primary) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-on-primary) !important;
    transition: all 150ms ease !important;
    /* Ink on orange reads lighter than white on dark; 600 keeps the label crisp. */
    font-weight: 600;
}

/* B-009: a disabled primary never lights up on hover/focus - the disabled rule below owns it.
   B-028 (1349): the guard also excludes [disabled] (the disabled rule matches it: <a disabled>, fieldset).
   :where() keeps the guard at zero specificity so contextual (danger) hovers still win. */
.ant-btn-primary:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-btn-primary:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
button.ant-btn-primary:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
button.ant-btn-primary:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-btn.ant-btn-primary:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-btn.ant-btn-primary:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-primary-hover) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-on-primary) !important;
}

.ant-btn-primary:active:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
button.ant-btn-primary:active:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-btn.ant-btn-primary:active:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-primary) !important;
    box-shadow: none !important;
}

/* B-051 AD4 (b): keyboard focus adds the brand focus ring (.impeccable.md). Same weights as the hover/active copies
   above ((0,3,0) for the .ant-btn form), placed after both so a keyboard press keeps the ring. */
.ant-btn-primary:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
button.ant-btn-primary:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-btn.ant-btn-primary:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

/* Disabled primary button */
/* B-028 (1349): :disabled listed too, so the disabled look and the hover guard agree.
   F .btn[disabled] (f.src.html 281): the ground and the ink stay, the button drops to half opacity (I-030 TASK_08
   fidelity — the 30% tint with muted text measured off F on every overlay's disabled primary) */
.ant-btn-primary[disabled],
.ant-btn-primary:disabled,
.ant-btn-primary.ant-btn-disabled,
button.ant-btn-primary[disabled],
button.ant-btn-primary:disabled,
button.ant-btn-primary.ant-btn-disabled {
    background: var(--color-primary) !important;
    box-shadow: none !important;
    color: var(--text-on-primary) !important;
    cursor: not-allowed !important;
    opacity: 0.5;
    transform: none !important;
}

/* Loading state */
.ant-btn-primary.ant-btn-loading,
button.ant-btn-primary.ant-btn-loading {
    opacity: 0.8;
}

/* Dropdown trigger button styling */
.ant-btn-primary .anticon,
button.ant-btn-primary .anticon {
    color: var(--text-on-primary) !important;
}

/* ========================================
   Dropdown Menu Overrides - Dark Theme
   ======================================== */

/* F .ddmenu + .mi (I-033 TASK_01, f.src.html 215-217, 681): a --panel menu with a --line-2 edge, 12px radius and 6px
   inset; items --text 13.5px, 7px 10px, 8px radius, a --panel-3 hover with the icon in --muted. Only the selected item
   (the current selection) keeps the orange tint. */
.ant-dropdown-menu {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-popup) !important;
    padding: 6px !important;
}

.ant-dropdown-menu-item {
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    padding: 7px 10px !important;
    font-size: 13.5px;
    transition: all 150ms ease !important;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-item-active {
    background: var(--color-panel-3) !important;
    color: var(--text-primary) !important;
}

.ant-dropdown-menu-item-selected {
    background: rgba(var(--color-primary-rgb), 0.18) !important;
    color: var(--color-primary-text) !important;
}

.ant-dropdown-menu-item-selected:hover {
    background: rgba(var(--color-primary-rgb), 0.24) !important;
    color: var(--color-primary-text) !important;
}

.ant-dropdown-menu-item .anticon,
.ant-dropdown-menu-item:hover .anticon,
.ant-dropdown-menu-item-active .anticon {
    color: var(--text-muted) !important;
}

.ant-dropdown-menu-item-selected .anticon {
    color: var(--color-primary-text) !important;
}

.ant-dropdown-menu-item-divider {
    background: var(--glass-bg-hover) !important;
}

/* ========================================
   ImageCard Overrides - Dark Theme
   ======================================== */

/* Image filename - white text */
.image-card .filename {
    color: var(--text-primary) !important;
}

/* More platforms badge (+2) - dark theme */
.image-card .more-platforms {
    color: var(--text-primary) !important;
    background-color: var(--glass-bg-hover) !important;
}

/* Download button - dark glass with orange hover */
.image-card .download-btn,
.image-card .download-btn.ant-btn {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
}

.image-card .download-btn:hover,
.image-card .download-btn.ant-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.2) !important;
    border-color: rgba(var(--color-primary-rgb), 0.4) !important;
    color: var(--color-primary-fg) !important;
}

.image-card .download-btn .anticon,
.image-card .download-btn.ant-btn .anticon {
    color: inherit !important;
}

/* Image thumbnail background - dark */
.image-card .image-thumbnail {
    background-color: var(--glass-bg) !important;
}

/* Image placeholder icon - muted */
.image-card .image-placeholder {
    color: var(--text-disabled) !important;
}

/* Compliance icon background - dark */
.image-card .compliance-icon {
    background: var(--color-bg-dark-secondary) !important;
}

/* ========================================
   Subscription Tag Overrides
   ======================================== */

/* Base subscription-tag — pill shape, neutral muted glass. Tier variants override
   background + border + color; expiring-* variants add animation on top. */
.subscription-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    background: var(--glass-bg-subtle);
    color: var(--text-secondary);
}

.subscription-tag.tier-free {
    background: var(--glass-bg-subtle);
    color: var(--text-muted);
    border-color: var(--glass-border);
}

.subscription-tag.tier-starter {
    background: var(--color-tier-starter-bg);
    color: var(--color-tier-starter);
    border-color: rgba(var(--color-tier-starter-rgb), 0.3);
}

.subscription-tag.tier-pro {
    background: var(--color-tier-pro-bg);
    color: var(--color-tier-pro);
    border-color: rgba(var(--color-tier-pro-rgb), 0.3);
}

.subscription-tag.tier-enterprise {
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary-text);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

/* tier-max — gradient gold + glow (digidok-grade flagship polish). Hex values
   here are intentional — gold doesn't map to any brand-orange or semantic token. */
.subscription-tag.tier-max,
.ant-tag.subscription-tag.tier-max {
    background: var(--gradient-gold) !important;
    color: var(--color-bg-dark-tertiary) !important;
    border-color: var(--color-gold-line) !important;
    box-shadow: var(--shadow-gold);
    font-weight: 700;
}

/* Expiring status indicators — apply on top of any tier variant. */
.subscription-tag.expiring-warning {
    border-color: var(--color-warning) !important;
    color: var(--color-warning-light) !important;
}

@keyframes expiring-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-error-rgb), 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--color-error-rgb), 0); }
}

.subscription-tag.expiring-critical {
    border-color: var(--color-error) !important;
    color: var(--color-error-light) !important;
    animation: expiring-pulse 1.5s ease-in-out infinite;
}

/* ========================================
   Dashboard Plan Value Styling
   ======================================== */

/* Free plan - default muted styling */
.stat-value.plan-free {
    color: var(--text-muted) !important;
}

/* Pro plan - blue */
.stat-value.plan-pro {
    color: var(--color-tier-starter) !important;
}

/* Plus plan - purple */
.stat-value.plan-plus {
    color: var(--color-tier-pro) !important;
}

/* Max plan - orange gradient with glow effect */
.stat-value.plan-max {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* The glow is dark-only: --glow-text is none in light (I-023 TASK_04). */
    text-shadow: var(--glow-text);
}

/* ========================================
   Upgrade Page Button Overrides
   ======================================== */

/* Plan card body - flex layout to push button to bottom */
.plan-card .ant-card-body,
.plan-card.ant-card .ant-card-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* All plan card buttons - pill shape, pushed to bottom */
.plan-card .ant-btn,
.plan-card.ant-card .ant-btn {
    height: 48px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-xl) !important;
    font-size: 0.9375rem !important;
    transition: all 200ms ease !important;
    margin-top: auto !important;
}

/* Default button (Free plan) */
.plan-card .ant-btn-default,
.plan-card.ant-card .ant-btn-default {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.plan-card .ant-btn-default:hover:not(:disabled),
.plan-card.ant-card .ant-btn-default:hover:not(:disabled) {
    background: var(--glass-bg-hover) !important;
    border-color: var(--glass-border-strong) !important;
    color: var(--text-primary) !important;
}

/* Disabled "Current Plan" button - green indicator style */
.plan-card .ant-btn-default[disabled],
.plan-card .ant-btn-default.ant-btn-disabled,
.plan-card.ant-card .ant-btn-default[disabled],
.plan-card.ant-card .ant-btn-default.ant-btn-disabled {
    background: rgba(var(--color-success-rgb), 0.1) !important;
    border: 1px solid rgba(var(--color-success-rgb), 0.25) !important;
    color: var(--color-success) !important;
    opacity: 1 !important;
    cursor: default !important;
}

/* Primary button (Subscribe) */
.plan-card .ant-btn-primary,
.plan-card.ant-card .ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.plan-card .ant-btn-primary:hover:not(:disabled),
.plan-card.ant-card .ant-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover) !important;
}

/* ========================================
   Billing Toggle - Save Badge
   ======================================== */

/* Save percentage badge - make it stand out */
.billing-toggle .ant-tag {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: var(--text-on-primary) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.4) !important;
    animation: pulse-glow 2s ease-in-out infinite !important;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.4);
    }
    50% {
        box-shadow: 0 2px 16px rgba(var(--color-primary-rgb), 0.6), 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    }
}

/* ========================================
   Checkbox Overrides - Orange Theme
   ======================================== */

/* Checkbox inner box - dark glass background */
.ant-checkbox .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-strong) !important;
    border-radius: var(--radius-xs) !important;
}

/* Checkbox hover state */
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox .ant-checkbox-inner {
    border-color: var(--color-primary) !important;
}

/* Checkbox checked state - orange */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Checkbox checked hover - lighter orange */
.ant-checkbox-checked:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

/* Checkbox indeterminate state - orange */
.ant-checkbox-indeterminate .ant-checkbox-inner::after,
.ant-checkbox-wrapper .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: var(--color-primary) !important;
}

/* Checkbox focus ring - orange glow */
.ant-checkbox-input:focus + .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Checkbox label text color */
.ant-checkbox-wrapper {
    color: var(--text-primary) !important;
}

/* Checkbox wrapper hover */
.ant-checkbox-wrapper:hover {
    color: var(--text-primary) !important;
}

/* ========================================
   Radio Button Overrides - Orange Theme
   ======================================== */

/* Radio inner circle - dark glass background */
.ant-radio .ant-radio-inner,
.ant-radio-wrapper .ant-radio .ant-radio-inner {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border-strong) !important;
}

/* Radio hover state */
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio .ant-radio-inner {
    border-color: var(--color-primary) !important;
}

/* Radio checked state - orange */
.ant-radio-checked .ant-radio-inner,
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Radio checked inner dot */
.ant-radio-checked .ant-radio-inner::after,
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
    background-color: var(--text-primary) !important;
}

/* Radio checked hover - lighter orange */
.ant-radio-checked:hover .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio-checked .ant-radio-inner {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

/* Radio focus ring - orange glow */
.ant-radio-input:focus + .ant-radio-inner,
.ant-radio-wrapper .ant-radio-input:focus + .ant-radio-inner {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Radio label text color */
.ant-radio-wrapper {
    color: var(--text-primary) !important;
}

/* Radio wrapper hover */
.ant-radio-wrapper:hover {
    color: var(--text-primary) !important;
}

/* ========================================
   Adjustment Grid Item - Dark Theme
   ======================================== */

.adjustment-grid-item {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}

.adjustment-grid-item:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.15) !important;
}

.adjustment-grid-item.selected {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

.adjustment-grid-item .item-preview {
    background: var(--glass-bg-light) !important;
}

.adjustment-grid-item .adjustment-badge {
    background: var(--color-primary) !important;
}

.adjustment-grid-item .item-footer {
    border-top: 1px solid var(--glass-border) !important;
}

.adjustment-grid-item .item-name {
    color: var(--text-primary) !important;
}

.adjustment-grid-item .item-size {
    color: var(--text-muted) !important;
}

/* ===============================================
   Slider Overrides - Orange Theme
   =============================================== */

.ant-slider-rail {
    background: var(--glass-bg-hover) !important;
}

.ant-slider-track {
    background: var(--color-primary) !important;
}

.ant-slider-handle {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.ant-slider-handle:hover,
.ant-slider-handle:focus,
.ant-slider-handle-dragging {
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2) !important;
    border-color: var(--color-primary) !important;
}

.ant-slider:hover .ant-slider-track {
    background: var(--color-primary-light) !important;
}

.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
    border-color: var(--color-primary-light) !important;
}

/* ===============================================
   Modal/Drawer Overrides — prototype F (I-030 README D-h, D-i, D-j, D-l)
   F .modal / .nd / .mask / .iconbtn (f.src.html 182-185, 228, 513-529, 828-840). Every non-palette Modal and every
   Drawer gets F's surface here, in both themes (tokens only); the F anatomy a component opts into (.modal-f,
   .drawer-head, .drawer-foot, …) is app.css "Overlays (I-030)". The command palette's rules below are I-025's, untouched.
   =============================================== */

/* F .mask */
.ant-modal-mask {
    background: var(--color-mask) !important;
}

/* F .modal: --panel, 1px --line-2, --r, --shadow */
.ant-modal-content {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-popup) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* F .modal__head: 12px 12px 12px 20px, a bottom rule; the close is a 34px icon button in the head row */
.ant-modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 0 !important;
    padding: 12px 54px 12px 20px !important;
}

/* F .modal__title: 600 16px UI, on a 34px row (the close's height) */
.ant-modal-title {
    display: flex;
    align-items: center;
    min-height: 34px;
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
}

/* F .iconbtn */
.ant-modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    color: var(--text-secondary) !important;
}

.ant-modal-close-x {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 14px;
}

.ant-modal-close:hover {
    color: var(--text-primary) !important;
    background: var(--color-panel-3) !important;
}

.ant-modal-close:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* F .modal__body: 18px 20px 20px */
.ant-modal-body {
    padding: 18px 20px 20px !important;
    color: var(--text-secondary) !important;
}

.ant-modal-body p {
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.6;
}

/* B-009: AntD's dark heading colour is near-invisible on the dark modal. No !important and
   :where() keeps it at (0,0,1), so a heading class (.section-title-sm, …) still decides its own colour.
   B-028 (1342): the drawer body has the same problem, so it shares the rule. */
:where(.ant-modal-body, .ant-drawer-body) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary);
}

/* Command palette (I-025) — the AntD Modal is only the shell: WrapClassName="command-palette-wrap" drops its content box
   (padding, surface, border, radius, shadow, the overflow clip that would cut the panel's shadow) and its body padding,
   so app.css "Command palette (I-025)" .command-palette is the visible panel (F .pal). The search Input is borderless
   and transparent in every state (F .pal__in input); its row carries the 1px line. */
.command-palette-wrap .ant-modal-content {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

/* No Title: AntD 1.6 still renders an empty header row (20px 24px + a line), which would push the panel off 64px */
.command-palette-wrap .ant-modal-header {
    display: none;
}

.command-palette-wrap .ant-modal-body {
    padding: 0 !important;
    color: var(--text-primary) !important;
}

.command-palette__input .ant-input,
.command-palette__input .ant-input:hover:not(:disabled),
.command-palette__input .ant-input:focus,
.command-palette__input .ant-input-focused {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 400 15px var(--font-body);
    color: var(--text-primary) !important;
}

/* ModalService.ConfirmAsync (EntityFormDrawer discard, TeamSettings remove / leave, Settings unsaved changes): the same
   F panel; title 600 16px, content 13.5px --text-2, Cancel then the OK — solid danger when OkButtonProps.Danger */
.ant-modal-confirm .ant-modal-body {
    padding: 20px !important;
}

.ant-modal-confirm-body > .anticon {
    color: var(--color-warning) !important;
}

.ant-modal-confirm-body .ant-modal-confirm-title {
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}

.ant-modal-confirm-body .ant-modal-confirm-content {
    color: var(--text-secondary) !important;
    font-size: 13.5px;
    line-height: 1.5;
}

/* AntD 1.6's confirm renders OK before Cancel in the DOM and has no order option; F shows Cancel then OK, so the row is
   reversed visually. The keyboard follows the visual order: every confirm opens with AutoFocusButton = Cancel (AntD's
   default focuses OK) and entity-form-drawer.js appConfirmTabOrder walks Tab left to right (I-030 PR 769 #12322) */
.ant-modal-confirm-btns {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 8px;
    float: none !important;
    margin-top: 20px !important;
}

.ant-modal-confirm-btns .ant-btn + .ant-btn {
    margin-left: 0 !important;
}

/* F ≤ 640px (.modal, f.src.html 1282): a confirm is top-aligned with a 16px inset like the .modal-f modals (AntD's phone
   default is an 8px inset at top 100px) — I-030 TASK_08 390 walk */
@media (max-width: 640px) {
    .ant-modal.ant-modal-confirm {
        top: 16px;
        max-width: calc(100vw - 32px);
        margin: 0 auto;
        padding-bottom: 16px;
    }
}

/* F .modal__foot: 12px 20px, a top rule, the --panel-2 ground */
.ant-modal-footer {
    background: var(--glass-bg-light) !important;
    border-top: 1px solid var(--glass-border) !important;
    padding: 12px 20px !important;
}

.ant-modal-footer .ant-btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
}

.ant-modal-footer .ant-btn-default {
    /* a fill that differs from the footer's --panel-2 ground */
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-secondary) !important;
}

.ant-modal-footer .ant-btn-default:hover {
    background: var(--glass-bg-hover) !important;
    border-color: var(--glass-border-strong) !important;
    color: var(--text-primary) !important;
}

.ant-modal-footer .ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

/* B-008 (2606): :not([disabled]) so an attribute-disabled anchor button never lights up */
.ant-modal-footer .ant-btn-primary:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-primary-hover) !important;
}

.ant-modal-footer .ant-btn-dangerous:not(.ant-btn-primary) {
    background: var(--color-error-bg) !important;
    border: 1px solid var(--color-error) !important;
    color: var(--color-error-light) !important;
}

/* F .mask */
.ant-drawer-mask {
    background: var(--color-mask) !important;
}

/* F .nd: --panel with one 1px --line-2 edge toward the page and --shadow (I-021 TASK_10) */
.ant-drawer-content {
    background: var(--glass-bg) !important;
}

.ant-drawer-right .ant-drawer-content {
    border-left: 1px solid var(--glass-border-light);
}

.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
    box-shadow: var(--shadow-popup);
}

/* F .nd__head: 12px 20px 14px, a bottom rule. Room on the right for AntD's own X where a drawer still shows it. */
.ant-drawer-header {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    position: relative;
    padding: 12px 66px 14px 20px;
}

/* The F head carries its own close; :where() keeps this at (0,1,0) so app.css's phone rule (16px sides) still wins */
.ant-drawer-header:where(:has(.drawer-head)) {
    padding-right: 20px;
}

.ant-drawer-title {
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    min-height: 34px;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* AntD's own X (drawers not yet on the F head): F .iconbtn--line at the head's right. The F head's .drawer-close keeps
   .ant-drawer-close as a selector hook only, so it is excluded. */
.ant-drawer-close:not(.drawer-close) {
    position: absolute !important;
    top: 12px !important;
    right: 20px !important;
    display: inline-grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md);
    background: var(--glass-bg) !important;
    color: var(--text-secondary) !important;
    font-size: 14px;
}

.ant-drawer-close:not(.drawer-close):hover {
    color: var(--text-primary) !important;
    background: var(--color-panel-3) !important;
}

.ant-drawer-body {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.ant-drawer-body p {
    color: var(--text-secondary) !important;
}

/* EntityFormDrawer — full-bleed body so the F foot can sit sticky at the bottom */
.entity-drawer .ant-drawer-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ===============================================
   Image Adjustment Editor - Dark Theme
   =============================================== */

.image-adjustment-editor {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-popup) !important;
}

.image-adjustment-editor .editor-header {
    border-bottom: 1px solid var(--glass-border) !important;
}

.image-adjustment-editor .editor-title {
    color: var(--text-primary) !important;
}

.image-adjustment-editor .editor-header .ant-btn-text {
    color: var(--text-secondary) !important;
}

.image-adjustment-editor .editor-header .ant-btn-text:hover {
    color: var(--text-primary) !important;
    background: var(--glass-bg-hover) !important;
}

/* Platform tabs */
.image-adjustment-editor .platform-tabs .ant-tabs-nav::before {
    border-color: var(--glass-border) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab {
    color: var(--text-secondary) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab:hover {
    color: var(--color-primary-fg) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--color-primary-fg) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-ink-bar {
    background: var(--color-primary) !important;
}

/* Preview container */
.image-adjustment-editor .preview-container {
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}

.image-adjustment-editor .preview-wrapper {
    background-color: var(--glass-bg-light) !important;
}

/* Controls panel */
.image-adjustment-editor .controls-panel {
    background-color: var(--glass-bg-subtle) !important;
    border: 1px solid var(--glass-border-subtle) !important;
    border-radius: var(--radius-md) !important;
}

.image-adjustment-editor .controls-panel .ant-divider {
    border-color: var(--glass-border) !important;
}

/* Slider labels */
.image-adjustment-editor .slider-label,
.image-adjustment-editor .control-label {
    color: var(--text-primary) !important;
}

.image-adjustment-editor .slider-value {
    color: var(--color-primary-fg) !important;
}

/* Offset controls */
.image-adjustment-editor .offset-label {
    color: var(--text-muted) !important;
}

.image-adjustment-editor .offset-header .ant-btn {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.image-adjustment-editor .offset-header .ant-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-fg) !important;
}

/* InputNumber styling */
.image-adjustment-editor .ant-input-number {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.image-adjustment-editor .ant-input-number:hover,
.image-adjustment-editor .ant-input-number:focus,
.image-adjustment-editor .ant-input-number-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

.image-adjustment-editor .ant-input-number-input {
    color: var(--text-primary) !important;
}

.image-adjustment-editor .ant-input-number-handler-wrap {
    background: var(--glass-bg) !important;
    border-left: 1px solid var(--glass-border-light) !important;
}

.image-adjustment-editor .ant-input-number-handler {
    border-color: var(--glass-border) !important;
}

.image-adjustment-editor .ant-input-number-handler:hover {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
}

.image-adjustment-editor .ant-input-number-handler-up-inner,
.image-adjustment-editor .ant-input-number-handler-down-inner {
    color: var(--text-secondary) !important;
}

.image-adjustment-editor .ant-input-number-handler:hover .ant-input-number-handler-up-inner,
.image-adjustment-editor .ant-input-number-handler:hover .ant-input-number-handler-down-inner {
    color: var(--color-primary-fg) !important;
}

/* Control hint */
.image-adjustment-editor .control-hint {
    color: var(--text-secondary) !important;
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.2) !important;
    border-radius: var(--radius-sm) !important;
}

.image-adjustment-editor .control-hint .anticon {
    color: var(--color-primary-fg) !important;
}

/* Quick buttons */
.image-adjustment-editor .quick-buttons .ant-btn,
.image-adjustment-editor .scale-presets .ant-btn {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.image-adjustment-editor .quick-buttons .ant-btn:hover,
.image-adjustment-editor .scale-presets .ant-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-fg) !important;
}

/* Toolbar */
.image-adjustment-editor .adjustment-toolbar {
    background-color: var(--glass-bg-subtle) !important;
    border-top: 1px solid var(--glass-border) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-fg) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default:disabled {
    background: var(--glass-bg-subtle) !important;
    border-color: var(--glass-border-subtle) !important;
    color: var(--text-disabled) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover) !important;
}

/* Platform overlay - Orange crop guide */
.platform-overlay .margin-guide {
    border-color: rgba(var(--color-primary-rgb), 0.6) !important;
}

/* Platform label tag - Orange theme */
.platform-overlay .platform-label .ant-tag,
.platform-overlay .platform-label .ant-tag-blue {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-primary-text) !important;
    border-color: rgba(var(--color-primary-rgb), 0.25) !important;
}

/* ===============================================
   Progress Bar Overrides - Orange Theme
   =============================================== */

/* F .prog (I-033 TASK_01, f.src.html 771-775): a --panel-3 track with a 4px radius, the bar in the primary (my scan,
   my usage), the percentage --text in 600 12.5px mono. Team meters and the onboarding scan keep their .prog / .meters
   rules (I-032). */
.ant-progress-bg {
    background: var(--color-primary) !important;
    border-radius: var(--radius-xs) !important;
}

.ant-progress-inner {
    background: var(--color-panel-3) !important;
    border-radius: var(--radius-xs) !important;
}

.ant-progress-text {
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    font-size: 12.5px !important;
    font-weight: 600;
}

.ant-progress-success-bg {
    background: var(--color-success) !important;
}

/* Progress circle (if used) */
.ant-progress-circle-path {
    stroke: var(--color-primary) !important;
}

.ant-progress-circle-trail {
    stroke: var(--glass-border) !important;
}

/* ===============================================
   Result Component Overrides — Brand Color Map
   success=green  warning=amber  error=red  info=blue (status tokens; orange only means mine)
   =============================================== */

/* Success icon — semantic green */
.ant-result-success .ant-result-icon > .anticon {
    color: var(--color-success) !important;
}

.ant-result-success .ant-result-icon svg {
    fill: var(--color-success) !important;
}

/* Warning icon — semantic amber */
.ant-result-warning .ant-result-icon > .anticon {
    color: var(--color-warning) !important;
}

.ant-result-warning .ant-result-icon svg {
    fill: var(--color-warning) !important;
}

/* Error icon — semantic red */
.ant-result-error .ant-result-icon > .anticon {
    color: var(--color-error) !important;
}

.ant-result-error .ant-result-icon svg {
    fill: var(--color-error) !important;
}

/* Info icon — the info token (AD6) */
.ant-result-info .ant-result-icon > .anticon {
    color: var(--color-info) !important;
}

.ant-result-info .ant-result-icon svg {
    fill: var(--color-info) !important;
}

/* Result text colors for dark theme */
.ant-result-title {
    color: var(--text-primary) !important;
}

.ant-result-subtitle {
    color: var(--text-secondary) !important;
}

/* ===============================================
   BatchProgress Component - Dark Theme
   =============================================== */

.batch-progress {
    padding: 24px;
}

.batch-progress .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.batch-progress .progress-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin: 0 0 4px 0;
}

.batch-progress .progress-subtitle {
    font-size: 14px;
    color: var(--text-secondary) !important;
    margin: 0;
}

.batch-progress .progress-stats {
    display: flex;
    gap: 12px;
    font-size: 14px;
}

.batch-progress .stat-completed {
    color: var(--color-primary-fg) !important;
}

.batch-progress .stat-failed {
    color: var(--color-error-light) !important;
}

.batch-progress .stat-total {
    color: var(--text-secondary) !important;
}

/* Connection status badges - dark theme */
.batch-progress .connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.batch-progress .connection-status.connected {
    background-color: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-primary-text) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
}

.batch-progress .connection-status.connecting {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning-light) !important;
    border: 1px solid rgba(var(--color-warning-rgb), 0.25);
}

.batch-progress .connection-status.disconnected {
    background-color: var(--color-error-bg) !important;
    color: var(--color-error-light) !important;
    border: 1px solid rgba(var(--color-error-rgb), 0.25);
}

/* Image grid - dark theme */
.batch-progress .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.batch-progress .image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.batch-progress .image-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--glass-bg) !important;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.batch-progress .image-item.pending .image-preview {
    border-color: var(--glass-border-light) !important;
}

.batch-progress .image-item.processing .image-preview {
    border-color: var(--color-primary) !important;
}

.batch-progress .image-item.completed .image-preview {
    border-color: var(--color-primary) !important;
}

.batch-progress .image-item.failed .image-preview {
    border-color: var(--color-error-light) !important;
}

.batch-progress .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-progress .image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled) !important;
    font-size: 24px;
}

/* Status overlay - dark glass */
.batch-progress .status-overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--color-bg-elevated) !important;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.batch-progress .status-icon {
    font-size: 18px;
}

.batch-progress .status-icon.pending {
    color: var(--text-muted) !important;
}

.batch-progress .status-icon.completed {
    color: var(--color-primary-fg) !important;
}

.batch-progress .status-icon.failed {
    color: var(--color-error-light) !important;
}

/* Step text */
.batch-progress .image-info {
    text-align: center;
}

.batch-progress .step-text {
    font-size: 12px;
    color: var(--text-secondary) !important;
}

.batch-progress .step-text.success {
    color: var(--color-primary-fg) !important;
    font-weight: 500;
}

.batch-progress .step-text.error {
    color: var(--color-error-light) !important;
    font-weight: 500;
}

/* Processing step - ensure full width */
.step-processing > * {
    width: 100%;
}

/* Result component in processing step - full width */
.step-processing .ant-result {
    width: 100%;
    max-width: 100%;
    padding: 48px 24px;
}

/* ===============================================
   OTP Input - Hide placeholder (cleaner look)
   Target any input with letter-spacing in its inline style
   =============================================== */

.ant-input[style*="letter-spacing"]::placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]::-webkit-input-placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]::-moz-placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]:-ms-input-placeholder {
    color: transparent !important;
}

/* ===============================================
   Form Loading Overlay - Dark Theme
   =============================================== */

.ant-spin-nested-loading > div > .ant-spin {
    max-height: unset;
}

.ant-spin-blur {
    opacity: 0.5;
}

.ant-spin-blur::after {
    background: transparent !important;
}

.ant-spin-container::after {
    background: var(--color-scrim) !important;
}

/* ===============================================
   Layout Overflow Fix - Prevent body scrolling
   =============================================== */

/* Main content area - enable vertical scrolling inside content only */
.main-content.ant-layout-content,
.ant-layout-content.main-content,
main.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.main-content.ant-layout-content::-webkit-scrollbar,
.ant-layout-content.main-content::-webkit-scrollbar,
main.main-content::-webkit-scrollbar {
    display: none;
}

/* Content layout - fixed height, no overflow */
.content-layout.ant-layout,
.ant-layout.content-layout {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Ensure the header doesn't shrink (I-024: the in-app footer is gone) */
.main-header.ant-layout-header,
.ant-layout-header.main-header {
    flex-shrink: 0 !important;
}

/* ===============================================
   Help Popover Styling
   =============================================== */

.help-popover-overlay .ant-popover-inner {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px var(--glass-shadow);
}

.help-popover-overlay .ant-popover-arrow {
    display: none;
}

/* ===============================================
   Form Input Overrides - Glass Dark Theme
   Shared across all pages (auth, settings, tickets, etc.)
   =============================================== */

.ant-input {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

.ant-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input:hover:not(:disabled) {
    border-color: var(--text-muted) !important;
    background: var(--glass-bg) !important;
}

.ant-input:focus,
.ant-input-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
    background: var(--glass-bg) !important;
}

.ant-input:disabled {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-muted) !important;
    cursor: default;
    opacity: 0.8;
}

/* B-009: read-only is content, not a placeholder - secondary text, full opacity */
.ant-input[readonly]:not(:disabled) {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
    cursor: default;
}

.ant-input-lg {
    height: var(--control-h-lg) !important;
    font-size: 0.9375rem !important;
}

/* Input Affix Wrapper (e.g. password inputs with icons) */
.ant-input-affix-wrapper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 11px;
    transition: all var(--transition-base) !important;
}

.ant-input-affix-wrapper:hover {
    border-color: var(--text-muted) !important;
}

.ant-input-affix-wrapper-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

/* Input / InputNumber addon — F .addon__pre / .addon__suf (I-033 TASK_01, f.src.html 597-603): --panel-2 with the --line-2
   edge, muted 500 12.5px mono, 34px minimum; the corner on the outside edge only. The search box's addon holds its enter
   button and keeps the app.css rules, so it is excluded here (its button must not inherit the addon's face). */
.ant-input-group-wrapper:not(.ant-input-search) .ant-input-group-addon,
.ant-input-number-group-addon {
    min-width: 34px;
    padding: 0 9px;
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-muted) !important;
    font: 500 12.5px var(--font-mono);
}

.ant-input-group-wrapper:not(.ant-input-search) .ant-input-group-addon:first-child,
.ant-input-number-group-addon:first-child {
    border-right: 0 !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.ant-input-group-wrapper:not(.ant-input-search) .ant-input-group-addon:last-child,
.ant-input-number-group-addon:last-child {
    border-left: 0 !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* The field beside an addon squares its joined side (the global .ant-input radius is !important) */
.ant-input-group-wrapper:not(.ant-input-search) .ant-input-group > .ant-input:not(:last-child),
.ant-input-number-group > .ant-input-number:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ant-input-group-wrapper:not(.ant-input-search) .ant-input-group > .ant-input:not(:first-child),
.ant-input-number-group > .ant-input-number:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Prefix/suffix icons (search loupe, password eye, etc.) — match placeholder color */
.ant-input-affix-wrapper .ant-input-prefix .anticon,
.ant-input-affix-wrapper .ant-input-suffix .anticon {
    color: var(--text-muted) !important;
}

/* Inner .ant-input inside an affix wrapper is just the text node — the wrapper
   already draws the visible surface. Keep the inner element fully transparent
   so hover/focus don't paint a second layered background or focus ring on top
   of the wrapper. Fixes the "double overlay" effect on password/affix inputs. */
.ant-input-affix-wrapper > .ant-input,
.ant-input-affix-wrapper > .ant-input:hover:not(:disabled),
.ant-input-affix-wrapper > .ant-input:focus,
.ant-input-affix-wrapper > .ant-input-focused {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===============================================
   Textarea Overrides - Glass Dark Theme
   =============================================== */

.ant-input-textarea textarea.ant-input,
textarea.ant-input {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-input-textarea textarea.ant-input:focus,
textarea.ant-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

.ant-input-textarea textarea.ant-input::placeholder,
textarea.ant-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input-textarea-show-count {
    background: transparent !important;
}

.ant-input-textarea-show-count::after,
.ant-input-data-count,
.ant-input-show-count-suffix {
    color: var(--text-muted) !important;
}

/* TextArea with ShowCount wraps the <textarea> in span.ant-input-affix-wrapper.
   Promote the wrapper to BE the glass box and make the inner textarea transparent
   so its edge aligns with inputs/selects in the same form. */
.ant-input-textarea .ant-input-affix-wrapper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 11px !important;
}

.ant-input-textarea .ant-input-affix-wrapper:hover {
    border-color: var(--text-muted) !important;
}

.ant-input-textarea .ant-input-affix-wrapper-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input:focus,
.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input-focused {
    border: none !important;
    box-shadow: none !important;
}

/* ===============================================
   Form Item Overrides - Dark Theme
   =============================================== */

.ant-form-item {
    margin-bottom: 1.25rem;
}

.ant-form-item:last-child {
    margin-bottom: 0;
}

.ant-form-item-label > label {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

/* ===============================================
   Select/Dropdown Overrides - Glass Dark Theme
   =============================================== */

.ant-select-selector {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-select-arrow {
    color: var(--text-muted) !important;
}

.ant-select:hover .ant-select-selector {
    border-color: var(--text-muted) !important;
}

.ant-select-focused .ant-select-selector {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

.ant-select-selection-item {
    color: var(--text-primary) !important;
}

.ant-select-selection-placeholder {
    color: var(--text-muted) !important;
}

/* AntD's own disabled text (rgba(0, 0, 0, 0.25), about 1.9:1 on white and near-invisible on the dark panel) reads
   --text-disabled: 4.90:1 on white in light (I-023 TASK_04 Req 10). Rules above that already paint --text-muted win. */
.ant-select-disabled .ant-select-selector,
.ant-select-disabled .ant-select-selection-item,
.ant-select-item-option-disabled,
.ant-picker-disabled .ant-picker-input > input,
.ant-input-number-disabled .ant-input-number-input,
.ant-checkbox-disabled + span,
.ant-radio-disabled + span,
.ant-radio-button-wrapper-disabled,
.ant-dropdown-menu-item-disabled,
.ant-menu-item-disabled {
    color: var(--text-disabled) !important;
}

/* ===============================================
   Default Button Overrides — F .btn (I-033 TASK_01, f.src.html 271-283): the --panel ground, a --line-2 edge, --text;
   hover and keyboard focus keep the B-009 highlight
   =============================================== */

.ant-btn-default {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    transition: all var(--transition-base) !important;
}

.ant-btn-default:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-fg) !important;
    background: rgba(var(--color-primary-rgb), 0.08) !important;
}

.ant-btn-default:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* F .btn.is-loading (I-033 TASK_01, f.src.html 282-283): the spinner turns on the button's own ground — AntD's white
   loading veil (::before) never paints */
.ant-btn.ant-btn-loading::before {
    display: none !important;
}

/* F .btn--text (I-033 TASK_01): 500, like every F button — AntD's .ant-btn 400 loads after app.css, so it is set here */
.ant-btn-text {
    font-weight: 500;
}

/* B-009: dashed button - the add-row affordance; ghost like default, dashed border */
.ant-btn-dashed {
    background: transparent !important;
    border: 1px dashed var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
}

/* B-028 (1340, 1341): highlight on :hover and :focus-visible (a mouse click no longer leaves it stuck), never on
   a disabled or danger button - Dashed Danger keeps the danger look. The .ant-btn prefix keeps it at (0,3,0) so a
   generic (0,2,0) `.ant-btn:focus-visible` cannot repaint the text of a hovered or keyboard-focused Dashed button.
   B-051 AD4: the keyboard focus ring is the app.css ring rule's.
   B-008 (2606): :not([disabled]) also covers an attribute-disabled anchor button. */
.ant-btn.ant-btn-dashed:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled):not(.ant-btn-dangerous)),
.ant-btn.ant-btn-dashed:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled):not(.ant-btn-dangerous)) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-fg) !important;
    background: rgba(var(--color-primary-rgb), 0.08) !important;
}

.ant-btn-dashed:disabled,
.ant-btn-dashed.ant-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===============================================
   Danger Button Overrides - Red Ghost Style
   =============================================== */

.ant-btn-dangerous {
    background: transparent !important;
    border: 1px solid rgba(var(--color-error-rgb), 0.4) !important;
    color: var(--color-error-light) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500;
    transition: all var(--transition-base);
}

.ant-btn-dangerous:hover:not(:disabled) {
    background: rgba(var(--color-error-rgb), 0.1) !important;
    border-color: var(--color-error-light) !important;
    /* B-028 (1340/1346): pin the text so no other button type's hover colour leaks in */
    color: var(--color-error-light) !important;
}

/* B-028 (1340/1346): the danger border above is solid; Dashed Danger keeps its dashed border */
.ant-btn-dangerous.ant-btn-dashed {
    border-style: dashed !important;
}

/* F .btn--danger-solid (I-030 D-k) — the one Primary + Danger look: ModalActionsFooter's Danger action, a
   ModalService.ConfirmAsync OK with OkButtonProps.Danger, and DangerPopconfirm's OK. (0,3,0) outranks the
   .ant-btn.ant-btn-primary copies above and the contextual .ant-modal-footer / .ant-popover-buttons primaries; the
   :where() guard leaves a disabled one to the rule below. */
.ant-btn.ant-btn-primary.ant-btn-dangerous:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-error-solid) !important;
    border: 1px solid var(--color-error-solid) !important;
    box-shadow: none !important;
    color: var(--color-on-error-solid) !important;
    font-weight: 600;
    transform: none;
}

.ant-btn.ant-btn-primary.ant-btn-dangerous:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-btn.ant-btn-primary.ant-btn-dangerous:active:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-error-solid) !important;
    color: var(--color-on-error-solid) !important;
    filter: brightness(1.08);
}

.ant-btn.ant-btn-primary.ant-btn-dangerous:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

/* ModalService.ConfirmAsync with OkButtonProps = { Danger = true } renders the OK as Default + Danger (no .ant-btn-primary:
   ButtonProps carries its own Type), so the Primary + Danger rule above never matched it — the F solid look is given to the
   confirm's danger OK directly (I-030 TASK_06 root-cause fix of TASK_01: TeamSettings remove / leave, which stay ConfirmAsync) */
.ant-modal-confirm-btns .ant-btn.ant-btn-dangerous:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-error-solid) !important;
    border: 1px solid var(--color-error-solid) !important;
    box-shadow: none !important;
    color: var(--color-on-error-solid) !important;
    font-weight: 600;
}

.ant-modal-confirm-btns .ant-btn.ant-btn-dangerous:hover:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)),
.ant-modal-confirm-btns .ant-btn.ant-btn-dangerous:active:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-error-solid) !important;
    color: var(--color-on-error-solid) !important;
    filter: brightness(1.08);
}

/* (0,4,0) and later than app.css's Default + Danger :focus-visible tint, so a keyboard-focused OK — the confirm focuses it
   when opened by Esc — keeps the solid look (I-030 TASK_08 root-cause fix of TASK_06) */
.ant-modal-confirm-btns .ant-btn.ant-btn-dangerous:focus-visible:where(:not(:disabled):not([disabled]):not(.ant-btn-disabled)) {
    background: var(--color-error-solid) !important;
    border-color: var(--color-error-solid) !important;
    color: var(--color-on-error-solid) !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

/* F .btn--danger-solid[disabled] (.btn[disabled], f.src.html 281): the solid look at half opacity (I-030 TASK_08 fidelity —
   DeleteAccountModal step 2 before the phrase is typed) */
.ant-btn.ant-btn-primary.ant-btn-dangerous:is(:disabled, [disabled], .ant-btn-disabled) {
    background: var(--color-error-solid) !important;
    border: 1px solid var(--color-error-solid) !important;
    color: var(--color-on-error-solid) !important;
    opacity: 0.5;
}

/* ===============================================
   Divider Overrides - Dark Theme
   =============================================== */

.ant-divider {
    border-color: var(--glass-border) !important;
    margin: var(--space-lg) 0 !important;
}

.ant-divider-inner-text {
    color: var(--text-muted) !important;
    font-size: 0.8125rem;
}

/* ===============================================
   Typography Overrides - Dark Theme
   =============================================== */

.ant-typography {
    color: var(--text-secondary) !important;
}

/* ===============================================
   Radio Button Overrides - Dark Theme
   =============================================== */

.ant-radio-wrapper {
    color: var(--text-secondary) !important;
}

.ant-radio-checked .ant-radio-inner {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

/* ===============================================
   Collapse Overrides - Dark Theme
   =============================================== */

.ant-collapse {
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}

.ant-collapse-header {
    color: var(--text-secondary) !important;
}

.ant-collapse-content {
    background: var(--glass-bg-light) !important;
    border-top: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-collapse-content-box {
    padding: 16px !important;
}

/* ===============================================
   Badge Overrides - neutral (F .badge, I-021 AD6): an unread / count badge is information, not "mine" — never orange.
   I-033 TASK_01: F's size and face (f.src.html 200) — 18px, 5px sides, 600 10.5px mono, no ring; the dot is F .unread's
   7px, in the same neutral ink.
   =============================================== */

.ant-badge-count {
    background: var(--color-badge-bg) !important;
    color: var(--color-badge-fg) !important;
    box-shadow: none !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font: 600 10.5px/18px var(--font-mono);
}

.ant-badge-count .ant-scroll-number-only,
.ant-badge-count .ant-scroll-number-only > p.ant-scroll-number-only-unit {
    height: 18px;
    line-height: 18px;
}

.ant-badge-multiple-words {
    padding: 0 5px;
}

.ant-badge-dot {
    background: var(--color-badge-bg) !important;
    box-shadow: none !important;
    width: 7px;
    min-width: 7px;
    height: 7px;
}

/* ===============================================
   Avatar Overrides — F .av (I-033 TASK_01, f.src.html 195-199, 984): a rounded square on --panel-3 with a 1px --line
   edge, --text-2 initials in 600 mono. AntD's sizes stay (24 / 32 / 40); the radius follows F's scale (7 / 8 / 10).
   =============================================== */

.ant-avatar {
    background: var(--color-panel-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 600;
}

.ant-avatar-sm {
    border-radius: 7px;
}

.ant-avatar-lg {
    border-radius: 10px;
}

/* ===============================================
   Table Overrides - Dark Theme
   =============================================== */

.ant-table {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.ant-table-container,
.ant-table-content,
.ant-table table {
    background: transparent !important;
}

.ant-table-thead > tr > th {
    background: var(--glass-bg-subtle) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ant-table-tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border-faint) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem;
}

.ant-table-tbody > tr {
    background: transparent !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr:hover > td {
    background: var(--color-row-hover) !important;
}

/* Selected rows (row selection) are the current selection: the "mine" tint (I-023 TASK_04). */
.ant-table-tbody > tr.ant-table-row-selected > td,
.ant-table-tbody > tr.ant-table-row-selected:hover > td {
    background: var(--color-primary-bg) !important;
}

/* Frozen columns need an opaque background or scrolling cells bleed through
   when they scroll under. Specificity must beat .ant-table-tbody > tr > td. --table-pinned-bg is opaque in both
   themes; a pinned header cell paints the header's own opaque --glass-bg-subtle, so the header row does not break. */
.ant-table-tbody > tr > td.ant-table-cell-fix-left,
.ant-table-tbody > tr > td.ant-table-cell-fix-right {
    background: var(--table-pinned-bg) !important;
}

.ant-table-thead > tr > th.ant-table-cell-fix-left,
.ant-table-thead > tr > th.ant-table-cell-fix-right {
    background: var(--glass-bg-subtle) !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-fix-left,
.ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-fix-right,
.ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
.ant-table-tbody > tr:hover > td.ant-table-cell-fix-right {
    background: var(--table-pinned-bg) !important;
}

/* A selected row's pinned cell keeps the tint over the opaque pinned ground, hovered too: the :hover pair is (0,4,2) and,
   loading later, beats the pinned hover rules above and app.css's host-prefixed ones. */
.ant-table-tbody > tr.ant-table-row-selected > td.ant-table-cell-fix-left,
.ant-table-tbody > tr.ant-table-row-selected > td.ant-table-cell-fix-right,
.ant-table-tbody > tr.ant-table-row-selected:hover > td.ant-table-cell-fix-left,
.ant-table-tbody > tr.ant-table-row-selected:hover > td.ant-table-cell-fix-right {
    background: linear-gradient(var(--color-primary-bg), var(--color-primary-bg)), var(--table-pinned-bg) !important;
}

/* Sticky header (Table Sticky): the holder is opaque, so rows never show through it. */
.ant-table-sticky-holder,
.ant-table-header {
    background: var(--table-pinned-bg) !important;
}

.ant-table-bordered > .ant-table-container {
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th,
.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
    border-right: 1px solid var(--glass-border-faint) !important;
}

.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th {
    background: var(--glass-bg-subtle) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border-faint) !important;
    color: var(--text-primary) !important;
}

.ant-table-pagination.ant-pagination {
    margin: 16px 0 0 !important;
    padding: 12px 0 !important;
    align-items: center !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin-right: 8px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item a {
    color: var(--text-secondary) !important;
}

/* F .pgn (I-033 TASK_01): hover draws a --line-2 edge in --text; the current page is --text 600 on --panel with a
   --text-2 edge — not orange */
.ant-table-pagination.ant-pagination-mini .ant-pagination-item:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item:hover a {
    color: var(--text-primary) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item-active {
    background: var(--glass-bg) !important;
    border-color: var(--text-secondary) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item-active a {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-prev,
.ant-table-pagination.ant-pagination-mini .ant-pagination-next {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin-right: 8px !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-prev .ant-pagination-item-link,
.ant-table-pagination.ant-pagination-mini .ant-pagination-next .ant-pagination-item-link {
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    width: 32px !important;
    height: 32px !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-prev:hover .ant-pagination-item-link,
.ant-table-pagination.ant-pagination-mini .ant-pagination-next:hover .ant-pagination-item-link {
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

/* ===============================================
   Table variant .table--f (I-027 D-i) — prototype F's list table .tbl (f.src.html CSS 542-552, 849-852;
   pager sizes .pgn 1007-1010). Opt-in: <Table Class="table--f">; every selector is under .table--f, so no other
   table changes (AntD renders Class on the .ant-table div). Tokens only (F --panel-2 = --glass-bg-light, --line = --glass-border, --muted = --text-muted,
   --row-hover = --color-row-hover). Numbers right-align through each column's Align.
   =============================================== */

.table--f .ant-table-thead > tr > th {
    padding: 8px 12px !important;
    background: var(--glass-bg-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    font: 500 10.5px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted) !important;
}

/* Body cells: data rows only — AntD's zero-height .ant-table-measure-row (ScrollX tables) must keep no padding */
.table--f .ant-table-tbody > tr.ant-table-row > td {
    padding: 7px 12px !important;
    border-bottom: 1px solid var(--glass-border) !important;
    font: 400 12.5px var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.table--f .ant-table-tbody > tr.ant-table-row:last-child > td {
    border-bottom: 0 !important;
}

/* Hover row: F --row-hover. Selected rows keep the global "current selection" tint; pinned cells are excluded so they
   keep their opaque ground (below). Header cells keep the app.css header-wrap rule (white-space: normal). */
.table--f .ant-table-tbody > tr.ant-table-row:not(.ant-table-row-selected):hover > td:not(.ant-table-cell-fix-left):not(.ant-table-cell-fix-right) {
    background: var(--color-row-hover) !important;
}

/* The pinned-cell contract: a pinned cell stays on the opaque --table-pinned-bg at rest and on hover (a selected row's
   pinned cell keeps the global tint-over-ground rule). (0,4,2) beats the global hover rules. */
.table--f .ant-table-tbody > tr:not(.ant-table-row-selected) > td.ant-table-cell-fix-left,
.table--f .ant-table-tbody > tr:not(.ant-table-row-selected) > td.ant-table-cell-fix-right {
    background: var(--table-pinned-bg) !important;
}

/* Pagination: AntD puts Class on .ant-table, so the table's pager is its next sibling (.table--f ~ .ant-pagination).
   Mono labels; F's 30px page buttons above 480px (at <= 480px the app.css touch block keeps them 44px). */
.table--f ~ .ant-pagination .ant-pagination-item,
.table--f ~ .ant-pagination .ant-pagination-prev,
.table--f ~ .ant-pagination .ant-pagination-next,
.table--f ~ .ant-pagination .ant-pagination-jump-prev,
.table--f ~ .ant-pagination .ant-pagination-jump-next {
    font: 500 12.5px var(--font-mono);
}

@media (min-width: 480.02px) {
    .table--f ~ .ant-pagination .ant-pagination-item,
    .table--f ~ .ant-pagination .ant-pagination-prev,
    .table--f ~ .ant-pagination .ant-pagination-next,
    .table--f ~ .ant-pagination .ant-pagination-jump-prev,
    .table--f ~ .ant-pagination .ant-pagination-jump-next {
        min-width: 30px !important;
        height: 30px !important;
        line-height: 28px !important;
    }

    .table--f ~ .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
    .table--f ~ .ant-pagination .ant-pagination-next .ant-pagination-item-link {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ===============================================
   Tabs Overrides — prototype F .tabs (I-033 TASK_01, f.src.html 663-668): --text-2 tabs, the selected one --text 600
   over a 2px orange bar (the current selection); a --line-2 rule under the strip. Text is never orange.
   =============================================== */

.ant-tabs-tab {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

.ant-tabs-tab:hover {
    color: var(--text-primary) !important;
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.ant-tabs-ink-bar {
    background: var(--color-primary) !important;
}

.ant-tabs-nav::before {
    border-bottom-color: var(--glass-border-light) !important;
}

/* Tab pane content — inherit the page's light text instead of AntD's default
   black, otherwise plain <p>/<span> inside a tab on a dark glass-card become
   illegible (e.g. Billing "Current plan: …"). */
.ant-tabs-tabpane {
    color: var(--text-primary);
}

/* ===============================================
   Pagination Overrides — prototype F .pgn (I-033 TASK_01, f.src.html 1007-1011): borderless 8px items in --text-2
   500 12.5px mono; hover draws a --line-2 edge; the current page is --text 600 on --panel with a --text-2 edge — not
   orange. AntD's 32px item height stays (the control density of I-021).
   =============================================== */

.ant-pagination-item,
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-mono);
}

.ant-pagination-item a {
    color: var(--text-secondary) !important;
    font: 500 12.5px var(--font-mono);
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    color: var(--text-secondary) !important;
}

.ant-pagination-item:hover,
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
    border-color: var(--glass-border-light) !important;
}

.ant-pagination-item:hover a,
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
    color: var(--text-primary) !important;
}

.ant-pagination-item-active,
.ant-pagination-item-active:hover {
    background: var(--glass-bg) !important;
    border-color: var(--text-secondary) !important;
}

.ant-pagination-item-active a,
.ant-pagination-item-active:hover a {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-disabled:hover .ant-pagination-item-link {
    color: var(--text-muted) !important;
    border-color: transparent !important;
    opacity: 0.45;
}

.ant-pagination-jump-next .ant-pagination-item-ellipsis,
.ant-pagination-jump-prev .ant-pagination-item-ellipsis {
    color: var(--text-muted) !important;
}

.ant-pagination-jump-next .ant-pagination-item-link-icon,
.ant-pagination-jump-prev .ant-pagination-item-link-icon {
    color: var(--text-primary) !important;
}

.ant-pagination-options .ant-select-selector {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
}

/* ===============================================
   Switch Overrides - Brand Orange
   =============================================== */

.ant-switch-checked {
    background: var(--color-primary) !important;
}

.ant-switch-checked:focus {
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

/* The knob is F --knob in both states (white in light, #eceef1 in dark); the unchecked track keeps AntD's grey. */
.ant-switch .ant-switch-handle::before {
    background: var(--color-knob) !important;
}

/* ===============================================
   Popover/Popconfirm Overrides — both themes (I-030 README D-g)
   The generic AntD popover surface, on theme tokens. F's Popconfirm look (.pop.popc: 12px 14px, radius 10, a solid
   danger OK, no arrow) is scoped to DangerPopconfirm's .danger-popconfirm overlay in app.css "Overlays (I-030)", so
   these generic rules — and the property picker's and help popover's own blocks — keep every other popover as it was.
   =============================================== */

.ant-popover-inner {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-popup) !important;
}

.ant-popover-inner-content {
    color: var(--text-primary) !important;
}

.ant-popover-title {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-popover-message {
    color: var(--text-primary) !important;
}

.ant-popover-message > .anticon {
    color: var(--color-warning) !important;
}

.ant-popover-arrow-content,
.ant-popover-arrow-content::before {
    background: var(--color-bg-elevated) !important;
}

.ant-popover-buttons .ant-btn-default {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-popover-buttons .ant-btn-default:hover {
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.ant-popover-buttons .ant-btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ===============================================
   Button Focus/Wave Overrides - Brand Orange
   =============================================== */

/* B-008 (2592, 2608, 2649): keyboard focus only - a mouse click leaves no stuck highlight on any button type.
   B-051 AD4: one rule per state. Keyboard focus is app.css's per-type :focus-visible rules (border + text
   --color-primary, plus the focus ring); the `.ant-btn:focus-visible, .ant-btn-default:focus-visible` copy that painted
   --color-primary-light text is gone (it won only for the (0,2,0) anchor form, which now matches the <button>). This
   block keeps the Default press colour: --color-link-hover, one step past the hover's --color-primary-fg in both
   themes (--color-primary-text equals it in light, I-023 #11575). The Primary press is the one rule in "Primary
   button" above (--color-primary): a second `.ant-btn-primary:active` here painted --color-primary-dark, which is the
   light hover colour, so a press matching it showed no change in light (the (0,3,0) .ant-btn form outranked it).
   :not(:disabled) makes it (0,3,0), the weight of app.css's and this sheet's hover / :focus-visible rules: as a later
   rule it wins the tie, where the bare (0,2,0) `:active` lost and a pressed button kept its hover colour. */
.ant-btn-default:active:not(:disabled) {
    border-color: var(--color-primary) !important;
    color: var(--color-link-hover) !important;
}

[ant-click-animating-without-extra-node='true']::after,
.ant-click-animating-node {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0 var(--color-primary) !important;
}

/* ===============================================
   InputNumber Overrides - Dark Theme
   =============================================== */

.ant-input-number {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

.ant-input-number:hover {
    border-color: var(--text-muted) !important;
}

.ant-input-number-focused,
.ant-input-number:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

.ant-input-number-input {
    color: var(--text-primary) !important;
}

.ant-input-number-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input-number-handler-wrap {
    background: var(--glass-bg-subtle) !important;
    border-left: 1px solid var(--glass-border) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.ant-input-number-handler {
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-input-number-handler:hover {
    color: var(--color-primary-text) !important;
}

.ant-input-number-handler-up-inner,
.ant-input-number-handler-down-inner {
    color: var(--text-secondary) !important;
}

.ant-input-number-handler:hover .ant-input-number-handler-up-inner,
.ant-input-number-handler:hover .ant-input-number-handler-down-inner {
    color: var(--color-primary-text) !important;
}

/* InputNumber affix wrapper (prefix) — MoneyInput draws it for its currency code (AntD 1.6.0 only renders Prefix
   inside a FormItem feedback wrapper). The wrapper is the visible surface; the inner InputNumber is just the field,
   like the .ant-input-affix-wrapper rules above. A feedback wrapper AntD nests inside it stays transparent. */
.ant-input-number-affix-wrapper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

.ant-input-number-affix-wrapper.input-number--block {
    width: 100%;
}

.ant-input-number-affix-wrapper:hover {
    border-color: var(--text-muted) !important;
}

.ant-input-number-affix-wrapper:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

.ant-input-number-affix-wrapper-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ant-input-number-affix-wrapper > .ant-input-number,
.ant-input-number-affix-wrapper > .ant-input-number-affix-wrapper {
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ant-input-number-affix-wrapper .ant-input-number-prefix {
    color: var(--text-muted);
}

/* Collapse panel dividers — dark theme */
.ant-collapse > .ant-collapse-item {
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-collapse > .ant-collapse-item:last-child {
    border-bottom: none !important;
}

/* ===============================================
   DatePicker/RangePicker Focus Overrides
   =============================================== */

.ant-picker-active-bar {
    background: var(--color-primary) !important;
}

.ant-picker-range .ant-picker-active-bar {
    background: var(--color-primary) !important;
}

/* ===============================================
   Skeleton Overrides - Dark Theme
   =============================================== */

.ant-skeleton-title,
.ant-skeleton-paragraph > li {
    background: var(--color-skeleton-1) !important;
    border-radius: var(--radius-sm) !important;
}

.ant-skeleton-avatar {
    background: var(--color-skeleton-1) !important;
}

.ant-skeleton-active .ant-skeleton-title,
.ant-skeleton-active .ant-skeleton-paragraph > li,
.ant-skeleton-active .ant-skeleton-avatar {
    /* F .sk: --sk-1 → --sk-2 bars, both off the card surface (I-021 #11438; I-023 TASK_04 adds F's own tokens) */
    background: linear-gradient(90deg, var(--color-skeleton-1) 25%, var(--color-skeleton-2) 50%, var(--color-skeleton-1) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.5s ease-in-out infinite !important;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===============================================
   Breadcrumb Overrides - Dark Theme
   =============================================== */

/* F .crumb (I-033 TASK_01, f.src.html 172-176) — the top bar's look (Shell (I-024) below) for every Breadcrumb: muted
   crumbs in 500 13px, "/" in --line-2, the current crumb --text 600. A crumb link turns --text on hover, never orange. */
.ant-breadcrumb { color: var(--text-muted) !important; font-size: 13px; font-weight: 500; }
.ant-breadcrumb-link { color: var(--text-muted) !important; }
.ant-breadcrumb-link:hover { color: var(--text-primary) !important; }
.ant-breadcrumb-link a { color: var(--text-muted) !important; }
.ant-breadcrumb-link a:hover { color: var(--text-primary) !important; }
.ant-breadcrumb-separator { color: var(--glass-border-light) !important; }
.ant-breadcrumb li:last-child .ant-breadcrumb-link,
.ant-breadcrumb > span:last-child .ant-breadcrumb-link { color: var(--text-primary) !important; font-weight: 600; }

/* ===============================================
   Descriptions Overrides - Dark Theme
   =============================================== */

.ant-descriptions-header .ant-descriptions-title { color: var(--text-primary) !important; }
.ant-descriptions-bordered .ant-descriptions-view { border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; overflow: hidden; }
.ant-descriptions-bordered .ant-descriptions-row { border-bottom: 1px solid var(--glass-border) !important; }
.ant-descriptions-bordered .ant-descriptions-item-label { background: var(--glass-bg-subtle) !important; color: var(--text-secondary) !important; border-right: 1px solid var(--glass-border) !important; }
.ant-descriptions-bordered .ant-descriptions-item-content { color: var(--text-primary) !important; background: transparent !important; }
/* F .fi__label face (I-033 TASK_01): 500 12px mono, --text-2 */
.ant-descriptions-item-label { color: var(--text-secondary) !important; font: 500 12px var(--font-mono); }
.ant-descriptions-item-content { color: var(--text-primary) !important; }

/* ===============================================
   Statistic Overrides - Dark Theme
   =============================================== */

/* F .lab + .fig__val (I-033 TASK_01, f.src.html 84, figures): the title is the label tier (500 10.5px mono, uppercase,
   0.06em, --muted), the value 600 21px mono */
.ant-statistic-title { color: var(--text-muted) !important; font: var(--type-label-weight) var(--type-label) var(--font-mono); text-transform: uppercase; letter-spacing: var(--type-label-tracking); }
.ant-statistic-content { color: var(--text-primary) !important; font: 600 21px var(--font-mono); }
.ant-statistic-content-prefix, .ant-statistic-content-suffix { color: var(--text-secondary) !important; }

/* ===============================================
   Timeline Overrides - Dark Theme
   =============================================== */

.ant-timeline-item-content { color: var(--text-primary) !important; }
.ant-timeline-item-tail { border-left-color: var(--glass-border) !important; }
.ant-timeline-item-head { background: transparent !important; }
.ant-timeline-item-head-blue { color: var(--color-info) !important; border-color: var(--color-info) !important; }
.ant-timeline-item-head-green { color: var(--color-success) !important; border-color: var(--color-success) !important; }
.ant-timeline-item-head-orange { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.ant-timeline-item-head-gray { color: var(--text-muted) !important; border-color: var(--glass-border) !important; }

/* ===============================================
   Rate Overrides - Brand Orange
   =============================================== */

.ant-rate-star-full .anticon, .ant-rate-star-half .ant-rate-star-first .anticon { color: var(--color-primary) !important; }
.ant-rate-star-zero .anticon, .ant-rate-star-half .ant-rate-star-second .anticon { color: var(--text-muted) !important; }

/* ===============================================
   Segmented Overrides - Dark Theme + Brand Orange
   =============================================== */

/* F .seg (I-021 TASK_09; I-033 TASK_01, f.src.html 285-292): a --glass-bg-light track with a 1px --glass-border-light line;
   options in --text-2 500 12.5px mono with 10px sides; the selected option is the --panel ground with a --line-2 ring in
   --text 600 — never orange (the calendar toolbar, the decision queue and the insights toolbar each drew this locally
   since I-028; it is the global look now). Item height: the "Control density" block. */
.ant-segmented { background: var(--glass-bg-light) !important; border: 1px solid var(--glass-border-light); border-radius: var(--radius-md) !important; padding: 2px !important; color: var(--text-secondary); }
.ant-segmented-item { color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; transition: all var(--transition-base) !important; }
.ant-segmented-item:hover { color: var(--text-primary) !important; }
.ant-segmented-item-label { padding: 0 10px; font: 500 12.5px/26px var(--font-mono); }
.ant-segmented-item-selected { background: var(--glass-bg) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; box-shadow: 0 0 0 1px var(--glass-border-light) !important; }
.ant-segmented-item-selected .ant-segmented-item-label { font-weight: 600; }
.ant-segmented-thumb { background: var(--glass-bg) !important; border-radius: var(--radius-sm) !important; box-shadow: 0 0 0 1px var(--glass-border-light) !important; }

/* Multi-select selected item tags */
.ant-select-multiple .ant-select-selection-item { background: rgba(var(--color-primary-rgb), 0.15) !important; border: 1px solid rgba(var(--color-primary-rgb), 0.3) !important; border-radius: var(--radius-sm) !important; color: var(--color-primary-text) !important; }
.ant-select-multiple .ant-select-selection-item-content { color: var(--color-primary-text) !important; }
.ant-select-multiple .ant-select-selection-item-remove { color: var(--color-primary-fg) !important; }
.ant-select-multiple .ant-select-selection-item-remove:hover { color: var(--text-primary) !important; }

/* ===============================================
   Tooltip Overrides - theme tokens (I-023 TASK_04)
   =============================================== */

/* Dark keeps the elevated panel; light is F's [data-tip] chip (--badge-bg / --badge-fg) through --color-tooltip-*. */
.ant-tooltip-inner {
    background: var(--color-tooltip-bg) !important;
    border: 1px solid var(--color-tooltip-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-tooltip-fg) !important;
    box-shadow: var(--shadow-md) !important;
}

.ant-tooltip-arrow-content {
    background: var(--color-tooltip-bg) !important;
}

@media (max-width: 768px) {
    .ant-picker-dropdown {
        max-width: 100vw !important;
    }

    .ant-picker-panel-container {
        overflow-x: auto !important;
    }

    .ant-picker-panels {
        flex-direction: column !important;
    }
}

/* ============================================================
   TextArea affix-wrapper alignment (F-174 — digidok polish)
   Promote the affix-wrapper to be the glass box so the wrapped
   <textarea> aligns pixel-perfect with sibling Input fields in
   the same form. Inner textarea stays transparent.
   ============================================================ */
.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea:hover {
    border-color: var(--text-muted) !important;
}

.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea-focused,
.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

.ant-input-affix-wrapper-textarea > textarea.ant-input {
    background: transparent !important;
    border: none !important;
    padding: var(--space-md) !important;
    color: var(--text-primary) !important;
}

/* ===============================================
   Control density — prototype F (I-021 TASK_09, program § 2 Look). Inputs, selects, pickers and buttons are
   --control-h (34px), small --control-h-sm (32px), large --control-h-lg (36px), full-width buttons
   --control-h-block (38px, F .btn--block); Segmented items 26px in a 2px track
   (32px, F .seg). AntD sets fixed heights (32 / 24 / 40px); each rule here matches or outweighs AntD's selector and
   loads after it. The <=480px 44px touch-target block in app.css lifts with min-height, so it still wins on phones,
   and its table-cell / running-text resets are untouched.
   =============================================== */

.ant-btn {
    height: var(--control-h);
}

.ant-btn.ant-btn-sm {
    height: var(--control-h-sm);
}

.ant-btn.ant-btn-lg {
    height: var(--control-h-lg);
}

.ant-btn.ant-btn-block {
    height: var(--control-h-block);
}

.ant-btn.ant-btn-icon-only {
    width: var(--control-h);
}

.ant-btn.ant-btn-icon-only.ant-btn-sm {
    width: var(--control-h-sm);
}

.ant-btn.ant-btn-icon-only.ant-btn-lg {
    width: var(--control-h-lg);
}

/* Text inputs: the <input> itself, or the affix wrapper that draws the box (its inner input is just the text node) */
input.ant-input,
.ant-input-affix-wrapper {
    height: var(--control-h);
}

input.ant-input.ant-input-sm,
.ant-input-affix-wrapper.ant-input-affix-wrapper-sm {
    height: var(--control-h-sm);
}

.ant-input-affix-wrapper.ant-input-affix-wrapper-lg {
    height: var(--control-h-lg);
}

.ant-input-affix-wrapper > input.ant-input,
.ant-input-textarea .ant-input-affix-wrapper {
    height: auto;
}

.ant-input-number .ant-input-number-input {
    height: calc(var(--control-h) - 2px);
}

.ant-picker:not(.ant-picker-small):not(.ant-picker-large) {
    height: var(--control-h);
}

.ant-select-single:not(.ant-select-customize-input):not(.ant-select-sm):not(.ant-select-lg) .ant-select-selector {
    height: var(--control-h);
}

/* #11436 (I-037 D-t): the size guards sit in :where(), so this rule weighs (0,4,0) — it still beats AntD's 30px rule of
   the same weight (this sheet loads later) on the desktop, and app.css's <= 480px `height: 100%` (0,5,0) now wins on a
   phone, where the 44px control centres its query on the value line */
.ant-select-single:not(.ant-select-customize-input):where(:not(.ant-select-sm):not(.ant-select-lg)) .ant-select-selector .ant-select-selection-search-input {
    height: calc(var(--control-h) - 2px);
}

.ant-select-single:not(.ant-select-sm):not(.ant-select-lg) .ant-select-selector .ant-select-selection-item,
.ant-select-single:not(.ant-select-sm):not(.ant-select-lg) .ant-select-selector .ant-select-selection-placeholder {
    line-height: calc(var(--control-h) - 2px);
}

/* :where() keeps this at (0,1,0): the <=480px block's `.ant-select-multiple .ant-select-selector { min-height: 44px }`
   (0,2,0, app.css) must still win on phones. */
:where(.ant-select-multiple:not(.ant-select-sm):not(.ant-select-lg)) .ant-select-selector {
    min-height: var(--control-h);
}

.ant-segmented-item-label {
    min-height: 26px;
    line-height: 26px;
}

/* Dense table rows — F .tbl / .rg (34px). AntD's small-table cell is `.ant-table.ant-table-small … td` with 8px
   padding (39px rows); the same weight here, later, trims it to a 34px row (--control-h — F draws rows and controls
   at one height). A cell holding a control still grows to fit it. */
.ant-table.ant-table-small .ant-table-tbody > tr > td {
    height: var(--control-h);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* =====================================================================================================
   Shell (I-024) — AntD internals of the shell components; the shell classes themselves are app.css "Shell (I-024)".
   Tokens only. The Popover / Dropdown overlays render in a portal, so they are reached through their
   OverlayClassName, never ::deep (I-024 D-j).
   ===================================================================================================== */

/* Sider: light AntD theme, painted from the tokens (both themes, I-024 D-d); children are the flex column */
.shell-sider.ant-layout-sider {
    background: var(--glass-bg);
    border-right: 1px solid var(--glass-border);
}

/* The AntD Layout under the shell is transparent: the page ground shows, not AntD's light layout fill */
.shell.ant-layout,
.shell.ant-layout .shell__main {
    background: transparent;
}

/* Collapsible without AntD's trigger: no 48px trigger strip at the bottom (the collapse row is .shell-sider__bottom) */
.shell-sider.ant-layout-sider.ant-layout-sider-has-trigger {
    padding-bottom: 0;
}

.shell-sider.ant-layout-sider > .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* Menu: a transparent column of 34px items; each <li> carries the item look so landmarks measure it */
ul.shell-nav.ant-menu,
ul.shell-nav.ant-menu.ant-menu-inline {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    background: transparent;
    border: 0;
    border-inline-end: 0;
    color: var(--text-secondary);
    font: 500 13.5px var(--font-body);
}

ul.shell-nav.ant-menu .ant-menu-item-group-title {
    padding: 14px 8px 5px;
    font: 500 10.5px/1.3 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

ul.shell-nav.ant-menu > li:first-child > .ant-menu-item-group-title {
    padding-top: 8px;
}

ul.shell-nav.ant-menu .ant-menu-item-group-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
}

ul.shell-nav.ant-menu li.ant-menu-item {
    height: 34px;
    line-height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary);
    overflow: visible;
}

ul.shell-nav.ant-menu li.ant-menu-item .ant-menu-title-content {
    display: block;
    height: 100%;
}

/* The item's icon is F's 17px .nv .ic (I-037 TASK_07): AntD's `.ant-menu-item .anticon` (14px) loads after app.css and
   won over `.shell-nav__item .anticon`, and its `.anticon + span` 10px margin doubled the item's own 10px gap (F's
   icon-to-label spacing). The rail and the narrow drawer reuse the item; `.shell-sider` outranks AntD's collapsed-menu
   rule (16px, 0,6,0) in the rail — F's rail keeps the 17px icon. */
ul.shell-nav.ant-menu li.ant-menu-item .shell-nav__item .anticon,
.shell-sider ul.shell-nav.ant-menu li.ant-menu-item .shell-nav__item .anticon {
    font-size: 17px;
    min-width: 17px;
}

ul.shell-nav.ant-menu li.ant-menu-item .shell-nav__item .anticon + span {
    margin-left: 0;
}

/* No active bar: AntD's inline ::after border and any ::before marker are off */
ul.shell-nav.ant-menu li.ant-menu-item::before,
ul.shell-nav.ant-menu li.ant-menu-item::after,
ul.shell-nav.ant-menu li.ant-menu-item a::before {
    content: none !important;
    display: none !important;
}

ul.shell-nav.ant-menu li.ant-menu-item:hover,
ul.shell-nav.ant-menu li.ant-menu-item.ant-menu-item-selected {
    background: var(--color-panel-3);
    color: var(--text-primary);
}

/* The anchor keeps the shell colours over AntD's light-menu link colours (rest, hover, selected) */
ul.shell-nav.ant-menu li.ant-menu-item a.shell-nav__item {
    color: var(--text-secondary);
}

ul.shell-nav.ant-menu li.ant-menu-item:hover a.shell-nav__item,
ul.shell-nav.ant-menu li.ant-menu-item a.shell-nav__item:hover {
    color: var(--text-primary);
}

ul.shell-nav.ant-menu li.ant-menu-item.ant-menu-item-selected .shell-nav__item {
    color: var(--text-primary);
    font-weight: 600;
}

ul.shell-nav.ant-menu li.ant-menu-item.ant-menu-item-selected .shell-nav__item .anticon {
    color: var(--color-primary-text);
}

/* Rail: group titles are 1px dividers (F .app.is-collapsed .sb__lab), the first one goes */
.shell-sider.is-rail ul.shell-nav.ant-menu .ant-menu-item-group-title {
    font-size: 0;
    height: 1px;
    padding: 0;
    margin: 9px 6px;
    background: var(--glass-border);
}

.shell-sider.is-rail ul.shell-nav.ant-menu > li:first-child > .ant-menu-item-group-title {
    display: none;
}

/* Below 900px AntD's inline sider width (style="width: 256px; flex: 0 0 256px; …") yields to the drawer width. One rule
   for the playground toggle and the real viewport (html.is-narrow-shell; app.css "Shell (I-024)", PR 736 #11692) */
.shell.is-narrow .shell-sider.ant-layout-sider,
:where(.is-narrow-shell) .shell .shell-sider.ant-layout-sider {
    width: min(300px, 86vw) !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
}

/* I-012 touch targets on a phone: the menu <li> grows with its 44px .shell-nav__item (app.css "Shell (I-024)") */
@media (max-width: 480px) {
    ul.shell-nav.ant-menu li.ant-menu-item {
        height: auto;
        min-height: 44px;
        line-height: normal;
    }
}

/* Property picker popover: the body is .property-picker__popover, so the AntD inner chrome goes */
.property-picker-overlay .ant-popover-inner,
.property-picker-overlay.ant-popover .ant-popover-inner {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.property-picker-overlay .ant-popover-inner-content {
    padding: 0 !important;
}

.property-picker-overlay .ant-popover-arrow {
    display: none !important;
}

.property-picker__search .ant-input,
.property-picker__search input.ant-input {
    height: 34px;
    padding-left: 32px;
    font-size: 13.5px;
}

/* Breadcrumb in the top bar — F .crumb: muted crumbs, "/" in --line-2, the current crumb 600 --text, plain text.
   AntD 1.6 renders nav.ant-breadcrumb > ol > li > (.ant-breadcrumb-link + .ant-breadcrumb-separator) and hides the
   last item's separator itself. */
.top-bar__crumb .ant-breadcrumb {
    min-width: 0;
    font: 500 13px var(--font-body);
    color: var(--text-muted) !important;
    white-space: nowrap;
}

.top-bar__crumb .ant-breadcrumb ol {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-bar__crumb .ant-breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.top-bar__crumb .ant-breadcrumb-link,
.top-bar__crumb .ant-breadcrumb-link a {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted) !important;
}

.top-bar__crumb .ant-breadcrumb-separator {
    margin: 0 8px;
    color: var(--glass-border-light) !important;
}

.top-bar__crumb .ant-breadcrumb li:last-child .ant-breadcrumb-link {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.shell.is-narrow .top-bar__crumb .ant-breadcrumb li:not(:last-child),
:where(.is-narrow-shell) .top-bar__crumb .ant-breadcrumb li:not(:last-child) {
    display: none;
}

/* The picker trigger fills the sider: AntD wraps a Popover's child in an inline-flex span */
.property-picker > .antblazor-overlay-trigger-wrapper {
    display: flex;
    width: 100%;
}

/* Avatar / bell Dropdown overlay: the panel is .user-menu / .shell-dpanel itself */
.user-menu-overlay.ant-dropdown,
.shell-dpanel-overlay.ant-dropdown {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* The status Tooltip in the top bar reads like F's [data-tip] chip (--badge-bg / --badge-fg) */
.top-bar-tooltip .ant-tooltip-inner {
    background: var(--color-badge-bg) !important;
    color: var(--color-badge-fg) !important;
    font: 500 11.5px/1.2 var(--font-body);
    border-radius: var(--radius-sm) !important;
}

.top-bar-tooltip .ant-tooltip-arrow {
    display: none !important;
}