/* =========================================================
   Med.tn Demo UI - style.css
   - Modern medical look (blue/green/white)
   - Works with Bootstrap 5 utilities
   ========================================================= */

:root{
  --brand-blue:#0d6efd;
  --brand-green:#20c997;
  --brand-ink:#0b2a3a;
  --soft-bg:#f6fbff;
  --soft-card:#ffffff;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--brand-ink);
  background: var(--soft-bg);
}

a{ text-decoration: none; }

.bg-soft{
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}

.hero{
  background: radial-gradient(1200px 380px at 20% 15%, #d7f0ff 0%, rgba(215,240,255,0) 60%),
              radial-gradient(900px 300px at 80% 20%, #d7f7e8 0%, rgba(215,247,232,0) 60%),
              #ffffff;
  border: 1px solid rgba(13,110,253,.08);
}

.brand-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .65rem;
  border-radius: 999px;
  background: rgba(13,110,253,.10);
  color: var(--brand-blue);
  font-weight: 600;
}

.card{
  border: 1px solid rgba(11,42,58,.08);
  box-shadow: 0 6px 20px rgba(11,42,58,.05);
  border-radius: 18px;
}

.card-header{
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

.btn-brand{
  background: linear-gradient(90deg, var(--brand-blue), #1aa7ff);
  border: 0;
}

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

.btn-outline-brand{
  border-color: rgba(13,110,253,.35);
}

.icon-circle{
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(32,201,151,.12);
  color: var(--brand-green);
}

.footer{
  border-top: 1px solid rgba(11,42,58,.08);
  background: #ffffff;
}

.small-muted{ color: rgba(11,42,58,.65); }

.kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: 1rem;
  background:#ffffff;
  border: 1px dashed rgba(11,42,58,.18);
  border-radius: 18px;
}

.table thead th{
  background: rgba(13,110,253,.06);
}

.badge-soft{
  background: rgba(32,201,151,.12);
  color: #0f5132;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background: rgba(13,110,253,.08);
  color: var(--brand-blue);
  font-size: .85rem;
}

.form-hint{
  font-size:.9rem;
  color: rgba(11,42,58,.65);
}

.page-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.img-cover{
  object-fit: cover;
}

code.k{
  background: rgba(13,110,253,.08);
  padding:.15rem .35rem;
  border-radius: 8px;
}