/* =====================================================================
   DigitOne CRM — vizualni sustav
   Isti tokeni i raspored kao Klubman / DigitOne ITSM / Sidro
   (tamna tema zadano, svijetla preko prekidača). Boje: --sid-*.
   Bootstrap 5 ostaje za grid/modale/forme, ali crpi boje iz --sid-* tokena.
   ===================================================================== */

:root {
  --sid-bg: #10161d; --sid-panel: #182029; --sid-elev: #1d262f;
  --sid-teal: #40a4c7; --sid-teal-d: #3691b0; --sid-green: #81d6a2;
  --sid-text: #e8eef4; --sid-muted: #93a4b4; --sid-dim: #6b7a8c;
  --sid-border: #222c36; --sid-border-2: #2b3744;
  --sid-danger: #e35d5b; --sid-danger-d: #cf4b45; --sid-warn: #e0a63a;
  --sid-radius: 12px;
  --sidebar-width: 240px;
  --header-height: 56px;
  --hover: rgba(255,255,255,.03);
  --teal-soft: rgba(64,164,199,.12);
  --green-soft: rgba(129,214,162,.15);
  --warn-soft: rgba(224,166,58,.15);
  --danger-soft: rgba(227,93,91,.15);
  --ok-bg: #13311f; --ok-txt: #9fe0b8; --ok-brd: #1f4d31;
  --err-bg: #361a1a; --err-txt: #f0a6a4; --err-brd: #5a2a2a;
  --wrn-bg: #352a12; --wrn-txt: #e7c17a; --wrn-brd: #574516;
  --inf-bg: #102a33; --inf-txt: #8fd1e3; --inf-brd: #1d4c5b;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --sid-bg: #f2f4f7; --sid-panel: #ffffff; --sid-elev: #ffffff;
  --sid-teal: #1f86a8; --sid-teal-d: #186d89; --sid-green: #2e9e63;
  --sid-text: #101828; --sid-muted: #475467; --sid-dim: #667085;
  --sid-border: #e4e7ec; --sid-border-2: #d0d5dd;
  --sid-danger: #dc3545; --sid-danger-d: #c22b39; --sid-warn: #b7791f;
  --hover: rgba(0,0,0,.035);
  --teal-soft: rgba(31,134,168,.10);
  --ok-bg: #e8f6ee; --ok-txt: #1e6b3f; --ok-brd: #bfe3cd;
  --err-bg: #fdeaea; --err-txt: #8f2b2b; --err-brd: #f2c2c2;
  --wrn-bg: #fdf4e3; --wrn-txt: #8a6414; --wrn-brd: #f0dcae;
  --inf-bg: #e7f4f8; --inf-txt: #1c5c70; --inf-brd: #bfe0ea;
  color-scheme: light;
}
/* Svijetla tema: bočni izbornik ostaje taman */
:root[data-theme="light"] .sidebar {
  --sid-bg: #0f1b2a; --sid-panel: #18283c; --sid-text: #ffffff; --sid-muted: #b4c1cf; --sid-dim: #6f8399;
  --sid-border: rgba(255,255,255,.07); --sid-teal: #6cc4e2; --teal-soft: rgba(108,196,226,.14);
  color-scheme: dark;
}
:root[data-theme="light"] .main-header { background: #ffffff; }
:root[data-theme="light"] .card, :root[data-theme="light"] .metrika { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); }

/* ---------- Bootstrap tokeni → sid ---------- */
body {
  --bs-body-bg: var(--sid-bg); --bs-body-color: var(--sid-text);
  --bs-border-color: var(--sid-border); --bs-border-color-translucent: var(--sid-border);
  --bs-secondary-color: var(--sid-muted); --bs-tertiary-bg: var(--sid-elev); --bs-secondary-bg: var(--sid-elev);
  --bs-link-color: var(--sid-teal); --bs-link-hover-color: var(--sid-teal-d);
  --bs-link-color-rgb: 64,164,199; --bs-link-hover-color-rgb: 54,145,176;
  --bs-primary: var(--sid-teal); --bs-primary-rgb: 64,164,199;
  --bs-emphasis-color: var(--sid-text); --bs-heading-color: var(--sid-text);
  --bs-border-radius: 8px;
  background: var(--sid-bg); color: var(--sid-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'tnum' 0;
}
/* tanka gornja teal -> zelena traka */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; background: linear-gradient(90deg, var(--sid-teal), var(--sid-green)); }
a { color: var(--sid-teal); text-decoration: none; }
a:hover { color: var(--sid-teal-d); }
h1, h2, h3, h4, h5 { color: var(--sid-text); }
::selection { background: rgba(64,164,199,.3); }
* { scrollbar-color: var(--sid-border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sid-border-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
.text-secondary { color: var(--sid-muted) !important; }
.text-muted { color: var(--sid-dim) !important; }
.tiho { color: var(--sid-muted); }

/* =====================================================================
   Raspored: sidebar + glavni dio
   ===================================================================== */
.wrapper { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); background: var(--sid-bg); border-right: 1px solid var(--sid-border);
  position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 1000;
  transition: transform .3s ease, width .2s ease; padding-top: 3px; color: var(--sid-text);
}
.sidebar-header { padding: 16px 20px; border-bottom: 1px solid var(--sid-border); display: flex; align-items: center; gap: 12px; color: var(--sid-text); }
.sidebar-header:hover { color: var(--sid-text); }
.sidebar-header .logo-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--sid-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: 0 0 auto; }
.sidebar-header h3 { font-size: 16px; font-weight: 600; line-height: 1.25; margin: 0; }
.sidebar-header small { display: block; color: var(--sid-muted); font-size: 11px; margin-top: 2px; }
.sidebar-nav { padding: 12px 0; }
.nav-section { margin-bottom: 8px; }
.nav-section-title { padding: 8px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--sid-dim); }
.nav-item { margin: 1px 8px; }
.nav-link {
  display: flex; align-items: center; width: 100%; padding: 10px 12px; color: var(--sid-muted);
  border-radius: 6px; border-left: 3px solid transparent; font-size: 13px; font-weight: 500;
  background: none; font-family: inherit; cursor: pointer; text-align: left; transition: all .15s ease;
}
.nav-link:hover { background: var(--sid-panel); color: var(--sid-text); }
.nav-link.active { background: var(--teal-soft); color: var(--sid-teal); border-left-color: var(--sid-teal); }
.nav-link > i:first-child { width: 20px; margin-right: 10px; font-size: 16px; text-align: center; }
.sidebar-zavjesa { display: none; }

.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; transition: margin-left .2s ease; }
.main-header {
  height: var(--header-height); background: var(--sid-bg); border-bottom: 1px solid var(--sid-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  position: sticky; top: 0; z-index: 100; margin-top: 3px;
}
.header-left, .header-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-title { font-size: 16px; font-weight: 600; color: var(--sid-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.mobile-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--sid-muted); padding: 4px; }
.header-akcije { display: flex; gap: 8px; align-items: center; }
.header-akcije form { margin: 0; }

.tema-gumb, .ikona-gumb-okvir {
  width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--sid-border-2); background: transparent;
  color: var(--sid-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.tema-gumb:hover { color: var(--sid-text); }
.user-menu { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 4px; background: none; border: 0; font-family: inherit; }
.user-menu::after { display: none; }
.user-info { text-align: right; }
.user-name { font-size: 13px; font-weight: 600; color: var(--sid-text); }
.user-role { font-size: 11px; color: var(--sid-muted); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sid-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.crm-avatar.sm { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-soft); color: var(--sid-teal); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; flex-shrink: 0; }

.content-wrapper { padding: 24px; flex: 1; }

/* padajući izbornici (Bootstrap dropdown, Klubman izgled) */
.dropdown-menu {
  --bs-dropdown-bg: var(--sid-panel); --bs-dropdown-border-color: var(--sid-border-2); --bs-dropdown-color: var(--sid-text);
  --bs-dropdown-link-color: var(--sid-text); --bs-dropdown-link-hover-bg: var(--sid-elev); --bs-dropdown-link-hover-color: var(--sid-teal);
  --bs-dropdown-link-active-bg: var(--teal-soft); --bs-dropdown-link-active-color: var(--sid-teal);
  --bs-dropdown-divider-bg: var(--sid-border); --bs-dropdown-border-radius: 8px; --bs-dropdown-padding-y: 8px; --bs-dropdown-padding-x: 8px;
  --bs-dropdown-item-padding-y: 8px; --bs-dropdown-item-padding-x: 14px; --bs-dropdown-font-size: 13px; --bs-dropdown-min-width: 210px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.dropdown-item { border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.dropdown-item.crveno { color: var(--sid-danger); }
.dropdown-item.aktivna-tema { color: var(--sid-teal); }
.dropdown-menu form { margin: 0; }

/* sažimanje sidebara (desktop) */
.sidebar-sazmi { display: none; }
@media (min-width: 993px) {
  .sidebar-sazmi {
    display: grid; place-items: center; position: fixed; top: 24px; left: calc(var(--sidebar-width) - 14px); z-index: 1001;
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sid-border); background: var(--sid-bg); color: var(--sid-muted);
    font-size: 12px; cursor: pointer; transition: left .2s ease, color .15s, border-color .15s;
  }
  .sidebar-sazmi:hover { color: var(--sid-teal); border-color: var(--sid-teal); }
  html.sidebar-sazeta { --sidebar-width: 72px; }
  html.sidebar-sazeta .sidebar-sazmi i { transform: rotate(180deg); }
  html.sidebar-sazeta .sidebar { overflow-x: hidden; }
  html.sidebar-sazeta .sidebar-header { padding: 16px 0; justify-content: center; }
  html.sidebar-sazeta .sidebar-header > div { display: none; }
  html.sidebar-sazeta .nav-section-title { height: 1px; padding: 0; margin: 10px 16px; font-size: 0; background: var(--sid-border); }
  html.sidebar-sazeta .nav-section:first-child .nav-section-title { display: none; }
  html.sidebar-sazeta .nav-link { justify-content: center; padding: 10px 0; border-left-width: 0; }
  html.sidebar-sazeta .nav-link > span { display: none; }
  html.sidebar-sazeta .nav-link > i:first-child { margin-right: 0; }
}
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-otvoren .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.sidebar-otvoren .sidebar-zavjesa { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
  body.sidebar-otvoren { overflow: hidden; }
  .main-content { margin-left: 0; }
  .mobile-toggle { display: block; }
  .nav-link { padding: 12px; }
  .user-info { display: none; }
}
@media (max-width: 768px) {
  .content-wrapper { padding: 14px; }
  .main-header { padding: 0 12px; }
  .form-control, .form-select { font-size: 16px; }
}

/* =====================================================================
   Kartice / ploče, metrike, tablice
   ===================================================================== */
.card { --bs-card-bg: var(--sid-panel); --bs-card-border-color: var(--sid-border); --bs-card-cap-bg: transparent; --bs-card-color: var(--sid-text); border-radius: var(--sid-radius); margin-bottom: 0; }
.card-header { font-size: 15px; font-weight: 600; padding: 14px 18px; border-bottom: 1px solid var(--sid-border); }
.card-footer { background: transparent; border-top: 1px solid var(--sid-border); }
.card > .table-responsive:last-child, .card > .table-responsive:last-child .table { border-bottom-left-radius: var(--sid-radius); border-bottom-right-radius: var(--sid-radius); }

.metrika { background: var(--sid-panel); border: 1px solid var(--sid-border); border-radius: var(--sid-radius); padding: 16px 18px; display: flex; align-items: center; gap: 14px; color: var(--sid-text); height: 100%; }
.metrika:hover { color: var(--sid-text); border-color: var(--sid-border-2); }
.metrika i { font-size: 24px; }
.metrika .stat { display: flex; flex-direction: column; gap: 2px; }
.metrika .v { font-size: 24px; font-weight: 700; line-height: 1.2; }
.metrika .l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sid-muted); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--sid-text); --bs-table-border-color: var(--sid-border); --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--sid-text); --bs-table-striped-bg: var(--hover); font-size: 13px; }
.table > :not(caption) > * > * { padding: 12px 16px; vertical-align: middle; background-color: transparent; }
.table thead th, .table-light { --bs-table-bg: transparent; --bs-table-color: var(--sid-dim); color: var(--sid-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--sid-border); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-responsive { overflow-x: auto; }
.task-row.done .task-title { text-decoration: line-through; color: var(--sid-dim); }
.task-title { font-weight: 500; color: var(--sid-text); }
.task-title:hover { color: var(--sid-teal); }
.deadline.overdue { color: var(--sid-danger); font-weight: 600; }
.deadline.soon { color: var(--sid-warn); font-weight: 600; }

/* =====================================================================
   Gumbi, forme, značke, napomene, modali
   ===================================================================== */
.btn { --bs-btn-border-radius: 6px; --bs-btn-font-size: 13px; --bs-btn-font-weight: 500; --bs-btn-padding-y: 8px; --bs-btn-padding-x: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn-sm { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 10px; --bs-btn-font-size: 12px; }
.btn-primary { --bs-btn-bg: var(--sid-teal); --bs-btn-border-color: var(--sid-teal); --bs-btn-hover-bg: var(--sid-teal-d); --bs-btn-hover-border-color: var(--sid-teal-d); --bs-btn-active-bg: var(--sid-teal-d); --bs-btn-active-border-color: var(--sid-teal-d); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-outline-primary { --bs-btn-color: var(--sid-teal); --bs-btn-border-color: var(--sid-teal); --bs-btn-hover-bg: var(--sid-teal); --bs-btn-hover-border-color: var(--sid-teal); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--sid-teal-d); --bs-btn-active-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--sid-text); --bs-btn-border-color: var(--sid-border-2); --bs-btn-bg: var(--sid-elev); --bs-btn-hover-bg: var(--sid-border); --bs-btn-hover-border-color: var(--sid-border-2); --bs-btn-hover-color: var(--sid-text); --bs-btn-active-bg: var(--sid-border); --bs-btn-active-color: var(--sid-text); }
:root[data-theme="light"] .btn-outline-secondary { --bs-btn-bg: #eef1f5; --bs-btn-hover-bg: #e3e8ee; }
.btn-outline-danger { --bs-btn-color: var(--sid-danger); --bs-btn-border-color: var(--sid-danger); --bs-btn-hover-bg: var(--sid-danger); --bs-btn-hover-border-color: var(--sid-danger); --bs-btn-hover-color: #fff; }
.btn-link { --bs-btn-color: var(--sid-teal); --bs-btn-hover-color: var(--sid-teal-d); text-decoration: none; }
.btn-close { filter: var(--bs-btn-close-white-filter, none); }
:root[data-theme="dark"] .btn-close, :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.form-label { font-size: 13px; font-weight: 500; color: var(--sid-text); margin-bottom: 6px; }
.form-control, .form-select { background-color: var(--sid-elev); border: 1px solid var(--sid-border-2); color: var(--sid-text); border-radius: 10px; font-size: 13px; padding: 9px 12px; }
.form-control-sm, .form-select-sm { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; }
.form-control:focus, .form-select:focus { background-color: var(--sid-elev); color: var(--sid-text); border-color: var(--sid-teal); box-shadow: 0 0 0 3px rgba(64,164,199,.2); }
.form-control::placeholder { color: var(--sid-dim); }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393a4b4'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px; }
.form-select[multiple], .form-select[size]:not([size="1"]) { background-image: none; }
.form-check-input { background-color: var(--sid-elev); border-color: var(--sid-border-2); }
.form-check-input:checked { background-color: var(--sid-teal); border-color: var(--sid-teal); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(64,164,199,.2); border-color: var(--sid-teal); }
.form-text { color: var(--sid-muted); font-size: 12px; }
.input-group-text { background: var(--sid-elev); border-color: var(--sid-border-2); color: var(--sid-muted); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.6); }
:root[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator { filter: none; }
select.form-select-sm.border-primary, select.form-select-sm.border-success, select.form-select-sm.border-warning, select.form-select-sm.border-secondary { border-width: 1px; }
.border-primary { border-color: var(--sid-teal) !important; }
.border-success { border-color: var(--sid-green) !important; }
.border-warning { border-color: var(--sid-warn) !important; }
.border-secondary { border-color: var(--sid-border-2) !important; }

.badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.badge.bg-primary { background: var(--teal-soft) !important; color: var(--sid-teal); }
.badge.bg-success { background: var(--green-soft) !important; color: var(--sid-green); }
.badge.bg-warning { background: var(--warn-soft) !important; color: var(--sid-warn) !important; }
.badge.bg-danger { background: var(--danger-soft) !important; color: var(--sid-danger); }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background: var(--sid-elev) !important; color: var(--sid-muted) !important; border: 1px solid var(--sid-border-2); }
.badge.bg-info { background: var(--inf-bg) !important; color: var(--inf-txt) !important; }
.badge.fs-6 { font-size: 12.5px !important; padding: 5px 12px; }

.alert { border-radius: var(--sid-radius); padding: 12px 16px; font-size: 13px; }
.alert-success { background: var(--ok-bg); color: var(--ok-txt); border-color: var(--ok-brd); }
.alert-danger { background: var(--err-bg); color: var(--err-txt); border-color: var(--err-brd); }
.alert-warning { background: var(--wrn-bg); color: var(--wrn-txt); border-color: var(--wrn-brd); }
.alert-info { background: var(--inf-bg); color: var(--inf-txt); border-color: var(--inf-brd); }

.modal-content { background: var(--sid-panel); border: 1px solid var(--sid-border-2); border-radius: var(--sid-radius); color: var(--sid-text); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.modal-header, .modal-footer { border-color: var(--sid-border); }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-backdrop { --bs-backdrop-opacity: .55; }

.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--sid-text); --bs-list-group-border-color: var(--sid-border); --bs-list-group-action-hover-bg: var(--hover); --bs-list-group-action-hover-color: var(--sid-text); --bs-list-group-action-active-bg: var(--teal-soft); }
.list-group-item { background: transparent; }
.list-group-item.disabled { color: var(--sid-dim); background: transparent; }
.pagination { --bs-pagination-bg: var(--sid-elev); --bs-pagination-color: var(--sid-text); --bs-pagination-border-color: var(--sid-border-2); --bs-pagination-hover-bg: var(--sid-border); --bs-pagination-hover-color: var(--sid-text); --bs-pagination-active-bg: var(--sid-teal); --bs-pagination-active-border-color: var(--sid-teal); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--sid-dim); --bs-pagination-disabled-border-color: var(--sid-border); margin: 0; }
hr { border-color: var(--sid-border); opacity: 1; }
dl.row dt { color: var(--sid-muted); font-weight: 500; }

/* kartice (tabovi) */
.kartice { display: flex; gap: 2px; border-bottom: 1px solid var(--sid-border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.kartice a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--sid-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.kartice a:hover { color: var(--sid-text); }
.kartice a.active { color: var(--sid-teal); border-bottom-color: var(--sid-teal); }
.znak { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: var(--sid-elev); color: var(--sid-muted); border: 1px solid var(--sid-border-2); line-height: 1.3; }
.kartice a.active .znak { background: var(--teal-soft); color: var(--sid-teal); border-color: transparent; }

/* =====================================================================
   Stablo zadataka, komentari, poveznice, SharePoint picker, kalendar
   ===================================================================== */
.tree-group { border-left: 2px solid var(--sid-border); margin-left: 10px; padding-left: 12px; }
.tree-group.depth-0 { border-left: 0; margin-left: 0; padding-left: 0; }
.tree-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer; user-select: none; border-radius: 6px; }
.tree-head:hover { background: var(--hover); }
.tree-head .chev { transition: transform .15s; color: var(--sid-dim); }
.tree-head.collapsed .chev { transform: rotate(-90deg); }
.tree-head .name { font-weight: 600; }
.tree-head .cnt { font-size: 11px; background: var(--sid-elev); border: 1px solid var(--sid-border-2); border-radius: 10px; padding: 1px 7px; color: var(--sid-muted); }
.tree-body { margin-left: 8px; }
.tree-body > .card { margin-bottom: 10px; }
.group-list-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; }
.group-list-row:hover { background: var(--hover); }
.group-list-row .actions { opacity: 0; }
.group-list-row:hover .actions { opacity: 1; }
.comment { border-left: 3px solid var(--sid-border-2); padding: 8px 12px; margin-bottom: 10px; }
.comment .meta { font-size: 12px; color: var(--sid-muted); }
.comment .body { white-space: pre-wrap; }
.desc { white-space: pre-wrap; }
.link-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--sid-border); }
.link-row:last-child { border-bottom: 0; }
.text-warning { color: var(--sid-warn) !important; }
.text-primary { color: var(--sid-teal) !important; }
.text-danger { color: var(--sid-danger) !important; }
.text-success { color: var(--sid-green) !important; }
.text-info { color: var(--inf-txt) !important; }
.bg-light { background: var(--sid-elev) !important; }
.border { border-color: var(--sid-border-2) !important; }

#spPicker .sp-list { max-height: 50vh; overflow: auto; border-color: var(--sid-border-2) !important; }
.sp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; }
#spPicker .sp-item { cursor: pointer; }
.sp-item:hover { background: var(--hover); }
.sp-item.selected { background: var(--teal-soft); }
.sp-crumbs { font-size: 13px; }
.sp-crumbs a { color: var(--sid-text); }
.sp-crumbs a:hover { color: var(--sid-teal); }

#calendar { background: var(--sid-panel); padding: 12px; border-radius: var(--sid-radius); border: 1px solid var(--sid-border); --fc-border-color: var(--sid-border); --fc-page-bg-color: var(--sid-panel); --fc-neutral-bg-color: var(--sid-elev); --fc-today-bg-color: var(--teal-soft); --fc-button-bg-color: var(--sid-elev); --fc-button-border-color: var(--sid-border-2); --fc-button-text-color: var(--sid-text); --fc-button-hover-bg-color: var(--sid-border); --fc-button-hover-border-color: var(--sid-border-2); --fc-button-active-bg-color: var(--sid-teal); --fc-button-active-border-color: var(--sid-teal); --fc-list-event-hover-bg-color: var(--hover); }
.fc .fc-toolbar-title { font-size: 16px; font-weight: 600; }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--sid-muted); }
.fc-theme-standard .fc-list { border-color: var(--sid-border); }

/* =====================================================================
   Kanban ploča
   ===================================================================== */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .kanban { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(260px, 1fr); overflow-x: auto; padding-bottom: 8px; } }
.kanban-col { background: var(--sid-panel); border: 1px solid var(--sid-border); border-radius: var(--sid-radius); display: flex; flex-direction: column; min-height: 200px; }
.kanban-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sid-border); font-weight: 600; font-size: 13px; }
.kanban-head .tocka { width: 8px; height: 8px; border-radius: 50%; }
.kanban-head .cnt { margin-left: auto; font-size: 11px; background: var(--sid-elev); border: 1px solid var(--sid-border-2); border-radius: 10px; padding: 1px 8px; color: var(--sid-muted); }
.kanban-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; flex: 1; }
.kanban-card { background: var(--sid-elev); border: 1px solid var(--sid-border-2); border-radius: 10px; padding: 10px 12px; cursor: grab; transition: border-color .15s, transform .15s; }
.kanban-card:hover { border-color: var(--sid-teal); }
.kanban-card.sortable-ghost { opacity: .35; }
.kanban-card.sortable-chosen { cursor: grabbing; transform: rotate(1deg); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.kanban-card .naslov { font-weight: 600; font-size: 13px; color: var(--sid-text); display: block; margin-bottom: 4px; }
.kanban-card .naslov:hover { color: var(--sid-teal); }
.kanban-card .meta { font-size: 11.5px; color: var(--sid-muted); display: flex; flex-direction: column; gap: 2px; }
.kanban-card .dno { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.kanban-card .rok { font-size: 11.5px; font-weight: 600; color: var(--sid-muted); }
.kanban-card .rok.overdue { color: var(--sid-danger); }
.kanban-card .rok.soon { color: var(--sid-warn); }
.kanban-card.done .naslov { text-decoration: line-through; color: var(--sid-dim); }
.kanban-col.drag-over { border-color: var(--sid-teal); background: var(--teal-soft); }
.kanban-prazno { color: var(--sid-dim); font-size: 12.5px; text-align: center; padding: 20px 10px; border: 1px dashed var(--sid-border-2); border-radius: 8px; }

/* =====================================================================
   Prijava
   ===================================================================== */
.vrata { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--sid-bg); }
.vrata-panel { width: 100%; max-width: 400px; background: var(--sid-panel); border: 1px solid var(--sid-border-2); border-radius: 12px; padding: 36px 34px; box-shadow: 0 20px 50px rgba(0,0,0,.5); text-align: center; }
:root[data-theme="light"] .vrata-panel { box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.vrata-znak { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
.vrata-znak .logo-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--sid-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.vrata-znak span { font-weight: 700; letter-spacing: .08em; font-size: 18px; color: var(--sid-text); }
.vrata-panel h1 { font-size: 20px; font-weight: 700; }
.vrata-panel .uvod { color: var(--sid-muted); margin: 6px 0 22px; font-size: 13.5px; }