:root {
  --login-background: linear-gradient(90deg, rgba(8, 15, 13, 0.9), rgba(8, 15, 13, 0.62) 46%, rgba(8, 15, 13, 0.78)), url("./assets/login-background.png") center center / cover no-repeat, radial-gradient(circle at top left, #203a33, #0f1715 48%, #0a100e);
  --bg: #0f1715;
  --surface: #17211e;
  --surface-2: #22312c;
  --surface-3: #101916;
  --ink: #eef6f2;
  --muted: #9db0a9;
  --line: #2d4039;
  --accent: #53c7ad;
  --accent-2: #ff846f;
  --warn: #f0b84f;
  --ok: #63d78b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  background: var(--bg);
}

html:has(body:not(.is-authenticated)) {
  scrollbar-gutter: auto;
  overflow: hidden;
  background: var(--login-background);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

body:not(.is-authenticated) {
  overflow: hidden;
  background: var(--login-background);
}

body:not(.is-authenticated) .app-shell {
  display: none;
}

body.is-authenticated .login-screen {
  display: none;
}

body:not(.is-admin) .admin-only {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #9df0dd;
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

button,
.file-button,
.nav-item,
button.danger {
  /* Uzor: .agenda-filter-tab - cist "ease" prelaz (bez spring bounca) da press
     bude crisp i ujednacen na celoj aplikaciji. */
  transition: transform 150ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

button:hover,
.file-button:hover,
.nav-item:hover,
button.danger:hover {
  transform: translateY(-1px);
}

/* Tactile feedback DOK se dugme drzi pritisnuto (real-time): utisne se nadole +
   blago smanji. Bez bocnog tresenja. */
button:active,
.file-button:active,
button.danger:active {
  transform: translateY(1px) scale(0.95);
  transition-duration: 60ms;
}

/* Nav linkovi (Rokovi/Predmeti/Kontakti/Kasa) menjaju view i pokrecu tezak
   re-render; scale press bi pri spam-kliku ostajao "zaglavljeno umanjen" jer
   render izgladni iscrtavanje. Zato ovde koristimo samo vertikalni "utisak"
   (translateY) koji je robustan i ne izgleda pokvareno pri brzom klikanju. */
.nav-item:active {
  transform: translateY(1px);
  transition-duration: 60ms;
}

.app-shell {
  min-height: 100vh;
}

.login-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: var(--login-background);
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  background: rgba(19, 32, 28, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-brand {
  justify-content: center;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.login-brand strong {
  white-space: nowrap;
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.login-card input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface-3);
  color: var(--ink);
}

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--accent-2);
  font-weight: 700;
}

.login-hint {
  margin-bottom: 0;
  font-size: 13px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: #0b1210;
  color: var(--ink);
  padding: 12px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
}
.app-header > * {
  min-width: 0;
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  justify-self: end;
}

.header-tools .header-action {
  min-height: 38px;
  padding: 0 10px;
  white-space: nowrap;
}

.header-tools .global-search {
  width: 360px;
  flex: 0 1 auto;
  min-width: 160px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-menu {
  position: relative;
  width: min(340px, 100%);
  min-width: 0;
}

.brand-trigger {
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.brand-trigger:hover,
.brand-trigger[aria-expanded="true"] {
  background: rgba(216, 255, 244, 0.08);
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.brand-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.brand-menu-user {
  display: grid;
  gap: 3px;
  padding: 10px 11px 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.brand-menu-user span {
  color: var(--muted);
  font-size: 12px;
}

.brand-menu-dropdown button {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.brand-menu-dropdown button:hover {
  background: var(--surface-3);
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  overflow: hidden;
  border-radius: 8px;
  background: #f7fbf9;
  border: 1px solid rgba(216, 255, 244, 0.2);
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.brand small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: thin;
  justify-self: center;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 14px;
  background: transparent;
  color: #c9d8d3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.nav-item:hover,
.nav-item.active {
  background: #25493f;
  color: #ffffff;
}

@media (min-width: 761px) {
  .nav {
    overflow-x: visible;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }
}

.main {
  padding: 18px 28px 28px;
  min-width: 0;
  max-width: 1560px;
  margin: 0 auto;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  font-size: 18px;
  margin-bottom: 0;
}

h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.topbar-actions,
.panel-heading,
.modal-actions,
.case-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.active-user-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.active-user-pill strong {
  color: var(--ink);
  margin-left: 4px;
}

.global-search {
  position: relative;
  min-width: 0;
}

.global-search::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe3db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  opacity: 0.9;
}

.global-search .search {
  width: 100%;
  max-width: none;
  min-height: 42px;
  padding-left: 36px;
  border-color: rgba(216, 237, 230, 0.4);
  background: #20352f;
  color: #f6faf7;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.global-search .search:focus {
  border-color: rgba(120, 220, 190, 0.85);
  box-shadow: 0 0 0 3px rgba(83, 199, 173, 0.25);
}

.global-search .search::placeholder {
  color: #b8c8c1;
}

.global-search-results {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.global-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-height: 54px;
  border: 0;
  border-radius: 7px;
  padding: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.global-result-group {
  display: grid;
  gap: 4px;
}

.global-result-group + .global-result-group {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.global-result-group-title {
  padding: 3px 8px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.global-result-group .global-result {
  grid-template-columns: minmax(0, 1fr);
}

.global-result-group .global-result small {
  grid-column: 1;
}

.global-result:hover {
  background: var(--surface-2);
  transform: none;
}

.global-result strong,
.global-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-result small {
  grid-column: 2;
  color: var(--muted);
}

.global-empty {
  margin: 4px;
  padding: 8px;
}

.primary,
.secondary,
.text-button,
.file-button {
  border: 0;
  border-radius: 8px;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary {
  background: var(--accent);
  color: #06110f;
  font-weight: 800;
}

.secondary {
  background: var(--surface-2);
  color: var(--ink);
}

.danger {
  border: 0;
  border-radius: 8px;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 132, 111, 0.16);
  color: #ffb3a5;
}

.text-button {
  background: transparent;
  color: var(--accent);
  padding: 0 4px;
  min-height: 32px;
}

.small {
  min-height: 34px;
  padding: 0 12px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.hidden {
  display: none !important;
}

.error-banner {
  margin-bottom: 16px;
  border: 1px solid #f2b5a7;
  background: #fff0ec;
  color: #8f2a19;
  border-radius: 8px;
  padding: 12px 14px;
}

/* Item 9: trešenje banera greške da privuče pažnju (koristi postojeći shake). */
.error-banner-shake {
  animation: case-title-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.info-banner {
  border-color: #bbf7d0;
  background: #edfdf4;
  color: #166534;
}

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

.dashboard-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.dashboard-intro h2,
.dashboard-intro p {
  margin: 0;
}

.dashboard-intro h2 {
  margin-top: 4px;
}

.dashboard-focus-grid,
.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.dashboard-secondary-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
}

.metric,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  display: grid;
  grid-template-rows: minmax(32px, auto) auto;
  align-content: start;
  align-items: start;
  gap: 8px;
  min-height: 92px;
  padding: 15px 16px;
  border-left: 3px solid var(--line);
  box-shadow: none;
  cursor: default;
  transform: none !important;
}

.dashboard-collapsible {
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
}

.dashboard-collapsible summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--muted);
  font-weight: 800;
}

.dashboard-collapsible[open] summary {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.dashboard-collapsible-content {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.metric.danger {
  border-left-color: #ff846f;
}

.metric.warn {
  border-left-color: #f0b84f;
}

.metric.ok {
  border-left-color: #63d78b;
}

.metric.accent {
  border-left-color: var(--accent);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  margin: 0;
}

.metric strong {
  font-size: 26px;
  line-height: 1;
}

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

.reminder-panel {
  margin-bottom: 0;
}

.task-focus-panel,
.director-task-panel {
  margin-bottom: 0;
}

.reminder-list {
  display: grid;
  gap: 10px;
}

.task-focus-list,
.director-task-triage,
.director-task-list {
  display: grid;
  gap: 10px;
}

.task-focus-list h3 {
  margin-top: 4px;
}

.task-focus-card,
.director-task-card,
.director-task-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink);
}

.task-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.task-focus-card.danger {
  border-color: rgba(255, 132, 111, 0.42);
  background: rgba(255, 132, 111, 0.1);
}

.task-focus-card.warn {
  border-color: rgba(240, 184, 79, 0.42);
  background: rgba(240, 184, 79, 0.1);
}

.director-task-triage {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.director-task-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.director-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  align-items: center;
  text-align: left;
  padding: 10px;
}

.director-task-row small {
  grid-column: 2;
  color: var(--muted);
}

.reminder-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
  color: var(--ink);
}

.reminder-item .muted {
  grid-column: 2;
}

.director-brief-panel {
  margin-bottom: 16px;
}

.case-control-panel {
  margin-bottom: 16px;
}

.quick-guide-panel {
  margin-bottom: 16px;
}

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

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

.quick-guide-step {
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink);
  text-align: left;
  display: grid;
  gap: 8px;
  align-content: start;
}

.quick-guide-step span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(83, 199, 173, 0.16);
  color: var(--accent);
  font-weight: 900;
}

.quick-guide-step small {
  color: var(--muted);
}

.brief-card {
  text-align: left;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: var(--surface-3);
  color: var(--ink);
}

.brief-card span,
.brief-card small {
  color: var(--muted);
}

.brief-card strong {
  font-size: 32px;
}

.brief-card.danger {
  background: rgba(255, 132, 111, 0.12);
  border-color: rgba(255, 132, 111, 0.38);
}

.brief-card.warn {
  background: rgba(240, 184, 79, 0.12);
  border-color: rgba(240, 184, 79, 0.38);
}

.brief-card.ok {
  background: rgba(99, 215, 139, 0.1);
  border-color: rgba(99, 215, 139, 0.34);
}

.case-control-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.case-control-card {
  display: grid;
  gap: 10px;
  text-align: left;
  align-content: start;
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
  color: var(--ink);
}

.case-control-card strong,
.case-control-card span,
.case-control-card small {
  display: block;
}

.case-control-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-panel {
  margin-top: 0;
}

.team-workload {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
}

.team-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

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

.team-stats span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.team-stats strong {
  font-size: 20px;
}

.team-stats small {
  color: var(--muted);
  font-size: 11px;
}

.span-7 {
  grid-column: span 7;
}

.span-5 {
  grid-column: span 5;
}

.panel {
  padding: 18px;
  min-width: 0;
}

.panel-heading {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.panel-actions,
.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-heading-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-feed,
.deadline-list,
.audit-list,
.case-list {
  display: grid;
  gap: 10px;
}

.demo-readiness {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
}

.presentation-guide {
  display: grid;
  gap: 10px;
}

.presentation-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.presentation-step.active {
  border-color: rgba(32, 95, 82, 0.55);
  background: #eef7f3;
  box-shadow: 0 0 0 3px rgba(32, 95, 82, 0.1);
}

.presentation-step small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.demo-talk-track {
  color: var(--accent) !important;
  font-weight: 700;
}

.step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d8ede6;
  color: var(--accent);
  font-weight: 800;
}

.demo-mode-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.demo-mode-pill.active {
  background: #d8ede6;
  color: var(--accent);
}

.presentation-floating {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(32, 95, 82, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 42px rgba(26, 36, 32, 0.16);
  backdrop-filter: blur(8px);
}

.presentation-floating strong,
.presentation-floating small {
  display: block;
}

.presentation-floating small {
  margin-top: 3px;
  color: var(--muted);
}

#case-record-modal {
  width: min(1200px, 94vw);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  margin: 16px auto;
}

#case-record-modal .case-record-modal-form {
  height: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 12px;
  padding-right: 20px;
}

#case-record-modal-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 4px;
}

#case-record-modal-content .case-record-content {
  display: grid;
  gap: 18px;
}

#case-record-modal-content .side-stack {
  display: grid;
  gap: 16px;
}

/* --- Podaci predmeta: summary strip + tabovi --- */
.case-record-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.case-record-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.case-record-summary-cell small {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.case-record-summary-cell strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  word-break: break-word;
}

.case-record-summary-status strong {
  color: var(--accent, #1f7a5a);
}

.case-record-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
}

.case-record-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px 6px 0 0;
}

.case-record-tab:hover {
  color: var(--ink);
  background: rgba(83, 199, 173, 0.12);
}

.case-record-panel .task-row.task-row-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.case-record-panel .task-row.task-row-clickable:hover {
  border-color: var(--accent, #53c7ad);
  background: rgba(83, 199, 173, 0.08);
}

.case-record-panel .task-row.task-row-clickable:active {
  transform: translateY(1px);
}

.case-record-tab.active {
  color: var(--accent, #1f7a5a);
  border-bottom-color: var(--accent, #1f7a5a);
}

.record-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(31, 122, 90, 0.12);
  color: var(--accent, #1f7a5a);
  font-size: 12px;
  font-weight: 700;
}

.case-record-panel {
  display: none;
  padding-top: 4px;
}

.case-record-panel.active {
  display: block;
  animation: case-record-fade 0.16s ease;
}

@keyframes case-record-fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.case-record-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 860px) {
  .case-record-two-col {
    grid-template-columns: 1fr;
  }
}

.case-title-shake {
  animation: case-title-shake 0.72s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: left center;
}

.cash-record-shake {
  animation: case-title-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: center;
}

@keyframes case-title-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50% { transform: translateX(-6px); }
  20%, 60% { transform: translateX(6px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

dialog.upload-overlay {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

dialog.upload-overlay:not([open]) {
  display: none;
}

dialog.upload-overlay[open] {
  display: flex;
}

dialog.upload-overlay::backdrop {
  background: rgba(12, 26, 22, 0.62);
  backdrop-filter: blur(2px);
}

.upload-cancel {
  margin-top: 4px;
}

.upload-cancel.hidden {
  display: none;
}

.upload-overlay-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 360px;
  padding: 26px 28px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  color: var(--ink);
}

.upload-overlay-card strong {
  font-size: 16px;
  color: var(--ink);
}

.upload-overlay-card .muted {
  color: var(--muted);
}

.upload-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid rgba(83, 199, 173, 0.25);
  border-top-color: var(--accent);
  animation: upload-spin 0.8s linear infinite;
}

@keyframes upload-spin {
  to { transform: rotate(360deg); }
}

.upload-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(83, 199, 173, 0.18);
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  width: 30%;
  border-radius: 999px;
  background: var(--accent);
  animation: upload-progress-indeterminate 1.15s ease-in-out infinite;
}

/* Determinisan rezim: realna sirina 0-100%, bez beskonacne animacije. */
.upload-progress-bar.is-determinate {
  width: 0%;
  margin-left: 0;
  animation: none;
  transition: width 0.2s ease;
}

.upload-overlay-percent {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@keyframes upload-progress-indeterminate {
  0% { margin-left: -30%; width: 30%; }
  50% { width: 55%; }
  100% { margin-left: 100%; width: 30%; }
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

.tutorial-dim {
  position: absolute;
  inset: 0;
  background: transparent;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 121;
  border: 2px solid #9df0dd;
  border-radius: 10px;
  box-shadow: 0 0 0 999vmax rgba(2, 8, 6, 0.82), 0 0 0 8px rgba(83, 199, 173, 0.24), 0 0 34px rgba(157, 240, 221, 0.62);
  background: rgba(83, 199, 173, 0.08);
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease;
}

.tutorial-bubble {
  position: fixed;
  z-index: 122;
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(83, 199, 173, 0.35);
  border-radius: 8px;
  background: rgba(20, 31, 28, 0.98);
  color: var(--ink);
  box-shadow: var(--shadow);
  pointer-events: auto;
  max-height: calc(100vh - 24px);
  overflow: auto;
  transition: opacity 150ms ease;
}

/* Tutorijal: bez horizontalnog scroll-a dok je aktivan. */
body.tutorial-running { overflow-x: hidden; }

/* Pulsiranje mesta koje treba kliknuti (umesto tekstualnog uputstva). */
.tutorial-spotlight.tutorial-spotlight-pulse {
  animation: tutorial-spotlight-pulse 1.2s ease-in-out infinite;
}
@keyframes tutorial-spotlight-pulse {
  0%, 100% { outline: 3px solid rgba(157, 240, 221, 0.95); outline-offset: 2px; }
  50% { outline: 3px solid rgba(157, 240, 221, 0.2); outline-offset: 8px; }
}

/* Pulsiranje dugmeta "Zavrsi" na kraju vodica. */
[data-action="next-tutorial-step"].tutorial-finish-pulse {
  animation: tutorial-finish-pulse 1.1s ease-in-out infinite;
}
@keyframes tutorial-finish-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(83, 199, 173, 0.55); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 7px rgba(83, 199, 173, 0); }
}

.tutorial-bubble h2,
.tutorial-bubble p {
  margin: 0;
}

.tutorial-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tutorial-close:hover {
  background: rgba(150, 170, 165, 0.16);
  color: var(--ink);
}
.tutorial-bubble .tutorial-step-count,
.tutorial-bubble > h2 {
  padding-right: 28px;
}

.tutorial-step-count {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.tutorial-overlay.tutorial-menu-mode .tutorial-actions {
  justify-content: flex-end;
}

.tutorial-target {
  scroll-margin-block: 140px;
  position: relative;
  z-index: 1;
}

.tutorial-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

.tutorial-overlay.tutorial-menu-mode .tutorial-dim {
  background: rgba(2, 8, 6, 0.68);
}

.tutorial-overlay.tutorial-menu-mode .tutorial-bubble {
  transform: translate(-50%, -50%);
}
.tutorial-overlay.tutorial-menu-mode .tutorial-bubble .tutorial-step-count,
.tutorial-overlay.tutorial-menu-mode .tutorial-bubble h2,
.tutorial-overlay.tutorial-menu-mode .tutorial-bubble > p {
  text-align: center;
}

.tutorial-overlay:not(.tutorial-menu-mode) .tutorial-bubble {
  transform: none;
}

.tutorial-instruction {
  padding: 10px 12px;
  border: 1px solid rgba(157, 240, 221, 0.35);
  border-radius: 8px;
  background: rgba(83, 199, 173, 0.12);
  color: var(--accent-2);
  font-weight: 800;
}

.tutorial-module-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.tutorial-module-list button {
  width: 100%;
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(83, 199, 173, 0.28);
  border-radius: 8px;
  background: rgba(27, 48, 42, 0.92);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.tutorial-module-list button:hover,
.tutorial-module-list button:focus-visible {
  border-color: rgba(157, 240, 221, 0.75);
  background: rgba(37, 69, 59, 0.96);
}

.tutorial-module-list strong,
.tutorial-module-list span {
  display: block;
}

.tutorial-module-list strong {
  font-size: 16px;
}

.tutorial-module-list span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
/* Audit stranica: sekcije kao harmonika (details/summary). */
.audit-accordion {
  overflow: hidden;
}

.audit-accordion > summary {
  list-style: none;
  cursor: pointer;
}

.audit-accordion > summary::-webkit-details-marker {
  display: none;
}

.audit-accordion > summary::marker {
  content: "";
}

.audit-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.audit-accordion-summary-actions{display:flex;align-items:center;gap:12px}
.audit-accordion:not([open]) .audit-accordion-summary-actions > button{display:none}
.reset-pass-row{display:flex;gap:8px;align-items:center}
.reset-pass-row input{flex:1;min-width:0}
/* Backup: 4 dugmeta centrirana iznad 4 kartice statusa (isti raster kao status grid). */
.backup-history-panel .panel-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.backup-history-panel .panel-actions > *{justify-self:center}
/* Korisnici: badge i dugmad u ravnim kolonama (badge uvek u istoj liniji). */
.user-item .compact-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:0}
.user-item .compact-actions button{white-space:nowrap}
.user-item .compact-actions .tag{display:inline-flex;align-items:center;justify-content:center;min-width:84px;text-align:center}
/* Deaktiviraj: suptilno crvenkasto (destruktivna radnja), u istoj liniji sa ostalima */
.user-deactivate-btn{color:#e8967f;border-color:rgba(216,90,48,0.45)}
.user-deactivate-btn:hover{background:rgba(216,90,48,0.15);border-color:rgba(216,90,48,0.75);color:#f0b3a1}

.audit-accordion-summary h2 {
  margin: 0;
}

.audit-accordion-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 15px;
  transition: transform 0.2s ease;
}

.audit-accordion[open] > summary .audit-accordion-chevron {
  transform: rotate(180deg);
}

.audit-accordion > summary:hover .audit-accordion-chevron {
  color: var(--accent);
}

.floating-demo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.demo-highlight {
  position: relative;
  outline: 3px solid rgba(32, 95, 82, 0.45);
  box-shadow: 0 0 0 7px rgba(32, 95, 82, 0.1), var(--shadow);
  transition: box-shadow 160ms ease, outline-color 160ms ease;
}

.readiness-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.readiness-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.release-center {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mvp-qa-panel {
  margin-bottom: 16px;
}

.mvp-qa-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mvp-qa-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
  color: var(--ink);
}

.mvp-qa-card strong,
.mvp-qa-card small {
  display: block;
}

.mvp-qa-card small {
  color: var(--muted);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.mvp-qa-card.ok {
  border-color: rgba(83, 199, 173, 0.32);
}

.mvp-qa-card.warn {
  border-color: rgba(240, 184, 79, 0.42);
  background: rgba(240, 184, 79, 0.08);
}

.mvp-qa-card.danger {
  border-color: rgba(255, 132, 111, 0.42);
  background: rgba(255, 132, 111, 0.08);
}

.release-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.release-card strong {
  overflow-wrap: anywhere;
}

.primary-release-card {
  grid-column: span 2;
}

.release-checklist {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.readiness-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--ok);
}

.readiness-item.warn .readiness-dot {
  background: var(--warn);
}

.readiness-item.danger .readiness-dot {
  background: var(--accent-2);
}

.feed-item,
.risk-item,
.audit-item,
.case-row,
.document-card,
.task-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.feed-item {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 12px;
  align-items: center;
}

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

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: #31413c;
  font-size: 12px;
  font-weight: 700;
}

.tag.warn {
  background: #fff1d2;
  color: #7b5009;
}

.tag.danger {
  background: #ffe2da;
  color: #9b2d1d;
}

.tag.ok {
  background: #dff4e8;
  color: #17633b;
}

.tag-status-open {
  background: #dbeafe;
  color: #1d4ed8;
}

.tag-status-progress {
  background: #ffedd5;
  color: #9a3412;
}

.tag-status-risk,
.tag-status-late {
  background: #fee2e2;
  color: #b91c1c;
}

.tag-status-done {
  background: #dcfce7;
  color: #166534;
}

.deadline-countdown-tag { font-weight: 600; }
.deadline-countdown-overdue { background: rgba(255, 132, 111, 0.18); color: #ffb3a5; }
.deadline-countdown-today { background: rgba(240, 184, 79, 0.20); color: #ffd27a; }
.deadline-countdown-soon { background: rgba(240, 184, 79, 0.13); color: #f0c996; }
.deadline-countdown-ok { background: rgba(122, 211, 194, 0.14); color: #9df0dd; }

.calendar-popover-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 10px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
}
.calendar-popover-countdown svg {
  width: 14px;
  height: 14px;
}
.calendar-popover-countdown.deadline-countdown-overdue { background: rgba(255, 132, 111, 0.18); color: #ffb3a5; }
.calendar-popover-countdown.deadline-countdown-today { background: rgba(240, 184, 79, 0.20); color: #ffd27a; }
.calendar-popover-countdown.deadline-countdown-soon { background: rgba(240, 184, 79, 0.13); color: #f0c996; }
.calendar-popover-countdown.deadline-countdown-ok { background: rgba(122, 211, 194, 0.14); color: #9df0dd; }

.tag-status-draft {
  background: #f3e8ff;
  color: #6b21a8;
}

.tag-status-gratis {
  background: #ede9fe;
  color: #5b21b6;
}

.tag-status-invoiced {
  background: #fef3c7;
  color: #92400e;
}

.tag-status-cash {
  background: #d1fae5;
  color: #047857;
}

.tag-priority-high {
  background: #fee2e2;
  color: #b91c1c;
}

.tag-priority-medium {
  background: #fef3c7;
  color: #92400e;
}

.tag-priority-low {
  background: #e0f2fe;
  color: #0369a1;
}

.tag-type-deadline {
  background: #e0e7ff;
  color: #3730a3;
}

.tag-type-task {
  background: #ccfbf1;
  color: #0f766e;
}

.tag-type-private {
  background: #ede9fe;
  color: #5b21b6;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.case-search-primary {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  width: min(100%, 920px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

.case-search-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 8px;
}

.case-search-primary-row > button {
  width: 100%;
}

.case-search-primary .search {
  width: 100%;
  max-width: none;
  min-height: 46px;
  border-color: rgba(83, 199, 173, 0.46);
  background: var(--surface-2);
}

.client-search-primary {
  position: relative;
  z-index: 40;
}

.case-drawer-layout.case-search-open {
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
}

.case-drawer-layout.case-search-open .case-list-panel {
  position: static;
  width: 100%;
  max-height: calc(100vh - 230px);
}

.case-drawer-layout.case-search-open .case-detail {
  display: none;
}

.case-list-panel {
  display: none;
}

.case-drawer-layout.case-search-open .case-list-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 250px);
  min-height: 360px;
  position: sticky;
  top: 86px;
  overflow: hidden;
}

.case-list-panel .case-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
}

.panel-heading-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.case-list-panel .panel-heading {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.case-list-panel .panel-heading-title {
  margin-bottom: 4px;
}

.case-selection-landing {
  min-height: 0;
  display: grid;
  gap: 14px;
  padding: 0;
}

.case-detail.case-detail-landing {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.case-recent {
  display: grid;
  gap: 10px;
  width: min(100%, 920px);
  margin: 0 auto 8px;
  text-align: left;
}

.client-recent {
  width: min(100%, 920px);
  margin: 0 auto 8px;
}

.case-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.case-selection-landing .case-recent-grid {
  grid-template-rows: repeat(2, minmax(112px, auto));
}

.case-recent-card {
  position: relative;
  display: grid;
  align-content: stretch;
  min-height: 112px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  overflow: hidden;
}

.case-recent-card:hover,
.case-recent-card:focus-within {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--surface-3);
}

.case-recent-card.is-pinned {
  box-shadow: inset 0 0 0 1px rgba(122, 211, 194, 0.72);
}

.case-recent-open {
  display: grid;
  align-content: start;
  gap: 7px;
  width: 100%;
  min-height: 112px;
  padding: 14px 48px 14px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.case-recent-open:hover,
.case-recent-open:focus-visible {
  background: rgba(122, 211, 194, 0.06);
}

/* Item 3: poravnaj plavi pill (interni broj) vertikalno sa naslovom/tekstom
   kartice "Nedavno otvarani" i ostavi malo veci razmak do sudskog broja. */
.case-recent-open .internal-number-badge {
  margin-left: -4px;
  margin-right: 8px;
}

.case-recent-card span {
  color: var(--muted);
  font-size: 13px;
}

.recent-pin {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(177, 195, 188, 0.22);
  border-radius: 8px;
  background: rgba(11, 18, 16, 0.58);
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}


.recent-pin svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.recent-pin:hover,
.recent-pin:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(122, 211, 194, 0.12);
}

.recent-pin.pinned {
  color: var(--accent);
  border-color: rgba(122, 211, 194, 0.72);
  background: rgba(122, 211, 194, 0.16);
}
.recent-pin.pinned svg {
  transform: rotate(0deg);
}

.search {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 40px;
  background: #fff;
  max-width: 220px;
}

.case-result-count {
  display: block;
  margin: 4px 0 10px;
  min-height: 18px;
  line-height: 1.4;
  font-size: 13px;
}

select.search {
  cursor: default;
}

.case-row {
  text-align: left;
  width: 100%;
  background: #fff;
  cursor: pointer;
}

.case-row.active {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.client-workspace {
  display: grid;
  gap: 14px;
  align-items: start;
}

.client-database-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: min(100%, 920px);
  margin: 0 auto;
}


.client-workspace.has-selection .client-database-list {
  display: none;
}

.client-workspace.client-search-open {
  position: relative;
}

.client-workspace.client-search-open.has-selection .client-database-list,
.client-workspace.client-search-open .client-database-list {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 30;
  display: grid;
  width: min(100%, 920px);
  max-height: min(62vh, 540px);
  transform: translateX(-50%);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
  overflow-y: auto;
}

.client-workspace.client-search-open .client-detail-panel {
  display: none;
}

.client-database-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface-2);
  cursor: pointer;
  min-height: 0;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.client-database-card:hover {
  border-color: rgba(83, 199, 173, 0.58);
  background: var(--surface-2);
}

.client-database-card:focus-visible {
  outline: 2px solid #9df0dd;
  outline-offset: 2px;
}

.client-database-card strong,
.client-database-card span {
  display: block;
}

.client-database-card .muted {
  grid-column: 1;
}

.client-card-summary {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.client-case-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-detail-panel {
  display: none;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-2);
  min-height: 0;
  width: 100%;
}

.client-workspace.has-selection .client-detail-panel {
  display: grid;
}

.client-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.client-detail-head h2 {
  margin: 0 0 2px;
  font-size: 20px;
}

.client-detail-head .muted {
  margin: 0;
  font-size: 13px;
}

.client-profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.client-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.client-detail-grid > div,
.client-mini-row,
.client-import-row,
.client-picker-option {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.client-detail-grid > div {
  display: grid;
  gap: 3px;
  padding: 11px;
  min-width: 0;
}

.client-detail-grid > div .muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.client-detail-grid > div strong {
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-detail-section {
  display: grid;
  gap: 8px;
}

.client-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.client-section-head h4 {
  margin: 0;
  font-size: 14px;
}

.client-section-head .muted {
  font-size: 12px;
}

.client-linked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.client-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
}

.client-cases-more {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.client-cases-more:hover {
  background: var(--surface-2);
}

.client-linked-case {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text);
}

.client-linked-case.compact {
  padding: 8px 10px;
  gap: 2px;
}

.client-linked-case.compact strong {
  font-size: 13px;
  line-height: 1.25;
}

.client-linked-case.compact span {
  font-size: 12px;
  color: var(--muted);
}

/* Klikabilne kartice (predmeti/rokovi) treba jasno da se razlikuju od staticnih info-kartica:
   tirkizna ivica + stalna strelica ">" + izrazit hover. */
.client-detail-section .client-linked-case {
  position: relative;
  cursor: pointer;
  border-color: rgba(83, 199, 173, 0.32);
  padding-right: 30px;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.client-detail-section .client-linked-case::after {
  content: "\203A";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.65;
}
.client-detail-section .client-linked-case:hover,
.client-detail-section .client-linked-case:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  outline: none;
}
.client-detail-section .client-linked-case:hover::after,
.client-detail-section .client-linked-case:focus-visible::after {
  opacity: 1;
}

.client-mini-row {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.client-autocomplete {
  display: grid;
  gap: 4px;
  max-height: 150px;
  overflow: auto;
  margin-top: -8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

/* Dropdown za polja kartice suda (naziv suda / sudija) - unutar label-a, apsolutno. */
.court-ac-label {
  position: relative;
}
.court-ac-dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: 0;
  max-height: 210px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44);
  pointer-events: auto;
}
.court-ac-dropdown .client-autocomplete-option {
  pointer-events: auto;
}

.client-autocomplete-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.client-autocomplete-option:hover,
.client-autocomplete-option:focus-visible {
  background: var(--surface-3);
  transform: none;
}

.client-autocomplete-option small {
  color: var(--muted);
}

/* T4: opcija "Dodaj novi kontakt" u autocomplete listi stranaka. */
.client-autocomplete-add {
  border-top: 1px solid var(--line);
}
.client-autocomplete-add strong {
  color: var(--accent);
}

.client-import-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.client-import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  position: sticky;
  top: var(--app-header-h, 74px);
  z-index: 100;
  background: var(--surface);
}

.detail-header h2 {
  font-size: 20px;
}

.detail-header p {
  margin: 3px 0 0;
}

.case-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.case-flow-primary {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.case-flow-filter-menu {
  position: relative;
  width: fit-content;
  min-width: 190px;
}

.case-flow-filter-menu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  white-space: nowrap;
}

.case-flow-filter-menu > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.72;
}

.case-flow-filter-menu > summary::-webkit-details-marker {
  display: none;
}

.case-flow-filter-menu[open] > summary {
  border-color: var(--accent);
}

.case-flow-filter-menu-items {
  position: absolute;
  z-index: 42;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.case-flow-filter-menu-items button {
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
}

.case-flow-filter-menu-items button:hover,
.case-flow-filter-menu-items button.active {
  background: var(--surface-3);
  color: var(--accent-strong);
}

.case-flow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  gap: 16px;
  align-items: start;
}

.case-flow-workspace:not(.has-selection) {
  grid-template-columns: minmax(0, 1fr);
}

.case-flow-workspace:not(.has-selection) .case-flow-detail {
  display: none;
}

.case-flow-timeline {
  padding-bottom: 8px;
  min-width: 0;
}

.case-flow-timeline .flow-interactive {
  cursor: default;
}

.case-flow-timeline .flow-interactive .timeline-card {
  cursor: pointer;
}

.case-flow-timeline .flow-interactive:focus {
  outline: none;
}

.case-flow-timeline .flow-interactive .timeline-card:hover,
.case-flow-timeline .flow-interactive .timeline-card:focus-visible {
  border-color: rgba(83, 199, 173, 0.55);
  background: rgba(83, 199, 173, 0.08);
  box-shadow: 0 0 0 3px rgba(83, 199, 173, 0.1);
}

.case-flow-timeline .flow-interactive:has(.timeline-card:hover) .timeline-dot,
.case-flow-timeline .flow-interactive:has(.timeline-card:focus-visible) .timeline-dot {
  box-shadow: 0 0 0 5px rgba(83, 199, 173, 0.18);
}

.case-flow-timeline .flow-interactive.active .timeline-card {
  border-color: var(--accent);
  background: rgba(83, 199, 173, 0.12);
  box-shadow: inset 4px 0 0 var(--accent);
}

.case-flow-timeline .flow-interactive.flow-attention .timeline-card {
  animation: flow-card-attention 1.35s ease-in-out 1;
  border-color: var(--flow-color, var(--accent));
  box-shadow: inset 5px 0 0 var(--flow-color, var(--accent)), 0 0 0 4px color-mix(in srgb, var(--flow-color, var(--accent)) 20%, transparent);
}

@keyframes flow-card-attention {
  0%, 100% { transform: translateX(0); }
  8%, 24%, 40%, 56% { transform: translateX(-5px); }
  16%, 32%, 48%, 64% { transform: translateX(5px); }
  76% { transform: translateX(-2px); }
  88% { transform: translateX(2px); }
}

.flow-open-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.flow-kind-cluster,
.flow-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.flow-card-tools {
  margin-left: auto;
}

.flow-confirmed {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #c7f9d4;
  background: rgba(83, 199, 116, 0.20);
  border: 1px solid rgba(117, 236, 154, 0.60);
  clip-path: polygon(50% 0, 88% 14%, 88% 58%, 50% 100%, 12% 58%, 12% 14%);
  flex: 0 0 auto;
}

.flow-confirmed-mark {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}


.flow-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.flow-inline-action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(117, 236, 154, 0.42);
  border-radius: 999px;
  background: rgba(117, 236, 154, 0.12);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.flow-inline-action:hover,
.flow-inline-action:focus-visible {
  border-color: var(--accent);
  background: rgba(117, 236, 154, 0.20);
}
.flow-linked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.flow-linked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.flow-linked-chip-btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: filter 140ms ease, box-shadow 140ms ease;
}

.flow-linked-chip-btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(83, 199, 173, 0.28);
}

.flow-linked-chip-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


.case-flow-timeline .timeline-card {
  display: grid;
  gap: 7px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.case-flow-detail {
  position: sticky;
  top: calc(var(--app-header-h, 74px) + var(--detail-header-h, 62px) + 12px);
  display: grid;
  gap: 14px;
  min-height: 210px;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-2);
}

.case-flow-detail.is-open {
  border-color: color-mix(in srgb, var(--flow-color, var(--accent)) 52%, var(--line) 48%);
  background: linear-gradient(135deg, var(--flow-bg, rgba(83, 199, 173, 0.08)), transparent 68%), var(--surface-2);
  box-shadow: inset 4px 0 0 var(--flow-color, var(--accent));
}

.case-flow-detail-head {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--flow-color, var(--line)) 28%, var(--line) 72%);
}

.case-flow-detail-toolbar {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.case-flow-detail-head h3 {
  width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 800;
}

.case-flow-detail-grid {
  display: grid;
  gap: 8px;
}

.case-flow-detail-grid > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.case-flow-detail-grid span {
  color: var(--muted);
  font-size: 12px;
}

.case-flow-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.case-flow-detail-actions .small {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.case-flow-detail-actions .overflow-menu {
  flex: 0 0 auto;
}

.case-flow-detail-actions .overflow-menu > summary {
  width: 34px;
  min-height: 32px;
  background: var(--surface-3);
}

.flow-action-menu .overflow-menu-items {
  min-width: 150px;
}

.case-flow-detail-empty {
  align-self: center;
  text-align: center;
}

.case-record-details {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.case-record-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.case-record-content {
  margin-top: 16px;
}

.detail-grid > div > h3,
.detail-grid > div > .timeline,
.side-stack {
  display: none;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.info-cell {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.info-cell small {
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.case-subsection {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.case-subsection h3 {
  margin-bottom: 0;
}

.client-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-chip {
  display: inline-grid;
  gap: 2px;
  min-width: min(100%, 180px);
  border: 1px solid rgba(83, 199, 173, 0.34);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(83, 199, 173, 0.1);
  color: var(--ink);
  font-weight: 800;
}

.client-chip small {
  color: var(--muted);
  font-weight: 600;
}

button.client-chip-link {
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
button.client-chip-link:hover {
  background: rgba(83, 199, 173, 0.2);
  border-color: rgba(83, 199, 173, 0.6);
}
button.client-chip-link:active { transform: translateY(1px); }
button.client-chip-link:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

.internal-number-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: max-content;
  padding: 2px 9px;
  border-radius: 6px;
  background: #26395a !important;
  color: #cbe0fb !important;
  border: 1px solid #3f5f95 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
}
/* Jedinstveni centrirani red rezultata pretrage (Predmeti / Kontakti / Kasa). */
/* Kasa pretraga: poklopljene stavke ispod kartice klijenta */
.cash-search-result{margin-bottom:10px}
.cash-search-result .sr-card.has-matches{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.cash-search-matches{display:flex;flex-direction:column;gap:3px;margin:0;padding:8px 12px 10px;background:var(--surface-3);border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px}
.cash-search-matches-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.cash-search-match-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 120px auto;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:6px;padding:6px 8px;color:inherit;font-family:inherit;cursor:pointer;transition:background-color .12s ease}
.cash-search-match-row:hover,.cash-search-match-row:focus-visible{background:rgba(83,199,173,0.10)}
.cash-search-match-osnov{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cash-search-match-pred{justify-self:start;display:flex;align-items:center;white-space:nowrap}
.cash-search-match-amt{justify-self:end;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.cash-search-more{align-self:flex-start;background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:4px 8px;font-size:12px}
.cash-search-more:hover{text-decoration:underline}
.sr-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 165px;
  margin-bottom: 8px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.sr-card:last-child {
  margin-bottom: 0;
}
.sr-card:hover,
.sr-card:focus-visible {
  background: rgba(83, 199, 173, 0.06);
  border-color: rgba(83, 199, 173, 0.5);
  outline: none;
}
.sr-card.active {
  border-color: var(--accent);
}
.sr-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sr-card-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.sr-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.sr-card-sub {
  font-size: 13px;
  color: var(--muted);
}
.sr-card-nolink {
  font-size: 13px;
  color: var(--muted);
}
.sr-card-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.sr-card-amount {
  font-size: 15px;
  font-weight: 700;
}
.sr-card-amount.is-debt {
  color: var(--accent-2);
}
.sr-card-amount.is-clear {
  color: var(--muted);
}
.sr-card-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
}
.sr-b-accent {
  background: rgba(83, 199, 173, 0.14);
  color: var(--accent);
}
.sr-b-muted {
  background: var(--surface-3);
  color: var(--muted);
}

.case-card-title-row,
.case-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.court-number-list,
.assignment-history {
  display: grid;
  gap: 8px;
}

.court-number-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.court-number-list span,
.assignment-history span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--surface-3);
  color: var(--muted);
}

.court-number-list strong {
  color: var(--ink);
}

.timeline {
  position: relative;
  display: grid;
  gap: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 148px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: 126px 34px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px 0;
  position: relative;
  scroll-margin-top: 116px;
}

.timeline-time {
  display: inline-flex;
  justify-self: end;
  align-self: start;
  min-width: 102px;
  max-width: 118px;
  padding: 6px 8px;
  border: 1px solid rgba(83, 199, 173, 0.24);
  border-radius: 999px;
  background: rgba(83, 199, 173, 0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  margin: 5px auto 0;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #e9f4f0;
  z-index: 1;
}

.timeline-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
}

.side-stack {
  display: grid;
  gap: 14px;
}

.task-row {
  display: grid;
  gap: 5px;
}

.next-action-card {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(83, 199, 173, 0.35);
  border-radius: 8px;
  padding: 12px;
  background: rgba(83, 199, 173, 0.09);
}

.next-action-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.next-action-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.task-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.task-done {
  opacity: 0.72;
}

.task-complete {
  justify-self: start;
  margin-top: 4px;
}

.document-mini,
.deadline-mini {
  background: var(--surface-3);
}

.compact-actions {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.inline-table-action {
  display: flex;
  width: max-content;
  margin-top: 8px;
}

.table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.table-wrap table {
  min-width: 760px;
}

.calendar-agenda-panel {
  margin-top: 0;
}

.calendar-heading-copy {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.agenda-list {
  display: grid;
  gap: 10px;
}

/* Agenda grupisana po vremenskim odeljcima (Isteklo/Danas/Sutra/…). */
.agenda-group {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 12px;
  padding: 8px 20px 10px 34px;
}

.agenda-group + .agenda-group {
  margin-top: 8px;
}

.agenda-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
  margin-bottom: 2px;
}

.agenda-group-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.agenda-group-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 18px;
}

.agenda-group-overdue { border-left-color: var(--accent-2); }
.agenda-group-overdue .agenda-group-label { color: var(--accent-2); }
.agenda-group-today { border-left-color: var(--accent); }
.agenda-group-today .agenda-group-label { color: var(--accent); }
.agenda-group-tomorrow { border-left-color: var(--warn); }
.agenda-group-tomorrow .agenda-group-label { color: var(--warn); }
.agenda-group-week { border-left-color: #7dd3fc; }
.agenda-group-week .agenda-group-label { color: #7dd3fc; }
.agenda-group-later { border-left-color: #b6a2ff; }
.agenda-group-later .agenda-group-label { color: #b6a2ff; }
.agenda-group-done { border-left-color: var(--ok); }
.agenda-group-done .agenda-group-label { color: var(--ok); }

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.cash-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.cash-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: min(100%, 520px);
}

.cash-mode-control {
  margin-right: auto;
}

.cash-debt-toggle {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  white-space: nowrap;
}

.cash-summary-card {
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink);
}

.cash-summary-card span,
.cash-summary-card small {
  color: var(--muted);
}

.cash-summary-card strong {
  font-size: 26px;
}

.cash-summary-card.danger {
  border-color: rgba(255, 132, 111, 0.38);
  background: rgba(255, 132, 111, 0.12);
}

.cash-summary-card.warn {
  border-color: rgba(240, 184, 79, 0.38);
  background: rgba(240, 184, 79, 0.12);
}

.cash-summary-card.ok {
  border-color: rgba(83, 199, 173, 0.36);
  background: rgba(83, 199, 173, 0.10);
}

.cash-summary-card.gift {
  border-color: rgba(190, 147, 255, 0.34);
  background: rgba(190, 147, 255, 0.12);
}

.cash-ledger {
  display: grid;
  gap: 10px;
}

.cash-client-list,
.cash-client-items,
.cash-client-detail {
  display: grid;
  gap: 10px;
}

.cash-client-sections,
.cash-ledger-section {
  display: grid;
  gap: 12px;
}

.cash-ledger-section {
  padding-top: 4px;
}

.cash-ledger-section + .cash-ledger-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cash-ledger-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.cash-ledger-section-head h3 {
  margin: 0;
  font-size: 18px;
}

.cash-ledger-section-head span {
  color: var(--muted);
  font-weight: 800;
  text-align: right;
}

.cash-client-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(145px, 0.75fr)) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.cash-client-row:hover,
.cash-client-row:focus-visible {
  border-color: var(--accent);
  background: var(--surface-3);
}

.cash-client-name,
.cash-client-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cash-client-name strong {
  font-size: 18px;
}

.cash-client-name small,
.cash-client-metric small {
  color: var(--muted);
}

.cash-client-metric strong {
  overflow-wrap: anywhere;
}

.cash-client-open {
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.cash-client-detail {
  gap: 14px;
}

.cash-client-detail-heading,
.cash-client-cases {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cash-client-detail-heading {
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.cash-client-detail-heading h2 {
  margin: 12px 0 4px;
}

.cash-client-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cash-client-summary > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.cash-client-summary small {
  color: var(--muted);
}

.cash-client-cases {
  padding: 10px 0;
}

.cash-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  background: var(--surface-3);
  border-color: var(--line);
}

.cash-client-items .cash-item {
  padding: 14px;
  background: var(--surface-3);
}

.cash-item-main,
.cash-item > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cash-item > div:first-child p {
  margin: 2px 0;
  color: var(--ink);
}

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

.cash-item-details > div {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.delivery-list {
  display: grid;
  gap: 12px;
}

.storage-reconciliation-list {
  display: grid;
  gap: 10px;
}

.storage-quarantine-list {
  display: grid;
  gap: 10px;
}

.document-trash-list {
  display: grid;
  gap: 10px;
}

#document-trash-modal {
  width: min(680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

#document-trash-modal .document-trash-modal-body {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px;
}

#document-trash-modal .document-trash-modal-body h2 {
  margin: 0;
  text-align: center;
}

#document-trash-modal .document-trash-modal-body > p {
  margin: 0 auto;
  max-width: 46ch;
  text-align: center;
}

#document-trash-modal .document-trash-toolbar {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

#document-trash-modal .document-trash-list {
  max-height: 60vh;
  overflow-y: auto;
}

.document-trash-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-3);
}

.document-trash-item > div:first-child {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.storage-reconciliation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-3);
}

.storage-reconciliation-item > div:first-child {
  display: grid;
  gap: 4px;
}

.storage-quarantine-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(240, 184, 79, 0.38);
  border-radius: 6px;
  background: rgba(240, 184, 79, 0.07);
}

.storage-quarantine-item > div:first-child {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.attention-button {
  position: relative;
}

.attention-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.attention-count.critical {
  background: rgba(255, 120, 105, 0.22);
  color: #ffad9f;
}

.notification-inbox,
.attention-center {
  position: relative;
}

.notification-inbox-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff5f56;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.notification-inbox-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: min(390px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 130px));
  overflow-y: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
}

.attention-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 72;
  width: min(430px, calc(100vw - 24px));
  max-height: min(580px, calc(100vh - 130px));
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
}

.notification-inbox-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.notif-heading-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notif-heading-top > div {
  display: grid;
  gap: 2px;
}

.notif-heading-top strong {
  color: var(--ink);
}

.notif-heading-top span {
  color: var(--muted);
  font-size: 12px;
}

.notification-inbox-filters {
  display: flex;
  gap: 6px;
}

.notif-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.notif-filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #06110f;
}

.notif-filter-count:empty {
  display: none;
}

.notif-filter-count {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(83, 199, 173, 0.2);
  color: var(--accent);
  font-size: 11px;
  text-align: center;
}

.notif-filter-tab.active .notif-filter-count {
  background: rgba(6, 17, 15, 0.22);
  color: #06110f;
}

.notification-inbox-list {
  display: grid;
}

.notif-day-header {
  padding: 8px 14px 5px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notification-inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-inbox-item:hover,
.notification-inbox-item:focus-visible {
  background: var(--surface-strong);
}

.notification-inbox-item.unread {
  border-left-color: var(--accent);
  background: rgba(83, 199, 173, 0.06);
}

.notif-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.notif-icon svg {
  width: 18px;
  height: 18px;
}

.notif-icon-billing { background: rgba(224, 179, 65, 0.16); color: #e0b341; }
.notif-icon-payment { background: rgba(99, 215, 139, 0.16); color: #63d78b; }
.notif-icon-debt { background: rgba(224, 179, 65, 0.16); color: #e0b341; }
.notif-icon-expense { background: rgba(255, 132, 111, 0.18); color: #ff9d8f; }
.notif-icon-task { background: rgba(83, 199, 173, 0.16); color: var(--accent); }
.notif-icon-deadline { background: rgba(255, 132, 111, 0.18); color: var(--accent-2); }
.notif-icon-delivery { background: rgba(120, 176, 242, 0.16); color: #78b0f2; }
.notif-icon-default { background: rgba(157, 176, 169, 0.14); color: var(--muted); }

.notif-content {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.notif-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.notif-title {
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.notif-time {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}
.notif-t-date { font-weight: 600; }
.notif-t-clock { color: var(--muted); }

.notif-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notif-entity {
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-unread-action {
  flex: 0 0 auto;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(83, 199, 173, 0.14);
  cursor: pointer;
}

.notif-unread-action:hover {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(255, 132, 111, 0.16);
}

.attention-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.attention-list {
  display: grid;
  min-width: 0;
  max-width: 100%;
}

.attention-item {
  display: grid;
  justify-items: start;
  gap: 5px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.attention-item:hover,
.attention-item:focus-visible {
  background: var(--surface-strong);
}

.attention-item-label {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}

.attention-item strong,
.attention-item .muted {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.attention-item.severity-3 {
  border-left-color: #ff7869;
  background: rgba(255, 120, 105, 0.08);
}

.attention-item.severity-2 {
  border-left-color: #f5c15d;
}

.attention-item.severity-1 {
  border-left-color: #72c8b6;
}

.delivery-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.delivery-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 6px;
  background: var(--surface-3);
}

.delivery-summary-card span {
  color: var(--muted);
}

.delivery-summary-card strong {
  font-size: 1.25rem;
}

.delivery-summary-card.warn {
  border-color: rgba(240, 184, 79, 0.45);
}

.delivery-summary-card.ok {
  border-color: rgba(83, 199, 173, 0.38);
}

.delivery-summary-card.info {
  border-color: rgba(112, 158, 255, 0.35);
}

.delivery-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  background: var(--surface-3);
}

.delivery-documents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.delivery-review {
  display: grid;
  gap: 14px;
}

.delivery-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.delivery-review-grid > div,
.delivery-review-doc {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.delivery-review-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.delivery-review-section {
  display: grid;
  gap: 10px;
}

.delivery-review-doc {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.document-choice-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.choice-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--text);
}

.choice-row small,
.field-label {
  color: var(--muted);
}

.notification-status-card {
  border: 0;
  padding: 0;
  background: transparent;
}

.notification-status-card p {
  margin: 7px 0 0;
}

.cash-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cash-money {
  display: grid;
  gap: 4px;
  justify-items: start;
  font-size: 20px;
  font-weight: 800;
}

.cash-money .muted {
  font-size: 13px;
  font-weight: 500;
}

.payment-history {
  margin-top: 8px;
  color: var(--muted);
}

.payment-history summary {
  width: fit-content;
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.payment-history small {
  display: block;
  margin-top: 6px;
  line-height: 1.55;
}

.payment-entry-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.payment-entry-summary > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.audit-summary-card {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink);
}

.audit-summary-card span,
.audit-summary-card small {
  color: var(--muted);
}

.audit-summary-card strong {
  font-size: 28px;
}

.audit-result-count {
  margin: 0 0 10px;
  font-size: 13px;
}

.status-stack {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-popover {
  position: absolute;
  z-index: 320;
  width: min(300px, 92vw);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  display: grid;
  gap: 10px;
  animation: calendar-popover-in 0.12s ease-out;
}

.calendar-popover .calendar-popover-title { color: var(--ink); }
.calendar-popover .calendar-popover-meta span { color: var(--ink); }
.calendar-popover .internal-number-badge {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  text-align: center;
}

.calendar-popover.hidden { display: none; }

@keyframes calendar-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.calendar-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-popover-head-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-popover-close {
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}

.calendar-popover-close:hover { color: var(--ink); }

.calendar-popover-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.calendar-popover-meta {
  display: grid;
  gap: 2px;
  font-size: 13.5px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 2px;
}

.cal-pop-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  color: var(--ink);
  line-height: 1.35;
}

.cal-pop-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--muted);
}

.calendar-popover-sub { margin: 0; font-size: 13px; }
.calendar-popover-hint { margin: 0; font-size: 11.5px; }

.calendar-popover-actions {
  display: flex;
  gap: 8px;
}

.calendar-popover-actions.column {
  flex-direction: column;
}

.calendar-popover-actions .primary,
.calendar-popover-actions .secondary {
  width: 100%;
}

.calendar-popover-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 0;
  font-size: 14px;
}
.calendar-popover-open-btn svg {
  width: 16px;
  height: 16px;
}

.agenda-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.filter-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.agenda-hidden-select {
  display: none !important;
}

.agenda-filter-tabs {
  display: inline-flex;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.agenda-filter-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.agenda-filter-tab:hover { color: var(--ink); }
.agenda-filter-tab.active { background: var(--accent); color: #06120e; }

.agenda-filter-bar .agenda-owner-select,
.agenda-owner-select {
  min-width: 150px;
}

.agenda-filter-menu {
  position: relative;
}

.agenda-filter-menu > summary {
  list-style: none;
  cursor: pointer;
}

.agenda-filter-menu > summary::-webkit-details-marker {
  display: none;
}

.agenda-filter-menu .agenda-filters {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 8px;
  min-width: 260px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.agenda-filter-menu:not([open]) .agenda-filters {
  display: none;
}

.agenda-filter-menu .agenda-filters > select {
  width: 100%;
  max-width: none;
}

.segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.segment {
  border: 0;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 22px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.segment.active {
  background: var(--accent);
  color: #06120e;
}

.agenda-select {
  max-width: 170px;
  cursor: default;
}

.agenda-select option {
  cursor: default;
}

.native-select-hidden {
  display: none;
}

.custom-select {
  position: relative;
  min-width: 150px;
}

.custom-select-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 42px 0 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: default;
  box-shadow: none;
}

.custom-select-button::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.custom-select.open .custom-select-button {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 95, 82, 0.14);
}

.custom-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.custom-select.open .custom-select-menu {
  display: grid;
  gap: 4px;
}

.custom-select-option {
  border: 0;
  border-radius: 6px;
  min-height: 36px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: default;
}

.custom-select-option:hover,
.custom-select-option.selected {
  background: var(--surface-2);
  color: var(--accent);
}

.agenda-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 12px 12px 12px 4px;
  background: transparent;
  color: var(--ink);
}
.agenda-item + .agenda-item {
  border-top: 1px solid var(--line);
}

.agenda-date {
  display: grid;
  gap: 3px;
}

.agenda-title-row > .tag:first-child{min-width:74px;justify-content:center}
.agenda-title-row,
.agenda-actions,
.audit-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 6px 0 14px;
}

.audit-tools .search { min-width: 200px; height: 40px; }
.audit-tools [data-action="export-audit"] { margin-left: auto; }

.agenda-item h3 {
  margin: 8px 0 4px;
}

.month-calendar {
  display: grid;
  gap: 8px;
}

.month-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Navigacija meseca premestena u zaglavlje (strelice + mesec), da toolbar red
   ne trosi vertikalni prostor - vise mesta za kvadrate kalendara. */
.month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 40px;
}

.month-nav strong {
  font-size: 14px;
  min-width: 92px;
  text-align: center;
}

.month-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.month-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.month-weekdays,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.month-grid {
  grid-auto-rows: clamp(126px, 14vh, 150px);
}

.month-weekdays span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.month-day {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-3);
  color: var(--ink);
  display: grid;
  align-content: start;
  gap: 6px;
}

.month-day.muted-month {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.month-day-clickable { cursor: pointer; }
.month-day-clickable:hover {
  border-color: rgba(83, 199, 173, 0.5);
  box-shadow: inset 0 0 0 1px rgba(83, 199, 173, 0.25);
}
.month-day-clickable .month-event { cursor: pointer; }

.month-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.month-day-number {
  font-weight: 800;
}

.month-day.today .month-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
}

.month-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.month-day-pill {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.month-day-pill.deadline { background: rgba(255, 138, 122, 0.18); color: #ffc7bd; }
.month-day-pill.task { background: rgba(182, 162, 255, 0.18); color: #ddd2ff; }
.month-day-pill.activity { background: rgba(143, 179, 168, 0.20); color: #cfe3db; }
.month-day-pill.private { background: rgba(125, 211, 252, 0.18); color: #c5ecff; }

.month-day-items {
  display: grid;
  gap: 3px;
}

.month-more {
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 5px;
}

.month-more:hover {
  background: rgba(83, 199, 173, 0.12);
}

.case-flow-timeline .timeline-item {
  scroll-margin-top: 112px;
  /* Centriraj tacku i vreme zavodjenja vertikalno sa karticom aktivnosti. */
  align-items: center;
}

.case-flow-timeline .timeline-time {
  align-self: center;
}

.case-flow-timeline .timeline-dot {
  margin-top: 0;
  margin-bottom: 0;
}
.month-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  width: 100%;
  border: 0;
  border-left: 3px solid var(--tone, var(--accent));
  border-radius: 0 5px 5px 0;
  padding: 3px 6px;
  font-size: 12px;
  text-align: left;
  background: var(--tone-bg, var(--surface-2));
  color: var(--ink);
  cursor: pointer;
}

.month-event:hover {
  filter: brightness(1.12);
}

.month-event-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.month-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-event.deadline { --tone: #ff8a7a; --tone-bg: rgba(255, 138, 122, 0.12); color: #ffd3cc; }
.month-event.task { --tone: #b6a2ff; --tone-bg: rgba(182, 162, 255, 0.12); color: #e2daff; }
.month-event.activity { --tone: #8fb3a8; --tone-bg: rgba(143, 179, 168, 0.13); color: #d6e6df; }
.month-event.private { --tone: #7dd3fc; --tone-bg: rgba(125, 211, 252, 0.12); color: #cfeeff; }

.day-detail-modal {
  min-width: min(400px, 92vw);
  max-width: 420px;
}

.day-detail-modal .day-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  margin: 0;
}

.day-detail-heading-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.day-detail-head h2 {
  margin: 0;
  font-size: 18px;
  text-transform: none;
}

.day-detail-weekday {
  color: var(--muted);
  font-size: 13px;
}

.day-detail-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.day-detail-close:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.day-detail-list {
  display: grid;
  gap: 8px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 4px 16px 8px;
}

.day-detail-item {
  display: grid;
  grid-template-columns: 4px 42px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--ink);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.day-detail-item:hover {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 55%, var(--line));
  background: color-mix(in srgb, var(--tone, var(--accent)) 8%, var(--surface-3));
}

.day-detail-bar {
  align-self: stretch;
  border-radius: 999px;
  background: var(--tone, var(--accent));
}

/* Item 4: tonovi ujednaceni sa flow-tone-* paletom sa stranice predmeta. */
.day-detail-item.deadline { --tone: #ff8a7a; }
.day-detail-item.task { --tone: #b6a2ff; }
.day-detail-item.activity { --tone: #8fb3a8; }
.day-detail-item.private { --tone: #7dd3fc; }

.day-detail-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.day-detail-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.day-detail-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.day-detail-heading strong {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-detail-body .muted {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-detail-chevron {
  color: #5b6f67;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.day-detail-empty {
  padding: 8px 2px;
}

.day-detail-foot {
  padding: 8px 16px 16px;
}

.day-detail-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: transparent;
  border: 1px dashed #354a42;
  border-radius: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.day-detail-add:hover {
  border-color: var(--accent);
  background: rgba(83, 199, 173, 0.08);
}

.day-detail-add-plus {
  font-size: 16px;
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 13px;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.documents-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.documents-intro h2,
.documents-intro p {
  margin: 0;
}

.documents-intro h2 {
  margin-top: 4px;
}

.document-library-panel {
  box-shadow: none;
}

.document-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.document-tools #document-search {
  min-width: 240px;
}

.document-result-count {
  margin: -6px 0 10px;
  font-size: 13px;
}

.inline-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.inline-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--surface-2);
  color: var(--ink);
}

.document-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  box-shadow: none;
}

.document-card-main {
  min-width: 0;
}

.document-card-main h3 {
  margin: 9px 0 6px;
  overflow-wrap: anywhere;
}

.document-card-main p {
  color: var(--muted);
  display: -webkit-box;
  margin-bottom: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.document-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.document-advanced-options {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.document-advanced-options .document-case-select {
  flex: 1 1 220px;
  margin-top: 0;
}

#document-detail-modal {
  width: min(1240px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(820px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.document-detail-form {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
}

.document-detail-form > .modal-heading {
  grid-column: 1 / -1;
}

#document-detail-content {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.document-detail-form > .inline-option-panel {
  min-width: 0;
  max-width: 100%;
  align-self: start;
  overflow: hidden;
}

.document-detail-form > .inline-option-panel input,
.document-detail-form > .inline-option-panel select,
.document-detail-form > .inline-option-panel textarea,
.document-detail-form > .inline-option-panel .file-button {
  width: 100%;
  min-width: 0;
}

#document-preview-modal {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
}

.document-viewer-form {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.document-viewer-toolbar {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 14px 62px 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.document-viewer-title {
  min-width: 0;
  margin-right: auto;
}

.document-viewer-title h2 {
  max-width: min(680px, 48vw);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-viewer-toolbar label {
  min-width: min(360px, 30vw);
}

.document-viewer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: #090f0d;
}

.document-viewer-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: #fff;
}

.document-viewer-text {
  width: min(900px, calc(100% - 32px));
  min-height: calc(100% - 32px);
  margin: 16px auto;
  padding: clamp(22px, 4vw, 56px);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink);
  font: 16px/1.7 Georgia, "Times New Roman", serif;
}

.document-viewer-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.document-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  margin-bottom: 16px;
}

.document-detail-summary > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.document-version-list {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
  margin-bottom: 16px;
}

.document-version-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  max-width: 100%;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.document-version-card > div {
  min-width: 0;
}

.document-version-card h3 {
  margin: 8px 0 4px;
}

.document-version-card h3,
.document-version-card p,
.document-version-card span,
.document-detail-summary strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.document-version-card .compact-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  #document-detail-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .document-detail-form {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #document-detail-content {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }
}

.client-delivery-panel,
.storage-reconciliation-panel,
.storage-quarantine-panel,
.document-trash-panel {
  margin-top: 16px;
}

.intake-form {
  width: min(760px, calc(100vw - 32px));
}

.intake-list {
  display: grid;
  gap: 12px;
  max-height: 58vh;
  overflow: auto;
  padding-right: 4px;
}

.intake-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #fbfcfb;
}

.intake-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.intake-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.deadline-proposals {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.proposal-row {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  gap: 8px !important;
  align-items: start;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

.proposal-row input {
  margin-top: 3px;
}

.proposal-row small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}

.file-button {
  background: var(--accent);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.file-button.secondary {
  background: var(--surface-2);
  color: var(--ink);
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.activity-file-field {
  display: grid;
  gap: 6px;
}

.activity-file-hint {
  font-size: 12px;
  margin: 0;
}

.activity-file-list {
  display: grid;
  /* minmax(0,1fr) zakljucava sirinu kolone da dugacko ime fajla ne razvuce formu. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.activity-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  font-size: 13px;
}

.activity-file-item-new {
  border-color: var(--accent);
}

.activity-file-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-file-remove {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.activity-file-remove:hover {
  background: var(--surface-2);
  color: var(--accent-2);
}

.activity-file-progress { flex: none; width: 88px; height: 5px; background: var(--surface-2); border-radius: 20px; overflow: hidden; }
.activity-file-progress-bar { height: 100%; background: var(--accent); border-radius: 20px; transition: width 0.15s ease; }
.activity-file-pct { flex: none; width: 38px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-file-ok { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: 12px; font-weight: 600; line-height: 1; }
.activity-file-ok svg { flex: none; }
.activity-file-err { flex: none; color: var(--accent-2); font-size: 12px; font-weight: 600; }
/* Uspesno otpremljen fajl: zeleni okvir, da je jasno vidljivo i pri instant (lokalnom) uploadu. */
.activity-file-item-done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface-3)); }
.activity-file-item-error { border-color: var(--accent-2); }

.activity-file-empty {
  font-size: 12px;
}

#activity-form[data-activity-type="document"] .activity-assignment-fields,
#activity-form[data-activity-type="court"] .activity-assignment-fields {
  display: none;
}

.activity-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.modal-form .activity-file-picker .file-button {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Onemoguceno prilaganje dok postoji vec prilozen dokument (mora prvo Ukloni). */
.modal-form .activity-file-picker .file-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.activity-file-name {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-form .activity-file-picker .activity-file-clear {
  flex: 0 0 auto;
  margin: 0;
}

.activity-existing-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.activity-existing-doc-name {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-form .activity-existing-doc .activity-existing-doc-remove {
  flex: 0 0 auto;
  margin: 0;
}

/* hidden atribut mora da pobedi .secondary/.danger display:inline-flex. */
.activity-file-clear[hidden],
.activity-existing-doc-remove[hidden] {
  display: none !important;
}

.modal-form .activity-file-picker .activity-existing-doc-remove {
  flex: 0 0 auto;
  margin: 0;
}

.visually-hidden-file {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.audit-item {
  display: grid;
  grid-template-columns: 180px 1fr 160px;
  gap: 12px;
}

.backup-history-panel {
  margin-top: 16px;
}

.user-admin-panel {
  margin-top: 16px;
}

.backup-list {
  display: grid;
  gap: 10px;
}

.backup-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.backup-status-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
}

.backup-status-card span,
.backup-status-card small {
  color: var(--muted);
}

.backup-status-card small {
  overflow-wrap: anywhere;
}

.backup-status-card.ok {
  border-color: rgba(83, 199, 173, 0.32);
}

.backup-status-card.warn {
  border-color: rgba(240, 184, 79, 0.42);
  background: rgba(240, 184, 79, 0.08);
}

.user-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.user-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
}

.user-form input,
.user-form select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfb;
}

.user-item strong,
.user-item span {
  display: block;
}

.backup-item strong,
.backup-item span {
  display: block;
}

dialog {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  padding: 0;
  position: relative;
}

body.modal-open {
  overflow: hidden;
}

dialog[open] {
  margin: auto;
}

dialog::backdrop {
  background: rgba(18, 28, 25, 0.42);
}

.modal-form {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Uvek rezervisi prostor za scroll bar sa obe strane, da se sirina forme ne menja
     kada se sadrzaj produzi (npr. kad se ukljuci "Dodaj rok" / "Evidentiraj naplatu")
     i scroll bar se pojavi/nestane. "both-edges" cuva simetriju (sadrzaj centriran). */
  scrollbar-gutter: stable both-edges;
  /* Ujednacen levi/desni padding - sadrzaj centriran, sa dovoljno prostora sa obe
     strane da "X" dugme (gore-desno) nikad ne prelazi preko polja, ni pri skrolu.
     Desni padding ostavlja mesta da "X" stoji levo od scroll bara. */
  padding: 22px 54px;
  display: grid;
  gap: 14px;
}

#client-form {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* Grupise polja po tipu klijenta, ali ih ostavlja u istom grid toku kao ostala
   polja forme da razmak (gap) izmedju svih polja ostane ujednacen. */
.client-type-fields:not([hidden]) {
  display: contents;
}

.local-date-wrap {
  position: relative;
  display: block;
  width: 100%;
  /* Nadjacaj pointer-events:none sa ".modal-form label" da ceo omotac hvata klik. */
  pointer-events: auto;
  /* Standardna strelica na celom polju (ne ruka, ne I-beam). */
  cursor: default;
}

.local-date-wrap input[type="text"] {
  display: block;
  width: 100%;
  padding-right: 40px;
  /* Ukloni inline baseline razmak da input popuni ceo kvadrat (bez mrtve zone). */
  box-sizing: border-box;
  /* Standardna strelica svuda u polju za datum. */
  cursor: default;
}

/* Hover light-up preko celog polja za datum (i kad je fokusirano), da se efekat
   ne gubi kad mis udje u samu povrsinu input-a. */
.local-date-wrap:hover input[type="text"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.local-date-picker-button {
  position: absolute;
  right: 6px;
  top: 50%;
  /* Centriranje preko margin-top (ne transform), da hover/animacija ne pomeraju ikonicu. */
  margin-top: -15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: default;
  transform: none;
}

.local-date-picker-button:hover {
  background: var(--surface-3);
  color: var(--ink);
  transform: none;
}

.local-date-picker-button.date-icon-shake {
  animation: date-icon-shake 0.4s ease;
}

@keyframes date-icon-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1.5px); }
  80% { transform: translateX(1.5px); }
}

.native-date-proxy {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}


#activity-modal {
  width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
}

#activity-form {
  width: 100%;
  max-width: 100%;
  max-height: min(760px, calc(100vh - 48px));
  min-width: 0;
  overflow-x: hidden;
}

#activity-form label,
#activity-form fieldset,
#activity-form .inline-option-panel,
#activity-form .inline-option-fields,
#activity-form .deadline-calculation-fields,
#activity-form .activity-file-picker,
#activity-form .local-date-wrap {
  min-width: 0;
  max-width: 100%;
}

#activity-form input,
#activity-form select,
#activity-form textarea,
#activity-form .activity-file-picker {
  width: 100%;
  max-width: 100%;
}

#activity-form input[type="checkbox"] {
  width: 16px;
  max-width: 16px;
}

#activity-form input[type="time"] {
  min-width: 0;
}
#case-modal {
  width: min(780px, calc(100vw - 32px));
}

.progressive-case-form {
  gap: 16px;
}

.case-form-intro {
  display: grid;
  gap: 5px;
}

.case-form-intro p {
  margin: 0;
}

.case-form-basic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.span-full {
  grid-column: 1 / -1;
}

.modal-form input.case-title-readonly {
  background: var(--surface-3);
  color: var(--muted);
  cursor: default;
}

.case-title-auto-note {
  margin: -4px 0 0;
  font-size: 12px;
}

.case-clients-block {
  display: grid;
  gap: 6px;
}

.case-clients-label {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.case-clients-rows {
  display: grid;
  gap: 8px;
}

.case-client-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.case-client-input-wrap {
  position: relative;
  flex: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.case-client-input-wrap .client-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44);
}

.case-clients-hint {
  font-size: 12px;
  margin: 2px 0 6px;
}

.client-chip-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* Prefiks .modal-form podize specificnost iznad globalnog ".modal-form label"
   koji inace slaze kvacicu iznad teksta i gasi klik na celu labelu. */
.modal-form .case-client-represent {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.modal-form .case-client-represent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.modal-form .case-client-represent:has(input:checked) {
  border-color: var(--accent);
  color: var(--ink);
}

.case-client-remove {
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.case-client-remove:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.case-clients-add {
  justify-self: start;
  margin-top: 2px;
}

.case-form-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
}

.case-form-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.case-form-section > summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.case-form-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

.case-form-section-content {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.court-row-remove {
  grid-column: 1 / -1;
  justify-self: end;
}

.add-court-row,
.add-contact-row {
  justify-self: start;
}

.court-contact-row {
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.court-contact-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.modal-close-button {
  position: absolute;
  top: 12px;
  right: 20px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.modal-close-button svg {
  width: 16px;
  height: 16px;
  display: block;
}

.modal-close-button:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.modal-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* Klik fokusira samo polje za unos, ne i tekst labele ili prazan prostor oko polja. */
.modal-form label {
  pointer-events: none;
}
.modal-form label input,
.modal-form label select,
.modal-form label textarea,
.modal-form label button,
.modal-form label .entity-picker,
.modal-form label .entity-picker *,
.modal-form .file-button,
.modal-form .file-button *,
.modal-form .toggle-row {
  pointer-events: auto;
}

.modal-form input,
.modal-form select,
.modal-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

/* Suptilan hover na poljima forme - jasnije sta je interaktivno (bolje za sve uzraste). */
.modal-form input:hover:not(:focus):not(:disabled),
.modal-form select:hover:not(:focus):not(:disabled),
.modal-form textarea:hover:not(:focus):not(:disabled),
.report-form input:hover:not(:focus):not(:disabled),
.report-form select:hover:not(:focus):not(:disabled),
.user-form input:hover:not(:focus):not(:disabled),
.user-form select:hover:not(:focus):not(:disabled),
.intake-card select:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.modal-form textarea {
  min-height: 92px;
  resize: vertical;
}

.modal-form fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
}

.modal-form legend {
  padding: 0 6px;
  color: var(--ink);
  font-weight: 800;
}

.inline-option-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-3);
}

.checkbox-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  color: var(--ink) !important;
}
/* Notif popup: ceo red klikabilan (veca meta) sa hover feedbackom. */
#notification-modal .checkbox-row{width:100%;cursor:pointer;padding:8px 10px;border-radius:8px;transition:background-color .12s ease}
#notification-modal .checkbox-row:hover{background:var(--surface-2)}
#notification-modal .checkbox-row input{cursor:pointer}
#notification-modal .checkbox-row,
#notification-modal .checkbox-row *{pointer-events:auto}

.checkbox-row input {
  width: 16px;
  height: 16px;
}

/* Toggle-row: uniforman panel-red sa switch prekidacem (isti izgled kao case-form-section summary). */
.toggle-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px !important;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink) !important;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto; /* ceo red je klikabilan, ne samo prekidac */
  transition: border-color 0.15s ease, background 0.15s ease;
}

.toggle-row:hover {
  border-color: var(--accent);
}

.toggle-row .toggle-row-label {
  flex: 1 1 auto;
  pointer-events: none;
}

.switch-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch-input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 0.15s ease, background 0.15s ease;
}

.switch-input:checked {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: var(--accent);
}

.switch-input:checked::after {
  left: 23px;
  background: var(--accent);
}

.switch-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Nadjacaj usko ogranicenje sirine checkboxa u activity formi za switch. */
#activity-form input.switch-input {
  width: 44px;
  max-width: 44px;
  height: 24px;
}

/* Rok/naplata paneli: ceo kvadrat je klikabilan - header toggle-row popunjava panel. */
.inline-option-panel.activity-deadline-fields,
.inline-option-panel.activity-billing-fields {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.activity-deadline-fields > .toggle-row,
.activity-billing-fields > .toggle-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 52px;
}

.activity-deadline-fields > .toggle-row:hover,
.activity-billing-fields > .toggle-row:hover {
  background: var(--surface-2);
}

.activity-deadline-fields > .toggle-row:has(.switch-input:checked),
.activity-billing-fields > .toggle-row:has(.switch-input:checked) {
  border-bottom: 1px solid var(--line);
}

.activity-deadline-fields > .inline-option-fields,
.activity-billing-fields > .inline-option-fields {
  padding: 12px;
}

.inline-option-fields {
  display: none;
  gap: 10px;
}

.inline-option-panel:has(input[type="checkbox"]:checked) .inline-option-fields {
  display: grid;
}

.deadline-calculation-fields {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.deadline-calculation-result {
  display: none;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* Grupise polje "Datum roka" sa kontrolom za izracunavanje da bude jasno da
   izracunavanje puni bas to polje. */
.deadline-date-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3);
}

.deadline-date-group .deadline-calc-toggle {
  font-size: 12px;
}

.inline-option-fields:has(input[name="calculateDeadline"]:checked) .deadline-calculation-fields {
  display: grid;
}

.inline-option-fields:has(input[name="calculateDeadline"]:checked) .deadline-calculation-result {
  display: block;
}

.report-form {
  width: min(860px, calc(100vw - 32px));
}

#report-modal {
  width: min(1500px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

#report-modal .report-form {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#report-modal .report-preview {
  height: 100%;
  max-height: none;
  overscroll-behavior: contain;
}

.report-preview {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 64vh;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  color: var(--ink);
  font: 14px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.modal-actions {
  justify-content: flex-end;
}

/* Permanent dark mode surface overrides. */
.reminder-item,
.brief-card,
.case-control-card,
.team-card,
.presentation-step,
.readiness-item,
.feed-item,
.risk-item,
.audit-item,
.case-row,
  .document-card,
  .cash-item,
  .task-row,
.info-cell,
.timeline-card,
.document-mini,
.deadline-mini,
.agenda-item,
.month-day,
.intake-card,
.deadline-proposals,
.backup-item,
.user-item,
.client-database-card,
.court-number-list span,
.assignment-history span,
.modal-form fieldset,
.report-preview {
  background: var(--surface-3);
}

.brief-card.danger {
  background: rgba(255, 132, 111, 0.12);
  border-color: rgba(255, 132, 111, 0.38);
}

.brief-card.warn {
  background: rgba(240, 184, 79, 0.12);
  border-color: rgba(240, 184, 79, 0.38);
}

.brief-card.ok,
.presentation-step.active {
  background: rgba(83, 199, 173, 0.12);
  border-color: rgba(83, 199, 173, 0.42);
}

.team-stats span,
.search,
.case-row,
.timeline-card,
.custom-select-button,
.custom-select-menu,
.month-day,
.modal-form input,
.modal-form select,
.modal-form textarea,
.intake-card select,
.user-form input,
.user-form select {
  background: var(--surface);
  color: var(--ink);
}

.search::placeholder,
.modal-form input::placeholder,
.modal-form textarea::placeholder,
.user-form input::placeholder {
  color: #789089;
}

.month-day.muted-month {
  background: #111b18;
  color: #6f837c;
}

.presentation-floating {
  background: rgba(20, 31, 28, 0.96);
  border-color: rgba(83, 199, 173, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.44);
}

.demo-mode-pill.active,
.step-number {
  background: #24483f;
  color: #bff8ea;
}

.tag {
  color: #dce9e5;
}

.tag.warn,
.tag-priority-medium {
  background: rgba(240, 184, 79, 0.16);
  color: #ffd98b;
}

.tag.danger,
.tag-status-risk,
.tag-status-late,
.tag-status-debt,
.tag-priority-high {
  background: rgba(255, 132, 111, 0.16);
  color: #ffb3a5;
}

.tag.ok,
.tag-status-done {
  background: rgba(99, 215, 139, 0.16);
  color: #99f0b4;
}

.tag-status-open,
.tag-priority-low {
  background: rgba(112, 158, 255, 0.16);
  color: #abc4ff;
}

/* Item 4: boje tipova aktivnosti ujednacene sa stranicom predmeta (flow-tone-*).
   Rok = koralna (flow-tone-deadline #ff8a7a). */
.tag-type-deadline {
  background: rgba(255, 138, 122, 0.16);
  color: #ffb3a5;
}

.tag-status-progress {
  background: rgba(255, 171, 86, 0.16);
  color: #ffc991;
}

.tag-status-draft {
  background: rgba(190, 147, 255, 0.16);
  color: #d8c2ff;
}

.deadline-countdown-overdue {
  background: rgba(255, 132, 111, 0.16);
  color: #ffb3a5;
}

.deadline-countdown-today {
  background: rgba(240, 184, 79, 0.16);
  color: #ffd98b;
}

.deadline-countdown-soon {
  background: rgba(255, 171, 86, 0.16);
  color: #ffc991;
}

.deadline-countdown-ok {
  background: rgba(112, 158, 255, 0.16);
  color: #abc4ff;
}

.tag-status-expense {
  background: rgba(240, 184, 79, 0.18);
  color: var(--warn);
}

.tag-status-gratis {
  background: rgba(190, 147, 255, 0.18);
  color: #d8c2ff;
}

.tag-status-invoiced {
  background: rgba(240, 184, 79, 0.18);
  color: #ffd98b;
}

.tag-status-cash {
  background: rgba(83, 199, 173, 0.20);
  color: #9df0dd;
}

/* Zadatak = ljubicasta (flow-tone-task #b6a2ff). */
.tag-type-task {
  background: rgba(182, 162, 255, 0.16);
  color: #cdbcff;
}

/* Dokument/aktivnost = tirkizno-plava (flow-tone-document #66d9e8). */
.tag-type-document {
  background: rgba(102, 217, 232, 0.16);
  color: #a9e9f2;
}

/* Privatna obaveza = svetlo plava (flow-tone-delivery #7dd3fc) da se razlikuje od zadatka. */
.tag-type-private {
  background: rgba(125, 211, 252, 0.16);
  color: #bfe6fd;
}

.court-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.court-active-label {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  align-self: end;
  /* Poravnato desno, u drugu kolonu (ispod polja "Sudija"). */
  grid-column: 2;
  justify-self: end;
  gap: 9px;
  padding-bottom: 9px;
  white-space: nowrap;
  cursor: pointer;
  /* Ceo label (i tekst "Aktivni sud") klikabilan, ne samo radio dugme. */
  pointer-events: auto !important;
  color: var(--ink);
  font-size: 14.5px;
}
.court-active-label input {
  width: 18px !important;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  pointer-events: auto !important;
  cursor: pointer;
}
.court-number-list span.court-number-active {
  border-color: var(--accent);
  color: var(--ink);
}
.court-number-list span.court-number-active small {
  color: var(--accent);
  font-weight: 700;
}
/* Objedinjena kartica suda (fiksni podaci suda + podaci po predmetu). */
.court-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface-3);
  display: grid;
  gap: 14px;
}
.court-card-fixed,
.court-card-case {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.court-card-fixed {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 13px;
}
.court-card-tag {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.court-card .span-full {
  grid-column: 1 / -1;
}
.court-card .court-row-remove {
  justify-self: start;
}
/* Obavezno prazno polje na submit: shake + crveni okvir (uz scroll do labela). */
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.field-shake {
  animation: field-shake 0.5s ease;
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 2px rgba(255, 132, 111, 0.25) !important;
}

/* Inline greska UNUTAR modala (vidljiva iznad top-layer backdrop-a). */
.modal-error {
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface-2));
  border: 1px solid var(--accent-2);
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 2px;
}
.modal-error[hidden] { display: none; }
.modal-error-shake { animation: field-shake 0.5s ease; }
/* Crvena oznaka za custom entity-picker (Predmet/Klijent) kad je prazan. */
.entity-picker-error .search,
.entity-picker-error input {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 2px rgba(255, 132, 111, 0.25) !important;
}

.court-entry-grid > label {
  min-width: 0;
}

.court-entry-grid input {
  width: 100%;
  min-width: 0;
}

.court-entry-grid:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.assignee-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.assignee-picker legend {
  grid-column: 1 / -1;
}

.assignee-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.assignee-picker input {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Kad su korisnici prikazani kao toggle-redovi, uskladi ih sa panel stilom. */
.assignee-picker .toggle-row {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface-3);
}

dialog {
  background: var(--surface);
  color: var(--ink);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

/* Unified workspace system */
.workspace-view {
  display: none;
  gap: 16px;
}

.workspace-view.active {
  display: grid;
}

.workspace-view > .panel,
.workspace-view > .dashboard-intro,
.workspace-view > .case-search-primary {
  margin: 0;
}

.view-toolbar {
  min-height: 58px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

#calendar-view .panel-heading.view-toolbar {
  justify-content: flex-start;
  position: sticky;
  top: var(--app-header-h, 74px);
  z-index: 40;
  background: var(--surface);
  padding-top: 14px;
}

#calendar-view .calendar-heading-copy {
  min-width: 0;
}

#calendar-view .agenda-toolbar {
  flex: 1;
  justify-content: flex-start;
}

#calendar-view .agenda-filter-bar {
  /* Popuni sredinu izmedju Agenda/Mesec (levo) i "Svi korisnici"+"Privatna obaveza"
     (desno), pa rasporedi dve grupe tabova sa jednakim razmakom levo/izmedju/desno. */
  flex: 1;
  justify-content: space-evenly;
  margin: 0;
  gap: 22px;
}

.view-toolbar h2,
.view-toolbar p {
  margin-bottom: 0;
}

.panel {
  box-shadow: none;
}

.panel-heading {
  min-height: 42px;
}

.panel-heading h2 + .muted,
.panel-heading h2 + p {
  margin-top: 5px;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 112px;
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  text-align: center;
}

.overflow-menu {
  position: relative;
}

.overflow-menu > summary {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.overflow-menu > summary::-webkit-details-marker {
  display: none;
}

.overflow-menu[open] > summary {
  border-color: var(--accent);
}

.overflow-menu-items {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.overflow-menu-items button {
  width: 100%;
  justify-content: flex-start;
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(83, 199, 173, 0.46);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  pointer-events: auto;
}

.toast.info {
  border-color: rgba(112, 158, 255, 0.46);
}

.toast.error {
  border-color: rgba(255, 112, 96, 0.58);
}

.toast button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
}

.is-loading .main::before {
  content: "";
  position: fixed;
  z-index: 90;
  top: 72px;
  left: 0;
  width: 34%;
  height: 3px;
  background: var(--accent);
  animation: workspace-loading 900ms ease-in-out infinite alternate;
}

@keyframes workspace-loading {
  from {
    transform: translateX(-30%);
  }
  to {
    transform: translateX(290%);
  }
}

.case-actions,
.cash-tools,
.panel-actions {
  align-items: center;
}

.cash-item {
  border-left: 3px solid var(--line);
}

.cash-item:has(.tag-status-late) {
  border-left-color: #ff846f;
}

.cash-item:has(.tag-status-done) {
  border-left-color: #63d78b;
}

.cash-summary-card,
.audit-summary-card {
  min-height: 96px;
  box-shadow: none;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #9df0dd;
  outline-offset: 2px;
}

/* #1 Skaliranje: proporcionalno skaliranje cele aplikacije (vidi applyAppScale u
   app.js) drzi ISTI raspored kao na 100% na svim rezolucijama/zoom-ima. Reflow u
   dva reda na desktopu (nekadasnji @media 1440) je uklonjen - umesto prelamanja se
   skalira. Genuinski mobilni reflow (<=1160/<=1100/<=760) i dalje vazi ispod praga. */

@media (max-width: 1100px) {
  .court-entry-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-focus-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .document-grid,
  .director-brief,
  .quick-guide,
  .audit-summary-grid,
  .cash-summary-grid,
  .delivery-summary-grid,
  .backup-status-grid,
  .case-control-list,
  .director-task-triage,
  .team-workload,
  .demo-readiness {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .release-center,
  .mvp-qa-list,
  .release-checklist {
    grid-template-columns: 1fr;
  }

  .primary-release-card {
    grid-column: 1;
  }

  .span-7,
  .span-5 {
    grid-column: 1 / -1;
  }

  .split-layout,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .case-drawer-layout.case-search-open {
    grid-template-columns: 1fr;
  }

  .case-drawer-layout.case-search-open .case-list-panel {
    position: static;
    max-height: 430px;
    min-height: 280px;
  }

  .case-recent-grid {
    grid-template-columns: 1fr;
  }

  .client-workspace {
    grid-template-columns: 1fr;
  }

  .storage-reconciliation-item {
    grid-template-columns: 1fr;
  }

  .storage-quarantine-item {
    grid-template-columns: 1fr;
  }

  .attention-item {
    grid-template-columns: 1fr;
  }

  .document-trash-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .case-form-basic-grid {
    grid-template-columns: 1fr;
  }

  .span-full {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .workspace-view {
    gap: 12px;
  }

  .view-toolbar {
    min-height: 0;
    padding-bottom: 12px;
  }

  .toast-region {
    right: 12px;
    bottom: 12px;
  }

  .overflow-menu-items {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
  }

  .case-search-primary-row {
    grid-template-columns: 1fr;
  }

  .client-database-card {
    grid-template-columns: 1fr;
  }

  .client-card-summary {
    grid-column: 1;
    grid-row: auto;
  }

  .app-header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px 10px;
    padding: 8px 12px;
  }

  .brand {
    align-self: center;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .app-header .brand div {
    display: none;
  }

  .app-header .brand-copy {
    display: none;
  }

  .brand-menu-dropdown {
    width: min(280px, calc(100vw - 24px));
  }

  .brand-menu {
    width: auto;
  }

  .nav {
    justify-content: flex-start;
    grid-column: 2;
  }

  .app-header .global-search {
    width: 100%;
  }

  .header-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .header-tools .global-search {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .header-tools .header-action {
    width: 100%;
  }

  .header-tools .header-new-case:not(.hidden) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .main {
    padding: 14px 12px 20px;
  }

  .topbar,
  .detail-header {
    align-items: flex-start;
  }

  .detail-header {
    flex-direction: column;
  }

  .case-flow-workspace {
    grid-template-columns: 1fr;
  }

  .case-flow-detail:not(.is-open) {
    display: none;
  }

  .case-flow-detail.is-open {
    position: fixed;
    z-index: 60;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    max-height: min(70vh, 620px);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.42);
  }

  .case-flow-filter-menu {
    width: 100%;
  }

  .case-flow-filter-menu > summary {
    width: 100%;
  }

  .case-flow-filter-menu-items {
    left: 0;
    right: auto;
    min-width: 100%;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .dashboard-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .documents-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-detail-summary,
  .document-version-card {
    grid-template-columns: 1fr;
  }

  .dashboard-focus-grid,
  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .topbar-actions > * {
    flex: 1 1 auto;
  }

  .active-user-pill {
    justify-content: center;
  }

  .metric-grid,
  .document-grid,
  .director-brief,
  .quick-guide,
  .audit-summary-grid,
  .cash-summary-grid,
  .delivery-summary-grid,
  .backup-status-grid,
  .case-control-list,
  .director-task-triage,
  .info-grid,
  .client-database-list,
  .court-number-list,
  .client-detail-grid,
  .delivery-review-grid,
  .team-workload,
  .team-stats,
  .demo-readiness {
    grid-template-columns: 1fr;
  }

  .feed-item,
  .audit-item,
  .cash-item,
  .cash-client-row,
  .delivery-card,
  .agenda-item,
  .task-focus-card,
  .presentation-step,
  .presentation-floating,
  .reminder-item,
  .user-form {
    grid-template-columns: 1fr;
  }

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

  .presentation-floating {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .floating-demo-actions {
    justify-content: stretch;
  }

  .floating-demo-actions button {
    flex: 1 1 120px;
  }

  .reminder-item .muted {
    grid-column: 1;
  }

  .nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .nav-item {
    white-space: nowrap;
  }

  .panel-heading {
    align-items: flex-start;
    gap: 10px;
  }

  .panel-heading > div,
  .panel-actions,
  .document-tools,
  .cash-tools,
  .agenda-toolbar,
  .agenda-filters {
    width: 100%;
  }

  .panel-actions,
  .document-tools,
  .cash-tools,
  .agenda-toolbar,
  .agenda-filters {
    justify-content: flex-start;
  }

  .panel-actions > *,
  .document-tools > *,
  .cash-tools > *,
  .agenda-filters > select,
  .agenda-filters > button {
    flex: 1 1 150px;
    max-width: none;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-control .segment {
    flex: 1;
  }

  .agenda-filter-menu {
    flex: 1 1 180px;
  }

  .agenda-filter-menu > summary {
    width: 100%;
  }

  .agenda-filter-menu .agenda-filters {
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 48px));
  }

  .month-calendar {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 6px;
  }

  .month-calendar-toolbar {
    position: sticky;
    left: 0;
    min-width: 660px;
  }

  .month-weekdays,
  .month-grid {
    min-width: 660px;
    gap: 4px;
  }

  .month-day {
    min-height: 82px;
    padding: 5px;
  }

  .month-event {
    grid-template-columns: 1fr;
  }

  .month-event-time {
    display: none;
  }

  .timeline::before {
    left: 13px;
  }

  .timeline-item {
    grid-template-columns: 28px 1fr;
  }

  .timeline-time {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
  }

  .timeline-dot {
    grid-row: 1 / span 2;
  }

  dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  #report-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .modal-form {
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 18px 48px 18px 16px;
  }

  #document-detail-modal {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    max-height: calc(100vh - 8px);
  }

  .document-detail-form {
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #document-detail-content {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }

  #document-preview-modal {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    max-height: calc(100vh - 8px);
  }

  .document-viewer-form {
    padding: 0;
    overflow: hidden;
  }

  .document-viewer-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
    padding: 12px 50px 12px 12px;
  }

  .document-viewer-title,
  .document-viewer-toolbar label {
    width: 100%;
    min-width: 0;
  }

  .document-viewer-title h2 {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* UX polish: keep selected case visible while searching, and show results as a dropdown. */
.case-drawer-layout.case-search-open {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.case-drawer-layout.case-search-open .case-detail {
  display: block;
}

.case-drawer-layout.case-search-open .case-list-panel {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 30;
  display: flex;
  width: min(920px, 100%);
  max-height: min(62vh, 540px);
  min-height: 0;
  transform: translateX(-50%);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

.case-flow-filter-menu {
  align-self: center;
  min-width: 190px;
}

.case-flow-filter-menu > summary {
  min-height: 44px;
}

.flow-tone-note { --flow-color: #f2c879; --flow-bg: rgba(242, 200, 121, 0.12); }
.flow-tone-document { --flow-color: #66d9e8; --flow-bg: rgba(102, 217, 232, 0.11); }
.flow-tone-court { --flow-color: #f2c879; --flow-bg: rgba(242, 200, 121, 0.12); }

.court-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.court-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.court-field-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8aa39a;
}
.court-field-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.court-field-primljeno {
  border-color: rgba(83, 199, 173, 0.4);
  background: rgba(83, 199, 173, 0.1);
}
.court-field-primljeno .court-field-label {
  color: #7fd8c2;
}
.court-field-primljeno.is-empty {
  border-color: var(--line);
  background: var(--surface-3);
}
.court-field-primljeno.is-empty .court-field-label,
.court-field-primljeno.is-empty .court-field-value {
  color: #8aa39a;
  font-weight: 400;
}
.court-field-rok {
  border-color: rgba(240, 184, 79, 0.4);
  background: rgba(240, 184, 79, 0.1);
}
.court-field-rok .court-field-label {
  color: #d9b66a;
}
.court-field-rok .court-field-value {
  color: #f3d9a6;
}
.court-field-rok.is-overdue {
  border-color: rgba(255, 110, 95, 0.5);
  background: rgba(255, 110, 95, 0.12);
}
.court-field-rok.is-overdue .court-field-label,
.court-field-rok.is-overdue .court-field-value {
  color: #ff9d8c;
}
.flow-tone-task { --flow-color: #b6a2ff; --flow-bg: rgba(182, 162, 255, 0.12); }
.flow-tone-task-done { --flow-color: #75ec9a; --flow-bg: rgba(82, 180, 111, 0.15); }
.flow-tone-deadline { --flow-color: #ff8a7a; --flow-bg: rgba(255, 138, 122, 0.12); }
.flow-tone-delivery { --flow-color: #7dd3fc; --flow-bg: rgba(125, 211, 252, 0.10); }

.case-flow-timeline .flow-interactive .timeline-dot {
  background: var(--flow-color, var(--accent));
  border-color: color-mix(in srgb, var(--flow-color, var(--accent)) 35%, var(--surface) 65%);
}

.case-flow-timeline .flow-interactive .timeline-card {
  border-color: color-mix(in srgb, var(--flow-color, var(--line)) 28%, var(--line) 72%);
  background: linear-gradient(90deg, var(--flow-bg, transparent), transparent 72%), var(--surface-2);
  box-shadow: inset 4px 0 0 var(--flow-color, var(--accent));
}

.case-flow-timeline .flow-interactive .timeline-card:hover,
.case-flow-timeline .flow-interactive .timeline-card:focus-visible {
  border-color: var(--flow-color, var(--accent));
  background: linear-gradient(90deg, var(--flow-bg, rgba(83, 199, 173, 0.08)), transparent 78%), var(--surface-3);
  box-shadow: inset 4px 0 0 var(--flow-color, var(--accent)), 0 0 0 3px color-mix(in srgb, var(--flow-color, var(--accent)) 18%, transparent);
}

.case-flow-timeline .flow-interactive.active .timeline-card {
  border-color: var(--flow-color, var(--accent));
  background: linear-gradient(90deg, var(--flow-bg, rgba(83, 199, 173, 0.12)), transparent 76%), var(--surface-3);
  box-shadow: inset 5px 0 0 var(--flow-color, var(--accent));
}

.tag-type-note {
  background: rgba(242, 200, 121, 0.18);
  color: #f8ddb0;
}

.tag-type-court {
  background: rgba(242, 200, 121, 0.18);
  color: #f8ddb0;
}

@media (max-width: 760px) {
  .case-drawer-layout.case-search-open .case-list-panel {
    position: static;
    width: 100%;
    transform: none;
  }
}

/* Client search results are now an anchored dropdown; keep the selected profile visible behind it. */
.client-workspace {
  position: relative;
}

/* Flow color belongs to the card, not to the text badge. */
.case-flow-timeline .tag-type-note,
.case-flow-detail .tag-type-note,
.case-flow-timeline .tag-type-document,
.case-flow-detail .tag-type-document,
.case-flow-timeline .tag-type-task,
.case-flow-detail .tag-type-task,
.case-flow-timeline .tag-type-court,
.case-flow-detail .tag-type-court,
.case-flow-timeline .tag-type-deadline,
.case-flow-detail .tag-type-deadline,
.case-flow-timeline .tag-status-open,
.case-flow-detail .tag-status-open,
.case-flow-timeline .tag-status-progress,
.case-flow-detail .tag-status-progress,
.case-flow-timeline .tag-status-risk,
.case-flow-detail .tag-status-risk,
.case-flow-timeline .tag-status-done,
.case-flow-detail .tag-status-done,
.case-flow-timeline .tag-priority-low,
.case-flow-detail .tag-priority-low,
.case-flow-timeline .tag-priority-medium,
.case-flow-detail .tag-priority-medium,
.case-flow-timeline .tag-priority-high,
.case-flow-detail .tag-priority-high {
  border: 1px solid color-mix(in srgb, var(--flow-color, var(--line)) 30%, var(--line) 70%);
  background: rgba(216, 237, 230, 0.07);
  color: var(--ink);
}

.case-flow-timeline .flow-interactive .timeline-card {
  background: var(--flow-bg, transparent);
}

.case-flow-timeline .flow-interactive .timeline-card:hover,
.case-flow-timeline .flow-interactive .timeline-card:focus-visible,
.case-flow-timeline .flow-interactive.active .timeline-card {
  background: color-mix(in srgb, var(--flow-bg, rgba(83, 199, 173, 0.08)) 82%, var(--surface-3) 18%);
}

.cash-workspace {
  display: grid;
  gap: 18px;
}

.cash-search-primary {
  position: relative;
}

.cash-search-primary .search {
  font-weight: 400;
}

.cash-search-primary .case-search-primary-row {
  align-items: stretch;
}

.cash-filter-menu {
  position: relative;
}

.cash-filter-menu > summary {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.cash-filter-menu > summary::-webkit-details-marker {
  display: none;
}

.cash-filter-menu[open] > summary,
.cash-filter-menu > summary:hover,
.cash-filter-menu > summary:focus-visible {
  border-color: var(--accent);
  background: var(--surface-3);
}

.cash-filter-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 10px;
  min-width: 280px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32);
}

.cash-filter-menu-items label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.cash-filter-menu-items .search {
  max-width: none;
  width: 100%;
}

.cash-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1180px);
  margin: 0 auto;
}

.cash-summary-card {
  min-height: 76px;
  padding: 12px 14px;
}

.cash-summary-card strong {
  font-size: 18px;
  line-height: 1.25;
}

.cash-client-overview {
  width: min(100%, 1180px);
}

.cash-client-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cash-client-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 148px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.cash-client-card:hover,
.cash-client-card:focus-visible {
  border-color: var(--accent);
  background: var(--surface-3);
}

.cash-client-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: var(--text) !important;
}

.cash-client-card-top strong {
  font-size: 18px;
  line-height: 1.25;
}

.cash-card-money {
  color: var(--accent) !important;
  font-size: 24px !important;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.cash-client-card > span:not(.cash-client-card-top):not(.cash-card-money) {
  color: var(--muted);
  font-size: 13px;
}

.cash-client-detail {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.cash-client-detail-heading h2 {
  margin: 8px 0 4px;
}

.cash-client-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cash-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.cash-client-items .cash-item {
  background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 980px) {
  .cash-summary-grid,
  .cash-client-grid,
  .cash-client-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.entity-picker {
  position: relative;
  display: grid;
  gap: 8px;
}

.entity-picker .search,
.entity-picker input {
  max-width: none;
  width: 100%;
}

.entity-picker {
  position: relative;
}
.entity-picker-results {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.entity-picker-results:empty {
  display: none;
}

.entity-picker-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 18, 14, 0.78);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.entity-picker-option:hover,
.entity-picker-option:focus-visible,
.entity-picker-option.active {
  border-color: var(--accent);
  background: rgba(117, 203, 185, 0.12);
  outline: none;
}

.entity-picker-option span,
.entity-picker-empty {
  color: var(--muted);
  font-size: 0.92rem;
}

.entity-picker-empty {
  padding: 10px 2px;
}

.cash-workspace .cash-summary-grid {
  display: none;
}
.cash-search-primary {
  gap: 8px;
}

.cash-filter-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.cash-filter-menu {
  position: relative;
  width: max-content;
}

.cash-filter-menu-items {
  left: 0;
  right: auto;
  top: calc(100% + 8px);
}

.cash-client-overview h3 {
  margin: 0 0 8px;
}

.cash-search-results {
  display: grid;
  gap: 10px;
  width: min(100%, 920px);
  margin: 0 auto;
}

.cash-search-result-card {
  width: 100%;
}

.cash-search-result-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 160px;
}

.cash-search-result-side strong {
  color: var(--accent);
  font-size: 1.1rem;
}

@media (max-width: 760px) {
  .cash-search-result-side {
    justify-items: start;
    min-width: 0;
  }
}
/* Uniform case search results with Clients page */
.case-drawer-layout.case-search-open {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
}

.case-drawer-layout.case-search-open .case-detail {
  display: block !important;
}

.case-drawer-layout.case-search-open .case-list-panel {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  z-index: 30;
  display: grid !important;
  width: min(920px, 100%) !important;
  max-height: min(62vh, 540px) !important;
  min-height: 0 !important;
  transform: translateX(-50%) !important;
  padding: 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42) !important;
  overflow-y: auto !important;
}

.case-drawer-layout.case-search-open .case-result-count {
  display: none !important;
}

.case-drawer-layout.case-search-open .case-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.case-search-result-row.active {
  border-color: var(--accent);
  background: var(--surface-3);
}
.cash-search-primary-row {
  align-items: stretch;
}

.cash-month-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  margin-left: auto;
}

/* Choice/wizard modali: centrirano zaglavlje (naslov + uvodno pitanje) radi
   vizuelnog balansa. Kartice ostaju levo poravnate (vidi .cash-choice-btn). */
.cash-choice-form > h2,
.cash-choice-form > p {
  text-align: center;
}

.cash-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 4px;
}
.cash-choice-btn {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.cash-choice-btn:hover,
.cash-choice-btn:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
  outline: none;
}
/* Press feedback dok se izbor u wizardu drzi pritisnut - mora imati istu ili vecu
   specificnost od :hover iznad (i biti posle njega) da bi pobedio dok je mis na dugmetu. */
.cash-choice-btn:active {
  transform: translateY(1px) scale(0.95);
  transition-duration: 60ms;
}
.cash-choice-btn strong { font-size: 15px; }
.cash-choice-btn span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 520px) {
  .cash-choice-grid { grid-template-columns: 1fr; }
}

.cash-search-primary-row .cash-filter-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  z-index: 31;
}

.cash-search-primary-row .cash-filter-menu > summary {
  min-width: 112px;
  justify-content: center;
}

.cash-search-primary-row .cash-filter-menu-items {
  left: 0;
  right: auto;
}

@media (max-width: 1160px) {
  .cash-search-primary-row .cash-filter-menu {
    position: relative;
    right: auto;
    grid-column: 1 / -1;
    width: max-content;
  }
}

@media (max-width: 760px) {
  .cash-search-primary-row {
    grid-template-columns: 1fr;
  }
}
.cash-ledger {
  position: relative;
}

#cash-view .cash-top-strip { display: flex; justify-content: flex-end; margin-bottom: 10px; }
#cash-view .cash-table-filter { display: flex; align-items: center; gap: 7px; padding: 0 10px; height: 34px; background: var(--surface-2); border: 1px solid var(--accent); border-radius: 8px; color: var(--muted); box-shadow: 0 0 0 3px rgba(95, 208, 163, 0.14); }
#cash-view .cash-flow-toolbar > .cash-table-filter { grid-column: 3; justify-self: end; }
#cash-view .cash-table-filter:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(95, 208, 163, 0.26); }
#cash-view .cash-table-filter svg { flex: none; }
#cash-view .cash-table-filter-input { border: none; background: transparent; color: var(--ink); font-size: 13px; font-weight: 400; width: 190px; max-width: 40vw; outline: none; padding: 0; }
#cash-view .cash-table-filter-clear { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
#cash-view .cash-table-filter-clear:hover { color: var(--ink); }

.cash-search-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 90;
  width: min(920px, 100%);
  max-height: min(62vh, 540px);
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

.cash-search-overlay .cash-search-results {
  width: 100%;
  margin: 0;
}
/* When search is active, keep the page focused on search results only. */
.case-drawer-layout.case-search-open .case-detail-landing .case-recent,
.client-workspace.client-search-open .client-recent,
.cash-workspace.cash-search-open .cash-client-overview {
  display: none !important;
}

/* ============================================================= */
/* Kasa - konzola za unos uplate (redizajn, QuickBooks stil)     */
/* ============================================================= */
#cash-view .cash-console {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 24px 20px;
}
#cash-view .cash-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
#cash-view .cash-console-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
#cash-view .cash-console-title h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.2px;
  color: #ffffff;
}
#cash-view .cash-console-title p { margin: 2px 0 0; font-size: 13px; }
#cash-view .cash-back { white-space: nowrap; }
#cash-view .cash-console-balances { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
#cash-view .cash-console-balance { text-align: right; }
#cash-view .cash-console-balance small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#cash-view .cash-console-balance strong {
  font-size: 24px;
  font-weight: 750;
  color: var(--accent-2);
}
#cash-view .cash-console-balance strong.cash-amt-in { color: var(--ok); }

#cash-view .cash-console-top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
}
#cash-view .cash-console-inputs { display: flex; flex-direction: column; gap: 14px; }
#cash-view .cash-field { display: flex; flex-direction: column; gap: 6px; }
#cash-view .cash-field > span,
#cash-view .cash-amount-input > span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
#cash-view .cash-field input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 15px;
  outline: none;
}
#cash-view .cash-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(83, 199, 173, 0.18);
}
#cash-view .cash-field-amount input { font-size: 18px; font-weight: 650; }
#cash-view .cash-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#cash-view .cash-method { display: flex; gap: 10px; }
#cash-view .cash-method-opt {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#cash-view .cash-method-opt.active {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(83, 199, 173, 0.12);
  font-weight: 600;
}

/* Kasa 12: "Nacin placanja" kao segmentirana kontrola (spojene opcije), da se
   jasno razlikuje od filter-tabova iznad tabele. */
#cash-view .cash-method-segment {
  gap: 0;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
}
#cash-view .cash-method-segment .cash-method-opt {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 18px;
}
#cash-view .cash-method-segment .cash-method-opt + .cash-method-opt {
  border-left: 1px solid var(--line);
}
#cash-view .cash-method-segment .cash-method-opt.active {
  background: var(--accent);
  color: #06231d;
  font-weight: 700;
}

/* Kasa 13: unos uplate u zasebnom okviru, jasno odvojen od filtera i tabele. */
#cash-view .cash-entry-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 14px 16px;
  margin-bottom: 18px;
}
#cash-view .cash-entry-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
#cash-view .cash-table-section {
  padding-top: 4px;
}

/* Zaglavlje tabele: valuta levo, tip filter centriran, "Nova stavka" desno. */
#cash-view .cash-newitem-strip { display: flex; justify-content: flex-end; margin-bottom: 10px; }
#cash-view .cash-table-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
#cash-view .cash-th-left { justify-self: start; }
#cash-view .cash-th-center { justify-self: center; }
#cash-view .cash-th-right { justify-self: end; }
#cash-view .cash-new-item-btn {
  flex: none;
  white-space: nowrap;
}

/* Kasa 18: rashod u tabeli u amber boji, razlicito od coral dugovanja. */
#cash-view .cash-expense-inline td {
  background: rgba(240, 184, 79, 0.08);
}
#cash-view .cash-expense-inline .cash-amt-charge {
  color: var(--warn);
}

#cash-view .cash-console-summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  align-self: start;
}
#cash-view .cash-console-summary h3 {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#cash-view .cash-srow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
#cash-view .cash-srow:last-of-type { border-bottom: 0; }
#cash-view .cash-srow span { color: var(--muted); }
#cash-view .cash-srow strong { font-size: 16px; font-weight: 650; }
#cash-view .cash-srow-total span { color: var(--ink); font-weight: 600; }
#cash-view .cash-srow-total strong { font-size: 20px; color: var(--accent); font-weight: 750; }
#cash-view .cash-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
#cash-view .cash-hint b { color: var(--ink); font-weight: 600; }

#cash-view .cash-table-wrap { overflow-x: auto; }
#cash-view .cash-table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#cash-view .cash-table-title h3 { margin: 0; font-size: 15px; }
#cash-view .cash-ledger-table { width: 100%; border-collapse: collapse; min-width: 640px; }
#cash-view .cash-ledger-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}
#cash-view .cash-ledger-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(45, 64, 57, 0.55);
  font-size: 14px;
  vertical-align: middle;
}
#cash-view .cash-row.cash-row-active { background: rgba(83, 199, 173, 0.06); }
#cash-view .cash-col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#cash-view th.cash-col-num { text-align: right; }
#cash-view .cash-col-check { width: 40px; }
#cash-view .cash-col-menu { width: 44px; text-align: right; }
#cash-view .cash-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--surface-3);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}
#cash-view .cash-check.on { background: var(--accent); border-color: var(--accent); color: #06120e; }
#cash-view .cash-desc-main { font-weight: 600; }
#cash-view .cash-desc-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
#cash-view .cash-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  margin-right: 4px;
}
#cash-view .cash-tag-late { background: rgba(255, 132, 111, 0.16); color: #ffb2a3; }
#cash-view .cash-tag-partial { background: rgba(240, 184, 79, 0.16); color: #f4cd7f; }
#cash-view .cash-tag-open { background: rgba(157, 176, 169, 0.14); color: #c4d3cd; }
#cash-view .cash-pay-input {
  width: 120px;
  text-align: right;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
#cash-view .cash-pay-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(83, 199, 173, 0.18); }
#cash-view .cash-row-active .cash-pay-input { border-color: var(--accent); color: var(--accent); font-weight: 650; }
#cash-view .cash-ledger-table tfoot td {
  padding: 13px 10px;
  font-weight: 700;
  font-size: 14px;
  border-top: 2px solid var(--line);
}
#cash-view .cash-foot-label { text-align: right; color: var(--muted); font-weight: 600; }
#cash-view .cash-accent { color: var(--accent); }

#cash-view .cash-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
#cash-view .cash-foot-info { color: var(--muted); font-size: 13px; }
#cash-view .cash-foot-info strong { color: var(--ink); }
#cash-view .cash-foot-actions { display: flex; gap: 10px; align-items: center; }
#cash-view .cash-record.is-disabled { opacity: 0.45; pointer-events: none; }

#cash-view .cash-console-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
#cash-view .cash-console-empty strong { font-size: 16px; }
#cash-view .cash-closed { margin-top: 4px; }
#cash-view .cash-closed > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0;
}
#cash-view .cash-closed-items { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

@media (max-width: 900px) {
  #cash-view .cash-console-top { grid-template-columns: 1fr; }
  #cash-view .cash-console-head { flex-direction: column; }
  #cash-view .cash-console-balance { text-align: left; }
}

/* Kasa konzola - dopune v2 (valuta, klik na stavku, brisanje) */
#cash-view .cash-amount-row { display: flex; gap: 8px; align-items: stretch; }
#cash-view .cash-amount-row #cash-master-amount { flex: 1; font-size: 18px; font-weight: 650; }
#cash-view .cash-currency-select {
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  min-width: 84px;
}
#cash-view .cash-currency-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(83, 199, 173, 0.18); }

#cash-view .cash-desc-btn {
  display: inline;
  width: auto;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
#cash-view .cash-desc-btn:hover { color: var(--accent); text-decoration: underline; }
#cash-view .cash-desc-btn:hover .cash-desc-main { color: var(--accent); }
#cash-view .cash-desc-btn .cash-desc-main { display: block; }
#cash-view .cash-desc-btn .cash-desc-sub { display: block; }
#cash-view .cash-desc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

#cash-view td.cash-col-menu { overflow: visible; }
#cash-view .cash-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
#cash-view .cash-del:hover { color: var(--accent-2); background: rgba(255, 132, 111, 0.12); border-color: rgba(255, 132, 111, 0.3); }

/* Kasa - promet (hronoloski prikaz zaduzenja i uplata) */
#cash-view .cash-flow { display: flex; flex-direction: column; gap: 18px; }
#cash-view .cash-flow-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  /* Vizuelno izdvajanje KPI reda u zaseban panel odvojen od ostatka stranice. */
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Kasa - mesecni pregled (navigacija + izbor meseca) */
#cash-view .cash-month-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
#cash-view .cash-month-select {
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  min-width: 160px;
}
#cash-view .cash-month-step { min-width: 36px; padding: 6px 10px; }

/* Jasna oznaka sekcije filtera */
#cash-view .cash-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cash-view .cash-filter-label,
.cash-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
#cash-view .cash-flow-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
#cash-view .cash-expense-inline .cash-fc-main { color: var(--muted); font-weight: 600; }
#cash-view .cash-flow-table .cash-col-headers td {
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
#cash-view .cash-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#cash-view .cash-row-actions .overflow-menu > summary { width: 34px; min-height: 30px; }

/* Kolone: dugovanje / uplaceno / saldo / status u istom redu */
#cash-view .cash-balance-col { color: var(--ink); font-weight: 650; }
#cash-view th.cash-balance-col { color: var(--muted); }
#cash-view .cash-col-status { white-space: nowrap; }
#cash-view .cash-item-table { min-width: 760px; }

/* Rashodi */
#cash-view .cash-expenses {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#cash-view .cash-expenses-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#cash-view .cash-expenses-head h3 { margin: 0; font-size: 15px; }
#cash-view .cash-expense-amt { color: var(--accent-2); font-weight: 650; }
#cash-view .cash-expense-row { cursor: default; }
#cash-view .cash-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.modal-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.modal-form-row > label { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; }
.billing-net-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 4px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-3); }
.billing-net-label { color: var(--muted); font-size: 13px; }
.billing-net-value { color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-charge-net { display: block; }
.cash-charge-discount { display: block; font-size: 11px; font-weight: 600; color: var(--warn); white-space: nowrap; margin-top: 1px; }
.modal-form-row > label { flex: 1 1 120px; }
#cash-view .cash-kpi {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
#cash-view .cash-kpi small { color: var(--muted); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
#cash-view .cash-kpi-vals { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
#cash-view .cash-kpi-sep { color: var(--muted); font-size: 18px; font-weight: 400; }
#cash-view .cash-kpi strong { font-size: 20px; font-weight: 750; }
#cash-view .cash-amt-in { color: var(--ok); }
#cash-view .cash-amt-warn { color: var(--warn); }
#cash-view .cash-amt-charge { color: var(--warn); }
#cash-view .cash-flow-table tbody tr { cursor: pointer; }
#cash-view .cash-flow-table tbody tr:hover { background: rgba(83, 199, 173, 0.06); }
#cash-view .cash-flow-tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
#cash-view .cash-flow-tag.cash-flow-pay { background: rgba(99, 215, 139, 0.16); color: #8fe3ad; }
#cash-view .cash-flow-tag.cash-flow-charge { background: rgba(240, 184, 79, 0.16); color: #f4cd7f; }
#cash-view .cash-flow-tag.cash-flow-gratis { background: rgba(157, 176, 169, 0.16); color: #c4d3cd; }
#cash-view .cash-flow-table .cash-amt-in { font-weight: 650; }
#cash-view .cash-flow-more { display: flex; justify-content: center; }
@media (max-width: 720px) {
  #cash-view .cash-flow-kpis { grid-template-columns: 1fr; }
  #cash-view .cash-flow-toolbar { display: flex; flex-wrap: wrap; gap: 12px; }
  #cash-view .cash-flow-actions { margin-left: auto; }
}

/* Kasa - promet: kompaktan izgled + boje (crveno zaduzenja, zeleno uplate) */
#cash-view .cash-amt-charge { color: var(--accent-2); }
#cash-view .cash-charge-col { color: var(--accent-2); }
#cash-view .cash-pay-col { color: var(--ok); }
#cash-view th.cash-charge-col, #cash-view th.cash-pay-col { color: var(--muted); }
#cash-view .cash-flow-table { min-width: 620px; }
#cash-view .cash-flow-table thead th { padding: 6px 10px; font-size: 10.5px; }
#cash-view .cash-flow-table tbody td { padding: 6px 10px; font-size: 13px; border-bottom: 1px solid rgba(45, 64, 57, 0.4); }
#cash-view .cash-flow-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
#cash-view .cash-flow-table tbody tr:hover { background: rgba(83, 199, 173, 0.07); }
#cash-view .cash-flow-table .cash-desc-main { font-size: 13px; font-weight: 600; line-height: 1.25; }
#cash-view .cash-flow-table .cash-desc-sub { font-size: 11px; margin-top: 0; color: var(--muted); }
#cash-view .cash-flow-table .cash-col-date { white-space: nowrap; color: var(--muted); }
#cash-view .cash-flow-table .cash-col-inv { color: var(--muted); font-size: 12px; }
#cash-view .cash-flow-method { color: var(--muted); font-size: 12px; }
#cash-view .cash-charge-col, #cash-view .cash-pay-col { font-weight: 650; }
#cash-view .cash-flow-kpis { gap: 10px; }
#cash-view .cash-kpi { padding: 11px 14px; }
#cash-view .cash-kpi strong { font-size: 18px; }
#cash-view .cash-flow { gap: 14px; }

/* Kasa - promet: Excel-stil (guste linije, jedan red po stavci) */
#cash-view .cash-flow-table { border: 1px solid var(--line); width: 100%; min-width: 560px; }
#cash-view .cash-flow-table thead th {
  padding: 5px 8px;
  font-size: 10px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#cash-view .cash-flow-table thead th:last-child { border-right: 0; }
#cash-view .cash-flow-table tbody td {
  padding: 4px 8px;
  font-size: 12.5px;
  line-height: 1.3;
  border-bottom: 1px solid rgba(45, 64, 57, 0.55);
  border-right: 1px solid rgba(45, 64, 57, 0.4);
  vertical-align: middle;
}
#cash-view .cash-flow-table tbody td:last-child { border-right: 0; }
#cash-view .cash-flow-table tbody tr { cursor: pointer; }
#cash-view .cash-flow-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
#cash-view .cash-flow-table tbody tr:hover { background: rgba(83, 199, 173, 0.08); }
#cash-view .cash-flow-table .cash-col-date { white-space: nowrap; color: var(--muted); font-size: 12px; width: 96px; }
#cash-view .cash-flow-table .cash-fd { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cash-view .cash-flow-table .cash-fd-main { font-weight: 600; }
#cash-view .cash-flow-table .cash-fd-sub { color: var(--muted); font-size: 11.5px; }
#cash-view .cash-flow-table .cash-col-inv { color: var(--muted); font-size: 12px; white-space: nowrap; width: 108px; }
#cash-view .cash-flow-table .cash-flow-method { color: var(--muted); font-size: 12px; width: 84px; }
#cash-view .cash-flow-table .cash-charge-col, #cash-view .cash-flow-table .cash-pay-col { white-space: nowrap; width: 130px; font-weight: 650; }

/* Kasa - promet: profesionalni grid (Sage stil) */
#cash-view .cash-flow .cash-table-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: visible; }
#cash-view .cash-flow-table { border: 0; border-collapse: collapse; width: 100%; min-width: 560px; }
#cash-view .cash-flow-table thead th {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
#cash-view .cash-flow-table thead th:last-child { border-right: 0; }
#cash-view .cash-flow-table tbody td {
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.3;
  border-bottom: 1px solid rgba(45, 64, 57, 0.5);
  border-right: 1px solid rgba(45, 64, 57, 0.35);
}
#cash-view .cash-flow-table tbody td:last-child { border-right: 0; }
#cash-view .cash-flow-table tbody tr:last-child td { border-bottom: 0; }
#cash-view .cash-flow-table tbody tr { cursor: pointer; }
#cash-view .cash-flow-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
#cash-view .cash-flow-table tbody tr:hover { background: rgba(83, 199, 173, 0.09); }
#cash-view .cash-flow-table tfoot .cash-flow-total td {
  background: var(--surface-2);
  border-top: 2px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12.5px;
}
#cash-view .cash-flow-table tfoot .cash-flow-total td:first-child { text-align: right; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
#cash-view .cash-flow-table tfoot .cash-flow-total td:last-child { border-right: 0; }

/* Kasa - promet: razdvojene kolone Osnov / Klijent */
#cash-view .cash-flow-table .cash-fd { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
#cash-view .cash-flow-table .cash-fc { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cash-view .cash-flow-table .cash-fc-main { font-weight: 600; }
#cash-view .cash-flow-table .cash-fc-sub { color: var(--muted); font-size: 11.5px; }

/* Kasa - promet: valutni tabovi + grupisanje po valuti */
#cash-view .cash-cur-tabs {
  display: inline-flex;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
#cash-view .cash-cur-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#cash-view .cash-cur-tab.active { background: var(--accent); color: #06120e; }
#cash-view .cash-flow-table tbody tr.cash-flow-group td {
  background: var(--surface-3);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 7px 10px;
  cursor: default;
  border-right: 0;
}
#cash-view .cash-flow-table tbody tr.cash-flow-subtotal td {
  background: var(--surface-2);
  font-weight: 700;
  border-top: 1px solid var(--line);
  cursor: default;
}
#cash-view .cash-flow-table tbody tr.cash-flow-subtotal td:first-child {
  text-align: right;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
#cash-view .cash-flow-table tbody tr.cash-flow-group:hover td,
#cash-view .cash-flow-table tbody tr.cash-flow-subtotal:hover td { filter: none; }

/* Kasa konzola - pojednostavljena + grid stil (uskladjeno sa prometom) */
#cash-view .cash-grid { border-collapse: collapse; border: 1px solid var(--line); }
#cash-view .cash-grid thead th {
  background: var(--surface-2);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
#cash-view .cash-grid thead th:last-child { border-right: 0; }
#cash-view .cash-grid tbody td {
  padding: 7px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(45, 64, 57, 0.5);
  border-right: 1px solid rgba(45, 64, 57, 0.35);
}
#cash-view .cash-grid tbody td:last-child { border-right: 0; }
#cash-view .cash-grid tbody tr:hover { background: rgba(83, 199, 173, 0.06); }
#cash-view .cash-grid tfoot td { background: var(--surface-2); border-top: 2px solid var(--line); border-right: 1px solid var(--line); }
#cash-view .cash-grid tfoot td:last-child { border-right: 0; }
#cash-view .cash-grid .cash-desc-sub { margin-top: 1px; }
#cash-view .cash-pay-readonly {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right;
  color: var(--muted);
  font-weight: 650;
  padding: 0;
  width: 100%;
  pointer-events: none;
}
#cash-view .cash-row-active .cash-pay-readonly { color: var(--accent); }

/* Kasa konzola - izvod klijenta (jednostavna verzija) */
#cash-view .cash-console-simple { gap: 16px; }
#cash-view .cash-console-tabs { align-self: flex-start; }
#cash-view .cash-simple-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
#cash-view .cash-simple-controls .cash-field-amount input { width: 220px; font-size: 17px; font-weight: 650; }
#cash-view .cash-simple-controls .cash-field input {
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
#cash-view .cash-simple-controls .cash-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(83, 199, 173, 0.18); }
#cash-view .cash-empty-cell { text-align: center; color: var(--muted); padding: 18px; }
#cash-view .cash-flow-table .cash-fd .cash-desc-btn {
  display: inline;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
#cash-view .cash-flow-table .cash-fd .cash-desc-btn:hover { color: var(--accent); text-decoration: underline; }
#cash-view .cash-console-foot .cash-foot-info { font-size: 14px; }

/* Kasa konzola - mali izbor valute uz iznos + filter tabele */
#cash-view .cash-simple-controls .cash-field-amount { min-width: 280px; }
#cash-view .cash-amount-line { display: flex; align-items: stretch; gap: 8px; }

/* Dugme "Evidentiraj uplatu" vezano uz polje "Iznos uplate" */
#cash-view .cash-amount-with-action { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; }
#cash-view .cash-amount-stack { display: flex; flex-direction: column; gap: 7px; }
#cash-view .cash-amount-row { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; }
#cash-view .cash-amount-with-action .cash-amount-input { display: flex; flex-direction: column; gap: 6px; }
#cash-view .cash-amount-with-action .cash-record-inline { min-height: 44px; white-space: nowrap; }
#cash-view .cash-record-field .cash-record-inline { min-height: 44px; white-space: nowrap; }

/* Poravnaj sva polja unosa uplate u jednu liniju - ista visina kontrola (iznos/datum/nacin). */
#cash-view .cash-simple-controls .cash-field input {
  min-height: 44px;
  box-sizing: border-box;
}
#cash-view .cash-method-segment {
  min-height: 44px;
  box-sizing: border-box;
  align-items: stretch;
}
#cash-view .cash-method-segment .cash-method-opt {
  display: flex;
  align-items: center;
}
#cash-view .cash-foot-info-inline { font-size: 13.5px; padding-left: 2px; }
/* Item 7: osnov uplate + predmet (plavi pill) u JEDNOM redu, pune sirine, fiksne
   visine - da se kartica ne resizuje kad se izabere stavka ("Plati"). */
#cash-view .cash-pay-basis { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-height: 22px; margin-top: 14px; overflow: hidden; }
#cash-view .cash-pay-basis-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cash-view .cash-pay-basis .internal-number-badge { flex: none; }
/* Item 12: teoretska vrednost gratis usluge - prigušeno i precrtano da se jasno
   vidi da NE ulazi u zbir Dugovanja. */
.cash-gratis-amount { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
#cash-view .cash-amount-line #cash-master-amount { flex: 1; width: auto; min-width: 120px; }
#cash-view .cash-pay-cur { padding: 2px; align-items: center; }
#cash-view .cash-pay-cur .cash-cur-tab { padding: 6px 11px; font-size: 12px; }
#cash-view .cash-statement-tabs { align-self: flex-start; }

/* Kasa konzola - pretplata (avans) */
#cash-view .cash-credit { color: var(--accent); font-weight: 700; }

/* Kasa konzola - pojedinacna uplata stavke + pretplata boje */
#cash-view .cash-balance-debt { color: var(--accent-2); }
#cash-view .cash-pay-item-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #06120e;
  border-radius: 8px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
#cash-view .cash-pay-item-btn:hover { background: #6bd3ba; border-color: #6bd3ba; color: #06120e; box-shadow: 0 2px 8px rgba(83, 199, 173, 0.35); }
#cash-view .cash-flow-table tbody tr.cash-row-selected { background: rgba(83, 199, 173, 0.12) !important; }
#cash-view .cash-flow-table tbody tr.cash-row-selected td { border-color: rgba(83, 199, 173, 0.4); }
#cash-view .cash-pay-target {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(83, 199, 173, 0.1);
  border: 1px solid rgba(83, 199, 173, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
}
#cash-view .cash-pay-target strong { color: var(--ink); }
#cash-view .cash-target-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}
#cash-view .cash-target-clear:hover { color: var(--ink); }

/* Kasa konzola - obavezan izbor stavke + filter desno */
#cash-view .cash-statement-filter-bar { display: flex; justify-content: flex-end; margin-top: 4px; }
#cash-view .cash-pay-hint {
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 9px 14px;
}
#cash-view .cash-pay-hint strong { color: var(--accent); }
#cash-view #cash-master-amount:disabled { opacity: 0.5; cursor: not-allowed; }

/* Kasa - "zatresi" stavku pri dolasku sa prometa */
@keyframes cash-attention {
  0% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
/* Hover fade: ulaz se lagano pojavljuje (0.7s), a izlaz je trenutan, da pri
   skrolu stari red ne ostane osvetljen zajedno sa novim. Fade efekat (pojava)
   ostaje isti. */
#cash-view .cash-flow-row td { transition: box-shadow 0.7s ease, background-color 0s; }
#cash-view .cash-flow-row:hover td { transition: box-shadow 0.7s ease, background-color 0.7s ease; }
#cash-view .cash-flow-row.cash-attention td { animation: cash-attention 1.6s ease; box-shadow: inset 0 2px 0 rgba(83,199,173,0.85), inset 0 -2px 0 rgba(83,199,173,0.85); background: rgba(83,199,173,0.06); }

/* Kasa promet - tint redova + sortabilna zaglavlja + toolbar */
#cash-view .cash-flow-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
#cash-view .cash-flow-toolbar > .cash-cur-tabs { grid-column: 1; justify-self: start; }
#cash-view .cash-flow-toolbar > .cash-filter-group { grid-column: 2; justify-self: center; }
#cash-view .cash-flow-toolbar > .cash-month-inline { grid-column: 3; justify-self: end; margin-left: 0; }
#cash-view .cash-statement-toolbar > .cash-statement-tabs { grid-column: 1; justify-self: start; }
#cash-view .cash-statement-toolbar > .cash-type-tabs { grid-column: 2; justify-self: center; }
#cash-view .cash-type-tabs .cash-cur-tab { font-size: 12px; padding: 6px 12px; }
#cash-view .cash-flow-table thead th.cash-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
#cash-view .cash-flow-table thead th.cash-sortable:hover { color: var(--accent); }
#cash-view .cash-flow-table thead th.cash-sort-active { color: var(--accent); }
#cash-view .cash-flow-table tbody tr.cash-flow-is-charge td { background: rgba(255, 132, 111, 0.07); }
#cash-view .cash-flow-table tbody tr.cash-flow-is-pay td { background: rgba(99, 215, 139, 0.08); }
#cash-view .cash-flow-table tbody tr.cash-flow-is-charge:hover td { background: rgba(255, 132, 111, 0.16); }
#cash-view .cash-flow-table tbody tr.cash-flow-is-pay:hover td { background: rgba(99, 215, 139, 0.16); }
#cash-view .cash-flow-table tbody tr.cash-row-selected td { background: rgba(83, 199, 173, 0.18) !important; }

/* Hover linkovanje: dug i njegova uplata dele isti data-ledger-id -> zajedno se osvetle. */
.cash-flow-table tbody tr.cash-flow-row.cash-flow-linked td {
  background: rgba(83, 199, 173, 0.20) !important;
  box-shadow: inset 0 0 0 9999px rgba(83, 199, 173, 0.05);
}
.cash-flow-table tbody tr.cash-flow-row.cash-flow-linked td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Kasa - neutralan red "Ukupno"/medjuzbir (ne zeleno/crveno) */
#cash-view .cash-flow-table tfoot .cash-flow-total td.cash-charge-col,
#cash-view .cash-flow-table tfoot .cash-flow-total td.cash-pay-col,
#cash-view .cash-flow-table tbody tr.cash-flow-subtotal td.cash-charge-col,
#cash-view .cash-flow-table tbody tr.cash-flow-subtotal td.cash-pay-col { color: var(--ink) !important; }
/* Konzola klijenta: dve grupe filtera (valuta + status) razmaknute po sirini,
   kao raspored na glavnoj strani kase - da ne deluju zbijeno. */
#cash-view .cash-statement-toolbar {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Predmeti timeline - uniformnije kartice i badge datuma */
.timeline-time {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 116px;
  min-width: 116px;
  max-width: 116px;
  min-height: 48px;
  border-radius: 12px;
  text-align: center;
}
.case-flow-timeline .timeline-card { min-height: 66px; }
.timeline-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.timeline-card-main { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.timeline-card-side { flex: 0 0 auto; }
.case-flow-timeline .court-field { min-width: 98px; padding: 4px 10px; gap: 1px; }
.case-flow-timeline .court-field-value { font-size: 12.5px; }
.case-flow-timeline .court-field-label { font-size: 10px; }
.case-flow-timeline .court-badge-row { gap: 8px; margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Kasa konzola - traka (sazetak + dugmad) u redu sa kontrolama, desno */
#cash-view .cash-controls-side {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}
#cash-view .cash-controls-side .cash-foot-info { font-size: 13.5px; }
#cash-view .cash-controls-side .cash-foot-actions { display: flex; gap: 10px; }
@media (max-width: 820px) {
  #cash-view .cash-controls-side { margin-left: 0; width: 100%; align-items: stretch; }
  #cash-view .cash-controls-side .cash-foot-actions { justify-content: flex-end; }
}

/* Kasa - spreci horizontalni scrollbar dok traje "zatresi" animacija */
#cash-view .cash-table-wrap { overflow-x: clip; }
#cash-view .cash-flow .cash-table-wrap { overflow-x: clip; }

/* Predmeti timeline - objedinjeni status badge-ovi (Primljeno / Rok / Naplata) */
.case-flow-timeline .flow-badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.case-flow-timeline .flow-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 92px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.case-flow-timeline .flow-badge-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #8aa39a; }
.case-flow-timeline .flow-badge-value { font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* Primljeno - neutralno plavo */
.case-flow-timeline .flow-badge-primljeno { border-color: rgba(120, 160, 200, 0.4); background: rgba(90, 130, 170, 0.14); }
.case-flow-timeline .flow-badge-primljeno .flow-badge-label { color: #9fbfe0; }
.case-flow-timeline .flow-badge-primljeno.is-empty { border-color: var(--line); background: var(--surface-3); }
.case-flow-timeline .flow-badge-primljeno.is-empty .flow-badge-label,
.case-flow-timeline .flow-badge-primljeno.is-empty .flow-badge-value { color: #8aa39a; font-weight: 400; }
/* Rok - amber, prekoracen crveno */
.case-flow-timeline .flow-badge-rok { border-color: rgba(240, 184, 79, 0.4); background: rgba(240, 184, 79, 0.12); }
.case-flow-timeline .flow-badge-rok .flow-badge-label { color: #d9b66a; }
.case-flow-timeline .flow-badge-rok.is-overdue { border-color: rgba(255, 132, 111, 0.5); background: rgba(255, 132, 111, 0.14); }
.case-flow-timeline .flow-badge-rok.is-overdue .flow-badge-label { color: #ffb2a3; }
/* Naplata - placeno zeleno, nije placeno crveno */
.case-flow-timeline .flow-badge-paid { border-color: rgba(99, 215, 139, 0.45); background: rgba(99, 215, 139, 0.14); }
.case-flow-timeline .flow-badge-paid .flow-badge-label { color: #8fe3ad; }
.case-flow-timeline .flow-badge-paid .flow-badge-value { color: #b7f0cd; }
.case-flow-timeline .flow-badge-due { border-color: rgba(255, 132, 111, 0.5); background: rgba(255, 132, 111, 0.14); }
.case-flow-timeline .flow-badge-due .flow-badge-label { color: #ffb2a3; }
.case-flow-timeline .flow-badge-due .flow-badge-value { color: #ffc9bd; }

/* Predmeti - Naplata badge kao dugme (klik -> kasa) */
.case-flow-timeline button.flow-badge { cursor: pointer; text-align: left; font: inherit; }
.case-flow-timeline button.flow-badge:hover { filter: brightness(1.18); }
.case-flow-timeline button.flow-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===== Ispravke 2026-07-09 ============================================== */

/* #1 Zavrsen zadatak/rok u kalendaru -> zeleni kvadrat (kao u toku predmeta) */
.month-event.done { --tone: #63d78b; --tone-bg: rgba(82, 180, 111, 0.16); color: #d0efdb; }
.day-detail-item.done { --tone: #63d78b; }

/* #4 Filter kase: dugme za brisanje se krije kad je polje prazno (placeholder vidljiv) */
.cash-table-filter-input:placeholder-shown ~ .cash-table-filter-clear { display: none; }

/* #5 Logo gore-levo: prikazati u celosti, bez isecanja */
.brand-mark { overflow: visible; }
.brand-logo { object-fit: contain; object-position: center; padding: 5px; }

/* Mini shield sa kvacicom za zavrsene stavke u kalendaru (kao u toku predmeta) */
.cal-done-check {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  color: #c7f9d4;
  background: rgba(83, 199, 116, 0.22);
  border: 1px solid rgba(117, 236, 154, 0.60);
  clip-path: polygon(50% 0, 88% 14%, 88% 58%, 50% 100%, 12% 58%, 12% 14%);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  flex: 0 0 auto;
}
.day-detail-heading .cal-done-check { margin-right: 0; margin-left: 6px; }

/* ===== Imenik / Kontakti (korak 2) ===== */
/* Oznaka tipa kontakta unutar kartice i rezultata pretrage */
.contact-type-badge{display:flex;align-items:center;gap:5px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.contact-type-badge .contact-role-emoji{font-size:12px;line-height:1}
/* Wizard: mreza izbora tipa kontakta (2 kolone) */
.contact-type-grid{grid-template-columns:1fr 1fr}
.contact-type-grid .cash-choice-btn strong{display:block}

/* ===== Korak 3: tab "Kontakti" u Podaci predmeta + povezivanje ===== */
.case-contacts-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.case-contacts-head h3{margin:0}
.case-contacts-group{margin-bottom:10px;border:1px solid var(--line);border-left:3px solid color-mix(in srgb, var(--accent) 55%, var(--line));border-radius:12px;background:var(--surface);padding:8px 14px 6px}
.case-contacts-role{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:2px;padding-bottom:6px}
.case-contact-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:6px;background:transparent;padding:8px 8px;margin:0 -8px;transition:background-color .12s ease}
.case-contact-row:hover,.case-contact-row:focus-within{background:rgba(83,199,173,0.08)}
.case-contact-row:hover .case-contact-info strong,.case-contact-row:focus-within .case-contact-info strong{color:var(--accent)}
.case-contact-row + .case-contact-row{border-top:1px solid var(--line)}
.contact-role-emoji{font-size:14px;line-height:1}
.client-detail-title{display:inline-flex;align-items:center;gap:8px}
.client-detail-title .contact-role-emoji{font-size:0.82em;line-height:1;position:relative;top:0.02em}
.case-contact-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.case-contact-info strong{font-size:14px}
.case-contact-info small{color:var(--muted);font-size:12.5px}
.case-contact-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.role-select{border:1px solid var(--line);border-radius:8px;min-height:32px;padding:0 8px;background:#0e1512;color:var(--ink);font-size:12.5px}
.case-contact-remove{color:#ffb3a5}
.contact-link-list{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.contact-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:10px 12px}

/* Filter toka na predmetu: zaseban, vertikalno centriran u zaglavlju */
.case-flow-filter-center{align-self:center}
.detail-header > .case-actions{align-self:center}

/* Wizard: dugme "Nazad" ide u donji levi ugao modala */
.modal-actions button[data-action="wizard-back"]{margin-right:auto}
.modal-actions button[data-action="cash-choice-back"]{margin-right:auto}

/* Kasa: zaglavlje kartice unosa (naslov levo, "Uplati avans" gore-desno) */
.cash-entry-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cash-entry-header .cash-entry-title{margin:0}
.cash-advance-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;
  border-radius:8px;border:1px solid rgba(122,211,194,0.55);background:var(--surface-2);color:var(--ink);
  font-weight:700;font-size:14px;cursor:pointer;transition:background 120ms ease,border-color 120ms ease,color 120ms ease}
.cash-advance-btn:hover{background:var(--surface-3);border-color:var(--accent);color:#fff}

/* Tok predmeta: sakrij vertikalnu liniju kad nema stavki (prazan filter) */
.case-flow-timeline:not(:has(.timeline-item))::before{display:none}

/* Kasa: nacin placanja ispod uplacenog iznosa */
.cash-pay-method{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:2px}

/* #2 Kasa: polje "Iznos uplate" fiksne sirine da se dugmad ne pomeraju sa velikim brojem */
#cash-view .cash-simple-controls .cash-field-amount{flex:0 0 280px;width:280px;min-width:280px;max-width:280px}
#cash-view .cash-simple-controls .cash-field-amount input,
#cash-view .cash-amount-row #cash-master-amount{width:100%;max-width:100%;box-sizing:border-box}
#cash-view .cash-foot-info{max-width:100%;overflow-wrap:anywhere}

/* #3 Nacin placanja kao mali pill u koloni Status (jedan red, cuva simetriju) */
td.cash-col-status{white-space:nowrap}
.cash-status-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.cash-col-predmet{color:var(--muted);white-space:nowrap}
.cash-method-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:600;vertical-align:middle}

.month-nav.nav-invisible {
  visibility: hidden;
}


/* Custom tooltip - objasnjenja radnji za nove korisnike. */
.app-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.app-tooltip.hidden { display: none; }

/* Kasa: filter/valuta toolbar se lepi ispod gornje trake pri skrolu (kao zaglavlje Predmeta). */
#cash-view .cash-flow > .cash-flow-toolbar {
  position: sticky;
  top: var(--app-header-h, 74px);
  z-index: 40;
  background: var(--bg);
  padding-top: 14px;
  padding-bottom: 10px;
}

/* Kasa (glavni prikaz): zaglavlje kolona pinovano ispod toolbara. */
#cash-view .cash-flow .cash-ledger-table {
  border-collapse: separate;
  border-spacing: 0;
}
#cash-view .cash-flow .cash-ledger-table thead th {
  position: sticky;
  top: calc(var(--app-header-h, 74px) + var(--cash-toolbar-h, 72px));
  z-index: 30;
  background: var(--surface);
}

/* =====================================================================
   LIGHT THEME (Varijanta A - cist beli / profesionalan)
   Aktivira se sa <html data-theme="light">. Dark ostaje podrazumevan.
   Override-only pristup: ne dira postojeca dark pravila.
   ===================================================================== */
html[data-theme="light"] {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f2f5f9;
  --surface-3: #e6ebf1;
  --ink: #14202e;
  --muted: #5c6a7a;
  --line: #d3dae3;
  --accent: #10355d;
  --accent-2: #d85a44;
  --warn: #b7791f;
  --ok: #2f9e5b;
  --shadow: 0 10px 30px rgba(15, 40, 33, 0.10);
  color-scheme: light;
}

/* Tekst na accent-fill povrsinama: u dark temi je taman (na svetlom teal-u),
   u light temi mora biti beo (na tamnom teal-u). */
html[data-theme="light"] .primary,
html[data-theme="light"] .notif-filter-tab.active,
html[data-theme="light"] .notif-filter-tab.active .notif-filter-count,
html[data-theme="light"] .agenda-filter-tab.active,
html[data-theme="light"] .segment.active,
html[data-theme="light"] #cash-view .cash-check.on,
html[data-theme="light"] #cash-view .cash-cur-tab.active,
html[data-theme="light"] #cash-view .cash-pay-item-btn,
html[data-theme="light"] #cash-view .cash-method-segment .cash-method-opt.active {
  color: #ffffff;
}
html[data-theme="light"] .notif-filter-tab.active .notif-filter-count {
  background: rgba(255, 255, 255, 0.25);
}
html[data-theme="light"] #cash-view .cash-pay-item-btn:hover {
  background: #0c2a4a;
  border-color: #0c2a4a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 53, 93, 0.28);
}

/* Nav aktivna stavka: dark koristi hardkodovan #25493f; u light temi accent. */
html[data-theme="light"] .nav-item.active {
  background: var(--accent);
  color: #ffffff;
}

/* Naslov Kase je hardkodovano beo -> na svetloj povrsini bi bio nevidljiv. */
html[data-theme="light"] #cash-view .cash-console-title h2 {
  color: var(--ink);
}

/* Dugme avansa: hover je beo tekst na svetloj povrsini -> koristi accent. */
html[data-theme="light"] .cash-advance-btn:hover {
  color: var(--accent);
}

/* --- Theme toggle (sunce/mesec) u brand meniju --- */
.brand-menu-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand-menu-user-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
}
.brand-menu-user .theme-toggle-btn {
  width: 28px;
  min-width: 28px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  margin: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  transition: background-color 120ms ease, color 120ms ease;
}
.brand-menu-user .theme-toggle-btn:hover {
  background: transparent;
  color: var(--ink);
}
.brand-menu-user .theme-toggle-btn.active,
.brand-menu-user .theme-toggle-btn.active:hover {
  background: var(--accent);
  color: #ffffff;
}
html[data-theme="light"] .brand-menu-user .theme-toggle-btn.active {
  color: #ffffff;
}
.theme-toggle-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Login ekran u light temi: pozadina (brendirani splash) ostaje ista za sve
   teme; menja se samo kartica u sredini. Light kartica = svetla povrsina,
   ostale login boje dolaze iz light root var-ova. .primary koristi standardno
   light pravilo (navy ispuna, beli tekst). */
html[data-theme="light"] body:not(.is-authenticated) .login-card {
  background: rgba(255, 255, 255, 0.96);
}

/* =====================================================================
   LIGHT THEME - popravke hardkodovanih boja (citljivost na svetloj pozadini)
   Tekst dizajniran za tamnu temu (svetli pasteli) postaje taman ekvivalent
   iste nijanse; tamne hardkodovane pozadine postaju svetle povrsine.
   ===================================================================== */

/* --- Header: taman -> svetla povrsina --- */
html[data-theme="light"] .app-header {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(15, 40, 33, 0.06);
}
html[data-theme="light"] .nav-item { color: var(--ink); }
html[data-theme="light"] .nav-item:not(.active):hover { color: var(--ink); }

/* Light: klikabilni filter-tabovi/segmenti su kontrole -> tamniji (skoro crn)
   tekst umesto muted sive, radi citljivosti. Aktivni ostaju ispunjeni (beli
   tekst); obican sekundarni tekst i labele polja ostaju muted sivi. */
html[data-theme="light"] .agenda-filter-tab:not(.active),
html[data-theme="light"] .segment:not(.active),
html[data-theme="light"] .notif-filter-tab:not(.active),
html[data-theme="light"] .case-record-tab:not(.active) {
  color: var(--ink);
}

/* Light: Kasa kontrole (valutni tabovi RSD/EUR, filteri Sve/Neizmireno/...,
   segment nacina placanja) -> tamniji tekst umesto muted sive. Aktivni ostaju
   ispunjeni. Zaglavlja tabele i labele KPI kartica ostaju muted sivi. */
html[data-theme="light"] #cash-view .cash-cur-tab:not(.active),
html[data-theme="light"] #cash-view .cash-method-opt:not(.active) {
  color: var(--ink);
}

/* Light: iznosi u Kasi -> lepse, usaglasene nijanse vidljive na beloj pozadini.
   Iste boje za td-kolone (tabela DUGOVANJE/UPLACENO) i za cash-amt-* (KPI +
   SALDO). Zaglavlja (th) i "Ukupno"/medjuzbir redovi (!important) ostaju
   neutralni. */
html[data-theme="light"] #cash-view .cash-amt-in,
html[data-theme="light"] #cash-view tbody td.cash-pay-col { color: #16a34a; }
html[data-theme="light"] #cash-view .cash-amt-charge,
html[data-theme="light"] #cash-view tbody td.cash-charge-col { color: #d9534f; }
html[data-theme="light"] #cash-view .cash-amt-warn { color: #c8930a; }

/* Light: metod-badge (Racun/Gotovina/Avans) dobija ivicu kao status pilule. */
html[data-theme="light"] #cash-view .cash-method-tag {
  border: 1px solid #cbd5e1;
}

/* Light: status badge-vi u Kasi -> pune pastelne ispune + zasicen tekst
   (umesto blede rgba ispune), da budu jasno uocljivi na svetloj pozadini.
   Koristi postojecu paletu solidnih tagova. */
html[data-theme="light"] #cash-view .tag.tag-status-late { background: #fecaca; color: #991b1b; border: 1px solid #f5a5a5; }
html[data-theme="light"] #cash-view .tag.tag-status-progress { background: #fed7aa; color: #9a3412; border: 1px solid #f9bd82; }
html[data-theme="light"] #cash-view .tag.tag-status-done { background: #bbf7d0; color: #166534; border: 1px solid #8ce6ab; }
html[data-theme="light"] #cash-view .tag.tag-status-gratis { background: #ddd6fe; color: #5b21b6; border: 1px solid #c4b5fd; }
html[data-theme="light"] #cash-view .tag.tag-status-expense { background: #fde68a; color: #854d0e; border: 1px solid #f7d045; }
html[data-theme="light"] #cash-view .tag.tag-status-open { background: #bfdbfe; color: #1e40af; border: 1px solid #93c5fd; }
html[data-theme="light"] .global-search .search {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="light"] .global-search .search::placeholder { color: var(--muted); }

/* --- Tamne pozadine -> svetle povrsine --- */
html[data-theme="light"] .month-day.muted-month {
  background: var(--surface-2);
  color: var(--muted);
}
html[data-theme="light"] .document-viewer-stage { background: var(--surface-2); }
html[data-theme="light"] .role-select { background: var(--surface-2); color: var(--ink); }
html[data-theme="light"] .demo-mode-pill.active,
html[data-theme="light"] .step-number {
  background: rgba(16, 53, 93, 0.12);
  color: #10355d;
}
html[data-theme="light"] .internal-number-badge {
  background: rgba(31, 95, 168, 0.12) !important;
  color: #1f5fa8 !important;
  border-color: rgba(31, 95, 168, 0.35) !important;
}

/* --- Tekst: CORAL/crvena --- */
html[data-theme="light"] .danger,
html[data-theme="light"] .deadline-countdown-overdue,
html[data-theme="light"] .calendar-popover-countdown.deadline-countdown-overdue,
html[data-theme="light"] .attention-count.critical,
html[data-theme="light"] .notif-icon-expense,
html[data-theme="light"] .tag-priority-high,
html[data-theme="light"] .tag-type-deadline,
html[data-theme="light"] #cash-view .cash-tag-late,
html[data-theme="light"] .court-field-rok.is-overdue .court-field-value,
html[data-theme="light"] .case-flow-timeline .flow-badge-rok.is-overdue .flow-badge-label,
html[data-theme="light"] .case-flow-timeline .flow-badge-due .flow-badge-label,
html[data-theme="light"] .case-flow-timeline .flow-badge-due .flow-badge-value,
html[data-theme="light"] .case-contact-remove { color: #a3341c; }

/* --- Tekst: AMBER/zlatna --- */
html[data-theme="light"] .deadline-countdown-today,
html[data-theme="light"] .deadline-countdown-soon,
html[data-theme="light"] .calendar-popover-countdown.deadline-countdown-today,
html[data-theme="light"] .calendar-popover-countdown.deadline-countdown-soon,
html[data-theme="light"] .tag-priority-medium,
html[data-theme="light"] .tag-status-progress,
html[data-theme="light"] .tag-status-invoiced,
html[data-theme="light"] .tag-type-court,
html[data-theme="light"] .tag-type-note,
html[data-theme="light"] .notif-icon-billing,
html[data-theme="light"] .notif-icon-debt,
html[data-theme="light"] .court-field-rok .court-field-label,
html[data-theme="light"] .court-field-rok .court-field-value,
html[data-theme="light"] #cash-view .cash-tag-partial,
html[data-theme="light"] #cash-view .cash-flow-tag.cash-flow-charge,
html[data-theme="light"] .case-flow-timeline .flow-badge-rok .flow-badge-label { color: #8a5a0f; }

/* --- Tekst: TEAL --- */
html[data-theme="light"] .deadline-countdown-ok,
html[data-theme="light"] .calendar-popover-countdown.deadline-countdown-ok,
html[data-theme="light"] .flow-confirmed,
html[data-theme="light"] .tag-status-cash,
html[data-theme="light"] .cal-done-check,
html[data-theme="light"] .court-field-primljeno .court-field-label { color: #0f6a55; }

/* --- Tekst: GREEN (zavrseno/placeno) --- */
html[data-theme="light"] .tag-status-done,
html[data-theme="light"] .notif-icon-payment,
html[data-theme="light"] #cash-view .cash-flow-tag.cash-flow-pay,
html[data-theme="light"] .case-flow-timeline .flow-badge-paid .flow-badge-label,
html[data-theme="light"] .case-flow-timeline .flow-badge-paid .flow-badge-value,
html[data-theme="light"] .month-event.done { color: #1f7a44; }

/* --- Tekst: PURPLE (zadaci/nacrt) --- */
html[data-theme="light"] .agenda-group-later .agenda-group-label,
html[data-theme="light"] .tag-status-draft,
html[data-theme="light"] .tag-status-gratis,
html[data-theme="light"] .tag-type-task,
html[data-theme="light"] .month-day-pill.task,
html[data-theme="light"] .month-event.task { color: #5a3ab0; }

/* --- Tekst: BLUE (privatno/dostava/primljeno) --- */
html[data-theme="light"] .agenda-group-week .agenda-group-label,
html[data-theme="light"] .notif-icon-delivery,
html[data-theme="light"] .month-day-pill.private,
html[data-theme="light"] .month-event.private,
html[data-theme="light"] .tag-priority-low,
html[data-theme="light"] .tag-type-document,
html[data-theme="light"] .tag-type-private,
html[data-theme="light"] .case-flow-timeline .flow-badge-primljeno .flow-badge-label { color: #1f5fa8; }

/* --- Tekst: aktivnost (zeleno-siva) --- */
html[data-theme="light"] .month-day-pill.activity,
html[data-theme="light"] .month-event.activity { color: #2f5d4e; }

/* --- Tekst: neutralno -> ink/muted --- */
html[data-theme="light"] .tag { color: var(--ink); }
html[data-theme="light"] .court-field-label,
html[data-theme="light"] .court-field-primljeno.is-empty .court-field-value,
html[data-theme="light"] .case-flow-timeline .flow-badge-label,
html[data-theme="light"] .case-flow-timeline .flow-badge-primljeno.is-empty .flow-badge-value,
html[data-theme="light"] #cash-view .cash-tag-open,
html[data-theme="light"] #cash-view .cash-flow-tag.cash-flow-gratis { color: var(--muted); }

/* --- Tamne rgba liste -> svetle povrsine --- */
html[data-theme="light"] .recent-pin { background: var(--surface-2); }
html[data-theme="light"] .entity-picker-option { background: var(--surface); }

/* Propusteno: deadline event/pill u kalendaru (coral). */
html[data-theme="light"] .month-event.deadline,
html[data-theme="light"] .month-day-pill.deadline { color: #a3341c; }

/* "Done" stanje mora da pobedi nad deadline/task bojom (kao u dark temi). */
html[data-theme="light"] .month-event.done { color: #1f7a44; }

/* =====================================================================
   LIGHT THEME - UX: jaci i jasniji hover/focus (dark prelivi se gube na belom)
   ===================================================================== */

/* Malo definisanije ivice za bolju preglednost gustih ekrana. */
html[data-theme="light"] { --line: #d3dae3; }

/* Vidljiv focus outline (dark tema koristi svetli #9df0dd -> bled na belom). */
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] textarea:focus-visible { outline-color: var(--accent); }

/* Nav hover: dark tema stavlja tamnozelenu pozadinu -> u light accent tint. */
html[data-theme="light"] .nav-item:not(.active):hover {
  background: rgba(16, 53, 93, 0.10);
  color: var(--ink);
}
html[data-theme="light"] .brand-trigger:hover,
html[data-theme="light"] .brand-trigger[aria-expanded="true"] {
  background: #e6ebf1;
}

/* Neutralni hover-ovi (surface-2/3 -> jasnija siva stepenica na belom). */
html[data-theme="light"] .brand-menu-dropdown button:hover,
html[data-theme="light"] .global-result:hover,
html[data-theme="light"] .case-recent-card:hover,
html[data-theme="light"] .case-recent-card:focus-within,
html[data-theme="light"] .client-database-card:hover,
html[data-theme="light"] .client-cases-more:hover,
html[data-theme="light"] .client-detail-section .client-linked-case:hover,
html[data-theme="light"] .client-detail-section .client-linked-case:focus-visible,
html[data-theme="light"] .client-autocomplete-option:hover,
html[data-theme="light"] .client-autocomplete-option:focus-visible,
html[data-theme="light"] .cash-client-row:focus-visible,
html[data-theme="light"] .cash-client-card:focus-visible,
html[data-theme="light"] .cash-choice-btn:focus-visible,
html[data-theme="light"] .cash-filter-menu > summary:focus-visible,
html[data-theme="light"] .activity-file-remove:hover,
html[data-theme="light"] .activity-billing-fields > .toggle-row:hover,
html[data-theme="light"] .local-date-picker-button:hover,
html[data-theme="light"] .modal-close-button:hover,
html[data-theme="light"] .cash-advance-btn:hover {
  background: #e6ebf1;
}

/* Interaktivni (accent) hover-ovi: teal prelivi za dark -> vidljiv teal tint. */
html[data-theme="light"] .case-record-tab:hover,
html[data-theme="light"] .case-record-panel .task-row.task-row-clickable:hover,
html[data-theme="light"] .case-recent-open:hover,
html[data-theme="light"] .case-recent-open:focus-visible,
html[data-theme="light"] .recent-pin:hover,
html[data-theme="light"] .recent-pin:focus-visible,
html[data-theme="light"] .case-flow-timeline .flow-interactive .timeline-card:hover,
html[data-theme="light"] .case-flow-timeline .flow-interactive .timeline-card:focus-visible,
html[data-theme="light"] .flow-inline-action:hover,
html[data-theme="light"] .flow-inline-action:focus-visible,
html[data-theme="light"] button.client-chip-link:hover,
html[data-theme="light"] .sr-card:hover,
html[data-theme="light"] .sr-card:focus-visible,
html[data-theme="light"] .month-more:hover,
html[data-theme="light"] .day-detail-add:hover {
  background: rgba(16, 53, 93, 0.12);
}

/* Redovi tabela u Kasi: jedva vidljiv teal -> jasniji red na hover. */
html[data-theme="light"] #cash-view .cash-flow-table tbody tr:hover,
html[data-theme="light"] #cash-view .cash-flow-table tbody tr:hover td,
html[data-theme="light"] #cash-view .cash-grid tbody tr:hover,
html[data-theme="light"] #cash-view .cash-grid tbody tr:hover td {
  background: rgba(16, 53, 93, 0.16);
}

/* =====================================================================
   LIGHT THEME - teal ivice/glow-ovi -> navy (interaktivno) / zelena (uspeh)
   Ranije hardkodovani teal literali (nisu koristili var(--accent)).
   ===================================================================== */

/* Search inputi: default neutralna ivica, fokus navy glow. */
html[data-theme="light"] .global-search .search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 53, 93, 0.18);
}
html[data-theme="light"] .case-search-primary .search { border-color: var(--line); }

/* Pinovane kartice / pin: navy istaknuta ivica. */
html[data-theme="light"] .case-recent-card.is-pinned { box-shadow: inset 0 0 0 1px rgba(16, 53, 93, 0.55); }
html[data-theme="light"] .recent-pin.pinned { border-color: rgba(16, 53, 93, 0.55); }

/* Kartice/čipovi hover & fokus -> navy. */
html[data-theme="light"] .client-database-card:hover { border-color: rgba(16, 53, 93, 0.5); }
html[data-theme="light"] .client-database-card:focus-visible,
html[data-theme="light"] .sr-card:focus-visible { outline-color: var(--accent); }
html[data-theme="light"] .client-detail-section .client-linked-case { border-color: rgba(16, 53, 93, 0.35); }
html[data-theme="light"] .client-chip { border-color: rgba(16, 53, 93, 0.34); }
html[data-theme="light"] button.client-chip-link:hover { border-color: rgba(16, 53, 93, 0.6); }
html[data-theme="light"] .sr-card:focus-visible { border-color: rgba(16, 53, 93, 0.5); }
html[data-theme="light"] .timeline-time { border-color: rgba(16, 53, 93, 0.24); }
html[data-theme="light"] .next-action-card { border-color: rgba(16, 53, 93, 0.35); }
html[data-theme="light"] .brand-mark { border-color: var(--line); }
html[data-theme="light"] .upload-spinner { border-color: rgba(16, 53, 93, 0.25); }

/* Kalendar: klik-dan hover navy. */
html[data-theme="light"] .month-day-clickable:hover {
  border-color: rgba(16, 53, 93, 0.5);
  box-shadow: inset 0 0 0 1px rgba(16, 53, 93, 0.22);
}

/* Tok predmeta: fokus kartice navy. */
html[data-theme="light"] .case-flow-timeline .flow-interactive .timeline-card:focus-visible {
  border-color: rgba(16, 53, 93, 0.55);
  box-shadow: 0 0 0 3px rgba(16, 53, 93, 0.10);
}
html[data-theme="light"] .case-flow-timeline .flow-interactive:has(.timeline-card:focus-visible) .timeline-card {
  box-shadow: 0 0 0 5px rgba(16, 53, 93, 0.16);
}
html[data-theme="light"] .flow-linked-chip-btn:hover { box-shadow: 0 0 0 2px rgba(16, 53, 93, 0.24); }
html[data-theme="light"] .notif-unread-action { box-shadow: 0 0 0 4px rgba(16, 53, 93, 0.14); }

/* Kasa: fokus/selekcija/pažnja navy. */
html[data-theme="light"] #cash-view .cash-field input:focus { box-shadow: 0 0 0 3px rgba(16, 53, 93, 0.16); }
html[data-theme="light"] #cash-view .cash-flow-table tbody tr.cash-row-selected { background: rgba(16, 53, 93, 0.14) !important; }
html[data-theme="light"] #cash-view .cash-flow-table tbody tr.cash-row-selected td { background: rgba(16, 53, 93, 0.18) !important; border-color: rgba(16, 53, 93, 0.5); }
html[data-theme="light"] #cash-view .cash-pay-target { border-color: rgba(16, 53, 93, 0.35); }
html[data-theme="light"] #cash-view .cash-flow-row.cash-attention td {
  box-shadow: inset 0 2px 0 rgba(16, 53, 93, 0.7), inset 0 -2px 0 rgba(16, 53, 93, 0.7);
  background: rgba(16, 53, 93, 0.06);
}
html[data-theme="light"] .cash-flow-table tbody tr.cash-flow-row.cash-flow-linked td { background: rgba(16, 53, 93, 0.18) !important; box-shadow: inset 0 0 0 9999px rgba(16, 53, 93, 0.05); }
html[data-theme="light"] .cash-advance-btn { border-color: rgba(16, 53, 93, 0.4); }

/* Semantika USPEHA ostaje zelena (ok/potvrđeno/plaćeno/primljeno). */
html[data-theme="light"] .mvp-qa-card.ok,
html[data-theme="light"] .cash-summary-card.ok,
html[data-theme="light"] .delivery-summary-card.ok,
html[data-theme="light"] .backup-status-card.ok,
html[data-theme="light"] .court-field-primljeno { border-color: rgba(47, 158, 91, 0.42); }
html[data-theme="light"] .flow-confirmed,
html[data-theme="light"] .cal-done-check { border-color: rgba(47, 158, 91, 0.5); }
html[data-theme="light"] .flow-inline-action { border-color: rgba(47, 158, 91, 0.42); }

/* =====================================================================
   NAVY DARK (3. mod) - tamna plava tema. data-theme="navy".
   Bazira se na dark :root pravilima; menja povrsine u navy i akcenat
   (zeleno/teal) u plavo. Semantika uspeha ostaje zelena.
   ===================================================================== */
html[data-theme="navy"] {
  --bg: #0c1a2e;
  --surface: #122334;
  --surface-2: #1b2f45;
  --surface-3: #0e1d30;
  --ink: #eaf1f8;
  --muted: #93a6bd;
  --line: #2a3f57;
  --accent: #4a90d9;
  --accent-2: #ff846f;
  --warn: #f0b84f;
  --ok: #63d78b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
  color-scheme: dark;
}

/* Login ekran u navy temi: pozadina (brendirani splash) ostaje ista za sve
   teme; menja se samo kartica u sredini na navy nijansu. Ostale login boje
   (ivice, inputi, dugme) vec dolaze iz navy root var-ova. */
html[data-theme="navy"] body:not(.is-authenticated) .login-card {
  background: rgba(16, 29, 48, 0.94);
}

/* Hardkodovane zeleno-crne povrsine -> navy. */
html[data-theme="navy"] .app-header { background: #0a1728; }
html[data-theme="navy"] .nav-item { color: #ffffff; }
html[data-theme="navy"] .nav-item.active { background: #1b3a5b; color: #ffffff; }
html[data-theme="navy"] .nav-item:not(.active):hover { background: rgba(74, 144, 217, 0.16); color: var(--ink); }
html[data-theme="navy"] .global-search .search { background: #17293d; color: #eef4fb; border-color: rgba(150, 178, 210, 0.35); }
html[data-theme="navy"] .global-search .search::placeholder { color: #8fa2b8; }
html[data-theme="navy"] .month-day.muted-month { background: #101f33; color: var(--muted); }
html[data-theme="navy"] .document-viewer-stage { background: #08131f; }
html[data-theme="navy"] .role-select { background: #101f33; color: var(--ink); }
html[data-theme="navy"] .demo-mode-pill.active,
html[data-theme="navy"] .step-number { background: #17324f; color: #cfe4fb; }

/* Akcenat-fill hover (teal literal) -> plavo. */
html[data-theme="navy"] #cash-view .cash-pay-item-btn:hover {
  background: #3f80c4;
  border-color: #3f80c4;
  color: #06121f;
  box-shadow: 0 2px 8px rgba(74, 144, 217, 0.3);
}

/* Fokus outline (dark tema koristi #9df0dd) -> svetlo plavo. */
html[data-theme="navy"] button:focus-visible,
html[data-theme="navy"] a:focus-visible,
html[data-theme="navy"] select:focus-visible,
html[data-theme="navy"] input:focus-visible,
html[data-theme="navy"] textarea:focus-visible { outline-color: #7fb8ec; }
html[data-theme="navy"] .client-database-card:focus-visible,
html[data-theme="navy"] .sr-card:focus-visible { outline-color: #7fb8ec; }

/* Hover tintovi (teal) -> plavi. */
html[data-theme="navy"] .brand-menu-dropdown button:hover,
html[data-theme="navy"] .global-result:hover,
html[data-theme="navy"] .case-recent-card:hover,
html[data-theme="navy"] .case-recent-card:focus-within,
html[data-theme="navy"] .client-database-card:hover,
html[data-theme="navy"] .client-cases-more:hover,
html[data-theme="navy"] .client-detail-section .client-linked-case:hover,
html[data-theme="navy"] .client-autocomplete-option:hover,
html[data-theme="navy"] .cash-client-row:focus-visible,
html[data-theme="navy"] .activity-file-remove:hover,
html[data-theme="navy"] .local-date-picker-button:hover,
html[data-theme="navy"] .modal-close-button:hover,
html[data-theme="navy"] .case-record-tab:hover,
html[data-theme="navy"] .case-recent-open:hover,
html[data-theme="navy"] .recent-pin:hover,
html[data-theme="navy"] .month-more:hover,
html[data-theme="navy"] .day-detail-add:hover,
html[data-theme="navy"] .flow-inline-action:hover {
  background: rgba(74, 144, 217, 0.14);
}
html[data-theme="navy"] .case-recent-card:hover,
html[data-theme="navy"] .case-recent-card:focus-within {
  background: #17293d;
  box-shadow: inset 0 0 0 1px var(--accent);
}
html[data-theme="navy"] #cash-view .cash-flow-table tbody tr:hover,
html[data-theme="navy"] #cash-view .cash-flow-table tbody tr:hover td,
html[data-theme="navy"] #cash-view .cash-grid tbody tr:hover,
html[data-theme="navy"] #cash-view .cash-grid tbody tr:hover td {
  background: rgba(74, 144, 217, 0.18);
}

/* Ivice / glow-ovi (teal) -> plavo. */
html[data-theme="navy"] .global-search .search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.22);
}
html[data-theme="navy"] .case-search-primary .search { border-color: var(--line); }
html[data-theme="navy"] .case-recent-card.is-pinned { box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.6); }
html[data-theme="navy"] .recent-pin.pinned { border-color: rgba(74, 144, 217, 0.6); }
html[data-theme="navy"] .client-database-card:hover { border-color: rgba(74, 144, 217, 0.55); }
html[data-theme="navy"] .client-detail-section .client-linked-case { border-color: rgba(74, 144, 217, 0.35); }
html[data-theme="navy"] .client-chip { border-color: rgba(74, 144, 217, 0.34); }
html[data-theme="navy"] button.client-chip-link:hover { border-color: rgba(74, 144, 217, 0.6); }
html[data-theme="navy"] .sr-card:focus-visible { border-color: rgba(74, 144, 217, 0.5); }
html[data-theme="navy"] .timeline-time { border-color: rgba(74, 144, 217, 0.26); }
html[data-theme="navy"] .next-action-card { border-color: rgba(74, 144, 217, 0.35); }
html[data-theme="navy"] .upload-spinner { border-color: rgba(74, 144, 217, 0.28); }
html[data-theme="navy"] .month-day-clickable:hover {
  border-color: rgba(74, 144, 217, 0.5);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}
html[data-theme="navy"] .case-flow-timeline .flow-interactive .timeline-card:focus-visible {
  border-color: rgba(74, 144, 217, 0.55);
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}
html[data-theme="navy"] .case-flow-timeline .flow-interactive:has(.timeline-card:focus-visible) .timeline-card {
  box-shadow: 0 0 0 5px rgba(74, 144, 217, 0.18);
}
html[data-theme="navy"] .flow-linked-chip-btn:hover { box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.28); }
html[data-theme="navy"] .notif-unread-action { box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.16); }
html[data-theme="navy"] #cash-view .cash-field input:focus { box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2); }
html[data-theme="navy"] #cash-view .cash-flow-table tbody tr.cash-row-selected { background: rgba(74, 144, 217, 0.16) !important; }
html[data-theme="navy"] #cash-view .cash-flow-table tbody tr.cash-row-selected td { background: rgba(74, 144, 217, 0.20) !important; border-color: rgba(74, 144, 217, 0.5); }
html[data-theme="navy"] #cash-view .cash-pay-target { border-color: rgba(74, 144, 217, 0.35); }
html[data-theme="navy"] #cash-view .cash-flow-row.cash-attention td {
  box-shadow: inset 0 2px 0 rgba(74, 144, 217, 0.8), inset 0 -2px 0 rgba(74, 144, 217, 0.8);
  background: rgba(74, 144, 217, 0.07);
}
html[data-theme="navy"] .cash-flow-table tbody tr.cash-flow-row.cash-flow-linked td { background: rgba(74, 144, 217, 0.20) !important; box-shadow: inset 0 0 0 9999px rgba(74, 144, 217, 0.06); }
html[data-theme="navy"] .cash-advance-btn { border-color: rgba(74, 144, 217, 0.42); }

/* Semantika USPEHA ostaje zelena. */
html[data-theme="navy"] .mvp-qa-card.ok,
html[data-theme="navy"] .cash-summary-card.ok,
html[data-theme="navy"] .delivery-summary-card.ok,
html[data-theme="navy"] .backup-status-card.ok,
html[data-theme="navy"] .court-field-primljeno { border-color: rgba(99, 215, 139, 0.42); }

/* Navy: aktivni ispunjeni tabovi -> dublja plava + beli tekst (jak kontrast).
   Svetli akcenat ostaje za indikatore (pinovi, ivice, tacke). */
html[data-theme="navy"] .primary,
html[data-theme="navy"] .agenda-filter-tab.active,
html[data-theme="navy"] .notif-filter-tab.active,
html[data-theme="navy"] #cash-view .cash-check.on,
html[data-theme="navy"] #cash-view .cash-cur-tab.active,
html[data-theme="navy"] #cash-view .cash-pay-item-btn,
html[data-theme="navy"] #cash-view .cash-method-segment .cash-method-opt.active {
  background: #1c3f6b;
  border-color: #1c3f6b;
  color: #ffffff;
}
html[data-theme="navy"] .notif-filter-tab.active .notif-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
/* Segment (Agenda/Kalendar) - ispunjen dublje plavom + beli tekst, isto kao
   ostali aktivni filter-tabovi. */
html[data-theme="navy"] .segment.active {
  background: #1c3f6b;
  color: #ffffff;
}

/* Navy: neaktivni tekst filtera/tabova/segmenata -> skoro belo (bolja citljivost).
   Aktivni ostaju beli na plavoj ispuni; ispuna ih razlikuje. */
html[data-theme="navy"] .agenda-filter-tab,
html[data-theme="navy"] .segment,
html[data-theme="navy"] .notif-filter-tab,
html[data-theme="navy"] .case-record-tab,
html[data-theme="navy"] #cash-view .cash-cur-tab,
html[data-theme="navy"] #cash-view .cash-method-opt,
html[data-theme="navy"] #cash-view .cash-choice-btn {
  color: #d6e1f0;
}

/* =====================================================================
   ONBOARDING - jednokratni pozdrav + kontekstualni saveti (prva poseta).
   Boje iz tema (var-ovi) da prati light/dark/navy. ===================== */
.onboarding-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
}
.onboarding-welcome-overlay.hidden { display: none; }
.onboarding-welcome-card {
  width: min(480px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: grid;
  gap: 12px;
}
.onboarding-welcome-card h2 { margin: 0; font-size: 20px; color: var(--ink); }
.onboarding-welcome-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.onboarding-welcome-note { font-size: 13px; }
.onboarding-welcome-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.onboarding-tip {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 400;
  width: min(440px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
  animation: onboarding-tip-in 200ms ease;
}
.onboarding-tip.hidden { display: none; }
.onboarding-tip-body strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
.onboarding-tip-body p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.onboarding-tip-actions { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes onboarding-tip-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Granularne dozvole: čekboksovi u wizardu/editoru naloga i sakrivanje Kase */
.permissions-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin: 10px 0 4px; }
.permissions-group-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; margin: 0 0 6px; }
.permission-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.permission-row input { width: 15px; height: 15px; flex: 0 0 auto; }
body.no-cash-view [data-view="cash"] { display: none !important; }

/* Administracija po dozvolama: nav vidljiv uz bilo koju admin.* dozvolu, sekcije svaka po svojoj */
body:not(.can-admin-area) .admin-area-link { display: none !important; }
body:not(.perm-accounts) .needs-accounts { display: none !important; }
body:not(.perm-backups) .needs-backups { display: none !important; }
body:not(.perm-audit) .needs-audit { display: none !important; }
body:not(.perm-doc-delete) .needs-doc-delete { display: none !important; }