:root{--color-primary: #0046ff;--color-primary-600: #1f6feb;--color-bg: #ffffff;--color-bg-muted: #f9fafb;--color-text: #11224e;--color-text-muted: #4b5563;--color-border: #e5e7eb;--color-success: #16a34a;--color-warning: #d97706;--color-danger: #dc2626;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-heading: "Tajawal", "Inter", sans-serif;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--radius: 10px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 3px 6px rgba(0, 0, 0, .1);--bp-sm: 640px;--bp-md: 768px;--bp-lg: 1024px;--bp-xl: 1280px;--ease: cubic-bezier(.2, .8, .2, 1);--speed: .22s}@media(prefers-color-scheme:dark){:root{--color-bg: #0d1117;--color-bg-muted: #111827;--color-text: #e6edf3;--color-text-muted: #a0aec0;--color-border: #30363d}}:root[data-theme=dark]{--color-bg: #0d1117;--color-bg-muted: #111827;--color-text: #e6edf3;--color-text-muted: #a0aec0;--color-border: #30363d}:root[data-theme=light]{--color-bg: #ffffff;--color-bg-muted: #f9fafb;--color-text: #11224e;--color-text-muted: #4b5563;--color-border: #e5e7eb}*,*:before,*:after{box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);transition:background-color var(--speed) var(--ease),color var(--speed) var(--ease)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:grid;place-items:center}.modal{background-color:var(--color-bg);border-radius:var(--radius);box-shadow:var(--shadow-md);width:90%;max-width:500px}.modal[data-size=sm]{max-width:300px}.modal[data-size=lg]{max-width:800px}.modal-header,.modal-body,.modal-footer{padding:var(--space-md)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border)}.modal-footer{border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-sm)}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--color-border)}th[aria-sort]{cursor:pointer}.loader[data-type=spinner]{width:24px;height:24px;border:2px solid var(--color-primary);border-bottom-color:transparent;border-radius:50%;display:inline-block;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-component=Sidebar]{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width, 250px);background-color:var(--color-bg-muted);border-right:1px solid var(--color-border);transition:width var(--speed) var(--ease),padding var(--speed) var(--ease);padding:var(--space-md);display:flex;flex-direction:column}[data-component=Sidebar][data-state=collapsed]{--sidebar-width: 80px;padding:var(--space-md) var(--space-sm)}.sidebar-header{margin-bottom:var(--space-lg);display:flex;align-items:center;justify-content:space-between}.sidebar-title{transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)}[data-component=Sidebar][data-state=collapsed] .sidebar-title{opacity:0;transform:translate(-10px);pointer-events:none}.sidebar-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-sm)}.sidebar-nav li a{display:block;padding:var(--space-sm) var(--space-md);color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius)}.sidebar-nav li a,.sidebar-nav li a>*{white-space:nowrap;overflow:hidden}.sidebar-nav li a:hover{background-color:var(--color-bg);color:var(--color-text)}[data-component=Sidebar][data-state=collapsed] .sidebar-toggle{margin:0 auto}.main-content{transition:margin-inline-start var(--speed) var(--ease)}body:has([data-component=Sidebar][data-state=default]) .main-content{margin-inline-start:var(--sidebar-width, 250px)}body:has([data-component=Sidebar][data-state=collapsed]) .main-content{margin-inline-start:var(--sidebar-width, 80px)}