/* SmartOps Hospital — Custom Styles */

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* ─── Emergency pulse animation ────────────────────────────────────────────── */
@keyframes emergency-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { opacity: 0.85; box-shadow: 0 0 0 12px rgba(239,68,68,0); }
}
.emergency-pulse { animation: emergency-pulse 1.5s ease-in-out infinite; }

@keyframes code-blue-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(13,148,136,0.5); }
  50%       { opacity: 0.85; box-shadow: 0 0 0 12px rgba(13,148,136,0); }
}
.code-blue-pulse { animation: code-blue-pulse 1.5s ease-in-out infinite; }

@keyframes status-blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}
.status-blink { animation: status-blink 1s ease-in-out infinite; }

/* ─── Transitions ───────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }
.page-fade { animation: pageFade 0.2s ease-out; }
@keyframes pageFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ─── Sidebar active link ───────────────────────────────────────────────────── */
.nav-active { background: rgba(13,148,136,0.15); color: rgb(45,212,191); border-right: 3px solid rgb(13,148,136); }

/* ─── Toast notifications ───────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { padding: 0.75rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;
         box-shadow: 0 4px 12px rgba(0,0,0,0.4); animation: slideInUp 0.3s ease-out; min-width: 240px; }
.toast-success { background: #064e3b; border: 1px solid #059669; color: #a7f3d0; }
.toast-error   { background: #450a0a; border: 1px solid #dc2626; color: #fca5a5; }
.toast-info    { background: #134e4a; border: 1px solid #0d9488; color: #5eead4; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ─── Table ─────────────────────────────────────────────────────────────────── */
.data-table thead th { background: rgba(255,255,255,0.04); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ─── Modal backdrop ────────────────────────────────────────────────────────── */
.modal-backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }

/* ─── Badge helper ──────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; }

/* ─── Form controls dark ────────────────────────────────────────────────────── */
input, select, textarea {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: inherit !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3) !important; }
select option { background: #1e293b; }

/* ── __smartops_monitor_wall__ ──────────────────────────────────────────────
   The monitor is a WALL display: read from across a corridor, by someone who
   is walking. So identity is carried by colour + emoji + size together, never
   by colour alone — a colour-blind nurse and a nurse at 10 metres both have to
   recognise the code before reading a single word.

   Each code owns one hue, matching the international convention staff already
   know (red = fire, blue = resuscitation, black = threat, yellow = internal
   emergency, pink = infant abduction). */

@keyframes code-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.code-sweep {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: code-sweep 2s linear infinite;
}

@keyframes code-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.30), 0 18px 45px -12px rgba(0,0,0,.75); }
  50%      { box-shadow: 0 0 0 14px rgba(255,255,255,0),  0 18px 45px -12px rgba(0,0,0,.75); }
}
.code-card { animation: code-breathe 1.8s ease-in-out infinite; }

/* Per-code colour. Deep enough for white text to clear WCAG AA at display size. */
.code-red    { background: linear-gradient(135deg,#7f1d1d,#b91c1c); border-color:#fca5a5; }
.code-blue   { background: linear-gradient(135deg,#0c4a6e,#0369a1); border-color:#7dd3fc; }
.code-black  { background: linear-gradient(135deg,#111827,#1f2937); border-color:#9ca3af; }
.code-yellow { background: linear-gradient(135deg,#854d0e,#ca8a04); border-color:#fde047; }
.code-pink   { background: linear-gradient(135deg,#831843,#be185d); border-color:#f9a8d4; }
.code-maint  { background: linear-gradient(135deg,#78350f,#c2410c); border-color:#fdba74; }
.code-sec    { background: linear-gradient(135deg,#3730a3,#4f46e5); border-color:#a5b4fc; }
.code-serv   { background: linear-gradient(135deg,#134e4a,#0f766e); border-color:#5eead4; }
.code-plain  { background: linear-gradient(135deg,#334155,#475569); border-color:#cbd5e1; }

/* Operators leave these screens on for months; respect the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .code-card, .code-sweep, .emergency-pulse, .status-blink { animation: none !important; }
}