/* ==========================================================================
   app.css — SredstvaApp v3 final
   Bootstrap se učitava NAKON ovog fajla, pa koristimo specifičnost i
   !important samo tamo gdje Bootstrap preklapa naše stilove.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   BODY — light mode
   -------------------------------------------------------------------------- */
body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 20%, rgba(81,117,173,.2), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(174,229,255,.15), transparent 40%),
        linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }
.main   { margin-left: 260px; flex: 1; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   SIDEBAR — uvijek tamna, neovisno o temi
   Koristimo specifičniji selektor od Bootstrap .navbar da izbjegnemo
   gaženje background: transparent
   -------------------------------------------------------------------------- */
nav.sidebar {
    width: 260px !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    /* Ovo je ključno — Bootstrap .navbar ima background:transparent, */
    /* mi moramo biti specifičniji ili koristiti !important             */
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
    color: #e5e7eb !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.3) !important;
    z-index: 1000;
    border-right: 1px solid rgba(255,255,255,.06);
    flex-direction: column !important;
    align-items: flex-start !important;
}

nav.sidebar::-webkit-scrollbar       { width: 5px; }
nav.sidebar::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 20px; }

/* Sidebar brand */
nav.sidebar .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Sidebar nav-linkovi */
nav.sidebar .nav-link {
    color: #cbd5f1 !important;
    font-weight: 500;
    font-size: .97rem;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    margin: 2px 8px;
    transition: background .2s, color .2s, transform .15s;
    display: flex;
    align-items: center;
}

nav.sidebar .nav-link i {
    font-size: 1.1rem;
    width: 24px;
    color: #94a3b8;
    transition: color .2s;
}

nav.sidebar .nav-link:hover {
    background: rgba(255,255,255,.09) !important;
    color: #fff !important;
    transform: translateX(3px);
}

nav.sidebar .nav-link:hover i { color: #60a5fa; }

nav.sidebar .nav-link.active {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
    font-weight: 600;
}

nav.sidebar .nav-link.active i { color: #fff; }

.sidebar-divider {
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 8px 16px;
}

/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */
.main > nav.navbar {
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 8px 0;
    z-index: 2000 !important;
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card {
    border: none !important;
    border-radius: 14px;
    background: rgba(255,255,255,.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.4) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.07) !important;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.1) !important;
}

.card-header {
    background: rgba(248,250,252,.95);
    border-bottom: 1px solid rgba(0,0,0,.07);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.table                       { border-radius: 12px; overflow: hidden; }
.table thead                 { font-size: .85rem; letter-spacing: .4px; }
.table-hover tbody tr:hover  { background: #f1f3f5 !important; }
th, td                       { vertical-align: middle !important; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 20px;
    font-weight: 500;
    padding: 6px 14px;
    font-size: .86rem;
    transition: transform .15s, box-shadow .15s;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.13);
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    border-color: #60a5fa;
}
.form-label { font-size: .85rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   ALERTS
   -------------------------------------------------------------------------- */
.alert { border-radius: 10px; font-size: .9rem; }

/* --------------------------------------------------------------------------
   DROPDOWN
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border-radius: 12px;
    padding: 6px;
    z-index: 999999 !important;
}

/* --------------------------------------------------------------------------
   DASHBOARD KPI / CATEGORY
   -------------------------------------------------------------------------- */
.kpi-card       { border-radius: 14px; border-left: 6px solid; transition: transform .2s, box-shadow .2s; }
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 .7rem 1.3rem rgba(0,0,0,.14); }
.kpi-number     { font-size: 2.3rem; font-weight: 700; }
.kpi-label      { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: #6c757d; }

.category-card       { border-radius: 14px; transition: transform .2s, box-shadow .2s; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.16); }
.category-icon       { max-height: 55px; }

.action-card { max-width: 720px; margin: auto; border-radius: 16px; }
.action-btn  { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: .9rem; border-radius: 26px; }

footer { border-top: 1px solid #dee2e6; padding-top: 10px; }

/* --------------------------------------------------------------------------
   STATUS DOTS
   -------------------------------------------------------------------------- */
.status-dot          { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.status-dot.overdue  { background: #dc3545; }
.status-dot.due-soon { background: #ffc107; }

/* --------------------------------------------------------------------------
   INFO BOX
   -------------------------------------------------------------------------- */
.info-box {
    border-radius: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    height: 100%;
}

/* --------------------------------------------------------------------------
   PDF EXPORT BOX
   -------------------------------------------------------------------------- */
.pdf-export-box {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 14px 18px;
}
.pdf-export-box .pdf-btn { font-size: .78rem; padding: 5px 10px; border-radius: 14px; }

/* --------------------------------------------------------------------------
   LOG HOURS BATCH
   -------------------------------------------------------------------------- */
.last-hours  { font-weight: 600; color: #155724; }
.zero-hours  { color: #6c757d; }

.table-wrapper {
    max-height: 65vh;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}
.table-wrapper thead th {
    position: sticky; top: 0; z-index: 10;
    background-color: #212529 !important;
    color: white;
}
.row-active td { background-color: #d1e7dd !important; transition: background-color .2s; }

/* --------------------------------------------------------------------------
   SERVICE BOX
   -------------------------------------------------------------------------- */
.service-box {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px;
    max-height: 250px;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   TABLET UI
   -------------------------------------------------------------------------- */
.machine-card  { border-width: 3px; }
.machine-name  { font-size: 1.8rem; font-weight: 700; }
.machine-meta  { font-size: 1.2rem; }
.service-item  { font-size: 1.25rem; }
.badge-status  { font-size: 1.1rem; padding: .6em 1em; }
.qr-input      { font-size: 1.5rem; height: 3.2rem; }
.confirm-btn   { font-size: 1.6rem; padding: .8rem; }

/* --------------------------------------------------------------------------
   LOGIN PAGE
   -------------------------------------------------------------------------- */
.login-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e3a8a, #2563eb, #1e40af);
    background-size: 200% 200%;
    animation: bgMove 8s ease infinite;
}

@keyframes bgMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.login-card {
    width: 360px;
    padding: 30px;
    border-radius: 18px;
    background: rgba(255,255,255,.1) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.2) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    color: #fff;
}

.login-card .form-control {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
    border-radius: 10px;
}
.login-card .form-control::placeholder { color: #d1d5db; }
.login-card .form-control:focus {
    background: rgba(255,255,255,.18) !important;
    border-color: #60a5fa !important;
    box-shadow: none !important;
    color: #fff !important;
}
.login-card .form-label   { opacity: .9; }
.logo                      { max-height: 140px; margin-bottom: 10px; }
.login-title               { font-weight: 700; font-size: 1.2rem; }
.login-subtitle            { font-size: .85rem; opacity: .8; margin-bottom: 20px; }

.password-wrapper               { position: relative; }
.password-wrapper .form-control { padding-right: 40px; }
.password-toggle {
    position: absolute; top: 50%; right: 12px;
    transform: translateY(-50%);
    cursor: pointer; font-size: 14px;
    color: rgba(255,255,255,.6);
    transition: color .15s;
}
.password-toggle:hover { color: #fff; }

/* --------------------------------------------------------------------------
   CHART.JS
   -------------------------------------------------------------------------- */
canvas           { position: relative !important; z-index: 0 !important; }
.chart-container { z-index: 0 !important; position: relative; }

/* --------------------------------------------------------------------------
   SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 10px; }

/* ==========================================================================
   DARK MODE
   Primjenjuje se kad body ima klasu .dark-mode (toggle u base.html)
   ========================================================================== */

body.dark-mode {
    color: #d1d5db;
    background:
        radial-gradient(circle at 15% 20%, rgba(59,130,246,.15), transparent 40%),
        radial-gradient(circle at 85% 25%, rgba(139,92,246,.12), transparent 40%),
        #020617 !important;
}

/* Sidebar ostaje iste boje u dark modu (već je tamna) */
body.dark-mode nav.sidebar {
    background: linear-gradient(180deg, #0b1120 0%, #020617 100%) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,.8), 0 0 40px rgba(59,130,246,.06) !important;
}

/* Topbar */
body.dark-mode .main > nav.navbar {
    background: rgba(15,23,42,.7) !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Cards */
body.dark-mode .card {
    background: rgba(15,23,42,.65) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
body.dark-mode .card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,.8), 0 0 20px rgba(59,130,246,.2) !important;
}
body.dark-mode .card-header {
    background: rgba(15,23,42,.9);
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #d1d5db;
}

/* Tables */
body.dark-mode .table           { --bs-table-bg: transparent; }
body.dark-mode .table td,
body.dark-mode .table th        { background: transparent !important; border-color: rgba(255,255,255,.07); color: #d1d5db !important; }
body.dark-mode .table-hover tbody tr:hover { background: rgba(255,255,255,.05) !important; }
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255,255,255,.03);
    color: #d1d5db;
}
body.dark-mode .table-light     { --bs-table-bg: rgba(255,255,255,.05) !important; }

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select     { background: #1c1f26 !important; border-color: #2c2f36 !important; color: #d1d5db !important; }
body.dark-mode .form-control::placeholder { color: #9ca3af; }
body.dark-mode .form-label      { color: #d1d5db !important; }
body.dark-mode .form-check-label { color: #d1d5db !important; }

/* Accordion */
body.dark-mode .accordion-item    { background: #1c1f26 !important; border-color: #2c2f36 !important; }
body.dark-mode .accordion-button  { background: #1c1f26 !important; color: #d1d5db !important; box-shadow: none !important; }
body.dark-mode .accordion-button:not(.collapsed) { background: #242830 !important; }
body.dark-mode .accordion-button.bg-warning { background: #facc15 !important; color: #111 !important; }
body.dark-mode .accordion-button.bg-danger  { background: #dc3545 !important; color: #fff !important; }
body.dark-mode .accordion-body    { background: #1c1f26; color: #d1d5db; }
body.dark-mode .accordion-button::after { filter: invert(1); }

/* PDF export box */
body.dark-mode .pdf-export-box {
    background: linear-gradient(135deg, #1c1f26, #242830) !important;
    border-color: #2c2f36 !important;
}

/* Info box */
body.dark-mode .info-box    { background: #23262d !important; color: #d1d5db !important; }

/* Service box */
body.dark-mode .service-box { background: #1c1f26 !important; }

/* Alerts */
body.dark-mode .alert {
    background: rgba(28,31,38,.95);
    border-color: #2c2f36;
    color: #d1d5db;
}

/* List group */
body.dark-mode .list-group-item {
    background: #1c1f26 !important;
    color: #d1d5db !important;
    border-color: #2c2f36 !important;
}

/* Tekst */
body.dark-mode p, body.dark-mode h1, body.dark-mode h2,
body.dark-mode h3, body.dark-mode h4, body.dark-mode h5,
body.dark-mode h6, body.dark-mode strong, body.dark-mode small,
body.dark-mode label, body.dark-mode span:not(.badge):not(.status-dot) {
    color: #d1d5db !important;
}
body.dark-mode a        { color: #a9b5c0; }
body.dark-mode a:hover  { color: #c9c9c9; }
body.dark-mode .text-muted { color: #bbc2d1 !important; }
body.dark-mode .text-dark  { color: #d1d5db !important; }

/* BG helpers */
body.dark-mode .bg-white  { background: #1c1f26 !important; }
body.dark-mode .bg-light  { background: #14161b !important; }

/* Dropdown */
body.dark-mode .dropdown-menu {
    background: rgba(15,23,42,.95) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.8);
}
body.dark-mode .dropdown-item         { color: #e5e7eb !important; }
body.dark-mode .dropdown-item:hover   { background: rgba(59,130,246,.2) !important; color: #fff !important; }

/* Log hours batch */
body.dark-mode .table-wrapper { border-color: #2c2f36; }
body.dark-mode .last-hours    { color: #6ee7b7 !important; }
body.dark-mode .row-active td { background-color: rgba(110,231,183,.1) !important; }

/* KPI */
body.dark-mode .kpi-number { color: #f3f4f6 !important; }
body.dark-mode .kpi-label  { color: #005eff !important; }

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-thumb { background: #3b3f47; }

/* --------------------------------------------------------------------------
   ACCORDION STATUS BUTTONS
   Zamjenjuje Bootstrap bg-warning/bg-danger koje dark mode kvari
   -------------------------------------------------------------------------- */

/* OVERDUE — uvijek crvena, bijeli tekst */
.accordion-button.btn-status-overdue,
.accordion-button.btn-status-overdue:not(.collapsed) {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}
.accordion-button.btn-status-overdue::after {
    filter: brightness(0) invert(1);
}

/* DUE_SOON — uvijek amber/žuta, TAMNI tekst (čitljivo i u dark i light modu) */
.accordion-button.btn-status-due-soon,
.accordion-button.btn-status-due-soon:not(.collapsed) {
    background: #f59e0b !important;
    color: #1a1a1a !important;
    border-color: #f59e0b !important;
}
.accordion-button.btn-status-due-soon::after {
    filter: brightness(0);
}

/* Remaining tekst unutar accordion headera */
.accordion-button .remaining-text {
    color: inherit !important;
    opacity: 0.85;
}

/* dark mode override — iste boje, jer su eksplicitne */
body.dark-mode .accordion-button.btn-status-overdue  { background: #dc3545 !important; color: #fff !important; }
body.dark-mode .accordion-button.btn-status-due-soon { background: #f59e0b !important; color: #1a1a1a !important; }