:root{
  --bg:#ffffff;
  --text:#111827; /* slate-900 */
  --muted:#6b7280; /* gray-500 */
  --brand:#1e40af; /* blue-800 reminiscent of vumop.cz */
  --brand-2:#0ea5e9; /* sky-500 accent */
  --border:#e5e7eb; /* gray-200 */
  --panel:#f8fafc; /* slate-50 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.site-header{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;letter-spacing:0.5px}
.nav{display:flex;gap:16px}
.nav-link{color:#e0f2fe;text-decoration:none;font-weight:600;opacity:.9}
.nav-link.active,.nav-link:hover{color:#fff;opacity:1;text-decoration:underline}

h1{margin:22px 0 12px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;margin:14px 0}
.panel-title{margin:0 0 10px 0;font-size:18px}

.grid-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid-form label{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.grid-form input{margin-top:6px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:14px}
.grid-form .full{grid-column:1/-1}
.actions{display:flex;align-items:center;gap:10px}
.btn{border:0;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#16398f}
.btn.secondary{background:#e2e8f0;color:#0f172a}
.btn.secondary:hover{background:#cbd5e1}
.status{font-size:13px;color:var(--muted)}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:10px}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#eef2ff;color:#1e293b;text-align:left;font-size:13px;padding:10px;border-bottom:1px solid var(--border);cursor:pointer}
tbody td{padding:10px;border-bottom:1px solid var(--border);font-size:14px}
tbody tr:hover{background:#f1f5f9}
th.sort-asc::after{content:' \25B2';}
th.sort-desc::after{content:' \25BC';}

/* inline edit inputs */
td input.inline-edit{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:14px}

.site-footer{border-top:1px solid var(--border);margin-top:24px;padding:16px 0;color:var(--muted)}

@media (max-width: 900px){
  .grid-form{grid-template-columns:repeat(2,1fr)}
}

/* Keep the Actions column visible while horizontally scrolling */
thead th.actions-col, tbody td.actions-col{
  position: sticky;
  right: 0;
  z-index: 2; /* above other cells */
}
thead th.actions-col{
  background:#eef2ff; /* match header background */
  box-shadow: -1px 0 0 var(--border);
}
tbody td.actions-col{
  background: var(--bg); /* match table background */
  box-shadow: -1px 0 0 var(--border);
}
@media (max-width: 520px){
  .grid-form{grid-template-columns:1fr}
}