:root {
  --app-primary: #146b68;
  --app-ink: #203b43;
  --app-muted: #657c83;
  --app-surface: #f2f7f7;
  --bs-primary: #146b68;
  --bs-primary-rgb: 20, 107, 104;
  --bs-link-color: #146b68;
  --bs-link-hover-color: #0e514f;
}
body {
  background: var(--app-surface) !important;
  color: var(--app-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}
.navbar { border-bottom: 1px solid #e0ebeb; box-shadow: 0 4px 24px #203b4308 !important; }
.navbar-brand { color: var(--app-primary); letter-spacing: -.04em; }
.navbar .nav-link { border-radius: 12px; padding: 10px 12px !important; font-size: .9rem; }
.navbar .nav-link.active { background: #e5f3ef; color: var(--app-primary); }
.navbar-toggler { border: 0; padding: 10px; }
.card { border: 1px solid #e1ebeb; border-radius: 22px; overflow: visible; }
.card.shadow, .card.shadow-sm { box-shadow: 0 8px 30px #203b4308 !important; }
.card-body { padding: clamp(18px, 3vw, 32px); }
.card-title { font-weight: 750; letter-spacing: -.035em; color: var(--app-ink); }
.form-label { font-size: .875rem; font-weight: 600; color: var(--app-muted); }
.form-control, .form-select { border-color: #d7e4e4; border-radius: 12px; min-height: 46px; }
.form-control:focus, .form-select:focus { border-color: #3d9691; box-shadow: 0 0 0 .2rem #146b681a; }
.btn { border-radius: 12px; font-weight: 600; padding: 11px 16px; }
.btn-primary { --bs-btn-bg: #146b68; --bs-btn-border-color: #146b68; --bs-btn-hover-bg: #0e514f; --bs-btn-hover-border-color: #0e514f; --bs-btn-active-bg: #0e514f; --bs-btn-active-border-color: #0e514f; --bs-btn-disabled-bg: #146b68; --bs-btn-disabled-border-color: #146b68; }
.btn-outline-primary { --bs-btn-color: #146b68; --bs-btn-border-color: #b6d4d1; --bs-btn-hover-bg: #146b68; --bs-btn-hover-border-color: #146b68; --bs-btn-active-bg: #146b68; --bs-btn-active-border-color: #146b68; }
.btn-sm { padding: 8px 12px; }
.table { --bs-table-striped-bg: #f4f8f8; --bs-table-hover-bg: #eaf4f2; }
.table thead th { color: var(--app-muted); font-size: .78rem; padding: 14px 10px; border-bottom-color: #dce8e8; }
.table td { padding: 12px 10px; }
.table-responsive { border-radius: 12px; }
.list-group-item { border-color: #e1ebeb; padding: 16px; }
.modal-content { border: 0; border-radius: 22px; box-shadow: 0 20px 70px #203b4326; }
.modal-header, .modal-footer { border-color: #edf2f2; padding: 18px 22px; }
.modal-body { padding: 22px; }
.app-bottom-nav { display: none; }
.app-eyebrow { color: var(--app-primary); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.app-welcome { margin-bottom: 24px; }
.app-welcome h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 750; letter-spacing: -.05em; margin: 6px 0; }
.app-welcome p { color: var(--app-muted); margin: 0; }
.app-date-nav { display: grid !important; grid-template-columns: 1fr minmax(130px, 180px) 1fr; gap: 8px; }
.app-date-nav #date { width: 100%; max-width: none !important; margin: 0 !important; min-width: 0; }
#slots-container { gap: 8px; padding: 8px 0 16px; }
.card-slot { border: 0; border-radius: 16px; min-height: 64px; }
.card-slot.available { background: var(--app-primary) !important; }
.card-slot.available:hover { transform: translateY(-3px); }
.app-auth { height: auto; padding: 32px 16px; background: radial-gradient(ellipse at top, #dcefe9, #f2f7f7 65%) !important; }
.app-auth .login-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid #e1ebeb; border-radius: 28px; padding: 32px; box-shadow: 0 16px 50px #203b430c; margin: auto; }
.app-auth .btn-primary { width: 100%; }
#upcoming-visits, #book-visit { scroll-margin-top: calc(90px + env(safe-area-inset-top)); }
.app-auth-brand { text-align: center; margin-bottom: 28px; }
.app-auth-brand img { width: 72px; height: 72px; object-fit: contain; border-radius: 20px; margin-bottom: 14px; }
.app-auth-brand p { color: var(--app-muted); font-size: .9rem; }
.pwa-install-button { background: var(--app-primary); min-height: 44px; }
@media (max-width: 991.98px) {
  body:has(.app-bottom-nav) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .navbar { padding-top: calc(10px + env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  body:has(> .navbar) { padding-top: calc(78px + env(safe-area-inset-top)); }
  .navbar .container-fluid { padding-inline: 20px; }
  .navbar-brand { font-size: 1.15rem; }
  .navbar-collapse { padding: 12px 0; max-height: 65dvh; overflow-y: auto; }
  .app-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; padding: 8px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid #deebea; box-shadow: 0 -5px 25px #203b4306; }
  .app-bottom-nav a { flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--app-muted); font-size: .65rem; font-weight: 600; border-radius: 14px; }
  .app-bottom-nav a i { font-size: 1.25rem; line-height: 1.2; }
  .app-bottom-nav a.active { background: #e5f3ef; color: var(--app-primary); }
  body:has(.app-bottom-nav) .pwa-install { bottom: calc(86px + env(safe-area-inset-bottom)); max-height: 45dvh; }
}
@media (max-width: 575.98px) {
  body > .container { padding-inline: 16px; }
  .card { border-radius: 20px; }
  .card-title { font-size: 1.25rem; text-align: left !important; margin-bottom: 20px !important; }
  .form-control, .form-select { font-size: 16px; }
  .btn { min-height: 44px; }
  .app-date-nav { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .app-date-nav .btn { font-size: 0; padding: 10px; }
  .app-date-nav .btn i { font-size: 1.2rem; }
  .modal-dialog { margin: 12px; }
  .modal-dialog-centered { min-height: calc(100% - 24px); }
  .modal-content { max-height: calc(100dvh - 24px); }
  .modal-body { overflow-y: auto; }
  .navbar .profile-img { display: none; }
  .app-patient-nav .navbar-brand { font-size: 1rem; }
  .app-patient-nav .app-user-name { display: none; }
  .app-auth .login-card { padding: 28px 22px; width: 100%; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  #my-appointments .list-group-item { gap: 12px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .app-bottom-nav, .app-welcome { display: none !important; }
  body:has(.app-bottom-nav) { padding-bottom: 0; }
}