.demo-roster-body { display:grid; gap:18px; padding:24px; }
.demo-roster-calendar select { min-width:145px; }
.demo-roster-calendar th { white-space:nowrap; }
/* Approval template maker and module assignment. */
.demo-approval-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; }
.demo-approval-layout > nav { display:flex; flex-direction:column; align-items:stretch; align-self:start; gap:8px; }
.demo-approval-layout > nav button { text-align:left; white-space:normal; }
.demo-approval-chain { display:grid; gap:12px; padding-left:24px; }
.demo-approval-chain span { display:block; margin-top:4px; color:#526174; }
.demo-tier-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) minmax(130px,1fr) auto; gap:16px; margin:16px 0; padding:16px; border:1px solid #dbe3ec; border-radius:12px; }
.demo-tier-row legend { float:none; width:auto; font-size:14px; font-weight:700; }
.demo-approver-choice { display:block; margin:8px 0; }
#demo-template-assignment { display:grid; gap:16px; }
#demo-template-error { color:#b42318; }
@media (max-width:900px) { .demo-approval-layout, .demo-tier-row { grid-template-columns:1fr; } }
/* Local layout glue for source-referenced demo screens. Production pw/pb
   typography, panels, tables and recruitment styles are loaded unchanged. */
#demo-screen .demo-adapter-body { padding: 20px 24px; }
#demo-screen .demo-product-toolbar { display:flex; justify-content:flex-end; gap:8px; margin:20px 0; }
#demo-screen .demo-breadcrumb-link { border:0; background:transparent; color:inherit; padding:0; }
#demo-screen .demo-product-tabs { display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid #e2e8f0; margin:24px 0; }
#demo-screen .demo-product-tabs button { border:0; border-bottom:3px solid transparent; background:transparent; padding:12px 16px; color:#64748b; }
#demo-screen .demo-product-tabs .active { border-color:var(--pw-accent,#0ea5e9); color:var(--pw-accent,#0ea5e9); font-weight:600; }
#demo-screen .demo-product-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
#demo-dialog .demo-product-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
@media(max-width:760px) { #demo-dialog .demo-product-form { grid-template-columns:1fr; } }
#demo-screen .demo-product-form .form-group { min-width:0; margin:0; }
#demo-screen .demo-product-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
#demo-screen .demo-dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
#demo-screen .demo-dashboard-grid .pw-panel { margin:0; }
#demo-screen .demo-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#demo-screen .demo-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:20px; }
#demo-screen .pw-settings-card { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:20px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; text-align:left; color:#334155; min-width:0; }
#demo-screen .pw-settings-card:hover { border-color:var(--pw-accent,#0ea5e9); }
#demo-screen .pw-settings-card>i { font-size:24px; color:var(--pw-accent,#0ea5e9); }
#demo-screen .pw-settings-card>span { font-size:13px; color:#64748b; }
#demo-screen .pw-settings-card__body { display:flex; flex-direction:column; gap:8px; }
#demo-screen .demo-product-card { margin:0; padding:24px; text-align:left; min-width:0; color:#334155; }
#demo-screen .demo-product-card h3 { font-size:18px; margin:18px 0 10px; }
#demo-screen .demo-product-card p { min-height:40px; }
#demo-screen .demo-card-icon { display:grid; place-items:center; width:52px; height:52px; background:#ecfeff; border-radius:14px; color:#0891b2; font-size:26px; }
#demo-screen .demo-calendar { overflow:auto; }
#demo-screen .demo-calendar .fc-toolbar { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
#demo-screen .demo-calendar .fc-toolbar-title { font-size:18px; margin:6px 0; }
#demo-screen .demo-calendar .fc-toolbar>div { display:flex; gap:5px; }
#demo-screen .demo-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:540px; border-left:1px solid #e2e8f0; border-top:1px solid #e2e8f0; }
#demo-screen .demo-calendar-weekday { text-align:center; background:#f8fafc; font-weight:600; padding:10px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; }
#demo-screen .demo-calendar-day { min-height:90px; padding:8px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; }
#demo-screen .demo-calendar-day>span { display:block; text-align:right; font-size:12px; color:#64748b; margin-bottom:8px; }
#demo-screen .demo-calendar .fc-event { display:block; width:100%; border:0; text-align:left; padding:4px; border-radius:4px; font-size:11px; color:#0f766e; background:#ccfbf1; margin-bottom:3px; }
#demo-screen .demo-calendar-day--empty { background:#f8fafc; }
#demo-screen .demo-inbox-row { display:flex; align-items:flex-start; gap:16px; padding:14px 0; }
#demo-screen .demo-inbox-row>div { flex:1; }
#demo-screen .demo-inbox-row p { margin:8px 0; font-size:13px; color:#64748b; }
#demo-screen .demo-avatar { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#e0f2fe; color:#0369a1; font-weight:700; }
#demo-screen .demo-profile-heading { display:flex; align-items:center; gap:20px; }
#demo-screen .demo-profile-heading .demo-avatar { width:72px; height:72px; font-size:24px; }
#demo-screen .demo-profile-heading h2 { font-size:24px; }
#demo-screen .demo-org-tree { display:flex; align-items:center; flex-direction:column; padding:30px 0; overflow:auto; }
#demo-screen .demo-org-node { display:flex; flex-direction:column; align-items:center; gap:10px; background:#fff; border:1px solid #cbd5e1; border-top:4px solid #0ea5e9; border-radius:10px; padding:20px; min-width:175px; }
#demo-screen .demo-org-node>span:last-child { font-size:12px; color:#64748b; }
#demo-screen .demo-org-connector { height:40px; width:1px; background:#cbd5e1; }
#demo-screen .demo-org-children { display:flex; gap:32px; border-top:1px solid #cbd5e1; padding-top:24px; }
#demo-screen .nb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#demo-screen .nb-cell { display:flex; flex-direction:column; text-align:left; gap:16px; background:color-mix(in srgb,var(--c) var(--i),white); border:1px solid var(--c); border-radius:10px; padding:20px; min-height:120px; }
#demo-screen .nb-cell__label { font-weight:600; font-size:13px; }
#demo-screen .nb-cell__n { font-size:26px; font-weight:700; }
#demo-screen .nb-ylabel,#demo-screen .nb-xlabel { padding:10px; color:#64748b; }
#demo-screen .demo-upload-zone { display:flex; align-items:center; flex-direction:column; gap:20px; border:2px dashed #cbd5e1; border-radius:14px; padding:40px 20px; }
#demo-screen .demo-upload-zone>span { font-size:12px; color:#64748b; }
#demo-screen .demo-chart-row { display:grid; grid-template-columns:130px 1fr 90px; gap:20px; align-items:center; padding:14px 0; }
#demo-screen .demo-chart-row>div { background:#f1f5f9; height:24px; border-radius:4px; overflow:hidden; }
#demo-screen .demo-chart-row>div>span { display:block; height:100%; background:#38bdf8; }
#demo-screen .demo-chart-row>span,#demo-screen .demo-chart-row>strong { font-size:13px; }
#demo-screen .demo-document-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; }
#demo-screen .demo-document-layout aside { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
#demo-screen .demo-document-layout aside h3 { font-size:16px; }
#demo-screen .demo-chat { min-height:320px; display:flex; flex-direction:column; }
#demo-screen .demo-chat-message { padding:18px; background:#f1f5f9; border-radius:12px; max-width:85%; margin:12px 0; }
#demo-screen .demo-chat-message p { margin:8px 0 0; }
#demo-screen .demo-chat-message--user { background:#e0f2fe; margin-left:auto; }
#demo-screen .demo-chat-composer { margin-top:auto; display:flex; gap:12px; padding-top:28px; }
#demo-screen .demo-clock-status { font-size:24px; font-weight:600; padding:24px 0; }
#demo-screen .demo-budget-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px 0; border-bottom:1px solid #e2e8f0; }
#demo-screen .demo-budget-row progress { grid-column:1/-1; width:100%; height:10px; accent-color:#0ea5e9; }
#demo-screen .demo-budget-row>span { text-align:right; }
#demo-screen .demo-pipeline-card { display:block; text-align:left; width:100%; color:inherit; }
#demo-screen [hidden] { display:none!important; }
@media(max-width:1100px) { #demo-screen .demo-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #demo-screen .demo-dashboard-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { #demo-screen .demo-product-form,#demo-screen .demo-card-grid,#demo-screen .demo-document-layout { grid-template-columns:1fr; } #demo-screen .demo-adapter-body { padding:16px; } #demo-screen .nb-cell { padding:10px; } #demo-screen .demo-chart-row { grid-template-columns:90px 1fr 70px; gap:8px; } }
/* Approval template builder mirrors the production settings workspace. */
.demo-approval-workspace .mta-settings-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; }
.demo-approval-menu { display:flex; flex-direction:column; gap:10px; align-self:start; }
.demo-approval-menu button { text-align:left; white-space:normal; padding:14px; }
.demo-approval-content { min-width:0; }
.demo-template-list { display:grid; gap:16px; margin-top:20px; }
.demo-template-list details,.demo-template-editor { padding:22px; }
.demo-template-list summary { cursor:pointer; }
.demo-template-tier { border:1px solid #dbe6e2; border-radius:10px; padding:18px; margin:18px 0; }
.demo-template-tier legend { float:none; width:auto; font-size:14px; padding:0 8px; }
.demo-template-tier select[multiple] { min-height:110px; }
.demo-template-editor .demo-row-actions { flex-wrap:wrap; }
#demo-template-error { color:#a52d35; margin-top:12px; }
@media(max-width:900px) { .demo-approval-workspace .mta-settings-layout { grid-template-columns:1fr; }.demo-approval-menu { flex-direction:row; flex-wrap:wrap; } }