html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ───────────────────────── CompanyFlow design system ───────────────────────── */

:root {
    --cf-primary: #2563EB;
    --cf-primary-dark: #1D4ED8;
    --cf-primary-soft: #EFF6FF;
    --cf-bg: #F1F5F9;
    --cf-surface: #FFFFFF;
    --cf-sidebar: #FFFFFF;
    --cf-text: #0F172A;
    --cf-text-muted: #475569; /* 6.9:1 на --cf-bg (#64748B даваше 4.34:1) */
    --cf-border: #E2E8F0;
    --cf-border-strong: #CBD5E1;
    --cf-success: #047857;   /* 5.5:1 на бело */
    --cf-danger: #C81E1E;    /* 5.9:1 на бело */
    --cf-radius: 12px;
    --cf-radius-sm: 8px;
    --cf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --cf-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
    --cf-shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.08);
}

body {
    background-color: var(--cf-bg);
    color: var(--cf-text);
}

/* ── Shell ── */

.cf-layout .mud-main-content {
    background-color: var(--cf-bg);
}

.cf-main-content {
    padding: 72px 24px 32px !important;
}

.cf-page {
    max-width: 1440px;
    margin: 0 auto;
}

.cf-appbar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    color: var(--cf-text) !important;
    border-bottom: 1px solid var(--cf-border) !important;
    box-shadow: var(--cf-shadow-sm);
}

.cf-appbar .mud-icon-root,
.cf-appbar .mud-button-root {
    color: var(--cf-text) !important;
}

.cf-appbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 2px;
    min-width: 0;
}

.cf-appbar-brand-text {
    min-width: 0;
}

.cf-appbar-logo-img {
    height: 40px;
    max-width: 220px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--cf-border);
    padding: 2px 4px;
}

.cf-appbar-logo {
    color: var(--cf-primary) !important;
    background: var(--cf-primary-soft);
    border-radius: 8px;
    padding: 6px;
    flex-shrink: 0;
}

.cf-appbar-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-appbar-tagline {
    font-size: 0.68rem;
    color: var(--cf-text-muted);
    line-height: 1.2;
}

.cf-drawer {
    background-color: var(--cf-sidebar) !important;
    border-right: 1px solid var(--cf-border) !important;
    box-shadow: none !important;
}

.cf-user-chip {
    border-color: var(--cf-border) !important;
    color: var(--cf-text-muted) !important;
    font-size: 0.8rem !important;
}

/* ── Navigation (Huma-style: единствен font, обоени икони) ── */

.cf-nav-menu {
    padding: 4px 10px 20px !important;
}

.cf-nav-menu .mud-nav-link {
    border-radius: var(--cf-radius-sm);
    line-height: 1.4;
    min-height: 38px;
    margin: 2px 0;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: nowrap;
    color: #334155 !important;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

.cf-nav-menu .mud-nav-link .mud-nav-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Иконите ја чуваат IconColor од MudNavLink — не ги пребоиувај во сиво */
.cf-nav-menu .mud-nav-link .mud-nav-link-icon {
    font-size: 1.2rem;
    min-width: 1.5rem;
    margin-inline-end: 10px;
}

.cf-nav-menu .mud-nav-link:hover {
    background-color: #F1F5F9;
}

/* Групи — ист font/стил како link, само со chevron */
.cf-nav-menu .mud-nav-group > .mud-nav-link {
    background-color: transparent !important;
    margin: 2px 0;
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #334155 !important;
}

.cf-nav-menu .mud-nav-group > .mud-nav-link:hover {
    background-color: #F1F5F9 !important;
}

.cf-nav-menu .mud-nav-group .mud-nav-group-items {
    padding-left: 0;
}

.cf-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link {
    padding-left: 2.5rem !important;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Chevron на групите — потиснат */
.cf-nav-menu .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon,
.cf-nav-menu .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon .mud-icon-root {
    color: #94A3B8 !important;
    font-size: 1.1rem;
}

/* Активна страница — мека pill, текст потемен, иконата ја задржува бојата */
.cf-nav-menu .mud-nav-link.mud-selected,
.cf-nav-menu .mud-nav-link.mud-nav-link-active {
    background-color: #EFF6FF !important;
    color: #1E293B !important;
    font-weight: 600;
    box-shadow: none;
}

.cf-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link.mud-selected,
.cf-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link.mud-nav-link-active {
    position: relative;
}

.cf-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link.mud-selected::before,
.cf-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link.mud-nav-link-active::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--cf-primary);
}

/* ── Page headers ── */

.cf-page-header {
    gap: 12px;
    margin-bottom: 16px !important;
}

.cf-page-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    line-height: 1.2;
}

.cf-page-subtitle {
    color: var(--cf-text-muted);
    margin-top: 4px;
}

.cf-page-toolbar {
    gap: 8px;
    margin-bottom: 16px;
    /* Порамни ги полињата по ДОЛНИОТ раб на влезната кутија — така поле со лабела над
       себе и поле без лабела ги држат кутиите на иста линија (лабелата само лебди горе). */
    align-items: flex-end !important;
}

.cf-page-toolbar .mud-input-control {
    min-width: 140px;
}

/* Истото за филтер-картичките на извештаите (MudGrid Class="align-center") — само тие
   се погодени од овој селектор (дијалозите се рендерираат надвор од .cf-page). */
.cf-page .cf-section .mud-grid.align-center {
    align-items: flex-end !important;
}

.cf-page-actions {
    gap: 8px;
}

/* Листа: пребарувањето останува горе (како замрзнат ред во Excel), табелата се лизга под него.
   Заглавието на колоните останува залепено на врвот на листата, пејџерот на дното. */
.cf-list-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 72px);
    min-height: 280px;
}

.cf-list-head {
    flex: none;
    background: var(--cf-bg);
    padding-bottom: 12px;
}

.cf-list-head .cf-page-header {
    margin-bottom: 8px !important;
}

.cf-list-head .cf-page-toolbar {
    margin-bottom: 0;
}

.cf-list-head > .mb-4 {
    margin-bottom: 0 !important;
}

/* Лентата „Избрани: N“ е во фиксираниот дел — не заминува со редовите при скрол. */
.cf-list-head .cf-selection-bar {
    margin: 12px 0 0 !important;
}

.cf-list-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.cf-list-body .mud-table,
.cf-list-body .mud-table-container {
    overflow: visible;
}

.cf-list-body .mud-table-head .mud-table-cell {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #F8FAFC;
}

.cf-list-body .mud-table-pagination {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--cf-surface);
    /* На тесна ширина MudBlazor го прави inline — тогаш позадината не ги покрива редовите што се лизгаат под пејџерот. */
    display: block;
}

@media (max-width: 960px) {
    .cf-list-page { height: calc(100dvh - 64px); }
}

/* Копчиња никогаш не се пренесуваат во втор ред текст — подобро потесно копче со nowrap. */
.mud-button-label {
    white-space: nowrap;
}

/* ── Cards (Bootstrap/Huma: header / body / footer + colored border) ── */

.mud-paper {
    border-radius: var(--cf-radius) !important;
    border: 1px solid var(--cf-border) !important;
    box-shadow: var(--cf-shadow-sm) !important;
    background-color: var(--cf-surface) !important;
}

.cf-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.cf-card:hover {
    box-shadow: var(--cf-shadow) !important;
}

.cf-card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cf-border);
    background-color: #F8FAFC;
}

.cf-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cf-text);
    line-height: 1.35;
}

.cf-card-subtitle {
    font-size: 0.875rem;
    color: var(--cf-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.cf-card-body {
    padding: 14px 16px;
    flex: 1 1 auto;
}

.cf-card-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--cf-border);
    background-color: #F8FAFC;
    color: var(--cf-text-muted);
    font-size: 0.8125rem;
}

/* Custom left borders */
.cf-card-accent-primary   { border-left: 4px solid #2563EB !important; }
.cf-card-accent-success   { border-left: 4px solid #059669 !important; }
.cf-card-accent-warning   { border-left: 4px solid #D97706 !important; }
.cf-card-accent-error     { border-left: 4px solid #DC2626 !important; }
.cf-card-accent-info      { border-left: 4px solid #0284C7 !important; }
.cf-card-accent-secondary { border-left: 4px solid #0D9488 !important; }

/* Stat value inside cards */
.cf-card-metric {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cf-text);
    line-height: 1.2;
}

.cf-card-metric-unit {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cf-text-muted);
}

.cf-card-meta {
    font-size: 0.8125rem;
    color: var(--cf-text-muted);
    margin-top: 4px;
    line-height: 1.45;
}

.cf-card-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cf-primary);
    text-decoration: none;
}

.cf-card-link:hover {
    text-decoration: underline;
}

.cf-card-link + .cf-card-link {
    margin-top: 6px;
}

/* Предстојни ставки на почетната (задачи, закажани сервиси) */
.cf-upcoming {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cf-upcoming-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.cf-upcoming-item .cf-card-link {
    margin-top: 0;
}

.cf-upcoming-when {
    color: var(--cf-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cf-upcoming-late {
    font-size: 0.75rem;
    font-weight: 700;
    color: #C81E1E;
}

.cf-upcoming-who {
    font-size: 0.75rem;
    color: var(--cf-text-muted);
}

/* Две врски во подножјето на картичката лежат во ред, не една врз друга */
.cf-card-footer > .cf-card-link + .cf-card-link {
    margin-top: 0;
    margin-left: 16px;
}

/* cf-section — form card (ист layout како CfCard) */
.cf-section {
    background-color: var(--cf-surface) !important;
    border: 1px solid var(--cf-border) !important;
    box-shadow: var(--cf-shadow-sm) !important;
    padding: 0 !important;
    overflow: hidden;
    margin-bottom: 12px;
}

.cf-section-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--cf-border);
    background-color: #F8FAFC;
}

.cf-section-body {
    padding: 12px 16px;
}

.cf-section-title {
    color: var(--cf-text);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
}

.cf-section-subtitle {
    font-size: 0.8125rem;
    color: var(--cf-text-muted);
    margin-top: 2px;
}

.cf-section-accent {
    border-left: 4px solid var(--cf-primary) !important;
}

.cf-section-accent-success {
    border-left: 4px solid #059669 !important;
}

.cf-section-accent-warning {
    border-left: 4px solid #D97706 !important;
}

.cf-section-body-compact {
    padding: 8px 12px 10px;
}

.cf-section-accent .cf-section-header {
    background-color: #F8FAFC;
}

.cf-section-accent .cf-section-title {
    color: var(--cf-text);
}

.mud-table-container {
    border-radius: var(--cf-radius);
    border: 1px solid var(--cf-border);
}

.mud-table .mud-table-head .mud-table-cell {
    background-color: #F8FAFC;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
    border-bottom: 1px solid var(--cf-border);
    padding: 6px 10px !important;
}

.mud-table .mud-table-cell {
    padding: 6px 10px !important;
    vertical-align: middle;
}

.mud-table-row:hover {
    background-color: #F8FAFC !important;
}

.mud-table-row:active {
    background-color: var(--cf-primary-soft) !important;
}

/* Quick actions grid inside cards */
.cf-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.cf-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    background: #FAFBFC;
    color: var(--cf-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.cf-quick-action:hover {
    background: var(--cf-primary-soft);
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: var(--cf-shadow-sm);
    color: var(--cf-primary-dark);
}

.cf-quick-action .mud-icon-root {
    color: var(--cf-primary);
}

/* ── Buttons ── */

.mud-button-root {
    border-radius: var(--cf-radius-sm) !important;
    letter-spacing: 0 !important;
}

.mud-button-filled-primary {
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.mud-button-outlined {
    border-color: var(--cf-border-strong) !important;
}

/* ── Dialogs ── */

.mud-dialog-title {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
}

.mud-dialog-title .mud-typography {
    color: #FFFFFF;
    font-weight: 700;
}

.mud-dialog-title .mud-icon-button .mud-icon-root,
.mud-dialog-title .mud-button-root .mud-icon-root {
    color: #FFFFFF;
}

.mud-dialog-title .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.mud-dialog .mud-tabs-panels {
    padding: 0 4px;
}

.mud-dialog .mud-tabs-tabbar {
    border-bottom: 1px solid var(--cf-border);
}

/* ── Form inputs (Huma/Bootstrap-style: label горе, бело поле, јасна валидација) ── */

.mud-input-underline:before,
.mud-input-underline:after,
.mud-input-underline:hover:before,
.mud-input-underline:hover:not(.mud-disabled):before {
    border: none !important;
    display: none !important;
}

/* Scope: страници, dialog-и, cf-form — не табели со inline полиња */
.cf-page .mud-grid-item .mud-input-control,
.mud-dialog .mud-input-control,
.cf-form .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0;
    width: 100%;
}

.cf-page .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.cf-page .mud-input-control-input-container,
.mud-dialog .mud-input-control-input-container,
.cf-form .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

/* Label над полето — мал, bold, uppercase (MudBlazor го става label после input во DOM) */
.cf-page .mud-input-control-input-container .mud-input-label,
.mud-dialog .mud-input-control-input-container .mud-input-label,
.cf-form .mud-input-control-input-container .mud-input-label,
.cf-page .mud-input-control .mud-input-label,
.mud-dialog .mud-input-control .mud-input-label,
.cf-form .mud-input-control .mud-input-label {
    position: static !important;
    transform: none !important;
    transition: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100%;
    order: -1;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-text-muted) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-page .mud-input-control .mud-input-label-inputcontrol,
.mud-dialog .mud-input-control .mud-input-label-inputcontrol,
.cf-form .mud-input-control .mud-input-label-inputcontrol {
    position: static !important;
    transform: none !important;
}

/* Поле */
.cf-page .mud-input-control .mud-input,
.mud-dialog .mud-input-control .mud-input,
.cf-form .mud-input-control .mud-input {
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.cf-page .mud-input-control .mud-input-slot,
.mud-dialog .mud-input-control .mud-input-slot,
.cf-form .mud-input-control .mud-input-slot {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-width: 0;
    overflow: hidden;
}

.cf-page .mud-input-control .mud-input-slot input,
.mud-dialog .mud-input-control .mud-input-slot input,
.cf-form .mud-input-control .mud-input-slot input {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-page .mud-input-control textarea.mud-input-slot,
.mud-dialog .mud-input-control textarea.mud-input-slot,
.cf-form .mud-input-control textarea.mud-input-slot,
.cf-page .mud-input-control .mud-input-slot textarea,
.mud-dialog .mud-input-control .mud-input-slot textarea,
.cf-form .mud-input-control .mud-input-slot textarea {
    white-space: pre-wrap;
    overflow: auto;
    text-overflow: unset;
}

.cf-page .mud-input-control input::placeholder,
.mud-dialog .mud-input-control input::placeholder,
.cf-form .mud-input-control input::placeholder,
.cf-page .mud-input-control textarea::placeholder,
.mud-dialog .mud-input-control textarea::placeholder,
.cf-form .mud-input-control textarea::placeholder {
    color: #94A3B8;
    opacity: 1;
}

.cf-page .mud-input-control .mud-input:hover,
.mud-dialog .mud-input-control .mud-input:hover,
.cf-form .mud-input-control .mud-input:hover {
    border-color: #94A3B8;
    background-color: #FFFFFF;
}

.cf-page .mud-input-control .mud-input.mud-focused,
.mud-dialog .mud-input-control .mud-input.mud-focused,
.cf-form .mud-input-control .mud-input.mud-focused,
.cf-page .mud-input-control .mud-input:focus-within,
.mud-dialog .mud-input-control .mud-input:focus-within,
.cf-form .mud-input-control .mud-input:focus-within {
    border-color: var(--cf-primary);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30);
}

/* Јасно означи го фокусираното поле и во табелите со ставки (густи полиња — тешко се гледа) */
.cf-page .mud-table-container .mud-table-row:focus-within,
.mud-dialog .mud-table-container .mud-table-row:focus-within {
    background-color: rgba(37, 99, 235, 0.06);
}

/* Само ќелии со поле за внес — копче во редот (Измени/Бриши) има свој прстен на фокус, не на целата ќелија. */
.cf-page .mud-table-container td:has(input:focus, textarea:focus),
.mud-dialog .mud-table-container td:has(input:focus, textarea:focus) {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35);
    border-radius: 6px;
}

/* Пикери (Autocomplete/Select) — истиот прстен на фокус */
.cf-page .mud-select:focus-within .mud-input,
.cf-page .mud-autocomplete:focus-within .mud-input,
.mud-dialog .mud-select:focus-within .mud-input,
.mud-dialog .mud-autocomplete:focus-within .mud-input {
    border-color: var(--cf-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30);
}

.cf-page .mud-input-control .mud-input.mud-disabled,
.mud-dialog .mud-input-control .mud-input.mud-disabled,
.cf-form .mud-input-control .mud-input.mud-disabled {
    background-color: #F8FAFC;
    border-color: var(--cf-border);
    color: var(--cf-text-muted);
    opacity: 1;
}

/* Валидација — error */
.cf-page .mud-input-control .mud-input.mud-input-error,
.mud-dialog .mud-input-control .mud-input.mud-input-error,
.cf-form .mud-input-control .mud-input.mud-input-error {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.cf-page .mud-input-helper-text,
.mud-dialog .mud-input-helper-text,
.cf-form .mud-input-helper-text {
    font-size: 0.75rem;
    margin-top: 3px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cf-page .mud-input-helper-text.mud-input-error,
.mud-dialog .mud-input-helper-text.mud-input-error,
.cf-form .mud-input-helper-text.mud-input-error {
    color: #DC2626;
    font-weight: 500;
}

/* Adornment икони (search, clear, validation) */
.cf-page .mud-input-control .mud-input-adornment,
.mud-dialog .mud-input-control .mud-input-adornment,
.cf-form .mud-input-control .mud-input-adornment {
    color: #94A3B8;
}

.cf-page .mud-input-control .mud-input-adornment .mud-icon-root.mud-error-text,
.mud-dialog .mud-input-control .mud-input-adornment .mud-icon-root.mud-error-text {
    color: #DC2626 !important;
}

/* Select / Autocomplete / Picker — ист box + цела ширина на input-control */
.cf-page .mud-grid-item .mud-select,
.cf-page .mud-grid-item .mud-autocomplete,
.cf-page .mud-grid-item .mud-picker,
.mud-dialog .mud-select,
.mud-dialog .mud-autocomplete,
.mud-dialog .mud-picker,
.cf-form .mud-select,
.cf-form .mud-autocomplete,
.cf-form .mud-picker {
    width: 100%;
}

.cf-page .mud-grid-item .mud-select .mud-input-control-input-container,
.cf-page .mud-grid-item .mud-autocomplete .mud-input-control-input-container,
.cf-page .mud-grid-item .mud-picker .mud-input-control-input-container,
.mud-dialog .mud-select .mud-input-control-input-container,
.mud-dialog .mud-autocomplete .mud-input-control-input-container,
.mud-dialog .mud-picker .mud-input-control-input-container,
.cf-form .mud-select .mud-input-control-input-container,
.cf-form .mud-autocomplete .mud-input-control-input-container,
.cf-form .mud-picker .mud-input-control-input-container,
.mud-table .mud-select .mud-input-control-input-container,
.mud-table .mud-autocomplete .mud-input-control-input-container,
.mud-table .mud-picker .mud-input-control-input-container {
    width: 100%;
    align-items: stretch !important;
}

.cf-page .mud-grid-item .mud-select .mud-input-control-input-container > .mud-input,
.cf-page .mud-grid-item .mud-autocomplete .mud-input-control-input-container > .mud-input,
.cf-page .mud-grid-item .mud-picker .mud-input-control-input-container > .mud-input,
.mud-dialog .mud-select .mud-input-control-input-container > .mud-input,
.mud-dialog .mud-autocomplete .mud-input-control-input-container > .mud-input,
.mud-dialog .mud-picker .mud-input-control-input-container > .mud-input,
.cf-form .mud-select .mud-input-control-input-container > .mud-input,
.cf-form .mud-autocomplete .mud-input-control-input-container > .mud-input,
.cf-form .mud-picker .mud-input-control-input-container > .mud-input,
.mud-table .mud-input-control-input-container > .mud-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cf-page .mud-input.mud-shrink,
.mud-dialog .mud-input.mud-shrink,
.cf-form .mud-input.mud-shrink,
.mud-table .mud-input.mud-shrink {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cf-page .mud-select .mud-input,
.mud-dialog .mud-select .mud-input,
.cf-form .mud-select .mud-input,
.cf-page .mud-picker .mud-input,
.mud-dialog .mud-picker .mud-input,
.cf-form .mud-picker .mud-input {
    cursor: pointer;
}

.cf-page-toolbar .mud-select,
.cf-page-toolbar .mud-autocomplete,
.cf-page-toolbar .mud-picker {
    width: auto;
    flex: 0 0 auto;
}

/* Switch & checkbox во форми */
.cf-page .mud-switch,
.mud-dialog .mud-switch,
.cf-form .mud-switch {
    margin-top: 4px;
}

.cf-page .mud-switch .mud-typography-body1,
.mud-dialog .mud-switch .mud-typography-body1 {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Fallback за полиња надвор од cf-page (admin табели...) */
.mud-input-control .mud-input {
    background-color: #FFFFFF;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    padding: 8px 12px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.mud-input-control .mud-input:hover {
    border-color: var(--cf-border-strong);
}

.mud-input-control .mud-input.mud-focused {
    border-color: var(--cf-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.mud-input-control .mud-input.mud-input-error {
    border-color: #DC2626;
}

.mud-input-control .mud-input.mud-disabled {
    background-color: #F8FAFC;
    color: var(--cf-text-muted);
}

/* Inline полиња во табели — компактни, без label layout */
.mud-table .mud-input-control {
    margin: 0 !important;
}

.mud-table .mud-input-control-input-container {
    flex-direction: row !important;
    width: 100%;
    align-items: stretch !important;
}

.mud-table .mud-input-control .mud-input-label {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

.mud-table .mud-input-control .mud-input {
    background-color: #FFFFFF;
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    min-height: 30px !important;
    padding: 2px 8px !important;
    font-size: 0.8125rem;
}

.mud-table .mud-input-control .mud-input:hover {
    border-color: var(--cf-border-strong);
}

.mud-table .mud-input-control .mud-input.mud-focused {
    border-color: var(--cf-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.cf-td-numeric {
    text-align: right !important;
}

/* Табела: наслов и поле во иста колона, содржина десно */
.mud-table-head .cf-td-numeric,
.mud-table .cf-td-numeric {
    text-align: right !important;
    vertical-align: middle;
}

.mud-table .cf-td-numeric .mud-input-control {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.mud-table .cf-td-numeric .mud-input-control .mud-input {
    width: 100% !important;
}

.mud-table .cf-td-numeric .mud-input-slot {
    text-align: right !important;
}

.mud-table .cf-td-numeric .mud-input-control-input-container {
    width: 100%;
}

/* Текстualни колони во табела — полето ја полни ширината на ќелијата */
.mud-table .mud-table-cell:not(.cf-td-numeric) .mud-input-control,
.mud-table .mud-table-cell:not(.cf-td-numeric) .mud-select,
.mud-table .mud-table-cell:not(.cf-td-numeric) .mud-autocomplete {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.mud-table .mud-table-cell:not(.cf-td-numeric) .mud-input-control .mud-input,
.mud-table .mud-table-cell:not(.cf-td-numeric) .mud-input-control-input-container {
    width: 100% !important;
}

/* Ширини на типични numeric колони */
.cf-col-qty   { width: 88px;  min-width: 88px; }
.cf-col-money { width: 112px; min-width: 112px; }
.cf-col-rate  { width: 88px;  min-width: 88px; }
.cf-col-pct   { width: 72px;  min-width: 72px; }
/* ДДВ % е паѓачка (<select>): треба место за „18%“ + стрелка — потесно од ова вредноста се сече. */
.cf-col-vat   { width: 88px;  min-width: 88px; }
.cf-col-doc   { width: 120px; min-width: 120px; }

/* ── Form sections (cf-section дефиниција е погоре кај Cards) ── */

.cf-form-grid {
    align-items: flex-start;
}

.cf-form-grid > .mud-grid-item {
    min-width: 0;
    padding: 4px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cf-form-grid > .mud-grid-item > .mud-input-control,
.cf-form-grid > .mud-grid-item > *:first-child {
    width: 100%;
}

/* Потесен MudGrid spacing на страници */
.cf-page .mud-grid-spacing-1 > .mud-grid-item { padding: 2px !important; }
.cf-page .mud-grid-spacing-2 > .mud-grid-item { padding: 4px !important; }
.cf-page .mud-grid-spacing-3 > .mud-grid-item { padding: 6px !important; }

.mud-dialog .mud-grid-spacing-2 > .mud-grid-item { padding: 4px !important; }

/* Autocomplete — ист label/box layout како TextField/Select */
.cf-page .mud-autocomplete .mud-input-control-input-container,
.mud-dialog .mud-autocomplete .mud-input-control-input-container,
.cf-form .mud-autocomplete .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cf-form-grid .mud-input-control,
.cf-form-grid .mud-picker,
.cf-form-grid .mud-select,
.cf-form-grid .mud-autocomplete {
    width: 100%;
}

.cf-form-grid .mud-input-control-input-container {
    width: 100%;
    align-items: stretch !important;
}

.cf-form-action {
    display: flex;
    align-items: flex-end;
    min-height: 40px;
    padding-bottom: 0;
}

/* Expansion panels — помал padding */
.mud-expansion-panels .mud-expand-panel-content {
    padding: 8px 12px !important;
}

.mud-expansion-panels .mud-expand-panel-header {
    padding: 8px 12px;
    min-height: 44px;
}

.mud-expansion-panels .mud-expand-panel-header .mud-expand-panel-text {
    margin: 0;
}

/* ── Document edit pages ── */

.cf-page-actions {
    gap: 6px;
}

.cf-page-actions .mud-button-root {
    flex-shrink: 0;
}

.cf-doc-lines-total {
    font-weight: 600;
    color: var(--cf-primary);
}

.cf-doc-totals {
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    background-color: #F8FAFC;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cf-doc-totals-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 20px;
    white-space: nowrap;
}

.cf-doc-totals-row .cf-doc-total-label {
    color: var(--cf-text-muted);
    font-size: 0.8125rem;
}

.cf-doc-totals-row .cf-doc-total-value {
    font-weight: 600;
    color: var(--cf-text);
}

.cf-doc-total-grand {
    margin-top: 2px;
    padding: 6px 14px;
    border-radius: var(--cf-radius-sm);
    background-color: var(--cf-primary);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.0625rem;
    white-space: nowrap;
}

/* Акциски копчиња во заглавие на секција — секогаш во еден ред */
.cf-section-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cf-section-actions .mud-button-root {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Chips & badges ── */

.mud-chip {
    font-weight: 600;
}

@media (max-width: 960px) {
    .cf-main-content {
        padding: 64px 16px 24px !important;
    }

    .cf-appbar-tagline {
        display: none;
    }
}

/* ───────────────────────── Најава страна ───────────────────────── */
.cf-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%);
    padding: 2rem 1rem;
}

.cf-auth-card {
    width: 100%;
    max-width: 860px;
    display: flex;
    background: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(29, 78, 216, 0.28);
}

.cf-auth-brand {
    flex: 0 0 38%;
    background: linear-gradient(160deg, #2563EB 0%, #1D4ED8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.75rem;
}

.cf-auth-brand-inner {
    color: #FFFFFF;
    text-align: center;
}

.cf-auth-logo {
    color: #FFFFFF;
    opacity: .95;
    margin-bottom: .75rem;
}

.cf-auth-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}

.cf-auth-subtitle {
    font-size: .9rem;
    opacity: .85;
    line-height: 1.4;
    margin: 0;
}

.cf-auth-form {
    flex: 1 1 62%;
    padding: 2.75rem 2.5rem;
}

.cf-auth-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A2027;
    margin: 0 0 .35rem;
}

.cf-auth-hint {
    color: #64748B;
    font-size: .875rem;
    margin: 0 0 1.5rem;
}

.cf-auth-btn {
    background-color: #2563EB;
    border-color: #2563EB;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
}

.cf-auth-btn:hover {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
}

.cf-auth-links {
    margin-top: 1.25rem;
    text-align: center;
}

.cf-auth-links a {
    color: #2563EB;
    font-size: .875rem;
    text-decoration: none;
}

/* Помошен текст наместо линк (ресетирањето на лозинка го прави администратор). */
.cf-auth-links span {
    color: var(--cf-text-muted);
    font-size: .875rem;
}

.cf-auth-links a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .cf-auth-card {
        flex-direction: column;
    }

    .cf-auth-brand {
        padding: 1.75rem;
    }
}

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

/* ===== XlGrid — Excel-like табела за внес (Components/Shared/XlGrid.razor) ===== */
.xl-grid-wrap { overflow-x: auto; border: 1px solid var(--cf-border-strong); border-radius: var(--cf-radius-sm); background: var(--cf-surface); }
.xl-grid { border-collapse: collapse; width: 100%; font-size: .875rem; }
.xl-grid th, .xl-grid td { border: 1px solid var(--cf-border); padding: 0; height: 36px; vertical-align: middle; }
.xl-grid thead th { background: var(--cf-bg); color: var(--cf-text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; padding: 6px 8px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.xl-grid th.num, .xl-grid td.calc { text-align: right; }
.xl-grid tbody tr:hover td { background: var(--cf-primary-soft); }
.xl-grid tbody tr:first-child td, .xl-grid thead th { border-top: 0; }
.xl-grid tr > :first-child { border-left: 0; }
.xl-grid tr > :last-child { border-right: 0; }

/* поле за внес — исполнува ќелија, без рамка */
.xl-grid .xl-input { display: block; width: 100%; height: 100%; min-height: 35px; border: 0; background: transparent; padding: 0 8px; font: inherit; color: var(--cf-text); outline: none; }
.xl-grid .xl-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.xl-grid .xl-input[readonly] { color: var(--cf-text-muted); cursor: default; }
.xl-grid td:focus-within { outline: 2px solid var(--cf-primary); outline-offset: -2px; background: #fff; position: relative; z-index: 2; }

/* пресметани колони — не се за внес */
.xl-grid td.calc { background: #F8FAFC; padding: 0 8px; color: var(--cf-text); font-variant-numeric: tabular-nums; }
.xl-grid td.calc.strong { font-weight: 600; }
.xl-grid td.calc.neg { color: var(--mud-palette-error); font-weight: 600; }
.xl-grid td.calc.pos { color: var(--mud-palette-success); }

/* MudBlazor пикери/селект во ќелија — без рамка и подлога, да личат на ќелија */
.xl-grid .mud-input-control { margin: 0; }
.xl-grid .mud-input-slot, .xl-grid .mud-input > input.mud-input-root { padding-left: 8px; }
.xl-grid .mud-input-underline:before, .xl-grid .mud-input-underline:after { display: none; }
.xl-grid .mud-input-outlined-border { border: 0 !important; }
.xl-grid .mud-input.mud-input-outlined { background: transparent; }

.xl-grid td.xl-actions, .xl-grid th.xl-actions { width: 1%; white-space: nowrap; text-align: center; padding: 0 4px; }

.xl-grid .xl-text { display: block; padding: 0 8px; }
.xl-grid .xl-input::placeholder { color: var(--cf-text-muted); opacity: .7; }


/* ═══════════════ НОВ ДИЗАЈН (v2) — глобално за сите страни ═══════════════ */

/* ── Мени: секции со наслов, тивки икони, активна лента ── */
.cf-nav-menu { padding: 8px 12px 24px !important; }
.cf-nav-section {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cf-text-muted); padding: 18px 12px 6px;
}
.cf-nav-section-admin { margin-top: 8px; border-top: 1px solid var(--cf-border); padding-top: 16px; }
.cf-nav-subsection { font-size: 0.6875rem; font-weight: 600; color: var(--cf-text-muted); padding: 10px 12px 2px 28px; }
.cf-nav-menu .mud-nav-link { min-height: 36px; margin: 1px 0; padding: 0 12px !important; position: relative; color: #475569 !important; }
.cf-nav-menu .mud-nav-link .mud-nav-link-icon { color: #64748B !important; font-size: 1.25rem; margin-inline-end: 12px; }
.cf-nav-menu .mud-nav-link:hover { background-color: #F1F5F9; color: var(--cf-text) !important; }
.cf-nav-menu .mud-nav-link.mud-nav-link-active,
.cf-nav-menu .mud-nav-link.mud-selected { background-color: var(--cf-primary-soft) !important; color: var(--cf-primary-dark) !important; font-weight: 600; }
.cf-nav-menu .mud-nav-link.mud-nav-link-active .mud-nav-link-icon,
.cf-nav-menu .mud-nav-link.mud-selected .mud-nav-link-icon { color: var(--cf-primary) !important; }
.cf-nav-menu .mud-nav-link.mud-nav-link-active::before,
.cf-nav-menu .mud-nav-link.mud-selected::before {
    content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--cf-primary); transform: none; height: auto; border-radius: 0 3px 3px 0;
}
.cf-nav-menu .mud-nav-group > .mud-nav-link { padding: 0 12px !important; }
.cf-nav-menu .mud-nav-group .mud-nav-group-items .mud-nav-link { padding-left: 24px !important; }

/* ── Страница: заглавие и содржина ── */
.cf-main-content { padding: 72px 32px 0 !important; }
.cf-page { max-width: none; }
.cf-page h5.mud-typography-h5, .cf-page .mud-typography-h5 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.cf-page .mud-typography-h6 { font-size: 1rem; font-weight: 600; }

/* ── Табели (листи): чисти, без шарени редови, стискаво заглавие ── */
.mud-table { border-radius: var(--cf-radius) !important; overflow: hidden; }
.mud-table-container { overflow-x: auto; }
.mud-table-root .mud-table-head .mud-table-cell {
    background: #F8FAFC; color: #475569; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
    border-bottom: 1px solid var(--cf-border); padding: 10px 12px;
}
.mud-table-root .mud-table-body .mud-table-cell { padding: 10px 12px; border-bottom: 1px solid var(--cf-border); font-size: 0.875rem; }
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) { background-color: transparent !important; }
.mud-table-hover .mud-table-body .mud-table-row:hover { background-color: #F8FAFF !important; }
.mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }
.mud-table-pagination { border-top: 1px solid var(--cf-border); color: var(--cf-text-muted); }
/* Селекторот „Редови: 100“: MudBlazor го дава внатрешниот слот како block со padding 6px 0 7px, па вредноста
   седеше залепена за горниот раб (1 px горе, 20 px долу). Центрирање по висина; !important е потребен
   бидејќи обичното правило од MudBlazor го преоѓа. */
.mud-table-pagination .mud-select .mud-select-input {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding: 0;
}
.mud-table-cell .cf-sub, .mud-table-cell .mud-typography-caption { display: block; color: var(--cf-text-muted); font-size: 0.75rem; line-height: 1.3; }

/* ── Статуси: меки „pill“ ознаки ── */
.mud-chip.mud-chip-size-small { height: 24px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; }
.mud-chip.mud-chip-filled.mud-chip-color-success { background: #D1FAE5; color: #065F46; }
.mud-chip.mud-chip-filled.mud-chip-color-warning { background: #FEF3C7; color: #92400E; }
.mud-chip.mud-chip-filled.mud-chip-color-error   { background: #FEE2E2; color: #991B1B; }
.mud-chip.mud-chip-filled.mud-chip-color-info    { background: #E0F2FE; color: #075985; }
.mud-chip.mud-chip-filled.mud-chip-color-primary { background: #DBEAFE; color: #1D4ED8; }
.mud-chip.mud-chip-filled.mud-chip-color-default { background: #E2E8F0; color: #475569; }

/* ── Копчиња ── */
.mud-button-root { min-height: 36px; }
.mud-button-filled-size-medium, .mud-button-outlined-size-medium { height: 40px; padding: 0 16px; }
.mud-button-filled-primary { background-color: var(--cf-primary); }
.mud-button-filled-primary:hover { background-color: var(--cf-primary-dark); }

/* ── Дијалози: светло заглавие, јасни лабели, лента со акции ── */
.mud-overlay-dialog .mud-overlay-scrim, .mud-dialog-container .mud-overlay-scrim { background-color: rgba(15, 23, 42, 0.35) !important; }
.mud-dialog { border-radius: 16px !important; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28) !important; overflow: hidden; }
.mud-dialog .mud-dialog-title {
    background: #FFFFFF; color: var(--cf-text); border-bottom: 1px solid var(--cf-border);
    padding: 20px 24px 16px; position: relative;
}
.mud-dialog-title .mud-typography { color: var(--cf-text); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.005em; }
.mud-dialog-title .mud-icon-button .mud-icon-root,
.mud-dialog-title .mud-button-root .mud-icon-root { color: var(--cf-text-muted); }
.mud-dialog-title .mud-icon-button:hover { background-color: #F1F5F9; }
.mud-dialog .mud-dialog-content { padding: 20px 24px; }
.mud-dialog .mud-dialog-actions {
    padding: 14px 24px; background: #F8FAFC; border-top: 1px solid var(--cf-border); gap: 8px;
}
/* лабели над полињата: нормален текст, не мали капитал-букви */
.cf-page .mud-input-control-input-container .mud-input-label,
.mud-dialog .mud-input-control-input-container .mud-input-label,
.cf-form .mud-input-control-input-container .mud-input-label,
.cf-page .mud-input-control .mud-input-label,
.mud-dialog .mud-input-control .mud-input-label,
.cf-form .mud-input-control .mud-input-label {
    font-size: 0.8125rem !important; font-weight: 500 !important; letter-spacing: 0 !important;
    text-transform: none !important; color: #334155 !important; margin: 0 0 6px !important;
}
/* спинер-стрелките не се потребни */
.mud-dialog .mud-input-numeric-spin, .cf-page .mud-input-numeric-spin { display: none; }
.mud-dialog .mud-input-control input[type=number] { text-align: right; }

/* ── Документи: лепливa лента со тотали ── */
.cf-sticky-totals {
    position: sticky; bottom: 0; z-index: 5; margin: 20px -32px 0; padding: 12px 32px;
    background: #FFFFFF; border-top: 1px solid var(--cf-border); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px;
}
.cf-sticky-totals .cf-st-label { font-size: 0.75rem; color: var(--cf-text-muted); }
.cf-sticky-totals .cf-st-value { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-sticky-totals .cf-st-grand { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--cf-primary-dark); font-variant-numeric: tabular-nums; }
.cf-sticky-totals .cf-st-spacer { flex: 1; }
.cf-sticky-totals .cf-st-warn { color: #B45309; font-size: 0.8125rem; font-weight: 500; }

/* ── Експанзион панели (документи): картички со јасен наслов ── */
.mud-expand-panels .mud-expand-panel { border-radius: var(--cf-radius) !important; margin-bottom: 16px; border: 1px solid var(--cf-border); box-shadow: var(--cf-shadow-sm); }
.mud-expand-panel .mud-expand-panel-header { min-height: 56px; padding: 0 24px; }
.mud-expand-panel .mud-expand-panel-content { padding: 0 24px 20px; }
.mud-expand-panels .mud-expand-panel::before, .mud-expand-panel:before { display: none; }

@media (max-width: 960px) {
    .cf-main-content { padding: 64px 16px 0 !important; }
    .cf-sticky-totals { margin: 16px -16px 0; padding: 12px 16px; }
}

/* ── Полиња: лабела веднаш над полето (без празнина), помал вертикален размак ── */
.cf-page .mud-input-control .mud-input,
.mud-dialog .mud-input-control .mud-input,
.cf-form .mud-input-control .mud-input,
.cf-page .mud-input-control > .mud-input-control-input-container > .mud-input,
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input {
    margin-top: 0 !important;
}
.cf-page .mud-grid-spacing-xs-2 > .mud-grid-item,
.mud-dialog .mud-grid-spacing-xs-2 > .mud-grid-item { padding-top: 6px !important; padding-bottom: 6px !important; }
.cf-page .mud-input-control .mud-input-helper-text { margin-top: 2px; min-height: 0; }
/* икона за мапа и сл. — на линија со полето, не на нов ред */
.cf-page .mud-input-control + .mud-tooltip-root,
.cf-page .mud-stack .mud-input-control + * { flex: none; }

/* ── Товарен лист ── */
.cf-wb-title {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cf-text-muted);
    padding: 16px 0 4px; margin-bottom: 4px; border-bottom: 1px solid var(--cf-border);
}
.cf-wb-title:first-child { padding-top: 0; }

/* ── Унифицирана висина на сите полиња (текст, select, autocomplete, датум, број): 40px ── */
.cf-page .mud-input-control .mud-input:not(:has(textarea)),
.mud-dialog .mud-input-control .mud-input:not(:has(textarea)),
.cf-form .mud-input-control .mud-input:not(:has(textarea)) {
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}
.cf-page .mud-input-control .mud-input:not(:has(textarea)) > input,
.cf-page .mud-input-control .mud-input:not(:has(textarea)) input.mud-input-slot,
.mud-dialog .mud-input-control .mud-input:not(:has(textarea)) > input,
.mud-dialog .mud-input-control .mud-input:not(:has(textarea)) input.mud-input-slot,
.cf-form .mud-input-control .mud-input:not(:has(textarea)) > input,
.cf-form .mud-input-control .mud-input:not(:has(textarea)) input.mud-input-slot {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.25;
}
/* display:flex на <input> го сведува на ~20 знаци, а празниот div.mud-input-slot
   (резерва на MudInput, без содржина) го полни остатокот и ја покрива следната колона. */
.cf-page .mud-input > input.mud-input-root,
.mud-dialog .mud-input > input.mud-input-root,
.cf-form .mud-input > input.mud-input-root {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.cf-page .mud-autocomplete .mud-input > div.mud-input-slot,
.mud-dialog .mud-autocomplete .mud-input > div.mud-input-slot,
.cf-form .mud-autocomplete .mud-input > div.mud-input-slot {
    display: none !important;
}
.cf-page .mud-input-control .mud-input-adornment,
.mud-dialog .mud-input-control .mud-input-adornment { margin-top: 0; margin-bottom: 0; align-self: center; }
.cf-page .mud-input-control .mud-input-adornment .mud-icon-button,
.mud-dialog .mud-input-control .mud-input-adornment .mud-icon-button { padding: 4px; }
/* лабела: ист размак на сите */
.cf-page .mud-input-control .mud-input-label, .mud-dialog .mud-input-control .mud-input-label { line-height: 1.3 !important; min-height: 17px; }

/* пикери во Excel-табела: ќелија, не поле */
.cf-page .xl-grid .mud-input-control .mud-input,
.cf-page .xl-grid .mud-input-control .mud-input:not(:has(textarea)) {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    height: 35px !important; min-height: 35px !important; box-shadow: none !important; padding: 0 4px !important;
}
.cf-page .xl-grid .mud-input-control .mud-input:focus-within { box-shadow: none !important; }
.xl-grid td .mud-stack,
.xl-grid .mud-autocomplete,
.xl-grid .mud-autocomplete .mud-input-control,
.xl-grid .mud-autocomplete .mud-input { width: 100%; min-width: 0; max-width: 100%; }

/* ── Табови (сегментирани): .cf-tabs ── */
.cf-tabs { background: transparent; }
.cf-tabs > .mud-tabs-tabbar {
    background: #F1F5F9 !important; border: 1px solid var(--cf-border); border-radius: 12px; padding: 4px;
    min-height: 0 !important; box-shadow: none !important;
}
.cf-tabs .mud-tabs-tabbar-content { gap: 4px; }
.cf-tabs .mud-tabs-tabbar-wrapper { gap: 4px; }
.cf-tabs .mud-tab {
    text-transform: none !important; font-weight: 600; font-size: .875rem; letter-spacing: 0;
    min-width: 0 !important; min-height: 38px !important; height: 38px; padding: 0 18px !important;
    border-radius: 9px; color: #475569; opacity: 1; margin: 0;
}
.cf-tabs .mud-tab:hover { background: #E2E8F0; }
.cf-tabs .mud-tab.mud-tab-active {
    background: #fff; color: #1D4ED8; box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.cf-tabs .mud-tab-slider { display: none !important; }
.cf-tabs > .mud-tabs-panels { padding-top: 4px; }

/* MudSelect: внатрешниот div го носи избраниот текст. Autocomplete-от го носи текстот на <input>. */
.cf-page .mud-select .mud-select-input, .mud-dialog .mud-select .mud-select-input {
    height: 100% !important; min-height: 0 !important; padding: 0 !important; display: flex; align-items: center;
}
/* Избрана вредност: MudBlazor го става текстот во div.mud-select-input.mud-input-slot со inline display:inline
   (а одреден стил го прави block), па текстот оди горе, а стрелката останува централна. Празното поле е <input>
   и затоа е во центар. Со !important го изедначуваме со празното поле — на сите страници, не само во .cf-page.
   Скриениот div (inline display:none кога нема вредност) мора да остане скриен — инаку зафаќа половина од полето. */
.mud-select .mud-select-input.mud-input-slot:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    align-items: center !important;
    padding-left: 12px !important;
    padding-right: 6px !important;
}

/* Простор меѓу работ на полето и текстот (тесно е, особено кај филтрите). Табелите имаат свој збиен распоред — тие не се менуваат. */
.cf-page .mud-input-control .mud-input-slot,
.mud-dialog .mud-input-control .mud-input-slot,
.cf-form .mud-input-control .mud-input-slot {
    padding-left: 12px !important;
}
.mud-table .mud-input-control .mud-input-slot {
    padding-left: 0 !important;
}
.cf-page .mud-autocomplete input.mud-input-slot, .mud-dialog .mud-autocomplete input.mud-input-slot {
    height: 100% !important; min-height: 0 !important; padding: 0 !important;
}
.cf-page .mud-input-control > .mud-input-control-input-container, .mud-dialog .mud-input-control > .mud-input-control-input-container { margin: 0; }
.mud-dialog .cf-tabs > .mud-tabs-panels { min-height: 380px; }

/* ── Вертикални табови (лево): .cf-vtabs ── */
.cf-vtabs.mud-tabs { display: flex; flex-direction: row; align-items: stretch; }
.cf-vtabs > .mud-tabs-tabbar {
    flex: none; width: 208px; background: #F8FAFC !important; border: 1px solid var(--cf-border); border-radius: 12px; padding: 8px;
    align-self: flex-start;
}
.cf-vtabs .mud-tabs-tabbar-inner, .cf-vtabs .mud-tabs-tabbar-wrapper, .cf-vtabs .mud-tabs-tabbar-content { flex-direction: column !important; align-items: stretch; width: 100%; gap: 2px; }
.cf-vtabs .mud-tab {
    width: 100%; max-width: none; justify-content: flex-start; text-align: left; height: 38px; min-height: 38px !important;
    padding: 0 12px !important; border-radius: 8px; font-weight: 500;
}
.cf-vtabs .mud-tab.mud-tab-active { background: #EFF6FF; color: #1D4ED8; font-weight: 600; box-shadow: none; }
.cf-vtabs > .mud-tabs-panels { display: block; flex: 1; min-width: 0; padding-top: 0; } /* MudBlazor: .mud-tabs-vertical .mud-tabs-panels е flex (ред) → повеќе блокови во таб се редеа еден до друг */
.mud-dialog .cf-vtabs > .mud-tabs-panels { min-height: 420px; }
@media (max-width: 800px) {
    .cf-vtabs.mud-tabs { flex-direction: column; }
    .cf-vtabs > .mud-tabs-tabbar { width: 100%; }
    .cf-vtabs .mud-tabs-tabbar-inner, .cf-vtabs .mud-tabs-tabbar-wrapper, .cf-vtabs .mud-tabs-tabbar-content { flex-direction: row !important; flex-wrap: wrap; }
    .cf-vtabs .mud-tab { width: auto; }
    .cf-vtabs > .mud-tabs-panels { padding-left: 0; }
}
.cf-tabs .mud-tabs-panels .mud-grid { align-content: flex-start; }
.cf-vtabs > .mud-tabs-panels { padding-top: 8px; }

/* ═══════════════ Форма со лента за секции (.cf-sn) — дијалози како „Нов коминтент“ ═══════════════
   Лево навигација (скрол до секција + scroll-spy во site.js), десно еден скролабилен панел со секции. */
.mud-dialog .mud-dialog-content.cf-sn-content { padding: 0 !important; overflow: hidden; }
.cf-dlg-title { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.005em; color: var(--cf-text); }
.cf-dlg-hint { margin-right: auto; font-size: 0.75rem; color: var(--cf-text-muted); }
.cf-req { color: #DC2626; font-weight: 700; }

.cf-sn { --cf-sn-h: min(560px, calc(100vh - 230px)); display: grid; grid-template-columns: 192px minmax(0, 1fr); height: var(--cf-sn-h); }
.cf-sn > .mud-form, .mud-form > .cf-sn { height: var(--cf-sn-h); }
.cf-sn-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--cf-border); background: #FFFFFF; overflow-y: auto; }
.cf-sn-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 8px 12px; line-height: 1.25;
    border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500;
    color: #475569; text-align: left; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease;
}
.cf-sn-item:hover { background: #F1F5F9; color: var(--cf-text); }
.cf-sn-item.is-active { background: #EFF6FF; color: #1D4ED8; font-weight: 600; }
.cf-sn-count { font-size: 0.75rem; font-weight: 600; color: var(--cf-text-muted); font-variant-numeric: tabular-nums; }
.cf-sn-foot { margin-top: auto; padding-top: 12px; }
.cf-sn-body { position: relative; overflow-y: auto; padding: 20px 28px 0; min-width: 0; }
.cf-sn-sec { padding-bottom: 28px; }
/* последната секција е доволно висока за да може да се скролне до врвот (scroll-spy ја означува) */
.cf-sn-sec:last-child { min-height: calc(var(--cf-sn-h) - 16px); }
.cf-sn-h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--cf-border); font-size: 0.9375rem; font-weight: 700; color: var(--cf-text);
}
.cf-sn-h .cf-sn-count { font-size: 0.75rem; background: #F1F5F9; border-radius: 999px; padding: 1px 8px; }
.cf-sn-hint { margin-top: 10px; font-size: 0.75rem; color: var(--cf-text-muted); }
.cf-sn-empty { padding: 4px 0 12px; font-size: 0.875rem; color: var(--cf-text-muted); }
.cf-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--cf-primary); cursor: pointer; }
.cf-link:hover { text-decoration: underline; }
.cf-more + .cf-link { display: inline-block; margin-top: 10px; font-size: 0.75rem; }

/* 12-колонска мрежа: .sp-3 / .sp-4 / .sp-6 / .sp-9 / .sp-12 */
.cf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.cf-grid > .sp-3 { grid-column: span 3; }
.cf-grid > .sp-4 { grid-column: span 4; }
.cf-grid > .sp-6 { grid-column: span 6; }
.cf-grid > .sp-9 { grid-column: span 9; }
.cf-grid > .sp-12 { grid-column: span 12; }
.cf-grid + .cf-grid { margin-top: 14px; }
.cf-grid.cf-more { margin-top: 14px; }

/* Toggle (CfToggle) — iOS-стил; .cf-toggle-pill = ред во рамка */
.cf-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; user-select: none; font-size: 0.875rem; font-weight: 500; color: #334155; }
.cf-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-toggle-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #CBD5E1; transition: background-color 0.15s ease; }
.cf-toggle-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3); transition: transform 0.15s ease;
}
.cf-toggle-input:checked + .cf-toggle-track { background: var(--cf-primary); }
.cf-toggle-input:checked + .cf-toggle-track::after { transform: translateX(14px); }
.cf-toggle-input:focus-visible + .cf-toggle-track { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30); }
.cf-toggle.is-disabled { opacity: 0.55; cursor: not-allowed; }
.cf-toggle-pill {
    display: flex; width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid #D1D5DB; border-radius: 8px; background: #FFFFFF;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cf-toggle-pill:hover { border-color: #94A3B8; }
.cf-toggle-pill:has(.cf-toggle-input:checked) { border-color: #BFDBFE; background: #F8FAFF; }
.cf-toggle.is-danger:has(.cf-toggle-input:checked) { border-color: #FECACA; background: #FEF2F2; }
.cf-toggle.is-danger .cf-toggle-input:checked + .cf-toggle-track { background: #DC2626; }

/* Жиро-сметки */
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.8fr) auto auto; gap: 12px 14px;
    align-items: end; padding: 14px; margin-bottom: 12px; border: 1px solid var(--cf-border); border-radius: 12px;
}
.mud-button-root.cf-add-btn { border-style: dashed; border-color: var(--cf-border-strong); color: #475569; }
.mud-button-root.cf-add-btn:hover { background: #F8FAFC; }

@media (max-width: 760px) {
    .cf-sn { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .cf-sn-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--cf-border); padding: 8px; }
    .cf-sn-item { width: auto; gap: 8px; }
    .cf-sn-foot { margin-top: 0; padding-top: 0; width: 100%; }
    .cf-sn-body { padding: 16px 16px 0; }
    .cf-grid > [class*="sp-"] { grid-column: span 12; }
}

/* pill-toggle: една линија; задолжена лабела: црвена ѕвездичка */
.cf-toggle-pill { gap: 6px; padding: 0 8px; }
.cf-toggle-pill .cf-toggle-label { font-size: 0.8125rem; line-height: 1.15; min-width: 0; }
.cf-toggle-pill .cf-toggle-track { width: 30px; height: 18px; }
.cf-toggle-pill .cf-toggle-track::after { width: 14px; height: 14px; }
.cf-toggle-pill .cf-toggle-input:checked + .cf-toggle-track::after { transform: translateX(12px); }
.mud-dialog .mud-input-control.mud-input-required .mud-input-label::after,
.cf-page .mud-input-control.mud-input-required .mud-input-label::after { content: " *"; color: #DC2626; font-weight: 700; }

/* поднаслов во секција (.cf-sn-sub) */
.cf-grid > .cf-sn-sub {
    grid-column: span 12; margin-top: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--cf-text-muted);
}
.cf-sn-sub span { margin-left: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Варијанта за цела страница (поставки): картичка со лента лево и еден скролабилен панел */
.cf-sn.cf-sn-page {
    --cf-sn-h: max(460px, calc(100vh - 190px)); max-width: 1180px;
    border: 1px solid var(--cf-border); border-radius: 16px; background: #FFFFFF; box-shadow: var(--cf-shadow-sm); overflow: hidden;
}
.cf-sn-page .cf-sn-nav { background: #F8FAFC; }
.cf-sn-page .cf-sn-body { padding-right: 32px; }
.cf-hint-inline { margin-right: 0; }

/* Excel-grid со цени (артикл): заглавие на ред лево, колони за внес десно */
.cf-price-grid { table-layout: fixed; }
.cf-price-grid th.xl-rowhead {
    width: 24%; text-align: left; padding: 0 12px; background: var(--cf-bg); color: var(--cf-text);
    font-weight: 600; font-size: 0.8125rem; text-transform: none; letter-spacing: 0; white-space: nowrap;
    position: static; border-left: 0;
}
.cf-price-grid thead th.xl-rowhead { color: var(--cf-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; position: sticky; }
.cf-price-grid th.num, .cf-price-grid td.calc { width: 25%; }
.cf-price-grid + .cf-sn-hint, .xl-grid-wrap + .cf-sn-hint { margin-top: 10px; }

/* спинер-стрелки кај MudNumericField: MudBlazor-овото правило (3 класи) го победуваше горното display:none */
.mud-dialog .mud-input-control.mud-input-number-control .mud-input-numeric-spin,
.cf-page .mud-input-control.mud-input-number-control .mud-input-numeric-spin { display: none !important; }

/* Excel-grid со полиња во една редица (залиха, димензии, шифри…) — .cf-field-grid */
.cf-field-grid { table-layout: fixed; }
.cf-field-grid th.cf-col-wide { width: 34%; }
.cf-field-grid thead th { text-align: left; white-space: normal; line-height: 1.25; }
.cf-field-grid thead th.num { text-align: right; }
.cf-sn-subhead {
    margin: 18px 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--cf-text-muted);
}
.cf-sn-h + .cf-sn-subhead, .mud-alert + .cf-sn-subhead { margin-top: 0; }
/* пикери во Excel-ќелија и во дијалог (постоечкото правило важи само под .cf-page) */
.mud-dialog .xl-grid .mud-input-control .mud-input,
.mud-dialog .xl-grid .mud-input-control .mud-input:not(:has(textarea)) {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    height: 35px !important; min-height: 35px !important; box-shadow: none !important; padding: 0 4px !important;
}
.mud-dialog .xl-grid .mud-input-control .mud-input:focus-within { box-shadow: none !important; }
.mud-dialog .xl-grid .mud-input-control .mud-input:hover { background: transparent !important; }

/* ── Excel-grid „форма“: подзаглавија во редови (.xl-subhead), контролни ќелии, невалидна ќелија ── */
.cf-field-grid tbody tr.xl-subhead th {
    background: var(--cf-bg); color: var(--cf-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.02em; padding: 6px 8px; height: auto; text-align: left; white-space: normal; line-height: 1.25;
    border-top: 1px solid var(--cf-border);
}
.cf-field-grid tbody tr.xl-subhead:first-child th { border-top: 0; }
.cf-field-grid tbody tr.xl-subhead th.num { text-align: right; }
.xl-grid td.xl-ctl { padding: 0 8px; text-align: center; white-space: nowrap; }
.xl-grid td.xl-ctl .cf-toggle { vertical-align: middle; }
.cf-field-grid th.xl-ctl-h { width: 92px; white-space: nowrap; text-align: center; }
.cf-field-grid th.xl-ctl-h:empty { width: 84px; }
.xl-grid td.xl-invalid { background: #FEF2F2; box-shadow: inset 0 0 0 2px #DC2626; }
.xl-grid-wrap + .xl-grid-wrap, .cf-grid + .xl-grid-wrap, .xl-grid-wrap + .cf-grid { margin-top: 14px; }
.cf-bank-add { margin-top: 10px; }

/* ќелија со input + икона (пр. место + мапа) и датум-колона */
.xl-cell-flex { display: flex; align-items: center; height: 100%; }
.xl-cell-flex .xl-input { flex: 1; min-width: 0; }
.xl-cell-flex .mud-icon-button { padding: 4px; margin-right: 2px; flex: none; }
.cf-field-grid th.cf-col-date { width: 150px; }
.xl-grid .xl-input[type="date"] { font-variant-numeric: tabular-nums; }
.xl-grid select.xl-input { cursor: pointer; }

/* MudSelect во Excel-ќелија: избраниот текст вертикално центриран (беше block → горе) */
.xl-grid .mud-select .mud-input-slot.mud-select-input:not([style*="display:none"]):not([style*="display: none"]) { display: flex !important; align-items: center; height: 100% !important; padding: 0 4px !important; }

/* тесен контејнер: grid-от скролува хоризонтално наместо да ги мачка колоните */
.cf-field-grid { min-width: 520px; }

/* Избор „Приложи потпис / печат“ во ПДФ преглед и е-пошта */
.cf-pdf-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 12px; }
.cf-pdf-opts-label { font-size: 0.8125rem; font-weight: 600; color: var(--cf-text-muted); }

/* Картичка за слика на потпис/печат (Податоци за фирмата) */
.cf-art-card { border: 1px solid var(--cf-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cf-art-title { font-size: 0.8125rem; font-weight: 600; color: #334155; }
.cf-art-preview {
    height: 110px; border: 1px dashed var(--cf-border-strong); border-radius: 8px; background: #F8FAFC;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cf-art-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cf-art-empty { font-size: 0.8125rem; color: var(--cf-text-muted); }

/* ── Табели за влез/фактура: униформен пад и вертикално порамнување ──
   Текст и полиња во истата линија (централно), иста висина на ред, иста лева маргина. */
.xl-grid td { padding: 0 8px; height: 40px; vertical-align: middle; }
.xl-grid td:has(input:not([type="checkbox"])), .xl-grid td:has(.mud-input-control) { padding: 0; }
.xl-grid td .mud-input-control { display: flex; flex-direction: column; justify-content: center; margin: 0; }
.xl-grid td .mud-input-helper-text, .xl-grid td .mud-input-error { display: none; }
.xl-grid td .mud-input-slot { padding-top: 0; padding-bottom: 0; }
.xl-grid td .mud-select { display: flex; align-items: center; }

/* ── Фокус од тастатура (WCAG 2.4.7) ──
   MudBlazor го гаси outline-от (a:focus-visible, .mud-button-root) и фокусот на копче/линк не се гледаше.
   Полињата за внес (.mud-input-slot) и ќелиите на XlGrid си имаат свој прстен; тука се само останатите контроли. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
input[type="checkbox"]:focus-visible:not(.cf-toggle-input),
input[type="radio"]:focus-visible {
    outline: 2px solid var(--cf-primary);
    outline-offset: 2px;
}

/* Во листата за навигација прстенот оди внатре — контејнерот (overflow) инаку го сече. */
.cf-nav-menu .mud-nav-link:focus-visible,
.mud-navmenu .mud-nav-link:focus-visible {
    outline-offset: -2px;
}

/* ── Врска во редот на табела (CfRowLink): идентификаторот на документот е тастатурно достапен ──
   Целта е ≥ 24px висока (WCAG 2.5.8); изгледот останува „број во болд“, но во боја на врска. */
.cf-row-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--cf-primary);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-align: start;
}
.cf-row-link:hover { text-decoration: underline; }

/* ── Прескокни до содржина (WCAG 2.4.1): прв елемент на страницата, видлив само на фокус ── */
.cf-skip-link {
    position: absolute;
    top: -64px;
    left: 8px;
    z-index: 3000;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--cf-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.cf-skip-link:focus { top: 8px; }

/* <main> се фокусира програмски (скок од линкот) — без прстен околу целата страница. */
main.cf-page:focus { outline: none; }

/* ── Мобилен приказ ≤ 599px (UX-AUDIT 09) ──
   1) Горна лента: е-поштата на корисникот му го одзема местото на името на фирмата (остануваа 4px). Одјавата останува.
   2) Листи: еден документ = компактна картичка во 2 колони „етикета вредност“, не едно поле по линија (≈325px → ≈170px).
   3) Филтри: две контроли во ред. 4) Документ: наслов и акции во помалку редови — секундарните (outline) копчиња
      со икона стануваат само-икона (текстот останува за читачи на екран), главните (пополнети) го задржуваат текстот. */
@media (max-width: 599.95px) {
    .cf-user-chip { display: none !important; }
    .cf-appbar .mud-toolbar > .flex-grow-1 { display: none; }          /* брендот ја зафаќа слободната ширина — одјавата остава десно */
    .cf-appbar-brand { flex: 1 1 0; }

    .cf-page .mud-typography-h4 { font-size: 1.5rem; }
    .cf-page .mud-typography-h5 { font-size: 1.25rem; }

    .cf-page .mud-xs-table .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 12px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--cf-border);
    }
    .cf-page .mud-xs-table .mud-table-cell,
    .cf-page .mud-xs-table .mud-table-row .mud-table-cell:last-child {
        display: block;
        border: 0;
        padding: 2px 0;
        min-width: 0;
        overflow-wrap: anywhere;
        text-align: start !important;
    }
    .cf-page .mud-xs-table .mud-table-cell:before {
        display: inline;
        padding: 0;
        margin-inline-end: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--cf-text-muted);
    }
    .cf-page .mud-xs-table .mud-table-cell:first-child,
    .cf-page .mud-xs-table .mud-table-cell:last-child { grid-column: 1 / -1; }
    .cf-page .mud-xs-table .mud-table-cell:not([data-label]):before { content: none; }
    /* Ќелија со акции (без етикета): горе десно, во редот на бројот — не сопствен ред. */
    .cf-page .mud-xs-table .mud-table-row:has(> .mud-table-cell:last-child:not([data-label])) > .mud-table-cell:first-child { grid-column: 1; }
    .cf-page .mud-xs-table .mud-table-cell:last-child:not([data-label]) { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
    .cf-xs-hide { display: none !important; }            /* колона што е помалку важна на телефон (th и td) */

    .cf-page-toolbar .mud-input-control,
    .cf-page-toolbar .mud-select,
    .cf-page-toolbar .mud-autocomplete,
    .cf-page-toolbar .mud-picker { flex: 1 1 calc(50% - 8px); width: auto; min-width: 0; max-width: none !important; }
    .cf-page-toolbar .mud-input-control:has(input[placeholder]) { flex-basis: 100%; }   /* пребарување — цел ред */

    .cf-doc-header { gap: 8px; }
    .cf-doc-header .mud-icon-button { padding: 8px; }
    .cf-doc-header .mud-button-outlined:has(.mud-button-icon-start) { min-width: 40px; padding: 0 10px; }
    .cf-doc-header .mud-button-outlined:has(.mud-button-icon-start) .mud-button-label { font-size: 0; }   /* текстот останува за читачи на екран */
    .cf-doc-header .mud-button-outlined .mud-button-icon-start { margin: 0; }
}

/* ── Мрежи со ставки: колоната за артикл е најшироката, останатите пропорционално потесни (UX-AUDIT 08) ──
   .cf-grid-lines  (фактура): проценти — артикл 40%, опис 17%, останатите по 5–9%; се собира без хоризонтален скрол на 1280px.
   .cf-grid-dense  (влез/калкулација, 17 колони): истите колони ~15% потесни — не може да се собере, па:
   .cf-grid-sticky: првата колона (артикал/тип на трошок) остане прикачена лево при хоризонтален скрол. */
.cf-grid-lines .cf-col-qty   { width: 7%;  min-width: 64px; }
.cf-grid-lines .cf-col-money { width: 9%;  min-width: 92px; }
.cf-grid-lines .cf-col-pct   { width: 5%;  min-width: 56px; }

/* Природна ширина: табелата не се растегнува до работ на картичката — инаку вишокот простор го делат колоните со износи
   (на широк екран излегуваа ~190px). Износите се збиени, а ширината си ја одредува колоната за артикл (подолу); на екран
   поширок од табелата десно останува празно, на потесен се скролира (првата колона е закачена). */
.xl-grid.cf-grid-dense { width: max-content; }   /* не auto: тој ја полни картичката, бидејќи полињата за внес имаат своја вградена ширина */
.cf-grid-dense .cf-col-qty   { width: 56px;  min-width: 56px; }
.cf-grid-dense .cf-col-money { width: 90px;  min-width: 90px; }
.cf-grid-dense .cf-col-pct   { width: 52px;  min-width: 52px; }
.cf-grid-dense .cf-col-vat   { width: 84px;  min-width: 84px; }
.cf-grid-dense .cf-col-rate  { width: 72px;  min-width: 72px; }
.cf-grid-dense .cf-col-doc   { width: 104px; min-width: 104px; }
/* Артикл (влез): 380px; на екран што ја собира цела табела 480px, а на поширок 640px (двојно од првичните ~320px).
   Закачената колона не смее да го изеде екранот на лаптоп, затоа степените. */
.cf-grid-dense th.cf-col-article { width: 380px; min-width: 380px; }
@media (min-width: 2100px) { .cf-grid-dense th.cf-col-article { width: 480px; min-width: 480px; } }
@media (min-width: 2300px) { .cf-grid-dense th.cf-col-article { width: 640px; min-width: 640px; } }
.cf-grid-dense .xl-input, .cf-grid-dense td.calc { padding-left: 6px; padding-right: 6px; }
/* Долгите наслови (пр. „Ед. факт. цена (ден.)“) не смеат да ја одредуваат ширината на колоната — се прекршуваат во два реда. */
.cf-grid-dense thead th { white-space: normal; line-height: 1.2; vertical-align: bottom; }

@media (min-width: 960px) {
    .xl-grid.cf-grid-sticky th:first-child,
    .xl-grid.cf-grid-sticky td:first-child {
        position: sticky;
        left: 0;
        background: var(--cf-surface);
        box-shadow: inset -1px 0 0 var(--cf-border-strong);   /* border-collapse не ја носи границата со прикачената ќелија */
        overflow: hidden;   /* содржината не смее да се исцрта врз следната колона */
    }
    .xl-grid.cf-grid-sticky thead th:first-child { z-index: 3; background: var(--cf-bg); }
    .xl-grid.cf-grid-sticky tbody td:first-child,
    .xl-grid.cf-grid-sticky tfoot td:first-child { z-index: 1; }
    .xl-grid.cf-grid-sticky tfoot td:first-child { background: #F8FAFC; }
    .xl-grid.cf-grid-sticky tbody tr:hover td:first-child { background: var(--cf-primary-soft); }
    .xl-grid.cf-grid-sticky td:first-child:focus-within { position: sticky; z-index: 2; background: #fff; }
}

/* Празна листа: пејџерот „0-0 од 0“ не носи ништо (UX-AUDIT 18). Редовите со податоци имаат .mud-table-row, редот „нема податоци“ нема. */
.mud-table:not(:has(tbody tr.mud-table-row)) .mud-table-pagination { display: none; }

/* ── Паѓачка листа (MudSelect/Autocomplete): еден скрол, не два ──
   Поповерот (max-height 300px + рамка) носи класа overflow-y-auto, а внатрешната .mud-list е исто 300px → надвор за 2px и скролаат и двата.
   Bootstrap го има .overflow-y-auto како !important, па и ова мора. Скролира само листата. */
.mud-popover.mud-popover-relative-width { overflow-y: hidden !important; }

/* ── Пребарување над листа: не се стиснува и заглавниот ред се прелама ──
   Редот „наслов + прекинувач + пребарување + копче“ не се префрлаше во нов ред, па на ~1000px полето за пребарување остануваше ~120px
   (на /units се гледаше како да го нема). Полето има минимална ширина, а редот се прелама. Само за страниците со свој ред (MudStack);
   листите со CfPageHeader си го имаат филтерот во „cf-page-toolbar“ што веќе се прелама. */
.cf-search,
.cf-list-head > .d-flex.flex-row > .mud-input-control:has(input[placeholder^="Барај"]) {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 420px;
}
.cf-list-head > .d-flex.flex-row,
.cf-list-head > .mud-stack-row {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ── Извештаи на екран: KPI картички, ленти, колонест графикон ──
   Палета: прв 2 слота од проверената категориска палета (сина #2a78d6, портокалова #eb6834; ΔE ≥ 9 за CVD, validate_palette.js), сива за „Останато“.
   Светла тема (апликацијата нема темна). Текстот е во боја на текст, не на серија; боја носат само ознаките. */
.cf-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.cf-kpi {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    padding: 12px 14px;
}
.cf-kpi-label { font-size: 0.78rem; color: var(--cf-text-muted); }
.cf-kpi-value { font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin-top: 2px; color: var(--cf-text); overflow-wrap: anywhere; }
.cf-kpi-sub { font-size: 0.75rem; color: var(--cf-text-muted); margin-top: 2px; }

.cf-viz {
    --viz-s1: #2a78d6;
    --viz-s2: #eb6834;
    --viz-other: #c3c2b7;
    --viz-grid: #e1e0d9;
    --viz-axis: #c3c2b7;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    padding: 12px 14px;
    margin: 0;
}
.cf-viz-title { font-size: 0.9rem; font-weight: 600; margin: 0 0 6px; color: var(--cf-text); }
.cf-viz-sub, .cf-viz-empty { font-size: 0.8rem; color: var(--cf-text-muted); margin: 0 0 6px; }
.cf-viz-legend { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 0 0 6px; font-size: 0.8rem; color: var(--cf-text-muted); }
.cf-viz-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.cf-viz-s1 { background: var(--viz-s1); }
.cf-viz-s2 { background: var(--viz-s2); }
.cf-viz-other { background: var(--viz-other); }
.cf-viz-fill.cf-viz-s1 { fill: var(--viz-s1); background: none; }
.cf-viz-fill.cf-viz-s2 { fill: var(--viz-s2); background: none; }

.cf-bars-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cf-bars-row {
    display: grid;
    grid-template-columns: minmax(90px, 32%) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}
.cf-bars-label { color: var(--cf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-bars-track { display: block; height: 12px; }
.cf-bars-fill { display: block; height: 12px; min-width: 2px; border-radius: 0 4px 4px 0; }
.cf-bars-value { color: var(--cf-text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cf-bars-note { color: var(--cf-text-muted); }
.cf-bars-row:hover .cf-bars-label { text-decoration: underline dotted; }

.cf-cols-svg { width: 100%; height: auto; display: block; }
.cf-viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.cf-viz-axis { stroke: var(--viz-axis); stroke-width: 1; }
.cf-viz-tick { font-size: 11px; fill: var(--cf-text-muted); }
.cf-hit { fill: transparent; outline: none; }
.cf-cat:hover .cf-hit { fill: rgba(11, 11, 11, 0.04); }
.cf-hit:focus-visible { stroke: var(--cf-primary); stroke-width: 2; }
.cf-tip { display: none; pointer-events: none; }
.cf-cat:hover .cf-tip, .cf-cat:focus-within .cf-tip { display: block; }
.cf-tip-bg { fill: #ffffff; stroke: var(--viz-axis); }
.cf-tip-title { font-size: 11px; font-weight: 600; fill: var(--cf-text); }
.cf-tip-line { font-size: 11px; fill: var(--cf-text); }

.cf-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; }

/* Чекори на документ (Нацрт → Издадена → Испорачана → Платена) под заглавието */
.cf-doc-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: -4px 0 12px; padding: 0; list-style: none; font-size: 0.8125rem; }
.cf-doc-step { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-text-muted); }
.cf-doc-step + .cf-doc-step::before { content: ""; width: 28px; height: 1px; background: var(--cf-border-strong); margin: 0 10px; }
.cf-doc-step-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cf-border-strong); background: var(--cf-surface);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cf-doc-step-done { color: var(--cf-text); }
.cf-doc-step-done .cf-doc-step-dot { border-color: var(--cf-success); background: var(--cf-success); color: #fff; }
.cf-doc-step-partial .cf-doc-step-dot { border-color: var(--cf-success); background: linear-gradient(90deg, var(--cf-success) 50%, var(--cf-surface) 50%); }
.cf-doc-step-current { color: var(--cf-text); font-weight: 600; }
.cf-doc-step-current .cf-doc-step-dot { border-color: var(--cf-primary); box-shadow: 0 0 0 3px var(--cf-primary-soft); }
.cf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Под-навигација (табови-врски) над група страници, пр. Наплата */
.cf-subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--cf-border); }
.cf-subnav-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-bottom: -1px; color: var(--cf-text-muted);
    text-decoration: none; font-size: 0.875rem; font-weight: 500; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.cf-subnav-tab:hover { color: var(--cf-text); background: var(--cf-primary-soft); }
.cf-subnav-tab:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: -2px; }
.cf-subnav-tab-active { color: var(--cf-primary); border-bottom-color: var(--cf-primary); font-weight: 600; }

/* Горна лента: пребарување (Ctrl+K) и „Нов“ */
.cf-appbar-search { margin-right: 8px; color: var(--cf-text-muted) !important; border-color: var(--cf-border-strong) !important; min-width: 180px; justify-content: flex-start !important; }
.cf-appbar-search-text { flex: 1 1 auto; text-align: left; }
.cf-kbd { font: 600 0.6875rem/1 'Inter', sans-serif; padding: 3px 5px; margin-left: 12px; border: 1px solid var(--cf-border-strong);
    border-radius: 4px; background: var(--cf-bg); color: var(--cf-text-muted); }
.cf-appbar-new { margin-right: 12px; }
@media (max-width: 760px) {
    .cf-appbar-search { min-width: 0; }
    .cf-appbar-search-text, .cf-appbar-search .cf-kbd { display: none; }
}
.cf-search-dialog .mud-dialog-content { padding-top: 4px; }
.cf-search-results { min-height: 120px; max-height: 60vh; overflow-y: auto; margin-top: 8px; }
.cf-search-hint { color: var(--cf-text-muted); font-size: 0.875rem; padding: 16px 4px; }
.cf-search-group { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cf-text-muted); padding: 12px 4px 4px; }
.cf-search-list { list-style: none; margin: 0; padding: 0; }
.cf-search-hit { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--cf-radius-sm); color: var(--cf-text); text-decoration: none; }
.cf-search-hit:hover, .cf-search-hit:focus-visible { background: var(--cf-primary-soft); outline: none; }
.cf-search-hit .mud-icon-root { color: var(--cf-text-muted); flex: 0 0 auto; }
.cf-search-hit-title { font-weight: 600; white-space: nowrap; }
.cf-search-hit-sub { color: var(--cf-text-muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Патека во уредувач („← Фактури /“) */
.cf-breadcrumb { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 0.875rem; }
.cf-breadcrumb-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; color: var(--cf-text-muted); text-decoration: none; font-weight: 500; }
.cf-breadcrumb-link:hover { color: var(--cf-primary); background: var(--cf-primary-soft); }
.cf-breadcrumb-link:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: 1px; }
.cf-breadcrumb-sep { color: var(--cf-border-strong); }