/* السلطان — دوام: خشب الجوز + أخضر الزيتون الداكن. تخطيط: عمود واحد للموبايل، شبكة للوحة الإدارة */
:root {
  --bg: #f3f4f1; --surface: #ffffff; --sunk: #e9ebe6; --line: #d9ddd5;
  --ink: #1b211e; --muted: #5f6a64; --accent: #1f5c4d; --accent-ink: #ffffff; --accent-soft: #dcebe5;
  --wood: #7a4f2f; --ok: #1e7a4a; --ok-soft: #dff2e6; --warn: #a3650c; --warn-soft: #fbeed6;
  --bad: #b3322a; --bad-soft: #f8e1df; --info: #2b5b9a; --info-soft: #e1eaf6;
  --f-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, monospace;
  --r: 14px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121614; --surface: #1a201d; --sunk: #222a26; --line: #2f3833;
    --ink: #e8ece9; --muted: #9aa69f; --accent: #5fb39b; --accent-ink: #0d1411; --accent-soft: #1d3a32;
    --wood: #c89366; --ok: #5cc48a; --ok-soft: #173326; --warn: #e3a64a; --warn-soft: #3a2c14;
    --bad: #ef7d74; --bad-soft: #3d1d1a; --info: #8db4ea; --info-soft: #1b2a40; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121614; --surface: #1a201d; --sunk: #222a26; --line: #2f3833;
  --ink: #e8ece9; --muted: #9aa69f; --accent: #5fb39b; --accent-ink: #0d1411; --accent-soft: #1d3a32;
  --wood: #c89366; --ok: #5cc48a; --ok-soft: #173326; --warn: #e3a64a; --warn-soft: #3a2c14;
  --bad: #ef7d74; --bad-soft: #3d1d1a; --info: #8db4ea; --info-soft: #1b2a40; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.6 var(--f-body); -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.3; text-wrap: balance; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; } h3 { font-size: .98rem; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.label { font-size: .75rem; letter-spacing: .03em; color: var(--muted); font-weight: 600; }

button, .btn { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: .55rem 1rem; cursor: pointer; font-weight: 600; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.danger { color: var(--bad); }
.ghost { background: transparent; border-color: transparent; }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; width: 100%; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.field { display: grid; gap: .3rem; min-width: 0; }
.field > span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; }
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.acc { background: var(--accent-soft); color: var(--accent); }

.toast { position: fixed; inset-inline: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); margin: auto; max-width: 460px; background: var(--ink); color: var(--bg); padding: .8rem 1rem; border-radius: 12px; z-index: 50; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.toast.bad { background: var(--bad); color: #fff; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: start; font-size: .75rem; color: var(--muted); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.scroll { overflow-x: auto; }

dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); padding: 0; width: min(560px, calc(100% - 32px)); max-height: 90vh; }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog form { padding: 1.1rem; display: grid; gap: .9rem; }
dialog .actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }