:root {
    font-size: 90%;
}

.mud-input {
    font-size: 0.95rem;
}

.mud-table-cell {
    padding-bottom: 4px;
    padding-top: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

/* Responsive table card formatting for compact multi-data rows */
.mud-table-responsive {
    overflow-x: hidden !important;
}

.mud-table-responsive .mud-table-container {
    overflow-x: hidden !important;
}

.mud-table-responsive .mud-table-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.mud-table-responsive .mud-table-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    background-color: #ffffff;
}

.mud-table-responsive .mud-table-row:nth-child(even) {
    background-color: #f8fafc !important;
}

.mud-table-responsive .mud-table-cell {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
    padding: 2px 0 !important;
    min-height: auto !important;
    overflow: hidden !important;
}

.mud-table-responsive .mud-table-cell::before {
    display: none !important;
    content: none !important;
}

/* Ensure tables and data grids always scroll horizontally and horizontal scrollbars are never hidden */
.mud-table,
.mud-data-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.mud-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: var(--table-max-height, calc(100vh - 220px)) !important;
    min-height: 200px;
    -webkit-overflow-scrolling: touch;
}

/* Tables with metrics cards above them (fallback when not using flexbox) */
.cf-table-with-metrics .mud-table-container,
.cf-table-with-metrics.mud-table-container {
    max-height: var(--table-max-height, calc(100vh - 256px)) !important;
}

/* Flexible in-viewport table layout */
.cf-table-flex,
.cf-table-polaznici,
.cf-table-flex .mud-data-grid,
.cf-table-polaznici .mud-data-grid,
.cf-table-flex .mud-table,
.cf-table-polaznici .mud-table {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cf-table-flex .mud-table-toolbar,
.cf-table-polaznici .mud-table-toolbar {
    flex-shrink: 0 !important;
}

.cf-table-flex .mud-table-pagination,
.cf-table-polaznici .mud-table-pagination {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

.cf-table-flex .mud-table-container,
.cf-table-polaznici .mud-table-container {
    flex: 1 1 0% !important;
    min-height: 120px !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Page container that stretches to the top of the 56px bottom bar */
.cf-table-page-container,
.cf-polaznici-page {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(100vh - 128px) !important;
    max-height: calc(100vh - 128px) !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 640px) {
    .cf-table-page-container,
    .cf-polaznici-page {
        height: calc(100vh - 76px) !important;
        max-height: calc(100vh - 76px) !important;
    }
}

/* Fixed bottom action & pagination bars across all table pages */
.fixed.bottom-0,
.cf-fixed-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    transition: left 200ms ease-in-out !important;
}

@media (min-width: 640px) {
    .fixed.bottom-0,
    .cf-fixed-bottom-bar {
        left: var(--sidebar-width, 68px) !important;
    }
}

.fixed.bottom-0 .mud-table-pagination-toolbar,
.cf-fixed-bottom-bar .mud-table-pagination-toolbar {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-top: none !important;
    padding: 0 !important;
}

@media (max-width: 639px) {
    .cf-fixed-bottom-bar {
        padding-left: 12px !important;
        padding-right: 18px !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-toolbar {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-rows-per-page-label {
        display: none !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-rows-per-page {
        display: flex !important;
        align-items: center !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-rows-per-page .mud-select {
        min-width: 48px !important;
        width: 48px !important;
        margin: 0 !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-rows-per-page .mud-select .mud-input {
        font-size: 0.75rem !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-rows-per-page .mud-select .mud-input-slot {
        padding: 2px 4px !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-display {
        margin: 0 4px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-actions {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        margin-left: auto !important;
        margin-right: 4px !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-actions .mud-button-root {
        padding: 4px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-actions .mud-button-root .mud-icon-root {
        font-size: 1.15rem !important;
    }
}

@media (min-width: 640px) {
    .cf-fixed-bottom-bar {
        padding-right: 24px !important;
    }
    .cf-fixed-bottom-bar .mud-table-pagination-actions {
        margin-right: 8px !important;
    }
}

.mud-table-root {
    min-width: 100%;
}

/* Sticky column headers so column titles remain pinned while rows scroll internally */
.mud-table-container thead,
.mud-table-container .mud-table-head,
.mud-data-grid thead,
.mud-data-grid .mud-table-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.mud-table-container thead th,
.mud-table-container .mud-table-head .mud-table-cell,
.mud-data-grid thead th,
.mud-data-grid .mud-table-head .mud-table-cell {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #f8fafc !important;
    box-shadow: inset 0 -1px 0 #e2e8f0 !important;
}


/* Visible, modern styled horizontal and vertical scrollbars */
.mud-table-container::-webkit-scrollbar,
.mud-data-grid::-webkit-scrollbar,
.mud-table::-webkit-scrollbar {
    height: 9px;
    width: 9px;
}

.mud-table-container::-webkit-scrollbar-track,
.mud-data-grid::-webkit-scrollbar-track,
.mud-table::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.mud-table-container::-webkit-scrollbar-thumb,
.mud-data-grid::-webkit-scrollbar-thumb,
.mud-table::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    border: 2px solid #f1f5f9;
}

.mud-table-container::-webkit-scrollbar-thumb:hover,
.mud-data-grid::-webkit-scrollbar-thumb:hover,
.mud-table::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.mud-table-container,
.mud-data-grid,
.mud-table {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

/* Notifikacije Dialog Layout */
.cf-notifikacije-dialog .mud-dialog {
    max-height: 88vh !important;
    height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

.cf-notifikacije-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}


/* Compact time text in the weekly termin editor (TerminiEditComponent) */
/* Below Tailwind "sm" (< 640px): phones */
.cf-termin-time .mud-input {
    font-size: 0.65rem;
}
.cf-termin-time .mud-input-slot {
    padding: 2px 0;
    text-align: center;
    height: auto;
}
/* Tailwind "sm" and up (>= 640px): tablets and desktop */
@media (min-width: 640px) {
    .cf-termin-time .mud-input {
        font-size: 0.85rem;
    }
    .cf-termin-time .mud-input-slot {
        padding: 4px 0;
    }
}
/* Let the picker shrink with its grid cell so all 7 days fit on phones */
.cf-termin-time,
.cf-termin-time .mud-input-control,
.cf-termin-time .mud-input-control-input-container,
.cf-termin-time .mud-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.cf-termin-time .mud-input-slot,
.cf-termin-time input.mud-input-slot {
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    text-overflow: clip;
}

/* ---------------------------------------------------------------------------
   MudSwitch: dugme (knob) je izlazilo izvan trake.
   MudBlazor .mud-switch-span koristi vecu unutrasnju marginu (12/7/17px) od
   .mud-switch-base (9/5/13px), pa dugme viri 3/2/4px preko oba kraja trake.
   Kad je razmak isti, dugme stoji tacno u traci na oba kraja - translateX(20px)
   iz MudBlazor-a ostaje ispravan jer vazi: 2*razmak + 20 + precnik = sirina.
   --------------------------------------------------------------------------- */
.mud-switch-span-small.mud-switch-span {
    padding: 5px;
}

.mud-switch-span-medium.mud-switch-span {
    padding: 9px;
}

.mud-switch-span-large.mud-switch-span {
    padding: 13px;
}

/* Poluprecnik trake mora da prati njenu novu visinu da bi krajevi bili polukruzni */
.mud-switch-span-small .mud-switch-track {
    border-radius: 7px;
}

.mud-switch-span-medium .mud-switch-track {
    border-radius: 10px;
}

.mud-switch-span-large .mud-switch-track {
    border-radius: 13px;
}