/* ===== Theme ===== */
:root{
  --ink:#0f172a;            /* headings/text */
  --muted:#475569;          /* secondary text */
  --line:#e5e7eb;           /* borders */
  --bg:#f8fafc;             /* app background */
  --card:#ffffff;           /* card background */

  --brand:#0f766e;          /* teal (primary) */
  --brand-2:#059669;        /* emerald (accent) */
  --brand-3:#0ea5e9;        /* link/hover */

  --radius:14px;
  --shadow:0 8px 24px rgba(2, 6, 23, .06);

  /* Summary palette (used by dashboard summary panel) */
  --summary-bg:#f0fdfa;       /* soft teal tint (matches logo) */
  --summary-border:#99f6e4;   /* light teal border */
  --summary-text:#0f172a;     /* dark ink */
    /* Brand shades (used by hover states) */
  --brand-dark:#0b5f59;      /* hover for brand buttons */
  --brand-soft: rgba(15,118,110,.12);  /* soft highlight backgrounds */

  /* Link colors */
  --link: var(--brand-3);
  --link-hover:#0284c7;

  /* Focus ring */
  --focus-ring: rgba(15,118,110,.18);

}
.fab { display: none !important; }


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;display:block}

/* ===== Header / Nav ===== */

.site-wrap{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px}
.brand-logo{display:inline-flex;align-items:center}
.brand-img{height:36px;width:auto}
.nav-toggle{display:none;background:none;border:0;font-size:22px;cursor:pointer}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:#f3f4f6}
.nav-links a.active{background:#eef2ff}
.auth{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto; /* pushes auth (and badge) to the right */
}


/* Ensure logo remains visible on mobile */
.brand img,
.site-header img{
  max-height:40px;
  width:auto;
  display:block;
}

/* Prevent logo from collapsing on mobile */
@media (max-width:640px){

  .brand{
    display:flex;
    align-items:center;
  }

  .brand img{
    max-height:34px;
  }

}


/* ===== Buttons ===== */
.btn{background:var(--brand);color:#fff;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(.97)}
.btn.outline{background:#fff;color:var(--brand);border:1px solid var(--brand);box-shadow:none}

/* ===== Layout + Cards ===== */
.site-container{max-width:1180px;margin:18px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin:14px 0}
h1,h2,h3{margin:0 0 10px}
.tiny{color:var(--muted);font-size:.92rem}

/* ===== Inputs ===== */
.input, textarea.input, select.input{
  width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:#fff;outline:none
}
.input:focus, textarea.input:focus, select.input:focus{
  border-color:var(--brand-3);box-shadow:0 0 0 3px rgba(14,165,233,.2)
}
textarea.input{resize:vertical}

/* ===== Utilities ===== */
.row{display:flex;gap:10px;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.notice{background:#ecfeff;border:1px solid #a5f3fc;color:#0c4a6e;border-radius:12px;padding:12px}
.pre{background:#0b1220;color:#e5e7eb;border-radius:12px;padding:12px;min-height:90px;white-space:pre-wrap}
/* ===== Vitals (dashboard) ===== */
.vitals-box{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:12px;
  flex:1;
  min-width:260px;
}
.vitals-head{ font-weight:600; color:var(--muted); margin:0 0 8px; }
.vitals-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px,1fr));
  gap:10px;
}
@media (max-width: 920px){
  .vitals-grid{ grid-template-columns:1fr 1fr; }
}

/* Temp-method radios */
.vitals-radio{ display:flex; gap:12px; margin-top:6px; }
.vitals-radio label{ display:inline-flex; align-items:center; gap:6px; }
.vitals-radio input{ accent-color: var(--brand); }


/* >>> Summary box override (dashboard) <<< */
#summaryBox{
  background:var(--summary-bg) !important;
  border:1px solid var(--summary-border);
  color:var(--summary-text);
}
/* optional utility if you ever use a generic summary div */
.summary-box{
  background:var(--summary-bg) !important;
  border:1px solid var(--summary-border);
  color:var(--summary-text);
}
.disclaimer{ color:#64748b; font-style:italic; }

/* ===== Doctor list ===== */
.doctor-list{list-style:none;margin:10px 0 0;padding:0}
.doctor-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;margin:10px 0}
.dot{width:10px;height:10px;border-radius:999px}
.dot.green{background:#10b981}
.dot.gray{background:#94a3b8}

/* ===== Hero (dashboard top banner) ===== */
.hero{
  background:linear-gradient(90deg, rgba(15,118,110,.06), rgba(14,165,233,.06));
  border:1px solid var(--line);border-radius:16px;padding:22px 18px;margin:10px 0 16px;
}
.hero h1{font-size:28px;margin:0 0 6px}
.hero p{margin:0;color:var(--muted)}
.hero .hero-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* ===== Vitals panel (dashboard) ===== */
.vitals-box{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fff;
  flex:1;
  min-width:280px; /* lets it wrap nicely beside Language on small screens */
}
.vitals-head{
  font-size:.88rem;
  font-weight:600;
  color:var(--brand);
  margin-bottom:8px;
}
.vitals-head::after{
  content:" – recommended but optional";
  font-weight:400;
  color:var(--muted);
}
.vitals-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap:10px;
}
.vitals-grid label{
  display:block;
  font-size:.86rem;
  color:var(--muted);
}
.vitals-grid .input{ margin-top:6px; }

@media (max-width:520px){
  /* vitals grid becomes 1 col on phones */
  .vitals-grid{ grid-template-columns:1fr; }
}

/* ===== WhatsApp icon helpers (header + floating FAB) ===== */

/* accessibility helper for icon-only links */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* header nav icon link */
.nav-wa{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--line);
  border-radius:8px;text-decoration:none;background:#fff;
}
.nav-wa:hover{ background:#f3f4f6 }
.nav-wa svg{ width:20px;height:20px;fill:#25D366 }
.nav-wa .wa-text{ display:none;margin-left:6px }

/* (optional) show label instead of icon by adding `show-wa-text` to <body> */
body.show-wa-text .nav-wa .wa-text{ display:inline }
body.show-wa-text .nav-wa svg{ display:none }

/* floating WhatsApp button */
.whats-fab,
.fab-whatsapp{ /* keep old class as alias */
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;        /* above header/overlay */
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow: var(--shadow);
}
.whats-fab svg,
.fab-whatsapp svg{ width:28px;height:28px;fill:#fff }

/* Only show on mobile if you prefer */
@media (min-width: 921px){
  .whats-fab,
  .fab-whatsapp{ display: none; }
}

/* ===== Footer ===== */
.footer{
  /* deep teal tint that matches the logo, not pure black */
  background: linear-gradient(180deg, #0a2f2a 0%, #0b1220 100%);
  color:#e2e8f0;
  border-top:1px solid var(--line);
  margin-top:28px;
}
.footer .inner{
  max-width:1180px;
  margin:0 auto;
  padding:32px 16px;
  display:grid;
  gap:24px;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.footer h4{
  margin:0 0 10px;
  font-weight:600;
  color:#f1f5f9;
}
.footer p{
  margin:6px 0;
  color:#cbd5e1;
}
.footer a{
  color:#93c5fd;
  text-decoration:none;
  transition:color .15s ease, opacity .15s ease;
}
.footer a:hover{
  color:#bfdbfe;
  text-decoration:underline;
}
.footer .brand-line{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.footer .brand-line img{
  height:28px;
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.footer .legal{
  font-size:.9rem;
  color:#94a3b8;
  margin-top:8px;
}

/* responsive footer layout */
@media (max-width:920px){
  .footer .inner{ grid-template-columns:1fr; padding:28px 16px; }
}
/* --- Utilities (you can reuse anywhere) --- */
.nowrap{white-space:nowrap;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Tighter defaults */
#patientList .card{padding:12px;}
#patientList .card .row{flex-wrap:wrap;gap:8px;}
#patientList .btn{padding:6px 10px;font-size:.95rem;}

/* Dashboard stat tiles (top four cards) */
.row3 > .card > .tiny{color:#64748b;}
.row3 > .card > div:last-child{font-weight:600;}

/* --- Small screens (≤ 640px) --- */
@media (max-width:640px){
  .wrap{padding:10px;}
  h2{font-size:1.25rem;margin:0;}
  h3{font-size:1.1rem;margin:0;}

  /* Stack rows into single-column blocks */
  .row, .row2, .row3{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .card{padding:12px;border-radius:12px;}

  /* Buttons & inputs a bit smaller but comfy */
  .btn{padding:8px 10px;font-size:.95rem}
  .input{width:100%;font-size:1rem;padding:10px 12px}
  #patientSearch{width:100%;}

  /* Stat tiles: slightly smaller numbers on phones */
  .row3 > .card > div:last-child{font-size:22px !important;}

  /* Patient list cards */
  #patientList .card{padding:10px;}
  #patientList .tiny{font-size:.85rem;}
}

/* Prefer reduced motion: remove fades/slides if you add any later */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

/* Toolbar */
.dd-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.dd-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dd-online { display:flex; align-items:center; gap:6px; color:#16a34a; font-size:12px; }
.dd-online .dot { width:8px; height:8px; border-radius:999px; background:#16a34a; display:inline-block; }

/* KPI cards */
.kpi { padding:12px 14px; }
.kpi-label { font-size:12px; color:#64748b; margin-bottom:4px; }
.kpi-value { font-size:28px; font-weight:700; }

/* Pills */
.pill { padding:2px 8px; border-radius:999px; font-size:12px; }
.pill-online { background:#ecfdf5; color:#047857; }
.pill-offline { background:#f1f5f9; color:#334155; }

/* Empty state */
.dd-empty { text-align:center; padding:18px 10px; color:#64748b; }

/* Table look */
.dd-table thead th { font-size:12px; color:#475569; font-weight:600; border-bottom:1px solid #e2e8f0; }
.dd-table td { border-bottom:1px solid #eef2f7; }
.dd-search .input { min-width:260px; }

.patient-row {
  transition: background-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.patient-row:hover {
  background: #f8fafc;             /* subtle tint */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* PadiDoctors centered modal */
.pd-modal[hidden] { display: none !important; }

.pd-modal {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); z-index: 9999; padding: 16px;
}
.pd-modal.show { display: flex; }
.pd-modal .box {
  width: 100%; max-width: 520px;
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}


.pd-modal__panel {
  position: relative;
  width: min(92vw, 520px);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

.chat-box { height: 320px; overflow-y: auto; }

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Desktop / default: nav sits under header, above content */
.patient-bottom-nav{
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px 6px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  z-index: 10;
}

.patient-bottom-nav a{
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #bae6fd;
  background: #e0f2fe;
  color: #075985;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.patient-bottom-nav a.logout-chip{
  border-color:#fecaca;
  background:#fee2e2;
  color:#b91c1c;
}

/* No extra bottom padding on desktop */
body.has-patient-bottom-nav{
  padding-bottom: 0;
}

/* Mobile: fix the bar to the bottom */
@media (max-width: 768px){
  .patient-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    padding: 6px 8px;
    border-bottom: none;
    border-top: 1px solid #e5e7eb;
    z-index: 1100;
    background: #ffffff;
  }

  body.has-patient-bottom-nav{
    padding-bottom: 72px; /* keep content from hiding under the chips */
  }
}
/* "More" dropdown inside patient bottom nav */
.patient-more {
  position: relative;
  flex: 0 0 auto;
  z-index: 1301;
}

.patient-more .more-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #bae6fd;
  background: #e0f2fe;
  color: #075985;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.patient-more .more-btn.active {
  background: #0ea5e9;
  color: #ffffff;
  border-color: #0ea5e9;
}

/* Menu panel */
.patient-more .more-menu {
  position: absolute;
  bottom: 40px;            /* sits just above the chips */
  right: 0;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 24px rgba(15,23,42,.15);
  padding: 6px 0;
  min-width: 170px;
  z-index: 9999;
}

.patient-more .more-menu a {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: #0f172a;
  text-decoration: none;
  white-space: nowrap;
}

.patient-more .more-menu a:hover {
  background: #f1f5f9;
}

/* --- More chip button --- */
.more-chip{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #bae6fd;
  background:#e0f2fe;
  color:#075985;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
}

/* --- More menu panel --- */
.patient-more-menu{
  position:fixed;
  left:0;
  right:0;
  bottom:72px;          /* sits just above bottom chips on mobile */
  display:flex;
  justify-content:center;
  z-index:9999;
}

.patient-more-menu[hidden]{
  display:none !important;
}

.patient-more-menu-inner{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:8px;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:320px;
  width:calc(100% - 32px);
  position: relative;   /* add this */
  z-index: 10000;
}

.patient-more-menu-inner a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  font-size:14px;
  color:#075985;
  text-decoration:none;
}

.patient-more-menu-inner a:hover{
  background:#e0f2fe;
}

/* Desktop: float menu just above the static chips */
@media (min-width: 1024px){
  .patient-more-menu{
    position:static;
    margin-top:4px;
    display:block;
    text-align:left;
  }
  .patient-more-menu-inner{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:auto;
  }
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #ecfeff;
  border: 1px solid #06b6d4;
  font-size: 0.8rem;
  margin-left: 1rem;
  white-space: nowrap;
}

.plan-badge-label {
  font-weight: 600;
}

.plan-badge-meta {
  color: #0f766e;
}

.plan-badge-link {
  text-decoration: underline;
  font-weight: 500;
}

.pd-alert {
  padding: 0.35rem 0;
}

.pd-alert .site-wrap {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
}

.pd-alert-warning .site-wrap {
  background: #fef9c3;
  border: 1px solid #facc15;
}

.pd-alert-info .site-wrap {
  background: #e0f2fe;
  border: 1px solid #38bdf8;
}

.pd-alert-link {
  margin-left: 0.5rem;
  text-decoration: underline;
  font-weight: 500;
}

.card {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:16px;
  box-shadow:0 4px 12px rgba(15,23,42,0.04);
}

.list {
  list-style:none;
  margin:0;
  padding:0;
}

.list-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid #e5e7eb;
}

.list-item:last-child {
  border-bottom:none;
}
.btn{
  border:1px solid transparent;     /* keeps size stable on hover */
  border-radius:999px;
  padding:8px 14px;                 /* slightly taller = nicer */
  font-size:0.9rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
  transition: transform .06s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  user-select:none;
}

.btn:active{
  transform: translateY(1px);
}

.btn:focus{
  outline:none;
}

.btn:focus-visible{
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(15,118,110,.18));
}

.btn[disabled],
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Sizes */
.btn-small{
  padding:6px 10px;
  font-size:0.82rem;
}

/* Variants */
.btn-primary{
  background: var(--brand, #0f766e);
  color:#fff;
  box-shadow: 0 10px 18px rgba(15,118,110,.18);
}
.btn-primary:hover{
  background: var(--brand-dark, #0b5f59);
  box-shadow: 0 12px 22px rgba(15,118,110,.22);
}

.btn-warning{
  background:#f97316;
  color:#fff;
  box-shadow: 0 10px 18px rgba(249,115,22,.18);
}
.btn-warning:hover{
  filter: brightness(.97);
  box-shadow: 0 12px 22px rgba(249,115,22,.22);
}

.btn-muted{
  background:#e5e7eb;
  color:#0f172a;
  border-color:#d1d5db;
}
.btn-muted:hover{
  background:#e2e8f0;
}

/* Outline */
.btn-outline{
  background: transparent;
  border: 1px solid rgba(2,6,23,.14);
  color: #0f172a;
}
.btn-outline:hover{
  background: rgba(15,118,110,.08);
  border-color: rgba(15,118,110,.28);
}


.badge {
  display:inline-block;
  border-radius:999px;
  padding:3px 8px;
  font-size:0.75rem;
}

.badge-blue {
  background:#e0f2fe;
  color:#1d4ed8;
}

/* triage colors */
.badge-triage.badge-red {
  background:#fee2e2;
  color:#b91c1c;
}

.badge-triage.badge-orange {
  background:#ffedd5;
  color:#c2410c;
}

.badge-triage.badge-yellow {
  background:#fef9c3;
  color:#a16207;
}

.badge-triage.badge-green {
  background:#dcfce7;
  color:#15803d;
}

.dd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Status colors */
.dot-online {
  background: #22c55e;   /* green */
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

.dot-busy {
  background: #f97316;   /* orange/red */
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.7);
}

.dot-offline {
  background: #94a3b8;   /* gray */
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.5);
}

.dd-status.online { color: #22c55e; }
.dd-status.busy   { color: #f97316; }
.dd-status.offline{ color: #94a3b8; }

.triage {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.triage-green {
    background-color: #16a34a;
}

.triage-yellow {
    background-color: #ca8a04;
}

.triage-orange {
    background-color: #ea580c;
}

.triage-red {
    background-color: #dc2626;
}

/* Base pill style (you probably already have something like this) */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Specific to triage pills */
.pill-triage {
    color: #ffffff;
}

/* Priority colors */
.pill-green {
    background-color: #16a34a;   /* green-600 */
}

.pill-yellow {
    background-color: #ca8a04;   /* yellow-600 */
}

.pill-orange {
    background-color: #ea580c;   /* orange-600 */
}

.pill-red {
    background-color: #dc2626;   /* red-600 */
}

.snapshot-card {
    background: #f8fffb;
    border-color: #def7ec;
}

.snapshot-vitals li {
    margin: 0;
}

/* If not already present from dashboard: */
.pill-triage {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Map to your existing triage colors */
.pill-green {
    background-color: #16a34a;
}
.pill-yellow {
    background-color: #ca8a04;
}
.pill-orange {
    background-color: #ea580c;
}
.pill-red {
    background-color: #dc2626;
}
/* Base snapshot card styling */
.snapshot-card {
  border-left: 4px solid #e5e7eb; /* default neutral */
}

/* Triage-based soft left border */
.snapshot-green {
  border-left-color: #16a34a; /* green */
}

.snapshot-yellow {
  border-left-color: #ca8a04; /* yellow */
}

.snapshot-orange {
  border-left-color: #ea580c; /* orange */
}

.snapshot-red {
  border-left-color: #dc2626; /* red */
}

.snapshot-unknown {
  border-left-color: #e5e7eb;
}

/* Hidden textarea for copy */
.snapshot-summary-hidden {
  position: absolute;
  left: -9999px;
  top: 0;
  height: 0;
  width: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Extra details box */
.snapshot-details {
  max-height: 200px;
  overflow: auto;
  border-radius: 6px;
  background: #f9fafb;
  padding: 6px;
}

/* If you don't already have .btn.link, make it look like a text link */
.btn.link {
  background: none;
  border: none;
  padding: 0;
  color: #0ea5e9;
  text-decoration: underline;
  cursor: pointer;
}

.chat-log {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 8px;
  max-height: 260px;
  overflow-y: auto;
}

/* Optional: make preformatted log look less "code-y" */
.chat-log pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Triage report block */
.triage-report {
  border-radius: 8px;
  background: #f0fdfa;      /* soft teal */
  border: 1px solid #99f6e4;
  padding: 6px 8px;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.file-thumb,
.file-doc {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-thumb img {
  max-width: 100%;
  max-height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.file-label {
  margin-top: 4px;
  font-size: 11px;
  text-align: center;
  color: #475569;
}

/* Simple doc icon */
.file-doc-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

/* Modal */
.file-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.file-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
}

.file-modal-content {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 96%;
  max-height: 96%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.file-modal-content img {
  max-width: 100%;
  max-height: calc(100% - 32px);
  border-radius: 12px;
  background: #0f172a;
}

.file-modal-close {
  border: none;
  background: #ffffff;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  cursor: pointer;
}

/* Hide helper (you already use .d-none elsewhere) */
.d-none {
  display: none !important;
}

.note-warning {
  color: #dc2626;           /* red */
  font-weight: 600;         /* semi-bold */
  margin-top: 4px;
  display: block;
}
.summary-box,
.summary-item {
  white-space: pre-line;
}

/* Voice recording visual feedback */
.btn.recording {
  background-color: #dc2626; /* red-600 */
  color: #fff;
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

.reassign-wrap{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;}
.reassign-wrap .tiny-select{min-width:260px;max-width:360px;}
.status-pill{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;}

.pd-snapshot-bar { border-radius: 14px; }
.pd-mini-btn { padding: 7px 12px; }
.pd-snapshot-bar .meta { font-size: 12px; color:#64748b; }


/* ===== PD HERO: force good layout without breaking app ===== */
.pd-hero{
  max-width: 1100px;
  margin: 14px auto 18px auto;
  padding: 22px 22px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(240,253,250,1) 0%, rgba(255,255,255,1) 70%);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .06);

  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 18px;
  align-items: start;
}

/* left column spacing */
.pd-hero__copy h1{
  margin: 0 0 10px 0;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.pd-hero__copy p{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #475569;
}

/* trust chips */
.pd-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 14px 0;
}

.pd-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,118,110,.25);
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
}

/* ===== Minimal professional hero ===== */

.pd-hero--minimal{
  background: linear-gradient(180deg, rgba(240,253,250,1) 0%, rgba(255,255,255,1) 70%);
  border: 1px solid rgba(2, 6, 23, .08);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .05);
  padding: 18px 18px;
  border-radius: 18px;
}

.pd-hero--minimal h1{
  font-size: 34px;
  letter-spacing: -0.02em;
}

.pd-hero__note{
  margin-top: 12px;
  font-size: 13px;
  color: #64748b;
}

@media (max-width: 720px){
  .pd-hero--minimal h1{
    font-size: 28px;
  }
}

.brand-dark: #0b5f59;


.btn-primary{
  background: var(--brand);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(47,191,159,.28);
}

.btn-primary:hover{
  background: var(--brand-dark);
  box-shadow: 0 12px 24px rgba(47,191,159,.35);
}

/* ===== Nav dropdown (About) ===== */
.nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dd-btn{
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.nav-dd-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(2, 6, 23, .12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .10);
  padding: 8px;
  z-index: 1000;
}

.nav-dd-menu a{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.nav-dd-menu a:hover{
  background: rgba(47,191,159,.12);
}


/* open on hover (desktop) */
@media (min-width: 769px){
  .nav-dd:hover .nav-dd-menu{ display: block; }
}

/* open on tap (mobile): show dropdown when nav is open */
#mainnav.open .nav-dd-menu{
  position: static;
  display: block;
  box-shadow: none;
  border: 0;
  padding: 6px 0 0 0;
}

/* ===== Static content pages (About/Story/FAQs/Blog) ===== */
.pd-page{ padding: 18px; }
.pd-page__header h1{ margin: 0 0 6px 0; letter-spacing: -0.02em; }
.pd-lead{ font-size: 16px; font-weight: 800; margin: 0 0 10px 0; }
.pd-muted{ color: #475569; margin: 8px 0; line-height: 1.6; }

.pd-section{ margin-top: 18px; }
.pd-section h2{ margin: 0 0 8px 0; font-size: 18px; letter-spacing: -0.01em; }

.pd-divider{
  border: 0;
  border-top: 1px solid rgba(2,6,23,.10);
  margin: 18px 0;
}

.pd-list{
  margin: 10px 0 10px 0;
  padding-left: 18px;
  color: #0f172a;
}
.pd-list li{ margin: 6px 0; }

.pd-callout{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,118,110,.18);
  background: rgba(240,253,250,.85);
}
.pd-callout__line{ margin: 4px 0; font-weight: 700; }

@media (max-width: 720px){
  .pd-page{ padding: 14px; }
}

.pd-cta{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.pd-cta__link{
  font-size: 13px;
  color: var(--brand, #0f766e);
  text-decoration: underline;
}

/* highlight dropdown when on About pages */
.nav-dd.active .nav-dd-btn{
  color: var(--brand, #0f766e);
  font-weight: 800;
}
.nav-dd.active .nav-dd-btn::after{
  content: "";
  display: block;
  height: 2px;
  margin-top: 6px;
  background: rgba(15,118,110,.55);
  border-radius: 999px;
}
.pd-ico{
  display: inline-flex;
  width: 1.4em;
  justify-content: center;
  margin-right: 6px;
  opacity: .9;
}
/* Make nav styling apply to base.html nav (.nav-links) */
.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:8px;
}
.nav-links a,
.nav-links .nav-dd-btn{
  color:#0b1520;
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
}
.nav-links a:hover,
.nav-links .nav-dd-btn:hover{
  background:#eef2ff;
}
.nav-links a.active{
  background: rgba(47,191,159,.12);
  color: #0b1520;
  font-weight: 800;
}

/* Replace blue with healthcare green */
.contact-form button{
  background: var(--brand);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:10px 14px;
  cursor:pointer;
}
.contact-form button:hover{
  background: var(--brand-dark);
}
.nav a.admin{
  margin-left:auto;
  background: var(--brand);
  color:#fff;
}
#mainnav.open .nav-dd-btn{
  width:100%;
  text-align:left;
}

/* ===== PadiDoctors — Contact form ===== */
.pd-contact h1{ margin:0 0 6px 0; letter-spacing:-0.02em; }
.pd-contact__head{ margin-bottom:12px; }
.pd-muted{ color:#475569; line-height:1.6; margin:0; }

.pd-notice{
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,118,110,.22);
  background: rgba(240,253,250,.85);
  color: #0f172a;
  font-weight: 600;
}

.pd-form{ margin-top: 10px; }

.pd-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pd-field label{
  display:block;
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 6px 0;
  color: #0f172a;
}

.pd-field input,
.pd-field textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.12);
  background: #fff;
  outline: none;
}

.pd-field input:focus,
.pd-field textarea:focus{
  border-color: rgba(15,118,110,.55);
  box-shadow: 0 0 0 4px rgba(15,118,110,.10);
}

.pd-help{
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #64748b;
}

.pd-actions{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pd-btn{
  background: #0f766e;      /* teal-green */
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.pd-btn:hover{
  filter: brightness(0.98);
}

.pd-actions__meta{
  color:#64748b;
  font-size: 12px;
}

.pd-divider{
  border: 0;
  border-top: 1px solid rgba(2,6,23,.10);
  margin: 16px 0;
}

.pd-contact__meta{
  display: grid;
  gap: 6px;
  color: #0f172a;
}

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

.billing-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.plan-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(240,253,250,.85);
  font-size:13px;
  font-weight:700;
}

.plan-pill a{
  font-weight:800;
  text-decoration:none;
  color: var(--brand, #0f766e);
}
.plan-pill a:hover{ text-decoration:underline; }

.plan-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(240,253,250,.85);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.plan-badge-meta{
  font-weight:700;
  color:#64748b;
}

.plan-badge-link{
  font-weight:800;
  color: var(--brand, #0f766e);
  text-decoration:none;
}
.plan-badge-link:hover{ text-decoration:underline; }



/* ===== Header / Nav (matches padidoctors.com working pattern) ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1200;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header .site-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  position: relative; /* anchor for mobile absolute menu */
}

.header-left{ display:flex; align-items:center; gap:10px; }
.header-right{ margin-left:auto; display:flex; align-items:center; }

.brand-logo{ display:inline-flex; align-items:center; }
.brand-img{ height:36px; width:auto; }

.nav-links{ display:flex; gap:18px; align-items:center; }

.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:22px;
  cursor:pointer;
}



/* Desktop hover dropdown stays */
@media (min-width: 921px){
  .nav-dd:hover .nav-dd-menu{ display:block; }
}

/* ===== Mobile nav ===== */
@media (max-width: 920px){

  /* Burger visible on mobile */
  .nav-toggle{ display:block; }

  /* Nav hidden by default */
  #mainnav.nav-links{
    display:none;
    flex-direction:column;
    gap:6px;

    position:absolute;
    left:0;
    right:0;
    top:56px;

    background:#fff;
    border-bottom:1px solid var(--line);
    padding:12px 16px;

    z-index:1300; /* above overlay */
  }
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.35);
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  z-index: 1100;
}
.nav-overlay.show{
  opacity: 1;
  visibility: visible;
}

  /* Nav shown when open */
  #mainnav.nav-links.open{
    display:flex;
  }

  /* Full-width tappable items */
  #mainnav.nav-links a,
  #mainnav.nav-links .nav-dd-btn{
    display:block;
    width:100%;
    padding:10px 6px;
  }

  /* Dropdown submenu: closed until .nav-dd.open */
  #mainnav.nav-links .nav-dd-menu{
    display:none;
    position:static;
    border:0;
    box-shadow:none;
    padding:6px 0 0 0;
  }

  /* When user taps About (JS adds .open to .nav-dd) */
  #mainnav.nav-links .nav-dd.open .nav-dd-menu{
    display:block;
  }
}
/* ===== NAV FIX OVERRIDES (put at very end of style.css) ===== */

/* Header must be above overlay */
.site-header{
  z-index: 1400 !important;
}

/* Overlay behind menu */
.nav-overlay{
  z-index: 1200 !important;
}

/* Menu above overlay */
@media (max-width: 920px){
  #mainnav.nav-links{
    z-index: 1500 !important;
  }
}

.doc-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #0f172a;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  flex: 0 0 36px;
  margin-right: 10px;
}

/* ===== Admin Dashboard polish (safe additive CSS) ===== */
.admin-hero{ padding:16px; }
.admin-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.admin-title{ margin:0; font-size:20px; }
.admin-actions{ display:flex; gap:8px; }

.admin-link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:14px;
}
.admin-link-group{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.admin-link-h{
  font-weight:700;
  margin-bottom:10px;
}
.admin-link-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.admin-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-top:14px;
}
.admin-kpi{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.admin-kpi-val{ font-size:22px; font-weight:800; margin-top:4px; }

.admin-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.admin-h3{ margin:0; }

.admin-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
}
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:900px;
}
.admin-table thead th{
  position:sticky;
  top:0;
  background:#f8fafc;
  z-index:1;
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  font-weight:700;
  font-size:13px;
}
.admin-table td{
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.admin-table tbody tr:nth-child(even){ background:#fcfdff; }
.admin-table .right{ text-align:right; }

.pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
}

/* ===== Chat action buttons: Desktop vs Mobile ===== */

/* Default (desktop): show icon + text */
.iconBtn .btn-txt { display: inline; }
.iconBtn .btn-ic  { display: inline-flex; }

/* Mobile: hide Send button; Record is icon-only */
@media (max-width: 768px){
  #sendBtn{ display:none !important; }

  /* Hide label text on icon buttons */
  .iconBtn .btn-txt{ display:none !important; }

  /* Optional: make icon buttons a bit tighter on mobile */
  .iconBtn{
    padding: 10px 12px !important;
    gap: 0 !important;
    min-width: 44px; /* thumb-friendly tap target */
    justify-content: center;
  }
}
.pd-chat-btn-offline{
  opacity:.7;
  cursor:not-allowed;
}

/* =========================================================
   PRINT / EXPORT STYLES
   ========================================================= */
@media print {
  body {
    background: #fff !important;
  }

  .no-print,
  nav,
  header,
  .ops-toolbar form,
  #opsMsg {
    display: none !important;
  }

  .card,
  .ops-chart-card,
  .ops-mini-card,
  .ops-alert,
  .ops-kpi-card,
  .ops-funnel-step,
  .ops-list-row {
    box-shadow: none !important;
    background: #fff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .ops-wrap {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .ops-hero {
    margin-bottom: 10px;
  }

  .ops-section-head {
    margin-bottom: 8px;
  }

  .ops-chart-svg,
  .ops-spark-svg {
    max-width: 100% !important;
  }

  .debug-audit-print-hide {
    display: none !important;
  }

  .btn,
  button,
  select,
  input {
    box-shadow: none !important;
  }

  a[href]:after {
    content: "" !important;
  }
}

.btn-primary-cta {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(16,185,129,.25);
  transition: all .18s ease;
}

.btn-primary-cta {
  animation: pulseSoft 2.5s infinite;
}

@keyframes pulseSoft {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.3); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.btn-primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16,185,129,.35);
}

.btn-outline {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  transition: all .15s ease;
}

.btn-outline:hover {
  border-color: #10b981;
  color: #059669;
  background: #f0fdf4;
}

.btn-ghost {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  color: #6b7280;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  transition: all .15s ease;
}

.btn-ghost:hover {
  color: #111827;
  border-color: #e5e7eb;
}
.card .btn-outline,
.card .btn-ghost {
  margin-right: 6px;
}
.footer-social{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.footer-social a{
  font-weight:700;
  text-decoration:none;
  opacity:0.85;
  transition:all 0.2s ease;
}

.footer-social a:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* Center the hero content */
.pd-hero__copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Center CTA button */
.pd-hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center trust + link row */
.pd-hero__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: center;
}

.pd-hero__copy h2 {
  margin-left: auto;
  margin-right: auto;
}

.pd-hero__sub {
  margin-left: auto;
  margin-right: auto;
  max-width: 620px;
}