/* =====================================================
   Ha Hay Clinic ERP — Design System
   Palette: #990000 #CC0000 #FF0000 #FF3333 #FF6666 #FF9999 #FFCCCC
   ===================================================== */
:root {
  --hh-900: #990000;
  --hh-700: #CC0000;
  --hh-500: #FF0000;
  --hh-400: #FF3333;
  --hh-300: #FF6666;
  --hh-200: #FF9999;
  --hh-100: #FFCCCC;
  --hh-bg: #fdf7f7;
  --hh-text: #2b1a1a;
  --hh-muted: #8a6d6d;
  --hh-border: #f3dada;
  --hh-sidebar-w: 250px;
}

body {
  font-family: 'Segoe UI', 'Leelawadee UI', 'Sarabun', Tahoma, sans-serif;
  background: var(--hh-bg);
  color: var(--hh-text);
  font-size: .925rem;
}

/* ---------- Sidebar ---------- */
.hh-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--hh-sidebar-w);
  background: linear-gradient(180deg, var(--hh-900), var(--hh-700));
  color: #fff; z-index: 1040;
  overflow-y: auto;
  transition: transform .25s ease;
}
.hh-sidebar .brand {
  padding: 1.1rem 1.25rem;
  font-size: 1.05rem; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; gap: .6rem;
}
.hh-sidebar .brand small { display:block; font-size:.7rem; font-weight:400; opacity:.8; }
.hh-sidebar .nav-label {
  padding: .9rem 1.25rem .3rem;
  font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hh-200);
}
.hh-sidebar a.nav-link {
  color: #ffe3e3; padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: .65rem;
  font-size: .875rem; border-left: 3px solid transparent;
}
.hh-sidebar a.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.hh-sidebar a.nav-link.active {
  background: rgba(255,255,255,.14); color: #fff;
  border-left-color: var(--hh-100); font-weight: 600;
}
.hh-sidebar a.nav-link.disabled { color: rgba(255,204,204,.45); pointer-events: none; }
.hh-sidebar .badge-soon {
  margin-left: auto; font-size: .6rem;
  background: rgba(255,255,255,.15); color: var(--hh-100);
  padding: .1rem .4rem; border-radius: 99px;
}

/* ---------- Main / Navbar ---------- */
.hh-main { margin-left: var(--hh-sidebar-w); min-height: 100vh; }
.hh-navbar {
  background: #fff; border-bottom: 2px solid var(--hh-100);
  padding: .65rem 1.5rem; position: sticky; top: 0; z-index: 1030;
}
@media (max-width: 991.98px) {
  .hh-sidebar { transform: translateX(-100%); }
  .hh-sidebar.show { transform: translateX(0); }
  .hh-main { margin-left: 0; }
}

/* ---------- Buttons ---------- */
.btn-hh {
  background: var(--hh-700); border-color: var(--hh-700); color: #fff;
}
.btn-hh:hover, .btn-hh:focus { background: var(--hh-900); border-color: var(--hh-900); color: #fff; }
.btn-hh-outline { border: 1px solid var(--hh-700); color: var(--hh-700); background: #fff; }
.btn-hh-outline:hover { background: var(--hh-100); color: var(--hh-900); }
.btn-hh-soft { background: var(--hh-100); color: var(--hh-900); border: none; }
.btn-hh-soft:hover { background: var(--hh-200); color: var(--hh-900); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--hh-border); border-radius: .8rem; }
.card-header { background: #fff; border-bottom: 2px solid var(--hh-100); font-weight: 600; }
.hh-stat { border-left: 4px solid var(--hh-700); }
.hh-stat .stat-label { font-size: .75rem; color: var(--hh-muted); }
.hh-stat .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--hh-900); }
.hh-stat .stat-icon {
  width: 44px; height: 44px; border-radius: .7rem;
  background: var(--hh-100); color: var(--hh-700);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}

/* ---------- Tables ---------- */
.table thead th {
  background: var(--hh-100); color: var(--hh-900);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  border-bottom: none;
}
.table-hover tbody tr:hover { background: #fff0f0; }
.table td { vertical-align: middle; }

/* ---------- Forms ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--hh-300);
  box-shadow: 0 0 0 .2rem rgba(255,102,102,.25);
}
.form-label { font-weight: 600; font-size: .82rem; }
.required::after { content: " *"; color: var(--hh-500); }

/* ---------- Badges / Alerts ---------- */
.badge-hh { background: var(--hh-700); }
.badge-hh-soft { background: var(--hh-100); color: var(--hh-900); }
.alert-hh { background: var(--hh-100); border-color: var(--hh-200); color: var(--hh-900); }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hh-900) 0%, var(--hh-500) 100%);
  padding: 1rem;
}
.auth-card { width: 100%; max-width: 420px; border-radius: 1rem; border: none; }
.auth-card .auth-head {
  background: var(--hh-900); color: #fff;
  border-radius: 1rem 1rem 0 0; padding: 1.5rem; text-align: center;
}

/* ---------- Pagination ---------- */
.page-item.active .page-link { background: var(--hh-700); border-color: var(--hh-700); }
.page-link { color: var(--hh-700); }

/* ---------- Utility ---------- */
.text-hh { color: var(--hh-700) !important; }
.bg-hh-soft { background: var(--hh-100) !important; }
a { color: var(--hh-700); }
a:hover { color: var(--hh-900); }