:root {
  --d24-primary: #0e8fb8;
  --d24-teal: #0d9488;
  --d24-dark: #0f172a;
  --d24-side: #0b1f33;
  --d24-bg: #f3f6fa;
  --bs-primary: #0e8fb8;
  --bs-primary-rgb: 14, 143, 184;
  --bs-link-color: #0e7fa5;
  --bs-link-color-rgb: 14, 127, 165;
  --bs-border-radius: .6rem;
}
body { background: var(--d24-bg); color: #1e293b; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.btn-primary { --bs-btn-bg: #0e8fb8; --bs-btn-border-color: #0e8fb8; --bs-btn-hover-bg: #0b7599; --bs-btn-hover-border-color: #0b7599; --bs-btn-active-bg: #0a6788; }
.btn-outline-primary { --bs-btn-color: #0e8fb8; --bs-btn-border-color: #0e8fb8; --bs-btn-hover-bg: #0e8fb8; --bs-btn-hover-border-color: #0e8fb8; --bs-btn-active-bg: #0b7599; }
.text-primary { color: #0e8fb8 !important; }
.bg-primary { background-color: #0e8fb8 !important; }
.form-control:focus, .form-select:focus { border-color: #6cc3de; box-shadow: 0 0 0 .2rem rgba(14,143,184,.18); }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex-shrink: 0; background: linear-gradient(180deg, #0b2540 0%, #0a1b2e 100%); color: #cbd5e1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1030;
}
.sidebar .brand { display: block; padding: 1.25rem 1.25rem .75rem; }
.sidebar .brand img { height: 40px; }
.sidebar .clinic-name { margin: 0 1rem .75rem; padding: .5rem .75rem; border-radius: .5rem; background: rgba(255,255,255,.06); font-size: .85rem; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar nav { flex: 1; padding: .25rem .75rem; overflow-y: auto; }
.sidebar nav a, .sidebar-foot a, .sidebar-foot .btn-link {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; margin-bottom: 2px; border-radius: .55rem;
  color: #cbd5e1; text-decoration: none; font-size: .95rem; width: 100%; text-align: left; border: 0;
}
.sidebar nav a i, .sidebar-foot i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.sidebar nav a:hover, .sidebar-foot a:hover, .sidebar-foot .btn-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav a.active, .sidebar-foot a.active { background: linear-gradient(90deg, #0ea5e9, #0d9488); color: #fff; box-shadow: 0 4px 14px rgba(14,165,233,.25); }
.sidebar-foot { padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot small { display: block; font-size: .75rem; opacity: .7; }
.sidebar-foot a span { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background: #fff; border-bottom: 1px solid #e5e9f0;
  position: sticky; top: 0; z-index: 1020;
}
.content { padding: 1.5rem; flex: 1; }
.quick-search { position: relative; flex: 1; max-width: 520px; }
.quick-search > i { position: absolute; z-index: 2; left: .85rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.quick-search input { padding-left: 2.3rem; background: #f1f5f9; border-color: transparent; }
.quick-search input:focus { background: #fff; }
.quick-search .dropdown-menu { width: 100%; max-height: 420px; overflow-y: auto; }
.quick-search .dropdown-item small { color: #64748b; }

@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: -260px; transition: left .2s; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .content { padding: 1rem; }
  .topbar { padding: .6rem 1rem; }
}

/* ---------- Components ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--d24-dark); }
.page-head .sub { color: #64748b; font-size: .9rem; }
.card { border: 1px solid #e5e9f0; border-radius: .9rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f5; font-weight: 600; padding: .85rem 1.1rem; border-radius: .9rem .9rem 0 0 !important; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-header i { color: var(--d24-primary); }
.card-header .btn i, .card-header .badge i { color: inherit; }
.card.stat { flex-direction: row; }
.stat { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; }
.stat .icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; flex-shrink: 0; }
.stat .val { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--d24-dark); }
.stat .lbl { color: #64748b; font-size: .85rem; }
.bg-grad-1 { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.bg-grad-2 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.bg-grad-3 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.bg-grad-4 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.table { --bs-table-hover-bg: #f5f9fc; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .65rem .9rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 600; background: #f8fafc; border-bottom-width: 1px; }
.table-clickable tbody tr { cursor: pointer; }
.empty-state { text-align: center; color: #64748b; padding: 2rem 1rem; }
.empty-state i { font-size: 2.5rem; opacity: .5; display: block; }
.badge-soft { background: #e0f2fe; color: #0369a1; font-weight: 600; }
.badge-status { font-weight: 600; color: #fff; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0ea5e9, #0d9488); flex-shrink: 0; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.4rem; }
.form-label { font-weight: 500; font-size: .88rem; color: #334155; margin-bottom: .3rem; }
.form-section { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--d24-primary); margin: 1.25rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid #e5e9f0; }
.form-section:first-child { margin-top: 0; }
.required::after { content: " *"; color: #dc3545; }

/* Patient header */
.patient-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.patient-head h1 { font-size: 1.45rem; margin: 0; font-weight: 700; }
.patient-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; color: #475569; font-size: .9rem; }
.patient-meta i { color: #94a3b8; }
.alert-allergy { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: .6rem; padding: .5rem .85rem; font-weight: 500; }
.nav-tabs-d24 { border-bottom: 1px solid #e2e8f0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.nav-tabs-d24 .nav-link { border: 0; border-bottom: 3px solid transparent; color: #64748b; font-weight: 500; white-space: nowrap; padding: .7rem .9rem; border-radius: 0; }
.nav-tabs-d24 .nav-link.active { color: var(--d24-primary); border-bottom-color: var(--d24-primary); background: transparent; }
.nav-tabs-d24 .nav-link .badge { background: #e2e8f0; color: #475569; font-weight: 600; margin-left: .25rem; }
.info-list dt { font-weight: 500; color: #64748b; font-size: .82rem; }
.info-list dd { margin-bottom: .6rem; white-space: pre-line; }
.pre { white-space: pre-line; }
.vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.vital { background: #f8fafc; border: 1px solid #e5e9f0; border-radius: .6rem; padding: .55rem .75rem; }
.vital .v { font-size: 1.15rem; font-weight: 700; color: var(--d24-dark); }
.vital .l { font-size: .75rem; color: #64748b; }
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: .45rem; top: .3rem; bottom: .3rem; width: 2px; background: #e2e8f0; }
.timeline-item { position: relative; padding-bottom: 1rem; }
.timeline-item::before { content: ""; position: absolute; left: -1.3rem; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--d24-primary); }

/* Autocomplete */
.ac-wrap { position: relative; }
.ac-list { position: absolute; z-index: 1060; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #dbe2ea; border-radius: .5rem; box-shadow: 0 10px 30px rgba(15,23,42,.12); max-height: 300px; overflow-y: auto; display: none; }
.ac-list.show { display: block; }
.ac-item { padding: .5rem .75rem; cursor: pointer; font-size: .92rem; }
.ac-item:hover, .ac-item.active { background: #eef7fb; }
.ac-item .code { font-weight: 700; color: var(--d24-primary); margin-right: .5rem; font-family: ui-monospace, monospace; }

/* Calendar */
.fc { --fc-border-color: #e5e9f0; --fc-today-bg-color: #f0f9ff; --fc-button-bg-color: #fff; --fc-button-text-color: #334155; --fc-button-border-color: #dbe2ea; --fc-button-hover-bg-color: #f1f5f9; --fc-button-hover-border-color: #cbd5e1; --fc-button-active-bg-color: #0e8fb8; --fc-button-active-border-color: #0e8fb8; font-size: .9rem; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.25rem; font-weight: 700; color: var(--d24-dark); }
.fc-event { cursor: pointer; border-radius: 5px; }
.fc-cancelled { opacity: .55; text-decoration: line-through; }
.fc-google { background: #fff !important; border: 1px dashed #94a3b8 !important; color: #475569 !important; }
.fc-google .fc-event-main { color: #475569 !important; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; }

/* Login */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
  background: radial-gradient(circle at 15% 20%, rgba(14,165,233,.18), transparent 40%), radial-gradient(circle at 85% 80%, rgba(13,148,136,.2), transparent 45%), #eef4f9; }
.login-card { width: 100%; max-width: 410px; background: #fff; border-radius: 1.25rem; padding: 2.25rem 2rem; box-shadow: 0 20px 60px rgba(15,23,42,.12); }
.login-logo { height: 58px; }
.login-foot { color: #94a3b8; font-size: .85rem; margin-top: 1.5rem; }

@media print {
  .sidebar, .topbar, .no-print, .btn, .alert-dismissible .btn-close { display: none !important; }
  .content { padding: 0; }
  body { background: #fff; }
  .card { border: 0; box-shadow: none; }
}
.input-group > .ac-wrap { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .ac-wrap > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }