/* Shared look for the Apex Ops app pages (dark, RTL, field-readable). */
:root{ --bg:#080d1a; --s1:#101a30; --s2:#151f38; --s3:#1c2844; --border:#232f4d; --border-soft:#1a2338;
  --tx:#eef1fb; --tx2:#a9b2cc; --tx3:#8a93b0; --amber:#f59e0b; --amber-ink:#2a1700; --green:#10b981;
  --indigo:#818cf8; --danger:#ef4444; --orange:#f66018; }
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{ background:var(--bg); color:var(--tx); font-family:'IBM Plex Sans Arabic',sans-serif; font-size:14px;
  padding:env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none!important; }
a{ color:inherit; }
.num{ font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; font-variant-numeric:tabular-nums; }
.ms{ font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal;
  display:inline-block; white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased; font-size:20px; vertical-align:middle; }
.muted{ color:var(--tx3); }
.small{ font-size:12px; }

.wrap{ max-width:900px; margin:0 auto; padding-block:14px 28px; display:flex; flex-direction:column; gap:14px; }
.topbar{ display:flex; align-items:center; gap:10px; }
.topbar .back{ width:38px; height:38px; border-radius:10px; background:var(--s2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--tx2); flex:none; }
.topbar h1{ font-size:18px; margin:0; }
.topbar p{ margin:2px 0 0; font-size:12px; color:var(--tx3); }
.topbar .spacer{ flex:1; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:10px; padding:10px 14px; font:600 13px 'IBM Plex Sans Arabic',sans-serif; cursor:pointer; border:1px solid var(--border); background:var(--s3); color:var(--tx); text-decoration:none; }
.btn.primary{ background:var(--amber); color:var(--amber-ink); border-color:var(--amber); font-weight:700; }
.btn.green{ background:var(--green); color:#03170f; border-color:var(--green); font-weight:700; }
.btn.danger{ color:#f87171; }
.btn.sm{ padding:6px 10px; font-size:12px; border-radius:8px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn .ms{ font-size:17px; }

.card{ background:var(--s2); border:1px solid var(--border); border-radius:14px; padding:14px; }
.card h2{ font-size:14px; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.card-head h2{ margin:0; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.kpi{ background:var(--s2); border:1px solid var(--border); border-radius:14px; padding:12px; }
.kpi .l{ font-size:12px; color:var(--tx3); }
.kpi .v{ font-size:21px; font-weight:700; margin-top:4px; }
.kpi .s{ font-size:12px; color:var(--tx3); margin-top:2px; }
@media (max-width:560px){ .kpis{ grid-template-columns:repeat(2,1fr); } }

.tabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ flex:none; background:var(--s2); border:1px solid var(--border); color:var(--tx2); border-radius:999px; padding:8px 14px; font:600 12.5px 'IBM Plex Sans Arabic',sans-serif; cursor:pointer; }
.tab.on{ background:var(--amber); color:var(--amber-ink); border-color:var(--amber); }

.field{ margin-bottom:11px; }
.field label{ display:block; font-size:12.5px; color:var(--tx2); margin-bottom:4px; }
.field input, .field select, .field textarea{ width:100%; background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:11px 12px; color:var(--tx); font:14px 'IBM Plex Sans Arabic',sans-serif; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); }
.field textarea{ min-height:70px; resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:11px; }
.check input{ width:18px; height:18px; accent-color:var(--amber); }

.list{ display:flex; flex-direction:column; gap:8px; }
.item{ background:var(--s1); border:1px solid var(--border); border-radius:12px; padding:12px; }
.item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.item b{ font-size:14px; }
.item .meta{ font-size:12.5px; color:var(--tx3); margin-top:3px; line-height:1.6; }
.item .actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.empty{ text-align:center; color:var(--tx3); font-size:13px; padding:22px 10px; }

.pill{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block; white-space:nowrap; background:var(--s3); color:var(--tx2); }
.pill.amber{ background:#2e2008; color:var(--amber); }
.pill.green{ background:#0f231e; color:var(--green); }
.pill.indigo{ background:#1c1f45; color:var(--indigo); }
.pill.red{ background:#3a1414; color:var(--danger); }
.pill.gray{ background:var(--s3); color:var(--tx3); }

.progress{ height:6px; background:var(--s3); border-radius:999px; overflow:hidden; margin-top:8px; }
.progress > i{ display:block; height:100%; background:var(--green); border-radius:999px; }

table.t{ width:100%; border-collapse:collapse; font-size:13px; }
table.t th{ text-align:start; font-size:12px; color:var(--tx3); font-weight:600; padding:8px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.t td{ padding:9px 8px; border-bottom:1px solid var(--border-soft); }
.scroll-x{ overflow-x:auto; }
.scroll-x table.t td, .scroll-x table.t th{ white-space:nowrap; }

.alerts{ display:flex; flex-direction:column; gap:8px; }
.alert{ display:flex; gap:10px; align-items:flex-start; background:var(--s1); border:1px solid var(--border); border-radius:12px; padding:11px 12px; text-decoration:none; }
.alert .ms{ font-size:22px; }
.alert.red{ border-color:#5a1d1d; } .alert.red .ms{ color:var(--danger); }
.alert.amber{ border-color:#4a3410; } .alert.amber .ms{ color:var(--amber); }
.alert.indigo .ms{ color:var(--indigo); }
.alert b{ display:block; font-size:13px; }
.alert small{ display:block; font-size:12px; color:var(--tx3); margin-top:2px; }

.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:flex-end; justify-content:center; z-index:80; }
.modal-bg.show{ display:flex; }
.modal{ background:var(--s2); border:1px solid var(--border); border-radius:18px 18px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); width:560px; max-width:100%; max-height:92vh; overflow-y:auto; }
.modal h2, .modal h3{ margin:0 0 14px; font-size:16px; }
.modal-actions{ display:flex; gap:8px; margin-top:14px; }
.modal-actions .btn{ flex:1; }
@media (min-width:700px){ .modal-bg{ align-items:center; } .modal{ border-radius:18px; } }

/* Android WebView renders the date placeholder (يوم/شهر/سنة) mirrored in RTL — keep date inputs LTR. */
input[type=date], input[type=datetime-local], input[type=time], input[type=month]{ direction:ltr; text-align:start; color-scheme:dark; }

/* Inline help: <button class="tip" data-tip="...">ⓘ</button> next to a label or button. */
.tip{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--border);
  background:var(--s3); color:var(--tx2); font:700 12px 'Space Grotesk',sans-serif; cursor:pointer; padding:0; margin-inline-start:6px; vertical-align:middle; flex:none; }
.tip-pop{ position:fixed; z-index:120; max-width:min(320px, calc(100vw - 32px)); background:var(--s3); border:1px solid var(--amber); color:var(--tx);
  font-size:13px; line-height:1.7; padding:10px 12px; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.55); }

/* Tables become stacked cards on phones, so nothing is cut off or needs sideways scrolling. */
@media (max-width:640px){
  table.mcards{ min-width:0!important; }
  table.mcards thead{ display:none; }
  table.mcards, table.mcards tbody, table.mcards tr, table.mcards td{ display:block; width:100%; }
  table.mcards tr{ background:var(--s1); border:1px solid var(--border); border-radius:12px; margin:0 0 8px; padding:6px 12px; }
  table.mcards td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border:none!important; padding:6px 0!important; white-space:normal!important; text-align:end; }
  table.mcards td::before{ content:attr(data-label); color:var(--tx3); font-size:12px; text-align:start; flex:none; }
  table.mcards td:not([data-label])::before, table.mcards td[data-label=""]::before{ content:none; }
  table.mcards td[colspan]{ display:block; text-align:center; }
  table.mcards td[colspan]::before{ content:none; }
  .scroll-x{ overflow-x:visible; }
}

.toast{ pointer-events:none; position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--s3); border:1px solid var(--border); color:var(--tx); padding:10px 16px; border-radius:12px; font-size:13px; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:90vw; }
.toast.err{ border-color:#5a1d1d; color:#fecaca; }

/* English (left-to-right): arrows that mean "back" / "open" point the other way. */
[dir=ltr] .topbar .back .ms, [dir=ltr] .chev, [dir=ltr] .ms.flip{ transform:scaleX(-1); }