/* ============================================================
   CareTrack HMS — visual identity
   Palette:
     --teal-900 (deep clinical teal)   #0F3D3E
     --teal-600 (primary)              #0F7C82
     --navy-700 (secondary / sidebar)  #123B52
     --coral-500 (alerts / severity)   #E8604C
     --mist-50  (page background)      #F5F9F9
     --ink-900  (text)                 #1E2A2E
   Fonts: 'Poppins' (display/headings), 'Inter' (body/data)
   Signature: a heartbeat / vital-line motif used in the brand
   mark and as subtle section dividers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --teal-900:#0F3D3E;
  --teal-700:#116468;
  --teal-600:#0F7C82;
  --teal-100:#DCEFEF;
  --navy-800:#0D2E42;
  --navy-700:#123B52;
  --navy-600:#1B4B66;
  --coral-500:#E8604C;
  --coral-100:#FBE4E0;
  --amber-500:#E6A23C;
  --amber-100:#FBF0DC;
  --green-600:#2E9E5B;
  --green-100:#DEF3E7;
  --mist-50:#F5F9F9;
  --mist-100:#EAF2F2;
  --ink-900:#1E2A2E;
  --ink-500:#5B6C70;
  --line:#DCE7E7;
  --radius:10px;
}

*{box-sizing:border-box;}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--mist-50);
  color:var(--ink-900);
  min-height:100vh;
}

h1,h2,h3,h4,h5,.brand,.card-title{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--teal-900);
}

a{color:var(--teal-600); text-decoration:none;}
a:hover{color:var(--teal-900);}

/* ---------- Vital-line signature motif ---------- */
.vital-line{
  display:block;
  width:100%;
  height:20px;
}
.vital-divider{
  border:none;
  height:14px;
  margin:.25rem 0 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpolyline points='0,10 60,10 75,2 90,18 105,10 300,10' fill='none' stroke='%230F7C82' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center;
  background-size:220px 16px;
  opacity:.6;
}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:250px;
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy-800),var(--navy-700));
  color:#DCE9F0;
  min-height:100vh;
  position:sticky;
  top:0;
}
.sidebar .brand{
  color:#fff;
  padding:1.25rem 1.25rem .5rem;
  font-weight:700;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.sidebar .brand svg{flex-shrink:0;}
.sidebar .nav-link{
  color:#B9D0DB;
  padding:.65rem 1.25rem;
  font-size:.92rem;
  font-weight:500;
  border-left:3px solid transparent;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.06); }
.sidebar .nav-link.active{
  color:#fff;
  background:rgba(255,255,255,.09);
  border-left-color:var(--coral-500);
}
.sidebar hr{border-color:rgba(255,255,255,.12);}
.sidebar .nav-section-label{
  color:#7C97A6;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:1rem 1.25rem .3rem;
}

.main-content{flex:1; min-width:0;}

.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:.85rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
}

.page-wrap{padding:1.5rem;}

/* ---------- Cards ---------- */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(15,61,62,.04);
}
.card-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  font-family:'Poppins',sans-serif;
  font-weight:600;
  color:var(--teal-900);
}

.stat-card{
  border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--teal-600);
}
.stat-card .stat-value{font-family:'Poppins',sans-serif; font-size:1.6rem; font-weight:700; color:var(--teal-900);}
.stat-card .stat-label{font-size:.8rem; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em;}
.stat-card.accent-coral{border-left-color:var(--coral-500);}
.stat-card.accent-amber{border-left-color:var(--amber-500);}
.stat-card.accent-navy{border-left-color:var(--navy-600);}

/* ---------- Buttons ---------- */
.btn-primary{ background:var(--teal-600); border-color:var(--teal-600); }
.btn-primary:hover{ background:var(--teal-900); border-color:var(--teal-900); }
.btn-outline-primary{ color:var(--teal-600); border-color:var(--teal-600); }
.btn-outline-primary:hover{ background:var(--teal-600); border-color:var(--teal-600); }

/* ---------- Badges for severity / status ---------- */
.badge-severity-Mild{ background:var(--green-100); color:var(--green-600); }
.badge-severity-Moderate{ background:var(--amber-100); color:#8A5A17; }
.badge-severity-Severe{ background:var(--coral-100); color:var(--coral-500); }
.badge-severity-Critical{ background:var(--coral-500); color:#fff; }

.badge-status-Active{ background:var(--green-100); color:var(--green-600); }
.badge-status-Discharged{ background:var(--mist-100); color:var(--ink-500); }
.badge-status-Inactive{ background:var(--coral-100); color:var(--coral-500); }

/* ---------- Patient identity block ---------- */
.patient-avatar{
  width:64px; height:64px; border-radius:50%;
  background:var(--teal-100); color:var(--teal-900);
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.3rem;
  overflow:hidden; flex-shrink:0;
}
.patient-avatar img{width:100%; height:100%; object-fit:cover;}
.patient-code{
  font-family:'Poppins',sans-serif;
  font-size:.75rem;
  letter-spacing:.05em;
  color:var(--teal-600);
  background:var(--teal-100);
  padding:.15rem .5rem;
  border-radius:20px;
}

/* ---------- Doc type chips ---------- */
.doc-chip{
  display:inline-block; padding:.2rem .55rem; border-radius:6px;
  font-size:.72rem; font-weight:600; background:var(--navy-600); color:#fff;
}

/* ---------- Auth page ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, var(--teal-700), var(--navy-800));
  padding:1rem;
}
.auth-card{
  background:#fff; border-radius:14px; padding:2.25rem 2rem; width:100%; max-width:400px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

/* ---------- Tables ---------- */
table.dataTable{font-size:.9rem;}
.table thead th{
  color:var(--teal-900); font-family:'Poppins',sans-serif; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .sidebar{position:fixed; left:-260px; z-index:1050; transition:left .2s ease; box-shadow:6px 0 24px rgba(0,0,0,.2);}
  .sidebar.open{left:0;}
  .main-content{width:100%;}
}