/* =========================================================
   Prijava – forma na sredini, animirana pozadina
   ========================================================= */
.login {
  position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 32px 16px 64px; overflow: hidden; isolation: isolate;
  background: #0b1716;
}
:root[data-theme="light"] .login { background: #f4f6f6; }
/* pozadina: mirna ravna boja i nekoliko tankih linija u ritmu talasa iz logotipa */
.login-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; }
.login-lines .ll-teal { stroke: #00897f; stroke-width: 1.2; opacity: .35; }
.login-lines .ll-rose { stroke: #cc3366; stroke-width: 1.2; opacity: .3; }
:root[data-theme="light"] .login-lines .ll-teal { opacity: .28; }
:root[data-theme="light"] .login-lines .ll-rose { opacity: .22; }

.login-card {
  width: 100%; max-width: 420px; padding: 36px 34px 28px; border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 24, .04), 0 18px 48px -24px rgba(16, 40, 38, .28);
  animation: card-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.login-card h1 { font-size: 26px; font-weight: 800; margin: 26px 0 4px; letter-spacing: -.02em; }
.login-card .stack { gap: 14px; margin-top: 22px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand .brand-mark { animation: mark-float 5s ease-in-out infinite; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > svg.i { position: absolute; left: 13px; color: var(--muted); pointer-events: none; transition: color .2s; }
/* !important jer opšte pravilo za polja (.field input:not(...)) ima jaču specifičnost */
.login-card .login-input input { padding-left: 42px !important; height: 46px; border-radius: 12px; }
.login-card .login-input input#lp { padding-right: 48px !important; }
.login-input > svg.i { z-index: 1; }
.login-input:focus-within > svg.i { color: var(--primary); }
.login-eye { position: absolute; right: 4px; width: 38px; height: 38px; }
.login-btn { width: 100%; height: 48px; border-radius: 12px; position: relative; overflow: hidden; }
.login-btn svg.i { transition: transform .25s; }
.login-btn:hover svg.i { transform: translateX(4px); }
.login-btn::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
}
.login-btn:hover::after { animation: shine .9s ease; }
.login-card .demo-hint { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.login-foot { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); }
:root[data-theme="light"] .login-foot { color: var(--muted); }
.login-card.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mark-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
@keyframes shine { to { transform: translateX(120%); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

/* =========================================================
   Fluidne animacije kroz aplikaciju
   ========================================================= */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ulazak stranice (samo pri promeni stranice, ne pri osvežavanju podataka) */
.page-enter > * { animation: rise .55s var(--ease) both; }
.page-enter > *:nth-child(2) { animation-delay: .06s; }
.page-enter > *:nth-child(3) { animation-delay: .12s; }
.page-enter > *:nth-child(4) { animation-delay: .18s; }
.page-enter > *:nth-child(n+5) { animation-delay: .24s; }
/* kartice u nizu – jedna za drugom */
.page-enter .grid > .card, .page-enter .rooms-live > *, .page-enter .entity-grid > * { animation: rise .55s var(--ease) both; }
.page-enter .grid > .card:nth-child(2), .page-enter .rooms-live > :nth-child(2), .page-enter .entity-grid > :nth-child(2) { animation-delay: .07s; }
.page-enter .grid > .card:nth-child(3), .page-enter .rooms-live > :nth-child(3), .page-enter .entity-grid > :nth-child(3) { animation-delay: .14s; }
.page-enter .grid > .card:nth-child(4), .page-enter .rooms-live > :nth-child(4), .page-enter .entity-grid > :nth-child(4) { animation-delay: .21s; }
.page-enter .grid > .card:nth-child(5), .page-enter .rooms-live > :nth-child(5), .page-enter .entity-grid > :nth-child(5) { animation-delay: .28s; }
.page-enter .grid > .card:nth-child(n+6), .page-enter .rooms-live > :nth-child(n+6), .page-enter .entity-grid > :nth-child(n+6) { animation-delay: .34s; }
.page-enter .table tbody tr { animation: fade .5s var(--ease) both; animation-delay: .15s; }
.page-enter .agenda-item { animation: rise .5s var(--ease) both; animation-delay: .2s; }
.page-enter .appt { animation: pop .45s var(--ease) both; animation-delay: .15s; }
.page-enter .bar-fill { transform-origin: left; animation: grow-x .9s var(--ease) both; animation-delay: .25s; }
.page-enter .chart-wrap .bar { transform-box: fill-box; transform-origin: bottom; animation: grow-y .8s var(--ease) both; animation-delay: .2s; }

.bar-fill { transition: width .6s var(--ease); }

/* dugmad, kartice, navigacija */
.btn { transition: background .2s, border-color .2s, box-shadow .25s, transform .15s var(--ease), color .2s; }
.btn.primary:hover { box-shadow: 0 8px 22px -6px rgba(0, 137, 127, .6); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.card { transition: box-shadow .25s var(--ease), border-color .25s, transform .25s var(--ease); }
.kpi:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.kpi .label .ico { transition: transform .35s var(--spring); }
.kpi:hover .label .ico { transform: scale(1.12) rotate(-6deg); }
.nav a { position: relative; transition: background .2s, color .2s, padding .22s var(--ease); }
.nav a svg.i { transition: transform .3s var(--spring); }
.nav a:hover svg.i { transform: scale(1.12); }
.nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--primary); animation: grow-y .35s var(--ease) both;
}
.app.collapsed .nav a.active::before { left: -10px; }
.table tbody tr td { transition: background .15s; }
.chip { transition: all .18s var(--ease); }
.chip:hover { transform: translateY(-1px); }
.chip.on { animation: pop .3s var(--spring); }
.seg button { transition: background .2s, color .2s, box-shadow .2s; }
.appt { transition: box-shadow .2s var(--ease), transform .2s var(--ease), opacity .3s; }
.room-card .rc-state { transition: color .4s; }
.icon-btn { transition: background .2s, color .2s, transform .2s var(--spring); }
#themeBtn:hover svg.i { transform: rotate(25deg); transition: transform .4s var(--spring); }

/* prozori i obaveštenja */
.modal { transition: transform .32s var(--spring), opacity .2s; }
.modal-backdrop .modal { transform: translateY(18px) scale(.96); opacity: 0; }
.modal-backdrop.open .modal { transform: none; opacity: 1; }
.modal-body > * { animation: fade .35s var(--ease) both; }
.toast { animation: toast-pop .4s var(--spring); }
@keyframes toast-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.availability { transition: background .3s, color .3s; }
.availability.ok svg.i, .availability.err svg.i { animation: pop .35s var(--spring); }
.cp-results:not(.hidden) { animation: pop .18s var(--ease); transform-origin: top; }

/* poštovanje sistemske opcije "smanji animacije" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =========================================================
   Brend Menssana – logo
   ========================================================= */
.brand { min-height: 84px; }
.brand-logo { display: block; width: 148px; height: auto; }
.brand-symbol { display: none; width: 34px; height: 34px; object-fit: contain; }
@media (min-width: 768px) {
  .app.collapsed .brand-symbol { display: block; }
}
:root[data-theme="dark"] .brand-logo, :root[data-theme="dark"] .login-logo { filter: brightness(1.55) saturate(1.1); }
.login-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
.login-logo { width: 190px; height: auto; display: block; }
.login-brand .brand-sub { font-size: 11.5px; letter-spacing: .01em; white-space: normal; }

/* =========================================================
   Planer – prevlačenje termina
   ========================================================= */
.appt.movable { cursor: grab; touch-action: auto; }
.appt.movable:active { cursor: grabbing; }
.appt-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; z-index: 2;
}
.appt-resize::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px; border-radius: 3px;
  background: color-mix(in srgb, var(--c) 60%, transparent); opacity: 0; transition: opacity .15s;
}
.appt.movable:hover .appt-resize::after { opacity: 1; }
.appt.dragging {
  z-index: 30 !important; cursor: grabbing; transition: none !important; opacity: .95;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .35), 0 0 0 2px var(--c) !important; transform: scale(1.02);
}
.appt.drop-bad { box-shadow: 0 0 0 2px var(--danger), 0 18px 40px -10px rgba(0, 0, 0, .35) !important; }
.appt.drop-bad::after {
  content: "Pogrešan tip prostorije"; position: absolute; left: 6px; bottom: 4px; font-size: 10.5px; font-weight: 800;
  color: #fff; background: var(--danger); padding: 1px 6px; border-radius: 5px;
}
.pg-col.drop-target { background-color: color-mix(in srgb, var(--primary) 6%, transparent); }
body.is-dragging, body.is-dragging * { user-select: none !important; }
body.is-dragging .pg-ghost { display: none !important; }
.toast-action {
  margin-left: 8px; border: 0; border-radius: 8px; padding: 5px 11px; font-weight: 800; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit;
}
.toast-action:hover { background: color-mix(in srgb, var(--bg) 30%, transparent); }

/* Prijava na telefonu: uža kartica i manji razmaci */
@media (max-width: 480px) {
  .login { padding: 24px 16px 56px; }
  .login-card { padding: 28px 22px 24px; border-radius: 18px; }
  .login-logo { width: 160px; }
}