/* Real application presentation only: permissions and data remain in the app. */
#appShell { --workspace-panel:#fff; --workspace-canvas:#f2f7f8; --workspace-ink:#0a2f45; --workspace-line:#dce7ea; }
body.dark #appShell { --workspace-panel:#172a34; --workspace-canvas:#10212a; --workspace-ink:#e4f1f5; --workspace-line:#304853; }
#appShell .shell { background:var(--workspace-canvas); min-height:100vh; }
#appShell .content { color:var(--workspace-ink); width:100%; box-sizing:border-box; }
#appShell .workspacePanel,#appShell .metricCard { background:var(--workspace-panel); border-color:var(--workspace-line); border-radius:18px; box-shadow:0 4px 20px #0a2f4505; }
#appShell .viewHeader { margin-bottom:24px; }
#appShell .dashboardTodayMetrics { gap:16px; }
#appShell button:focus-visible { outline:3px solid #28baa7; outline-offset:3px; }
#appShell #langToggleApp { min-width:44px!important; width:44px!important; height:44px; font-size:24px; padding:8px!important; color:#078b78; }
#workspaceLanguageMenu { position:fixed; z-index:10000; padding:6px; width:160px; background:var(--workspace-panel,#fff); color:var(--workspace-ink,#0a2f45); border:1px solid var(--workspace-line,#dce7ea); border-radius:14px; box-shadow:0 10px 36px #0a2f4526; }
#workspaceLanguageMenu[hidden] { display:none!important; }
#workspaceLanguageMenu button { display:block; width:100%; padding:12px; border:0; border-radius:9px; text-align:start; background:transparent; color:inherit; cursor:pointer; }
#workspaceLanguageMenu button[aria-pressed="true"] { background:#eaf8f4; color:#067968; font-weight:700; }
@media(min-width:901px) {
  #appShell .topheader { position:fixed!important; inset:0 auto 0 0!important; width:240px!important; height:100dvh!important; max-height:none!important; box-sizing:border-box; display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:24px!important; padding:28px 16px!important; background:var(--workspace-panel)!important; border:0!important; border-inline-end:1px solid var(--workspace-line)!important; border-radius:0!important; overflow-y:auto; transform:none!important; }
  body.rtl #appShell .topheader { inset:0 0 0 auto!important; }
  #appShell .appBrandArea { display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:24px!important; }
  #appShell .appBrand { padding:0 12px; }
  #appShell .appBrand img { width:40px!important; height:40px!important; }
  #appShell .appNav { display:flex!important; flex-direction:column!important; align-items:stretch!important; flex-wrap:nowrap!important; gap:6px!important; overflow:visible!important; }
  #appShell .appNav .navbtn { width:100%!important; min-width:0!important; min-height:44px!important; justify-content:flex-start!important; text-align:start!important; border-radius:12px!important; padding:12px 16px!important; border:0!important; color:var(--workspace-ink)!important; background:transparent!important; white-space:normal!important; }
  #appShell .appNav .navbtn.active { background:#eaf8f4!important; color:#067968!important; box-shadow:none!important; }
  #appShell .appNav .navbtn.active:after { display:none!important; }
  #appShell #navSettings { display:flex!important; }
  #appShell #navUpdates { font-size:14px!important; width:100%!important; }
  #appShell #navUpdates>span:not(.appUpdateBadge) { display:inline!important; }
  #appShell #themeToggleApp { margin:12px 0 0!important; }
  #appShell .appAccountButton { max-width:100%; margin:8px 0 0!important; }
  #appShell .appNavDivider { width:100%; height:1px; background:var(--workspace-line); margin:12px 0; }
  #appShell main { margin-inline-start:240px!important; width:auto!important; padding:32px!important; }
  #appShell .content { max-width:1500px!important; margin:auto; }
  #appShell .mobileAppBar { display:none!important; }
}
@media(max-width:900px) {
  #appShell main { padding:84px 16px 28px!important; margin-inline-start:0!important; }
  #appShell .content { padding:0!important; min-width:0; }
  #appShell .mobileAppBar { background:var(--workspace-panel)!important; border-bottom:1px solid var(--workspace-line); }
  #appShell .dashboardMainGrid { grid-template-columns:minmax(0,1fr)!important; }
  #appShell .dashboardTodayMetrics { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px; }
  #appShell .topheader { background:var(--workspace-panel)!important; border-radius:18px!important; }
  #appShell .appNav .navbtn { min-height:44px; }
  #appShell .workspacePanel { padding:16px; min-width:0; }
}
@media(prefers-reduced-motion:reduce) { #appShell * { scroll-behavior:auto!important; transition:none!important; } }

/* Ayada v1.3 Hybrid
   Presentation-only overrides: the proven HTML/Supabase workflows remain unchanged. */
#appShell {
  --workspace-teal:#078b78;
  --workspace-teal-strong:#046c60;
  --workspace-blue:#079be8;
  --workspace-soft:#eaf8f5;
  --workspace-canvas:#f3f9fa;
  --workspace-line:#d7e6e9;
  --workspace-muted:#647b88;
}
#appShell .shell {
  background:
    radial-gradient(circle at 78% 0%, rgba(7,155,232,.08), transparent 30rem),
    radial-gradient(circle at 15% 92%, rgba(18,190,167,.07), transparent 34rem),
    var(--workspace-canvas);
}
#appShell main { min-width:0; }
#appShell .content { max-width:1480px!important; }
#appShell .workspacePanel,
#appShell .metricCard,
#appShell .panel,
#appShell .card {
  border:1px solid var(--workspace-line)!important;
  box-shadow:0 10px 35px rgba(10,47,69,.055)!important;
}
#appShell .viewHeader h1,
#appShell .panelHeader h2 { color:var(--workspace-ink); letter-spacing:-.025em; }
#appShell .viewSubtitle,
#appShell .panelEyebrow { color:var(--workspace-muted); }
#appShell button,
#appShell a,
#appShell input,
#appShell select,
#appShell textarea { -webkit-tap-highlight-color:transparent; }
#appShell input,
#appShell select,
#appShell textarea {
  border-color:var(--workspace-line)!important;
  border-radius:11px!important;
  background:var(--workspace-panel)!important;
}
#appShell input:focus,
#appShell select:focus,
#appShell textarea:focus {
  border-color:var(--workspace-teal)!important;
  box-shadow:0 0 0 3px rgba(7,139,120,.12)!important;
  outline:0!important;
}
#appShell .appPrimaryAction,
#appShell button.primary,
#appShell .primary {
  background:linear-gradient(135deg,var(--workspace-teal),#0aa68f)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(7,139,120,.18)!important;
}
#appShell .appPrimaryAction:hover,
#appShell button.primary:hover { filter:brightness(.96); transform:translateY(-1px); }
#appShell .appUpdateBadge { background:#ef5b61!important; color:#fff!important; }
#appShell table { border-collapse:separate; border-spacing:0; }
#appShell th { color:var(--workspace-muted); font-size:12px; font-weight:750; }
#appShell td,#appShell th { border-color:var(--workspace-line)!important; }
#appShell .emptyState { border:1px dashed var(--workspace-line); border-radius:16px; background:rgba(255,255,255,.45); }

@media(min-width:901px) {
  #appShell .topheader {
    width:252px!important;
    padding:24px 16px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:8px 0 30px rgba(10,47,69,.035)!important;
  }
  body.dark #appShell .topheader { background:rgba(23,42,52,.97)!important; }
  #appShell main { margin-inline-start:252px!important; padding:34px clamp(24px,3vw,48px)!important; }
  #appShell .appBrand { display:flex!important; align-items:center!important; gap:11px!important; min-height:52px; }
  #appShell .appBrand img { width:43px!important; height:43px!important; }
  #appShell .appNav .navbtn { gap:12px!important; padding:12px 14px!important; font-weight:680!important; }
  #appShell .appNav .navbtn:hover { background:#f1faf8!important; color:var(--workspace-teal)!important; }
  #appShell .appNav .navbtn.active {
    background:linear-gradient(135deg,#dff5f0,#edf9f7)!important;
    color:var(--workspace-teal-strong)!important;
    box-shadow:inset 3px 0 0 var(--workspace-teal)!important;
  }
  body.rtl #appShell .appNav .navbtn.active { box-shadow:inset -3px 0 0 var(--workspace-teal)!important; }
}

@media(max-width:900px) {
  #appShell main { padding:82px 14px 30px!important; }
  #appShell .mobileAppBar { height:66px; box-shadow:0 5px 20px rgba(10,47,69,.06); }
  #appShell .workspacePanel,#appShell .panel,#appShell .card { border-radius:15px!important; }
  #appShell .viewHeader { gap:14px; margin-bottom:18px; }
}

@media(max-width:620px) {
  #appShell .dashboardTodayMetrics { grid-template-columns:1fr!important; }
  #appShell .viewHeader,#appShell .panelHeader { align-items:stretch!important; }
  #appShell .viewHeader button,#appShell .panelHeader button { min-height:46px; }
  #appShell .tableWrap,#appShell .tableScroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Flutter-inspired appointment date/time controls used by the proven patient form. */
.appointmentPickerControl{width:100%;min-width:0}
.appointmentNativeValue{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.appointmentPickerButton{width:100%!important;min-height:72px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:11px 14px!important;border:1px solid var(--workspace-line)!important;border-radius:15px!important;background:linear-gradient(135deg,#fff,#f8fcfc)!important;color:var(--workspace-ink)!important;text-align:start!important;box-shadow:0 7px 18px rgba(10,47,69,.045)!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.appointmentPickerButton:hover{border-color:#82cfc2!important;box-shadow:0 10px 24px rgba(7,139,120,.1)!important;transform:translateY(-1px)}
.appointmentPickerButton small{display:block;margin-bottom:3px;color:var(--workspace-muted);font-size:11px;font-weight:650}
.appointmentPickerButton strong{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--workspace-ink);font-size:14px;white-space:nowrap}
.appointmentPickerIcon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--workspace-soft);color:var(--workspace-teal)}
.appointmentPickerIcon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appointmentPickerClock{background:#eaf5ff;color:var(--workspace-blue)}
.appointmentPickerChevron{color:#7b929e;font-size:27px;transition:transform .16s ease}.appointmentPickerButton:hover .appointmentPickerChevron{transform:translateX(2px)}body.rtl .appointmentPickerButton:hover .appointmentPickerChevron{transform:translateX(-2px)}
.appointmentPickerBackdrop{position:fixed;inset:0;z-index:10030;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,25,36,.48);backdrop-filter:blur(5px);opacity:0;transition:opacity .18s ease}.appointmentPickerBackdrop.open{opacity:1}.appointmentPickerBackdrop.closing{opacity:0}
.appointmentPickerSheet{width:min(420px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:24px;background:var(--workspace-panel,#fff);color:var(--workspace-ink,#0a2f45);box-shadow:0 30px 90px rgba(4,25,36,.28);transform:translateY(22px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.2,1)}.appointmentPickerBackdrop.open .appointmentPickerSheet{transform:translateY(0) scale(1)}
.appointmentPickerSheet>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 15px;border-bottom:1px solid var(--workspace-line)}.appointmentPickerSheet>header small{color:var(--workspace-teal);font-size:10px;font-weight:850;letter-spacing:.12em}.appointmentPickerSheet>header h3{margin:3px 0 0;font-size:20px}.appointmentPickerClose{width:42px!important;min-width:42px!important;height:42px;padding:0!important;border-radius:50%!important;font-size:24px!important}
.appointmentCalendar{padding:16px 20px 22px}.appointmentCalendarNav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:12px}.appointmentCalendarNav strong{text-align:center;text-transform:capitalize}.appointmentCalendarNav button{width:40px!important;min-width:40px!important;height:40px;padding:0!important;border-radius:12px!important;font-size:24px!important}.appointmentCalendarWeek,.appointmentCalendarDays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.appointmentCalendarWeek span{padding:7px 0;color:var(--workspace-muted);font-size:10px;font-weight:800;text-align:center}.appointmentCalendarDays{min-height:252px}.appointmentCalendarDays.refreshing{animation:appointmentCalendarIn .18s ease both}.appointmentCalendarDays>span,.appointmentCalendarDays button{aspect-ratio:1;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:inherit!important;box-shadow:none!important}.appointmentCalendarDays button:hover{background:var(--workspace-soft)!important;color:var(--workspace-teal)!important}.appointmentCalendarDays button.today{box-shadow:inset 0 0 0 1px var(--workspace-teal)!important}.appointmentCalendarDays button.selected{background:linear-gradient(135deg,var(--workspace-teal),#0aa68f)!important;color:#fff!important;box-shadow:0 7px 17px rgba(7,139,120,.24)!important}
@keyframes appointmentCalendarIn{from{opacity:.45;transform:translateX(8px)}to{opacity:1;transform:none}}
.appointmentTimePicker{position:relative;height:330px;margin:8px 20px;overflow:hidden}.appointmentTimeRail{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:0 8px}.appointmentTimeRail::-webkit-scrollbar{display:none}.appointmentTimeRail>span{display:block;height:55px}.appointmentTimeRail button{width:100%!important;height:55px;display:grid!important;place-items:center;padding:0!important;border:0!important;background:transparent!important;color:var(--workspace-muted)!important;scroll-snap-align:center;transition:font-size .15s ease,color .15s ease,transform .15s ease!important}.appointmentTimeRail button strong{font-size:18px}.appointmentTimeRail button small{display:none}.appointmentTimeRail button[aria-selected="true"]{color:var(--workspace-teal)!important;transform:scale(1.12)}.appointmentTimeRail button[aria-selected="true"] strong{font-size:24px}.appointmentTimeSelection{position:absolute;inset:50% 8px auto;height:55px;pointer-events:none;transform:translateY(-50%);border:1px solid #9bd9ce;border-radius:15px;background:rgba(234,248,245,.55)}.appointmentTimeFade{position:absolute;z-index:2;inset-inline:0;height:90px;pointer-events:none}.appointmentTimeFade.top{top:0;background:linear-gradient(var(--workspace-panel,#fff),transparent)}.appointmentTimeFade.bottom{bottom:0;background:linear-gradient(transparent,var(--workspace-panel,#fff))}.appointmentPickerActions{display:flex;gap:10px;padding:14px 20px 20px}.appointmentPickerActions button{flex:1;min-height:46px}
body.dark .appointmentPickerButton{background:linear-gradient(135deg,#172a34,#1b303a)!important}
@media(max-width:620px){.appointmentPickerBackdrop{align-items:flex-end;padding:0}.appointmentPickerSheet{width:100%;border-radius:24px 24px 0 0;transform:translateY(100%)}.appointmentPickerBackdrop.open .appointmentPickerSheet{transform:translateY(0)}.appointmentPickerButton{min-height:68px!important}.appointmentCalendar{padding-inline:14px}.appointmentTimePicker{height:300px;margin-inline:14px}}
@media(prefers-reduced-motion:reduce){.appointmentPickerBackdrop,.appointmentPickerSheet,.appointmentPickerButton,.appointmentCalendarDays{transition:none!important;animation:none!important}}

/* Ayada sidebar polish: one coherent hierarchy for navigation and utilities. */
@media(min-width:901px){
  #appShell .topheader{
    width:264px!important;
    padding:20px 14px 14px!important;
    gap:0!important;
    overflow:hidden!important;
    border-inline-end:1px solid #dbe7e8!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%)!important;
    box-shadow:10px 0 34px rgba(10,47,69,.035)!important;
  }
  body.dark #appShell .topheader{background:linear-gradient(180deg,#172a34,#14262f)!important;border-color:#304853!important}
  #appShell main{margin-inline-start:264px!important}
  #appShell .appBrandArea{gap:14px!important;padding:0 6px 17px!important;border-bottom:1px solid #edf2f3!important}
  #appShell .appBrand{min-height:48px!important;padding:0 5px!important;gap:11px!important}
  #appShell .appBrand img{width:42px!important;height:42px!important;border-radius:12px!important;box-shadow:0 8px 20px rgba(8,169,148,.16)}
  #appShell .appBrand .brand-en,#appShell .appBrand .brand-ar{font-size:23px!important;color:#103b5c!important}
  body.dark #appShell .appBrand .brand-en,body.dark #appShell .appBrand .brand-ar{color:#eef8fb!important}
  #newAppointmentBtn.appPrimaryAction{width:100%!important;min-height:47px!important;margin:0!important;border-radius:13px!important;font-size:13px!important;box-shadow:0 10px 24px rgba(8,169,148,.2)!important}
  #appShell .appNav{min-height:0!important;display:flex!important;flex:1!important;gap:3px!important;padding:15px 2px 0!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none}
  #appShell .appNav::-webkit-scrollbar{display:none}
  #appShell .appNav .navbtn{min-height:43px!important;gap:11px!important;padding:7px 10px!important;border:1px solid transparent!important;border-radius:12px!important;color:#36566c!important;font-size:13px!important;font-weight:700!important;transition:background .16s ease,color .16s ease,border-color .16s ease!important}
  #appShell .appNav .navbtn svg{width:19px!important;height:19px!important;padding:1px;stroke-width:1.75!important}
  #appShell .appNav .navbtn:hover{background:#f0f8f7!important;border-color:#e1efed!important;color:#087d70!important}
  #appShell .appNav .navbtn.active{background:linear-gradient(135deg,#e3f6f1,#edf9f7)!important;border-color:#d5ebe6!important;color:#087d70!important;box-shadow:inset 3px 0 0 #0aa58f!important}
  body.rtl #appShell .appNav .navbtn.active{box-shadow:inset -3px 0 0 #0aa58f!important}
  #appShell .appNav .navbtn.active::after{display:none!important}
  #appShell .appSettingsNav{min-height:50px!important;margin:10px 0 0!important;padding-top:11px!important;border-width:1px 0 0!important;border-color:#edf2f3!important;border-radius:0!important}
  #appShell .appSidebarFooter{display:grid;gap:9px;margin-top:auto;padding:12px 4px 0;border-top:1px solid #edf2f3}
  #appShell #tourHelpButton{width:100%!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;margin:0!important;padding:7px 10px!important;border:1px solid #cfe4e2!important;border-radius:12px!important;background:#f4faf9!important;color:#087d70!important;font-size:12px!important;font-weight:750!important}
  #appShell #tourHelpButton:hover{background:#e9f6f3!important;border-color:#a9d4ce!important}
  #appShell .tourHelpIcon{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#dff3ee;color:#087d70;font-weight:900}
  #appShell .appSidebarUtilities{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  #appShell .appSidebarUtilities #themeToggleApp,#appShell .appSidebarUtilities #langToggleApp{width:100%!important;min-width:0!important;min-height:41px!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:1px solid #e0eaec!important;border-radius:11px!important;background:#fff!important;color:#087d70!important}
  body.dark #appShell .appSidebarUtilities #themeToggleApp,body.dark #appShell .appSidebarUtilities #langToggleApp{background:#1b303a!important;border-color:#36505c!important;color:#72dfce!important}
  #appShell .appSidebarUtilities button:hover{background:#eef8f6!important;border-color:#b9dbd6!important}
  #appShell #ownerBadge,#appShell #trialStatusBadge{width:max-content!important;margin:0 4px!important}
  #appShell .appAccountButton{width:100%!important;min-width:0!important;min-height:58px!important;grid-template-columns:38px minmax(0,1fr) 18px!important;gap:10px!important;margin:0!important;padding:8px!important;border:1px solid #e0eaec!important;border-radius:13px!important;background:#fff!important}
  body.dark #appShell .appAccountButton{background:#1b303a!important;border-color:#36505c!important}
  #appShell .appAccountButton:hover{border-color:#b9dbd6!important;background:#f1f9f7!important}
  #appShell #accountInitial{width:38px!important;height:38px!important;border:1px solid #cfe8e3!important;background:linear-gradient(145deg,#eaf9f5,#dff4ef)!important;color:#087d70!important}
  #appShell .appAccountIdentity strong{font-size:13px!important;color:#173e59!important}.appAccountIdentity small{font-size:10px!important;color:#758697!important}.appAccountChevron{color:#81909e!important}
  body.dark #appShell .appAccountIdentity strong{color:#eff8fa!important}
}

@media(max-width:900px){
  #appShell .appSidebarFooter{display:grid;gap:9px;margin-top:8px;padding-top:11px;border-top:1px solid var(--workspace-line)}
  #appShell #tourHelpButton{width:100%!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;padding:8px 12px!important;border:1px solid #cfe4e2!important;border-radius:12px!important;background:#f4faf9!important;color:#087d70!important;font-weight:750!important}
  #appShell .tourHelpIcon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#dff3ee;font-weight:900}
  #appShell .appSidebarUtilities{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #appShell .appSidebarUtilities #themeToggleApp,#appShell .appSidebarUtilities #langToggleApp{width:100%!important;min-height:44px!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:1px solid var(--workspace-line)!important;border-radius:11px!important;background:var(--workspace-panel)!important}
  #appShell .appAccountButton{margin:0!important;border:1px solid var(--workspace-line)!important;border-radius:12px!important}
}