/* ============================================
   CSS architecture (TP-1388)
   ============================================
   Aggregator file. See docs/css-architecture.md for the 3-layer design:
     tokens/  → raw values (framework-agnostic)
     themes/  → semantic role mapping (light/dark, per-tenant extension point)
     base/    → reset, typography, focus
   Components/utilities/vendor will follow in later phases. */

/* Layer 1 — Design tokens (raw values)
   density.css MUST load before spacing.css/control.css — its --density-scale
   variable is consumed by their calc() expressions. */
@import "./css/tokens/density.css";
@import "./css/tokens/colors.css";
@import "./css/tokens/spacing.css";
@import "./css/tokens/control.css";
@import "./css/tokens/typography.css";
@import "./css/tokens/radius.css";
@import "./css/tokens/shadow.css";
@import "./css/tokens/motion.css";

/* Layer 2 — Semantic themes (palette via [data-theme], mode via [data-mode]) */
@import "./css/themes/light.css";      /* :root baseline — modern palette, light mode */
@import "./css/themes/dark.css";       /* [data-mode="dark"] — mode-only overrides */
@import "./css/themes/classic.css";    /* [data-theme="classic"] + dark variant */
@import "./css/themes/mud-palette.css";

/* Base — reset, typography, focus */
@import "./css/base/reset.css";
@import "./css/base/typography.css";
@import "./css/base/focus.css";

/* Layer 3 — Components (BEM) */
@import "./css/components/button.css";
@import "./css/components/card.css";
@import "./css/components/chip.css";
@import "./css/components/form.css";
@import "./css/components/table.css";
@import "./css/components/dialog.css";
@import "./css/components/drawer.css";
@import "./css/components/tooltip.css";
@import "./css/components/markdown.css";
@import "./css/components/ba-spec.css";
@import "./css/components/ba-dictionary.css";
@import "./css/components/ba-element-drawer.css";
@import "./css/components/ba-markdown.css";
@import "./css/components/ba-structured-editor.css";

/* Layer 4 — Vendor overrides (MudBlazor tweaks — removed in React port) */
@import "./css/vendor/mudblazor-overrides.css";

/* ============================================
   Font Loading
   ============================================ */

/* Red Hat Display - variable font (váhy 300-900) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('fonts/RedHatDisplayVF.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

.mud-layout {
    overflow: hidden;
}

.mud-main-content {
    height: 100%;
    overflow-y: auto;
    /* Light: soft grey canvas so white panels lift off. Dark: theme-specific
       page-bg token (classic = #121212, modern = gray-950) — no hard-coded
       navy override anymore. */
    background-color: var(--color-gray-100);
}
html[data-mode="dark"] .mud-main-content {
    background-color: var(--mud-palette-background);
}

/* ============================================
   Theme Variables
   ============================================ */

:root {
    /* Reconnect dialog — pulls from primary brand */
    --reconnect-bg:                var(--color-bg-surface);
    --reconnect-color:             var(--color-text-primary);
    --reconnect-btn-bg:            var(--color-primary);
    --reconnect-btn-color:         var(--color-on-primary);
    --reconnect-btn-hover:         var(--color-primary-hover);
    --reconnect-animation-color:   var(--color-primary);

    /* Minimal layout gradient (login) — built from --color-primary so it reacts to both
       data-mode (light/dark) and data-theme (classic = LightBlue, modern = brand purple)
       without needing per-variant overrides. End fades primary toward black for depth. */
    --minimal-layout-gradient-start: var(--color-primary);
    --minimal-layout-gradient-end:   color-mix(in srgb, var(--color-primary) 65%, black);
}

/* ============================================
   Layout Styles
   ============================================ */

.minimal-layout-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--minimal-layout-gradient-start) 0%, var(--minimal-layout-gradient-end) 100%);
    position: relative;
    overflow: hidden;
}

.minimal-layout-bg > .mud-container {
    position: relative;
    z-index: 1;
}

.particle-network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   Base Styles
   ============================================ */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-red-800);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-white);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-strong);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Markdown content styly žijí v komponentě MarkdownViewer (MarkdownViewer.razor.css)
   — komponentové CSS, scope-aware. Žádné globální markdown rules tady. */

/* ============================================
   Main Content - Responsive Padding
   ============================================ */

.main-content-responsive {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 601px) {
    .main-content-responsive {
        padding-left: var(--layout-pad-x, 1rem);
        padding-right: var(--layout-pad-x, 1rem);
    }
}

/* Density-aware padding around the page body. The MudContainer in MainLayout
   carries Class="py-4" which is a fixed 16px utility — override it so the
   gap between the appbar and the first page block follows --layout-pad-y. */
html .mud-main-content > .mud-container.py-4 {
    padding-top: var(--layout-pad-y);
    padding-bottom: var(--layout-pad-y);
}

/* ============================================================================
   Density utility bridges — MudBlazor utility classes → density tokens
   ============================================================================
   MudBlazor's `.pa-4`, `.mb-4`, `.mt-4`, `.ma-4` etc. are `!important` at 1rem.
   That's fine for an inline chip margin, but when they're the *panel* spacing
   the compact/spacious density should compress/expand them.

   Scope: surface containers (`.mud-paper`, `.mud-card`) + the page-title row.
   Typography / chips / buttons keep their pixel-stable utility margins. */

/* Panel padding — pa-2..pa-8 scale proportionally to density */
html .mud-paper.pa-8,
html .mud-card.pa-8 {
    padding: calc(var(--layout-gap) * 2) !important;
}
html .mud-paper.pa-6,
html .mud-card.pa-6 {
    padding: calc(var(--layout-gap) * 1.5) !important;
}
html .mud-paper.pa-4,
html .mud-card.pa-4 {
    padding: var(--layout-gap) !important;
}
html .mud-paper.pa-3,
html .mud-card.pa-3 {
    padding: calc(var(--layout-gap) * 0.75) !important;
}
html .mud-paper.pa-2,
html .mud-card.pa-2 {
    padding: calc(var(--layout-gap) * 0.5) !important;
}

/* Panel vertical margins (mb-*/mt-*) */
html .mud-paper.mb-4,
html .mud-paper.my-4,
html .mud-card.mb-4,
html .mud-card.my-4 {
    margin-bottom: var(--layout-gap) !important;
}
html .mud-paper.mb-3,
html .mud-card.mb-3 {
    margin-bottom: calc(var(--layout-gap) * 0.75) !important;
}
html .mud-paper.mb-2,
html .mud-card.mb-2 {
    margin-bottom: calc(var(--layout-gap) * 0.5) !important;
}
html .mud-paper.mt-4,
html .mud-paper.my-4,
html .mud-card.mt-4,
html .mud-card.my-4 {
    margin-top: var(--layout-gap) !important;
}
html .mud-paper.mt-3,
html .mud-card.mt-3 {
    margin-top: calc(var(--layout-gap) * 0.75) !important;
}
html .mud-paper.mt-2,
html .mud-card.mt-2 {
    margin-top: calc(var(--layout-gap) * 0.5) !important;
}

/* Page-title row margin — the common `<MudText Typo="h4" Class="mb-4">` pattern
   plus `<MudStack Class="mb-4">` header rows used across pages. */
html .mud-main-content .mud-typography-h4.mb-4,
html .mud-main-content .mud-typography-h5.mb-4,
html .mud-main-content > .mud-container > .mud-stack.mb-4,
html .mud-main-content > .mud-container > .mud-stack.mb-3 {
    margin-bottom: var(--layout-gap) !important;
}

/* MudGrid top margin (when used as a content-level block wrapper). */
html .mud-grid.mt-4 {
    margin-top: var(--layout-gap) !important;
}

/* Project list cards — MudCard has its own internal padding via
   MudCardHeader / MudCardContent (fixed 16px). Bridge those into density. */
html .mud-card-header,
html .mud-card-content {
    padding: var(--layout-gap) !important;
}
html .mud-card-actions {
    padding: calc(var(--layout-gap) * 0.5) calc(var(--layout-gap) * 0.75) !important;
}

/* MudDataGrid / MudTable — table rows get density-aware vertical padding via
   `[data-density="compact"]` rules in mudblazor-overrides.css already. The
   surrounding container padding (when MudTable is rendered inside a wrapper
   paper without pa-4) stays at default; use `Class="pa-4"` on wrappers to
   opt in. */

/* Panel stack — density-aware vertical rhythm between stacked boxes
   (MudPaper, sections, cards). Usage:

       <div class="panel-stack">
           <MudPaper>…</MudPaper>
           <MudPaper>…</MudPaper>
       </div>

   Uses flex `gap` on the parent rather than `margin-bottom` on each child,
   so we avoid fighting MudBlazor's `!important` margin utilities and don't
   pay for a trailing margin after the last panel. */
.panel-stack {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
}

/* ============================================
   AppBar Breadcrumbs
   ============================================ */

.mud-appbar-breadcrumbs {
    flex: 1 1 auto;
    min-width: 0;                   /* allow shrink below content width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Force AppBar text color on all breadcrumb elements (links, text, icons, separators).
   Without this, MudBreadcrumbs links use the theme's primary color which is invisible
   against a primary-colored AppBar. --mud-palette-appbar-text adapts to dark/light theme.
   Separator content je v `<span>` UVNITŘ `.mud-breadcrumb-separator` — MudBlazor 9.x
   defaultně dává `opacity: 0.38` přímo na span, takže přepíšeme TAM. */
.mud-appbar-breadcrumbs .mud-breadcrumb-item,
.mud-appbar-breadcrumbs .mud-breadcrumb-item a,
.mud-appbar-breadcrumbs .mud-breadcrumb-item .mud-typography,
.mud-appbar-breadcrumbs .mud-breadcrumb-item .mud-icon-root,
.mud-appbar-breadcrumbs .mud-breadcrumb-separator,
.mud-appbar-breadcrumbs .mud-breadcrumb-separator > span {
    color: var(--mud-palette-appbar-text) !important;
}

/* Breadcrumbs are supplementary context — keep them subtle. */
.mud-appbar-breadcrumbs .mud-breadcrumb-item a,
.mud-appbar-breadcrumbs .mud-breadcrumb-item .mud-icon-root {
    opacity: 0.55;
}

/* Separator content živí v `> span`. MudBlazor default opacity je 0.38, přepisujeme
   na 0.7 (light mode) / 0.85 (dark mode) pro čitelnost na barevném AppBaru. */
.mud-appbar-breadcrumbs .mud-breadcrumb-separator > span {
    opacity: 0.7 !important;
}

html[data-mode="dark"] .mud-appbar-breadcrumbs .mud-breadcrumb-separator > span {
    opacity: 0.85 !important;
}

.mud-appbar-breadcrumbs .mud-breadcrumb-item a:hover {
    opacity: 0.9;
    text-decoration: underline;
}

/* Current (disabled) page — a bit more prominent than the links. */
.mud-appbar-breadcrumbs .mud-breadcrumb-item .mud-typography {
    opacity: 0.75;
}

/* ============================================
   Detail Drawer - Responsive Width
   ============================================ */

/* Hide closed drawer completely */
.mud-drawer.detail-drawer:not(.mud-drawer--open) {
    visibility: hidden !important;
    width: 0 !important;
}

/* Mobile-first: full width on small screens */
.mud-drawer.mud-drawer--open.detail-drawer {
    width: 100% !important;
    visibility: visible !important;
}

/* Tablet: constrained with margin */
@media (min-width: 601px) {
    .mud-drawer.mud-drawer--open.detail-drawer {
        width: calc(100vw - 2rem) !important;
        max-width: 52em !important;
    }
}

/* Desktop: optimal reading width (~50 chars per line) */
@media (min-width: 961px) {
    .mud-drawer.mud-drawer--open.detail-drawer {
        width: 52em !important;
        max-width: 100vw !important;
    }
}

/* Koexistence s AI chatbotem (vyjíždí zprava: position:fixed right:0 z-index:1099).
   Když je chatbot otevřený, BaModuleLayout nastaví --mw-chatbot-offset = jeho šířka;
   pravý detail-drawer se o ni odsadí → sedí VEDLE chatbota, ne přes něj. Mimo BA
   layout (proměnná nenastavená) fallback 0 = původní chování u pravého okraje. */
.mud-drawer.mud-drawer--open.detail-drawer {
    right: var(--mw-chatbot-offset, 0) !important;
}

/* „Nová analýza" drawer: v režimu „Popsat textem" vyplní pole se zadáním pro AI
   zbývající výšku draweru (flex chain přes MudBlazor multiline textarea). */
.ba-na-form {
    flex: 1 1 auto;
    min-height: 0;
}
/* MudBlazor input controly mají defaultně flex:1 1 auto → ve flex-column by rostly
   (hlavně MudSelect se nafoukl). Zafixuj všechny děti na natural height; růst nech
   jen textarea poli, aby zadání pro AI vyplnilo zbytek výšky. */
.ba-na-form > * {
    flex: 0 0 auto;
}
.ba-na-form > .ba-na-grow {
    flex: 1 1 auto;
    min-height: 160px;
    display: flex;
    flex-direction: column;
}
.ba-na-grow .mud-input-control-input-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.ba-na-grow .mud-input {
    flex: 1 1 auto;
}
.ba-na-grow textarea.mud-input-slot,
.ba-na-grow textarea {
    height: 100% !important;
    resize: none;
    box-sizing: border-box;
}

/* Ensure drawer content fills full height and doesn't create its own scrollbar */
.mud-drawer.detail-drawer .mud-drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================
   Specs Toolbar - Responsive Layout
   ============================================ */

.specs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Same surface token as the wrapping MudPaper — sticky strip blends with
       its parent panel instead of reading as a contrasting band. */
    background-color: var(--mud-palette-surface);
}

/* Toolbar icon buttons - subtle circular style */
.specs-toolbar-btn {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 50%;
    padding: 4px;
    width: 28px;
    height: 28px;
    min-width: 28px;
}

/* Level buttons - compact, matching toolbar style */
.specs-level-btn {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: var(--mud-default-borderradius);
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Status filter chips - allow wrap */
.specs-status-filter {
    flex-wrap: wrap;
}

/* Search field - grow to fill available space */
.specs-search-field {
    flex: 1;
    min-width: 180px;
}

/* Push "New Spec" button to the right */
.specs-toolbar > .mud-menu {
    margin-left: auto;
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
    .specs-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .specs-toolbar > * {
        justify-content: center;
    }

    /* Center the menu button on mobile */
    .specs-toolbar > .mud-menu {
        margin-left: 0;
        align-self: center;
    }
}

/* ============================================
   Breadcrumb Navigation
   ============================================ */

.mud-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) a {
    color: var(--mud-palette-primary);
}

.mud-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) a:hover {
    color: var(--mud-palette-primary-darken);
}

/* ============================================
   Knowledge Detail - Scrollbar
   ============================================ */

.kd-content-col,
.kd-grid > .mud-grid-item:last-child {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.kd-content-col::-webkit-scrollbar,
.kd-grid > .mud-grid-item:last-child::-webkit-scrollbar {
    width: 4px;
}

.kd-content-col::-webkit-scrollbar-track,
.kd-grid > .mud-grid-item:last-child::-webkit-scrollbar-track {
    background: transparent;
}

.kd-content-col::-webkit-scrollbar-thumb,
.kd-grid > .mud-grid-item:last-child::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 2px;
}

.kd-content-col::-webkit-scrollbar-thumb:hover,
.kd-grid > .mud-grid-item:last-child::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-hover);
}

/* ============================================
   Settings Page - Sidebar Navigation
   ============================================ */

/* Layout: sidebar + content side by side */
.settings-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* Sidebar nav — matches main drawer: white strip, only active item highlighted. */
.settings-nav {
    display: flex;
    flex-direction: column;
    min-width: 320px;
    max-width: 360px;
    flex-shrink: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    border-radius: 4px 0 0 4px;
    box-shadow: var(--mud-elevation-2);
}

/* Nav items — same height as MudNavLink in the drawer via --nav-item-height. */
.settings-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--nav-item-height);
    padding: 0 20px;
    border: none;
    border-right: 2px solid transparent;
    margin-right: -1px;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    transition: background 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.settings-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.settings-nav-item.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-right-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* Content panel */
.settings-content {
    flex: 1 1 0;
    min-width: 0;
    background-color: var(--mud-palette-surface);
    border-radius: 0 4px 4px 0;
    box-shadow: var(--mud-elevation-2);
}

/* Mobile: stack vertically */
@media (max-width: 959.98px) {
    .settings-layout {
        flex-direction: column;
    }

    .settings-nav {
        flex-direction: row;
        min-width: unset;
        max-width: 100%;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        overflow-x: auto;
    }

    .settings-nav-item {
        white-space: nowrap;
        border-right: none;
        border-bottom: 3px solid transparent;
    }

    .settings-nav-item.active {
        border-right-color: transparent;
        border-bottom-color: var(--mud-palette-primary);
    }

    .settings-content {
        border-radius: 0;
    }
}

/* ============================================
   Project Cockpit Header (TP-1402)
   ============================================ */

/* Header banner above cockpit tabs — project identity (avatar + eyebrow + name)
   + manage buttons. Azure DevOps-inspired layout. */
.project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(var(--layout-pad-y) * 0.5) calc(var(--layout-pad-x) * 0.5);
}

.project-header__name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Project avatar: colored square with 1-2 initials (primary gradient). */
.project-header__avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-lighten, var(--mud-palette-primary)));
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    user-select: none;
}

.project-header__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.project-header__eyebrow {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.project-header__title {
    font-weight: 600;
}

/* Members card avatars (Azure DevOps-inspired). Visible to every project member
   on the Overview tab so they can ping a colleague via in-app notification. Photos
   from Entra ID would replace the initial-only fallback in a future integration. */
.cockpit-member-link {
    text-decoration: none;
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}

.cockpit-member-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cockpit-member-avatar-wrap {
    position: relative;
    display: inline-block;
}

.cockpit-member-avatar {
    transition: transform 0.12s ease-in-out;
    font-size: 12px;
    font-weight: 600;
}

.cockpit-member-link:hover .cockpit-member-avatar {
    transform: translateY(-2px);
}

.cockpit-member-avatar--owner {
    box-shadow: 0 0 0 2px #B8860B;
}

.cockpit-member-avatar--more {
    background-color: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-text-secondary) !important;
    cursor: default;
    font-size: 12px;
    font-weight: 600;
}

.cockpit-member-owner-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    color: #B8860B;
    background: var(--mud-palette-surface);
    border-radius: 50%;
    padding: 1px;
    font-size: 14px !important;
    pointer-events: none;
}

.cockpit-member-multirole-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    line-height: 1;
    pointer-events: none;
}

.cockpit-members-legend {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.cockpit-members-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cockpit-members-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.cockpit-gitrepo-url {
    word-break: break-all;
    font-family: monospace;
    font-size: 0.85rem;
}


/* ============================================
   Project Development — Kanban Board (TP-1402)
   Azure DevOps Boards style: transparent columns with top accent,
   cards with status-colored left edge, subtle hover lift.
   (Not scoped CSS — MudDropContainer renders outside component scope.)
   ============================================ */

.kanban-board {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    min-height: 500px;
    padding-bottom: 8px;
}

.kanban-column {
    flex: 1;
    min-width: 280px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Column container is transparent — header and zone are two separate panels
       with a gap between them (Azure DevOps / Linear pattern). Status tint
       goes on the header only; zone stays neutral grey. */
    background-color: transparent;
}

.kanban-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 8px;
    /* Fixed min-height so the optional expand button in the Done column (which
       is min-height: 28px) doesn't push that header taller than its siblings. */
    min-height: 40px;
    /* Only the header carries the status colour — ~10% tint so it reads as a
       distinct label strip while the zone below stays neutral. */
    background-color: color-mix(in srgb, var(--kanban-status-color, var(--mud-palette-text-secondary)) 10%, var(--mud-palette-surface));
    border-radius: 6px;
}

.kanban-column__title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.kanban-column__icon {
    color: var(--kanban-status-color, var(--mud-palette-text-secondary)) !important;
    flex-shrink: 0;
}

.kanban-column__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-column__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Count — simple number next to status label (Jira style). No pill; the column
   bg already signals status so extra colour on the count would be noise. */
.kanban-column__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.kanban-column__count--hidden {
    background-color: transparent;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

.kanban-column__zone {
    flex: 1;
    min-height: 200px;
    padding: 10px;
    overflow-y: auto;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    /* Neutral grey body — subtle tint darker than surface so the elevated
       cards (bg = surface + shadow) pop against the zone. */
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    border-radius: 6px;
}

/* Dark mode: flip the tint direction — cards keep surface bg, zone goes
   darker (toward page bg) so the card/zone contrast matches the light-mode
   relationship. Without this the zone tint mixes text (white) into surface
   and ends up brighter than the card. */
html[data-mode="dark"] .kanban-column__zone {
    background-color: color-mix(in srgb, var(--mud-palette-background) 45%, var(--mud-palette-surface));
}


/* Card — matches the same surface/elevation pattern as other elevated panels
   (MudPaper.mud-elevation-1 body, rounded 4px, subtle shadow). Status color
   is communicated by the parent column (top accent) — no card-level accent
   to avoid redundancy. Card is clickable → drawer. */
.kanban-card {
    position: relative;
    background-color: var(--mud-palette-surface);
    border-radius: 4px;
    /* Comfortable default — roomy Jira-style card. Compact + spacious overrides
       are hand-tuned below (not calc'd from --density-scale) because both
       padding and typography need to shift together and --density-scale maps
       to a single multiplier that can't span both cleanly. */
    padding: 16px 18px;
    margin-bottom: 12px;
    cursor: grab;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow:
        0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132),
        0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
}

.kanban-card:hover {
    box-shadow:
        0 6.4px 14.4px 0 rgba(0, 0, 0, 0.18),
        0 1.2px 3.6px 0 rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.kanban-card:active {
    cursor: grabbing;
}

/* Card head — drag handle + ID chip on left, open-in-new icon on right (Jira pattern). */
.kanban-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.kanban-card__drag-handle {
    display: inline-flex;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    cursor: grab;
    flex-shrink: 0;
}

.kanban-card:hover .kanban-card__drag-handle {
    opacity: 1;
}

.kanban-card__ref {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    /* Solid TaskPack teal with white text — matches the filled-chip style used
       elsewhere (knowledge list, tree) for the TaskPack type label. */
    color: #FFFFFF;
    background-color: #009688;
    border: 0;
    border-radius: 3px;
}

.kanban-card__title {
    font-size: 14px;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    word-break: break-word;
    margin-bottom: 8px;
}

.kanban-card__open {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0;
    flex-shrink: 0;
    margin-left: auto;
    transition: opacity 0.15s ease;
}

.kanban-card:hover .kanban-card__open {
    opacity: 0.7;
}

/* Meta row: category + author, separated by subtle dot */
.kanban-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.kanban-card__category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: lowercase;
}

/* Status dot before category — inherits --kanban-status-color from parent column. */
.kanban-card__status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--kanban-status-color, var(--mud-palette-text-secondary));
    flex-shrink: 0;
}

.kanban-card__author {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.kanban-card__author .mud-icon-root {
    font-size: 14px !important;
}

/* Tags row — compact, sits between meta and parent. TagChip keeps its own
   colour per tag; we just tighten the gap and let the chips flow. */
.kanban-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.kanban-card__tag-more {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    padding: 0 4px;
}

/* ---------- Density overrides — hand-tuned per mode ----------
   Compact: close to the original Jira-compact sizing user found "just right".
   Spacious: noticeably roomier for low-density screens. */

html[data-density="compact"] .kanban-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}
html[data-density="compact"] .kanban-card__head,
html[data-density="compact"] .kanban-card__title {
    margin-bottom: 6px;
}
html[data-density="compact"] .kanban-card__title {
    font-size: 13px;
    line-height: 1.35;
}
html[data-density="compact"] .kanban-card__meta,
html[data-density="compact"] .kanban-card__tags {
    margin-bottom: 4px;
    font-size: 11px;
}
html[data-density="compact"] .kanban-card__parent {
    padding-top: 4px;
    font-size: 11px;
}
html[data-density="compact"] .kanban-card__tag-more {
    font-size: 11px;
}

html[data-density="spacious"] .kanban-card {
    padding: 20px 22px;
    margin-bottom: 16px;
}
html[data-density="spacious"] .kanban-card__head,
html[data-density="spacious"] .kanban-card__title {
    margin-bottom: 10px;
}
html[data-density="spacious"] .kanban-card__title {
    font-size: 15px;
    line-height: 1.45;
}
html[data-density="spacious"] .kanban-card__meta,
html[data-density="spacious"] .kanban-card__tags {
    margin-bottom: 8px;
    font-size: 13px;
}
html[data-density="spacious"] .kanban-card__parent {
    padding-top: 8px;
    font-size: 13px;
}
html[data-density="spacious"] .kanban-card__tag-more {
    font-size: 13px;
}

/* Parent row — AccountTree icon + parent ref + title, single ellipsed line.
   Rendered as <a> so the parent FeatureSpec is clickable. stopPropagation on click
   prevents the card's drawer from also opening. */
.kanban-card__parent {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-decoration: none;
    transition: color 0.15s ease;
}

.kanban-card__parent:hover {
    color: var(--mud-palette-primary);
}

.kanban-card__parent:hover .kanban-card__parent-title {
    text-decoration: underline;
}

.kanban-card__parent .mud-icon-root {
    font-size: 14px !important;
    flex-shrink: 0;
}

.kanban-card__parent-ref {
    font-weight: 600;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.kanban-card__parent-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Status color map — declarative, keyed by data-status on column + card. */

.kanban-column[data-status="draft"],
.kanban-card[data-status="draft"] {
    --kanban-status-color: var(--mud-palette-text-secondary);
}

.kanban-column[data-status="ready"],
.kanban-card[data-status="ready"] {
    --kanban-status-color: var(--mud-palette-info);
}

.kanban-column[data-status="in-progress"],
.kanban-card[data-status="in-progress"] {
    /* Tertiary (teal/indigo depending on theme) — distinct from info (ready) so
       "připraveno" and "probíhá" don't both read as blue columns. */
    --kanban-status-color: var(--mud-palette-tertiary);
}

.kanban-column[data-status="review"],
.kanban-card[data-status="review"] {
    --kanban-status-color: var(--mud-palette-warning);
}

.kanban-column[data-status="done"],
.kanban-card[data-status="done"] {
    --kanban-status-color: var(--mud-palette-success);
}

.kanban-column[data-status="blocked"],
.kanban-card[data-status="blocked"] {
    --kanban-status-color: var(--mud-palette-error);
}

/* ============================================
   Specs Tree - Drag & Drop (TP-846)
   ============================================ */

.specs-node-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    padding: 4px 0;
}

/* ============================================
   BA Dashboard Tree (ES-241) — analog .specs-node-row, ale s status chip /
   action button. Musí být v global app.css (ne scoped ::deep), aby pronikla
   do MudTreeViewItem komponenty.
   ============================================ */

.ba-tree-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    padding: 4px 0;
    min-width: 0;
}

.ba-tree-row--card {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 80ms ease;
}

.ba-tree-row--card:hover {
    background-color: var(--mud-palette-action-hover);
}

.ba-tree-row--iteration {
    padding-top: 6px;
    padding-bottom: 2px;
}

.ba-tree-iteration-label {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ba-tree-card-title {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    margin: 0;          /* <p> má default margin-block 1em (= roztáhlo řádek na 90px) */
}

.ba-tree-card-meta {
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
}

.ba-tree-card-code {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ba-tree-row-action {
    flex-shrink: 0;
    /* Vertikálně vystředí ikony akcí — edit/import jsou MwIconButton, export je
       MudMenu icon button (jiný box) → bez tohoto seděl download mimo střed.
       UX 2026-05-29. */
    display: inline-flex;
    align-items: center;
}

/* AnalysisLevel badge úplně vpravo — margin-left:auto absorbuje volný prostor
   ve flex řádku a odtlačí badge k pravému okraji. */
.ba-tree-card-level {
    margin-left: auto;
    flex-shrink: 0;
}

/* Analýzy tabulka v seskupeném režimu: MudTable si u Expandable grupování přidává
   vlastní leading expand sloupec. Bez šířky spolkne všechen zbylý prostor (~400px),
   takže chevron a kód skupiny jsou daleko od sebe. Připneme ho na úzkou šířku.
   Aplikuje se JEN když je tabulka grouped (ve flat režimu žádný expand sloupec není
   a první sloupec je Kód, který nesmíme zúžit). */
.ba-analyses-grouped td:first-child,
.ba-analyses-grouped th:first-child {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

.specs-drag-over-valid {
    background-color: var(--mud-palette-primary-lighten) !important;
    outline: 2px dashed var(--mud-palette-primary) !important;
    border-radius: 4px;
}

/* Invalid drop: no background change, just cursor — block icon shown via Blazor */
.specs-drag-over-invalid {
    cursor: not-allowed !important;
}

.specs-drop-root-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 4px;
    cursor: default;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: sticky;
    top: 56px; /* Below sticky .specs-toolbar */
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

.specs-drop-root-zone--active {
    border-color: var(--mud-palette-warning);
    background-color: var(--mud-palette-warning-lighten);
}

/* EP #5631-1 — step-result rows in TestRunSummary expanded scenarios. Border-left
   accent carries the pass/fail signal; everything else stays calm so tester
   doesn't have to parse dual color blocks + result chip + label. */
.qa-step-row {
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: var(--mud-palette-surface);
}

.qa-step-row__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.qa-step-row__num {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-width: 24px;
}

.qa-step-row__action {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.qa-step-row__duration {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.qa-step-row__expected {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    font-size: 13px;
    white-space: pre-wrap;
    margin-left: 32px;
}

.qa-step-row__comment {
    margin-top: 6px;
    margin-left: 32px;
    padding: 6px 10px;
    background-color: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.qa-step-row__exec {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    margin-left: 32px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}