body{
    font-family: Arial, san-serif;
    margin:40px;
}
header{
    margin-bottom:25px;
}
nav a{
    text-decoration:none;
    margin-right:20px;
    color:#1565c0;
}
footer{
    margin-top:40px;
    color:#888;
}
:root{
    --primary:#364673;
    --primary-hover:#27345a;
    --sidebar:#2f3542;
    --sidebar-hover:#404756;
    --header:#ffffff;
    --background:#f4f6f9;
    --card:#ffffff;
    --border:#dfe4ea;
    --text:#2f3542;
    --text-light:#747d8c;
    --success:#2ecc71;
    --danger:#e74c3c;
    --warning:#f1c40f;
    --info:#3498db;
    --sidebar-width:260px;
    --header-height:65px;
    --shadow:0 3px 10px rgba(0,0,0,.08);
}
/* ==========================================================
   RESET
========================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    font-size:16px;
}
body{
    background:var(--background);
    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;
    color:var(--text);
    overflow-x:hidden;
}
/* ==========================================================
   LINKS
========================================================== */
a{
    text-decoration:none;
    color:inherit;
}
a:hover{
    color:inherit;
}
/* ==========================================================
   APP
========================================================== */
#app{
    min-height:100vh;
}
/* ==========================================================
   TOPBAR
========================================================== */
.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--header-height);
    background:var(--header);
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 25px;
    z-index:1000;
    box-shadow:var(--shadow);
}
.topbar-left{
    display:flex;
    align-items:center;
    gap:20px;
}
.topbar-right{
    display:flex;
    align-items:center;
}
.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:22px;
    font-weight:600;
    color:var(--primary);
}
.logo i{
    font-size:24px;
}
.menu-button{
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    cursor:pointer;
    border-radius:8px;
    transition:.2s;
}
.menu-button:hover{
    background:#f1f2f6;
}
/* ==========================================================
   USER
========================================================== */
.user-box{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}
.user-box i{
    font-size:22px;
    color:var(--primary);
}
/* ==========================================================
   SIDEBAR
========================================================== */
.sidebar{
    position:fixed;
    top:var(--header-height);
    left:0;
    width:var(--sidebar-width);
    bottom:0;
    background:var(--sidebar);
    overflow-y:auto;
}
.sidebar ul{
    list-style:none;
    padding:20px 0;
}
.sidebar li{
    margin-bottom:3px;
}
.sidebar a{
    display:flex;
    align-items:center;
    gap:15px;
    color:#fff;
    padding:14px 25px;
    transition:.2s;
}
.sidebar a:hover{
    background:var(--sidebar-hover);
}
.sidebar a.active{
    background:var(--primary);
}
.sidebar i{
    width:22px;
    text-align:center;
}
/* ==========================================================
   CONTENT
========================================================== */
.content{
    margin-left:var(--sidebar-width);
    margin-top:var(--header-height);
    padding:30px;
}
/* ==========================================================
   PAGE TITLE
========================================================== */
.page-title{
    margin-bottom:25px;
}
.page-title h1{
    font-size:30px;
    font-weight:600;
}
.page-title p{
    color:var(--text-light);
}
/* ==========================================================
   CARDS
========================================================== */
.card-panel{
    background:var(--card);
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:25px;
    border:1px solid var(--border);
}
.dashboard-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}
.dashboard-card .icon{
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;
    color:#fff;
    background:var(--primary);
}
.dashboard-card .number{
    font-size:34px;
    font-weight:bold;
}
.dashboard-card .label{
    color:var(--text-light);
}
/* ==========================================================
   TABLE
========================================================== */
.table{
    margin-bottom:0;
}
.table thead{
    background:#f8f9fa;
}
/* ==========================================================
   BUTTONS
========================================================== */
.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
}
.btn-primary:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
}
/* ==========================================================
   FOOTER
========================================================== */
.footer{
    margin-left:var(--sidebar-width);
    border-top:1px solid var(--border);
    padding:15px 30px;
    color:var(--text-light);
    background:#fff;
}
.has-submenu>.submenu-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:600;
}
.submenu-arrow{
  font-size:11px;
  opacity:.65;
  transition:.2s;
}
.has-submenu.open .submenu-arrow{
    transform:rotate(90deg);
}
.submenu-list{
    display:none;
    list-style:none;
    padding:0;
    margin:0;
}
.has-submenu.open .submenu-list{
    display:block;
}
.submenu-list li a{
   display:flex;
   align-items:center;
   padding:10px 20px 10px 38px;
   font-size:14px;
}
.submenu-divider{
    margin:8px 18px;
    border:0;
    border-top:1px solid rgba(255,255,255,.12);
}
/* ==========================================================
   RESPONSIVE
========================================================== */
@media(max-width:992px){
    .sidebar{
        left:-260px;
        transition:.3s;
    }
    .sidebar.open{
        left:0;
    }
    .content{
        margin-left:0;
    }
    .footer{
        margin-left:0;
    }
}
.card-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.card-panel-header h2,.card-panel-header h3{font-size:18px;margin:0;font-weight:600}.metric-note{font-size:13px;color:var(--text-light)}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600}.status-available{background:#e5f7ed;color:#17733c}.status-reserved{background:#fff5d9;color:#936300}.status-offcut{background:#e8f1fb;color:#2367a8}.status-rejected{background:#fbe7e7;color:#a83232}.status-expired{background:#eee;color:#666}.demo-banner{display:flex;align-items:center;gap:12px;background:#eef2fb;border:1px solid #cfd9f1;color:#2f3c65;padding:13px 16px;border-radius:8px;margin-bottom:22px;font-size:14px}.demo-banner i{font-size:19px}.workflow{display:flex;align-items:center;gap:0;margin:0 0 25px;overflow:auto;padding-bottom:4px}.workflow-step{min-width:145px;text-align:center;color:var(--text-light);font-size:13px;position:relative}.workflow-step:not(:last-child):after{content:"";position:absolute;width:60%;height:2px;right:-30%;top:14px;background:var(--border);z-index:0}.workflow-step span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:29px;height:29px;margin:0 auto 6px;border-radius:50%;background:#fff;border:2px solid var(--border);font-weight:600}.workflow-step.active{color:var(--primary);font-weight:600}.workflow-step.active span{background:var(--primary);border-color:var(--primary);color:#fff}.summary-card{border-left:4px solid var(--primary)}.summary-value{font-size:25px;font-weight:700}.summary-label{font-size:13px;color:var(--text-light)}.cut-row{border-left:3px solid var(--info);padding:12px 14px;background:#f8fbff;margin-bottom:10px;border-radius:4px}.cut-row:last-child{margin-bottom:0}.form-section-title{font-size:15px;font-weight:600;border-bottom:1px solid var(--border);padding-bottom:10px;margin:2px 0 18px}.required-mark{color:var(--danger)}.demo-disabled{opacity:.6;cursor:not-allowed}
.inventory-panel{width:100%;padding:30px}.inventory-panel .dataTables_wrapper,.inventory-table{width:100%!important}.inventory-panel .table th,.inventory-panel .table td{padding:14px 12px;vertical-align:middle}@media(min-width:1200px){.inventory-panel{min-height:500px}}
.logout-link{color:var(--text-light);font-size:16px}.logout-link:hover{color:var(--danger)}
.profile-link{color:var(--text-light);font-size:16px;margin-right:12px}.profile-link:hover{color:var(--primary)}
.login-page{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--background);padding:20px;overflow:auto}.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:32px}.login-logo{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:600;color:var(--primary);margin-bottom:20px}.login-card .btn-primary{background:var(--primary);border-color:var(--primary)}.login-card .form-group:last-of-type{margin-bottom:20px}

/* Uzano polje za dd.mm.gggg/mm.gggg (AD-036) - inace se input-group
   razvuce na sirinu cele kolone, pa je dugme za kalendar daleko od polja.
   Skriveni native date/month input NE sme biti display:none (sta kod
   .d-none radi) - bez layout okvira browser ne zna gde da pozicionira
   picker i baci ga u gornji levi ugao ekrana umesto pored polja. */
.date-input-group{max-width:190px}
.date-input-group input[type="date"],.date-input-group input[type="month"]{position:absolute;top:0;right:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
/* mr-*/ml-* namerno se NE koriste za razmak ikonica pored teksta (npr.
   <i class="fas fa-plus"></i> Tekst) — bundled bootstrap.min.css nema te
   utility klase, i čak ni ručno dodate ovde nisu pouzdano pobeđivale u
   kaskadi u testiranju 26.08.2026. Razmak se piše direktno kao karakter u
   HTML-u posle </i>, ne kao CSS klasa — jednostavnije i uvek radi. */