/* =====================================================================
   SPVH – tema "Topla neutralna" (varijanta C)
   ---------------------------------------------------------------------
   Učitava se iz includes/header.php NAKON style.css, pa prebojava cijelu
   aplikaciju bez mijenjanja pojedinih stranica. Boje se mijenjaju na
   jednom mjestu (varijable ispod). Selektori počinju s .spvh-c (klasa na
   <body>) da nadjačaju stilove iz style.css, footer.php i stranica.
   Font Figtree (SIL OFL) je u assets/tema/fonts - radi i bez interneta.
   ===================================================================== */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/figtree-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/figtree-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/figtree-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/figtree-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/figtree-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/figtree-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/figtree-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/figtree-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
    /* --- paleta teme (mijenjati ovdje) --- */
    --t-bg: #FAF8F5;            /* pozadina stranice */
    --t-rail: #F1ECE4;          /* uski izbornik */
    --t-surface: #FFFFFF;       /* kartice, tablice */
    --t-surface-2: #F7F4EF;     /* zaglavlja tablica, hover */
    --t-border: #ECE5DA;
    --t-border-strong: #D8CFC2;
    --t-text: #2B2722;
    --t-muted: #6E655A;
    --t-accent: #2A4D7E;        /* glavna boja (SPVH plava, topliji ton) */
    --t-accent-dark: #1D3960;
    --t-accent-soft: #E9EEF5;
    --t-green: #2F7A4D;  --t-green-soft: #E6F2EA;
    --t-amber: #B45309;  --t-amber-soft: #FBEBDC;
    --t-red: #B42318;    --t-red-soft: #FDE8E6;
    --t-purple: #6A4AA5; --t-purple-soft: #EFE9F7;
    --t-teal: #2A6F97;   --t-teal-soft: #E3F0F7;
    --t-radius: 14px;
    --t-radius-sm: 10px;
    --t-shadow: 0 1px 2px rgba(43, 39, 34, .05);
    --t-shadow-pop: 0 12px 32px rgba(43, 39, 34, .14);
    --t-rail-w: 92px;

    /* stare varijable iz style.css -> nova paleta (gase ljubičaste gradijente) */
    --primary: var(--t-accent);
    --primary-dark: var(--t-accent-dark);
    --primary-light: #5B7DB0;
    --secondary: var(--t-accent);
    --success: var(--t-green);
    --danger: var(--t-red);
    --warning: var(--t-amber);
    --info: var(--t-teal);
    --light: var(--t-bg);
    --dark: var(--t-text);
    --gray: var(--t-muted);
    --gray-light: var(--t-border);
    --border: var(--t-border-strong);
    --card-shadow: var(--t-shadow);
    --hover-shadow: var(--t-shadow-pop);
    --border-radius: var(--t-radius);
    --sidebar-width: var(--t-rail-w);
}

/* ---------------------------------------------------------------- osnova */
.spvh-c {
    --navbar-height: 0px;       /* stranice su odmicale sadržaj ispod stare gornje trake */
    background: var(--t-bg) !important;
    color: var(--t-text);
    font-family: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
}
.spvh-c input, .spvh-c select, .spvh-c textarea, .spvh-c button { font-family: inherit; }
.spvh-c h1, .spvh-c .dashboard-title, .spvh-c .login-header h1 {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--t-text) !important;
    font-weight: 700;
    letter-spacing: -.3px;
}
.spvh-c h1, .spvh-c .dashboard-title { font-size: 1.85rem; }
.spvh-c h2 { color: var(--t-text); font-size: 1.4rem; }
.spvh-c h3 { color: var(--t-text); }
.spvh-c p { color: var(--t-muted); }
.spvh-c a { color: var(--t-accent); }
.spvh-c a:hover { color: var(--t-accent-dark); }
.spvh-c ::selection { background: var(--t-accent-soft); }
.spvh-c :focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.spvh-c ::-webkit-scrollbar-thumb { background: #CFC6B8; }
.spvh-c ::-webkit-scrollbar-thumb:hover { background: #B7AC9C; }
.spvh-c ::-webkit-scrollbar-track { background: transparent; }

.spvh-c .dashboard-header, .spvh-c .page-header {
    border-bottom: 1px solid var(--t-border);
    margin-bottom: 24px;
    padding-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}
.spvh-c .section-title { border-bottom-color: var(--t-border); font-size: 1.2rem; }

/* ------------------------------------------------------------ izbornik */
/* Gornja traka: na računalu skrivena (logo i korisnik su u uskom izborniku),
   na mobitelu svijetla traka s gumbom ☰ */
.spvh-c .navbar {
    background: var(--t-surface);
    color: var(--t-text);
    box-shadow: none;
    border-bottom: 1px solid var(--t-border);
    height: 60px;
}
.spvh-c .navbar .user-info { background: var(--t-surface-2); }
.spvh-c .navbar .user-role { background: var(--t-accent-soft); color: var(--t-accent-dark); }
.spvh-c .navbar .nav-link { color: var(--t-text); }
.spvh-c .navbar .nav-link:hover { background: var(--t-surface-2); color: var(--t-text); transform: none; }
.spvh-c .nav-brand { font-size: 1.15rem; gap: 10px; }
.spvh-c .nav-brand-icon { background: var(--t-accent-dark); box-shadow: none; width: 46px; height: 46px; border-radius: 12px; padding: 3px; overflow: hidden; }
.spvh-c .nav-brand-icon img, .spvh-c .rail-brand img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

.spvh-c .sidebar {
    background: var(--t-rail);
    box-shadow: none;
    border-right: 1px solid #E5DED3;
}
.spvh-c .sidebar-menu { display: flex; flex-direction: column; gap: 2px; }
.spvh-c .sidebar-link { color: #5C5348; font-weight: 600; border-left: 0 !important; border-radius: 12px; }
.spvh-c .sidebar-link i { color: inherit; }
.spvh-c .sidebar-link:hover { background: rgba(255, 255, 255, .65); color: var(--t-text); }
.spvh-c .sidebar-link.active { background: var(--t-surface); color: var(--t-accent); box-shadow: var(--t-shadow) !important; }
.spvh-c .sidebar .badge-notification {
    background: var(--t-amber) !important; color: #fff; border-radius: 8px; font-size: 10.5px;
    padding: 0 5px; min-width: 0; line-height: 16px; top: 4px; right: 14px; box-shadow: none;
}

/* logo i korisnik u uskom izborniku (samo na računalu) */
.spvh-c .rail-brand, .spvh-c .rail-user { display: none; }

/* podizbornik (Članovi, KUP, Arhiva, Postavke…) */
.spvh-c .dropdown-menu {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-pop);
    padding: 6px;
}
.spvh-c .dropdown-item {
    color: var(--t-text); border-radius: var(--t-radius-sm); padding: 9px 12px; min-height: 0; font-size: .95rem; border-left: 0 !important;
}
.spvh-c .dropdown-item i { color: var(--t-muted); width: 18px; text-align: center; }
.spvh-c .dropdown-item:hover { background: var(--t-surface-2); color: var(--t-text); padding-left: 12px; }
.spvh-c .dropdown-item.active { background: var(--t-accent-soft); color: var(--t-accent-dark); font-weight: 600; }
.spvh-c .dropdown-item.active i { color: var(--t-accent); }
.spvh-c .rail-flyout-naslov { display: none; }

/* --- računalo i tablet: uski izbornik s ikonama --- */
@media (min-width: 769px) {
    .spvh-c .navbar { display: none; }
    .spvh-c .sidebar {
        top: 0; bottom: 0; left: 0;
        width: var(--t-rail-w);
        transform: none !important;
        padding: 14px 0 12px;
        display: flex; flex-direction: column;
        overflow-y: auto; overflow-x: hidden;
        scrollbar-width: none;
    }
    .spvh-c .sidebar::-webkit-scrollbar { display: none; }
    .spvh-c .menu-toggle { display: none !important; }
    .spvh-c .main-content, .spvh-c .main-content.shifted { margin-left: var(--t-rail-w); padding: 0; }
    .spvh-c .container { padding: 26px 36px 30px; }

    .spvh-c .rail-brand { display: flex; justify-content: center; margin: 0 0 16px; }
    .spvh-c .rail-brand a {
        width: 74px; height: 74px; border-radius: 18px; background: var(--t-accent); color: #fff; font-weight: 700;
        font-size: 17px; display: flex; align-items: center; justify-content: center; text-decoration: none; overflow: hidden;
    }
    /* sa slikom loga: bez okvira, slika sama ispunjava prostor */
    /* logo ima bijela slova -> tamnoplava podloga, slika gotovo do ruba */
    .spvh-c .rail-brand a.ima-logo { background: var(--t-accent-dark); border: 0; border-radius: 18px; }
    .spvh-c .rail-brand a.ima-logo img { padding: 5px; border-radius: 0; }

    .spvh-c .sidebar-menu { flex: 1; align-items: center; }
    .spvh-c .sidebar-item { width: 76px; }
    .spvh-c .sidebar-link,
    .spvh-c .sidebar-link:hover {
        flex-direction: column; justify-content: center; gap: 4px;
        padding: 9px 2px 7px; min-height: 0;
        font-size: 11.5px; line-height: 1.15; text-align: center;
        position: relative;
    }
    .spvh-c .sidebar-link i { font-size: 18px; width: auto; }
    .spvh-c .sidebar-link span {
        white-space: normal !important; overflow: hidden; text-overflow: clip;
        max-width: 72px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    }
    .spvh-c .sidebar-link .dropdown-icon { display: none; }
    .spvh-c .sidebar-link .badge-notification { position: absolute; }

    /* podizbornik izlazi desno od uskog izbornika (položaj postavlja skripta u header.php) */
    .spvh-c .sidebar .dropdown-menu {
        position: fixed; left: calc(var(--t-rail-w) + 8px); right: auto;
        top: var(--fly-top, 80px); margin: 0; min-width: 250px; max-height: calc(100vh - 24px); overflow-y: auto;
        z-index: 1100; animation: spvhFly .14s ease-out;
    }
    .spvh-c .rail-flyout-naslov {
        display: block; padding: 8px 12px 6px; font-size: 12px; font-weight: 700; color: var(--t-muted);
        text-transform: uppercase; letter-spacing: .8px;
    }

    .spvh-c .rail-user { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; margin-top: 8px; border-top: 1px solid #E5DED3; width: 76px; align-self: center; }
    .spvh-c .rail-user .rail-avatar {
        width: 36px; height: 36px; border-radius: 12px; background: var(--t-surface); border: 1px solid var(--t-border);
        color: #5C4A33; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; text-transform: uppercase;
    }
    .spvh-c .rail-user a {
        font-size: 11.5px; font-weight: 600; color: #5C5348; text-decoration: none; display: flex; flex-direction: column;
        align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px; width: 100%;
    }
    .spvh-c .rail-user a:hover { background: rgba(255, 255, 255, .65); color: var(--t-red); }
}
@keyframes spvhFly { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* --- mobitel: izbornik se otvara gumbom ☰ --- */
@media (max-width: 768px) {
    .spvh-c .sidebar {
        transform: none !important; left: -290px; width: 280px; top: 60px; z-index: 1050; /* iznad gornje trake, da gumb ☰ prima klik */
        transition: left .25s ease; box-shadow: var(--t-shadow-pop); padding: 10px 8px;
    }
    .spvh-c .sidebar.active { left: 0; }
    .spvh-c .menu-toggle {
        display: flex !important; position: fixed; top: 10px; left: 10px; z-index: 1101;
        background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border-strong); box-shadow: none; border-radius: 12px;
    }
    .spvh-c .nav-container { padding-left: 64px !important; }
    .spvh-c .sidebar-link { padding: 12px 14px; }
    .spvh-c .sidebar-link span { flex: 1; text-align: left; }
    .spvh-c .sidebar .dropdown-menu { position: static; box-shadow: none; margin: 2px 0 6px 14px; }
    .spvh-c .sidebar-link:hover { padding-left: 14px; }
    .spvh-c .main-content, .spvh-c .main-content.shifted { margin-left: 0 !important; padding-top: 64px !important; }
}

/* -------------------------------------------------------------- kartice */
.spvh-c .card, .spvh-c .stat-card, .spvh-c .region-stat-card, .spvh-c .form-container,
.spvh-c .search-container, .spvh-c .data-table-container, .spvh-c .no-data, .spvh-c .empty-state {
    background: var(--t-surface);
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
}
.spvh-c .card:hover, .spvh-c .stat-card:hover, .spvh-c .region-stat-card:hover {
    transform: none; box-shadow: var(--t-shadow); border-color: var(--t-border) !important;
}
.spvh-c .stat-card::before, .spvh-c .region-stat-card::before, .spvh-c .login-box::before { display: none; }
.spvh-c .stats-grid { gap: 16px; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.spvh-c .stat-card { padding: 18px 20px; }
.spvh-c .stat-icon, .spvh-c .region-stat-icon {
    width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; margin-bottom: 0;
    background: var(--t-accent-soft) !important; color: var(--t-accent) !important; box-shadow: none;
}
.spvh-c .stats-grid > :nth-child(4n+2) .stat-icon { background: var(--t-purple-soft) !important; color: var(--t-purple) !important; }
.spvh-c .stats-grid > :nth-child(4n+3) .stat-icon { background: var(--t-green-soft) !important; color: var(--t-green) !important; }
.spvh-c .stats-grid > :nth-child(4n+4) .stat-icon { background: var(--t-amber-soft) !important; color: var(--t-amber) !important; }
.spvh-c .stat-info h3, .spvh-c .stat-value, .spvh-c .region-stat-info h3 {
    font-size: 1.6rem; font-weight: 700; color: var(--t-text); font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.spvh-c .stat-info p, .spvh-c .stat-label { color: var(--t-muted); font-size: .88rem; }
.spvh-c .region-details, .spvh-c .info-box { background: var(--t-surface-2); border-left: 0; border: 1px solid var(--t-border); }

/* -------------------------------------------------------------- gumbi */
.spvh-c .btn {
    border-radius: 999px; font-weight: 600; font-size: .93rem; padding: 0 18px; min-height: 40px; gap: 8px;
    box-shadow: none !important; border: 1px solid transparent; transform: none !important; transition: background-color .15s, border-color .15s, color .15s;
}
.spvh-c .btn::before { display: none; }
.spvh-c .btn-sm { min-height: 34px; padding: 0 13px; font-size: .86rem; }
.spvh-c .btn-primary { background: var(--t-accent) !important; border-color: var(--t-accent); color: #fff !important; }
.spvh-c .btn-primary:hover { background: var(--t-accent-dark) !important; }
.spvh-c .btn-secondary, .spvh-c .btn-light, .spvh-c .btn-outline {
    background: var(--t-surface) !important; color: var(--t-text) !important; border-color: var(--t-border-strong);
}
.spvh-c .btn-secondary:hover, .spvh-c .btn-light:hover, .spvh-c .btn-outline:hover { background: var(--t-surface-2) !important; }
.spvh-c .btn-success { background: var(--t-green) !important; border-color: var(--t-green); color: #fff !important; }
.spvh-c .btn-success:hover { background: #256640 !important; }
.spvh-c .btn-danger { background: var(--t-surface) !important; color: var(--t-red) !important; border-color: #F1C4BF; }
.spvh-c .btn-danger:hover { background: var(--t-red-soft) !important; }
.spvh-c .btn-info { background: var(--t-accent-soft) !important; color: var(--t-accent-dark) !important; border-color: #C9D5E6; }
.spvh-c .btn-info:hover { background: #DCE5F1 !important; }
.spvh-c .btn-warning { background: var(--t-amber-soft) !important; color: #8A4006 !important; border-color: #F2CFAE; }
.spvh-c .btn-action { border-radius: 50%; box-shadow: none; }
.spvh-c .btn-action.edit { background: var(--t-accent-soft); color: var(--t-accent); }
.spvh-c .btn-action.delete { background: var(--t-red-soft); color: var(--t-red); }
.spvh-c .btn-action:hover { transform: none; box-shadow: none; filter: brightness(.96); }

/* gumbi stranica Potencijalni / KUP / Zahtjevi (pot-stil.css) */
.spvh-c .pc-btn, .spvh-c .pc-btn:hover { color: #fff; }
.spvh-c .pc-btn { border-radius: 999px; padding: 9px 16px; font-weight: 600; background: var(--t-accent); }
.spvh-c .pc-btn:hover { filter: none; background: var(--t-accent-dark); }
.spvh-c .pc-btn.siva, .spvh-c .pc-btn.siva:hover { color: var(--t-text); border: 1px solid var(--t-border-strong); }
.spvh-c .pc-btn.siva { background: var(--t-surface); }
.spvh-c .pc-btn.siva:hover { background: var(--t-surface-2); }
.spvh-c .pc-btn.zelena { background: var(--t-green); }
.spvh-c .pc-btn.zelena:hover { background: #256640; }
.spvh-c .pc-btn.crvena, .spvh-c .pc-btn.crvena:hover { color: var(--t-red); border: 1px solid #F1C4BF; }
.spvh-c .pc-btn.crvena { background: var(--t-surface); }
.spvh-c .pc-btn.crvena:hover { background: var(--t-red-soft); }
.spvh-c .pc-btn.ljub { background: var(--t-purple); }
.spvh-c .pc-btn.ljub:hover { background: #57398C; }
.spvh-c .pc-btn.info, .spvh-c .pc-btn.info:hover { color: var(--t-accent-dark); border: 1px solid #C9D5E6; }
.spvh-c .pc-btn.info { background: var(--t-accent-soft); }
.spvh-c .pc-btn.info:hover { background: #DCE5F1; }
/* ikone u karticama sa zbrojevima (boje su upisane u stranicu) -> pastelne */
.spvh-c .pc-stat { border-color: var(--t-border); border-radius: var(--t-radius); }
.spvh-c .pc-stat .ik { border-radius: 12px; background: var(--t-accent-soft) !important; color: var(--t-accent) !important; }
.spvh-c .pc-stats > :nth-child(5n+2) .ik { background: var(--t-purple-soft) !important; color: var(--t-purple) !important; }
.spvh-c .pc-stats > :nth-child(5n+3) .ik { background: var(--t-teal-soft) !important; color: var(--t-teal) !important; }
.spvh-c .pc-stats > :nth-child(5n+4) .ik { background: var(--t-green-soft) !important; color: var(--t-green) !important; }
.spvh-c .pc-stats > :nth-child(5n+5) .ik { background: var(--t-amber-soft) !important; color: var(--t-amber) !important; }
.spvh-c .pc-stat b { color: var(--t-text); font-variant-numeric: tabular-nums; }
.spvh-c .pc-btn.mali { padding: 5px 11px; }
.spvh-c .pc-ak { border-radius: 50%; width: 30px; height: 30px; background: var(--t-accent-soft); color: var(--t-accent); }

/* -------------------------------------------------------------- obrasci */
.spvh-c .form-control, .spvh-c .search-input,
.spvh-c .pc-filter input, .spvh-c .pc-filter select, .spvh-c .pc-polje input, .spvh-c .pc-polje select, .spvh-c .pc-polje textarea {
    background-color: var(--t-surface);
    border: 1px solid var(--t-border-strong);
    border-radius: var(--t-radius-sm);
    color: var(--t-text);
    font-size: .95rem;
}
.spvh-c .form-control { padding: 9px 12px; }
.spvh-c .form-control:focus, .spvh-c .search-input:focus,
.spvh-c .pc-filter input:focus, .spvh-c .pc-filter select:focus, .spvh-c .pc-polje input:focus, .spvh-c .pc-polje select:focus {
    border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(42, 77, 126, .14); outline: none; background-color: var(--t-surface);
}
.spvh-c .form-label, .spvh-c .form-group label, .spvh-c .pc-filter label, .spvh-c .pc-polje label { color: #4A4239; font-weight: 600; font-size: .86rem; }
.spvh-c .form-group { margin-bottom: 18px; }
.spvh-c .form-actions { border-top-color: var(--t-border); }
.spvh-c .search-container, .spvh-c .pc-filter, .spvh-c .filter-section, .spvh-c .filters-card { border-radius: var(--t-radius); }

/* -------------------------------------------------------------- tablice */
.spvh-c .data-table thead, .spvh-c .members-table thead { background: none !important; }
.spvh-c .data-table th, .spvh-c .members-table th, .spvh-c .members-table thead th,
.spvh-c .pc-tablica thead th, .spvh-c table.pregled th {
    background: var(--t-surface-2) !important; color: var(--t-muted) !important;
    text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .85rem;
    border-bottom: 1px solid var(--t-border);
}
.spvh-c .data-table th, .spvh-c .data-table td { padding: 12px 14px; }
.spvh-c .data-table tbody tr, .spvh-c .members-table tbody tr { border-bottom: 1px solid #F1ECE4; transform: none !important; }
.spvh-c .data-table tbody tr:hover, .spvh-c .members-table tbody tr:hover,
.spvh-c .pc-tablica tbody tr.red:hover, .spvh-c table.pregled tbody tr:hover { background: #FBF9F6 !important; }
.spvh-c .pc-tablica tfoot td { background: var(--t-surface-2); border-top: 1px solid var(--t-border-strong); }
.spvh-c .pc-tablica-okvir, .spvh-c .members-table-container, .spvh-c .table-scroll {
    border: 1px solid var(--t-border); border-radius: var(--t-radius); background: var(--t-surface);
}
.spvh-c .sort-link, .spvh-c table.pregled th a { color: var(--t-muted) !important; }
.spvh-c .member-avatar, .spvh-c .pc-avatar {
    background: #F1ECE4 !important; color: #5C4A33 !important; border-radius: 12px !important; font-weight: 700;
}
.spvh-c .up-tab th { background: var(--t-surface-2); color: var(--t-muted); }
.spvh-c tr.det > td { background: #FBF9F6; }

/* ----------------------------------------------- značke, poruke, statusi */
.spvh-c .badge { border-radius: 8px; font-weight: 600; font-size: .8rem; padding: 3px 10px; }
.spvh-c .badge-primary, .spvh-c .badge-info { background: var(--t-accent-soft); color: var(--t-accent-dark); }
.spvh-c .badge-success { background: var(--t-green-soft); color: var(--t-green); }
.spvh-c .badge-danger { background: var(--t-red-soft); color: var(--t-red); }
.spvh-c .badge-warning { background: var(--t-amber-soft); color: #8A4006; }
.spvh-c .badge-muted, .spvh-c .badge-secondary { background: #F1ECE4; color: var(--t-muted); }
.spvh-c .bdg.zel { background: var(--t-green-soft); color: var(--t-green); }
.spvh-c .bdg.crv { background: var(--t-red-soft); color: var(--t-red); }
.spvh-c .bdg.zut { background: var(--t-amber-soft); color: #8A4006; }
.spvh-c .bdg.siv { background: #F1ECE4; color: var(--t-muted); }
.spvh-c .bdg.ljub { background: var(--t-purple-soft); color: var(--t-purple); }
.spvh-c .bdg.plav { background: var(--t-accent-soft); color: var(--t-accent-dark); }
.spvh-c .bdg { border-radius: 8px; }
.spvh-c .iz-ulog { color: var(--t-purple); } .spvh-c .iz-plus { color: var(--t-green); } .spvh-c .iz-dug { color: var(--t-amber); }
.spvh-c .pc-prog { background: #F1ECE4; } .spvh-c .pc-prog > span { background: var(--t-green); }

.spvh-c .alert {
    border-radius: var(--t-radius); box-shadow: none; border-width: 1px; padding: 14px 16px; font-weight: 500;
}
.spvh-c .alert.success, .spvh-c .alert-success { background: var(--t-green-soft); border-color: #C4E0CF; color: #1F5A37; }
.spvh-c .alert.error, .spvh-c .alert-danger, .spvh-c .alert-error { background: var(--t-red-soft); border-color: #F1C4BF; color: #8E1C13; }
.spvh-c .alert.warning, .spvh-c .alert-warning { background: var(--t-amber-soft); border-color: #F2CFAE; color: #7A3705; }
.spvh-c .alert.info, .spvh-c .alert-info { background: var(--t-accent-soft); border-color: #C9D5E6; color: var(--t-accent-dark); }
.spvh-c .pc-poruka { border-radius: var(--t-radius-sm); }

/* -------------------------------------------------------------- ostalo */
.spvh-c .footer { border-top: 1px solid var(--t-border); color: var(--t-muted); margin-top: 30px; padding: 18px 0 24px; font-size: .85rem; }
.spvh-c .footer p { color: var(--t-muted); margin-bottom: 6px; }
.spvh-c .footer-links { margin-top: 4px; }
.spvh-c .loading-spinner { border-color: #F1ECE4; border-top-color: var(--t-accent); }
.spvh-c .custom-tooltip { background: rgba(43, 39, 34, .92) !important; border-radius: 8px !important; }

@media print {
    .spvh-c { background: #fff !important; }
    .spvh-c .main-content { margin-left: 0 !important; }
    .spvh-c .sidebar, .spvh-c .navbar, .spvh-c .menu-toggle { display: none !important; }
}

/* =====================================================================
   USKLAĐIVANJE STRANICA
   Mnoge stranice imaju vlastite boje (varijable u <style>, gradijenti
   upisani u gumbe i zaglavlja tablica). Ovdje se te varijable i uzorci
   preusmjeravaju na paletu teme - vrijedi i za stranice koje se kasnije
   dodaju s istim stilom.
   ===================================================================== */
.spvh-c {
    --primary: var(--t-accent);  --primary-dark: var(--t-accent);
    --purple: var(--t-purple);   --purple-dark: var(--t-purple);
    --pink: var(--t-teal);       --pink-dark: var(--t-teal);
    --orange: var(--t-amber);    --orange-dark: var(--t-amber);
    --green: var(--t-green);     --green-dark: var(--t-green);
    --red: var(--t-red);         --red-dark: var(--t-red);
    --cyan: var(--t-teal);       --cyan-dark: var(--t-teal);
    --blue: var(--t-accent);     --blue-dark: var(--t-accent);
    --text-dark: var(--t-text);  --text-gray: var(--t-muted); --text-light: #8C8276;
    --bg-light: var(--t-bg);     --border-light: var(--t-border);
    --card-shadow-hover: var(--t-shadow);
    --radius: var(--t-radius);   --radius-sm: var(--t-radius-sm);
}

/* Zaglavlja svih tablica u sadržaju: svijetla, tamni tekst */
.spvh-c .main-content table thead,
.spvh-c .main-content table thead tr { background: none !important; }
.spvh-c .main-content table thead th {
    background: var(--t-surface-2) !important;
    color: var(--t-muted) !important;
    border-color: var(--t-border) !important;
    text-transform: none;
    letter-spacing: 0;
}
.spvh-c .main-content table thead th a,
.spvh-c .main-content table thead th i { color: inherit !important; }
.spvh-c .main-content table tfoot td, .spvh-c .main-content table tr.total-row td,
.spvh-c .main-content table tr.ukupno td { background: var(--t-surface-2) !important; color: var(--t-text) !important; }

/* Gumbi i oznake s gradijentom upisanim u stranicu -> ravne boje teme */
.spvh-c .main-content a[style*="gradient"], .spvh-c .main-content button[style*="gradient"] {
    background: var(--t-accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
}
.spvh-c .main-content .stat-icon[style], .spvh-c .main-content .stat-card .stat-icon { box-shadow: none !important; }
.spvh-c .main-content [class*="header"][style*="gradient"],
.spvh-c .main-content .profile-header {
    background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border); box-shadow: var(--t-shadow) !important;
}
.spvh-c .main-content .profile-header * { color: inherit; }
.spvh-c .main-content .profile-header .profile-avatar, .spvh-c .main-content .profile-avatar {
    background: var(--t-accent-soft) !important; color: var(--t-accent) !important; border-color: var(--t-border) !important;
}
.spvh-c .main-content .profile-header p, .spvh-c .main-content .profile-header span { color: var(--t-muted); }

/* Kartice-tabovi (profil i sl.) */
.spvh-c .nav-tabs .nav-link.active, .spvh-c .tab-btn.active, .spvh-c .tab-button.active, .spvh-c .tabs .active {
    color: var(--t-accent) !important; border-color: var(--t-accent) !important;
}

/* Gumb samo s klasom .btn (bez vrste) -> sporedni, bijeli s obrubom */
.spvh-c .btn:not([class*="btn-"]):not([style*="background"]) {
    background: var(--t-surface); color: var(--t-text); border-color: var(--t-border-strong);
}
.spvh-c .btn:not([class*="btn-"]):not([style*="background"]):hover { background: var(--t-surface-2); }

/* Natpis "SPVH" uz logo (gornja traka na mobitelu / užem prozoru): tamna slova na svijetloj traci */
.spvh-c .navbar .nav-brand, .spvh-c .navbar .nav-brand span { color: var(--t-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }


/* zeleni gumb-poveznica (VPN obustava plaće): bijela slova, ne plava boja poveznica */
.spvh-c a.btn-green, .spvh-c a.btn-green:hover { color: #fff !important; }

/* =====================================================================
   MALI LAPTOPI (prozor 769–1680 px, npr. 1366×768, 1280×720 ili veći
   zaslon sa skaliranjem: 1920×1200 na 125 % = 1536 px, na 150 % = 1280 px):
   kompaktniji razmaci, manja slova i uži izbornik - isti dizajn, više
   sadržaja na zaslonu. Veliki zasloni (širi od 1680 px) ostaju nepromijenjeni.
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1680px) {
    html { font-size: 15px; }                      /* rem-veličine na stranicama ~6 % manje */
    .spvh-c { --t-rail-w: 76px; font-size: 14px; }
    .spvh-c .container { padding: 16px 20px 20px; }
    .spvh-c h1, .spvh-c .dashboard-title { font-size: 1.45rem; }
    .spvh-c h2 { font-size: 1.22rem; }
    .spvh-c .dashboard-header, .spvh-c .page-header { margin-bottom: 14px; padding-bottom: 10px; gap: 10px; }
    .spvh-c .dashboard-header p, .spvh-c .page-header p { margin-bottom: 0; }

    /* uski izbornik */
    .spvh-c .rail-brand { margin-bottom: 10px; }
    .spvh-c .rail-brand a { width: 58px; height: 58px; border-radius: 15px; font-size: 15px; }
    .spvh-c .sidebar-item { width: 66px; }
    .spvh-c .sidebar-link, .spvh-c .sidebar-link:hover { padding: 7px 2px 6px; font-size: 10.5px; gap: 3px; }
    .spvh-c .sidebar-link i { font-size: 16px; }
    .spvh-c .sidebar-link span { max-width: 64px; }
    .spvh-c .sidebar .badge-notification { right: 6px; top: 2px; }
    .spvh-c .rail-user { width: 66px; }

    /* kartice sa zbrojevima */
    .spvh-c .stats-grid { gap: 10px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
    .spvh-c .stat-card { padding: 11px 12px !important; gap: 10px; min-width: 0; }
    .spvh-c .stat-card > div { min-width: 0; }
    .spvh-c .stat-card { display: flex; align-items: center; }   /* ikona lijevo od broja (kao na Članovima i KUP SPVH) - niže kartice */
    .spvh-c .stat-value:not(:has(*)) { white-space: nowrap; }   /* iznos „33.311,76 €“ u jednom retku (složene vrijednosti se lome) */
    .spvh-c .stat-icon, .spvh-c .region-stat-icon { width: 34px !important; height: 34px !important; font-size: .95rem !important; border-radius: 10px; }
    .spvh-c .stat-info h3, .spvh-c .stat-value, .spvh-c .region-stat-info h3 { font-size: 1.18rem !important; }
    .spvh-c .stat-info p, .spvh-c .stat-label { font-size: .82rem; }
    .spvh-c .pc-stats { gap: 8px; margin-bottom: 10px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
    .spvh-c .pc-stat { padding: 9px 10px; gap: 9px; min-width: 0; }
    .spvh-c .pc-stat > div { min-width: 0; }
    .spvh-c .pc-stat b { font-size: 1.12rem; white-space: nowrap; }   /* iznos „10.746,74 €“ u jednom retku */
    .spvh-c .pc-stat .ik { width: 32px; height: 32px; min-width: 32px; font-size: .9rem; }

    /* kartice, okviri, obrasci */
    .spvh-c .card { padding: 18px; }
    .spvh-c .form-container { padding: 16px 18px !important; }
    .spvh-c .search-container, .spvh-c .filter-section, .spvh-c .filters-card { padding: 12px 14px; margin-bottom: 12px; }
    .spvh-c .data-table-container, .spvh-c .members-table-container { margin-bottom: 16px; }
    .spvh-c .form-group { margin-bottom: 12px; }
    .spvh-c .form-control { padding: 7px 10px; }
    .spvh-c .form-control, .spvh-c .search-input { font-size: .92rem; }
    .spvh-c .form-label, .spvh-c .form-group label { font-size: .82rem; margin-bottom: 4px; }
    .spvh-c .section-title { font-size: 1.08rem; margin-bottom: 10px; }
    /* tražilice (Regije, Podružnice i sl.) */
    .spvh-c .search-container { padding: 14px 16px !important; margin-bottom: 14px !important; }
    .spvh-c .search-header { margin-bottom: 10px !important; }
    .spvh-c .search-header h3 { font-size: 1.1rem !important; }
    .spvh-c .search-form .form-control, .spvh-c .search-form select, .spvh-c .search-form input[type="text"] { height: 38px !important; font-size: .92rem !important; }
    .spvh-c .search-form .btn { height: 38px !important; min-width: 0 !important; font-size: .88rem !important; }

    /* gumbi */
    .spvh-c .btn { min-height: 34px; padding: 0 14px; font-size: .88rem; gap: 6px; }
    .spvh-c .btn-sm { min-height: 30px; padding: 0 11px; font-size: .82rem; }
    .spvh-c .pc-btn { padding: 7px 13px; }

    /* tablice */
    .spvh-c .data-table, .spvh-c .members-table { font-size: .88rem; }
    .spvh-c .data-table th, .spvh-c .data-table td,
    .spvh-c .members-table th, .spvh-c .members-table td { padding: 8px 10px !important; }
    .spvh-c .data-table th, .spvh-c .members-table th { font-size: .8rem; }
    .spvh-c .member-avatar, .spvh-c .pc-avatar { width: 32px !important; height: 32px !important; min-width: 32px; font-size: .8rem !important; }

    /* prozori (modal): stanu u nisku visinu zaslona, sadržaj se pomiče */
    .spvh-c .modal-content, .spvh-c .modal-dialog, .spvh-c .modal-box { max-height: calc(100vh - 24px); overflow-y: auto; }
    .spvh-c .alert { padding: 10px 14px; }
    .spvh-c .footer { margin-top: 18px; padding: 12px 0 16px; }
}
/* niski zaslon (laptop 768 px i manje ili skaliranje): stavke uskog izbornika bliže, da stanu bez pomicanja */
@media (min-width: 769px) and (max-height: 820px) {
    .spvh-c .sidebar { padding-top: 8px; }
    .spvh-c .rail-brand { margin-bottom: 6px; }
    .spvh-c .rail-brand a { width: 50px; height: 50px; border-radius: 13px; }
    .spvh-c .sidebar-menu { gap: 0; }
    .spvh-c .sidebar-link, .spvh-c .sidebar-link:hover { padding: 5px 2px 4px; }
    .spvh-c .sidebar-link span { -webkit-line-clamp: 2; }
    .spvh-c .rail-user { padding-top: 6px; margin-top: 4px; gap: 3px; }
    .spvh-c .rail-user .rail-avatar { width: 30px; height: 30px; }
}

/* =====================================================================
   POPISI ČLANOVA I KUP-a NA UŽIM PROZORIMA (do 1919 px): tablice stanu u
   širinu, a ako ipak treba pomicati udesno, stupac s ikonicama (Uredi,
   Karton, E-mail ...) ostaje prilijepljen uz desni rub - uvijek vidljiv.
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1919px) {
    /* zaglavlja i sitne napomene ispod iznosa smiju se prelomiti u dva retka */
    .spvh-c .members-table > thead > tr > th, .spvh-c table.pregled > thead > tr > th { white-space: normal; }
    .spvh-c .members-table td .kup-mala { white-space: normal; }
    /* (skraćenice radnih mjesta „SPEC.ZA ENERG.UČIN.“ lome se iza točke - <wbr> u clanovi.php / clanovi_pregled.php) */
    /* Pregled kase: sitne napomene ispod imena/iznosa smiju u dva retka */
    .spvh-c .pc-tablica td div[style*="white-space:nowrap"] { white-space: normal !important; }
    /* stupac akcija prilijepljen desno */
    .spvh-c .members-table > thead > tr > th:last-child,
    .spvh-c .members-table > tbody > tr > td:last-child:not([colspan]),
    .spvh-c table.pregled > thead > tr > th:last-child,
    .spvh-c table.pregled > tbody > tr > td:last-child:not([colspan]),
    .spvh-c .pc-tablica > thead > tr > th:last-child,
    .spvh-c .pc-tablica > tbody > tr:not(.det) > td.akcije:last-child {
        position: sticky; right: 0; z-index: 2;
        background-color: inherit;          /* boja retka (parni / hover) */
        box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .25);
    }
    /* osnovna (neprozirna) boja redaka, da se ispod prilijepljenog stupca ne vidi sadržaj;
       :where = bez prednosti, pravila stranice (parni redovi, hover) i dalje vrijede */
    :where(.spvh-c .members-table > tbody > tr, .spvh-c table.pregled > tbody > tr, .spvh-c .pc-tablica > tbody > tr:not(.det)) { background-color: var(--t-surface); }
    .spvh-c .members-table > thead > tr > th:last-child,
    .spvh-c table.pregled > thead > tr > th:last-child,
    .spvh-c .pc-tablica > thead > tr > th:last-child { z-index: 3; background-color: var(--t-surface-2); }
    /* ikonice akcija bez razmaka između (razmak daje margina) */
    .spvh-c .members-table td.actions { font-size: 0; display: table-cell !important; white-space: nowrap; vertical-align: middle; }
    .spvh-c .members-table td.actions > a, .spvh-c .members-table td.actions > button, .spvh-c .members-table td.actions > span { display: inline-flex !important; vertical-align: middle; }
}
@media (min-width: 769px) and (max-width: 1440px) {
    .spvh-c .kup-ak { width: 30px !important; height: 30px !important; }
    .spvh-c .members-table .badge { white-space: normal; }
}