:root{--navy:#0b1f3a;--navy2:#123b66;--bg:#f4f7fb;--card:#fff;--line:#dfe7f2;--text:#1b2a3a;--muted:#708090;--danger:#b3261e;--ok:#117a37}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}.app{display:flex;min-height:100vh}.sidebar{width:265px;background:var(--navy);color:#fff;padding:22px;position:fixed;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:30px}.brand span{display:block;color:#b9c9dc;font-size:13px}.logo{background:#fff;color:var(--navy);font-weight:800;border-radius:14px;padding:12px}.sidebar a{display:flex;justify-content:space-between;color:#eaf2fb;text-decoration:none;padding:12px 14px;border-radius:10px;margin:4px 0}.sidebar a:hover{background:var(--navy2)}.badge{background:#f9b115;color:#111;border-radius:20px;padding:2px 8px}.main{margin-left:265px;width:calc(100% - 265px);padding:28px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topbar h1{margin:0}.topbar p{margin:5px 0;color:var(--muted)}.alert,.notice{background:#fff3cd;border:1px solid #ffda6a;color:#664d03;padding:12px 15px;border-radius:12px;text-decoration:none}.notice{margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(11,31,58,.06)}.stat strong{font-size:34px;display:block;color:var(--navy)}.stat span{color:var(--muted)}table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}th{background:#eef4fb;color:var(--navy)}.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;border:0;border-radius:10px;padding:10px 14px;cursor:pointer}.btn.secondary{background:#60758c}.btn.danger{background:var(--danger)}.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form .full{grid-column:1/-1}label{font-weight:700;font-size:14px}input,select,textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:#fff}textarea{min-height:90px}.actions{margin:15px 0;display:flex;gap:10px;flex-wrap:wrap}.login{max-width:420px;margin:90px auto}.login .brand{color:var(--navy)}.low{color:var(--danger);font-weight:700}.ok{color:var(--ok);font-weight:700}@media(max-width:900px){.sidebar{position:relative;width:100%;height:auto}.app{display:block}.main{margin:0;width:100%}.grid,.form{grid-template-columns:1fr}}

.status-pill{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:999px;padding:5px 10px;white-space:nowrap}
.status-pill::before{content:'';width:10px;height:10px;border-radius:50%;display:inline-block}
.status-green{color:#117a37;background:#e8f5ec}.status-green::before{background:#20a354}
.status-yellow{color:#8a5b00;background:#fff4d6}.status-yellow::before{background:#f9b115}
.status-red{color:#b3261e;background:#fde8e7}.status-red::before{background:#d93025}
.report-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.report-tabs a{padding:10px 14px;border-radius:10px;text-decoration:none;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:700}.report-tabs a.active{background:var(--navy);color:#fff}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}@media(max-width:900px){.summary-grid{grid-template-columns:1fr}}

.status-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.status-card h2{margin:0}.status-pill{font-size:14px}.report-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}.date-filter{display:flex;align-items:end;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}.date-filter label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}.date-input,input[type=date]{max-width:180px;cursor:pointer;color:var(--navy);font-weight:700}.report-card{margin-top:18px}.report-card h2{margin-top:0;color:var(--navy)}.report-card table{font-size:15px}.report-card th{font-size:14px;text-transform:none}.report-card tr:hover td{background:#f8fbff}

/* Napredne tablice: pretraga, filteri, sortiranje i paginacija */
.table-tools-wrapper{margin-top:12px}.table-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}.table-tool-group,.table-search{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}.table-tool-group select{width:auto;min-width:90px}.table-search input{min-width:260px}.column-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0 0 12px}.column-filters input{font-size:13px;padding:9px}.table-responsive{width:100%;overflow-x:auto;border-radius:14px}.data-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}.data-table th.sortable span:first-child{margin-right:8px}.sort-arrow{float:right;opacity:.65;font-weight:800}.data-table tr:hover td{background:#f8fbff}.empty-row td{text-align:center;color:var(--muted);font-weight:700;padding:22px!important}.table-info{color:var(--muted);font-size:14px;margin-top:10px}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}.pagination button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:10px;min-width:38px;height:34px;font-size:20px;cursor:pointer}.pagination button:disabled{opacity:.45;cursor:not-allowed}.pagination span{color:var(--muted);font-size:14px}@media(max-width:700px){.table-tools{align-items:stretch}.table-search input{min-width:0}.table-tool-group,.table-search{width:100%;justify-content:space-between}.column-filters{grid-template-columns:1fr}.pagination{justify-content:center}}

.status-blue{color:#0b4f8a;background:#e6f1fb}.status-blue::before{background:#1479c9}
.status-gray{color:#49515a;background:#eef1f4}.status-gray::before{background:#7b8794}
.small-muted{font-size:13px;color:var(--muted)}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input,.inline-form select{width:auto;min-width:110px}.inline-form .btn{padding:8px 12px}
.alert{padding:12px 14px;border-radius:12px;margin:0 0 16px 0;border:1px solid #dbe6f3;background:#fff}
.alert.danger{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.text-danger{display:block;color:#991b1b;margin-top:6px}
.empty-row{text-align:center;color:#64748b;padding:18px!important}

.empty-state{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:28px;text-align:center;color:var(--muted);font-weight:700;margin-top:12px}

/* =========================================================
   LIJEPŠI DATE INPUTI I FORME
========================================================= */

input[type="date"],
.date-input {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    height: 48px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    min-width: 180px;
    transition: .2s ease;
    box-shadow: 0 2px 6px rgba(11,31,58,.04);
}

input[type="date"]:focus,
.date-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #2f6fb2;
    box-shadow: 0 0 0 4px rgba(47,111,178,.12);
}

/* ICON KALENDARA */

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
    padding: 4px;
}

/* LABEL */

label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

/* FORM GRID */

.form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    align-items: start;
}

.form .full {
    grid-column: 1 / -1;
}

/* INPUTI */

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 15px;
    transition: .2s ease;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* REDOVI IZDAVANJA */

.issue-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 80px;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

/* GUMBOVI */

.btn,
button {
    min-height: 46px;
    border-radius: 12px;
    font-weight: 700;
    transition: .2s ease;
}

.btn:hover,
button:hover {
    transform: translateY(-1px);
}

/* MOBILE */

@media(max-width:900px){

    .form{
        grid-template-columns:1fr;
    }

    .issue-row{
        grid-template-columns:1fr;
    }

    input[type="date"],
    .date-input{
        width:100%;
        max-width:100%;
    }
}

/* =========================================================
   MODERNI GUMBOVI
========================================================= */

.btn,
button,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 18px;

    background: linear-gradient(180deg,#123b66,#0b1f3a);
    color: #fff !important;

    border: none;
    border-radius: 12px;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .2s ease;

    box-shadow:
        0 2px 6px rgba(11,31,58,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* HOVER */

.btn:hover,
button:hover,
a.btn:hover {
    transform: translateY(-1px);

    background: linear-gradient(180deg,#174b82,#102b52);

    box-shadow:
        0 8px 18px rgba(11,31,58,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* ACTIVE */

.btn:active,
button:active,
a.btn:active {
    transform: translateY(0);
}

/* SECONDARY */

.btn.secondary {
    background: linear-gradient(180deg,#7a90a8,#60758c);
}

/* DANGER */

.btn.danger {
    background: linear-gradient(180deg,#d94b4b,#b3261e);
}

/* MALI GUMBI */

.btn.small,
.table .btn,
td .btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
}

/* TABLIČNI GUMBI */

td .btn,
td button {
    width: auto;
    min-width: 90px;
}

/* PAGINACIJA */

.pagination button {
    background: #fff;
    color: var(--navy) !important;
    border: 1px solid var(--line);
    box-shadow: none;
}

.pagination button:hover {
    background: #eef4fb;
    transform: none;
}


/* =========================================================
   GUMB "PRIKAŽI" U IZVJEŠTAJIMA
========================================================= */

.report-toolbar .btn,
.date-filter .btn,
.topbar .btn {
    height: 48px !important;
    min-height: 48px !important;

    padding: 0 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 0 !important;
    vertical-align: middle;

    position: relative;
    top: 1px;
}

/* PORAVNANJE DATE FILTERA */

.date-filter {
    align-items: flex-end !important;
}

.date-filter label {
    margin-bottom: 0;
}


/* =========================================================
   IZDAVANJE OPREME - PORAVNANJE REDOVA
========================================================= */

.issue-row {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 110px !important;
    gap: 14px;
    align-items: center !important;
    width: 100%;
}

/* HEADER */

.issue-table-header {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 110px !important;
    gap: 14px;
    align-items: center;
}

/* GUMB UKLONI */

.issue-row .btn,
.issue-row button {
    width: 100%;
    min-width: 100px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
}

/* INPUTI */

.issue-row input,
.issue-row select {
    margin: 0 !important;
}

/* MOBILE */

@media(max-width:900px){

    .issue-row,
    .issue-table-header{
        grid-template-columns:1fr !important;
    }

    .issue-row .btn,
    .issue-row button{
        width:100%;
    }
}

.copyright-login{
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar-copyright{
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255,255,255,0.55);
}

/* =========================================================
   MOBILE SIDEBAR DORADA
========================================================= */

@media(max-width:900px){

    /* Hamburger sa 3 crtice */
    .mobile-menu-toggle{
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        left: auto !important;

        width: 52px !important;
        height: 52px !important;

        border-radius: 14px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        background:#0b2d52 !important;
    }

    .mobile-menu-toggle span{
        display:block !important;
        width:22px !important;
        height:3px !important;
        border-radius:999px !important;
        background:#fff !important;
        margin:0 !important;
    }

    /* Logo malo više gore */
    .sidebar-footer-logo{
        padding-bottom:85px !important;
        margin-top:28px !important;
    }

    .sidebar-footer-logo img{
        max-width:140px !important;
    }

    /* Copyright više gore */
    .sidebar-copyright{
        bottom:32px !important;
        font-size:10px !important;
        line-height:1.4 !important;
    }

    /* Sidebar scroll */
    .sidebar{
        overflow-y:auto !important;
        padding-bottom:120px !important;
    }
}