:root{
  --bg-dark:#151516;
  --header-dark:#111111;
  --sidebar-dark:#101012;
  --panel-dark:#2b2b2c;
  --muted:#bdbdbd;

  /* centralna varijabla za visinu headera - mijenjaj samo ovdje */
  --header-h: 64px;
  --bs-table-bg: #2b2b2c;
}

.table-dark {
  --bs-table-bg: #2b2b2c;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #6e9fff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #5a8aff;
}

  html,body{height:100%;}
  body{
    background:var(--bg-dark);
    color:#e9ecef;
    min-height:100%;
    /* prostor za fixed header - koristi varijablu */
    padding-top: var(--header-h);
  }

  /* Top header fixed - koristi varijablu visine */
  .topbar{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--header-h);
    background:var(--header-dark);
    border-bottom:1px solid rgba(255,255,255,0.03);
    padding:.45rem 1rem;
    z-index:1045;
  }

  /* ... ostatak stila je isti kao prije, samo ključne stavke su
      prilagođene da koriste --header-h i smanjeni padding panela ... */

  .brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700;}
  .brand .logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#ff7a18,#af002d);display:inline-block;}
  .hamburger-btn{background:transparent;border:0;color:var(--muted);font-size:1.45rem;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;}
  .topbar .icon{color:#fff;margin-left:12px;font-size:1.15rem;display:inline-flex;align-items:center;justify-content:center;}
  .profile{display:flex;align-items:center;gap:.6rem;color:var(--muted);}
  .username{color:#fff;font-size:.95rem;}
  .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#444,#222);border:2px solid rgba(255,255,255,0.04);}

  .sidebar{background:var(--sidebar-dark);padding:1.0rem;min-height:calc(100vh - var(--header-h));border-right:1px solid rgba(255,255,255,0.03);}
  .section-title{color:rgba(255,255,255,0.85);font-size:.95rem;margin-bottom:.5rem;}
  .category{font-size:.75rem;color:var(--muted);margin-top:.65rem;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.06em;}
  .nav-link{color:var(--muted);padding-left:.15rem;}
  .nav-link.active{color:#fff;background:rgba(255,255,255,0.03);border-radius:6px;}

  /* panel padding smanjeno i bez dodatne margin-top - tako prvi red ostaje ispod sticky theada */
  .panel{background:var(--panel-dark);border-radius:8px;padding:.6rem;margin-top:4px;}

  .status-badge{background:rgba(31,111,95,0.12);color:#c6f0e6;padding:.25rem .6rem;border-radius:999px;font-size:.85rem;}

  /* table responsiveness & sticky - THEAD top sada koristi --header-h */
  .table-wrapper{overflow:auto;max-width:100%;}
  .table{min-width:760px;border-collapse:separate;width:100%;}
.table thead th{
  /* Disabled sticky positioning for now */
  /* position:sticky;
  top: calc(var(--header-h) + 20px); */
  background:rgba(43,43,44,0.95);
  z-index:5;
  border-bottom:1px solid rgba(255,255,255,0.06);
  color:#f1f3f5;
}

/* sticky first column (ID) - disabled for now */
.table th:first-child,
.table td:first-child{
  /* position:sticky; left:0; */
  background:rgba(43,43,44,0.95);
  /* z-index:8; */
  border-right:1px solid rgba(255,255,255,0.03);
  min-width:50px; max-width:50px; text-align:left;
  width:50px;
}
/* .table thead th:first-child{z-index:10;} */

.table thead th{padding:10px 12px;text-align:left;white-space:nowrap;}
.table tbody td{padding:12px 12px;white-space:nowrap;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);}

/* MOBILE tweaks: smanje font/padding, sakrij search, sakrij username */
@media (max-width:575.98px){
  :root{ --header-h:56px; } /* smanji header na mobile (varijabla će se primijeniti) */
    .topbar{height:var(--header-h); padding:.35rem .6rem;}
    body{padding-top:var(--header-h);}
    .brand .logo{width:28px;height:28px;}
    .hamburger-btn{width:40px;height:40px;}
    .topbar .icon{margin-left:8px;font-size:1.05rem;}
    .username{display:none !important;}
    .profile .avatar{width:28px;height:28px;}
    .topbar .search-wrap{display:none !important;}

  /* Apply smaller font size to default Bootstrap tables */
  .table thead th,
  .table tbody td{
    padding:6px 4px;
    font-size:11px;
    line-height:1.3;
  }
  
  .table{min-width:500px;}
    h4{font-size:18px;}
    .panel{padding:.45rem;margin-top:4px;}
}

/* Extra small mobile devices (very small phones) */
@media (max-width:350px){
  .table thead th,
  .table tbody td{
    padding:4px 2px;
    font-size:10px;
    line-height:1.2;
  }
  
  .table{min-width:400px;}
}

.table-wrapper.scrolled .table th:first-child,
.table-wrapper.scrolled .table td:first-child{box-shadow:6px 0 8px -6px rgba(0,0,0,0.6);}
.offcanvas-side{width:260px;}

/* AG-Grid Dark Theme Customization */
.ag-theme-alpine-dark {
  --ag-background-color: var(--panel-dark);
  --ag-header-background-color: rgba(43,43,44,0.95);
  --ag-odd-row-background-color: rgba(43,43,44,0.5);
  --ag-row-hover-color: rgba(110, 159, 255, 0.1);
  --ag-selected-row-background-color: rgba(110, 159, 255, 0.2);
  --ag-border-color: rgba(255,255,255,0.06);
  --ag-header-foreground-color: #f1f3f5;
  --ag-foreground-color: var(--muted);
}

.status-badge-inactive {
  background: rgba(111, 31, 31, 0.12);
  color: #f0c6c6;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
}