/* ============================================================
   FluentUI Blazor - мост на IGM-токены
   Source: src/Artifacts/Fluent UI Blazor Design System/igm-blazor-example/wwwroot/css/fluent-overrides.css
   ============================================================
   FluentUI Blazor построен на Fluent UI Web Components (FAST)
   и читает значения цветов/шрифтов из CSS Custom Properties.
   Достаточно объявить переменные в :root (это делает
   colors_and_type.css), и большинство компонентов сами окрасятся.
   ----------------------------------------------------------- */

/* 1. Шрифт ------------------------------------------------- */
html, body,
fluent-button, fluent-anchor,
fluent-text-field, fluent-number-field, fluent-search,
fluent-text-area, fluent-select, fluent-listbox, fluent-option,
fluent-checkbox, fluent-radio, fluent-radio-group,
fluent-switch, fluent-slider, fluent-slider-label,
fluent-tabs, fluent-tab, fluent-tab-panel,
fluent-accordion, fluent-accordion-item,
fluent-data-grid, fluent-data-grid-row, fluent-data-grid-cell,
fluent-card, fluent-dialog, fluent-menu, fluent-menu-item,
fluent-toolbar, fluent-tooltip, fluent-badge, fluent-tag,
fluent-toast, fluent-message-bar, fluent-progress, fluent-progress-ring,
fluent-breadcrumb, fluent-breadcrumb-item,
fluent-tree-view, fluent-tree-item, fluent-persona,
fluent-date-picker, fluent-time-picker, fluent-calendar {
    font-family: var(--body-font);
}

/* 2. Component-specific токены ---------------------------- */
:root {
    --button-corner-radius:  var(--control-corner-radius);
    --card-corner-radius:    var(--layer-corner-radius);
    --dialog-corner-radius:  var(--layer-corner-radius);
    --field-corner-radius:   var(--control-corner-radius);

    --button-height:    calc(var(--design-unit) * var(--base-height-multiplier) * 1px);
    --field-height:     calc(var(--design-unit) * var(--base-height-multiplier) * 1px);

    --focus-stroke-width: 2px;
}

/* 3. Точечные правки -------------------------------------- */

/* FluentCard - снимаем дефолтный shadow, ставим border (IGM-стиль) */
fluent-card {
    --card-fill-color: var(--neutral-layer-1);
    box-shadow: none !important;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

/* FluentDataGrid - IGM-таблица */
fluent-data-grid {
    --data-grid-row-divider-color: var(--neutral-stroke-divider-rest);
}
fluent-data-grid-row:hover {
    background: var(--neutral-fill-stealth-hover);
}

/* FluentTabs - 2px акцентная нижняя черта на активной вкладке */
fluent-tabs::part(activeIndicator) {
    background: var(--accent-fill-rest);
    height: 2px;
}

/* FluentTabs / FluentTab — full width independent of content volume.
   Only override the ACTIVE panel (not hidden); inactive panels keep display:none. */
fluent-tabs {
    width: 100%;
}

fluent-tab-panel:not([hidden]) {
    display: block !important;
    width: 100%;
}

/* FluentBadge - IGM делает их пилюлями (full radius) */
fluent-badge {
    --badge-corner-radius: 9999px;
}

/* FluentDialog - IGM-овая 16px-тень */
fluent-dialog::part(control) {
    box-shadow: var(--shadow-16);
}

/* Скрываем outline вне keyboard-фокуса */
:not(:focus-visible) {
    outline: none;
}

/* "Add / New" grid buttons - project-wide accent look, stylistically matching
   FluentButton Appearance.Accent with an Add icon. Two markups are covered:
     1. AirGridControl wraps its add button in <div style="margin-top:4px"> (unique marker).
     2. AirGridToolbar / project Grid.razor put the add button first inside .grid-toolbar,
        followed by the (always-last) edit button -> :first-child:not(:last-child)
        targets the add button only and skips lone/edit buttons and the search panel
        (nested, not a direct child). */
div[style="margin-top:4px"] > fluent-button:not([disabled])::part(control),
.grid-toolbar > fluent-button:first-child:not(:last-child):not([disabled])::part(control) {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border-color: transparent;
}
div[style="margin-top:4px"] > fluent-button:hover:not([disabled])::part(control),
.grid-toolbar > fluent-button:first-child:not(:last-child):hover:not([disabled])::part(control) {
    background: var(--accent-fill-hover);
}
div[style="margin-top:4px"] > fluent-button:active:not([disabled])::part(control),
.grid-toolbar > fluent-button:first-child:not(:last-child):active:not([disabled])::part(control) {
    background: var(--accent-fill-active);
}
/* Leading "+" glyph to mirror the IconStart Add icon of the reference button */
div[style="margin-top:4px"] > fluent-button::part(content)::before,
.grid-toolbar > fluent-button:first-child:not(:last-child)::part(content)::before {
    content: "+";
    margin-right: 6px;
    font-weight: 600;
    font-size: 1.05em;
    line-height: 1;
}