:root {
  --primary: #168f78;
  --primary-dark: #0e6f5e;
  --primary-soft: #e8f6f2;
  --navy: #172b3b;
  --ink: #22313d;
  --muted: #7a8994;
  --line: #e8edef;
  --bg: #f6f8f8;
  --white: #fff;
  --shadow: 0 8px 30px rgba(26, 54, 64, .07);
  --sidebar: 248px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: "Tajawal", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: currentColor; }

.sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--sidebar);
  background: #fff;
  border-left: 1px solid var(--line);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}
.brand {
  height: 84px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: linear-gradient(145deg, #20ad91, #10735f);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 7px 18px rgba(22,143,120,.25);
}
.brand-mark svg { width: 28px; height: 28px; }
.brand strong { display: block; font-size: 19px; font-weight: 800; color: var(--navy); }
.brand span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.main-nav { padding: 18px 12px; flex: 1; overflow-y: auto; }
.nav-item {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  color: #63737f;
  min-height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  text-align: right;
  transition: .2s ease;
}
.nav-item:hover { background: #f4f8f7; color: var(--primary); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.nav-item.active::after { content: ""; position: absolute; right: -12px; width: 3px; height: 25px; border-radius: 5px 0 0 5px; background: var(--primary); }
.nav-icon { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 21px; }
.nav-count { margin-right: auto; background: #eef2f3; color: #87939b; padding: 2px 7px; border-radius: 20px; font-size: 10px; }
.nav-count.accent { color: var(--primary); background: #dff4ee; }
.alert-dot { width: 7px; height: 7px; background: #ed785d; border-radius: 50%; margin-right: auto; }
.ai-mini { margin-right: auto; color: #6854ca; background: #eeeafd; font-size: 9px; font-weight: 800; padding: 3px 6px; border-radius: 5px; }
.sidebar-footer { padding: 10px 12px 15px; border-top: 1px solid var(--line); }
.clinic-status { color: #84929b; font-size: 10px; display: flex; align-items: center; gap: 7px; padding: 8px 13px 0; }
.clinic-status span { width: 7px; height: 7px; border-radius: 50%; background: #20b985; box-shadow: 0 0 0 3px #def6ed; }

.main-content { margin-right: var(--sidebar); min-height: 100vh; transition: margin .25s ease; }
.topbar {
  height: 72px;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
}
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 13px; }
.topbar-actions { position: relative; }
.search { width: min(360px, 30vw); height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 13px; background: #f6f8f8; border: 1px solid transparent; border-radius: 10px; transition: .2s; }
.search:focus-within { background: white; border-color: #a9d8cd; box-shadow: 0 0 0 3px #e8f6f2; }
.search svg { color: #84939b; width: 18px; }
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: 12px; color: var(--ink); }
.search kbd { direction: ltr; border: 1px solid #dfe5e7; background: white; color: #9aa5ab; border-radius: 5px; padding: 2px 5px; font-size: 9px; }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: white; border-radius: 10px; color: #65757f; display: grid; place-items: center; }
.menu-toggle { display: none; }
.sidebar-close,
.sidebar-backdrop { display: none; }
.branch-switch, .user-menu { height: 46px; border: 0; background: transparent; display: flex; align-items: center; gap: 9px; color: var(--ink); padding: 3px 8px; border-radius: 10px; }
.branch-switch:hover, .user-menu:hover { background: #f6f8f8; }
.branch-switch > svg, .user-menu > svg { width: 14px; color: #88959e; }
.branch-icon, .avatar { display: grid; place-items: center; color: white; font-weight: 700; border-radius: 10px; }
.branch-icon { width: 32px; height: 32px; background: #183e55; }
.avatar { width: 36px; height: 36px; background: linear-gradient(145deg, #1c9f85, #0c6d5a); }
.branch-switch span:nth-child(2), .user-menu span:nth-child(2) { text-align: right; }
.branch-switch small, .user-menu small { display: block; font-size: 9px; color: #8b979f; margin-bottom: 2px; }
.branch-switch strong, .user-menu strong { display: block; font-size: 11px; font-weight: 700; }
.notification { position: relative; border: 0; background: #f7f9f9; }
.notification > span { position: absolute; top: -3px; left: -3px; width: 16px; height: 16px; background: #ee6e5b; color: white; font-size: 8px; border-radius: 50%; display: grid; place-items: center; border: 2px solid white; }
.account-menu {
  position: absolute;
  top: 55px;
  left: 0;
  width: 285px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 16px 45px rgba(23,43,59,.16);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: .2s ease;
  z-index: 100;
}
.account-menu.open { opacity: 1; visibility: visible; transform: none; }
.account-menu.employee-menu .account-menu-head,
.account-menu.employee-menu [data-role-switch] { display: none; }
.account-menu.employee-menu { width: 235px; }
.account-menu.employee-menu .logout-button { margin-top: 0; border-top: 0 !important; }
.return-admin-button { display: none !important; color: var(--primary-dark); }
.account-menu.impersonating-menu .account-menu-head,
.account-menu.impersonating-menu [data-role-switch] { display: none; }
.account-menu.impersonating-menu { width: 255px; }
.account-menu.impersonating-menu .return-admin-button { display: grid !important; }
.account-menu.impersonating-menu .logout-button { margin-top: 4px; }
.account-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.account-menu-head strong { display: block; font-size: 11px; color: var(--navy); }
.account-menu-head small { display: block; font-size: 8px; color: var(--muted); margin-top: 2px; }
.account-menu button { width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 8px; display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 9px; text-align: right; }
.account-menu button:hover { background: #f5f8f7; }
.account-menu button > span:nth-child(2) strong { display: block; font-size: 10px; color: #344650; }
.account-menu button > span:nth-child(2) small { display: block; font-size: 8px; color: #8b989f; margin-top: 2px; }
.account-menu button i { color: var(--primary); font-style: normal; font-weight: 800; }
.role-avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.admin-role { color: #0f7664; background: #def3ed; }
.secretary-role { color: #3975a3; background: #e4eff8; }
.accountant-role { color: #805fae; background: #eee7f8; }
.doctor-role { color: #b07731; background: #fbefdd; }

.page-wrap { max-width: 1530px; margin: 0 auto; padding: 28px 30px 50px; }
.page { display: none; animation: fadeIn .25s ease; }
.page.active-page { display: block; opacity: 1; transform: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 700; margin: 0 0 5px !important; }
.page-heading h1 { font-size: 25px; color: var(--navy); margin: 0 0 5px; font-weight: 800; }
.page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.heading-actions { display: flex; gap: 10px; }
.btn { height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 600; transition: .2s; }
.btn svg { width: 16px; }
.btn.primary { background: var(--primary); color: white; box-shadow: 0 6px 15px rgba(22,143,120,.18); }
.btn.primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn.secondary { background: white; border-color: #dde4e6; color: #4f606b; }
.btn.secondary:hover { border-color: #aacfc6; color: var(--primary); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 16px; }
.stat-card { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; min-width: 0; box-shadow: 0 2px 6px rgba(23,43,59,.02); transition: .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.stat-icon, .action-icon { width: 35px; height: 35px; border-radius: 9px; display: grid; place-items: center; }
.stat-icon svg, .action-icon svg { width: 18px; }
.mint { background: #e6f6f1; color: #168f78; }
.blue { background: #e7f1fa; color: #347fb8; }
.violet { background: #eeebfa; color: #755cc5; }
.amber { background: #fff1df; color: #dc9138; }
.trend { direction: ltr; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 5px; }
.trend.up { background: #e8f7f0; color: #1a9c70; }
.trend.down { background: #fff0ed; color: #db6c59; }
.stat-label { display: block; font-size: 11px; color: #7a8994; margin-bottom: 4px; }
.stat-value { display: block; direction: rtl; text-align: right; font-size: 23px; letter-spacing: -.5px; color: var(--navy); margin-bottom: 4px; }
.stat-note { color: #94a0a7; font-size: 10px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 2px 5px rgba(23,43,59,.02); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(280px, .85fr); gap: 16px; margin-bottom: 16px; }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 17px 19px; border-bottom: 1px solid #eef1f2; }
.card-header h2 { margin: 0 0 3px; color: var(--navy); font-size: 15px; }
.card-header p { margin: 0; color: #919da5; font-size: 10px; }
.text-btn { background: none; border: 0; color: var(--primary); font-size: 10px; font-weight: 600; }
.appointment-row { min-height: 68px; display: grid; grid-template-columns: 55px 16px 34px minmax(130px, 1.25fr) minmax(120px, 1fr) 76px 24px; gap: 10px; align-items: center; padding: 0 16px; border-bottom: 1px solid #f0f2f3; }
.appointment-row:last-child { border-bottom: 0; }
.appointment-row:hover { background: #fbfcfc; }
.appointment-row time { direction: ltr; font-size: 11px; color: #40515c; font-weight: 700; text-align: left; }
.appointment-row time small { font-size: 8px; color: #93a0a7; }
.time-line { height: 100%; position: relative; display: grid; place-items: center; }
.time-line::after { content: ""; width: 1px; background: #e3e8ea; position: absolute; top: 0; bottom: 0; }
.appointment-row:first-child .time-line::after { top: 50%; }
.appointment-row:last-child .time-line::after { bottom: 50%; }
.time-line span { width: 8px; height: 8px; border: 2px solid white; box-shadow: 0 0 0 2px currentColor; background: currentColor; border-radius: 50%; z-index: 1; }
.blue-dot { color: #4090c2; }.purple-dot { color: #8468ca; }.green-dot { color: #29a989; }.orange-dot { color: #e39a45; }
.patient-avatar, .mini-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.patient-avatar { width: 34px; height: 34px; font-size: 12px; }
.peach { background: #fbe8df; color: #bd7152; }.lavender { background: #ece8f9; color: #7058b9; }.mint-bg { background: #e1f4ee; color: #168f78; }.sand { background: #f9eedc; color: #b9833e; }
.appointment-info strong, .doctor span > span { display: block; color: #344650; font-size: 11px; }
.appointment-info span, .doctor small { display: block; color: #8d9aa2; font-size: 9px; margin-top: 3px; }
.doctor { display: flex; align-items: center; gap: 7px; }
.mini-avatar { width: 27px; height: 27px; flex: 0 0 27px; background: #e3f1ec; color: #168f78; font-size: 9px; }
.mini-avatar.navy { background: #e6edf1; color: #294f66; }.mini-avatar.green { background: #e8f5ed; color: #39875c; }
.status { display: inline-flex; justify-content: center; padding: 4px 7px; border-radius: 20px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.confirmed { background: #e6f6ef; color: #218b68; }.waiting { background: #fff2dd; color: #bd7c2b; }.arrived { background: #e7f0fa; color: #3c78a8; }.unconfirmed { background: #f1f2f3; color: #77858e; }
.more-btn { border: 0; background: none; color: #9aa5ab; letter-spacing: 1px; }

.smart-insight { padding: 18px; background: linear-gradient(150deg, #f8f7ff 0%, #fff 55%); border-color: #e7e2f7; }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; background: #ece8fc; color: #6c54bf; padding: 5px 8px; border-radius: 6px; font-size: 9px; font-weight: 800; }
.ai-badge span { font-size: 12px; }
.smart-insight h2 { font-size: 16px; color: var(--navy); margin: 12px 0 3px; }
.smart-insight > p { font-size: 9px; color: #929da5; margin: 0 0 14px; }
.insight-highlight { background: linear-gradient(135deg, #e8f6f1, #f4fbf8); border: 1px solid #d4eee6; border-radius: 10px; padding: 11px; display: flex; gap: 9px; }
.insight-icon { width: 29px; height: 29px; border-radius: 8px; background: white; color: var(--primary); display: grid; place-items: center; font-size: 18px; box-shadow: 0 3px 8px rgba(22,143,120,.08); }
.insight-highlight strong { display: block; color: #256c5d; font-size: 10px; }
.insight-highlight span { display: block; color: #698a82; font-size: 9px; line-height: 1.6; margin-top: 2px; }
.insight-list { list-style: none; padding: 0; margin: 13px 0; }
.insight-list li { display: flex; gap: 9px; padding: 9px 2px; border-bottom: 1px solid #eff1f3; }
.insight-list li:last-child { border: 0; }
.bullet { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex: 0 0 7px; }
.green-bullet { background: #24aa84; }.amber-bullet { background: #e3a047; }.blue-bullet { background: #438fbd; }
.insight-list p { margin: 0; }
.insight-list strong { display: block; font-size: 10px; color: #40515c; }
.insight-list small { display: block; font-size: 8px; color: #96a1a8; margin-top: 2px; }
.ask-ai-btn { width: 100%; height: 37px; border: 1px solid #ded7f5; background: #f6f3ff; color: #6c54bd; border-radius: 8px; font-size: 10px; font-weight: 700; }
.ask-ai-btn:hover { background: #eee9ff; }

.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: 16px; }
.card-header select { border: 1px solid #e1e6e8; background: white; color: #6f7e87; border-radius: 7px; padding: 6px 9px; outline: 0; font-size: 9px; }
.chart-legend { direction: rtl; display: flex; gap: 18px; padding: 12px 20px 0; color: #7f8d95; font-size: 9px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; }
.income-dot { background: var(--primary); }.expense-dot { background: #a7b1b7; }
.chart { display: flex; height: 180px; padding: 8px 18px 12px; direction: ltr; }
.y-axis { width: 38px; display: flex; flex-direction: column; justify-content: space-between; color: #a1abb1; font-size: 8px; padding-bottom: 20px; }
.chart-area { flex: 1; position: relative; margin-top: 3px; }
.grid-lines { position: absolute; inset: 0 0 20px; display: flex; flex-direction: column; justify-content: space-between; }
.grid-lines i { border-top: 1px dashed #e8ecee; }
.line-chart { position: absolute; inset: 0 0 20px; width: 100%; height: calc(100% - 20px); overflow: visible; }
.area { fill: url(#area); }.income-line { fill: none; stroke: #1b9a80; stroke-width: 2.5; vector-effect: non-scaling-stroke; }.expense-line { fill: none; stroke: #a8b2b8; stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }.point { fill: white; stroke: #1b9a80; stroke-width: 3; vector-effect: non-scaling-stroke; }
.x-axis { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; color: #96a2a9; font-size: 8px; direction: rtl; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 14px; }
.action-grid button { min-height: 86px; border: 1px solid #e9edef; background: #fbfcfc; border-radius: 10px; text-align: right; padding: 12px; transition: .2s; }
.action-grid button:hover { border-color: #bdded6; background: #f7fbfa; transform: translateY(-1px); }
.action-grid .action-icon { width: 30px; height: 30px; margin-bottom: 8px; }
.action-grid .action-icon svg { width: 16px; }
.action-grid strong { display: block; font-size: 10px; color: #40515c; }
.action-grid small { display: block; font-size: 8px; color: #9ba5ab; margin-top: 2px; }

.placeholder-page .page-heading { margin-bottom: 20px; }
.empty-module { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.large-icon, .tooth-large { width: 82px; height: 82px; border-radius: 23px; display: grid; place-items: center; font-size: 32px; background: var(--primary-soft); color: var(--primary); margin-bottom: 18px; }
.ai-large { background: #eeeafd; color: #6c54bd; }
.empty-module h2 { margin: 0 0 8px; font-size: 18px; color: var(--navy); }
.empty-module p { margin: 0; color: var(--muted); max-width: 450px; font-size: 12px; line-height: 1.8; }
.nav-item.permission-hidden { display: none; }
[data-requires].permission-hidden { display: none !important; }
.action-grid .permission-hidden, .suggestions .permission-hidden { display: none !important; }
.portal-scope-hidden { display: none !important; }
.stats-grid:has(.stat-card.permission-hidden) { grid-template-columns: repeat(2, 1fr); }
.bottom-grid:has(.revenue-card.permission-hidden) { grid-template-columns: minmax(300px, 480px); }
.role-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 14px;
  margin-bottom: 17px;
  border: 1px solid #dbeae6;
  border-radius: 10px;
  background: #f2faf7;
  color: #42675e;
  font-size: 10px;
}
.role-mode-banner strong { color: #176f5e; }
.role-mode-banner button { border: 0; background: transparent; color: var(--primary); font-weight: 700; font-size: 9px; }
.portal-access-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 12px;
  margin-bottom: 17px;
  padding: 12px 15px;
  border: 1px solid #d9ebe6;
  border-radius: 12px;
  background: linear-gradient(135deg, #f2faf7, #fbfdfc);
}
.portal-access-banner span { grid-row: 1 / 3; color: var(--primary); font-size: 9px; font-weight: 800; }
.portal-access-banner strong { color: var(--navy); font-size: 12px; }
.portal-access-banner small { color: var(--muted); font-size: 9px; }
.portal-role-panel { overflow: hidden; }
.portal-role-panel > .btn { width: calc(100% - 28px); margin: 0 14px 14px; }
.access-denied { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 35px; }
.denied-icon { width: 72px; height: 72px; border-radius: 22px; background: #fff0ed; color: #d66b58; display: grid; place-items: center; margin-bottom: 15px; }
.denied-icon svg { width: 34px; height: 34px; }
.denied-label { color: #d16b58; background: #fff2ef; border-radius: 20px; padding: 4px 9px; font-size: 9px; font-weight: 700; }
.access-denied h2 { margin: 12px 0 6px; color: var(--navy); font-size: 20px; }
.access-denied p { color: var(--muted); font-size: 11px; max-width: 420px; line-height: 1.8; margin: 0 0 18px; }

/* Data-rich modules */
.module-page .page-heading { margin-bottom: 18px; }
.module-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 15px; }
.mini-stat { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; }
.mini-stat span, .mini-stat small { display: block; }
.mini-stat span { color: var(--muted); font-size: 10px; }
.mini-stat strong { display: block; color: var(--navy); font-size: 20px; margin: 5px 0 3px; }
.mini-stat small { color: #8c999f; font-size: 8px; }
.module-stats .mini-stat,
.live-stat-card {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.module-stats .mini-stat:hover,
.live-stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow: 0 14px 32px rgba(22, 143, 120, .11);
}
.module-stats .mini-stat:focus-visible,
.live-stat-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 3px;
}
.live-summary-pill {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.live-summary-pill:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  box-shadow: 0 10px 24px rgba(15, 35, 52, .08);
}
.live-summary-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 3px;
}
.live-filter-chip,
.live-filter-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 8px;
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.live-filter-chip { min-height: 36px; padding: 7px 10px; }
.live-filter-chip span, .live-filter-strip span { color: var(--muted); font-size: 10px; }
.live-filter-chip strong, .live-filter-strip strong { font-size: 12px; }
.live-filter-chip b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
}
.live-filter-strip {
  justify-content: space-between;
  margin: 0 16px 8px;
  padding: 10px 12px;
}
.live-filter-strip button {
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  color: #fff;
  background: var(--primary);
  font: inherit;
  font-size: 11px;
}
.positive, .money-in { color: #168f78 !important; }
.warning-text { color: #c9862f !important; }
.danger-text, .money-out { color: #d46858 !important; }
.data-card { overflow: hidden; }
.table-toolbar { min-height: 62px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.module-search { width: min(330px, 40%); height: 37px; border: 1px solid #e0e6e8; background: #fafbfb; border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #85939b; }
.module-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; color: var(--ink); }
.filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-chip, .today-chip { height: 30px; border: 1px solid #e2e7e9; background: white; color: #718089; border-radius: 7px; padding: 0 10px; font-size: 9px; }
.filter-chip:hover, .filter-chip.active, .today-chip { border-color: #b8dbd3; color: var(--primary); background: #f0faf7; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { background: #fafbfb; color: #89969d; font-size: 9px; font-weight: 600; text-align: right; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { color: #52626c; font-size: 10px; padding: 11px 14px; border-bottom: 1px solid #eff2f3; white-space: nowrap; }
.data-table tbody tr:hover { background: #fbfdfc; }
.data-table td strong { color: #354751; font-size: 10px; }
.person-cell, .staff-main { display: flex; align-items: center; gap: 9px; }
.person-cell strong, .person-cell small, .staff-main strong, .staff-main small { display: block; }
.person-cell small, .staff-main small, .cell-note { color: #929ea5; font-size: 8px; margin-top: 2px; }
.table-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.row-action { border: 1px solid #dae4e1; color: var(--primary); background: white; border-radius: 6px; padding: 5px 8px; font-size: 8px; }
.row-action:hover { background: var(--primary-soft); }
.interactive-row { cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.interactive-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.interactive-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -2px; }
.flow-focus-target {
  position: relative;
  animation: workflowFocusPulse 1.45s ease both;
}
.account-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-reset-password { border-color: #ead7a8; color: #9a6a14; background: #fffaf0; }
.user-reset-password:hover { background: #fff2cf; }
.appointment-table { overflow: hidden; border-top: 1px solid var(--line); }
.appointment-table-head {
  display: grid;
  grid-template-columns: 85px minmax(180px, 1.35fr) minmax(150px, 1fr) 86px 46px;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  color: #7a8794;
  background: #f8fafb;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  font-weight: 800;
}
.appointment-table-body { background: #fff; }
.appointment-empty-row {
  min-height: 148px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(22, 143, 120, .06), rgba(255,255,255,0) 46%),
    repeating-linear-gradient(90deg, transparent 0, transparent 52px, rgba(22, 143, 120, .035) 53px);
}
.appointment-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, white);
  border-radius: 14px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 22px;
  font-weight: 900;
}
.appointment-empty-row strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}
.appointment-empty-row span {
  display: block;
  max-width: 620px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  white-space: normal;
}
.appointment-empty-action {
  min-height: 38px;
  padding-inline: 14px;
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.appointment-empty-action:hover { background: var(--primary-dark); }
.table-footer { padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; color: #8b989f; font-size: 9px; }
.table-footer div { display: flex; gap: 4px; direction: ltr; }
.table-footer button { min-width: 27px; height: 27px; border: 1px solid #e1e6e8; background: white; border-radius: 6px; color: #74828b; font-size: 8px; }
.table-footer button.active { color: white; border-color: var(--primary); background: var(--primary); }

.schedule-toolbar { min-height: 57px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.date-nav { display: flex; align-items: center; gap: 8px; }
.date-nav > button:not(.today-chip) { width: 29px; height: 29px; border: 1px solid #e1e6e8; background: white; border-radius: 7px; color: #66757e; }
.date-nav strong { font-size: 11px; color: #354751; }
.appointment-summary { display: flex; gap: 18px; color: #72818a; font-size: 9px; margin: 11px 3px; flex-wrap: wrap; }
.dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin-left: 4px; }
.green-dot-bg { background: #28a981; }.amber-dot-bg { background: #df9b42; }.blue-dot-bg { background: #438fc0; }.red-dot-bg { background: #da6959; }
.schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 14px; }
.schedule-column { overflow: hidden; }
.doctor-head { padding: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.doctor-head div { flex: 1; }
.doctor-head strong, .doctor-head small { display: block; }
.doctor-head strong { font-size: 10px; color: #354751; }
.doctor-head small { color: #8d9aa1; font-size: 8px; margin-top: 2px; }
.doctor-head b { color: var(--primary); background: var(--primary-soft); padding: 4px 6px; border-radius: 5px; font-size: 8px; }
.schedule-body { padding: 10px; min-height: 350px; background: repeating-linear-gradient(to bottom, #fff 0, #fff 69px, #f0f3f4 70px); }
.schedule-event { border-right: 3px solid; border-radius: 7px; padding: 9px 10px; margin-bottom: 9px; min-height: 64px; }
.schedule-event time { float: left; direction: ltr; font-size: 8px; font-weight: 700; }
.schedule-event strong, .schedule-event small { display: block; }
.schedule-event strong { font-size: 10px; margin-bottom: 3px; }
.schedule-event small { font-size: 8px; opacity: .72; }
.agenda-card{margin-bottom:14px;overflow:hidden}.agenda-date{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px}.agenda-date input{border:1px solid var(--line);border-radius:7px;padding:6px;background:white;color:var(--ink)}.agenda-help{color:var(--muted);font-size:11px}.agenda-scroll{overflow:auto;padding:0 14px 14px}.agenda-grid{display:grid;grid-template-columns:82px repeat(var(--agenda-doctors,3),minmax(230px,1fr));grid-template-rows:48px repeat(40,20px);min-width:max(760px,calc(82px + var(--agenda-doctors,3) * 230px));position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white}.agenda-head{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;background:#f6f9f8;border-left:1px solid var(--line);font-size:12px;font-weight:800;color:var(--navy);position:sticky;top:0;z-index:3}.agenda-time{display:flex;align-items:flex-start;justify-content:center;color:#839097;font-size:10px;direction:ltr}.agenda-time.half-hour{padding-top:4px;border-top:1px solid #e4eaec}.agenda-slot{border:0;border-left:1px solid #edf1f2;border-top:1px solid #f4f6f7;background:transparent;cursor:pointer}.agenda-slot.half-hour{border-top-color:#e4eaec}.agenda-slot:hover,.agenda-slot:focus-visible{background:var(--primary-soft);outline:2px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:-2px}.agenda-event{z-index:2;margin:2px 4px;border-radius:7px;padding:5px 7px;background:#def2eb;border:0;border-right:3px solid var(--primary);box-shadow:0 3px 8px rgba(22,83,69,.1);overflow:hidden;text-align:right;cursor:pointer}.agenda-event:hover,.agenda-event:focus-visible{filter:brightness(.97);outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent)}.agenda-event strong,.agenda-event small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agenda-event strong{font-size:11px;color:#24594e}.agenda-event small{font-size:10px;color:#638078;margin-top:2px}.agenda-event.purple{background:#eeeafd;border-color:#725abb}.agenda-event.orange{background:#fff0dc;border-color:#d79538}.agenda-empty{grid-column:2/-1;align-self:center;justify-self:center;z-index:2;color:var(--muted);font-size:12px}
.availability-box{display:flex;flex-direction:column;gap:4px;padding:10px 12px;margin:2px 0 14px;border:1px solid #dfe9e6;border-radius:9px;background:#f5faf8;color:#60736c}.availability-box strong{font-size:9px;color:#23705f}.availability-box span{font-size:8px;line-height:1.6}.availability-box.conflict{background:#fff2ef;border-color:#f0d2cb}.availability-box.conflict strong{color:#bd5a4a}
.supplier-contact strong,.supplier-contact small{display:block}.supplier-contact small{color:var(--muted);font-size:8px;margin-top:2px}
.chat-safety-note{margin-bottom:14px;padding:10px 14px;border:1px solid #eadfbe;border-radius:10px;background:#fffaf0;color:#796a42;font-size:9px;line-height:1.7}.chat-safety-note strong{color:#9a7822}.staff-chat-layout{display:grid;grid-template-columns:270px minmax(360px,1fr) 240px;gap:14px;height:650px}.chat-conversations,.chat-room,.chat-team{overflow:hidden}.chat-section-head{height:65px;padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.chat-section-head h2{margin:0;color:var(--navy);font-size:13px}.chat-section-head small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.chat-section-head>span{min-width:25px;height:25px;border-radius:13px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:9px;font-weight:800}.chat-conversation-list,.chat-team-list{height:calc(100% - 65px);overflow-y:auto;padding:8px}.chat-conversation-item,.chat-team-item{width:100%;border:0;background:transparent;border-radius:10px;padding:10px;display:flex;align-items:center;gap:9px;text-align:right;color:inherit}.chat-conversation-item:hover,.chat-team-item:hover{background:#f5f8f7}.chat-conversation-item.active{background:#eaf7f3}.chat-person-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:#e9eef0;color:#536a75;display:grid;place-items:center;font-weight:800}.chat-conversation-item.active .chat-person-avatar{background:var(--primary);color:white}.chat-item-copy{min-width:0;flex:1}.chat-item-copy strong,.chat-item-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item-copy strong{font-size:9px;color:var(--navy)}.chat-item-copy small{font-size:7px;color:var(--muted);margin-top:3px}.chat-unread{min-width:18px;height:18px;border-radius:10px;background:#d66b58;color:white;display:grid;place-items:center;font-size:7px}.online-status{width:8px;height:8px;border-radius:50%;background:#c5ced2}.online-status.online{background:#23ad7e;box-shadow:0 0 0 3px #e3f7ef}.chat-room{display:flex;flex-direction:column}.chat-room-head{height:65px;flex:0 0 65px;padding:11px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.chat-room-avatar{width:39px;height:39px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800}.chat-room-head h2{margin:0;color:var(--navy);font-size:13px}.chat-room-head small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.staff-chat-messages{flex:1;overflow-y:auto;padding:18px;background:#f8faf9;display:flex;flex-direction:column;gap:10px}.staff-message{max-width:76%;align-self:flex-start}.staff-message.mine{align-self:flex-end}.staff-message .message-meta{display:flex;gap:7px;align-items:center;margin:0 5px 4px;color:#89969d;font-size:7px}.staff-message.mine .message-meta{justify-content:flex-end}.staff-message .message-bubble{padding:9px 11px;border:1px solid #e1e7e8;border-radius:5px 13px 13px 13px;background:white;color:#3f515b;font-size:10px;line-height:1.7;white-space:pre-wrap}.staff-message.mine .message-bubble{background:var(--primary);border-color:var(--primary);color:white;border-radius:13px 5px 13px 13px}.staff-chat-compose{min-height:65px;flex:0 0 auto;border-top:1px solid var(--line);padding:9px;display:flex;align-items:flex-end;gap:7px}.staff-chat-compose textarea{flex:1;resize:none;min-height:42px;max-height:90px;border:1px solid #dfe5e6;border-radius:10px;padding:11px;outline:0;font-size:10px}.staff-chat-compose textarea:focus{border-color:#81beaf;box-shadow:0 0 0 3px #edf8f5}.staff-chat-compose button{height:42px;border:0;border-radius:9px}.staff-chat-compose #staffChatSend{padding:0 17px;background:var(--primary);color:white;font-weight:800;font-size:9px}.staff-chat-compose .chat-attach{width:42px;background:#eef2f3;color:#77868e;font-size:18px}.staff-chat-compose button:disabled,.staff-chat-compose textarea:disabled{opacity:.5}.chat-welcome,.chat-empty{color:var(--muted);text-align:center;font-size:9px}.chat-welcome{margin:auto;display:grid;justify-items:center;gap:6px}.chat-welcome span{font-size:25px;color:var(--primary)}.chat-welcome strong{color:var(--navy);font-size:12px}.chat-welcome small{font-size:8px}.chat-empty{padding:25px 10px}.chat-team-item .chat-item-copy small{white-space:normal}.chat-time{font-size:7px;color:var(--muted);direction:ltr}
@media (max-width:1100px){.staff-chat-layout{grid-template-columns:230px minmax(340px,1fr)}.chat-team{display:none}}
@media (max-width:760px){.staff-chat-layout{grid-template-columns:1fr;height:auto}.chat-conversations{height:260px}.chat-room{height:560px}.chat-team{display:block;height:280px}}
.green-event { background: #e9f7f2; color: #237b65; border-color: #28a981; }
.purple-event { background: #f0ecfa; color: #6d58a7; border-color: #7960be; }
.orange-event { background: #fff2df; color: #a46e2b; border-color: #df9b42; }
.blue-event { background: #eaf3fa; color: #39739e; border-color: #438fc0; }
.muted-event { background: #f2f3f4; color: #77858d; border-color: #9aa5ab; }
.waiting-list { overflow: hidden; }
.count-badge { color: var(--primary); background: var(--primary-soft); border-radius: 20px; padding: 5px 8px; font-size: 8px; }
.waiting-items { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 12px; padding: 13px 18px; }
.waiting-items span { border-left: 1px solid var(--line); }
.waiting-items strong, .waiting-items small { display: block; }
.waiting-items strong { color: #40515c; font-size: 9px; }
.waiting-items small { color: #929da4; font-size: 8px; margin-top: 2px; }

.clinical-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.treatment-list { overflow: hidden; }
.treatment-list article { display: grid; grid-template-columns: 34px 1fr 70px 95px; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #edf1f2; }
.treatment-list article:last-child { border: 0; }
.treatment-list article strong, .treatment-list article small { display: block; }
.treatment-list article strong { font-size: 10px; color: #354751; }
.treatment-list article small { font-size: 8px; color: #8d9aa1; margin-top: 3px; }
.treatment-list article b { color: #63737d; font-size: 9px; }
.treatment-list article em { color: #c0782b; font-size: 8px; font-style: normal; text-align: left; }
.progress { height: 4px; background: #e9eeef; border-radius: 5px; margin-top: 7px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.dental-chart { overflow: hidden; }
.teeth { padding: 24px 20px 15px; }
.tooth-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 9px; direction: ltr; }
.tooth-row span { height: 41px; border: 1px solid #dce4e6; background: #fbfcfc; color: #829097; border-radius: 13px 13px 8px 8px; display: grid; place-items: center; font-size: 8px; font-weight: 700; }
.tooth-row span.filled { color: #317ba9; border-color: #8dbbd7; background: #e9f3f9; }
.tooth-row span.root { color: #c85e51; border-color: #e7a9a1; background: #fff0ee; }
.chart-key { display: flex; justify-content: center; gap: 14px; color: #839098; font-size: 8px; }
.chart-key i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-left: 3px; }
.key-green { background: #e2eee9; }.key-blue { background: #76afd1; }.key-red { background: #dc776b; }
.tooth-note { margin: 16px; padding: 12px; background: #f8faf9; border: 1px solid #e5eaeb; border-radius: 9px; }
.tooth-note strong { font-size: 10px; color: var(--navy); }
.tooth-note p { color: #677780; font-size: 9px; line-height: 1.7; margin: 5px 0; }
.tooth-note small { color: #98a2a8; font-size: 7px; }

.finance-grid { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.cash-card { overflow: hidden; }
.cash-total { padding: 19px; text-align: center; background: linear-gradient(145deg, #f0faf7, #fff); border-bottom: 1px solid var(--line); }
.cash-total span { display: block; color: #72818a; font-size: 9px; }
.cash-total strong { display: block; color: var(--primary-dark); font-size: 25px; margin-top: 4px; }
.cash-card dl { margin: 0; padding: 9px 17px; }
.cash-card dl div, .staff-card dl div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1f2; }
.cash-card dt, .staff-card dt { color: #849198; font-size: 9px; }
.cash-card dd, .staff-card dd { margin: 0; color: #40515c; font-size: 9px; font-weight: 700; }
.cash-card > .btn { margin: 4px 17px 17px; width: calc(100% - 34px); }

.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.staff-card { padding: 15px; }
.staff-main { position: relative; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.staff-avatar { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.staff-main div { flex: 1; }
.staff-main strong { font-size: 11px; color: #354751; }
.online-dot, .away-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px #e8f6f0; background: #24aa82; }
.away-dot { background: #d79a4b; box-shadow: 0 0 0 3px #fff1de; }
.staff-card dl { margin: 7px 0 0; }
.staff-card dl div:last-child { border: 0; }

.report-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 14px; }
.report-card { padding: 15px; display: flex; align-items: center; gap: 11px; }
.report-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; }
.report-card small, .report-card strong, .report-card p { display: block; margin: 0; }
.report-card small { color: #839097; font-size: 8px; }
.report-card strong { color: var(--navy); font-size: 17px; margin: 2px 0; }
.report-card p { color: #98a2a8; font-size: 8px; }
.reports-grid { display: grid; grid-template-columns: 1fr 390px; gap: 14px; }
.ai-report { padding: 20px; background: linear-gradient(145deg, #faf8ff, #fff); }
.ai-report h2 { font-size: 17px; color: var(--navy); margin: 13px 0 5px; }
.ai-report > p { color: #6f7e87; font-size: 10px; line-height: 1.8; margin: 0; }
.ai-report ul { list-style: none; margin: 15px 0; padding: 0; }
.ai-report li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eceaf2; }
.ai-report li > span { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; color: #6a54b7; background: #eeeafd; border-radius: 7px; font-size: 9px; font-weight: 700; }
.ai-report li strong, .ai-report li small { display: block; }
.ai-report li strong { color: #43535d; font-size: 9px; }
.ai-report li small { color: #929da4; font-size: 8px; margin-top: 2px; }
.report-list { overflow: hidden; }
.report-list > button { width: 100%; border: 0; border-bottom: 1px solid #edf1f2; background: white; display: grid; grid-template-columns: 35px 1fr 40px; align-items: center; gap: 9px; text-align: right; padding: 12px 15px; }
.report-list > button:hover { background: #fafcfc; }
.report-file { width: 34px; height: 34px; border-radius: 8px; background: #edf5f3; color: var(--primary); display: grid; place-items: center; font-weight: 700; }
.report-list strong, .report-list small { display: block; }
.report-list strong { color: #40515c; font-size: 9px; }
.report-list small { color: #929da4; font-size: 8px; margin-top: 2px; }
.report-list b { color: var(--primary); font-size: 8px; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; margin-bottom: 14px; }
.users-card { overflow: hidden; }
.role-pill { display: inline-flex; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; }
.admin-pill { color: #147461; background: #e2f4ef; }
.secretary-pill { color: #3975a3; background: #e7f1f8; }
.accountant-pill { color: #7255a7; background: #eee9f8; }
.doctor-pill { color: #a16d2d; background: #f9eddc; }
.nurse-pill { color: #34816a; background: #e6f4ef; }
.roles-panel { overflow: hidden; }
.roles-panel > button { width: 100%; border: 0; border-bottom: 1px solid #edf1f2; background: white; display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 9px; padding: 12px 14px; text-align: right; }
.roles-panel > button:hover { background: #fafcfc; }
.roles-panel button div strong, .roles-panel button div small { display: block; }
.roles-panel button div strong { color: #40515c; font-size: 9px; }
.roles-panel button div small { color: #929da4; font-size: 8px; margin-top: 3px; }
.roles-panel button b { width: 21px; height: 21px; display: grid; place-items: center; color: #718089; background: #f0f3f4; border-radius: 50%; font-size: 8px; }
.nurse-role { color: #30816a; background: #e2f3ed; }
.custom-role { color: #687880; background: #edf1f2; }
.logout-button { margin-top: 5px; border-top: 1px solid var(--line) !important; color: #b75449; }
.logout-role { color: #c45d50; background: #fff0ed; }
.sidebar-logout { display: none; color: #ffb2aa; }
.sidebar-logout .nav-icon { color: #ff8f84; }
.security-log { overflow: hidden; }
.security-items { display: grid; grid-template-columns: repeat(3, 1fr); }
.security-items > div { display: flex; gap: 9px; padding: 14px 17px; border-left: 1px solid var(--line); }
.security-items > div:last-child { border-left: 0; }
.security-icon { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.success-log { color: #168f78; background: #e5f5f0; }
.update-log { color: #3979aa; background: #e8f1f8; }
.danger-log { color: #cf6555; background: #fff0ed; }
.security-items p { margin: 0; }
.security-items strong, .security-items small { display: block; }
.security-items strong { color: #40515c; font-size: 9px; }
.security-items small { color: #929da4; font-size: 8px; margin-top: 3px; }

.user-modal { width: min(690px, calc(100vw - 30px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.form-section-title { display: flex; align-items: center; gap: 9px; margin: 3px 0 13px; }
.form-section-title > span { width: 25px; height: 25px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 9px; font-weight: 800; }
.form-section-title strong, .form-section-title small { display: block; }
.form-section-title strong { color: #40515c; font-size: 10px; }
.form-section-title small { color: #929da4; font-size: 8px; margin-top: 2px; }
.permissions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 7px 0 15px; }
.permission-card { min-height: 56px; border: 1px solid #e1e6e8; border-radius: 9px; padding: 9px 10px; display: flex !important; align-items: center; gap: 9px; margin: 0 !important; cursor: pointer; transition: .2s; }
.permission-card:has(input:checked) { border-color: #8bcabb; background: #f2faf7; }
.permission-card input { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--primary); }
.permission-card span { flex: 1; }
.permission-card strong, .permission-card small { display: block; }
.permission-card strong { color: #465760; font-size: 9px; }
.permission-card small { color: #929da4; font-size: 8px; margin-top: 2px; }
.sensitive-permission:has(input:checked) { border-color: #dda196; background: #fff5f3; }
.account-options { display: flex; gap: 18px; padding: 11px 12px; margin-bottom: 14px; border-radius: 9px; background: #f8faf9; }
.account-options label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 9px; }
.account-options input { width: 14px !important; height: 14px !important; margin: 0 !important; accent-color: var(--primary); }
.password-hint { display: flex; align-items: center; gap: 7px; margin: -4px 0 15px; padding: 8px 10px; border-radius: 8px; color: #6e7d86; background: #f4f7f7; font-size: 8px; }
.password-hint span { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: white; background: #77909b; font-weight: 700; }

.login-screen { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 20%, rgba(31,166,139,.16), transparent 32%), linear-gradient(145deg, #eff7f5, #f7f8fa 55%, #eeeafd); opacity: 0; visibility: hidden; transition: .25s; }
.login-screen.show { opacity: 1; visibility: visible; }
.login-card { width: min(430px, 100%); padding: 28px; border: 1px solid rgba(218,227,228,.9); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 25px 70px rgba(24,48,60,.16); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { color: var(--navy); font-size: 17px; }
.login-brand small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.login-heading > span { display: inline-flex; color: var(--primary); background: var(--primary-soft); padding: 5px 8px; border-radius: 6px; font-size: 8px; font-weight: 700; }
.login-heading h2 { color: var(--navy); font-size: 23px; margin: 10px 0 4px; }
.login-heading p { color: var(--muted); font-size: 10px; line-height: 1.7; margin: 0 0 20px; }
.login-card form > label { display: block; color: #4d5e68; font-size: 10px; font-weight: 600; margin-bottom: 13px; }
.login-field { height: 43px; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 11px; border: 1px solid #dce3e5; border-radius: 9px; background: white; }
.login-field:focus-within { border-color: #86c7b8; box-shadow: 0 0 0 3px #edf8f5; }
.login-field > span { color: #829199; font-size: 10px; }
.login-field input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 11px; }
.login-field button { border: 0; background: transparent; color: var(--primary); font-size: 8px; }
.login-submit { width: 100%; height: 44px; margin-top: 4px; }
.login-separator { display:flex;align-items:center;gap:10px;margin:14px 0;color:#a0a9ae;font-size:9px }
.login-separator::before,.login-separator::after{content:"";height:1px;background:#e5e9eb;flex:1}
.google-login{width:100%;height:44px;border:1px solid #dce2e5;border-radius:9px;background:white;color:#354751;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;font-weight:700;transition:.2s}
.google-login:hover{border-color:#bfc9ce;background:#fafcfc;box-shadow:0 4px 12px rgba(27,48,60,.06)}
.google-login svg{width:19px;height:19px}
.google-login:disabled{opacity:.55;cursor:not-allowed}
.google-login-note{text-align:center;margin:8px 0 0;color:#8b989f;font-size:8px}
.login-error { min-height: 18px; color: #c75e51; font-size: 9px; }
.login-demo { margin-top: 16px; padding: 10px; border-radius: 8px; color: #718089; background: #f5f7f7; font-size: 8px; line-height: 1.6; }
.login-demo strong { color: #4e606a; }
.login-card footer { color: #9aa4aa; text-align: center; font-size: 8px; margin-top: 18px; }

/* Professional expansion */
.language-switcher { height: 36px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #60717b; }
.language-switcher span { font-size: 12px; }
.language-switcher select { border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
[dir="ltr"] .sidebar { right: auto; left: 0; }
[dir="ltr"] .main-content { margin-right: 0; margin-left: var(--sidebar); }
[dir="ltr"] .ai-panel { left: auto; right: 0; transform: translateX(105%); }
[dir="ltr"] .ai-panel.open { transform: none; }

/* Platform typography polish: calmer hierarchy, readable secondary text, and consistent weights. */
:root {
  --text-strong: #263947;
  --text-body: #3f515e;
  --text-secondary: #667681;
  --text-subtle: #76858f;
}

body {
  color: var(--text-body);
  font-weight: 500;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

strong,
b {
  color: var(--text-strong);
  font-weight: 700;
}

small,
.cell-note,
.stat-note,
.card-header p,
.page-heading p,
.mini-stat small,
.stat-label,
.stat-card small,
.person-cell small,
.staff-main small,
.account-menu small,
.branch-switch small,
.user-menu small {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

.page-heading h1,
.card-header h2,
.modal h2,
.smart-insight h2,
.finance-ai-heading h2 {
  color: var(--text-strong);
  font-weight: 750;
  letter-spacing: 0;
}

.eyebrow,
.ai-badge,
.count-badge,
.status,
.role-pill,
.filter-chip,
.today-chip {
  font-weight: 700;
  letter-spacing: 0;
}

.nav-item,
.btn,
.text-btn,
.row-action {
  font-weight: 650;
  letter-spacing: 0;
}

.data-table th {
  color: var(--text-subtle);
  font-weight: 700;
  letter-spacing: 0;
}

.data-table td {
  color: var(--text-body);
  font-weight: 500;
}

.data-table td strong,
.patient-finance-row strong,
.recurring-item strong,
.chart-account-row strong,
.metric-list strong,
.financial-controls strong,
.treatment-list article strong,
.appointment-info strong,
.doctor-head strong,
.waiting-items strong,
.security-items strong,
.report-list strong {
  color: var(--text-strong);
  font-weight: 700;
}

.data-table td small,
.patient-finance-row small,
.recurring-item small,
.chart-account-row span,
.metric-list span,
.financial-controls span,
.treatment-list article small,
.appointment-info span,
.doctor-head small,
.waiting-items small,
.security-items small,
.report-list small {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

.money-in,
.positive {
  color: #138564 !important;
  font-weight: 700;
}

.money-out,
.danger-text {
  color: #bf5e50 !important;
  font-weight: 700;
}

.warning-text {
  color: #a96d24 !important;
  font-weight: 700;
}

.mini-stat strong,
.stat-value,
.financial-account-card strong,
.cash-total strong,
.invoice-summary-box strong,
.finance-ai-kpis strong {
  color: var(--text-strong);
  font-weight: 750;
}

.mini-stat span,
.stat-label,
.finance-control-strip span,
.finance-control-strip small,
.finance-focus-panel small,
.dashboard-encouragement strong {
  color: var(--text-secondary);
}

.dashboard-encouragement strong,
.finance-focus-panel small,
.setting-note,
.chat-safety-note,
.offer-consent-note span {
  line-height: 1.75;
}

body.dark-mode {
  --text-strong: #e8f0f3;
  --text-body: #cfdbdf;
  --text-secondary: #aab9c0;
  --text-subtle: #93a4ad;
}

body input[type="date"],
body input[type="datetime-local"],
body input[type="month"],
body input[type="time"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
  cursor: pointer !important;
  position: relative;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body input[type="date"]::-webkit-calendar-picker-indicator,
body input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body input[type="month"]::-webkit-calendar-picker-indicator,
body input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 0 !important;
  display: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

.dashboard-encouragement {
  max-width: 360px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, #f5fbf9, #ffffff);
  box-shadow: 0 10px 26px rgba(22, 83, 69, .08);
}

.dashboard-encouragement span,
.dashboard-encouragement strong {
  display: block;
}

.dashboard-encouragement span {
  margin-bottom: 5px;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-encouragement strong {
  color: var(--navy);
  font-size: 12px;
  line-height: 1.75;
}

.finance-focus-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 18px 12px;
  padding: 13px 15px;
  border: 1px solid #d7e9e4;
  border-radius: 12px;
  background: linear-gradient(135deg, #f4fbf8, #ffffff);
}

.finance-focus-panel > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-size: 11px;
  font-weight: 800;
}

.finance-focus-panel strong,
.finance-focus-panel small {
  display: block;
}

.finance-focus-panel strong {
  color: var(--navy);
  font-size: 14px;
}

.finance-focus-panel small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

#finance .page-heading {
  align-items: flex-start;
}

#finance .page-heading h1 {
  letter-spacing: 0;
}

#finance .module-stats .mini-stat {
  cursor: pointer;
}

#finance .module-stats .mini-stat span {
  font-size: 12px;
  font-weight: 700;
}

#finance .module-stats .mini-stat strong {
  direction: ltr;
  text-align: right;
}

#finance .data-card .card-header h2,
#finance .advanced-finance-grid h2,
#finance .finance-ai-center h2 {
  letter-spacing: 0;
}

#finance .data-table th {
  font-size: 12px;
  font-weight: 700;
}

#finance .data-table td {
  font-size: 12px;
  line-height: 1.6;
}

#finance .data-table td strong {
  font-size: 12px;
}

.flow-focus-target {
  position: relative;
  animation: focusPulse 2.4s ease both;
}

@keyframes focusPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent), var(--shadow-soft);
    outline: 0 solid color-mix(in srgb, var(--primary) 0%, transparent);
  }
  18% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent), 0 20px 46px rgba(22, 83, 69, .14);
    outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 10%, transparent), 0 18px 38px rgba(22, 83, 69, .1);
    outline: 2px solid color-mix(in srgb, var(--primary) 24%, transparent);
  }
  100% {
    box-shadow: var(--shadow-soft);
    outline: 0 solid transparent;
  }
}

.payment-extra-fields {
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.payment-extra-fields[hidden] { display: none; }

.plan-live-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 15px 15px;
}

.plan-live-actions .btn { min-height: 34px; }
.password-menu-button { border-top: 1px solid var(--line) !important; margin-top: 4px; }
.settings-role { background: #eef5f8; color: #2d7195; }

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Executive dashboard schedule table */
#dashboard .appointments-card .appointment-list {
  padding: 0;
}

#dashboard .appointment-table {
  overflow: hidden;
  border-top: 1px solid var(--line);
}

#dashboard .appointment-table-head {
  display: grid;
  grid-template-columns: 60px 14px 38px minmax(150px, 1.35fr) minmax(132px, 1fr) 90px 34px;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  color: #748294;
  background: linear-gradient(180deg, #f8fafc, #f3f6f8);
  border-bottom: 1px solid #e6edf2;
  font-size: 12px;
  font-weight: 800;
}

#dashboard .appointment-table-head span:nth-child(2) { grid-column: 3 / 5; }
#dashboard .appointment-table-head span:nth-child(3) { grid-column: 5; }
#dashboard .appointment-table-head span:nth-child(4) { grid-column: 6; }
#dashboard .appointment-table-head span:nth-child(5) { grid-column: 7; }

#dashboard .appointment-table-body {
  background: #fff;
}

#dashboard .appointment-row {
  width: 100%;
  min-height: 76px;
  grid-template-columns: 60px 14px 38px minmax(150px, 1.35fr) minmax(132px, 1fr) 90px 34px;
  border: 0;
  border-bottom: 1px solid #eef2f5;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: right;
}

#dashboard .appointment-row:hover {
  background: #f8fbfc;
}

#dashboard .appointment-row .more-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #738295;
  background: #f3f6f8;
  font-weight: 900;
}

#dashboard .appointment-empty-row {
  min-height: 154px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0, transparent 54px, rgba(31, 83, 128, .035) 55px);
}

#dashboard .appointment-empty-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, white);
  border-radius: 14px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 22px;
  font-weight: 900;
}

#dashboard .appointment-empty-row strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
}

#dashboard .appointment-empty-row span {
  display: block;
  max-width: 620px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  white-space: normal;
}

#dashboard .appointment-empty-action {
  min-height: 38px;
  padding-inline: 15px;
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  white-space: nowrap;
}

#dashboard .appointment-empty-action:hover {
  background: var(--primary-dark);
}

body.dark-mode #dashboard .appointment-table-head {
  color: #9eb1c4;
  background: linear-gradient(180deg, #17242e, #13202a);
  border-color: #293740;
}

body.dark-mode #dashboard .appointment-table-body,
body.dark-mode #dashboard .appointment-row {
  background: #17232b;
}

body.dark-mode #dashboard .appointment-row {
  border-color: #293740;
}

body.dark-mode #dashboard .appointment-row:hover {
  background: #1c2b35;
}

body.dark-mode #dashboard .appointment-empty-row {
  background:
    linear-gradient(135deg, rgba(0, 213, 207, .08), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0, transparent 54px, rgba(0, 151, 235, .05) 55px);
}

@media (max-width: 820px) {
  #dashboard .appointment-table-head {
    grid-template-columns: 54px 12px 36px minmax(0, 1fr) 82px;
  }

  #dashboard .appointment-table-head span:nth-child(2) { grid-column: 3 / 5; }
  #dashboard .appointment-table-head span:nth-child(4) { grid-column: 5; }

  #dashboard .appointment-table-head span:nth-child(3),
  #dashboard .appointment-table-head span:nth-child(5) {
    display: none;
  }

  #dashboard .appointment-row {
    grid-template-columns: 54px 12px 36px minmax(0, 1fr) 82px;
  }

  #dashboard .appointment-row .doctor,
  #dashboard .appointment-row .more-btn {
    display: none;
  }
}

@media (max-width: 560px) {
  #dashboard .appointment-table-head {
    grid-template-columns: 48px 10px 32px minmax(0, 1fr);
    padding-inline: 12px;
  }

  #dashboard .appointment-table-head span:nth-child(2) { grid-column: 3 / 5; }

  #dashboard .appointment-table-head span:nth-child(4) {
    display: none;
  }

  #dashboard .appointment-row {
    grid-template-columns: 48px 10px 32px minmax(0, 1fr);
    padding-inline: 12px;
  }

  #dashboard .appointment-row .status {
    display: none;
  }

  #dashboard .appointment-empty-row {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 20px;
  }
}
[dir="ltr"] .ai-fab { left: auto; right: 24px; }
[dir="ltr"] .patient-drawer { right: auto; left: 0; transform: translateX(-105%); }
[dir="ltr"] .patient-drawer.open { transform: none; }
[dir="ltr"] .notification-panel { left: auto; right: 0; }
[dir="ltr"] .toast { right: auto; left: 50%; transform: translate(-50%, -100px); }
[dir="ltr"] .toast.show { transform: translate(-50%, 0); }
.notification-panel { position: absolute; top: 55px; left: 55px; width: 335px; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 18px 50px rgba(23,43,59,.16); z-index: 120; opacity: 0; visibility: hidden; transform: translateY(-7px); transition: .2s; overflow: hidden; }
.notification-panel.open { opacity: 1; visibility: visible; transform: none; }
.notification-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.notification-head strong, .notification-head small { display: block; }
.notification-head strong { font-size: 11px; color: var(--navy); }.notification-head small { font-size: 8px; color: var(--muted); margin-top: 2px; }
.notification-head button { border: 0; background: transparent; color: var(--primary); font-size: 8px; }
.notification-item { display: flex; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #eef1f2; background: #fbfdfc; }
.notification-item > span { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: grid; place-items: center; background: #e8f4f1; color: var(--primary); font-size: 9px; font-weight: 800; }
.notification-item.urgent > span { color: #cf6254; background: #fff0ed; }
.notification-item strong, .notification-item small { display: block; }
.notification-item strong { color: #40515c; font-size: 9px; }.notification-item small { color: #929da4; font-size: 8px; margin-top: 3px; }

.ops-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.ops-kpis article { padding: 15px; }.ops-value { display: block; color: var(--navy); font-size: 19px; font-weight: 800; }.ops-kpis small,.ops-kpis i { display:block; font-size:8px; color:var(--muted); margin-top:3px; font-style:normal; }
.operations-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:14px; margin-bottom:14px; }
.live-badge { color:#168f78; background:#e7f5f0; border-radius:15px; padding:5px 8px; font-size:8px; }
.kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding:12px; background:#f7f9f9; }
.kanban-col { min-width:0; }.kanban-col header { display:flex; justify-content:space-between; padding:5px 3px 9px; color:#566771; font-size:9px; }.kanban-col header b { width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e8edee;font-size:8px; }
.kanban-col article { position:relative; display:flex; align-items:center; gap:7px; padding:9px; margin-bottom:8px; background:white; border:1px solid #e5eaeb; border-radius:9px; box-shadow:0 2px 5px rgba(23,43,59,.03); }
.kanban-col article > div { min-width:0; flex:1; }.kanban-col article strong,.kanban-col article small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.kanban-col article strong { font-size:9px;color:#40515c; }.kanban-col article small { font-size:7px;color:#929da4;margin-top:2px; }
.flow-action { border:0; background:#e9f6f2; color:var(--primary); border-radius:5px; padding:4px 5px; font-size:7px; }.priority-card { border-color:#efb4ab!important;background:#fff8f7!important; }.priority { color:#c55f52;font-size:7px;font-weight:700; }
.room-status { overflow:hidden; }.room-row { display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid #eef1f2; }.room-number { width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#edf3f2;color:var(--primary);font-weight:800;font-size:10px; }.room-row div { flex:1; }.room-row strong,.room-row small { display:block; }.room-row strong{font-size:9px;color:#40515c}.room-row small{font-size:7px;color:#929da4;margin-top:2px}.room-row b{font-size:7px;padding:4px 6px;border-radius:12px}.busy{color:#b5782d;background:#fff0dc}.cleaning{color:#3979a7;background:#e8f1f8}.available{color:#168f78;background:#e4f4ef}
.operations-bottom { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }.process-card{overflow:hidden}.process-list>div{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid #eef1f2}.process-list p{flex:1;margin:0}.process-list strong,.process-list small{display:block}.process-list strong{font-size:9px;color:#40515c}.process-list small{font-size:7px;color:#929da4;margin-top:2px}.process-step{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:#edf1f2;color:#667780;font-size:8px;font-weight:700}.process-step.done{background:#e3f4ee;color:#168f78}.process-list.compact>div{padding:8px 14px}.sterilization-meter{padding:15px}.sterilization-meter div{display:flex;justify-content:space-between;color:#52636d;font-size:9px}.sterilization-meter progress{width:100%;height:7px;margin:9px 0;accent-color:var(--primary)}.sterilization-meter small{font-size:7px;color:#929da4}

.portal-preview { display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:start }.patient-phone{border:8px solid #233541;border-radius:30px;background:#f6f8f8;box-shadow:0 20px 50px rgba(23,43,59,.18);overflow:hidden;min-height:650px}.phone-top{display:flex;justify-content:space-between;padding:10px 14px;background:white;font-size:8px;color:#53646e}.portal-welcome{padding:22px 20px;background:linear-gradient(135deg,#168f78,#0d6f5d);color:white}.portal-welcome small{font-size:8px}.portal-welcome h2{margin:3px 0;font-size:21px}.portal-welcome p{margin:0;font-size:9px;opacity:.8}.portal-appointment{margin:15px;display:flex;align-items:center;gap:10px;padding:12px;background:white;border-radius:12px;box-shadow:0 5px 15px rgba(23,43,59,.06)}.calendar-tile{width:44px;height:48px;border-radius:9px;background:#e7f5f0;color:var(--primary);display:grid;place-items:center}.calendar-tile b,.calendar-tile small{display:block}.calendar-tile b{font-size:16px}.calendar-tile small{font-size:7px}.portal-appointment div{flex:1}.portal-appointment strong,.portal-appointment small{display:block}.portal-appointment strong{font-size:9px;color:#40515c}.portal-appointment small{font-size:7px;color:#929da4;margin-top:3px}.portal-buttons{display:flex;gap:7px;margin:0 15px 15px}.portal-buttons button{flex:1;border:1px solid #dfe5e6;background:white;color:#657680;border-radius:8px;padding:8px;font-size:8px}.portal-buttons .confirm-portal{background:var(--primary);color:white;border-color:var(--primary)}.portal-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 15px}.portal-menu button{text-align:right;border:1px solid #e5eaeb;background:white;border-radius:10px;padding:11px}.portal-menu button>span{display:block;color:var(--primary);font-size:15px;margin-bottom:7px}.portal-menu strong,.portal-menu small{display:block}.portal-menu strong{font-size:8px;color:#40515c}.portal-menu small{font-size:7px;color:#929da4;margin-top:3px}.portal-management .module-stats{grid-template-columns:repeat(2,1fr)}.communication-center{overflow:hidden}.automation-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #eef1f2}.automation-icon{width:32px;height:32px;border-radius:9px;background:#e8f5f1;color:var(--primary);display:grid;place-items:center;font-size:9px;font-weight:800}.automation-row div{flex:1}.automation-row strong,.automation-row small{display:block}.automation-row strong{font-size:9px;color:#40515c}.automation-row small{font-size:7px;color:#929da4;margin-top:3px}.switch input{display:none}.switch i{display:block;width:34px;height:19px;border-radius:12px;background:#cbd4d7;position:relative}.switch i:after{content:"";position:absolute;width:15px;height:15px;top:2px;right:2px;border-radius:50%;background:white;transition:.2s}.switch input:checked+i{background:var(--primary)}.switch input:checked+i:after{right:17px}

.patient-drawer{position:fixed;inset:0 0 0 auto;width:min(1080px,calc(100vw - 40px));background:#f6f8f8;z-index:180;box-shadow:-15px 0 50px rgba(20,40,50,.2);transform:translateX(105%);transition:.3s;overflow-y:auto}.patient-drawer.open{transform:none}.patient-drawer-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:white;border-bottom:1px solid var(--line)}.patient-profile-avatar{width:48px;height:48px;border-radius:13px;background:#ece8f9;color:#7058b9;display:grid;place-items:center;font-weight:800}.patient-drawer-head h2{margin:0;color:var(--navy);font-size:17px}.patient-drawer-head p{margin:3px 0 0;color:var(--muted);font-size:8px}.drawer-actions{display:flex;gap:7px}.medical-alerts{display:flex;gap:7px;padding:10px 20px;background:white;border-bottom:1px solid var(--line)}.medical-alerts span{font-size:8px;padding:5px 8px;border-radius:15px;background:#edf1f2;color:#657680}.danger-alert{color:#c45e51!important;background:#fff0ed!important}.warning-alert{color:#ad752e!important;background:#fff1df!important}.profile-tabs{display:flex;gap:5px;padding:11px 20px;background:white;border-bottom:1px solid var(--line);overflow-x:auto}.profile-tabs button{border:0;background:transparent;color:#75848c;padding:8px 11px;border-radius:7px;white-space:nowrap;font-size:9px}.profile-tabs button.active{background:var(--primary-soft);color:var(--primary);font-weight:700}.profile-content{padding:18px}.profile-pane{display:none}.profile-pane.active{display:block}.profile-overview-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.profile-overview-grid .card{padding:16px}.profile-overview-grid h3,.profile-pane h3{margin:0 0 8px;color:var(--navy);font-size:12px}.profile-overview-grid p{font-size:9px;color:#718089;line-height:1.7}.profile-summary{grid-row:span 2}.clinical-form{padding:18px}.clinical-fields{display:grid;grid-template-columns:1fr 1fr;gap:11px}.clinical-fields label,.setting-body label{font-size:9px;color:#53646e}.clinical-fields textarea,.setting-body input,.setting-body select{display:block;width:100%;margin-top:5px;border:1px solid #dfe5e7;border-radius:8px;background:white;padding:9px;font:inherit;color:#40515c}.clinical-fields textarea{min-height:90px;resize:vertical}.full-dental-chart{padding:18px}.tooth-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.tooth-actions button{border:1px solid #dfe5e7;background:white;color:#687880;border-radius:7px;padding:7px 10px;font-size:8px}.tooth-actions button.active{background:var(--primary);color:white;border-color:var(--primary)}.full-teeth{display:grid;grid-template-columns:repeat(16,1fr);gap:7px;direction:ltr}.full-teeth button{height:55px;border:1px solid #dce4e6;border-radius:15px 15px 8px 8px;background:white;color:#75848c;font-size:8px}.full-teeth button.filling{background:#e7f1f8;border-color:#7db1d0;color:#3379a5}.full-teeth button.root{background:#fff0ed;border-color:#df8b80;color:#c45d50}.full-teeth button.implant{background:#eee9f8;border-color:#a393d1;color:#7255a7}.full-teeth button.missing{opacity:.35;border-style:dashed}.chart-help{color:#8a979e;font-size:8px}.treatment-plan-detail{overflow:hidden}.plan-item{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid #edf1f2}.plan-item>span{width:27px;height:27px;border-radius:8px;background:#edf1f2;color:#697983;display:grid;place-items:center}.plan-item.done>span{background:#e3f4ee;color:#168f78}.plan-item div{flex:1}.plan-item strong,.plan-item small{display:block}.plan-item strong{font-size:9px;color:#40515c}.plan-item small{font-size:7px;color:#929da4}.plan-item b{font-size:9px}.signature-box{margin:15px;padding:15px;border:1px dashed #9ccfc2;border-radius:9px;background:#f4fbf9}.signature-box span,.signature-box strong,.signature-box small{display:block}.signature-box span,.signature-box small{font-size:7px;color:#7b898f}.signature-box strong{font-family:cursive;font-size:20px;color:#315b51;margin:8px 0}.files-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.file-tile{min-height:150px;border:1px solid #dfe5e7;background:white;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center}.file-tile>span{font-size:20px;color:var(--primary);font-weight:800}.file-tile strong,.file-tile small{display:block}.file-tile strong{font-size:9px;color:#40515c;margin-top:10px}.file-tile small{font-size:7px;color:#929da4;margin-top:3px}.upload-tile{border-style:dashed}.consent-list>div{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid #edf1f2}.consent-list p{flex:1;margin:0}.consent-list strong,.consent-list small{display:block}.consent-list strong{font-size:9px}.consent-list small{font-size:7px;color:#929da4}.patient-timeline{padding:5px 15px}.patient-timeline article{display:flex;gap:12px;padding:0 0 20px;position:relative}.patient-timeline article>span{width:11px;height:11px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px #e3f4ee;z-index:1}.patient-timeline article:after{content:"";position:absolute;right:5px;top:11px;bottom:0;border-right:1px solid #cfdadc}.patient-timeline strong,.patient-timeline small{display:block}.patient-timeline strong{font-size:9px}.patient-timeline small{font-size:7px;color:#929da4;margin-top:3px}

.advanced-finance-grid,.admin-settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.metric-list{padding:8px 16px}.metric-list>div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef1f2;font-size:9px}.commission-list>div,.integration-list>div{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid #eef1f2}.commission-list p,.integration-list p{flex:1;margin:0}.commission-list strong,.commission-list small,.integration-list strong,.integration-list small{display:block}.commission-list strong,.integration-list strong{font-size:9px}.commission-list small,.integration-list small{font-size:7px;color:#929da4}.commission-list b{font-size:9px;color:var(--primary)}.approval-list>div{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #eef1f2}.approval-list p{flex:1;margin:0}.approval-list strong,.approval-list small{display:block}.approval-list strong{font-size:8px}.approval-list small{font-size:7px;color:#929da4}.approve-btn{border:0;background:#e4f4ef;color:#168f78;border-radius:6px;padding:6px 8px;font-size:7px}.setting-body{padding:14px;display:grid;gap:10px}.setting-body input[type=color]{height:38px;padding:3px}.backup-status{padding:18px;text-align:center}.backup-status span,.backup-status strong,.backup-status small{display:block}.backup-status span,.backup-status small{font-size:8px;color:#929da4}.backup-status strong{font-size:18px;color:var(--navy);margin:5px}.setting-card>.btn{margin:0 14px 10px;width:calc(100% - 28px)}.integration-list>div>span{width:30px;height:30px;border-radius:8px;background:#e8f4f1;color:var(--primary);display:grid;place-items:center;font-size:8px;font-weight:800}.integration-list b{font-size:7px}

.whatsapp-center{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;margin-top:18px}.whatsapp-connection,.wa-automation,.wa-templates,.wa-manual,.wa-log{overflow:hidden}.wa-header{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#f1fbf7,#fff)}.wa-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#25d366;color:white;font-weight:800;font-size:17px}.wa-header div{flex:1}.wa-header h2,.wa-header p{margin:0}.wa-header h2{font-size:13px;color:var(--navy)}.wa-header p{font-size:8px;color:var(--muted);margin-top:3px}.connection-status{font-size:8px;color:#bd792e;background:#fff0dc;padding:5px 8px;border-radius:13px}.connection-status.connected{color:#168f78;background:#e3f4ee}.wa-setup{padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.wa-setup label,.wa-templates label,.wa-manual label{font-size:9px;color:#52636d}.wa-setup input,.wa-templates input,.wa-templates textarea,.wa-manual select{display:block;width:100%;margin-top:5px;border:1px solid #dfe5e7;border-radius:8px;background:white;padding:9px;font:inherit;color:#40515c}.secure-token{display:flex;align-items:center;gap:8px;padding:9px;background:#f5f8f7;border-radius:8px}.secure-token p{margin:0}.secure-token strong,.secure-token small{display:block}.secure-token strong{font-size:8px}.secure-token small{font-size:7px;color:#929da4}.wa-setup>.btn{align-self:end}.wa-rule{display:grid;grid-template-columns:minmax(200px,1fr) 105px 120px;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid #eef1f2}.wa-rule>div{display:flex;align-items:center;gap:9px}.wa-rule p{margin:0}.wa-rule strong,.wa-rule small{display:block}.wa-rule strong{font-size:9px;color:#40515c}.wa-rule small{font-size:7px;color:#929da4;margin-top:2px}.wa-rule select{border:1px solid #dfe5e7;background:white;border-radius:7px;padding:7px;font-size:8px;color:#5c6d76}.wa-automation>.btn{margin:12px 15px;width:calc(100% - 30px)}.wa-message-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:14px;margin-top:14px}.template-tabs{display:flex;gap:5px;padding:11px 14px;border-bottom:1px solid #eef1f2}.template-tabs button{border:0;background:#f0f3f4;color:#718089;border-radius:7px;padding:7px 9px;font-size:8px}.template-tabs button.active{background:#e3f4ee;color:#168f78;font-weight:700}.template-editor{padding:15px;display:grid;gap:11px}.wa-templates textarea{height:105px;resize:vertical;line-height:1.8}.template-variables{display:flex;flex-wrap:wrap;gap:5px;direction:ltr}.template-variables span{font-size:7px;color:#5e4da3;background:#eeeafd;border-radius:5px;padding:4px 6px}.template-actions{display:flex;align-items:center;gap:7px}.template-approval{margin-left:auto;color:#168f78;background:#e3f4ee;padding:5px 8px;border-radius:12px;font-size:8px}.wa-manual{padding-bottom:15px}.wa-manual>label,.wa-manual>.btn{display:block;margin:13px 15px 0;width:calc(100% - 30px)}.wa-preview{margin:13px 15px;padding:13px;background:#e9f7ef;border-radius:12px 12px 3px 12px}.wa-bubble{display:block;color:#31584e;font-size:9px;line-height:1.7}.wa-preview small{display:block;color:#719087;font-size:7px;margin-top:7px}.wa-log{margin-top:14px}.wa-log .data-table{min-width:780px}
.integration-pill{align-self:flex-start;font-size:9px;padding:7px 10px;border-radius:16px;background:#fff0dc;color:#a96824}.integration-pill.connected{background:#e3f4ee;color:#168f78}.offers-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}.offer-form,.offer-preview-card,.offer-campaigns{overflow:hidden}.offer-form-body{padding:16px;display:grid;gap:12px}.offer-form-body label{font-size:9px;color:#52636d;font-weight:600}.offer-form-body input,.offer-form-body textarea{display:block;width:100%;margin-top:6px;border:1px solid #dfe5e7;border-radius:9px;background:#fff;padding:10px;font:inherit;color:#354751;outline:0}.offer-form-body textarea{min-height:110px;resize:vertical;line-height:1.7}.offer-form-body input:focus,.offer-form-body textarea:focus{border-color:#8bc7b9;box-shadow:0 0 0 3px #edf8f5}.offer-consent-note{display:flex;gap:10px;padding:11px;border:1px solid #cce8df;background:#f0faf6;border-radius:10px;color:#36665a}.offer-consent-note strong{font-size:9px;white-space:nowrap}.offer-consent-note span{font-size:8px;line-height:1.6}.wa-logo.small{width:34px;height:34px;font-size:10px}.offer-phone{margin:18px;border-radius:17px;background:#e7ddd4;padding:15px;min-height:230px;box-shadow:inset 0 0 0 5px #24323a}.offer-phone-head{margin:-10px -10px 15px;padding:13px;background:#075e54;color:#fff;border-radius:10px 10px 2px 2px}.offer-phone-head strong,.offer-phone-head small{display:block}.offer-phone-head strong{font-size:10px}.offer-phone-head small{font-size:7px;opacity:.78;margin-top:2px}.offer-bubble{background:#dcf8c6;color:#304b42;border-radius:11px 11px 2px 11px;padding:12px;font-size:9px;line-height:1.8;box-shadow:0 1px 2px rgba(0,0,0,.08)}.offer-preview-time{display:block;text-align:left;color:#577b70;font-size:7px;margin:5px}.offer-audience-preview{padding:0 18px 18px}.offer-audience-preview strong{display:block;font-size:9px;color:var(--navy);margin-bottom:7px}.offer-audience-preview div{display:flex;flex-wrap:wrap;gap:5px;color:#697981;font-size:8px}.offer-audience-preview span{padding:5px 7px;border-radius:13px;background:#f0f3f4}.offer-send-panel{margin-top:14px;padding:15px;display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;border-color:#f1cf9c;background:#fffaf2}.offer-send-panel[hidden]{display:none}.offer-send-panel p{margin:4px 0 0;color:var(--muted);font-size:8px}.offer-send-panel label{font-size:9px;color:#6b5940}.offer-send-panel>div:last-child{display:flex;gap:7px}.offer-campaigns{margin-top:14px}.offer-campaigns .data-table{min-width:760px}.offer-action{border:0;border-radius:7px;padding:6px 9px;background:#e3f4ee;color:#168f78;font:inherit;font-size:8px;font-weight:700}.offer-action:disabled{opacity:.45;cursor:not-allowed}

body.dark-mode{--bg:#111a20;--white:#17232b;--ink:#dce6e9;--navy:#edf5f6;--muted:#8fa0a8;--line:#293740;--primary-soft:#183d36;background:var(--bg);color:var(--ink)}body.dark-mode .sidebar,body.dark-mode .topbar,body.dark-mode .card,body.dark-mode .stat-card,body.dark-mode .mini-stat,body.dark-mode .account-menu,body.dark-mode .notification-panel,body.dark-mode .patient-drawer-head,body.dark-mode .medical-alerts,body.dark-mode .profile-tabs,body.dark-mode .patient-phone,body.dark-mode .portal-appointment,body.dark-mode .portal-menu button,body.dark-mode .kanban-col article,body.dark-mode .schedule-event,body.dark-mode .data-table th,body.dark-mode .login-card{background:#17232b;color:var(--ink)}body.dark-mode input,body.dark-mode select,body.dark-mode textarea,body.dark-mode button{color:inherit}body.dark-mode .search,body.dark-mode .module-search,body.dark-mode .kanban{background:#111a20}body.dark-mode .data-table td,body.dark-mode .card-header,body.dark-mode .room-row,body.dark-mode .automation-row{border-color:#293740}
.wa-safety{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 15px;background:#f7faf9;color:#64757e;font-size:8px}.wa-safety label{display:flex;align-items:center;gap:6px}.wa-safety input[type=checkbox]{accent-color:var(--primary)}.wa-safety input[type=time]{border:1px solid #dfe5e7;border-radius:6px;padding:4px;font-size:8px}

.ai-fab { position: fixed; right: 24px; left: auto; bottom: 24px; z-index: 170; height: 48px; border: 0; border-radius: 24px; background: linear-gradient(135deg, #7059c6, #4d3b9e); color: white; display: flex; align-items: center; gap: 8px; padding: 0 18px; box-shadow: 0 10px 25px rgba(83,61,161,.3); font-weight: 700; font-size: 11px; transition: .2s; }
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(83,61,161,.4); }
.ai-fab.is-open { opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); }
.ai-fab > span:first-child { font-size: 18px; }
.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 390px; background: white; z-index: 190; box-shadow: -10px 0 35px rgba(20,38,50,.18); transform: translateX(105%); transition: transform .3s ease; display: flex; flex-direction: column; }
.ai-panel.open { transform: none; }
.ai-header { padding: 17px 18px; display: flex; justify-content: space-between; align-items: center; color: white; background: linear-gradient(135deg, #55419e, #7660ca); }
.ai-header .icon-btn { border: 0; background: rgba(255,255,255,.13); color: white; font-size: 24px; }
.ai-title { display: flex; align-items: center; gap: 11px; }
.ai-orb { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.16); font-size: 20px; }
.ai-title strong { display: block; font-size: 14px; }
.ai-title small { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #e1dcf6; margin-top: 3px; }
.ai-title small i { width: 6px; height: 6px; border-radius: 50%; background: #64e3ae; }
.ai-context { height: 35px; flex: 0 0 35px; background: #f5f3fc; color: #7767aa; font-size: 9px; display: flex; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid #e7e2f4; }
.ai-context svg { width: 13px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px 16px; background: #fafbfb; }
.message { display: flex; gap: 8px; margin-bottom: 14px; }
.message > div { max-width: 82%; background: white; border: 1px solid #e7ebed; border-radius: 5px 13px 13px 13px; padding: 10px 12px; box-shadow: 0 3px 9px rgba(20,40,50,.04); }
.message.user { direction: ltr; }
.message.user > div { background: #6752b5; color: white; border: 0; border-radius: 13px 5px 13px 13px; }
.message p { margin: 0; font-size: 11px; line-height: 1.7; white-space: pre-line; }
.message small { display: block; font-size: 8px; color: #97a1a7; margin-top: 4px; }
.bot-mini { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px; background: #ebe7fa; color: #6b55bb; display: grid; place-items: center; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-right: 35px; }
.suggestions button { border: 1px solid #ddd7f0; background: white; color: #6958a0; border-radius: 15px; padding: 6px 9px; font-size: 9px; }
.suggestions button:hover { background: #f2eefd; }
.chat-input { margin: 10px 12px; border: 1px solid #dfe4e6; border-radius: 12px; min-height: 49px; display: flex; align-items: flex-end; padding: 6px; gap: 5px; }
.chat-input:focus-within { border-color: #9281cc; box-shadow: 0 0 0 3px #f0edfa; }
.chat-input textarea { border: 0; outline: 0; resize: none; flex: 1; padding: 8px 5px; min-height: 36px; max-height: 100px; font-size: 11px; }
.attach-btn { width: 32px; height: 32px; border: 0; background: transparent; color: #8d99a0; font-size: 22px; }
.send-btn { width: 35px; height: 35px; border: 0; border-radius: 9px; background: #6853b7; color: white; display: grid; place-items: center; }
.send-btn svg { width: 17px; transform: rotate(180deg); }
.ai-footer { text-align: center; color: #9aa4aa; font-size: 8px; padding: 0 10px 9px; }
body.auth-pending .ai-fab,
body.auth-pending .ai-panel { display: none; }
[dir="ltr"] .ai-fab { right: auto; left: 24px; }
[dir="ltr"] .ai-panel { right: auto; left: 0; transform: translateX(-105%); box-shadow: 10px 0 35px rgba(20,38,50,.18); }
[dir="ltr"] .ai-panel.open { transform: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(16,33,45,.38); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: .2s; }
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal { position: fixed; z-index: 90; top: 50%; left: 50%; width: min(520px, calc(100vw - 30px)); transform: translate(-50%, -45%) scale(.98); background: white; border-radius: 15px; box-shadow: 0 22px 60px rgba(18,38,50,.2); opacity: 0; pointer-events: none; transition: .2s; }
.modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal > header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal > header > div { display: flex; gap: 11px; align-items: center; }
.modal-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 24px; }
.modal h2 { margin: 0; font-size: 15px; color: var(--navy); }
.modal header p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.close-modal { border: 0; background: transparent; color: #85929a; font-size: 25px; }
.modal form { padding: 20px; }
.modal label { display: block; color: #51616b; font-size: 10px; font-weight: 600; margin-bottom: 13px; }
.modal input, .modal select, .modal textarea { display: block; width: 100%; min-height: 40px; border: 1px solid #dde3e5; border-radius: 8px; padding: 9px 11px; outline: 0; color: #354751; margin-top: 6px; background: white; font-size: 11px; font-family: inherit; }
.modal textarea { resize: vertical; line-height: 1.6; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #8bc7b9; box-shadow: 0 0 0 3px #edf8f5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.appointment-modal { width: min(760px, calc(100vw - 30px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.clinical-visit-fields { margin: 3px 0 15px; padding: 15px; border: 1px solid #dfe9e6; border-radius: 12px; background: #fbfdfc; }
.clinical-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.clinical-section-head strong, .clinical-section-head span { display: block; }
.clinical-section-head strong { color: var(--navy); font-size: 11px; }
.clinical-section-head div > span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.smart-label { flex: 0 0 auto; padding: 5px 8px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-weight: 700; }
.clinical-options { flex-wrap: wrap; margin-bottom: 12px; }
.treatment-requirements { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; color: #52646d; background: #eef7f4; font-size: 9px; line-height: 1.6; }
.treatment-requirements strong { flex: 0 0 auto; color: var(--primary); }
.priority-urgent { color: #b64b32; font-weight: 700; }
.toast { position: fixed; z-index: 200; right: 50%; top: 22px; transform: translate(50%, -100px); background: white; border: 1px solid #dce9e5; box-shadow: 0 10px 30px rgba(25,55,65,.14); border-radius: 11px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; transition: .3s; }
.toast.show { transform: translate(50%, 0); }
.toast > span { width: 28px; height: 28px; border-radius: 50%; background: #e5f6ef; color: #198d6a; display: grid; place-items: center; }
.toast p { margin: 0; }
.toast strong { display: block; font-size: 10px; }
.toast small { display: block; font-size: 8px; color: #89969e; margin-top: 2px; }

@media (max-width: 1100px) {
  :root { --sidebar: 220px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .smart-insight { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .smart-insight .ai-badge, .smart-insight h2, .smart-insight > p, .ask-ai-btn { grid-column: 1 / -1; }
  .smart-insight h2 { margin-bottom: -8px; }
  .bottom-grid { grid-template-columns: 1fr; }
  .user-menu > span:nth-child(2), .branch-switch > span:nth-child(2) { display: none; }
  .module-stats, .report-insights { grid-template-columns: repeat(2, 1fr); }
  .schedule-grid, .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .clinical-grid, .finance-grid, .reports-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .operations-grid, .portal-preview { grid-template-columns: 1fr; }
  .whatsapp-center, .wa-message-grid, .offers-layout { grid-template-columns: 1fr; }
  .offer-send-panel { grid-template-columns: 1fr; }
  .advanced-finance-grid, .admin-settings-grid { grid-template-columns: repeat(2, 1fr); }
  .kanban { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --sidebar: 260px; }
  .sidebar { transform: translateX(105%); box-shadow: -12px 0 35px rgba(25,45,55,.15); }
  .sidebar.open { transform: none; }
  .main-content { margin-right: 0; }
  .menu-toggle { display: grid; }
  .topbar { padding: 0 14px; }
  .topbar-start { flex: 1; min-width: 0; }
  .search { width: auto; flex: 1; min-width: 0; }
  .search kbd { display: none; }
  .branch-switch { display: none; }
  .language-switcher { display: none; }
  [dir="ltr"] .sidebar { transform: translateX(-105%); }
  [dir="ltr"] .sidebar.open { transform: none; }
  [dir="ltr"] .main-content { margin-left: 0; }
  .page-wrap { padding: 21px 14px 80px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1 { font-size: 22px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 19px; }
  .appointment-row { grid-template-columns: 47px 12px 30px 1fr 67px 20px; padding: 0 10px; gap: 7px; }
  .appointment-row .doctor { display: none; }
  .patient-avatar { width: 30px; height: 30px; }
  .smart-insight { display: block; }
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-panel { width: min(390px, 100vw); }
  .ai-fab { left: 15px; bottom: 15px; width: 48px; padding: 0; justify-content: center; }
  .fab-label { display: none; }
  .module-stats, .report-insights, .schedule-grid, .staff-grid { grid-template-columns: 1fr 1fr; }
  .table-toolbar, .schedule-toolbar { align-items: flex-start; flex-direction: column; }
  .module-search { width: 100%; }
  .waiting-items { grid-template-columns: 1fr 1fr; }
  .security-items { grid-template-columns: 1fr; }
  .security-items > div { border-left: 0; border-bottom: 1px solid var(--line); }
  .ops-kpis, .operations-bottom, .advanced-finance-grid, .admin-settings-grid { grid-template-columns: 1fr 1fr; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .patient-phone { width: min(340px, 100%); margin: 0 auto; }
  .patient-drawer { width: 100vw; }
  .profile-overview-grid { grid-template-columns: 1fr 1fr; }
  .profile-summary { grid-column: 1 / -1; grid-row: auto; }
  .full-teeth { grid-template-columns: repeat(8, 1fr); }
  .files-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 470px) {
  .topbar-actions .user-menu { display: none; }
  .topbar-actions #themeToggle { display: none; }
  .search { width: auto; }
  .stats-grid { grid-template-columns: 1fr; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .appointment-row { grid-template-columns: 45px 10px 29px 1fr 20px; min-height: 74px; }
  .appointment-row .status { display: none; }
  .card-header { padding: 15px 13px; }
  .text-btn { font-size: 0; }
  .text-btn span { font-size: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .module-stats, .report-insights, .schedule-grid, .staff-grid { grid-template-columns: 1fr; }
  .waiting-items { grid-template-columns: 1fr; }
  .treatment-list article { grid-template-columns: 32px 1fr; }
  .treatment-list article b, .treatment-list article em { margin-right: 42px; text-align: right; }
  .table-footer { gap: 10px; flex-direction: column; }
  .permissions-grid { grid-template-columns: 1fr; }
  .account-options { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ops-kpis, .operations-bottom, .advanced-finance-grid, .admin-settings-grid, .profile-overview-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .portal-management .module-stats { grid-template-columns: 1fr; }
  .patient-drawer-head { align-items: flex-start; gap: 10px; flex-direction: column; }
  .medical-alerts { overflow-x: auto; }
  .clinical-fields, .files-grid { grid-template-columns: 1fr; }
  .full-teeth { grid-template-columns: repeat(4, 1fr); }
  .notification-panel { position: fixed; top: 64px; left: 10px; right: 10px; width: auto; }
  .wa-setup { grid-template-columns: 1fr; }
  .wa-rule { grid-template-columns: 1fr; }
  .wa-safety { align-items:flex-start;flex-direction:column; }
}

/* Professional typography scale: readable across desktop, tablet, and mobile. */
body {
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nav-item { min-height: 48px; font-size: 15px; }
.brand span, .clinic-status { font-size: 12px; }
.nav-count, .ai-mini { font-size: 11px; }
.search input { font-size: 14px; }
.search kbd { font-size: 11px; }
.branch-switch small, .user-menu small, .account-menu-head small,
.account-menu button > span:nth-child(2) small { font-size: 11px; }
.branch-switch strong, .user-menu strong, .account-menu-head strong,
.account-menu button > span:nth-child(2) strong { font-size: 13px; }

.eyebrow { font-size: 13px; }
.page-heading h1 { font-size: 28px; line-height: 1.25; }
.page-heading p { font-size: 14px; line-height: 1.6; }
.btn { min-height: 43px; font-size: 14px; }

.trend, .stat-label, .stat-note { font-size: 12px; }
.stat-value { font-size: 26px; }
.card-header h2 { font-size: 17px; }
.card-header p, .text-btn { font-size: 12px; }

.appointment-row { min-height: 76px; }
.appointment-row time { font-size: 13px; }
.appointment-row time small { font-size: 11px; }
.appointment-info strong, .doctor span > span { font-size: 13px; }
.appointment-info span, .doctor small { font-size: 11px; }
.status { font-size: 11px; padding: 5px 9px; }

.ai-badge, .smart-insight > p, .insight-highlight span,
.insight-list small, .chart-legend, .action-grid small { font-size: 11px; }
.smart-insight h2 { font-size: 18px; }
.insight-highlight strong, .insight-list strong, .ask-ai-btn,
.action-grid strong { font-size: 13px; }
.card-header select { font-size: 12px; }
.y-axis, .x-axis { font-size: 10px; }

.role-mode-banner, .portal-access-banner small, .access-denied p,
.mini-stat span, .mini-stat small { font-size: 12px; }
.role-mode-banner button, .portal-access-banner span, .denied-label { font-size: 11px; }
.portal-access-banner strong { font-size: 14px; }
.mini-stat strong { font-size: 23px; }

.module-search input { font-size: 13px; }
.filter-chip, .today-chip { min-height: 34px; font-size: 12px; }
.data-table th { font-size: 12px; padding-top: 13px; padding-bottom: 13px; }
.data-table td, .data-table td strong { font-size: 13px; }
.person-cell small, .staff-main small, .cell-note { font-size: 11px; }
.row-action, .table-footer, .table-footer button { font-size: 11px; }
.table-footer button { min-width: 31px; height: 31px; }

.date-nav strong, .appointment-summary, .doctor-head strong { font-size: 13px; }
.doctor-head small, .doctor-head b { font-size: 11px; }
.schedule-event { min-height: 72px; }
.schedule-event time, .schedule-event small { font-size: 11px; }
.schedule-event strong { font-size: 13px; }
.agenda-date, .agenda-head, .agenda-empty { font-size: 12px; }
.agenda-grid { grid-template-columns: 82px repeat(var(--agenda-doctors,3),minmax(230px,1fr)); grid-template-rows: 48px repeat(40,20px); }
.agenda-time { font-size: 10px; }
.agenda-event strong { font-size: 11px; }
.agenda-event small { font-size: 10px; }
.availability-box strong { font-size: 12px; }
.availability-box span, .supplier-contact small { font-size: 11px; }

.chat-safety-note, .chat-item-copy strong, .staff-message .message-bubble,
.staff-chat-compose textarea, .chat-welcome, .chat-empty { font-size: 12px; }
.chat-section-head h2, .chat-room-head h2 { font-size: 15px; }
.chat-section-head small, .chat-room-head small, .chat-item-copy small,
.staff-message .message-meta, .chat-time, .chat-welcome small { font-size: 10px; }
.chat-unread, .chat-section-head > span, .staff-chat-compose #staffChatSend { font-size: 11px; }
.chat-welcome strong { font-size: 14px; }

.waiting-items strong, .treatment-list article strong, .treatment-list article b,
.tooth-note strong, .cash-card dd, .staff-card dd, .staff-main strong,
.ai-report li strong, .report-list strong, .roles-panel button div strong,
.security-items strong, .form-section-title strong, .permission-card strong { font-size: 12px; }
.waiting-items small, .treatment-list article small, .treatment-list article em,
.chart-key, .tooth-note p, .cash-total span, .cash-card dt, .staff-card dt,
.report-card small, .report-card p, .ai-report li small, .report-list small,
.report-list b, .roles-panel button div small, .security-items small,
.form-section-title small, .permission-card small, .password-hint { font-size: 11px; }
.tooth-note small { font-size: 10px; }
.tooth-row span, .role-pill, .count-badge { font-size: 11px; }
.report-card strong, .ai-report h2 { font-size: 19px; }
.ai-report > p { font-size: 13px; }

.account-options label, .clinical-fields label, .setting-body label,
.wa-setup label, .wa-templates label, .wa-manual label,
.offer-form-body label, .offer-send-panel label { font-size: 12px; }
.form-section-title > span { font-size: 11px; }

.phone-top, .portal-welcome small, .calendar-tile small,
.portal-appointment small, .portal-menu small, .automation-row small { font-size: 10px; }
.portal-welcome p, .portal-appointment strong, .portal-menu strong,
.portal-buttons button, .automation-icon, .automation-row strong { font-size: 12px; }

.patient-drawer-head p, .medical-alerts span, .profile-tabs button,
.profile-overview-grid p, .clinical-fields label, .tooth-actions button,
.full-teeth button, .chart-help, .plan-item small, .file-tile small,
.consent-list small, .patient-timeline small { font-size: 11px; }
.profile-overview-grid h3, .profile-pane h3 { font-size: 15px; }
.plan-item strong, .plan-item b, .file-tile strong, .consent-list strong,
.patient-timeline strong { font-size: 12px; }

.metric-list > div, .commission-list strong, .integration-list strong,
.approval-list strong, .backup-status span, .backup-status small { font-size: 12px; }
.commission-list small, .integration-list small, .approval-list small,
.integration-list b, .approve-btn { font-size: 10px; }

.wa-header h2 { font-size: 15px; }
.wa-header p, .connection-status, .secure-token strong, .wa-rule small,
.wa-rule select, .template-tabs button, .template-approval,
.wa-preview small, .integration-pill, .offer-consent-note span,
.offer-phone-head small, .offer-preview-time, .offer-audience-preview div,
.offer-send-panel p, .offer-action, .wa-safety { font-size: 11px; }
.secure-token small, .template-variables span { font-size: 10px; }
.wa-rule strong, .wa-bubble, .offer-consent-note strong,
.offer-phone-head strong, .offer-bubble, .offer-audience-preview strong { font-size: 12px; }

.ai-fab { font-size: 13px; }
.ai-title strong { font-size: 16px; }
.ai-title small, .ai-context, .suggestions button, .ai-footer { font-size: 11px; }
.message p, .chat-input textarea { font-size: 13px; }
.message small { font-size: 10px; }

.modal h2 { font-size: 18px; }
.modal header p { font-size: 12px; }
.modal label { font-size: 13px; }
.modal input, .modal select, .modal textarea { min-height: 44px; font-size: 13px; }
.clinical-section-head strong { font-size: 14px; }
.clinical-section-head div > span, .smart-label { font-size: 11px; }
.treatment-requirements { font-size: 12px; }
.toast strong { font-size: 13px; }
.toast small { font-size: 11px; }
.invoice-modal { width: min(680px, calc(100vw - 30px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.invoice-tax-notice { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 11px 13px; border: 1px solid #dde8e5; border-radius: 10px; background: #f7faf9; }
.invoice-tax-notice > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.invoice-tax-notice strong, .invoice-tax-notice small { display: block; }
.invoice-tax-notice strong { color: var(--navy); font-size: 12px; }
.invoice-tax-notice small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.invoice-tax-notice.enabled { border-color: #bfe0d7; background: #f1faf7; }
.invoice-summary-box { margin-bottom: 15px; padding: 8px 15px; border: 1px solid #dce6e4; border-radius: 12px; background: #fbfdfc; }
.invoice-summary-box > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px dashed #dfe6e5; color: #60717a; font-size: 12px; }
.invoice-summary-box > div:last-child { border-bottom: 0; }
.invoice-summary-box strong { color: #344650; direction: ltr; }
.invoice-summary-box b { color: #b96d39; font-weight: 700; }
.invoice-summary-box .discount-line strong { color: #bd604d; }
.invoice-summary-box .invoice-grand-total { margin: 5px -7px -1px; padding: 13px 8px; border: 0; border-radius: 9px; background: var(--primary-soft); color: var(--primary-dark); font-size: 14px; font-weight: 800; }
.invoice-summary-box .invoice-grand-total strong { color: var(--primary-dark); font-size: 18px; }
.dashboard-link-card {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-link-card:hover,
.dashboard-link-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: 0 18px 38px rgba(27, 58, 72, .13);
  outline: 0;
}
.global-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: min(460px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  box-shadow: 0 18px 44px rgba(20, 40, 50, .17);
}
.search { position: relative; }
.global-search-results button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  text-align: right;
  cursor: pointer;
}
.global-search-results button:hover {
  background: var(--primary-soft);
}
.global-search-results strong,
.global-search-results small {
  display: block;
}
.global-search-results small,
.global-search-empty {
  color: var(--muted);
  font-size: 11px;
}
.global-search-results b {
  direction: ltr;
  color: var(--primary-dark);
  font-size: 12px;
}
.global-search-empty {
  padding: 12px;
}
.setting-toggle { display: flex !important; align-items: center; gap: 9px; padding: 11px; border-radius: 9px; background: #f5f8f7; }
.setting-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.setting-note { margin: -2px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.finance-actions { flex-wrap: wrap; justify-content: flex-end; }
.finance-control-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; margin-bottom: 14px; }
.finance-control-strip > div { display: flex; align-items: center; gap: 9px; }
.finance-control-strip span, .finance-control-strip small { font-size: 12px; color: var(--muted); }
.finance-control-strip select { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: white; color: var(--ink); }
.finance-period-control,
.finance-custom-range,
.finance-ai-tip {
  min-width: 0;
}
.finance-custom-range label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.finance-custom-range input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 9px;
  color: var(--ink);
  background: white;
}
.finance-ai-tip {
  flex: 1;
  justify-content: flex-start;
}
.finance-ai-tip small {
  max-width: 520px;
  line-height: 1.6;
}
.financial-accounts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.financial-account-card { padding: 16px; position: relative; overflow: hidden; }
.financial-account-card::after { content: ""; position: absolute; inset: auto -22px -35px auto; width: 105px; height: 105px; border-radius: 50%; background: var(--primary-soft); opacity: .65; }
.financial-account-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.financial-account-card header span { color: var(--primary); background: var(--primary-soft); padding: 5px 8px; border-radius: 14px; font-size: 11px; }
.financial-account-card h3 { margin: 0; color: var(--navy); font-size: 14px; }
.financial-account-card strong { display: block; position: relative; z-index: 1; margin-top: 18px; color: var(--navy); font-size: 24px; direction: ltr; text-align: right; }
.financial-account-card small { position: relative; z-index: 1; color: var(--muted); font-size: 11px; }
.recurring-card { overflow: hidden; }
.recurring-list { max-height: 460px; overflow-y: auto; }
.recurring-item { padding: 13px 15px; border-bottom: 1px solid #edf1f2; }
.recurring-item header, .recurring-item footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recurring-item strong { color: #40515c; font-size: 12px; }
.recurring-item b { color: var(--navy); font-size: 13px; direction: ltr; }
.recurring-item p { margin: 5px 0; color: var(--muted); font-size: 11px; }
.recurring-item small { color: #7e8d95; font-size: 10px; }
.recurring-item button { border: 0; border-radius: 7px; padding: 6px 9px; color: var(--primary-dark); background: var(--primary-soft); font-size: 11px; font-weight: 700; }
.expense-type-summary { padding: 13px 16px 3px; display: grid; gap: 12px; }
.expense-type-summary > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.expense-type-summary strong { color: var(--navy); direction: ltr; }
.expense-type-summary i { grid-column: 1 / -1; display: block; height: 7px; border-radius: 5px; background: #e8edef; overflow: hidden; }
.expense-type-summary i::after { content: ""; display: block; width: var(--bar-width, 0%); height: 100%; border-radius: inherit; }
.fixed-bar::after { background: #725abb; }
.variable-bar::after { background: var(--primary); }
.chart-accounts-list { max-height: 360px; overflow-y: auto; padding: 7px 15px 13px; }
.chart-account-row { display: grid; grid-template-columns: 45px 1fr auto; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1f2; }
.chart-account-row code { direction: ltr; color: var(--primary-dark); font-size: 11px; }
.chart-account-row strong { color: #40515c; font-size: 11px; }
.chart-account-row span { color: var(--muted); font-size: 10px; }
.financial-controls { padding: 8px 16px; }
.financial-controls > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eef1f2; font-size: 12px; }
.financial-controls strong { color: var(--navy); }
.finance-transactions-table { min-width: 0; table-layout: fixed; }
.finance-transactions-table th,
.finance-transactions-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.finance-cell {
  display: grid;
  gap: 3px;
  color: var(--text-body);
  font-weight: 600;
  line-height: 1.55;
}

.finance-cell[dir="ltr"] {
  text-align: right;
}

.finance-cell span,
.finance-cell em {
  display: block;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

.finance-cell em {
  opacity: .86;
  font-size: .96em;
  font-style: normal;
  font-weight: 500;
}

#finance .finance-transactions-table td strong,
#finance .finance-transactions-table td small,
#finance .finance-transactions-table .cell-note {
  color: var(--text-body) !important;
  font-weight: 600;
}
.finance-ai-center { display: grid; gap: 14px; margin-top: 18px; }
.finance-ai-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; background: linear-gradient(135deg, #f7fffc, #f7f5ff); border-color: #cfe6df; }
.finance-ai-heading { display: flex; align-items: flex-start; gap: 14px; }
.finance-ai-heading .ai-orb { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--primary), #7056ba); box-shadow: 0 8px 20px #4c9c8c35; }
.finance-ai-heading h2 { margin: 5px 0 4px; color: var(--navy); font-size: 22px; }
.finance-ai-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.finance-ai-actions { display: flex; align-items: center; gap: 12px; }
.finance-ai-actions > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.finance-ai-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.finance-ai-kpis article { padding: 16px; border-top: 3px solid #80c5b7; }
.finance-ai-kpis span, .finance-ai-kpis small { display: block; color: var(--muted); font-size: 11px; }
.finance-ai-kpis strong { display: block; margin: 9px 0 4px; color: var(--navy); font-size: 22px; direction: ltr; text-align: right; }
.finance-ai-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 14px; }
.finance-ai-analysis, .finance-ai-reports, .finance-ai-chat { overflow: hidden; }
.ai-executive-summary { margin: 14px 16px; padding: 14px; border-radius: 11px; color: #35515a; background: #f3f9f7; font-size: 13px; line-height: 1.8; }
.ai-recommendations { padding: 0 16px 12px; }
.ai-recommendations article { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #edf1f2; }
.ai-recommendations article > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--primary-dark); background: var(--primary-soft); font-size: 11px; font-weight: 800; }
.ai-recommendations strong { color: var(--navy); font-size: 12px; }
.ai-recommendations p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.ai-recommendations b { padding: 4px 7px; border-radius: 12px; color: #76542a; background: #fff2d8; font-size: 9px; }
.finance-ai-analysis footer { padding: 10px 16px; color: var(--muted); background: #fafcfc; font-size: 10px; }
.ai-report-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px; }
.ai-report-buttons button { display: grid; grid-template-columns: 29px 1fr; gap: 2px 8px; text-align: right; border: 1px solid #e0e8e6; border-radius: 10px; padding: 10px; background: white; cursor: pointer; }
.ai-report-buttons button:hover { border-color: var(--primary); background: #f7fcfa; }
.ai-report-buttons span { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: var(--primary-dark); background: var(--primary-soft); }
.ai-report-buttons strong { color: #40515c; font-size: 11px; }
.ai-report-buttons small { color: var(--muted); font-size: 9px; }
.finance-report-output { margin: 0 14px 14px; padding: 12px; border: 1px solid #e3eae9; border-radius: 10px; background: #fafcfc; }
.finance-report-output > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.finance-report-output > header { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #e6eceb; }
.finance-report-output header strong, .finance-report-output header small { display: block; }
.finance-report-output header strong { color: var(--navy); font-size: 12px; }
.finance-report-output header small, .finance-report-output > small { color: var(--muted); font-size: 9px; }
.finance-report-output header button { border: 0; color: var(--primary-dark); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.finance-report-rows div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e0e7e6; font-size: 11px; }
.finance-report-rows strong { color: var(--navy); direction: ltr; }
.finance-report-output .finance-report-rows + p { margin: 10px 0 5px; color: #49616a; }
.ai-safety-pill { padding: 5px 9px; border-radius: 14px; color: var(--primary-dark); background: var(--primary-soft); font-size: 10px; font-weight: 700; }
.finance-chat-messages { min-height: 120px; max-height: 270px; overflow-y: auto; padding: 15px; background: #fbfdfc; }
.finance-chat-message { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.finance-chat-message > span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--primary); font-size: 11px; }
.finance-chat-message p { max-width: 78%; margin: 0; padding: 9px 11px; border-radius: 11px 11px 11px 3px; color: #40515c; background: white; border: 1px solid #e6eceb; font-size: 12px; line-height: 1.65; }
.finance-chat-message.user { justify-content: flex-end; }
.finance-chat-message.user p { color: white; background: var(--primary); border: 0; border-radius: 11px 11px 3px 11px; }
.finance-chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 15px 0; }
.finance-chat-suggestions button { border: 1px solid #d9e7e3; border-radius: 15px; padding: 6px 9px; color: var(--primary-dark); background: white; font-size: 10px; cursor: pointer; }
.finance-ai-compose { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 12px 15px 15px; }
.finance-ai-compose textarea { resize: none; min-height: 43px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 12px; }
.patient-finance-pane {
  overflow: hidden;
}
.patient-finance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.patient-finance-actions .btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
}
.patient-finance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.patient-finance-summary article {
  padding: 12px;
  border: 1px solid #e0e8e6;
  border-radius: 10px;
  background: #fbfdfc;
}
.patient-finance-summary span,
.patient-finance-summary strong {
  display: block;
}
.patient-finance-summary span {
  color: var(--muted);
  font-size: 11px;
}
.patient-finance-summary strong {
  margin-top: 6px;
  color: var(--navy);
  direction: ltr;
  font-size: 17px;
}
.patient-finance-list {
  padding: 0 14px 14px;
}
.patient-finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #edf1f2;
}
.patient-finance-row strong,
.patient-finance-row small {
  display: block;
}
.patient-finance-row strong {
  color: var(--navy);
  font-size: 12px;
}
.patient-finance-row small {
  color: var(--muted);
  font-size: 10px;
}
.patient-finance-row span,
.patient-finance-row b {
  direction: ltr;
  white-space: nowrap;
  font-size: 12px;
}
.patient-finance-empty {
  padding: 14px;
  color: var(--muted);
  border-top: 1px solid #edf1f2;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .financial-accounts-grid { grid-template-columns: repeat(2, 1fr); }
  .finance-control-strip { align-items: flex-start; flex-direction: column; }
  .finance-ai-kpis { grid-template-columns: repeat(2, 1fr); }
  .finance-ai-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .financial-accounts-grid { grid-template-columns: 1fr; }
  .finance-control-strip,
  .finance-control-strip > div,
  .finance-custom-range {
    align-items: stretch;
    flex-direction: column;
  }
  .finance-ai-hero, .finance-ai-actions { align-items: flex-start; flex-direction: column; }
  .finance-ai-kpis { grid-template-columns: 1fr; }
  .ai-report-buttons { grid-template-columns: 1fr; }
  .patient-finance-summary { grid-template-columns: 1fr; }
  .patient-finance-row { grid-template-columns: 1fr; }
}

/* Secure sign-in experience */
body.auth-pending { overflow: hidden; }
body.auth-pending > .sidebar,
body.auth-pending > .main-content,
body.auth-pending > .sidebar-backdrop { visibility: hidden; }
body.app-entering > .sidebar,
body.app-entering > .main-content {
  animation: appReveal .65s cubic-bezier(.22,.75,.28,1) both;
}

.login-screen {
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  color: #203246;
  background:
    linear-gradient(120deg, rgba(5,22,38,.08), transparent 45%),
    #edf3f6;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.login-screen.show { opacity: 1; visibility: visible; }
body.app-ready .login-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.login-shell {
  width: min(1040px, 100%);
  min-height: min(680px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  direction: ltr;
  overflow: hidden;
  border: 1px solid rgba(192,207,217,.86);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 30px 85px rgba(25,48,65,.18);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22,.75,.28,1);
}
.login-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  direction: rtl;
  color: #eaf8f5;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(8,39,53,.94), rgba(12,80,72,.9)),
    url("assets/doctor-ammar-avatar.png") center 18% / cover no-repeat;
}
.login-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.login-showcase > * { position: relative; z-index: 1; }
.login-showcase-brand { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.login-brand-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
}
.login-brand-symbol svg { width: 27px; fill: #fff; }
.login-showcase-copy { max-width: 430px; }
.login-showcase-copy > span {
  display: inline-block;
  margin-bottom: 14px;
  color: #7fe6d2;
  font-size: 13px;
  font-weight: 700;
}
.login-showcase-copy h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 36px;
  line-height: 1.38;
  letter-spacing: 0;
}
.login-showcase-copy p { margin: 0; color: rgba(232,249,246,.72); font-size: 14px; line-height: 1.9; }
.login-showcase-status {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(2,27,34,.38);
  backdrop-filter: blur(12px);
}
.login-showcase-status i { width: 9px; height: 9px; border-radius: 50%; background: #51e1b8; box-shadow: 0 0 0 5px rgba(81,225,184,.12); }
.login-showcase-status strong, .login-showcase-status small { display: block; }
.login-showcase-status strong { color: #f3fffc; font-size: 12px; }
.login-showcase-status small { margin-top: 3px; color: rgba(229,248,244,.58); font-size: 10px; }

.login-card {
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 56px;
  direction: rtl;
  color: #32465a;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.login-brand { margin-bottom: 42px; }
.login-brand .brand-mark { width: 44px; height: 44px; border-radius: 8px; }
.login-brand strong { color: #132a3d; font-size: 18px; }
.login-brand small { margin-top: 3px; color: #7b8c99; font-size: 11px; }
.login-heading > span { padding: 6px 9px; border-radius: 5px; font-size: 11px; }
.login-heading h2 { margin: 12px 0 6px; color: #132a3d; font-size: 30px; line-height: 1.3; }
.login-heading p { margin: 0 0 28px; color: #718391; font-size: 13px; line-height: 1.7; }
.login-card form > label { margin-bottom: 16px; color: #405568; font-size: 12px; }
.login-field {
  height: 52px;
  margin-top: 8px;
  padding: 0 14px;
  border-color: #d8e1e7;
  border-radius: 7px;
  background: #fbfcfd;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-field:focus-within { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent); }
.login-field-icon { width: 18px; color: #8293a0; text-align: center; font-size: 12px; }
.login-field input { height: auto !important; color: #1f3447; background: transparent; font-size: 14px; }
.login-field-check { color: var(--primary); font-size: 12px; font-style: normal; opacity: 0; transition: opacity .2s; }
.login-field:has(input:valid:not(:placeholder-shown)) .login-field-check { opacity: 1; }
.login-field button { padding: 8px; color: var(--primary); font-size: 11px; font-weight: 700; }
.forgot-password-link {
  justify-self: end;
  width: fit-content;
  min-height: auto;
  margin-top: -4px;
  padding: 0;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}
.forgot-password-link:hover { text-decoration: underline; }
.login-error { min-height: 22px; color: #c54242; font-size: 11px; line-height: 1.6; }
.login-submit {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
  border-radius: 7px;
  font-size: 14px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}
.login-submit i { font-size: 18px; font-style: normal; transition: transform .2s; }
.login-submit:hover i { transform: translateX(-4px); }
.login-submit.is-loading i {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  font-size: 0;
  animation: loginSpin .7s linear infinite;
}
.login-separator { margin: 18px 0; color: #9aa7b0; font-size: 10px; }
.google-login { height: 48px; border-radius: 7px; font-size: 12px; }
.google-login-note { margin-top: 8px; color: #8997a1; font-size: 10px; }
.public-signup-open {
  width: 100%;
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, #d8e1e7);
  border-radius: 8px;
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  text-align: center;
}
.public-signup-open span { font-size: 13px; font-weight: 800; }
.public-signup-open small { color: #718391; font-size: 10px; }
.login-card footer { display: flex; justify-content: center; gap: 16px; margin-top: 28px; color: #8997a1; font-size: 9px; }
.login-card footer span { display: inline-flex; align-items: center; gap: 5px; }
.login-card footer span::before { content: "✓"; color: var(--primary); font-weight: 800; }

.login-welcome {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  color: #fff;
  text-align: center;
  background: #0a302f;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity .35s ease, transform .5s ease, visibility .35s;
}
.login-welcome-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #0c443e;
  background: #d9fff5;
  box-shadow: 0 0 0 10px rgba(255,255,255,.06);
  font-size: 28px;
  font-weight: 800;
}
.login-welcome small { color: #75e2cb; font-size: 12px; }
.login-welcome strong { margin-top: 8px; color: #fff; font-size: 27px; }
.login-welcome p { margin: 7px 0 24px; color: rgba(235,255,251,.68); font-size: 13px; }
.login-welcome-progress { width: 220px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.14); }
.login-welcome-progress i { display: block; width: 0; height: 100%; background: #68e5ca; }
.login-screen.login-success .login-shell { opacity: 0; transform: scale(.97); }
.login-screen.login-success .login-welcome { opacity: 1; visibility: visible; transform: none; }
.login-screen.login-success .login-welcome-progress i { animation: welcomeProgress 1.45s ease-out forwards; }
.login-screen.login-exit { opacity: 0; }
.login-screen.login-shake .login-card { animation: loginShake .36s ease; }

.public-signup {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 25, 38, .58);
  backdrop-filter: blur(10px);
}
.public-signup[hidden] { display: none; }
.public-signup-card {
  width: min(920px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  overflow-x: hidden;
  border: 1px solid #d7e2e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4, 20, 34, .26);
}
.public-signup-card > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #e4ebef;
  background: #fff;
}
.public-signup-card header small { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.public-signup-card header h2 { margin: 5px 0 4px; color: #132a3d; font-size: 22px; }
.public-signup-card header p { margin: 0; color: #718391; font-size: 12px; }
.public-signup-card header button {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe5ea;
  border-radius: 8px;
  color: #526b7d;
  background: #f8fbfc;
  font-size: 22px;
}
.public-signup-card form { min-width: 0; padding: 20px 22px 22px; }
.password-reset-panel {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 25, 38, .58);
  backdrop-filter: blur(10px);
}
.password-reset-panel[hidden] { display: none; }
.password-reset-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  overflow-x: hidden;
  direction: rtl;
  color: #203246;
  border: 1px solid #d7e2e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4, 20, 34, .26);
}
.password-reset-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #e4ebef;
  background: #fff;
}
.password-reset-card header small { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.password-reset-card header h2 { margin: 5px 0 4px; color: #132a3d; font-size: 22px; }
.password-reset-card header p { margin: 0; color: #718391; font-size: 12px; line-height: 1.7; }
.password-reset-card header button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #dbe5ea;
  border-radius: 8px;
  color: #526b7d;
  background: #f8fbfc;
  font-size: 22px;
}
.password-reset-card form {
  min-width: 0;
  display: grid;
  gap: 13px;
  padding: 20px 22px 22px;
}
.password-reset-card label {
  color: #405568;
  font-size: 11px;
  font-weight: 900;
}
.password-reset-card input {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d5e1e7;
  border-radius: 8px;
  color: #1f3447;
  background: white;
  outline: 0;
}
.password-reset-card input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}
.password-reset-notice {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #dcebe7;
  border-radius: 8px;
  color: #3f675f;
  background: #f2fbf8;
  font-size: 11px;
  line-height: 1.7;
}
.password-reset-status {
  min-height: 22px;
  color: #55707f;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.password-reset-status a { color: var(--primary-dark); font-weight: 900; }
.signup-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.signup-progress span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #dde7ec;
  border-radius: 8px;
  color: #6d7f8d;
  background: #f8fbfc;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}
.signup-progress span.active {
  color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 40%, #d9e4ea);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.signup-email-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #dce7ec;
  border-radius: 8px;
  background: linear-gradient(135deg, #fbfdfe, color-mix(in srgb, var(--primary) 5%, #fff));
}
.signup-google-handoff {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dce5ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(27, 48, 60, .06);
}
.signup-google-handoff[hidden] { display: none; }
.signup-google-handoff > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #e2e8ec;
  border-radius: 8px;
  background: #fff;
}
.signup-google-handoff svg { width: 22px; height: 22px; }
.signup-google-handoff strong {
  display: block;
  color: #132a3d;
  font-size: 13px;
}
.signup-google-handoff small {
  display: block;
  margin-top: 3px;
  color: #718391;
  font-size: 10px;
  line-height: 1.6;
}
.signup-email-step label,
.signup-email-confirm span {
  color: #405568;
  font-size: 11px;
  font-weight: 900;
}
.signup-email-step input {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d5e1e7;
  border-radius: 8px;
  color: #1f3447;
  background: white;
  outline: 0;
}
.signup-email-step input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}
.signup-email-step p {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #718391;
  font-size: 10px;
  line-height: 1.6;
}
.signup-email-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, #dce7ec);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, #fff);
}
.signup-email-confirm[hidden],
.signup-details-step[hidden] { display: none; }
.signup-email-confirm strong {
  min-width: 0;
  flex: 1;
  color: #132a3d;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.signup-email-confirm button {
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}
.public-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.public-plan-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe5ea;
  border-radius: 8px;
  background: #fbfdfe;
  cursor: pointer;
}
.public-plan-card input { position: absolute; inset: 12px 12px auto auto; }
.public-plan-card:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}
.public-plan-card.featured::after {
  content: "الأكثر اختيارًا";
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 7px;
  border-radius: 5px;
  color: #0f715f;
  background: #e4f7f2;
  font-size: 8px;
  font-weight: 800;
}
.public-plan-card strong,
.public-plan-card small { display: block; }
.public-plan-card strong { color: #132a3d; font-size: 13px; }
.public-plan-card span small { margin-top: 4px; color: #718391; font-size: 9px; line-height: 1.5; }
.public-plan-card b { color: #132a3d; font-size: 19px; }
.public-plan-card b small { display: inline; color: #7b8c99; font-size: 9px; }
.public-plan-card ul { margin: 0; padding: 0; list-style: none; }
.public-plan-card li { padding: 5px 0; color: #546a7a; border-top: 1px solid #edf2f4; font-size: 9px; }
.public-plan-card li::before { content: "✓"; margin-inline-end: 5px; color: var(--primary); font-weight: 900; }
.public-signup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.signup-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e0e9ee;
  border-radius: 8px;
  background: #f8fbfc;
}
.signup-section-title span {
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 900;
}
.signup-section-title strong {
  color: #6b7e8b;
  font-size: 10px;
  font-weight: 800;
}
.compact-signup-fields label:first-of-type {
  grid-column: 1 / -1;
}
.public-signup-fields label { color: #405568; font-size: 11px; font-weight: 800; }
.public-signup-fields input {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #dbe5ea;
  border-radius: 8px;
  color: #1f3447;
  background: #fbfcfd;
  outline: 0;
}
.public-signup-fields input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.public-signup-error { min-height: 24px; margin-top: 10px; color: #c54242; font-size: 11px; font-weight: 700; }
.public-signup-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.public-signup-actions .btn { min-width: 130px; justify-content: center; }
.public-signup-note { margin: 12px 0 0; color: #718391; font-size: 10px; line-height: 1.7; }

@keyframes loginSpin { to { transform: rotate(360deg); } }
@keyframes welcomeProgress { to { width: 100%; } }
@keyframes loginShake { 25% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
@keyframes appReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .login-screen { padding: 14px; }
  .login-shell { min-height: calc(100vh - 28px); grid-template-columns: 1fr; }
  .login-showcase { display: none; }
  .login-card { padding: 38px 30px; }
  .signup-email-step { grid-template-columns: 1fr; }
  .public-plan-grid { grid-template-columns: 1fr; }
  .public-signup-fields { grid-template-columns: 1fr; }
  .signup-section-title { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .login-screen { padding: 0; background: #fff; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .login-card { justify-content: flex-start; padding: 34px 22px; }
  .login-brand { margin-bottom: 34px; }
  .login-heading h2 { font-size: 27px; }
  .login-card footer { flex-wrap: wrap; gap: 8px 14px; }
  .public-signup { padding: 0; align-items: stretch; }
  .public-signup-card { max-height: 100vh; border: 0; border-radius: 0; }
  .public-signup-card > header { padding: 16px; }
  .public-signup-card form { padding: 16px; }
  .public-signup-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell, .login-screen, .login-welcome, .login-submit i { transition: none; }
  .login-submit.is-loading i, .login-screen.login-success .login-welcome-progress i,
  body.app-entering > .sidebar, body.app-entering > .main-content { animation-duration: .01ms; }
}

@media print {
  #financeReportOutput { position: absolute; inset: 20px; border: 0; }
  #financeReportOutput button { display: none; }
}

.login-card { width: min(480px, 100%); padding: 34px; }
.login-brand strong { font-size: 20px; }
.login-brand small { font-size: 12px; }
.login-heading > span { font-size: 11px; padding: 6px 10px; }
.login-heading h2 { font-size: 27px; line-height: 1.3; }
.login-heading p { font-size: 13px; }
.login-card form > label { font-size: 13px; }
.login-field { height: 50px; }
.login-field > span { font-size: 12px; }
.login-field input { font-size: 14px; }
.login-field button { font-size: 11px; }
.login-submit, .google-login { height: 49px; font-size: 14px; }
.login-separator, .google-login-note, .login-error,
.login-demo, .login-card footer { font-size: 11px; }

.language-switcher { min-height: 40px; }
.language-switcher select { font-size: 12px; }
.notification-head strong { font-size: 14px; }
.notification-head small, .notification-head button { font-size: 11px; }
.notification-item strong { font-size: 12px; }
.notification-item small, .notification-item > span { font-size: 11px; }

@media (max-width: 760px) {
  .page-heading h1 { font-size: 25px; }
  .stat-value { font-size: 23px; }
  .data-table { min-width: 920px; }
  .appointment-row { min-height: 82px; }
  .login-card { padding: 26px 22px; }
}

/* 2026 modern clinical workspace theme */
:root {
  --navy: #122033;
  --ink: #263548;
  --muted: #718096;
  --line: #e4eaf0;
  --bg: #f3f6fa;
  --white: #fff;
  --shadow: 0 18px 45px rgba(24, 39, 58, .08);
  --shadow-soft: 0 8px 24px rgba(24, 39, 58, .055);
  --radius-xl: 22px;
  --radius-lg: 17px;
  --radius-md: 13px;
  --sidebar: 270px;
}

body {
  background:
    radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--primary) 10%, transparent) 0, transparent 28rem),
    radial-gradient(circle at 8% 25%, rgba(103, 91, 190, .055) 0, transparent 25rem),
    var(--bg);
  letter-spacing: -.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 70%);
}

.sidebar {
  width: var(--sidebar);
  margin: 12px;
  height: calc(100vh - 24px);
  inset: 0 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  color: white;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--primary) 32%, transparent), transparent 36%),
    linear-gradient(165deg, #15283a 0%, #0e1d2c 52%, #0b1723 100%);
  box-shadow: 0 24px 65px rgba(10, 27, 42, .22);
}

.brand {
  height: 96px;
  padding: 0 22px;
  border-color: rgba(255,255,255,.09);
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 82%, white), var(--primary-dark));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 13px 30px color-mix(in srgb, var(--primary) 30%, transparent);
}

.brand strong { color: #fff; font-size: 20px; letter-spacing: -.025em; }
.brand span { color: rgba(225,237,244,.58); font-size: 11px; }
.main-nav { padding: 16px 12px 20px; scrollbar-color: rgba(255,255,255,.16) transparent; }

.nav-item {
  min-height: 48px;
  margin-bottom: 5px;
  padding: 0 14px;
  border-radius: 14px;
  color: rgba(224,235,241,.68);
  font-size: 13px;
  font-weight: 600;
}

.nav-item:hover {
  color: white;
  background: rgba(255,255,255,.075);
  transform: translateX(-2px);
}

.nav-item.active {
  color: white;
  background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 84%, transparent), color-mix(in srgb, var(--primary) 46%, transparent));
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent);
}

.nav-item.active::after { display: none; }
.nav-icon { color: currentColor; opacity: .94; }
.nav-count { color: rgba(255,255,255,.72); background: rgba(255,255,255,.1); }
.nav-count.accent, .ai-mini { color: #fff; background: rgba(255,255,255,.14); }
.alert-dot { box-shadow: 0 0 0 4px rgba(237,120,93,.13); }
.sidebar-footer { border-color: rgba(255,255,255,.09); background: rgba(3,12,20,.14); }
.clinic-status { color: rgba(225,237,244,.58); padding-bottom: 3px; }

.main-content { margin-right: calc(var(--sidebar) + 24px); }

.topbar {
  height: 82px;
  margin: 12px 14px 0;
  padding: 0 22px;
  border: 1px solid rgba(224,231,238,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 32px rgba(30,45,64,.055);
  backdrop-filter: blur(22px) saturate(150%);
}

.search {
  height: 46px;
  width: min(420px, 34vw);
  padding: 0 15px;
  border: 1px solid #e3e9ef;
  border-radius: 14px;
  background: rgba(246,248,251,.9);
}

.search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 45%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}

.search input { font-size: 13px; }
.search kbd { border-radius: 7px; padding: 3px 7px; box-shadow: 0 1px 2px rgba(30,45,60,.05); }
.icon-btn, .branch-switch, .user-menu, .language-switcher {
  border: 1px solid #e4eaf0;
  background: rgba(255,255,255,.82);
  box-shadow: 0 3px 10px rgba(26,42,58,.035);
}
.icon-btn { width: 42px; height: 42px; border-radius: 13px; }
.branch-switch, .user-menu { height: 50px; border-radius: 14px; padding: 4px 9px; }
.branch-switch:hover, .user-menu:hover, .icon-btn:hover { background: white; border-color: #d5dfe7; box-shadow: var(--shadow-soft); }
.branch-icon, .avatar { border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.25); }
.avatar { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 82%, white), var(--primary-dark)); }

.page-wrap { max-width: 1600px; padding: 34px 34px 60px; }
.page { animation: modernFade .32s cubic-bezier(.2,.75,.3,1); }
@keyframes modernFade { from { opacity: 0; transform: translateY(9px) scale(.997); } to { opacity: 1; transform: none; } }

.page-heading {
  align-items: center;
  margin-bottom: 26px;
  padding: 4px 2px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 11%, transparent);
}

.page-heading h1 {
  margin-top: 5px;
  color: var(--navy);
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 800;
  letter-spacing: -.045em;
}

.page-heading p { font-size: 13px; line-height: 1.6; }

.btn {
  min-height: 43px;
  height: auto;
  padding: 0 17px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
}

.btn.primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, white), var(--primary-dark));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent), inset 0 1px rgba(255,255,255,.25);
}

.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 29%, transparent); }
.btn.secondary { border-color: #e1e7ec; box-shadow: 0 3px 9px rgba(25,40,58,.035); }

.card, .stat-card, .mini-stat {
  border: 1px solid rgba(222,230,237,.92);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.91);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.card:hover, .mini-stat:hover { border-color: color-mix(in srgb, var(--primary) 20%, #dde5eb); }
.stat-card { padding: 20px 21px; border-radius: 19px; overflow: hidden; position: relative; }
.stat-card::after {
  content: "";
  position: absolute;
  width: 95px;
  height: 95px;
  left: -38px;
  bottom: -52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-icon, .action-icon { width: 42px; height: 42px; border-radius: 13px; }
.stat-value { margin: 7px 0 5px; font-size: 27px; letter-spacing: -.04em; }
.stat-label { font-size: 12px; font-weight: 600; }
.stat-note { font-size: 11px; }
.trend { border-radius: 9px; padding: 5px 8px; }

.card-header { padding: 20px 22px; border-color: #edf1f4; }
.card-header h2 { font-size: 16px; letter-spacing: -.02em; }
.card-header p { margin-top: 4px; font-size: 11px; }
.text-btn { font-size: 11px; font-weight: 800; }

.module-stats { gap: 15px; margin-bottom: 18px; }
.mini-stat { padding: 19px 20px; transition: .22s ease; }
.mini-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mini-stat strong { margin: 8px 0 5px; font-size: 26px; letter-spacing: -.035em; }

.table-toolbar, .schedule-toolbar {
  padding: 15px 17px;
  border-radius: var(--radius-lg);
}

.module-search {
  height: 43px;
  border-color: #e1e8ed;
  border-radius: 13px;
  background: #f7f9fb;
}

.module-search:focus-within { border-color: color-mix(in srgb, var(--primary) 42%, white); background: white; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 9%, transparent); }
.filter-chip, .today-chip { min-height: 36px; border-radius: 11px; padding: 0 13px; font-weight: 700; }
.filter-chip:hover, .filter-chip.active, .today-chip { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 24%, white); }

.data-card { border-radius: var(--radius-xl); }
.data-table th { padding: 15px 16px; color: #657386; background: #f7f9fb; border-bottom-color: #e9eef2; font-weight: 800; }
.data-table td { padding: 14px 16px; border-bottom-color: #edf1f4; }
.data-table tbody tr { transition: background .18s ease, transform .18s ease; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, white); }
.table-avatar { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
.row-action { min-height: 32px; padding: 6px 11px; border-radius: 10px; font-weight: 700; }
.table-footer { padding: 15px 18px; background: #fbfcfd; }

.schedule-toolbar { min-height: 64px; padding: 12px 16px; }
.date-nav > button:not(.today-chip) { width: 37px; height: 37px; border-radius: 11px; }
.agenda-card { border-radius: var(--radius-xl); }
.agenda-grid { border-radius: 15px; border-color: #e5ebef; }
.agenda-head { background: linear-gradient(180deg, #f8fafb, #f3f6f8); }
.agenda-event { border-radius: 10px; box-shadow: 0 6px 14px rgba(22,83,69,.11); }

.account-menu, .notification-panel {
  border-radius: 18px;
  border-color: #e2e8ed;
  box-shadow: 0 24px 65px rgba(18,34,49,.18);
}

.modal {
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(15,30,45,.25);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(22px);
}

.modal header { padding: 20px 22px; background: linear-gradient(180deg, #fff, #fafcfd); border-bottom-color: #edf1f4; }
.modal form { padding: 23px; }
.modal input, .modal select, .modal textarea { min-height: 46px; border-radius: 12px; border-color: #dfe6eb; background: #fbfcfd; }
.modal input:focus, .modal select:focus, .modal textarea:focus { background: white; border-color: color-mix(in srgb, var(--primary) 48%, white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent); }
.clinical-visit-fields { border-radius: 16px; padding: 18px; background: linear-gradient(145deg, #fbfdfd, color-mix(in srgb, var(--primary) 3%, white)); }
.modal-backdrop { backdrop-filter: blur(5px); background: rgba(11,25,37,.38); }

.ai-fab {
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7661d4, #493991);
  box-shadow: 0 16px 38px rgba(74,57,145,.34), inset 0 1px rgba(255,255,255,.25);
}
.ai-fab:hover { transform: translateY(-4px) scale(1.015); }

.role-mode-banner, .portal-access-banner, .finance-ai-hero {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.financial-account-card, .finance-ai-kpis article, .report-card, .staff-card, .kanban-col, .setting-section {
  border-radius: var(--radius-lg);
}

.toast { border-radius: 16px; box-shadow: 0 18px 48px rgba(20,40,55,.18); }

.login-overlay {
  background:
    radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 25rem),
    radial-gradient(circle at 10% 90%, rgba(105,88,195,.18), transparent 28rem),
    linear-gradient(145deg, #0e1e2d, #172d3f);
}
.login-card { border: 1px solid rgba(255,255,255,.62); border-radius: 28px; box-shadow: 0 35px 100px rgba(2,13,22,.35); }

body.dark-mode {
  --bg: #0c141d;
  --white: #131f29;
  --ink: #dce6ec;
  --navy: #f2f7f9;
  --muted: #8fa0ad;
  --line: #24323d;
  --shadow: 0 18px 48px rgba(0,0,0,.22);
  --shadow-soft: 0 9px 26px rgba(0,0,0,.16);
}
body.dark-mode::before { opacity: .08; }
body.dark-mode .topbar { background: rgba(19,31,41,.82); border-color: #273641; }
body.dark-mode .card, body.dark-mode .stat-card, body.dark-mode .mini-stat, body.dark-mode .modal { background: rgba(19,31,41,.94); border-color: #263540; }
body.dark-mode .data-table th, body.dark-mode .table-footer, body.dark-mode .agenda-head { background: #17242e; }
body.dark-mode .modal header, body.dark-mode .clinical-visit-fields { background: #17242e; }

@media (max-width: 1100px) {
  :root { --sidebar: 238px; }
}

@media (max-width: 760px) {
  :root { --sidebar: 280px; }
  .sidebar { margin: 8px; height: calc(100vh - 16px); border-radius: 22px; }
  .main-content { margin-right: 0; }
  .topbar { height: 70px; margin: 8px 8px 0; padding: 0 12px; border-radius: 16px; }
  .page-wrap { padding: 26px 14px 80px; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 27px; }
  .card, .stat-card, .mini-stat { border-radius: 17px; }
}

@media (max-width: 470px) {
  .topbar { gap: 7px; }
  .page-wrap { padding-inline: 11px; }
  .stat-card { padding: 18px; }
  .page-heading { margin-bottom: 21px; }
  .btn { min-height: 42px; }
}

/* Futuristic clinical command center */
:root {
  --primary: #00d6c5;
  --primary-dark: #00a99e;
  --primary-soft: rgba(0, 214, 197, .11);
  --navy: #f1f7ff;
  --ink: #d7e4f4;
  --muted: #8296b3;
  --line: rgba(37, 125, 192, .28);
  --bg: #020b18;
  --white: #071527;
  --shadow: 0 20px 65px rgba(0, 0, 0, .38);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, .25);
}

html { color-scheme: dark; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -18%, rgba(0, 132, 255, .16), transparent 37rem),
    radial-gradient(circle at 6% 78%, rgba(91, 52, 210, .12), transparent 31rem),
    linear-gradient(135deg, #020816 0%, #031020 47%, #020817 100%);
}

body::before {
  opacity: 1;
  background:
    linear-gradient(rgba(0, 144, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 144, 255, .025) 1px, transparent 1px),
    repeating-linear-gradient(125deg, transparent 0 120px, rgba(0, 153, 255, .025) 121px 122px, transparent 123px 245px);
  background-size: 36px 36px, 36px 36px, auto;
  mask-image: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, #00aaff 0 1px, transparent 2px),
    radial-gradient(circle at 72% 35%, #00e7d2 0 1px, transparent 2px),
    radial-gradient(circle at 38% 74%, #7a5cff 0 1px, transparent 2px);
  background-size: 210px 190px, 280px 240px, 330px 270px;
  opacity: .32;
}

.sidebar {
  border: 1px solid rgba(0, 154, 255, .55);
  background:
    linear-gradient(180deg, rgba(6, 25, 47, .98), rgba(3, 15, 31, .98)),
    #06172b;
  box-shadow: inset 0 0 0 3px rgba(0, 117, 205, .08), 0 0 34px rgba(0, 112, 203, .14);
}

.sidebar::before, .topbar::before, .card::before, .stat-card::before, .mini-stat::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 8%, rgba(0, 203, 255, .45) 8% 14%, transparent 14% 86%, rgba(0, 203, 255, .35) 86% 92%, transparent 92%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 20%, rgba(0, 203, 255, .18), transparent 80%) bottom / 100% 1px no-repeat;
  opacity: .7;
}

.brand { border-color: rgba(0, 132, 226, .25); }
.brand-mark {
  color: #fff;
  background: radial-gradient(circle, rgba(36,255,235,.28), rgba(0,117,178,.2));
  border: 1px solid #00d9ff;
  box-shadow: 0 0 18px rgba(0, 223, 255, .4), inset 0 0 15px rgba(0, 211, 255, .18);
}
.brand strong { color: #5de9ff; text-shadow: 0 0 14px rgba(0, 205, 255, .28); }
.brand span { color: #8199b7; }
.nav-item { color: #8da3c5; }
.nav-item:hover { color: #dff8ff; background: rgba(0, 143, 224, .09); }
.nav-item.active {
  color: #baf8ff;
  border: 1px solid rgba(0, 219, 255, .65);
  background: linear-gradient(90deg, rgba(0, 193, 230, .18), rgba(0, 91, 170, .08));
  box-shadow: 0 0 20px rgba(0, 200, 255, .16), inset 0 0 18px rgba(0, 181, 255, .07);
}
.nav-count, .nav-count.accent, .ai-mini { background: #0b203a; color: #8eefff; border: 1px solid rgba(28,132,214,.22); }
.sidebar-footer { border-color: rgba(0, 132, 226, .2); background: rgba(0, 8, 20, .35); }

.topbar {
  position: sticky;
  overflow: visible;
  border: 1px solid rgba(0, 145, 235, .48);
  background: rgba(3, 15, 31, .84);
  box-shadow: inset 0 0 0 2px rgba(0, 111, 192, .05), 0 10px 38px rgba(0,0,0,.28), 0 0 25px rgba(0,119,204,.08);
  backdrop-filter: blur(24px) saturate(130%);
}

.topbar::before { z-index: -1; }
.search, .icon-btn, .branch-switch, .user-menu {
  color: #b9cae0;
  border-color: rgba(39, 113, 180, .36);
  background: rgba(5, 20, 40, .78);
  box-shadow: inset 0 0 18px rgba(0, 101, 190, .04);
}
.search:focus-within {
  background: rgba(3, 18, 37, .96);
  border-color: #00bdf5;
  box-shadow: 0 0 0 2px rgba(0,190,245,.09), 0 0 24px rgba(0,165,235,.16);
}
.search input { color: #dceaff; }
.search input::placeholder { color: #7489a7; }
.search kbd { color: #7186a4; border-color: #1d3c5d; background: #071326; }
.icon-btn:hover, .branch-switch:hover, .user-menu:hover { color: #e9fbff; border-color: #00a9e8; background: rgba(5,27,50,.94); box-shadow: 0 0 18px rgba(0,174,238,.13); }
.branch-icon, .avatar {
  color: #9af9ff;
  border: 1px solid rgba(0,211,255,.55);
  background: radial-gradient(circle, rgba(0,208,238,.2), rgba(4,34,64,.95));
  box-shadow: 0 0 16px rgba(0,205,255,.18), inset 0 0 13px rgba(0,183,255,.13);
}

.page-heading h1 { color: #eef5ff; text-shadow: 0 0 25px rgba(77,154,255,.12); }
.page-heading p { color: #8497b2; }
.eyebrow { color: #67e8f9; }
.eyebrow::before { background: #00e6d0; box-shadow: 0 0 10px #00e6d0, 0 0 0 4px rgba(0,230,208,.08); }

.btn.primary {
  color: #dffffc;
  border: 1px solid #00dacd;
  background: linear-gradient(135deg, rgba(0,202,192,.36), rgba(0,91,122,.48));
  box-shadow: 0 0 21px rgba(0,218,205,.2), inset 0 0 18px rgba(0,220,213,.08);
}
.btn.primary:hover { color: #fff; background: linear-gradient(135deg, rgba(0,230,215,.48), rgba(0,115,150,.54)); box-shadow: 0 0 30px rgba(0,231,216,.28); }
.btn.secondary {
  color: #9fc8e3;
  border-color: rgba(0,151,235,.52);
  background: rgba(3,24,45,.76);
}

.card, .stat-card, .mini-stat {
  position: relative;
  color: var(--ink);
  border: 1px solid rgba(0, 144, 235, .52);
  background:
    radial-gradient(circle at 90% 10%, rgba(0,138,255,.07), transparent 28%),
    linear-gradient(145deg, rgba(6,25,48,.94), rgba(3,15,31,.94));
  box-shadow: inset 0 0 28px rgba(0,89,168,.035), 0 15px 42px rgba(0,0,0,.24), 0 0 18px rgba(0,115,220,.055);
  backdrop-filter: blur(16px);
}
.card:hover, .mini-stat:hover { border-color: rgba(0,191,255,.72); }
.stat-card:nth-child(1) { border-color: rgba(0,230,195,.64); }
.stat-card:nth-child(2) { border-color: rgba(0,173,255,.72); }
.stat-card:nth-child(3) { border-color: rgba(126,89,255,.74); }
.stat-card:nth-child(4) { border-color: rgba(255,93,71,.64); }
.stat-card:nth-child(1)::after { background: rgba(0,230,195,.1); box-shadow: 0 0 40px rgba(0,230,195,.12); }
.stat-card:nth-child(2)::after { background: rgba(0,173,255,.1); box-shadow: 0 0 40px rgba(0,173,255,.12); }
.stat-card:nth-child(3)::after { background: rgba(126,89,255,.1); box-shadow: 0 0 40px rgba(126,89,255,.12); }
.stat-card:nth-child(4)::after { background: rgba(255,93,71,.09); box-shadow: 0 0 40px rgba(255,93,71,.1); }
.stat-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 28px rgba(0,104,190,.05), 0 20px 55px rgba(0,0,0,.34), 0 0 25px rgba(0,149,255,.12); }
.stat-label, .stat-note, .mini-stat span, .mini-stat small { color: #8395ae; }
.stat-value, .mini-stat strong { color: #e6efff; text-shadow: 0 0 17px rgba(113,166,255,.13); }
.mint { color: #00f0d0; background: rgba(0,219,190,.1); border: 1px solid rgba(0,219,190,.22); }
.blue { color: #18bfff; background: rgba(0,159,240,.11); border: 1px solid rgba(0,159,240,.22); }
.violet { color: #9e78ff; background: rgba(125,82,255,.12); border: 1px solid rgba(125,82,255,.22); }
.amber { color: #ffad4c; background: rgba(255,149,42,.1); border: 1px solid rgba(255,149,42,.22); }
.trend.up { color: #13f0bb; background: rgba(0,196,143,.1); border: 1px solid rgba(0,212,157,.2); }
.trend.down { color: #ff7966; background: rgba(255,91,69,.1); border: 1px solid rgba(255,91,69,.25); }

.card-header { border-color: rgba(36,96,146,.25); }
.card-header h2 { color: #eaf3ff; }
.card-header p { color: #7489a8; }
.appointment-row { border-color: rgba(31,83,128,.26); }
.appointment-row:hover { background: rgba(0,134,218,.055); }
.appointment-info strong, .doctor span > span { color: #d7e6f8; }
.appointment-info span, .doctor small { color: #758ba8; }

.data-table th { color: #8199b9; background: rgba(7,27,50,.92); border-color: rgba(32,91,142,.34); }
.data-table td { color: #b7c9df; border-color: rgba(28,73,113,.3); }
.data-table td strong { color: #e0ebf9; }
.data-table tbody tr:hover { background: rgba(0,145,225,.06); }
.table-footer, .finance-ai-analysis footer { color: #7890ae; background: rgba(4,19,36,.66); }
.module-search, .finance-control-strip select {
  color: #b8cae0;
  border-color: rgba(34,102,161,.4);
  background: rgba(2,15,31,.68);
}
.module-search input { color: #d3e2f4; }
.filter-chip, .today-chip {
  color: #8199b8;
  border-color: rgba(38,101,160,.42);
  background: rgba(5,21,40,.72);
}
.filter-chip:hover, .filter-chip.active, .today-chip { color: #6ff5e6; border-color: rgba(0,213,207,.56); background: rgba(0,191,183,.09); box-shadow: 0 0 14px rgba(0,212,205,.07); }

.schedule-toolbar { background: rgba(4,18,35,.87); }
.date-nav > button:not(.today-chip), .agenda-date input { color: #a8bed7; border-color: #1d537e; background: #05162a; }
.agenda-grid { background: #041225; border-color: rgba(0,151,235,.46); }
.agenda-head { color: #bcd7ed; background: linear-gradient(180deg, #081c34, #06162b); border-color: rgba(30,86,136,.4); }
.agenda-time { color: #66809e; }
.agenda-slot { border-color: rgba(25,70,111,.32); }
.agenda-slot:hover { background: rgba(0,197,223,.08); }
.agenda-event { background: rgba(0,161,130,.16); border-color: #00d6ae; box-shadow: 0 0 17px rgba(0,214,174,.11); }
.agenda-event strong { color: #a7f9e8; }
.agenda-event small { color: #78afa7; }
.agenda-event.purple { background: rgba(112,77,218,.2); border-color: #8f6eff; }
.agenda-event.orange { background: rgba(210,119,35,.18); border-color: #f2a34a; }

.smart-insight, .ai-report, .finance-ai-hero {
  border-color: rgba(127,82,255,.65);
  background:
    radial-gradient(circle at 15% 90%, rgba(112,60,223,.14), transparent 28%),
    linear-gradient(145deg, rgba(11,24,50,.96), rgba(7,16,37,.96));
  box-shadow: 0 0 26px rgba(119,78,243,.1), inset 0 0 24px rgba(105,66,227,.035);
}
.smart-insight h2, .ai-report h2, .finance-ai-heading h2 { color: #eef1ff; }
.smart-insight p, .ai-report p, .finance-ai-heading p { color: #8898b5; }
.ask-ai-btn, .ai-fab {
  border: 1px solid rgba(151,102,255,.7);
  background: linear-gradient(135deg, rgba(112,63,224,.55), rgba(70,38,157,.66));
  box-shadow: 0 0 23px rgba(126,76,245,.25), inset 0 0 16px rgba(165,111,255,.08);
}

.modal, .account-menu, .notification-panel, .ai-panel {
  color: #cbd9ea;
  border: 1px solid rgba(0,154,241,.55);
  background: rgba(4,17,33,.97);
  box-shadow: 0 25px 80px rgba(0,0,0,.55), 0 0 25px rgba(0,122,220,.1);
}
.modal header, .patient-drawer-head, .medical-alerts, .profile-tabs {
  background: rgba(6,24,44,.98);
  border-color: rgba(29,82,129,.35);
}
.modal h2, .patient-drawer-head h2 { color: #edf5ff; }
.modal label, .setting-body label { color: #aabdd3; }
.modal input, .modal select, .modal textarea, .clinical-fields textarea, .setting-body input, .setting-body select {
  color: #d4e3f4;
  border-color: rgba(36,103,163,.5);
  background: rgba(2,13,27,.78);
}
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #00c8ef; background: #04162b; box-shadow: 0 0 0 3px rgba(0,198,239,.09), 0 0 17px rgba(0,172,235,.1); }
.modal-backdrop { background: rgba(0,5,14,.7); backdrop-filter: blur(8px); }
.clinical-visit-fields, .invoice-summary-box, .finance-report-output { color: #b4c6da; border-color: rgba(37,99,155,.38); background: rgba(5,22,40,.78); }

.account-menu button:hover, .notification-item:hover { background: rgba(0,132,215,.08); }
.account-menu-head, .notification-head { border-color: rgba(29,83,132,.35); }
.account-menu-head strong, .notification-head strong, .notification-item strong { color: #e1ecfa; }

.login-overlay {
  background:
    radial-gradient(circle at 50% 15%, rgba(0,137,255,.19), transparent 29rem),
    radial-gradient(circle at 8% 90%, rgba(104,58,224,.17), transparent 28rem),
    linear-gradient(145deg, #010713, #031329);
}
.login-card {
  color: #d7e4f4;
  border-color: rgba(0,160,245,.55);
  background: rgba(5,20,39,.95);
  box-shadow: 0 35px 100px rgba(0,0,0,.55), 0 0 35px rgba(0,120,220,.12);
}
.login-heading h2, .login-brand strong { color: #eff7ff; }
.login-field { color: #bed0e3; border-color: rgba(36,103,163,.5); background: rgba(2,13,27,.78); }
.login-field input { color: #e0edfb; }

.portal-menu button, .portal-appointment, .kanban-col article, .schedule-event, .setting-toggle, .ai-report-buttons button, .finance-chat-message p {
  color: #b9cbe0;
  border-color: rgba(34,92,145,.4);
  background: rgba(5,22,40,.82);
}
.portal-menu strong, .portal-appointment strong, .schedule-event strong, .financial-account-card h3, .financial-account-card strong { color: #e0ebf8; }

.status.confirmed { color: #20e7b1; background: rgba(0,190,139,.11); border: 1px solid rgba(0,218,158,.2); }
.status.waiting { color: #ffc268; background: rgba(255,155,39,.1); border: 1px solid rgba(255,168,55,.2); }
.status.arrived { color: #51c9ff; background: rgba(0,157,229,.11); border: 1px solid rgba(0,173,246,.2); }
.status.unconfirmed { color: #ff806e; background: rgba(255,91,70,.1); border: 1px solid rgba(255,91,70,.2); }

.clinic-status span { background: #00e6c7; box-shadow: 0 0 9px #00e6c7, 0 0 0 3px rgba(0,230,199,.1); }

body.light-mode {
  --navy: #122033;
  --ink: #263548;
  --muted: #718096;
  --line: #e4eaf0;
  --bg: #f3f6fa;
  --white: #fff;
  color-scheme: light;
  color: var(--ink);
  background: #f3f6fa;
}
body.light-mode::before, body.light-mode::after { opacity: .08; }
body.light-mode .card, body.light-mode .stat-card, body.light-mode .mini-stat,
body.light-mode .topbar, body.light-mode .modal, body.light-mode .account-menu,
body.light-mode .notification-panel, body.light-mode .ai-panel {
  color: var(--ink);
  border-color: #dce5ec;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-soft);
}
body.light-mode .page-heading h1, body.light-mode .stat-value, body.light-mode .mini-stat strong,
body.light-mode .card-header h2, body.light-mode .modal h2, body.light-mode .data-table td strong { color: #122033; text-shadow: none; }
body.light-mode .data-table th, body.light-mode .table-footer, body.light-mode .agenda-head { color: #617187; background: #f6f8fa; }
body.light-mode .data-table td { color: #526276; border-color: #edf1f4; }
body.light-mode .search, body.light-mode .icon-btn, body.light-mode .branch-switch, body.light-mode .user-menu,
body.light-mode .module-search, body.light-mode .filter-chip, body.light-mode .today-chip,
body.light-mode .modal input, body.light-mode .modal select, body.light-mode .modal textarea {
  color: #34465a;
  border-color: #dfe6ec;
  background: #fff;
}
body.light-mode .agenda-grid { background: white; border-color: #dfe7ed; }
body.light-mode .agenda-slot { border-color: #edf1f4; }

@media (max-width: 760px) {
  .sidebar { box-shadow: 0 0 45px rgba(0,112,203,.22); }
  .topbar { background: rgba(3,15,31,.94); }
  body.light-mode .topbar { background: rgba(255,255,255,.94); }
}

/* Character assets, clearer type, and soft motion */
body {
  font-weight: 500;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.page-heading p, .card-header p, .stat-note, .mini-stat small,
.appointment-info span, .doctor small, .data-table td, .setting-note {
  color: #91a5c0;
}

.nav-item, .btn, .filter-chip, .today-chip, .data-table th { letter-spacing: 0; }
.card-header h2, .page-heading h1, .stat-value, .mini-stat strong { font-weight: 800; }

.avatar {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,211,255,.58);
}
.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 36%;
  transform: scale(1.08);
}
.avatar b {
  font-size: 13px;
  color: #a9fbff;
}
.avatar.photo-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,201,255,.08), 0 0 18px rgba(0,202,255,.25);
}
.avatar.photo-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 9px rgba(0,219,255,.18);
}
.table-avatar img, .role-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}
.user-menu .avatar { cursor: pointer; }
.user-menu .avatar:hover { box-shadow: 0 0 0 3px rgba(0,218,255,.13), 0 0 24px rgba(0,210,255,.34); }

.avatar-modal { width: min(590px, calc(100vw - 30px)); }
.avatar-editor {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: center;
  padding: 17px;
  border: 1px solid rgba(41,105,164,.42);
  border-radius: 18px;
  background: rgba(4,19,37,.72);
}
.avatar-preview {
  width: 132px;
  height: 132px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,210,255,.64);
  border-radius: 50%;
  color: #b7faff;
  background: radial-gradient(circle, rgba(0,190,220,.17), rgba(5,24,45,.95));
  box-shadow: 0 0 0 5px rgba(0,198,235,.06), 0 0 25px rgba(0,193,235,.18);
  font-size: 42px;
  font-weight: 800;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-copy strong { display: block; color: #edf6ff; font-size: 16px; }
.avatar-editor-copy p { margin: 7px 0 15px; color: #8fa4bf; font-size: 12px; line-height: 1.75; }
.avatar-file-button { width: fit-content; cursor: pointer; }
.avatar-error { min-height: 22px; padding-top: 9px; color: #ff806e; font-size: 11px; }
.avatar-modal button:disabled { opacity: .5; cursor: not-allowed; }
body.light-mode .avatar-editor { border-color: #dfe7ed; background: #f7f9fb; }
body.light-mode .avatar-editor-copy strong { color: #17283a; }
body.light-mode .avatar-editor-copy p { color: #718096; }

@media (max-width: 520px) {
  .avatar-editor { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .avatar-file-button { margin-inline: auto; }
  .avatar-modal .modal-actions { flex-wrap: wrap; }
}

.ai-fab {
  width: 112px;
  height: 118px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-direction: column;
  gap: 0;
}
.ai-fab:hover {
  background: transparent;
  box-shadow: none;
  transform: translateY(-5px) scale(1.025);
}
.robot-glow {
  position: relative;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
  filter: drop-shadow(0 0 14px rgba(84,112,255,.45));
  animation: robotFloat 4s ease-in-out infinite;
}
.robot-glow::before, .robot-glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(123,87,255,.56);
}
.robot-glow::before {
  inset: 6px;
  box-shadow: 0 0 20px rgba(119,78,255,.34), inset 0 0 16px rgba(0,210,255,.16);
  animation: robotPulse 2.6s ease-out infinite;
}
.robot-glow::after {
  inset: 17px;
  border-color: rgba(0,222,255,.5);
  animation: robotSpin 9s linear infinite;
}
.robot-glow img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.ai-fab .fab-label {
  min-height: 28px;
  padding: 6px 12px;
  border: 1px solid rgba(137,91,255,.64);
  border-radius: 14px;
  color: #e9e3ff;
  background: linear-gradient(90deg, rgba(91,48,186,.88), rgba(53,27,125,.9));
  box-shadow: 0 0 18px rgba(115,68,235,.27), inset 0 0 10px rgba(177,132,255,.08);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.ai-fab .fab-label i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #5fffe9;
  box-shadow: 0 0 8px #5fffe9;
  animation: onlineBlink 1.8s ease-in-out infinite;
}

.robot-orb, .bot-mini {
  overflow: hidden;
  border: 1px solid rgba(120,82,255,.58);
  background: radial-gradient(circle, rgba(98,61,207,.3), rgba(7,18,40,.92));
  box-shadow: 0 0 15px rgba(113,76,236,.2);
}
.robot-orb img, .bot-mini img {
  width: 125%;
  height: 125%;
  object-fit: contain;
}
.robot-orb { border-radius: 50%; }
.bot-mini { border-radius: 50%; }

.ai-panel {
  width: min(420px, 100vw);
  border-right: 1px solid rgba(0,163,245,.56);
  background:
    radial-gradient(circle at 20% 5%, rgba(103,60,220,.14), transparent 27%),
    linear-gradient(180deg, rgba(5,19,39,.99), rgba(2,12,27,.99));
}
.ai-header {
  position: relative;
  overflow: hidden;
  padding: 18px;
  color: #eef5ff;
  border-bottom: 1px solid rgba(83,86,211,.45);
  background:
    radial-gradient(circle at 18% 20%, rgba(125,73,248,.25), transparent 32%),
    linear-gradient(135deg, #101c46, #291963);
}
.ai-header::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9b6dff, #15d9ff, transparent);
  box-shadow: 0 0 12px #7a55ff;
}
.ai-title strong { color: #f1f4ff; font-size: 16px; }
.ai-title small { color: #9dadd0; font-size: 10px; }
.ai-title small i { background: #42f5cf; box-shadow: 0 0 8px #42f5cf; animation: onlineBlink 1.8s ease-in-out infinite; }
.ai-context {
  height: 42px;
  color: #91a7c6;
  border-color: rgba(39,83,132,.38);
  background: rgba(5,20,39,.92);
  font-size: 10px;
}
.chat-messages { background: rgba(2,12,27,.82); }
.message > div {
  color: #c6d6e8;
  border-color: rgba(38,91,145,.4);
  background: rgba(7,26,47,.92);
  box-shadow: 0 7px 20px rgba(0,0,0,.16);
}
.message.user > div { color: #fff; background: linear-gradient(135deg, #6044ba, #3c2a86); }
.message p { font-size: 13px; line-height: 1.75; }
.message small { color: #7288a6; font-size: 10px; }
.suggestions button { color: #bbaaff; border-color: rgba(130,91,229,.42); background: rgba(73,43,145,.16); }
.suggestions button:hover { color: white; border-color: #9470ff; background: rgba(101,63,195,.28); }
.chat-input { border-color: rgba(47,98,151,.52); background: rgba(4,18,35,.9); }
.chat-input:focus-within { border-color: #8b67ef; box-shadow: 0 0 0 3px rgba(130,91,229,.1), 0 0 18px rgba(112,72,221,.1); }
.chat-input textarea { color: #d8e5f5; background: transparent; }
.chat-input textarea::placeholder { color: #6f84a1; }
.send-btn { background: linear-gradient(135deg, #7955df, #45309b); box-shadow: 0 0 14px rgba(121,85,223,.24); }
.ai-footer { color: #657994; font-size: 9px; }

body.light-mode .ai-panel, body.light-mode .chat-messages { background: #f7f9fc; }
body.light-mode .ai-header { background: linear-gradient(135deg, #5d47ad, #7660ca); }
body.light-mode .ai-context { color: #6c6097; background: #f1eefb; }
body.light-mode .message > div { color: #3f5063; border-color: #e0e6ec; background: white; }
body.light-mode .chat-input { border-color: #dce4eb; background: white; }
body.light-mode .chat-input textarea { color: #34465a; }

.stat-icon, .action-icon, .nav-icon, .branch-icon,
.financial-account-card header span, .automation-icon {
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.stat-card:hover .stat-icon, .action-grid button:hover .action-icon,
.nav-item:hover .nav-icon {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.14);
}

.card, .stat-card, .mini-stat, .topbar, .sidebar {
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

@keyframes robotFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}
@keyframes robotPulse {
  0% { transform: scale(.9); opacity: .85; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}
@keyframes robotSpin { to { transform: rotate(360deg); } }
@keyframes onlineBlink {
  0%, 100% { opacity: .5; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes workflowFocusPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 32%, transparent); }
  35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 14%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

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

@media (max-width: 760px) {
  .ai-fab { width: 82px; height: 91px; left: 8px; bottom: 10px; }
  .robot-glow { width: 70px; height: 70px; }
  .robot-glow img { width: 98px; height: 98px; }
  .ai-fab .fab-label { min-height: 23px; padding: 4px 8px; font-size: 9px; }
}

@media (max-width: 470px) {
  .ai-fab { display: flex; width: 86px; height: 94px; }
  .robot-glow { width: 70px; height: 70px; }
  .robot-glow img { width: 100px; height: 100px; }
  .ai-fab .fab-label { display: block; min-width: 76px; padding: 4px 7px; font-size: 8px; }
}

/* Polished light theme: calm clinical surfaces with balanced technology accents */
body.light-mode {
  --navy: #14263a;
  --ink: #314257;
  --muted: #6f8196;
  --line: #dfe7ee;
  --bg: #f2f6fa;
  --white: #fff;
  --shadow: 0 18px 46px rgba(35, 59, 82, .11);
  --shadow-soft: 0 8px 25px rgba(35, 59, 82, .075);
  background:
    radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 31rem),
    radial-gradient(circle at 4% 68%, rgba(108, 84, 205, .055), transparent 28rem),
    linear-gradient(145deg, #f7f9fc 0%, #eef4f8 54%, #f5f8fb 100%);
}

body.light-mode::before {
  opacity: .38;
  background:
    linear-gradient(rgba(52, 104, 143, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 104, 143, .035) 1px, transparent 1px);
  background-size: 38px 38px;
}
body.light-mode::after { opacity: .05; }

body.light-mode .sidebar {
  color: white;
  border-color: #203f5b;
  background:
    radial-gradient(circle at 14% 0, color-mix(in srgb, var(--primary) 25%, transparent), transparent 34%),
    linear-gradient(165deg, #18344c 0%, #122a40 52%, #0d2134 100%);
  box-shadow: 0 22px 58px rgba(22, 49, 72, .2);
}
body.light-mode .sidebar::before { opacity: .35; }
body.light-mode .brand { border-color: rgba(255,255,255,.09); }
body.light-mode .brand strong { color: #fff; }
body.light-mode .brand span, body.light-mode .clinic-status { color: rgba(225,237,245,.62); }
body.light-mode .nav-item { color: rgba(221,234,243,.72); }
body.light-mode .nav-item:hover { color: #fff; background: rgba(255,255,255,.075); }
body.light-mode .nav-item.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 65%, white);
  background: linear-gradient(95deg, color-mix(in srgb, var(--primary) 63%, transparent), color-mix(in srgb, var(--primary) 22%, transparent));
  box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 1px rgba(255,255,255,.14);
}
body.light-mode .nav-count, body.light-mode .nav-count.accent, body.light-mode .ai-mini {
  color: #dffcff;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.1);
}
body.light-mode .sidebar-footer { border-color: rgba(255,255,255,.09); background: rgba(2,13,23,.12); }

body.light-mode .topbar {
  border-color: rgba(210,222,232,.95);
  background: rgba(255,255,255,.84);
  box-shadow: 0 11px 34px rgba(39,62,84,.075);
  backdrop-filter: blur(22px) saturate(145%);
}
body.light-mode .topbar::before { opacity: .18; }
body.light-mode .search,
body.light-mode .icon-btn,
body.light-mode .branch-switch,
body.light-mode .user-menu {
  color: #52667b;
  border-color: #dce5ec;
  background: rgba(248,250,252,.94);
  box-shadow: 0 3px 10px rgba(35,55,75,.035);
}
body.light-mode .search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 45%, #cfdbe4);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 9%, transparent);
}
body.light-mode .search input { color: #2f4358; }
body.light-mode .search input::placeholder { color: #8998a8; }
body.light-mode .search kbd { color: #7d8b99; border-color: #dbe3e9; background: #fff; }
body.light-mode .icon-btn:hover,
body.light-mode .branch-switch:hover,
body.light-mode .user-menu:hover { color: #1f3b52; border-color: #c9d8e3; background: white; box-shadow: var(--shadow-soft); }

body.light-mode .page-heading h1 { color: #14263a; }
body.light-mode .page-heading p,
body.light-mode .card-header p,
body.light-mode .stat-note,
body.light-mode .mini-stat small,
body.light-mode .appointment-info span,
body.light-mode .doctor small,
body.light-mode .setting-note { color: #74869a; }
body.light-mode .eyebrow { color: color-mix(in srgb, var(--primary-dark) 78%, #23445a); }

body.light-mode .card,
body.light-mode .stat-card,
body.light-mode .mini-stat {
  color: #314257;
  border-color: rgba(215,225,233,.96);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-soft);
}
body.light-mode .card::before,
body.light-mode .stat-card::before,
body.light-mode .mini-stat::before { opacity: .12; }
body.light-mode .card:hover,
body.light-mode .mini-stat:hover { border-color: color-mix(in srgb, var(--primary) 22%, #d4dee7); }

body.light-mode .stat-card:nth-child(1) { border-top: 3px solid #24b69d; }
body.light-mode .stat-card:nth-child(2) { border-top: 3px solid #3a9ed2; }
body.light-mode .stat-card:nth-child(3) { border-top: 3px solid #8168cf; }
body.light-mode .stat-card:nth-child(4) { border-top: 3px solid #de7a62; }
body.light-mode .stat-card:nth-child(1)::after { background: rgba(36,182,157,.085); box-shadow: none; }
body.light-mode .stat-card:nth-child(2)::after { background: rgba(58,158,210,.085); box-shadow: none; }
body.light-mode .stat-card:nth-child(3)::after { background: rgba(129,104,207,.085); box-shadow: none; }
body.light-mode .stat-card:nth-child(4)::after { background: rgba(222,122,98,.075); box-shadow: none; }
body.light-mode .stat-value,
body.light-mode .mini-stat strong { color: #172b40; text-shadow: none; }
body.light-mode .stat-label,
body.light-mode .mini-stat span { color: #65788d; }
body.light-mode .trend.up { color: #128464; border-color: #c5eadf; background: #eaf8f3; }
body.light-mode .trend.down { color: #bd5847; border-color: #f1d2cc; background: #fff1ee; }

body.light-mode .btn.primary {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, #4f9db8), var(--primary-dark));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.light-mode .btn.secondary {
  color: #516579;
  border-color: #d8e2e9;
  background: #fff;
}

body.light-mode .card-header { border-color: #e9eef2; }
body.light-mode .card-header h2,
body.light-mode .financial-account-card h3,
body.light-mode .financial-account-card strong,
body.light-mode .portal-menu strong,
body.light-mode .portal-appointment strong,
body.light-mode .schedule-event strong { color: #1c3247; }
body.light-mode .appointment-row { border-color: #edf1f4; }
body.light-mode .appointment-row:hover { background: #f6fbfa; }
body.light-mode .appointment-info strong,
body.light-mode .doctor span > span { color: #334a60; }

body.light-mode .table-toolbar,
body.light-mode .schedule-toolbar { background: rgba(255,255,255,.9); }
body.light-mode .module-search,
body.light-mode .finance-control-strip select {
  color: #4a6075;
  border-color: #dce5eb;
  background: #f7f9fb;
}
body.light-mode .module-search input { color: #31465b; }
body.light-mode .filter-chip,
body.light-mode .today-chip {
  color: #66798d;
  border-color: #dce4ea;
  background: #fff;
}
body.light-mode .filter-chip:hover,
body.light-mode .filter-chip.active,
body.light-mode .today-chip {
  color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 25%, #d7e1e8);
  background: color-mix(in srgb, var(--primary) 8%, white);
  box-shadow: none;
}
body.light-mode .data-table th {
  color: #60758a;
  border-color: #e4ebf0;
  background: #f4f7f9;
}
body.light-mode .data-table td { color: #52667a; border-color: #edf1f4; }
body.light-mode .data-table td strong { color: #263d52; }
body.light-mode .data-table tbody tr:hover { background: #f4faf9; }
body.light-mode .table-footer,
body.light-mode .finance-ai-analysis footer { color: #74869a; background: #fafcfd; }

body.light-mode .agenda-grid { border-color: #dce6ed; background: #fff; }
body.light-mode .agenda-head { color: #4a6176; border-color: #e2e9ee; background: linear-gradient(180deg, #f7f9fb, #f1f5f8); }
body.light-mode .agenda-time { color: #7d8e9f; }
body.light-mode .agenda-slot { border-color: #edf1f4; }
body.light-mode .agenda-slot:hover { background: color-mix(in srgb, var(--primary) 7%, white); }
body.light-mode .agenda-event { background: #e8f7f2; border-color: #2db497; box-shadow: 0 6px 14px rgba(37,150,124,.1); }
body.light-mode .agenda-event strong { color: #246e5f; }
body.light-mode .agenda-event small { color: #62897f; }
body.light-mode .agenda-event.purple { background: #f0edfb; border-color: #8068ca; }
body.light-mode .agenda-event.orange { background: #fff2e2; border-color: #d9943c; }

body.light-mode .smart-insight,
body.light-mode .ai-report,
body.light-mode .finance-ai-hero {
  border-color: #ddd5f5;
  background:
    radial-gradient(circle at 10% 100%, rgba(119,86,211,.075), transparent 30%),
    linear-gradient(145deg, #fff, #f8f6ff);
  box-shadow: 0 10px 28px rgba(89,68,161,.075);
}
body.light-mode .smart-insight h2,
body.light-mode .ai-report h2,
body.light-mode .finance-ai-heading h2 { color: #2d2850; }
body.light-mode .smart-insight p,
body.light-mode .ai-report p,
body.light-mode .finance-ai-heading p { color: #756f90; }

body.light-mode .modal,
body.light-mode .account-menu,
body.light-mode .notification-panel {
  color: #35495d;
  border-color: #d9e3ea;
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 75px rgba(29,51,72,.18);
}
body.light-mode .modal header,
body.light-mode .patient-drawer-head,
body.light-mode .medical-alerts,
body.light-mode .profile-tabs {
  border-color: #e7edf2;
  background: #fbfcfd;
}
body.light-mode .modal h2,
body.light-mode .patient-drawer-head h2 { color: #192f44; }
body.light-mode .modal label,
body.light-mode .setting-body label { color: #52677b; }
body.light-mode .modal input,
body.light-mode .modal select,
body.light-mode .modal textarea,
body.light-mode .clinical-fields textarea,
body.light-mode .setting-body input,
body.light-mode .setting-body select {
  color: #354a5e;
  border-color: #dbe4eb;
  background: #f9fbfc;
}
body.light-mode .modal input:focus,
body.light-mode .modal select:focus,
body.light-mode .modal textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 48%, #cfdbe3);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 9%, transparent);
}
body.light-mode .clinical-visit-fields,
body.light-mode .invoice-summary-box,
body.light-mode .finance-report-output {
  color: #526679;
  border-color: #dce6ec;
  background: #f8fbfc;
}

body.light-mode .portal-menu button,
body.light-mode .portal-appointment,
body.light-mode .kanban-col article,
body.light-mode .schedule-event,
body.light-mode .setting-toggle,
body.light-mode .ai-report-buttons button,
body.light-mode .finance-chat-message p {
  color: #52677b;
  border-color: #dce5eb;
  background: #fff;
}

body.light-mode .status.confirmed { color: #137b5d; border-color: #c7eadf; background: #eaf8f3; }
body.light-mode .status.waiting { color: #a96b1f; border-color: #f0dfc2; background: #fff7e9; }
body.light-mode .status.arrived { color: #2678a7; border-color: #cfe5f1; background: #edf7fc; }
body.light-mode .status.unconfirmed { color: #b95748; border-color: #f0d3ce; background: #fff1ef; }

body.light-mode .avatar-preview {
  color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 38%, #d5e1e8);
  background: color-mix(in srgb, var(--primary) 7%, white);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 5%, transparent);
}

body.light-mode .ai-fab .fab-label {
  color: #fff;
  border-color: rgba(101,71,195,.42);
  background: linear-gradient(90deg, #6f53c5, #4f399d);
}

/* Procurement center */
#suppliers .page-heading { align-items:center; }
#suppliers .heading-actions { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
#suppliers .heading-actions .btn { min-height:40px;font-size:13px; }
.procurement-tabs { display:flex;gap:7px;margin:2px 0 15px;padding:6px;border:1px solid rgba(54,116,168,.27);border-radius:15px;background:rgba(5,23,43,.55);overflow-x:auto; }
.procurement-tabs button { min-height:39px;padding:0 15px;border:1px solid transparent;border-radius:10px;background:transparent;color:#91a7c2;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer; }
.procurement-tabs button:hover,.procurement-tabs button.active { color:#dcfaff;border-color:rgba(0,211,225,.34);background:linear-gradient(135deg,rgba(0,184,213,.16),rgba(82,73,204,.12));box-shadow:inset 0 0 18px rgba(0,191,220,.06); }
.procurement-tabs span { display:inline-grid;min-width:22px;height:22px;margin-inline-start:5px;padding:0 5px;place-items:center;border-radius:12px;background:rgba(0,202,211,.13);font-size:11px; }
.procurement-pane { display:none; }
.procurement-pane.active { display:block;animation:procPaneIn .18s ease; }
@keyframes procPaneIn { from{opacity:.35;transform:translateY(4px)} to{opacity:1;transform:none} }
.procurement-pane .table-toolbar>div:first-child strong,.procurement-pane .table-toolbar>div:first-child small { display:block; }
.procurement-pane .table-toolbar>div:first-child strong { color:var(--navy);font-size:16px; }
.procurement-pane .table-toolbar>div:first-child small { margin-top:4px;color:var(--muted);font-size:12px; }
.procurement-table { min-width:1050px; }
.procurement-table th { font-size:13px; }
.procurement-table td,.procurement-table td strong { font-size:14px; }
.procurement-table .cell-note,.supplier-contact small { margin-top:5px;font-size:12px;line-height:1.5; }
.procurement-table .row-action { min-height:32px;padding:6px 10px;font-size:12px;font-weight:700; }
.proc-progress { width:90px;height:7px;border-radius:10px;background:rgba(116,144,174,.18);overflow:hidden; }
.proc-progress i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00d8c8,#139de8);box-shadow:0 0 10px rgba(0,216,200,.32); }
.empty-table { padding:32px!important;text-align:center;color:var(--muted)!important; }
.supplier-performance-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px; }
.supplier-performance-card { padding:18px; }
.supplier-performance-card header { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px; }
.supplier-performance-card header strong,.supplier-performance-card header small { display:block; }
.supplier-performance-card header strong { color:var(--navy);font-size:16px; }
.supplier-performance-card header small { margin-top:4px;color:var(--muted);font-size:12px; }
.supplier-performance-card header>span { color:#f0b94a;font-size:13px;direction:ltr; }
.supplier-performance-card>div { display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px; }
.supplier-performance-card>div b { color:var(--navy);font-size:14px; }
.supplier-performance-card footer { padding-top:12px;color:var(--primary);font-size:12px;font-weight:700; }
.procurement-guidance { overflow:hidden; }
.quality-checks { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); }
.quality-checks>div { display:flex;align-items:center;gap:10px;padding:17px;background:var(--white); }
.quality-checks b { width:39px;height:39px;display:grid;place-items:center;border-radius:10px;color:#57f5e0;border:1px solid rgba(0,210,198,.35);background:rgba(0,210,198,.08);font-size:12px; }
.quality-checks span { color:var(--text);font-size:13px;line-height:1.5; }
.procurement-modal { max-height:90vh;overflow-y:auto; }
.wide-modal { width:min(850px,calc(100vw - 30px)); }
.purchase-items-head { display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px; }
.purchase-items-head strong { color:var(--navy);font-size:14px; }
.purchase-items { display:grid;gap:8px; }
.purchase-item-row { display:grid;grid-template-columns:2fr 1fr .7fr .75fr .8fr 34px;gap:7px;align-items:end;padding:9px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025); }
.purchase-item-row input { margin:0!important;min-width:0; }
.remove-purchase-item { width:34px;height:44px;border:1px solid rgba(231,99,99,.28);border-radius:10px;color:#ff8c88;background:rgba(231,99,99,.08);font-size:19px;cursor:pointer; }
.purchase-total { display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:14px 16px;border:1px solid rgba(0,210,198,.28);border-radius:12px;background:rgba(0,210,198,.06); }
.purchase-total span { color:var(--muted);font-size:13px; }
.purchase-total strong { color:#63f6e2;font-size:20px; }
.receive-items { display:grid;gap:9px;margin:10px 0 14px; }
.receive-item-row { display:grid;grid-template-columns:minmax(180px,1.5fr) .55fr .8fr .9fr;gap:8px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:12px; }
.receive-item-row>div strong,.receive-item-row>div small { display:block; }
.receive-item-row>div strong { color:var(--navy);font-size:14px; }
.receive-item-row>div small { margin-top:5px;color:var(--muted);font-size:12px; }
.receive-item-row label { margin:0; }
.quality-notice { display:flex;gap:12px;padding:13px 15px;border:1px solid rgba(240,185,74,.3);border-radius:12px;color:#e8bc68;background:rgba(240,185,74,.07); }
.quality-notice strong { white-space:nowrap;font-size:13px; }
.quality-notice span { color:var(--muted);font-size:12px;line-height:1.6; }
.empty-state { margin:0;padding:22px;text-align:center;color:var(--muted);font-size:13px; }

/* Comfortable production typography */
.data-table th { font-size:13px; }
.data-table td,.data-table td strong { font-size:14px; }
.data-table .cell-note { font-size:12px; }
.modal label { font-size:14px; }
.modal input,.modal select,.modal textarea { font-size:14px; }
.filter-chip,.today-chip,.row-action { font-size:13px; }
.card-header h2 { font-size:16px; }
.card-header p { font-size:12px; }

body.light-mode .procurement-tabs { border-color:#d7e2ea;background:#f7fafc; }
body.light-mode .procurement-tabs button { color:#60758b; }
body.light-mode .procurement-tabs button:hover,body.light-mode .procurement-tabs button.active { color:#147b75;border-color:#b9e4df;background:#eaf8f6;box-shadow:none; }
body.light-mode .quality-checks>div { background:#fff; }
body.light-mode .purchase-item-row,body.light-mode .receive-item-row { background:#f9fbfc; }
body.light-mode .purchase-total { background:#eefaf8; }
body.light-mode .purchase-total strong { color:#137d72; }

@media (max-width:1100px) {
  #suppliers .page-heading { align-items:flex-start; }
  #suppliers .heading-actions { justify-content:flex-start; }
  .supplier-performance-grid { grid-template-columns:repeat(2,1fr); }
  .quality-checks { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  #suppliers .heading-actions .btn { flex:1 1 calc(50% - 8px); }
  .supplier-performance-grid,.quality-checks { grid-template-columns:1fr; }
  .purchase-item-row { grid-template-columns:1fr 1fr; }
  .purchase-item-row .purchase-item-name { grid-column:1/-1; }
  .remove-purchase-item { width:100%;grid-column:1/-1; }
  .receive-item-row { grid-template-columns:1fr 1fr; }
  .receive-item-row>div { grid-column:1/-1; }
}

.subscription-center { margin-top: 14px; }
.subscription-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:13px;padding:4px 2px; }
.subscription-heading h2 { margin:2px 0 5px;color:var(--navy);font-size:18px; }
.subscription-heading>div>p:last-child { margin:0;color:var(--muted);font-size:9px;line-height:1.7; }
.billing-cycle { display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);white-space:nowrap; }
.billing-cycle button { border:0;border-radius:8px;padding:8px 13px;background:transparent;color:var(--muted);font:inherit;font-size:8px;cursor:pointer; }
.billing-cycle button.active { color:white;background:var(--primary);box-shadow:0 7px 20px color-mix(in srgb,var(--primary) 28%,transparent); }
.billing-cycle span { margin-inline-start:4px;padding:2px 5px;border-radius:8px;background:rgba(255,255,255,.18);font-size:6px; }
.current-subscription { display:grid;grid-template-columns:auto minmax(230px,1fr) minmax(300px,1.3fr) auto;align-items:center;gap:16px;padding:16px 18px;margin-bottom:13px;border-color:color-mix(in srgb,var(--primary) 38%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 10%,var(--card)),var(--card)); }
.current-plan-mark { width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:white;background:linear-gradient(145deg,var(--primary),#604ed2);box-shadow:0 9px 28px color-mix(in srgb,var(--primary) 28%,transparent);font-size:10px;font-weight:800; }
.current-subscription span,.current-subscription strong,.current-subscription small { display:block; }
.current-subscription>div:nth-child(2)>span { color:var(--primary);font-size:7px;font-weight:700; }
.current-subscription>div:nth-child(2)>strong { margin:3px 0;color:var(--navy);font-size:11px; }
.current-subscription>div:nth-child(2)>small { color:var(--muted);font-size:7px; }
.subscription-usage { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.subscription-usage span { padding:8px;border:1px solid var(--line);border-radius:8px;text-align:center;color:var(--muted);font-size:7px;background:rgba(255,255,255,.025); }
.subscription-usage b { color:var(--navy);font-size:9px; }
.pricing-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch; }
.pricing-card { position:relative;display:flex;flex-direction:column;padding:18px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s; }
.pricing-card:hover { transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 38%,var(--line));box-shadow:0 18px 45px rgba(7,23,43,.16); }
.pricing-card.recommended { border-color:color-mix(in srgb,var(--primary) 62%,var(--line));box-shadow:0 15px 42px color-mix(in srgb,var(--primary) 13%,transparent); }
.recommended-label { position:absolute;inset-inline-end:0;top:0;padding:6px 11px;border-radius:0 0 0 10px;color:white;background:var(--primary);font-size:7px;font-weight:700; }
.plan-icon { width:31px;height:31px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line));border-radius:9px;display:grid;place-items:center;margin-bottom:12px;color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);font-size:8px;font-weight:800; }
.plan-audience { color:var(--primary);font-size:7px;font-weight:700; }
.pricing-card h3 { margin:4px 0;color:var(--navy);font-size:15px; }
.pricing-card>p { min-height:34px;margin:0 0 11px;color:var(--muted);font-size:8px;line-height:1.7; }
.plan-price { display:flex;align-items:flex-end;gap:6px;padding:11px 0;border-top:1px solid var(--line); }
.plan-price strong { color:var(--navy);font-size:24px;line-height:1; }
.enterprise .plan-price strong { font-size:17px; }
.plan-price span { color:var(--muted);font-size:7px; }
.annual-note { min-height:13px;color:var(--muted);font-size:6px;visibility:hidden; }
.pricing-card ul { flex:1;list-style:none;padding:10px 0;margin:0; }
.pricing-card li { position:relative;padding:6px 18px 6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--text);font-size:7px; }
.pricing-card li:before { content:"✓";position:absolute;right:0;color:var(--primary);font-weight:800; }
.pricing-card .btn { width:100%;margin-top:10px; }
.subscription-policy { display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:13px;margin-top:12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:7px; }
.subscription-policy span:before { color:var(--primary); }

body.light-mode .billing-cycle { background:#f5f8fa; }
body.light-mode .current-subscription { background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 7%,white),white); }
body.light-mode .subscription-usage span { background:#f8fafb; }
body.light-mode .pricing-card:hover { box-shadow:0 18px 45px rgba(29,51,72,.12); }

@media (max-width: 760px) {
  body.light-mode .topbar { background: rgba(255,255,255,.95); }
}

@media (max-width: 1180px) {
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .current-subscription { grid-template-columns:auto 1fr auto; }
  .subscription-usage { grid-column:1/-1; }
}

@media (max-width: 700px) {
  .subscription-heading { align-items:stretch;flex-direction:column; }
  .billing-cycle { align-self:flex-start; }
  .pricing-grid { grid-template-columns:1fr; }
  .current-subscription { grid-template-columns:auto 1fr; }
  .current-subscription>.btn { grid-column:1/-1;width:100%; }
}

/* Responsive hardening: phones and portrait tablets */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
}

.main-content,
.page-wrap,
.page,
.card,
.stat-card,
.mini-stat,
.dashboard-grid > *,
.bottom-grid > *,
.finance-grid > *,
.reports-grid > *,
.settings-layout > *,
.operations-grid > *,
.portal-preview > *,
.whatsapp-center > *,
.wa-message-grid > *,
.offers-layout > *,
.staff-chat-layout > * {
  min-width: 0;
}

.table-wrap,
.agenda-scroll,
.profile-tabs,
.procurement-tabs,
.medical-alerts {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  :root { --sidebar: 280px; }

  .sidebar {
    width: min(var(--sidebar), calc(100vw - 28px));
    transform: translateX(calc(100% + 28px));
    box-shadow: -16px 0 42px rgba(0, 8, 20, .35);
  }

  .sidebar.open { transform: none; }
  .sidebar { z-index: 310; }
  .sidebar-logout {
    display: flex;
    margin-top: 4px;
    border: 1px solid rgba(255, 125, 112, .2);
    background: rgba(160, 38, 36, .14);
  }
  .sidebar-logout:hover,
  .sidebar-logout:focus-visible {
    color: #fff;
    background: rgba(190, 52, 48, .28);
  }
  .main-content { margin-right: 0; margin-left: 0; }
  .menu-toggle { display: grid; }

  .sidebar-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 10px;
    border: 1px solid rgba(104, 205, 241, .22);
    border-radius: 12px;
    color: #dff8ff;
    background: rgba(0, 112, 181, .12);
    cursor: pointer;
  }

  .sidebar-close svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0, 8, 20, .56);
    transition: opacity .22s ease, visibility .22s ease;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  [dir="ltr"] .sidebar { transform: translateX(calc(-100% - 28px)); }
  [dir="ltr"] .sidebar.open { transform: none; }

  .topbar {
    height: 70px;
    margin: 8px 8px 0;
    padding: 0 12px;
    gap: 8px;
    border-radius: 16px;
  }

  .topbar-start { flex: 1; min-width: 0; }
  .search { width: auto; min-width: 0; flex: 1; }
  .search kbd, .branch-switch, .language-switcher { display: none; }
  .page-wrap { padding: 24px 18px 82px; }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .heading-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .heading-actions .btn {
    min-height: 44px;
  }

  .stats-grid,
  .module-stats,
  .report-insights,
  .schedule-grid,
  .staff-grid,
  .ops-kpis,
  .operations-bottom,
  .advanced-finance-grid,
  .admin-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .bottom-grid,
  .clinical-grid,
  .finance-grid,
  .reports-grid,
  .settings-layout,
  .operations-grid,
  .portal-preview,
  .whatsapp-center,
  .wa-message-grid,
  .offers-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-chat-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .chat-conversations { height: 260px; }
  .chat-room { height: min(620px, calc(100dvh - 120px)); min-height: 500px; }
  .chat-team { display: block; height: 280px; }

  .supplier-performance-grid,
  .quality-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .current-subscription { grid-template-columns: auto minmax(0, 1fr) auto; }
  .subscription-usage { grid-column: 1 / -1; }

  .table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  button,
  .btn,
  .row-action,
  .filter-chip,
  .today-chip,
  .text-btn,
  .more-btn,
  .template-tabs button,
  .billing-cycle button,
  .offer-action {
    min-height: 42px;
    touch-action: manipulation;
  }

  .more-btn,
  .icon-btn,
  .close-modal {
    min-width: 42px;
  }

  .wa-rule select,
  .wa-manual select,
  .card-header select,
  .finance-control-strip select {
    min-height: 42px;
    font-size: 13px;
  }

  #suppliers .heading-actions .btn {
    min-height: 44px;
  }

  .procurement-tabs button,
  .procurement-table .row-action {
    min-height: 42px;
  }

  .table-search,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  #agendaPreviousDay,
  #agendaNextDay {
    min-height: 42px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .row-action {
    padding: 8px 12px;
  }
}

@media (max-width: 600px) {
  .page-wrap { padding: 20px 12px 82px; }
  .page-heading h1 { font-size: clamp(23px, 7vw, 28px); }
  .page-heading p { max-width: 100%; }

  .topbar-actions { gap: 6px; }
  .topbar-actions .user-menu { display: none; }
  .topbar-actions #themeToggle { display: none; }

  .heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .heading-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 10px;
    white-space: normal;
    line-height: 1.35;
  }

  .card-header {
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
  }

  .card-header > div { min-width: 0; }
  .card-header h2 { font-size: 16px; line-height: 1.4; }

  .appointments-card { width: 100%; overflow: hidden; }
  .appointments-list { min-width: 0; }
  .appointment-row {
    width: 100%;
    grid-template-columns: 52px 12px 34px minmax(0, 1fr) 42px;
    gap: 7px;
    padding: 8px 10px;
    min-height: 78px;
  }

  .appointment-row .doctor,
  .appointment-row .status {
    display: none;
  }

  .appointment-info {
    min-width: 0;
    overflow: hidden;
  }

  .appointment-info strong,
  .appointment-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .appointment-row .more-btn {
    width: 42px;
    padding: 0;
  }

  .stats-grid,
  .module-stats,
  .report-insights,
  .schedule-grid,
  .staff-grid,
  .ops-kpis,
  .operations-bottom,
  .advanced-finance-grid,
  .admin-settings-grid,
  .supplier-performance-grid,
  .quality-checks,
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .smart-insight { display: block; }

  .table-toolbar,
  .schedule-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .module-search { width: 100%; min-height: 44px; }
  .module-search input,
  .search input,
  .modal input,
  .modal select,
  .modal textarea,
  .staff-chat-compose textarea {
    font-size: 16px;
  }

  .staff-chat-messages { padding: 13px 10px; }
  .staff-message { max-width: 88%; }
  .staff-chat-compose {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
    padding: 9px;
  }

  .staff-chat-compose textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }

  .staff-chat-compose button,
  .staff-chat-compose .chat-attach {
    width: auto;
    min-width: 44px;
    height: 46px;
  }

  .staff-chat-compose #staffChatSend { padding-inline: 13px; }

  .wa-rule {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 14px;
  }

  .wa-rule > div { align-items: flex-start; }
  .wa-rule select { width: 100%; }
  .template-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .subscription-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-cycle {
    width: 100%;
    align-self: stretch;
  }

  .billing-cycle button { flex: 1; }
  .current-subscription { grid-template-columns: auto minmax(0, 1fr); }
  .current-subscription > .btn { grid-column: 1 / -1; width: 100%; }

  .modal,
  .appointment-modal,
  .wide-modal,
  .procurement-modal {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px;
  }

  .modal > header { padding: 15px 14px; }
  .modal form { padding: 16px 14px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 140px; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .purchase-item-row,
  .receive-item-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-item-row .purchase-item-name,
  .purchase-item-row .remove-purchase-item,
  .receive-item-row > div {
    grid-column: 1;
  }

  .remove-purchase-item { width: 100%; }
  .quality-notice { align-items: flex-start; flex-direction: column; }
  .quality-notice strong { white-space: normal; }

  .patient-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 9px; }
  .search { padding-inline: 9px; }
  .search input { font-size: 14px; }
  .heading-actions { grid-template-columns: minmax(0, 1fr); }
  .appointment-row { grid-template-columns: 48px 10px 32px minmax(0, 1fr) 40px; padding-inline: 8px; }
  .staff-chat-compose { grid-template-columns: 42px minmax(0, 1fr); }
  .staff-chat-compose #staffChatSend { grid-column: 1 / -1; width: 100%; }
}

/* Mobile performance mode: prevent GPU-heavy effects from crashing mobile Safari. */
@media (max-width: 900px) {
  .topbar,
  .sidebar,
  .card,
  .stat-card,
  .mini-stat,
  .modal,
  .modal-backdrop,
  .account-menu,
  .notification-panel,
  .ai-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .page,
  .procurement-pane.active,
  .ai-robot,
  .ai-robot::before,
  .ai-robot::after,
  .robot-orbit,
  .robot-status,
  .ai-title small i {
    animation: none !important;
  }

  .card,
  .stat-card,
  .mini-stat {
    box-shadow: 0 8px 24px rgba(4, 18, 34, .12);
  }

  .topbar {
    box-shadow: 0 8px 24px rgba(4, 18, 34, .16);
  }

  .stat-card:hover,
  .mini-stat:hover,
  .pricing-card:hover,
  .btn:hover,
  .ai-fab:hover {
    transform: none;
  }
}

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

/* Keep the authentication surface independent from dashboard theme layers. */
body .login-card {
  width: auto;
  max-width: none;
  padding: 50px 56px;
  color: #32465a;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
body .login-heading h2,
body .login-brand strong { color: #132a3d; }
body .login-field {
  height: 52px;
  color: #32465a;
  border-color: #d8e1e7;
  border-radius: 7px;
  background: #fbfcfd;
}
body .login-field:focus-within {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}
body .login-field input { color: #1f3447; background: transparent; }

body.tenant-workspace .account-menu-head small::after { content: ""; }
body.tenant-workspace #company { display: none !important; }
.clinic-logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 820px) {
  body .login-card { width: auto; padding: 38px 30px; }
}
@media (max-width: 480px) {
  body .login-card { padding: 34px 22px; }
}

/* AI corner placement: keep the assistant in the lower-left corner on every viewport. */
[dir="rtl"] .ai-fab {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
}

[dir="rtl"] .ai-panel {
  right: auto;
  left: 0;
  transform: translateX(-105%);
  box-shadow: 10px 0 35px rgba(20,38,50,.18);
}

[dir="rtl"] .ai-panel.open { transform: none; }

[dir="ltr"] .ai-fab {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
}

[dir="ltr"] .ai-panel {
  right: auto;
  left: 0;
  transform: translateX(-105%);
  box-shadow: 10px 0 35px rgba(20,38,50,.18);
}

[dir="ltr"] .ai-panel.open { transform: none; }

.report-export-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.report-export-actions button {
  min-width: 70px;
  border: 1px solid #dbe6e3;
  border-radius: 8px;
  background: #fff;
  color: var(--primary-dark);
  padding: 8px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.report-export-actions button:hover {
  border-color: #b8dbd3;
  background: var(--primary-soft);
}

.export-choice-popover {
  position: fixed;
  right: auto;
  bottom: 24px;
  left: 24px;
  z-index: 260;
  width: min(390px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(20,40,50,.18);
  overflow: hidden;
  direction: rtl;
}

.export-choice-popover header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.export-choice-popover header span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.export-choice-popover header strong {
  flex: 1;
  color: #263947;
  font-size: 13px;
  line-height: 1.5;
}

.export-choice-popover header button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #f3f6f6;
  color: #65747d;
  cursor: pointer;
}

.export-choice-popover > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
}

.export-choice-popover [data-export-choice] {
  min-height: 86px;
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: #f8fbfa;
  padding: 12px;
  text-align: right;
  cursor: pointer;
}

.export-choice-popover [data-export-choice]:hover {
  border-color: #b8dbd3;
  background: #eef9f5;
}

.export-choice-popover b,
.export-choice-popover small {
  display: block;
}

.export-choice-popover b {
  color: var(--primary-dark);
  font-size: 15px;
}

.export-choice-popover small {
  margin-top: 6px;
  color: #667681;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 520px) {
  .export-choice-popover {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
  }

  .export-choice-popover > div {
    grid-template-columns: 1fr;
  }
}

body.app-ready .page.active-page {
  display: block;
  opacity: 1 !important;
  visibility: visible;
  transform: none !important;
}

body.app-ready .page.active-page .heading-actions .btn {
  visibility: visible !important;
}

body.app-ready #reportBtn {
  visibility: visible !important;
}

.pwa-install-card {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 280;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 12px;
  width: min(520px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(183, 210, 205, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 44px rgba(15, 38, 55, .18);
  direction: rtl;
}

.pwa-install-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #168f78, #2458d3);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.pwa-install-copy {
  min-width: 0;
}

.pwa-install-copy strong,
.pwa-install-copy span {
  display: block;
}

.pwa-install-copy strong {
  color: #173247;
  font-size: 13px;
  line-height: 1.5;
}

.pwa-install-copy span {
  margin-top: 3px;
  color: #667681;
  font-size: 11px;
  line-height: 1.6;
}

.pwa-install-action {
  border: 0;
  border-radius: 10px;
  background: #168f78;
  color: #fff;
  padding: 10px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.pwa-install-action:hover {
  background: #117963;
}

.pwa-install-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: #f1f5f5;
  color: #667681;
  cursor: pointer;
}

.standalone-app .pwa-install-card {
  display: none;
}

.profile-summary .profile-ai.is-loading {
  opacity: .78;
  cursor: progress;
}

.patient-ai-meta {
  display: block;
  margin-top: 10px;
  color: #6b7d86;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .pwa-install-card {
    right: 12px;
    bottom: 12px;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    width: calc(100vw - 24px);
  }

  .pwa-install-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

body.platform-identity [data-clinic-name] {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0;
}

body.platform-identity .brand > div:not(.brand-mark),
body.platform-identity .login-brand > div:last-child {
  direction: ltr;
  text-align: left;
}

body.platform-identity .login-showcase-brand,
body.platform-identity .login-brand {
  direction: ltr;
}

body.platform-identity .login-showcase-brand {
  justify-content: flex-start;
  text-align: left;
}

.social-settings-card {
  grid-column: span 2;
}

.social-settings-form textarea {
  min-height: 74px;
  resize: vertical;
  line-height: 1.7;
}

.social-channel-row,
.social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.social-channel-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dfe8e8;
  border-radius: 8px;
  background: #f8fbfb;
  color: #40515c;
  font-size: 9px;
  font-weight: 800;
}

.social-channel-row input {
  width: auto;
  margin: 0;
}

.social-preview-box {
  min-height: 112px;
  padding: 13px;
  border: 1px solid #cfe8e2;
  border-radius: 10px;
  background: linear-gradient(135deg, #f2fbf8, #fff);
  color: #304b42;
  font-size: 10px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.facebook-test-result {
  padding: 10px 12px;
  border: 1px solid #dfe8e8;
  border-radius: 9px;
  background: #f8fbfb;
  color: #647681;
  font-size: 9px;
  line-height: 1.7;
}

.facebook-test-result.success {
  border-color: #bfe8da;
  background: #eefaf5;
  color: #168f78;
}

.facebook-test-result.warning {
  border-color: #f1d39d;
  background: #fff8ed;
  color: #a96824;
}

.facebook-test-result.danger {
  border-color: #f0c0c0;
  background: #fff1f1;
  color: #b33a3a;
}

.meta-advanced-fields {
  border: 1px dashed #d6e2e2;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fbfdfd;
}

.meta-advanced-fields summary {
  cursor: pointer;
  color: #60727e;
  font-size: 9px;
  font-weight: 800;
}

.meta-advanced-fields .form-row,
.meta-advanced-fields label {
  margin-top: 10px;
}

.social-actions .btn {
  flex: 1 1 145px;
}

@media (max-width: 480px) {
  body.platform-identity .login-brand {
    justify-content: center;
    text-align: center;
  }

  body.platform-identity .login-brand > div:last-child {
    text-align: center;
  }

  .social-settings-card {
    grid-column: auto;
  }
}