@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--navy:#172b4d;--blue:#2457a7;--pale:#f4f7fb;--line:#e6ebf2;--muted:#718096;--text:#1f2937;--white:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--pale);color:var(--text);font-family:'Cairo',Tahoma,Arial,sans-serif}
.app-shell{min-height:100vh;display:flex}.sidebar{width:255px;background:#fff;border-left:1px solid var(--line);padding:25px 17px;display:flex;flex-direction:column;flex-shrink:0}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 30px}.brand-mark{width:43px;height:43px;border-radius:13px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;direction:ltr}.brand strong{display:block;font-size:15px;color:var(--navy)}.brand small{color:var(--muted);font-size:11px}
.nav-label{font-size:11px;color:#9aa5b4;padding:0 12px 12px}.nav-item{border:0;background:transparent;width:100%;padding:12px 13px;text-align:right;border-radius:10px;color:#5c6879;font:600 13px 'Cairo',sans-serif;cursor:pointer;margin:3px 0}.nav-item span{display:inline-block;width:27px;font-size:17px;vertical-align:middle}.nav-item:hover,.nav-item.active{background:#edf3fc;color:var(--blue)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:18px 7px 0;color:var(--muted);font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e4a23b;margin-left:7px}
.main{max-width:1600px;width:calc(100% - 255px);padding:27px 34px 18px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#8b97a8;direction:ltr;text-align:right}.topbar h1{font-size:25px;margin:2px 0 0;color:var(--navy)}.top-actions{display:flex;align-items:center;gap:15px}.today{font-size:12px;color:var(--muted)}.avatar{width:37px;height:37px;border-radius:50%;background:#e8eef8;color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:800;direction:ltr}
.notice{background:#fff8e9;border:1px solid #f5e4bd;color:#795a1d;border-radius:11px;padding:11px 15px;display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:22px}.notice strong{white-space:nowrap}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:22px 0 13px}.section-head h2{font-size:16px;color:var(--navy);margin:0}.muted{color:var(--muted);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 18px;box-shadow:0 3px 12px #172b4d05}.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.stat-icon{width:34px;height:34px;border-radius:10px;background:#edf3fc;color:var(--blue);display:grid;place-items:center;font-size:17px}.stat strong{display:block;font-size:27px;color:var(--navy);margin-top:10px;direction:ltr;text-align:right}.stat small{color:#98a2b1;font-size:10px}
.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;margin-top:16px}.panel h3{font-size:14px;color:var(--navy);margin:0 0 14px}.split{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}.status-row{display:grid;grid-template-columns:100px 1fr 35px;align-items:center;gap:10px;margin:14px 0;font-size:12px}.bar{height:8px;background:#edf1f6;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;border-radius:9px;background:#4778c5}.status-row b{font-size:12px}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}.search{flex:1;min-width:210px;border:1px solid var(--line);border-radius:9px;padding:10px 13px;font:12px 'Cairo';outline:none;background:#fff}.select,.field{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff;font:12px 'Cairo';color:var(--text)}.btn{border:0;border-radius:9px;padding:10px 16px;background:var(--blue);color:#fff;font:600 12px 'Cairo';cursor:pointer}.btn.secondary{background:#edf3fc;color:var(--blue)}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 14px;text-align:right;border-bottom:1px solid #eef1f5;font-size:12px;white-space:nowrap}th{background:#f8fafc;color:#778397;font-weight:700}td{color:#39465a}tr:last-child td{border-bottom:0}tbody tr{cursor:pointer}tbody tr:hover{background:#fafcff}.order-no{color:var(--blue);font-weight:800;direction:ltr;display:inline-block}.status{padding:4px 9px;border-radius:20px;font-size:10px;font-weight:700}.s-yellow{background:#fff2c9;color:#8a6500}.s-blue{background:#e5efff;color:#285ba7}.s-green{background:#e1f5e9;color:#227447}.s-purple{background:#f0e9ff;color:#7143a8}.s-red{background:#ffe7e7;color:#b33d3d}.s-gray{background:#edf0f4;color:#687386}
.empty{padding:35px;text-align:center;color:var(--muted);font-size:13px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.detail{background:#f8fafc;border-radius:9px;padding:12px}.detail small{display:block;color:var(--muted);font-size:10px}.detail b{font-size:13px}.modal-backdrop{position:fixed;inset:0;background:#101c2d88;display:grid;place-items:center;padding:20px;z-index:5}.modal{background:#fff;border-radius:15px;padding:25px;width:min(620px,100%);max-height:90vh;overflow:auto;position:relative}.close{position:absolute;left:15px;top:10px;border:0;background:transparent;font-size:25px;cursor:pointer;color:#778397}.modal h2{font-size:18px;color:var(--navy);margin:0 0 18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{font-size:11px;color:var(--muted)}.form-grid input,.form-grid textarea,.form-grid select{display:block;width:100%;margin-top:5px}.form-grid textarea{min-height:70px}.full{grid-column:1/-1}footer{padding:25px 2px 0;color:#a1aab7;font-size:10px;display:flex;justify-content:space-between}
@media(max-width:900px){.sidebar{width:205px}.main{width:calc(100% - 205px);padding:22px 18px}.stats{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media(max-width:620px){.app-shell{display:block}.sidebar{width:100%;padding:12px}.brand{padding:4px 7px 12px}.nav-label,.sidebar-foot{display:none}nav{display:flex;overflow:auto;gap:4px}.nav-item{white-space:nowrap;width:auto;padding:8px 10px}.main{width:100%;padding:17px 12px}.topbar h1{font-size:21px}.today{display:none}.stats{gap:9px}.stat{padding:12px}.stat strong{font-size:22px}.notice{align-items:flex-start;display:block}.notice strong{display:block;margin-bottom:4px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}}