html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

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

.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;
}

.centered-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background-color: #f7f7f9;
}

.auth-card {
    width: 100%;
    max-width: 24rem;
}

/* Критичност */

.severity-strip {
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
}

.severity-bar {
    height: 4px;
    border-radius: 2px;
}

/* Проектът в горната лента */

.project-header-button {
    text-transform: none;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    max-width: 22rem;
}

.project-header-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Само този вътрешен блок е колона. Етикетът на бутона не се пипа — иначе
   иконките отляво и отдясно също застават една под друга. */
.project-header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
    text-align: left;
}

.project-header-name {
    font-size: 0.95rem;
    font-weight: 500;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-header-slug {
    font-size: 0.7rem;
    opacity: 0.7;
    letter-spacing: 0.02em;
}

/* Kanban */

/* Табове отляво, заглавие в средата, действия отдясно — на един ред. */
/* Двете области в менюто: всяка със свой фон и лек контур, за да се вижда къде
   свършва едната и започва другата. Цветовете идват от палитрата, за да работят и в
   тъмна тема. */
.nav-area {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 0.25rem;
    margin: 0.5rem 0;
}

.nav-area-dev {
    background: rgba(var(--mud-palette-primary-rgb), 0.07);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
}

.nav-area-it {
    background: rgba(var(--mud-palette-tertiary-rgb), 0.09);
    border-color: rgba(var(--mud-palette-tertiary-rgb), 0.35);
}

.nav-area-network {
    background: rgba(var(--mud-palette-info-rgb), 0.09);
    border-color: rgba(var(--mud-palette-info-rgb), 0.35);
}

.nav-area-partners {
    background: rgba(var(--mud-palette-success-rgb), 0.09);
    border-color: rgba(var(--mud-palette-success-rgb), 0.35);
}

/* Неутрален, за разлика от трите работни области: „Система" не е място, където се
   работи, а поддръжката под тях. Цвят би я поставил наравно с тях. */
.nav-area-system {
    background: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-lines-default);
}

/* Вложените групи вътре в областта нямат нужда от собствен фон. */
.nav-area .mud-nav-group .mud-nav-link {
    background: transparent;
}

/* Табовете първи вземат каквото им трябва, действията — своето, а заглавието поема
   остатъка. Досега табовете и действията си делаха по 1fr и на страница без заглавие
   средната трета стоеше празна, докато табовете се чупеха на два реда.

   minmax(0, auto): по съдържание, но може и да се свие под него — иначе препълването
   не се превръща в плъзгане. */
.project-toolbar {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

/* Един ред, винаги. При наистина тясно се плъзгат настрани — това е по-добро от втори
   ред, който мести цялото съдържание надолу. */
.project-toolbar-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.project-toolbar-tabs .project-tab {
    flex: 0 0 auto;
}

/* Табовете дишат: иконата отляво, малко въздух около текста и заоблен ръб, за да не
   изглеждат натикани един в друг. */
.project-tab {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}

.project-tab .mud-icon-root {
    margin-right: 0.35rem;
}

/* Неизбраният таб получава едва забележим ръб — иначе се слива с фона. */
.project-tab.mud-button-text {
    border: 1px solid var(--mud-palette-lines-default);
}

.project-toolbar-title {
    text-align: center;
    white-space: nowrap;
}

.project-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    /* Не се свиват: бутонът „Нова колона" не бива да губи текста си заради дълги табове. */
    flex: 0 0 auto;
    white-space: nowrap;
}

/* На тесен екран трите части се нареждат една под друга. */
@media (max-width: 900px) {
    .project-toolbar {
        grid-template-columns: 1fr;
    }

    .project-toolbar-actions {
        justify-content: flex-start;
    }
}

.kanban-board {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.75rem;
}

.kanban-column {
    flex: 0 0 272px;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 0.5rem;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.25rem 0.5rem;
}

/* Минимална височина, за да има къде да се пусне карта в празна колона. */
.kanban-cards {
    min-height: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Картата е изпъкнал панел, като `bsRaised` в Delphi: горе и вляво светъл ръб, долу и
   вдясно тъмен. Само сянка отдолу дава „лежи върху нещо", но не и обем на самия ръб —
   обемът идва от това, че двете страни са осветени различно.

   Двойният ръб (по два пиксела на страна, вторият по-блед) е това, което го прави да
   изглежда като материал с дебелина, а не като нарисуван контур. Същият похват като на
   класическия Windows панел: външен светъл, вътрешен по-мек.

   Прави се с вътрешни сенки, а не с `border`: те следват заоблянето, докато истинска
   рамка се чупи в ъглите и точно там ефектът трябва да се вижда.

   Заоблянето слезе от 10 на 6 пиксела — на голям радиус фаската се размазва по дъгата
   и от 3D остава петно. */
.kanban-card {
    position: relative;
    background: var(--mud-palette-surface);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.16),
        0 3px 8px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Фаската е на отделен слой върху съдържанието, а не вътрешна сянка на самата карта.
   Причината е лентата отгоре: тя има свой фон, застила горния ръб и точно светлата
   страна на фаската изчезваше под нея. Истинската рамка също стои над съдържанието. */
.kanban-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: box-shadow 0.15s ease;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.95),
        inset 2px 2px 0 rgba(255, 255, 255, 0.40),
        inset -1px -1px 0 rgba(0, 0, 0, 0.30),
        inset -2px -2px 0 rgba(0, 0, 0, 0.10);
}

/* При посочване панелът се вдига: сянката отдолу се разлива, фаската се засилва. */
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 6px 14px rgba(0, 0, 0, 0.14),
        0 16px 32px rgba(0, 0, 0, 0.12);
}

.kanban-card:hover::after {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 1),
        inset 2px 2px 0 rgba(255, 255, 255, 0.5),
        inset -1px -1px 0 rgba(0, 0, 0, 0.34),
        inset -2px -2px 0 rgba(0, 0, 0, 0.12);
}

/* Натисната, фаската се обръща — светлото отива долу-дясно и панелът хлътва, точно
   както `bsLowered`. Заедно с лекото смаляване това е усещането за натиснато. */
.kanban-card:active {
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.kanban-card:active::after {
    box-shadow:
        inset -1px -1px 0 rgba(255, 255, 255, 0.7),
        inset 1px 1px 0 rgba(0, 0, 0, 0.28),
        inset 2px 2px 3px rgba(0, 0, 0, 0.14);
}

/* В тъмна тема бялото на 95% не е ръб, а драскотина: върху тъмна повърхност светлината
   е далеч по-слаба, а сянката трябва да е по-плътна, за да се вижда изобщо. */
.mud-theme-dark .kanban-card {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 12px 28px rgba(0, 0, 0, 0.3);
}

.mud-theme-dark .kanban-card::after {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.16),
        inset 2px 2px 0 rgba(255, 255, 255, 0.06),
        inset -1px -1px 0 rgba(0, 0, 0, 0.65),
        inset -2px -2px 0 rgba(0, 0, 0, 0.30);
}

.mud-theme-dark .kanban-card:hover::after {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.22),
        inset 2px 2px 0 rgba(255, 255, 255, 0.08),
        inset -1px -1px 0 rgba(0, 0, 0, 0.7),
        inset -2px -2px 0 rgba(0, 0, 0, 0.34);
}

.mud-theme-dark .kanban-card:active::after {
    box-shadow:
        inset -1px -1px 0 rgba(255, 255, 255, 0.14),
        inset 1px 1px 0 rgba(0, 0, 0, 0.7),
        inset 2px 2px 3px rgba(0, 0, 0, 0.4);
}

/* Лентата отгоре е и дръжка за влачене, и място на постоянните контроли. */
/* Лек градиент по лентата — дава ѝ обем вместо плосък цвят. */
.kanban-card-handle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 40px;
    padding: 0 0.25rem;
    cursor: grab;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.12));

    /* Своя фаска, по-плитка от тази на картата: лентата е панел вътре в панел, а не
       същият ръб втори път. Отдолу — тъмна линия, която я отделя от съдържанието. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset 0 -2px 3px rgba(0, 0, 0, 0.10);
}

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

/* В архива картата не се мести — курсорът не бива да обещава влачене. */
.kanban-card-handle-static,
.kanban-card-handle-static:active {
    cursor: default;
}

/* Архивът е решетка, а не колони: картите се подреждат по ширината на екрана. */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

/* Контролите в лентата не влачат — само празното между тях. */
.kanban-card-handle .mud-button-root,
.kanban-card-handle .mud-input-control {
    cursor: default;
}

.kanban-card-grip {
    opacity: 0.55;
}

.kanban-card-severity-select {
    width: 3.5rem;
}

/* Тесен, защото стои в лентата с табовете и всяка отнета ширина се вижда там. */
.kanban-type-filter {
    width: 9.5rem;
}

.archive-search {
    width: 14rem;
}

/* Трите състояния на един ред, с еднаква ширина — за да се четат като едно цяло. */
.dashboard-states {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.dashboard-overdue-type {
    min-width: 8rem;
    justify-content: center;
}

/* Ключът се чете знак по знак, затова е моноширинен и се маркира наведнъж. */
.ingest-key {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    user-select: all;
}

/* Първият ред от заявката в списъка: на един ред, без да разтяга колоната. */
.query-preview {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Подтабовете на DB: съдържанието им има нужда от въздух около себе си. */
.db-tabs .mud-tabs-panels {
    padding: 1rem;
}

/* Съдържание на лог файл: висок блок, който сам се скролва. */
.log-content {
    max-height: 26rem;
}

/* Без min-width елементът във flex не се свива под съдържанието си и отрязването с
   многоточие не се задейства — дългото име избутва размера и бутоните. */
.attachment-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Размерът е второстепенен: в тясна карта се пречупваше на два реда и изяждаше мястото
   на самото име. Дребен и на един ред — при нужда се свива името, не той. */
.attachment-size {
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Картата на мрежата: дърво отляво, етаж отдясно. На тесен екран едно под друго. */
/* Съдържание, което опира до ръба: 5 пиксела навсякъде вместо обичайния отстъп на
   MudContainer. Двойният клас е заради специфичността — `.mud-container-gutters` носи
   своя отстъп в media query и еднакъв на тегло селектор не го надвива. */
.mud-container.content-flush {
    padding: 5px;
    margin-top: 0;

    /* Целият екран без лентата отгоре и без собствените 5 пиксела горе и долу.
       `MudMainContent` вече отстъпва отгоре точно колкото е лентата, затова тук се вади
       същата променлива — иначе страницата тръгва да се плъзга с толкова. */
    height: calc(100vh - var(--mud-appbar-height) - 10px);
}

.content-flush > .network-split {
    height: 100%;
}

.network-split {
    display: grid;
    /* Наполовина на първоначалното плюс 40 пиксела: дървото са имена на сгради и етажи,
       а планът иска всеки пиксел, който може да получи. */
    grid-template-columns: minmax(10.5rem, 13.5rem) 1fr;
    grid-template-rows: 100%;
    gap: 4px;
    min-height: 0;
}

/* Отстъпът е 5 пиксела и на двата панела — задава се тук, а не с `pa-` клас: стъпката на
   MudBlazor е 4 пиксела и 5 не се получава от нея.

   Височината идва от решетката и стига до долния ръб; превъртането е вътре в панела, не
   на страницата. */
.network-tree,
.network-canvas {
    padding: 5px;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

/* Планът поема каквото остане под лентите — затова панелът е колона, а не просто кутия. */
.network-canvas {
    display: flex;
    flex-direction: column;
}

/* Един под друг: тогава височината идва от съдържанието, иначе двата панела си делят един
   екран и не остава нищо за нито един. Блокът стои след правилата, които отменя — при
   еднаква тежест решава редът. */
@media (max-width: 900px) {
    .mud-container.content-flush {
        height: auto;
    }

    .network-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .network-tree,
    .network-canvas {
        height: auto;
    }

    .network-tree {
        max-height: 40vh;
    }

    /* През родителя, защото основното правило за картата стои по-надолу в файла и при
       еднаква тежест би спечелило то. */
    .network-canvas .network-map {
        flex: 0 0 auto;
        min-height: 60vh;
    }
}

.network-node + .network-node {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.network-branch,
.network-leaf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
}

.network-branch {
    font-weight: 600;
}

/* Етажът се избира с клик по целия ред, не само по името. */
.network-leaf {
    /* Стъпката е малка: в тясна колона всеки отстъп го плаща името. */
    margin-left: 0.6rem;
    cursor: pointer;
}

.network-leaf:hover {
    background: var(--mud-palette-action-default-hover);
}

.network-leaf-active {
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
}

.network-branch-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-size {
    font-size: 0.65rem;
    white-space: nowrap;
    opacity: 0.7;
}

/* Бутоните изплуват при посочване — иначе дървото е стена от иконки. */
.network-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.12s;
}

.network-branch:hover .network-actions,
.network-leaf:hover .network-actions,
.network-actions:focus-within {
    opacity: 1;
}

.network-empty {
    margin-left: 0.9rem;
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Leaflet рисува в нула пиксела без изрична височина — екранът изглежда празен, без
   никаква грешка в конзолата. Тук височината идва от `flex: 1`: планът поема всичко,
   което лентите над него не са взели. `min-height: 0` е задължителен — без него flex
   елементът не се свива под съдържанието си и картата избутва страницата надолу. */
.network-map {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

/* Докато се мерят двете точки, курсорът казва, че сега се кликат точки. */
.network-map-picking {
    cursor: crosshair;
}

.network-map-picking .leaflet-interactive {
    cursor: crosshair;
}

.network-map-placing {
    cursor: copy;
}

/* Лентата над плана. Горната избира група, долната — вида в нея. */
.network-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.network-toolbar-label {
    margin-right: 0.25rem;
}

/* Подлентата е залепена за горната и хлътнала навътре, за да се чете като нейно
   продължение, а не като втора самостоятелна лента. */
.network-toolbar-detail {
    margin-top: 2px;
    margin-left: 1rem;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 8px 8px 0;
}

/* Маркерът на устройство: кръгче с иконка и име под него. Собствен, а не стандартният
   на Leaflet — той е карфица за географска карта и сочи място, а тук нещото е точно
   там, където е центърът. */
.network-device {
    background: none;
    border: none;
}

.network-device-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    background: #4c6ef5;
}

.network-device-pin svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* Цвят по група, не по вид: видовете са трийсетина и трийсет цвята не се различават с
   око. Групата се познава отдалече, а кой точно вид е — казва иконката вътре.
   Редът е този на изброяването NetworkDeviceGroup. */
.network-device-pin[data-group="0"] { background: #4c6ef5; } /* мрежова инфраструктура */
.network-device-pin[data-group="1"] { background: #e8590c; } /* високо напрежение */
.network-device-pin[data-group="2"] { background: #0ca678; } /* потребителски устройства */

/* Двата прехода към друг етаж са изключението: те не са оборудване и не бива да се четат
   като суич. Правилата стоят след груповите, за да ги надвият при еднаква тежест. */
.network-device-pin[data-kind="27"],
.network-device-pin[data-kind="28"],
.network-device-pin[data-kind="29"] {
    background: #7048e8;
    border-style: dashed;
}

/* Името не бива да лови кликове: то стои под иконката и би пречило на влаченето. */
.network-device-label {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 3px;
    border-radius: 3px;
    font-size: 0.65rem;
    line-height: 1.4;
    white-space: nowrap;
    color: #1f1f1f;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.network-map-drawing {
    cursor: crosshair;
}

/* Пръстенът, който посочва намереното устройство. Пулсира, за да се хване с око на
   план, пълен с иконки. */
.network-highlight {
    animation: network-pulse 1.1s ease-out infinite;
}

@keyframes network-pulse {
    0% {
        opacity: 1;
        stroke-width: 3;
    }

    70% {
        opacity: 0.15;
        stroke-width: 10;
    }

    100% {
        opacity: 1;
        stroke-width: 3;
    }
}

/* Дръжка на връх при редакция на трасе. */
.network-vertex span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #e5484d;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Легендата е и филтър — затова е ред с отметка, а не само мостра. */
.network-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.network-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.network-legend-line {
    width: 40px;
    height: 8px;
}

.network-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 60vh;
    opacity: 0.6;
}

/* Оцветяване на лог.

   Абсолютни цветове, не палитрата: правилата тук са за конкретен формат и цветовете са
   избрани от човек, не изведени от темата. Затова са средни тонове — четими и на бяло,
   и на тъмно, защото тъмният режим е превключвател в приложението и CSS не може да се
   разклони по него. Менят се на едно място. */
.log-syntax {
    --log-purple: #a855f7;
    --log-dark-pink: #d6336c;
    --log-red: #e5484d;
    --log-pink: #f06595;
    --log-light-blue: #4dabf7;
    --log-grey: #868e96;
    --log-blue: #4c6ef5;
}

.log-time {
    color: var(--log-purple);
    font-weight: 700;
}

.log-event {
    color: var(--log-dark-pink);
}

.log-class,
.log-word {
    color: var(--log-red);
    font-weight: 700;
}

.log-num {
    color: var(--log-pink);
    font-weight: 700;
}

.log-addr {
    color: var(--log-light-blue);
    font-style: italic;
    font-weight: 700;
}

.log-brace {
    color: var(--log-grey);
    font-style: italic;
}

.log-string {
    color: var(--log-blue);
    font-weight: 700;
}

/* Оцветяване на код.

   Собствени цветове, а не тема на highlight.js: всяка тема носи свой фон и свои
   абсолютни цветове, а тъмният режим тук е превключвател в приложението, не системна
   настройка. Върху променливите на палитрата оцветяването следва темата точно. */
.hljs {
    background: none;
    color: inherit;
}

.hljs-comment,
.hljs-quote {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-name {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute {
    color: var(--mud-palette-success);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link {
    color: var(--mud-palette-warning);
}

.hljs-title,
.hljs-section,
.hljs-built_in,
.hljs-class .hljs-title {
    color: var(--mud-palette-info);
}

.hljs-type,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: var(--mud-palette-tertiary);
}

.hljs-meta,
.hljs-subst {
    color: var(--mud-palette-text-secondary);
}

.hljs-deletion,
.hljs-emphasis {
    color: var(--mud-palette-error);
}

.hljs-strong {
    font-weight: 700;
}

/* Отметките за трасирането по групи: колони, докато има място, после едно под друго. */
.trace-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
}

.trace-option-hint {
    display: block;
    margin: -0.35rem 0 0 2rem;
    line-height: 1.3;
    opacity: 0.7;
}

/* Разглеждачът заема каквото има: файлът е причината диалогът да е отворен. */
.attachment-viewer-text {
    max-height: 70vh;
}

.attachment-viewer-frame {
    width: 100%;
    height: 70vh;
    border: 0;
}

/* Редът с файл се отваря с клик, затова показва курсор за такъв. */
.cursor-pointer {
    cursor: pointer;
}

/* Брояч, бутон за списък и състоянието му — на един ред. */
.activity-count {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Име отляво, броячи отдясно. */
.activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Известия */

.notification-list {
    width: min(24rem, 92vw);
    max-height: 26rem;
    overflow-y: auto;
}

.notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.notification-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.notification-item:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Непрочетеното се различава по ръб отляво, а не по цвят на фона — фонът вече се
   ползва за посочване с мишката. */
.notification-unread {
    border-left: 3px solid var(--mud-palette-primary);
}

.notification-text {
    min-width: 0;
}

/* Дълъг коментар не бива да разтяга менюто на две страници. */
.notification-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stack trace-ът се чете само с моноширинен шрифт и без пренасяне на редовете. */
.ingest-stack {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    margin: 0;
    max-height: 22rem;
    overflow: auto;
    white-space: pre;
}

/* Име отляво, действия отдясно; на тесен екран се нареждат едно под друго. */
.admin-project-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Вграденият изглед започва веднага — там няма лента, която да оправдае отстъп. */
.embedded-content {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
}

.kanban-comment {
    border-left: 2px solid var(--mud-palette-divider);
    padding-left: 0.5rem;
    margin: 0.25rem 0;
}

/* В тясна колона галерията пада на две снимки на ред. */
.kanban-card .attachment-gallery {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.kanban-card-cover {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.kanban-card-ghost {
    opacity: 0.4;
}

/* Прикачени файлове */

.attachment-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.attachment-thumb {
    margin: 0;
}

.attachment-thumb-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    background: none;
    cursor: zoom-in;
}

.attachment-thumb-button img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.attachment-thumb figcaption {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6c757d;
    padding-top: 0.25rem;
}

.attachment-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dropzone {
    border: 1px dashed #adb5bd;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.dropzone-active {
    border-color: #1b6ec2;
    background-color: #f0f6fc;
}

.dropzone-hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

/* Преглед на цял екран */

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}

.lightbox-content img {
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    object-fit: contain;
}

.lightbox-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lightbox-name {
    color: #fff;
    font-size: 0.875rem;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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;
}
/* ---- Регистър на хардуера --------------------------------------------------

   Същото разделяне като при картата на мрежата и по същата причина: списък с много
   записи отляво, подробности за един отдясно. */
.hardware-split {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: 4px;
    align-items: start;
}

@media (max-width: 900px) {
    .hardware-split {
        grid-template-columns: 1fr;
    }
}

.hardware-list,
.hardware-detail {
    padding: 5px;
}

.hardware-list {
    max-height: 70vh;
    overflow: auto;
}

.hardware-detail {
    min-height: 24rem;
}

.hardware-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    cursor: pointer;
}

.hardware-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.hardware-row-active {
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
}

.hardware-row-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hardware-count {
    flex: 0 0 auto;
    font-size: 0.7rem;
    opacity: 0.7;
}

.hardware-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 20rem;
    opacity: 0.6;
}

/* Сроковете на машината на един ред: първият въпрос към регистъра е „кога изтича". */
.hardware-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.78rem;
}

/* Наближилото подновяване е причината датата изобщо да се пази. */
.hardware-due {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

.hardware-branch {
    margin-top: 0.35rem;
}

.hardware-branch-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Бутонът изплува при посочване — иначе дървото е стена от иконки. */
.hardware-branch-head .hardware-actions {
    opacity: 0;
    transition: opacity 0.12s;
}

.hardware-branch-head:hover .hardware-actions,
.hardware-actions:focus-within {
    opacity: 1;
}

.hardware-leaf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: 1.5rem;
    padding: 0.15rem 0.35rem;
    border-left: 2px solid var(--mud-palette-lines-default);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

.hardware-leaf:hover {
    background: var(--mud-palette-action-default-hover);
}

.hardware-leaf-name {
    font-size: 0.85rem;
}

.hardware-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.3rem;
    border-radius: 4px;
    font-size: 0.7rem;
    background: var(--mud-palette-background-gray);
    opacity: 0.85;
}

.hardware-chip .mud-icon-root {
    font-size: 0.8rem;
}

/* Регистър на софтуера: описанието е втори ред под името, а ключът не бива да разпъва
   таблицата, колкото и дълъг да е. */
.software-about {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.software-key {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-size: 0.75rem;
}

/* Картата на проекта е една голяма мишена: цялата отваря проекта. Повдигането при
   посочване казва, че е кликаема — иначе изглежда като текст. */
.project-card {
    cursor: pointer;
    outline-offset: 2px;
}

.project-card .mud-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.project-card:hover .mud-card,
.project-card:focus-visible .mud-card {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-8);
}

/* Съдържанието вътре не бива да лови фокус отделно — картата е една мишена. */
.project-card:focus {
    outline: none;
}

.project-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    border-radius: 6px;
}

/* Стаята в дървото: под етажа, с още една стъпка навътре. */
.network-room {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1.4rem;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    font-size: 0.8rem;
    opacity: 0.85;
    cursor: pointer;
}

.network-room:hover {
    background: var(--mud-palette-action-default-hover);
    opacity: 1;
}

/* Името на стаята стои в средата ѝ, върху плана. Без фон и без стрелка — то е надпис
   по чертежа, не балонче. */
.network-room-label {
    background: none;
    border: none;
    box-shadow: none;
    color: #1f1f1f;
    font-size: 0.7rem;
    font-weight: 600;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.network-room-label::before {
    display: none;
}

.nav-area-hr {
    background: rgba(var(--mud-palette-warning-rgb), 0.09);
    border-color: rgba(var(--mud-palette-warning-rgb), 0.35);
}

/* Системи: зачислените се различават по цвят, а не само по думата до тях — разликата
   между активен и свален трябва да се хваща с око. */
.assignment-badge {
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.assignment-active {
    color: var(--mud-palette-success-darken);
    background: rgba(var(--mud-palette-success-rgb), 0.16);
}

.assignment-inactive {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

/* Свалените избледняват целите: редът остава четим, но не се бърка с работещ. */
.hardware-leaf.assignment-off {
    opacity: 0.55;
}

.hardware-leaf.assignment-off .hardware-leaf-name {
    text-decoration: line-through;
}

.hardware-leaf.assignment-on {
    border-left-color: var(--mud-palette-success);
}

.hardware-leaf-empty {
    font-size: 0.78rem;
    opacity: 0.6;
    cursor: default;
}

/* Компонентите на машината се четат само тук — още едно ниво навътре и с по-дребен шрифт,
   за да личи, че не са част от системата, а от нея. */
.system-subleaf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: 3rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Хранилището на проекта: адресите за клониране и историята. */
.gitea-url {
    display: block;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-size: 0.78rem;
    overflow-x: auto;
    white-space: nowrap;
}

/* Един ред на промяна: хеш, съобщение, автор, кога. Съобщението поема остатъка и се
   реже — то е единственото с непредвидима дължина. */
.gitea-commit {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.gitea-commit:hover {
    background: var(--mud-palette-action-default-hover);
}

.gitea-sha {
    font-size: 0.72rem;
    opacity: 0.75;
}

.gitea-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gitea-author,
.gitea-when {
    font-size: 0.72rem;
    opacity: 0.7;
    white-space: nowrap;
}

/* На тесен екран авторът и часът слизат под съобщението. */
@media (max-width: 700px) {
    .gitea-commit {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .gitea-author,
    .gitea-when {
        grid-column: 2;
    }
}

/* Двата таба на картата. Ниски колкото един ред: колоната е 272 пиксела и всеки пиксел
   за навигация е пиксел по-малко за съдържание. Собствени, а не MudTabs — неговата лента
   тръгва от 48 пиксела нагоре. */
.kanban-tabs {
    display: flex;
    height: 22px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.kanban-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 22px;

    /* Три таба в колона от 272 пиксела: отстъпът се свива, а надписът не се пренася —
       Надпис на два реда в лента от 22 пиксела просто изчезва. */
    padding: 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.kanban-tab:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Избраният се подчертава отдолу, а не се запълва: запълнен таб в карта с цветна лента
   отгоре става втора цветна ивица и двете се борят за окото. */
.kanban-tab-active {
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--mud-palette-primary);
}

/* Броят на коментарите. Кръгче, а не число в скоби: то се хваща с око, без да се чете. */
.kanban-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}

/* Езикът на проекта. Цветът е на самата технология и се хваща с око, но името винаги е
   до него: няколко от десетте са в едно семейство и само по нюанс не се различават. */
.language-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Числата от gstat на един ред: те са факти един до друг, не таблица. */
.stats-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.8rem;
    background: none;
}

/* Готовата команда под находката: моноширинен текст, който се плъзга настрани, а не
   пренася — прекъснат ред в команда се копира счупен. */
.stats-command {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.stats-command pre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

/* Текстът за модела: моноширинен, за да се вижда, че е за машина, и с плътна височина —
   той се преглежда, преди да се копира, не се чете като проза. */
.prompt-field textarea {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1.45;
}

/* Рендиран markdown от хранилището. Стиловете са тук, а не в самия файл: документът идва
   отвън и не бива да носи оформление със себе си. */
.markdown {
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
    margin: 1.4em 0 0.5em;
    line-height: 1.25;
    font-weight: 600;
}

.markdown h1 { font-size: 1.5rem; }
.markdown h2 { font-size: 1.25rem; }
.markdown h3 { font-size: 1.05rem; }

/* Първото заглавие не бута текста надолу: над него вече има таб и лента с името. */
.markdown > :first-child {
    margin-top: 0;
}

.markdown h1,
.markdown h2 {
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown table {
    margin: 0 0 0.9em;
}

.markdown ul,
.markdown ol {
    padding-left: 1.4em;
}

.markdown li {
    margin-bottom: 0.25em;
}

.markdown code {
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-size: 0.85em;
}

/* Блокът се плъзга настрани, а не пренася: пренесен ред код се чете грешно. */
.markdown pre {
    margin: 0 0 0.9em;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
}

.markdown pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

.markdown blockquote {
    padding-left: 0.9em;
    border-left: 3px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.markdown table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

.markdown th,
.markdown td {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    text-align: left;
}

.markdown th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}

.markdown img {
    max-width: 100%;
}

.markdown hr {
    margin: 1.5em 0;
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Склад на консумативите: двете страни на едно движение се четат като изречение
   („Пълни → В машина"), затова са с еднаква тежест и не се пренасят по средата. */
.consumable-side {
    white-space: nowrap;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.02em;
}

/* Списъкът за отмятане в картата за проверка. Картата е широка 272 пиксела — редът
   е един, без обвивки и без отстъпи, които да ядат от името на машината. */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    opacity: 0.8;
}

.check-line {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 1.5rem;
}

.check-name {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Проверената машина не изчезва от списъка — тя е доказателството, че е проверена. */
.check-done {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Клонът под машината: консумативът, който се проверява на нея. Отстъпът и линията
   вляво са цялото дърво — картата е 272 пиксела и не търпи истински контейнери. */
.check-branch {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 1.6rem;
    margin-left: 0.55rem;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(128, 128, 128, 0.35);
}

.check-branch .check-name {
    flex: 1 1 auto;
    font-size: 0.75rem;
}

/* Полето за пълнота: точно колкото „100 %" и нито пиксел повече. */
.check-percent {
    flex: 0 0 3.6rem;
    margin: 0;
}

.check-percent input {
    text-align: right;
    font-size: 0.75rem;
}

.check-bar,
.check-note {
    margin-left: 0.55rem;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(128, 128, 128, 0.35);
}

.check-note .mud-input {
    font-size: 0.75rem;
}

/* Броячът на проверените консумативи до името на машината. */
.check-count {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Планът над борда: по един ред на проверка, чиповете вървят след името. */
.check-plan {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.check-plan-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem;
    border-radius: 0.25rem;
}

.check-plan-row:hover {
    background: rgba(0, 0, 0, 0.04);
}

.check-plan-name {
    font-weight: 500;
    margin-right: 0.25rem;
}

/* Табът „Ресурси" на картата: две къси групи, ред на посочено нещо. Картата е 272
   пиксела — иконата и името носят всичко, а действието е една иконка вдясно. */
.asset-group {
    margin-bottom: 0.4rem;
}

.asset-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.85;
}

.asset-head .mud-icon-button {
    margin-left: auto;
}

.asset-line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.6rem;
}

.asset-name {
    flex: 1 1 auto;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Описанието на договора: то е под заглавието му и не бива да разпъва клона на екран. */
.contract-about {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.15rem 0 0.25rem 1.35rem;
}

/* Входът на IDE таблото за непознат проектен файл. */
.binding-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 0.85rem;
}

.binding-facts code {
    font-size: 0.8rem;
}

.binding-candidate,
.binding-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 2rem;
}

.binding-candidate-name,
.binding-line-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binding-line-name {
    flex: 1 1 auto;
    font-weight: 400;
}

.binding-candidate-slug {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Отметката „Запомни ме" във входа на вградения изглед. */
.embedded-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    cursor: pointer;
}