/* UX prototype screens in the shadcn/ui visual language (zinc neutrals, 0.5rem radius, subtle
   borders and shadows). Scoped under .sc so the workspace can show screens next to its own UI.
   --sc-primary and --sc-accent come from the UX model's design tokens. */
.sc{--sc-bg:#fff;--sc-fg:#09090b;--sc-card:#fff;--sc-muted:#f4f4f5;--sc-muted-fg:#71717a;--sc-border:#e4e4e7;--sc-input:#e4e4e7;--sc-primary:#18181b;--sc-primary-fg:#fafafa;--sc-accent:#f4f4f5;--sc-destructive:#dc2626;--sc-success:#16a34a;--sc-ring:#a1a1aa;--sc-radius:.5rem;
 font:14px/1.5 "Inter","Noto Sans Arabic","Noto Kufi Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--sc-fg);background:var(--sc-bg);-webkit-font-smoothing:antialiased}
.sc *,.sc *:before,.sc *:after{box-sizing:border-box}
.sc-app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100%;text-align:start}
body:has(> .sc-app){margin:0;min-height:100vh;background:#fff}body > .sc-app{min-height:100vh}
/* Sidebar */
.sc-sidebar{background:#fafafa;border-inline-end:1px solid var(--sc-border);padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.sc-brand{display:flex;gap:10px;align-items:center;padding:6px}.sc-brand b{display:block;font-size:13px;line-height:1.2;font-weight:600}.sc-brand small{font-size:11px;color:var(--sc-muted-fg)}
.sc-logo{flex:0 0 32px;height:32px;border-radius:8px;background:var(--sc-primary);color:var(--sc-primary-fg);display:grid;place-items:center;font-weight:700}
.sc-nav{display:grid;gap:14px}.sc-nav-group{display:grid;gap:2px}.sc-nav-label{margin:0 0 2px;padding:0 8px;font-size:11.5px;font-weight:500;color:var(--sc-muted-fg)}
.sc-nav-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:6px;font-size:13px;color:#3f3f46;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-nav-item:hover{background:var(--sc-muted)}.sc-nav-item.active{background:#f4f4f5;color:var(--sc-fg);font-weight:500}
.sc-nav-icon{flex:0 0 14px;height:14px;border-radius:3px;border:1.5px solid currentColor;opacity:.6}.sc-nav-icon.list{border-radius:2px;box-shadow:inset 0 4px 0 -2px currentColor}.sc-nav-icon.dashboard{border-radius:50%}.sc-nav-icon.detail{border-style:dashed}
/* Header */
.sc-main{min-width:0;display:flex;flex-direction:column;background:#fff}
.sc-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:56px;padding:8px 20px;border-bottom:1px solid var(--sc-border)}
.sc-crumbs{display:flex;gap:6px;align-items:center;font-size:13px;min-width:0}.sc-crumbs b{font-weight:500}
.sc-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Page */
.sc-page{padding:20px;display:grid;gap:16px;align-content:start}.sc-page.narrow{max-width:760px}
.sc-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.sc-head-side{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sc-h1{margin:0 0 2px;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.sc-muted{margin:0;color:var(--sc-muted-fg);font-size:13px}
.sc-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:16px;align-items:start}.sc-split.wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* Card */
.sc-card{background:var(--sc-card);border:1px solid var(--sc-border);border-radius:12px;box-shadow:0 1px 2px 0 rgb(0 0 0/.05);min-width:0}
.sc-card-head{padding:18px 20px 6px;display:grid;gap:4px}.sc-card-title{margin:0;font-size:15px;font-weight:600;line-height:1.2}
.sc-card-body{padding:12px 20px}.sc-card-foot{padding:6px 20px 18px}
/* Form controls */
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sc-grid.one{grid-template-columns:1fr}
.sc-field{display:grid;gap:6px;min-width:0}.sc-field:has(textarea){grid-column:1/-1}
.sc-label{font-size:13px;font-weight:500;line-height:1}.sc-req{color:var(--sc-destructive)}
.sc-input,.sc-textarea,.sc-select{width:100%;height:36px;border:1px solid var(--sc-input);border-radius:var(--sc-radius);background:transparent;padding:4px 12px;font:inherit;font-size:14px;color:inherit;box-shadow:0 1px 2px 0 rgb(0 0 0/.05);outline:none;transition:box-shadow .15s,border-color .15s;margin:0}
.sc-textarea{height:auto;min-height:72px;padding:8px 12px;resize:vertical}.sc-select{width:auto;height:32px;font-size:13px;padding:0 8px}
.sc-input:focus-visible,.sc-textarea:focus-visible,.sc-select:focus-visible{border-color:var(--sc-ring);box-shadow:0 0 0 3px rgb(161 161 170/.35)}
.sc-input:read-only,.sc-textarea:read-only{background:var(--sc-muted)}.sc-input:user-invalid,.sc-textarea:user-invalid{border-color:var(--sc-destructive)}
.sc-search{max-width:260px;height:32px}
/* Buttons and badges */
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--sc-radius);border:1px solid transparent;font:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;background:var(--sc-primary);color:var(--sc-primary-fg);box-shadow:0 1px 2px 0 rgb(0 0 0/.05);transition:opacity .15s,background .15s}
.sc-btn:hover{opacity:.9}.sc-btn:disabled{opacity:.5;cursor:not-allowed}.sc-btn.sm{height:32px;padding:0 12px;font-size:13px}
.sc-btn.outline{background:var(--sc-bg);color:var(--sc-fg);border-color:var(--sc-input)}.sc-btn.outline:hover{background:var(--sc-muted);opacity:1}
.sc-btn.ghost{background:transparent;color:var(--sc-fg);box-shadow:none}.sc-btn.ghost:hover{background:var(--sc-muted);opacity:1}
.sc-btn.destructive-outline{background:var(--sc-bg);color:var(--sc-destructive);border-color:#fecaca}
.sc-actions{display:flex;gap:8px;flex-wrap:wrap}
.sc-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:500;white-space:nowrap;background:var(--sc-muted);color:#3f3f46}
.sc-badge.outline{background:transparent;border-color:var(--sc-border);color:var(--sc-fg)}.sc-badge.destructive{background:#fef2f2;color:var(--sc-destructive)}.sc-badge.success{background:#f0fdf4;color:var(--sc-success)}
.sc-switch{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sc-muted-fg)}.sc-switch input{accent-color:var(--sc-primary)}
.sc-alert{border:1px solid var(--sc-border);border-radius:var(--sc-radius);padding:10px 14px;font-size:13px;background:#f0fdf4;color:#166534;border-color:#bbf7d0}.sc-alert.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
/* Table */
.sc-table-card{overflow:hidden}.sc-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--sc-border)}
.sc-table{width:100%;border-collapse:collapse;font-size:13px}.sc-table th{height:40px;padding:0 12px;text-align:start;font-weight:500;color:var(--sc-muted-fg);border-bottom:1px solid var(--sc-border);white-space:nowrap}
.sc-table td{padding:10px 12px;border-bottom:1px solid var(--sc-border)}.sc-table tbody tr:last-child td{border-bottom:0}.sc-table tbody tr:hover{background:#fafafa}
/* Dashboard */
.sc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.sc-kpi{padding:16px 18px;display:grid;gap:4px}.sc-kpi b{font-size:24px;font-weight:600;letter-spacing:-.02em}
.sc-trend{font-size:12px;font-weight:500}.sc-trend.up{color:var(--sc-success)}.sc-trend.down{color:var(--sc-destructive)}
.sc-bars{display:flex;align-items:flex-end;gap:12px;height:170px}.sc-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.sc-bar i{display:block;width:100%;max-width:38px;border-radius:6px 6px 2px 2px;background:var(--sc-primary)}.sc-bar small{font-size:11px;color:var(--sc-muted-fg)}
/* Record lifecycle and activity */
.sc-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}.sc-steps li{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--sc-muted-fg)}.sc-steps li.on{color:var(--sc-fg);font-weight:500}
.sc-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--sc-border)}.sc-steps li.on .sc-dot{background:var(--sc-primary);border-color:var(--sc-primary)}
.sc-activity{list-style:none;margin:0;padding:0;display:grid;gap:8px}.sc-activity li{display:flex;gap:10px;align-items:center;font-size:13px}.sc-activity small{margin-inline-start:auto}
@media(max-width:820px){.sc-app{grid-template-columns:1fr}.sc-sidebar{border-inline-end:0;border-bottom:1px solid var(--sc-border)}.sc-nav{grid-auto-flow:column;overflow-x:auto}.sc-nav-group{grid-auto-flow:column}.sc-nav-label{display:none}.sc-split,.sc-split.wide,.sc-grid{grid-template-columns:1fr}.sc-page{padding:14px}}
/* When screens sit inside another page (the workspace), its element styles must not leak in. */
.sc button,.sc input,.sc select,.sc textarea,.sc label,.sc p,.sc h1,.sc h3,.sc ul,.sc ol{margin:0}.sc label.sc-label{display:block;color:var(--sc-fg)}.sc input[type=checkbox]{width:auto;display:inline-block;height:auto;box-shadow:none}
.sc .sc-btn:hover{background:var(--sc-primary)}.sc .sc-btn.outline:hover,.sc .sc-btn.ghost:hover{background:var(--sc-muted)}.sc .sc-btn.destructive-outline:hover{background:#fef2f2}.sc .sc-btn:active{transform:none}
.sc li{line-height:1.5}