/* San Pharma — shadcn/ui stil (bijela + plava + zelena) */
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --muted: 210 40% 96.5%;
  --muted-foreground: 215 16% 45%;
  --border: 214 32% 90%;
  --input: 214 32% 88%;
  --primary: 144 75% 34%;          /* zelena iz loga #16994a */
  --primary-hover: 144 75% 28%;
  --primary-foreground: 0 0% 100%;
  --primary-soft: 142 60% 95%;
  --accent: 213 67% 50%;            /* plava */
  --accent-soft: 213 90% 96%;
  --destructive: 0 72% 51%;
  --warning: 32 95% 44%;
  --ring: 144 75% 34%;
  --radius: 0.75rem;
  color-scheme: light;
}

html, body { background: hsl(var(--background)); color: hsl(var(--foreground)); }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }

/* ---- Pozadina: zamućeni plavi krugovi ---- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-orbs span { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .55; }
.bg-orbs span:nth-child(1) { width: 520px; height: 520px; background: #93c5fd; top: -160px; right: -120px; }
.bg-orbs span:nth-child(2) { width: 420px; height: 420px; background: #bfdbfe; bottom: -140px; left: 18%; }
.bg-orbs span:nth-child(3) { width: 300px; height: 300px; background: #60a5fa; top: 38%; right: 22%; opacity: .22; }
.bg-orbs span:nth-child(4) { width: 260px; height: 260px; background: #bbf7d0; top: 10%; left: -80px; opacity: .35; }

/* ---- Kartice ---- */
.card { background: hsl(var(--card) / .86); backdrop-filter: blur(10px); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 4px 16px -8px rgb(15 23 42 / .08); }
.card-header { padding: 1.1rem 1.25rem .5rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card-title { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.card-desc { font-size: .8rem; color: hsl(var(--muted-foreground)); }
.card-body { padding: .75rem 1.25rem 1.25rem; }

/* ---- Dugmad ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.375rem; padding: 0 .95rem; border-radius: calc(var(--radius) - 4px); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; border: 1px solid transparent; cursor: pointer; user-select: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / .3); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 2px rgb(22 153 74 / .25); }
.btn-primary:hover { background: hsl(var(--primary-hover)); }
.btn-outline { background: hsl(0 0% 100% / .8); border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--primary-soft)); border-color: hsl(var(--primary) / .45); color: hsl(var(--primary-hover)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--primary-soft)); color: hsl(var(--primary-hover)); }
.btn-destructive { background: hsl(var(--destructive)); color: #fff; }
.btn-destructive:hover { background: hsl(0 72% 44%); }
.btn-sm { height: 2rem; padding: 0 .7rem; font-size: .8rem; }
.btn-icon { width: 2.1rem; height: 2.1rem; padding: 0; }

/* ---- Forme ---- */
.label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: .35rem; color: hsl(var(--foreground)); }
.input, .select, .textarea { width: 100%; height: 2.375rem; border: 1px solid hsl(var(--input)); background: hsl(0 0% 100% / .9); border-radius: calc(var(--radius) - 4px); padding: 0 .75rem; font-size: .875rem; color: hsl(var(--foreground)); transition: border-color .15s, box-shadow .15s; }
.textarea { height: auto; min-height: 5.5rem; padding: .55rem .75rem; resize: vertical; }
.select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .18); }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground) / .8); }
.checkbox { width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); }
.hint { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .3rem; }

/* ---- Bedževi ---- */
.badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; border: 1px solid transparent; padding: .1rem .55rem; font-size: .72rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap; }
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
.badge-success { background: hsl(142 60% 94%); color: hsl(144 75% 26%); border-color: hsl(142 50% 84%); }
.badge-warning { background: hsl(40 95% 93%); color: hsl(28 90% 32%); border-color: hsl(40 80% 82%); }
.badge-danger { background: hsl(0 85% 95%); color: hsl(0 70% 42%); border-color: hsl(0 80% 88%); }
.badge-info { background: hsl(var(--accent-soft)); color: hsl(213 70% 38%); border-color: hsl(213 80% 88%); }

/* ---- Tabele ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; font-size: .84rem; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-weight: 500; font-size: .75rem; color: hsl(var(--muted-foreground)); padding: .65rem .9rem; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; background: hsl(var(--muted) / .55); }
.table td { padding: .65rem .9rem; border-bottom: 1px solid hsl(var(--border) / .8); vertical-align: top; }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:hover { background: hsl(var(--primary-soft) / .7); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Sidebar navigacija (zelena) ---- */
.nav-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: calc(var(--radius) - 4px); font-size: .875rem; font-weight: 500; color: hsl(215 20% 30%); transition: background-color .15s, color .15s; }
.nav-link:hover { background: hsl(var(--primary-soft)); color: hsl(var(--primary-hover)); }
.nav-link.active { background: hsl(var(--primary)); color: #fff; box-shadow: 0 4px 12px -4px rgb(22 153 74 / .5); }
.nav-link .count { margin-left: auto; font-size: .7rem; background: hsl(var(--warning)); color: #fff; border-radius: 9999px; padding: 0 .45rem; line-height: 1.2rem; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); padding: 1rem .75rem .35rem; font-weight: 600; }

/* ---- Tabovi (segmented control) ---- */
.tabs { display: inline-flex; padding: .2rem; background: hsl(var(--muted)); border-radius: calc(var(--radius) - 2px); gap: .15rem; }
.tab { padding: .35rem .8rem; font-size: .82rem; font-weight: 500; border-radius: calc(var(--radius) - 5px); color: hsl(var(--muted-foreground)); transition: all .15s; }
.tab:hover { color: hsl(var(--primary-hover)); }
.tab.active { background: #fff; color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(15 23 42 / .1); }

/* ---- Statistika ---- */
.stat-value { font-size: 1.65rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-icon { width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: grid; place-items: center; }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgb(15 23 42 / .35); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modal { width: 100%; max-width: 40rem; background: #fff; border-radius: var(--radius); border: 1px solid hsl(var(--border)); box-shadow: 0 24px 60px -12px rgb(15 23 42 / .3); }
.modal-header { padding: 1.1rem 1.35rem .4rem; display: flex; justify-content: space-between; align-items: start; }
.modal-body { padding: .75rem 1.35rem; }
.modal-footer { padding: .9rem 1.35rem 1.2rem; display: flex; justify-content: flex-end; gap: .5rem; }

/* ---- Combobox ---- */
.combo-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); max-height: 18rem; overflow-y: auto; background: #fff; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 4px); box-shadow: 0 12px 30px -10px rgb(15 23 42 / .25); }
.combo-item { padding: .5rem .75rem; cursor: pointer; font-size: .84rem; }
.combo-item:hover, .combo-item.hl { background: hsl(var(--primary-soft)); }

/* ---- Toast ---- */
.toast { display: flex; gap: .6rem; align-items: start; padding: .8rem 1rem; border-radius: calc(var(--radius) - 2px); background: #fff; border: 1px solid hsl(var(--border)); box-shadow: 0 10px 30px -10px rgb(15 23 42 / .3); font-size: .875rem; min-width: 18rem; max-width: 26rem; }

/* ---- FullCalendar u shadcn stilu ---- */
.fc { --fc-border-color: hsl(var(--border)); --fc-today-bg-color: hsl(var(--primary-soft)); --fc-button-bg-color: #fff; --fc-button-border-color: hsl(var(--input)); --fc-button-text-color: hsl(var(--foreground)); --fc-button-hover-bg-color: hsl(var(--primary-soft)); --fc-button-hover-border-color: hsl(var(--primary) / .45); --fc-button-active-bg-color: hsl(var(--primary)); --fc-button-active-border-color: hsl(var(--primary)); --fc-event-border-color: transparent; font-size: .82rem; }
.fc .fc-button { border-radius: calc(var(--radius) - 4px) !important; font-weight: 500; font-size: .8rem; padding: .35rem .7rem; box-shadow: none !important; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; text-transform: capitalize; }
.fc .fc-col-header-cell-cushion { font-weight: 500; color: hsl(var(--muted-foreground)); text-transform: capitalize; padding: .5rem 0; }
.fc .fc-daygrid-day-number { font-size: .78rem; color: hsl(var(--muted-foreground)); padding: .35rem .5rem; }
.fc .fc-daygrid-day:hover { background: hsl(var(--primary-soft) / .6); cursor: pointer; }
.fc .fc-event { border-radius: 6px; padding: 1px 4px; font-size: .74rem; cursor: pointer; }
.fc .fc-daygrid-event-dot { display: none; }
.fc-theme-standard .fc-scrollgrid { border-radius: var(--radius); overflow: hidden; }

/* ---- Prisutnost: ćelije mreže ---- */
.att-cell { width: 1.45rem; height: 1.45rem; border-radius: .35rem; display: inline-grid; place-items: center; font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: transform .1s; }
button.att-cell:not(:disabled):hover { transform: scale(1.15); cursor: pointer; }

/* ---- Kanban (zadaci) ---- */
.kanban { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.task-card { padding: .9rem 1rem; border-bottom: 1px solid hsl(var(--border) / .8); transition: background-color .12s; }
.task-card:hover { background: hsl(var(--primary-soft) / .5); }
.task-card:last-child { border-bottom: 0; }
.progress { height: .35rem; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.progress > span { display: block; height: 100%; background: hsl(var(--primary)); border-radius: 9999px; }

/* ---- Lightbox ---- */
.sp-lightbox { position: fixed; inset: 0; z-index: 90; background: rgb(15 23 42 / .82); backdrop-filter: blur(3px); display: flex; flex-direction: column; }
.sp-lb-bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; color: #fff; }
.sp-lb-bar .btn-outline { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .25); }
.sp-lb-title { flex: 1; font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-lb-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 1rem 1rem; overflow: auto; }
.sp-lb-body img { max-width: 100%; max-height: 100%; border-radius: .5rem; box-shadow: 0 20px 60px rgb(0 0 0 / .4); cursor: zoom-in; background: #fff; }
.sp-lb-body img.zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.sp-lb-body iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: .5rem; background: #fff; }

/* ---- flatpickr u shadcn stilu ---- */
.flatpickr-calendar { border-radius: var(--radius); box-shadow: 0 12px 30px -10px rgb(15 23 42 / .3); border: 1px solid hsl(var(--border)); font-family: inherit; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.flatpickr-day.today { border-color: hsl(var(--primary) / .5); }
.flatpickr-day:hover { background: hsl(var(--primary-soft)); }
.sp-picker[readonly] { background: hsl(0 0% 100% / .9); cursor: pointer; }

/* ---- Mobilni prikaz: ništa ne smije izaći iz okvira ekrana ---- */
html, body { max-width: 100%; overflow-x: hidden; }
main, main > div, .card, section { min-width: 0; }
.table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .table { font-size: .78rem; }
  .table th, .table td { padding: .5rem .6rem; }
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal { max-width: none !important; min-height: 100%; border-radius: 0; }
  .modal-body { grid-template-columns: 1fr !important; }
  .stat-value { font-size: 1.35rem; }
  .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tab { white-space: nowrap; }
}

@media print {
  .no-print, aside, .bg-orbs { display: none !important; }
  main { padding: 0 !important; margin: 0 !important; }
}

/* učitavanje pri filtriranju */
#page-content { transition: opacity .15s; }
#page-content.sp-loading .table-wrap, #page-content.sp-loading .card-body { opacity: .55; }

[hidden] { display: none !important; }
@media (min-width: 640px) { .sp-filter-toggle { display: none !important; } }
@media (max-width: 639px) { form.sp-collapsed .sp-filter-extra { display: none !important; } }