/* _content/CashFlow.UI/Components/Layout/AuthLayout.razor.rz.scp.css */
.cf-auth-wrapper[b-365jc6n8aj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    background-color: var(--cf-bg-app, #0f172a);
    padding: 1.5rem;
    box-sizing: border-box;
}
/* _content/CashFlow.UI/Components/Layout/MainLayout.razor.rz.scp.css */
/* Izolovani stilovi za MainLayout.razor */

.cf-error-toast[b-nuo5sxzyj5] {
    background: var(--cf-bg-surface);
    border: 1px solid var(--cf-color-danger);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-xl);
    bottom: 1.5rem;
    box-sizing: border-box;
    display: none;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    position: fixed;
    z-index: 1000;
    align-items: center;
    gap: 1rem;
    color: var(--cf-text-primary);
}

#blazor-error-ui .dismiss[b-nuo5sxzyj5] {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--cf-text-muted);
}

#blazor-error-ui .dismiss:hover[b-nuo5sxzyj5] {
    color: var(--cf-text-primary);
}
/* _content/CashFlow.UI/Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW NAVMENU - IZOLOVANI STILOVI (NavMenu.razor.css)
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-sidebar-container[b-6vg77poc2i] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    user-select: none;
    background-color: var(--cf-bg-surface);
}

/* --------------------------------------------------------------------------
   ZAGLAVLJE MENIJA (NAVIGACIJA + TOGGLE DUGME)
   -------------------------------------------------------------------------- */
.cf-sidebar-header[b-6vg77poc2i] {
    height: 48px;
    border-bottom: 1px solid var(--cf-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    flex-shrink: 0;
    overflow: hidden;
}

.cf-sidebar-title[b-6vg77poc2i] {
    font-size: 0.90rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-rail-toggle[b-6vg77poc2i] {
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
    border-radius: var(--cf-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.cf-rail-icon[b-6vg77poc2i] {
    line-height: 1;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   SELEKTOR PREDUZEĆA (ZONA 2 - ISPOD ZAGLAVLJA MENIJA)
   -------------------------------------------------------------------------- */
.cf-sidebar-company-selector[b-6vg77poc2i] {
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    flex-shrink: 0;
    transition: all var(--cf-transition-fast);
}

.cf-company-selector-box[b-6vg77poc2i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    padding: 0.25rem 0.5rem;
    transition: border-color var(--cf-transition-fast), box-shadow var(--cf-transition-fast);
}

.cf-company-selector-box:focus-within[b-6vg77poc2i] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cf-company-icon[b-6vg77poc2i] {
    font-size: 1.15rem;
    line-height: 1;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cf-company-select[b-6vg77poc2i] {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0.25rem 0.35rem;
    font-size: var(--cf-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--cf-text-primary);
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.cf-company-select:focus[b-6vg77poc2i] {
    box-shadow: none;
    border: none;
}

.cf-company-select option[b-6vg77poc2i] {
    background-color: var(--cf-bg-surface);
    color: var(--cf-text-primary);
}

/* --------------------------------------------------------------------------
   NAVIGACIONA LISTA I SEKCIJE (SKLAPAJUĆE / ACCORDION)
   -------------------------------------------------------------------------- */
.cf-sidebar-nav[b-6vg77poc2i] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cf-nav-group[b-6vg77poc2i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-nav-group-header[b-6vg77poc2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    text-align: left;
    color: var(--cf-text-muted);
    border-radius: var(--cf-radius-sm);
    transition: color var(--cf-transition-fast), background-color var(--cf-transition-fast);
    user-select: none;
}

.cf-nav-group-header:hover[b-6vg77poc2i] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-nav-section-title[b-6vg77poc2i] {
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-nav-chevron[b-6vg77poc2i] {
    font-size: 0.75rem;
    line-height: 1;
    transition: transform var(--cf-transition-fast);
    color: inherit;
    display: inline-block;
}

.cf-nav-chevron.cf-chevron-collapsed[b-6vg77poc2i] {
    transform: rotate(-90deg);
}

.cf-nav-chevron.cf-chevron-expanded[b-6vg77poc2i] {
    transform: rotate(0deg);
}

.cf-nav-group-content[b-6vg77poc2i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-nav-group-content.cf-collapsed[b-6vg77poc2i] {
    display: none;
}

/* --------------------------------------------------------------------------
   NAVIGACIONI LINKOVI (cf-nav-link i cf-nav-item)
   -------------------------------------------------------------------------- */
.cf-nav-link[b-6vg77poc2i],
.cf-nav-item[b-6vg77poc2i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
    padding: 0.6rem 0.75rem;
    border-radius: var(--cf-radius-md);
    color: var(--cf-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--cf-transition-fast);
    overflow: hidden;
}

.cf-nav-link:hover[b-6vg77poc2i],
.cf-nav-item:hover[b-6vg77poc2i] {
    background-color: var(--cf-bg-surface-hover);
    color: var(--cf-text-primary);
}

.cf-nav-link.active[b-6vg77poc2i],
.cf-nav-item.active[b-6vg77poc2i] {
    background: var(--cf-brand-gradient);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.cf-nav-icon[b-6vg77poc2i] {
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cf-nav-text[b-6vg77poc2i] {
    font-size: 0.95rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SKLAPANJE / RAIL REŽIM (Kada je lijevi meni sklopljen - 60px)
   -------------------------------------------------------------------------- */
:global(body.cf-sidebar-collapsed) .cf-sidebar-container[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-sidebar-container[b-6vg77poc2i] {
    overflow: hidden;
}

:global(body.cf-sidebar-collapsed) .cf-sidebar-title[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-sidebar-title[b-6vg77poc2i],
:global(body.cf-sidebar-collapsed) .cf-nav-group-header[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-group-header[b-6vg77poc2i],
:global(body.cf-sidebar-collapsed) .cf-nav-section-title[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-section-title[b-6vg77poc2i],
:global(body.cf-sidebar-collapsed) .cf-nav-text[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-text[b-6vg77poc2i],
:global(body.cf-sidebar-collapsed) .cf-company-select[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-company-select[b-6vg77poc2i] {
    display: none !important;
}

:global(body.cf-sidebar-collapsed) .cf-sidebar-header[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-sidebar-header[b-6vg77poc2i] {
    justify-content: center;
    padding: 0;
}

:global(body.cf-sidebar-collapsed) .cf-rail-toggle[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-rail-toggle[b-6vg77poc2i] {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

:global(body.cf-sidebar-collapsed) .cf-sidebar-company-selector[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-sidebar-company-selector[b-6vg77poc2i] {
    padding: 0.5rem 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

:global(body.cf-sidebar-collapsed) .cf-company-selector-box[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-company-selector-box[b-6vg77poc2i] {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    justify-content: center;
    width: 100%;
}

:global(body.cf-sidebar-collapsed) .cf-company-icon[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-company-icon[b-6vg77poc2i] {
    width: 38px;
    height: 38px;
    border-radius: var(--cf-radius-md);
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    cursor: pointer;
    font-size: 1.25rem;
}

:global(body.cf-sidebar-collapsed) .cf-sidebar-nav[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-sidebar-nav[b-6vg77poc2i] {
    padding: 0.5rem 0.25rem;
    align-items: center;
}

:global(body.cf-sidebar-collapsed) .cf-nav-group[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-group[b-6vg77poc2i] {
    width: 100%;
    align-items: center;
}

:global(body.cf-sidebar-collapsed) .cf-nav-group-content[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-group-content[b-6vg77poc2i] {
    display: flex !important;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

:global(body.cf-sidebar-collapsed) .cf-nav-link[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-link[b-6vg77poc2i],
:global(body.cf-sidebar-collapsed) .cf-nav-item[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-item[b-6vg77poc2i] {
    justify-content: center;
    padding: 0.6rem 0;
    width: 100%;
    gap: 0;
}

:global(body.cf-sidebar-collapsed) .cf-nav-icon[b-6vg77poc2i],
:global(.cf-sidebar-collapsed) .cf-nav-icon[b-6vg77poc2i] {
    width: 24px;
    text-align: center;
    margin: 0 auto;
}

/* Podrška za Container Query ako je širina manja od 90px */
@container (max-width: 90px) {
    .cf-sidebar-title[b-6vg77poc2i],
    .cf-nav-group-header[b-6vg77poc2i],
    .cf-nav-section-title[b-6vg77poc2i],
    .cf-nav-text[b-6vg77poc2i],
    .cf-company-select[b-6vg77poc2i] {
        display: none !important;
    }

    .cf-sidebar-header[b-6vg77poc2i] {
        justify-content: center;
        padding: 0;
    }

    .cf-rail-toggle[b-6vg77poc2i] {
        width: 38px;
        height: 38px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cf-sidebar-company-selector[b-6vg77poc2i] {
        padding: 0.5rem 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cf-company-selector-box[b-6vg77poc2i] {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        justify-content: center;
        width: 100%;
    }

    .cf-company-icon[b-6vg77poc2i] {
        width: 38px;
        height: 38px;
        border-radius: var(--cf-radius-md);
        background-color: var(--cf-bg-surface-alt);
        border: 1px solid var(--cf-border-color);
        cursor: pointer;
        font-size: 1.25rem;
    }

    .cf-sidebar-nav[b-6vg77poc2i] {
        padding: 0.5rem 0.25rem;
        align-items: center;
    }

    .cf-nav-group[b-6vg77poc2i] {
        width: 100%;
        align-items: center;
    }

    .cf-nav-group-content[b-6vg77poc2i] {
        display: flex !important;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
    }

    .cf-nav-link[b-6vg77poc2i],
    .cf-nav-item[b-6vg77poc2i] {
        justify-content: center;
        padding: 0.6rem 0;
        width: 100%;
        gap: 0;
    }

    .cf-nav-icon[b-6vg77poc2i] {
        width: 24px;
        text-align: center;
        margin: 0 auto;
    }
}
/* _content/CashFlow.UI/Components/Pages/Admin/Categories.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW CATEGORIES & TAGS COMPONENT - IZOLOVANI STILOVI
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-categories-page[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. GORNJE ZAGLAVLJE STRANICE
   -------------------------------------------------------------------------- */
.cf-page-header[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-header-title-group[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-6jluo2dzwm] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cf-title-icon[b-6jluo2dzwm] {
    font-size: 1.4rem;
    line-height: 1;
}

.cf-page-subtitle[b-6jluo2dzwm] {
    font-size: var(--cf-font-size-sm, 0.875rem);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-header-actions[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. TAB NAVIGACIJA NA VRHU
   -------------------------------------------------------------------------- */
.cf-tabs-nav[b-6jluo2dzwm] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--cf-border-color);
    padding-bottom: 0;
}

.cf-tab-button[b-6jluo2dzwm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--cf-text-muted);
    font-size: var(--cf-font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease-in-out;
}

.cf-tab-button:hover[b-6jluo2dzwm] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-hover, rgba(0, 0, 0, 0.03));
    border-radius: var(--cf-radius-md, 6px) var(--cf-radius-md, 6px) 0 0;
}

.cf-tab-button.cf-tab-active[b-6jluo2dzwm] {
    color: var(--cf-primary, #3B82F6);
    border-bottom-color: var(--cf-primary, #3B82F6);
    background-color: var(--cf-bg-surface);
}

.cf-tab-icon[b-6jluo2dzwm] {
    font-size: 1.1rem;
}

.cf-tab-badge[b-6jluo2dzwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    background-color: var(--cf-bg-neutral, #e2e8f0);
    color: var(--cf-text-secondary, #475569);
}

.cf-tab-active .cf-tab-badge[b-6jluo2dzwm] {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--cf-primary, #3B82F6);
}

/* --------------------------------------------------------------------------
   3. KATEGORIJE - GRID PANELA (PRIHODI / RASHODI)
   -------------------------------------------------------------------------- */
.cf-categories-grid[b-6jluo2dzwm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 960px) {
    .cf-categories-grid[b-6jluo2dzwm] {
        grid-template-columns: 1fr;
    }
}

.cf-category-panel[b-6jluo2dzwm] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg, 8px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cf-panel-income[b-6jluo2dzwm] {
    border-top: 4px solid #10B981;
}

.cf-panel-expense[b-6jluo2dzwm] {
    border-top: 4px solid #EF4444;
}

.cf-panel-header[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background-color: var(--cf-bg-subtle, rgba(0, 0, 0, 0.02));
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-panel-title-group[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-panel-icon[b-6jluo2dzwm] {
    font-size: 1.35rem;
}

.cf-panel-title[b-6jluo2dzwm] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--cf-text-primary);
}

.cf-panel-subtitle[b-6jluo2dzwm] {
    font-size: 0.75rem;
    color: var(--cf-text-muted);
}

.cf-panel-body[b-6jluo2dzwm] {
    padding: 0.75rem;
    min-height: 250px;
}

.cf-empty-panel[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    gap: 0.75rem;
}

.cf-empty-panel .cf-empty-icon[b-6jluo2dzwm] {
    font-size: 2.25rem;
    opacity: 0.4;
}

.cf-empty-panel .cf-empty-text[b-6jluo2dzwm] {
    font-size: var(--cf-font-size-sm, 0.875rem);
    color: var(--cf-text-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   4. STABLO KATEGORIJA (TREE STRUCTURE)
   -------------------------------------------------------------------------- */
.cf-tree-container[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-tree-node[b-6jluo2dzwm] {
    border-radius: var(--cf-radius-md, 6px);
    transition: background-color 0.15s ease;
}

.cf-tree-node:hover[b-6jluo2dzwm] {
    background-color: var(--cf-bg-hover, rgba(0, 0, 0, 0.03));
}

.cf-node-content[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    gap: 0.5rem;
}

.cf-node-left[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.cf-tree-toggle[b-6jluo2dzwm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cf-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 3px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.cf-tree-toggle:hover[b-6jluo2dzwm] {
    color: var(--cf-text-primary);
    background-color: rgba(0, 0, 0, 0.06);
}

.cf-tree-spacer[b-6jluo2dzwm] {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.cf-node-icon[b-6jluo2dzwm] {
    font-size: 1rem;
    line-height: 1;
}

.cf-node-name[b-6jluo2dzwm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-node-inactive .cf-node-name[b-6jluo2dzwm] {
    color: var(--cf-text-muted);
    text-decoration: line-through;
}

.cf-node-actions[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.cf-tree-node:hover .cf-node-actions[b-6jluo2dzwm] {
    opacity: 1;
}

.cf-tree-children[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Badževi za stablo */
.cf-badge-company-sm[b-6jluo2dzwm] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563EB;
    border-radius: 4px;
    font-weight: 500;
}

.cf-badge-global-sm[b-6jluo2dzwm] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(107, 114, 128, 0.1);
    color: var(--cf-text-muted);
    border-radius: 4px;
    font-weight: 500;
}

.cf-badge-inactive-sm[b-6jluo2dzwm] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border-radius: 4px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. OPERATIVNE OZNAKE (TAGOVI) - SEKCIJA I MREŽA
   -------------------------------------------------------------------------- */
.cf-tags-section[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-tags-grid[b-6jluo2dzwm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.cf-tag-card[b-6jluo2dzwm] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-left: 4px solid var(--tag-accent-color, #3B82F6);
    border-radius: var(--cf-radius-lg, 8px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cf-tag-card:hover[b-6jluo2dzwm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.cf-tag-card-top[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cf-tag-badge-sample[b-6jluo2dzwm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    color: #ffffff;
    font-size: 0.825rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.cf-tag-sample-dot[b-6jluo2dzwm] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
}

.cf-tag-sample-name[b-6jluo2dzwm] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.cf-tag-actions[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cf-tag-card-bottom[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed var(--cf-border-color);
    padding-top: 0.5rem;
}

.cf-tag-meta[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.75rem;
    color: var(--cf-text-muted);
}

.cf-tag-company-name[b-6jluo2dzwm] {
    font-weight: 500;
}

.cf-tag-color-hex[b-6jluo2dzwm] {
    font-family: monospace;
    font-weight: 600;
    color: var(--cf-text-secondary);
}

.cf-tags-footer[b-6jluo2dzwm] {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

/* --------------------------------------------------------------------------
   6. BIRAČ BOJE I PALETA (TAG FORM MODAL)
   -------------------------------------------------------------------------- */
.cf-color-picker-box[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cf-color-input[b-6jluo2dzwm] {
    width: 48px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md, 6px);
    background: transparent;
    cursor: pointer;
}

.cf-color-text-input[b-6jluo2dzwm] {
    max-width: 140px;
    font-family: monospace;
    font-weight: 600;
    text-transform: uppercase;
}

.cf-color-palette[b-6jluo2dzwm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-color-swatch[b-6jluo2dzwm] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--cf-border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cf-color-swatch:hover[b-6jluo2dzwm] {
    transform: scale(1.15);
}

.cf-color-swatch.cf-swatch-selected[b-6jluo2dzwm] {
    box-shadow: 0 0 0 2px var(--cf-primary, #3B82F6), 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.cf-tag-preview-container[b-6jluo2dzwm] {
    padding: 1rem;
    background-color: var(--cf-bg-subtle, rgba(0, 0, 0, 0.02));
    border: 1px dashed var(--cf-border-color);
    border-radius: var(--cf-radius-md, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   7. SELEKTOR TIPA KATEGORIJE (INCOME / EXPENSE)
   -------------------------------------------------------------------------- */
.cf-type-selector[b-6jluo2dzwm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cf-type-btn[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 2px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md, 6px);
    background-color: var(--cf-bg-surface);
    color: var(--cf-text-muted);
    font-size: var(--cf-font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cf-type-btn:hover:not(:disabled)[b-6jluo2dzwm] {
    border-color: var(--cf-text-secondary);
    color: var(--cf-text-primary);
}

.cf-type-income.cf-type-selected[b-6jluo2dzwm] {
    border-color: #10B981;
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-weight: 700;
}

.cf-type-expense.cf-type-selected[b-6jluo2dzwm] {
    border-color: #EF4444;
    background-color: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    font-weight: 700;
}

.cf-btn-success[b-6jluo2dzwm] {
    background-color: #10B981;
    color: #ffffff;
    border: 1px solid #059669;
}

.cf-btn-success:hover[b-6jluo2dzwm] {
    background-color: #059669;
}

.cf-btn-danger-outline[b-6jluo2dzwm] {
    background-color: transparent;
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cf-btn-danger-outline:hover[b-6jluo2dzwm] {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: #EF4444;
}

/* --------------------------------------------------------------------------
   8. FILTER TRAKA I AUTOFILL ZAŠTITA
   -------------------------------------------------------------------------- */
.cf-filter-card[b-6jluo2dzwm] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg, 8px);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cf-filter-grid[b-6jluo2dzwm] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .cf-filter-grid[b-6jluo2dzwm] {
        grid-template-columns: 1fr;
    }
}

.cf-filter-item[b-6jluo2dzwm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-filter-label[b-6jluo2dzwm] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
}

.cf-search-box[b-6jluo2dzwm] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.cf-search-icon[b-6jluo2dzwm] {
    position: absolute;
    left: 0.75rem;
    color: var(--cf-text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.cf-search-input[b-6jluo2dzwm] {
    padding-left: 2.25rem !important;
    padding-right: 2rem;
    height: 38px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md, 6px);
    font-size: var(--cf-font-size-sm, 0.875rem);
}

.cf-search-input[b-6jluo2dzwm]::-webkit-search-cancel-button,
.cf-search-input[b-6jluo2dzwm]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.cf-search-clear[b-6jluo2dzwm] {
    position: absolute;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cf-search-clear:hover[b-6jluo2dzwm] {
    color: var(--cf-text-primary);
    background-color: rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   9. MODALI I DIJALOZI
   -------------------------------------------------------------------------- */
.cf-modal-backdrop[b-6jluo2dzwm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.cf-modal-dialog[b-6jluo2dzwm] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg, 8px);
    width: 100%;
    max-width: 520px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cfModalFadeIn-b-6jluo2dzwm 0.2s ease-out;
}

.cf-modal-dialog-sm[b-6jluo2dzwm] {
    max-width: 440px;
}

@keyframes cfModalFadeIn-b-6jluo2dzwm {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cf-modal-header[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-subtle, rgba(0, 0, 0, 0.02));
}

.cf-modal-title-group[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-modal-icon[b-6jluo2dzwm] {
    font-size: 1.2rem;
}

.cf-modal-title[b-6jluo2dzwm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-modal-close[b-6jluo2dzwm] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.cf-modal-close:hover[b-6jluo2dzwm] {
    color: var(--cf-text-primary);
    background-color: rgba(0, 0, 0, 0.06);
}

.cf-modal-body[b-6jluo2dzwm] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(85vh - 120px);
    overflow-y: auto;
}

.cf-modal-footer[b-6jluo2dzwm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-subtle, rgba(0, 0, 0, 0.02));
}

.cf-delete-prompt[b-6jluo2dzwm] {
    font-size: 0.95rem;
    color: var(--cf-text-primary);
    line-height: 1.5;
    margin: 0;
}

.cf-btn-danger-hover:hover[b-6jluo2dzwm] {
    color: #EF4444;
    background-color: rgba(239, 68, 68, 0.1);
}
/* _content/CashFlow.UI/Components/Pages/Admin/Doctors.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW DOCTORS / COLLABORATORS COMPONENT - IZOLOVANI STILOVI
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-doctors-container[b-oxmaonhynt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. GORNJE ZAGLAVLJE RADNOG PROSTORA
   -------------------------------------------------------------------------- */
.cf-doctors-header[b-oxmaonhynt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-doctors-title-group[b-oxmaonhynt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-doctors-title[b-oxmaonhynt] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cf-title-icon[b-oxmaonhynt] {
    font-size: 1.4rem;
    line-height: 1;
}

.cf-doctors-subtitle[b-oxmaonhynt] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-doctors-header-actions[b-oxmaonhynt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. FILTER TRAKA
   -------------------------------------------------------------------------- */
.cf-filter-card[b-oxmaonhynt] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cf-filter-grid[b-oxmaonhynt] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    align-items: flex-end;
}

@media (max-width: 900px) {
    .cf-filter-grid[b-oxmaonhynt] {
        grid-template-columns: 1fr;
    }
}

.cf-filter-item[b-oxmaonhynt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-filter-label[b-oxmaonhynt] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
}

.cf-search-box[b-oxmaonhynt] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.cf-search-icon[b-oxmaonhynt] {
    position: absolute;
    left: 0.75rem;
    color: var(--cf-text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.cf-search-input[b-oxmaonhynt] {
    padding-left: 2.25rem !important;
    padding-right: 2rem;
    height: 38px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    width: 100%;
    transition: all var(--cf-transition-fast);
}

.cf-search-input:focus[b-oxmaonhynt] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cf-search-clear[b-oxmaonhynt] {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 50%;
}

.cf-search-clear:hover[b-oxmaonhynt] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

/* --------------------------------------------------------------------------
   3. OBAVJEŠTENJA
   -------------------------------------------------------------------------- */
.cf-alert-close[b-oxmaonhynt] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--cf-transition-fast);
}

.cf-alert-close:hover[b-oxmaonhynt] {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   4. STANJA: UČITAVANJE I PRAZNO
   -------------------------------------------------------------------------- */
.cf-loading-state[b-oxmaonhynt],
.cf-empty-state[b-oxmaonhynt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    text-align: center;
    gap: 1rem;
}

.cf-spinner-lg[b-oxmaonhynt] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.cf-loading-text[b-oxmaonhynt] {
    font-size: var(--cf-font-size-base);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-empty-icon[b-oxmaonhynt] {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.7;
}

.cf-empty-title[b-oxmaonhynt] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-empty-text[b-oxmaonhynt] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-muted);
    max-width: 460px;
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. KARTICA I TABELA SARADNIKA
   -------------------------------------------------------------------------- */
.cf-table-card[b-oxmaonhynt] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cf-table-wrapper[b-oxmaonhynt] {
    overflow-x: auto;
    width: 100%;
}

.cf-table[b-oxmaonhynt] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cf-font-size-sm);
    text-align: left;
}

.cf-table th[b-oxmaonhynt] {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.cf-table td[b-oxmaonhynt] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--cf-border-color);
    vertical-align: middle;
    color: var(--cf-text-primary);
}

.cf-table tr:last-child td[b-oxmaonhynt] {
    border-bottom: none;
}

.cf-table tbody tr[b-oxmaonhynt] {
    transition: background-color var(--cf-transition-fast);
}

.cf-table tbody tr:hover[b-oxmaonhynt] {
    background-color: var(--cf-bg-surface-hover);
}

.cf-row-inactive[b-oxmaonhynt] {
    opacity: 0.65;
    background-color: rgba(241, 245, 249, 0.4);
}

.cf-text-right[b-oxmaonhynt] {
    text-align: right;
}

/* Prikaz saradnika u ćeliji */
.cf-doctor-cell[b-oxmaonhynt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-doctor-avatar[b-oxmaonhynt] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.cf-doctor-meta[b-oxmaonhynt] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cf-doctor-name[b-oxmaonhynt] {
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-doctor-title-tag[b-oxmaonhynt] {
    font-size: 0.75rem;
    color: #0284c7;
    font-weight: 500;
}

/* Bedževi */
.cf-badge-company[b-oxmaonhynt] {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-weight: 500;
}

.cf-license-badge[b-oxmaonhynt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
    background-color: #f8fafc;
    color: #475569;
    padding: 0.2rem 0.5rem;
    border-radius: var(--cf-radius-sm);
    border: 1px solid #e2e8f0;
}

.cf-commission-badge[b-oxmaonhynt] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #047857;
    background-color: #ecfdf5;
    padding: 0.2rem 0.55rem;
    border-radius: var(--cf-radius-sm);
    border: 1px solid #a7f3d0;
}

.cf-account-number[b-oxmaonhynt] {
    font-family: monospace;
    font-size: 0.8rem;
    color: #334155;
    background-color: #f8fafc;
    padding: 0.2rem 0.5rem;
    border-radius: var(--cf-radius-sm);
    border: 1px solid #e2e8f0;
}

.cf-status-dot[b-oxmaonhynt] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.cf-status-dot-active[b-oxmaonhynt] {
    background-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.cf-status-dot-inactive[b-oxmaonhynt] {
    background-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.cf-actions-group[b-oxmaonhynt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.cf-btn-danger-hover:hover[b-oxmaonhynt] {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

.cf-table-footer[b-oxmaonhynt] {
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-top: 1px solid var(--cf-border-color);
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --------------------------------------------------------------------------
   6. MODALNI DIJALOZI I FORMA
   -------------------------------------------------------------------------- */
.cf-modal-backdrop[b-oxmaonhynt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: cf-fadeIn-b-oxmaonhynt 0.15s ease-out;
}

.cf-modal-dialog[b-oxmaonhynt] {
    background-color: var(--cf-bg-surface);
    border-radius: var(--cf-radius-lg);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--cf-border-color);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cf-scaleUp-b-oxmaonhynt 0.15s ease-out;
}

.cf-modal-dialog-sm[b-oxmaonhynt] {
    max-width: 440px;
}

.cf-modal-header[b-oxmaonhynt] {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--cf-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8fafc;
}

.cf-modal-title-group[b-oxmaonhynt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cf-modal-icon[b-oxmaonhynt] {
    font-size: 1.25rem;
}

.cf-modal-title[b-oxmaonhynt] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-modal-close[b-oxmaonhynt] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: var(--cf-radius-sm);
    transition: all var(--cf-transition-fast);
}

.cf-modal-close:hover[b-oxmaonhynt] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-modal-body[b-oxmaonhynt] {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-modal-footer[b-oxmaonhynt] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--cf-border-color);
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.cf-form-grid[b-oxmaonhynt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cf-form-col-full[b-oxmaonhynt] {
    grid-column: 1 / -1;
}

.cf-form-group[b-oxmaonhynt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-label[b-oxmaonhynt] {
    font-size: var(--cf-font-size-xs);
    font-weight: 600;
    color: var(--cf-text-secondary);
}

.cf-label-required[b-oxmaonhynt]::after {
    content: " *";
    color: #ef4444;
}

.cf-checkbox-label[b-oxmaonhynt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    cursor: pointer;
    user-select: none;
    padding-top: 0.35rem;
}

.cf-delete-prompt[b-oxmaonhynt] {
    font-size: var(--cf-font-size-base);
    color: var(--cf-text-primary);
    margin: 0;
    line-height: 1.5;
}

/* Animacije */
@keyframes cf-fadeIn-b-oxmaonhynt {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cf-scaleUp-b-oxmaonhynt {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/CashFlow.UI/Components/Pages/Admin/PermissionsMatrix.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW PERMISSIONS MATRIX COMPONENT - IZOLOVANI STILOVI
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-matrix-container[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. GORNJE ZAGLAVLJE I KONTROLE
   -------------------------------------------------------------------------- */
.cf-matrix-header[b-fbziconar7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-matrix-title-group[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-matrix-title[b-fbziconar7] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cf-title-icon[b-fbziconar7] {
    font-size: 1.4rem;
    line-height: 1;
}

.cf-matrix-subtitle[b-fbziconar7] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-matrix-header-actions[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   2. FILTER TRAKA I ČIPOVI ULOGA
   -------------------------------------------------------------------------- */
.cf-matrix-toolbar[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--cf-shadow-sm);
}

.cf-role-filter-section[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cf-role-filter-header[b-fbziconar7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-filter-label[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cf-font-size-sm);
    font-weight: 600;
    color: var(--cf-text-secondary);
}

.cf-filter-quick-actions[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-link-btn[b-fbziconar7] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--cf-font-size-xs);
    font-weight: 600;
    color: var(--cf-brand-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--cf-transition-fast);
}

.cf-link-btn:hover[b-fbziconar7] {
    color: var(--cf-brand-primary-hover);
}

.cf-divider-dot[b-fbziconar7] {
    color: var(--cf-text-muted);
    font-size: var(--cf-font-size-xs);
}

.cf-role-chips-group[b-fbziconar7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.cf-role-chip[b-fbziconar7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--cf-radius-full);
    font-size: var(--cf-font-size-xs);
    font-weight: 600;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    color: var(--cf-text-secondary);
    cursor: pointer;
    transition: all var(--cf-transition-fast);
    user-select: none;
}

.cf-role-chip:hover[b-fbziconar7] {
    border-color: var(--cf-brand-primary);
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-role-chip-active[b-fbziconar7] {
    background-color: var(--cf-brand-primary-light);
    border-color: var(--cf-brand-primary);
    color: var(--cf-brand-primary);
}

.cf-role-chip-dirty[b-fbziconar7] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 1px #f59e0b;
}

.cf-chip-check[b-fbziconar7] {
    font-size: 0.85rem;
    font-weight: bold;
}

.cf-chip-text[b-fbziconar7] {
    line-height: 1;
}

.cf-dirty-indicator[b-fbziconar7] {
    color: #f59e0b;
    font-size: 0.75rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   3. PRETRAGA I MULTISELECT FILTER PO GRUPAMA
   -------------------------------------------------------------------------- */
.cf-permission-search-section[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--cf-border-color);
    padding-top: 0.75rem;
    flex-wrap: wrap;
}

/* Multiselect za grupe prava */
.cf-group-multiselect-container[b-fbziconar7] {
    position: relative;
    min-width: 240px;
    max-width: 320px;
    flex: 0 1 auto;
}

.cf-group-filter-btn[b-fbziconar7] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    height: 38px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    cursor: pointer;
    transition: all var(--cf-transition-fast);
    user-select: none;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cf-group-filter-btn:hover[b-fbziconar7] {
    border-color: var(--cf-brand-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-group-filter-active[b-fbziconar7] {
    border-color: var(--cf-brand-primary);
    background-color: var(--cf-brand-primary-light);
    color: var(--cf-brand-primary);
    font-weight: 600;
}

.cf-group-filter-icon[b-fbziconar7] {
    font-size: 0.95rem;
    line-height: 1;
}

.cf-group-filter-text[b-fbziconar7] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-dropdown-arrow[b-fbziconar7] {
    font-size: 0.75rem;
    color: var(--cf-text-muted);
    transition: transform var(--cf-transition-fast);
}

.cf-arrow-open[b-fbziconar7] {
    transform: rotate(180deg);
}

.cf-dropdown-backdrop[b-fbziconar7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    background: transparent;
    cursor: default;
}

.cf-group-dropdown-menu[b-fbziconar7] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 290px;
    width: 100%;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-lg);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cfDropdownFadeIn-b-fbziconar7 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cfDropdownFadeIn-b-fbziconar7 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cf-group-dropdown-header[b-fbziconar7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background-color: var(--cf-bg-surface-alt);
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-dropdown-title[b-fbziconar7] {
    font-size: var(--cf-font-size-xs);
    font-weight: 700;
    color: var(--cf-text-secondary);
}

.cf-dropdown-actions[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cf-group-dropdown-search[b-fbziconar7] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-surface);
}

.cf-dropdown-search-input[b-fbziconar7] {
    height: 30px;
    font-size: var(--cf-font-size-xs);
    padding: 0.25rem 0.6rem;
    width: 100%;
}

.cf-group-dropdown-list[b-fbziconar7] {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0;
}

.cf-group-dropdown-item[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    transition: background-color var(--cf-transition-fast);
    user-select: none;
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
}

.cf-group-dropdown-item:hover[b-fbziconar7] {
    background-color: var(--cf-bg-surface-hover);
}

.cf-item-selected[b-fbziconar7] {
    background-color: var(--cf-brand-primary-light);
    font-weight: 600;
}

.cf-group-name-text[b-fbziconar7] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-group-count-badge[b-fbziconar7] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
}

.cf-dropdown-empty[b-fbziconar7] {
    padding: 1rem;
    text-align: center;
    color: var(--cf-text-muted);
    font-size: var(--cf-font-size-xs);
}

/* Polje za pretragu */
.cf-search-box[b-fbziconar7] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 240px;
}

.cf-search-icon[b-fbziconar7] {
    position: absolute;
    left: 0.75rem;
    color: var(--cf-text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.cf-search-input[b-fbziconar7] {
    padding-left: 2.25rem !important;
    padding-right: 2rem;
    height: 38px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    width: 100%;
    transition: all var(--cf-transition-fast);
}

.cf-search-input:focus[b-fbziconar7] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cf-search-clear[b-fbziconar7] {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--cf-radius-sm);
}

.cf-search-clear:hover[b-fbziconar7] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

/* --------------------------------------------------------------------------
   4. MATRIČNA TABELA I AKORDION GRUPA
   -------------------------------------------------------------------------- */
.cf-matrix-table-wrapper[b-fbziconar7] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-sm);
    overflow-x: auto;
    max-height: calc(100vh - 280px);
    position: relative;
}

.cf-matrix-table[b-fbziconar7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: var(--cf-font-size-sm);
}

.cf-matrix-table thead[b-fbziconar7] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--cf-bg-surface-alt);
}

.cf-matrix-table th[b-fbziconar7] {
    padding: 0.85rem 1rem;
    font-weight: 600;
    color: var(--cf-text-secondary);
    border-bottom: 2px solid var(--cf-border-color);
    border-right: 1px solid var(--cf-border-color);
    white-space: nowrap;
    background-color: var(--cf-bg-surface-alt);
}

.cf-matrix-table th:last-child[b-fbziconar7] {
    border-right: none;
}

.cf-th-permission[b-fbziconar7] {
    min-width: 320px;
    width: 380px;
    position: sticky;
    left: 0;
    z-index: 11;
    background-color: var(--cf-bg-surface-alt) !important;
    border-right: 2px solid var(--cf-border-color) !important;
}

.cf-th-content[b-fbziconar7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.cf-th-title-wrap[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-accordion-quick-actions[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}

.cf-th-role[b-fbziconar7] {
    min-width: 160px;
    text-align: center;
}

.cf-th-role-dirty[b-fbziconar7] {
    background-color: #fffbeb !important;
}

.cf-role-header-content[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
}

.cf-role-title-line[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--cf-text-primary);
}

.cf-role-name[b-fbziconar7] {
    font-size: var(--cf-font-size-sm);
}

.cf-role-meta-line[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cf-font-size-xs);
    font-weight: normal;
}

.cf-role-count[b-fbziconar7] {
    color: var(--cf-text-muted);
    font-variant-numeric: tabular-nums;
}

.cf-role-actions[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cf-locked-note[b-fbziconar7] {
    font-size: 0.7rem;
    color: var(--cf-text-muted);
    font-weight: 600;
}

/* Redovi grupe (Akordion zaglavlje) */
.cf-permission-group-row[b-fbziconar7] {
    background-color: #f8fafc;
    border-left: 4px solid var(--cf-brand-primary);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--cf-transition-fast);
}

.cf-permission-group-row:hover[b-fbziconar7] {
    background-color: #f1f5f9;
}

.cf-permission-group-row.cf-group-expanded[b-fbziconar7] {
    background-color: #f1f5f9;
}

.cf-td-group[b-fbziconar7] {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--cf-border-color);
    border-bottom: 1px solid var(--cf-border-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.cf-group-header[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-group-caret[b-fbziconar7] {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--cf-brand-primary);
    transition: transform 0.2s ease;
    line-height: 1;
}

.cf-caret-expanded[b-fbziconar7] {
    transform: rotate(90deg);
}

.cf-group-icon[b-fbziconar7] {
    font-size: 1rem;
    line-height: 1;
}

.cf-group-title[b-fbziconar7] {
    font-weight: 700;
    color: var(--cf-text-primary);
    font-size: var(--cf-font-size-sm);
    letter-spacing: 0.02em;
}

/* Redovi pojedinačnih stavki permisija unutar grupe */
.cf-permission-item-row[b-fbziconar7] {
    transition: background-color var(--cf-transition-fast);
}

.cf-permission-item-row:hover[b-fbziconar7] {
    background-color: var(--cf-bg-surface-hover);
}

.cf-permission-item-row:hover .cf-td-permission[b-fbziconar7] {
    background-color: var(--cf-bg-surface-hover);
}

.cf-td-permission[b-fbziconar7] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cf-border-color);
    border-right: 2px solid var(--cf-border-color);
    position: sticky;
    left: 0;
    background-color: var(--cf-bg-surface);
    z-index: 5;
}

.cf-td-perm-item[b-fbziconar7] {
    padding-left: 2rem !important;
}

.cf-perm-info[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cf-perm-code[b-fbziconar7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--cf-font-size-xs);
    font-weight: 700;
    color: var(--cf-brand-primary);
    background-color: var(--cf-brand-primary-light);
    padding: 0.15rem 0.4rem;
    border-radius: var(--cf-radius-sm);
    width: fit-content;
}

.cf-perm-desc[b-fbziconar7] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-secondary);
}

/* Kolone sa checkbox-ovima */
.cf-td-checkbox[b-fbziconar7] {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--cf-border-color);
    border-right: 1px solid var(--cf-border-color);
    vertical-align: middle;
    position: relative;
}

.cf-td-checkbox:last-child[b-fbziconar7] {
    border-right: none;
}

.cf-cell-modified[b-fbziconar7] {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

.cf-cell-locked[b-fbziconar7] {
    background-color: rgba(148, 163, 184, 0.05);
}

.cf-modified-dot[b-fbziconar7] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #f59e0b;
}

/* Checkbox wrapper & kontrola */
.cf-checkbox-wrapper[b-fbziconar7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    margin: 0;
}

.cf-checkbox[b-fbziconar7] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cf-checkbox-custom[b-fbziconar7] {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--cf-bg-surface);
    border: 2px solid var(--cf-border-color);
    border-radius: var(--cf-radius-sm);
    transition: all var(--cf-transition-fast);
    position: relative;
}

.cf-checkbox-wrapper:hover .cf-checkbox-custom[b-fbziconar7] {
    border-color: var(--cf-brand-primary);
}

.cf-checkbox:checked ~ .cf-checkbox-custom[b-fbziconar7] {
    background-color: var(--cf-brand-primary);
    border-color: var(--cf-brand-primary);
}

.cf-checkbox:checked ~ .cf-checkbox-custom[b-fbziconar7]::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cf-checkbox:disabled ~ .cf-checkbox-custom[b-fbziconar7] {
    opacity: 0.65;
    cursor: not-allowed;
}

.cf-checkbox-locked[b-fbziconar7] {
    background-color: var(--cf-brand-primary) !important;
    border-color: var(--cf-brand-primary) !important;
    cursor: not-allowed;
}

.cf-td-empty[b-fbziconar7] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cf-text-muted);
}

/* --------------------------------------------------------------------------
   5. DUGMAD I BADŽEVI
   -------------------------------------------------------------------------- */
.cf-btn-xs[b-fbziconar7] {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--cf-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--cf-transition-fast);
    line-height: 1;
}

.cf-btn-ghost[b-fbziconar7] {
    background: transparent;
    color: var(--cf-brand-primary);
    border-color: var(--cf-border-color);
}

.cf-btn-ghost:hover[b-fbziconar7] {
    background-color: var(--cf-brand-primary-light);
    border-color: var(--cf-brand-primary);
}

.cf-btn-danger-ghost[b-fbziconar7] {
    background: transparent;
    color: #ef4444;
    border-color: transparent;
}

.cf-btn-danger-ghost:hover[b-fbziconar7] {
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.cf-badge-crown[b-fbziconar7] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
}

.cf-badge-admin[b-fbziconar7] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

/* --------------------------------------------------------------------------
   6. OBAVJEŠTENJA (ALERTS)
   -------------------------------------------------------------------------- */
.cf-alert[b-fbziconar7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    font-weight: 500;
}

.cf-alert-content[b-fbziconar7] {
    flex: 1;
}

.cf-alert-success[b-fbziconar7] {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.cf-alert-danger[b-fbziconar7] {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.cf-alert-icon[b-fbziconar7] {
    font-size: 1.1rem;
    line-height: 1;
}

.cf-alert-close[b-fbziconar7] {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
    line-height: 1;
}

.cf-alert-close:hover[b-fbziconar7] {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   7. PRAZNA STANJA I UČITAVANJE
   -------------------------------------------------------------------------- */
.cf-loading-state[b-fbziconar7],
.cf-empty-state[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    gap: 0.75rem;
}

.cf-loading-text[b-fbziconar7] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-secondary);
    margin: 0;
}

.cf-empty-icon[b-fbziconar7] {
    font-size: 2.5rem;
    line-height: 1;
}

.cf-empty-title[b-fbziconar7] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-empty-text[b-fbziconar7] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-muted);
    max-width: 480px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   8. MODALNI PROZORI
   -------------------------------------------------------------------------- */
.cf-modal-backdrop[b-fbziconar7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--cf-bg-overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.cf-modal[b-fbziconar7] {
    background-color: var(--cf-bg-surface);
    border-radius: var(--cf-radius-xl);
    box-shadow: var(--cf-shadow-xl);
    border: 1px solid var(--cf-border-color);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cfModalFadeIn-b-fbziconar7 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-modal-sm[b-fbziconar7] {
    max-width: 440px;
}

.cf-modal-md[b-fbziconar7] {
    max-width: 540px;
}

@keyframes cfModalFadeIn-b-fbziconar7 {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cf-modal-header[b-fbziconar7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-surface-alt);
}

.cf-modal-title-group[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cf-modal-title[b-fbziconar7] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-title-danger[b-fbziconar7] {
    color: #dc2626;
}

.cf-modal-subtitle[b-fbziconar7] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-modal-close[b-fbziconar7] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
    border-radius: var(--cf-radius-sm);
    line-height: 1;
    transition: all var(--cf-transition-fast);
}

.cf-modal-close:hover[b-fbziconar7] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-modal-body[b-fbziconar7] {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cf-modal-footer[b-fbziconar7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-surface-alt);
}

.cf-form-group[b-fbziconar7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cf-label[b-fbziconar7] {
    font-size: var(--cf-font-size-sm);
    font-weight: 600;
    color: var(--cf-text-secondary);
}

.cf-required[b-fbziconar7] {
    color: #ef4444;
}

.cf-input[b-fbziconar7],
.cf-textarea[b-fbziconar7] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    background-color: var(--cf-bg-surface);
    color: var(--cf-text-primary);
    font-size: var(--cf-font-size-sm);
    font-family: inherit;
    transition: all var(--cf-transition-fast);
}

.cf-input:focus[b-fbziconar7],
.cf-textarea:focus[b-fbziconar7] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.cf-confirm-text[b-fbziconar7] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-confirm-subtext[b-fbziconar7] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
    margin: 0;
}
/* _content/CashFlow.UI/Components/Pages/Admin/Users.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW USERS COMPONENT - IZOLOVANI STILOVI (Users.razor.css)
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-users-container[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. GORNJE ZAGLAVLJE I KONTROLE
   -------------------------------------------------------------------------- */
.cf-users-header[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-users-title-group[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-users-title[b-p9bbsio8om] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cf-title-icon[b-p9bbsio8om] {
    font-size: 1.4rem;
    line-height: 1;
}

.cf-users-subtitle[b-p9bbsio8om] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-users-actions[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Pretraga */
.cf-search-box[b-p9bbsio8om] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 280px;
}

.cf-search-icon[b-p9bbsio8om] {
    position: absolute;
    left: 0.75rem;
    color: var(--cf-text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.cf-search-input[b-p9bbsio8om] {
    padding-left: 2.25rem !important;
    padding-right: 2rem;
    height: 38px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    width: 100%;
    transition: all var(--cf-transition-fast);
}

.cf-search-input[b-p9bbsio8om]::-webkit-search-cancel-button,
.cf-search-input[b-p9bbsio8om]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.cf-search-input:focus[b-p9bbsio8om] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cf-search-clear[b-p9bbsio8om] {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 50%;
}

.cf-search-clear:hover[b-p9bbsio8om] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

/* --------------------------------------------------------------------------
   2. OBAVJEŠTENJA
   -------------------------------------------------------------------------- */
.cf-alert-close[b-p9bbsio8om] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--cf-transition-fast);
}

.cf-alert-close:hover[b-p9bbsio8om] {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3. STANJA: UČITAVANJE I PRAZNO
   -------------------------------------------------------------------------- */
.cf-loading-state[b-p9bbsio8om],
.cf-empty-state[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    text-align: center;
    gap: 1rem;
}

.cf-spinner-lg[b-p9bbsio8om] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.cf-loading-text[b-p9bbsio8om] {
    color: var(--cf-text-secondary);
    font-size: var(--cf-font-size-base);
}

.cf-empty-icon[b-p9bbsio8om] {
    font-size: 3rem;
    opacity: 0.6;
}

.cf-empty-title[b-p9bbsio8om] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-empty-text[b-p9bbsio8om] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-muted);
    max-width: 420px;
}

/* --------------------------------------------------------------------------
   4. KARTICA I TABELA KORISNIKA
   -------------------------------------------------------------------------- */
.cf-table-card[b-p9bbsio8om] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cf-table-wrapper[b-p9bbsio8om] {
    overflow-x: auto;
    width: 100%;
}

.cf-table[b-p9bbsio8om] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cf-font-size-sm);
    text-align: left;
}

.cf-table thead th[b-p9bbsio8om] {
    background-color: var(--cf-bg-surface-alt);
    color: var(--cf-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--cf-border-color);
    white-space: nowrap;
}

.cf-table tbody td[b-p9bbsio8om] {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--cf-border-color-subtle);
    color: var(--cf-text-primary);
    vertical-align: middle;
    transition: background-color var(--cf-transition-fast);
}

.cf-table tbody tr:hover td[b-p9bbsio8om] {
    background-color: var(--cf-bg-surface-hover);
}

.cf-row-inactive[b-p9bbsio8om] {
    opacity: 0.65;
}

.cf-text-right[b-p9bbsio8om] {
    text-align: right;
}

/* Ćelija korisnika (Avatar + Ime) */
.cf-user-cell[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-user-avatar[b-p9bbsio8om] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cf-brand-gradient);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.cf-user-meta[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cf-user-name[b-p9bbsio8om] {
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-user-sub[b-p9bbsio8om] {
    font-size: 0.75rem;
    color: var(--cf-text-muted);
    font-family: var(--cf-font-mono);
}

.cf-username-badge[b-p9bbsio8om] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-sm);
    font-family: var(--cf-font-mono);
    font-size: 0.8rem;
    color: var(--cf-brand-primary);
    font-weight: 600;
}

.cf-email-text[b-p9bbsio8om] {
    color: var(--cf-text-secondary);
}

.cf-badges-container[b-p9bbsio8om] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: 280px;
}

/* Status tačkica */
.cf-status-dot[b-p9bbsio8om] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.cf-status-dot-active[b-p9bbsio8om] {
    background-color: var(--cf-color-income);
    box-shadow: 0 0 6px var(--cf-color-income);
}

.cf-status-dot-inactive[b-p9bbsio8om] {
    background-color: var(--cf-color-danger);
}

/* Akcije */
.cf-actions-group[b-p9bbsio8om] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cf-btn-danger-hover:hover[b-p9bbsio8om] {
    background-color: var(--cf-color-danger-bg) !important;
    color: var(--cf-color-danger) !important;
}

.cf-table-footer[b-p9bbsio8om] {
    padding: 0.75rem 1.25rem;
    background-color: var(--cf-bg-surface-alt);
    border-top: 1px solid var(--cf-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cf-table-info[b-p9bbsio8om] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
}

/* --------------------------------------------------------------------------
   5. MODALNI DIJALOZI I TAB NAVIGACIJA
   -------------------------------------------------------------------------- */
.cf-modal-backdrop[b-p9bbsio8om] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: cf-fade-in-b-p9bbsio8om 0.2s ease;
}

.cf-modal-dialog[b-p9bbsio8om] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-xl);
    box-shadow: var(--cf-shadow-xl);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cf-slide-up-b-p9bbsio8om 0.25s ease;
}

.cf-modal-dialog-wide[b-p9bbsio8om] {
    max-width: 760px;
}

.cf-modal-dialog-sm[b-p9bbsio8om] {
    max-width: 460px;
}

.cf-modal-header[b-p9bbsio8om] {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--cf-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--cf-bg-surface);
    flex-shrink: 0;
}

.cf-modal-title-group[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cf-modal-icon[b-p9bbsio8om] {
    font-size: 1.25rem;
    line-height: 1;
}

.cf-modal-title[b-p9bbsio8om] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-modal-close[b-p9bbsio8om] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: var(--cf-radius-sm);
    transition: all var(--cf-transition-fast);
}

.cf-modal-close:hover[b-p9bbsio8om] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

/* Tab navigaciona traka u modalu */
.cf-modal-tabs[b-p9bbsio8om] {
    display: flex;
    background-color: var(--cf-bg-surface-alt);
    border-bottom: 1px solid var(--cf-border-color);
    padding: 0 1.5rem;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cf-modal-tab[b-p9bbsio8om] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
    font-size: var(--cf-font-size-sm);
    font-weight: 500;
    color: var(--cf-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--cf-transition-fast);
}

.cf-modal-tab:hover[b-p9bbsio8om] {
    color: var(--cf-text-primary);
    background-color: rgba(255, 255, 255, 0.03);
}

.cf-modal-tab-active[b-p9bbsio8om] {
    color: var(--cf-brand-primary);
    font-weight: 600;
    border-bottom-color: var(--cf-brand-primary);
}

.cf-tab-badge[b-p9bbsio8om] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.35rem;
    border-radius: 9px;
    background-color: var(--cf-brand-primary);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.cf-modal-body[b-p9bbsio8om] {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
}

.cf-tab-content[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: cf-fade-in-b-p9bbsio8om 0.15s ease;
}

.cf-modal-subtitle[b-p9bbsio8om] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-secondary);
}

.cf-modal-footer[b-p9bbsio8om] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-surface-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cf-modal-footer-left[b-p9bbsio8om] {
    display: flex;
    align-items: center;
}

.cf-modal-footer-right[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-selection-summary[b-p9bbsio8om] {
    font-size: var(--cf-font-size-xs);
}

/* Forma unutar modala */
.cf-form-grid[b-p9bbsio8om] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.cf-form-col-full[b-p9bbsio8om] {
    grid-column: 1 / -1;
}

.cf-form-hint[b-p9bbsio8om] {
    font-size: 0.75rem;
    color: var(--cf-text-muted);
    margin-top: 0.25rem;
    display: block;
}

.cf-checkbox-label[b-p9bbsio8om] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-primary);
    cursor: pointer;
    user-select: none;
}

.cf-checkbox[b-p9bbsio8om] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--cf-brand-primary);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. SEKCIJE ZA ULOGE I PREDUZEĆA (CARDS & GRIDS)
   -------------------------------------------------------------------------- */
.cf-section-header-row[b-p9bbsio8om] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cf-quick-actions[b-p9bbsio8om] {
    display: flex;
    gap: 0.5rem;
}

.cf-section-title[b-p9bbsio8om] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-section-desc[b-p9bbsio8om] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
    margin: 0.2rem 0 0 0;
}

.cf-roles-grid[b-p9bbsio8om],
.cf-companies-grid[b-p9bbsio8om] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.cf-role-card[b-p9bbsio8om],
.cf-company-card[b-p9bbsio8om] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    transition: all var(--cf-transition-fast);
    user-select: none;
}

.cf-role-card:hover[b-p9bbsio8om],
.cf-company-card:hover[b-p9bbsio8om] {
    border-color: var(--cf-brand-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-role-selected[b-p9bbsio8om],
.cf-company-selected[b-p9bbsio8om] {
    border-color: var(--cf-brand-primary);
    background-color: rgba(59, 130, 246, 0.08);
}

.cf-role-locked[b-p9bbsio8om] {
    cursor: not-allowed;
    border-color: rgba(234, 179, 8, 0.3);
    background-color: rgba(234, 179, 8, 0.04);
}

.cf-role-info[b-p9bbsio8om],
.cf-company-info[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.cf-role-title-line[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cf-role-name[b-p9bbsio8om],
.cf-company-name[b-p9bbsio8om] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-role-desc[b-p9bbsio8om],
.cf-company-meta[b-p9bbsio8om] {
    font-size: 0.8rem;
    color: var(--cf-text-secondary);
    line-height: 1.35;
}

.cf-role-lock-text[b-p9bbsio8om] {
    font-size: 0.75rem;
    color: #eab308;
    margin-top: 0.2rem;
}

.cf-badge-crown[b-p9bbsio8om] {
    background-color: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--cf-radius-sm);
    font-weight: 600;
}

.cf-empty-box[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background-color: var(--cf-bg-surface);
    border: 1px dashed var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    gap: 0.5rem;
}

/* Prompt za brisanje */
.cf-delete-prompt[b-p9bbsio8om] {
    font-size: var(--cf-font-size-base);
    color: var(--cf-text-primary);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. MODAL ZA GRANULARNO PODEŠAVANJE PRAVA PRISTUPA (cf-modal-dialog-permissions)
   -------------------------------------------------------------------------- */
.cf-modal-dialog-permissions[b-p9bbsio8om] {
    max-width: 900px;
    width: 95vw;
}

.cf-permissions-modal-body[b-p9bbsio8om] {
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
    max-height: calc(85vh - 140px);
}

.cf-permissions-legend-card[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
}

.cf-legend-roles-info[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-legend-label[b-p9bbsio8om] {
    font-size: var(--cf-font-size-xs);
    font-weight: 600;
    color: var(--cf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cf-legend-types[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--cf-border-color);
}

.cf-legend-type-item[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-legend-badge[b-p9bbsio8om] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--cf-radius-sm);
}

.cf-legend-badge-inherited[b-p9bbsio8om] {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--cf-brand-primary);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.cf-legend-badge-granted[b-p9bbsio8om] {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cf-legend-badge-denied[b-p9bbsio8om] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cf-legend-desc[b-p9bbsio8om] {
    font-size: 0.8rem;
    color: var(--cf-text-muted);
}

.cf-loading-state-compact[b-p9bbsio8om] {
    padding: 2.5rem 1rem;
}

.cf-permissions-groups-container[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-permission-group[b-p9bbsio8om] {
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cf-permission-group-header[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cf-border-color-subtle);
}

.cf-permission-group-title-box[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-group-icon[b-p9bbsio8om] {
    font-size: 1.15rem;
    line-height: 1;
}

.cf-permission-group-name[b-p9bbsio8om] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-permission-group-grid[b-p9bbsio8om] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.cf-permission-card[b-p9bbsio8om] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    transition: all var(--cf-transition-fast);
}

.cf-permission-card:hover[b-p9bbsio8om] {
    border-color: var(--cf-brand-primary);
}

.cf-permission-card-inherited[b-p9bbsio8om] {
    background-color: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.25);
}

.cf-permission-card-granted[b-p9bbsio8om] {
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.4);
}

.cf-permission-card-denied[b-p9bbsio8om] {
    background-color: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.35);
}

.cf-permission-card-denied .cf-permission-code[b-p9bbsio8om] {
    color: #ef4444;
    text-decoration: line-through;
    opacity: 0.85;
}

.cf-permission-card-denied .cf-permission-desc[b-p9bbsio8om] {
    color: var(--cf-text-muted);
}

.cf-permission-card-check[b-p9bbsio8om] {
    padding-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-permission-card-body[b-p9bbsio8om] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    cursor: pointer;
    user-select: none;
}

.cf-permission-card-header[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cf-permission-header-actions[b-p9bbsio8om] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.cf-permission-code[b-p9bbsio8om] {
    font-family: var(--cf-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-permission-desc[b-p9bbsio8om] {
    font-size: 0.75rem;
    color: var(--cf-text-secondary);
    margin: 0;
    line-height: 1.35;
}

.cf-permission-badge-inherited[b-p9bbsio8om] {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--cf-brand-primary);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--cf-radius-sm);
    font-weight: 600;
}

.cf-permission-badge-granted[b-p9bbsio8om] {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--cf-radius-sm);
    font-weight: 600;
}

.cf-permission-badge-denied[b-p9bbsio8om] {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--cf-radius-sm);
    font-weight: 600;
}

.cf-btn-reset-perm[b-p9bbsio8om] {
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--cf-text-secondary);
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-sm);
    cursor: pointer;
    transition: all var(--cf-transition-fast);
}

.cf-btn-reset-perm:hover[b-p9bbsio8om] {
    color: var(--cf-text-primary);
    border-color: var(--cf-brand-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   8. ANIMACIJE
   -------------------------------------------------------------------------- */
@keyframes cf-fade-in-b-p9bbsio8om {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cf-slide-up-b-p9bbsio8om {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE PRILAGOĐAVANJA
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .cf-users-header[b-p9bbsio8om] {
        flex-direction: column;
        align-items: stretch;
    }

    .cf-users-actions[b-p9bbsio8om] {
        flex-direction: column;
        align-items: stretch;
    }

    .cf-search-box[b-p9bbsio8om] {
        min-width: 100%;
    }

    .cf-form-grid[b-p9bbsio8om] {
        grid-template-columns: 1fr;
    }

    .cf-roles-grid[b-p9bbsio8om],
    .cf-companies-grid[b-p9bbsio8om] {
        grid-template-columns: 1fr;
    }

    .cf-modal-footer[b-p9bbsio8om] {
        flex-direction: column-reverse;
        gap: 0.75rem;
        align-items: stretch;
    }

    .cf-modal-footer-right[b-p9bbsio8om] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* _content/CashFlow.UI/Components/Pages/Auth/Login.razor.rz.scp.css */
.cf-login-card[b-xoycb2t4r9] {
    width: 100%;
    max-width: 440px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-xl);
    box-shadow: var(--cf-shadow-xl);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    backdrop-filter: blur(12px);
    animation: cf-fade-in-b-xoycb2t4r9 0.4s ease-out;
}

@keyframes cf-fade-in-b-xoycb2t4r9 {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cf-login-header[b-xoycb2t4r9] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.cf-login-logo[b-xoycb2t4r9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    user-select: none;
}

.cf-login-header:focus[b-xoycb2t4r9],
.cf-login-header:focus-visible[b-xoycb2t4r9],
.cf-login-logo:focus[b-xoycb2t4r9],
.cf-login-logo:focus-visible[b-xoycb2t4r9],
.cf-logo-icon:focus[b-xoycb2t4r9],
.cf-logo-icon:focus-visible[b-xoycb2t4r9],
.cf-logo-text:focus[b-xoycb2t4r9],
.cf-logo-text:focus-visible[b-xoycb2t4r9] {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.cf-logo-icon[b-xoycb2t4r9] {
    font-size: 2rem;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.cf-logo-text[b-xoycb2t4r9] {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--cf-text-primary);
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.cf-text-gradient[b-xoycb2t4r9] {
    background: var(--cf-brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.cf-login-subtitle[b-xoycb2t4r9] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-secondary);
    max-width: 320px;
}

.cf-login-form[b-xoycb2t4r9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-input-wrapper[b-xoycb2t4r9] {
    position: relative;
    display: flex;
    align-items: center;
}

.cf-input-icon[b-xoycb2t4r9] {
    position: absolute;
    left: 0.875rem;
    font-size: 1rem;
    color: var(--cf-text-muted);
    pointer-events: none;
}

.cf-input-wrapper .cf-input[b-xoycb2t4r9] {
    padding-left: 2.5rem;
}

.cf-btn-login[b-xoycb2t4r9] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: var(--cf-font-size-base);
    font-weight: 600;
    margin-top: 0.5rem;
    gap: 0.75rem;
}

.cf-btn-arrow[b-xoycb2t4r9] {
    transition: transform var(--cf-transition-fast);
}

.cf-btn-login:hover:not(:disabled) .cf-btn-arrow[b-xoycb2t4r9] {
    transform: translateX(4px);
}

.cf-login-footer[b-xoycb2t4r9] {
    border-top: 1px solid var(--cf-border-color);
    padding-top: 1.25rem;
    text-align: center;
}

.cf-login-meta[b-xoycb2t4r9] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* _content/CashFlow.UI/Components/Pages/Finance/Accounts.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW ACCOUNTS & CASH DESKS - IZOLOVANI STILOVI (Accounts.razor.css)
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-accounts-container[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.25rem;
    width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. GORNJE ZAGLAVLJE I GLAVNE AKCIJE
   -------------------------------------------------------------------------- */
.cf-page-header[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cf-border-color, #e2e8f0);
}

.cf-page-title-group[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cf-text-primary, #0f172a);
    letter-spacing: -0.01em;
}

.cf-title-icon[b-dc2gpzwbrk] {
    font-size: 1.4rem;
    line-height: 1;
}

.cf-page-subtitle[b-dc2gpzwbrk] {
    margin: 0;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-muted, #64748b);
}

.cf-page-header-actions[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   2. KPI KARTICE LIKVIDNOSTI
   -------------------------------------------------------------------------- */
.cf-kpi-grid[b-dc2gpzwbrk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.cf-kpi-card[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-radius: var(--cf-radius-md, 8px);
    background-color: var(--cf-bg-surface, #ffffff);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    box-shadow: var(--cf-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    position: relative;
    overflow: hidden;
    transition: transform var(--cf-transition-fast, 0.15s ease), 
                box-shadow var(--cf-transition-fast, 0.15s ease), 
                border-color var(--cf-transition-fast, 0.15s ease);
}

.cf-kpi-card:hover[b-dc2gpzwbrk] {
    transform: translateY(-2px);
    box-shadow: var(--cf-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* Akcentne lijeve ivice po tipu računa */
.cf-kpi-bank[b-dc2gpzwbrk] {
    border-left: 4px solid #3b82f6;
}

.cf-kpi-cash[b-dc2gpzwbrk] {
    border-left: 4px solid #10b981;
}

.cf-kpi-fx[b-dc2gpzwbrk] {
    border-left: 4px solid #8b5cf6;
}

.cf-kpi-total[b-dc2gpzwbrk] {
    border-left: 4px solid #6366f1;
}

.cf-kpi-header[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cf-kpi-icon[b-dc2gpzwbrk] {
    font-size: 1.5rem;
    line-height: 1;
}

.cf-kpi-badge[b-dc2gpzwbrk] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--cf-radius-full, 9999px);
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    color: var(--cf-text-muted, #64748b);
    border: 1px solid var(--cf-border-color, #e2e8f0);
}

.cf-kpi-body[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-kpi-label[b-dc2gpzwbrk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cf-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.cf-kpi-value[b-dc2gpzwbrk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cf-text-primary, #0f172a) !important;
    letter-spacing: -0.02em;
    font-family: inherit;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. FILTER TRAKA I POLJA ZA PRETRAGU
   -------------------------------------------------------------------------- */
.cf-filter-card[b-dc2gpzwbrk],
.cf-filter-bar[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface, #ffffff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    padding: 1rem 1.25rem;
}

.cf-filter-grid[b-dc2gpzwbrk] {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1fr;
    gap: 1rem;
    align-items: end;
}

@media (max-width: 1024px) {
    .cf-filter-grid[b-dc2gpzwbrk] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .cf-filter-grid[b-dc2gpzwbrk] {
        grid-template-columns: 1fr;
    }
}

.cf-filter-item[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-filter-label[b-dc2gpzwbrk] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cf-text-muted, #64748b);
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.cf-search-box[b-dc2gpzwbrk] {
    position: relative;
    display: flex;
    align-items: center;
}

.cf-search-icon[b-dc2gpzwbrk] {
    position: absolute;
    left: 0.85rem;
    font-size: 0.95rem;
    color: var(--cf-text-muted, #94a3b8);
    pointer-events: none;
}

.cf-search-input[b-dc2gpzwbrk] {
    padding-left: 2.35rem !important;
    padding-right: 2.35rem !important;
    height: 38px;
    background-color: var(--cf-bg-surface, #ffffff);
    border: 1px solid var(--cf-border-color, #cbd5e1);
    border-radius: var(--cf-radius-md, 8px);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-primary, #0f172a);
    width: 100%;
    transition: all var(--cf-transition-fast, 0.15s ease);
}

.cf-search-input:focus[b-dc2gpzwbrk] {
    border-color: var(--cf-brand-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.cf-search-clear[b-dc2gpzwbrk] {
    position: absolute;
    right: 0.6rem;
    background: transparent;
    border: none;
    color: var(--cf-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: background-color var(--cf-transition-fast, 0.15s ease), 
                color var(--cf-transition-fast, 0.15s ease);
}

.cf-search-clear:hover[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-hover, #e2e8f0);
    color: var(--cf-text-primary, #0f172a);
}

/* --------------------------------------------------------------------------
   4. POLJA ZA UNOS, SELEKTORI I DUGMAD
   -------------------------------------------------------------------------- */
.cf-input[b-dc2gpzwbrk], 
.cf-select[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface, #ffffff);
    border: 1px solid var(--cf-border-color, #cbd5e1);
    border-radius: var(--cf-radius-md, 8px);
    color: var(--cf-text-primary, #0f172a);
    padding: 0.55rem 0.85rem;
    height: 38px;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    outline: none;
    transition: border-color var(--cf-transition-fast, 0.15s ease), 
                box-shadow var(--cf-transition-fast, 0.15s ease);
    box-sizing: border-box;
    width: 100%;
}

.cf-input:focus[b-dc2gpzwbrk], 
.cf-select:focus[b-dc2gpzwbrk] {
    border-color: var(--cf-brand-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cf-input:disabled[b-dc2gpzwbrk],
.cf-select:disabled[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    color: var(--cf-text-muted, #94a3b8);
    cursor: not-allowed;
    opacity: 0.85;
}

.cf-btn[b-dc2gpzwbrk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.55rem 1.15rem;
    height: 38px;
    border-radius: var(--cf-radius-md, 8px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--cf-transition-fast, 0.15s ease), 
                transform 0.1s ease, 
                box-shadow var(--cf-transition-fast, 0.15s ease);
    user-select: none;
    box-sizing: border-box;
}

.cf-btn:active[b-dc2gpzwbrk] {
    transform: scale(0.98);
}

.cf-btn-primary[b-dc2gpzwbrk] {
    background-color: var(--cf-brand-primary, #3b82f6);
    color: #ffffff;
}

.cf-btn-primary:hover[b-dc2gpzwbrk] {
    background-color: var(--cf-brand-primary-hover, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.cf-btn-secondary[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    color: var(--cf-text-secondary, #334155);
    border: 1px solid var(--cf-border-color, #e2e8f0);
}

.cf-btn-secondary:hover[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-hover, #e2e8f0);
    color: var(--cf-text-primary, #0f172a);
}

.cf-btn-danger[b-dc2gpzwbrk] {
    background-color: var(--cf-color-danger, #dc2626);
    color: #ffffff;
}

.cf-btn-danger:hover[b-dc2gpzwbrk] {
    background-color: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.cf-btn-icon[b-dc2gpzwbrk] {
    padding: 0.4rem 0.55rem;
    height: 32px;
    min-width: 32px;
    font-size: 0.95rem;
    border-radius: var(--cf-radius-sm, 6px);
    background-color: transparent;
    border: 1px solid var(--cf-border-color, #e2e8f0);
    color: var(--cf-text-secondary, #64748b);
}

.cf-btn-icon:hover[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-hover, #e2e8f0);
    color: var(--cf-text-primary, #0f172a);
}

.cf-btn-edit:hover[b-dc2gpzwbrk] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.3);
}

.cf-btn-toggle:hover[b-dc2gpzwbrk] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.cf-btn-delete:hover[b-dc2gpzwbrk] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

/* --------------------------------------------------------------------------
   5. TABELA RAČUNA I KARTICA
   -------------------------------------------------------------------------- */
.cf-table-card[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface, #ffffff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    overflow: hidden;
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    display: flex;
    flex-direction: column;
}

.cf-table-wrapper[b-dc2gpzwbrk] {
    overflow-x: auto;
    width: 100%;
}

.cf-table[b-dc2gpzwbrk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.cf-table thead tr[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    border-bottom: 1px solid var(--cf-border-color, #e2e8f0);
}

.cf-table th[b-dc2gpzwbrk] {
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cf-text-secondary, #334155);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cf-table tbody tr[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface, #ffffff);
    border-bottom: 1px solid var(--cf-border-color-subtle, #f1f5f9);
    transition: background-color var(--cf-transition-fast, 0.15s ease);
}

.cf-table tbody tr:hover[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-app, #f8fafc);
}

.cf-table td[b-dc2gpzwbrk] {
    padding: 0.9rem 1rem;
    color: var(--cf-text-primary, #0f172a);
    vertical-align: middle;
}

.cf-row-inactive[b-dc2gpzwbrk] {
    opacity: 0.6;
}

.cf-account-name-cell[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cf-account-icon[b-dc2gpzwbrk] {
    font-size: 1.25rem;
    line-height: 1;
}

.cf-account-name[b-dc2gpzwbrk] {
    font-weight: 600;
    color: var(--cf-text-primary, #0f172a);
}

.cf-company-tag[b-dc2gpzwbrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--cf-text-secondary, #475569);
}

.cf-account-number[b-dc2gpzwbrk] {
    font-family: var(--cf-font-mono, monospace);
    font-size: 0.85rem;
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    padding: 0.2rem 0.45rem;
    border-radius: var(--cf-radius-sm, 4px);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    color: var(--cf-text-primary, #0f172a);
}

.cf-currency-badge[b-dc2gpzwbrk] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--cf-radius-sm, 4px);
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cf-text-secondary, #475569);
    letter-spacing: 0.05em;
}

.cf-balance-current[b-dc2gpzwbrk] {
    font-weight: 700;
    color: var(--cf-text-primary, #0f172a);
    font-size: 0.9rem;
}

.cf-balance-pill[b-dc2gpzwbrk] {
    display: inline-block;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--cf-radius-sm, 6px);
    font-size: 0.9rem;
}

.cf-balance-positive[b-dc2gpzwbrk] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.cf-balance-negative[b-dc2gpzwbrk] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.cf-balance-zero[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    color: var(--cf-text-muted, #64748b);
    border: 1px solid var(--cf-border-color, #e2e8f0);
}

.cf-balance-neutral[b-dc2gpzwbrk] {
    font-weight: 500;
    color: var(--cf-text-secondary, #334155);
}

.cf-text-right[b-dc2gpzwbrk] {
    text-align: right;
}

/* --------------------------------------------------------------------------
   6. BADŽEVI (Status & Tip računa)
   -------------------------------------------------------------------------- */
.cf-badge[b-dc2gpzwbrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--cf-radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
}

.cf-badge-active[b-dc2gpzwbrk] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.cf-badge-inactive[b-dc2gpzwbrk] {
    background-color: rgba(148, 163, 184, 0.15);
    color: var(--cf-text-muted, #64748b);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.cf-badge-type[b-dc2gpzwbrk] {
    border-radius: var(--cf-radius-sm, 6px);
    font-weight: 600;
}

.cf-badge-bank[b-dc2gpzwbrk] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.cf-badge-cash[b-dc2gpzwbrk] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.cf-badge-fx[b-dc2gpzwbrk] {
    background-color: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.cf-badge-card[b-dc2gpzwbrk] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.cf-badge-loan[b-dc2gpzwbrk] {
    background-color: rgba(236, 72, 153, 0.1);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.25);
}

.cf-actions-group[b-dc2gpzwbrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* --------------------------------------------------------------------------
   7. OBAVJEŠTENJA (Alerts)
   -------------------------------------------------------------------------- */
.cf-alert[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-radius: var(--cf-radius-md, 8px);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.cf-alert-success[b-dc2gpzwbrk] {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

.cf-alert-danger[b-dc2gpzwbrk] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.cf-alert-warning[b-dc2gpzwbrk] {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #d97706;
}

.cf-alert-icon[b-dc2gpzwbrk] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cf-alert-close[b-dc2gpzwbrk] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--cf-transition-fast, 0.15s ease);
}

.cf-alert-close:hover[b-dc2gpzwbrk] {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   8. PRAZNO STANJE I UČITAVANJE (Empty & Loading States)
   -------------------------------------------------------------------------- */
.cf-loading-state[b-dc2gpzwbrk], 
.cf-empty-state[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    background-color: var(--cf-bg-surface, #ffffff);
    border-radius: var(--cf-radius-lg, 12px);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    box-shadow: var(--cf-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    text-align: center;
    gap: 0.75rem;
}

.cf-empty-icon[b-dc2gpzwbrk] {
    font-size: 2.5rem;
    color: #94a3b8;
    line-height: 1;
}

.cf-empty-title[b-dc2gpzwbrk] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cf-text-primary, #1e293b);
}

.cf-empty-text[b-dc2gpzwbrk] {
    margin: 0;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-muted, #64748b);
    max-width: 420px;
}

.cf-spinner[b-dc2gpzwbrk] {
    display: inline-block;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--cf-brand-primary, #3b82f6);
    border-radius: 50%;
    animation: cf-spin-b-dc2gpzwbrk 0.7s linear infinite;
}

.cf-spinner-sm[b-dc2gpzwbrk] {
    width: 16px;
    height: 16px;
}

.cf-spinner-lg[b-dc2gpzwbrk] {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.cf-loading-text[b-dc2gpzwbrk] {
    color: var(--cf-text-secondary, #475569);
    font-size: var(--cf-font-size-base, 1rem);
    margin: 0;
}

@keyframes cf-spin-b-dc2gpzwbrk {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   9. MODALNI DIJALOZI I FORME
   -------------------------------------------------------------------------- */
.cf-modal-backdrop[b-dc2gpzwbrk] {
    position: fixed;
    inset: 0;
    background-color: var(--cf-bg-overlay, rgba(15, 23, 42, 0.6));
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: cf-fade-in-b-dc2gpzwbrk 0.2s ease;
}

.cf-modal[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface, #ffffff);
    border-radius: var(--cf-radius-xl, 14px);
    border: 1px solid var(--cf-border-color, #e2e8f0);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--cf-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    display: flex;
    flex-direction: column;
    animation: cf-scale-up-b-dc2gpzwbrk 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-modal-sm[b-dc2gpzwbrk] {
    max-width: 480px;
}

.cf-modal-header[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--cf-border-color, #e2e8f0);
    background-color: var(--cf-bg-surface, #ffffff);
    flex-shrink: 0;
}

.cf-modal-title[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cf-text-primary, #0f172a);
}

.cf-text-danger[b-dc2gpzwbrk] {
    color: var(--cf-color-danger, #dc2626) !important;
}

.cf-modal-close[b-dc2gpzwbrk] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted, #94a3b8);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cf-radius-sm, 6px);
    transition: background-color var(--cf-transition-fast, 0.15s ease), 
                color var(--cf-transition-fast, 0.15s ease);
}

.cf-modal-close:hover[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-hover, #e2e8f0);
    color: var(--cf-text-primary, #0f172a);
}

.cf-modal-body[b-dc2gpzwbrk] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--cf-bg-surface, #ffffff);
    overflow-y: auto;
}

.cf-modal-footer[b-dc2gpzwbrk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--cf-border-color, #e2e8f0);
    background-color: var(--cf-bg-surface-alt, #f8fafc);
    flex-shrink: 0;
}

.cf-form-grid[b-dc2gpzwbrk] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.cf-col-12[b-dc2gpzwbrk] { grid-column: span 12; }
.cf-col-6[b-dc2gpzwbrk] { grid-column: span 6; }

@media (max-width: 640px) {
    .cf-col-6[b-dc2gpzwbrk] { grid-column: span 12; }
}

.cf-form-group[b-dc2gpzwbrk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-form-label[b-dc2gpzwbrk] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cf-text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cf-required[b-dc2gpzwbrk] {
    color: var(--cf-color-danger, #dc2626);
}

.cf-form-hint[b-dc2gpzwbrk] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cf-text-muted, #94a3b8);
}

.cf-form-check-wrapper[b-dc2gpzwbrk] {
    justify-content: center;
    padding-top: 1.5rem;
}

.cf-checkbox-label[b-dc2gpzwbrk] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-primary, #1e293b);
    user-select: none;
}

.cf-checkbox[b-dc2gpzwbrk] {
    width: 18px;
    height: 18px;
    accent-color: var(--cf-brand-primary, #3b82f6);
    cursor: pointer;
}

.cf-validation-message[b-dc2gpzwbrk] {
    font-size: 0.8rem;
    color: var(--cf-color-danger, #dc2626);
    margin-top: 0.2rem;
}

.cf-delete-details[b-dc2gpzwbrk] {
    background-color: var(--cf-bg-surface-alt, #f8fafc);
    border-radius: var(--cf-radius-md, 8px);
    padding: 0.85rem 1rem;
    border: 1px solid var(--cf-border-color, #e2e8f0);
    font-size: 0.875rem;
}

.cf-delete-details p[b-dc2gpzwbrk] {
    margin: 0.35rem 0;
    color: var(--cf-text-primary, #334155);
}

@keyframes cf-fade-in-b-dc2gpzwbrk {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cf-scale-up-b-dc2gpzwbrk {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* _content/CashFlow.UI/Components/Pages/Finance/DailyBalance.razor.rz.scp.css */
.cf-daily-balance-page[b-f7stw2teg6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* ==========================================================================
   1. Zaglavlje stranice i akcije
   ========================================================================== */

.cf-page-header[b-f7stw2teg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cf-border-color, #e2e8f0);
}

.cf-page-title-group[b-f7stw2teg6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-f7stw2teg6] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cf-text-primary, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-title-icon[b-f7stw2teg6] {
    font-size: 1.5rem;
}

.cf-page-subtitle[b-f7stw2teg6] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cf-text-secondary, #64748b);
}

.cf-page-header-actions[b-f7stw2teg6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   2. Stepper kontrolna traka za datum
   ========================================================================== */

.cf-balance-date-stepper-card[b-f7stw2teg6] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cf-balance-date-stepper[b-f7stw2teg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cf-stepper-controls[b-f7stw2teg6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cf-stepper-nav-btn[b-f7stw2teg6] {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

.cf-stepper-nav-btn:disabled[b-f7stw2teg6] {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
}

.cf-stepper-input-group[b-f7stw2teg6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cf-stepper-label[b-f7stw2teg6] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.cf-balance-date-input[b-f7stw2teg6] {
    height: 32px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    color: #0f172a;
}

.cf-balance-date-meta[b-f7stw2teg6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cf-badge-company[b-f7stw2teg6] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.cf-balance-loading[b-f7stw2teg6] {
    min-height: 220px;
}

/* ==========================================================================
   3. Gornja matrica: Stanje novčanih sredstava po računima
   ========================================================================== */

.cf-balance-matrix-card[b-f7stw2teg6] {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.cf-balance-card-header[b-f7stw2teg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-balance-header-title[b-f7stw2teg6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cf-balance-header-icon[b-f7stw2teg6] {
    font-size: 1.1rem;
}

.cf-balance-title[b-f7stw2teg6] {
    margin: 0;
    font-size: 0.90rem;
    font-weight: 700;
    color: #0f172a;
}

.cf-balance-header-date[b-f7stw2teg6] {
    font-size: 0.775rem;
    font-weight: 600;
    color: #64748b;
}

.cf-balance-table-container[b-f7stw2teg6] {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.cf-balance-summary-table[b-f7stw2teg6] {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    box-sizing: border-box;
    font-size: 0.85rem;
}

.cf-balance-summary-table th[b-f7stw2teg6],
.cf-balance-summary-table td[b-f7stw2teg6] {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 0.85rem;
}

.cf-balance-summary-table thead th[b-f7stw2teg6] {
    background: #f1f5f9;
    font-size: 0.775rem;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.cf-balance-summary-table tbody td[b-f7stw2teg6] {
    font-size: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}

/* Kolona 1: Naziv računa / blagajne (200px, left) */
.cf-balance-summary-table th:nth-child(1)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(1)[b-f7stw2teg6] {
    width: 200px;
    text-align: left;
}

/* Kolona 2: Preduzeće (100px, left) */
.cf-balance-summary-table th:nth-child(2)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(2)[b-f7stw2teg6] {
    width: 100px;
    text-align: left;
}

/* Kolona 3: Valuta (60px, center) */
.cf-balance-summary-table th:nth-child(3)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(3)[b-f7stw2teg6] {
    width: 60px;
    text-align: center;
}

/* Kolona 4: Prethodno stanje (120px, right) */
.cf-balance-summary-table th:nth-child(4)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(4)[b-f7stw2teg6] {
    width: 120px;
    text-align: right;
}

/* Kolona 5: Prilivi (+) (105px, right) */
.cf-balance-summary-table th:nth-child(5)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(5)[b-f7stw2teg6] {
    width: 105px;
    text-align: right;
}

/* Kolona 6: Odlivi (-) (105px, right) */
.cf-balance-summary-table th:nth-child(6)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(6)[b-f7stw2teg6] {
    width: 105px;
    text-align: right;
}

/* Kolona 7: Današnje stanje (130px, right) */
.cf-balance-summary-table th:nth-child(7)[b-f7stw2teg6],
.cf-balance-summary-table tbody td:nth-child(7)[b-f7stw2teg6] {
    width: 130px;
    text-align: right;
}

.cf-account-name-cell[b-f7stw2teg6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.cf-currency-tag[b-f7stw2teg6] {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.70rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    border-radius: 0.25rem;
}

.cf-balance-closing-cell[b-f7stw2teg6] {
    font-size: 0.85rem;
    color: #0f172a;
}

.cf-balance-total-row[b-f7stw2teg6] {
    background: #f8fafc;
    border-top: 2px solid #cbd5e1;
}

.cf-balance-total-row td[b-f7stw2teg6] {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
}

.cf-balance-closing-total[b-f7stw2teg6] {
    font-size: 0.90rem;
    color: #0f172a;
}

/* ==========================================================================
   4. Analitičke matrice (2 kolone: prilivi i odlivi)
   ========================================================================== */

.cf-balance-analytics-grid[b-f7stw2teg6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 1rem;
}

@media (max-width: 992px) {
    .cf-balance-analytics-grid[b-f7stw2teg6] {
        grid-template-columns: 1fr;
    }
}

.cf-analytics-card[b-f7stw2teg6] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cf-analytics-card-header[b-f7stw2teg6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-analytics-inflow .cf-analytics-card-header[b-f7stw2teg6] {
    background: #f0fdf4;
    border-bottom-color: #bbf7d0;
}

.cf-analytics-outflow .cf-analytics-card-header[b-f7stw2teg6] {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

.cf-analytics-title-group[b-f7stw2teg6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cf-analytics-icon[b-f7stw2teg6] {
    font-size: 1.1rem;
}

.cf-analytics-title[b-f7stw2teg6] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.cf-analytics-total[b-f7stw2teg6] {
    font-size: 0.95rem;
    font-weight: 700;
}

.cf-total-inflow[b-f7stw2teg6] {
    color: #166534;
}

.cf-total-outflow[b-f7stw2teg6] {
    color: #991b1b;
}

.cf-analytics-table-wrapper[b-f7stw2teg6] {
    overflow-x: auto;
    max-height: 420px;
}

.cf-analytics-table thead th[b-f7stw2teg6] {
    background: #f8fafc;
    font-size: 0.75rem;
    padding: 0.5rem 0.65rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cf-analytics-table tbody td[b-f7stw2teg6] {
    padding: 0.5rem 0.65rem;
    font-size: 0.80rem;
    vertical-align: middle;
}

.cf-account-tag[b-f7stw2teg6] {
    display: inline-block;
    padding: 0.125rem 0.4rem;
    font-size: 0.725rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #334155;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.cf-text-desc[b-f7stw2teg6] {
    color: #475569;
    font-size: 0.775rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-analytics-footer-row[b-f7stw2teg6] {
    background: #f8fafc;
    border-top: 2px solid #cbd5e1;
    position: sticky;
    bottom: 0;
}

.cf-analytics-footer-row td[b-f7stw2teg6] {
    padding: 0.55rem 0.65rem;
    font-size: 0.825rem;
}

/* ==========================================================================
   5. Pomoćne klase, empty state i loading
   ========================================================================== */

.cf-alert[b-f7stw2teg6] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.cf-alert-danger[b-f7stw2teg6] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cf-empty-state[b-f7stw2teg6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.cf-empty-icon[b-f7stw2teg6] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.cf-empty-text[b-f7stw2teg6] {
    margin: 0;
    color: #64748b;
    font-size: 0.9375rem;
}

.cf-empty-table-cell[b-f7stw2teg6] {
    padding: 2.5rem 1rem !important;
    text-align: center;
}

.cf-loading-state[b-f7stw2teg6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.cf-spinner[b-f7stw2teg6] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: cf-spin-b-f7stw2teg6 0.8s linear infinite;
}

@keyframes cf-spin-b-f7stw2teg6 {
    to {
        transform: rotate(360deg);
    }
}

.cf-loading-text[b-f7stw2teg6] {
    margin: 0;
    color: #64748b;
    font-weight: 500;
}

.cf-text-income[b-f7stw2teg6] {
    color: #16a34a !important;
}

.cf-text-expense[b-f7stw2teg6] {
    color: #dc2626 !important;
}

.cf-text-expense-bold[b-f7stw2teg6] {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

.cf-text-center[b-f7stw2teg6] {
    text-align: center !important;
}

.cf-text-right[b-f7stw2teg6] {
    text-align: right !important;
}

.cf-font-medium[b-f7stw2teg6] {
    font-weight: 500;
}

.cf-font-bold[b-f7stw2teg6] {
    font-weight: 700;
}

/* ==========================================================================
   6. Pravila za optimizovanu štampu (Print Media)
   ========================================================================== */
@media print {
    .cf-page-header-actions[b-f7stw2teg6],
    .cf-balance-date-stepper-card[b-f7stw2teg6],
    .cf-btn[b-f7stw2teg6],
    .cf-alert[b-f7stw2teg6] {
        display: none !important;
    }

    .cf-daily-balance-page[b-f7stw2teg6] {
        gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cf-page-header[b-f7stw2teg6] {
        border-bottom: 2px solid #0f172a !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .cf-balance-matrix-card[b-f7stw2teg6],
    .cf-analytics-card[b-f7stw2teg6] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 0.75rem !important;
    }

    .cf-balance-analytics-grid[b-f7stw2teg6] {
        display: block !important;
    }

    .cf-analytics-card[b-f7stw2teg6] {
        margin-bottom: 1rem !important;
    }

    .cf-table-container[b-f7stw2teg6],
    .cf-analytics-table-wrapper[b-f7stw2teg6] {
        max-height: none !important;
        overflow: visible !important;
    }

    .cf-balance-summary-table[b-f7stw2teg6],
    .cf-analytics-table[b-f7stw2teg6] {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .cf-balance-summary-table th[b-f7stw2teg6],
    .cf-balance-summary-table td[b-f7stw2teg6],
    .cf-analytics-table th[b-f7stw2teg6],
    .cf-analytics-table td[b-f7stw2teg6] {
        color: #000000 !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 8pt !important;
        padding: 4px 6px !important;
    }

    .cf-balance-summary-table thead th[b-f7stw2teg6],
    .cf-analytics-table thead th[b-f7stw2teg6] {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        font-weight: 700 !important;
    }
}
/* _content/CashFlow.UI/Components/Pages/Finance/Transactions.razor.rz.scp.css */
/* ==========================================================================
   CashFlow UI - Dnevni nalozi i transakcije (V1.3 Global Constitution)
   Prefiks svih klasa: cf-
   ========================================================================== */

.cf-transactions-container[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* 1. Page Header */
.cf-page-header[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.cf-page-title-group[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cf-page-title[b-pfpr290jpr] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-title-icon[b-pfpr290jpr] {
    font-size: 1.5rem;
}

.cf-page-subtitle[b-pfpr290jpr] {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.cf-page-header-actions[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 2. Zbirne KPI kartice (Optimizovano i kompresovano) */
.cf-kpi-grid[b-pfpr290jpr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.65rem;
}

.cf-kpi-card[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cf-kpi-card:hover[b-pfpr290jpr] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}

.cf-kpi-header[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cf-kpi-icon[b-pfpr290jpr] {
    font-size: 1.15rem;
}

.cf-kpi-badge[b-pfpr290jpr] {
    font-size: 0.70rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
}

.cf-kpi-body[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cf-kpi-label[b-pfpr290jpr] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

/* Visokokontrastni crni font za iznose na karticama prema V1.3 */
.cf-kpi-value[b-pfpr290jpr] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* 3. Filter Card - Horizontalni Flex/Grid raspored */
.cf-filters-card[b-pfpr290jpr],
.cf-filter-card[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cf-filters-row[b-pfpr290jpr],
.cf-filter-grid[b-pfpr290jpr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
}

.cf-filters-row .cf-form-group[b-pfpr290jpr] {
    margin-bottom: 0;
}

.cf-filter-search[b-pfpr290jpr] {
    flex: 2 1 180px;
    min-width: 160px;
}

.cf-filter-company[b-pfpr290jpr] {
    flex: 1.5 1 150px;
    min-width: 140px;
}

.cf-filter-status[b-pfpr290jpr] {
    flex: 1 1 120px;
    min-width: 110px;
}

.cf-filter-stepper[b-pfpr290jpr] {
    flex: 0 0 auto;
}

.cf-period-stepper-group[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.125rem 0.25rem;
    height: 38px;
    box-sizing: border-box;
}

.cf-stepper-btn[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.cf-stepper-btn:hover[b-pfpr290jpr] {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.cf-period-pills[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

.cf-pill-btn[b-pfpr290jpr] {
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.775rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cf-pill-btn:hover[b-pfpr290jpr] {
    background: #e2e8f0;
    color: #0f172a;
}

.cf-pill-btn.cf-pill-active[b-pfpr290jpr] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.cf-filter-date[b-pfpr290jpr] {
    flex: 1 1 120px;
    min-width: 110px;
}

.cf-filter-actions-group[b-pfpr290jpr] {
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.cf-filter-reset-btn[b-pfpr290jpr] {
    height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0;
}

/* 3.1 View Toggle Bar */
.cf-view-toggle-bar[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.cf-view-toggle-group[b-pfpr290jpr] {
    display: inline-flex;
    background: #e2e8f0;
    padding: 0.2rem;
    border-radius: 0.5rem;
    gap: 0.2rem;
}

.cf-toggle-btn[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cf-toggle-btn:hover[b-pfpr290jpr] {
    color: #0f172a;
}

.cf-toggle-btn.cf-toggle-active[b-pfpr290jpr] {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cf-view-meta[b-pfpr290jpr] {
    display: flex;
    align-items: center;
}

.cf-view-meta-text[b-pfpr290jpr] {
    font-size: 0.80rem;
    color: #64748b;
    font-weight: 500;
}

/* 3.2 Dense Orders Cards Grid & Cards (Stroga 3 reda) */
.cf-orders-grid[b-pfpr290jpr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 0.75rem;
}

.cf-order-card[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid var(--cf-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cf-order-card:hover[b-pfpr290jpr] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}

/* Red 1: Zaglavlje kartice (Datum, Status) */
.cf-order-card-row-header[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.cf-order-card-date[b-pfpr290jpr] {
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Red 2: Finansijski podaci (Dominantna zona) */
.cf-order-card-row-finance[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0.5rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    gap: 0.5rem;
}

.cf-order-card-finance-flow[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.cf-order-card-income[b-pfpr290jpr] {
    color: #16a34a;
}

.cf-order-card-divider[b-pfpr290jpr] {
    color: #94a3b8;
    font-weight: 400;
}

.cf-order-card-expense[b-pfpr290jpr] {
    color: #dc2626;
}

.cf-order-card-net[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cf-order-card-net-amount[b-pfpr290jpr] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cf-order-card-net-amount.cf-net-positive[b-pfpr290jpr] {
    color: #166534;
}

.cf-order-card-net-amount.cf-net-negative[b-pfpr290jpr] {
    color: #dc2626;
}

/* Red 3: Podnožje i akcije (Preduzeće lijevo, Akcije desno) */
.cf-order-card-row-actions[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--cf-border, #e2e8f0);
}

.cf-order-card-company[b-pfpr290jpr] {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--cf-text-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.cf-mini-action-btn-group[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cf-mini-btn[b-pfpr290jpr] {
    width: 30px;
    height: 30px;
    padding: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.cf-mini-btn:hover[b-pfpr290jpr] {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
}

.cf-mini-btn-primary:hover[b-pfpr290jpr] {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.cf-mini-btn-warning:hover[b-pfpr290jpr] {
    background-color: #fffbeb;
    border-color: #fde68a;
}

.cf-mini-btn-danger:hover[b-pfpr290jpr] {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.cf-empty-card[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

/* Form Controls */
.cf-form-group[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cf-form-row[b-pfpr290jpr] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-form-row > .cf-form-group[b-pfpr290jpr] {
    flex: 1;
    min-width: 180px;
}

.cf-flex-grow[b-pfpr290jpr] {
    flex-grow: 1;
}

.cf-label[b-pfpr290jpr] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.cf-input[b-pfpr290jpr],
.cf-select[b-pfpr290jpr] {
    height: 2.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.cf-input:focus[b-pfpr290jpr],
.cf-select:focus[b-pfpr290jpr] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cf-input-readonly[b-pfpr290jpr] {
    background-color: #f8fafc;
    color: #64748b;
    cursor: default;
}

.cf-textarea[b-pfpr290jpr] {
    height: auto;
    padding: 0.5rem 0.75rem;
    resize: vertical;
}

/* 4. Table Styles */
.cf-table-container[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cf-table[b-pfpr290jpr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.cf-table th[b-pfpr290jpr] {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.cf-table td[b-pfpr290jpr] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

.cf-table tbody tr:hover[b-pfpr290jpr] {
    background-color: #f8fafc;
}

.cf-text-right[b-pfpr290jpr] {
    text-align: right;
}

.cf-text-center[b-pfpr290jpr] {
    text-align: center;
}

.cf-font-medium[b-pfpr290jpr] {
    font-weight: 500;
}

.cf-font-bold[b-pfpr290jpr] {
    font-weight: 700;
}

.cf-text-muted[b-pfpr290jpr] {
    color: #64748b;
    font-size: 0.8125rem;
}

.cf-text-expense-bold[b-pfpr290jpr] {
    color: #dc2626;
    font-weight: 600;
}

/* Badges & Pills */
.cf-badge[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    line-height: 1;
}

.cf-badge-draft[b-pfpr290jpr] {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.cf-badge-posted[b-pfpr290jpr] {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.cf-badge-cancelled[b-pfpr290jpr] {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.cf-badge-warning[b-pfpr290jpr] {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.cf-badge-neutral[b-pfpr290jpr] {
    background-color: #f8fafc;
    color: #64748b;
}

.cf-badge-income[b-pfpr290jpr] {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.cf-badge-expense[b-pfpr290jpr] {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.cf-badge-transfer[b-pfpr290jpr] {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.cf-version-pill[b-pfpr290jpr] {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background-color: #eff6ff;
    color: #1d4ed8;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cf-order-number-badge[b-pfpr290jpr] {
    font-weight: 600;
    color: #0f172a;
}

.cf-order-note-hint[b-pfpr290jpr] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.2rem;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Buttons */
.cf-btn[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cf-btn-primary[b-pfpr290jpr] {
    background-color: #2563eb;
    color: #ffffff;
}

.cf-btn-primary:hover[b-pfpr290jpr] {
    background-color: #1d4ed8;
}

.cf-btn-secondary[b-pfpr290jpr] {
    background-color: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
}

.cf-btn-secondary:hover[b-pfpr290jpr] {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

.cf-btn-warning[b-pfpr290jpr] {
    background-color: #f59e0b;
    color: #ffffff;
}

.cf-btn-warning:hover[b-pfpr290jpr] {
    background-color: #d97706;
}

.cf-btn-success[b-pfpr290jpr] {
    background-color: #16a34a;
    color: #ffffff;
}

.cf-btn-success:hover[b-pfpr290jpr] {
    background-color: #15803d;
}

.cf-btn-danger[b-pfpr290jpr] {
    background-color: #dc2626;
    color: #ffffff;
}

.cf-btn-danger:hover[b-pfpr290jpr] {
    background-color: #b91c1c;
}

.cf-btn-sm[b-pfpr290jpr] {
    height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
}

.cf-action-buttons[b-pfpr290jpr] {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.cf-action-btn[b-pfpr290jpr] {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.cf-action-btn:hover[b-pfpr290jpr] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.cf-action-success:hover[b-pfpr290jpr] {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}

.cf-action-primary:hover[b-pfpr290jpr] {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.cf-action-warning:hover[b-pfpr290jpr] {
    background-color: #fffbeb;
    border-color: #fde68a;
}

.cf-action-danger:hover[b-pfpr290jpr] {
    background-color: #fef2f2;
    border-color: #fecaca;
}

/* Modals */
.cf-modal-backdrop[b-pfpr290jpr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
}

.cf-modal-container[b-pfpr290jpr],
.cf-modal-dialog[b-pfpr290jpr],
.cf-modal[b-pfpr290jpr] {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-height: auto;
    max-height: 90vh;
    overflow: hidden;
    width: 100%;
    z-index: 1110;
}

.cf-modal-small[b-pfpr290jpr] {
    max-width: 500px;
    width: 100%;
    min-height: auto !important;
    height: auto !important;
    max-height: 90vh;
}

.cf-modal-large[b-pfpr290jpr] {
    max-width: 950px;
    min-height: 75vh;
    max-height: 88vh;
}

.cf-modal-xlarge[b-pfpr290jpr] {
    max-width: 1450px;
    width: 96vw;
    min-height: 75vh;
    max-height: 88vh;
}

.cf-modal-header[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.cf-modal-title-group[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-modal-title[b-pfpr290jpr] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.cf-modal-close[b-pfpr290jpr] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 0.375rem;
}

.cf-modal-close:hover[b-pfpr290jpr] {
    color: #0f172a;
    background-color: #f1f5f9;
}

.cf-modal-body[b-pfpr290jpr] {
    padding: 0.85rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1 1 auto;
}

.cf-modal-footer[b-pfpr290jpr] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

/* Master-Detail Order Styles */
.cf-order-master-header[b-pfpr290jpr] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.cf-order-header-group[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-order-header-group .cf-label[b-pfpr290jpr] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

.cf-order-header-group .cf-input[b-pfpr290jpr],
.cf-order-header-group .cf-select[b-pfpr290jpr] {
    height: 36px;
    box-sizing: border-box;
}

.cf-header-company[b-pfpr290jpr] {
    width: 180px;
    flex-shrink: 0;
}

.cf-header-date[b-pfpr290jpr] {
    width: 145px;
    flex-shrink: 0;
}

.cf-header-system-date[b-pfpr290jpr] {
    width: 140px;
    flex-shrink: 0;
}

.cf-header-order-number[b-pfpr290jpr] {
    width: 140px;
    flex-shrink: 0;
}

.cf-header-note[b-pfpr290jpr] {
    flex: 1 1 auto;
    min-width: 200px;
}

.cf-order-template-bar[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-bottom: 0;
}

.cf-template-bar-left[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-template-bar-label[b-pfpr290jpr] {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.85rem;
    color: #166534;
}

.cf-template-select[b-pfpr290jpr] {
    width: 260px;
    height: 36px;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.cf-template-btn[b-pfpr290jpr] {
    height: 36px;
    font-size: 0.85rem;
    padding: 0 0.875rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cf-template-bar-right[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-item-type-filter[b-pfpr290jpr] {
    width: 130px;
    height: 36px;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.cf-order-items-container[b-pfpr290jpr] {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f8fafc;
    flex: 1 1 auto;
    min-height: 280px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cf-order-items-list[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cf-order-item-card[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid var(--cf-border, #e2e8f0);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cf-order-item-card:hover[b-pfpr290jpr] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.cf-order-item-card.cf-item-income[b-pfpr290jpr] {
    border-left: 3px solid #16a34a;
}

.cf-order-item-card.cf-item-expense[b-pfpr290jpr] {
    border-left: 3px solid #dc2626;
}

.cf-order-item-card.cf-item-transfer[b-pfpr290jpr] {
    border-left: 3px solid #2563eb;
}

/* Linija 1: Klasifikacija i tok sredstava */
.cf-order-item-row-1[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.cf-item-col-type[b-pfpr290jpr] {
    width: 120px;
    flex-shrink: 0;
}

.cf-item-select-type[b-pfpr290jpr] {
    height: 34px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}

.cf-item-col-account[b-pfpr290jpr] {
    width: 200px;
    flex-shrink: 0;
}

.cf-item-select-account[b-pfpr290jpr] {
    height: 34px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

.cf-item-col-target-account[b-pfpr290jpr] {
    width: 180px;
    flex-shrink: 0;
}

.cf-item-select-target-account[b-pfpr290jpr] {
    height: 34px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

.cf-item-col-category[b-pfpr290jpr] {
    flex: 1 1 200px;
    min-width: 180px;
}

.cf-item-col-department[b-pfpr290jpr] {
    width: 160px;
    flex-shrink: 0;
}

.cf-item-col-doctor[b-pfpr290jpr] {
    width: 200px;
    flex-shrink: 0;
}

.cf-item-col-actions[b-pfpr290jpr] {
    margin-left: auto;
    flex-shrink: 0;
}

.cf-remove-row-btn[b-pfpr290jpr] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.3rem 0.4rem;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cf-remove-row-btn:hover[b-pfpr290jpr] {
    background-color: #fee2e2;
}

/* Linija 2: Finansijski kalkulator i opis */
.cf-order-item-row-2[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    flex-wrap: wrap;
}

.cf-input-field[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    overflow: hidden;
    height: 32px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cf-input-field:focus-within[b-pfpr290jpr] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cf-field-prefix[b-pfpr290jpr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 0 0.45rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    border-right: 1px solid #cbd5e1;
    white-space: nowrap;
    user-select: none;
}

.cf-finance-input[b-pfpr290jpr] {
    height: 100%;
    border: none;
    border-radius: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.8125rem;
    text-align: right;
    width: 100%;
    outline: none;
    background: transparent;
    box-sizing: border-box;
}

.cf-finance-input:focus[b-pfpr290jpr] {
    box-shadow: none;
    background: #ffffff;
}

.cf-field-gross[b-pfpr290jpr] {
    width: 105px;
    flex-shrink: 0;
}

.cf-field-discount[b-pfpr290jpr] {
    width: 95px;
    flex-shrink: 0;
}

.cf-field-net[b-pfpr290jpr] {
    width: 120px;
    flex-shrink: 0;
}

.cf-field-fee[b-pfpr290jpr] {
    width: 120px;
    flex-shrink: 0;
}

.cf-field-amount[b-pfpr290jpr] {
    width: 120px;
    flex-shrink: 0;
}

.cf-item-col-desc[b-pfpr290jpr] {
    flex: 1 1 180px;
    min-width: 180px;
}

.cf-item-desc-input[b-pfpr290jpr] {
    height: 32px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
}

.cf-item-col-tags[b-pfpr290jpr] {
    flex-shrink: 0;
    min-width: 110px;
}

.cf-order-item-net-display[b-pfpr290jpr] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #000000 !important;
    white-space: nowrap;
}

.cf-net-display-label[b-pfpr290jpr] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.cf-net-display-value[b-pfpr290jpr] {
    font-weight: 700;
    font-size: 1.05rem;
    color: #000000 !important;
}

.cf-item-readonly-text[b-pfpr290jpr] {
    font-size: 0.8125rem;
    color: #1e293b;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-finance-val[b-pfpr290jpr] {
    font-size: 0.8125rem;
    padding: 0 0.5rem;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
}

.cf-item-desc-text[b-pfpr290jpr] {
    font-size: 0.8125rem;
    color: #334155;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Zbirno podnožje stavki naloga */
.cf-order-items-summary-bar[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    margin-top: auto;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-summary-left[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8125rem;
    color: #475569;
    flex-wrap: wrap;
}

.cf-summary-count[b-pfpr290jpr] {
    font-size: 0.8125rem;
    color: #334155;
}

.cf-summary-chip[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
    font-size: 0.80rem;
    color: #334155;
}

.cf-summary-discount[b-pfpr290jpr] {
    color: #d97706;
    border-color: #fde68a;
    background: #fffbeb;
}

.cf-summary-fee[b-pfpr290jpr] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.cf-summary-right[b-pfpr290jpr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.cf-summary-flow[b-pfpr290jpr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.cf-summary-income[b-pfpr290jpr] {
    color: #16a34a;
}

.cf-summary-divider[b-pfpr290jpr] {
    color: #94a3b8;
    font-weight: 400;
}

.cf-summary-expense[b-pfpr290jpr] {
    color: #dc2626;
}

.cf-summary-net[b-pfpr290jpr] {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.cf-summary-net.cf-net-positive[b-pfpr290jpr] {
    color: #166534;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.cf-summary-net.cf-net-negative[b-pfpr290jpr] {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.cf-empty-items[b-pfpr290jpr] {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 2.5rem 1rem;
    text-align: center;
    margin: 1rem 0;
}

/* Template management */
.cf-templates-list-header[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.cf-section-header[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cf-section-header h4[b-pfpr290jpr] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
}

.cf-template-edit-form[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cf-template-header-row[b-pfpr290jpr] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: nowrap;
    margin-bottom: 1rem;
}

.cf-template-field-name[b-pfpr290jpr] {
    width: 220px;
    flex-shrink: 0;
}

.cf-template-field-type[b-pfpr290jpr] {
    width: 140px;
    flex-shrink: 0;
}

.cf-template-field-account[b-pfpr290jpr] {
    width: 220px;
    flex-shrink: 0;
}

.cf-template-field-desc[b-pfpr290jpr] {
    flex: 1;
    min-width: 200px;
}

.cf-required-star[b-pfpr290jpr] {
    color: var(--cf-danger, #ef4444);
    font-weight: bold;
}

.cf-template-edit-actions[b-pfpr290jpr] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Alerts */
.cf-alert[b-pfpr290jpr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.cf-alert-danger[b-pfpr290jpr] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cf-alert-success[b-pfpr290jpr] {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.cf-alert-warning[b-pfpr290jpr] {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.cf-alert-info[b-pfpr290jpr] {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* Empty State */
.cf-empty-state[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.cf-empty-icon[b-pfpr290jpr] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.cf-empty-text[b-pfpr290jpr] {
    margin: 0;
    color: #64748b;
    font-size: 0.9375rem;
}

.cf-empty-table-cell[b-pfpr290jpr] {
    padding: 2.5rem 1rem !important;
    text-align: center;
}

/* Loading state */
.cf-loading-state[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.cf-spinner[b-pfpr290jpr] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: cf-spin-b-pfpr290jpr 0.8s linear infinite;
    display: inline-block;
}

.cf-spinner-sm[b-pfpr290jpr] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    display: inline-block;
    vertical-align: middle;
}

.cf-spinner-lg[b-pfpr290jpr] {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
    display: inline-block;
}

@keyframes cf-spin-b-pfpr290jpr {
    to {
        transform: rotate(360deg);
    }
}

.cf-loading-text[b-pfpr290jpr] {
    margin: 0;
    color: #64748b;
    font-weight: 500;
}

.cf-mt-2[b-pfpr290jpr] {
    margin-top: 0.5rem;
}

.cf-mt-3[b-pfpr290jpr] {
    margin-top: 0.75rem;
}

/* ==========================================================================
   Modali za potvrdu (Confirmation Dialogs - Draft & Post Order)
   ========================================================================== */

.cf-modal-confirm-backdrop[b-pfpr290jpr],
.cf-confirm-backdrop[b-pfpr290jpr] {
    z-index: 1300 !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(3px);
}

.cf-modal-confirm[b-pfpr290jpr],
.cf-confirm-dialog[b-pfpr290jpr],
.cf-modal-confirm-container[b-pfpr290jpr] {
    max-width: 440px;
    width: 100%;
    min-height: auto !important;
    height: auto !important;
    max-height: 90vh;
    border: 1px solid #cbd5e1;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: cf-confirm-pop-b-pfpr290jpr 0.15s ease-out;
    z-index: 1310 !important;
}

.cf-modal-confirm .cf-modal-header[b-pfpr290jpr] {
    padding: 0.75rem 1.25rem;
}

@keyframes cf-confirm-pop-b-pfpr290jpr {
    from {
        transform: scale(0.96);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cf-confirm-body[b-pfpr290jpr],
.cf-modal-confirm .cf-modal-body[b-pfpr290jpr] {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
}

.cf-confirm-text[b-pfpr290jpr] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #334155;
}

.cf-confirm-summary-card[b-pfpr290jpr] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cf-confirm-summary-meta[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.65rem;
}

.cf-confirm-meta-item[b-pfpr290jpr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.cf-confirm-meta-label[b-pfpr290jpr] {
    color: #64748b;
    font-weight: 500;
}

.cf-confirm-meta-val[b-pfpr290jpr] {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

.cf-confirm-finance-grid[b-pfpr290jpr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.cf-confirm-finance-item[b-pfpr290jpr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cf-confirm-finance-item.cf-confirm-net[b-pfpr290jpr] {
    grid-column: span 2;
    padding-top: 0.5rem;
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cf-confirm-finance-label[b-pfpr290jpr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.cf-confirm-finance-val[b-pfpr290jpr] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.cf-confirm-income .cf-confirm-finance-val[b-pfpr290jpr] {
    color: #16a34a;
}

.cf-confirm-expense .cf-confirm-finance-val[b-pfpr290jpr] {
    color: #dc2626;
}

.cf-confirm-net .cf-confirm-finance-label[b-pfpr290jpr] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.cf-confirm-net .cf-confirm-finance-val[b-pfpr290jpr] {
    font-size: 1.1rem;
    font-weight: 800;
}

.cf-confirm-footer[b-pfpr290jpr],
.cf-modal-confirm .cf-modal-footer[b-pfpr290jpr] {
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    background-color: #f8fafc;
}

/* Tekstualne i finansijske klase boja */
.cf-text-income[b-pfpr290jpr] {
    color: #16a34a !important;
}

.cf-text-expense[b-pfpr290jpr] {
    color: #dc2626 !important;
}

.cf-text-expense-bold[b-pfpr290jpr] {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Validacija - Vizuelno označavanje nevalidnih kontrola (.cf-input-invalid)
   ========================================================================== */
.cf-input-invalid[b-pfpr290jpr],
select.cf-input-invalid[b-pfpr290jpr],
input.cf-input-invalid[b-pfpr290jpr] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

.cf-input-invalid:focus[b-pfpr290jpr],
select.cf-input-invalid:focus[b-pfpr290jpr],
input.cf-input-invalid:focus[b-pfpr290jpr] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

[b-pfpr290jpr] .cf-searchable-select.cf-input-invalid .cf-searchable-select-trigger,
.cf-searchable-select.cf-input-invalid .cf-searchable-select-trigger[b-pfpr290jpr] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}



/* _content/CashFlow.UI/Components/Pages/Home.razor.rz.scp.css */
.cf-home-container[b-ndbgorsqlp] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cf-hero-card[b-ndbgorsqlp] {
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 50%),
                var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-xl);
    box-shadow: var(--cf-shadow-md);
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cf-hero-content[b-ndbgorsqlp] {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cf-hero-title[b-ndbgorsqlp] {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.cf-hero-subtitle[b-ndbgorsqlp] {
    font-size: var(--cf-font-size-base);
    color: var(--cf-text-secondary);
    line-height: 1.6;
}

.cf-hero-actions[b-ndbgorsqlp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cf-grid-cards[b-ndbgorsqlp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.cf-feature-card[b-ndbgorsqlp] {
    transition: transform var(--cf-transition-fast), box-shadow var(--cf-transition-fast), border-color var(--cf-transition-fast);
}

.cf-feature-card:hover[b-ndbgorsqlp] {
    transform: translateY(-2px);
    box-shadow: var(--cf-shadow-lg);
    border-color: var(--cf-brand-primary);
}

.cf-feature-highlight[b-ndbgorsqlp] {
    border-color: #93c5fd;
    background: linear-gradient(to bottom right, #ffffff, #f8fafc);
}

.cf-feature-icon[b-ndbgorsqlp] {
    font-size: 1.5rem;
}

.cf-feature-desc[b-ndbgorsqlp] {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-text-secondary);
    margin-top: 0.5rem;
    line-height: 1.5;
}

.cf-feature-meta[b-ndbgorsqlp] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-meta-date[b-ndbgorsqlp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cf-text-muted, #64748b);
    background-color: #f1f5f9;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
}
/* _content/CashFlow.UI/Components/Pages/Organizations/Companies.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW COMPANIES & DEPARTMENTS - IZOLOVANI STILOVI (Companies.razor.css)
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-companies-container[b-7jgs9uzolq] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. GORNJE ZAGLAVLJE I GLAVNE AKCIJE
   -------------------------------------------------------------------------- */
.cf-companies-header[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-header-title-group[b-7jgs9uzolq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-7jgs9uzolq] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cf-title-icon[b-7jgs9uzolq] {
    font-size: 1.4rem;
    line-height: 1;
}

.cf-page-subtitle[b-7jgs9uzolq] {
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-muted);
    margin: 0;
}

.cf-header-actions[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   2. FILTERI I PRETRAGA
   -------------------------------------------------------------------------- */
.cf-filter-bar[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: var(--cf-bg-surface);
    padding: 0.85rem 1.15rem;
    border-radius: var(--cf-radius-lg);
    border: 1px solid var(--cf-border-color);
    box-shadow: var(--cf-shadow-sm);
}

.cf-search-box[b-7jgs9uzolq] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    max-width: 480px;
}

.cf-search-icon[b-7jgs9uzolq] {
    position: absolute;
    left: 0.85rem;
    color: var(--cf-text-muted);
    pointer-events: none;
    font-size: 0.95rem;
}

.cf-search-input[b-7jgs9uzolq] {
    padding-left: 2.35rem !important;
    padding-right: 2rem;
    height: 40px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-primary);
    width: 100%;
    transition: all var(--cf-transition-fast);
}

.cf-search-input:focus[b-7jgs9uzolq] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.cf-search-clear[b-7jgs9uzolq] {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--cf-radius-sm);
}

.cf-search-clear:hover[b-7jgs9uzolq] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-status-filter[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cf-filter-label[b-7jgs9uzolq] {
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-secondary);
    font-weight: 600;
}

.cf-status-select[b-7jgs9uzolq] {
    height: 40px;
    min-width: 170px;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    color: var(--cf-text-primary);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    font-weight: 500;
    padding: 0 0.85rem;
    cursor: pointer;
    transition: all var(--cf-transition-fast);
}

.cf-status-select:focus[b-7jgs9uzolq] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

/* --------------------------------------------------------------------------
   3. OBAVJEŠTENJA (ALERTS)
   -------------------------------------------------------------------------- */
.cf-alert[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    animation: cfFadeIn-b-7jgs9uzolq 0.25s ease-out;
}

.cf-alert-content[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cf-alert-icon[b-7jgs9uzolq] {
    font-size: 1.15rem;
    line-height: 1;
}

.cf-alert-close[b-7jgs9uzolq] {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.05rem;
    cursor: pointer;
    opacity: 0.75;
    padding: 0.15rem 0.4rem;
}

.cf-alert-close:hover[b-7jgs9uzolq] {
    opacity: 1;
}

.cf-alert-success[b-7jgs9uzolq] {
    background-color: var(--cf-color-success-bg, rgba(16, 185, 129, 0.12));
    border: 1px solid var(--cf-color-income-border, rgba(16, 185, 129, 0.3));
    color: var(--cf-color-success, #10b981);
}

.cf-alert-danger[b-7jgs9uzolq] {
    background-color: var(--cf-color-danger-bg, rgba(239, 68, 68, 0.12));
    border: 1px solid var(--cf-color-danger-border, rgba(239, 68, 68, 0.3));
    color: var(--cf-color-danger, #ef4444);
}

.cf-alert-warning[b-7jgs9uzolq] {
    background-color: var(--cf-color-warning-bg, rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

/* --------------------------------------------------------------------------
   4. STANJA UČITAVANJA I PRAZNOG PRIKAZA
   -------------------------------------------------------------------------- */
.cf-loading-state[b-7jgs9uzolq],
.cf-empty-state[b-7jgs9uzolq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    text-align: center;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    gap: 1rem;
    box-shadow: var(--cf-shadow-sm);
}

.cf-loading-text[b-7jgs9uzolq] {
    color: var(--cf-text-secondary);
    font-size: var(--cf-font-size-base, 1rem);
    margin: 0;
}

.cf-empty-icon[b-7jgs9uzolq] {
    font-size: 3.25rem;
    line-height: 1;
    opacity: 0.6;
}

.cf-empty-title[b-7jgs9uzolq] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-empty-text[b-7jgs9uzolq] {
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-muted);
    max-width: 460px;
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. TABELA I MASTER-DETAIL KARTICA
   -------------------------------------------------------------------------- */
.cf-table-card[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cf-table-wrapper[b-7jgs9uzolq] {
    overflow-x: auto;
    width: 100%;
}

.cf-table[b-7jgs9uzolq] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--cf-font-size-sm, 0.9375rem);
}

.cf-table thead th[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    color: #334155;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid var(--cf-border-color);
    white-space: nowrap;
}

[data-theme="dark"] .cf-table thead th[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-alt, #1a2234);
    color: #cbd5e1;
}

.cf-th-toggle[b-7jgs9uzolq] {
    width: 44px;
    padding-right: 0 !important;
}

.cf-table td[b-7jgs9uzolq] {
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid var(--cf-border-color-subtle, var(--cf-border-color));
    color: var(--cf-text-primary);
    vertical-align: middle;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    transition: background-color var(--cf-transition-fast);
}

.cf-company-row[b-7jgs9uzolq] {
    transition: background-color 0.15s ease;
}

.cf-company-row:hover td[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-hover);
}

.cf-row-inactive td[b-7jgs9uzolq] {
    opacity: 0.65;
}

.cf-row-expanded td[b-7jgs9uzolq] {
    background-color: rgba(59, 130, 246, 0.04);
}

.cf-td-toggle[b-7jgs9uzolq] {
    text-align: center;
    width: 44px;
}

.cf-btn-toggle-expand[b-7jgs9uzolq] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.35rem 0.55rem;
    border-radius: var(--cf-radius-sm);
    transition: all var(--cf-transition-fast);
}

.cf-btn-toggle-expand:hover[b-7jgs9uzolq],
.cf-btn-toggle-expand.cf-expanded[b-7jgs9uzolq] {
    color: var(--cf-brand-primary);
    background-color: var(--cf-brand-primary-light, rgba(59, 130, 246, 0.12));
}

/* Ćelija preduzeća */
.cf-company-cell[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cf-company-avatar[b-7jgs9uzolq] {
    width: 40px;
    height: 40px;
    border-radius: var(--cf-radius-md);
    background: var(--cf-brand-primary-light, rgba(59, 130, 246, 0.12));
    border: 1px solid rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cf-company-meta[b-7jgs9uzolq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cf-company-name[b-7jgs9uzolq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-company-address[b-7jgs9uzolq] {
    font-size: 0.825rem;
    color: var(--cf-text-muted);
}

/* Bedževi */
.cf-code-badge[b-7jgs9uzolq] {
    font-family: var(--cf-font-mono);
    background-color: var(--cf-bg-surface-alt);
    padding: 0.25rem 0.55rem;
    border-radius: var(--cf-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    border: 1px solid var(--cf-border-color);
}

.cf-currency-badge[b-7jgs9uzolq] {
    display: inline-block;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--cf-radius-sm);
    background-color: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .cf-currency-badge[b-7jgs9uzolq] {
    color: #a78bfa;
}

.cf-dept-count-badge[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--cf-text-secondary);
    cursor: pointer;
    transition: all var(--cf-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cf-dept-count-badge.cf-has-depts[b-7jgs9uzolq] {
    background-color: var(--cf-brand-primary-light, rgba(59, 130, 246, 0.1));
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--cf-brand-primary);
    font-weight: 600;
}

.cf-dept-count-badge:hover[b-7jgs9uzolq] {
    border-color: var(--cf-brand-primary);
    color: var(--cf-brand-primary);
}

.cf-badge[b-7jgs9uzolq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.cf-badge-sm[b-7jgs9uzolq] {
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
}

.cf-badge-success[b-7jgs9uzolq] {
    background-color: var(--cf-color-success-bg, rgba(16, 185, 129, 0.15));
    color: var(--cf-color-success, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cf-badge-danger[b-7jgs9uzolq] {
    background-color: var(--cf-color-danger-bg, rgba(239, 68, 68, 0.15));
    color: var(--cf-color-danger, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cf-status-dot[b-7jgs9uzolq] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.cf-status-dot-active[b-7jgs9uzolq] {
    background-color: var(--cf-color-income, #10b981);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.cf-status-dot-inactive[b-7jgs9uzolq] {
    background-color: var(--cf-color-danger, #ef4444);
}

.cf-text-secondary[b-7jgs9uzolq] {
    color: var(--cf-text-secondary);
}

.cf-text-right[b-7jgs9uzolq] {
    text-align: right;
}

/* Akcije u tabeli */
.cf-actions-group[b-7jgs9uzolq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cf-btn-icon[b-7jgs9uzolq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    color: var(--cf-text-primary);
    cursor: pointer;
    border-radius: var(--cf-radius-md);
    transition: all var(--cf-transition-fast);
    user-select: none;
}

.cf-btn-sm[b-7jgs9uzolq] {
    height: 34px;
    padding: 0 0.65rem;
    font-size: 0.875rem;
}

.cf-btn-icon.cf-btn-sm[b-7jgs9uzolq] {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0.9rem;
}

.cf-btn-xs[b-7jgs9uzolq] {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    padding: 0;
}

.cf-btn-icon:hover[b-7jgs9uzolq] {
    border-color: var(--cf-brand-primary);
    background-color: var(--cf-brand-primary-light, rgba(59, 130, 246, 0.12));
    color: var(--cf-brand-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.cf-btn-icon:active[b-7jgs9uzolq] {
    transform: translateY(0);
    box-shadow: none;
}

.cf-btn-add-dept:hover[b-7jgs9uzolq] {
    border-color: var(--cf-brand-primary);
    background-color: var(--cf-brand-primary-light, rgba(59, 130, 246, 0.16));
    color: var(--cf-brand-primary);
}

.cf-btn-danger-hover:hover[b-7jgs9uzolq] {
    border-color: var(--cf-color-danger) !important;
    background-color: var(--cf-color-danger-bg) !important;
    color: var(--cf-color-danger) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
}

.cf-btn-danger-hover:active[b-7jgs9uzolq] {
    transform: translateY(0);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. PODTABELA: ODJELJENJA (REDIZAJN PODSEKCIJE I DUGMETA)
   -------------------------------------------------------------------------- */
.cf-detail-row td[b-7jgs9uzolq] {
    padding: 0 !important;
    background-color: var(--cf-bg-surface-alt);
    border-bottom: 1px solid var(--cf-border-color);
}

.cf-departments-panel[b-7jgs9uzolq] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--cf-bg-surface-alt);
    border-left: 4px solid var(--cf-brand-primary);
    animation: cfSlideDown-b-7jgs9uzolq 0.2s ease-out;
}

.cf-dept-panel-header[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-left: 4px solid var(--cf-brand-primary);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-sm);
}

.cf-dept-title-group[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cf-dept-icon[b-7jgs9uzolq] {
    font-size: 1.25rem;
}

.cf-dept-title[b-7jgs9uzolq] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-dept-count-pill[b-7jgs9uzolq] {
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    color: var(--cf-text-secondary);
}

/* Specifično dugme + Novo odjeljenje */
.cf-btn-new-dept[b-7jgs9uzolq] {
    white-space: nowrap !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    background: var(--cf-brand-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--cf-radius-md);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    transition: all var(--cf-transition-fast);
}

.cf-btn-new-dept:hover[b-7jgs9uzolq] {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.35);
}

.cf-dept-loading[b-7jgs9uzolq],
.cf-dept-empty[b-7jgs9uzolq] {
    padding: 1.5rem;
    text-align: center;
    background-color: var(--cf-bg-surface);
    border: 1px dashed var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    color: var(--cf-text-secondary);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cf-dept-empty p[b-7jgs9uzolq] {
    margin: 0;
}

.cf-subtable-wrapper[b-7jgs9uzolq] {
    overflow-x: auto;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-sm);
}

.cf-subtable[b-7jgs9uzolq] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cf-font-size-sm, 0.9375rem);
}

.cf-subtable th[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-alt, #f1f5f9);
    color: #334155;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cf-border-color);
}

[data-theme="dark"] .cf-subtable th[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-alt, #1a2234);
    color: #cbd5e1;
}

.cf-subtable td[b-7jgs9uzolq] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cf-border-color-subtle, var(--cf-border-color));
    color: var(--cf-text-primary);
    font-size: 0.875rem;
}

.cf-subtable tr:last-child td[b-7jgs9uzolq] {
    border-bottom: none;
}

.cf-dept-code-badge[b-7jgs9uzolq] {
    font-family: var(--cf-font-mono);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--cf-brand-primary);
    background-color: var(--cf-brand-primary-light, rgba(59, 130, 246, 0.1));
    padding: 0.2rem 0.5rem;
    border-radius: var(--cf-radius-sm);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.cf-dept-name[b-7jgs9uzolq] {
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-dept-desc[b-7jgs9uzolq] {
    color: var(--cf-text-muted);
    font-size: 0.825rem;
}

/* Podnožje tabele */
.cf-table-footer[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    background-color: var(--cf-bg-surface-alt);
    border-top: 1px solid var(--cf-border-color);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-secondary);
}

/* --------------------------------------------------------------------------
   7. DUGMAD (BUTTONS)
   -------------------------------------------------------------------------- */
.cf-btn[b-7jgs9uzolq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--cf-transition-fast);
    text-decoration: none;
    box-sizing: border-box;
}

.cf-btn-primary[b-7jgs9uzolq] {
    background: var(--cf-brand-gradient);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.cf-btn-primary:hover:not(:disabled)[b-7jgs9uzolq] {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.35);
}

.cf-btn-secondary[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-alt);
    color: var(--cf-text-secondary);
    border: 1px solid var(--cf-border-color);
}

.cf-btn-secondary:hover:not(:disabled)[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface-hover);
    color: var(--cf-text-primary);
    border-color: var(--cf-border-color-focus);
}

.cf-btn-danger[b-7jgs9uzolq] {
    background-color: var(--cf-color-danger);
    color: #ffffff;
}

.cf-btn-danger:hover:not(:disabled)[b-7jgs9uzolq] {
    opacity: 0.92;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.cf-btn:disabled[b-7jgs9uzolq] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   8. MODALNI DIJALOZI
   -------------------------------------------------------------------------- */
.cf-modal-backdrop[b-7jgs9uzolq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cf-bg-overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: cfFadeIn-b-7jgs9uzolq 0.2s ease-out;
}

.cf-modal-dialog[b-7jgs9uzolq] {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--cf-shadow-xl);
    display: flex;
    flex-direction: column;
    animation: cfScaleUp-b-7jgs9uzolq 0.2s ease-out;
}

.cf-modal-dialog-sm[b-7jgs9uzolq] {
    max-width: 480px;
}

.cf-modal-header[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.4rem;
    border-bottom: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-surface-alt);
}

.cf-modal-header-danger[b-7jgs9uzolq] {
    border-bottom-color: rgba(239, 68, 68, 0.3);
    background-color: var(--cf-color-danger-bg);
}

.cf-modal-title-group[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cf-modal-icon[b-7jgs9uzolq] {
    font-size: 1.3rem;
    line-height: 1;
}

.cf-modal-title[b-7jgs9uzolq] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    margin: 0;
}

.cf-modal-subtitle[b-7jgs9uzolq] {
    font-size: 0.8125rem;
    color: var(--cf-text-muted);
    display: block;
    margin-top: 0.15rem;
}

.cf-modal-close[b-7jgs9uzolq] {
    background: transparent;
    border: none;
    color: var(--cf-text-muted);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--cf-radius-sm);
}

.cf-modal-close:hover[b-7jgs9uzolq] {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-surface-hover);
}

.cf-modal-body[b-7jgs9uzolq] {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--cf-bg-surface);
}

.cf-modal-footer[b-7jgs9uzolq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--cf-border-color);
    background-color: var(--cf-bg-surface-alt);
}

/* Forme i unosi unutar modala */
.cf-form-grid[b-7jgs9uzolq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cf-form-grid-single[b-7jgs9uzolq] {
    grid-template-columns: 1fr;
}

.cf-form-col-full[b-7jgs9uzolq] {
    grid-column: 1 / -1;
}

.cf-form-group[b-7jgs9uzolq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-label[b-7jgs9uzolq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cf-text-secondary);
}

.cf-label-required[b-7jgs9uzolq]::after {
    content: " *";
    color: var(--cf-color-danger);
}

.cf-input[b-7jgs9uzolq],
.cf-select[b-7jgs9uzolq],
.cf-textarea[b-7jgs9uzolq] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-md);
    color: var(--cf-text-primary);
    font-size: var(--cf-font-size-sm, 0.9375rem);
    box-sizing: border-box;
    transition: all var(--cf-transition-fast);
}

.cf-input:focus[b-7jgs9uzolq],
.cf-select:focus[b-7jgs9uzolq],
.cf-textarea:focus[b-7jgs9uzolq] {
    border-color: var(--cf-brand-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.cf-textarea[b-7jgs9uzolq] {
    resize: vertical;
    min-height: 75px;
}

.cf-val-msg[b-7jgs9uzolq] {
    color: var(--cf-color-danger);
    font-size: 0.8125rem;
    margin-top: 0.2rem;
}

.cf-checkbox-wrapper[b-7jgs9uzolq] {
    padding-top: 0.35rem;
}

.cf-checkbox-label[b-7jgs9uzolq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cf-font-size-sm, 0.9375rem);
    color: var(--cf-text-primary);
    cursor: pointer;
    user-select: none;
}

.cf-checkbox[b-7jgs9uzolq] {
    width: 17px;
    height: 17px;
    accent-color: var(--cf-brand-primary);
    cursor: pointer;
}

.cf-delete-message[b-7jgs9uzolq] {
    font-size: 1rem;
    color: var(--cf-text-primary);
    margin: 0;
    line-height: 1.5;
}

.cf-delete-hint[b-7jgs9uzolq] {
    font-size: 0.875rem;
    color: var(--cf-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Spinner animacija */
.cf-spinner[b-7jgs9uzolq] {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cfSpin-b-7jgs9uzolq 0.7s linear infinite;
}

.cf-spinner-sm[b-7jgs9uzolq] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.cf-spinner-lg[b-7jgs9uzolq] {
    width: 32px;
    height: 32px;
    border-width: 3px;
    border-top-color: var(--cf-brand-primary);
}

/* --------------------------------------------------------------------------
   9. ANIMACIJE I RESPONZIVNOST
   -------------------------------------------------------------------------- */
@keyframes cfFadeIn-b-7jgs9uzolq {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cfScaleUp-b-7jgs9uzolq {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cfSlideDown-b-7jgs9uzolq {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cfSpin-b-7jgs9uzolq {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .cf-filter-bar[b-7jgs9uzolq] {
        flex-direction: column;
        align-items: stretch;
    }

    .cf-search-box[b-7jgs9uzolq] {
        max-width: 100%;
        min-width: unset;
    }

    .cf-status-filter[b-7jgs9uzolq] {
        justify-content: space-between;
    }

    .cf-form-grid[b-7jgs9uzolq] {
        grid-template-columns: 1fr;
    }
}
/* _content/CashFlow.UI/Components/Pages/Reports/CashFlowReport.razor.rz.scp.css */
/* ==========================================================================
   CashFlow Report Page Styles (cf- prefiksirana pravila)
   ========================================================================== */

.cf-cashflow-page[b-steu4i6qte] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
}

/* ==========================================================================
   1. Gornje zaglavlje stranice
   ========================================================================== */
.cf-page-header[b-steu4i6qte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-page-title-group[b-steu4i6qte] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.cf-title-icon[b-steu4i6qte] {
    font-size: 1.5rem;
}

.cf-page-subtitle[b-steu4i6qte] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.cf-page-header-actions[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* ==========================================================================
   2. Filter kartica i brzi periodi
   ========================================================================== */
.cf-filter-card[b-steu4i6qte] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cf-filter-row[b-steu4i6qte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-quick-periods[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-filter-label[b-steu4i6qte] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cf-pill-group[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cf-pill-btn[b-steu4i6qte] {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cf-pill-btn:hover:not(:disabled)[b-steu4i6qte] {
    background-color: #e2e8f0;
    color: #0f172a;
}

.cf-pill-btn.cf-pill-active[b-steu4i6qte] {
    background-color: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    font-weight: 600;
}

.cf-pill-btn:disabled[b-steu4i6qte] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-date-range-form[b-steu4i6qte] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-date-field[b-steu4i6qte] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-field-label[b-steu4i6qte] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.cf-date-input[b-steu4i6qte] {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    color: #0f172a;
    background-color: #ffffff;
    min-width: 135px;
}

.cf-date-input:focus[b-steu4i6qte] {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.cf-filter-apply-btn[b-steu4i6qte] {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    height: 33px;
    align-self: flex-end;
}

.cf-filter-meta[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   3. KPI kartice
   ========================================================================== */
.cf-kpi-grid[b-steu4i6qte] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.cf-kpi-card[b-steu4i6qte] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.cf-kpi-card[b-steu4i6qte]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.cf-kpi-inflow[b-steu4i6qte]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.cf-kpi-outflow[b-steu4i6qte]::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.cf-kpi-net-positive[b-steu4i6qte]::before {
    background: linear-gradient(90deg, #0284c7, #0369a1);
}

.cf-kpi-net-negative[b-steu4i6qte]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.cf-kpi-header[b-steu4i6qte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cf-kpi-title[b-steu4i6qte] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cf-kpi-icon[b-steu4i6qte] {
    font-size: 1.25rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: #f8fafc;
}

.cf-kpi-icon-inflow[b-steu4i6qte] {
    background-color: #ecfdf5;
    color: #059669;
}

.cf-kpi-icon-outflow[b-steu4i6qte] {
    background-color: #fef2f2;
    color: #dc2626;
}

.cf-kpi-icon-net[b-steu4i6qte] {
    background-color: #f0f9ff;
    color: #0284c7;
}

.cf-kpi-value[b-steu4i6qte] {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: -0.02em;
}

.cf-kpi-footer[b-steu4i6qte] {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
}

.cf-net-status-badge[b-steu4i6qte] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cf-status-positive[b-steu4i6qte] {
    background-color: #ecfdf5;
    color: #047857;
}

.cf-status-negative[b-steu4i6qte] {
    background-color: #fef2f2;
    color: #b91c1c;
}

/* ==========================================================================
   4. Analitički 2-kolonski prikaz (Struktura priliva i rashoda)
   ========================================================================== */
.cf-analytics-grid[b-steu4i6qte] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1.25rem;
}

.cf-category-tree-card[b-steu4i6qte] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cf-tree-card-header[b-steu4i6qte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-tree-header-title[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-tree-header-icon[b-steu4i6qte] {
    font-size: 1.375rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

.cf-tree-title[b-steu4i6qte] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.cf-tree-subtitle[b-steu4i6qte] {
    font-size: 0.75rem;
    color: #64748b;
}

.cf-tree-header-total[b-steu4i6qte] {
    font-size: 1.125rem;
    font-weight: 700;
}

.cf-tree-body[b-steu4i6qte] {
    padding: 0.75rem 1rem;
}

/* Lista stabla kategorija */
.cf-category-list[b-steu4i6qte] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cf-category-group-item[b-steu4i6qte] {
    border: 1px solid #f1f5f9;
    border-radius: 0.5rem;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.cf-category-group-item:hover[b-steu4i6qte] {
    border-color: #cbd5e1;
}

.cf-group-header-row[b-steu4i6qte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    user-select: none;
    background-color: #ffffff;
    gap: 0.75rem;
}

.cf-group-header-row:hover[b-steu4i6qte] {
    background-color: #f8fafc;
}

.cf-group-name-col[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

.cf-expand-toggle-btn[b-steu4i6qte] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0;
}

.cf-expand-spacer[b-steu4i6qte] {
    width: 1.25rem;
    text-align: center;
    color: #94a3b8;
}

.cf-group-title[b-steu4i6qte] {
    font-weight: 600;
}

.cf-group-metrics-col[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-progress-bar-wrapper[b-steu4i6qte] {
    width: 80px;
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}

.cf-progress-bar[b-steu4i6qte] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.cf-bar-income[b-steu4i6qte] {
    background-color: #10b981;
}

.cf-bar-expense[b-steu4i6qte] {
    background-color: #ef4444;
}

.cf-percentage-label[b-steu4i6qte] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    min-width: 48px;
    text-align: right;
}

.cf-amount-label[b-steu4i6qte] {
    font-size: 0.875rem;
    font-weight: 700;
    min-width: 95px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Podkategorije (Subcategories) */
.cf-subcategories-container[b-steu4i6qte] {
    padding: 0.25rem 0.875rem 0.5rem 2.25rem;
    background-color: #fafaf9;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cf-subcategory-row[b-steu4i6qte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px dotted #f1f5f9;
}

.cf-subcategory-row:last-child[b-steu4i6qte] {
    border-bottom: none;
}

.cf-sub-name-col[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #475569;
    flex: 1;
}

.cf-sub-branch-icon[b-steu4i6qte] {
    color: #94a3b8;
    font-family: monospace;
}

.cf-sub-title[b-steu4i6qte] {
    font-weight: 500;
}

.cf-sub-metrics-col[b-steu4i6qte] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-sub-progress[b-steu4i6qte] {
    width: 60px;
    height: 4px;
}

.cf-bar-income-sub[b-steu4i6qte] {
    background-color: #34d399;
}

.cf-bar-expense-sub[b-steu4i6qte] {
    background-color: #f87171;
}

.cf-sub-pct[b-steu4i6qte] {
    font-size: 0.75rem;
    min-width: 44px;
}

.cf-sub-amount[b-steu4i6qte] {
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: 85px;
}

/* ==========================================================================
   5. Pomoćne klase, bedževi i loading
   ========================================================================== */
.cf-text-income[b-steu4i6qte] {
    color: #059669;
}

.cf-text-expense[b-steu4i6qte] {
    color: #dc2626;
}

.cf-badge[b-steu4i6qte] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
}

.cf-badge-neutral[b-steu4i6qte] {
    background-color: #f1f5f9;
    color: #334155;
}

.cf-badge-company[b-steu4i6qte] {
    background-color: #e0f2fe;
    color: #0369a1;
}

.cf-empty-state[b-steu4i6qte] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.cf-empty-icon[b-steu4i6qte] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.cf-empty-text[b-steu4i6qte] {
    font-size: 0.875rem;
    margin: 0;
}

.cf-loading-state[b-steu4i6qte] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.cf-spinner[b-steu4i6qte] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: cf-spin-b-steu4i6qte 0.8s linear infinite;
}

.cf-spinner-lg[b-steu4i6qte] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 4px;
}

@keyframes cf-spin-b-steu4i6qte {
    to {
        transform: rotate(360deg);
    }
}

.cf-loading-text[b-steu4i6qte] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ==========================================================================
   6. Dugmad i opšti elementi
   ========================================================================== */
.cf-btn[b-steu4i6qte] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.cf-btn-primary[b-steu4i6qte] {
    background-color: #0284c7;
    color: #ffffff;
}

.cf-btn-primary:hover:not(:disabled)[b-steu4i6qte] {
    background-color: #0369a1;
}

.cf-btn-secondary[b-steu4i6qte] {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

.cf-btn-secondary:hover:not(:disabled)[b-steu4i6qte] {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

.cf-btn:disabled[b-steu4i6qte] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-alert[b-steu4i6qte] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.cf-alert-danger[b-steu4i6qte] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cf-alert-icon[b-steu4i6qte] {
    font-size: 1.25rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .cf-analytics-grid[b-steu4i6qte] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   7. Pravila za optimizovanu štampu (Print Media)
   ========================================================================== */
@media print {
    .cf-page-header-actions[b-steu4i6qte],
    .cf-filter-card[b-steu4i6qte],
    .cf-btn[b-steu4i6qte],
    .cf-alert[b-steu4i6qte],
    .cf-expand-toggle-btn[b-steu4i6qte] {
        display: none !important;
    }

    .cf-cashflow-page[b-steu4i6qte] {
        gap: 0.75rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cf-page-header[b-steu4i6qte] {
        border-bottom: 2px solid #0f172a !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .cf-kpi-grid[b-steu4i6qte] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cf-kpi-card[b-steu4i6qte] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        padding: 0.75rem !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cf-kpi-value[b-steu4i6qte] {
        font-size: 1.25rem !important;
    }

    .cf-analytics-grid[b-steu4i6qte] {
        display: block !important;
    }

    .cf-category-tree-card[b-steu4i6qte] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 1rem !important;
    }

    .cf-tree-body[b-steu4i6qte] {
        padding: 0.5rem !important;
    }

    .cf-subcategories-container[b-steu4i6qte] {
        display: flex !important;
    }

    .cf-category-group-item[b-steu4i6qte] {
        border: 1px solid #e2e8f0 !important;
        margin-bottom: 0.25rem !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cf-progress-bar-wrapper[b-steu4i6qte],
    .cf-sub-progress[b-steu4i6qte] {
        display: none !important;
    }
}

/* _content/CashFlow.UI/Components/Pages/Reports/CollaboratorsReport.razor.rz.scp.css */
/* ==========================================================================
   Collaborators Report Page Styles (cf- prefiksirana pravila)
   ========================================================================== */

.cf-collaborators-page[b-e6ilebjtf4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
}

/* ==========================================================================
   1. Gornje zaglavlje stranice
   ========================================================================== */
.cf-page-header[b-e6ilebjtf4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-page-title-group[b-e6ilebjtf4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.cf-title-icon[b-e6ilebjtf4] {
    font-size: 1.5rem;
}

.cf-page-subtitle[b-e6ilebjtf4] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.cf-page-header-actions[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* ==========================================================================
   2. Filter kartica i brzi periodi
   ========================================================================== */
.cf-filter-card[b-e6ilebjtf4] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cf-filter-row[b-e6ilebjtf4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-quick-periods[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-filter-label[b-e6ilebjtf4] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cf-pill-group[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cf-pill-btn[b-e6ilebjtf4] {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cf-pill-btn:hover:not(:disabled)[b-e6ilebjtf4] {
    background-color: #e2e8f0;
    color: #0f172a;
}

.cf-pill-btn.cf-pill-active[b-e6ilebjtf4] {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
    font-weight: 600;
}

.cf-pill-btn:disabled[b-e6ilebjtf4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-filter-inputs-group[b-e6ilebjtf4] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-filter-field[b-e6ilebjtf4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-collaborator-select-field[b-e6ilebjtf4] {
    min-width: 220px;
    max-width: 320px;
    flex: 1;
}

.cf-date-range-form[b-e6ilebjtf4] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-date-field[b-e6ilebjtf4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-field-label[b-e6ilebjtf4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.cf-date-input[b-e6ilebjtf4] {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    color: #0f172a;
    background-color: #ffffff;
    min-width: 135px;
    height: 34px;
    box-sizing: border-box;
}

.cf-date-input:focus[b-e6ilebjtf4] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.cf-filter-apply-btn[b-e6ilebjtf4] {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    height: 34px;
    align-self: flex-end;
}

.cf-filter-meta[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   3. KPI kartice
   ========================================================================== */
.cf-kpi-grid[b-e6ilebjtf4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.cf-kpi-card[b-e6ilebjtf4] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.cf-kpi-card[b-e6ilebjtf4]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.cf-kpi-turnover[b-e6ilebjtf4]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.cf-kpi-commission[b-e6ilebjtf4]::before {
    background: linear-gradient(90deg, #6366f1, #4f46e5);
}

.cf-kpi-paid[b-e6ilebjtf4]::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.cf-kpi-due-pending[b-e6ilebjtf4]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.cf-kpi-due-settled[b-e6ilebjtf4]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.cf-kpi-header[b-e6ilebjtf4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cf-kpi-title[b-e6ilebjtf4] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cf-kpi-icon[b-e6ilebjtf4] {
    font-size: 1.25rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: #f8fafc;
}

.cf-kpi-icon-turnover[b-e6ilebjtf4] {
    background-color: #ecfdf5;
    color: #059669;
}

.cf-kpi-icon-commission[b-e6ilebjtf4] {
    background-color: #eef2ff;
    color: #4f46e5;
}

.cf-kpi-icon-paid[b-e6ilebjtf4] {
    background-color: #fef2f2;
    color: #dc2626;
}

.cf-kpi-icon-due[b-e6ilebjtf4] {
    background-color: #fffbeb;
    color: #d97706;
}

.cf-kpi-value[b-e6ilebjtf4] {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: -0.02em;
}

.cf-kpi-footer[b-e6ilebjtf4] {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
}

.cf-due-status-badge[b-e6ilebjtf4] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cf-status-pending[b-e6ilebjtf4] {
    background-color: #fef3c7;
    color: #92400e;
}

.cf-status-settled[b-e6ilebjtf4] {
    background-color: #ecfdf5;
    color: #047857;
}

/* ==========================================================================
   4. Tabelarni prikaz i Drill-Down hijerarhija
   ========================================================================== */
.cf-card[b-e6ilebjtf4] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.cf-card-header[b-e6ilebjtf4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-card-header-title[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-card-header-icon[b-e6ilebjtf4] {
    font-size: 1.375rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

.cf-card-title[b-e6ilebjtf4] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.cf-card-subtitle[b-e6ilebjtf4] {
    font-size: 0.75rem;
    color: #64748b;
}

.cf-card-body[b-e6ilebjtf4] {
    padding: 0;
}

.cf-table-wrapper[b-e6ilebjtf4] {
    overflow-x: auto;
    width: 100%;
}

.cf-table[b-e6ilebjtf4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.cf-table th[b-e6ilebjtf4] {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.cf-table td[b-e6ilebjtf4] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.cf-table-main-row[b-e6ilebjtf4] {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.cf-table-main-row:hover[b-e6ilebjtf4] {
    background-color: #f8fafc;
}

.cf-row-expanded[b-e6ilebjtf4] {
    background-color: #f5f7ff !important;
    border-left: 3px solid #4f46e5;
}

.cf-col-expand[b-e6ilebjtf4] {
    width: 36px;
    padding: 0.5rem 0.25rem 0.5rem 0.75rem !important;
}

.cf-expand-btn[b-e6ilebjtf4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cf-expand-btn:hover[b-e6ilebjtf4] {
    background-color: #4f46e5;
    color: #ffffff;
}

.cf-expand-btn-active[b-e6ilebjtf4] {
    background-color: #4f46e5;
    color: #ffffff;
}

/* Drill-Down ugniježđeni red */
.cf-drilldown-row[b-e6ilebjtf4] {
    background-color: #f8fafc;
}

.cf-drilldown-cell[b-e6ilebjtf4] {
    padding: 0.75rem 1.25rem 1.25rem 2rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.cf-drilldown-wrapper[b-e6ilebjtf4] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cf-drilldown-header[b-e6ilebjtf4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    background-color: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.cf-drilldown-title[b-e6ilebjtf4] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cf-drilldown-empty[b-e6ilebjtf4] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-style: italic;
}

.cf-drilldown-table-wrapper[b-e6ilebjtf4] {
    overflow-x: auto;
}

.cf-drilldown-table[b-e6ilebjtf4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cf-drilldown-table th[b-e6ilebjtf4] {
    background-color: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.cf-drilldown-table td[b-e6ilebjtf4] {
    padding: 0.4375rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.cf-drilldown-table tbody tr:hover[b-e6ilebjtf4] {
    background-color: #f8fafc;
}

.cf-drilldown-date[b-e6ilebjtf4] {
    font-size: 0.75rem;
    color: #64748b;
}

.cf-drilldown-order[b-e6ilebjtf4] {
    font-size: 0.75rem;
}

.cf-drilldown-cat[b-e6ilebjtf4] {
    font-weight: 500;
    color: #1e293b;
}

.cf-drilldown-desc[b-e6ilebjtf4] {
    font-size: 0.75rem;
    color: #64748b;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-order-badge[b-e6ilebjtf4] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.cf-table-total-row[b-e6ilebjtf4] {
    background-color: #eef2ff !important;
    border-top: 2px solid #cbd5e1;
    font-size: 0.9375rem;
}

.cf-table-total-row td[b-e6ilebjtf4] {
    padding: 0.875rem 1rem;
    border-bottom: none;
}

.cf-total-label[b-e6ilebjtf4] {
    color: #1e293b;
}

.cf-cell-main[b-e6ilebjtf4] {
    color: #0f172a;
}

.cf-cell-muted[b-e6ilebjtf4] {
    color: #64748b;
    font-size: 0.8125rem;
}

.cf-cell-number[b-e6ilebjtf4] {
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

.cf-pct-badge[b-e6ilebjtf4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #eef2ff;
    color: #4338ca;
}

/* ==========================================================================
   5. Pomoćne boje, stanja i bedževi
   ========================================================================== */
.cf-text-income[b-e6ilebjtf4] {
    color: #059669;
}

.cf-text-expense[b-e6ilebjtf4] {
    color: #dc2626;
}

.cf-text-indigo[b-e6ilebjtf4] {
    color: #4f46e5;
}

.cf-text-amber[b-e6ilebjtf4] {
    color: #d97706;
}

.cf-text-muted[b-e6ilebjtf4] {
    color: #64748b;
}

.cf-text-center[b-e6ilebjtf4] {
    text-align: center;
}

.cf-text-right[b-e6ilebjtf4] {
    text-align: right;
}

.cf-badge[b-e6ilebjtf4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
}

.cf-badge-neutral[b-e6ilebjtf4] {
    background-color: #f1f5f9;
    color: #334155;
}

.cf-badge-company[b-e6ilebjtf4] {
    background-color: #e0e7ff;
    color: #3730a3;
}

.cf-badge-filter[b-e6ilebjtf4] {
    background-color: #e0f2fe;
    color: #0369a1;
}

.cf-empty-state[b-e6ilebjtf4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.cf-empty-icon[b-e6ilebjtf4] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.cf-empty-text[b-e6ilebjtf4] {
    font-size: 0.875rem;
    margin: 0;
}

.cf-loading-state[b-e6ilebjtf4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.cf-spinner[b-e6ilebjtf4] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: cf-spin-b-e6ilebjtf4 0.8s linear infinite;
}

.cf-spinner-lg[b-e6ilebjtf4] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 4px;
}

@keyframes cf-spin-b-e6ilebjtf4 {
    to {
        transform: rotate(360deg);
    }
}

.cf-loading-text[b-e6ilebjtf4] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ==========================================================================
   6. Dugmad i opšti elementi
   ========================================================================== */
.cf-btn[b-e6ilebjtf4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.cf-btn-primary[b-e6ilebjtf4] {
    background-color: #4f46e5;
    color: #ffffff;
}

.cf-btn-primary:hover:not(:disabled)[b-e6ilebjtf4] {
    background-color: #4338ca;
}

.cf-btn-secondary[b-e6ilebjtf4] {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

.cf-btn-secondary:hover:not(:disabled)[b-e6ilebjtf4] {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

.cf-btn:disabled[b-e6ilebjtf4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-alert[b-e6ilebjtf4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.cf-alert-danger[b-e6ilebjtf4] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cf-alert-icon[b-e6ilebjtf4] {
    font-size: 1.25rem;
    line-height: 1;
}

/* ==========================================================================
   7. Pravila za optimizovanu štampu (Print Media)
   ========================================================================== */
@media print {
    .cf-page-header-actions[b-e6ilebjtf4],
    .cf-filter-card[b-e6ilebjtf4],
    .cf-btn[b-e6ilebjtf4],
    .cf-alert[b-e6ilebjtf4],
    .cf-col-expand[b-e6ilebjtf4] {
        display: none !important;
    }

    .cf-collaborators-page[b-e6ilebjtf4] {
        gap: 0.75rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cf-page-header[b-e6ilebjtf4] {
        border-bottom: 2px solid #0f172a !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .cf-kpi-grid[b-e6ilebjtf4] {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cf-kpi-card[b-e6ilebjtf4] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        padding: 0.75rem !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cf-kpi-value[b-e6ilebjtf4] {
        font-size: 1.125rem !important;
    }

    .cf-card[b-e6ilebjtf4] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cf-table th[b-e6ilebjtf4],
    .cf-table td[b-e6ilebjtf4] {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .cf-drilldown-row[b-e6ilebjtf4] {
        background-color: #ffffff !important;
    }

    .cf-drilldown-cell[b-e6ilebjtf4] {
        padding: 0.25rem 0.5rem 0.5rem 1rem !important;
    }

    .cf-drilldown-wrapper[b-e6ilebjtf4] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    .cf-drilldown-table th[b-e6ilebjtf4],
    .cf-drilldown-table td[b-e6ilebjtf4] {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
}
/* _content/CashFlow.UI/Components/Pages/Reports/DepartmentsReport.razor.rz.scp.css */
/* ==========================================================================
   Departments Report Page Styles (cf- prefiksirana pravila)
   ========================================================================== */

.cf-departments-page[b-n3de5u8ky1] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
}

/* ==========================================================================
   1. Gornje zaglavlje stranice
   ========================================================================== */
.cf-page-header[b-n3de5u8ky1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-page-title-group[b-n3de5u8ky1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-page-title[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.cf-title-icon[b-n3de5u8ky1] {
    font-size: 1.5rem;
}

.cf-page-subtitle[b-n3de5u8ky1] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.cf-page-header-actions[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* ==========================================================================
   2. Filter kartica i brzi periodi
   ========================================================================== */
.cf-filter-card[b-n3de5u8ky1] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cf-filter-row[b-n3de5u8ky1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cf-quick-periods[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-filter-label[b-n3de5u8ky1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cf-pill-group[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cf-pill-btn[b-n3de5u8ky1] {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cf-pill-btn:hover:not(:disabled)[b-n3de5u8ky1] {
    background-color: #e2e8f0;
    color: #0f172a;
}

.cf-pill-btn.cf-pill-active[b-n3de5u8ky1] {
    background-color: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    font-weight: 600;
}

.cf-pill-btn:disabled[b-n3de5u8ky1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-filter-inputs-group[b-n3de5u8ky1] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-filter-field[b-n3de5u8ky1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-department-select-field[b-n3de5u8ky1] {
    min-width: 220px;
    max-width: 320px;
    flex: 1;
}

.cf-date-range-form[b-n3de5u8ky1] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cf-date-field[b-n3de5u8ky1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cf-field-label[b-n3de5u8ky1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.cf-date-input[b-n3de5u8ky1] {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    color: #0f172a;
    background-color: #ffffff;
    min-width: 135px;
    height: 34px;
    box-sizing: border-box;
}

.cf-date-input:focus[b-n3de5u8ky1] {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

.cf-filter-apply-btn[b-n3de5u8ky1] {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    height: 34px;
    align-self: flex-end;
}

.cf-filter-meta[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   3. KPI kartice
   ========================================================================== */
.cf-kpi-grid[b-n3de5u8ky1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.cf-kpi-card[b-n3de5u8ky1] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.cf-kpi-card[b-n3de5u8ky1]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.cf-kpi-income[b-n3de5u8ky1]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.cf-kpi-expense[b-n3de5u8ky1]::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.cf-kpi-net-positive[b-n3de5u8ky1]::before {
    background: linear-gradient(90deg, #0d9488, #0f766e);
}

.cf-kpi-net-negative[b-n3de5u8ky1]::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.cf-kpi-header[b-n3de5u8ky1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cf-kpi-title[b-n3de5u8ky1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cf-kpi-icon[b-n3de5u8ky1] {
    font-size: 1.25rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: #f8fafc;
}

.cf-kpi-icon-income[b-n3de5u8ky1] {
    background-color: #ecfdf5;
    color: #059669;
}

.cf-kpi-icon-expense[b-n3de5u8ky1] {
    background-color: #fef2f2;
    color: #dc2626;
}

.cf-kpi-icon-net[b-n3de5u8ky1] {
    background-color: #f0fdfa;
    color: #0f766e;
}

.cf-kpi-value[b-n3de5u8ky1] {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: -0.02em;
}

.cf-kpi-footer[b-n3de5u8ky1] {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
}

.cf-net-status-badge[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cf-status-positive[b-n3de5u8ky1] {
    background-color: #f0fdfa;
    color: #0f766e;
}

.cf-status-negative[b-n3de5u8ky1] {
    background-color: #fef2f2;
    color: #991b1b;
}

/* ==========================================================================
   4. Tabelarni prikaz i Drill-Down hijerarhija
   ========================================================================== */
.cf-card[b-n3de5u8ky1] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.cf-card-header[b-n3de5u8ky1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cf-card-header-title[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-card-header-icon[b-n3de5u8ky1] {
    font-size: 1.375rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

.cf-card-title[b-n3de5u8ky1] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.cf-card-subtitle[b-n3de5u8ky1] {
    font-size: 0.75rem;
    color: #64748b;
}

.cf-card-body[b-n3de5u8ky1] {
    padding: 0;
}

.cf-table-wrapper[b-n3de5u8ky1] {
    overflow-x: auto;
    width: 100%;
}

.cf-table[b-n3de5u8ky1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.cf-table th[b-n3de5u8ky1] {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.cf-table td[b-n3de5u8ky1] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.cf-table-main-row[b-n3de5u8ky1] {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.cf-table-main-row:hover[b-n3de5u8ky1] {
    background-color: #f8fafc;
}

.cf-row-expanded[b-n3de5u8ky1] {
    background-color: #f0fdfa !important;
    border-left: 3px solid #0f766e;
}

.cf-col-expand[b-n3de5u8ky1] {
    width: 36px;
    padding: 0.5rem 0.25rem 0.5rem 0.75rem !important;
}

.cf-expand-btn[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cf-expand-btn:hover[b-n3de5u8ky1] {
    background-color: #0f766e;
    color: #ffffff;
}

.cf-expand-btn-active[b-n3de5u8ky1] {
    background-color: #0f766e;
    color: #ffffff;
}

/* Drill-Down ugniježđeni red */
.cf-drilldown-row[b-n3de5u8ky1] {
    background-color: #f8fafc;
}

.cf-drilldown-cell[b-n3de5u8ky1] {
    padding: 0.75rem 1.25rem 1.25rem 2rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.cf-drilldown-wrapper[b-n3de5u8ky1] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cf-drilldown-header[b-n3de5u8ky1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    background-color: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.cf-drilldown-title[b-n3de5u8ky1] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cf-drilldown-empty[b-n3de5u8ky1] {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-style: italic;
}

.cf-drilldown-table-wrapper[b-n3de5u8ky1] {
    overflow-x: auto;
}

.cf-drilldown-table[b-n3de5u8ky1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cf-drilldown-table th[b-n3de5u8ky1] {
    background-color: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.cf-drilldown-table td[b-n3de5u8ky1] {
    padding: 0.4375rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.cf-drilldown-table tbody tr:hover[b-n3de5u8ky1] {
    background-color: #f8fafc;
}

.cf-drilldown-date[b-n3de5u8ky1] {
    font-size: 0.75rem;
    color: #64748b;
}

.cf-drilldown-order[b-n3de5u8ky1] {
    font-size: 0.75rem;
}

.cf-drilldown-cat[b-n3de5u8ky1] {
    font-weight: 500;
    color: #1e293b;
}

.cf-drilldown-desc[b-n3de5u8ky1] {
    font-size: 0.75rem;
    color: #64748b;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-order-badge[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.cf-table-total-row[b-n3de5u8ky1] {
    background-color: #f0fdfa !important;
    border-top: 2px solid #cbd5e1;
    font-size: 0.9375rem;
}

.cf-table-total-row td[b-n3de5u8ky1] {
    padding: 0.875rem 1rem;
    border-bottom: none;
}

.cf-total-label[b-n3de5u8ky1] {
    color: #1e293b;
}

.cf-cell-main[b-n3de5u8ky1] {
    color: #0f172a;
}

.cf-cell-muted[b-n3de5u8ky1] {
    color: #64748b;
    font-size: 0.8125rem;
}

.cf-cell-number[b-n3de5u8ky1] {
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

.cf-code-badge[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.cf-margin-badge[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cf-margin-pos[b-n3de5u8ky1] {
    background-color: #f0fdfa;
    color: #0f766e;
    border: 1px solid #ccfbf1;
}

.cf-margin-neg[b-n3de5u8ky1] {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fee2e2;
}

/* ==========================================================================
   5. Pomoćne boje, stanja i bedževi
   ========================================================================== */
.cf-text-income[b-n3de5u8ky1] {
    color: #059669;
}

.cf-text-expense[b-n3de5u8ky1] {
    color: #dc2626;
}

.cf-text-center[b-n3de5u8ky1] {
    text-align: center;
}

.cf-text-right[b-n3de5u8ky1] {
    text-align: right;
}

.cf-badge[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
}

.cf-badge-neutral[b-n3de5u8ky1] {
    background-color: #f1f5f9;
    color: #334155;
}

.cf-badge-company[b-n3de5u8ky1] {
    background-color: #ccfbf1;
    color: #115e59;
}

.cf-badge-filter[b-n3de5u8ky1] {
    background-color: #e0f2fe;
    color: #0369a1;
}

.cf-empty-state[b-n3de5u8ky1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.cf-empty-icon[b-n3de5u8ky1] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.cf-empty-text[b-n3de5u8ky1] {
    font-size: 0.875rem;
    margin: 0;
}

.cf-loading-state[b-n3de5u8ky1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.cf-spinner[b-n3de5u8ky1] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e2e8f0;
    border-top-color: #0f766e;
    border-radius: 50%;
    animation: cf-spin-b-n3de5u8ky1 0.8s linear infinite;
}

.cf-spinner-lg[b-n3de5u8ky1] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 4px;
}

@keyframes cf-spin-b-n3de5u8ky1 {
    to {
        transform: rotate(360deg);
    }
}

.cf-loading-text[b-n3de5u8ky1] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ==========================================================================
   6. Dugmad i opšti elementi
   ========================================================================== */
.cf-btn[b-n3de5u8ky1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.cf-btn-primary[b-n3de5u8ky1] {
    background-color: #0f766e;
    color: #ffffff;
}

.cf-btn-primary:hover:not(:disabled)[b-n3de5u8ky1] {
    background-color: #115e59;
}

.cf-btn-secondary[b-n3de5u8ky1] {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

.cf-btn-secondary:hover:not(:disabled)[b-n3de5u8ky1] {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

.cf-btn:disabled[b-n3de5u8ky1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cf-alert[b-n3de5u8ky1] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.cf-alert-danger[b-n3de5u8ky1] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.cf-alert-icon[b-n3de5u8ky1] {
    font-size: 1.25rem;
    line-height: 1;
}

/* ==========================================================================
   7. Pravila za optimizovanu štampu (Print Media)
   ========================================================================== */
@media print {
    .cf-page-header-actions[b-n3de5u8ky1],
    .cf-filter-card[b-n3de5u8ky1],
    .cf-btn[b-n3de5u8ky1],
    .cf-alert[b-n3de5u8ky1],
    .cf-col-expand[b-n3de5u8ky1] {
        display: none !important;
    }

    .cf-departments-page[b-n3de5u8ky1] {
        gap: 0.75rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cf-page-header[b-n3de5u8ky1] {
        border-bottom: 2px solid #0f172a !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .cf-kpi-grid[b-n3de5u8ky1] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cf-kpi-card[b-n3de5u8ky1] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        padding: 0.75rem !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cf-kpi-value[b-n3de5u8ky1] {
        font-size: 1.125rem !important;
    }

    .cf-card[b-n3de5u8ky1] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cf-table th[b-n3de5u8ky1],
    .cf-table td[b-n3de5u8ky1] {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .cf-drilldown-row[b-n3de5u8ky1] {
        background-color: #ffffff !important;
    }

    .cf-drilldown-cell[b-n3de5u8ky1] {
        padding: 0.25rem 0.5rem 0.5rem 1rem !important;
    }

    .cf-drilldown-wrapper[b-n3de5u8ky1] {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    .cf-drilldown-table th[b-n3de5u8ky1],
    .cf-drilldown-table td[b-n3de5u8ky1] {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
}
/* _content/CashFlow.UI/Components/Shared/FooterStatusBar.razor.rz.scp.css */
.cf-statusbar-content[b-hmivsibcw1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.cf-statusbar-left[b-hmivsibcw1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-statusbar-right[b-hmivsibcw1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-statusbar-item[b-hmivsibcw1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cf-status-dot[b-hmivsibcw1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--cf-color-success);
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.7);
}

.cf-statusbar-sep[b-hmivsibcw1] {
    color: var(--cf-border-color);
    font-size: 0.75rem;
}
/* _content/CashFlow.UI/Components/Shared/InfoPanel.razor.rz.scp.css */
/* ==========================================================================
   🏛️ CASHFLOW INFOPANEL - IZOLOVANI STILOVI (InfoPanel.razor.css)
   Clean Architecture V1.3 & Konstitucija - Pure CSS sa prefiksom cf-
   ========================================================================== */

.cf-infopanel-container[b-zl88xnctcn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    user-select: none;
    background-color: var(--cf-bg-surface);
}

/* --------------------------------------------------------------------------
   ZAGLAVLJE PANELA (FINANSIJSKI PREGLED + TOGGLE DUGME)
   -------------------------------------------------------------------------- */
.cf-infopanel-header[b-zl88xnctcn] {
    height: 48px;
    border-bottom: 1px solid var(--cf-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    flex-shrink: 0;
    overflow: hidden;
}

.cf-infopanel-title[b-zl88xnctcn] {
    font-size: 0.90rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-infopanel-rail-toggle[b-zl88xnctcn] {
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
    border-radius: var(--cf-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.cf-rail-icon[b-zl88xnctcn] {
    line-height: 1;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   SKLOPLJENI (RAIL) REŽIM - VERTIKALNA MINI-TRAKA
   -------------------------------------------------------------------------- */
.cf-infopanel-rail-bar[b-zl88xnctcn] {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    width: 100%;
    overflow: hidden;
}

.cf-infopanel-rail-item[b-zl88xnctcn] {
    width: 36px;
    height: 36px;
    border-radius: var(--cf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    transition: all var(--cf-transition-fast);
}

.cf-infopanel-rail-item:hover[b-zl88xnctcn] {
    background-color: var(--cf-bg-surface-hover);
    border-color: var(--cf-brand-primary);
    transform: translateY(-1px);
}

.cf-infopanel-rail-icon[b-zl88xnctcn] {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   PROŠIRENI REŽIM - TIJELO PANELA I KARTICE
   -------------------------------------------------------------------------- */
.cf-infopanel-body[b-zl88xnctcn] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cf-metric-card[b-zl88xnctcn] {
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    border-radius: var(--cf-radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--cf-shadow-xs);
}

.cf-metric-header[b-zl88xnctcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cf-metric-label[b-zl88xnctcn] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cf-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cf-metric-icon[b-zl88xnctcn] {
    font-size: 1.15rem;
}

.cf-metric-value[b-zl88xnctcn] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cf-text-primary);
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.cf-metric-currency[b-zl88xnctcn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cf-text-secondary);
}

.cf-metric-subtext[b-zl88xnctcn] {
    display: flex;
    align-items: center;
}

.cf-metric-group[b-zl88xnctcn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cf-metric-mini-card[b-zl88xnctcn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--cf-radius-md);
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
}

.cf-mini-icon[b-zl88xnctcn] {
    font-size: 1.15rem;
}

.cf-mini-info[b-zl88xnctcn] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cf-mini-label[b-zl88xnctcn] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
}

.cf-mini-val[b-zl88xnctcn] {
    font-size: var(--cf-font-size-sm);
    font-weight: 600;
}

.cf-info-section[b-zl88xnctcn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cf-section-title[b-zl88xnctcn] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cf-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cf-status-list[b-zl88xnctcn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cf-status-row[b-zl88xnctcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    font-size: var(--cf-font-size-xs);
    border-radius: var(--cf-radius-sm);
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
}

.cf-status-name[b-zl88xnctcn] {
    flex: 1;
    margin-left: 0.5rem;
    color: var(--cf-text-secondary);
}

.cf-status-indicator[b-zl88xnctcn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cf-status-online[b-zl88xnctcn] {
    background-color: var(--cf-color-success);
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.6);
}

/* --------------------------------------------------------------------------
   SKLAPANJE / RAIL REŽIM (Kada je desni panel sklopljen)
   -------------------------------------------------------------------------- */
:global(body.cf-infopanel-collapsed) .cf-infopanel-container[b-zl88xnctcn],
:global(.cf-infopanel-collapsed) .cf-infopanel-container[b-zl88xnctcn] {
    overflow: hidden;
}

:global(body.cf-infopanel-collapsed) .cf-infopanel-title[b-zl88xnctcn],
:global(.cf-infopanel-collapsed) .cf-infopanel-title[b-zl88xnctcn],
:global(body.cf-infopanel-collapsed) .cf-infopanel-body[b-zl88xnctcn],
:global(.cf-infopanel-collapsed) .cf-infopanel-body[b-zl88xnctcn] {
    display: none !important;
}

:global(body.cf-infopanel-collapsed) .cf-infopanel-header[b-zl88xnctcn],
:global(.cf-infopanel-collapsed) .cf-infopanel-header[b-zl88xnctcn] {
    justify-content: center;
    padding: 0;
}

:global(body.cf-infopanel-collapsed) .cf-infopanel-rail-toggle[b-zl88xnctcn],
:global(.cf-infopanel-collapsed) .cf-infopanel-rail-toggle[b-zl88xnctcn] {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

:global(body.cf-infopanel-collapsed) .cf-infopanel-rail-bar[b-zl88xnctcn],
:global(.cf-infopanel-collapsed) .cf-infopanel-rail-bar[b-zl88xnctcn] {
    display: flex !important;
}

/* Podrška za Container Query ako je širina manja od 80px */
@container (max-width: 80px) {
    .cf-infopanel-title[b-zl88xnctcn],
    .cf-infopanel-body[b-zl88xnctcn] {
        display: none !important;
    }

    .cf-infopanel-header[b-zl88xnctcn] {
        justify-content: center;
        padding: 0;
    }

    .cf-infopanel-rail-toggle[b-zl88xnctcn] {
        width: 38px;
        height: 38px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cf-infopanel-rail-bar[b-zl88xnctcn] {
        display: flex !important;
    }
}

/* _content/CashFlow.UI/Components/Shared/MultiSelectDropdown.razor.rz.scp.css */
/* ==========================================================================
   MultiSelectDropdown Component Styles (cf- prefiksirana pravila)
   ========================================================================== */

.cf-multiselect[b-8es5rm6zph] {
    position: relative;
    width: 100%;
    min-width: 180px;
    font-family: inherit;
}

/* 1. Kontrolno polje (Trigger) */
.cf-multiselect-trigger[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    min-height: 34px;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cf-multiselect-trigger:hover:not(.cf-multiselect-disabled)[b-8es5rm6zph] {
    border-color: #94a3b8;
}

.cf-multiselect-trigger:focus-visible[b-8es5rm6zph] {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.cf-multiselect-open .cf-multiselect-trigger[b-8es5rm6zph] {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.cf-multiselect-disabled .cf-multiselect-trigger[b-8es5rm6zph] {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

.cf-multiselect-label[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 0.5rem;
}

.cf-multiselect-text[b-8es5rm6zph] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.cf-multiselect-count-badge[b-8es5rm6zph] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #eef2ff;
    color: #4f46e5;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    border: 1px solid #c7d2fe;
}

.cf-multiselect-actions[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.cf-multiselect-clear-btn[b-8es5rm6zph] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    font-size: 0.6875rem;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.cf-multiselect-clear-btn:hover[b-8es5rm6zph] {
    background-color: #f1f5f9;
    color: #ef4444;
}

.cf-multiselect-arrow[b-8es5rm6zph] {
    font-size: 0.625rem;
    color: #64748b;
    pointer-events: none;
}

/* 2. Pozadinska maska (Backdrop) */
.cf-multiselect-backdrop[b-8es5rm6zph] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: transparent;
}

/* 3. Padajući meni (Panel) */
.cf-multiselect-panel[b-8es5rm6zph] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 260px;
    max-width: 360px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cf-dropdown-fade-b-8es5rm6zph 0.15s ease-out;
}

@keyframes cf-dropdown-fade-b-8es5rm6zph {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Pretraga unutar padajućeg menija */
.cf-multiselect-search-box[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid #f1f5f9;
    background-color: #f8fafc;
}

.cf-multiselect-search-icon[b-8es5rm6zph] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.cf-multiselect-search-input[b-8es5rm6zph] {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: #0f172a;
    background-color: #ffffff;
    outline: none;
}

.cf-multiselect-search-input:focus[b-8es5rm6zph] {
    border-color: #4f46e5;
}

.cf-multiselect-search-clear[b-8es5rm6zph] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.125rem 0.25rem;
}

.cf-multiselect-search-clear:hover[b-8es5rm6zph] {
    color: #475569;
}

/* 5. Brze akcije */
.cf-multiselect-quick-actions[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.6875rem;
}

.cf-multiselect-action-btn[b-8es5rm6zph] {
    background: transparent;
    border: none;
    color: #4f46e5;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

.cf-multiselect-action-btn:hover[b-8es5rm6zph] {
    text-decoration: underline;
}

.cf-multiselect-action-sep[b-8es5rm6zph] {
    color: #cbd5e1;
}

/* 6. Lista stavki */
.cf-multiselect-list[b-8es5rm6zph] {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cf-multiselect-item[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease-in-out;
}

.cf-multiselect-item:hover[b-8es5rm6zph] {
    background-color: #f1f5f9;
}

.cf-multiselect-item.cf-item-checked[b-8es5rm6zph] {
    background-color: #f0fdf4;
    color: #0f172a;
}

.cf-multiselect-checkbox[b-8es5rm6zph] {
    width: 0.875rem;
    height: 0.875rem;
    accent-color: #4f46e5;
    cursor: pointer;
    flex-shrink: 0;
}

.cf-multiselect-item-info[b-8es5rm6zph] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.cf-multiselect-item-text[b-8es5rm6zph] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-multiselect-item-subtext[b-8es5rm6zph] {
    font-size: 0.6875rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-multiselect-item-badge[b-8es5rm6zph] {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background-color: #e2e8f0;
    color: #475569;
    font-weight: 600;
    flex-shrink: 0;
}

.cf-multiselect-no-results[b-8es5rm6zph] {
    padding: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* 7. Podnožje menija */
.cf-multiselect-footer[b-8es5rm6zph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.625rem;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.cf-multiselect-selected-summary[b-8es5rm6zph] {
    font-size: 0.6875rem;
    color: #64748b;
}

.cf-btn-sm[b-8es5rm6zph] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}
/* _content/CashFlow.UI/Components/Shared/SearchableSelect.razor.rz.scp.css */
.cf-searchable-select[b-64egp7hi58] {
    position: relative;
    width: 100%;
    font-size: 0.8125rem;
    box-sizing: border-box;
}

.cf-searchable-select-trigger[b-64egp7hi58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.cf-searchable-select-trigger:hover:not(.cf-select-disabled)[b-64egp7hi58] {
    border-color: #94a3b8;
}

.cf-searchable-select-trigger:focus-visible[b-64egp7hi58] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cf-select-open .cf-searchable-select-trigger[b-64egp7hi58] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cf-select-disabled .cf-searchable-select-trigger[b-64egp7hi58] {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.75;
}

.cf-searchable-select-label[b-64egp7hi58] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.cf-selected-text[b-64egp7hi58] {
    color: #0f172a;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-selected-subtext[b-64egp7hi58] {
    color: #64748b;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-placeholder-text[b-64egp7hi58] {
    color: #94a3b8;
}

.cf-searchable-select-actions[b-64egp7hi58] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.cf-clear-btn[b-64egp7hi58] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 0.15rem;
    line-height: 1;
}

.cf-clear-btn:hover[b-64egp7hi58] {
    color: #ef4444;
}

.cf-select-arrow[b-64egp7hi58] {
    font-size: 0.625rem;
    color: #64748b;
    line-height: 1;
}

.cf-searchable-select-backdrop[b-64egp7hi58] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: transparent;
}

.cf-searchable-select-dropdown[b-64egp7hi58] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    width: max-content;
    max-width: 360px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cf-dropdown-fade-b-64egp7hi58 0.15s ease-out;
}

@keyframes cf-dropdown-fade-b-64egp7hi58 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cf-searchable-select-search-box[b-64egp7hi58] {
    position: relative;
    padding: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.cf-searchable-select-search-input[b-64egp7hi58] {
    width: 100%;
    height: 1.875rem;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    outline: none;
    box-sizing: border-box;
}

.cf-searchable-select-search-input:focus[b-64egp7hi58] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cf-search-clear-btn[b-64egp7hi58] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
}

.cf-search-clear-btn:hover[b-64egp7hi58] {
    color: #0f172a;
}

.cf-searchable-select-list[b-64egp7hi58] {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cf-searchable-select-item[b-64egp7hi58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.cf-searchable-select-item:hover[b-64egp7hi58] {
    background-color: #f1f5f9;
}

.cf-item-selected[b-64egp7hi58] {
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.cf-item-empty[b-64egp7hi58] {
    color: #64748b;
    font-style: italic;
    border-bottom: 1px dashed #e2e8f0;
    margin-bottom: 0.25rem;
    padding-bottom: 0.375rem;
}

.cf-item-content[b-64egp7hi58] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow: hidden;
}

.cf-item-text[b-64egp7hi58] {
    font-size: 0.8125rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-item-selected .cf-item-text[b-64egp7hi58] {
    color: #1d4ed8;
}

.cf-item-subtext[b-64egp7hi58] {
    font-size: 0.6875rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-item-badge[b-64egp7hi58] {
    font-size: 0.6875rem;
    padding: 0.1rem 0.375rem;
    border-radius: 0.25rem;
    background-color: #e2e8f0;
    color: #475569;
    flex-shrink: 0;
}

.cf-item-check[b-64egp7hi58] {
    font-size: 0.75rem;
    color: #2563eb;
    font-weight: bold;
    flex-shrink: 0;
}

.cf-searchable-select-no-results[b-64egp7hi58] {
    padding: 1rem 0.75rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Validacija - Neispravno polje */
.cf-searchable-select.cf-input-invalid .cf-searchable-select-trigger[b-64egp7hi58] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

/* _content/CashFlow.UI/Components/Shared/TagMultiSelect.razor.rz.scp.css */
.cf-tag-multi-select[b-r1nszw4nlv] {
    position: relative;
    width: 100%;
    font-size: 0.8125rem;
    box-sizing: border-box;
}

.cf-tag-display[b-r1nszw4nlv] {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.4rem;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.cf-tag-display:hover:not(.cf-tag-disabled)[b-r1nszw4nlv] {
    border-color: #94a3b8;
}

.cf-tag-display:focus-visible[b-r1nszw4nlv] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cf-tag-open .cf-tag-display[b-r1nszw4nlv] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cf-tag-disabled .cf-tag-display[b-r1nszw4nlv] {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    cursor: default;
}

.cf-tag-placeholder[b-r1nszw4nlv] {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

.cf-tag-badges-list[b-r1nszw4nlv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.cf-badge-tag[b-r1nszw4nlv] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    line-height: 1.2;
}

.cf-badge-tag-name[b-r1nszw4nlv] {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-badge-tag-remove[b-r1nszw4nlv] {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.625rem;
    padding: 0;
    line-height: 1;
}

.cf-badge-tag-remove:hover[b-r1nszw4nlv] {
    opacity: 1;
}

.cf-tag-backdrop[b-r1nszw4nlv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: transparent;
}

.cf-tag-dropdown[b-r1nszw4nlv] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    width: max-content;
    max-width: 300px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cf-dropdown-fade-b-r1nszw4nlv 0.15s ease-out;
}

@keyframes cf-dropdown-fade-b-r1nszw4nlv {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cf-tag-search-box[b-r1nszw4nlv] {
    padding: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.cf-tag-search-input[b-r1nszw4nlv] {
    width: 100%;
    height: 1.875rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    outline: none;
    box-sizing: border-box;
}

.cf-tag-search-input:focus[b-r1nszw4nlv] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cf-tag-list[b-r1nszw4nlv] {
    max-height: 180px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cf-tag-item[b-r1nszw4nlv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
    user-select: none;
}

.cf-tag-item:hover[b-r1nszw4nlv] {
    background-color: #f1f5f9;
}

.cf-tag-item-checked[b-r1nszw4nlv] {
    background-color: #eff6ff;
}

.cf-tag-checkbox[b-r1nszw4nlv] {
    cursor: pointer;
    margin: 0;
}

.cf-tag-color-indicator[b-r1nszw4nlv] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.cf-tag-name[b-r1nszw4nlv] {
    font-size: 0.8125rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-tag-dropdown-footer[b-r1nszw4nlv] {
    display: flex;
    justify-content: flex-end;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.cf-tag-no-results[b-r1nszw4nlv] {
    padding: 1rem 0.75rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
}
/* _content/CashFlow.UI/Components/Shared/TopBar.razor.rz.scp.css */
.cf-topbar-wrapper[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.cf-topbar-brand[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-topbar-logo[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.cf-topbar-logo-icon[b-21kvb2ovqu] {
    font-size: 1.35rem;
    line-height: 1;
}

.cf-topbar-logo-title[b-21kvb2ovqu] {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--cf-text-primary);
}

.cf-text-gradient[b-21kvb2ovqu] {
    background: var(--cf-brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cf-topbar-badge[b-21kvb2ovqu] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.4rem;
    border-radius: var(--cf-radius-sm);
    background-color: var(--cf-brand-primary-light);
    color: var(--cf-brand-primary);
    border: 1px solid var(--cf-border-color);
}

[data-theme="dark"] .cf-topbar-badge[b-21kvb2ovqu] {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--cf-brand-accent);
}

.cf-topbar-actions[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.cf-theme-toggle[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--cf-font-size-xs);
    border-radius: var(--cf-radius-md);
    background-color: var(--cf-bg-surface-alt);
    border: 1px solid var(--cf-border-color);
    color: var(--cf-text-secondary);
}

.cf-theme-toggle:hover[b-21kvb2ovqu] {
    color: var(--cf-text-primary);
    border-color: var(--cf-border-color-focus);
}

.cf-topbar-divider[b-21kvb2ovqu] {
    width: 1px;
    height: 24px;
    background-color: var(--cf-border-color);
}

.cf-user-profile[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cf-user-avatar[b-21kvb2ovqu] {
    width: 32px;
    height: 32px;
    border-radius: var(--cf-radius-full);
    background: var(--cf-brand-gradient);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.cf-user-info[b-21kvb2ovqu] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cf-user-name[b-21kvb2ovqu] {
    font-size: var(--cf-font-size-sm);
    font-weight: 600;
    color: var(--cf-text-primary);
}

.cf-user-role[b-21kvb2ovqu] {
    font-size: var(--cf-font-size-xs);
    color: var(--cf-text-muted);
}

.cf-btn-logout[b-21kvb2ovqu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}