:root{--c-bg: #F6F8FB;--c-card: #FFFFFF;--c-border: #E5E9F0;--c-border-2: #EDF0F5;--c-ink: #0F172A;--c-text: #1E293B;--c-muted: #5A6678;--c-light: #5E6B7E;--c-primary: #0B3D5C;--c-primary-2: #0E5A85;--c-primary-3: #E7F1F8;--c-accent: #0EA5E9;--c-accent-soft:#E0F2FE;--c-teal: #0D9488;--c-teal-soft: #CCFBF1;--c-success: #047857;--c-success-soft:#D1FAE5;--c-warning: #B45309;--c-warning-soft:#FEF3C7;--c-danger: #B91C1C;--c-danger-soft:#FEE2E2;--c-mod: #6D28D9;--c-mod-soft: #EDE9FE;--c-coral: #E76F51;--c-tier1: #6D28D9;--c-tier1-soft: #EDE9FE;--c-tier2: #0D9488;--c-tier2-soft: #CCFBF1;--c-tier3: #0E5A85;--c-tier3-soft: #DBEAFE;--c-tier4: #B45309;--c-tier4-soft: #FEF3C7;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 20px;--s6: 24px;--s7: 32px;--s8: 40px;--s9: 56px;--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--r-xl: 20px;--r-full: 999px;--sh-xs: 0 1px 2px rgba(15,23,42,.05);--sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);--sh-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);--sh-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);--sh-xl: 0 24px 60px rgba(15,23,42,.18);--f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", "Cairo", "Tajawal", system-ui, sans-serif;--sidebar-w: 260px;--header-h: 56px;--bottomnav-h: 64px}*{box-sizing:border-box}html{font-size:100%}html,body,#root{margin:0;padding:0;background:var(--c-bg);color:var(--c-text);font-family:var(--f-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer}input,select,textarea,button{font-family:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.navitem:focus-visible,.navitem-b:focus-visible,.role-btn:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-sm)}.sidebar .navitem:focus-visible,.sidebar__foot button:focus-visible{outline-color:#fff}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.app{min-height:100vh;display:flex;background:var(--c-bg)}.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:linear-gradient(180deg,var(--c-primary) 0%,#082B41 100%);color:#fff;display:flex;flex-direction:column;z-index:50;transform:translate(0);transition:transform .25s ease;box-shadow:var(--sh-lg)}.sidebar.closed{transform:translate(-110%)}.sidebar__brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:12px}.sidebar__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--c-accent),var(--c-teal));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:16px;box-shadow:var(--sh-sm)}.sidebar__brand h1{margin:0;font-size:17px;font-weight:700}.sidebar__brand p{margin:2px 0 0;font-size:12px;opacity:.8}.sidebar__role{margin:14px 16px 6px;padding:12px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:12px;display:flex;align-items:center;gap:12px}.sidebar__role__avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;background:#ffffff24}.sidebar__role__name{font-size:14px;font-weight:600;line-height:1.2}.sidebar__role__tier{font-size:11.5px;opacity:.85;letter-spacing:.5px;margin-top:2px;text-transform:uppercase}.sidebar__nav{padding:14px 10px;flex:1;overflow-y:auto}.sidebar__nav-section{font-size:11px;letter-spacing:1.2px;opacity:.65;margin:10px 12px 6px;text-transform:uppercase}.navitem{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:2px 0;border-radius:10px;color:#ffffffd9;font-size:14.5px;font-weight:500;text-decoration:none;background:transparent;border:none;width:100%;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease}.navitem:hover{background:#ffffff0f;color:#fff}.navitem.active{background:#ffffff21;color:#fff;box-shadow:inset 0 0 0 1px #ffffff14}.navitem .badge{margin-left:auto;background:var(--c-coral);color:#fff;border-radius:999px;font-size:11.5px;padding:2px 8px;font-weight:700}.sidebar__foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;opacity:.75;display:flex;justify-content:space-between;align-items:center}.sidebar__foot button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;padding:7px 13px;border-radius:8px;font-size:12.5px}.sidebar__foot button:hover{background:#ffffff14}.main{flex:1;margin-left:var(--sidebar-w);min-width:0;padding-bottom:var(--bottomnav-h)}.topbar{position:sticky;top:0;z-index:30;background:#f6f8fbd9;-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--c-border);padding:12px 24px;display:flex;align-items:center;gap:12px}.topbar__title{font-size:19px;font-weight:700;color:var(--c-ink)}.topbar__sub{font-size:13px;color:var(--c-muted);margin-top:2px}.topbar__spacer{flex:1}.topbar__action{border:1px solid var(--c-border);background:var(--c-card);border-radius:10px;padding:9px 12px;color:var(--c-muted);display:inline-flex;align-items:center;gap:6px;font-size:13.5px}.topbar__action:hover{color:var(--c-primary);border-color:var(--c-primary-2)}.tier-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.4px}.tier-1{background:var(--c-tier1-soft);color:var(--c-tier1)}.tier-2{background:var(--c-tier2-soft);color:var(--c-tier2)}.tier-3{background:var(--c-tier3-soft);color:var(--c-tier3)}.tier-4{background:var(--c-tier4-soft);color:var(--c-tier4)}.container{padding:24px;max-width:1300px;margin:0 auto}.grid{display:grid;gap:var(--s4)}.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-sm)}.card.compact{padding:var(--s4)}.card.flush{padding:0;overflow:hidden}.card__title{font-size:16px;font-weight:700;color:var(--c-ink);margin:0 0 4px}.card__sub{font-size:13px;color:var(--c-muted);margin:0 0 var(--s4)}.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);gap:var(--s3)}.card__head>h3{margin:0;font-size:16px;font-weight:700;color:var(--c-ink)}.stat{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;box-shadow:var(--sh-sm)}.stat:after{content:"";position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:var(--c-accent-soft);opacity:.55}.stat__icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--c-primary-3);color:var(--c-primary);margin-bottom:6px;position:relative;z-index:1}.stat__label{font-size:12.5px;color:var(--c-muted);letter-spacing:.3px;text-transform:uppercase;font-weight:600;position:relative;z-index:1}.stat__value{font-size:28px;font-weight:800;color:var(--c-ink);line-height:1.1;position:relative;z-index:1}.stat__trend{font-size:12.5px;color:var(--c-success);display:inline-flex;align-items:center;gap:4px;margin-top:2px;position:relative;z-index:1}.stat.success .stat__icon{background:var(--c-success-soft);color:var(--c-success)}.stat.warning .stat__icon{background:var(--c-warning-soft);color:var(--c-warning)}.stat.danger .stat__icon{background:var(--c-danger-soft);color:var(--c-danger)}.stat.accent .stat__icon{background:var(--c-accent-soft);color:var(--c-accent)}.stat.teal .stat__icon{background:var(--c-teal-soft);color:var(--c-teal)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--c-primary-3);color:var(--c-primary)}.badge.success{background:var(--c-success-soft);color:var(--c-success)}.badge.warning{background:var(--c-warning-soft);color:var(--c-warning)}.badge.danger{background:var(--c-danger-soft);color:var(--c-danger)}.badge.muted{background:#f1f5f9;color:var(--c-muted)}.badge.accent{background:var(--c-accent-soft);color:var(--c-accent)}.badge.teal{background:var(--c-teal-soft);color:var(--c-teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;border:1px solid transparent;transition:transform .08s ease,box-shadow .12s ease,background .15s ease;background:var(--c-primary);color:#fff;cursor:pointer;min-height:40px}.btn:hover{background:var(--c-primary-2);box-shadow:var(--sh-md)}.btn:active{transform:translateY(1px)}.btn.ghost{background:transparent;color:var(--c-text);border-color:var(--c-border)}.btn.ghost:hover{background:var(--c-card);border-color:var(--c-primary-2);color:var(--c-primary)}.btn.outline{background:var(--c-card);color:var(--c-primary);border-color:var(--c-primary-2)}.btn.outline:hover{background:var(--c-primary-3)}.btn.accent{background:var(--c-accent)}.btn.accent:hover{background:#0284c7}.btn.success{background:var(--c-success)}.btn.danger{background:var(--c-danger)}.btn.sm{padding:7px 13px;font-size:13px;min-height:36px}.btn.lg{padding:12px 20px;font-size:15px;min-height:46px}.btn.block{width:100%}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:13.5px;font-weight:600;color:var(--c-text)}.field input,.field select,.field textarea{border:1px solid var(--c-border);background:var(--c-card);border-radius:10px;padding:11px 14px;font-size:14px;color:var(--c-text);width:100%;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-primary-2);box-shadow:0 0 0 3px var(--c-primary-3)}.field textarea{resize:vertical;min-height:80px}.field .hint{font-size:12.5px;color:var(--c-muted)}.progress{background:#eff3f8;border-radius:999px;height:8px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--c-accent),var(--c-teal));border-radius:999px;transition:width .35s ease}.progress.sm{height:6px}.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--c-border);background:var(--c-card)}.table{width:100%;border-collapse:collapse;min-width:640px}.table th,.table td{padding:12px 14px;text-align:left;font-size:14px;border-bottom:1px solid var(--c-border-2)}.table th{background:#fafbfd;color:var(--c-muted);font-weight:600;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;position:sticky;top:0}.table tbody tr:hover{background:#fafbfd}.table tbody tr:last-child td{border-bottom:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;display:flex;align-items:flex-end;justify-content:center;z-index:100;padding:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--c-card);width:100%;max-width:640px;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-xl);animation:slideUp .25s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal__head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--c-border-2)}.modal__head h3{margin:0;font-size:16px;font-weight:700;color:var(--c-ink)}.modal__head .close{margin-left:auto;background:transparent;border:none;width:32px;height:32px;border-radius:8px;color:var(--c-muted)}.modal__head .close:hover{background:#f1f5f9;color:var(--c-ink)}.modal__body{padding:20px;overflow-y:auto}.modal__foot{padding:14px 20px;border-top:1px solid var(--c-border-2);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.mob-header{display:none;position:sticky;top:0;z-index:40;height:var(--header-h);background:var(--c-card);border-bottom:1px solid var(--c-border);align-items:center;padding:0 var(--s4);gap:var(--s3)}.mob-header__title{font-weight:700;font-size:16px;color:var(--c-ink)}.icon-btn{border:none;background:transparent;width:40px;height:40px;border-radius:10px;color:var(--c-text);display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#f1f5f9}.bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bottomnav-h);background:var(--c-card);border-top:1px solid var(--c-border);z-index:35;padding:6px 4px env(safe-area-inset-bottom,4px);justify-content:space-around;box-shadow:0 -4px 14px #0f172a0f}.bottomnav .navitem-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border:none;background:transparent;color:var(--c-muted);font-size:11.5px;font-weight:600;border-radius:10px}.bottomnav .navitem-b.active{color:var(--c-primary);background:var(--c-primary-3)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top right,var(--c-primary-3),transparent 60%),radial-gradient(circle at bottom left,var(--c-teal-soft),transparent 60%),var(--c-bg)}.login-card{background:var(--c-card);width:100%;max-width:440px;border-radius:20px;padding:36px 32px;box-shadow:var(--sh-lg)}.login-card h2{margin:12px 0 4px;font-size:22px}.login-card .sub{font-size:14px;color:var(--c-muted);margin-bottom:22px}.role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}.role-btn{border:1.5px solid var(--c-border);background:var(--c-card);padding:14px;border-radius:12px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;cursor:pointer;transition:all .15s ease}.role-btn:hover{border-color:var(--c-primary-2);transform:translateY(-1px);box-shadow:var(--sh-md)}.role-btn .role-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}.role-btn .role-name{font-weight:700;font-size:14px;color:var(--c-ink)}.role-btn .role-tier{font-size:11.5px;color:var(--c-muted);font-weight:600;letter-spacing:.4px}.row{display:flex;gap:12px;align-items:center}.row.wrap{flex-wrap:wrap}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.muted{color:var(--c-muted)}.text-sm{font-size:13px}.text-lg{font-size:17px}.text-xl{font-size:21px}.bold{font-weight:700}.center{text-align:center}.hidden-desktop{display:none}.hidden-mobile{display:block}.hero{background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-2) 70%,var(--c-accent) 130%);color:#fff;border-radius:var(--r-lg);padding:22px 24px;position:relative;overflow:hidden;box-shadow:var(--sh-md)}.hero:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:#ffffff14}.hero h2{margin:0 0 4px;font-size:22px;font-weight:700}.hero p{margin:0;opacity:.9;font-size:14.5px}.hero .hero-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}.hero .hero-actions .btn{background:#ffffff24;border:1px solid rgba(255,255,255,.2)}.hero .hero-actions .btn:hover{background:#ffffff38}.rotation{background:linear-gradient(135deg,var(--c-teal) 0%,#0F766E 100%);color:#fff;border-radius:var(--r-lg);padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-sm)}.rotation__icon{width:42px;height:42px;border-radius:12px;background:#ffffff2e;display:flex;align-items:center;justify-content:center}.rotation__txt{flex:1}.rotation__txt .l1{font-size:12.5px;opacity:.9;letter-spacing:.3px}.rotation__txt .l2{font-weight:700;font-size:16px}.rotation__txt .l3{font-size:13px;opacity:.9;margin-top:2px}.rotation .progress{background:#fff3;width:100%;margin-top:8px}.rotation .progress>span{background:#fff}.compliance{display:inline-flex;align-items:center;gap:6px;background:var(--c-teal-soft);color:var(--c-teal);padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700}.flowstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}.flowstrip>div{background:#fafbfd;border:1px solid var(--c-border);padding:10px;border-radius:10px;font-size:12.5px;color:var(--c-muted);text-align:center}.flowstrip>div .n{display:block;font-size:17px;font-weight:800;color:var(--c-primary);margin-bottom:2px}.flowstrip>div b{display:block;color:var(--c-ink);font-size:13px;margin-top:2px}.listrow{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--c-border-2);background:var(--c-card)}.listrow:last-child{border-bottom:none}.listrow__avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-primary-3);color:var(--c-primary);font-weight:700;font-size:13px;flex-shrink:0}.listrow__main{flex:1;min-width:0}.listrow__name{font-weight:600;font-size:14.5px;color:var(--c-ink)}.listrow__meta{font-size:12.5px;color:var(--c-muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}.listrow__right{text-align:right}@media (max-width: 900px){.sidebar{transform:translate(-110%)}.sidebar.open{transform:translate(0)}.main{margin-left:0;padding-bottom:calc(var(--bottomnav-h) + 12px)}.mob-header{display:flex}.topbar{padding:12px 16px}.container{padding:16px}.bottomnav{display:flex}.flowstrip{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.modal{max-width:100%;max-height:96vh}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.role-grid{grid-template-columns:1fr 1fr}.hidden-mobile{display:none}.hidden-desktop{display:block}.hero{padding:18px}.hero h2{font-size:18px}.stat__value{font-size:22px}}@media (max-width: 380px){.grid-3,.grid-4{grid-template-columns:1fr}.container{padding:12px}}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a66;z-index:45;display:none}.sidebar-backdrop.open{display:block}@media print{@page{margin:14mm}body *{visibility:hidden}.report-sheet,.report-sheet *{visibility:visible}.report-sheet{position:absolute;left:0;top:0;right:0;width:100%;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.no-print{display:none!important}}