html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #181818;
    color: #e6e6e6;
}

/* Odznak s počtem notifikací: posunut dovnitř ikony zvonku (svisle na střed
   pravé strany), aby se v nízkém toolbaru neořezával nahoře. Výšku toolbaru nemění. */
.notif-badge .mud-badge {
    top: 50% !important;
    bottom: auto !important;
    right: 4px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

/* Odsazení obsahu záložek (MudTabs) od lišty se záložkami — jinak je obsah nalepený. */
.mud-tabs-panels {
    padding-top: 12px;
}

/* Entity formuláře: každý control vždy na vlastním řádku a s fixní šířkou 500px,
   akční tlačítka zarovnaná k polím (ne roztažená přes celý široký monitor). */
.narrow-form .mud-grid-item {
    flex: 0 0 100% !important;   /* jeden control na řádek */
    max-width: 100% !important;
}
.narrow-form .mud-input-control,
.narrow-form .mud-picker,
.narrow-form .mud-select {       /* MudSelect má kořen .mud-select (flex-grow:1), ne .mud-input-control */
    width: 500px !important;     /* fixní šířka controlu */
    max-width: 100%;             /* na úzkém okně nepřeteče */
}
/* Editovatelný grid uvnitř formuláře (položky faktury): pole vyplní buňku, ne fixních 500px. */
.invoice-items-grid .mud-input-control {
    width: 100% !important;
}
/* Poznámka u poptávky: velký výchozí rozměr + ruční svislé roztažení v mezích.
   Cílíme přes vlastní obalový div na textarea uvnitř — nezávisle na tom, kam
   MudBlazor umístí Class. !important přebíjí MudBlazorem nastavené resize:none. */
.resizable-note textarea {
    resize: vertical !important;
    min-height: 10rem;   /* výchozí ~6 řádků */
    max-height: 30rem;   /* strop ~3× výchozí, ať se nerozbije UI */
}
/* Akční tlačítka (Zpět/Uložit) zarovnaná k pravému okraji obsahu — v celém systému. */
.narrow-form .form-actions {
    width: 100%;
}

/* Rozbalovací nabídka MudSelectu se vykresluje mimo formulář (v popover provideru),
   takže ji šířka 500px formuláře neomezí. Bez omezení se menu roztáhne podle obsahu
   (dlouhé názvy firem) přes celou obrazovku — zastropujeme ho na šířku pole. */
.mud-popover:has(.mud-list) {
    max-width: min(500px, 90vw);
}

/* Rozcestník marketplace — klikací karty s jemným hover efektem. */
.marketplace-hub-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    border: 1px solid #2c2c2c;
}
.marketplace-hub-card:hover {
    transform: translateY(-3px);
    border-color: #21b6a6;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(33,182,166,0.25);
}

a, .btn-link {
    color: #5ba3d9;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

h1, h2, h3, h4, h5, h6 {
    color: #f0f0f0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}
/* ---- Nav drawer: user section pinned to the bottom ---- */
/* Drawer content becomes a full-height flex column so the user footer can sit at the bottom.
   overflow-x:hidden je nutné — v mini railu ořezává popisky navigace i uživatelský text/avatar,
   jinak přetékají na levý okraj (MudBlazor na tomto elementu horizontální ořez očekává). */
.mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
}

.drawer-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
}

/* Nav links keep their natural height and scroll if too long; volné místo jde pod ně (nad divider). */
.drawer-nav {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Účet + divider drží u spodku draweru; margin-top:auto pohltí volné místo nad divider,
   takže divider sedí těsně nad uživatelským jménem (ne uprostřed prázdné mezery). */
.drawer-user {
    margin-top: auto;
    flex: 0 0 auto;
}

/* Sbalený mini rail: popisky navigace začínají hned za ikonou, takže pouhý ořez šířkou
   nechá prosáknout pár pixelů jejich začátku. Proto je ve sbaleném stavu (mimo hover)
   úplně skryjeme; na hover se rail rozbalí a text se plynule ukáže. V otevřeném draweru
   (--open) i v mobilním overlay (Temporary, bez .mud-drawer-mini) zůstává text plně vidět. */
.mud-drawer-mini .mud-nav-link-text {
    transition: opacity .2s ease;
}
.mud-drawer-mini.mud-drawer--closed:not(:hover) .mud-nav-link-text {
    opacity: 0;
}

/* Uživatelský blok ve sbaleném railu: jméno/e-mail skryjeme úplně (display:none — ne jen
   opacity, jinak zabírá šířku a rozhodí centrování) a avatar zmenšíme z 40 na 32 px a
   vycentrujeme. Proti 24px ikonám navigace pak nepůsobí předimenzovaně a nedotýká se hrany
   railu. Na hover / v otevřeném draweru se vrátí plný 40px avatar se jménem. */
.mud-drawer-mini .user-menu .mud-avatar {
    transition: width .2s ease, height .2s ease, min-width .2s ease;
}
.mud-drawer-mini.mud-drawer--closed:not(:hover) .user-menu-info {
    display: none;
}
.mud-drawer-mini.mud-drawer--closed:not(:hover) .user-menu-account {
    width: 100%;
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}
.mud-drawer-mini.mud-drawer--closed:not(:hover) .user-menu .mud-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: .8rem;
}

/* ---- Responzivita / mobil ---- */

/* Padding obsahu stránky: menší na mobilu, větší na desktopu. */
.page-container {
    padding: 16px;
}
@media (min-width: 960px) {
    .page-container {
        padding: 24px;
    }
}

/* AppBar: titulek se smrskne a ořízne jako první, akční ikony se nikdy nezalomí. */
.appbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
/* Na úzkém mobilu ubereme mezery mezi ikonami, ať se admin panel (více ikon) vejde. */
@media (max-width: 599px) {
    .appbar-actions .mud-button-root.mud-icon-button {
        padding: 6px;
    }
}

/* Tabulky (MudTable i MudDataGrid) na úzké obrazovce vodorovně scrollují uvnitř sebe,
   místo aby roztáhly celou stránku a vytvořily vodorovný posuvník celého layoutu. */
.mud-table-container {
    overflow-x: auto;
}

/* Popovery menu (přepínače, notifikace) se nikdy nevejdou-li širší než obrazovka. */
.mud-popover {
    max-width: 96vw;
}

/* Pojistka proti vodorovnému přetečení celé stránky na mobilu. */
@media (max-width: 599px) {
    body {
        overflow-x: hidden;
    }
}

/* Pod breakpointem Md je levý drawer dočasný overlay (netlačí obsah). Pojistka proti „černé díře":
   po zúžení okna nesmí zůstat levý margin obsahu z desktopového mini railu — kdyby MudBlazor
   margin-třídu na .mud-layout přepočítal se zpožděním, tenhle media query ho spolehlivě vynuluje. */
@media (max-width: 959.98px) {
    .mud-main-content {
        margin-left: 0 !important;
    }
}

/* ============================================================================
   RouteBridge design system — sladěno s login/onboarding obrazovkami.
   Svěží modro-tyrkysové akcenty, gradientová primární tlačítka, jemné karty,
   textura pozadí. (Login/onboarding mají vlastní scoped styl a nejsou dotčeny.)
   ============================================================================ */
:root {
    --rb-grad: linear-gradient(135deg, #2f8fd0, #21a894);
    --rb-grad-hover: linear-gradient(135deg, #37a0e0, #26c2ad);
    --rb-teal: #4ee0c4;
    --rb-teal-deep: #21b6a6;
    --rb-blue: #2f9bd4;
    --rb-surface: #1f1f1f;
    --rb-border: #2c2c2c;
}

/* ---- App bar: gradientový spodní akcent + brand chip ---- */
.app-appbar {
    background-color: #191919 !important;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #2f8fd0 0%, #21a894 55%, rgba(33,168,148,0) 100%) 1;
    backdrop-filter: saturate(1.1);
}
.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-brand-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--rb-grad); color: #fff;
    font-weight: 800; font-size: 1rem; letter-spacing: -0.02em;
    box-shadow: 0 2px 10px rgba(33,168,148,0.4);
    flex: 0 0 auto;
}
.appbar-title { font-weight: 700; letter-spacing: -0.01em; color: #f2f2f2; }

/* ---- Drawer: tmavší podklad, jemná textura, tyrkysový aktivní stav ---- */
.app-drawer {
    background-color: #1b1b1b !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
    background-size: 22px 22px;
    border-right: 1px solid #262626;
}
.app-drawer .mud-nav-link.active {
    color: var(--rb-teal) !important;
    background: linear-gradient(90deg, rgba(33,182,166,0.16), rgba(33,182,166,0) 85%);
    border-left: 3px solid var(--rb-teal-deep);
}
.app-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--rb-teal) !important; }
.app-drawer .mud-nav-link { border-left: 3px solid transparent; transition: background .15s ease, color .15s ease; }
.app-drawer .mud-nav-link:hover { background: rgba(255,255,255,0.03); }

/* ---- Hlavní obsah: jemné barevné záře + tečkovaná textura ---- */
.app-main-content {
    min-height: 100vh;
    background-color: #181818;
    background-image:
        radial-gradient(1100px 440px at 92% -10%, rgba(47,155,212,0.08), transparent 70%),
        radial-gradient(900px 400px at 3% 108%, rgba(33,182,166,0.06), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.017) 1px, transparent 0);
    background-size: auto, auto, 22px 22px;
    background-attachment: fixed, fixed, fixed;
}

/* ---- Karty v obsahu: zaoblení, jemný okraj a horní světelný nádech ---- */
.page-container .mud-paper {
    border: 1px solid var(--rb-border);
    border-radius: 14px !important;
    background-color: var(--rb-surface);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 150px);
}

/* ---- Gradientová primární / info / sekundární tlačítka (jako login CTA) ---- */
.mud-button-filled.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-info {
    background: var(--rb-grad);
    color: #fff;
    box-shadow: 0 3px 12px rgba(33,168,148,0.25);
}
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-info:hover {
    background: var(--rb-grad-hover);
    box-shadow: 0 5px 18px rgba(33,168,148,0.35);
}
.mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(135deg, #21a894, #159c86);
    color: #fff;
}
/* Pozitivní akce (Uložit, Uložit a zavřít, Přijmout) — tmavě tyrkysový gradient. */
.mud-button-filled.mud-button-filled-success {
    background: linear-gradient(135deg, #194d45, #12a488);
    color: #fff;
    box-shadow: 0 3px 12px rgba(18,164,136,0.22);
}
.mud-button-filled.mud-button-filled-success:hover { filter: brightness(1.12); }
.mud-button-root { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---- Taby / stepper: tyrkysový indikátor a aktivní stav ---- */
.mud-tabs .mud-tab-slider { background: linear-gradient(90deg, #2f9bd4, #21b6a6) !important; }
.mud-tab.mud-tab-active { color: var(--rb-teal) !important; }
.mud-stepper .mud-step-label-icon.mud-step-label-icon-active,
.mud-stepper .mud-step-label-icon.mud-step-label-icon-completed {
    background: var(--rb-grad) !important;
    color: #fff !important;
}

/* ---- Tabulky: čitelnější hlavička ---- */
.page-container .mud-table th,
.page-container .mud-table-root thead th {
    color: #cfcfcf;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---- Nadpisy: o něco výraznější ---- */
.page-container h1, .page-container h2, .page-container h3,
.page-container .mud-typography-h4, .page-container .mud-typography-h5 {
    letter-spacing: -0.02em;
}

/* Odkazy laděné do palety */
a, .btn-link { color: #4ea9dc; }

/* Odznak kategorie poptávky (osobní/firemní/cizí) na kartách burzy. */
.cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
}