/* ============================================================
   HRnet UI - dizajn sistem
   ------------------------------------------------------------
   1. Tokeni (boje, razmaci, sjene) - svijetla i tamna tema
   2. Bootstrap mapiranje (Bootstrap komponente čitaju naše tokene)
   3. Osnova (tipografija, linkovi)
   4. Okvir aplikacije (meni, gornja traka, sadržaj, donja navigacija, obavještenja)
   5. Komponente (kartice, dugmad, forme, tabele, oznake, upozorenja, modali...)
   6. HRnet komponente (zaglavlje stranice, KPI pločica, prazno stanje, avatar, status)
   7. Stare klase iz šablona (zadržane radi kompatibilnosti)
   8. Biblioteke (FullCalendar, Choices.js, Flatpickr)
   9. Grafikoni
   10. Pristupačnost, štampa, telefon

   Tamna tema = iste klase, druge vrijednosti tokena (html[data-bs-theme="dark"]).
   Boja brenda firme dolazi iz layout.html (--hr-brand, --hr-brand-rgb, --hr-brand-contrast,
   --hr-brand-text); sve nijanse (hover, pozadine, fokus) se izvode iz nje.
   ============================================================ */

/* ============ 1. TOKENI ============ */
:root {
    --hr-brand: #2c5282;
    --hr-brand-rgb: 44, 82, 130;
    --hr-brand-contrast: #ffffff;
    --hr-brand-text: #2c5282;
    --hr-brand-hover: color-mix(in srgb, var(--hr-brand) 86%, #000);
    --hr-brand-soft: color-mix(in srgb, var(--hr-brand) 8%, var(--hr-surface));
    --hr-brand-soft-2: color-mix(in srgb, var(--hr-brand) 16%, var(--hr-surface));
    --hr-brand-ring: color-mix(in srgb, var(--hr-brand) 24%, transparent);

    --hr-bg: #f6f7f9;
    --hr-surface: #ffffff;
    --hr-surface-2: #f9fafb;
    --hr-surface-3: #f2f4f7;
    --hr-hover: #f2f4f7;
    --hr-border: #e4e7ec;
    --hr-border-strong: #d0d5dd;
    --hr-text: #101828;
    --hr-text-2: #344054;
    --hr-text-3: #667085;
    --hr-text-4: #98a2b3;

    --hr-success: #079455;   --hr-success-soft: #ecfdf3; --hr-success-text: #067647; --hr-success-border: #abefc6;
    --hr-warning: #dc6803;   --hr-warning-soft: #fffaeb; --hr-warning-text: #b54708; --hr-warning-border: #fedf89;
    --hr-danger: #d92d20;    --hr-danger-soft: #fef3f2;  --hr-danger-text: #b42318;  --hr-danger-border: #fecdca;
    --hr-info: #1570ef;      --hr-info-soft: #eff8ff;    --hr-info-text: #175cd3;    --hr-info-border: #b2ddff;
    --hr-neutral-soft: #f2f4f7; --hr-neutral-text: #344054; --hr-neutral-border: #e4e7ec;

    --hr-radius-sm: 6px;
    --hr-radius: 8px;
    --hr-radius-lg: 12px;
    --hr-radius-xl: 16px;

    --hr-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --hr-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --hr-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --hr-shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -4px rgba(16, 24, 40, 0.06);

    --hr-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --hr-sidebar-w: 256px;
    --hr-topbar-h: 60px;
    --hr-page-pad: 32px;

    /* Boje vrsta odsustva - iste kao na grafikonima (static/js/hr-charts.js) */
    --hr-leave-annual: #2a78d6;
    --hr-leave-sick: #eb6834;
    --hr-leave-paid: #1baf7a;
    --hr-leave-unpaid: #98a2b3;
    --hr-leave-plan: #b9c0cc;
    --hr-leave-holiday: #7a5af8;

    /* Stari nazivi varijabli (koriste ih šabloni) -> novi tokeni */
    --primary-teal: var(--hr-brand);
    --primary-color: var(--hr-brand);
    --primary-contrast: var(--hr-brand-contrast);
    --primary-text: var(--hr-brand-text);
    --light-teal: var(--hr-brand-soft);
    --light-bg: var(--hr-surface-2);
    --border-gray: var(--hr-border);
    --text-dark: var(--hr-text);
    --text-gray: var(--hr-text-3);
    --card-bg: var(--hr-surface);
    --success-green: var(--hr-success);
    --warning-yellow: #f79009;
    --danger-red: var(--hr-danger);
    --danger-light: var(--hr-danger-soft);
    --event-green: var(--hr-leave-annual);
    --event-red: var(--hr-leave-sick);
    --event-orange: var(--hr-leave-paid);
    --event-gray: var(--hr-leave-unpaid);
    --event-purple: var(--hr-leave-holiday);
}

html[data-bs-theme="dark"] {
    color-scheme: dark;
    --hr-brand-text: color-mix(in srgb, var(--hr-brand) 45%, #ffffff);
    --hr-brand-hover: color-mix(in srgb, var(--hr-brand) 82%, #ffffff);
    --hr-brand-soft: color-mix(in srgb, var(--hr-brand) 22%, var(--hr-surface));
    --hr-brand-soft-2: color-mix(in srgb, var(--hr-brand) 34%, var(--hr-surface));
    --hr-brand-ring: color-mix(in srgb, var(--hr-brand-text) 35%, transparent);

    --hr-bg: #0c0d10;
    --hr-surface: #16181c;
    --hr-surface-2: #1b1e23;
    --hr-surface-3: #23262c;
    --hr-hover: #23262c;
    --hr-border: #2a2e35;
    --hr-border-strong: #3a3f47;
    --hr-text: #f2f4f7;
    --hr-text-2: #d0d5dd;
    --hr-text-3: #98a2b3;
    --hr-text-4: #667085;

    --hr-success: #17b26a;   --hr-success-soft: rgba(23, 178, 106, 0.14);  --hr-success-text: #47cd89; --hr-success-border: rgba(71, 205, 137, 0.3);
    --hr-warning: #f79009;   --hr-warning-soft: rgba(247, 144, 9, 0.14);   --hr-warning-text: #fdb022; --hr-warning-border: rgba(253, 176, 34, 0.3);
    --hr-danger: #f04438;    --hr-danger-soft: rgba(240, 68, 56, 0.14);    --hr-danger-text: #f97066;  --hr-danger-border: rgba(249, 112, 102, 0.3);
    --hr-info: #2e90fa;      --hr-info-soft: rgba(46, 144, 250, 0.14);     --hr-info-text: #53b1fd;    --hr-info-border: rgba(83, 177, 253, 0.3);
    --hr-neutral-soft: #23262c; --hr-neutral-text: #d0d5dd; --hr-neutral-border: #3a3f47;

    --hr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --hr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --hr-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
    --hr-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);

    --hr-leave-annual: #3987e5;
    --hr-leave-sick: #d95926;
    --hr-leave-paid: #199e70;
    --hr-leave-unpaid: #667085;
    --hr-leave-plan: #4a505a;
    --hr-leave-holiday: #9b8afb;
}

/* ============ 2. BOOTSTRAP MAPIRANJE ============ */
:root, [data-bs-theme] {
    --bs-body-font-family: var(--hr-font);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--hr-bg);
    --bs-body-color: var(--hr-text);
    --bs-emphasis-color: var(--hr-text);
    --bs-heading-color: var(--hr-text);
    --bs-secondary-color: var(--hr-text-3);
    --bs-tertiary-color: var(--hr-text-4);
    --bs-secondary-bg: var(--hr-surface-3);
    --bs-tertiary-bg: var(--hr-surface-2);
    --bs-border-color: var(--hr-border);
    --bs-border-color-translucent: var(--hr-border);
    --bs-border-radius: var(--hr-radius);
    --bs-border-radius-sm: var(--hr-radius-sm);
    --bs-border-radius-lg: var(--hr-radius-lg);
    --bs-border-radius-xl: var(--hr-radius-xl);
    --bs-border-radius-xxl: 20px;
    --bs-box-shadow: var(--hr-shadow-md);
    --bs-box-shadow-sm: var(--hr-shadow-xs);
    --bs-box-shadow-lg: var(--hr-shadow-lg);
    --bs-focus-ring-color: var(--hr-brand-ring);
    --bs-link-color: var(--hr-brand-text);
    --bs-link-hover-color: var(--hr-brand-hover);

    --bs-primary: var(--hr-brand);
    --bs-primary-rgb: var(--hr-brand-rgb);
    --bs-primary-text-emphasis: var(--hr-brand-text);
    --bs-primary-bg-subtle: var(--hr-brand-soft);
    --bs-primary-border-subtle: var(--hr-brand-soft-2);

    --bs-success-text-emphasis: var(--hr-success-text);
    --bs-success-bg-subtle: var(--hr-success-soft);
    --bs-success-border-subtle: var(--hr-success-border);
    --bs-warning-text-emphasis: var(--hr-warning-text);
    --bs-warning-bg-subtle: var(--hr-warning-soft);
    --bs-warning-border-subtle: var(--hr-warning-border);
    --bs-danger-text-emphasis: var(--hr-danger-text);
    --bs-danger-bg-subtle: var(--hr-danger-soft);
    --bs-danger-border-subtle: var(--hr-danger-border);
    --bs-info-text-emphasis: var(--hr-info-text);
    --bs-info-bg-subtle: var(--hr-info-soft);
    --bs-info-border-subtle: var(--hr-info-border);
    --bs-secondary-text-emphasis: var(--hr-neutral-text);
    --bs-secondary-bg-subtle: var(--hr-neutral-soft);
    --bs-secondary-border-subtle: var(--hr-neutral-border);
    --bs-light-text-emphasis: var(--hr-text-2);
    --bs-light-bg-subtle: var(--hr-surface-2);
    --bs-light-border-subtle: var(--hr-border);
    --bs-dark-text-emphasis: var(--hr-text);
    --bs-dark-bg-subtle: var(--hr-surface-3);
    --bs-dark-border-subtle: var(--hr-border-strong);
}

/* ============ 3. OSNOVA ============ */
html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    background: var(--hr-bg);
    color: var(--hr-text);
    font-family: var(--hr-font);
    font-size: 0.875rem;
    font-feature-settings: "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea, optgroup { font-family: inherit; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--hr-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: 1.875rem; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }
.fw-bold, b, strong { font-weight: 600; }
.small, small { font-size: 0.8125rem; }

a { color: var(--hr-brand-text); text-decoration: none; }
a:hover { color: var(--hr-brand-hover); }
html[data-bs-theme="dark"] a:hover { color: var(--hr-text); }

hr { border-color: var(--hr-border); opacity: 1; }
kbd {
    background: var(--hr-surface);
    color: var(--hr-text-3);
    border: 1px solid var(--hr-border);
    border-radius: 5px;
    box-shadow: none;
    font-family: var(--hr-font);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 1px 5px;
}
::selection { background: var(--hr-brand-soft-2); }

/* Bootstrap uslužne klase -> tokeni (rade u obje teme) */
.text-muted { color: var(--hr-text-3) !important; }
.text-body-secondary { color: var(--hr-text-3) !important; }
.text-primary { color: var(--hr-brand-text) !important; }
.bg-primary { background-color: var(--hr-brand) !important; }
.border-primary { border-color: var(--hr-brand) !important; }
.bg-light { background-color: var(--hr-surface-2) !important; }
.bg-body-tertiary { background-color: var(--hr-surface-2) !important; }
.bg-body { background-color: var(--hr-bg) !important; }
html[data-bs-theme="dark"] .bg-white { background-color: var(--hr-surface) !important; }
html[data-bs-theme="dark"] .text-dark { color: var(--hr-text) !important; }
html[data-bs-theme="dark"] .text-black-50 { color: var(--hr-text-3) !important; }
html[data-bs-theme="dark"] .border-light { border-color: var(--hr-border) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--hr-border); }
.shadow-sm { box-shadow: var(--hr-shadow-xs) !important; }
.shadow { box-shadow: var(--hr-shadow-md) !important; }
.shadow-lg { box-shadow: var(--hr-shadow-lg) !important; }
.text-success { color: var(--hr-success-text) !important; }
.text-danger { color: var(--hr-danger-text) !important; }
.text-warning { color: var(--hr-warning-text) !important; }
.text-info { color: var(--hr-info-text) !important; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ============ 4. OKVIR APLIKACIJE ============ */

/* --- 4.1 Bočni meni --- */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--hr-sidebar-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--hr-surface);
    border-right: 1px solid var(--hr-border);
    z-index: 1035;
}
#sidebar .sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--hr-topbar-h);
    padding: 0 16px;
    flex-shrink: 0;
}
.app-logo-link { display: inline-flex; align-items: center; gap: 10px; max-width: 190px; overflow: hidden; color: var(--hr-text); }
.app-logo-link:hover { color: var(--hr-text); }
.app-logo-link img { max-height: 34px; max-width: 100%; object-fit: contain; }
.app-logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hr-brand);
    color: var(--hr-brand-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.app-logo { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hr-text); }

#sidebar .sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 12px;
    scrollbar-width: thin;
}
#sidebar ul { list-style: none; margin: 0; padding: 0; }
#sidebar .nav-group + .nav-group { margin-top: 14px; }
#sidebar .nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 8px;
    margin-bottom: 2px;
    border: 0;
    background: transparent;
    color: var(--hr-text-3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--hr-radius-sm);
    text-align: left;
}
#sidebar .nav-group-toggle:hover { color: var(--hr-text); }
#sidebar .nav-group-toggle .bi { font-size: 0.7rem; transition: transform 0.15s ease; }
#sidebar .nav-group-toggle[aria-expanded="false"] .bi { transform: rotate(-90deg); }
#sidebar .nav-group-toggle.active { color: var(--hr-text-2); }

#sidebar .sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: var(--hr-radius);
    color: var(--hr-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.12s ease, color 0.12s ease;
}
#sidebar .sidebar-menu a .bi { font-size: 1rem; color: var(--hr-text-4); flex-shrink: 0; width: 18px; text-align: center; }
#sidebar .sidebar-menu a:hover { background: var(--hr-hover); color: var(--hr-text); }
#sidebar .sidebar-menu a:hover .bi { color: var(--hr-text-3); }
#sidebar .sidebar-menu a.active { background: var(--hr-brand-soft); color: var(--hr-brand-text); font-weight: 600; }
#sidebar .sidebar-menu a.active .bi { color: var(--hr-brand-text); }
#sidebar .sidebar-menu a .nav-label { flex: 1; min-width: 0; }

.badge-pending {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hr-danger);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

#sidebar .sidebar-footer {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--hr-border);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: var(--hr-radius);
}
.sidebar-user-meta { flex: 1; min-width: 0; line-height: 1.25; }
.sidebar-user-meta .name { font-weight: 600; font-size: 0.8125rem; color: var(--hr-text); }
.sidebar-user-meta .sub { font-size: 0.75rem; color: var(--hr-text-3); }
.sidebar-pwa {
    display: none;
    width: 100%;
    margin-bottom: 8px;
    padding: 7px 10px;
    border: 1px dashed var(--hr-border-strong);
    border-radius: var(--hr-radius);
    background: transparent;
    color: var(--hr-text-2);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
}
.sidebar-pwa:hover { background: var(--hr-hover); }

#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 17, 29, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1040;
    cursor: pointer;
}

/* --- 4.2 Glavni sadržaj i gornja traka --- */
#content { min-height: 100vh; }
@media (min-width: 992px) {
    #sidebar { transform: none; transition: transform 0.25s ease; }
    #content { margin-left: var(--hr-sidebar-w); transition: margin-left 0.25s ease; }
    body.sidebar-collapsed #sidebar { transform: translateX(-100%); }
    body.sidebar-collapsed #content { margin-left: 0; }
    .mobile-close-btn, #sidebar-overlay { display: none !important; }
}
@media (max-width: 991.98px) {
    #sidebar {
        z-index: 1050;
        width: min(296px, 86vw);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        border-right: 0;
    }
    body.sidebar-open #sidebar { transform: none; box-shadow: var(--hr-shadow-lg); }
    body.sidebar-open #sidebar-overlay { display: block; }
    body.sidebar-open { overflow: hidden; }
    #content { margin-left: 0; }
    .mobile-close-btn { display: inline-flex !important; }
    #global-search-wrap .search-field { display: none !important; }
}
body.no-transitions #sidebar, body.no-transitions #content { transition: none !important; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--hr-topbar-h);
    padding: 0 var(--hr-page-pad);
    background: color-mix(in srgb, var(--hr-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.app-topbar.is-scrolled { border-bottom-color: var(--hr-border); }
.app-topbar .topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.app-page { padding: 8px var(--hr-page-pad) 48px; max-width: 1680px; }

/* Ikonica-dugme (gornja traka, meni, akcije u redu tabele) */
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--hr-radius);
    background: transparent;
    color: var(--hr-text-3);
    font-size: 1.05rem;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.icon-btn:hover { background: var(--hr-hover); color: var(--hr-text); }
.icon-btn.icon-btn-sm { width: 30px; height: 30px; font-size: 0.95rem; }
.icon-btn .bi { pointer-events: none; }
.notif-dot {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--hr-bg);
    background: var(--hr-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}
.notification-bell.has-unread .bi { animation: ring 2.4s ease-in-out 1; transform-origin: top center; }
@keyframes ring {
    0%, 60%, 100% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(8deg); }
    40% { transform: rotate(-6deg); }
    50% { transform: rotate(3deg); }
}

/* Pretraga (Ctrl+K) */
#global-search-wrap { position: relative; width: min(420px, 100%); }
.search-field { position: relative; }
.search-field > .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hr-text-4); font-size: 0.875rem; pointer-events: none; }
.search-field > kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#global-search-input {
    height: 36px;
    padding: 0 64px 0 34px;
    border-radius: var(--hr-radius);
    border: 1px solid var(--hr-border);
    background: var(--hr-surface);
    box-shadow: none;
    font-size: 0.8125rem;
}
#global-search-input:focus { border-color: var(--hr-brand); box-shadow: 0 0 0 3px var(--hr-brand-ring); }
.popover-panel {
    position: absolute;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-lg);
    overflow-y: auto;
}
#global-search-results { top: 44px; left: 0; width: min(440px, calc(100vw - 24px)); max-height: 440px; padding: 4px 0; z-index: 1070; }
#notif-dropdown { top: 44px; right: 0; width: min(360px, calc(100vw - 24px)); max-height: 460px; z-index: 1071; }
.popover-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hr-border); }
.popover-panel-head strong { font-size: 0.8125rem; }
.popover-panel-head .btn-link { font-size: 0.75rem; padding: 0; text-decoration: none; }

.notif-item, .gs-item {
    display: block;
    padding: 10px 14px;
    color: inherit;
    border-bottom: 1px solid var(--hr-border);
}
.notif-item:last-child, .gs-item:last-child { border-bottom: 0; }
.notif-item:hover, .gs-item:hover { background: var(--hr-hover); color: inherit; }
.notif-item-unread { background: var(--hr-brand-soft); }
.notif-item-msg { font-size: 0.8125rem; color: var(--hr-text-3); }
.notif-item-msg-unread { font-weight: 600; color: var(--hr-text); }
.notif-item-time { font-size: 0.6875rem; color: var(--hr-text-4); margin-top: 2px; }
.gs-item-name { font-size: 0.8125rem; font-weight: 600; color: var(--hr-text) !important; }
.gs-item-sub { font-size: 0.75rem; color: var(--hr-text-3) !important; }
.gs-cat { font-size: 0.6875rem; background: var(--hr-surface-2); color: var(--hr-text-3) !important; border-color: var(--hr-border) !important; letter-spacing: 0.04em; }

/* Izbor firme */
.company-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    background: var(--hr-surface);
    color: var(--hr-text-2);
    font-size: 0.8125rem;
    font-weight: 500;
}
.company-switcher-btn:hover, .company-switcher-btn.show { background: var(--hr-hover); color: var(--hr-text); border-color: var(--hr-border-strong); }
.company-switcher-btn .company-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hr-brand); }

/* --- 4.3 Obavještenja (flash poruke kao "toast" u uglu) --- */
.flash-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1090;
    width: min(400px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.flash-container .alert {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 12px 12px 14px;
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    background: var(--hr-surface);
    color: var(--hr-text);
    box-shadow: var(--hr-shadow-lg);
    font-size: 0.8125rem;
    animation: toast-in 0.25s ease-out;
}
.flash-container .alert.fade:not(.show) { opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.flash-container .flash-icon { font-size: 1.05rem; line-height: 1.2; }
.flash-container .flash-text { flex: 1; padding-top: 1px; }
.flash-container .btn-close { flex-shrink: 0; padding: 4px; margin: 0; font-size: 0.7rem; }
.flash-container .alert-success .flash-icon { color: var(--hr-success); }
.flash-container .alert-danger .flash-icon { color: var(--hr-danger); }
.flash-container .alert-warning .flash-icon { color: var(--hr-warning); }
.flash-container .alert-info .flash-icon { color: var(--hr-info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- 4.4 Donja navigacija (telefon) --- */
.bottom-nav { display: none; }
@media (max-width: 991.98px) {
    body:not(.auth-page) .app-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: color-mix(in srgb, var(--hr-surface) 92%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--hr-border);
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    }
    .bottom-nav a, .bottom-nav button {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 54px;
        border: 0;
        background: transparent;
        border-radius: var(--hr-radius-lg);
        color: var(--hr-text-3);
        font-size: 0.6875rem;
        font-weight: 500;
    }
    .bottom-nav i { font-size: 1.25rem; line-height: 1; }
    .bottom-nav a.active { color: var(--hr-brand-text); font-weight: 600; }
    .bottom-nav a.active i::before { font-weight: bold !important; }
    .bottom-nav-badge {
        position: absolute;
        top: 5px;
        left: calc(50% + 5px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        border: 2px solid var(--hr-surface);
        background: var(--hr-danger);
        color: #fff;
        font-size: 0.625rem;
        line-height: 14px;
        text-align: center;
    }
    body.sidebar-open .bottom-nav { display: none; }
}

/* --- 4.5 Prijava / registracija (bez menija) --- */
body.auth-page { background: radial-gradient(circle at 15% 20%, #1e293b 0%, #0f172a 100%) fixed !important; overflow-x: hidden; }
body.auth-page #content { margin-left: 0 !important; padding: 4.5rem 1rem 2rem; min-height: 100vh; }
body.auth-page #content > .row { margin-left: 0; margin-right: 0; }
body.auth-page .login-wrapper { background: transparent !important; overflow: visible !important; }
body.auth-page .login-wrapper::before, body.auth-page .login-wrapper::after { display: none !important; }
body.auth-page .flash-container { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); }
.auth-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1081;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #101828 !important;
}

/* ============ 5. KOMPONENTE ============ */

/* --- Kartice --- */
.card {
    --bs-card-bg: var(--hr-surface);
    --bs-card-border-color: var(--hr-border);
    --bs-card-border-radius: var(--hr-radius-lg);
    --bs-card-inner-border-radius: calc(var(--hr-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-padding-y: 0.875rem;
    --bs-card-cap-padding-x: 1.25rem;
    color: var(--hr-text);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-xs);
}
.card.border-0 { border: 1px solid var(--hr-border) !important; }
.card.shadow-sm, .card.shadow { box-shadow: var(--hr-shadow-xs) !important; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hr-border);
}
.card-header.bg-light, .card-header.bg-white { background: transparent !important; }
.card-header h5, .card-header .h5, .card-title { font-size: 0.9375rem; font-weight: 600; color: var(--hr-text); margin: 0; }
.card-footer { background: var(--hr-surface-2); border-top: 1px solid var(--hr-border); }
a.card { color: inherit; }
a.card:hover { color: inherit; border-color: var(--hr-border-strong) !important; box-shadow: var(--hr-shadow-sm) !important; }

/* --- Dugmad --- */
.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: var(--hr-radius);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--hr-brand-ring);
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.btn-sm {
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: var(--hr-radius-sm);
}
.btn-lg {
    --bs-btn-padding-y: 0.6875rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-border-radius: var(--hr-radius);
}
.btn-primary, .btn-gradient {
    --bs-btn-color: var(--hr-brand-contrast);
    --bs-btn-bg: var(--hr-brand);
    --bs-btn-border-color: var(--hr-brand);
    --bs-btn-hover-color: var(--hr-brand-contrast);
    --bs-btn-hover-bg: var(--hr-brand-hover);
    --bs-btn-hover-border-color: var(--hr-brand-hover);
    --bs-btn-active-color: var(--hr-brand-contrast);
    --bs-btn-active-bg: var(--hr-brand-hover);
    --bs-btn-active-border-color: var(--hr-brand-hover);
    --bs-btn-disabled-color: var(--hr-brand-contrast);
    --bs-btn-disabled-bg: var(--hr-brand);
    --bs-btn-disabled-border-color: var(--hr-brand);
    box-shadow: var(--hr-shadow-xs);
}
.btn-gradient {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
}
.btn-gradient:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); }
.btn-outline-primary {
    --bs-btn-color: var(--hr-brand-text);
    --bs-btn-bg: var(--hr-surface);
    --bs-btn-border-color: var(--hr-brand-soft-2);
    --bs-btn-hover-color: var(--hr-brand-text);
    --bs-btn-hover-bg: var(--hr-brand-soft);
    --bs-btn-hover-border-color: var(--hr-brand);
    --bs-btn-active-color: var(--hr-brand-text);
    --bs-btn-active-bg: var(--hr-brand-soft-2);
    --bs-btn-active-border-color: var(--hr-brand);
    --bs-btn-disabled-color: var(--hr-brand-text);
    --bs-btn-disabled-border-color: var(--hr-brand-soft-2);
}
/* Neutralno dugme (sekundarna radnja) */
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--hr-text-2);
    --bs-btn-bg: var(--hr-surface);
    --bs-btn-border-color: var(--hr-border-strong);
    --bs-btn-hover-color: var(--hr-text);
    --bs-btn-hover-bg: var(--hr-hover);
    --bs-btn-hover-border-color: var(--hr-border-strong);
    --bs-btn-active-color: var(--hr-text);
    --bs-btn-active-bg: var(--hr-surface-3);
    --bs-btn-active-border-color: var(--hr-border-strong);
    --bs-btn-disabled-color: var(--hr-text-4);
    --bs-btn-disabled-bg: var(--hr-surface);
    --bs-btn-disabled-border-color: var(--hr-border);
    box-shadow: var(--hr-shadow-xs);
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--hr-success); --bs-btn-border-color: var(--hr-success);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #067647; --bs-btn-hover-border-color: #067647;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #085d3a; --bs-btn-active-border-color: #085d3a;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--hr-success); --bs-btn-disabled-border-color: var(--hr-success);
    box-shadow: var(--hr-shadow-xs);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--hr-danger); --bs-btn-border-color: var(--hr-danger);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b42318; --bs-btn-hover-border-color: #b42318;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #912018; --bs-btn-active-border-color: #912018;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--hr-danger); --bs-btn-disabled-border-color: var(--hr-danger);
    box-shadow: var(--hr-shadow-xs);
}
.btn-warning {
    --bs-btn-color: #1d2939; --bs-btn-bg: #fdb022; --bs-btn-border-color: #fdb022;
    --bs-btn-hover-color: #1d2939; --bs-btn-hover-bg: #f79009; --bs-btn-hover-border-color: #f79009;
    --bs-btn-active-color: #1d2939; --bs-btn-active-bg: #dc6803; --bs-btn-active-border-color: #dc6803;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--hr-info); --bs-btn-border-color: var(--hr-info);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #175cd3; --bs-btn-hover-border-color: #175cd3;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1849a9; --bs-btn-active-border-color: #1849a9;
}
.btn-dark {
    --bs-btn-color: var(--hr-surface); --bs-btn-bg: var(--hr-text); --bs-btn-border-color: var(--hr-text);
    --bs-btn-hover-color: var(--hr-surface); --bs-btn-hover-bg: var(--hr-text-2); --bs-btn-hover-border-color: var(--hr-text-2);
}
.btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-info {
    --bs-btn-bg: var(--hr-surface);
    box-shadow: var(--hr-shadow-xs);
}
.btn-outline-danger {
    --bs-btn-color: var(--hr-danger-text); --bs-btn-border-color: var(--hr-danger-border);
    --bs-btn-hover-color: var(--hr-danger-text); --bs-btn-hover-bg: var(--hr-danger-soft); --bs-btn-hover-border-color: var(--hr-danger);
    --bs-btn-active-color: var(--hr-danger-text); --bs-btn-active-bg: var(--hr-danger-soft); --bs-btn-active-border-color: var(--hr-danger);
}
.btn-outline-success {
    --bs-btn-color: var(--hr-success-text); --bs-btn-border-color: var(--hr-success-border);
    --bs-btn-hover-color: var(--hr-success-text); --bs-btn-hover-bg: var(--hr-success-soft); --bs-btn-hover-border-color: var(--hr-success);
    --bs-btn-active-color: var(--hr-success-text); --bs-btn-active-bg: var(--hr-success-soft); --bs-btn-active-border-color: var(--hr-success);
}
.btn-outline-warning {
    --bs-btn-color: var(--hr-warning-text); --bs-btn-border-color: var(--hr-warning-border);
    --bs-btn-hover-color: var(--hr-warning-text); --bs-btn-hover-bg: var(--hr-warning-soft); --bs-btn-hover-border-color: var(--hr-warning);
    --bs-btn-active-color: var(--hr-warning-text); --bs-btn-active-bg: var(--hr-warning-soft); --bs-btn-active-border-color: var(--hr-warning);
}
.btn-outline-info {
    --bs-btn-color: var(--hr-info-text); --bs-btn-border-color: var(--hr-info-border);
    --bs-btn-hover-color: var(--hr-info-text); --bs-btn-hover-bg: var(--hr-info-soft); --bs-btn-hover-border-color: var(--hr-info);
    --bs-btn-active-color: var(--hr-info-text); --bs-btn-active-bg: var(--hr-info-soft); --bs-btn-active-border-color: var(--hr-info);
}
.btn-link { --bs-btn-color: var(--hr-brand-text); --bs-btn-hover-color: var(--hr-brand-hover); box-shadow: none; }
.btn .spinner-border-sm { width: 0.9rem; height: 0.9rem; border-width: 0.15em; vertical-align: -0.125em; }

/* --- Forme --- */
.form-label {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hr-text-2);
}
.form-control, .form-select {
    min-height: 38px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--hr-text);
    background-color: var(--hr-surface);
    border: 1px solid var(--hr-border-strong);
    border-radius: var(--hr-radius);
    box-shadow: var(--hr-shadow-xs);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-select { padding-right: 2.25rem; }
textarea.form-control { min-height: 72px; }
.form-control-sm, .form-select-sm { min-height: 32px; padding: 0.3125rem 0.625rem; font-size: 0.8125rem; border-radius: var(--hr-radius-sm); }
.form-select-sm { padding-right: 2rem; }
.form-control-lg { min-height: 44px; font-size: 0.9375rem; }
.form-control::placeholder { color: var(--hr-text-4); opacity: 1; }
.form-control:focus, .form-select:focus {
    color: var(--hr-text);
    background-color: var(--hr-surface);
    border-color: var(--hr-brand);
    box-shadow: 0 0 0 3px var(--hr-brand-ring);
}
/* Polja koja preglednik sam popuni (autofill): boje teme umjesto žute / maslinaste podloge preglednika */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-select:-webkit-autofill {
    -webkit-text-fill-color: var(--hr-text);
    caret-color: var(--hr-text);
    -webkit-box-shadow: 0 0 0 1000px var(--hr-surface) inset, var(--hr-shadow-xs);
    box-shadow: 0 0 0 1000px var(--hr-surface) inset, var(--hr-shadow-xs);
    transition: background-color 600000s 0s, color 600000s 0s;
}
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hr-text);
    -webkit-box-shadow: 0 0 0 1000px var(--hr-surface) inset, 0 0 0 3px var(--hr-brand-ring);
    box-shadow: 0 0 0 1000px var(--hr-surface) inset, 0 0 0 3px var(--hr-brand-ring);
}
.form-control:autofill { filter: none; }   /* Firefox autofill */
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--hr-surface-2); color: var(--hr-text-3); }
.form-control[type="file"] { padding: 0.375rem 0.5rem; }
.form-control::file-selector-button { border-radius: var(--hr-radius-sm); margin-right: 10px; padding: 0.25rem 0.625rem; background: var(--hr-surface-3); color: var(--hr-text-2); border: 0; }
.form-text { font-size: 0.75rem; color: var(--hr-text-3); }
.form-check-input { border-color: var(--hr-border-strong); background-color: var(--hr-surface); }
.form-check-input:checked { background-color: var(--hr-brand); border-color: var(--hr-brand); }
.form-check-input:focus { border-color: var(--hr-brand); box-shadow: 0 0 0 3px var(--hr-brand-ring); }
.form-switch .form-check-input { width: 2.25em; }
.input-group-text {
    background: var(--hr-surface-2);
    border: 1px solid var(--hr-border-strong);
    color: var(--hr-text-3);
    font-size: 0.875rem;
}
.input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text { box-shadow: none; }
.input-group { border-radius: var(--hr-radius); box-shadow: var(--hr-shadow-xs); }
.input-group:focus-within { box-shadow: 0 0 0 3px var(--hr-brand-ring); }
.input-group:focus-within > .form-control, .input-group:focus-within > .input-group-text, .input-group:focus-within > .form-select { border-color: var(--hr-brand); box-shadow: none; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--hr-danger); }
.invalid-feedback { color: var(--hr-danger-text); font-size: 0.75rem; }

/* --- Tabele --- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hr-text);
    --bs-table-border-color: var(--hr-border);
    --bs-table-striped-bg: var(--hr-surface-2);
    --bs-table-striped-color: var(--hr-text);
    --bs-table-hover-bg: var(--hr-hover);
    --bs-table-hover-color: var(--hr-text);
    --bs-table-active-bg: var(--hr-surface-3);
    font-size: 0.875rem;
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: 0.75rem 1rem; border-bottom-color: var(--hr-border); }
.table-sm > :not(caption) > * > * { padding: 0.4rem 0.75rem; }
.table > thead > tr > th, .table th[scope="col"] {
    background: var(--hr-surface-2);
    color: var(--hr-text-3);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-bottom: 1px solid var(--hr-border);
}
.table-light, .table > thead.table-light {
    --bs-table-bg: var(--hr-surface-2);
    --bs-table-color: var(--hr-text-3);
    --bs-table-border-color: var(--hr-border);
}
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table td { vertical-align: middle; }
.table-hover > tbody > tr { transition: background-color 0.1s ease; }
.card .table-responsive { border-radius: inherit; }
.card > .table-responsive:first-child, .card > .card-body.p-0:first-child, .card > .card-body.p-0:first-child > .table-responsive:first-child {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .table-responsive, .card > .card-header + .card-body.p-0 > .table-responsive { border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
.table .td-actions { white-space: nowrap; text-align: right; }

/* --- Oznake (badge): mekane boje + tekst, nikad samo boja --- */
.badge {
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 500;
    --bs-badge-padding-y: 0.1875rem;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-border-radius: 999px;
    line-height: 1.3;
    letter-spacing: 0;
}
.badge.bg-primary { background-color: var(--hr-brand-soft) !important; color: var(--hr-brand-text) !important; box-shadow: inset 0 0 0 1px var(--hr-brand-soft-2); }
.badge.bg-success { background-color: var(--hr-success-soft) !important; color: var(--hr-success-text) !important; box-shadow: inset 0 0 0 1px var(--hr-success-border); }
.badge.bg-warning { background-color: var(--hr-warning-soft) !important; color: var(--hr-warning-text) !important; box-shadow: inset 0 0 0 1px var(--hr-warning-border); }
.badge.bg-danger { background-color: var(--hr-danger-soft) !important; color: var(--hr-danger-text) !important; box-shadow: inset 0 0 0 1px var(--hr-danger-border); }
.badge.bg-info { background-color: var(--hr-info-soft) !important; color: var(--hr-info-text) !important; box-shadow: inset 0 0 0 1px var(--hr-info-border); }
.badge.bg-secondary, .badge.bg-light { background-color: var(--hr-neutral-soft) !important; color: var(--hr-neutral-text) !important; box-shadow: inset 0 0 0 1px var(--hr-neutral-border); }
.badge.bg-dark { background-color: var(--hr-text) !important; color: var(--hr-surface) !important; }
.badge[class*="-subtle"] { box-shadow: none; }

/* --- Upozorenja (alert) --- */
.alert {
    --bs-alert-padding-y: 0.75rem;
    --bs-alert-padding-x: 1rem;
    --bs-alert-border-radius: var(--hr-radius-lg);
    font-size: 0.875rem;
}
.alert-light { --bs-alert-bg: var(--hr-surface-2); --bs-alert-color: var(--hr-text-2); --bs-alert-border-color: var(--hr-border); }
.alert-secondary { --bs-alert-bg: var(--hr-surface-2); --bs-alert-color: var(--hr-text-2); --bs-alert-border-color: var(--hr-border); }
.alert-primary { --bs-alert-bg: var(--hr-brand-soft); --bs-alert-color: var(--hr-brand-text); --bs-alert-border-color: var(--hr-brand-soft-2); }
.alert .alert-link { color: inherit; }

/* --- Padajući meniji, modali, bočni paneli, tooltip --- */
.dropdown-menu {
    --bs-dropdown-bg: var(--hr-surface);
    --bs-dropdown-border-color: var(--hr-border);
    --bs-dropdown-border-radius: var(--hr-radius-lg);
    --bs-dropdown-color: var(--hr-text);
    --bs-dropdown-link-color: var(--hr-text-2);
    --bs-dropdown-link-hover-color: var(--hr-text);
    --bs-dropdown-link-hover-bg: var(--hr-hover);
    --bs-dropdown-link-active-color: var(--hr-brand-text);
    --bs-dropdown-link-active-bg: var(--hr-brand-soft);
    --bs-dropdown-divider-bg: var(--hr-border);
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-padding-y: 4px;
    --bs-dropdown-item-padding-y: 0.4375rem;
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-box-shadow: var(--hr-shadow-lg);
    border: 1px solid var(--hr-border) !important;
    box-shadow: var(--hr-shadow-lg) !important;
}
.dropdown-item { border-radius: var(--hr-radius-sm); margin: 0 4px; width: calc(100% - 8px); }
.dropdown-header { font-size: 0.75rem; color: var(--hr-text-3); }

.modal {
    --bs-modal-bg: var(--hr-surface);
    --bs-modal-color: var(--hr-text);
    --bs-modal-border-color: var(--hr-border);
    --bs-modal-border-radius: var(--hr-radius-xl);
    --bs-modal-inner-border-radius: calc(var(--hr-radius-xl) - 1px);
    --bs-modal-header-border-color: var(--hr-border);
    --bs-modal-footer-border-color: var(--hr-border);
    --bs-modal-header-padding: 1rem 1.25rem;
    --bs-modal-padding: 1.25rem;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-box-shadow: var(--hr-shadow-lg);
}
.modal-content { box-shadow: var(--hr-shadow-lg); }
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-footer { background: var(--hr-surface-2); border-bottom-left-radius: var(--bs-modal-inner-border-radius); border-bottom-right-radius: var(--bs-modal-inner-border-radius); }
.modal-backdrop { --bs-backdrop-bg: #0c111d; --bs-backdrop-opacity: 0.5; }
.offcanvas {
    --bs-offcanvas-bg: var(--hr-surface);
    --bs-offcanvas-color: var(--hr-text);
    --bs-offcanvas-border-color: var(--hr-border);
    --bs-offcanvas-width: 480px;
    --bs-offcanvas-padding-x: 1.5rem;
    --bs-offcanvas-padding-y: 1.25rem;
    box-shadow: var(--hr-shadow-lg);
}
.offcanvas-header { border-bottom: 1px solid var(--hr-border); }
.offcanvas-title { font-size: 1.0625rem; font-weight: 600; }
.offcanvas-backdrop { --bs-backdrop-bg: #0c111d; --bs-backdrop-opacity: 0.4; }
.tooltip { --bs-tooltip-bg: #101828; --bs-tooltip-color: #fff; --bs-tooltip-border-radius: var(--hr-radius-sm); --bs-tooltip-font-size: 0.75rem; --bs-tooltip-padding-x: 0.625rem; --bs-tooltip-padding-y: 0.375rem; }
html[data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: #f2f4f7; --bs-tooltip-color: #101828; }
.popover { --bs-popover-bg: var(--hr-surface); --bs-popover-border-color: var(--hr-border); --bs-popover-header-bg: var(--hr-surface-2); --bs-popover-body-color: var(--hr-text); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 3px var(--hr-brand-ring); }
html[data-bs-theme="dark"] .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); }

/* --- Kartice (tabovi), pilule, lista, paginacija, progres --- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--hr-border);
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--hr-brand-text);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: 4px 20px;
}
.nav-tabs .nav-link {
    padding: 0.625rem 0.125rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--hr-text-3);
    font-weight: 500;
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--hr-text); border-bottom-color: var(--hr-border-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--hr-brand-text); border-bottom-color: var(--hr-brand); background: transparent; }
.nav-pills { --bs-nav-pills-border-radius: var(--hr-radius); --bs-nav-pills-link-active-color: var(--hr-brand-text); --bs-nav-pills-link-active-bg: var(--hr-brand-soft); }
.nav-pills .nav-link { color: var(--hr-text-2); font-weight: 500; }
.nav-pills .nav-link:hover:not(.active) { background: var(--hr-hover); color: var(--hr-text); }
.nav-pills .nav-link.active { font-weight: 600; }
.nav-link { color: var(--hr-text-2); }
.nav-link:hover, .nav-link:focus { color: var(--hr-text); }

.list-group {
    --bs-list-group-bg: var(--hr-surface);
    --bs-list-group-color: var(--hr-text);
    --bs-list-group-border-color: var(--hr-border);
    --bs-list-group-border-radius: var(--hr-radius-lg);
    --bs-list-group-action-hover-bg: var(--hr-hover);
    --bs-list-group-action-hover-color: var(--hr-text);
    --bs-list-group-action-color: var(--hr-text-2);
    --bs-list-group-active-bg: var(--hr-brand-soft);
    --bs-list-group-active-color: var(--hr-brand-text);
    --bs-list-group-active-border-color: var(--hr-brand-soft-2);
    --bs-list-group-item-padding-y: 0.75rem;
    --bs-list-group-item-padding-x: 1rem;
}
.pagination { --bs-pagination-color: var(--hr-text-2); --bs-pagination-bg: var(--hr-surface); --bs-pagination-border-color: var(--hr-border); --bs-pagination-hover-bg: var(--hr-hover); --bs-pagination-hover-color: var(--hr-text); --bs-pagination-active-bg: var(--hr-brand); --bs-pagination-active-border-color: var(--hr-brand); --bs-pagination-active-color: var(--hr-brand-contrast); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--hr-brand-ring); }
.progress { --bs-progress-bg: var(--hr-surface-3); --bs-progress-height: 8px; --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--hr-brand); }
.progress-bar { transition: width 0.4s ease; }
.accordion { --bs-accordion-bg: var(--hr-surface); --bs-accordion-border-color: var(--hr-border); --bs-accordion-btn-bg: var(--hr-surface); --bs-accordion-active-bg: var(--hr-brand-soft); --bs-accordion-active-color: var(--hr-brand-text); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--hr-brand-ring); --bs-accordion-border-radius: var(--hr-radius-lg); --bs-accordion-inner-border-radius: calc(var(--hr-radius-lg) - 1px); }

/* ============ 6. HRNET KOMPONENTE ============ */

/* Zaglavlje stranice: naslov + opis lijevo, radnje desno */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 8px 0 24px;
}
.page-header .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--hr-text);
}
.page-title > .bi:first-child { color: var(--hr-text-4); font-size: 0.85em; margin-right: 0.35rem; }
.page-subtitle { margin: 4px 0 0; color: var(--hr-text-3); font-size: 0.875rem; }
.page-eyebrow { font-size: 0.8125rem; color: var(--hr-text-3); margin-bottom: 2px; }

/* Naslov sekcije unutar stranice */
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.section-heading h2, .section-heading h3, .section-heading .h-sec { margin: 0; font-size: 1rem; font-weight: 600; }
.section-heading .section-sub { color: var(--hr-text-3); font-size: 0.8125rem; }

/* KPI pločica */
.stat-tile {
    position: relative;
    display: block;
    height: 100%;
    padding: 16px 18px;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius-lg);
    box-shadow: var(--hr-shadow-xs);
    color: inherit;
}
a.stat-tile { transition: border-color 0.12s ease, box-shadow 0.12s ease; }
a.stat-tile:hover { color: inherit; border-color: var(--hr-border-strong); box-shadow: var(--hr-shadow-sm); }
.stat-tile .stat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--hr-text-3); }
.stat-tile .stat-label .bi { font-size: 1rem; color: var(--hr-text-4); }
.stat-tile .stat-value { margin-top: 6px; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--hr-text); }
.stat-tile .stat-value small { font-size: 0.875rem; font-weight: 500; color: var(--hr-text-3); letter-spacing: 0; }
.stat-tile .stat-sub { margin-top: 6px; font-size: 0.75rem; color: var(--hr-text-3); }
.stat-tile.is-attention { border-color: var(--hr-warning-border); background: linear-gradient(0deg, var(--hr-warning-soft), var(--hr-warning-soft)), var(--hr-surface); }
.stat-tile.is-attention .stat-sub { color: var(--hr-warning-text); font-weight: 500; }

/* Prazno stanje */
.empty-state { text-align: center; padding: 40px 20px; color: var(--hr-text-3); }
.empty-state .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--hr-surface-3);
    color: var(--hr-text-3);
    font-size: 1.25rem;
}
.empty-state .empty-title { font-weight: 600; color: var(--hr-text); margin-bottom: 4px; }
.empty-state .empty-text { font-size: 0.8125rem; margin: 0 auto; max-width: 360px; }
.empty-state.empty-sm { padding: 20px 16px; }

/* Avatar s inicijalima (boja se bira po ID-u, ne mijenja se) */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--hr-brand-soft-2);
    color: var(--hr-brand-text);
    user-select: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.6875rem; }
.avatar-lg { width: 40px; height: 40px; font-size: 0.875rem; }
.avatar-xl { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-c0 { background: #dbeafe; color: #1e40af; }
.avatar-c1 { background: #ede9fe; color: #5b21b6; }
.avatar-c2 { background: #ccfbf1; color: #115e59; }
.avatar-c3 { background: #fef3c7; color: #92400e; }
.avatar-c4 { background: #fce7f3; color: #9d174d; }
.avatar-c5 { background: #e0e7ff; color: #3730a3; }
html[data-bs-theme="dark"] .avatar-c0 { background: rgba(59, 130, 246, 0.22); color: #93c5fd; }
html[data-bs-theme="dark"] .avatar-c1 { background: rgba(139, 92, 246, 0.22); color: #c4b5fd; }
html[data-bs-theme="dark"] .avatar-c2 { background: rgba(20, 184, 166, 0.22); color: #5eead4; }
html[data-bs-theme="dark"] .avatar-c3 { background: rgba(245, 158, 11, 0.22); color: #fcd34d; }
html[data-bs-theme="dark"] .avatar-c4 { background: rgba(236, 72, 153, 0.22); color: #f9a8d4; }
html[data-bs-theme="dark"] .avatar-c5 { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; }

/* Status zahtjeva: tačka + tekst */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 7px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--hr-neutral-soft);
    color: var(--hr-neutral-text);
    box-shadow: inset 0 0 0 1px var(--hr-neutral-border);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pending { background: var(--hr-warning-soft); color: var(--hr-warning-text); box-shadow: inset 0 0 0 1px var(--hr-warning-border); }
.status-approved { background: var(--hr-success-soft); color: var(--hr-success-text); box-shadow: inset 0 0 0 1px var(--hr-success-border); }
.status-rejected { background: var(--hr-danger-soft); color: var(--hr-danger-text); box-shadow: inset 0 0 0 1px var(--hr-danger-border); }
.status-info { background: var(--hr-info-soft); color: var(--hr-info-text); box-shadow: inset 0 0 0 1px var(--hr-info-border); }

/* Kartica s naslovom (zaglavlje + tijelo) */
.panel { background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-xs); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hr-border); }
.panel-head h2, .panel-head h3, .panel-head .panel-title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.panel-head .panel-sub { font-size: 0.8125rem; color: var(--hr-text-3); margin-top: 2px; }
.panel-body { padding: 18px; }
.panel > .table-responsive { border-radius: 0 0 calc(var(--hr-radius-lg) - 1px) calc(var(--hr-radius-lg) - 1px); }

/* Čip (filter / sažetak) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--hr-border);
    border-radius: 999px;
    background: var(--hr-surface);
    color: var(--hr-text-2);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}
button.chip:hover, a.chip:hover { background: var(--hr-hover); color: var(--hr-text); }
.chip.active { background: var(--hr-brand-soft); border-color: var(--hr-brand-soft-2); color: var(--hr-brand-text); }
.chip .chip-count { color: var(--hr-text-3); font-weight: 500; }
.chip-ok .bi { color: var(--hr-success); }

/* Segmentirani prekidač (npr. Tabela / Kartice) */
.segmented { display: inline-flex; padding: 2px; border-radius: var(--hr-radius); background: var(--hr-surface-3); gap: 2px; }
.segmented .btn { --bs-btn-padding-y: 0.3125rem; --bs-btn-padding-x: 0.625rem; --bs-btn-font-size: 0.8125rem; border: 0; box-shadow: none; color: var(--hr-text-3); background: transparent; border-radius: var(--hr-radius-sm); }
.segmented .btn.active { background: var(--hr-surface); color: var(--hr-text); box-shadow: var(--hr-shadow-xs); }

/* Mala legenda (boja + tekst) */
.legend-inline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: var(--hr-text-3); }
.legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.legend-inline i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Plutajuće dugme (telefon) */
.fab {
    position: fixed;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 1031;
    display: none;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--hr-brand);
    color: var(--hr-brand-contrast);
    font-weight: 600;
    box-shadow: var(--hr-shadow-lg);
}
@media (max-width: 991.98px) {
    .fab { display: inline-flex; }
    /* Prostor da plutajuće dugme ne prekrije zadnji red sadržaja (kalendar, tabela zahtjeva) */
    body:has(.fab) .app-page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ============ 7. STARE KLASE IZ ŠABLONA ============ */
.section-title { margin-bottom: 1rem; }
.icon-bubble { width: 36px; height: 36px; border-radius: 10px; background: var(--hr-surface-3); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--hr-text-3); }
.form-title { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--hr-text); padding-bottom: 12px; border-bottom: 1px solid var(--hr-border); }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--hr-text-3); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-mini { font-size: 0.75rem; }
.legend-mini span { padding: 3px 10px; background: var(--hr-surface-2); border-radius: 999px; }
.progress-item { padding: 12px; background: var(--hr-surface-2); border-radius: var(--hr-radius); margin-bottom: 12px; }
.progress-item:last-child { margin-bottom: 0 !important; }
.approver-info-box { background: var(--hr-surface-2); color: var(--hr-text); border: 1px solid var(--hr-border); }
.fc-mini-icon { font-size: 12px; margin-right: 4px; }
.fc-mini-fullname { font-size: 12px; font-weight: 500; }
.admin-hub-tile.active, .profile-header-card, .admin-header-card {
    background: linear-gradient(135deg, var(--hr-brand) 0%, color-mix(in srgb, var(--hr-brand) 70%, #0b1220) 100%) !important;
}
/* Šihterica: zaglavlje u boji brenda */
table.timesheet thead th { background: var(--hr-brand) !important; color: var(--hr-brand-contrast) !important; }
table.timesheet thead th.wknd { background: color-mix(in srgb, var(--hr-brand) 82%, #000) !important; }
table.timesheet thead th.sum-head { background: color-mix(in srgb, var(--hr-brand) 70%, #000) !important; }
/* Prijava (login.html / register.html imaju i svoje stilove) */
.login-box { position: relative; z-index: 10; background: #fff; border-radius: 24px; padding: 48px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: toast-in 0.4s ease-out; }
.login-icon { width: 72px; height: 72px; margin: 0 auto; background: var(--hr-brand); border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.login-icon i { font-size: 36px; color: #fff; }
.login-btn { background: var(--hr-brand); border: none; border-radius: 12px; padding: 13px 24px; font-size: 15px; font-weight: 600; color: #fff; }
.login-btn:hover { background: var(--hr-brand-hover); color: #fff; }
.register-card { background: var(--hr-surface-2); border-radius: 12px; padding: 16px; text-align: center; margin-top: 24px; }
.divider { display: flex; align-items: center; text-align: center; margin: 24px 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--hr-border); }
.divider span { padding: 0 16px; color: var(--hr-text-3); font-size: 14px; }

/* ============ 8. BIBLIOTEKE ============ */

/* --- FullCalendar --- */
.fc {
    font-family: inherit;
    --fc-border-color: var(--hr-border);
    --fc-page-bg-color: var(--hr-surface);
    --fc-neutral-bg-color: var(--hr-surface-2);
    --fc-neutral-text-color: var(--hr-text-3);
    --fc-today-bg-color: var(--hr-brand-soft);
    --fc-highlight-color: var(--hr-brand-ring);
    --fc-list-event-hover-bg-color: var(--hr-hover);
    --fc-button-text-color: var(--hr-text-2);
    --fc-button-bg-color: var(--hr-surface);
    --fc-button-border-color: var(--hr-border-strong);
    --fc-button-hover-bg-color: var(--hr-hover);
    --fc-button-hover-border-color: var(--hr-border-strong);
    --fc-button-active-bg-color: var(--hr-brand-soft);
    --fc-button-active-border-color: var(--hr-brand-soft-2);
}
.fc .fc-toolbar-title { font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--hr-text) !important; text-transform: capitalize; }
.fc .fc-button-primary {
    background: var(--hr-surface) !important;
    border: 1px solid var(--hr-border-strong) !important;
    color: var(--hr-text-2) !important;
    border-radius: var(--hr-radius) !important;
    padding: 0.375rem 0.75rem !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    box-shadow: var(--hr-shadow-xs) !important;
    text-transform: none;
}
.fc .fc-button-primary:hover { background: var(--hr-hover) !important; color: var(--hr-text) !important; filter: none !important; }
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--hr-brand-soft) !important;
    border-color: var(--hr-brand-soft-2) !important;
    color: var(--hr-brand-text) !important;
    filter: none !important;
}
.fc .fc-button-primary:disabled { background: var(--hr-surface-2) !important; color: var(--hr-text-4) !important; opacity: 1; }
.fc .fc-button-primary:focus { box-shadow: 0 0 0 3px var(--hr-brand-ring) !important; }
.fc .fc-button-group > .fc-button { border-radius: 0 !important; }
.fc .fc-button-group > .fc-button:first-child { border-top-left-radius: var(--hr-radius) !important; border-bottom-left-radius: var(--hr-radius) !important; }
.fc .fc-button-group > .fc-button:last-child { border-top-right-radius: var(--hr-radius) !important; border-bottom-right-radius: var(--hr-radius) !important; }
.fc-theme-standard .fc-scrollgrid { border-radius: var(--hr-radius-lg); overflow: hidden; }
.fc-col-header-cell { background: var(--hr-surface-2); padding: 8px 4px !important; }
.fc .fc-col-header-cell-cushion { color: var(--hr-text-3); font-weight: 500; font-size: 0.75rem; text-transform: capitalize; }
.fc a.fc-daygrid-day-number, .fc a.fc-col-header-cell-cushion, .fc a.fc-list-day-text, .fc a.fc-list-day-side-text { text-decoration: none; color: inherit; }
.fc-daygrid-day-number { color: var(--hr-text-2); font-weight: 500; padding: 6px 8px !important; font-size: 0.8125rem; }
.fc-day-other .fc-daygrid-day-number { color: var(--hr-text-4); }
.fc-day-sat, .fc-day-sun { background: var(--hr-surface-2); }
.fc-daygrid-day.fc-day-today { background: var(--hr-brand-soft) !important; }
.fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--hr-brand);
    color: var(--hr-brand-contrast);
    width: 26px;
    height: 26px;
    margin: 4px;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fc-highlight { background: var(--hr-brand-ring) !important; }
.fc-list-day-cushion { background: var(--hr-surface-2) !important; }
.fc .fc-list-event:hover td { background: var(--hr-hover) !important; }

/* Odsustva u kalendaru: meka pozadina + traka u boji vrste + tamni tekst (čitljivo u obje teme) */
.fc-event {
    border: none !important;
    border-radius: 5px !important;
    padding: 2px 6px !important;
    margin: 1px 2px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.fc-daygrid-event-dot { display: none !important; }
.fc-event-main { color: inherit !important; }
.event-godisnji, .event-bolovanje, .event-placeni, .event-neplaceno, .event-plan, .event-holiday { --ev: var(--hr-leave-annual); }
.event-bolovanje { --ev: var(--hr-leave-sick); }
.event-placeni { --ev: var(--hr-leave-paid); }
.event-neplaceno { --ev: var(--hr-leave-unpaid); }
.event-plan { --ev: var(--hr-leave-plan); }
.event-holiday { --ev: var(--hr-leave-holiday); }
.fc-event.event-godisnji, .fc-event.event-bolovanje, .fc-event.event-placeni,
.fc-event.event-neplaceno, .fc-event.event-plan, .fc-event.event-holiday {
    background: color-mix(in srgb, var(--ev) 16%, var(--hr-surface)) !important;
    color: var(--hr-text) !important;
    box-shadow: inset 3px 0 0 var(--ev) !important;
}
.fc-event.event-plan { box-shadow: inset 3px 0 0 var(--ev), inset 0 0 0 1px color-mix(in srgb, var(--ev) 50%, transparent) !important; }
.fc-event.event-holiday { font-style: normal !important; }
.fc-list-event.fc-event { box-shadow: none !important; background: transparent !important; }
.fc-list-event .fc-list-event-dot { border-color: var(--ev, var(--hr-brand)) !important; }
.event-godisnji .fc-event-main, .event-bolovanje .fc-event-main, .event-placeni .fc-event-main,
.event-neplaceno .fc-event-main, .event-plan .fc-event-main, .event-holiday .fc-event-main { background: transparent !important; color: inherit !important; }
.fc-more-link { font-size: 0.6875rem !important; font-weight: 600 !important; color: var(--hr-brand-text) !important; padding: 1px 6px !important; background: var(--hr-brand-soft) !important; border-radius: 4px !important; }

/* --- Choices.js --- */
.choices { position: relative !important; z-index: 100 !important; margin-bottom: 0; }
.choices__inner {
    min-height: 38px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--hr-border-strong) !important;
    border-radius: var(--hr-radius) !important;
    background: var(--hr-surface) !important;
    color: var(--hr-text);
    font-size: 0.875rem !important;
    box-shadow: var(--hr-shadow-xs);
}
.choices.is-focused .choices__inner, .choices.is-open .choices__inner { border-color: var(--hr-brand) !important; box-shadow: 0 0 0 3px var(--hr-brand-ring) !important; }
.choices__list--dropdown, .choices__list[aria-expanded] {
    z-index: 101 !important;
    background: var(--hr-surface) !important;
    border: 1px solid var(--hr-border) !important;
    border-radius: var(--hr-radius) !important;
    box-shadow: var(--hr-shadow-lg) !important;
    color: var(--hr-text) !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--hr-hover) !important; }
.choices__list--multiple .choices__item {
    background: var(--hr-brand-soft) !important;
    color: var(--hr-brand-text) !important;
    border: 1px solid var(--hr-brand-soft-2) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}
.choices__list--multiple .choices__item .choices__button { border-left: 1px solid var(--hr-brand-soft-2) !important; filter: none; opacity: 0.7; }
html[data-bs-theme="dark"] .choices__button { filter: invert(1); }
.choices__input { background: transparent !important; color: var(--hr-text) !important; font-size: 0.875rem !important; }
.choices__placeholder, .choices__input::placeholder { color: var(--hr-text-4) !important; opacity: 1 !important; }

/* --- Flatpickr --- */
.flatpickr-calendar { background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-lg); font-family: inherit; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: var(--hr-text); fill: var(--hr-text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--hr-text-3); }
span.flatpickr-weekday { color: var(--hr-text-3); font-weight: 500; }
.flatpickr-day { color: var(--hr-text-2); border-radius: var(--hr-radius-sm); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--hr-hover); border-color: var(--hr-hover); }
.flatpickr-day.today { border-color: var(--hr-brand-soft-2); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--hr-brand); border-color: var(--hr-brand); color: var(--hr-brand-contrast); }
.flatpickr-day.inRange { background: var(--hr-brand-soft); border-color: var(--hr-brand-soft); box-shadow: -5px 0 0 var(--hr-brand-soft), 5px 0 0 var(--hr-brand-soft); color: var(--hr-text); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--hr-text-4); }
.flatpickr-input[readonly] { background-color: var(--hr-surface); }

/* ============ 9. GRAFIKONI (paleta provjerena na daltonizam; isti tonovi kao static/js/hr-charts.js) ============ */
:root {
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
    --viz-negative: #e34948;
    --viz-neutral: #898781;
    --viz-track: var(--hr-surface-3);
    --viz-surface: var(--hr-surface);
}
html[data-bs-theme="dark"] {
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-negative: #e66767;
}
.hr-meter { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--viz-track); }
.hr-meter-seg { display: block; height: 100%; min-width: 3px; }
.hr-meter-used { background: var(--viz-1); }
.hr-meter-pending { background: var(--viz-2); }
.hr-meter-free { background: var(--viz-track); box-shadow: inset 0 0 0 1px var(--hr-border-strong); }
.hr-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
details.chart-table > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--hr-text-3);
}
details.chart-table > summary::-webkit-details-marker { display: none; }
details.chart-table > summary::before { content: "\F479"; font-family: "bootstrap-icons"; }
details.chart-table > summary:hover { color: var(--hr-text); }
.chart-data-table { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.chart-data-table th, .chart-data-table td { background: transparent !important; padding: 0.35rem 0.5rem !important; }
.chart-data-table thead th { font-size: 0.75rem !important; }
.chart-data-table tbody th[scope="row"], .chart-data-table tfoot th { font-weight: 400; color: var(--hr-text) !important; }
.chart-data-table tfoot th, .chart-data-table tfoot td { border-top: 1px solid var(--hr-border); font-weight: 600; }
.enps-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--viz-track); }
.enps-stack > span { display: block; height: 100%; }
.viz-bar { height: 8px; border-radius: 4px; background: var(--viz-track); overflow: hidden; }
.viz-bar > span { display: block; height: 100%; border-radius: 0 4px 4px 0; }

/* ============ 10. PRISTUPAČNOST, ŠTAMPA, TELEFON ============ */
:focus-visible { outline: 2px solid var(--hr-brand-text); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .fc-button:focus-visible { outline: none; }
#sidebar .sidebar-menu a:focus-visible, .icon-btn:focus-visible, .nav-group-toggle:focus-visible { outline: 2px solid var(--hr-brand-text); outline-offset: -2px; }
.visually-hidden-focusable:focus { position: fixed !important; top: 8px; left: 8px; z-index: 2000; padding: 8px 12px; background: var(--hr-surface); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow-lg); }

.fade-in { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hr-text-4) 45%, transparent); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--hr-text-4) 70%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 991.98px) {
    :root { --hr-page-pad: 20px; }
}
@media (max-width: 576px) {
    :root { --hr-page-pad: 14px; --hr-topbar-h: 56px; }
    .app-page { padding-top: 4px; }
    .page-header { margin: 4px 0 16px; }
    .page-title { font-size: 1.25rem; }
    .card-body { padding: 16px; }
    #content .container-fluid.p-4, #content .container-fluid.px-4 { padding-left: 0 !important; padding-right: 0 !important; }
    #content .container-fluid.p-4 { padding-top: 0.5rem !important; }
    .flash-container { top: 8px; right: 8px; left: 8px; width: auto; }
    .stat-tile { padding: 14px; }
    .stat-tile .stat-value { font-size: 1.5rem; }
}
@media (max-width: 768px) {
    .fc .fc-toolbar { flex-direction: column; gap: 10px; }
    .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
    .fc .fc-button { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; }
    .login-box { padding: 32px 24px; margin: 20px; border-radius: 20px; }
}

@media print {
    #sidebar, .app-topbar, .bottom-nav, .flash-container, .fab, #sidebar-overlay { display: none !important; }
    #content { margin-left: 0 !important; }
    .app-page { padding: 0 !important; max-width: none; }
    body { background: #fff !important; }
    .card, .panel, .stat-tile { box-shadow: none !important; }
}
.min-w-0 { min-width: 0; }
.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.table .btn, .page-actions .btn, .panel-head .btn { white-space: nowrap; }
.form-switch { display: inline-flex; align-items: center; gap: 8px; }
.form-switch .form-check-input { margin-top: 0; }
/* Apsolutno pozicionirani elementi (npr. .visually-hidden) ostaju unutar skrolabilne tabele */
.table-responsive { position: relative; }
.d-contents { display: contents; }
/* Legenda i oznake mogu koristiti iste event-* klase kao kalendar */
.legend-dot[class*="event-"], .hr-swatch[class*="event-"] { background: var(--ev); }
.event-plan.event-my-plan { --ev: var(--hr-brand); }
@media print { .no-print { display: none !important; } }

/* Traka javne demo verzije (podaci se vraćaju u početno stanje) */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px;
    border: 1px dashed var(--hr-brand); border-radius: var(--hr-radius-lg); background: var(--hr-brand-soft);
    color: var(--hr-text); font-size: 0.8125rem; }
.demo-bar > .bi { color: var(--hr-brand-text); font-size: 1rem; }

/* Traka probnog perioda / nedovršenog postavljanja firme (samostalna registracija) */
.trial-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px;
    border: 1px solid var(--hr-info-border); border-radius: var(--hr-radius-lg); background: var(--hr-info-soft); color: var(--hr-text); font-size: 0.8125rem; }
.trial-bar > .bi { color: var(--hr-info-text); font-size: 1rem; }
.trial-bar.is-urgent { border-color: var(--hr-warning-border); background: var(--hr-warning-soft); }
.trial-bar.is-urgent > .bi { color: var(--hr-warning-text); }

/* Označeni izbor (npr. radni dani Pon-Ned) jasno se razlikuje od neoznačenog */
.btn-check:checked + .btn-outline-secondary { background: var(--hr-brand-soft); border-color: var(--hr-brand); color: var(--hr-brand-text); font-weight: 600; }
.btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px var(--hr-brand-ring); }

/* Mala polja za broj dana u tabelama (npr. početno stanje u čarobnjaku) */
.days-input { width: 5.5rem; }