/* =========================================================
   Ekran za recepciju / TV
   ========================================================= */
.app.tv .sidebar, .app.tv .topbar, .app.tv .sb-backdrop { display: none !important; }
.app.tv .content { padding: 0; }
.tv-board {
  --tv-bg: #071413; --tv-card: #0d2321; --tv-line: #17403c; --tv-text: #ecf7f6; --tv-muted: #86a9a5;
  --tv-free: #2fd4a3; --tv-busy: #ef5d8f;
  position: relative; min-height: 100vh; padding: 2.2vw 2.6vw 1.6vw; display: flex; flex-direction: column; gap: 1.6vw;
  background: radial-gradient(1400px 700px at 20% -10%, #0e3a36 0%, transparent 60%), radial-gradient(1000px 600px at 110% 120%, #3a1426 0%, transparent 55%), var(--tv-bg);
  color: var(--tv-text); font-size: clamp(14px, 1.1vw, 22px);
}
.tv-head { display: flex; align-items: center; gap: 2vw; }
.tv-logo { height: clamp(40px, 3.6vw, 78px); width: auto; filter: brightness(1.8) saturate(1.1); }
.tv-title { flex: 1; font-size: 1.5em; font-weight: 700; color: var(--tv-muted); letter-spacing: .01em; }
.tv-clock { text-align: right; }
.tv-clock #tvTime { font-size: 3em; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-clock #tvDate { color: var(--tv-muted); font-weight: 600; margin-top: .3em; text-transform: capitalize; }

.tv-grid { flex: 1; display: grid; gap: 1.4vw; grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 22vw, 520px), 1fr)); align-content: start; }
.tv-room {
  position: relative; border-radius: 1.4vw; padding: 1.5vw 1.6vw; background: var(--tv-card); border: 1px solid var(--tv-line);
  display: flex; flex-direction: column; gap: 1vw; overflow: hidden; min-height: 15vw;
  animation: rise .6s var(--ease, ease) both;
}
.tv-room::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--rc); opacity: .9; }
.tv-room.is-busy { border-color: color-mix(in srgb, var(--tv-busy) 45%, var(--tv-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tv-busy) 20%, transparent), 0 20px 60px -30px var(--tv-busy); }
.tv-room.is-free { border-color: color-mix(in srgb, var(--tv-free) 35%, var(--tv-line)); }
.tv-room-head { display: flex; align-items: flex-start; justify-content: space-between; }
.tv-room-name { font-size: 1.55em; font-weight: 800; letter-spacing: -.01em; }
.tv-room-type { color: var(--tv-muted); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-top: .2em; }
.tv-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--tv-free); box-shadow: 0 0 0 0 rgba(47, 212, 163, .6); animation: tv-pulse 2s infinite; margin-top: .4em; }
.is-busy .tv-pulse { background: var(--tv-busy); box-shadow: 0 0 0 0 rgba(239, 93, 143, .6); }
@keyframes tv-pulse { 70% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
.tv-room-body { flex: 1; display: flex; flex-direction: column; gap: .45em; }
.tv-state { font-size: 2.4em; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.tv-state.free { color: var(--tv-free); }
.tv-state.busy { color: var(--tv-busy); }
.tv-doc { font-size: 1.15em; font-weight: 700; display: flex; align-items: center; gap: .5em; margin-top: .3em; }
.tv-doc .dot { width: .7em; height: .7em; }
.tv-svc { color: var(--tv-muted); font-weight: 600; }
.tv-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tv-text); }
.tv-progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: .3em; }
.tv-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tv-busy), #ff9bbd); transition: width 1s var(--ease, ease); }
.tv-left { color: var(--tv-muted); font-weight: 600; font-size: .95em; }
.tv-free-until { font-size: 1.25em; font-weight: 700; color: var(--tv-text); }
.tv-soon { display: inline-block; margin-left: .4em; padding: .1em .55em; border-radius: 999px; background: rgba(239, 93, 143, .18); color: #ff9bbd; font-size: .8em; }
.tv-next { border-top: 1px solid var(--tv-line); padding-top: .8vw; display: flex; flex-direction: column; gap: .3em; color: var(--tv-muted); font-size: .95em; }
.tv-next b { color: var(--tv-text); font-variant-numeric: tabular-nums; margin-right: .4em; }
.tv-muted { color: var(--tv-muted); opacity: .7; }
.tv-foot { display: flex; gap: 3vw; justify-content: center; color: var(--tv-muted); font-weight: 600; border-top: 1px solid var(--tv-line); padding-top: 1.2vw; flex-wrap: wrap; }
.tv-foot b { color: var(--tv-text); font-size: 1.3em; margin-right: .2em; }
.tv-tools { position: fixed; bottom: 16px; right: 16px; display: flex; gap: 8px; opacity: 0; transition: opacity .3s; z-index: 10; }
.tv-board.awake .tv-tools { opacity: 1; }
.tv-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-weight: 600; font-size: 14px; backdrop-filter: blur(8px);
}
.tv-btn:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 700px) {
  .tv-head { flex-wrap: wrap; }
  .tv-title { display: none; }
  .tv-room { min-height: 0; border-radius: 16px; padding: 16px; }
}

/* ---------- Boje Menssane (tirkizna + siva iz logoa, roze sa sajta) ---------- */
.tv-board {
  --tv-bg: #f6f8f8; --tv-card: #ffffff; --tv-line: #e2e8e7; --tv-text: #333333; --tv-muted: #80808a;
  --tv-free: #00968e; --tv-busy: #cc3366;
  background:
    radial-gradient(1200px 650px at 0% -15%, rgba(0, 150, 142, .14) 0%, transparent 60%),
    radial-gradient(900px 550px at 105% 115%, rgba(204, 51, 102, .10) 0%, transparent 55%),
    var(--tv-bg);
}
.tv-logo { filter: none; }
.tv-title { color: var(--tv-muted); }
.tv-clock #tvTime { color: var(--tv-free); }
.tv-room { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 34px -22px rgba(0, 60, 56, .35); }
.tv-room::before { height: 6px; background: var(--tv-free); }
.tv-room.is-busy::before { background: var(--tv-busy); }
.tv-room.is-busy { border-color: rgba(204, 51, 102, .35); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -24px rgba(204, 51, 102, .55); }
.tv-room.is-free { border-color: rgba(0, 150, 142, .30); }
.tv-pulse { box-shadow: 0 0 0 0 rgba(0, 150, 142, .55); }
.is-busy .tv-pulse { box-shadow: 0 0 0 0 rgba(204, 51, 102, .55); }
.tv-progress { background: #eef2f2; }
.tv-progress i { background: linear-gradient(90deg, #cc3366, #e27aa0); }
.tv-soon { background: rgba(204, 51, 102, .12); color: #cc3366; }
.tv-foot b { color: var(--tv-free); }
.tv-btn { background: rgba(255, 255, 255, .85); border-color: var(--tv-line); color: #333; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25); }
.tv-btn:hover { background: #fff; color: var(--tv-free); }

/* ---------- Tirkizna pozadina (boja iz logoa), bele kartice ---------- */
.tv-board {
  background:
    radial-gradient(1100px 600px at 0% -10%, rgba(255, 255, 255, .16) 0%, transparent 60%),
    radial-gradient(900px 550px at 105% 115%, rgba(0, 60, 56, .45) 0%, transparent 60%),
    linear-gradient(135deg, #00a69d 0%, #00968e 45%, #007b74 100%);
}
.tv-logo { filter: brightness(0) invert(1); }
.tv-title { color: rgba(255, 255, 255, .85); }
.tv-clock #tvTime { color: #fff; }
.tv-clock #tvDate { color: rgba(255, 255, 255, .8); }
.tv-room { border-color: transparent !important; box-shadow: 0 18px 40px -20px rgba(0, 40, 37, .55) !important; }
.tv-room.is-busy { box-shadow: 0 0 0 3px rgba(204, 51, 102, .55), 0 18px 40px -20px rgba(0, 40, 37, .55) !important; }
.tv-foot { color: rgba(255, 255, 255, .85); border-top-color: rgba(255, 255, 255, .25); }
.tv-foot b { color: #fff; }