/* ==========================================================================
   Vidović B2B — zajednički stilovi
   Ovaj fajl se učitava na SVIM stranicama. Promjena ovdje = promjena svuda.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:       #0a2540;
    --navy-soft:  #14375c;
    --navy-line:  rgba(255,255,255,0.10);
    --brand:      #e8650a;
    --brand-tint: #fdf2ea;

    --text:   #2c3444;
    --muted:  #7a8497;
    --line:   #e9ecf1;
    --page:   #f7f8fa;
    --card:   #ffffff;

    --green:  #3fa757;
    --amber:  #e8a33d;
    --red:    #d9534f;

    --sidebar-w: 275px;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--page);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.num-font {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ============ LAYOUT ============ */
.layout { display: flex; min-height: 100vh; }

/* ============ SIDEBAR ============ */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 0 20px;
}

.logo-row { padding: 24px 20px 20px; display: flex; justify-content: center; }
.logo-row img { height: 44px; width: auto; display: block; }
.logo-fallback { font-size: 21px; font-weight: 700; letter-spacing: 0.5px; color: #fff; }
.logo-fallback span { color: var(--brand); }

.firma-bar {
    background: var(--navy-soft);
    padding: 11px 18px;
    margin: 0 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    font-style: italic;
    color: #fff;
}

.kontakt-bar {
    background: var(--navy-soft);
    margin: 8px 14px 22px;
    border-radius: 6px;
    padding: 12px 18px 14px;
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(255,255,255,0.92);
}
.kontakt-bar .ttl { color: rgba(255,255,255,0.7); }
.kontakt-bar a { color: rgba(255,255,255,0.92); text-decoration: none; }
.kontakt-bar a:hover { text-decoration: underline; }

.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.sidebar nav a {
    display: flex; align-items: center; gap: 16px;
    color: #fff; text-decoration: none;
    font-size: 14.5px; font-weight: 400;
    padding: 13px 24px;
    transition: background 0.15s;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.07); }
.sidebar nav a.active { background: rgba(255,255,255,0.10); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.sidebar nav a .material-icons-outlined { font-size: 21px; }

.logout-link {
    display: flex; align-items: center; gap: 16px;
    color: rgba(255,255,255,0.55); text-decoration: none;
    font-size: 13.5px; padding: 13px 24px;
    border-top: 1px solid var(--navy-line);
    margin-top: 10px;
}
.logout-link:hover { color: #fff; }
.logout-link .material-icons-outlined { font-size: 19px; }

/* ============ MAIN / TOPBAR ============ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--brand-tint);
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 40;
}
.topbar .material-icons-outlined { color: #6b7280; font-size: 24px; }
.menu-toggle { background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 4px; }
.topbar-icons { display: flex; align-items: center; gap: 18px; }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); }
.user-chip .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand);
    display: flex; align-items: center; justify-content: center;
}
.user-chip .avatar .material-icons-outlined { color: #fff; font-size: 21px; }

.content { padding: 20px 24px 60px; }

/* ============ KARTICE ============ */
.card, .panel {
    background: var(--card);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16,24,40,0.07);
}
.card { padding: 20px 22px; display: flex; flex-direction: column; }
.panel { padding: 20px 22px; }

.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-title { font-size: 16px; font-weight: 600; color: var(--brand); }
.panel-link { font-size: 13px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }

/* ============ FORME ============ */
select.mini-select {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 500; color: var(--text);
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 34px 7px 13px;
    cursor: pointer; outline: none;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a8497' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
select.mini-select:hover { border-color: #cfd6e0; }
select.mini-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,101,10,0.12); }

/* ============ STATUS BEDŽ ============ */
.status-badge {
    display: inline-block; font-size: 12.5px; font-weight: 500;
    padding: 5px 14px; border-radius: 6px; text-align: center; white-space: nowrap;
}
.status-badge.odobreno { background: var(--green); color: #fff; }
.status-badge.cekanje  { background: #fff; color: var(--amber); border: 1px solid var(--amber); }
.status-badge.odbijeno { background: var(--red); color: #fff; }

/* ============ MOBILNI PRIKAZ ============ */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(10,37,64,0.45);
    z-index: 49;
}
.sidebar-overlay.open { display: block; }

@media (max-width: 900px) {
    .menu-toggle { display: flex; }

    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(10,37,64,0.18);
    }
    .sidebar.open { transform: translateX(0); }

    .content { padding: 16px 14px 60px; }
    .topbar { padding: 10px 14px; }
}

@media (min-width: 901px) {
    .menu-toggle { display: none; }
}

/* Dugme "nazad na vrh" */
.to-top {
    position: fixed; right: 18px; bottom: 18px;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--brand); color: #fff;
    border: none; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(232,101,10,0.4);
    z-index: 45;
}
.to-top.show { display: flex; }
.to-top .material-icons-outlined { color: #fff; font-size: 24px; }