:root{
  --surface-1:#fcfcfb; --page:#f9f9f7; --text-primary:#0b0b0b; --text-secondary:#52514e;
  --muted:#898781; --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --series-1:#2a78d6;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-bg:#e6f6e6; --warning-bg:#fff6e2; --critical-bg:#fbe9e9;
  --card-radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--page); color:var(--text-primary);
  font-family:"Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  direction:rtl; text-align:right;
}
a{color:var(--series-1);}
header.topbar{
  background:var(--surface-1); border-bottom:1px solid var(--border);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand .logo{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--series-1), #1baf7a); flex:none;}
.brand h1{font-size:15px; margin:0; font-weight:700;}
.brand p{margin:2px 0 0; font-size:11px; color:var(--text-secondary);}
.topbar-actions{display:flex; align-items:center; gap:10px; font-size:13px;}
.topbar-actions .user-chip{color:var(--text-secondary);}
.btn{
  font-family:inherit; font-size:13px; border:1px solid var(--border); background:var(--page);
  color:var(--text-primary); border-radius:8px; padding:8px 14px; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn.primary{background:var(--series-1); color:#fff; border-color:var(--series-1);}
.btn.danger{background:var(--critical-bg); color:var(--critical); border-color:transparent;}
main{max-width:1180px; margin:0 auto; padding:20px 20px 60px;}
nav.guide-tabs{display:flex; gap:4px; margin:0 auto; max-width:1180px; padding:0 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; background:var(--surface-1);}
nav.guide-tabs a{
  font-family:inherit; background:none; border:none; padding:12px 16px; font-size:13px;
  color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; display:inline-block;
}
nav.guide-tabs a.active{color:var(--series-1); border-bottom-color:var(--series-1); font-weight:700;}
.admin-menu{display:flex; gap:4px; margin-inline-start:auto;}
.banner{
  background:var(--warning-bg); border:1px solid var(--border); border-radius:12px;
  padding:12px 16px; font-size:13px; color:var(--text-primary); margin-bottom:20px; display:flex; gap:10px;
}
.banner.info{background:#eaf2fc;}
.banner.error{background:var(--critical-bg); color:var(--critical);}
.banner.success{background:var(--good-bg); color:var(--good);}
section{margin-bottom:26px;}
h2.section-title{font-size:15px; margin:0 0 12px; display:flex; align-items:center; gap:8px;}
h2.section-title .hint{font-size:11px; font-weight:400; color:var(--muted);}
.kpi-row{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:14px;}
@media (max-width:860px){ .kpi-row{grid-template-columns:1fr 1fr;} }
.card{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--card-radius); padding:18px;}
.hero-card{display:flex; flex-direction:column; gap:10px;}
.hero-top{display:flex; align-items:baseline; justify-content:space-between;}
.hero-figure{font-size:40px; font-weight:900; font-variant-numeric:proportional-nums; line-height:1;}
.status-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:20px;}
.status-badge.good{background:var(--good-bg); color:var(--good);}
.status-badge.warning{background:var(--warning-bg); color:#8a5b00;}
.status-badge.critical{background:var(--critical-bg); color:var(--critical);}
.meter{height:10px; border-radius:6px; background:var(--grid); overflow:hidden; position:relative;}
.meter > i{display:block; height:100%; border-radius:6px;}
.meter .target-mark{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--text-primary); opacity:.5;}
.hero-sub{font-size:12px; color:var(--text-secondary); display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px;}
.stat-tile{display:flex; flex-direction:column; gap:6px; justify-content:center;}
.stat-tile .label{font-size:12px; color:var(--text-secondary);}
.stat-tile .value{font-size:24px; font-weight:700; font-variant-numeric:proportional-nums;}
.stat-tile .delta{font-size:12px; color:var(--text-secondary);}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{text-align:right; font-weight:700; color:var(--text-secondary); font-size:11px; padding:8px 10px; border-bottom:1px solid var(--grid);}
tbody td{padding:10px; border-bottom:1px solid var(--grid); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
td.num, th.num{font-variant-numeric:tabular-nums;}
.bar-cell{display:flex; align-items:center; gap:8px; min-width:150px;}
.bar-track{flex:1; height:8px; border-radius:5px; background:var(--grid); overflow:hidden;}
.bar-fill{display:block; height:100%; background:var(--series-1); border-radius:5px;}
.bar-pct{font-size:12px; width:44px; text-align:left; font-variant-numeric:tabular-nums;}
.pill{font-size:11px; padding:3px 9px; border-radius:12px; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.pill.good{background:var(--good-bg); color:var(--good);}
.pill.warning{background:var(--warning-bg); color:#8a5b00;}
.pill.critical{background:var(--critical-bg); color:var(--critical);}
.pill.na{background:var(--grid); color:var(--muted);}
.filters-bar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; background:var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:10px 14px;}
.filters-bar select, .filters-bar input{font-family:inherit; font-size:13px; border:1px solid var(--border); border-radius:8px; padding:7px 10px; background:var(--page); color:var(--text-primary);}
.overview-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px;}
.guide-card{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;}
.guide-card:hover{border-color:var(--series-1);}
.guide-card .g-name{font-size:13px; font-weight:700; color:var(--text-primary);}
.guide-card .g-ratio{font-size:28px; font-weight:900;}
form.form-card{display:flex; flex-direction:column; gap:14px; max-width:520px;}
form.form-card label{font-size:13px; font-weight:700; display:block; margin-bottom:6px;}
form.form-card input, form.form-card select, form.form-card textarea{
  width:100%; font-family:inherit; font-size:14px; border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--page); color:var(--text-primary);
}
.login-wrap{max-width:380px; margin:80px auto; text-align:center;}
.login-wrap .logo{width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg, var(--series-1), #1baf7a); margin:0 auto 16px;}
footer{text-align:center; font-size:11px; color:var(--muted); padding:20px 0 40px;}
.table-wrap{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden;}
.badge-role{font-size:11px; padding:2px 8px; border-radius:10px; background:var(--grid); color:var(--text-secondary);}
.badge-role.admin{background:#e6f0fb; color:var(--series-1);}
#tooltip{position:absolute; pointer-events:none; background:var(--text-primary); color:var(--surface-1); font-size:12px; padding:8px 10px; border-radius:8px; opacity:0; transition:opacity .1s; white-space:nowrap; z-index:30;}
.legend{display:flex; gap:16px; font-size:12px; color:var(--text-secondary); margin-top:8px; flex-wrap:wrap;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:14px; height:3px; border-radius:2px; display:inline-block;}
.legend i.dashed{background:repeating-linear-gradient(90deg, var(--critical) 0 5px, transparent 5px 9px); height:2px;}

.alert-list{display:flex; flex-direction:column; gap:8px;}
.alert-item{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-radius:10px; padding:12px 16px; text-decoration:none; border:1px solid transparent;}
.alert-item.critical{background:var(--critical-bg); color:var(--critical); border-color:rgba(208,59,59,0.25);}
.alert-item.warning{background:var(--warning-bg); color:#8a5b00; border-color:rgba(250,178,25,0.35);}
.alert-item .alert-guide{font-weight:700; font-size:13px;}
.alert-item .alert-msg{font-size:12px;}

.simulator{margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); font-size:12px; color:var(--text-secondary);}
.simulator label{font-weight:700; color:var(--text-primary);}
.simulator input{width:70px; font-family:inherit; font-size:13px; border:1px solid var(--border); border-radius:8px; padding:6px 8px; margin:0 6px;}
.simulator .sim-result{margin-top:6px; font-size:13px; font-weight:700;}

.edit-table{overflow-x:auto;}
.edit-table table{font-size:12px;}
.edit-table input, .edit-table select{
  font-family:inherit; font-size:12px; border:1px solid var(--border); border-radius:6px;
  padding:5px 6px; background:var(--page); color:var(--text-primary); max-width:100%;
}
.edit-table input[type=date]{width:118px;}
.edit-table input[type=number]{width:80px;}
.edit-table select{max-width:190px;}
.edit-table tbody tr:hover{background:var(--grid);}
.pagination{display:flex; gap:8px; align-items:center; justify-content:center; padding:14px; font-size:12px;}
.pagination a, .pagination span.current{padding:5px 10px; border-radius:6px; border:1px solid var(--border); text-decoration:none; color:var(--text-primary);}
.pagination span.current{background:var(--series-1); color:#fff; border-color:var(--series-1); font-weight:700;}

.admin-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:18px;}
.admin-tabs button{
  font-family:inherit; background:none; border:none; padding:10px 16px; font-size:13px;
  color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.admin-tabs button.active{color:var(--series-1); border-bottom-color:var(--series-1); font-weight:700;}
.admin-tabs button .pill{margin-inline-start:6px;}
.admin-guide-panel{display:none;}
.admin-guide-panel.active{display:block;}

.print-only{display:none;}
@media print{
  .no-print{display:none !important;}
  .print-only{display:block;}
  main{max-width:100%; padding:0 6px;}
  body{background:#fff;}
  .card, .table-wrap{border-color:#ccc;}
}