* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f5f5f5; min-height: 100vh; }

/* Login */
#login-screen { display: none; min-height: 100vh; align-items: center; justify-content: center; background: #f5f5f5; }
#login-screen.open { display: flex; }
#login-box { background: #fff; border-radius: 12px; padding: 2rem; width: 320px; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
#login-box h2 { font-size: 1.1rem; color: #2c7be5; }
#login-box input { padding: 0.55rem 0.8rem; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95rem; outline: none; }
#login-box input:focus { border-color: #2c7be5; }
#login-box button { padding: 0.55rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95rem; }
#login-box button:hover { background: #1a65d0; }
#login-error { color: #dc3545; font-size: 0.82rem; min-height: 1rem; }

/* ============================================================
   App shell — mobile first
   ============================================================ */
#app { display: none; flex-direction: column; min-height: 100vh; }
#app.open { display: flex; }

/* Views */
.view { display: none; }
.view.active { display: block; }

/* Mobile top bar */
.app-topbar { display: flex; flex-direction: column; padding: 0.6rem 1rem 0.85rem; background: linear-gradient(135deg, #16365e 0%, #1f4c81 100%); flex-shrink: 0; gap: 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.14); }
.topbar-brand-row { display: flex; align-items: center; justify-content: space-between; }
.topbar-brand { font-size: 1rem; font-weight: 700; color: #fff; font-family: Georgia, serif; letter-spacing: 0.02em; }
.topbar-user-right { display: flex; align-items: center; gap: 0.5rem; }
#topbar-user-name { font-size: 0.72rem; color: rgba(255,255,255,0.6); }
#topbar-logout-btn { background: none; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); border-radius: 5px; padding: 0.2rem 0.6rem; cursor: pointer; font-size: 0.72rem; }
#topbar-logout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.topbar-clinic-name { font-size: 0.8rem; color: rgba(255,255,255,0.78); padding-bottom: 0.45rem; border-bottom: 1px solid rgba(255,255,255,0.18); }
.view-toggle { display: flex; gap: 0.6rem; margin-top: 0.45rem; padding: 0; background: transparent; border-radius: 0; }
.view-toggle-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0.78rem 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: rgba(255,255,255,0.88); font-size: 0.95rem; cursor: pointer; font-weight: 700; letter-spacing: 0.01em; min-height: 46px; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s, box-shadow 0.15s; }
.view-toggle-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.26); }
.view-toggle-btn.active { background: #ffffff; border-color: rgba(255,255,255,0.92); color: #18385f; box-shadow: 0 4px 10px rgba(9, 24, 44, 0.14); }

/* Sidebar — hidden on mobile */
.app-sidebar { display: none; }

/* Main content */
.app-main { flex: 1; overflow-y: auto; }
.view.active { padding: 1rem; min-height: 100%; }
.page-loading { display: none; padding: 2rem 1rem; text-align: center; color: #888; font-size: 0.95rem; }
.page-loading.open { display: block; }
.page-loading.page-loading-error { color: #c44747; }

#app-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42); z-index: 250; align-items: center; justify-content: center; padding: 1rem; }
#app-modal-overlay.open { display: flex; }
.app-modal-box { width: min(420px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.24); padding: 1.15rem; display: flex; flex-direction: column; gap: 0.9rem; }
.app-modal-title { font-size: 1rem; font-weight: 700; color: #1f2937; }
.app-modal-message { display: flex; flex-direction: column; gap: 0.45rem; color: #4b5563; font-size: 0.92rem; line-height: 1.45; }
.app-modal-actions { display: flex; justify-content: flex-end; gap: 0.65rem; }
.app-modal-btn { min-height: 42px; padding: 0.65rem 1rem; border-radius: 10px; border: 1px solid transparent; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.app-modal-btn.primary { background: #2c7be5; color: #fff; }
.app-modal-btn.secondary { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.app-modal-btn.danger { background: #dc2626; color: #fff; }
.app-modal-btn:hover { filter: brightness(0.96); }

/* Desktop / tablet layout */
@media (min-width: 768px) {
  #app.open { flex-direction: row; }
  .app-topbar { display: none; }
  .app-sidebar {
    display: flex; flex-direction: column;
    width: 200px; flex-shrink: 0;
    background: #1a3f6f; min-height: 100vh;
  }
  .sidebar-brand {
    font-size: 1.1rem; font-weight: 700; color: #fff;
    padding: 1.2rem 1rem 0.8rem;
    font-family: Georgia, serif; letter-spacing: 0.02em;
  }
  .sidebar-nav { display: flex; flex-direction: column; flex: 1; padding: 0.5rem 0; }
  .sidebar-link {
    padding: 0.65rem 1.1rem; color: rgba(255,255,255,0.65);
    font-size: 0.9rem; cursor: pointer; border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s; text-decoration: none; display: block;
  }
  .sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .sidebar-link.active { color: #fff; border-left-color: #fff; background: rgba(255,255,255,0.1); font-weight: 600; }
  .sidebar-user {
    padding: 0.75rem 1rem; border-top: 1px solid rgba(255,255,255,0.15);
    display: flex; flex-direction: column; gap: 0.4rem;
  }
  .sidebar-clinic { display: flex; flex-direction: column; gap: 0.1rem; }
  #nav-org-name { font-size: 0.82rem; font-weight: 600; color: #fff; }
  #nav-clinic-name { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
  #logged-in-user { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
  #logout-btn { background: none; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); border-radius: 5px; padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.78rem; align-self: flex-start; }
  #logout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .app-main { overflow-y: auto; height: 100vh; }
  .view.active { padding: 1.5rem 2rem; }
}

/* ============================================================
   Queue view
   ============================================================ */
.queue-toolbar { display: flex; align-items: center; margin-bottom: 1rem; gap: 0.5rem; }
.queue-date-label { font-size: 0.95rem; font-weight: 600; color: #333; flex: 1; }
.queue-clinic-label { font-size: 0.95rem; font-weight: 600; color: #333; flex: 1; text-align: center; }
.queue-toolbar-right { display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: flex-end; }
.queue-doctor-sel { padding: 0.45rem 0.7rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.88rem; outline: none; cursor: pointer; background: #fff; min-width: 160px; }
.queue-walkin-btn { padding: 0.45rem 0.85rem; background: #2c7be5; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600; min-height: 36px; white-space: nowrap; }
.queue-walkin-btn:hover { background: #1a65d0; }

.queue-closed-note { margin: 2rem auto; text-align: center; color: #888; font-size: 0.95rem; }
.queue-section { margin-bottom: 1rem; }
.queue-section-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 2px solid #e8e8e8; margin-bottom: 0.5rem; }
.queue-section-label { font-size: 0.8rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.05em; }
.queue-section-count { font-size: 0.75rem; background: #e8e8e8; color: #666; border-radius: 10px; padding: 0.1rem 0.5rem; }
.queue-section-empty { font-size: 0.82rem; color: #bbb; padding: 0.3rem 0; }

.queue-card { background: #fff; border-radius: 10px; margin-bottom: 0.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.07); cursor: pointer; overflow: hidden; transition: box-shadow 0.15s; }
.queue-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.queue-card-dragging { opacity: 0.4; }
.queue-card-drag-over { box-shadow: 0 -3px 0 0 #2c7be5, 0 2px 8px rgba(0,0,0,0.12); }
.queue-drag-handle { color: #ccc; font-size: 1.2rem; cursor: grab; padding: 0.5rem 0.6rem 0.5rem 0.25rem; flex-shrink: 0; line-height: 1; letter-spacing: -3px; user-select: none; min-height: 44px; display: flex; align-items: center; }
.queue-drag-handle:hover { color: #aaa; }
.queue-mobile-reorder { display: none; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.queue-reorder-btn { width: 2rem; min-width: 2rem; min-height: 2rem; padding: 0; border: 1px solid #dbe3ec; border-radius: 8px; background: #f8fafc; color: #475569; cursor: pointer; font-size: 0.95rem; line-height: 1; }
.queue-reorder-btn:hover:not(:disabled) { background: #eef4ff; color: #2c7be5; border-color: #bfd3f7; }
.queue-reorder-btn:disabled { opacity: 0.35; cursor: default; }
.queue-card-done { opacity: 0.6; }
.queue-card-terminal { opacity: 0.5; }
.queue-card-expanded { box-shadow: 0 2px 12px rgba(44,123,229,0.18); }

.queue-card-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; min-height: 56px; }
.queue-card-info { flex: 1; min-width: 0; }
.queue-card-name { font-size: 0.97rem; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-card-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.2rem; }
.queue-card-time { font-size: 0.78rem; color: #888; }
.queue-card-walkin { font-size: 0.72rem; background: #f0f6ff; color: #2c7be5; border-radius: 4px; padding: 0.1rem 0.4rem; }
.queue-card-channel { font-size: 0.72rem; background: #f5f5f5; color: #777; border-radius: 4px; padding: 0.1rem 0.4rem; text-transform: capitalize; }
.queue-card-status-badge { font-size: 0.72rem; border-radius: 4px; padding: 0.1rem 0.4rem; font-weight: 600; }
.queue-status-completed   { background: #d4edda; color: #155724; }
.queue-status-no-show     { background: #f8d7da; color: #721c24; }
.queue-status-cancelled   { background: #e2e3e5; color: #383d41; }
.queue-status-left-early  { background: #fff3cd; color: #856404; }
.queue-status-not-seen    { background: #f8d7da; color: #721c24; }
.queue-status-rebooked    { background: #d1ecf1; color: #0c5460; }

.queue-card-btns { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.queue-icon-btn { padding: 0.45rem 0.6rem; background: #f8fafc; color: #475569; border: 1px solid #dbe3ec; border-radius: 8px; cursor: pointer; font-size: 1rem; min-height: 40px; flex-shrink: 0; line-height: 1; }
.queue-icon-btn:hover { background: #eef4ff; color: #2c7be5; border-color: #bfd3f7; }
.queue-icon-btn-rebook:hover { color: #d97706; border-color: #f4c78a; background: #fff6e8; }
.queue-advance-btn { padding: 0.45rem 0.8rem; background: #2c7be5; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; white-space: nowrap; min-height: 40px; flex-shrink: 0; }
.queue-advance-btn:hover { filter: brightness(0.88); }
.queue-advance-btn:disabled { background: #ccc; cursor: default; }
.queue-undo-btn { padding: 0.45rem 0.6rem; background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; font-size: 1rem; min-height: 40px; flex-shrink: 0; line-height: 1; }
.queue-undo-btn:hover { background: #e5e7eb; color: #374151; }
.queue-undo-btn:disabled { opacity: 0.5; cursor: default; }

.queue-card-detail { padding: 0.75rem 1rem; border-top: 1px solid #f0f0f0; background: #fafafa; display: flex; flex-direction: column; gap: 0.6rem; }
.queue-detail-row { display: flex; align-items: center; gap: 0.6rem; }
.queue-detail-row label { font-size: 0.8rem; color: #888; width: 3.5rem; flex-shrink: 0; }
.queue-detail-status-sel { flex: 1; padding: 0.4rem 0.5rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; outline: none; cursor: pointer; text-transform: capitalize; }
.queue-detail-notes { flex: 1; padding: 0.4rem 0.5rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; outline: none; }
.queue-detail-notes:focus, .queue-detail-status-sel:focus { border-color: #2c7be5; }
.queue-detail-save-btn { align-self: flex-end; padding: 0.4rem 1.1rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.queue-detail-save-btn:hover { background: #1a65d0; }

/* ============================================================
   Booking shell (embedded in #view-book)
   ============================================================ */
#view-book { display: none; }
#view-book.active { display: flex; flex-direction: column; padding: 0; }
.booking-shell { display: flex; flex-direction: column; flex: 1; }
.booking-shell-top { display: flex; align-items: center; padding: 0.5rem 1rem; background: #fff; border-bottom: 1px solid #eee; min-height: 44px; gap: 0.5rem; }
.booking-cancel-btn { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 8px; color: #374151; font-size: 1rem; padding: 0.7rem 1.5rem; cursor: pointer; font-weight: 500; }
.booking-cancel-btn:hover { background: #e5e7eb; }
.booking-step-title-row { display: flex; align-items: center; gap: 0.75rem; padding: 1.2rem 1rem 0.5rem; }
.booking-step-title-row .booking-step-title { margin: 0; padding: 0; }
.booking-clinic-sel { font-size: 0.9rem; font-weight: 600; padding: 0.15rem 0.4rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; background: transparent; color: #374151; cursor: pointer; width: auto; }
.queue-clinic-sel { background: transparent; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; font-size: inherit; font-weight: 600; color: inherit; padding: 0.1rem 0.3rem; cursor: pointer; text-align: center; }
.settings-clinic-sel { font-size: 1rem; font-weight: 600; padding: 0.15rem 0.4rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; background: transparent; color: #222; cursor: pointer; }
.reports-title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
#reports-clinic-sel { font-size: 0.9rem; font-weight: 600; padding: 0.15rem 0.4rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; background: transparent; color: #374151; cursor: pointer; }
#booking-back { background: none; border: none; font-size: 1.3rem; color: #555; cursor: pointer; padding: 0.2rem 0.5rem; line-height: 1; }
#booking-content { flex: 1; overflow-y: auto; padding: 1rem; }
@media (min-width: 768px) {
  .booking-shell { min-height: 100vh; }
}

/* Date nav bar */
.date-nav { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1.5rem; }
.date-nav button { background: none; border: 1px solid #ddd; border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; font-size: 1rem; color: #555; }
.date-nav button:hover { background: #f0f6ff; border-color: #2c7be5; color: #2c7be5; }
.date-nav .date-label { font-size: 1rem; font-weight: 600; color: #333; cursor: pointer; padding: 0.3rem 0.7rem; border-radius: 6px; }
.date-nav .date-label:hover { background: #f0f6ff; color: #2c7be5; }
.date-nav .today-btn { font-size: 0.95rem; color: #2c7be5; border-color: #2c7be5; margin-left: auto; padding: 0.4rem 1rem; font-weight: 600; }

/* Calendar popover */
.cal-popover { display:none; position:absolute; background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.15); padding:1rem; z-index:50; }
.cal-popover.open { display:block; }
.cal-pop-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
.cal-pop-header h4 { font-size:0.9rem; color:#333; }
.cal-pop-header button { background:none; border:none; cursor:pointer; color:#555; font-size:1rem; padding:0.1rem 0.4rem; }
.cal-pop-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-pop-day-name { text-align:center; font-size:0.65rem; font-weight:600; color:#888; padding:0.2rem 0; }
.cal-pop-day { text-align:center; padding:0.3rem; font-size:0.82rem; color:#333; border-radius:50%; cursor:pointer; }
.cal-pop-day:hover { background:#e8f0fd; color:#2c7be5; }
.cal-pop-day.empty { cursor:default; }
.cal-pop-day.today { background:#2c7be5; color:#fff; }
.cal-pop-day.selected { background:#e8f0fd; color:#2c7be5; font-weight:600; }

/* Queues */
.queues { display: flex; flex-direction: column; gap: 1.5rem; }
.queue-panel { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); display: flex; flex-direction: column; overflow: hidden; }
.queue-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: #d4b8cc; color: #4a1e3a; }
.queue-header h3 { font-size: 0.95rem; font-weight: 600; }
.queue-header button { background: rgba(0,0,0,0.1); border: none; color: inherit; border-radius: 5px; padding: 0.3rem 0.9rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.queue-header button:hover { background: rgba(0,0,0,0.2); }
.queue-table-wrap { overflow-x: auto; flex: 1; padding-right: 0.5rem; }
.queue-footer { padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid #eee; }
#msg { font-size: 0.85rem; color: #2c7be5; }

/* Table */
table { border-collapse: collapse; width: 100%; table-layout: fixed; min-width: 820px; }
th { background: #f8f9fa; color: #555; padding: 0.5rem 0.7rem; text-align: left; font-size: 0.78rem; white-space: nowrap; border-bottom: 2px solid #eee; overflow: hidden; text-overflow: ellipsis; }
td { padding: 0; border-bottom: 1px solid #eee; vertical-align: middle; overflow: hidden; }
td input { width: 100%; border: none; padding: 0.4rem 0.7rem; font-size: 0.85rem; background: transparent; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td input:focus { background: #f0f6ff; }
tr:last-child td { border-bottom: none; }
tr.stage-checked-in    td { background: #e8f0ff !important; }
tr.stage-checked-in    td input, tr.stage-checked-in td select { background: #e8f0ff !important; }
tr.stage-checked-in    { border-left: 3px solid #84aee8; }
tr.stage-pre-consult   td { background: #fff4e5 !important; }
tr.stage-pre-consult   td input, tr.stage-pre-consult td select { background: #fff4e5 !important; }
tr.stage-pre-consult   { border-left: 3px solid #fd7e14; }
tr.stage-in-consult    td { background: #edf7ed !important; }
tr.stage-in-consult    td input, tr.stage-in-consult td select { background: #edf7ed !important; }
tr.stage-in-consult    { border-left: 3px solid #28a745; }
tr.stage-post-consult  td { background: #f3eeff !important; }
tr.stage-post-consult  td input, tr.stage-post-consult td select { background: #f3eeff !important; }
tr.stage-post-consult  { border-left: 3px solid #6f42c1; }
tr.stage-checked-out   td { background: #f4f4f4 !important; }
tr.stage-checked-out   td input, tr.stage-checked-out td select { background: #f4f4f4 !important; }
tr.stage-checked-out   { border-left: 3px solid #aaa; }
tr.new-row    td { background: #e8f0ff !important; }
tr.new-row    td input { background: #e8f0ff !important; }
tr.last-active td { background: #fffbe6 !important; }
tr.last-active td input, tr.last-active td select { background: #fffbe6 !important; }
th:nth-child(1)  { width: 6%; text-align: left; white-space: normal; }  /* Walk in */
th:nth-child(2)  { width: 2%; text-align: center; }                       /* ⤸ */
th:nth-child(3)  { width: 3%; text-align: center; }                       /* # */
th:nth-child(4)  { width: 6%; }                                           /* Scheduled */
th:nth-child(5)  { width: 15%; }                                          /* Name */
th:nth-child(6)  { width: 12%; }                                          /* Notes */
th:nth-child(7)  { width: 9%; }                                           /* Visit Reason */
th:nth-child(8)  { width: 8%; }                                           /* Status */
th:nth-child(9)  { width: 13%; }                                          /* Stage */
th:nth-child(10) { width: 9%; }                                           /* Time */
th:nth-child(11) { width: 7%; }                                           /* ↺⇄ */
td.num-cell { text-align: center; font-size: 0.8rem; color: #aaa; padding: 0 0.3rem; }
td.util-cell { padding: 0 0.2rem; white-space: nowrap; text-align: center; }

/* Status dropdown */
td select.status {
  border: none; padding: 0.3rem 0.5rem; font-size: 0.82rem; font-weight: 600;
  border-radius: 12px; cursor: pointer; outline: none; appearance: none;
  text-align: left; width: 100%; background: #eee; color: #555;
}
td select.status { background: transparent; color: #555; }
td select.status.confirmed                                                          { color: #198754; font-weight: 700; }
td select.status.cancelled, td select.status.left-early, td select.status.no-show  { color: #dc3545; font-weight: 700; }
td select.status.turned-away                                                        { color: #6c757d; font-weight: 700; }
td select.status.not-seen                                                           { color: #383d41; font-weight: 700; }
td select.status.rebooked                                                           { color: #664d03; font-weight: 700; }
td select.apptype        { border: none; padding: 0.3rem 0.5rem; font-size: 0.82rem; border-radius: 12px; cursor: pointer; outline: none; appearance: none; text-align: left; width: 100%; background: transparent; color: #555; }
td select.channel-select { border: none; padding: 0.3rem 0.5rem; font-size: 0.82rem; border-radius: 12px; cursor: pointer; outline: none; appearance: none; text-align: left; width: 100%; background: transparent; color: #555; }
td[data-col="Channel"], th:first-child { min-width: 8 rem; }
td select.provider  { border: none; padding: 0.3rem 0.5rem; font-size: 0.82rem; border-radius: 12px; cursor: pointer; outline: none; appearance: none; text-align: center; width: 100%; background: #f0fdf4; color: #276139; }
td select.provider.transferred { background: #fff3cd; color: #856404; }
.btn-transfer { padding: 0.28rem 0.7rem; font-size: 0.8rem; border: none; border-radius: 5px; cursor: pointer; background: #0dcaf0; color: #000; }
.btn-transfer:hover { background: #0bb5d8; }

.btn-rebook { padding: 0.28rem 0.7rem; font-size: 0.8rem; border: none; border-radius: 5px; cursor: pointer; background: #fd7e14; color: #fff; }
.btn-rebook:hover { background: #e8690a; }

.btn-delete { background: none; border: none; cursor: pointer; color: #bbb; font-size: 1rem; padding: 0.2rem 0.4rem; border-radius: 4px; }
.btn-delete:hover { color: #dc3545; background: #fdf0f0; }


/* Not seen modal */
#not-seen-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:100; align-items:center; justify-content:center; }
#not-seen-overlay.open { display:flex; }
#not-seen-box { background:#fff; border-radius:10px; padding:1.5rem; width:300px; display:flex; flex-direction:column; gap:0.8rem; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
#not-seen-box h3 { font-size:1rem; color:#333; }
#not-seen-box select { padding:0.5rem 0.7rem; border:1px solid #ccc; border-radius:6px; font-size:0.95rem; outline:none; }
#not-seen-box button { padding:0.45rem; background:#2c7be5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:0.9rem; }
#not-seen-box button:hover { background:#1a65d0; }
#not-seen-box #not-seen-cancel { background:#6c757d; }
#not-seen-box #not-seen-cancel:hover { background:#5a6268; }

/* Rebook modal */
#rebook-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:100; align-items:center; justify-content:center; }
#rebook-overlay.open { display:flex; }
#rebook-box { background:#fff; border-radius:10px; padding:1.5rem; width:300px; display:flex; flex-direction:column; gap:0.8rem; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
#rebook-box h3 { font-size:1rem; color:#333; }
#rebook-box select, #rebook-box input[type=date] { padding:0.5rem 0.7rem; border:1px solid #ccc; border-radius:6px; font-size:0.95rem; outline:none; }
#rebook-box button { padding:0.45rem; background:#fd7e14; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:0.9rem; }
#rebook-box button:hover { background:#e8690a; }
#rebook-box #rebook-cancel { background:#6c757d; }
#rebook-box #rebook-cancel:hover { background:#5a6268; }
#rebook-msg { font-size:0.82rem; color:#c44747; min-height:1rem; }

/* Rebook calendar */
#rebook-cal-nav { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
#rebook-cal-nav button { background:none; border:1px solid #ddd; color:#555; border-radius:5px; padding:0.2rem 0.5rem; font-size:1rem; cursor:pointer; }
#rebook-cal-nav button:hover { background:#f0f0f0; }
#rebook-cal-label { font-size:0.85rem; font-weight:600; color:#333; }
#rebook-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.rb-tag { font-size:1rem; color:#fd7e14; flex-shrink:0; padding:0 0.3rem; pointer-events:none; line-height:1; }

.rb-day-name { text-align:center; font-size:0.7rem; font-weight:600; color:#888; padding:0.2rem 0; }
.rb-day { text-align:center; border-radius:5px; padding:0.25rem 0.1rem; cursor:pointer; font-size:0.8rem; line-height:1.2; }
.rb-day:hover:not(.rb-past) { background:#fff3e0; }
.rb-day.rb-past { color:#ccc; cursor:default; }
.rb-day.rb-selected { background:#fd7e14; color:#fff; font-weight:700; }
.rb-d { display:block; }
.rb-cnt { display:block; font-size:0.65rem; color:#888; }
.rb-day.rb-selected .rb-cnt { color:#ffe0b2; }
#rebook-selected-date { font-size:0.8rem; color:#555; text-align:center; min-height:1.2em; }

/* Transfer modal */
#transfer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:100; align-items:center; justify-content:center; }
#transfer-overlay.open { display:flex; }
#transfer-box { background:#fff; border-radius:10px; padding:1.5rem; width:300px; display:flex; flex-direction:column; gap:0.8rem; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
#transfer-box h3 { font-size:1rem; color:#333; }
#transfer-box select { padding:0.5rem 0.7rem; border:1px solid #ccc; border-radius:6px; font-size:0.95rem; outline:none; }
#transfer-box select:focus { border-color:#2c7be5; }
#transfer-box button { padding:0.45rem; background:#2c7be5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:0.9rem; }
#transfer-box button:hover { background:#1a65d0; }
#transfer-box #transfer-cancel { background:#6c757d; }
#transfer-box #transfer-cancel:hover { background:#5a6268; }
td select.scheduled { border: none; padding: 0.3rem 0.4rem; font-size: 0.85rem; background: transparent; outline: none; width: 100%; color: #555; cursor: pointer; }

/* State cell */
td.state-cell { padding: 0.2rem 0.4rem; white-space: nowrap; }
td.state-btn-cell { padding: 0.2rem 0.3rem; white-space: nowrap; text-align: center; }
.state-cell-inner { display: flex; align-items: center; gap: 0.35rem; }
.state-label {
  font-size: 0.75rem; font-weight: 600; border-radius: 10px;
  padding: 0.18rem 0.55rem; white-space: nowrap;
}
.state-label.s-checked-in   { background: #cfe2ff; color: #084298; }
.state-label.s-pre-consult  { background: #ffe5d0; color: #b94a00; }
.state-label.s-in-consult   { background: #d4edda; color: #276139; }
.state-label.s-post-consult { background: #e8dff5; color: #6f42c1; }
.state-label.s-checked-out  { background: #e9ecef; color: #6c757d; }
.state-time { font-size: 0.75rem; color: #999; white-space: nowrap; }
.state-time-button {
  width: 7rem; padding: 0.18rem 0.4rem; font-size: 0.75rem; font-weight: 600;
  border: none; border-radius: 10px; cursor: pointer;
  background: #2c7be5; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: inline-block; text-align: center;
}
.state-time-button:hover { background: #1a65d0; }
.btn-reset { background: none; border: none; cursor: pointer; color: #bbb; font-size: 1rem; padding: 0.2rem 0.4rem; border-radius: 4px; }
.btn-reset:hover { color: #dc3545; background: #fdf0f0; }

/* Patients tab */
.patients-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.patients-card h2 { font-size: 1rem; color: #333; }

.settings-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.settings-card h2 { font-size: 1rem; color: #333; }
.search-card { gap: 0.9rem; }
.search-title-row h2 { font-size: 1.05rem; margin: 0; color: #333; }
.search-filters { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 0.6rem; }
.search-filter-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.search-filter-field span { font-size: 0.76rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.search-filter-field > .pt-detail-input,
.search-filter-field > .pt-detail-select { width: 100%; max-width: 100%; min-width: 0; }
.search-date-input { min-width: 0; width: 100%; max-width: 100%; appearance: none; -webkit-appearance: none; }
.search-date-input::-webkit-datetime-edit,
.search-date-input::-webkit-date-and-time-value { min-width: 0; }
.search-date-input::-webkit-calendar-picker-indicator { margin: 0; padding: 0; opacity: 0.85; }
.search-results-meta { font-size: 0.82rem; color: #6b7280; }
.search-results { display: flex; flex-direction: column; gap: 0.75rem; }
.search-empty { padding: 1rem 0.2rem; color: #9ca3af; font-size: 0.9rem; text-align: center; }
.search-appt-card { border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.search-appt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; }
.search-appt-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.search-appt-name { font-size: 0.97rem; font-weight: 700; color: #1f2937; }
.search-appt-meta, .search-appt-submeta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; font-size: 0.8rem; color: #6b7280; }
.search-appt-edit { border-top: 1px solid #edf2f7; background: #fafcff; padding: 0.9rem 1rem; }
.settings-col-calendar { display: grid; grid-template-columns: 1.3fr 1.4fr 1.3fr; gap: 1rem; align-items: start; }
.settings-cal-group { border: 4px solid #dde3ec; border-radius: 10px; overflow: hidden; }
#cfg-group-clinic     { grid-column: 1; }
#cfg-group-doctor     { grid-column: 2; }
#cfg-group-categories { grid-column: 3; }
#cfg-group-org        { grid-column: 1; }
#cfg-group-allclinics { grid-column: 2; }
.settings-cal-group-title { font-size: 0.78rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.06em; background: #f8f9fa; padding: 0.45rem 0.9rem; border-bottom: 4px solid #dde3ec; }
.settings-cal-subgroup { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.settings-cal-subgroup + .settings-cal-subgroup { border-top: 1px solid #eee; }
.settings-cal-subgroup-title { font-size: 0.82rem; font-weight: 600; color: #555; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; align-items: center; }
.settings-hours-row { display: flex; align-items: center; gap: 0.4rem; }
.settings-hours-row label { font-size: 0.8rem; color: #666; flex-shrink: 0; }
.settings-hours-slot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.settings-hours-slot label { font-size: 0.8rem; color: #666; }
.settings-hours-slot input { width: 3.5rem; padding: 0.3rem 0.4rem; border: 1px solid #ccc; border-radius: 5px; font-size: 0.85rem; outline: none; text-align: center; }
.settings-hours-slot input:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
.hours-sep { color: #aaa; font-size: 0.85rem; }
.hour-inp { width: 4.5rem; padding: 0.3rem 0.4rem; border: 1px solid #ccc; border-radius: 5px; font-size: 0.85rem; outline: none; text-align: center; }
.hour-inp:focus { border-color: #2c7be5; }
.hour-inp:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
.small-save-btn { align-self: flex-start; padding: 0.25rem 0.65rem; background: #2c7be5; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.small-save-btn:hover { background: #1a65d0; }
.small-save-btn:disabled { background: #aaa; cursor: not-allowed; }
.settings-save-msg { font-size: 0.78rem; }
.settings-grid label { font-size: 0.88rem; color: #555; }
.settings-grid input, .settings-grid textarea { padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 6px; font-size: 0.88rem; outline: none; width: 100%; font-family: inherit; resize: vertical; }
.settings-grid textarea { field-sizing: content; min-height: 4rem; }
.settings-grid input:focus, .settings-grid textarea:focus { border-color: #2c7be5; }
.settings-grid input:disabled, .settings-grid textarea:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
.settings-hint { font-size: 0.78rem; color: #aaa; font-weight: normal; }
.settings-note { font-size: 0.82rem; color: #888; min-height: 1rem; }
#cfg-save-btn { align-self: flex-start; padding: 0.45rem 1.2rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
#cfg-save-btn:hover { background: #1a65d0; }
#cfg-save-btn:disabled { background: #aaa; cursor: not-allowed; }
#cfg-msg { font-size: 0.82rem; color: #28a745; }
#patient-table-wrap { overflow-y: auto; max-height: calc(100vh - 280px); border-radius: 6px; border: 1px solid #eee; }
#patient-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#patient-table th { background: #f8f9fa; color: #555; font-size: 0.78rem; font-weight: 600; padding: 0.5rem 0.8rem; text-align: left; border-bottom: 2px solid #eee; position: sticky; top: 0; }
#patient-table td { padding: 0.75rem 0.8rem; border-bottom: 1px solid #f3f3f3; vertical-align: middle; }
#patient-table tr:last-child td { border-bottom: none; }
#patient-table tr:hover td { background: #fafafa; }
#patient-table td input[type=text] { width: 100%; border: none; padding: 0.45rem 0.8rem; font-size: 0.88rem; background: transparent; outline: none; }
#patient-table td input[type=text]:focus { background: #f0f6ff; }
#patient-table th:nth-child(1) { width: 8%; }
#patient-table th:nth-child(2) { width: 8%; text-align:center; }
#patient-table th:nth-child(3) { width: 20%; }
#patient-table th:nth-child(4) { width: 14%; }
#patient-table th:nth-child(5) { width: 18%; }
#patient-table th:nth-child(6) { width: 32%; }
.pt-new-badge { display:inline-block; font-size:0.7rem; font-weight:600; background:#e8f0ff; color:#2c7be5; border-radius:4px; padding:0.15rem 0.5rem; }
.pt-id { font-size: 0.8rem; color: #888; }
.pt-list-name { font-size: 0.88rem; color: #333; }
.pt-list-cat  { font-size: 0.85rem; color: #666; }
.pt-list-notes { font-size: 0.82rem; color: #888; }
.pt-list-next-appt { font-size: 0.82rem; }
.pt-next-appt-date { color: #333; }
.pt-next-appt-time { color: #666; margin-left: 0.35rem; }
.pt-next-appt-time-muted { color: #9aa4b2; }
.pt-next-appt-doc  { color: #888; font-size: 0.78rem; margin-left: 0.35rem; }
.pt-detail-fields { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.75rem; }
.pt-detail-fields label { font-size: 0.82rem; color: #888; }
.pt-detail-input { padding: 0.4rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.88rem; outline: none; width: 100%; box-sizing: border-box; }
.pt-detail-input:focus { border-color: #2c7be5; }
.pt-detail-select { padding: 0.4rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.88rem; outline: none; width: 100%; background: #fff; cursor: pointer; }
.pt-detail-select:focus { border-color: #2c7be5; }
.pt-detail-notes-wrap { margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pt-detail-notes-label { font-size: 0.82rem; color: #888; }
.pt-detail-textarea { padding: 0.5rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.88rem; outline: none; width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; line-height: 1.5; }
.pt-detail-textarea:focus { border-color: #2c7be5; }
.pt-detail-save-row { display: flex; align-items: center; gap: 0.75rem; }
.pt-detail-save-btn { padding: 0.4rem 1.1rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.pt-detail-save-btn:hover { background: #1a65d0; }
.pt-detail-save-btn:disabled { background: #ccc; cursor: default; }
.pt-detail-save-msg { font-size: 0.82rem; }
#view-patients { position: relative; }
.pt-detail-panel { position: absolute; inset: 0; background: #fff; z-index: 20; overflow-y: auto; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.pt-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 1; }
.pt-detail-header-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pt-detail-name { font-size: 1.05rem; font-weight: 700; color: #222; }
.pt-detail-section { padding: 1.25rem 1.25rem 0.75rem; border-bottom: 1px solid #f0f0f0; }
.pt-detail-section:last-child { border-bottom: none; }
.pt-detail-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 0.75rem; }
.pt-detail-empty { font-size: 0.85rem; color: #bbb; padding: 0.5rem 0; }
.pt-detail-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.pt-detail-table th { text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #999; padding: 0.3rem 0.6rem; border-bottom: 2px solid #eee; }
.pt-detail-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #f3f3f3; color: #333; vertical-align: middle; }
.pt-detail-table tr:last-child td { border-bottom: none; }
.pt-detail-status { font-size: 0.72rem; border-radius: 4px; padding: 0.15rem 0.45rem; font-weight: 600; background: #f3f4f6; color: #555; text-transform: capitalize; }
.pt-status-completed    { background: #d4edda; color: #155724; }
.pt-status-checked-out  { background: #d4edda; color: #155724; }
.pt-status-no-show, .pt-status-no_show   { background: #f8d7da; color: #721c24; }
.pt-status-cancelled    { background: #fee2e2; color: #b91c1c; }
.pt-status-left-early, .pt-status-left_early  { background: #fff3cd; color: #856404; }
.pt-status-not-seen, .pt-status-not_seen   { background: #f8d7da; color: #721c24; }
.pt-status-rebooked     { background: #d1ecf1; color: #0c5460; }
.pt-status-checked-in   { background: #e8f0fe; color: #2c5be5; }
.pt-status-in-consult   { background: #d1fae5; color: #065f46; }
.pt-appt-actions { white-space: nowrap; text-align: right; padding: 0.3rem 0.4rem; display: flex; justify-content: flex-end; align-items: center; gap: 0.3rem; flex-wrap: nowrap; min-width: 6.8rem; }
.pt-detail-table td:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-appt-edit-btn { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0; line-height: 1; }
.pt-appt-edit-btn:hover { opacity: 1; }
.appt-icon-btn { width: 1.95rem; min-width: 1.95rem; height: 1.95rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7dee8; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); opacity: 0.95; }
.appt-icon-btn:hover { transform: translateY(-1px); }
.appt-icon-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.appt-edit-icon-btn { color: #334155; }
.appt-cancel-icon-btn { color: #c2410c; background: #fff7ed; border-color: #fdba74; }
.appt-delete-icon-btn { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }
.pt-appt-edit-row td { background: #f8faff; border-bottom: 1px solid #dde8ff; }
.pt-appt-edit-cell { padding: 0.9rem 1rem; }
.pt-appt-edit-form { display: grid; grid-template-columns: 6rem 1fr 6rem 1fr; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.75rem; }
.pt-appt-edit-form label { font-size: 0.8rem; color: #888; }
.pt-appt-edit-btns { display: flex; gap: 0.5rem; }
.pt-appt-cancel-btn { padding: 0.4rem 1rem; background: #f3f4f6; color: #555; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.pt-appt-cancel-btn:hover { background: #e5e7eb; }
.pt-input-error { border-color: #e53e3e !important; background: #fff5f5 !important; }
.pt-appt-edit-err { font-size: 0.82rem; color: #c00; min-height: 1.2em; margin-bottom: 0.4rem; }
.pt-appt-notes-cell { color: #777; font-size: 0.8rem; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-mobile-cell { color: #6b7280; font-size: 0.78rem; white-space: nowrap; }
.calendar-notes-cell { max-width: 140px; }
.add-patient-row { display: flex; gap: 0.5rem; }
.add-patient-row input { flex: 1; padding: 0.45rem 0.7rem; border: 1px solid #ccc; border-radius: 6px; font-size: 0.9rem; outline: none; }
.add-patient-row input:focus { border-color: #2c7be5; }
.add-patient-row button { padding: 0.45rem 1rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.add-patient-row button:hover { background: #1a65d0; }

/* Monthly calendar */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-day-name { text-align: center; font-size: 0.72rem; font-weight: 600; color: #888; padding: 0.5rem 0; background: #f8f9fa; border-bottom: 1px solid #eee; }
.month-day { min-height: 110px; padding: 0.5rem 0.6rem; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.month-day:hover { background: #f0f6ff; }
.month-day.other-month { background: #fafafa; cursor: default; }
.month-day.other-month .month-day-num-digit { color: #ccc; }
.month-day.is-today .month-day-num-digit { background: #2c7be5; color: #fff; border-radius: 50%; }
.month-day-num { font-size: 0.82rem; font-weight: 600; color: #333; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.3rem; }
.month-day-num-digit { width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.month-day-counts { display: flex; flex-direction: column; gap: 0.25rem; }
.month-count-pill { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-count-a { background: #e8d5e5; color: #4a1e3a; }
.month-count-b { background: #c8ddd8; color: #1e4a3a; }
.cal-clinic-block { border: 2px solid #e2e8f0; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; gap: 0; cursor: pointer; background: #fff; }
.cal-clinic-block:hover { opacity: 0.85; }
.cal-clinic-block-name { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.35rem; }
.cal-clinic-block-pills { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.2rem 0.35rem; }
.color-swatch-row { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.settings-allclinics-color-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.settings-allclinics-color-label { font-size: 0.85rem; font-weight: 600; min-width: 110px; color: #374151; }
.color-swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; }
.color-swatch:hover { opacity: 0.8; }
.color-swatch-selected { border-color: #333; }
.color-swatch-reset { font-size: 0.85rem; color: #aaa; cursor: pointer; line-height: 1.1rem; padding: 0 0.1rem; }
.color-swatch-reset:hover { color: #555; }

/* View toggle */
.view-bar { display: none; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.view-bar.open { display: flex; }
.view-btn { background: none; border: 1px solid #ddd; border-radius: 6px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.82rem; color: #555; }
.view-btn:hover { background: #f0f6ff; border-color: #2c7be5; color: #2c7be5; }
.view-btn.active { background: #2c7be5; border-color: #2c7be5; color: #fff; }
#clinic-selector-bar, #doctor-selector { padding: 0.3rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; outline: none; cursor: pointer; display: none; }

/* Blocked day banner in queue */
#blocked-day-banner { display: none; background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 0.6rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; color: #856404; font-weight: 500; }
#blocked-day-banner.show { display: block; }

/* Calendar blocked day */
.month-day.cal-day-blocked { background: #f8f8f8; }
.month-day.cal-day-blocked:hover { background: #f5f5f5; }
.month-day.cal-day-blocked .month-day-num-digit { color: #ccc; }
.month-day.cal-day-blocked .cal-manage-btn { display: none; }
.cal-block-label { font-size: 0.68rem; color: #bbb; margin-top: 0.1rem; font-style: italic; }
.cal-block-inline-label { font-size: 0.68rem; color: #bbb; font-style: italic; margin-left: 0.3rem; }

/* Calendar day detail panel */
#view-calendar { position: relative; }
.cal-day-panel { position: absolute; inset: 0; background: #fff; z-index: 20; overflow-y: auto; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.cal-day-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 1; }
.cal-day-panel-title { font-size: 1rem; font-weight: 700; color: #222; display: flex; align-items: center; gap: 0.6rem; }
.cal-day-panel-close { background: none; border: none; font-size: 1rem; color: #888; cursor: pointer; padding: 0.3rem 0.5rem; line-height: 1; }
.cal-day-panel-close:hover { color: #333; }
.cal-day-panel-clinic { margin-bottom: 1.5rem; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; }
.cal-day-panel-clinic-name { font-size: 0.85rem; font-weight: 700; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.6rem; }
.cal-closed-badge { font-size: 0.72rem; font-weight: 600; background: #fee2e2; color: #b91c1c; border-radius: 4px; padding: 0.15rem 0.5rem; white-space: nowrap; }
.cal-day-panel-section { padding: 0.75rem 1rem 0.5rem; border-top: 1px solid #f0f0f0; }
.cal-day-panel-doc { display: block; padding: 0.3rem 0.7rem; border-radius: 5px; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; }
.cal-day-panel-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; border: none; border-radius: 0; overflow: visible; }
.cal-day-panel-table thead th { text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #999; background: transparent; padding: 0.3rem 0.6rem; border-bottom: 2px solid #eee; border-right: none; }
.cal-day-panel-table thead th:last-child { border-right: none; }
.cal-day-panel-table tbody td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #f3f3f3; border-right: none; color: #333; vertical-align: middle; }
.cal-day-panel-table tbody td:last-child { border-right: none; }
.cal-day-panel-table tbody tr:last-child td { border-bottom: none; }
.cal-day-panel-doc-foot { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0 0; }
.cal-day-panel-count { font-size: 0.85rem; color: #888; }
.cal-day-panel-empty { color: #aaa; text-align: center; padding: 3rem 1rem; font-size: 0.9rem; }
.cal-day-panel-add-btn {
  font-size: 0.85rem; padding: 0.25rem 0.75rem; border-radius: 4px;
  background: #e8f0fe; color: #2c5be5; border: 1px solid #b8cef8; cursor: pointer;
}
.cal-day-panel-add-btn:hover { background: #d0e2ff; }
.cal-del-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.35; padding: 0 0.2rem; line-height: 1; }
.cal-del-btn:hover { opacity: 0.85; }
.cal-del-btn:disabled { opacity: 0.2; cursor: default; }
.cal-inline-input, .cal-inline-sel {
  width: 100%; box-sizing: border-box;
  background: transparent; border: none; border-bottom: 1px solid transparent;
  font-size: 0.82rem; color: inherit; padding: 1px 2px; font-family: inherit;
}
.cal-inline-input:hover, .cal-inline-sel:hover,
.cal-inline-input:focus, .cal-inline-sel:focus {
  border-bottom-color: #888; outline: none; background: #f5f5f5;
}

/* Settings blocked dates */
.settings-weekday-checks { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.1rem 0; }
.settings-weekday-checks label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: #444; cursor: pointer; }
.blocked-date-list { display: flex; flex-direction: column; gap: 0; max-height: 9rem; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }
.blocked-date-list:empty { display: none; }
.blocked-date-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid #f0f0f0; }
.blocked-date-item:last-child { border-bottom: none; }
.blocked-date-item .bd-date { font-weight: 600; color: #444; min-width: 7rem; }
.blocked-date-item .bd-label { color: #777; flex: 1; font-size: 0.8rem; }
.blocked-date-remove { background: none; border: none; cursor: pointer; color: #ccc; font-size: 0.85rem; padding: 0.1rem 0.3rem; border-radius: 3px; line-height: 1; }
.blocked-date-remove:hover { color: #dc3545; background: #fdf0f0; }
.blocked-date-add-row { display: flex; flex-direction: column; gap: 0.35rem; }
.blocked-date-add-row-dates { display: flex; align-items: center; gap: 0.3rem; }
.blocked-date-add-row-bottom { display: flex; align-items: center; gap: 0.35rem; }
.blocked-date-add-row input[type=date] { padding: 0.3rem 0.4rem; border: 1px solid #ccc; border-radius: 5px; font-size: 0.83rem; outline: none; min-width: 0; flex: 1; }
.blocked-date-range-sep { color: #aaa; font-size: 0.85rem; flex-shrink: 0; }
.blocked-date-add-row input[type=text] { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 5px; font-size: 0.83rem; outline: none; }
.blocked-date-add-row input:focus { border-color: #2c7be5; }
.blocked-date-add-row input:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
.blocked-date-add-btn { padding: 0.3rem 0.75rem; background: #2c7be5; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.83rem; white-space: nowrap; }
.blocked-date-add-btn:hover { background: #1a65d0; }
.blocked-date-add-btn:disabled { background: #aaa; cursor: not-allowed; }
.blocked-label-error { font-size: 0.78rem; color: #dc3545; min-height: 1rem; }
.blocked-date-add-row input.input-error { border-color: #dc3545; }

/* Calendar manage button */
.month-day { position: relative; }
.cal-manage-btn {
  position: absolute; top: 0.25rem; right: 0.25rem;
  background: none; border: 1px solid #ddd; cursor: pointer;
  font-size: 1rem; color: #bbb; padding: 0.2rem 0.35rem;
  border-radius: 5px; line-height: 1; opacity: 0;
  transition: opacity 0.15s;
}
.month-day:hover .cal-manage-btn { opacity: 1; }
.cal-manage-btn:hover { color: #2c7be5; background: #e8f0fd; border-color: #2c7be5; }
.month-count-pill.pill-day-off { background: #f0f0f0; color: #aaa; cursor: default; }

/* Doctor hours in settings */
.settings-doctor-hours-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; border-bottom: 1px solid #f3f3f3; }
.settings-doctor-hours-row:last-child { border-bottom: none; }
.settings-doctor-hours-row .doc-name { flex: 1; min-width: 0; font-size: 0.85rem; color: #444; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-doctor-hours-row label { font-size: 0.75rem; color: #999; flex-shrink: 0; }
.settings-doctor-hours-row input { width: 4.5rem; padding: 0.25rem 0.3rem; border: 1px solid #ccc; border-radius: 5px; font-size: 0.85rem; outline: none; text-align: center; flex-shrink: 0; }
.settings-doctor-hours-row input:focus { border-color: #2c7be5; }
.settings-doctor-hours-row input:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
#cfg-doctor-hours-save-btn { align-self: flex-start; padding: 0.4rem 1rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem; }
#cfg-doctor-hours-save-btn:hover { background: #1a65d0; }
#cfg-doctor-hours-save-btn:disabled { background: #aaa; cursor: not-allowed; }
#cfg-doctor-hours-msg { font-size: 0.82rem; color: #28a745; }

/* Day override modal */
#day-override-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
#day-override-overlay.open { display: flex; }
#day-override-box { background: #fff; border-radius: 14px; padding: 1.25rem; width: 760px; max-width: 95vw; display: flex; flex-direction: column; gap: 0.85rem; box-shadow: 0 4px 20px rgba(0,0,0,0.2); max-height: 85vh; overflow-y: auto; }
#day-override-box h3 { font-size: 1rem; color: #333; }
#day-override-subtitle { font-size: 0.82rem; color: #888; margin-top: -0.4rem; }
.day-schedule-clinic-heading { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin: 0.5rem 0 0.15rem; }
.day-schedule-card { border: 1px solid #e7ebf0; border-radius: 12px; padding: 0.9rem; background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); display: flex; flex-direction: column; gap: 0.8rem; }
.day-schedule-card-head { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; }
.day-schedule-card-name { font-size: 0.96rem; font-weight: 700; color: #273142; }
.day-schedule-card-actions { display: flex; align-items: center; gap: 0.45rem; }
.day-schedule-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: #455468; cursor: pointer; }
.day-schedule-hours { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.day-schedule-mini-label { font-size: 0.75rem; font-weight: 600; color: #7a8798; text-transform: uppercase; letter-spacing: 0.04em; }
.day-schedule-time { padding: 0.4rem 0.5rem; border: 1px solid #d6dde6; border-radius: 8px; font-size: 0.84rem; outline: none; min-width: 6rem; background: #fff; }
.day-schedule-blocks { border-top: 1px solid #eef2f6; padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.day-schedule-blocks-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.84rem; font-weight: 600; color: #4a5565; }
.day-schedule-block-list { display: flex; flex-direction: column; gap: 0.5rem; }
.day-schedule-block-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.6rem; border: 1px solid #edf1f5; border-radius: 10px; background: #fff; }
.day-schedule-block-note { flex: 1; min-width: 10rem; padding: 0.42rem 0.55rem; border: 1px solid #d6dde6; border-radius: 8px; font-size: 0.84rem; outline: none; }
.day-schedule-add-block { padding: 0.35rem 0.7rem; border: 1px solid #bfd3f7; background: #eef4ff; color: #245fc7; border-radius: 8px; font-size: 0.8rem; cursor: pointer; }
.day-schedule-add-block:hover { background: #e2edff; }
.day-schedule-block-remove { padding: 0.38rem 0.7rem; border: 1px solid #ead5d5; background: #fff7f7; color: #c44747; border-radius: 8px; font-size: 0.8rem; cursor: pointer; }
.day-schedule-block-remove:hover { background: #fff0f0; }
.day-schedule-msg { min-height: 1rem; font-size: 0.8rem; color: #c44747; }
.day-schedule-hours.is-disabled,
.day-schedule-blocks.is-disabled { opacity: 0.5; }
.day-override-save { padding: 0.25rem 0.65rem; background: #2c7be5; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.day-override-save:hover { background: #1a65d0; }
.day-override-remove { padding: 0.25rem 0.5rem; background: none; border: 1px solid #ddd; color: #dc3545; border-radius: 5px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.day-override-remove:hover { background: #fdf0f0; border-color: #dc3545; }
#day-override-close { align-self: flex-end; padding: 0.4rem 1.1rem; background: #6c757d; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem; }
#day-override-close:hover { background: #5a6268; }

/* Autocomplete */
.ac-wrap { position: relative; width: 100%; }
.ac-wrap input { width: 100%; border: none; padding: 0.5rem 0.8rem; font-size: 0.9rem; background: transparent; outline: none; }
.ac-wrap input:focus { background: #f0f6ff; }
.ac-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 50; max-height: 180px; overflow-y: auto; }
.ac-dropdown.open { display: block; }
.ac-item { padding: 0.4rem 0.8rem; font-size: 0.88rem; cursor: pointer; display: flex; gap: 0.5rem; align-items: center; }
.ac-item:hover { background: #e8f0fd; }
.ac-item .ac-id { font-size: 0.75rem; color: #888; }

/* ============================================================
   Stages app
   ============================================================ */
.stages-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #fff; border-bottom: 1px solid #e8e8e8; }
.stages-date-label { font-size: 0.95rem; font-weight: 600; color: #333; flex: 1; }
#stages-doctor-select { padding: 0.45rem 0.7rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; outline: none; cursor: pointer; background: #fff; max-width: 180px; }

.stages-container { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.stages-empty { text-align: center; color: #aaa; font-size: 0.95rem; padding: 3rem 1rem; }

.stage-card { background: #fff; border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.07); display: flex; align-items: center; gap: 0.75rem; }
.stage-card-info { flex: 1; min-width: 0; }
.stage-card-name { font-size: 1rem; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; flex-wrap: wrap; }
.stage-card-time { font-size: 0.82rem; color: #888; }
.stage-card-walkin { font-size: 0.75rem; background: #f0f6ff; color: #2c7be5; border-radius: 4px; padding: 0.1rem 0.4rem; }

.stage-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 6px; padding: 0.2rem 0.55rem; white-space: nowrap; }
.stage-badge.waiting   { background: #f0f4f8; color: #666; }
.stage-badge.checked-in { background: #e8f4fd; color: #0077c8; }
.stage-badge.pre-consult { background: #fff3cd; color: #856404; }
.stage-badge.in-consult  { background: #d1ecf1; color: #0c5460; }
.stage-badge.post-consult { background: #d4edda; color: #155724; }
.stage-badge.checked-out  { background: #e2e3e5; color: #383d41; }
.stage-badge.completed    { background: #d4edda; color: #155724; }

.stage-advance-btn { min-width: 48px; min-height: 48px; padding: 0.5rem 0.9rem; background: #2c7be5; color: #fff; border: none; border-radius: 10px; cursor: pointer; font-size: 0.85rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.stage-advance-btn:hover { background: #1a65d0; }
.stage-advance-btn:disabled { background: #ccc; cursor: default; }

/* Stages app header */
#app.stages-app .app-header { padding: 0.6rem 1rem; }
#app.stages-app .app-header #logout-btn { font-size: 0.78rem; padding: 0.25rem 0.6rem; }

/* ============================================================
   Booking app
   ============================================================ */
.booking-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; background: #1a3f6f; }
.booking-back-btn { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 1.3rem; cursor: pointer; padding: 0.2rem 0.5rem; line-height: 1; min-width: 36px; min-height: 36px; }
.booking-header #nav-clinic-name { flex: 1; color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 600; text-align: center; }
.booking-header #logout-btn { font-size: 0.78rem; padding: 0.25rem 0.65rem; }


#booking-content { flex: 1; overflow-y: auto; padding: 1rem; }

.booking-footer { padding: 0.75rem 1rem; background: #fff; border-top: 1px solid #eee; position: sticky; bottom: 0; z-index: 1; display: flex; gap: 0.75rem; justify-content: flex-end; }
.booking-next-btn { width: 100%; padding: 0.85rem; background: #2c7be5; color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 48px; }
.booking-next-btn:hover { background: #1a65d0; }
.booking-next-btn:disabled { background: #ccc; cursor: default; }

.booking-step-title { font-size: 1.05rem; font-weight: 700; color: #222; margin-bottom: 1rem; }

/* Step 1 — Doctor picker */
.booking-doctor-list { display: flex; flex-direction: column; gap: 0.65rem; }
.booking-doctor-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; background: #fff; border: 2px solid #eee; border-radius: 12px; cursor: pointer; min-height: 60px; transition: border-color 0.15s; }
.booking-doctor-card:hover { border-color: #2c7be5; }
.booking-doctor-card.selected { border-color: #2c7be5; background: #f0f6ff; }
.booking-doctor-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.booking-doctor-name { font-size: 0.97rem; font-weight: 600; color: #222; }

/* Step 2 — Calendar */
.booking-cal { background: #fff; border-radius: 10px; overflow: hidden; }
.booking-cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.9rem; border-bottom: 1px solid #eee; }
.booking-cal-nav span { font-size: 0.95rem; font-weight: 600; color: #333; }
.booking-cal-nav button { background: none; border: 1px solid #ddd; border-radius: 6px; padding: 0.25rem 0.65rem; cursor: pointer; font-size: 1rem; color: #555; }
.booking-cal-nav button:hover { border-color: #2c7be5; color: #2c7be5; }
.booking-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.booking-cal-dayname { text-align: center; font-size: 0.7rem; font-weight: 600; color: #888; padding: 0.4rem 0; background: #fafafa; }
.booking-cal-day { text-align: center; padding: 0.45rem 0.2rem; font-size: 0.9rem; color: #333; cursor: pointer; border-radius: 8px; margin: 2px; min-height: 42px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.15rem; }
.booking-cal-day-num { font-weight: 700; line-height: 1; }
.booking-cal-day-count { font-size: 0.68rem; line-height: 1.1; color: #c2410c; white-space: nowrap; font-weight: 700; }
.booking-cal-day:hover:not(.disabled):not(.blocked) { background: #e8f0fd; color: #2c7be5; }
.booking-cal-day.selected { background: #2c7be5; color: #fff; font-weight: 700; }
.booking-cal-day.selected .booking-cal-day-count { color: #b42318; background: rgba(255,255,255,0.94); border-radius: 999px; padding: 0.02rem 0.28rem; }
.booking-cal-day.today { font-weight: 700; color: #2c7be5; }
.booking-cal-day.blocked { color: #ccc; cursor: default; text-decoration: line-through; }
.booking-cal-day.disabled { color: #ddd; cursor: default; }
.booking-cal-day.disabled .booking-cal-day-count { color: #c7cdd8; }
.booking-cal-day.other-month { color: #ccc; }

/* Step 3 — Time slots */
.booking-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.booking-slot { padding: 0.65rem 0.3rem; border: 2px solid #ddd; border-radius: 9px; text-align: center; font-size: 0.88rem; cursor: pointer; background: #fff; min-height: 48px; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; }
.booking-slot:hover:not(.taken):not(.disabled) { border-color: #2c7be5; color: #2c7be5; }
.booking-slot.selected,
.booking-slot.selected:hover,
.booking-slot.selected:focus,
.booking-slot.selected:focus-visible,
.booking-slot.selected:active {
  border-color: #2c7be5;
  background: #2c7be5;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 600;
}
.booking-slot.taken { background: #f5f5f5; color: #bbb; cursor: default; border-color: #eee; }
.booking-slot.disabled { color: #ddd; cursor: default; }

/* Step 4 — Patient search */
.booking-patient-search { position: relative; margin-bottom: 0.75rem; }
.booking-patient-search input { width: 100%; padding: 0.7rem 1rem; border: 1px solid #ddd; border-radius: 10px; font-size: 0.95rem; outline: none; }
.booking-patient-search input:focus { border-color: #2c7be5; }
.booking-patient-results { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.booking-patient-item { padding: 0.7rem 1rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.booking-patient-item:hover { background: #f0f6ff; }
.booking-patient-item.selected { background: #e8f0fd; font-weight: 600; }
.booking-patient-new { border-top: 1px solid #eee; color: #2c7be5; font-weight: 600; }
.booking-patient-id { font-size: 0.75rem; color: #aaa; }
.booking-channel-wrap { margin-top: 1rem; }
.booking-channel-wrap label { font-size: 0.85rem; color: #555; display: block; margin-bottom: 0.35rem; }
.booking-channel-wrap select { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; outline: none; background: #fff; }

/* Step 5 — Confirm */
.booking-summary { background: #fff; border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.65rem; }
.booking-summary-row { display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.9rem; border-bottom: 1px solid #f0f0f0; padding-bottom: 0.55rem; }
.booking-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.booking-summary-label { color: #888; flex-shrink: 0; margin-right: 0.5rem; }
.booking-summary-value { font-weight: 600; color: #222; text-align: right; }
.booking-confirm-btn { width: 100%; padding: 0.9rem; background: #28a745; color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; min-height: 52px; margin-top: 1rem; }
.booking-confirm-btn:hover { background: #218838; }
.booking-confirm-btn:disabled { background: #ccc; cursor: default; }

.booking-success { text-align: center; padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.booking-success-icon { font-size: 3rem; }
.booking-success h2 { font-size: 1.2rem; font-weight: 700; color: #28a745; }
.booking-success p { font-size: 0.9rem; color: #666; }
.booking-success button { margin-top: 0.5rem; padding: 0.7rem 2rem; background: #2c7be5; color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.booking-success button:hover { background: #1a65d0; }

/* Step 1 / Step 3 — option list (booking type, visit reason) */
.booking-option-list { display: flex; flex-direction: column; gap: 0.6rem; }
.booking-option-card { width: 100%; padding: 0.85rem 1rem; background: #fff; border: 2px solid #eee; border-radius: 12px; text-align: left; font-size: 0.97rem; cursor: pointer; min-height: 52px; transition: border-color 0.15s; text-transform: capitalize; }
.booking-option-card:hover { border-color: #2c7be5; }
.booking-option-card.selected { border-color: #2c7be5; background: #f0f6ff; font-weight: 600; }

/* Step 4 — date mode */
.booking-datemode-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.booking-datemode-card { width: 100%; padding: 1.1rem 1.2rem; background: #fff; border: 2px solid #eee; border-radius: 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; min-height: 72px; transition: border-color 0.15s; }
.booking-datemode-card strong { font-size: 1rem; color: #222; }
.booking-datemode-card span { font-size: 0.82rem; color: #888; }
.booking-datemode-card:hover { border-color: #2c7be5; }
.booking-datemode-card.selected { border-color: #2c7be5; background: #f0f6ff; }

/* Step 5 — next available result */
.booking-next-avail-card { background: #fff; border-radius: 14px; padding: 1.5rem; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-top: 0.5rem; }
.booking-next-avail-date { font-size: 1rem; color: #888; margin-bottom: 0.25rem; }
.booking-next-avail-time { font-size: 2.2rem; font-weight: 700; color: #2c7be5; }
.booking-next-avail-doc  { font-size: 0.9rem; color: #555; margin-top: 0.4rem; }

/* Step 5 — slots below calendar */
.booking-slots-below { margin-top: 0.75rem; }
.booking-slots-doctor-label { font-size: 0.82rem; font-weight: 600; color: #555; margin: 0.6rem 0 0.35rem; }

/* Misc */
.booking-loading { text-align: center; color: #aaa; font-size: 0.9rem; padding: 2rem; }
.booking-unavail { text-align: center; color: #aaa; font-size: 0.9rem; padding: 1.5rem; }

/* Booking app shell */
#app.booking-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#app.booking-app.open { display: flex; }
#booking-content { flex: 1; overflow-y: auto; padding: 1rem; }

/* ============================================================
   Reports (full webapp)
   ============================================================ */
.reports-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.reports-filters label { font-size: 0.9rem; color: #555; display: flex; align-items: center; gap: 0.4rem; }
.reports-filters input[type="date"] { padding: 0.4rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.88rem; outline: none; }
.reports-filters input[type="date"]:focus { border-color: #2c7be5; }
#reports-apply { padding: 0.4rem 1rem; background: #2c7be5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem; font-weight: 600; }
#reports-apply:hover { background: #1a65d0; }

.reports-summary { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.reports-summary .reports-card { flex: 1 1 130px; background: #fff; border-radius: 10px; padding: 1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.07); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.reports-card-value { font-size: 1.4rem; font-weight: 700; color: #2c7be5; }
.reports-card-label { font-size: 0.78rem; color: #888; text-align: center; }

.reports-section { background: #fff; border-radius: 10px; padding: 1.1rem 1.3rem; box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 1.2rem; }
.reports-section h3 { font-size: 0.95rem; font-weight: 700; color: #333; margin-bottom: 0.75rem; }
.reports-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.reports-table th { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 2px solid #eee; color: #555; font-weight: 600; }
.reports-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #f0f0f0; color: #333; }
.reports-table tbody tr:last-child td { border-bottom: none; }
.reports-table tbody tr:hover { background: #fafafa; }

.reports-export-btn { margin-top: 0.5rem; padding: 0.5rem 1.3rem; background: #6c757d; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem; }
.reports-export-btn:hover { background: #5a6268; }
.reports-loading { text-align: center; color: #aaa; font-size: 0.9rem; padding: 2rem; }
.reports-error { text-align: center; color: #dc3545; font-size: 0.9rem; padding: 2rem; }

/* ============================================================
   Phone optimization
   ============================================================ */
@media (max-width: 767px) {
  .app-topbar {
    padding: 0.65rem 0.85rem 0;
    gap: 0.3rem;
  }
  .topbar-brand-row {
    align-items: flex-start;
    gap: 0.5rem;
  }
  .topbar-user-right {
    gap: 0.35rem;
    flex-shrink: 0;
  }
  #topbar-user-name {
    display: inline;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.78);
  }
  #topbar-logout-btn {
    padding: 0.35rem 0.6rem;
    min-height: 34px;
  }
  .topbar-clinic-name {
    font-size: 0.76rem;
    line-height: 1.2;
    padding-bottom: 0.45rem;
  }
  .view-toggle {
    margin: 0.45rem 0 0;
  }
  .view-toggle-btn {
    min-height: 44px;
    font-size: 0.94rem;
  }
  .view.active {
    padding: 0.85rem;
  }

  .queue-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
  }
  .queue-date-label,
  .queue-clinic-label {
    flex: none;
    text-align: left;
    font-size: 0.9rem;
  }
  .queue-toolbar-right {
    width: 100%;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }
  .queue-doctor-sel,
  .queue-clinic-sel,
  .queue-walkin-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
  .queue-card-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
  }
  .queue-drag-handle {
    display: none;
  }
  .queue-mobile-reorder {
    display: inline-flex;
    order: 1;
  }
  .queue-card-info {
    order: 2;
    min-width: calc(100% - 4.8rem);
  }
  .queue-card-name {
    white-space: normal;
    line-height: 1.25;
    font-size: 0.94rem;
  }
  .queue-card-meta {
    gap: 0.3rem;
    margin-top: 0.28rem;
  }
  .queue-card-btns {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.15rem;
  }
  .queue-icon-btn,
  .queue-undo-btn {
    min-width: 42px;
    min-height: 42px;
  }
  .queue-advance-btn {
    flex: 1 1 9rem;
    min-height: 42px;
  }
  .queue-card-detail {
    padding: 0.8rem;
    gap: 0.75rem;
  }
  .queue-detail-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .queue-detail-row label {
    width: auto;
    font-size: 0.76rem;
  }
  .queue-detail-status-sel,
  .queue-detail-notes {
    width: 100%;
    min-height: 42px;
  }
  .queue-detail-save-btn {
    align-self: stretch;
    min-height: 44px;
  }

  #view-book.active {
    min-height: calc(100vh - 108px);
  }
  .booking-shell-top {
    padding: 0.55rem 0.85rem;
    min-height: 48px;
  }
  #booking-content {
    padding: 0.85rem;
  }
  .booking-step-title {
    font-size: 1rem;
  }
  .booking-option-card,
  .booking-doctor-card,
  .booking-datemode-card {
    min-height: 56px;
    padding: 0.8rem 0.9rem;
  }
  .booking-cal-nav {
    padding: 0.6rem 0.7rem;
  }
  .booking-cal-nav span {
    font-size: 0.88rem;
  }
  .booking-cal-nav button {
    padding: 0.2rem 0.55rem;
    min-width: 2.25rem;
  }
  .booking-cal-dayname {
    font-size: 0.64rem;
    padding: 0.3rem 0;
  }
  .booking-cal-day {
    min-height: 38px;
    font-size: 0.82rem;
    padding: 0.45rem 0.15rem;
    margin: 1px;
  }
  .booking-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .booking-slot {
    min-height: 50px;
    font-size: 0.9rem;
    padding: 0.6rem 0.2rem;
  }
  .booking-patient-search input,
  .booking-channel-wrap select {
    min-height: 46px;
  }
  .booking-patient-item {
    min-height: 52px;
    padding: 0.75rem 0.85rem;
  }
  .booking-summary {
    padding: 1rem;
  }
  .booking-summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .booking-summary-value {
    text-align: left;
  }
  .booking-confirm-btn,
  .booking-next-btn,
  .booking-cancel-btn {
    min-height: 48px;
  }
  .booking-success {
    padding: 2rem 0.25rem 1rem;
  }
  .booking-success button {
    width: 100%;
    max-width: none;
    min-height: 46px;
    padding: 0.8rem 1rem;
  }

  .date-nav {
    padding: 0.7rem 0.8rem;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .date-nav button,
  .date-nav .date-label,
  .date-nav .today-btn,
  #cal-clinic-filter,
  #cal-doctor-filter {
    min-height: 40px;
  }
  .cal-day-panel {
    position: fixed;
    inset: 0;
    border-radius: 0;
  }
  .cal-day-panel-header {
    padding: 0.85rem 0.85rem 0.7rem;
  }
  .cal-day-panel-title {
    font-size: 0.92rem;
    line-height: 1.3;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cal-day-panel-clinic {
    margin-bottom: 1rem;
    border-radius: 8px;
  }
  .cal-day-panel-section {
    padding: 0.7rem 0.75rem 0.5rem;
  }
  .cal-day-panel-table,
  .cal-day-panel-table thead,
  .cal-day-panel-table tbody,
  .cal-day-panel-table tr,
  .cal-day-panel-table th,
  .cal-day-panel-table td {
    display: block;
    width: 100%;
  }
  .cal-day-panel-table {
    border: none;
    background: transparent;
  }
  .cal-day-panel-table thead {
    display: none;
  }
  .cal-day-panel-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .cal-day-panel-table tbody tr {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    padding: 0.55rem;
  }
  .cal-day-panel-table tbody td {
    border: none;
    padding: 0.25rem 0;
  }
  .cal-day-panel-table tbody td:last-child {
    padding-top: 0.45rem;
  }
  .cal-inline-sel,
  .cal-inline-input,
  .cal-day-panel-add-btn {
    min-height: 40px;
  }
  .cal-day-panel-doc-foot {
    flex-wrap: wrap;
  }

  .settings-card,
  .reports-card,
  .patients-card,
  .search-card {
    padding: 1rem;
  }
  .search-filters {
    grid-template-columns: 1fr;
  }
  .search-appt-head {
    flex-direction: column;
    gap: 0.6rem;
  }
  .search-appt-head .pt-appt-actions {
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
  }
  .settings-col-calendar {
    grid-template-columns: 1fr;
  }
  #cfg-group-clinic,
  #cfg-group-doctor,
  #cfg-group-categories,
  #cfg-group-org,
  #cfg-group-allclinics {
    grid-column: auto;
  }
  #patient-table-wrap {
    max-height: none;
    overflow-x: auto;
  }
}