/* ===========================================================
   Kliker IT — dizajn sistem
   =========================================================== */
:root {
  --primary: #072559;
  --primary-hover: #0a3376;
  --text: #080F30;
  --text-muted: #5A6478;
  --text-faint: #8A93A6;
  --bg: #EFF3F7;
  --card: #FFFFFF;
  --card-alt: #F3F7FE;
  --action: #5A5AF4;
  --action-hover: #4747E0;
  --action-soft: #EDEDFE;
  --success: #3BA035;
  --success-soft: #E8F5E7;
  --warning: #FF8500;
  --warning-soft: #FFF2E2;
  --error: #E2380A;
  --error-soft: #FDEAE4;
  --purple: #8B5CF6;
  --pink: #EC4899;
  --cyan: #06B6D4;
  --border: #DDE4EE;
  --radius: 12px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(8, 15, 48, .07), 0 4px 14px rgba(8, 15, 48, .05);
  --shadow-lg: 0 8px 30px rgba(8, 15, 48, .14);
  --font-head: "Cabinet Grotesk", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Raspored aplikacije ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  display: flex; flex-direction: column;
  padding: 24px 12px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .logo {
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem;
  color: #fff; padding: 0 12px 20px; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 10px;
}
.sidebar .logo .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--action); display: inline-block; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a {
  color: rgba(255,255,255,.78); padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--action); color: #fff; }
.sidebar .userbox {
  margin-top: 16px; padding: 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07); font-size: .82rem;
}
.sidebar .userbox .name { font-weight: 600; color: #fff; }
.sidebar .userbox .role { color: rgba(255,255,255,.65); margin-bottom: 8px; }
.sidebar .userbox a { color: rgba(255,255,255,.85); font-size: .8rem; }

.main { flex: 1; padding: 28px 32px; max-width: 1440px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .sub { color: var(--text-muted); font-size: .9rem; margin-top: 2px; }

/* ---------- Kartice ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.card.alt { background: var(--card-alt); }
.card h2, .card h3 { margin-bottom: 12px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

.stat { padding: 18px 20px; }
.stat .label { font-size: .8rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; margin-top: 4px; }
.stat .trend { font-size: .8rem; margin-top: 2px; color: var(--text-muted); }
.stat.accent-action { border-top: 3px solid var(--action); }
.stat.accent-success { border-top: 3px solid var(--success); }
.stat.accent-warning { border-top: 3px solid var(--warning); }
.stat.accent-error { border-top: 3px solid var(--error); }
.stat.accent-purple { border-top: 3px solid var(--purple); }
.stat.accent-cyan { border-top: 3px solid var(--cyan); }

/* ---------- Dugmad ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--card-alt); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #C22F08; }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: .8rem; }
.btn-ghost { background: transparent; color: var(--action); }
.btn-ghost:hover { background: var(--action-soft); }

/* ---------- Forme ---------- */
label { font-size: .82rem; font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .9rem;
  background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action);
}
input[type="checkbox"] { width: auto; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 160px; }
.form-inline { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.form-inline > div { min-width: 130px; }
.hint { font-size: .78rem; color: var(--text-faint); margin-top: 2px; }

/* ---------- Filteri ---------- */
.filterbar {
  display: flex; gap: 10px; align-items: end; flex-wrap: wrap;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 16px;
}
.filterbar > div { min-width: 140px; }
.filterbar label { font-size: .74rem; color: var(--text-muted); }

/* ---------- Tabele ---------- */
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th {
  text-align: left; padding: 10px 12px; font-size: .74rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); background: var(--card-alt);
  white-space: nowrap; position: sticky; top: 0;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card-alt); }
tr.dropped { opacity: .45; }
tr.clickable { cursor: pointer; }

/* ---------- Bedževi i zastavice ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: #2A7526; }
.badge-warning { background: var(--warning-soft); color: #B35E00; }
.badge-error { background: var(--error-soft); color: #B02D08; }
.badge-info { background: var(--action-soft); color: var(--action-hover); }
.badge-neutral { background: #EAEEF4; color: var(--text-muted); }
.badge-purple { background: #F1EAFE; color: #6D3FD4; }

.flag { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.flag-black { background: #1A1A2E; }
.flag-gray { background: #9AA3B5; }
.flag-green { background: var(--success); }

/* ---------- Alarmi ---------- */
.alarm { display: flex; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: .88rem; }
.alarm-error { background: var(--error-soft); border-left: 3px solid var(--error); }
.alarm-warning { background: var(--warning-soft); border-left: 3px solid var(--warning); }
.alarm .when { font-size: .75rem; color: var(--text-faint); }
.alarm form { margin-left: auto; }

/* ---------- Fleš poruke ---------- */
.flash { padding: 11px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: .9rem; font-weight: 500; }
.flash-success { background: var(--success-soft); color: #2A7526; border: 1px solid #BFE3BD; }
.flash-error { background: var(--error-soft); color: #B02D08; border: 1px solid #F5C4B3; }
.flash-warning { background: var(--warning-soft); color: #B35E00; border: 1px solid #FFD9A8; }
.flash-info { background: var(--action-soft); color: var(--action-hover); border: 1px solid #CFCFFB; }

/* ---------- Modali ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(8, 15, 48, .45);
  display: none; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; z-index: 100; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px; padding: 24px;
}
.modal.wide { max-width: 900px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); line-height: 1; }

/* ---------- Login ---------- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, #0D3A7D 100%);
  padding: 24px;
}
.login-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 40px; width: 100%; max-width: 420px; }
.login-card .logo { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; color: var(--primary); }
.login-card .tagline { color: var(--text-muted); font-size: .9rem; margin-bottom: 24px; }
.login-demo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); }
.login-demo code { background: var(--card-alt); padding: 1px 6px; border-radius: 4px; font-size: .76rem; }

/* ---------- Leaderboard / gamifikacija ---------- */
.lb-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--card-alt); }
.lb-row.me { background: var(--action-soft); border: 1px solid var(--action); }
.lb-rank { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; width: 34px; text-align: center; color: var(--text-muted); }
.lb-rank.top1 { color: #D4A017; } .lb-rank.top2 { color: #8A93A6; } .lb-rank.top3 { color: #B87333; }
.lb-name { font-weight: 600; flex: 1; }
.lb-points { font-family: var(--font-head); font-weight: 700; color: var(--action); }

.points-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.points-legend .item { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--card-alt); border-radius: var(--radius-sm); font-size: .85rem; }
.points-legend .pts { font-weight: 700; color: var(--action); }

/* ---------- Raspored (grid) ---------- */
.schedule-day { margin-bottom: 14px; }
.schedule-day h3 { color: var(--primary); margin-bottom: 8px; }
.schedule-slot { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: var(--card-alt); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: .87rem; }
.schedule-slot .time { font-weight: 700; font-family: var(--font-head); min-width: 52px; }

/* Slot na koji smo se vratili sa profila lida — kratko istaknut */
@keyframes slotFlash {
  from { box-shadow: 0 0 0 3px rgba(90, 90, 244, .45); }
  to   { box-shadow: var(--shadow); }
}
details.slot-flash { animation: slotFlash 1.6s ease-out; }

/* ---------- Mreža zauzetih termina (Asistent) ---------- */
.busy-grid {
  display: grid; grid-template-columns: 56px repeat(7, 1fr);
  gap: 3px; align-items: stretch;
}
.busy-grid .bg-corner { }
.busy-grid .bg-day {
  text-align: center; font-size: .72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .3px; padding-bottom: 2px;
}
.busy-grid .bg-hour {
  font-size: .72rem; color: var(--text-muted); text-align: right;
  padding-right: 6px; line-height: 26px;
}
.busy-grid .bg-cell {
  height: 26px; width: 100%; padding: 0;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--card-alt); cursor: pointer;
  transition: background .1s, border-color .1s;
}
.busy-grid .bg-cell:hover:not(.off):not(:disabled) {
  border-color: var(--action); background: #e6e6fe;
}
.busy-grid .bg-cell.busy {
  background: var(--error); border-color: var(--error);
}
.busy-grid .bg-cell.busy:hover { background: #c62f08; }
.busy-grid .bg-cell.off {
  background: repeating-linear-gradient(45deg, #f2f5fa, #f2f5fa 4px, #e8edf5 4px, #e8edf5 8px);
  border-color: transparent; cursor: default;
}
.busy-grid.ro .bg-cell { cursor: default; }

/* ---------- Vidljiv horizontalni skrol na širokim tabelama ---------- */
.table-wrap-scroll { overflow-x: scroll; }
.table-wrap-scroll::-webkit-scrollbar { height: 11px; }
.table-wrap-scroll::-webkit-scrollbar-track { background: #e8edf5; border-radius: 8px; }
.table-wrap-scroll::-webkit-scrollbar-thumb { background: #a9b6cd; border-radius: 8px; }
.table-wrap-scroll::-webkit-scrollbar-thumb:hover { background: #8496b4; }
.table-wrap-scroll { scrollbar-width: thin; scrollbar-color: #a9b6cd #e8edf5; }

/* Kopija skrol trake iznad tabele — da se ne mora do dna dugačke liste */
.scroll-top {
  overflow-x: scroll; overflow-y: hidden; height: 14px; margin-bottom: 6px;
  border-radius: 8px; scrollbar-width: thin; scrollbar-color: #a9b6cd #e8edf5;
}
.scroll-top > div { height: 1px; }
.scroll-top::-webkit-scrollbar { height: 11px; }
.scroll-top::-webkit-scrollbar-track { background: #e8edf5; border-radius: 8px; }
.scroll-top::-webkit-scrollbar-thumb { background: #a9b6cd; border-radius: 8px; }
.scroll-top::-webkit-scrollbar-thumb:hover { background: #8496b4; }
.scroll-top.hidden { display: none; }

/* ---------- Traka sa presetima prikaza ---------- */
.view-toolbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px 14px; margin-bottom: 14px;
}
.vt-group { display: flex; align-items: center; gap: 4px; }
.vt-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.vt-btn {
  min-width: 32px; height: 30px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card-alt);
  font-size: 1rem; cursor: pointer; transition: transform .08s, border-color .12s;
}
.vt-btn:hover { border-color: var(--action); transform: translateY(-1px); }
.vt-btn.vt-empty { color: var(--text-faint); cursor: default; }
.vt-btn.vt-empty:hover { border-color: var(--border); transform: none; }
/* Aktivan preset — jasno istaknut */
.vt-btn.vt-active {
  background: var(--action); border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(90, 90, 244, .18);
}
.vt-btn.vt-active:hover { transform: none; }

/* ---------- Modul za prilagođavanje ---------- */
.cust-cols { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cust-col { display: flex; align-items: center; gap: 6px; font-size: .85rem;
  background: var(--card-alt); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.cust-col input { width: auto; }
.preset-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.preset-row input[type="text"], .preset-row input:not([type]) {
  width: 150px; padding: 6px 10px; font-size: .85rem; }
.icon-pick {
  width: 52px; min-width: 52px; padding: 4px 4px; font-size: .85rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.color-rule {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  font-size: .8rem;
}
.color-rule button {
  border: none; background: none; cursor: pointer; font-size: .9rem;
  color: var(--text-muted); padding: 0;
}
#colorBuilder input[type="color"] {
  width: 42px; height: 32px; padding: 2px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card); cursor: pointer;
}

/* Bojenje redova je podrazumevano isključeno — boje dolaze iz preseta
   u modulu „Prilagodi prikaz" (npr. gotov preset po Akviziciji). */

/* ---------- Excel-stil filter u zaglavlju kolone ---------- */
th .th-filter {
  display: block; margin-top: 5px; max-width: 180px;
  padding: 3px 6px; font-size: .72rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); cursor: pointer;
}

/* ---------- Padajuće liste u tabeli (dodela grupa) ---------- */
td .inline-select {
  width: auto; min-width: 185px; padding: 5px 8px; font-size: .8rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
td .inline-select-set { border-color: var(--success); background: #f0faef; }
td form { margin: 0; }

/* ---------- Tabovi po kursevima ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs .tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-muted); font-family: var(--font-body);
  font-size: .87rem; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s;
}
.tabs .tab:hover { background: var(--card-alt); color: var(--text); }
.tabs .tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tabs .tab .cnt {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: rgba(8,15,48,.08); font-size: .74rem;
}
.tabs .tab.active .cnt { background: rgba(255,255,255,.22); }

/* ---------- Kartica slota (sklopivo/rasklopivo) ---------- */
details.slot-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 10px; overflow: hidden;
}
details.slot-card > summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
details.slot-card > summary::-webkit-details-marker { display: none; }
details.slot-card > summary::before {
  content: "▸"; color: var(--text-faint); font-size: .9rem;
  transition: transform .15s; flex-shrink: 0;
}
details.slot-card[open] > summary::before { transform: rotate(90deg); }
details.slot-card[open] > summary { border-bottom: 1px solid var(--border); background: var(--card-alt); }
details.slot-card > summary:hover { background: var(--card-alt); }
.slot-title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.slot-meta { color: var(--text-muted); font-size: .84rem; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.slot-meta strong { color: var(--text); }
.slot-spacer { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.slot-body { padding: 0; }
.slot-body table { font-size: .85rem; }
.slot-body .actions { padding: 10px 18px; border-top: 1px solid var(--border); }

/* ---------- Pomoćno ---------- */
.muted { color: var(--text-muted); }
.small { font-size: .8rem; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.flex { display: flex; gap: 8px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.w-auto { width: auto; }
.searchbar { position: relative; }

@media print {
  .sidebar, .filterbar, .btn, .no-print { display: none !important; }
  .main { padding: 0; }
  body { background: #fff; }
  .card, .table-wrap { box-shadow: none; border: 1px solid var(--border); }
}