/* ZAVI ONE visual language — ADMIN V24.1. CSS-only redesign; all existing DOM IDs and backend calls preserved. */
:root{--navy:#092b55;--navy2:#061c3a;--cyan:#008df6;--line:#dce8f6;--bg:#eff5fd;--ink:#10294e;--muted:#647c9c;--soft:#e7f6ff;--shadow:0 8px 28px rgba(20,62,123,.085)}
body{background:linear-gradient(135deg,#eaf4ff 0%,#f6faff 55%,#eaf4fd 100%);color:var(--ink);font-family:Tahoma,'Noto Sans Arabic',Arial,sans-serif}
.sidebar{width:258px;background:linear-gradient(165deg,#061a39 0%,#092e59 50%,#051c3b 100%);border-left:1px solid #215080;padding:20px 12px;box-shadow:-5px 0 26px #072b4a20}
.brand{padding:12px 10px 18px;border-radius:17px;background:#06172e80;gap:10px;justify-content:center}.brand img{width:48px;height:48px;filter:drop-shadow(0 4px 8px #009bff60)}.brand strong{font-size:22px;white-space:nowrap}.brand strong span{color:#f4faff}.brand small{font-size:11px;color:#99b9e4}.sidebar-caption{text-align:center;color:#91b9e3;font-size:12px;padding:14px 6px 17px}
.nav{gap:7px}.nav-item{min-height:48px;display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:12px;color:#e0eafb;font-size:14px;padding:11px 14px;transition:background .2s,transform .2s}.nav-item span{width:29px;font-size:23px;text-align:center}.nav-item:hover{background:#1a5386;color:white;transform:translateX(-2px)}.nav-item.selected{background:linear-gradient(115deg,#0787ff,#0068e8);box-shadow:0 9px 22px #0077f445;border-color:#58b2ff55;color:#fff}
.sidebar-bottom{padding:13px 5px 6px}.zavi-side-secure{display:flex;align-items:center;gap:11px;padding:13px 10px;border:1px solid #75c8ff60;background:linear-gradient(120deg,#ebfbff,#b9e7ff);color:#08744e;border-radius:14px;margin-bottom:13px}.zavi-shield{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#00b36f;color:#fff;font-size:22px;box-shadow:0 5px 13px #00a96966}.zavi-side-secure b{display:block;font-size:13px}.zavi-side-secure small{display:block!important;color:#466b8b!important;font-size:10px!important;margin:2px 0!important}.role-badge{font-size:12px;color:#b6e9df}.logout-btn{background:#ffffff16;border:1px solid #ffffff22;padding:12px;border-radius:11px}
.workspace{margin-right:258px;width:calc(100% - 258px)}.topbar{height:72px;background:linear-gradient(105deg,#102f5a,#163e73);color:#fff;border:0;box-shadow:0 3px 12px #0d376021}.breadcrumbs,.breadcrumbs b{color:#f4f8ff}.breadcrumbs span{color:#69c9ff}.icon-btn{background:#ffffff15;color:#fff;border:1px solid #ffffff35;border-radius:12px}.avatar{background:linear-gradient(130deg,#149bff,#0059dc);box-shadow:0 5px 12px #008dff55;color:#fff}.live-status{background:#ffffff16;border:1px solid #ffffff25;border-radius:30px;padding:8px 12px;color:#f4fffe}.live-status i{background:#00e18d;box-shadow:0 0 0 4px #00d38830}
main{padding:25px 26px;max-width:1700px;margin:auto}.page-head{margin-bottom:22px}.page-head h1{font-size:27px;color:#102f5b}.page-head p{color:#6a83a3}
.metric-grid{gap:15px}.metric,.fin-metric{border:1px solid #dce9f8;background:linear-gradient(135deg,#fff,#f9fcff);border-radius:17px;box-shadow:0 5px 17px #0c3d7710;position:relative;overflow:hidden}.metric:before,.fin-metric:before{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:linear-gradient(#009dff,#00d0b2)}.metric:nth-child(2):before,.fin-metric:nth-child(2):before{background:linear-gradient(#fe3d6e,#ff9b57)}.metric:nth-child(3):before,.fin-metric:nth-child(3):before{background:linear-gradient(#8950ff,#ba7dff)}.metric:nth-child(4):before,.fin-metric:nth-child(4):before{background:linear-gradient(#ff9500,#ffbf52)}.metric-icon{background:linear-gradient(130deg,#149eff,#0068f0);color:#fff;border-radius:13px;box-shadow:0 8px 16px #087de438}.metric.warn .metric-icon{background:linear-gradient(130deg,#ffad2c,#ff8000);color:#fff}.metric.alert .metric-icon{background:linear-gradient(130deg,#ff5a7c,#fa285b);color:#fff}.metric strong{font-size:30px;color:#0b2d56}.metric .label{font-weight:700;color:#4f7098}
.panel{border:1px solid #dce8f8;background:#ffffffed;border-radius:18px;box-shadow:0 6px 23px #0c3d7710}.panel-heading h2{color:#0b2c54}.button{border-radius:11px;transition:transform .15s,box-shadow .15s}.button:hover:not(:disabled){transform:translateY(-1px)}.button.primary{background:linear-gradient(115deg,#006cf5,#0d9bff);box-shadow:0 7px 17px #168bff36}.button.danger{background:#ffedf0;color:#d52a4d}.button.ghost{background:#f1f7ff;border-color:#d9e7fa;color:#1767ad}.data-table{border-collapse:separate;border-spacing:0}.data-table th{background:#eaf3ff;color:#234773;font-size:12px;border-top:1px solid #d9e8fa;border-bottom:1px solid #d9e8fa}.data-table td{border-bottom:1px solid #e5effa}.data-table tbody tr:nth-child(even){background:#f9fcff}.data-table tbody tr:hover{background:#eaf5ff}.status.active{background:#e5fff0;color:#00884f}.status.warning{background:#fff3df;color:#a76b00}.status.expired{background:#ffe9ee;color:#c91c48}.chartbar{background:linear-gradient(0deg,#0071e9,#18c5ed)}.fin-chart-rail>div{background:linear-gradient(0deg,#0071e9,#15c6e9)}
input,select,textarea{border-color:#d5e5f8;border-radius:11px;background:#fff}input:focus,select:focus,textarea:focus{border-color:#0a91ff;box-shadow:0 0 0 3px #0a91ff19}.modal-bg{background:#061e3cc9;backdrop-filter:blur(5px)}.modal-card{border-radius:22px;border:1px solid #e5effc}.modal-head{border-bottom:1px solid #e6eff9;padding-bottom:14px}.auth-wrapper{background:#f0f7ff}.auth-card{background:#fff}.auth-promo{background:radial-gradient(circle at 70% 20%,#0878d4 0%,#063d83 38%,#061b3d 88%)}.auth-logo strong span{color:#007cff}.auth-card h1{color:#0a2b54}.capsule{background:#ffffff24}.security-note{background:#eff7ff;border-color:#dceafb}.notice{background:#eef7ff;border-color:#d7eafa}.notice.warn{background:#fff8e9;border-color:#f2dfaa}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{width:275px}.workspace{width:100%;margin-right:0}.topbar{height:65px}.nav-item{min-height:46px}main{padding:17px 12px}.metric-grid{gap:9px}.metric{min-height:125px;padding:14px}.metric strong{font-size:24px}.panel{padding:15px}.page-head h1{font-size:22px}.auth-promo{display:none}.auth-card{padding:25px}.zavi-side-secure{padding:10px}}
@media(max-width:390px){.metric-grid,.fin-cards{grid-template-columns:1fr 1fr}.metric{padding:11px}.metric strong{font-size:21px}.metric-icon{font-size:18px}.breadcrumbs{font-size:10px}.top-actions{gap:4px}.live-status{padding:5px 7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}