/* ── Фонт ────────────────────────────────────────────────────────────────────
   Inter, но САМОХОСТИРАН во wwwroot/fonts (варијабилен woff2, 4 subset-а ≈184KB).
   Порано се вчитуваше преку @import од Google Fonts — систем што работи во
   погон мора да изгледа исто и без интернет. Освен тоа темата во
   Helpers/FurniFlowTheme.cs бараше фонт кој CSS-от го носеше однадвор, па двете
   тивко се разминуваа. Сега изворот е еден. Ако додаваш тежина, не треба нов
   фајл — ова е варијабилен фонт (font-weight: 100 900). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    font-family: 'Inter', "Segoe UI", -apple-system, system-ui, Roboto, Arial, sans-serif;
    /* Inter има вистински мали букви за интерфејс — овие две ја вадат разликата
       меѓу „изгледа како bootstrap" и „изгледа наменски". */
    font-feature-settings: "cv05" 1, "cv08" 1;
    -webkit-font-smoothing: antialiased;
}

/* Бројки во колони мора да се поклопуваат вертикално. */
.mud-table td, .mud-datagrid td, .ff-doc-no, .ff-num {
    font-variant-numeric: tabular-nums;
}

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

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

/* Пошироки и поелегантни дијалози */
.mud-dialog-container .mud-dialog {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}
.mud-dialog-container .mud-dialog.elegant-dialog {
    max-width: min(720px, 95vw) !important;
}
.mud-dialog-container .mud-dialog.elegant-dialog.debt-dialog {
    max-width: min(1200px, 98vw) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
   ЦЕНТРАЛЕН СЛОЈ НА ТОКЕНИ
   Единствен извор на вистина за бојата е MudTheme во MainLayout.razor.
   Овде само ѝ даваме имиња што страниците ги користат — за да НЕМА вкодирани
   hex вредности низ .razor файловите.

   Правило: во страница пишувај var(--ff-…), никогаш #RRGGBB.
   Исклучок се дозволува само таму каде бојата е ПОДАТОК (пр. бои на фази што
   корисникот сам ги бира во шифрарник) или во печатени прикази.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Површини и линии */
    --ff-surface:        var(--mud-palette-surface);
    --ff-surface-sunk:   var(--mud-palette-background-grey);
    --ff-page:           var(--mud-palette-background);
    --ff-line:           var(--mud-palette-lines-default);
    --ff-line-soft:      var(--mud-palette-divider-light);

    /* Текст */
    --ff-text:           var(--mud-palette-text-primary);
    --ff-text-soft:      var(--mud-palette-text-secondary);
    --ff-text-on-accent: var(--mud-palette-primary-text);

    /* Акција */
    --ff-accent:         var(--mud-palette-primary);
    --ff-accent-soft:    var(--mud-palette-primary-hover);
    --ff-accent-deep:    var(--mud-palette-secondary);

    /* Семантика — статус, НЕ украс */
    --ff-ok:             var(--mud-palette-success);
    --ff-warn:           var(--mud-palette-warning);
    --ff-bad:            var(--mud-palette-error);
    --ff-info:           var(--mud-palette-info);

    /* Ритам на простор — за да не се погодува padding по страница */
    --ff-gap-xs: 4px;
    --ff-gap-sm: 8px;
    --ff-gap:    16px;
    --ff-gap-lg: 24px;

    --ff-radius:    8px;
    --ff-radius-lg: 12px;

    /* Нијанса на полињата за внес — малку поинаква од подлогата.
       Земена е ОД ТЕМАТА (GrayLight во MainLayout.razor), не вкодирана:
       во светла тема испаѓа малку потемна од белата површина, во темна малку
       посветла од темната. Така има еден извор на вистина и нема потреба од
       посебен селектор за темна тема — MudBlazor 9 и не става класа за неа. */
    --ff-field:       var(--mud-palette-gray-light);
    --ff-field-muted: var(--mud-palette-action-disabled-background);
}

/* ── Дијалози: три јасни појаса ────────────────────────────────────────────
   Заглавие (со линија) · скролувачко тело · подножје (со линија).
   Кај високите дијалози заглавието и копчињата остануваат видливи при скрол,
   за да не се губи контекст и да не се бара копчето „Зачувај". */
.mud-dialog-container .mud-dialog-title {
    padding: 18px 28px 14px !important;
    font-size: 1.14rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mud-palette-surface);
    border-radius: 12px 12px 0 0;
}

.mud-dialog-container .mud-dialog-content {
    padding: 22px 28px !important;
    max-height: min(72vh, 900px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mud-dialog-container .mud-dialog-actions {
    padding: 14px 28px 18px !important;
    gap: 10px !important;
    border-top: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--mud-palette-surface);
    border-radius: 0 0 12px 12px;
}

/* Примарната акција да се чита прва — второстепените се потивки. */
.mud-dialog-container .mud-dialog-actions .mud-button-text {
    color: var(--mud-palette-text-secondary);
}

/* ── Заглавие на дијалог со контекст ──────────────────────────────────────
   Наместо гол наслов: што е отворено, кој е клиентот и во каков статус е.
   Тоа е информацијата што се бара со поглед додека се работи во дијалогот.

   ВАЖНО: заглавието се пишува како ПРВ елемент во <DialogContent>, не во
   <TitleContent>. MudBlazor го подига TitleContent во контејнерот на дијалогот
   и таму не се пре-рендерира кога моделот ќе се вчита асинхроно — резултат:
   заглавие заглавено на празни податоци. Затоа стандардната лента ја криеме
   со .ff-dialog-custom-head на самиот <MudDialog>. */
.ff-dialog-custom-head .mud-dialog-title {
    display: none !important;
}
.ff-dialog-custom-head .mud-dialog-content {
    padding-top: 0 !important;
}
.ff-dialog-custom-head .ff-dlg-head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--ff-surface);
    padding: 16px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ff-line);
}

.ff-dlg-head {
    display: flex;
    align-items: center;
    gap: var(--ff-gap);
    width: 100%;
    min-width: 0;
}
.ff-dlg-head-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ff-dlg-head-title {
    display: flex;
    align-items: baseline;
    gap: var(--ff-gap-sm);
    min-width: 0;
}
.ff-dlg-head-title h6 {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ff-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ff-dlg-head-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
    font-size: 0.78rem;
    color: var(--ff-accent);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.ff-dlg-head-sub {
    font-size: 0.78rem;
    color: var(--ff-text-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-gap);
    min-width: 0;
}
.ff-dlg-head-sub span { white-space: nowrap; }
.ff-dlg-head-aside { flex-shrink: 0; display: flex; align-items: center; gap: var(--ff-gap-sm); }

/* ── Полињата за внес добиваат своја нијанса ──────────────────────────────
   Полето треба да се чита како површина каде се пишува, а не да лебди на иста
   боја како подлогата. Разликата е мала намерно — доволна да се раздвои, не
   толку да прави шаховска табла на екран со многу полиња. Централно е за да
   не се повторува по страница. */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-filled .mud-input-slot,
.mud-select .mud-input-slot,
.mud-picker .mud-input-slot,
.native-select-field,
.dialog-input-unified {
    background-color: var(--ff-field) !important;
    border-radius: var(--ff-radius);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

/* Фокус: работ добива боја на акција, подлогата останува мирна. */
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--ff-accent) !important;
    border-width: 1.5px !important;
}

/* Полиња само за читање да не изгледаат како активни. */
.mud-input.mud-disabled .mud-input-slot,
.mud-input-slot[readonly] {
    background-color: var(--ff-field-muted) !important;
}

/* ── Статус-табови ────────────────────────────────────────────────────────
   ЕДНО место за сите страници што филтрираат по статус (проекти, дизајнери,
   картички, работни налози). Порано истиот блок беше препишан во 5 файла.

   Дизајн: бојата на статусот НЕ го полни целиот таб — служи како тенка линија
   под него. Полн заситен блок × 4-5 табови е најгласното нешто на страницата,
   а тука бојата треба само да раздвојува, не да доминира. Активниот таб се
   разликува по тон и тежина, не по вика.

   Страницата и понатаму ја дава бојата преку style="--status-color: …" —
   тоа е податок (статус), не украс. */
.status-tabs-container .mud-tab {
    background-color: transparent !important;
    color: var(--ff-text-soft) !important;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: color .12s, background-color .12s, border-color .12s;
}

.status-tabs-container .mud-tab:hover {
    background-color: var(--ff-surface-sunk) !important;
    color: var(--ff-text) !important;
}

.status-tabs-container .mud-tab.mud-tab-active {
    background-color: transparent !important;
    color: var(--ff-text) !important;
    font-weight: 650;
    border-bottom-color: var(--status-color, var(--ff-accent));
}

/* Точката ја носи бојата на статусот и кога табот не е активен —
   така бојата останува читлива, но не го полни блокот. */
.status-tabs-container .mud-tab::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-color, var(--ff-accent));
    margin-right: 8px;
    flex-shrink: 0;
    opacity: .55;
}
.status-tabs-container .mud-tab.mud-tab-active::before { opacity: 1; }

/* Лентата зад табовите — тивка линија, не обоена површина.
   Класата е .mud-tabs-tabbar (НЕ .mud-tabs-toolbar): инаку останува обоен
   правоаголник низ цела ширина, многу поширок од самите табови. */
.status-tabs-container .mud-tabs-tabbar {
    background-color: transparent !important;
    border-bottom: 1px solid var(--ff-line);
    box-shadow: none !important;
}
.status-tabs-container .mud-tabs-tabbar-inner {
    background-color: transparent !important;
}
.status-tabs-container .mud-tab-slider { display: none; }

/* ── Акции во ред од табела ───────────────────────────────────────────────
   Начело: бојата го означува ИСКЛУЧОКОТ, не нормалната состојба.
   Копче што стои во сите 80 реда не смее да е полн заситен блок — окото
   престанува да го гледа, а страницата станува ѕид од боја. Затоа:
     · достапна акција (уреди, старт)  → тивка, добива боја на hover
     · активна состојба (пауза/стоп)   → обоена, зашто е вистински исклучок
     · бришење                          → неутрално, црвено дури на hover */
.ff-row-actions .mud-icon-button {
    color: var(--ff-text-soft);
    transition: color .12s, background-color .12s;
}
.ff-row-actions .mud-icon-button:hover {
    color: var(--ff-accent);
    background-color: var(--ff-surface-sunk);
}

/* Деструктивно: црвено само кога намерата е јасна (hover/фокус). */
.ff-row-actions .ff-btn-danger:hover,
.ff-row-actions .ff-btn-danger:focus-visible {
    color: var(--ff-bad);
    background-color: color-mix(in srgb, var(--ff-bad) 12%, transparent);
}

/* Активна работа — ова смее да вика, зашто е исклучок во листата. */
.ff-row-actions .mud-button-filled { color: inherit; }

/* ── Картичка за фаза во календар ────────────────────────────────────────────
   Бојата доаѓа од шифрарникот на фазата (податок, не декорација) и се внесува
   преку --phase-color. Носи ја акцентот — лента и точка — а не позадината:
   живите бои како подлога го убиваат текстот и денот станува ѕид од боја.
   Заедничко за месец/недела/ден приказ; не копирај го во страна. */
.phase-item {
    --phase-color: var(--mud-palette-divider);
    background: color-mix(in srgb, var(--phase-color) 12%, var(--ff-surface));
    border: 1px solid var(--ff-line-soft);
    border-left: 4px solid var(--phase-color);
    border-radius: 4px;
    color: var(--ff-text);
    padding: 3px 5px;
    transition: background-color .12s, border-color .12s;
}
.phase-item:hover {
    background: color-mix(in srgb, var(--phase-color) 22%, var(--ff-surface));
    border-color: var(--phase-color);
}
.phase-item .phase-item-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
}
.phase-item .phase-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--phase-color);
    flex-shrink: 0;
}
.phase-item .phase-item-wo {
    font-size: 0.6rem;
    line-height: 1.2;
    color: var(--ff-text-soft);
}
.phase-item .phase-item-ref {
    font-size: 0.55rem;
    line-height: 1.2;
    color: var(--ff-text-soft);
    font-variant-numeric: tabular-nums;
}

/* ── Календарот на пикерот не смее да се стиска ───────────────────────────────
   MudBlazor го применува `Style` на КОРЕНОТ на пикерот, а календарот се црта
   внатре во истиот корен. Затоа `Style="max-width:200px"` на MudDatePicker го
   сечеше календарот: неговиот `.mud-picker-content` е `max-width:100%` со
   `min-width:310px` и `overflow:hidden`, а самата решетка е фиксни 310px.
   Правилно е ширината да оди на обвивка околу пикерот; ова е заштитна мрежа
   за страниците што сè уште ја ставаат на самиот пикер. */
.mud-picker-content,
.mud-picker-container,
.mud-picker-calendar-container {
    max-width: none !important;
}

/* ── Ленти во календар (месец / недела / ден) ────────────────────────────────
   Бојата е ознака за проектот, но НЕ смее да биде подлога.

   Порано лентата имаше фиксна пастелна позадина (#FFCDD2 и слични), а текстот
   врз неа беше --mud-palette-text-primary. Во светла тема тоа е црн текст на
   пастела — читливо. Во темна тема текстот станува БЕЛ, а позадината останува
   пастелна зашто е вкодирана: бел текст на бледо розово, нечитливо.

   Затоа бојата иде преку --bar-color и се меша со површината на темата, а
   целата боја останува само како лента лево. Работи исто во двете теми. */
.ff-cal-bar {
    --bar-color: var(--ff-line);
    background: color-mix(in srgb, var(--bar-color) 20%, var(--ff-surface));
    border-left: 3px solid var(--bar-color);
    color: var(--ff-text);
    border-radius: 4px;
    transition: background-color .12s;
}
.ff-cal-bar:hover {
    background: color-mix(in srgb, var(--bar-color) 34%, var(--ff-surface));
}

/* ── Ситни ознаки за фаза (во табела) ────────────────────────────────────────
   Полесни од MudChip: кога еден работник има 5-6 фази, полни чипови го кршат
   редот. Точка во бојата на фазата + тивок текст. */
.ff-phase-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ff-phase-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 6px;
    border: 1px solid var(--ff-line);
    border-radius: 999px;
    background: var(--ff-surface-sunk);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}
.ff-phase-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--phase-color);
    flex-shrink: 0;
}
.ff-muted-dash { color: var(--ff-text-soft); }

/* ── Табела со вградено уредување ────────────────────────────────────────────
   MudTextField во ќелија резервира вертикален простор за label и helper текст
   и кога нема ниту едното — редот излегува ~60px наместо ~36px и табелата
   изгледа раштркано. Оваа класа го враќа ритамот на Dense табела. */
   Правилата се врзани за ЌЕЛИИ (td), не за целата табела — инаку го погодуваат
   и полето за пребарување во ToolBarContent, кое треба да си остане нормално. */
.ff-inline-edit-table td,
.ff-inline-edit-table th {
    padding-top: 2px;
    padding-bottom: 2px;
}
.ff-inline-edit-table td .mud-input-control { margin: 0; }
.ff-inline-edit-table td .mud-input-control-helper-container { display: none; }
.ff-inline-edit-table td .mud-input.mud-input-text { margin-top: 0; }
.ff-inline-edit-table td .mud-checkbox { margin: 0; }
.ff-inline-edit-table td .mud-chip { margin: 0; }

/* ── Лента на страна ─────────────────────────────────────────────────────────
   Наслов лево, филтри (период/статус/пребарување) десно — сè во ЕДЕН ред.
   Претходно секоја страна си црташе свој MudPaper со филтри под насловот, што
   јадеше цел ред екран. Користи ја оваа класа наместо нов локален <style>. */
.ff-page-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ff-gap);
}
.ff-toolbar-spacer { flex: 1 1 auto; }

/* ── Броеви како податок, не како текст ───────────────────────────────────
   Документните броеви (RN-2607-014, PP-2607-003) се идентификатори — во mono
   се читаат побрзо и се порамнуваат. Нумеричките колони добиваат tabular-nums
   за да се поклопуваат цифрите вертикално. */
.ff-doc-no,
.mud-table td .ff-doc-no {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
    font-size: 0.86em;
    letter-spacing: -0.01em;
}

.mud-table td.num,
.mud-table th.num,
.ff-num,
.mud-input-slot input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/* Унифицирани полиња во elegant-dialog – ист padding и margin */
.mud-dialog-container .elegant-dialog .mud-grid .mud-grid-item {
    align-self: stretch;
}
.mud-dialog-container .elegant-dialog .mud-input-control,
.mud-dialog-container .elegant-dialog .mud-input-root {
    min-height: 56px;
}
.mud-dialog-container .elegant-dialog .dialog-field-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.mud-dialog-container .elegant-dialog .dialog-field-block .mud-input-label {
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}
.mud-dialog-container .elegant-dialog .dialog-input-unified {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 16px 14px;
    box-sizing: border-box;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--mud-palette-background);
}
.mud-dialog-container .elegant-dialog .dialog-input-unified:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    padding: 15px 13px;
}
/* Работни часови – компактни падинзи во дијалози */
.mud-dialog-container .elegant-dialog.work-hours-dialog .dialog-input-unified {
    padding: 2px 8px !important;
    min-height: 32px !important;
    font-size: 0.9rem;
}
.mud-dialog-container .elegant-dialog.work-hours-dialog .dialog-input-unified:focus {
    padding: 2px 8px !important;
}
.mud-dialog-container .elegant-dialog.work-hours-dialog .mud-input-root,
.mud-dialog-container .elegant-dialog.work-hours-dialog .mud-input-slot {
    min-height: 32px !important;
    padding: 2px 8px !important;
}
.mud-dialog-container .elegant-dialog.work-hours-dialog .mud-input-slot textarea {
    min-height: 22px !important;
    padding: 0 !important;
    line-height: 1.35;
}

/* Работен налог – распоред во дијалог.
   Не ги колабираме висините/padding на самите полиња (тоа ги откачуваше outlined
   labels над рамката); се потпираме на MudBlazor Margin.Dense за компактност и
   само ги контролираме растојанијата меѓу редовите.

   Беше 3px горе/долу — премногу стегнато: полињата се допираа и формата се
   читаше како еден блок, а outlined етикетата на долниот ред скоро ја допираше
   рамката на горниот. 8px дава ~16px меѓу редови, доволно окото да ги дели. */
.project-dialog-print .wo-compact-form .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.project-dialog-print .wo-compact-form .wo-compact-grid > .mud-grid-item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.mud-dialog-container .elegant-dialog .dialog-input-readonly {
    background: var(--mud-palette-action-default-hover) !important;
    cursor: default;
}

.mud-table-cell {
    padding: 2px 12px !important;
}

.mud-table-dense .mud-table-cell {
    padding: 2px 8px !important;
}

/* Работни часови – падинзи како „уреди проект“: 2px горе/долу, 8px лево/десно */
.work-hours-page .mud-table-cell,
.work-hours-page .mud-table th.mud-table-cell,
.work-hours-page .mud-table td.mud-table-cell,
.work-hours-page .mud-simple-table td,
.work-hours-page .mud-simple-table th,
.work-hours-page table.mud-table-root td,
.work-hours-page table.mud-table-root th {
    padding: 2px 8px !important;
}

/* Рамка за насловите на хедерот на табелите */
.mud-table th.mud-table-cell,
.mud-table-header th.mud-table-cell,
.mud-data-grid-header-cell {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-bottom: 2px solid var(--mud-palette-divider) !important;
}

.mud-table th.mud-table-cell:not(:last-child),
.mud-table-header th.mud-table-cell:not(:last-child),
.mud-data-grid-header-cell:not(:last-child) {
    border-right: 1px solid var(--mud-palette-lines-default) !important;
}

/* MudSelect во дијалог – поповерот над дијалог на мобилни/таблети */
/* MudSelect / autocomplete во дијалог – поповер над насловот на дијалогот */
.mud-select-popover-above-dialog {
    z-index: 2000 !important;
    pointer-events: auto !important;
}

/* Подобра реакција на допир во дијалози – селектот да се отвора на прв тап */
.mud-dialog-container .mud-select-root,
.mud-dialog-container .mud-input-control {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.mud-dialog-container .mud-select .mud-input-root {
    min-height: 44px;
    cursor: pointer;
}

/* MudAutocomplete (проект/клиент/филтер-листи): стрелка десно да не се „стегне“ во flex */
.mud-autocomplete.mud-select .mud-input-root {
    flex-wrap: nowrap !important;
}
.mud-dialog-container .mud-autocomplete.mud-select .mud-input-root,
.mud-autocomplete.mud-select .mud-input-root {
    cursor: pointer;
}
.mud-autocomplete .mud-input-adornment,
.mud-autocomplete .mud-input-adornment-icon-button {
    flex-shrink: 0 !important;
}

/* Нативен select – ист за desktop и мобилни, без детекција */
.native-select-field,
.native-select-mobile {
    width: 100%;
    padding: 8px 40px 8px 14px;
    font-size: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    min-height: 40px;
    height: 40px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    /* Стрелка: currentColor за dark/light */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 24px;
    padding-right: 40px;
}
.native-select-mobile:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}
.project-dialog-print .mud-item > label.mud-input-label {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* Клиент во „Последни етапи“ / „Закажани настани“ – поголем фонт и задебелено за подобар изглед */
.last-stage-client-name {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.last-stage-client-name:hover {
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
}

/* FurniFlow семантички токени (alias на Mud – за документација и custom блокови) */
.ff-dialog-header-gradient {
    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background-grey) 100%);
    border-radius: 12px;
}
.ff-dialog-footer-bar {
    width: 100%;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
}
.ff-surface-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
}

/* Консистентна висина на дијалозите (проект, работен налог) низ сите табови:
   панелот со содржина има фиксна минимална висина, па менувањето таб не го собира/шири дијалогот.
   Се таргетира само надворешниот таб-контејнер (`>`) за да не влијае на вгнездените табови. */
.project-dialog-print .project-dialog-tabs > .mud-tabs-panels {
    min-height: 62vh;
}
.ff-text-primary-strong { color: var(--mud-palette-text-primary); font-weight: 600; }
.ff-text-secondary { color: var(--mud-palette-text-secondary); }

/* Наслови на секции во дијалози (проект, задача, клиент…).
   Тивка ознака наместо втор крупен наслов — насловот на дијалогот носи хиерархија. */
.ff-dialog-section-title {
    color: var(--mud-palette-text-secondary);
    font-weight: 650;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ff-dialog-section-title-lg {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}
.ff-mud-th {
    font-weight: 600;
    color: var(--mud-palette-text-secondary) !important;
}
.ff-sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.ff-sortable-th:hover {
    color: var(--mud-palette-primary) !important;
}
.ff-caption-muted { color: var(--mud-palette-text-secondary); }
.ff-caption-audit { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.ff-caption-audit-tight { font-size: 0.7rem; color: var(--mud-palette-text-secondary); margin-left: 8px; }
.ff-placeholder-dash { color: var(--mud-palette-divider); }
.ff-caption-preline { color: var(--mud-palette-text-secondary); line-height: 1.4; white-space: pre-line; }
.ff-icon-align-middle { vertical-align: middle; }
/* Footer на MudDialog со акции */
/* ProjectDialog футер: лево Печати + Креирај + аудит во еден ред; десно Откажи + Зачувај */
.ff-dialog-footer-bar-flex {
    width: 100%;
    padding: 10px 16px;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.ff-dialog-footer-actions-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.ff-dialog-footer-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ff-dialog-footer-bar-end {
    width: 100%;
    padding: 20px 32px;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}
.ff-btn-text-strong { text-transform: none !important; font-weight: 600; }
.ff-btn-text-strong-padded { text-transform: none !important; font-weight: 600; padding: 8px 24px; }

/* Сокриј ги иконите за филтер и чистење во филтер-редот на DataGrid (немаат функција, останува само полето за внес) */
.mud-datagrid .mud-table-root th .column-filter-menu,
.mud-datagrid .mud-table-root th .filter-button.clear,
.mud-datagrid thead th .mud-stack .mud-menu,
.mud-datagrid thead th .mud-stack .mud-icon-button {
    display: none !important;
}

/* При refresh: додека Mud не испрати dark palette (или пред SSR со cookie) — без бел „flash“ */
html.ff-boot-dark {
    color-scheme: dark;
}
html.ff-boot-dark body {
    background-color: #0B0F19 !important;
}

/* ================================================================
   COMPACT / DENSE REDESIGN — GlobalL form inputs + dialogs
   Reduces default 56px outlined inputs → 40px and tightens dialogs
   ================================================================ */

/* Smaller outlined inputs globally — target the <input> element directly
   (in MudBlazor 9.x the <input> itself carries .mud-input-root-outlined) */
.mud-input-root-outlined {
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
}
.mud-input-root-outlined.mud-input-adorned-start {
    padding-left: 10px !important;
}
/* Floating label – raised position when field has value/focus */
.mud-input-outlined .mud-input-label {
    font-size: 0.8125rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1.2 !important;
    transition: top 0.1s, transform 0.1s, font-size 0.1s !important;
}
/* Label floated above border when focused or has value */
.mud-input-outlined .mud-input-label.mud-input-label-inputcontrol,
.mud-input-outlined.mud-shrink .mud-input-label {
    top: -7px !important;
    transform: none !important;
    font-size: 0.72rem !important;
}
/* Reduce vertical spacing between controls */
.mud-input-control {
    margin-bottom: 2px !important;
}
/* Override legacy elegant-dialog 56px hard-code → 38px */
.mud-dialog-container .elegant-dialog .mud-input-control,
.mud-dialog-container .elegant-dialog .mud-input-root {
    min-height: 38px !important;
    height: auto !important;
}
/* MudSelect / MudAutocomplete compact height */
.mud-select .mud-input-root,
.mud-autocomplete .mud-input-root {
    min-height: 38px !important;
    height: 38px !important;
}
/* MudDatePicker compact */
.mud-picker .mud-input-root {
    min-height: 38px !important;
    height: 38px !important;
}
/* Textarea should NOT have fixed height */
textarea.mud-input-root-outlined {
    height: auto !important;
    min-height: 60px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Dialog chrome – tighter */
.mud-dialog-container .mud-dialog-content {
    padding: 14px 18px !important;
}
.mud-dialog-container .mud-dialog-title {
    padding: 12px 18px 8px !important;
    font-size: 1rem !important;
}
.mud-dialog-container .mud-dialog-actions {
    padding: 8px 18px 12px !important;
    gap: 8px !important;
}

/* ================================================================
   GLOBAL COMPACTNESS — reduces page margins, container padding,
   heading sizes and drawer width so the UI matches a tight ERP feel
   ================================================================ */

/* Reduce base rem from browser default 16px → 13px (~81%); simulates
   "80% browser zoom" baked in permanently so the UI matches compact ERP feel */
html {
    font-size: 14px;
}

/* Page container – tighter horizontal gutters */
.mud-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Main content area – only reduce horizontal gutters;
   leave padding-top untouched so MudBlazor's AppBar offset still applies */
.mud-main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Page-title h5 (used in nearly every page header) – slightly smaller */
.mud-typography-h5 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
.mud-typography-h6 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* MudCard / MudPaper default padding – reduce; skip explicit pa-0 */
.mud-card-content:not(.pa-0),
.mud-card-content:last-child:not(.pa-0) {
    padding: 4px 8px !important;
}

/* MudTabs panel padding */
.mud-tab-panel {
    padding: 4px 0 !important;
}

/* Повеќе хоризонтален простор за текстот во СИТЕ табови (+4px од стандардните 12px) */
.mud-tab {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Chip – slightly smaller */
.mud-chip {
    height: 22px !important;
    font-size: 0.75rem !important;
}

/* Login (/Account/Login): секогаш светол изглед, без app dark boot / system color-scheme */
html:has(.login-outer) {
    color-scheme: light !important;
}
html:has(.login-outer) body {
    background: transparent !important;
}
html:has(.login-outer).ff-boot-dark body {
    background: transparent !important;
}

/* ================================================================
   Vertically center the value/placeholder text in ALL form controls
   (single-line inputs, selects, autocompletes, date/time pickers).
   Fixes top-aligned text caused by fixed heights + zero padding.
   Textareas are explicitly excluded so multi-line text starts at top.
   ================================================================ */
/* НАПОМЕНА: порано тука стоеше `.mud-input-root:not(textarea){display:flex !important}`.
   Тоа беше БАГОТ „input на половина": класата .mud-input-root ја носи и САМИОТ <input> И
   скриениот помошен <div style="display:none"> на MudBlazor. `display:flex !important` го
   пребиваше inline `display:none` → скриениот div стануваше видлив и зафаќаше ~50% од редот,
   па input-от остануваше на половина. Решение: НЕ форсирај display тука — .mud-input (родителот)
   е веќе flex во MudBlazor, а вертикалното центрирање на input-от е преку line-height подолу. */
/* Вредносниот СЛОТ кај select/autocomplete е <div> → flex за центрирање, цела ширина */
.mud-select .mud-input-slot,
.mud-autocomplete .mud-input-slot {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}
/* Голиот <input> (НЕ textarea): се протега на цела ширина.
   ВАЖНО: глобалното `.mud-input-root:not(textarea){display:flex}` се аплицира и на самиот
   <input> и го собираше на интринсична (~половина) ширина — затоа експлицитно го враќаме
   на display:block + width:100% + flex:1 (како flex-ставка во редот го пополнува просторот). */
input.mud-input-slot,
input.mud-input-root,
input.mud-input-root-outlined,
.mud-input-root-outlined:not(textarea) {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    line-height: 38px !important;
    vertical-align: middle !important;
}
/* BULLETPROOF: MudBlazor рендерира скриен помошен <div class="mud-input-slot" style="display:none">
   до секој input (особено кај MudSelect/MudAutocomplete). Разни `display:flex !important` правила
   погоре го пребиваа неговиот inline `display:none` → стануваше видлив и зафаќаше ~половина од редот,
   па input-от остануваше на половина („се провлекува насекаде"). Овој guard (повисока специфичност +
   !important + последен во редоследот) го држи скриен секаде. */
.mud-input .mud-input-slot[style*="display:none"],
.mud-input .mud-input-slot[style*="display: none"],
.mud-input .mud-input-root[style*="display:none"],
.mud-input .mud-input-root[style*="display: none"] {
    display: none !important;
}
/* Глобално: скриј ги плус/минус стрелките на сите нумерички полиња (по барање на сопственикот —
   директно пишување наместо spin). Се однесува на сите MudNumericField без посебно подесување. */
.mud-input-numeric-spin {
    display: none !important;
}

/* Keep textareas top-aligned (multi-line) */
textarea.mud-input-root-outlined,
textarea.mud-input-slot {
    display: block !important;
    align-items: initial !important;
    line-height: 1.4 !important;
}

/* Клиенти: групи по купувач — без анимација при отворање/затворање */
.ff-buyer-group-header {
    cursor: pointer;
    user-select: none;
}

/* Стандард: акциските копчиња (уреди/избриши/итн.) секогаш во еден ред,
   во сите гридови и дијалози — никогаш да не се виткаат вертикално. */
.ff-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* Safety net: последната колона (акции) во MudTable/MudDataGrid да не вика буткање
   на иконите во нов ред кога ќелијата е тесна. */
.mud-table-cell:last-child .mud-icon-button,
.mud-table-cell.d-flex,
td.mud-table-cell:last-child {
    white-space: nowrap;
}
.mud-table-cell:last-child,
.mud-table-cell .mud-button-group {
    white-space: nowrap;
}

/* ================================================================
   RESPONSIVE / МОБИЛЕН (≤600px) — компактен топ-бар, помали наслови
   ================================================================ */
@media (max-width: 600px) {
    /* Топ-бар: помало лого, потесни падинзи, икони да собираат */
    .ff-appbar-logo { height: 28px !important; }
    .mud-appbar .mud-toolbar { padding-left: 6px !important; padding-right: 2px !important; }
    .mud-appbar .mud-icon-button { padding: 6px !important; }

    /* Големи наслови на страници — да не земаат пол екран на телефон */
    .mud-typography-h3 { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .mud-typography-h4 { font-size: 1.3rem !important; line-height: 1.2 !important; }

    /* Контејнер: помали странични падинзи */
    .mud-main-content .mud-container { padding-left: 6px !important; padding-right: 6px !important; }

    /* Картичен (стек) приказ на MudDataGrid: вредноста десно, лабелата лево */
    .mud-table-row .mud-table-cell[data-label]::before { font-weight: 600; }
}

/* ================================================================
   RESPONSIVE / ТАБЛЕТ (≤768px) — дијалози full-width, хоризонтален scroll на гридови
   ================================================================ */
@media (max-width: 768px) {
    .mud-dialog-container .mud-dialog {
        max-width: 100vw !important;
        width: 100% !important;
        min-height: 100vh;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .mud-dialog-container .mud-dialog-content {
        padding: 16px !important;
    }
    .mud-dialog-container .mud-dialog-actions {
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Гридови/табели: хоризонтален scroll наместо пресечен текст */
    .mud-table-root,
    .mud-table-container,
    .mud-data-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mud-table-root table,
    .mud-data-grid .mud-table-root {
        min-width: 640px;
    }

    /* Форми: една колона */
    .mud-grid-item-xs-6,
    .mud-grid-item-sm-6,
    .mud-grid-item-sm-4,
    .mud-grid-item-sm-3 {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}