/* =====================================================
   style.css (FULL REPLACEMENT) — Chunk 1/2
   - De-duped + consolidated
   - Keeps current “clinical tile” theme
   - Adds LIVE Admit Queue header-dock support (no overlap)
   ===================================================== */

/* =========================
   TOKENS / THEME
========================= */
:root{
  --bg: #f4f6f8;
  --text: #0f172a;
  --muted: #64748b;

  --brand: #00558c;
  --brand2: #0079c1;

  --border: rgba(148,163,184,0.35);

  /* Card tokens */
  --card-bg: rgba(255,255,255,0.92);
  --card-border: rgba(148,163,184,0.35);
  --card-shadow: 0 10px 30px rgba(2,6,23,0.06);
  --card-shadow-hover: 0 14px 40px rgba(2,6,23,0.10);

  /* Table tokens */
  --table-head-bg: rgba(226,232,240,0.55);
  --table-divider: rgba(148,163,184,0.30);
  --table-row-hover: rgba(2,6,23,0.03);

  /* Load bars */
  --good: #4CAF50;
  --med:  #ffc107;
  --high: #ff5252;
}

/* =========================
   BASE
========================= */
*{ box-sizing: border-box; }

body{
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: var(--text);

  /* blue fade background (kept) */
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(142,200,246,0.55), rgba(142,200,246,0.0) 60%),
    radial-gradient(1100px 650px at 90% 10%, rgba(142,200,246,0.40), rgba(142,200,246,0.0) 55%),
    linear-gradient(180deg, rgba(142,200,246,0.18), var(--bg) 45%);
}

h1,h2,h3{
  color: var(--text);
  letter-spacing: -0.01em;
}

hr{
  margin: 20px 0;
  border: none;
  border-top: 1px solid rgba(148,163,184,0.45);
}

/* Keep main content from hiding behind sticky header */
.app-main,
.main-container{
  padding-top: 10px;
}

.app-footer{
  margin: 24px 14px 14px;
  padding: 12px 14px;
  border-top: 1px solid rgba(148,163,184,0.35);
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* =========================
   FORM CONTROLS
========================= */
input, select, textarea{
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.92);
  outline: none;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(59,130,246,0.65);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}

/* =========================
   BUTTONS (GLOBAL)
========================= */
button{
  cursor: pointer;
  border: none;
  padding: 6px 10px;
  border-radius: 12px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(2,6,23,0.08);
}

button:active{
  transform: translateY(0px);
  box-shadow: 0 6px 12px rgba(2,6,23,0.06);
}

/* Quick utility buttons */
.queue-btn{ background: #e8f2ff; }
.queue-btn:hover{ background: #d3e8ff; }

.room-link-btn{
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.room-link-btn:focus{ outline: none; }

/* =========================
   TOP STICKY HEADER + INLINE TABS
========================= */
.app-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);

  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}

/* brand left */
.app-header-left{
  display: flex;
  align-items: center;
  min-width: 320px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-dot{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00a9e0, #0066c5, #f37021);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  flex: 0 0 auto;
}

.brand-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-title{
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle{
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-tabs{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.top-tabs::-webkit-scrollbar{ height: 8px; }
.top-tabs::-webkit-scrollbar-thumb{
  background: #d6dde8;
  border-radius: 999px;
}
.top-tabs::-webkit-scrollbar-track{ background: transparent; }

.tabButton{
  flex: 0 0 auto;
  color: white;
  background: rgba(2,132,199,0.85);
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.tabButton.active{
  background: rgba(59,130,246,0.95);
  box-shadow: 0 10px 18px rgba(59,130,246,0.18);
}

.tabButton:hover{ background: rgba(2,132,199,0.98); }

@media (max-width: 900px){
  .app-header-left{ min-width: 220px; }
  .brand-subtitle{ display: none; }
}

/* right auth */
.header-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 56px;
}

/* legacy tabs bar (disable) */
#header,
.tab-bar{
  display: none !important;
}

/* tab-section baseline */
.tab-section{
  display: none;
  padding: 20px;
}

/* =========================
   AUTH DROPDOWN (header)
========================= */
.auth-menu{ position: relative; }

.auth-menu-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.auth-menu-btn:hover{ background: #f8fafc; }

.auth-avatar{ font-size: 18px; line-height: 1; }

.auth-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.16);
  padding: 12px;
  display: none;
  z-index: 2000;
}
.auth-dropdown.open{ display: block; }

.auth-dropdown-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 10px;
}

.auth-status{
  font-weight: 800;
  color: #0f172a;
  font-size: 13px;
}

.auth-x{
  border: 0;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-weight: 900;
}
.auth-x:hover{ background: #e2e8f0; }

.auth-block{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.auth-label{
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.auth-input{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
}

.auth-primary-btn{
  padding: 10px 12px;
  border-radius: 12px;
  background: #0066c5;
  color: #fff;
  font-weight: 800;
  border: 0;
}
.auth-primary-btn:hover{ background: #008ce6; }

.auth-secondary-btn{
  padding: 10px 12px;
  border-radius: 12px;
  background: #e8f2ff;
  color: #003c6d;
  font-weight: 800;
  border: 1px solid #cfe3ff;
}
.auth-secondary-btn:hover{ background: #d3e8ff; }

.auth-danger-btn{
  padding: 10px 12px;
  border-radius: 12px;
  background: #ef4444;
  color: #fff;
  font-weight: 800;
  border: 0;
}
.auth-danger-btn:hover{ background: #dc2626; }

.auth-ghost-btn{
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  border: 1px solid #cbd5e1;
}
.auth-ghost-btn:hover{ background: #f8fafc; }

.auth-userline{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-useremail{
  font-weight: 800;
  color: #0f172a;
  font-size: 14px;
  word-break: break-word;
}

.auth-pill{
  display: inline-block;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 800;
  font-size: 12px;
}

.auth-msg{
  margin-top: 10px;
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
  min-height: 16px;
}

/* =========================
   STAFFING PANELS
========================= */
.staffBlock{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  padding: 15px;
  margin-top: 15px;
}

.staffList .nurseRow,
.staffList .pcaRow{
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(248,250,252,0.75);
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(148,163,184,0.25);
}

.restrictionsGroup{ display: flex; align-items: center; gap: 10px; }
.restrictionOption{ font-size: 12px; }

.staffing-two-column{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 10px;
  flex-wrap: wrap;
}

.staff-column{ flex: 1; min-width: 360px; }

.staff-column > h2{
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--brand);
}

.staff-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
}

.staff-card-header{
  font-weight: 800;
  margin-bottom: 8px;
  color: #0f172a;
}

.staff-inline-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.staff-inline-controls label{ font-weight: 700; }
.staff-inline-controls select{ padding: 2px 4px; }
.staff-inline-controls button{ padding: 4px 10px; font-size: 13px; }

.staff-subtitle{ font-weight: 800; font-size: 13px; margin: 4px 0 6px; }

/* Staffing Details — 3-column layout */
.staffing-three-column{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 6px;
  flex-wrap: wrap;
}

.staff-column--support{
  min-width: 280px;
  max-width: 360px;
}

.staff-role-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.staff-role-row input{
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
}

@media (min-width: 1200px){
  .staffing-three-column{ flex-wrap: nowrap; }
  .staff-column--support{ flex: 0 0 320px; }
  .staffing-three-column .staff-column:not(.staff-column--support){
    flex: 1;
    min-width: 360px;
  }
}

/* =========================
   PATIENT LIST (legacy list view)
========================= */
#patientList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.patientRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  padding: 8px;
}
.patientRow.empty{ opacity: 0.6; }

.patientRow strong{
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 10px;
  background: #e8f1ff;
}

.reviewBtn{ background: #eee; border: none; padding: 4px 6px; cursor: pointer; }
.reviewBtn.reviewed{ background: #b2ffc0; }
.deleteBtn{ background: #ffcccc; border: none; padding: 4px 6px; cursor: pointer; }
.addBtn{ background: #ccf2ff; border: none; padding: 4px 6px; cursor: pointer; }

/* =========================
   LOAD SCORE COLORS (KEEP)
========================= */
.load-good{   border-left: 10px solid var(--good) !important; }
.load-medium{ border-left: 10px solid var(--med)  !important; }
.load-high{   border-left: 10px solid var(--high) !important; }

.assignment-card,
.nurseBlock,
.pcaBlock{
  overflow: hidden; /* keeps bar crisp */
}

/* =========================
   ASSIGNMENT CARDS (RN + PCA) — CLEAN TILE THEME
========================= */
#liveNurseAssignments .nurseBlock,
#livePcaAssignments .pcaBlock,
#assignmentOutput .nurseBlock,
#pcaAssignmentOutput .pcaBlock,
#liveNurseAssignments .liveCard,
#livePcaAssignments .liveCard{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  margin: 0;
}

#liveNurseAssignments .nurseBlock:hover,
#livePcaAssignments .pcaBlock:hover,
#assignmentOutput .nurseBlock:hover,
#pcaAssignmentOutput .pcaBlock:hover{
  box-shadow: var(--card-shadow-hover);
}

.liveCardHeader,
.liveCard .card-meta,
.card-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-meta{
  font-size: 14px;
  color: #111827;
  font-weight: 800;
}

#liveNurseAssignments .nurseBlock small,
#livePcaAssignments .pcaBlock small,
#assignmentOutput .nurseBlock small,
#pcaAssignmentOutput .pcaBlock small{
  color: var(--muted);
}

#liveNurseAssignments table,
#livePcaAssignments table,
#assignmentOutput table,
#pcaAssignmentOutput table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 0;
}

#liveNurseAssignments th,
#livePcaAssignments th,
#assignmentOutput th,
#pcaAssignmentOutput th{
  background: var(--table-head-bg);
  color: #0f172a;
  font-weight: 900;
  font-size: 15px;
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--table-divider);
}

#liveNurseAssignments td,
#livePcaAssignments td,
#assignmentOutput td,
#pcaAssignmentOutput td{
  font-size: 15px;
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--table-divider);
  background: rgba(255,255,255,0.92);
}

#liveNurseAssignments tbody tr:hover td,
#livePcaAssignments tbody tr:hover td,
#assignmentOutput tbody tr:hover td,
#pcaAssignmentOutput tbody tr:hover td{
  background: var(--table-row-hover);
}

/* Oncoming: prevent 4th col disappearing */
#assignmentOutput table,
#pcaAssignmentOutput table{
  table-layout: auto !important;
}

#assignmentOutput th:nth-child(4),
#assignmentOutput td:nth-child(4),
#pcaAssignmentOutput th:nth-child(4),
#pcaAssignmentOutput td:nth-child(4){
  min-width: 110px;
  white-space: nowrap;
}

#assignmentOutput th:nth-child(3),
#assignmentOutput td:nth-child(3),
#pcaAssignmentOutput th:nth-child(3),
#pcaAssignmentOutput td:nth-child(3){
  white-space: normal;
}
/* =====================================================
   style.css (FULL REPLACEMENT) — Chunk 2/2
   (append directly after Chunk 1)
   ===================================================== */

/* =========================
   LIVE Assignment — layout
========================= */

/* RN grid: 3 / 2 / 1 columns */
#liveNurseAssignments{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 1200px){
  #liveNurseAssignments{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  #liveNurseAssignments{ grid-template-columns: 1fr; }
}

/* PCA row on LIVE: horizontal scroll */
#livePcaAssignments{
  display: flex !important;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 6px;
}
#livePcaAssignments .pcaBlock,
#livePcaAssignments .liveCard{
  flex: 0 0 240px;
  max-width: 240px;
}

#liveSitterAssignments{
  display: flex !important;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 6px;
}
#liveSitterAssignments .assignment-card{
  flex: 0 0 240px;
  max-width: 240px;
}

/* =========================
   ONCOMING Assignment — layout
========================= */
#assignmentOutput,
#pcaAssignmentOutput,
#sitterAssignmentOutput{
  display: grid;
  gap: 12px;
  align-items: start;
}

#assignmentOutput{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1400px){
  #assignmentOutput{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  #assignmentOutput{ grid-template-columns: 1fr; }
}

#pcaAssignmentOutput{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
#sitterAssignmentOutput{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1700px){
  #pcaAssignmentOutput, #sitterAssignmentOutput{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1400px){
  #pcaAssignmentOutput, #sitterAssignmentOutput{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px){
  #pcaAssignmentOutput, #sitterAssignmentOutput{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px){
  #pcaAssignmentOutput, #sitterAssignmentOutput{ grid-template-columns: 1fr; }
}

#pcaAssignmentOutput .pcaBlock{ width: 100%; }

/* =========================
   DISCHARGE BIN CARD (tile)
   (kept as canonical; legacy #dischargeBin removed)
========================= */
#dischargeBinCard.discharge-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);

  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
}

#dischargeBinCard .discharge-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#dischargeBinCard .discharge-title{
  font-weight: 900;
  color: #0f172a;
}

#dischargeBinCard .discharge-clear-btn,
#dischargeBinCard .discharge-history-btn{
  background: #e8f2ff;
  border: 0;
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
#dischargeBinCard .discharge-clear-btn:hover,
#dischargeBinCard .discharge-history-btn:hover{
  background: #d3e8ff;
}

#dischargeBinCard .discharge-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #111827;
}

#dischargeBinCard .discharge-drop-zone--card{
  flex: 1;
  min-height: 72px;
  border: 2px dashed var(--high);
  border-radius: 16px;
  background: rgba(255,247,247,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #111827;
  text-align: center;
  padding: 10px;
}

#dischargeBinCard .discharge-helper{
  font-size: 12px;
  color: #6b7280;
  line-height: 1.2;
}

/* =========================
   QUEUE LIST (base)
========================= */
.queueList{ display: flex; flex-direction: column; gap: 12px; }

.queue-item{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  padding: 12px;
}

.queue-item-header{ display: flex; justify-content: space-between; gap: 10px; }

.queue-item-title input{
  width: 150px;
  font-size: 16px;
}

.queue-item-tags{
  margin: 10px 0;
  font-size: 13px;
  color: #555;
}

.queue-item-actions button{ margin-right: 8px; }

/* =========================
   LIVE: Admit Queue — HEADER DOCK (no overlap)
   Add class "live-admit-dock" to the top inline queue wrapper.
========================= */
.live-admit-dock{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 6px;

  width: min(820px, 62vw);
  max-width: 900px;

  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 10px 26px rgba(2,6,23,0.10);
  backdrop-filter: blur(8px);
}

.live-admit-dock .queue-area-header,
.live-admit-dock .queue-top-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.live-admit-dock .queue-title{
  font-weight: 900;
  font-size: 13px;
  color: #0f172a;
  margin-right: 6px;
  white-space: nowrap;
}

.live-admit-dock input[type="text"],
.live-admit-dock .queue-input{
  height: 28px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
}

.live-admit-dock .queue-add-btn,
.live-admit-dock .queue-area-header button{
  height: 28px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  background: #e8f2ff;
}
.live-admit-dock .queue-add-btn:hover,
.live-admit-dock .queue-area-header button:hover{
  background: #d3e8ff;
}

.live-admit-dock .queue-list-compact,
.live-admit-dock .queue-items{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  max-height: 92px;     /* ~2 rows of compact cards */
  overflow-y: auto;
  padding-right: 4px;
}

.live-admit-dock .queue-item{
  width: 200px;         /* 3–4 across */
  padding: 8px 10px;
  border-radius: 16px;
}

.live-admit-dock .queue-item-title input{
  width: 100%;
  font-size: 13px;
}

.live-admit-dock .queue-item-actions button{
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

/* =========================
   HIGH ACUITY / HIGH RISK TILES (single canonical version)
========================= */
#acuityTiles{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.acuity-tile{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);

  aspect-ratio: 0.85 / 0.55;
  min-height: 180px;

  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.acuity-tile-title{
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111827;
  margin: 10px 0 10px;
}

.acuity-tile-count{
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  margin: 6px 0 8px;
  color: #111827;
}

.acuity-tile-rooms{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,0.30);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  color: #4b5563;
  line-height: 1.25;
  max-height: 4.5rem;
  overflow-y: auto;
}
.acuity-tile-rooms strong{ color:#111827; font-weight: 900; }

@media (max-width: 1200px){
  #acuityTiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px){
  #acuityTiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================
   Patient Details — table/grid UI
========================= */
.patient-table-wrap{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  overflow: auto;
}

.patient-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.patient-table thead th{
  position: sticky;
  top: 0;
  background: var(--table-head-bg);
  z-index: 2;
  padding: 10px 8px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--table-divider);
}

.patient-table tbody td{
  padding: 10px 8px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom: 1px solid var(--table-divider);
}

.patient-table tbody tr:hover td{
  background: var(--table-row-hover);
}

.patient-table .col-room,
.patient-table td.col-room{
  text-align: center;
  font-weight: 900;
  width: 70px;
}

.status-toggle{
  display: inline-flex;
  gap: 6px;
  background: rgba(248,250,252,0.9);
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 12px;
  padding: 4px;
}

.status-btn{
  border: 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
}

.status-btn.active{
  background: #0066c5;
  color: #fff;
}

.status-btn.empty.active{
  background: #ef4444;
}

.patient-row-empty td{ opacity: 0.55; }

.tags-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}
.tags-wrap label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* =========================
   ICONS (explain + rule flag)
========================= */
.icon-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.icon-btn{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  user-select: none;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}

.icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16,24,40,0.10);
}

.icon-btn:active{
  transform: translateY(0px);
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}

.flag-warn{
  background: #fbbf24;
  border-color: #f59e0b;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.flag-bad{
  background: #ef4444;
  border-color: #dc2626;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

/* =========================
   MODALS (generic legacy)
========================= */
.modal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content{
  background: white;
  max-width: 550px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.modal-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.modal-section{ margin: 10px 0; }

/* =========================
   Patient Profile Modal (overlay/card)
========================= */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal-card{
  width: min(820px, 95vw);
  max-height: min(80vh, 680px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(16,24,40,0.22);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  cursor: grab;
}
.modal-header:active{ cursor: grabbing; }

.modal-title{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.modal-close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

.modal-body{ padding: 14px 16px 16px 16px; }

.profile-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}
.profile-col h4{
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}

.tag-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.75);
}

.tag-item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #0f172a;
}
.tag-item input[type="checkbox"]{ width: 16px; height: 16px; }

.profile-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.btn{
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.btn-primary{
  border: none;
  background: #0f172a;
  color: #fff;
}

@media (max-width: 720px){
  .profile-grid{ grid-template-columns: 1fr; }
}

/* =========================
   AUTH GATE (full-page)
========================= */
.auth-gate{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;

  background:
    radial-gradient(900px 520px at 15% 10%, rgba(142,200,246,0.55), rgba(142,200,246,0.0) 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(142,200,246,0.35), rgba(142,200,246,0.0) 55%),
    linear-gradient(180deg, rgba(142,200,246,0.18), #f4f6f8 45%);
}
.auth-gate.show{ display: flex; }

.auth-card{
  width: 100%;
  max-width: 430px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,0.12);
  padding: 22px 22px 18px;
  backdrop-filter: blur(10px);
}

.auth-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.auth-brand-dot{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8EC8F6, #0066c5, #f37021);
  box-shadow: 0 8px 18px rgba(15,23,42,0.12);
  flex: 0 0 auto;
}

.auth-title{
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
}

.auth-subtitle{
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin-top: 3px;
}

.auth-form{ display: flex; flex-direction: column; gap: 12px; }
.auth-field{ display: flex; flex-direction: column; gap: 6px; }

.auth-password-wrap{
  position: relative;
  display: flex;
  align-items: center;
}

.auth-eye{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.75;
}

.auth-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.auth-remember{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}

.auth-link{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  color: #1d4ed8;
}
.auth-link:hover{ text-decoration: underline; }

.auth-primary{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, #111827, #0b1220);
  color: #fff;
  font-weight: 900;
}

.auth-divider{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  color: #64748b;
  font-weight: 900;
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after{
  content: "";
  height: 1px;
  background: rgba(15,23,42,0.12);
}

.auth-secondary{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  font-weight: 900;
  color: #0f172a;
}

.auth-msg{
  min-height: 18px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  margin-top: 2px;
}
.auth-msg.error{ color: #b91c1c; }
.auth-msg.ok{ color: #065f46; }

/* =========================
   AQI Modal (draggable)
========================= */
.aqi-panel{
  width: min(980px, 92vw);
  max-height: 86vh;
  overflow: hidden;
  border-radius: 16px;
  padding: 0;
}

.aqi-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(226,232,240,0.7);
  border-bottom: 1px solid rgba(148,163,184,0.30);
  cursor: grab;
  user-select: none;
}
.aqi-header:active{ cursor: grabbing; }

.aqi-title{
  font-weight: 900;
  font-size: 14px;
  color: #0f172a;
}
.aqi-subtitle{
  font-size: 12px;
  color: #475569;
  font-weight: 800;
}

.aqi-x{
  border: 0;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
}
.aqi-x:hover{ background: #e2e8f0; }

.aqi-body{
  padding: 12px 14px;
  overflow: auto;
  max-height: calc(86vh - 56px);
}

.aqi-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .aqi-grid{ grid-template-columns: 1fr; }
}

.aqi-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
  padding: 12px;
}

.aqi-section-title{
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 13px;
}

.aqi-line{
  font-size: 13px;
  color:#111827;
  margin: 6px 0;
}

.aqi-kpi-label{
  font-size: 12px;
  color:#475569;
  font-weight: 900;
}
.aqi-kpi-value{
  font-size: 44px;
  font-weight: 900;
  color:#0f172a;
  line-height: 1;
  margin: 6px 0 6px;
}
.aqi-kpi-sub{
  font-size: 12px;
  color:#475569;
  font-weight: 800;
  line-height: 1.25;
}

.aqi-table-wrap{
  overflow:auto;
  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 16px;
}

.aqi-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.aqi-table thead th{
  position: sticky;
  top: 0;
  background: rgba(226,232,240,0.7);
  z-index: 2;
  padding: 10px 8px;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(148,163,184,0.30);
}

.aqi-table tbody td{
  padding: 10px 8px;
  font-size: 12px;
  border-bottom: 1px solid rgba(148,163,184,0.30);
}

.aqi-table tbody tr:hover td{
  background: rgba(17,24,39,0.03);
}

/* =========================
   HISTORY
========================= */
.history-entry{
  background: rgba(249,250,251,0.9);
  padding: 10px;
  border-radius: 16px;
  margin-bottom: 10px;
  border-left: 4px solid #008fff;
}
.history-entry-title{ font-weight: 900; }
.history-entry-meta{ font-size: 12px; color: #555; }
.history-entry-tags{ margin: 8px 0; font-size: 13px; }

/* =====================================================
   MODERN CLEAN HEADER (Slack/Stripe-ish) + BACKGROUND
   Paste at VERY BOTTOM of style.css
===================================================== */

/* ----- Background behind the app: cleaner + less "toy" ----- */
body{
  background:
    radial-gradient(1100px 700px at 15% 0%, rgba(142,200,246,0.30), transparent 60%),
    radial-gradient(900px 650px at 85% 10%, rgba(99,102,241,0.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, rgba(244,246,248,1) 46%);
}

/* Optional: give main page content a bit of breathing room */
.app-main,
.main-container{
  padding-top: 12px;
}

/* ----- Header: clean white bar with subtle border ----- */
.app-header{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04) !important; /* minimal */
  backdrop-filter: none !important;

  padding: 12px 18px !important;
  gap: 18px !important;
}

/* Brand: simple, modern */
.brand-dot{
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #00a9e0, #0066c5, #f37021) !important;
  box-shadow: none !important;
}

.brand-title{
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1px !important;
  color: #0f172a !important;
}
.brand-subtitle{
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(71,85,105,0.95) !important;
}

/* Tabs row: look like top-nav links (not doughy pills) */
.top-tabs{
  gap: 14px !important;
  padding-bottom: 0 !important;
  overflow-x: auto;
}
.top-tabs::-webkit-scrollbar{ height: 8px; }
.top-tabs::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.45);
  border-radius: 999px;
}
.top-tabs::-webkit-scrollbar-track{ background: transparent; }

/* Nav-link style tabs */
.top-tabs .tabButton{
  background: transparent !important;
  color: rgba(15,23,42,0.75) !important;
  border: 1px solid transparent !important;

  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 13px !important;

  box-shadow: none !important;
  transform: none !important;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.top-tabs .tabButton:hover{
  background: rgba(15,23,42,0.04) !important;
  color: rgba(15,23,42,0.92) !important;
  border-color: rgba(15,23,42,0.06) !important;
}

/* Active: subtle underline + darker text (like modern nav) */
.top-tabs .tabButton.active{
  background: transparent !important;
  color: rgba(15,23,42,0.98) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  position: relative;
}
.top-tabs .tabButton.active::after{
  content:"";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 2px;
  background: rgba(15,23,42,0.92);
  border-radius: 999px;
}

/* Header right area buttons (if any) should look like: outline + primary black */
.app-header .header-right button,
.app-header .auth-menu-btn{
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  font-size: 13px !important;

  box-shadow: none !important;
  transform: none !important;
}

/* Default “outline” style for header buttons */
.app-header .header-right button,
.app-header .auth-menu-btn{
  background: #ffffff !important;
  color: rgba(15,23,42,0.92) !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
}
.app-header .header-right button:hover,
.app-header .auth-menu-btn:hover{
  background: rgba(15,23,42,0.03) !important;
}

/* Optional: if you give your primary CTA a class, it becomes the black pill */
.header-cta{
  background: rgba(15,23,42,0.96) !important;
  color: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.96) !important;
}
.header-cta:hover{
  background: rgba(2,6,23,0.98) !important;
}

/* Responsive: keep the header feeling airy on small screens */
@media (max-width: 900px){
  .app-header{ padding: 10px 12px !important; }
  .app-header-left{ min-width: 220px; }
  .brand-subtitle{ display: none; }
}

/* LIVE: hide legacy Populate button (keep Import + Print) */
button[onclick*="populateLive"],
button[onclick*="PopulateLive"],
button[onclick*="populateLiveAssignment"]{
  display: none !important;
}

/* =====================================================
   LIVE: Admit Queue stays in header colored space (no overlap)
===================================================== */

/* Make the queue container NOT float/overlay */
.queue-area{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 2;

  /* keep it up high and compact */
  margin: 8px 0 12px 0 !important;
  width: min(860px, 70vw);
  max-width: 900px;
}

/* Compact list: 3–4 cards across */
.queue-list-compact,
.queueList{
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 8px !important;

  max-height: 92px;        /* ~2 rows */
  overflow-y: auto;
}

/* Each admit item compact */
.queue-item{
  width: 210px;
  padding: 8px 10px !important;
  border-radius: 14px;
}

/* Keep the RN grid from getting tucked under anything */
#liveNurseAssignments{
  margin-top: 6px;
}

/* Hide legacy bottom Admit Queue section (keep inline queue) */
#admitQueueTab,
#admitQueueSection,
#admitQueuePanel,
#legacyAdmitQueue,
.legacy-admit-queue{
  display: none !important;
}


/* LIVE: title row (Live Assignment on left, Admit Queue on right) */
.live-title-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

/* Keep the page title tight */
.live-title-row .live-title{
  margin: 0;
}

/* Inline Admit Queue dock: compact, stays in header band, never overlays tiles */
.live-title-row .live-admit-dock{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;

  width: min(520px, 46vw);
  max-width: 560px;

  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.10);
  padding: 10px 10px 8px;
}

/* Make queue items compact inside the dock */
.live-title-row .live-admit-dock .queueList,
.live-title-row .live-admit-dock .queue-list-compact{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-height: 92px;
  overflow-y: auto;
}

/* Each admit item: compact card */
.live-title-row .live-admit-dock .queue-item{
  width: 210px;
  padding: 8px 10px;
  border-radius: 12px;
}

/* Top Admit Queue: show admits horizontally */
#admitQueueInlineHost #queueList{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  max-height: 120px;
}

/* Each admit card compact + horizontal-friendly */
#admitQueueInlineHost #queueList .queue-item{
  flex: 0 0 260px;
  max-width: 260px;
}

/* Hide legacy (static) Admit Queue block under RN grid */
#liveAssignmentTab .legacy-admit-queue,
#liveAssignmentTab #admitQueueLegacy,
#liveAssignmentTab #admitQueue,
#liveAssignmentTab .admit-queue-legacy,
#liveAssignmentTab h2 + button { 
  /* last selector is a catch-all; remove if it hides other stuff */
  display: none !important;
}

/* --- Patient Profile / Pre-Admit modal layout hardening --- */
.pp-overlay{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,0.55);
  display:none;               /* scripts set to flex when open */
  align-items:center;
  justify-content:center;
  z-index: 10000;
}

.pp-card{
  width: min(920px, 94vw);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.pp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

.pp-title{
  font-size: 18px;
  font-weight: 900;
}

.pp-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.pp-body{
  padding: 16px;
}

.pp-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}

@media (max-width: 860px){
  .pp-grid{ grid-template-columns: 1fr; }
}

.pp-taglist{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.pp-tag{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}

.pp-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 16px;
}

.pp-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.pp-label{
  font-weight: 800;
}

/* Force Discharge Bin to live in normal flow inside globalTopRightTools */
#globalTopRightTools {
  position: relative !important;
}

#globalDischargeBinHost {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* If the BIN CARD is what’s fixed, this catches common cases */
#globalDischargeBinHost .discharge-bin,
#globalDischargeBinHost .dischargeBin,
#globalDischargeBinHost [data-role="discharge-bin"] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}