/* AlifBaa brand overrides for the admin portal.
   Loaded after the WRTeam theme (style.min.css / rtl.min.css) and after
   alifbaa-tokens.css, in both LTR and RTL. Primary teal comes from the
   inline `--theme-color`/`--primary` vars set in include.blade.php (seeded
   theme_color = #0F6E56); this file adds typography, amber accents, status
   pills, role badges, and numerals that a single colour var doesn't cover. */

/* ── Typography ───────────────────────────────────────────── */
body,
.content-wrapper,
button,
input,
select,
textarea,
.btn,
h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Sans Arabic', 'Nunito', system-ui, sans-serif;
}

/* Western numerals / currency / codes — isolate LTR + tabular mono */
.amt,
.num {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-mid) !important;
  border-color: var(--primary-mid) !important;
}
.btn-primary:focus,
.form-control:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-color: var(--primary);
}

/* Ghost / outline */
.btn-outline-primary {
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary-bg);
  color: var(--primary-dark);
}

/* ── Cards & hairlines ───────────────────────────────────── */
.card,
.grid-margin > .card {
  border: 1px solid var(--hair);
  border-radius: 16px;
}

/* ── Amber accent helpers ────────────────────────────────── */
.text-accent { color: var(--accent-mid) !important; }
.bg-accent { background-color: var(--accent-mid) !important; }
.accent-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-mid);
}

/* ── Status pills ────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.pill-ok   { background: var(--status-ok-bg);   color: var(--status-ok-fg); }
.pill-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.pill-late { background: var(--status-late-bg); color: var(--status-late-fg); }

/* ── Role badges ─────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.role-student  { background: var(--role-student-bg);  color: var(--role-student-fg); }
.role-teacher  { background: var(--role-teacher-bg);  color: var(--role-teacher-fg); }
.role-admin    { background: var(--role-admin-bg);    color: var(--role-admin-fg); }
.role-inactive { background: var(--role-inactive-bg); color: var(--role-inactive-fg); }