/* Workspace layout: chosen in Settings → Appearance, drawn in the workspace's own language. */
.workspace-layout-box{margin:0 0 20px;padding:16px 18px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 4%,transparent)}
.workspace-layout-head{display:grid;gap:3px;margin-bottom:12px}
.workspace-layout-head strong{font-size:14px;font-weight:720;letter-spacing:-.01em}
.workspace-layout-head small{color:var(--muted);font-size:12px;font-weight:500;line-height:1.5}
.workspace-layout-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.workspace-layout-option{display:grid;gap:8px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.workspace-layout-option:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 8%,transparent)}
.workspace-layout-option[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 10%,transparent)}
.workspace-layout-option b{font-size:13px;font-weight:750}
.workspace-layout-option small{color:var(--muted);font-size:11.5px;font-weight:500;line-height:1.45}
.workspace-layout-option[aria-pressed=true] b::after{content:' · Selected';color:var(--brand);font-weight:800}
.workspace-layout-preview{display:grid;grid-template-columns:22% 1fr;grid-template-rows:14px 1fr;gap:4px;height:58px;padding:6px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--canvas) 80%,var(--surface))}
.workspace-layout-preview i{display:block}
.workspace-layout-preview i:nth-child(1){grid-row:1/3;border-radius:6px;background:var(--brand)}
.workspace-layout-preview i:nth-child(2){border-radius:5px;background:var(--surface);box-shadow:0 2px 6px color-mix(in srgb,var(--brand) 12%,transparent)}
.workspace-layout-preview i:nth-child(3){border-radius:7px;background:var(--surface);box-shadow:0 4px 10px color-mix(in srgb,var(--brand) 14%,transparent)}
.workspace-layout-preview.is-simple i{border-radius:2px!important;box-shadow:none!important;border:1px solid var(--line)}
.workspace-layout-preview.is-simple i:nth-child(1){background:var(--surface)}
@media(max-width:640px){.workspace-layout-options{grid-template-columns:1fr}}
/* Simple is flat everywhere except the ground it stands on: theme.js writes the
   school's own tinted --canvas as an inline style, so the page still read as themed
   while every panel on it had gone plain. The Billing, Business and Hospital ERPs
   already give Simple a neutral ground; School matches them. Only an !important
   declaration outranks an inline custom property, hence these two.
   The school palette is untouched: the brand still colours buttons, marks and the
   active row. */
html[data-workspace-layout=simple]{--radius:5px;--shadow:none;--canvas:#F8F9FA!important}
html[data-workspace-layout=simple][data-color-scheme="dark"]{--canvas:#17191C!important}
html[data-workspace-layout=simple] :is(.panel,.card,.metric-card,.module-card,.sidebar,.sidebar-section,.workspace-hero,.topbar,.main-header,.dashboard-card,.navigation-card,.appearance-card,.workspace-layout-box,.workspace-layout-option){border-radius:5px!important;box-shadow:none!important;background-image:none!important}
html[data-workspace-layout=simple] :is(.sidebar,.app-sidebar,.workspace-sidebar){background:var(--surface,#fff)!important;color:var(--ink)!important;border-right:1px solid var(--line,#ddd)}
html[data-workspace-layout=simple] :is(.sidebar,.app-sidebar,.workspace-sidebar) :is(button,a,.nav-label,.nav-group-title,.brand-name){color:inherit}
html[data-workspace-layout=simple] .sidebar :is(h3,.session-switch span){color:var(--muted,#64748b)!important}
html[data-workspace-layout=simple] .sidebar :is(.session-switch select,.sidebar-user,.sidebar-user strong,.nav-icon){color:var(--ink,#18202b)!important}
html[data-workspace-layout=simple] .sidebar .session-switch select{background:var(--surface,#fff)!important;border-color:var(--line,#d5dce5)!important}
html[data-workspace-layout=simple] .sidebar-nav button{padding-block:8px!important;border-radius:4px!important;box-shadow:none!important}
html[data-workspace-layout=simple] .sidebar-nav button.active .nav-icon{color:var(--brand)!important}
html[data-workspace-layout=simple] :is(.nav-item,.nav-link,.module-nav-item){border-radius:4px!important;margin-block:1px!important;padding-block:8px!important}
html[data-workspace-layout=simple] :is(.sidebar,.app-sidebar,.workspace-sidebar) :is(.active,[aria-current=page]){background:var(--brand-soft)!important;color:var(--brand)!important}
html[data-workspace-layout=simple] :is(.btn,.button,button,input,select,textarea){border-radius:4px}