/* Heartlinks CRM — brand theme (from heartlinkshospice.org) */
:root {
  --hl-purple:        #4E3D70;
  --hl-purple-dark:   #3B2E56;
  --hl-purple-mid:    #84739C;
  --hl-purple-light:  #9686B7;
  --hl-rose:          #DD679D;
  --hl-rose-dark:     #C44E85;
  --hl-teal:          #3FA9A0;
  --hl-bg:            #F5F4F8;
  --hl-card:          #FFFFFF;
  --hl-ink:           #2A2A2A;
  --hl-muted:         #7a7a85;
  --hl-border:        #e7e4ee;
  --hl-sidebar-w:     248px;
}

* { box-sizing: border-box; }
body {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--hl-bg);
  color: var(--hl-ink);
  margin: 0;
}
h1, h2, h3, h4, h5, h6, .brand-font {
  font-family: "Mulish", "Open Sans", sans-serif;
  font-weight: 700;
}
a { color: var(--hl-purple); }
a:hover { color: var(--hl-rose-dark); }

/* ---------- brand mark ---------- */
.hl-logo { display: inline-flex; align-items: center; gap: .55rem; font-family: "Mulish", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.hl-logo .dots { display: inline-flex; gap: 3px; }
.hl-logo .dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hl-logo .dots i:nth-child(1) { background: var(--hl-purple); }
.hl-logo .dots i:nth-child(2) { background: var(--hl-rose); }
.hl-logo .dots i:nth-child(3) { background: var(--hl-teal); }

/* ---------- auth screen ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
.auth-hero {
  background: linear-gradient(150deg, var(--hl-purple) 0%, var(--hl-purple-dark) 55%, #2c2140 100%);
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-hero::after {
  content: ""; position: absolute; right: -90px; bottom: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,103,157,.35), transparent 70%);
}
.auth-hero h1 { font-size: 2.2rem; line-height: 1.15; }
.auth-hero .tagline { color: var(--hl-rose); font-style: italic; font-size: 1.15rem; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-card { width: 100%; max-width: 380px; }
@media (max-width: 820px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}

/* ---------- app shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--hl-sidebar-w); flex: 0 0 var(--hl-sidebar-w);
  background: var(--hl-purple-dark); color: #e9e6f1;
  position: fixed; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
}
.sidebar .brand { padding: 1.15rem 1.25rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hl-purple-light); padding: 1rem 1.25rem .35rem; }
.sidebar a.nav-link {
  color: #d7d2e6; padding: .6rem 1.25rem; display: flex; align-items: center; gap: .7rem;
  border-left: 3px solid transparent; font-size: .93rem;
}
.sidebar a.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a.nav-link.active { background: rgba(221,103,157,.16); border-left-color: var(--hl-rose); color: #fff; }
.sidebar .nav-link i { width: 18px; text-align: center; }
.sidebar .spacer { flex: 1; }

.main { margin-left: var(--hl-sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--hl-border);
  padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 10;
}
.topbar .page-title { font-family: "Mulish", sans-serif; font-weight: 700; margin: 0; font-size: 1.15rem; color: var(--hl-purple); }
.content { padding: 1.5rem; flex: 1; }

@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; z-index: 1050; }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
}

/* ---------- avatar ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--hl-purple-mid);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; font-family: "Mulish", sans-serif; flex: 0 0 auto;
}
.avatar.lg { width: 84px; height: 84px; font-size: 1.6rem; }

/* ---------- stat cards ---------- */
.stat-card {
  background: var(--hl-card); border: 1px solid var(--hl-border); border-radius: 14px;
  padding: 1.15rem 1.25rem; height: 100%;
}
.stat-card .label { color: var(--hl-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .value { font-family: "Mulish", sans-serif; font-weight: 800; font-size: 2rem; color: var(--hl-purple); line-height: 1.1; }
.stat-card .icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.stat-card .icon.p { background: rgba(78,61,112,.12); color: var(--hl-purple); }
.stat-card .icon.r { background: rgba(221,103,157,.14); color: var(--hl-rose-dark); }
.stat-card .icon.t { background: rgba(63,169,160,.14); color: var(--hl-teal); }

.card-hl { background: var(--hl-card); border: 1px solid var(--hl-border); border-radius: 14px; }
.card-hl .card-header { background: transparent; border-bottom: 1px solid var(--hl-border); font-family: "Mulish", sans-serif; font-weight: 700; color: var(--hl-purple); }

/* ---------- buttons ---------- */
.btn-hl { background: var(--hl-purple); border-color: var(--hl-purple); color: #fff; }
.btn-hl:hover { background: var(--hl-purple-dark); border-color: var(--hl-purple-dark); color: #fff; }
.btn-rose { background: var(--hl-rose); border-color: var(--hl-rose); color: #fff; }
.btn-rose:hover { background: var(--hl-rose-dark); border-color: var(--hl-rose-dark); color: #fff; }
.btn-outline-hl { border-color: var(--hl-purple); color: var(--hl-purple); }
.btn-outline-hl:hover { background: var(--hl-purple); color: #fff; }

.form-control:focus, .form-select:focus { border-color: var(--hl-purple-light); box-shadow: 0 0 0 .2rem rgba(150,134,183,.25); }

/* ---------- badges / pills ---------- */
.pill { font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; font-weight: 600; }
.pill-new    { background: rgba(221,103,157,.15); color: var(--hl-rose-dark); }
.pill-review { background: rgba(78,61,112,.12); color: var(--hl-purple); }
.pill-ok     { background: rgba(63,169,160,.15); color: #2c7d76; }
.pill-muted  { background: #eee; color: #666; }
.pill-high   { background: #fdeaea; color: #b3261e; }
.pill-progress { background: #fff3cd; color: #8a6d00; }

/* ---------- schedule ---------- */
.appt { border: 1px solid var(--hl-border); border-radius: 12px; padding: .85rem 1rem; background: #fff; }
.appt + .appt { margin-top: .6rem; }
.appt .time { font-family: "Mulish", sans-serif; font-weight: 700; color: var(--hl-purple); }
.appt.status-completed { opacity: .72; }
.appt.status-cancelled { opacity: .6; }
.appt.status-cancelled .patient { text-decoration: line-through; }
.team-head { display: flex; align-items: center; gap: .5rem; }
.team-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.att-avatars { display: inline-flex; }
.att-avatars .avatar { width: 30px; height: 30px; font-size: .68rem; border: 2px solid #fff; }
.att-avatars .avatar + .avatar { margin-left: -8px; }
.datebar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.table thead th { color: var(--hl-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; border-bottom-color: var(--hl-border); }