:root{--ink:#0f2236;--navy:#101e2f;--navy2:#162a3f;--teal:#0b8f96;--teal2:#0a7c86;--bg:#f5f7fa;--card:#fff;--text:#0f2236;--muted:#7b8a99;--green:#12c27e;--orange:#f5a623;--amber:#f5b014;--red:#e5484d;--line:#e8edf2;--blue:#e6f4fb}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;background:var(--navy);color:var(--text);font-size:14px}
.hidden{display:none!important}.muted{color:var(--muted)}.spacer{flex:1}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f2236,#0b5563)}
.login-card{background:#fff;padding:32px;border-radius:18px;width:min(380px,92vw);display:flex;flex-direction:column;gap:8px;text-align:center}
.login-card label{text-align:right;font-weight:600;margin-top:6px}.logo{font-size:44px}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%;color:var(--text)}
textarea{min-height:80px;resize:vertical}
.btn{font:inherit;border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:10px;cursor:pointer;color:var(--text)}
.btn:hover{background:#f3f7f9}.btn.primary{background:linear-gradient(90deg,#0e9aa2,var(--teal2));border-color:var(--teal);color:#fff;font-weight:700}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.ok{background:var(--green);border-color:var(--green);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}.btn.block{width:100%;padding:12px}.btn.sm{padding:4px 10px;font-size:12px}
.err{color:var(--red);min-height:20px}
/* ===== الهيكل ===== */
.app{display:flex;min-height:100vh;background:var(--navy)}
.sidebar{width:236px;background:var(--navy);color:#cfdbe6;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto;padding:0 14px 16px}
.brand{padding:34px 8px 22px;font-size:23px;font-weight:800;color:#fff}
#nav a{display:flex;gap:12px;align-items:center;padding:11px 14px;color:#cfdbe6;text-decoration:none;margin:3px 0;border-radius:11px;font-size:14px}
#nav a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.9}
#nav a:hover{background:var(--navy2)}
#nav a.active{background:linear-gradient(90deg,#0e9aa2,#0b7f8a);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(14,154,162,.28)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;gap:12px;align-items:center;padding:14px 22px;background:var(--navy);position:sticky;top:0;z-index:5;color:#e8f0f6}
.topbar .btn{color:#e8f0f6}.topbar .btn:hover{background:var(--navy2)}
.search{max-width:380px;background:#1a2e44;border:1px solid #223a53;color:#e8f0f6;padding-right:38px;border-radius:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cfdbe6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.search::placeholder{color:#9db0c1}
.who{display:flex;align-items:center;gap:10px;line-height:1.25}.who .txt{display:flex;flex-direction:column;text-align:right}.who small{color:#9db0c1;font-size:11px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0e9aa2,#134b6b);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.menu-btn{display:none}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.on{background:var(--green)}.dot.off{background:var(--red)}
.badge{background:var(--red);color:#fff;border-radius:20px;padding:1px 7px;font-size:11px}
.content{padding:26px 26px 40px;background:var(--bg);flex:1;border-top-right-radius:20px;border-top-left-radius:20px;margin:0 0 0 0}
h2{margin:0 0 16px;font-size:28px;font-weight:800;color:var(--ink)}h3{margin:0 0 12px;font-size:17px;font-weight:800}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:30px;font-weight:800}.page-head p{margin:4px 0 0;color:var(--muted)}
.head-tools{display:flex;gap:10px}.head-tools .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;display:flex;gap:10px;align-items:center;min-width:150px;justify-content:space-between}
.head-tools select{border:0;background:transparent;padding:0;font-weight:600;appearance:none;width:auto;cursor:pointer}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border-radius:16px;padding:18px;border:1px solid var(--line);box-shadow:0 2px 12px rgba(15,34,54,.04)}
.stat .v{font-size:26px;font-weight:800;margin-top:4px}.stat .l{color:var(--muted)}
/* بطاقات الإحصاء كما في التصميم */
.stat2{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px 12px;position:relative;overflow:hidden;min-height:122px}
.s-top{display:flex;gap:14px;align-items:flex-start}
.s-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff}
.s-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s-ico.teal{background:#10b8a0}.s-ico.amber{background:#f6b11a}
.s-label{color:var(--ink);font-size:13px;font-weight:600;text-align:right}.s-val{font-size:30px;font-weight:800;line-height:1.15;margin-top:2px}
.s-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px;height:34px}
.up{color:var(--green);font-weight:700;font-size:13px}.down{color:var(--red);font-weight:700;font-size:13px}.flat{color:var(--muted);font-size:13px}
.spark{display:flex;align-items:flex-end;gap:2px;height:30px}.spark i{width:4px;background:#cfe4f3;border-radius:2px 2px 0 0;display:block}
.dash-grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:16px}
.dash-grid3{display:grid;grid-template-columns:2.2fr 1fr;gap:16px;margin-top:16px}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.card-h h3{margin:0}
.legend{display:flex;gap:18px;justify-content:center;margin:2px 0 6px;font-size:12px;color:#51606f}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-left:6px;vertical-align:-1px}
#chHours{width:100%;height:290px;display:block}
.mapwrap{position:relative;border-radius:12px;overflow:hidden}.mapwrap #dmap{height:270px}
.map-legend{position:absolute;top:12px;right:12px;z-index:500;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 4px 14px rgba(0,0,0,.15);font-size:13px;display:grid;gap:8px}
.map-legend span{display:flex;align-items:center;gap:8px}.map-legend b{width:11px;height:11px;border-radius:50%;display:inline-block}
.sys-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}.sys-row:last-child{border:0}
.sys-row .st{display:flex;align-items:center;gap:8px;color:var(--muted)}
.sys-row .st i{width:10px;height:10px;border-radius:50%;background:var(--green);display:inline-block}.sys-row .st i.gray{background:#b6c1cb}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}.toolbar>*{width:auto;min-width:130px}
table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:#51606f;font-weight:600;font-size:13px;white-space:nowrap;background:#f3f6f9}th:first-child{border-radius:0 10px 10px 0}th:last-child{border-radius:10px 0 0 10px}
tr.click{cursor:pointer}tr.click:hover{background:#f7fafb}
.tbl{overflow:auto}.pill{display:inline-block;padding:4px 12px;border-radius:8px;font-size:12px;font-weight:700;border:1px solid transparent}
.p-green{background:#e3f8ee;color:#12a463;border-color:#bfeed7}.p-orange{background:#fff1dc;color:#d9830a;border-color:#fbdcae}.p-red{background:#fde8e9;color:var(--red);border-color:#f8c9cb}
.p-gray{background:#eef2f5;color:#586a74;border-color:#dfe6eb}.p-teal{background:#e3f4fb;color:#0b8f96;border-color:#bfe3f1}
.uc{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:12px}
#map,.minimap{height:480px;border-radius:14px;z-index:1}.minimap{height:300px}
.modal{position:fixed;inset:0;background:rgba(5,20,30,.55);display:grid;place-items:center;z-index:50;padding:14px}
.modal-card{background:#fff;border-radius:16px;padding:18px;width:min(760px,100%);max-height:92vh;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:17px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;margin-bottom:10px}.kv span:nth-child(odd){color:var(--muted)}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.doc{border:1px solid var(--line);border-radius:12px;padding:10px}
.doc img{width:100%;height:120px;object-fit:cover;border-radius:8px;background:#eef3f5}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.form{display:grid;gap:10px;max-width:560px}.form label{font-weight:600}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:12px;z-index:99}
.toast.err{background:var(--red)}.chat{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:10px 0}
.msg{padding:8px 12px;border-radius:12px;max-width:80%}.msg.user{background:#eef3f5}.msg.admin{background:#dff3f4;align-self:flex-end}
.list-item{padding:10px;border-bottom:1px solid var(--line);cursor:pointer}.list-item:hover,.list-item.sel{background:#f3f8fa}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.dash-grid2,.dash-grid3{grid-template-columns:1fr}.g3,.g2{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{position:fixed;right:0;z-index:20;transform:translateX(100%);transition:.2s}.sidebar.open{transform:none}.menu-btn{display:inline-block}.who .txt{display:none}.content{border-radius:0;padding:16px}}
@media print{.sidebar,.topbar,.toolbar .btn{display:none!important}.content{padding:0}}

.welcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:10px 0 24px}.welcome-slot{display:grid;gap:8px;align-content:start;background:#f7f9fa;padding:10px;border:1px solid var(--line);border-radius:12px}.welcome-slot label{font-weight:700}.welcome-file{font-size:12px;padding:6px}.image-preview{min-height:120px;border:1px dashed #b8c8d1;border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;overflow:hidden}.image-preview:disabled{cursor:default}.welcome-thumbnail{display:block;width:100%;height:130px;object-fit:contain;background:#0a0f1b}.ticket-attachment{display:block;max-width:min(260px,70vw);max-height:190px;object-fit:cover;border-radius:10px;margin:8px 0}.ticket-file{display:inline-block;margin:8px;color:var(--teal2)}.rating-summary{margin:10px 0;padding:10px;border-radius:10px;background:#fff8df;color:#8a6410;font-weight:700}