:root {
  --navy: #111827;
  --navy-2: #182235;
  --teal: #14b8a6;
  --teal-dark: #0f766e;
  --teal-soft: #e7f8f5;
  --rose: #d85f79;
  --rose-soft: #fff0f3;
  --green: #27936b;
  --green-soft: #eaf8f1;
  --amber: #c98722;
  --amber-soft: #fff7e8;
  --violet: #7666a8;
  --violet-soft: #f2effa;
  --danger: #c24157;
  --ink: #1f2937;
  --muted: #697586;
  --line: #e5e9ef;
  --surface: #f6f8fa;
  --white: #fff;
  --shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

@font-face {
  font-family: "Noto Sans Arabic Local";
  src: local("Noto Sans Arabic"), local("NotoSansArabic-Regular");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Arabic Local";
  src: local("Noto Sans Arabic Bold"), local("NotoSansArabic-Bold");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.desktop-only { display: none !important; }
body.desktop-mode .desktop-only { display: inline-flex !important; }
body.desktop-mode .web-only { display: none !important; }
html { min-width: 320px; background: var(--surface); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--surface); font-family: "Noto Sans Arabic Local", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { display: grid; grid-template-columns: 242px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 22px 16px 16px; color: #d7dee8; background: var(--navy); border-inline-end: 1px solid rgba(255,255,255,.06); }
.clinic-brand { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 0 8px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.clinic-mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: #fff; background: var(--teal); border-radius: 8px; }
.clinic-mark svg { width: 24px; height: 24px; stroke-width: 2; }
.clinic-brand b, .clinic-brand small { display: block; }
.clinic-brand b { max-width: 150px; overflow: hidden; color: #fff; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.clinic-brand small { margin-top: 4px; color: #8f9bad; font-size: .67rem; }
.main-nav { display: grid; gap: 5px; margin-top: 24px; }
.nav-button { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 46px; padding: 9px 12px; color: #aeb8c6; background: transparent; border: 0; border-radius: 7px; cursor: pointer; text-align: start; }
.nav-button::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: -16px; width: 3px; background: transparent; border-radius: 0 4px 4px 0; }
.nav-button:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-button.is-active { color: #fff; background: rgba(20,184,166,.13); }
.nav-button.is-active::before { background: var(--teal); }
.nav-button svg { width: 19px; height: 19px; }
.nav-button span { font-size: .8rem; font-weight: 700; }
.nav-button i { display: grid; place-items: center; min-width: 23px; height: 21px; padding: 0 6px; color: #9ef2e7; background: rgba(20,184,166,.18); border-radius: 10px; font-size: .63rem; font-style: normal; }
.sidebar-spacer { flex: 1; }
.storage-status { display: grid; grid-template-columns: 34px minmax(0,1fr) 8px; align-items: center; gap: 9px; padding: 12px 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; }
.storage-status > span { display: grid; place-items: center; width: 34px; height: 34px; color: #92d9cf; background: rgba(20,184,166,.13); border-radius: 6px; }
.storage-status svg { width: 17px; }
.storage-status b, .storage-status small { display: block; }
.storage-status b { color: #e8edf4; font-size: .68rem; }
.storage-status small { margin-top: 3px; color: #8491a2; font-size: .61rem; }
.storage-status > i { width: 7px; height: 7px; background: #35c89e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(53,200,158,.11); }
.powered-by { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding-top: 15px; }
.powered-by small { color: #6f7b8d; font-size: .58rem; }
.powered-by img { width: 78px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); opacity: .68; }

.workspace { min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: minmax(150px, .65fr) minmax(280px, 1fr) auto; align-items: center; gap: 24px; min-height: 76px; padding: 12px 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.page-heading p, .page-heading h1 { margin: 0; }
.page-heading p { color: var(--muted); font-size: .63rem; }
.page-heading h1 { margin-top: 3px; color: var(--navy); font-size: 1.18rem; }
.global-search, .inline-search { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 13px; background: #f8fafb; border: 1px solid #e1e6eb; border-radius: 7px; }
.global-search:focus-within, .inline-search:focus-within { background: #fff; border-color: #7ddbd0; box-shadow: 0 0 0 3px rgba(20,184,166,.09); }
.global-search svg, .inline-search svg { flex: 0 0 auto; width: 18px; color: #8b97a6; }
.global-search input, .inline-search input { min-width: 0; width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: .75rem; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.icon-button:hover { border-color: #b9c3ce; }
#notificationButton { position: relative; color: #536174; }
#notificationButton i { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; background: var(--rose); border: 2px solid #fff; border-radius: 50%; }
.backup-button, .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 41px; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: .73rem; font-weight: 700; white-space: nowrap; }
.backup-button { color: var(--teal-dark); background: var(--teal-soft); border: 1px solid #bdebe5; }
.backup-button:hover { background: #d9f4f0; }
.primary-button { color: #fff; background: var(--teal-dark); border: 1px solid var(--teal-dark); box-shadow: 0 6px 18px rgba(15,118,110,.15); }
.primary-button:hover { background: #0b665f; }
.primary-button.small { min-height: 36px; padding: 6px 11px; font-size: .68rem; }
.secondary-button { color: #344054; background: #fff; border: 1px solid #d8dee6; }
.secondary-button:hover { border-color: #aab5c1; }
.secondary-button.full { width: 100%; }
.doctor-chip { display: grid; grid-template-columns: 36px minmax(0,1fr) 15px; align-items: center; gap: 8px; min-width: 173px; min-height: 46px; padding: 4px 6px; background: #fff; border: 0; border-inline-start: 1px solid var(--line); cursor: pointer; text-align: start; }
.doctor-chip > span { display: grid; place-items: center; width: 36px; height: 36px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 50%; font-weight: 800; }
.doctor-chip b, .doctor-chip small { display: block; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doctor-chip b { color: var(--navy); font-size: .69rem; }
.doctor-chip small { margin-top: 3px; color: var(--muted); font-size: .57rem; }
.doctor-chip > svg { width: 14px; color: #9aa5b1; }
.account-switcher { position: relative; }
.account-menu { position: absolute; z-index: 80; top: calc(100% + 10px); inset-inline-end: 0; width: 260px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 18px 55px rgba(17,24,39,.18); }
.account-menu > header { padding: 9px 10px 11px; border-bottom: 1px solid var(--line); }
.account-menu header b, .account-menu header small { display: block; }
.account-menu header b { color: var(--navy); font-size: .72rem; }
.account-menu header small { margin-top: 3px; color: var(--muted); font-size: .57rem; }
.account-menu > div { display: grid; padding-top: 5px; }
.account-user { display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 9px; min-height: 52px; padding: 7px 8px; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: start; }
.account-user:hover, .account-user.is-active { background: #f1faf8; }
.account-user > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 50%; font-size: .65rem; font-weight: 800; }
.account-user b, .account-user small { display: block; }
.account-user b { color: var(--navy); font-size: .64rem; }
.account-user small { margin-top: 3px; color: var(--muted); font-size: .55rem; }
.account-user > i { display: none; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; }
.account-user.is-active > i { display: block; }

.main-content { max-width: 1580px; margin: 0 auto; padding: 28px; }
.app-view { display: none; }
.app-view.is-active { display: block; animation: view-in 160ms ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; margin-bottom: 20px; }
.welcome-row p, .welcome-row h2 { margin: 0; }
.eyebrow { color: var(--teal-dark); font-size: .64rem; font-weight: 800; }
.welcome-row h2 { margin-top: 6px; color: var(--navy); font-size: 1.48rem; }
.welcome-row > div > p:last-child { margin-top: 6px; color: var(--muted); font-size: .75rem; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 13px; min-height: 112px; padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 5px 20px rgba(17,24,39,.035); overflow: hidden; }
.stat-card::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: currentColor; }
.stat-card.teal { color: var(--teal-dark); }
.stat-card.rose { color: var(--rose); }
.stat-card.green { color: var(--green); }
.stat-card.amber { color: var(--amber); }
.stat-icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--teal-soft); border-radius: 7px; }
.stat-card.rose .stat-icon { background: var(--rose-soft); }
.stat-card.green .stat-icon { background: var(--green-soft); }
.stat-card.amber .stat-icon { background: var(--amber-soft); }
.stat-icon svg { width: 22px; height: 22px; }
.stat-card small, .stat-card strong, .stat-card p { display: block; margin: 0; }
.stat-card small { color: var(--muted); font-size: .64rem; font-weight: 700; }
.stat-card strong { margin-top: 5px; color: var(--navy); font-size: 1.65rem; line-height: 1; }
.stat-card p { margin-top: 7px; color: #8a95a3; font-size: .59rem; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, .64fr); align-items: start; gap: 18px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 16px 19px; border-bottom: 1px solid var(--line); }
.panel-header h3, .panel-header p { margin: 0; }
.panel-header h3 { color: var(--navy); font-size: .92rem; }
.panel-header p { margin-top: 5px; color: var(--muted); font-size: .62rem; }
.panel-header.compact { min-height: 66px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px; color: var(--teal-dark); background: transparent; border: 0; cursor: pointer; font-size: .65rem; font-weight: 700; }
.text-button svg { width: 14px; }
.schedule-table-wrap { position: relative; min-height: 370px; }
.schedule-table, .data-table { width: 100%; border-collapse: collapse; }
.schedule-table th, .data-table th { height: 43px; padding: 8px 14px; color: #8994a2; background: #fafbfc; border-bottom: 1px solid var(--line); font-size: .6rem; font-weight: 700; text-align: start; }
.schedule-table td { height: 66px; padding: 8px 14px; border-bottom: 1px solid #edf0f3; font-size: .7rem; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.time-cell { color: var(--navy); direction: ltr; font-size: .73rem; font-weight: 800; text-align: right; white-space: nowrap; }
.patient-cell { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.patient-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 50%; font-size: .69rem; font-weight: 800; }
.patient-cell b, .patient-cell small { display: block; }
.patient-cell b { color: var(--navy); font-size: .68rem; }
.patient-cell small { margin-top: 3px; color: #8a95a3; direction: ltr; font-size: .56rem; text-align: right; }
.visit-type { color: #556274; font-size: .66rem; }
.status-select { min-width: 108px; height: 32px; padding: 3px 8px; color: #596677; background: #f7f9fb; border: 1px solid #dce2e8; border-radius: 5px; font-size: .61rem; outline: none; }
.status-select[data-status="waiting"], .status-select[data-status="in_clinic"] { color: #9a681b; background: #fff8ea; border-color: #f2d89c; }
.status-select[data-status="in_progress"] { color: var(--teal-dark); background: var(--teal-soft); border-color: #b7e9e3; }
.status-select[data-status="completed"] { color: #237451; background: var(--green-soft); border-color: #bfe5d2; }
.status-select[data-status="cancelled"] { color: #a83d53; background: var(--rose-soft); border-color: #f3c7d0; }
.row-action { color: #778393; background: transparent; border: 0; cursor: pointer; }
.row-action svg { width: 18px; }
.day-sidebar { display: grid; gap: 18px; }
.next-patient-panel { overflow: hidden; }
.next-patient-panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 10px 16px; color: #fff; background: var(--navy-2); }
.next-patient-panel header div { display: flex; align-items: center; gap: 7px; }
.next-patient-panel header p { margin: 0; font-size: .64rem; font-weight: 700; }
.next-patient-panel header small { color: #b9c3cf; direction: ltr; font-size: .63rem; }
.live-dot { width: 7px; height: 7px; background: #4dd7b3; border-radius: 50%; box-shadow: 0 0 0 4px rgba(77,215,179,.12); }
.next-patient-card { display: grid; justify-items: center; padding: 23px 18px 19px; text-align: center; }
.next-patient-card .large-avatar { display: grid; place-items: center; width: 58px; height: 58px; color: #fff; background: var(--rose); border-radius: 50%; font-size: 1rem; font-weight: 800; box-shadow: 0 0 0 6px var(--rose-soft); }
.next-patient-card h3 { margin: 14px 0 4px; color: var(--navy); font-size: .9rem; }
.next-patient-card > p { margin: 0; color: var(--muted); font-size: .64rem; }
.patient-meta { display: grid; grid-template-columns: repeat(2,1fr); width: 100%; margin: 17px 0; border-block: 1px solid var(--line); }
.patient-meta div { padding: 10px; border-inline-end: 1px solid var(--line); }
.patient-meta div:last-child { border-inline-end: 0; }
.patient-meta small, .patient-meta b { display: block; }
.patient-meta small { color: #8b96a4; font-size: .55rem; }
.patient-meta b { margin-top: 4px; color: var(--navy); font-size: .65rem; }
.next-patient-actions { display: grid; grid-template-columns: 1fr 42px; gap: 8px; width: 100%; }
.next-patient-actions .primary-button { width: 100%; }
.empty-next { display: grid; justify-items: center; gap: 8px; min-height: 215px; padding: 35px 18px; color: var(--muted); text-align: center; }
.empty-next svg { width: 34px; height: 34px; color: #aab4bf; }
.empty-next h4, .empty-next p { margin: 0; }
.empty-next h4 { color: var(--navy); font-size: .8rem; }
.empty-next p { font-size: .63rem; }
.quick-actions-panel { overflow: hidden; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-grid button { display: grid; justify-items: center; align-content: center; min-height: 112px; padding: 12px; background: #fff; border: 0; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; text-align: center; }
.quick-grid button:nth-child(2n) { border-inline-end: 0; }
.quick-grid button:nth-last-child(-n+2) { border-bottom: 0; }
.quick-grid button:hover { background: #fafcfc; }
.quick-grid button > span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 7px; }
.quick-grid span.teal { color: var(--teal-dark); background: var(--teal-soft); }
.quick-grid span.rose { color: var(--rose); background: var(--rose-soft); }
.quick-grid span.violet { color: var(--violet); background: var(--violet-soft); }
.quick-grid span.amber { color: var(--amber); background: var(--amber-soft); }
.quick-grid button svg { width: 18px; }
.quick-grid b, .quick-grid small { display: block; }
.quick-grid b { color: var(--navy); font-size: .67rem; }
.quick-grid small { margin-top: 4px; color: #929ca8; font-size: .54rem; }

.empty-state { display: grid; place-items: center; align-content: center; min-height: 290px; padding: 30px; color: var(--muted); text-align: center; }
.empty-state svg { width: 38px; height: 38px; color: #b1bbc5; }
.empty-state h4, .empty-state p { margin: 0; }
.empty-state h4 { margin-top: 12px; color: var(--navy); font-size: .9rem; }
.empty-state p { margin-top: 6px; font-size: .65rem; }
.empty-state .primary-button { margin-top: 14px; }

.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; margin-bottom: 18px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.section-title p, .section-title h2 { margin: 0; }
.section-title h2 { margin-top: 5px; color: var(--navy); font-size: 1.38rem; }
.date-controller { display: flex; align-items: center; gap: 7px; }
.date-display { display: inline-flex; align-items: center; gap: 8px; min-width: 190px; min-height: 40px; padding: 7px 12px; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: .7rem; font-weight: 700; }
.date-display svg { color: var(--teal-dark); }
.today-button { min-height: 40px; padding: 6px 12px; color: var(--teal-dark); background: var(--teal-soft); border: 1px solid #bee9e3; border-radius: 6px; cursor: pointer; font-size: .66rem; font-weight: 700; }
.full-panel { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding: 15px 19px; border-bottom: 1px solid var(--line); }
.table-toolbar h2, .table-toolbar h3, .table-toolbar p { margin: 0; }
.table-toolbar h2 { color: var(--navy); font-size: 1rem; }
.table-toolbar h3 { color: var(--navy); font-size: .9rem; }
.table-toolbar p { margin-top: 5px; color: var(--muted); font-size: .62rem; }
.inline-search { width: min(300px, 100%); min-height: 39px; }
.data-table-wrap { overflow-x: auto; }
.data-table { min-width: 790px; }
.data-table td { height: 67px; padding: 9px 14px; border-bottom: 1px solid #edf0f3; color: #536173; font-size: .67rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfdfd; }
.data-table tbody tr.urgent-row, .schedule-table tbody tr.urgent-row { background: #fff9fa; box-shadow: inset -3px 0 var(--rose); }
.urgent-flag { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 5px; padding: 3px 6px; color: #a43d53; background: var(--rose-soft); border-radius: 10px; font-size: .52rem; font-weight: 800; white-space: nowrap; }
.urgent-flag svg { width: 11px; height: 11px; }
.money-cell { color: var(--navy); direction: ltr; font-weight: 800; text-align: right; white-space: nowrap; }
.patient-code { display: inline-flex; padding: 4px 7px; color: #475467; background: #f2f4f7; border: 1px solid #e1e5ea; border-radius: 4px; direction: ltr; font-family: Consolas, "Courier New", monospace; font-size: .61rem; font-weight: 700; white-space: nowrap; }
.file-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: var(--teal-dark); background: transparent; border: 1px solid #cce8e4; border-radius: 5px; cursor: pointer; font-size: .61rem; font-weight: 700; }
.file-link svg { width: 14px; }
.tag { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; color: var(--violet); background: var(--violet-soft); border-radius: 12px; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.tag.pregnancy { color: #a1465d; background: var(--rose-soft); }
.tag.gynecology { color: var(--teal-dark); background: var(--teal-soft); }

.pregnancy-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.3fr); align-items: start; gap: 18px; }
.pregnancy-list-panel { overflow: hidden; }
.count-badge { display: grid; place-items: center; min-width: 28px; height: 25px; padding: 0 7px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 13px; font-size: .62rem; font-weight: 800; }
.pregnancy-list { display: grid; }
.pregnancy-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 76px; padding: 11px 15px; background: #fff; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: start; }
.pregnancy-item:last-child { border-bottom: 0; }
.pregnancy-item.is-active { background: #f4fbfa; box-shadow: inset -3px 0 var(--teal); }
.pregnancy-item .patient-avatar { width: 38px; height: 38px; }
.pregnancy-item b, .pregnancy-item small { display: block; }
.pregnancy-item b { color: var(--navy); font-size: .68rem; }
.pregnancy-item small { margin-top: 4px; color: var(--muted); font-size: .57rem; }
.pregnancy-item > span:last-child { color: var(--rose); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.pregnancy-summary { min-height: 460px; padding: 22px; }
.pregnancy-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pregnancy-head .identity { display: flex; align-items: center; gap: 12px; }
.pregnancy-head .patient-avatar { width: 46px; height: 46px; font-size: .78rem; }
.pregnancy-head h3, .pregnancy-head p { margin: 0; }
.pregnancy-head h3 { color: var(--navy); font-size: .95rem; }
.pregnancy-head p { margin-top: 5px; color: var(--muted); font-size: .61rem; }
.pregnancy-weeks { display: flex; align-items: baseline; gap: 4px; color: var(--rose); }
.pregnancy-weeks strong { font-size: 1.7rem; }
.pregnancy-weeks small { font-size: .62rem; font-weight: 700; }
.pregnancy-progress { margin: 24px 0; }
.pregnancy-progress header { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: .61rem; }
.progress-track { height: 8px; background: #edf0f3; border-radius: 4px; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--rose); border-radius: inherit; }
.pregnancy-metrics { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 7px; }
.pregnancy-metrics div { padding: 15px; border-inline-end: 1px solid var(--line); }
.pregnancy-metrics div:last-child { border-inline-end: 0; }
.pregnancy-metrics small, .pregnancy-metrics b { display: block; }
.pregnancy-metrics small { color: var(--muted); font-size: .57rem; }
.pregnancy-metrics b { margin-top: 7px; color: var(--navy); font-size: .71rem; }
.next-followup { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 18px; padding: 14px; background: var(--teal-soft); border: 1px solid #c2eae5; border-radius: 7px; }
.next-followup > span { display: grid; place-items: center; width: 42px; height: 42px; color: var(--teal-dark); background: #fff; border-radius: 6px; }
.next-followup b, .next-followup small { display: block; }
.next-followup b { color: var(--navy); font-size: .68rem; }
.next-followup small { margin-top: 4px; color: var(--teal-dark); font-size: .58rem; }
.next-followup > strong { color: var(--teal-dark); font-size: .7rem; }

.finance-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.finance-stat { display: flex; align-items: center; justify-content: space-between; min-height: 112px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.finance-stat div small, .finance-stat div strong { display: block; }
.finance-stat small { color: var(--muted); font-size: .63rem; }
.finance-stat strong { margin-top: 8px; color: var(--navy); font-size: 1.45rem; }
.finance-stat > span { display: grid; place-items: center; width: 44px; height: 44px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; }
.finance-stat.due > span { color: var(--amber); background: var(--amber-soft); }
.finance-stat.cancelled > span { color: var(--rose); background: var(--rose-soft); }

.settings-title { margin-bottom: 22px; }
.settings-title p, .settings-title h2 { margin: 0; }
.settings-title h2 { margin-top: 5px; }
.settings-title > p:last-child { margin-top: 7px; color: var(--muted); font-size: .66rem; }
.settings-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(270px,.55fr); align-items: start; gap: 18px; }
.settings-form { padding: 22px; }
.settings-section { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.settings-section.second { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.settings-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; }
.settings-icon.rose { color: var(--rose); background: var(--rose-soft); }
.settings-icon.amber { color: var(--amber); background: var(--amber-soft); }
.settings-section h3, .settings-section p { margin: 0; }
.settings-section h3 { color: var(--navy); font-size: .8rem; }
.settings-section p { margin-top: 4px; color: var(--muted); font-size: .58rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field > span { color: #4b5768; font-size: .64rem; font-weight: 700; }
.field > span b { color: var(--danger); }
.field input, .field select, .field textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #fff; border: 1px solid #d7dee6; border-radius: 6px; outline: none; font-size: .7rem; }
.field textarea { min-height: 76px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #72d4c8; box-shadow: 0 0 0 3px rgba(20,184,166,.09); }
.form-actions { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-side { display: grid; gap: 18px; }
.security-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 17px; }
.security-card > span { display: grid; place-items: center; width: 42px; height: 42px; color: var(--green); background: var(--green-soft); border-radius: 7px; }
.security-card h3, .security-card p { margin: 0; }
.security-card h3 { color: var(--navy); font-size: .77rem; }
.security-card p { margin-top: 6px; color: var(--muted); font-size: .6rem; line-height: 1.75; }
.backup-card { display: grid; gap: 10px; padding: 18px; }
.backup-card h3, .backup-card p { margin: 0; }
.backup-card h3 { color: var(--navy); font-size: .8rem; }
.backup-card p { margin-top: 6px; color: var(--muted); font-size: .61rem; line-height: 1.7; }
.file-button { cursor: pointer; }
.working-days { margin: 2px 0 16px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; }
.working-days legend { padding: 0 7px; color: #4b5768; font-size: .64rem; font-weight: 700; }
.working-days > div { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
.day-check { position: relative; display: block; cursor: pointer; }
.day-check input { position: absolute; opacity: 0; pointer-events: none; }
.day-check span { display: grid; place-items: center; min-height: 38px; color: var(--muted); background: #f8fafb; border: 1px solid var(--line); border-radius: 5px; font-size: .59rem; font-weight: 700; }
.day-check input:checked + span { color: var(--teal-dark); background: var(--teal-soft); border-color: #9dded6; }
.access-card { padding: 18px; }
.access-card h3, .access-card p { margin: 0; }
.access-card h3 { color: var(--navy); font-size: .8rem; }
.access-card p { margin-top: 6px; color: var(--muted); font-size: .6rem; line-height: 1.7; }
.access-list { display: grid; margin-top: 12px; border-top: 1px solid var(--line); }
.access-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 50px; border-bottom: 1px solid var(--line); }
.access-row:last-child { border-bottom: 0; }
.access-row > span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 50%; font-size: .57rem; font-weight: 800; }
.access-row b, .access-row small { display: block; }
.access-row b { color: var(--navy); font-size: .61rem; }
.access-row small { margin-top: 3px; color: var(--muted); font-size: .52rem; }
.access-row > i { color: var(--green); font-size: .54rem; font-style: normal; font-weight: 800; }

.consultation-empty { display: grid; justify-items: center; min-height: 520px; padding: 45px 24px; text-align: center; }
.consultation-empty > span { display: grid; place-items: center; width: 64px; height: 64px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 8px; }
.consultation-empty > span svg { width: 30px; height: 30px; }
.consultation-empty h2, .consultation-empty p { margin: 0; }
.consultation-empty h2 { margin-top: 18px; color: var(--navy); font-size: 1.15rem; }
.consultation-empty > p { margin-top: 7px; color: var(--muted); font-size: .67rem; }
.consultation-queue { display: grid; width: min(620px, 100%); margin-top: 25px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.queue-patient { display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 11px; min-height: 64px; padding: 9px 12px; background: #fff; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: start; }
.queue-patient:last-child { border-bottom: 0; }
.queue-patient:hover { background: #f7fbfa; }
.queue-patient b, .queue-patient small { display: block; }
.queue-patient b { color: var(--navy); font-size: .68rem; }
.queue-patient small { margin-top: 3px; color: var(--muted); font-size: .56rem; }
.queue-patient > time { color: var(--navy); direction: ltr; font-size: .67rem; font-weight: 800; }
.queue-patient > svg { width: 16px; color: var(--teal-dark); }
.consultation-patient-bar { display: grid; grid-template-columns: minmax(240px,1fr) auto auto; align-items: center; gap: 18px; min-height: 92px; margin-bottom: 18px; padding: 15px 18px; color: #fff; background: var(--navy); border-radius: 8px; box-shadow: var(--shadow); }
.consultation-identity { display: flex; align-items: center; gap: 12px; }
.consultation-identity .patient-avatar { width: 48px; height: 48px; color: #fff; background: var(--teal-dark); }
.consultation-identity p, .consultation-identity h2, .consultation-identity small { margin: 0; }
.consultation-identity .eyebrow { color: #79ded2; }
.consultation-identity h2 { margin-top: 3px; font-size: 1rem; }
.consultation-identity small { display: block; margin-top: 4px; color: #aeb9c7; font-size: .58rem; }
.consultation-visit-meta { display: grid; justify-items: center; gap: 4px; min-width: 105px; padding-inline: 17px; border-inline: 1px solid rgba(255,255,255,.12); }
.consultation-visit-meta span { color: #b9c5d2; font-size: .59rem; }
.consultation-visit-meta b { direction: ltr; font-size: .8rem; }
.consultation-actions { display: flex; align-items: center; gap: 8px; }
.consultation-actions .secondary-button { color: #dce4ed; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.consultation-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); align-items: start; gap: 18px; }
.clinical-panel, .prescription-panel { overflow: hidden; }
.clinical-panel { padding: 21px; }
.prescription-panel { position: sticky; top: 94px; }
.clinical-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.clinical-heading > span { display: grid; place-items: center; width: 40px; height: 40px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; }
.clinical-heading > span.rose { color: var(--rose); background: var(--rose-soft); }
.clinical-heading h3, .clinical-heading p { margin: 0; }
.clinical-heading h3 { color: var(--navy); font-size: .82rem; }
.clinical-heading p { margin-top: 4px; color: var(--muted); font-size: .57rem; }
.vitals-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.followup-field { width: min(300px,100%); }
.attachments-section { margin-top: 21px; padding-top: 20px; border-top: 1px solid var(--line); }
.attachments-section > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.attachments-section h3, .attachments-section p { margin: 0; }
.attachments-section h3 { color: var(--navy); font-size: .77rem; }
.attachments-section p { margin-top: 4px; color: var(--muted); font-size: .56rem; }
.attachment-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.attachment-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 88px; color: #8b96a4; background: #fafbfc; border: 1px dashed #cfd6de; border-radius: 6px; font-size: .59rem; }
.attachment-item { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 30px; align-items: center; gap: 8px; min-height: 64px; padding: 8px; background: #f9fafb; border: 1px solid var(--line); border-radius: 6px; }
.attachment-preview { display: grid; place-items: center; width: 42px; height: 42px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 5px; overflow: hidden; }
.attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.attachment-item b, .attachment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item b { color: var(--navy); font-size: .57rem; }
.attachment-item small { margin-top: 4px; color: var(--muted); font-size: .5rem; }
.attachment-item button { display: grid; place-items: center; width: 30px; height: 30px; color: var(--danger); background: transparent; border: 0; cursor: pointer; }
.attachment-item button svg { width: 15px; }
.prescription-panel .clinical-heading { margin: 0; padding: 18px; }
.medication-editor { padding: 16px; background: #fafbfc; border-bottom: 1px solid var(--line); }
.prescription-list { display: grid; min-height: 150px; max-height: 360px; overflow-y: auto; }
.prescription-empty { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 150px; padding: 24px; color: var(--muted); text-align: center; }
.prescription-empty svg { width: 28px; height: 28px; color: #aeb8c3; }
.prescription-empty p { margin: 0; font-size: .59rem; }
.medicine-item { display: grid; grid-template-columns: 28px minmax(0,1fr) 30px; gap: 9px; min-height: 83px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.medicine-number { display: grid; place-items: center; width: 28px; height: 28px; color: var(--rose); background: var(--rose-soft); border-radius: 50%; font-size: .58rem; font-weight: 800; }
.medicine-item h4, .medicine-item p, .medicine-item small { margin: 0; }
.medicine-item h4 { color: var(--navy); font-size: .67rem; }
.medicine-item p { margin-top: 5px; color: #4f5d6d; font-size: .57rem; line-height: 1.55; }
.medicine-item small { display: block; margin-top: 4px; color: var(--muted); font-size: .52rem; }
.medicine-item button { display: grid; place-items: center; width: 30px; height: 30px; color: var(--danger); background: transparent; border: 0; cursor: pointer; }
.medicine-item button svg { width: 15px; }
.prescription-notes { margin: 15px 16px 10px; }
.print-prescription { width: calc(100% - 32px); margin: 0 16px 16px; }
.prescription-print-area { display: none; }

.app-dialog { width: min(720px, calc(100% - 28px)); max-height: calc(100vh - 32px); padding: 0; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 30px 90px rgba(17,24,39,.26); overflow: hidden; }
.app-dialog::backdrop { background: rgba(17,24,39,.55); backdrop-filter: blur(3px); }
.compact-dialog { width: min(610px, calc(100% - 28px)); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 79px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.dialog-header p, .dialog-header h2 { margin: 0; }
.dialog-header h2 { margin-top: 4px; color: var(--navy); font-size: 1.08rem; }
.dialog-body { max-height: calc(100vh - 190px); padding: 20px; overflow-y: auto; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 9px; min-height: 70px; padding: 14px 20px; background: #fafbfc; border-top: 1px solid var(--line); }
.smart-slot-banner { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; margin-bottom: 17px; padding: 11px 12px; color: var(--teal-dark); background: var(--teal-soft); border: 1px solid #bce8e2; border-radius: 7px; }
.smart-slot-banner > span { display: grid; place-items: center; width: 38px; height: 38px; background: #fff; border-radius: 6px; }
.smart-slot-banner b, .smart-slot-banner small { display: block; }
.smart-slot-banner b { color: var(--navy); font-size: .67rem; }
.smart-slot-banner small { margin-top: 4px; font-size: .58rem; }
.smart-slot-banner.is-urgent { color: var(--rose); background: var(--rose-soft); border-color: #f2c4ce; }
.urgent-toggle { display: grid; grid-template-columns: auto 38px minmax(0,1fr); align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px 12px; background: #fffafb; border: 1px solid #f1d2d9; border-radius: 7px; cursor: pointer; }
.urgent-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--rose); }
.urgent-toggle > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--rose); background: var(--rose-soft); border-radius: 6px; }
.urgent-toggle b, .urgent-toggle small { display: block; }
.urgent-toggle b { color: var(--navy); font-size: .67rem; }
.urgent-toggle small { margin-top: 4px; color: var(--muted); font-size: .57rem; }
.urgent-reason[hidden] { display: none; }
.patient-file-dialog { width: min(760px, calc(100% - 28px)); }
.patient-file-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px; color: #fff; background: var(--navy); }
.patient-file-head .identity { display: flex; align-items: center; gap: 13px; }
.patient-file-head .patient-avatar { width: 48px; height: 48px; color: #fff; background: var(--teal-dark); font-size: .8rem; }
.patient-file-head h2, .patient-file-head p { margin: 0; }
.patient-file-head h2 { font-size: 1rem; }
.patient-file-head p { margin-top: 5px; color: #aeb9c7; direction: ltr; font-size: .62rem; text-align: right; }
.patient-file-head .icon-button { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.patient-file-body { padding: 21px; }
.file-metrics { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 7px; }
.file-metrics div { padding: 13px; border-inline-end: 1px solid var(--line); }
.file-metrics div:last-child { border-inline-end: 0; }
.file-metrics small, .file-metrics b { display: block; }
.file-metrics small { color: var(--muted); font-size: .56rem; }
.file-metrics b { margin-top: 6px; color: var(--navy); font-size: .68rem; }
.visit-history { margin-top: 20px; }
.visit-history h3 { margin: 0 0 11px; color: var(--navy); font-size: .8rem; }
.visit-line { display: grid; grid-template-columns: 90px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.visit-line:last-child { border-bottom: 0; }
.visit-line time { color: var(--muted); font-size: .59rem; }
.visit-line b { color: var(--navy); font-size: .65rem; }
.visit-line strong { color: var(--teal-dark); font-size: .62rem; }
.visit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.visit-actions button { padding: 5px 7px; color: var(--teal-dark); background: var(--teal-soft); border: 1px solid #c3e9e4; border-radius: 4px; cursor: pointer; font-size: .53rem; font-weight: 700; }
.file-notes { margin-top: 15px; padding: 13px; color: #596678; background: #f8fafb; border: 1px solid var(--line); border-radius: 6px; font-size: .63rem; line-height: 1.75; }

.search-results { position: fixed; z-index: 45; top: 66px; left: 50%; width: min(520px, calc(100% - 32px)); padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 18px 50px rgba(17,24,39,.16); transform: translateX(-50%); }
.search-result { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 55px; padding: 8px; background: #fff; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: start; }
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: #f8fbfa; }
.search-result b, .search-result small { display: block; }
.search-result b { color: var(--navy); font-size: .66rem; }
.search-result small { margin-top: 3px; color: var(--muted); direction: ltr; font-size: .56rem; text-align: right; }
.search-result > small { color: var(--teal-dark); direction: rtl; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 16px; color: #fff; background: var(--navy); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; box-shadow: 0 16px 45px rgba(17,24,39,.22); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: 180ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; color: #62ddc9; }
.toast span { font-size: .68rem; font-weight: 700; }
.login-screen { position: fixed; z-index: 300; inset: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; padding: 34px clamp(24px, 6vw, 90px) 22px; color: var(--navy); background: #f4f7f8; overflow-y: auto; }
.login-brand { display: flex; align-items: center; gap: 14px; width: min(960px, 100%); margin: 0 auto; }
.login-logo { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; color: #fff; background: var(--navy); border-radius: 8px; overflow: hidden; }
.login-logo svg { width: 27px; }
.login-logo img, .clinic-mark img, .brand-preview img, #userPhotoPreview img { width: 100%; height: 100%; object-fit: cover; }
.login-brand p, .login-brand h1, .login-brand small { margin: 0; }
.login-brand p { color: var(--teal-dark); font-size: .58rem; font-weight: 900; }
.login-brand h1 { margin-top: 2px; font-size: 1.08rem; }
.login-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: .58rem; }
.login-panel { align-self: center; width: min(620px, 100%); margin: 28px auto; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 55px rgba(17,24,39,.1); }
.login-panel header h2, .login-panel header p { margin: 0; }
.login-panel header h2 { margin-top: 5px; font-size: 1.18rem; }
.login-users { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 19px; }
.login-user { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 64px; padding: 9px 11px; text-align: right; background: #fff; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; transition: 150ms ease; }
.login-user:hover, .login-user.is-selected { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.login-user > span, .login-selected-user > span { display: grid; place-items: center; width: 42px; height: 42px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 50%; font-size: .68rem; font-weight: 900; overflow: hidden; }
.login-user > span img, .login-selected-user > span img, .access-row > span img, #accountInitial img, .account-user > span img { width: 100%; height: 100%; object-fit: cover; }
.login-user b, .login-user small, .login-selected-user b, .login-selected-user small { display: block; }
.login-user b, .login-selected-user b { font-size: .68rem; }
.login-user small, .login-selected-user small { margin-top: 4px; color: var(--muted); font-size: .54rem; }
.login-user > svg { width: 16px; color: var(--muted); }
.login-password-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.login-selected-user { display: flex; align-items: center; gap: 10px; }
.login-error { margin: -4px 0 0; color: #b42318; font-size: .6rem; font-weight: 800; }
.text-command { justify-self: center; padding: 5px; color: var(--teal-dark); background: transparent; border: 0; font: inherit; font-size: .58rem; font-weight: 800; cursor: pointer; }
.first-login-hint { margin: 14px 0 0; padding: 10px 12px; color: #6f4a05; background: #fff8e8; border: 1px solid #f0d695; border-radius: 6px; font-size: .57rem; line-height: 1.7; }
.login-screen > footer { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .56rem; }
.login-screen > footer svg { width: 15px; color: var(--teal-dark); }
.login-screen > footer b { margin-right: 8px; color: var(--navy); }
body.is-locked .app-shell { visibility: hidden; pointer-events: none; }
body.is-locked { overflow: hidden; }
.clinic-mark, #accountInitial, .account-user > span, .access-row > span { overflow: hidden; }
.clinic-mark img { object-fit: contain; background: #fff; }
.account-lock { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 42px; color: #b42318; background: #fff; border: 0; border-top: 1px solid var(--line); font: inherit; font-size: .58rem; font-weight: 800; cursor: pointer; }
.account-lock svg { width: 15px; }
.brand-upload, .employee-photo-upload { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px; background: #fafcfc; border: 1px dashed #b8c4cb; border-radius: 7px; cursor: pointer; }
.brand-preview, #userPhotoPreview { display: grid; place-items: center; width: 58px; height: 58px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; overflow: hidden; }
.brand-preview svg, #userPhotoPreview svg { width: 24px; }
.brand-upload b, .brand-upload small, .employee-photo-upload b, .employee-photo-upload small { display: block; }
.brand-upload b, .employee-photo-upload b { font-size: .65rem; }
.brand-upload small, .employee-photo-upload small { margin-top: 4px; color: var(--muted); font-size: .54rem; line-height: 1.6; }
.brand-upload .secondary-button, .employee-photo-upload .secondary-button { min-height: 34px; padding: 6px 10px; font-size: .54rem; }
.active-toggle { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; margin-top: 14px; padding: 12px; background: #fafcfc; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.active-toggle input { position: absolute; opacity: 0; }
.active-toggle > span { position: relative; width: 36px; height: 20px; background: #aeb7c2; border-radius: 20px; transition: 150ms ease; }
.active-toggle > span::after { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; content: ""; transition: 150ms ease; }
.active-toggle input:checked + span { background: var(--teal); }
.active-toggle input:checked + span::after { transform: translateX(-16px); }
.active-toggle b, .active-toggle small { display: block; }
.active-toggle b { font-size: .62rem; }
.active-toggle small { margin-top: 3px; color: var(--muted); font-size: .52rem; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.access-row { grid-template-columns: 34px minmax(0,1fr) auto; }
.access-row > span { width: 34px; height: 34px; }
.access-row.is-disabled { opacity: .6; }
.access-actions { display: flex; gap: 4px; }
.access-actions .icon-button { width: 30px; height: 30px; }
.icon-button.danger { color: #b42318; }
.patient-file-head-actions { display: flex; gap: 7px; }
.danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; color: #fff; background: #b42318; border: 1px solid #b42318; border-radius: 6px; font: inherit; font-size: .61rem; font-weight: 800; cursor: pointer; }
.danger-confirm .rollover-icon { color: #b42318; background: #feeceb; }
.cloud-service-card { padding: 18px; }
.cloud-service-card header { display: flex; gap: 10px; align-items: flex-start; }
.cloud-service-card header > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; }
.cloud-service-card header svg { width: 18px; }
.cloud-service-card h3, .cloud-service-card p { margin: 0; }
.cloud-service-card h3 { font-size: .68rem; }
.cloud-service-card p, .cloud-service-card > small { margin-top: 5px; color: var(--muted); font-size: .54rem; line-height: 1.7; }
.cloud-status { display: flex; align-items: center; gap: 7px; margin: 13px 0; padding: 9px 10px; color: #6f4a05; background: #fff8e8; border: 1px solid #f0d695; border-radius: 6px; font-size: .56rem; font-weight: 800; }
.cloud-status i { width: 7px; height: 7px; background: #d59b24; border-radius: 50%; }
.cloud-status.is-connected { color: #0f6b62; background: #ecfdf8; border-color: #9be8dc; }
.cloud-status.is-connected i { background: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.13); }
.cloud-status.is-warning { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.cloud-status.is-warning i { background: #e11d48; }
.cloud-actions { display: grid; gap: 8px; }
.cloud-sync-activity { display: block; color: var(--muted); font-size: .52rem; line-height: 1.65; text-align: center; }
.cloud-sync-activity.is-live { color: #0f6b62; font-weight: 800; }
.cloud-service-card > .secondary-button { margin-top: 8px; }
.cloud-disconnect { justify-self: center; color: #9f1239; font-size: .54rem; }
.cloud-service-card > small { display: block; text-align: center; }

.cloud-connect-dialog { width: min(620px, calc(100% - 28px)); }
.cloud-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; padding: 4px; background: #f2f5f7; border: 1px solid var(--line); border-radius: 7px; }
.cloud-mode button { min-height: 38px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: .6rem; font-weight: 800; }
.cloud-mode button.is-active { color: var(--navy); background: #fff; box-shadow: 0 1px 4px rgba(17,24,39,.1); }
.cloud-register-fields { display: grid; gap: 12px; }
.cloud-privacy-note { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: start; padding: 11px; color: #285e59; background: var(--teal-soft); border: 1px solid #a7e5dc; border-radius: 6px; }
.cloud-privacy-note svg { width: 20px; margin: 2px auto 0; }
.cloud-privacy-note p { margin: 0; font-size: .56rem; line-height: 1.8; }
.dialog-message { min-height: 18px; margin: 0; color: #b42318; font-size: .56rem; line-height: 1.7; }
.cloud-info-content .dialog-body { padding-top: 16px; }
.cloud-flow { display: grid; gap: 10px; }
.cloud-flow article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px; background: #f8fafb; border: 1px solid var(--line); border-radius: 7px; }
.cloud-flow article > b { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--navy); border-radius: 6px; }
.cloud-flow h3, .cloud-flow p { margin: 0; }
.cloud-flow h3 { font-size: .64rem; }
.cloud-flow p { margin-top: 4px; color: var(--muted); font-size: .56rem; line-height: 1.7; }
.service-policy { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.service-policy span { padding: 7px 9px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 5px; font-size: .54rem; font-weight: 800; }
.prescription-output-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rx-brand { display: flex; align-items: center; gap: 12px; }
.rx-print-logo { width: 58px; height: 58px; object-fit: contain; }
.rollover-dialog { width: min(430px, calc(100% - 28px)); }
.rollover-content { display: grid; justify-items: center; padding: 28px; text-align: center; }
.rollover-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--amber); background: var(--amber-soft); border-radius: 50%; }
.rollover-content h2, .rollover-content p { margin: 0; }
.rollover-content h2 { margin-top: 15px; color: var(--navy); font-size: 1rem; }
.rollover-content p { margin-top: 8px; color: var(--muted); font-size: .65rem; line-height: 1.75; }
.rollover-content > div { display: flex; gap: 8px; margin-top: 22px; }

@media (max-width: 1200px) {
  .topbar { grid-template-columns: minmax(130px,.5fr) minmax(220px,1fr) auto; padding-inline: 20px; }
  .backup-button span, .doctor-chip small { display: none; }
  .doctor-chip { min-width: 125px; }
  .doctor-chip b { max-width: 78px; }
  .main-content { padding: 22px; }
  .dashboard-grid { grid-template-columns: minmax(0,1fr) 280px; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 78px minmax(0,1fr); }
  .sidebar { padding-inline: 10px; }
  .clinic-brand { justify-content: center; padding-inline: 0; }
  .clinic-brand > div, .nav-button span, .nav-button i, .storage-status div, .storage-status > i, .powered-by small { display: none; }
  .nav-button { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  .nav-button::before { inset-inline-start: -10px; }
  .storage-status { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  .powered-by img { width: 58px; }
  .topbar { grid-template-columns: minmax(120px,.5fr) minmax(180px,1fr) auto; gap: 12px; }
  .doctor-chip { min-width: 44px; grid-template-columns: 36px; }
  .doctor-chip div, .doctor-chip > svg { display: none; }
  .dashboard-grid, .pregnancy-layout, .settings-layout, .consultation-grid { grid-template-columns: 1fr; }
  .consultation-patient-bar { grid-template-columns: minmax(0,1fr) auto; }
  .consultation-actions { grid-column: 1 / -1; }
  .consultation-actions > * { flex: 1; }
  .prescription-panel { position: static; }
  .day-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .login-screen { padding: 22px 14px 18px; }
  .login-users { grid-template-columns: 1fr; }
  .login-panel { padding: 18px; }
  .login-screen > footer { flex-wrap: wrap; text-align: center; }
  .brand-upload, .employee-photo-upload { grid-template-columns: 50px minmax(0,1fr); }
  .brand-upload > .secondary-button, .employee-photo-upload > .secondary-button { grid-column: 1 / -1; }
  .prescription-output-actions { grid-template-columns: 1fr; }
  .app-shell { display: block; padding-bottom: 67px; }
  .sidebar { position: fixed; z-index: 50; inset: auto 0 0; display: block; width: auto; height: 67px; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); background: rgba(17,24,39,.98); }
  .clinic-brand, .sidebar-spacer, .storage-status, .powered-by { display: none; }
  .main-nav { grid-template-columns: repeat(auto-fit,minmax(50px,1fr)); gap: 0; margin: 0; }
  .nav-button { display: grid; grid-template-columns: 1fr; min-height: 56px; gap: 2px; border-radius: 4px; }
  .nav-button span { display: block; font-size: .49rem; }
  .nav-button::before { inset: auto 25% -5px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .nav-button svg { width: 18px; height: 18px; }
  .topbar { grid-template-columns: minmax(100px,1fr) auto; min-height: 65px; padding: 8px 12px; }
  .global-search { display: none; }
  .backup-button, #notificationButton { display: none; }
  .page-heading p { display: none; }
  .page-heading h1 { font-size: 1rem; }
  .main-content { padding: 16px 12px 24px; }
  .welcome-row { align-items: flex-start; flex-direction: column; gap: 14px; }
  .welcome-row .primary-button { width: 100%; }
  .welcome-row h2 { font-size: 1.2rem; }
  .stats-grid { gap: 9px; }
  .stat-card { grid-template-columns: 38px minmax(0,1fr); gap: 9px; min-height: 98px; padding: 12px; }
  .stat-icon { width: 38px; height: 38px; }
  .stat-card strong { font-size: 1.28rem; }
  .stat-card p { display: none; }
  .dashboard-grid { gap: 12px; }
  .day-sidebar { grid-template-columns: 1fr; }
  .appointments-panel { overflow: hidden; }
  .schedule-table { min-width: 650px; }
  .schedule-table-wrap { overflow-x: auto; }
  .panel-header { padding-inline: 14px; }
  .text-button { white-space: nowrap; }
  .section-toolbar { align-items: stretch; flex-direction: column; }
  .section-toolbar .primary-button, .section-toolbar .secondary-button { width: 100%; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions > * { flex: 1; }
  .date-controller { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px 55px; }
  .date-display { min-width: 0; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .inline-search { width: 100%; }
  .finance-stats { grid-template-columns: 1fr; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; gap: 0; }
  .settings-form { padding: 16px; }
  .working-days > div { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .consultation-patient-bar { grid-template-columns: 1fr; align-items: stretch; }
  .consultation-visit-meta { justify-items: start; padding: 10px 0; border-inline: 0; border-block: 1px solid rgba(255,255,255,.12); }
  .consultation-actions { flex-direction: column; }
  .consultation-actions > * { width: 100%; }
  .clinical-panel { padding: 16px; }
  .vitals-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .attachment-list { grid-template-columns: 1fr; }
  .queue-patient { grid-template-columns: 34px minmax(0,1fr) auto; }
  .queue-patient > svg { display: none; }
  .pregnancy-summary { padding: 16px; }
  .pregnancy-metrics, .file-metrics { grid-template-columns: repeat(2,1fr); }
  .pregnancy-metrics div:nth-child(2), .file-metrics div:nth-child(2) { border-inline-end: 0; }
  .pregnancy-metrics div:nth-child(-n+2), .file-metrics div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dialog-body { padding: 16px; }
  .search-results { top: 60px; }
}

@media print {
  .sidebar, .topbar, .section-toolbar .secondary-button { display: none !important; }
  body:not(.printing-prescription) .app-shell { display: block; }
  .main-content { max-width: none; padding: 0; }
  body:not(.printing-prescription) .app-view { display: none !important; }
  body:not(.printing-prescription) .app-view[data-app-view="finance"] { display: block !important; }
  .panel, .finance-stat { box-shadow: none; }
  body.printing-prescription { background: #fff; }
  body.printing-prescription .app-shell { display: none !important; }
  body.printing-prescription .prescription-print-area { display: block; width: 100%; padding: 8mm 10mm; color: #111827; direction: rtl; }
  .rx-print-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 2px solid #111827; }
  .rx-print-header h1, .rx-print-header p { margin: 0; }
  .rx-print-header h1 { font-size: 20pt; }
  .rx-print-header p { margin-top: 5px; font-size: 9pt; }
  .rx-print-patient { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid #cfd5dc; font-size: 10pt; }
  .rx-symbol { margin: 18px 0 8px; font-family: Georgia, serif; font-size: 28pt; font-weight: 700; }
  .rx-print-medicine { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid #e1e5ea; }
  .rx-print-medicine b { font-size: 11pt; }
  .rx-print-medicine p { margin: 4px 0 0; font-size: 9pt; }
  .rx-print-notes { margin-top: 14px; padding: 10px; border: 1px solid #d8dde3; font-size: 9pt; }
  .rx-print-footer { display: flex; justify-content: space-between; margin-top: 35px; padding-top: 12px; border-top: 1px solid #cfd5dc; font-size: 8pt; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}