:root {
  --ink: #17252a;
  --muted: #758185;
  --line: #e8ecea;
  --paper: #fbfcfa;
  --white: #ffffff;
  --teal: #0c8079;
  --teal-dark: #075d5c;
  --blue-soft: #e7f1fb;
  --green-soft: #e4f5ee;
  --amber-soft: #fff4dc;
  --coral-soft: #fbe9e4;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f4f7f4; font-family: "DM Sans", sans-serif; }
body.locked { overflow: hidden; }
button, select { font: inherit; }
button { cursor: pointer; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 15%, #d5eee5 0, transparent 32%), linear-gradient(135deg, #f7fbf8, #e7f1ec); }
.login-panel { width: min(100%, 430px); padding: 42px; border: 1px solid #dce8e1; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(23,65,67,.12); }
.login-brand { margin-bottom: 48px; color: var(--teal-dark); }.login-panel h1 { margin: 8px 0; }.login-copy { margin: 0 0 28px; color: var(--muted); font-size: 14px; line-height: 1.55; }
form { display: grid; gap: 16px; } label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; } input { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--ink); background: #fff; font-size: 14px; } input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12,128,121,.12); }
.login-button { width: 100%; margin-top: 6px; padding: 13px; }.form-error { min-height: 16px; margin: 0; color: #b55046; font-size: 12px; }
.login-screen.hidden { display: none; }
.app-shell { min-height: 100vh; display: none; }
body.authenticated .app-shell { display: flex; }
.sidebar { width: 228px; padding: 30px 18px 22px; display: flex; flex-direction: column; background: #0e4143; color: #dceeed; }
.brand { display: flex; align-items: center; gap: 11px; color: #d9ece8; font-size: 13px; line-height: 1.15; letter-spacing: .02em; }
.brand strong { color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 18px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #0e4143; background: #a8ddd0; font-family: "Space Grotesk", sans-serif; font-weight: 700; }
nav { margin-top: 62px; display: grid; gap: 8px; }
nav a { padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-radius: 8px; color: #9bc4c1; text-decoration: none; font-size: 14px; }
nav a span { width: 20px; font-size: 20px; text-align: center; }
nav a.active, nav a:hover { color: #fff; background: rgba(168, 221, 208, .14); }
.sidebar-foot { margin-top: auto; padding: 14px 10px; display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.12); color: #9bc4c1; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #76d8a5; box-shadow: 0 0 0 4px rgba(118,216,165,.12); }
.content { width: calc(100% - 228px); max-width: 1440px; padding: 34px 5.5% 56px; }
.topbar, .toolbar, .panel-heading, .date-nav, .toolbar-actions, .user-chip, .summary, .select-wrap { display: flex; align-items: center; }
.topbar { justify-content: space-between; }
.eyebrow { margin: 0 0 4px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, strong { font-family: "Space Grotesk", sans-serif; }
h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.user-chip { gap: 10px; font-size: 13px; }
.user-chip b, .user-chip small { display: block; }
.user-chip small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #075d5c; background: #cae8df; font-size: 11px; font-weight: 700; }
.chevron { margin-left: 8px; color: var(--muted); font-size: 17px; }
.toolbar { justify-content: space-between; margin: 40px 0 22px; }
.date-nav { gap: 8px; }
.date-nav strong { margin-left: 14px; font-size: 15px; text-transform: capitalize; }
.icon-button, .today-button { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.icon-button { width: 33px; height: 33px; border-radius: 7px; font-size: 23px; line-height: 1; }
.today-button { height: 33px; padding: 0 13px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.toolbar-actions { gap: 12px; }
.select-wrap { height: 40px; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.select-wrap span { color: var(--muted); font-size: 11px; }
select { min-width: 120px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; font-weight: 700; }
.view-switch { padding: 3px; border-radius: 8px; background: #e9efec; }
.view-switch button { padding: 8px 12px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 12px; }
.view-switch button.selected { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(23,37,42,.08); font-weight: 700; }
.summary { gap: 14px; margin-bottom: 26px; }
.summary article { min-width: 0; flex: 1; padding: 17px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.summary-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; font-size: 18px; }
.summary-icon.blue { color: #3172ad; background: var(--blue-soft); }.summary-icon.green { color: #298765; background: var(--green-soft); }.summary-icon.amber { color: #c0861d; background: var(--amber-soft); }.summary-icon.coral { color: #c46c5f; background: var(--coral-soft); }
.summary small, .summary strong { display: block; }.summary small { color: var(--muted); font-size: 11px; }.summary strong { margin-top: 4px; font-size: 22px; }
.agenda-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.panel-heading { justify-content: space-between; padding: 23px 25px; border-bottom: 1px solid var(--line); }
h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.primary-button { padding: 10px 14px; border: 0; border-radius: 7px; color: #fff; background: var(--teal); font-size: 12px; font-weight: 700; }.primary-button:hover { background: var(--teal-dark); }
.secondary-button, .logout-button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--teal-dark); background: var(--white); font-size: 12px; font-weight: 700; }.logout-button { padding: 5px 8px; color: var(--muted); font-size: 11px; }.secondary-button:hover, .logout-button:hover { border-color: var(--teal); }
.modal { width: min(92vw, 560px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 80px rgba(23,37,42,.22); }.modal::backdrop { background: rgba(14,65,67,.45); }.modal form { padding: 26px; }.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }.close-button { border: 0; color: var(--muted); background: transparent; font-size: 26px; }.dentist-list { display: grid; gap: 8px; padding: 0 26px 26px; }.dentist-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }.dentist-row small { display: block; margin-top: 3px; color: var(--muted); }.dentist-row button { padding: 5px 8px; border: 0; border-radius: 5px; color: #a95348; background: var(--coral-soft); font-size: 11px; }
.calendar { padding: 5px 25px 28px; }
.time-row { min-height: 74px; display: grid; grid-template-columns: 62px 1fr; border-bottom: 1px solid #f0f2f0; }.time-row:last-child { border-bottom: 0; }.time-label { padding-top: 15px; color: #a1aaab; font-size: 11px; }.appointment-slot { padding: 10px 0; }
.appointment-card { max-width: 650px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-left: 3px solid var(--teal); border-radius: 5px; background: #f1f8f5; }.appointment-card.pending { border-left-color: #e7a629; background: #fff9ed; }.appointment-card.cancelled { border-left-color: #cc7669; background: #fbefed; opacity: .72; }
.patient { display: flex; align-items: center; gap: 11px; }.patient-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #23665e; background: #cce8df; font-size: 11px; font-weight: 700; }.patient b { display: block; font-size: 13px; }.patient small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }.appointment-meta { display: flex; align-items: center; gap: 18px; }.appointment-meta time { font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 700; }.status { padding: 5px 8px; border-radius: 5px; color: #287c61; background: #dff2e9; font-size: 10px; font-weight: 700; }.status.pending { color: #9b741f; background: #ffedc2; }.status.cancelled { color: #aa5b50; background: #f7dcd7; }.appointment-actions { display: none; gap: 4px; }.appointment-card:hover .appointment-actions { display: flex; }.appointment-actions button { padding: 5px 7px; border: 0; border-radius: 4px; color: var(--teal-dark); background: #d9eee7; font-size: 10px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 13px; }.empty strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 16px; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 15px; border-radius: 7px; color: white; background: #173e40; box-shadow: 0 8px 20px rgba(0,0,0,.15); font-size: 12px; opacity: 0; transform: translateY(12px); transition: .2s ease; pointer-events: none; }.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .sidebar { width: 74px; padding: 22px 10px; align-items: center; }.brand span:not(.brand-mark), nav a:not(.active) { display: none; }.brand-mark { width: 40px; height: 40px; }.sidebar-foot span:last-child { display: none; }.content { width: calc(100% - 74px); padding: 28px 4%; }.summary { flex-wrap: wrap; }.summary article { flex-basis: calc(50% - 7px); } }
@media (max-width: 620px) { .topbar { align-items: flex-start; }.user-chip { margin-top: 3px; }.user-chip > span:not(.avatar):not(.chevron) { display: none; }.toolbar { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 28px; }.toolbar-actions { width: 100%; justify-content: space-between; }.select-wrap { flex: 1; }.summary article { flex-basis: 100%; }.panel-heading { align-items: flex-start; gap: 15px; flex-direction: column; }.calendar { padding-left: 15px; padding-right: 15px; }.appointment-card { align-items: flex-start; flex-direction: column; gap: 10px; }.appointment-meta { width: 100%; justify-content: space-between; }.appointment-actions { display: flex; }.time-row { grid-template-columns: 47px 1fr; } }