/* Dashboard-only visual system aligned with the American Accent Lab workspace. */
:root:has(#app>aside){--brand:#3765de;--aal-navy:#101a3a;--aal-blue:#3765de;--aal-blue-soft:#edf2ff;--aal-ink:#18213a;--aal-muted:#667290;--aal-line:#e6e9f1;--aal-paper:#fff;--aal-bg:#f7f8fb;--aal-shadow:0 8px 24px rgba(22,35,75,.05);font-family:Manrope,"Noto Sans Arabic",sans-serif;color:var(--aal-ink)}
body:has(#app>aside){background:#f7f8fb;color:#18213a;font-family:Manrope,"Noto Sans Arabic",sans-serif}
#app:has(>aside){--brand:#3765de;--border:#e6e9f1;--muted:#667290;--radius:10px;min-height:100dvh;background:transparent;color:#18213a}
#app>aside{width:240px;background:#101a3a;color:#fff;padding:22px 14px 18px;gap:0;border:0;z-index:4}
#app>aside .logo-panel{margin:0;padding:0 0 24px;min-height:75px;background:transparent;border:0;justify-content:center}
#app>aside .logo-panel img{width:194px;height:51px;object-fit:contain;background:#fff;border-radius:8px;padding:7px}
#app>aside nav{display:grid;gap:4px;overflow:visible;padding:0}
#app>aside nav button{min-height:42px;margin:0;padding:11px;border:0;border-radius:8px;background:transparent;color:#b3bdd9;display:flex;align-items:center;gap:11px;text-align:start;font-size:13px;font-weight:500}
#app>aside nav button:hover,#app>aside nav button.active{background:#202c53;color:#fff;box-shadow:none}
#app>aside .nav-icon{width:18px;height:18px;flex:none}
#app>aside .nav-section{display:none}
#app>aside footer{display:block;margin-top:auto;padding:14px 6px 0;border-top:1px solid #2a3559;background:transparent}
#app>aside footer strong{color:#fff;font-size:12px}
#app>aside footer p{margin:4px 0 0;font-size:11px;color:#97a5c9}
#app>.main{position:relative;isolation:isolate;margin:0 0 0 240px;padding:0;max-width:none;min-height:100vh;background:transparent}
[dir=rtl] #app>.main{margin:0 240px 0 0}
#app>.main>.topbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;margin:0;padding:0 28px;border-bottom:1px solid #e6e9f1;background:#fff;flex-wrap:wrap}
#app .lab-crumb{font-size:12px;color:#667290;white-space:nowrap}
#app .lab-crumb b{color:#18213a}
#app .topbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#app .topbar select{width:auto;max-width:240px;min-height:34px;padding:7px 9px;border:1px solid #e6e9f1;border-radius:8px;background:#fff;color:#18213a;font-size:12px}
#app .main>.content{width:100%;max-width:1120px;margin:0 auto;padding:28px 28px 60px}
#app .main .heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#app .main .heading>div{min-width:0}
#app .main .heading .eyebrow,#app .main .heading .title-icon{display:none!important}
#app .main .heading h1{display:block;margin:0;color:#18213a;font:800 26px/1.4 Manrope,"Noto Sans Arabic",sans-serif;letter-spacing:-.5px}
#app .main .heading .page-description{max-width:620px;margin:5px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#667290;font-size:13px;font-weight:400}
#app .main .heading small{display:inline-block;margin-top:5px;color:#667290;font-size:11px}
#app .main .heading>.lab-add-session{min-height:36px;padding:9px 14px;border:0;border-radius:8px;background:#3765de;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
#app .main .heading>.lab-add-session:hover{filter:brightness(1.08);box-shadow:none}
#app .main h2{font:700 14px/1.45 Manrope,"Noto Sans Arabic",sans-serif;color:#18213a}
#app .main .card{min-width:0;border:1px solid #e6e9f1;border-radius:10px;background:#fff;box-shadow:var(--aal-shadow)}
#app .main .card>h2,#app .main form.card>h2{padding-bottom:12px;border-bottom:1px solid #e6e9f1}
#app .main .section-icon{display:none!important}
#app .main .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
#app .main .grid>.card{padding:16px;border-radius:10px}
#app .main .grid .card small{max-width:none;color:#667290;font-size:12px}
#app .main .grid .stat-icon{display:none}
#app .main .grid .metric{margin:6px 0 2px;color:#18213a;font-size:24px;font-weight:800;letter-spacing:0}
#app .main .grid .metric-note{margin:0;color:#667290;font-size:11px}
#app .main .split{grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:16px;margin-top:0}
#app .main .stack{gap:16px}
#app .main .lab-panel{margin-bottom:16px;padding:0;overflow:hidden}
#app .main .lab-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px;border-bottom:1px solid #e6e9f1;background:#fff}
#app .main .lab-panel-head h2{margin:0;font-size:14px}
#app .main .lab-panel-head p{margin:3px 0 0;padding:0;border:0;background:transparent;color:#667290;font-size:12px}
#app .main .lab-panel-head button,.main .link{min-height:0;padding:5px;border:0;border-radius:0;background:transparent;color:#3765de;font-size:12px;font-weight:700}
#app .main .lab-panel-head button:hover,.main .link:hover{background:transparent;box-shadow:none;text-decoration:underline}
#app .main .lab-panel-body{padding:0 17px}
#app .main .lab-panel .lesson{gap:10px;padding:13px 0;border-color:#e6e9f1}
#app .main .lab-panel .date{min-width:48px;padding:8px;border:0;border-radius:8px;background:#f0f2f8;color:#667290;font-size:11px}
#app .main .lab-panel .detail strong{font-size:13px}
#app .main .lab-panel .detail p,#app .main .lab-panel .detail small{font-size:12px}
#app .main .lab-panel .tablewrap{margin:0 -17px}
#app .main .lab-panel .table-toolbar{margin-bottom:6px;padding:12px 17px 0}
#app .main .lab-pay-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e6e9f1;font-size:13px}
#app .main .lab-pay-row:last-child{border:0}
#app .main .badge{align-self:center;padding:4px 9px;border-radius:99px;background:#f0f2f8;color:#667290;font-size:11px;font-weight:700}
#app .main .badge[data-status=scheduled]{background:#edf2ff;color:#3765de}
#app .main .badge[data-status=completed]{background:#e9f7f0;color:#1f7a54}
#app .main .badge[data-status=cancelled]{background:#fff0f0;color:#b53f3f}
#app .main th{padding:11px 14px;border-bottom:1px solid #e6e9f1;background:#fff;color:#667290;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none}
#app .main td{padding:12px 14px;border-bottom:1px solid #e6e9f1;font-size:12px}
#app .main tbody tr:hover{background:#f7f8fb}
#app .main .empty{padding:26px;color:#667290;font-size:13px}
#app .main .empty-illustration{display:none}
#app .main .table-search{min-height:36px;border-color:#e6e9f1;background:#fff;font-size:12px}
#app .main button:not(.link),#app .main .btn{min-height:36px;padding:9px 14px;border:0;border-radius:8px;background:#3765de;color:#fff;font-size:12px;font-weight:700;line-height:1.45}
#app .main button:not(.link):hover,#app .main .btn:hover{filter:brightness(1.08);box-shadow:none}
#app .main button.secondary{border:1px solid #e6e9f1;background:#fff;color:#18213a}
#app .main button.secondary:hover{background:#f7f8fb;filter:none;box-shadow:none}
#app .main button.link{min-height:0;padding:5px;border:0;background:transparent;color:#3765de}
#app .main button.danger{background:#fff0f0;color:#b53f3f}
#app .main input,#app .main select,#app .main textarea{border:1px solid #e6e9f1;border-radius:7px;background:#fff;color:#18213a}
#app .main input:focus,#app .main select:focus,#app .main textarea:focus{border-color:#3765de;box-shadow:0 0 0 3px #3765de22}
#app .main .notice{border-color:#e6e9f1;border-radius:9px;background:#edf2ff;color:#3765de}
#app .main>.notice{margin:12px auto 0}
#app .main .hero{background:#fff}
#app .main .hero:after{display:none}
#app .main .tablewrap{overflow-x:auto}
#app .main .schedule-dialog{border:0;border-radius:12px;box-shadow:0 20px 60px #0004}
#app .admin-main>.content>.card{margin-top:16px}
#app .admin-main>.content>.grid{margin-top:0}
#app .site-link{color:#3765de}
#app .admin-main .admin-pilot{color:#667290}
#app>.main[data-background=true]::before{inset-inline-start:240px;background-image:linear-gradient(#f7f8fbcc,#f7f8fbdd),var(--workspace-background);background-position:center;background-size:cover}
#app .main button:focus-visible,#app .main a:focus-visible,#app>aside button:focus-visible{outline:2px solid #3765de;outline-offset:2px}
#app .skip-link:focus-visible{outline:2px solid #3765de;outline-offset:2px}
@media(max-width:1100px){#app .topbar .right{gap:6px}#app .topbar select{max-width:170px}#app .main>.topbar{position:sticky}}
@media(max-width:850px){#app>aside{width:64px;padding:22px 8px 18px}#app>aside .logo-panel{padding:0 0 24px;min-height:65px;justify-content:center}#app>aside .logo-panel img{display:none}#app>aside .logo-panel:before{content:'MS';display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#293d80;font-size:12px;font-weight:800}#app>aside nav{gap:4px}#app>aside nav button{justify-content:center;padding:11px;min-height:42px;flex-shrink:0}#app>aside nav button span{display:none}#app>aside footer{display:none}#app>.main{margin:0 0 0 64px;padding:0}[dir=rtl] #app>.main{margin:0 64px 0 0}#app .main>.content{padding:20px 16px 50px}#app .main .grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .main .split{grid-template-columns:1fr}#app .topbar .right{justify-content:flex-start}#app .main h1{font-size:24px}#app .main .lab-panel-head{padding:14px}#app .topbar .badge{font-size:10px}#app .main .forms{grid-template-columns:1fr}#app .main[data-background=true]::before{inset-inline-start:64px}}
@media(max-width:520px){#app .main>.content{padding:20px 12px 50px}#app .main .grid{gap:8px}#app .main .grid>.card{padding:12px}#app .main .grid .card small{font-size:11px}#app .main .grid .metric{font-size:22px}#app .topbar .right{gap:5px}#app .topbar select{max-width:100%;width:100%}#app .topbar .right{width:100%}#app .main .lab-panel .lesson{flex-wrap:wrap}#app .main .lab-panel .lesson .badge{margin-inline-start:58px}#app .main .lab-panel-body{padding-inline:12px}#app .main .lab-panel .tablewrap{margin-inline:-12px}#app .assistant-launchers{bottom:12px;inset-inline-end:12px;gap:6px}#app .assistant-launchers button{padding:10px 13px;font-size:12px}#app .workspace-assistant-panel{bottom:73px;inset-inline-end:12px;max-height:calc(100dvh - 90px)}}
@media(prefers-reduced-motion:reduce){#app *,#app *::before,#app *::after{scroll-behavior:auto!important;transition:none!important}}