:root { --bg:#f4f5f7; --card:#fff; --ink:#1c2330; --mute:#6b7280; --line:#e2e5ea; --accent:#2563eb; --bad:#dc2626; --warn:#d97706; --good:#16a34a; }
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
body { margin:0; font-family: "Segoe UI", Tahoma, Arial, sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
header { display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
header h1 { margin:0; font-size:22px; }
.logout { margin-inline-start:auto; color:var(--mute); text-decoration:none; }
.cards { display:flex; gap:10px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; }
.stat { display:flex; flex-direction:column; align-items:center; min-width:120px; padding:8px 14px; }
.stat .n { font-size:20px; font-weight:700; }
.stat .l { color:var(--mute); font-size:12px; text-align:center; }
.stat small { display:block; font-size:10px; }
.stat.bad { border-color:var(--bad); color:var(--bad); }
.stat.warnc { border-color:var(--warn); color:var(--warn); }
.stat.good { border-color:var(--good); color:var(--good); }
.warn { background:#fee2e2; color:#7f1d1d; padding:10px 20px; border-bottom:1px solid #fecaca; }
.warn.soft { background:#fef3c7; color:#78350f; border-color:#fde68a; }
.muted { color:var(--mute); font-size:12px; }
.note { padding:8px 20px; color:var(--mute); font-size:12px; display:flex; gap:8px; align-items:center; }
.tablewrap.greyed { filter: grayscale(1); opacity:.7; }
main { padding:16px 20px; display:grid; gap:14px; min-width:0; }
main > section { min-width:0; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.spacer { flex:1; }
label { display:inline-flex; gap:6px; align-items:center; }
select, input { padding:6px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; background:#fff; }
input.days { width:80px; } input.sym { width:100px; } input.search { width:220px; }
button { padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; font:inherit; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:var(--bad); }
button.x { padding:2px 8px; color:var(--mute); }
button:disabled { opacity:.5; cursor:default; }
.cond { padding:4px 0; border-bottom:1px dashed var(--line); }
.ref { display:inline-flex; gap:6px; }
.err { color:var(--bad); }
.tablewrap { overflow:auto; max-height:70vh; }
table { border-collapse:collapse; width:100%; }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th { position:sticky; top:0; background:#f9fafb; cursor:pointer; user-select:none; }
th.sorted { color:var(--accent); }
tr.isnew { background:#f0fdf4; }
td, .stat .n, input[dir=ltr] { font-variant-numeric: tabular-nums; font-feature-settings: "lnum"; }
input[dir=ltr] { width:110px; text-align:left; }
.badge { background:var(--good); color:#fff; border-radius:4px; padding:1px 6px; font-size:11px; }
.badge.warn { background:var(--warn); }
.badge.rev { background:#7c3aed; }
.badge.rev.fresh { background:#db2777; }
.badge.rev.dead { background:#9ca3af; text-decoration:line-through; }
.badge.dead { background:#6b7280; }
tr.fresh { background:#fdf2f8; }
.rb-dark_green { background:#1b5e20; color:#fff; } .rb-light_green { background:#66bb6a; color:#fff; }
.rb-light_red { background:#ef5350; color:#fff; } .rb-dark_red { background:#7f0000; color:#fff; }
table.small { font-size:12px; } td.msg { white-space:pre-wrap; max-width:400px; }
.st-success { color:var(--good); } .st-failed { color:var(--bad); } .st-holiday, .st-uptodate { color:var(--mute); } .st-partial { color:var(--warn); }
.warn pre { white-space:pre-wrap; font-size:11px; margin:4px 0 0; }
details summary { cursor:pointer; font-weight:600; margin:4px 0; }
body.login { display:grid; place-items:center; height:100vh; }
.login-card { display:grid; gap:12px; min-width:280px; }
.login-card h1 { margin:0; text-align:center; }

/* الجوال والآيباد: أزرار أكبر، حقول بحجم 16px (يمنع تكبير iOS)، البطاقات شبكة، الجدول يتمرر أفقياً */
@media (max-width: 820px) {
  header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  header h1 { font-size: 18px; }
  .cards { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cards > button { grid-column: 1 / -1; }
  .stat { min-width: 0; padding: 6px 8px; }
  .stat .n { font-size: 17px; }
  .note, .warn { padding: 8px 12px; }
  main { padding: 10px 12px; gap: 10px; }
  select, input, button { font-size: 16px; min-height: 40px; }
  .row.cond { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
  .row.cond > select:first-child { grid-column: 1 / -1; }
  .row.cond .ref { flex-wrap: wrap; }
  input.search { width: 100%; }
  .tablewrap { max-height: 60vh; -webkit-overflow-scrolling: touch; }
  th, td { padding: 6px 6px; font-size: 12px; }
  th:first-child, td:first-child { position: sticky; right: 0; background: #fff; }
  th:first-child { background: #f9fafb; z-index: 2; }
}

/* شارت المطابقات: خط واحد، شبكة خافتة، تلميح عند المرور */
.hist { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.chart { position: relative; direction: ltr; margin-top: 4px; }
.chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .grid text, .chart .xaxis text { font-size: 10px; fill: var(--mute); font-family: inherit; }
.chart .xaxis text { text-anchor: middle; }
.chart .area { fill: var(--accent); opacity: .08; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .marks circle { fill: #fff; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .cross { stroke: var(--mute); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .tip { position: absolute; top: 0; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.chart .tip b { font-size: 14px; }
/* لا تمرير أفقي للصفحة: القوائم الطويلة الخيارات لا توسّع الصف، وجداول السجل تتمرر داخل حاويتها */
select { max-width: 100%; }
details { overflow-x: auto; }
@media (max-width: 820px) {
  .row.cond select, .row.cond .ref select, .row.cond .ref input { min-width: 0; }
  .row.cond .ref { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .row.cond .ref input[dir=ltr] { width: 100%; }
  .row.head label, .row.foot button { max-width: 100%; }
  html, body { overflow-x: hidden; }
}

button.x.sel { color: var(--accent); border-color: var(--accent); }

/* عناصر تحكم الشارت: صف ثابت لا يقفز */
.hist-head { gap: 10px; }
.hist-ctl { gap: 12px; margin: 4px 0 2px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 4px 10px; min-height: 30px; font-size: 13px; background: #fff; }
.seg button + button { border-inline-start: 1px solid var(--line); }
.seg button.sel { background: var(--accent); color: #fff; }
label.slider { display: inline-flex; align-items: center; gap: 8px; }
label.slider input[type=range] { width: 180px; min-height: 0; padding: 0; direction: ltr; }
.ltr { direction: ltr; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { label.slider input[type=range] { width: 120px; } .seg button { min-height: 36px; } }

/* التسميات خارج الـ SVG الممدود حتى لا تتشوه حروفها */
.chart .plot { position: relative; margin: 0 40px 20px 0; }
.chart .yaxis span, .chart .xaxis span { position: absolute; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart .yaxis { position: absolute; top: 0; right: -38px; bottom: 0; width: 36px; }
.chart .yaxis span { transform: translateY(-50%); }
.chart .xaxis { position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.chart .xaxis span { top: 4px; transform: translateX(-50%); }
.chart .xaxis span:first-child { transform: translateX(0); }
.chart .xaxis span:last-child { transform: translateX(-100%); }
.chart svg { height: 160px; }
@media (max-width: 820px) { .chart .plot { margin-right: 32px; } .chart .yaxis { right: -32px; width: 30px; } .chart .yaxis span, .chart .xaxis span { font-size: 10px; } }