/* ============================================================
   Moja Zemlja · CRM — dizajn preuzet sa mojazemlja.rs
   ============================================================ */

:root {
  --main-bg: #fff;
  --main-color: #2C2C2C;
  --accent: #EECE38;
  --accent-soft: #f7f5ea;
  --accent-line: #efe4b5;
  --font-main: 'Manrope', 'Arial', 'Helvetica', sans-serif;
  --font-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --header-height: 76px;
  --ink: #1b1b18;
  --muted: #6b6b63;
  --line: #ececec;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.18);
  --green: #22c55e;
  --red: #dc2626;
  --blue: #2563eb;
  --amber: #d97706;
  --purple: #7c3aed;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* HTML atribut [hidden] mora da pobedi i one elemente koji imaju
   sopstveni `display` (npr. .modal { display: grid }), inače se
   modal/drawer prikazuju odmah pri učitavanju. */
[hidden] {
  display: none !important;
}

html {
  scroll-padding-top: var(--header-height);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--main-bg);
  color: var(--main-color);
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* ---------------- Topbar ---------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0 1.2em;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  z-index: 60;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  color: var(--ink);
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent);
  color: #1b1b18;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  box-shadow: 0 6px 14px rgba(238, 206, 56, 0.45);
}

/* Pravi logotip brenda (sa mojazemlja.rs) — umesto slova „MZ".
   Crna je na providnoj pozadini, pa je u tamnoj temi invertujemo. */
.logo-slika {
  display: block;
  width: 36px;
  height: auto;
  flex: none;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text strong {
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.logo-text small {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.9em;
}

.topbar-nav > a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 0.5em 0.7em;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.topbar-nav > a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

/* ---------------- Dugmad ---------------- */

.btn-main,
.btn-ghost,
.btn-danger,
.btn-mini,
.btn-main {
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  /* Ako se dugme koristi kao <a>, nema podvlačenja (kao kod dugmadi). */
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

/* Glavno dugme: žuto, a na hover belo (tekst uvek taman i čitljiv). */
.btn-main {
  background: var(--accent);
  color: #2c2c2c;
  border: 2px solid var(--accent);
  padding: 0.62em 1.15em;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-main:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn-main:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Onemogućeno dugme ne sme da „svetli" na hover */
.btn-main:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-main:disabled:hover {
  background: var(--accent);
  color: #2c2c2c;
  transform: none;
  box-shadow: none;
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.55em 1em;
  font-size: 0.88rem;
}

.btn-ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-danger {
  background: #fff;
  color: var(--red);
  border: 1px solid #f3c9c9;
  padding: 0.62em 1.15em;
  font-size: 0.9rem;
}

.btn-danger:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.btn-mini {
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.3em 0.6em;
  font-size: 0.78rem;
  color: var(--muted);
}

.btn-mini:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--muted);
  padding: 0.4em 0.6em;
  border-radius: 6px;
  font-family: inherit;
}

.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

/* ---------------- Layout ---------------- */

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--header-height) + 1.6em) 1.2em 4em;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------------- Statistika ---------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1em;
}

.stat {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 1em 1.1em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.stat.is-alert {
  background: #fff7ed;
  border-color: #fed7aa;
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.35em;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.stat.is-alert .stat-value {
  color: var(--amber);
}

/* ---------------- Toolbar ---------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9em;
  padding: 1em 1.1em;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  min-width: 150px;
}

.field-search {
  flex: 1 1 260px;
}

.field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.55em 0.7em;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

.chk {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.chk input {
  width: auto;
  accent-color: var(--accent);
  box-shadow: none;
}

/* ---------------- Tabela ---------------- */

.table-card {
  overflow: hidden;
}

.table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 1.1em 1.2em 0.4em;
}

h2.underline {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  position: relative;
  padding-bottom: 0.4em;
}

h2.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.count {
  font-size: 0.82rem;
  color: var(--muted);
}

.table-scroll {
  overflow: auto;
  max-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th {
  position: sticky;
  top: 0;
  background: #fbf5d5;
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #6b6b63;
  padding: 0.75em 0.9em;
  border-bottom: 1px solid var(--accent-line);
  white-space: nowrap;
  z-index: 2;
}

.data-table td {
  padding: 0.7em 0.9em;
  border-bottom: 1px solid #f3f3f1;
  vertical-align: middle;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.data-table tbody tr:hover {
  background: var(--accent-soft);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.who {
  display: flex;
  flex-direction: column;
}

.who strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.who span {
  font-size: 0.78rem;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.nowrap {
  white-space: nowrap;
}

/* ---------------- Bedževi ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.b-due {
  background: #fff7ed;
  color: var(--amber);
  border-color: #fed7aa;
}

.b-today {
  background: #fef2f2;
  color: var(--red);
  border-color: #fecaca;
}

.b-future {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.b-none {
  color: #bdbdb5;
  font-size: 0.8rem;
}

.pill {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---------------- Empty state ---------------- */

.empty {
  text-align: center;
  padding: 3em 1em;
}

.empty-icon {
  font-size: 2.4rem;
}

.empty h3 {
  font-family: var(--font-accent);
  margin: 0.3em 0 0.2em;
  font-size: 1.25rem;
}

.empty p {
  color: var(--muted);
  margin: 0;
  font-size: 0.9rem;
}

/* ---------------- Overlay / Drawer ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 27, 24, 0.4);
  backdrop-filter: blur(2px);
  z-index: 80;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Širina se može menjati ručno (povlačenje leve ivice). */
  width: var(--sirina-prozora, min(780px, 100%));
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  overflow-y: auto;
  animation: slideIn 0.22s ease;
}

@keyframes slideIn {
  from { transform: translateX(24px); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Fioka kartice na Kanban tabli — desna strana, kao fioka investitora,
   ali nešto uže (sadržaj kartice ne treba punu širinu). */
.kanban-drawer {
  width: var(--sirina-prozora, min(720px, 100%));
}

/* Fioka profila korisnika — iznad fioke kartice. */
.profil-drawer {
  width: min(520px, 100%);
  z-index: 95;
}

.drawer-head {
  background: #fff;
  padding: 1.1em 1.3em;
  border-bottom: 1px solid var(--line);
}

.drawer-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.drawer-title h2 {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  margin: 0 0 0.15em;
  font-weight: 600;
}

.drawer-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
  font-size: 0.84rem;
  color: var(--muted);
  align-items: center;
}

.drawer-actions {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-top: 0.9em;
}

.tabs {
  display: flex;
  gap: 0.2em;
  padding: 0 1.3em;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 4;
  overflow-x: auto;
}

.tab {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.8em 0.9em;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink);
}

.tab.is-active {
  color: var(--ink);
  font-weight: 800;
  border-bottom-color: var(--accent);
}

.drawer-content {
  padding: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}

/* ---------------- Info blokovi ---------------- */

.group {
  border: 1px solid var(--card-bd, var(--line));
  border-radius: var(--radius);
  padding: 1.05em 1.15em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(44, 44, 44, 0.05);
}

.group-accent {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* Naslovi celina — istaknutiji od ostalog teksta: krupniji, tamniji
   (boja teksta, ne svetlo siva) i sa žutom trakom ispred. */
.group h3,
.child-head h3 {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  font-weight: 800;
}

/* Žuta traka ispred naslova — celina se odvaja od ostalog teksta.
   Ide u toku teksta (ne flex), pa se poravna i kad se naslov prelomi. */
.group h3::before,
.child-head h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.95em;
  border-radius: 3px;
  background: var(--accent);
  margin-right: 0.5em;
  vertical-align: -0.08em;
}

.group h3 {
  margin: 0 0 0.9em;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85em 1.2em;
}

.info-item .k {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 0.25em;
}

.info-item .v {
  font-size: 0.92rem;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-item .v.empty-v {
  color: #c2c2ba;
}

.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.75em;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
}

.flag.on {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.flag.off {
  color: #9a9a92;
}

/* ---------------- Child tabele ---------------- */

.child-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.7em;
}

.child-head h3 {
  margin: 0;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.mini-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 800;
  padding: 0.5em 0.6em;
  background: #fbf5d5;
  border-bottom: 1px solid var(--accent-line);
  white-space: nowrap;
}

.mini-table td {
  padding: 0.55em 0.6em;
  border-bottom: 1px solid #f3f3f1;
  vertical-align: top;
}

.mini-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mini-table .row-actions {
  white-space: nowrap;
  text-align: right;
}

.overdue {
  color: var(--red);
  font-weight: 700;
}

/* ---------------- Inline forma ---------------- */

.inline-form {
  border: 1px dashed var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 0.95em;
  margin-top: 0.9em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75em;
}

.inline-form .span-2 {
  grid-column: 1 / -1;
}

.inline-form .actions {
  display: flex;
  gap: 0.5em;
  align-items: flex-end;
}

/* ---------------- Zadaci ---------------- */

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.todo-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6em 0.8em;
  background: #fff;
}

.todo-row input[type="checkbox"] {
  margin-top: 0.25em;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex: none;
}

.todo-row .tekst {
  flex: 1;
  font-size: 0.9rem;
}

.todo-row.done .tekst {
  text-decoration: line-through;
  color: #a8a8a0;
}

.todo-meta {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.1em;
}

/* ---------------- Modal ---------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(27, 27, 24, 0.45);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 1.2em;
  z-index: 100;
}

.modal-card {
  background: #fff;
  border-radius: 14px;
  width: min(880px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: pop 0.18s ease;
}

@keyframes pop {
  from { transform: scale(0.98); opacity: 0.6; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-card-sm {
  width: min(480px, 100%);
}

/* Potvrda pre brisanja — prozor sa pitanjem „da li si siguran?". */
/* --- Masovna izmena (traka i kolona za označavanje) --- */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-bd);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}

.bulk-info {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.bulk-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.bulk-field select {
  max-width: 190px;
}

.bulk-col {
  width: 34px;
  text-align: center;
  padding-left: 0.2em;
  padding-right: 0.2em;
}

.bulk-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* --- Filter po kolonama (red ispod zaglavlja) --- */
.filter-row th {
  padding: 4px 6px;
  background: var(--card-bg);
}

.filter-row .bulk-col {
  background: var(--card-bg);
}

.kol-filter {
  width: 100%;
  min-width: 60px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 6px;
}

.kol-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

/* Polje „Grad" u sidebaru (brzi filter). */
.side-field select {
  width: 100%;
}

/* Štampanje: bez sidebara, alatne trake i dugmadi. */
/* Papir u ležećem položaju — tabela sa svim kolonama mora da stane. */
@page {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  .sidebar,
  .side-backdrop,
  .topbar,
  .toolbar,
  .view-strip,
  .btn,
  .side-ico,
  .toast-wrap,
  .bulk-bar,
  .filter-row,
  .modal {
    display: none !important;
  }

  .wrap {
    padding: 0;
    margin: 0;
    max-width: none;
    display: block;
  }

  /* Na papiru se vidi ceo list — bez skrivanja kolona (mobilna pravila se
     ne primenjuju) i bez sečenja širine. */
  .hide-md,
  .hide-lg,
  .hide-sm {
    display: table-cell !important;
  }

  .table-scroll {
    overflow: visible !important;
    max-height: none !important;
  }

  .data-table {
    font-size: 10px;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  .data-table th,
  .data-table td {
    padding: 3px 5px;
    white-space: nowrap;
  }

  .data-table .b-none {
    color: #999;
  }

  /* Zaglavlje tabele se ponavlja na svakoj strani papira. */
  thead {
    display: table-header-group;
  }

  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Prva kolona nije lepljena — lepljiva kolona smeta pri štampanju. */
  .data-table th,
  .data-table td,
  .data-table th:first-child,
  .data-table td:first-child {
    position: static !important;
    box-shadow: none !important;
  }

  /* Naslov lista (na ekranu je nevidljiv, na papiru se vidi). */
  .print-naslov {
    display: block !important;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
  }
}

/* Naslov za štampanje — na ekranu se ne vidi. */
.print-naslov {
  display: none;
}

.potvrda-kartica {
  width: min(460px, 100%);
}

/* Obavezna 2FA — prozor i zaključavanje stranice dok se ne postavi. */
.mfa-kartica {
  width: min(520px, 100%);
}

body.mfa-zakljucano .wrap,
body.mfa-zakljucano .sidebar,
body.mfa-zakljucano .topbar {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

/* Mrvice (breadcrumbs) — putanja do unutrašnje strane. */
.mrvice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.mrvice a {
  color: var(--muted);
  text-decoration: none;
}

.mrvice a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.mrvice span[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* Modalni prozor za korisnika — lepi se uz desnu ivicu ekrana i može da
   se ručno proširi ulevo (povlačenje leve ivice). */
.modal-desni {
  place-items: stretch end;
  padding: 0;
  background: rgba(27, 27, 24, 0.45);
}

.modal-desni .modal-card {
  position: relative;
  height: 100%;
  width: var(--sirina-prozora, 520px);
  max-width: 100%;
  max-height: 100vh;
  border-radius: 14px 0 0 14px;
  box-shadow: -18px 0 50px rgba(16, 24, 40, 0.28);
}

.modal-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 2;
}

.modal-resize:hover,
.modal-resize:focus-visible {
  background: rgba(238, 206, 56, 0.35);
  outline: none;
}

.potvrda-tekst {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Dvofaktorna prijava — rezervni kodovi (profil, tab „2FA"). */
.rezervni-kodovi {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.rezervni-kodovi li {
  padding: 8px 10px;
  border: 1px solid var(--card-bd);
  border-radius: 8px;
  background: var(--card-bd-soft);
}

.rezervni-kodovi code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.1em 1.3em;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  font-size: 1.35rem;
  margin: 0;
}

.modal-body {
  padding: 1.2em 1.3em;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.3em;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.form-section > h3 {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--accent);
  align-self: flex-start;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85em;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

.modal-foot {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.3em;
  border-top: 1px solid var(--line);
  background: #fcfcfb;
}

.modal-foot .spacer {
  flex: 1;
}

.form-error {
  color: var(--red);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ---------------- Toast ---------------- */

.toast-wrap {
  position: fixed;
  bottom: 1.2em;
  right: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  z-index: 200;
}

.toast {
  background: #1b1b18;
  color: #fff;
  border-left: 4px solid var(--accent);
  padding: 0.7em 1em;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.2s ease;
}

.toast.is-error {
  border-left-color: var(--red);
}

/* Dugme u poruci (npr. „Vrati" posle brisanja). */
.toast-dugme {
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.toast-dugme:hover {
  background: rgba(238, 206, 56, 0.22);
}

@keyframes toastIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ---------------- Responzivno ---------------- */

@media (max-width: 1080px) {
  .hide-lg {
    display: none;
  }
}

@media (max-width: 820px) {
  .hide-md {
    display: none;
  }

  .logo-text small {
    display: none;
  }

  .toolbar {
    align-items: stretch;
  }

  .field,
  .field-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .drawer {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .wrap {
    padding-left: 0.7em;
    padding-right: 0.7em;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .topbar-nav > a {
    display: none;
  }
}

/* ============================================================
   Pomoćne klase (zamenjuju inline stilove → stroga CSP)
   ============================================================ */

.mt-sm { margin-top: 0.9em; }
.txt-red { color: var(--red); }
.txt-center { text-align: center; }
.td-empty { text-align: center; padding: 1.4em; }
.hint { font-size: 0.85rem; margin: 0 0 0.8em; color: var(--muted); }
.muted-sm { font-size: 0.9rem; color: var(--muted); }
.flex-end { display: flex; justify-content: flex-end; }

/* Statusna značka po statusu (bez inline boja) */
.st-novi { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
.st-u_kontaktu { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.st-sastanak { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
.st-ponuda { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.st-klijent { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.st-odustao { color: #dc2626; background: #fef2f2; border-color: #fecaca; }

.group-danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.role-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.role-admin { background: var(--accent); color: #1b1b18; }
.role-clan { background: #eef2ff; color: #4338ca; }

.state-on { color: #15803d; font-weight: 700; }
.state-off { color: #9a9a92; }

/* Korisnik u zaglavlju */
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.5em 0.35em 0.35em;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #1b1b18;
  font-weight: 800;
  font-size: 0.76rem;
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  padding-right: 0.3em;
}

.user-meta strong { font-size: 0.82rem; }
.user-meta span { font-size: 0.68rem; color: var(--muted); }

/* ============================================================
   Prijava (dizajn v2)
   ============================================================ */

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5em;
  background:
    radial-gradient(circle at 12% 10%, rgba(238, 206, 56, 0.3), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(238, 206, 56, 0.18), transparent 38%),
    var(--page-bg);
}

.auth-card {
  position: relative;
  overflow: hidden;
  width: min(420px, 100%);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 44px rgba(16, 24, 40, 0.08);
  padding: 2em;
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.6em;
}

.auth-card h1 {
  font-family: var(--font-accent);
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.25em;
  font-weight: 600;
}

.auth-sub {
  margin: 0 0 1.6em;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 1.05em;
}

.auth-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.35em;
  padding: 0.85em 1.2em;
  border-radius: 10px;
}

.auth-note {
  margin-top: 1.5em;
  padding-top: 1.1em;
  border-top: 1px solid var(--card-bd-soft);
  font-size: 0.78rem;
  line-height: 1.55;
  color: #a3a299;
  text-align: center;
}

/* ============================================================
   Administracija
   ============================================================ */

.wrap-narrow {
  max-width: 1080px;
}

.panel-pad {
  padding: 1.2em 1.3em;
}

.panel h2 {
  font-family: var(--font-accent);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.2em;
}

.panel .panel-sub {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 1.1em;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.users-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8a82;
  padding: 0.6em 0.7em;
  background: #fbf5d5;
  border-bottom: 1px solid var(--accent-line);
  white-space: nowrap;
}

.users-table td {
  padding: 0.65em 0.7em;
  border-bottom: 1px solid #f3f3f1;
  vertical-align: middle;
}

.users-table .row-actions {
  text-align: right;
  white-space: nowrap;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: flex-end;
}

.audit-list {
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.audit-row {
  display: flex;
  gap: 0.9em;
  padding: 0.55em 0.8em;
  border-bottom: 1px solid #f6f6f4;
  font-size: 0.82rem;
}

.audit-row:last-child { border-bottom: none; }

.audit-row .a-time {
  color: #a8a8a0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.audit-row .a-who { font-weight: 700; min-width: 90px; }
.audit-row .a-what { color: var(--muted); }

.password-meter {
  height: 5px;
  border-radius: 3px;
  background: #eee;
  overflow: hidden;
  margin-top: 0.35em;
}

.password-meter > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.25s, background 0.25s;
}

/* ============================================================
   DIZAJN v2 (Untitled UI) — od 17.10.2026. spojen u ovaj fajl.
   Ranije je bio odvojen sloj (theme-v2.css).
   ============================================================ */

:root {
  --page-bg: #f7f6f1;
  --card-bg: #ffffff;
  --card-bd: #e9e7dd;
  --card-bd-soft: #f1efe7;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
  --sidebar-w: 264px;
}

body {
  background: var(--page-bg);
}

/* ============================================================
   1. Okvir: sidebar + glavni sadržaj
   ============================================================ */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--card-bg);
  border-right: 1px solid var(--card-bd);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 70;
}

.side-top {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--card-bd-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  color: var(--ink);
}

.brand .logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 0.88rem;
  box-shadow: 0 4px 10px rgba(238, 206, 56, 0.4);
}

.brand .logo-slika {
  width: 34px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.brand-text small {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ---- Navigacija ---- */

.side-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-label {
  margin: 12px 8px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #a3a299;
}

.side-label:first-child {
  margin-top: 2px;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 0.65em;
  width: 100%;
  padding: 0.6em 0.7em;
  border: none;
  background: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.16s, color 0.16s;
}

.side-item:hover {
  background: #f8f7f2;
  color: var(--ink);
}

.side-item.is-active {
  background: var(--accent-soft);
  color: var(--ink);
}

.side-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.side-ico {
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  flex: none;
  opacity: 0.85;
}

.side-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-count {
  flex: none;
  min-width: 22px;
  text-align: center;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  background: #f2f1ea;
  border: 1px solid var(--card-bd-soft);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.side-item.is-active .side-count {
  background: #fff;
  border-color: var(--accent-line);
  color: var(--ink);
}

.side-reset {
  margin-top: 8px;
  border: 1px dashed var(--card-bd);
  background: #fcfcfa;
  font-size: 0.82rem;
  color: var(--muted);
}

.side-reset:hover {
  border-color: var(--accent);
  background: #fffdf5;
  color: var(--ink);
}

.side-reset .side-ico {
  opacity: 0.7;
}

.side-count.is-alert {
  background: #fff7ed;
  border-color: #fed7aa;
  color: var(--amber);
}

/* ---- Dno sidebara ---- */

.side-bottom {
  padding: 12px;
  border-top: 1px solid var(--card-bd-soft);
}

/* Nalog je jedno dugme: avatar + ime, a klik otvara meni (dole). */
.side-user {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  background: #faf9f4;
  border: 1px solid var(--card-bd-soft);
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}

.side-user:hover,
.side-user.is-open {
  background: #fff;
  border-color: var(--accent);
}

.side-user:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.side-user .side-chev {
  flex: none;
  font-size: 0.66rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.16s;
}

.side-user.is-open .side-chev {
  transform: rotate(180deg);
}

.side-user .user-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.78rem;
  flex: none;
}

.side-user .user-meta {
  min-width: 0;
  flex: 1;
}

.side-user .user-meta strong {
  display: block;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-user .user-meta span {
  font-size: 0.68rem;
  color: var(--muted);
}

/* Meni naloga je u <body> i fiksiran je iznad dugmeta — tako ga panel
   sa skrolovanjem ne može da odseče (isto kao padajući meniji). */
.nalog-meni {
  position: fixed;
  z-index: 260;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}

.nalog-meni[hidden] {
  display: none;
}

.nalog-stavka {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  padding: 0.55em 0.7em;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nalog-stavka:hover {
  background: var(--accent-soft);
}

.nalog-stavka[hidden] {
  display: none;
}

/* ---- Glavni deo ---- */

.main {
  flex: 1;
  min-width: 0;
  padding: 26px 30px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.main-inner {
  max-width: 1400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2em;
  flex-wrap: wrap;
}

.page-head h1 {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.1em;
  letter-spacing: -0.01em;
}

.page-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}

/* ---- Mobilno zaglavlje ---- */

.mobile-head {
  display: none;
  align-items: center;
  gap: 0.8em;
  padding: 10px 14px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-bd);
  position: sticky;
  top: 0;
  z-index: 65;
}

.mobile-head .brand {
  flex: 1;
}

.burger-btn {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--card-bd);
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink);
}

.side-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 27, 24, 0.4);
  z-index: 69;
}

/* ============================================================
   2. KPI kartice
   ============================================================ */

.stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  padding: 16px 18px 15px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
}

.stat:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}

.stat::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.18s;
}

.stat:hover::after {
  opacity: 1;
}

.stat-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5em;
}

.stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-hint {
  display: block;
  margin-top: 0.45em;
  font-size: 0.74rem;
  color: #a3a299;
  font-weight: 500;
}

/* Malo „?" uz naslov KPI kartice — objašnjenje stiže iz `data-pomoc`, a
   oblačić (`#pomocTip`) crta i pozicionira app.js. */
.stat-pomoc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border: 1px solid var(--card-bd);
  border-radius: 50%;
  background: #f4f4f1;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  cursor: help;
}

.stat-pomoc:hover,
.stat-pomoc:focus-visible,
.stat-pomoc.is-open {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  outline: none;
}

/* Oblačić sa objašnjenjem. Fiksiran je i stoji iznad svega, pa ga kartica
   (`.stat` ima `overflow: hidden`) ne odseca; crta se iznad znaka pitanja,
   a ako gore nema mesta — ispod (klasa `ide-ispod`). */
.pomoc-tip {
  position: fixed;
  z-index: 90;
  max-width: 280px;
  padding: 0.6em 0.75em;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.22);
  pointer-events: none;
}

.pomoc-tip[hidden] {
  display: none;
}

.pomoc-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: inherit;
  border-radius: 2px;
  transform: rotate(45deg);
}

.pomoc-tip.ide-ispod::after {
  bottom: auto;
  top: -4px;
}

.stat.is-alert {
  background: #fffdf7;
  border-color: #f3e3c0;
}

.stat.is-alert .stat-value {
  color: var(--amber);
}

.stat.is-alert::after {
  opacity: 1;
  background: #f0b429;
}

/* ============================================================
   3. Kartice (panel / tabela)
   ============================================================ */

.panel,
.table-card {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--card-bd-soft);
}

.table-head h2,
.table-head h2.underline {
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.table-head h2.underline::after {
  display: none;
}

.count {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

/* ============================================================
   4. Filtri (toolbar)
   ============================================================ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 20px;
  background: #fcfcfa;
  border-bottom: 1px solid var(--card-bd-soft);
}

.toolbar .field label {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

.toolbar .field input,
.toolbar .field select {
  padding: 0.5em 0.65em;
  font-size: 0.86rem;
  border-radius: 9px;
  border-color: var(--card-bd);
  box-shadow: none;
  background: #fff;
}

.toolbar .field input:focus,
.toolbar .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

.field-search {
  position: relative;
}

.chk {
  font-size: 0.82rem;
}

/* ============================================================
   5. Tabela
   ============================================================ */

.data-table {
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  background: #fbfaf6;
  border-bottom: 1px solid var(--card-bd);
  color: #8f8e85;
  font-size: 0.67rem;
  letter-spacing: 0.09em;
  padding: 11px 16px;
  position: static;
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--card-bd-soft);
  vertical-align: middle;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background 0.14s;
}

.data-table tbody tr:hover {
  background: #fbfaf6;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Ćelija sa imenom: avatar + tekst */

.who-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-width: 0;
}

.avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #1b1b18;
  background: var(--accent);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.avatar.a1 { background: #f4e3a8; }
.avatar.a2 { background: #e8e3d0; }
.avatar.a3 { background: #f6ecd4; }
.avatar.a4 { background: #e4e9dc; }
.avatar.a5 { background: #efe6e0; }
.avatar.a6 { background: #e9e6f2; }

.who-row .who {
  min-width: 0;
}

.who-row .who strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who-row .who span {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table .num {
  font-weight: 700;
  color: var(--ink);
}

/* Statusne pilule */

.badge {
  padding: 0.28em 0.65em;
  font-size: 0.72rem;
  font-weight: 700;
  border-width: 1px;
  border-style: solid;
}

.badge::before {
  width: 6px;
  height: 6px;
}

.pill {
  background: #faf9f4;
  border-color: var(--card-bd);
  font-weight: 600;
  color: var(--muted);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* Više pilula u zaglavlju taba (npr. Ugovoreno / Naplaćeno / Ostalo). */
.pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4em;
  min-width: 0;
}

/* U zaglavlju taba ima mesta — ne seci naziv pilule („Ostalo da se naplati"). */
.pills .pill {
  max-width: none;
}

.pill-ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}

.pill-wait {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

/* ============================================================
   6. Ostalo — usklađivanje sa novim stilom
   ============================================================ */

.btn-main,
.btn-ghost,
.btn-danger,
.btn-mini {
  border-radius: 9px;
}

.btn-main {
  background: var(--accent);
  box-shadow: var(--shadow-card);
}

.btn-ghost {
  border-color: var(--card-bd);
  box-shadow: var(--shadow-card);
}

.btn-ghost:hover {
  border-color: var(--accent);
  background: #fffdf5;
}

.empty {
  padding: 3.4em 1em;
}

.empty-icon {
  font-size: 2rem;
}

/* Drawer i modal — blaže senke, više vazduha */

.drawer {
  box-shadow: -18px 0 50px rgba(16, 24, 40, 0.16);
}

.drawer-head {
  padding: 20px 24px 16px;
}

.drawer-content {
  padding: 20px 24px 40px;
}

.modal-card {
  border: 1px solid var(--card-bd);
}

.group {
  border-color: var(--card-bd);
  border-radius: 14px;
}

.group-accent {
  background: #fcfbf6;
  border-color: var(--card-bd);
}

.mini-table th {
  background: #fbfaf6;
  border-bottom-color: var(--card-bd);
  color: #8f8e85;
}

.mini-table td {
  border-bottom-color: var(--card-bd-soft);
}

.inline-form {
  background: #fcfcfa;
  border-color: var(--card-bd);
  border-radius: 12px;
}

.toast {
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}

/* Admin stranica */

.users-table th {
  background: #fbfaf6;
  border-bottom-color: var(--card-bd);
  color: #8f8e85;
}

.users-table td {
  border-bottom-color: var(--card-bd-soft);
  padding: 0.85em 0.8em;
}

.panel-pad {
  padding: 22px 24px;
}

.panel h2 {
  font-size: 1.25rem;
}

/* ============================================================
   7. Responsive
   ============================================================ */

@media (max-width: 1400px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .mobile-head {
    display: flex;
  }

  .shell {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: var(--shadow-pop);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .main {
    padding: 18px 16px 50px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hide-lg {
    display: none;
  }
}

@media (max-width: 640px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .page-head h1 {
    font-size: 1.45rem;
  }

  .hide-md {
    display: none;
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar .field,
  .toolbar .field-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn-main {
    flex: 1;
  }

  .stat-value {
    font-size: 1.5rem;
  }
}

/* ============================================================
   Izvoz i uvoz (CSV)
   ============================================================ */

.izvoz-lista {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.izvoz-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
}

.izvoz-btn strong {
  font-weight: 600;
}

/* „Sve odjednom" — glavna opcija u izvozu (jedan fajl sa svim podacima). */
/* Preklopnik formata u modalu za izvoz (CSV / Excel). */
.izvoz-format {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--card-bd);
  border-radius: 10px;
  background: var(--card-bd-soft);
}

.izvoz-format .chk {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.izvoz-sve {
  border-color: var(--accent);
  border-width: 2px;
  margin-bottom: 4px;
}

.izvoz-sve .muted-sm {
  color: inherit;
  opacity: 0.75;
}

.uvoz-rezultat {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-bd);
  border-radius: 10px;
  background: #fcfcfa;
  font-size: 0.86rem;
}

.uvoz-rezultat p {
  margin: 0;
}

.uvoz-rezultat .greske {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--red);
}

/* Fajl input (uvoz) — da izgleda kao ostala polja */
.field input[type='file'] {
  padding: 8px 10px;
  font-size: 0.86rem;
}

.field input[type='file']::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--card-bd);
  border-radius: 8px;
  background: #fcfcfa;
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}

.field input[type='file']::file-selector-button:hover {
  border-color: var(--accent);
  background: #fffdf5;
}

/* ============================================================
   8. Dotera: admin stranica i mobilni prikaz
   ============================================================ */

/* Admin: prekidači za deaktiviranog korisnika */

.row-akcije-vert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

@media (max-width: 640px) {
  /* Admin: dugmad u redu tabele postaju kolona (lakše za prst) */
  .users-table .row-actions {
    white-space: normal;
  }

  .users-table .row-actions .btn-mini {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    text-align: center;
  }

  .users-table .row-actions .btn-mini:last-child {
    margin-bottom: 0;
  }

  /* Prijava i modali na telefonu */
  .auth-card {
    padding: 1.7em 1.4em;
  }

  .auth-card h1 {
    font-size: 1.6rem;
  }

  .modal-head,
  .modal-body {
    padding-left: 1.05em;
    padding-right: 1.05em;
  }

  .modal-foot {
    flex-wrap: wrap;
    padding: 0.9em 1.05em;
  }

  .modal-foot .spacer {
    display: none;
  }

  .modal-foot > .muted-sm {
    flex: 1 1 100%;
  }

  .modal-foot > .btn-main,
  .modal-foot > .btn-ghost {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
  }

  /* Toast preko cele širine da ne prekriva sadržaj */
  .toast-wrap {
    left: 0.8em;
    right: 0.8em;
    bottom: 0.8em;
  }
}

/* ============================================================
   9. Boja po pogledu — Svi / Trenutni / Budući / filteri
   ============================================================ */

/* Svaka strana ima svoju boju (`--view-accent`) da se odmah vidi
   koja je lista otvorena. „Svi investitori" ostaje brend žuta. */
:root {
  --view-accent: var(--accent);
  --view-soft: var(--accent-soft);
  --view-line: var(--accent-line);
}

body.view-trenutni { --view-accent: #16a34a; --view-soft: #f0fdf4; --view-line: #bbf7d0; }
body.view-buduci   { --view-accent: #2563eb; --view-soft: #eff6ff; --view-line: #bfdbfe; }
body.view-odustali { --view-accent: #64748b; --view-soft: #f8fafc; --view-line: #e2e8f0; }
body.view-podsetnik { --view-accent: #d97706; --view-soft: #fffbeb; --view-line: #fde68a; }
body.view-plantaza { --view-accent: #0d9488; --view-soft: #f0fdfa; --view-line: #99f6e4; }
body.view-mitap    { --view-accent: #7c3aed; --view-soft: #f5f3ff; --view-line: #ddd6fe; }
body.view-zadaci   { --view-accent: #dc2626; --view-soft: #fef2f2; --view-line: #fecaca; }
body.view-kanban   { --view-accent: #0f766e; --view-soft: #f0fdfa; --view-line: #99f6e4; }
body.view-preporuke { --view-accent: #db2777; --view-soft: #fdf2f8; --view-line: #fbcfe8; }
body.view-statistika { --view-accent: #4338ca; --view-soft: #eef2ff; --view-line: #c7d2fe; }

/* Traka na vrhu sadržaja */
.view-strip {
  height: 4px;
  border-radius: 999px;
  background: var(--view-accent);
  transition: background 0.2s;
}

/* Podvlaka ispod naslova strane (isti stil kao h2.underline) */
.page-head h1::after {
  content: '';
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 0.42em;
  border-radius: 2px;
  background: var(--view-accent);
  transition: background 0.2s;
}

/* Sidebar: aktivna stavka nosi boju otvorene strane */
.side-item.is-active {
  background: var(--view-soft);
}

.side-item.is-active::before {
  background: var(--view-accent);
}

.side-item.is-active .side-count {
  border-color: var(--view-line);
}

/* ============================================================
   10. Dokumentacija investitora (fajlovi u draweru)
   ============================================================ */

.fajl-lista {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fajl-red {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 9px 11px;
  border: 1px solid var(--card-bd);
  border-radius: 10px;
  background: #fcfcfa;
}

.fajl-ikona {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--card-bd-soft);
  font-size: 0.98rem;
}

.fajl-meta {
  flex: 1;
  min-width: 0;
}

.fajl-naziv {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fajl-naziv:hover {
  text-decoration: underline;
}

.fajl-info {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fajl-akcije {
  display: flex;
  gap: 6px;
  flex: none;
}

.fajl-akcije .btn-mini {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .fajl-red {
    flex-wrap: wrap;
  }

  .fajl-akcije {
    width: 100%;
  }

  .fajl-akcije .btn-mini {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   11. Sužavanje sidebara — dugme ostavlja samo ikonice
   ============================================================ */

.side-top {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.side-top .brand {
  flex: 1;
  min-width: 0;
}

.side-suzi {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-bd);
  background: #fff;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.side-suzi:hover {
  background: #f8f7f2;
  color: var(--ink);
}

/* Sužen prikaz važi samo na širokim ekranima — na mobilnom je sidebar fioka. */
@media (min-width: 981px) {
  .sidebar {
    transition: width 0.2s ease;
  }

  body.side-suzi {
    --sidebar-w: 92px;
  }

  /* Dugme ostaje DESNO od logotipa — i u suženom prikazu. */
  body.side-suzi .side-top {
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    padding: 14px 10px 12px;
  }

  body.side-suzi .brand .logo-mark {
    width: 32px;
    height: 32px;
    font-size: 0.76rem;
  }

  body.side-suzi .brand .logo-slika {
    width: 28px;
  }

  body.side-suzi .side-suzi {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }

  body.side-suzi .brand-text {
    display: none;
  }

  body.side-suzi .side-nav {
    padding: 14px 10px;
  }

  /* Grupni naslovi („Pregled", „Liste"…) postaju tanke linije */
  body.side-suzi .side-label {
    height: 1px;
    margin: 12px 10px 8px;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    background: var(--card-bd-soft);
  }

  body.side-suzi .side-item {
    justify-content: center;
    padding: 0.6em 0;
  }

  body.side-suzi .side-txt {
    display: none;
  }

  /* Brojači ostaju, kao mali bedž u uglu ikonice */
  body.side-suzi .side-count {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 15px;
    padding: 0 3px;
    font-size: 0.58rem;
    line-height: 1.35;
  }

  body.side-suzi .side-user {
    justify-content: center;
    padding: 6px;
  }

  body.side-suzi .side-user .user-meta {
    display: none;
  }
}

@media (max-width: 980px) {
  .side-suzi {
    display: none;
  }
}



/* ============================================================
   11b. Sklopive grupe sidebara (Pregled, Liste, Filteri, Tabla)

   Naslov grupe je dugme: klik skriva ili prikazuje sve stavke ispod
   njega. Izbor se pamti u pregledaču (app.js, `mz-grupe-sidebar`).
   ============================================================ */

.side-label-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.side-label-btn:hover {
  color: var(--ink);
}

.side-label-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.side-label-btn .side-chev {
  flex: none;
  font-size: 0.66rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.16s ease;
}

/* Sklopljena grupa — strelica pokazuje da je sadržaj ispod. */
.side-label-btn[aria-expanded='false'] .side-chev {
  transform: rotate(-90deg);
}

/* Stavke grupe idu jedna ispod druge, sa istim razmakom kao ranije. */
.side-grupa {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* `hidden` mora da pobedi `display: flex` iz grupe. */
.side-grupa[hidden] {
  display: none;
}

@media (min-width: 981px) {
  /* U suženom prikazu (samo ikonice) naslov grupe je linija + mala
     strelica, da se i tu grupa može sklopiti. */
  body.side-suzi .side-label-btn {
    height: 16px;
    margin: 10px 10px 6px;
    padding: 0;
    font-size: 0;
    overflow: visible;
    background: none;
    justify-content: flex-end;
  }

  body.side-suzi .side-label-btn::before {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--card-bd-soft);
  }

  body.side-suzi .side-label-btn .side-chev {
    font-size: 0.6rem;
    margin-left: 6px;
  }
}



/* ============================================================
   11c. Profil — zasebna stranica sa tabovima (20.10.2026)

   Tabovi su isti kao u fioke investitora (`.tabs` / `.tab`), samo bez
   „lepljivog" vrha — na stranici nema fioke.
   ============================================================ */

.profil-tabs {
  position: static;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}

.profil-tabs .tab {
  padding: 0.7em 1em;
}

/* ============================================================
   12. Slika investitora (avatar), ID i LinkedIn
   ============================================================ */

.avatar {
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.35rem;
}

.drawer-title-main {
  flex: 1;
  min-width: 0;
}

.id-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7a7a70;
  background: #f3f1ea;
  border: 1px solid #e6e3d8;
  border-radius: 999px;
  padding: 0.15em 0.6em;
  vertical-align: middle;
}

.avatar-edit {
  display: flex;
  align-items: center;
  gap: 1.1em;
  flex-wrap: wrap;
}

.avatar-form {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  flex: 1;
  min-width: 220px;
}

.avatar-form input[type="file"] {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 100%;
}

.avatar-form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.avatar-form .hint {
  margin: 0;
}

/* Dugme koje izgleda kao link (korisničko ime u tabeli korisnika). */
.dugme-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  cursor: pointer;
}

.dugme-link:hover {
  text-decoration: underline;
}

.link,
.drawer-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.link:hover,
.drawer-link:hover {
  text-decoration: underline;
}

.drawer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

@media (max-width: 640px) {
  .avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }

  .avatar-form {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   12b. Stranica 404 — polomljen orah (20.10.2026)

   Bez slika: orah je crtan u SVG-u direktno u `public/404.html`
   (boje su upisane u atributima, pa se ne menjaju po temi —
   orah je braon i u svetloj i u tamnoj).
   ============================================================ */

.gr404-strana {
  margin: 0;
  background: var(--page-bg, #fff);
}

.gr404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px 60px;
  text-align: center;
}

.gr404-unutra {
  max-width: 520px;
  width: 100%;
}

/* Mekano žuto svetlo oko oraha — kao da je stol osvetljen. */
.gr404-unutra::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 22%;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(238, 206, 56, 0.22) 0%, rgba(238, 206, 56, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

.gr404-unutra > * {
  position: relative;
  z-index: 1;
}

.gr404-orah {
  display: block;
  width: 250px;
  height: auto;
  margin: 0 auto 4px;
}

/* Borezi jezgra i sjaj na ljusci. */
.gr404-orah .gr-borezi {
  stroke: #c9ae83;
  stroke-width: 2.4;
  opacity: 0.85;
}

.gr404-orah .gr-sjaj {
  pointer-events: none;
}

.gr404-razlom {
  margin: 0;
  font-family: var(--font-accent, 'Playfair Display', serif);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.gr404-naslov {
  margin: 6px 0 8px;
  font-family: var(--font-accent, 'Playfair Display', serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
}

.gr404-tekst {
  margin: 0 auto;
  max-width: 42ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}

.gr404-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

.gr404-dugmad a {
  text-decoration: none;
}

@media (max-width: 560px) {
  .gr404-orah {
    width: 190px;
  }

  .gr404-razlom {
    font-size: 2.6rem;
  }
}


/* ============================================================
   13. „Više filtera" — sklopivi panel u sidebaru
   ============================================================ */

/* Dugme se ponaša kao ostale stavke; strelica pokazuje da se panel otvara. */
.side-vise-btn .side-chev {
  flex: none;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.16s;
}

.side-vise-btn.is-open .side-chev {
  transform: rotate(180deg);
}

/* Sam panel: polja idu jedno ispod drugog, u okviru da se odvoje od stavki. */
.side-vise {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 6px;
  padding: 12px 10px;
  border: 1px solid var(--card-bd);
  border-radius: 10px;
  background: #fcfcfa;
}

.side-vise[hidden] {
  display: none;
}

.side-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.side-field label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a3a299;
}

.side-field select,
.side-field input {
  width: 100%;
  min-width: 0;
  padding: 0.42em 0.5em;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 8px;
}

.side-field select:focus,
.side-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

/* Čekbox polja u panelu („Videli plantažu", „Bili na mitapu") — ne smeju
   da dobiju širinu i okvir običnih polja (`.side-field input` ih pokriva). */
.side-field .chk {
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}

.side-field .chk input {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.side-field .chk input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sužen prikaz (samo ikonice): panel se ne prikazuje, strelica takođe. */
@media (min-width: 981px) {
  body.side-suzi .side-vise,
  body.side-suzi .side-chev {
    display: none;
  }

  /* Brojač naprednih filtera i u suženom prikazu ostaje kao bedž */
  body.side-suzi .side-vise-btn .side-count {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 15px;
    padding: 0 3px;
    font-size: 0.58rem;
    line-height: 1.35;
  }
}

/* Sortiranje ostaje u toolbaru, ali bez fiksnog minimuma — ne troši širinu. */
.field-sort {
  min-width: 190px;
}

/* ============================================================
   14. Tabela: zamrznuta prva kolona i boja reda
   ============================================================ */

/* Prva kolona (investitor) ostaje na mestu kad se tabela skroluje udesno —
   ali samo kad je prekidač uključen (`body.tabela-zamrznuta`). Korisnik bira;
   izbor se pamti u localStorage (vidi `primijeniZamrzni` u app.js).
   Ćelije nasleđuju boju reda, pa i boja i hover rade i u zamrznutoj koloni. */
.data-table tbody tr {
  background: #fff;
}

body.tabela-zamrznuta .data-table th:first-child,
body.tabela-zamrznuta .data-table td:first-child {
  position: sticky;
  left: 0;
}

body.tabela-zamrznuta .data-table th:first-child {
  z-index: 3;
}

body.tabela-zamrznuta .data-table td:first-child {
  z-index: 1;
  background: inherit;
}

/* Tanka linija da se vidi gde se kolona „odvaja" od ostatka */
body.tabela-zamrznuta .data-table th:first-child,
body.tabela-zamrznuta .data-table td:first-child {
  box-shadow: 1px 0 0 var(--card-bd-soft);
}

/* Prozirne boje reda (žuta / zelena / crvena) — blage, da tekst ostane čitljiv */
.data-table tbody tr.boja-zuta   { background: #fdf6d7; }
.data-table tbody tr.boja-zelena { background: #e7f6ec; }
.data-table tbody tr.boja-crvena { background: #fdeaea; }

.data-table tbody tr.boja-zuta:hover   { background: #f9edb9; }
.data-table tbody tr.boja-zelena:hover { background: #d6efe0; }
.data-table tbody tr.boja-crvena:hover { background: #fbdada; }

.data-table tbody tr.boja-zuta   td:first-child { box-shadow: inset 3px 0 0 #eab308; }
.data-table tbody tr.boja-zelena td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.data-table tbody tr.boja-crvena td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* ---- Izbor boje u detaljima investitora ---- */

.boja-red {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--card-bd-soft);
}

.boja-red .k {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.boja-izbor {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boja-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(27, 27, 24, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
}

.boja-dot:hover {
  transform: scale(1.08);
}

.boja-dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.boja-dot.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink);
}

.boja-bez {
  background: linear-gradient(to top right, transparent 46%, #c9c6b8 46%, #c9c6b8 54%, transparent 54%), #fff;
}

.boja-zuta   { background: #f2d73c; }
.boja-zelena { background: #46c777; }
.boja-crvena { background: #ef6b6b; }

/* ============================================================
   15. Padajući meniji (umesto native <select>)
   ============================================================ */

.sel {
  position: relative;
  display: block;
  min-width: 0;
}

/* Pravi <select> ostaje u DOM-u zbog vrednosti i `change`, ali se ne vidi. */
.sel-native {
  display: none;
}

.sel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  width: 100%;
  min-width: 0;
  padding: 0.55em 0.7em;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.sel-btn:hover {
  border-color: #d8d5c8;
}

.sel-btn:focus-visible,
.sel-btn[aria-expanded='true'] {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

.sel-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sel-btn.is-placeholder .sel-label {
  color: var(--muted);
}

.sel-chev {
  flex: none;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.16s;
}

.sel-btn[aria-expanded='true'] .sel-chev {
  transform: rotate(180deg);
}

/* Lista je `position: fixed` (JS je pozicionira) da je ne odseku paneli. */
.sel-menu {
  position: fixed;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sel-menu[hidden] {
  display: none;
}

.sel-opt {
  padding: 0.5em 0.6em;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.sel-opt:hover {
  background: #f8f7f2;
}

.sel-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.sel-opt.is-active {
  background: var(--accent-soft);
  font-weight: 700;
}

/* Isti izgled kao polja pored kojih stoje */
.toolbar .field .sel-btn {
  padding: 0.5em 0.65em;
  font-size: 0.86rem;
  border-radius: 9px;
  border-color: var(--card-bd);
}

.side-field .sel-btn {
  padding: 0.42em 0.5em;
  font-size: 0.82rem;
  border-radius: 8px;
  border-color: var(--card-bd);
}

/* ============================================================
   16. Dnevnik investitora (dno taba „Pregled")
   ============================================================ */

.dnevnik-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dnevnik-red {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--card-bd-soft);
}

.dnevnik-red:last-child {
  border-bottom: none;
}

.dnevnik-ico {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 0.82rem;
  line-height: 1;
}

/* Završen zadatak je „utisan", otvoren ostaje pun */
.dnevnik-zavrsen .dnevnik-naslov {
  color: var(--muted);
  text-decoration: line-through;
}

.dnevnik-telo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dnevnik-naslov {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.dnevnik-detalj {
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.dnevnik-vrijeme {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.dnevnik-vise {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}

@media (max-width: 640px) {
  .dnevnik-red {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .dnevnik-vrijeme {
    grid-column: 2;
    justify-self: start;
  }
}

/* ============================================================
   17. Preporuke — ko je koga doveo i šta se kome duguje
   ============================================================ */

/* KPI kartice unutar panela preporuka (5 kartica, same se prilagođavaju) */
#preporukeStats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Padding samo dok su blokovi u panelu preporuka (stari raspored). */
#viewPreporuke #preporukeStats {
  padding: 16px 20px 4px;
}

/* Statusna pilula preporuke */
.preporuka-ceka {
  background: #fffbeb;
  color: var(--amber);
  border-color: #fde68a;
}

.preporuka-isplaceno {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

/* Spisak preporuka u detaljima preporučioca */
.preporuka-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.preporuka-stavka {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-left: 3px solid #db2777;
  border-radius: 12px;
}

.preporuka-stavka.isplaceno {
  background: #fbfdfb;
  border-left-color: #16a34a;
}

.ps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}

.ps-head strong {
  font-weight: 700;
}

.ps-meta {
  font-size: 0.86rem;
  color: var(--muted);
}

.ps-akcije {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

/* ============================================================
   18. Prekidač: da li je prva kolona tabele zamrznuta
   ============================================================ */

.table-head-desno {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-zamrzni .pin {
  font-style: normal;
}

.btn-zamrzni.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
  font-weight: 700;
}

/* ============================================================
   19. Napomene investitora (tab „Napomene")
   ============================================================ */

/* Svaka napomena je svoja kartica, a grupisane su po tabu iz kog dolaze. */
.nap-grupa + .nap-grupa {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--card-bd-soft);
}

.nap-grupa-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.nap-grupa-head .btn-mini {
  margin-left: auto;
}

.nap-izvor {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.napomene-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.napomena-stavka {
  background: var(--card-bg);
  border: 1px solid var(--card-bd-soft);
  border-left: 3px solid var(--view-accent);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.nap-naslov {
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 4px;
}

.nap-tekst {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nap-vrijeme {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--muted);
}

/* ============================================================
   20. Kolone tabele: sakrivanje i premeštanje

   Kolona se sakrije klasom `kol-skriveno` (klasa ide i na zaglavlje i na
   ćelije reda; dodaje je app.js iz izbora u `state.skrij`). Kolone se i
   premeštaju — povlačenjem zaglavlja (klase `kol-vuce-se`, `kol-prije`,
   `kol-poslije` daju povratnu informaciju) ili strelicama ↑/↓ u meniju.
   Sve je samo prikaz — podaci i CSV izvoz ostaju celi.
   ============================================================ */

.kol-skriveno {
  display: none;
}

.btn-kolone.is-active,
.btn-kolone.is-open {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
  font-weight: 700;
}

/* Meni je u <body>, fiksiran ispod svog dugmeta, pa ga panel sa
   skrolovanjem ne može da odseče (isto kao meni naloga i padajući meniji). */
.kolone-meni {
  position: fixed;
  z-index: 260;
  min-width: 248px;
  max-width: 340px;
  max-height: 60vh;
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}

.kolone-meni[hidden] {
  display: none;
}

.kolone-naslov {
  margin: 0 0 4px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.kolone-uputa {
  margin: 0 4px 6px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
}

.kolone-stavka {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
}

.kolone-stavka:hover {
  background: var(--accent-soft);
}

/* Ime kolone je i dalje labela — klik na njega uključuje/isključuje kolonu. */
.kolone-ime {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: 1;
  min-width: 0;
  padding: 0.45em 0.5em;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.kolone-ime span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kolone-ime input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ↑ / ↓ — pomeranje kolone za jedno mesto. */
.kolone-smicanje {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.kolone-smicanje:hover:not(:disabled) {
  background: #fff;
  color: var(--ink);
}

.kolone-smicanje:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Premeštanje kolona povlačenjem zaglavlja tabele --- */

.data-table thead th[data-kol] {
  position: relative;
  cursor: grab;
  /* Povlačenje zaglavlja ne sme da počne kao obično označavanje teksta. */
  user-select: none;
  -webkit-user-select: none;
}

.data-table thead th[data-kol]:active {
  cursor: grabbing;
}

.data-table thead th.kol-vuce-se {
  opacity: 0.4;
}

.data-table thead th.kol-prije::after,
.data-table thead th.kol-poslije::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.data-table thead th.kol-prije::after {
  left: -1px;
}

.data-table thead th.kol-poslije::after {
  right: -1px;
}

.kolone-sve {
  width: 100%;
  margin-top: 6px;
  padding: 0.5em 0.6em;
  border: 1px dashed var(--card-bd);
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.kolone-sve:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
}

/* ============================================================
   21. Objašnjenja i statusi (stranica /uputstvo)

   Stranica je statična (uputstvo.html) i koristi iste panele kao
   administracija. Ovde su samo delovi koji su samo njoj potrebni:
   sadržaj na vrhu, tabele „pojam → objašnjenje", koraci i istaknute
   napomene. Nema inline stilova (CSP bez `unsafe-inline`).
   ============================================================ */

.help-sadrzaj-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-sadrzaj-lista a {
  display: block;
  padding: 4px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.help-sadrzaj-lista a:hover {
  border-bottom-color: var(--accent-line);
}

/* Tačkica boje u objašnjenjima (semafor sa Kanban table). */
.help-boja {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 2px;
  vertical-align: baseline;
}

.help-boja-zuta   { background: #f2d73c; }
.help-boja-zelena { background: #46c777; }
.help-boja-crvena { background: #ef6b6b; }

/* Tabela „pojam → objašnjenje" (nije lista sa klikom, pa nema hover reda). */
.help-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.help-tabela th {
  padding: 8px 10px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--card-bd);
}

.help-tabela td {
  padding: 9px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--card-bd-soft);
}

.help-tabela tbody tr:last-child td {
  border-bottom: none;
}

.help-tabela td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.help-blok + .help-blok {
  margin-top: 18px;
}

.help-blok h3 {
  margin: 0 0 6px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.help-blok p {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.help-koraci,
.help-veze {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: 0.9rem;
}

/* Koraci su numerisani — broj je u krugu, da se vidi redosled. */
.help-koraci {
  counter-reset: help-korak;
}

.help-koraci li {
  position: relative;
  padding-left: 2em;
  counter-increment: help-korak;
}

.help-koraci li::before {
  content: counter(help-korak);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.45em;
  height: 1.45em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink);
}

.help-veze li {
  padding-left: 1em;
  position: relative;
}

.help-veze li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

.help-veze b,
.help-koraci strong {
  color: var(--ink);
}

/* Istaknuta napomena — leva žuta ivica, kao „info" kutija. */
.help-napomena {
  margin: 14px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}

.help-napomena code,
.help-veze code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--card-bd);
  font-size: 0.82em;
}

/* Na uskim ekranima tabele se skroluju (kao i svaka druga u CRM-u). */
@media (max-width: 700px) {
  .help-koraci,
  .help-veze {
    font-size: 0.86rem;
  }

  .help-napomena {
    font-size: 0.82rem;
  }
}

/* ============================================================
   22. Statistika — KPI blokovi na svojoj strani (19.10.2026)

   Do sada su blokovi stajali uz „Svi investitori" i uz „Preporuke".
   Sada su na jednoj strani, u dve grupe (Investitori / Preporuke),
   a ispod je prekidač koji vraća stari raspored. Kada se vrate,
   `#stats` i `#preporukeStats` se premeštaju u te prikaze (JS), a
   ova strana ostaje prazna — zato se grupe sklanjaju kad su prazne.
   ============================================================ */

.stat-blok + .stat-blok {
  margin-top: 22px;
}

.stat-blok-naslov {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* KPI mreža na strani „Statistika" — 4 kolone, kao na „Svi investitori". */
#viewStatistika {
  padding: 18px 20px 20px;
}

#viewStatistika .stat-blok:has(.stats:empty) {
  display: none;
}

/* ---- Grafikoni (donja celina strane „Statistika") ----
   Sve je HTML + CSS (bez SVG i bez biblioteka) — zato je odzivno i
   gotovo za tamnu temu. Širine traka i visine stubova postavlja JS
   preko CSSOM-a (CSP nema 'unsafe-inline', pa ne može `style="…"`). */

.graf-blok {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--card-bd-soft);
}

.graf-blok-opis {
  margin: -4px 0 14px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.graf-mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.graf-karta {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.graf-naslov {
  margin: 0 0 2px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.graf-opis {
  margin: 0 0 14px;
  font-size: 0.76rem;
  color: var(--muted);
}

.graf-sadrzaj {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.graf-prazno {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Vodoravna traka: naziv + vrednost, pa šipka, pa napomena. */
.graf-traka {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.graf-traka-vrh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.graf-naziv {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graf-vrednost {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.graf-sloj {
  height: 9px;
  border-radius: 999px;
  background: var(--card-bd-soft);
  overflow: hidden;
}

.graf-bar {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.graf-napomena {
  font-size: 0.72rem;
  color: var(--muted);
}

/* Sastavljena traka (grafikon „Kartice na tabli"): delovi jedne trake
   (zadatak / podsetnik / ručna kartica) — boje su iste u obe teme. */
.graf-sloj .graf-seg {
  display: inline-block;
  height: 100%;
  min-width: 3px;
}

.graf-seg-zadatak {
  background: var(--accent);
}

.graf-seg-podsetnik {
  background: #3b82f6;
}

.graf-seg-rucno {
  background: #8b5cf6;
}

/* Trend: vertikalne trake po mesecima (dve serije). */
.graf-trend {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding-top: 6px;
}

.graf-mesec {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.graf-stubovi {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
  width: 100%;
}

.graf-stub {
  flex: 1;
  max-width: 16px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
}

.graf-stub-alt {
  background: #46c777;
}

.graf-meseci-linija {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.graf-meseci-linija span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.62rem;
  color: var(--muted);
}

.graf-legenda {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
}

.graf-legenda i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

.graf-legenda-1 {
  background: var(--accent);
}

.graf-legenda-2 {
  background: #46c777;
}

/* Na užim ekranima grafikoni idu jedan ispod drugog. */
@media (max-width: 980px) {
  .graf-mreza {
    grid-template-columns: 1fr;
  }
}


/* ---- Kanban: ručne kartice, podzadaci i popup (20.10.2026) ---- */

/* Tekst kartice je dugme — klik otvara karticu u prozoru. */
.kanban-tekst-dugme {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.kanban-tekst-dugme:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kanban-tekst-dugme:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Oznaka ručne kartice i broj podzadataka. */
.kanban-znacka {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--card-bd-soft);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
}

.kanban-podz {
  margin-right: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  cursor: help;
}

/* Dugme za dodavanje ručne kartice (na dnu svake kolone). */
.kanban-dodaj {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px dashed var(--card-bd);
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kanban-dodaj:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--accent-soft);
}

/* Unos ručne kartice. */
.kanban-unos {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.kanban-unos[hidden] {
  display: none;
}

.kanban-unos input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 8px;
}

.kanban-unos input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

/* ---- Popup kartice ---- */

.kb-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--card-bd-soft);
  border-radius: 10px;
  background: var(--card-bd-soft);
}

.kb-info > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.kb-info-k {
  flex: none;
  width: 82px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.kb-info-v {
  font-size: 0.86rem;
  color: var(--ink);
}

.kb-podzadaci-naslov {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
}

.kb-podzadaci-lista {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kb-podzadatak {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--card-bd-soft);
}

.kb-podzadatak .chk {
  flex: 1;
  min-width: 0;
}

.kb-podzadatak .chk span {
  overflow-wrap: anywhere;
}

.kb-podzadatak.je-zavrsen .chk span {
  text-decoration: line-through;
  color: var(--muted);
}

.kb-podz-x {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
}

.kb-podz-x:hover {
  background: var(--card-bg);
  color: var(--ink);
}

.kb-podzadaci-prazno {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.kb-podzadaci-dodaj {
  display: flex;
  gap: 6px;
}

.kb-podzadaci-dodaj input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 8px;
}

.kb-podzadaci-dodaj input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

.kb-akcije {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Komentari na kartici ---- */

.kanban-komentar {
  margin-right: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  cursor: help;
}

.kb-izmena-dugme {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.kb-komentari {
  padding-top: 12px;
  border-top: 1px solid var(--card-bd);
}

.kb-komentar-lista {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kb-komentar {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--card-bd-soft);
}

.kb-komentar-glava {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

/* Ime autora komentara — dugme (otvara profil te osobe). */
.kb-komentar-dugme {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 800;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  cursor: pointer;
}

.kb-komentar-dugme:hover {
  text-decoration-color: currentColor;
}

.kb-komentar-autor {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink);
}

.kb-komentar-vreme {
  font-size: 0.7rem;
  color: var(--muted);
  margin-right: auto;
}

.kb-komentar-tekst {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Traka sa prekidačem rasporeda. */
.stat-raspored {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--card-bd-soft);
}

.stat-raspored strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
}

.stat-raspored p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Na telefonu kartice idu u dve kolone (kao i blokovi preporuka), da strana
   ne bude visoka osam ekrana. */
@media (max-width: 640px) {
  #viewStatistika .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .stat-raspored {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   23. Kanban tabla (19.10.2026)

   Tri kolone (Backlog / DOING / DONE) sa karticama koje se vuku iz
   zadataka i podsetnika. Kartice se prevlače mišem, a na dodir rade
   dugmad (✓ za završeno, tačke za boju). Boje su iste kao kod boje
   reda u tabeli (`boja-zuta` / `boja-zelena` / `boja-crvena`).
   ============================================================ */

/* Objašnjenje iznad table — mora da ima prostora da ne bude zakačeno
   za zaglavlje prve kolone. */
.kanban-uputa {
  margin: 0 0 20px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 70ch;
}

/* Zaglavlje bez naslova — naslov strane već stoji iznad, pa se ovde ne
   ponavlja; ostaju samo brojač i dugme „Osveži". */
.table-head-samo {
  justify-content: flex-end;
  padding: 0 0 4px;
  border-bottom: 0;
}

.kanban-kolone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.kanban-kolona {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 180px;
  overflow: hidden;
}

.kanban-kolona-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--kb-line, var(--card-bd-soft));
  background: var(--kb-soft, var(--accent-soft));
}

/* Svaka kolona ima svoj tihi akcenat — lakše se skenira pogledom. */
.kanban-kolona[data-kanban-kolona='backlog'] { --kb-soft: #fdf6e3; --kb-line: #f3e6c0; --kb-accent: #b45309; }
.kanban-kolona[data-kanban-kolona='doing']   { --kb-soft: #eff6ff; --kb-line: #d7e6fb; --kb-accent: #1d4ed8; }
.kanban-kolona[data-kanban-kolona='done']    { --kb-soft: #f0fdf4; --kb-line: #d3f0dd; --kb-accent: #15803d; }

.kanban-kolona-naslov {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-accent, var(--ink));
}

.kanban-kolona-broj {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 24px;
  text-align: center;
}

.kanban-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-height: 120px;
  transition: background 0.15s;
}

/* Kolona koja prima karticu dok se vuče. */
.kanban-lista.kanban-prima {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
  border-radius: 10px;
}

.kanban-prazno {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---- Kartica ---- */

.kanban-kartica {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-left: 4px solid var(--card-bd);
  border-radius: 10px;
  padding: 10px 12px;
  /* Klik na pozadinu kartice otvara prozor sa karticom. */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}

.kanban-kartica:hover {
  box-shadow: var(--shadow-pop);
}

.kanban-kartica:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kanban-kartica.kanban-vuce-se {
  opacity: 0.45;
  cursor: grabbing;
}

/* Semafor boje — ista paleta kao boja reda u tabeli. */
.kanban-kartica.kanban-boja-zuta   { border-left-color: #f2d73c; }
.kanban-kartica.kanban-boja-zelena { border-left-color: #46c777; }
.kanban-kartica.kanban-boja-crvena { border-left-color: #ef6b6b; }

.kanban-kartica.is-done {
  opacity: 0.72;
}

.kanban-kartica.is-done .kanban-tekst {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.kanban-kartica-vrh {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-vrsta {
  font-size: 0.9rem;
  line-height: 1;
  flex: none;
}

.kanban-investitor {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.kanban-investitor:hover {
  text-decoration: underline;
}

/* ---- Tačke za boju ---- */

.kanban-boje {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.kanban-boja-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid rgba(27, 27, 24, 0.18);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.kanban-boja-dot:hover {
  transform: scale(1.2);
}

.kanban-boja-dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.kanban-boja-dot.is-active {
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--ink);
}

.kanban-dot-bez {
  background: var(--card-bg);
  border-color: #c9c6b8;
}

.kanban-dot-zuta   { background: #f2d73c; }
.kanban-dot-zelena { background: #46c777; }
.kanban-dot-crvena { background: #ef6b6b; }

/* ---- Tekst i dno kartice ---- */

.kanban-tekst {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Naslov kartice — kratak naslov, odvojen od teksta (20.10.2026). */
.kanban-naslov {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.kanban-naslov-dugme {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.kanban-naslov-dugme:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Kad kartica ima naslov, tekst ispod je sitniji (naslov vodi). */
.kanban-tekst.ima-naslov {
  font-size: 0.82rem;
  color: var(--muted);
}

.kanban-kartica-dno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---- Otvaranje kartice (detalji) ---- */

/* Strelica u zaglavlju kartice — otvara/zatvara detalje. */
.kanban-razvij {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-bd);
  border-radius: 7px;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.7rem;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.16s, background 0.15s, color 0.15s;
}

.kanban-razvij:hover {
  background: var(--card-bd-soft);
  color: var(--ink);
}

/* Otvorena kartica: strelica se okrene i dobije tihu pozadinu (ne žutu —
   žuta je zauzeta za tačku boje pored nje). */
.kanban-razvij[aria-expanded='true'] {
  transform: rotate(180deg);
  background: var(--card-bd-soft);
  border-color: var(--card-bd);
  color: var(--ink);
}

/* Otvorena kartica je nešto viša i pa tamnije. */
.kanban-kartica.is-razvijena {
  border-color: var(--card-bd);
  box-shadow: var(--shadow-pop);
}

/* Znak „✎" pored teksta — kartica ima svoj tekst (izvor nije promenjen). */
.kanban-svoj-tekst {
  margin-left: 6px;
  font-size: 0.76rem;
  color: var(--accent);
  cursor: help;
}

/* Detalji kartice: tip, izvor, rok i izmena teksta. */
.kanban-detalji {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--card-bd-soft);
  border-radius: 9px;
  background: var(--kb-soft, var(--card-bd-soft));
}

.kanban-detalj {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.78rem;
}

.kanban-detalj-k {
  flex: none;
  width: 76px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.kanban-detalj-v {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.kanban-detalj-akcije {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Izmena teksta kartice — izvor se ne dira. */
.kanban-izmena {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--card-bd);
}

.kanban-izmena-naslov {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.kanban-tekst-polje {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 8px;
  resize: vertical;
}

.kanban-tekst-polje:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

.kanban-naslov-polje {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 8px;
}

.kanban-naslov-polje:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(238, 206, 56, 0.28);
}

.kanban-izmena-dugme {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kanban-izmena .hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Rok ostaje levo, a dugmad (↩ i ✕) stoje zajedno desno. */
.kanban-kartica-dno .kanban-rok {
  margin-right: auto;
}

.kanban-rok {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--card-bd-soft);
  border-radius: 6px;
  padding: 1px 7px;
}

.kanban-rok.is-overdue {
  color: #b91c1c;
  background: #fee2e2;
  font-weight: 700;
}

.kanban-rok.is-none {
  background: none;
  padding: 0;
  font-weight: 500;
  opacity: 0.75;
}

.kanban-zavrsi {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-bd);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kanban-zavrsi:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #2c2c2c;
}

.kanban-zavrsi:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Brisanje kartice — na svakoj kartici (zadatak, podsetnik, ručna). */
.kanban-obrisi {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-bd);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}

.kanban-obrisi:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.kanban-obrisi:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Uklanjanje završene kartice podsetnika — samo u koloni DONE. */
.kanban-ukloni {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-bd);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.7rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kanban-ukloni:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.kanban-ukloni:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Na telefonu su kolone jedna ispod druge. */
@media (max-width: 980px) {
  .kanban-kolone {
    grid-template-columns: 1fr;
  }

  .kanban-kartica {
    cursor: default;
  }
}

/* ============================================================
   24. Tamna tema

   Uključuje se klasom `tamna-tema` na <html> (postavlja je
   `public/tema.js` u <head>, pre CSS-a — zato nema treperenja).
   Prekidač je u administraciji (sidebar, grupa „Izgled") i u meniju
   naloga, pa tema važi za sve strane: CRM, administraciju, objašnjenja
   i prijavu.

   Prvo se menjaju promenljive (boje, senke, ivice), a onda ide
   nekoliko grupa pravila za mesta gde je boja upisana direktno
   (`#fff`, pastelne pozadine statusa, redovi u boji…). Brend ostaje
   isti: žuta `#EECE38` je akcenat u obe teme.
   ============================================================ */

/* Logotip brenda je crn — u tamnoj temi ga prebacujemo u belo. */
html.tamna-tema .logo-slika {
  filter: invert(1);
}

html.tamna-tema {
  color-scheme: dark;

  --page-bg: #12120d;
  --card-bg: #1c1c16;
  --card-bd: #34342b;
  --card-bd-soft: #2a2a22;

  --main-bg: #1c1c16;
  --main-color: #e8e7dd;
  --ink: #f2f1e8;
  --muted: #a6a59b;
  --line: #34342b;

  --accent-soft: rgba(238, 206, 56, 0.13);
  --accent-line: #4b4324;

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.62);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.68);

  /* Podrazumevana (žuta) strana — kao `:root` u svetloj temi. */
  --view-accent: var(--accent);
  --view-soft: rgba(238, 206, 56, 0.13);
  --view-line: #4b4324;
}

/* --- Boja po pogledu: u tamnoj temi svetlije nijanse --- */

html.tamna-tema body.view-trenutni { --view-accent: #4ade80; --view-soft: rgba(74, 222, 128, 0.14); --view-line: rgba(74, 222, 128, 0.34); }
html.tamna-tema body.view-buduci   { --view-accent: #60a5fa; --view-soft: rgba(96, 165, 250, 0.14); --view-line: rgba(96, 165, 250, 0.34); }
html.tamna-tema body.view-odustali { --view-accent: #94a3b8; --view-soft: rgba(148, 163, 184, 0.14); --view-line: rgba(148, 163, 184, 0.32); }
html.tamna-tema body.view-podsetnik { --view-accent: #fbbf24; --view-soft: rgba(251, 191, 36, 0.14); --view-line: rgba(251, 191, 36, 0.34); }
html.tamna-tema body.view-plantaza { --view-accent: #2dd4bf; --view-soft: rgba(45, 212, 191, 0.14); --view-line: rgba(45, 212, 191, 0.32); }
html.tamna-tema body.view-mitap    { --view-accent: #a78bfa; --view-soft: rgba(167, 139, 250, 0.14); --view-line: rgba(167, 139, 250, 0.32); }
html.tamna-tema body.view-zadaci   { --view-accent: #f87171; --view-soft: rgba(248, 113, 113, 0.14); --view-line: rgba(248, 113, 113, 0.32); }
html.tamna-tema body.view-kanban   { --view-accent: #2dd4bf; --view-soft: rgba(45, 212, 191, 0.14); --view-line: rgba(45, 212, 191, 0.32); }
html.tamna-tema body.view-preporuke { --view-accent: #f472b6; --view-soft: rgba(244, 114, 182, 0.14); --view-line: rgba(244, 114, 182, 0.32); }
html.tamna-tema body.view-statistika { --view-accent: #a5b4fc; --view-soft: rgba(165, 180, 252, 0.14); --view-line: rgba(165, 180, 252, 0.34); }

/* --- Površine (sve što je u svetloj temi belo ili skoro belo) --- */

html.tamna-tema .topbar {
  background: rgba(18, 18, 13, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

html.tamna-tema .drawer,
html.tamna-tema .drawer-head,
html.tamna-tema .modal-card,
html.tamna-tema .panel,
html.tamna-tema .group,
html.tamna-tema .todo-row,
html.tamna-tema .flag,
html.tamna-tema .user-chip,
html.tamna-tema .burger-btn,
html.tamna-tema .nalog-meni,
html.tamna-tema .kolone-meni,
html.tamna-tema .sel-menu,
html.tamna-tema .fajl-ikona,
html.tamna-tema .preporuka-stavka,
html.tamna-tema .data-table tbody tr {
  background: var(--card-bg);
}

html.tamna-tema .tabs {
  background: rgba(28, 28, 22, 0.96);
}

html.tamna-tema .toolbar,
html.tamna-tema .inline-form,
html.tamna-tema .side-vise,
html.tamna-tema .side-reset,
html.tamna-tema .fajl-red,
html.tamna-tema .uvoz-rezultat,
html.tamna-tema .modal-foot,
html.tamna-tema .group-accent,
html.tamna-tema .side-user {
  background: #22221b;
}

html.tamna-tema .side-user.is-open,
html.tamna-tema .side-user:hover,
html.tamna-tema .side-item.is-active .side-count {
  background: #2b2b23;
}

html.tamna-tema .side-count {
  background: #2b2b23;
}

html.tamna-tema .pill {
  background: #26261e;
}

html.tamna-tema .stat-pomoc {
  background: #2b2b23;
}

html.tamna-tema .preporuka-stavka.isplaceno {
  background: #1a2419;
}

html.tamna-tema .stat.is-alert {
  background: #2a2415;
  border-color: #4b4324;
}

html.tamna-tema .stat.is-alert::after {
  background: #f0b429;
}

/* Polja za unos — ista površina, svetliji tekst i vidljiva ivica. */
html.tamna-tema .field input,
html.tamna-tema .field select,
html.tamna-tema .field textarea,
html.tamna-tema .toolbar .field input,
html.tamna-tema .toolbar .field select,
html.tamna-tema .side-field input,
html.tamna-tema .side-field select,
html.tamna-tema .sel-btn {
  background: #17170f;
  border-color: var(--card-bd);
  color: var(--ink);
}

/* Placeholder mora da se vidi na tamnoj površini. */
html.tamna-tema .field input::placeholder,
html.tamna-tema .field textarea::placeholder,
html.tamna-tema .side-field input::placeholder {
  color: #7e7d72;
}

html.tamna-tema .sel-btn:hover {
  border-color: #4a4a3d;
}

html.tamna-tema .btn-ghost,
html.tamna-tema .btn-mini,
html.tamna-tema .btn-danger,
html.tamna-tema .side-suzi,
html.tamna-tema .help-veze code,
html.tamna-tema .help-napomena code,
html.tamna-tema .field input[type='file']::file-selector-button {
  background: #22221b;
}

/* Native dugme „Choose File" ne nasleđuje površinu polja — boji se posebno.
   Važi za sva polja za fajl (avatar, dokumenti), ne samo za `.field`. */
html.tamna-tema input[type='file']::file-selector-button {
  background: #22221b;
  border: 1px solid var(--card-bd);
  border-radius: 8px;
  color: var(--ink);
}

html.tamna-tema .btn-danger {
  border-color: #55292a;
}

/* --- Tekst: sive nijanse moraju da budu svetlije --- */

html.tamna-tema .stat-hint,
html.tamna-tema .side-label,
html.tamna-tema .auth-note,
html.tamna-tema .info-item .k,
html.tamna-tema .info-item .v.empty-v,
html.tamna-tema .state-off,
html.tamna-tema .audit-row .a-time,
html.tamna-tema .audit-row .a-what,
html.tamna-tema .b-none,
html.tamna-tema .todo-row.done .tekst,
html.tamna-tema .data-table th,
html.tamna-tema .mini-table th,
html.tamna-tema .users-table th,
html.tamna-tema .side-field label,
html.tamna-tema .id-tag,
html.tamna-tema .dugme-link {
  color: #93c5fd;
}

html.tamna-tema .drawer-link,
html.tamna-tema .btn-mini {
  color: var(--muted);
}

html.tamna-tema .id-tag {
  background: #2b2b23;
  border-color: #3a3a30;
}

html.tamna-tema .drawer-link {
  color: #7cb0ff;
}

/* Zaglavlja tabela i red na hover */
html.tamna-tema .data-table th,
html.tamna-tema .mini-table th,
html.tamna-tema .users-table th {
  background: #23231c;
}

html.tamna-tema .data-table tbody tr:hover {
  background: #26261e;
}

html.tamna-tema .data-table td,
html.tamna-tema .mini-table td,
html.tamna-tema .users-table td,
html.tamna-tema .audit-row {
  border-bottom-color: var(--card-bd-soft);
}

html.tamna-tema .side-item:hover,
html.tamna-tema .sel-opt:hover,
html.tamna-tema .side-suzi:hover,
html.tamna-tema .kolone-smicanje:hover:not(:disabled) {
  background: #2b2b23;
}

html.tamna-tema .btn-ghost:hover,
html.tamna-tema .btn-mini:hover,
html.tamna-tema .side-reset:hover,
html.tamna-tema .field input[type='file']::file-selector-button:hover {
  background: var(--accent-soft);
}

html.tamna-tema .password-meter {
  background: #2b2b23;
}

/* --- Brend dugme: žuto → belo ostaje, ali tekst mora ostati taman --- */

html.tamna-tema .btn-main:hover,
html.tamna-tema .btn-main:disabled:hover {
  background: #f4f3ea;
  color: #1b1b18;
  border-color: var(--accent);
}

/* --- Oblačić sa objašnjenjem: u tamnoj temi svetla površina, taman tekst --- */

html.tamna-tema .pomoc-tip {
  background: #f4f3ea;
  color: #1b1b18;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

html.tamna-tema .toast {
  background: #2b2b23;
  color: var(--ink);
}

/* --- Statusi i bedževi (pastelne pozadine → tamne nijanse) --- */

html.tamna-tema .st-novi      { color: #c9cbd3; background: #2a2a2e; border-color: #3c3c44; }
html.tamna-tema .st-u_kontaktu { color: #93c5fd; background: #17283d; border-color: #1f3a5c; }
html.tamna-tema .st-sastanak  { color: #c4b5fd; background: #241f3d; border-color: #3a2f66; }
html.tamna-tema .st-ponuda    { color: #fcd34d; background: #302614; border-color: #4d3c1a; }
html.tamna-tema .st-klijent   { color: #86efac; background: #14291b; border-color: #1f4429; }
html.tamna-tema .st-odustao   { color: #fca5a5; background: #2f1717; border-color: #4c2020; }

html.tamna-tema .b-due    { color: #fcd34d; background: #302614; border-color: #4d3c1a; }
html.tamna-tema .b-today  { color: #fca5a5; background: #2f1717; border-color: #4c2020; }
html.tamna-tema .b-future { color: #86efac; background: #14291b; border-color: #1f4429; }

html.tamna-tema .preporuka-ceka      { color: #fcd34d; background: #302614; border-color: #4d3c1a; }
html.tamna-tema .preporuka-isplaceno { color: #86efac; background: #14291b; border-color: #1f4429; }

html.tamna-tema .pill-ok   { color: #86efac; background: #14291b; border-color: #1f4429; }
html.tamna-tema .pill-wait { color: #fcd34d; background: #302614; border-color: #4d3c1a; }

html.tamna-tema .flag.on {
  background: #14291b;
  border-color: #1f4429;
  color: #86efac;
}

html.tamna-tema .side-count.is-alert {
  background: #302614;
  border-color: #4d3c1a;
  color: #fcd34d;
}

html.tamna-tema .group-danger {
  background: #2a1616;
  border-color: #4c2020;
}

html.tamna-tema .role-clan {
  background: #232a45;
  color: #a5b4fc;
}

/* --- Boja reda u tabeli: tamne nijanse iste boje --- */

html.tamna-tema .data-table tbody tr.boja-zuta   { background: #2b2611; }
html.tamna-tema .data-table tbody tr.boja-zelena { background: #12261a; }
html.tamna-tema .data-table tbody tr.boja-crvena { background: #2a1414; }

html.tamna-tema .data-table tbody tr.boja-zuta:hover   { background: #38311a; }
html.tamna-tema .data-table tbody tr.boja-zelena:hover { background: #1a3325; }
html.tamna-tema .data-table tbody tr.boja-crvena:hover { background: #3a1c1c; }

/* Zamrznuta prva kolona ima `background: inherit`, pa nasleđuje boju reda. */

/* --- Avatari: pastelne pozadine → tamne, sa svetlim slovom --- */

html.tamna-tema .avatar.a1,
html.tamna-tema .avatar.a2,
html.tamna-tema .avatar.a3,
html.tamna-tema .avatar.a4,
html.tamna-tema .avatar.a5,
html.tamna-tema .avatar.a6 {
  color: #f2f1e8;
}

html.tamna-tema .avatar.a1 { background: #4a3f1c; }
html.tamna-tema .avatar.a2 { background: #3c3a30; }
html.tamna-tema .avatar.a3 { background: #463a22; }
html.tamna-tema .avatar.a4 { background: #2f3a2b; }
html.tamna-tema .avatar.a5 { background: #3a2f2a; }
html.tamna-tema .avatar.a6 { background: #322f42; }

/* --- Izbor boje reda: „bez boje" je u svetloj temi bela pločica --- */

html.tamna-tema .boja-bez {
  background:
    linear-gradient(to top right, transparent 46%, #6b6b5e 46%, #6b6b5e 54%, transparent 54%),
    #22221b;
}

html.tamna-tema .boja-dot {
  border-color: rgba(255, 255, 255, 0.18);
}

html.tamna-tema .boja-dot.is-active {
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--ink);
}

/* --- Prijava: pozadina i kartica --- */

html.tamna-tema .auth-body {
  background:
    radial-gradient(circle at 12% 10%, rgba(238, 206, 56, 0.14), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(238, 206, 56, 0.08), transparent 38%),
    var(--page-bg);
}

html.tamna-tema .auth-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* --- Prekidač teme (dugme u sidebaru administracije) --- */

.tema-prekidac {
  justify-content: flex-start;
}

/* Mali „prekidač" desno u redu — čisto obeležje, ne menja ništa. */
.tema-sklop {
  flex: none;
  margin-left: auto;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #ddd9c9;
  border: 1px solid #cbc6b3;
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}

.tema-sklop::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s;
}

html.tamna-tema .tema-sklop {
  background: var(--accent);
  border-color: #cbb52f;
}

html.tamna-tema .tema-sklop::after {
  transform: translateX(16px);
  background: #1b1b18;
}

/* Sužen sidebar: ostaje samo ikonica (prekidač se sklanja). */
body.side-suzi .tema-sklop {
  display: none;
}

/* ---- Kanban tabla u tamnoj temi (19.10.2026) ---- */

html.tamna-tema .kanban-kolona[data-kanban-kolona='backlog'] { --kb-soft: rgba(180, 83, 9, 0.16); --kb-line: rgba(180, 83, 9, 0.32); --kb-accent: #fbbf24; }
html.tamna-tema .kanban-kolona[data-kanban-kolona='doing']   { --kb-soft: rgba(37, 99, 235, 0.16); --kb-line: rgba(37, 99, 235, 0.34); --kb-accent: #93c5fd; }
html.tamna-tema .kanban-kolona[data-kanban-kolona='done']    { --kb-soft: rgba(21, 128, 61, 0.18); --kb-line: rgba(21, 128, 61, 0.36); --kb-accent: #86efac; }

html.tamna-tema .kanban-rok {
  background: #22221b;
}

html.tamna-tema .kanban-rok.is-overdue {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

html.tamna-tema .kanban-rok.is-none {
  background: none;
}

html.tamna-tema .kanban-zavrsi {
  background: #22221b;
  border-color: var(--card-bd);
}

html.tamna-tema .kanban-zavrsi:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #2c2c2c;
}

html.tamna-tema .kanban-ukloni {
  background: #22221b;
  border-color: var(--card-bd);
}

html.tamna-tema .kanban-ukloni:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}

html.tamna-tema .kanban-obrisi {
  background: #22221b;
  border-color: var(--card-bd);
}

html.tamna-tema .kanban-obrisi:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}

html.tamna-tema .kanban-boja-dot {
  border-color: rgba(255, 255, 255, 0.22);
}

html.tamna-tema .kanban-boja-dot.is-active {
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--ink);
}

html.tamna-tema .kanban-dot-bez {
  background: var(--card-bg);
  border-color: #55554b;
}

html.tamna-tema .stat-raspored {
  border-top-color: var(--card-bd-soft);
}

html.tamna-tema .kanban-kolona-broj {
  background: #22221b;
}