/* A Recomend — shared design system (DESIGN.md). Tokens, base, buttons, inputs,
   login overlay, and the console shell used by the admin & pro consoles. Calm,
   editorial, hairline-bordered. No gradients, no shadows (one overlay shadow). */

:root {
  --bg: #FBF9F5;
  --surface: #FFFFFF;
  --ink: #1B1712;
  --muted: #6B6459;
  --line: #ECE7DE;
  --accent: #1E6B57;
  --accent-press: #17544A;
  --accent-weak: #E8F0EC;
  --danger: #B4433A;
  --danger-weak: #F7ECEB;

  --r-card: 10px;
  --r-btn: 8px;
  --r-pill: 999px;

  /* spacing scale: 4 · 8 · 12 · 16 · 24 · 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --overlay-shadow: 0 8px 30px rgba(20,18,15,.12);
  --ring: 0 0 0 2px rgba(30,107,87,.30);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Readex Pro", "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
html[dir="ltr"] body { font-family: "Inter", "Readex Pro", system-ui, sans-serif; }

/* Icons -------------------------------------------------------------------- */
.ic {
  width: 20px; height: 20px; flex: 0 0 auto;
  stroke: currentColor; stroke-width: 1.75; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 24px; height: 24px; }

/* THE `hidden` ATTRIBUTE MUST WIN, EVERYWHERE (2026-08-09).
   The UA sheet's `[hidden] { display: none }` is a bare-attribute selector, so
   the element+class rule below out-specifies it and a `hidden` BUTTON kept a
   116px box on screen. That is not a cosmetic slip: the card page's «إزالة
   الخلفية» sat visible on slots it could not act on, so pressing it did
   nothing — the founder reported "remove background not working" and 72 hours
   of production logs held zero cut-out requests, because none was ever sent.
   Every console loads this file, so the same trap was armed on all of them.
   `!important` is the right tool exactly once: `hidden` is the platform's own
   "this element is not here", and no component rule may outrank it. */
[hidden] { display: none !important; }

/* Buttons ------------------------------------------------------------------ */
button, .btn {
  border: 0; border-radius: var(--r-btn); font: inherit; font-weight: 600;
  cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
}
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }

.primary {
  background: var(--accent); color: #fff; height: 40px; padding: 0 var(--s4);
}
.primary:hover:not(:disabled) { background: var(--accent-press); }

/* Ghost / secondary: 1px line border, transparent fill. */
.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); height: 40px; padding: 0 var(--s3);
}
.ghost:hover:not(:disabled) { background: var(--accent-weak); border-color: var(--accent-weak); }

/* Icon-only button: 40x40, hover accent-weak. (Also used on <a> nav links.) */
.icon-btn {
  width: 40px; height: 40px; padding: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--ink); border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: background .16s ease;
}
.icon-btn:hover:not(:disabled) { background: var(--accent-weak); }
.icon-btn .ic { width: 20px; height: 20px; }

.hidden { display: none !important; }

/* Inputs ------------------------------------------------------------------- */
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
textarea { resize: vertical; }

/* Login overlay ------------------------------------------------------------ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: var(--s5);
  background: var(--bg);
}
.auth-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  width: min(400px, 100%); padding: var(--s5);
}
.auth-brand {
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5);
  /* keep clear of the absolutely-positioned language toggle */
  padding-inline-end: 56px;
}
.auth-logo {
  width: 40px; height: 40px; border-radius: var(--r-btn);
  background: var(--accent-weak); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
}
/* THE REAL MARK, NOT THE «أ» STAND-IN.
   `.logo` and `.auth-logo` are painted as a tinted (console-theme.css: purple
   gradient) tile with a letter centred in it — right for a <span>, wrong for
   an <img>, which would sit on that background with the letter's padding.
   `img.logo` is element+class, one specificity step above the bare class, so
   this wins over BOTH sheets no matter which order they load in. auth.css is
   loaded by every console, so one rule covers all of them. */
img.logo, img.auth-logo { object-fit: cover; background: none; padding: 0; }
.auth-h { margin: 0; font-size: 20px; font-weight: 600; }
.auth-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.auth-title {
  margin: 0 0 var(--s4); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.auth-step { display: flex; flex-direction: column; gap: var(--s3); }
.auth-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.auth-input { font-size: 15px; letter-spacing: .5px; }
.auth-btn { width: 100%; height: 40px; }
.auth-devhint {
  font-size: 13px; color: var(--muted);
  background: var(--accent-weak); border-radius: var(--r-btn);
  padding: var(--s2) var(--s3); text-align: center;
}
.auth-row { display: flex; justify-content: space-between; margin-top: 2px; }
.auth-link {
  background: none; border: 0; color: var(--accent); padding: var(--s1) 2px; font-size: 13px;
  font-weight: 600;
}
.auth-link:hover { color: var(--accent-press); }
/* The consent line under the sign-in button: quiet, but never hidden behind a
   disclosure — a person has to be able to READ what they are agreeing to
   before they agree to it, so both links open the public documents. */
.auth-legal {
  margin: var(--s4) 0 0; font-size: 12px; line-height: 1.6; color: var(--muted);
}
.auth-legal a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }

.auth-error {
  margin: var(--s3) 0 0; font-size: 13px; color: var(--danger);
  background: var(--danger-weak); border-radius: var(--r-btn); padding: var(--s2) var(--s3);
}
.auth-langtoggle {
  position: absolute; top: var(--s4); inset-inline-end: var(--s4);
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 600; height: 32px; padding: 0 var(--s3);
}
.auth-langtoggle:hover { background: var(--accent-weak); }

/* Console shell ------------------------------------------------------------ */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); padding: var(--s3) var(--s5);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: var(--s3); }
.logo {
  width: 40px; height: 40px; border-radius: var(--r-btn);
  background: var(--accent-weak); color: var(--accent);
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
}
.brand h1 { margin: 0; font-size: 20px; font-weight: 600; }
.brand .sub { margin: 0; font-size: 12px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.whoami { font-size: 12px; color: var(--muted); text-align: end; line-height: 1.4; }
.whoami .who-phone { font-weight: 600; color: var(--ink); direction: ltr; display: inline-block; }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--ink); font-size: 13px; font-weight: 600;
  height: 40px; padding: 0 var(--s3); border-radius: var(--r-btn);
  border: 1px solid var(--line); text-decoration: none; background: var(--surface);
}
.nav-link:hover { background: var(--accent-weak); border-color: var(--accent-weak); }
.nav-link .ic { width: 18px; height: 18px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); }

/* Section cards */
.section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s5); margin-bottom: var(--s4);
}
.section > h2 {
  margin: 0 0 var(--s1); font-size: 20px; font-weight: 600;
  display: flex; align-items: center; gap: var(--s2);
}
.section > h2 .ic { color: var(--accent); }
.section .section-sub { margin: 0 0 var(--s4); font-size: 13px; color: var(--muted); }

/* Stat cards */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.stat { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); }
.stat .stat-num { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat .stat-label { font-size: 13px; color: var(--muted); margin-top: var(--s1); }
.stat.amber { border-color: var(--accent); background: var(--accent-weak); }
.stat.amber .stat-num { color: var(--accent-press); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td {
  padding: var(--s3); border-bottom: 1px solid var(--line); text-align: start;
  vertical-align: middle; white-space: nowrap;
}
table.data th {
  font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.wrap-cell { white-space: normal; min-width: 200px; }

/* Chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; font-weight: 600;
  border-radius: var(--r-pill); padding: 2px 10px; margin: 1px 2px;
  background: var(--accent-weak); color: var(--muted);
}
.chip.role { background: var(--accent-weak); color: var(--accent-press); }
.chip.muted { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.chip .rm-role { display: inline-flex; color: var(--muted); cursor: pointer; }
.chip .rm-role:hover { color: var(--danger); }
.chip .rm-role .ic { width: 13px; height: 13px; }
.badge { display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 3px 10px; }
.badge.active { background: var(--accent-weak); color: var(--accent-press); }
.badge.blocked { background: var(--danger-weak); color: var(--danger); }
.badge.pending { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.badge.approved { background: var(--accent-weak); color: var(--accent-press); }
.badge.rejected { background: var(--danger-weak); color: var(--danger); }

/* Small action buttons in tables */
.btn-sm { font-size: 12px; height: 32px; padding: 0 10px; border-radius: var(--r-btn); }
.btn-line { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-line:hover:not(:disabled) { background: var(--accent-weak); border-color: var(--accent-weak); }
.btn-danger { background: var(--surface); border: 1px solid var(--line); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-weak); border-color: var(--danger-weak); }
.btn-approve { background: var(--accent); color: #fff; }
.btn-approve:hover:not(:disabled) { background: var(--accent-press); }
.actions-cell { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; font-size: 14px; }
.field textarea { min-height: 90px; }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
/* Inline code inside a hint. LTR-ISOLATED on purpose: a marker like `##` or
   `**bold**` is direction-neutral, so dropped into an Arabic sentence the
   browser re-orders it and the example stops being the thing it describes. */
.field .hint code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
  direction: ltr; unicode-bidi: isolate;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* States */
.loading { color: var(--muted); font-size: 14px; padding: var(--s4) 0; text-align: center; }
.empty {
  color: var(--muted); font-size: 14px; padding: var(--s5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}
.empty .ic { color: var(--muted); width: 28px; height: 28px; }
.error-box { color: var(--danger); font-size: 13px; background: var(--danger-weak); border-radius: var(--r-btn); padding: var(--s3); }
.spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: middle; margin-inline-end: var(--s2);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Roles reference */
.role-ref { display: flex; flex-direction: column; gap: var(--s3); }
.role-item { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.role-item h4 { margin: 0 0 var(--s1); font-size: 14px; font-weight: 600; }
.role-item p { margin: 0 0 var(--s2); font-size: 12px; color: var(--muted); }

/* Knowledge / contribution cards */
.k-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); margin-bottom: var(--s3); }
.k-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s1); }
.k-title { font-size: 15px; font-weight: 600; margin: 0; }
.k-meta { font-size: 12px; color: var(--muted); margin: 2px 0 var(--s2); }
.k-body { font-size: 14px; color: var(--ink); margin: 0 0 var(--s3); white-space: pre-wrap; }
.k-actions { display: flex; gap: var(--s2); }

/* Toast */
.toast {
  position: fixed; bottom: var(--s5); inset-inline-start: 50%; transform: translateX(50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-btn);
  font-size: 14px; z-index: 120; max-width: 90%; box-shadow: var(--overlay-shadow);
}
html[dir="ltr"] .toast { transform: translateX(-50%); }
.toast.err { background: var(--danger); }
.toast.ok { background: var(--accent-press); }

/* Tabs */
.tabs { display: flex; gap: var(--s2); margin-bottom: var(--s4); flex-wrap: wrap; }
.tab {
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600;
  height: 36px; padding: 0 var(--s3); border-radius: var(--r-btn); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.tab.active { background: var(--accent-weak); color: var(--accent-press); border-color: var(--accent-weak); }

@media (max-width: 560px) {
  .brand .sub { display: none; }
  .wrap { padding: var(--s4) var(--s3) var(--s6); }
  .section { padding: var(--s4); }
}