/* Admin layout — sidebar + topbar + content
   RTL, navy sidebar with copper accents (Snood brand) */

:root {
  --sb-bg: #162B45;      /* Navy 900 */
  --sb-bg-2: #1B2F49;    /* Navy 900 → hover surface */
  --sb-fg: #E6E1D9;
  --sb-fg-muted: #8E9297;
  --sb-brass: #C98A5B;   /* Copper 500 */
  --sb-hover: rgba(201,138,91,.14);
  --sb-active: linear-gradient(90deg, rgba(201,138,91,.22), rgba(201,138,91,0));

  --admin-bg: #F7F4EF;   /* Ivory White */
  --admin-card: #FFFFFF;
  --admin-line: #E6E1D9; /* Border */
  --admin-ink: #2F343A;  /* Charcoal — text */
  --admin-muted: #8E9297;
}

body.admin-body {
  margin: 0;
  background: var(--admin-bg);
  font-family: 'Tajawal', sans-serif;
  color: var(--admin-ink);
  min-height: 100vh;
}

/* Sidebar — pinned to the inline-start edge (RTL: right side, LTR: left side) */
.admin-sidebar {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: var(--sb-bg);
  color: var(--sb-fg);
  display: flex;
  flex-direction: column;
  z-index: 60;
  border-inline-end: 1px solid rgba(255,255,255,.05);
}

.admin-brand {
  padding: 20px 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.admin-nav::-webkit-scrollbar { width: 4px }
.admin-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px }

.admin-nav-section {
  color: var(--sb-fg-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 10px 6px;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sb-fg);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.admin-nav-link svg { width: 18px; height: 18px; opacity: .75; flex-shrink: 0 }
.admin-nav-link:hover {
  background: var(--sb-hover);
  color: #fff;
}
.admin-nav-link:hover svg { opacity: 1 }
.admin-nav-link.on {
  background: var(--sb-active);
  color: var(--sb-brass);
  font-weight: 700;
}
.admin-nav-link.on svg {
  opacity: 1;
  stroke: var(--sb-brass);
}

.admin-sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}

/* Main area */
.admin-main {
  margin-inline-start: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--admin-line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--admin-ink);
}

.admin-breadcrumb {
  flex: 1;
  font-size: .95rem;
  color: var(--admin-ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-breadcrumb a {
  color: var(--admin-muted);
  text-decoration: none;
}
.admin-breadcrumb a:hover { color: var(--admin-ink) }
.admin-breadcrumb .sep { color: var(--admin-muted); opacity: .5; margin: 0 2px }

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--admin-line);
  color: var(--admin-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.admin-icon-btn:hover {
  background: var(--admin-bg);
}

.admin-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #D64545;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 12px;
  border: 1px solid var(--admin-line);
}

.admin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E7D32, #1F5B22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.admin-user-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--admin-ink);
}
.admin-user-role {
  font-size: .7rem;
  color: var(--admin-muted);
}

/* Flash */
.admin-flash {
  margin: 20px 24px 0;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.admin-flash-success {
  background: rgba(46,125,50,.10);
  border: 1px solid #2E7D32;
  color: #1F5B22;
}

/* Content */
.admin-content {
  padding: 24px;
  flex: 1;
}

/* ============================================================
   Reusable admin form primitives (SaaS-style)
   Use these for all create/edit pages.
   ============================================================ */

.adm-page-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; color: var(--admin-ink) }
.adm-page-desc  { color: var(--admin-muted); font-size: .9rem; margin: 0 }

/* Stepper (scroll-linked) */
.adm-stepper { display: flex; align-items: center; gap: 0; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px }
.adm-step    { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--admin-line); color: var(--admin-muted); font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all .18s; flex-shrink: 0 }
.adm-step:hover { color: var(--admin-ink); border-color: #2E7D32 }
.adm-step.on { background: linear-gradient(135deg, #2E7D32, #1F5B22); color: #fff; border-color: transparent }
.adm-step .adm-step-num { width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800 }
.adm-step.on .adm-step-num { background: rgba(255,255,255,.22) }
.adm-step-sep { width: 22px; height: 1px; background: var(--admin-line); flex-shrink: 0 }

/* Section card */
.adm-form-card { background: #fff; border: 1px solid var(--admin-line); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px }
.adm-form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px }
.adm-form-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(46,125,50,.10); color: #2E7D32; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.adm-form-icon.brass { background: rgba(201,138,91,.12); color: #B87446 }
.adm-form-icon.ember { background: rgba(214,69,69,.10); color: #D64545 }
.adm-form-icon.palm  { background: rgba(46,125,50,.10); color: #1F5B22 }
.adm-form-icon svg   { width: 18px; height: 18px }
.adm-form-title { font-size: 1.02rem; font-weight: 800; color: var(--admin-ink); margin: 0; line-height: 1.2 }
.adm-form-note  { color: var(--admin-muted); font-size: .82rem; margin: 2px 0 0 }

/* Grid + field */
.adm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px }
.adm-grid > .adm-full  { grid-column: 1 / -1 }
.adm-grid > .adm-span2 { grid-column: span 2 }
.adm-grid.cols-2 { grid-template-columns: repeat(2, 1fr) }
.adm-grid.cols-1 { grid-template-columns: 1fr }

.adm-field { display: flex; flex-direction: column; gap: 6px }
.adm-label { font-size: .82rem; font-weight: 700; color: var(--admin-ink); display: flex; align-items: center; gap: 4px }
.adm-label .req  { color: #D64545 }
.adm-label .hint { color: var(--admin-muted); font-weight: 500; font-size: .72rem; margin-inline-start: 6px }

/* Inputs */
.adm-input-wrap { position: relative }
.adm-input-wrap .adm-icon {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 12px;
  color: var(--admin-muted); pointer-events: none; display: flex;
}
.adm-input, select.adm-input, textarea.adm-input {
  width: 100%; height: 46px; padding: 0 14px 0 14px;
  border: 1px solid var(--admin-line); border-radius: 12px;
  background: #fff; color: var(--admin-ink);
  font-family: inherit; font-size: .95rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.adm-input-wrap.has-icon .adm-input { padding-inline-start: 38px }
.adm-input.adm-suffix-input { padding-inline-end: 56px }
.adm-input:hover { border-color: #B7B2AA }
.adm-input:focus { outline: none; border-color: #2E7D32; box-shadow: 0 0 0 3px rgba(46,125,50,.14) }
.adm-input:disabled { background: var(--admin-bg); color: var(--admin-muted); cursor: not-allowed }
select.adm-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A756B' stroke-width='2.5'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: left 12px center; padding-inline-end: 36px;
}
textarea.adm-input { height: auto; min-height: 96px; padding-top: 12px; padding-bottom: 12px; resize: vertical }
.adm-input-suffix { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 12px; color: var(--admin-muted); font-size: .78rem; font-weight: 700; pointer-events: none; background: var(--admin-bg); padding: 2px 8px; border-radius: 6px }

.adm-check { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--admin-bg); border: 1px solid var(--admin-line); border-radius: 12px; cursor: pointer; font-size: .9rem; color: var(--admin-ink) }
.adm-check input { width: 18px; height: 18px; accent-color: #2E7D32 }

/* Upload */
.adm-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; border: 2px dashed var(--admin-line); border-radius: 12px; background: var(--admin-bg); cursor: pointer; color: var(--admin-muted); transition: border-color .15s, background .15s; text-align: center }
.adm-upload:hover { border-color: #2E7D32; background: rgba(46,125,50,.03); color: var(--admin-ink) }
.adm-upload svg { color: #B7B2AA; margin-bottom: 6px }

/* Errors */
.adm-errors { display: flex; align-items: flex-start; gap: 10px; background: rgba(214,69,69,.08); border: 1px solid #D64545; color: #A82F2F; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-weight: 600 }
.adm-errors ul { margin: 0; padding-inline-start: 20px; font-size: .9rem }

/* Sticky footer */
.adm-actions {
  position: sticky; bottom: 0; margin: 20px -24px -24px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--admin-line);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  z-index: 10;
}
.adm-actions-info { color: var(--admin-muted); font-size: .82rem }

/* Buttons */
.adm-btn { padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: .9rem; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .15s; font-family: inherit; line-height: 1 }
.adm-btn-primary { background: #233D5F; color: #fff; border-color: #233D5F }
.adm-btn-primary:hover { background: #1B2F49; box-shadow: 0 4px 12px rgba(35,61,95,.28) }
.adm-btn-outline { background: #fff; color: var(--admin-ink); border-color: var(--admin-line) }
.adm-btn-outline:hover { border-color: var(--admin-ink) }
.adm-btn-danger  { background: #fff; color: #D64545; border-color: #D64545 }
.adm-btn-danger:hover { background: #D64545; color: #fff }

/* Page head with actions on the right */
.adm-page-headrow { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; flex-wrap: wrap }

/* Offer conversion pill strip (contracts create) */
.adm-offers-strip { display: flex; gap: 8px; flex-wrap: wrap }
.adm-offer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--admin-line); border-radius: 999px; background: #fff; color: var(--admin-ink); text-decoration: none; font-size: .82rem; font-weight: 600; transition: all .18s }
.adm-offer-pill:hover { border-color: #2E7D32; background: rgba(46,125,50,.05) }
.adm-offer-pill b { color: #1F5B22; font-weight: 800; direction: ltr }

/* --- List page primitives (toolbar, table, filter chips, empty state) --- */

/* Toolbar: KPI counters + search + primary CTA */
.adm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px }
.adm-toolbar-search { position: relative; flex: 1; min-width: 220px; max-width: 480px }
.adm-toolbar-search .adm-input { padding-inline-start: 40px }
.adm-toolbar-search svg { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 12px; color: var(--admin-muted) }

/* Filter chips row */
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px }
.adm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--admin-line);
  color: var(--admin-muted); text-decoration: none;
  font-size: .82rem; font-weight: 700;
  transition: all .15s;
}
.adm-chip:hover { color: var(--admin-ink); border-color: #2E7D32 }
.adm-chip.on { background: linear-gradient(135deg, #2E7D32, #1F5B22); color: #fff; border-color: transparent }
.adm-chip .adm-chip-count {
  background: rgba(0,0,0,.08); color: inherit;
  padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; min-width: 20px; text-align: center;
}
.adm-chip.on .adm-chip-count { background: rgba(255,255,255,.22) }

/* Modern data table (works alongside legacy .admin-table too) */
.adm-table-card {
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  overflow: hidden;
}
.adm-table { width: 100%; border-collapse: collapse; font-size: .9rem }
.adm-table th, .adm-table td {
  padding: 14px 16px;
  text-align: start;
  border-bottom: 1px solid var(--admin-line);
  vertical-align: middle;
}
.adm-table thead th {
  background: var(--admin-bg);
  font-weight: 700;
  color: var(--admin-muted);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--admin-line);
  white-space: nowrap;
}
.adm-table tbody tr { transition: background .12s }
.adm-table tbody tr:hover { background: var(--admin-bg) }
.adm-table tbody tr:last-child td { border-bottom: none }
.adm-table td b { color: var(--admin-ink); font-weight: 700 }
.adm-table td a { color: var(--admin-ink); text-decoration: none; font-weight: 600 }
.adm-table td a:hover { color: #1F5B22; text-decoration: underline }

.adm-table-foot { padding: 14px 16px; border-top: 1px solid var(--admin-line); background: var(--admin-bg); color: var(--admin-muted); font-size: .85rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px }

/* Pill / status badges */
.adm-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1 }
.adm-pill-success { background: rgba(46,125,50,.12); color: #1F5B22 }
.adm-pill-warning { background: rgba(201,138,91,.14); color: #B87446 }
.adm-pill-danger  { background: rgba(214,69,69,.12); color: #D64545 }
.adm-pill-neutral { background: rgba(22,43,69,.06); color: var(--admin-muted) }
.adm-pill-info    { background: rgba(46,125,50,.08); color: #2E7D32 }

/* Row actions cluster */
.adm-row-actions { display: inline-flex; gap: 4px; flex-wrap: wrap }
.adm-row-btn {
  padding: 6px 12px; border-radius: 8px; font-size: .78rem; font-weight: 700;
  background: transparent; border: 1px solid var(--admin-line);
  color: var(--admin-ink); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .12s; font-family: inherit;
}
.adm-row-btn:hover { border-color: #233D5F; color: #233D5F }
.adm-row-btn.primary { background: #233D5F; color: #fff; border-color: #233D5F }
.adm-row-btn.primary:hover { background: #1B2F49; color: #fff }
.adm-row-btn.danger { color: #D64545; border-color: #D64545 }
.adm-row-btn.danger:hover { background: #D64545; color: #fff }

/* Empty state */
.adm-empty {
  background: #fff;
  border: 1px dashed var(--admin-line);
  border-radius: 14px;
  padding: 48px 20px;
  text-align: center;
  color: var(--admin-muted);
}
.adm-empty svg { color: #B7B2AA; margin-bottom: 12px }
.adm-empty-title { font-weight: 700; font-size: 1rem; color: var(--admin-ink); margin-bottom: 4px }

/* Small avatar */
.adm-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #2E7D32, #1F5B22);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; flex-shrink: 0;
}

/* Cell with sub-line (title + city or email) */
.adm-cell-stack { display: flex; flex-direction: column; gap: 2px }
.adm-cell-stack .sub { color: var(--admin-muted); font-size: .78rem; font-weight: 500 }

/* --- RTL polish: numeric-only content in KPI values renders LTR
   automatically so thousands separators (comma) align correctly.
   Nothing overridden if the element already has dir="ltr" set. --- */
.admin-kpi-val,
.dash-kpi-val,
.acc-kpi-val,
.op-card-val,
.adm-summary-item .val { unicode-bidi: plaintext }

/* Ensure emails, phones, URLs get isolated LTR treatment when embedded
   in Arabic text. Use with class="ltr-inline" on inline elements. */
.ltr-inline { direction: ltr; unicode-bidi: embed; display: inline-block }

/* Phone input group (+966 fixed prefix) — works on public + admin */
.phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--admin-line, #ECE8E2);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.phone-group:focus-within {
  border-color: #2E7D32;
  box-shadow: 0 0 0 3px rgba(46,125,50,.14);
}
.phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: linear-gradient(180deg, #F7F4EF, #ECE8E2);
  border-inline-end: 1px solid var(--admin-line, #ECE8E2);
  color: #1F5B22;
  font-weight: 800;
  font-size: .92rem;
  font-family: system-ui, sans-serif;
  letter-spacing: .5px;
  flex-shrink: 0;
  user-select: none;
  direction: ltr;
}
.phone-prefix b { color: #1F5B22; font-weight: 800 }
.phone-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--admin-ink, #162B45);
  font-family: system-ui, monospace;
  font-size: 1rem;
  letter-spacing: 1px;
  direction: ltr;
  text-align: start;
}
.phone-input::placeholder { color: var(--admin-muted, #8E9297); font-weight: 400; letter-spacing: 1px }
.phone-input:invalid:not(:placeholder-shown) { color: #D64545 }

/* Summary strip */
.adm-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px }
.adm-summary-item { background: var(--admin-bg); border: 1px dashed var(--admin-line); border-radius: 10px; padding: 12px 14px }
.adm-summary-item .lbl { color: var(--admin-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px }
.adm-summary-item .val { color: var(--admin-ink); font-size: 1.1rem; font-weight: 800; direction: ltr; margin-top: 4px }
.adm-summary-item.total { background: linear-gradient(135deg, rgba(46,125,50,.08), rgba(46,125,50,.02)); border-color: #2E7D32; border-style: solid }
.adm-summary-item.total .val { color: #1F5B22 }

@media (max-width: 1024px) {
  .adm-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px) {
  .adm-grid { grid-template-columns: 1fr }
  .adm-grid > .adm-span2, .adm-grid > .adm-full { grid-column: auto }
  .adm-summary { grid-template-columns: 1fr }
  .adm-actions { flex-direction: column-reverse; align-items: stretch }
}

/* Page header inside admin content */
.admin-page-head {
  margin-bottom: 24px;
}
.admin-page-head h1 {
  font-size: 1.6rem;
  margin: 0 0 6px;
  color: var(--admin-ink);
  font-weight: 800;
}
.admin-page-head p {
  color: var(--admin-muted);
  margin: 0;
  font-size: .95rem;
}
.admin-page-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* KPI cards */
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.admin-kpi {
  background: var(--admin-card);
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  padding: 18px;
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
  color: var(--admin-ink);
  display: block;
}
.admin-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.admin-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.admin-kpi-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--admin-ink);
  line-height: 1.1;
}
.admin-kpi-lbl {
  color: var(--admin-muted);
  font-size: .85rem;
  margin-top: 4px;
}

/* Section card */
.admin-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.admin-card-head h3 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--admin-ink);
  font-weight: 700;
}

/* --- Compatibility: neutralize public .page-hero + .pad inside admin ---
   Sub-page blades still use these classes; we re-skin them without editing each file. */
.admin-body .page-hero {
  background: transparent !important;
  color: var(--admin-ink) !important;
  padding: 0 0 20px !important;
  border: none;
}
.admin-body .page-hero::before { display: none !important; }
.admin-body .page-hero .wrap { padding: 0 !important; max-width: none !important; }
.admin-body .page-hero h1 {
  font-size: 1.5rem !important;
  color: var(--admin-ink) !important;
  margin: 0 0 4px !important;
  font-weight: 800;
  line-height: 1.2;
}
.admin-body .page-hero p {
  color: var(--admin-muted) !important;
  max-width: none;
  margin: 0;
  font-size: .9rem;
}
.admin-body .page-hero .breadcrumb {
  color: var(--admin-muted) !important;
  margin-bottom: 8px;
  font-size: .82rem;
}
.admin-body .page-hero .breadcrumb a { color: var(--admin-muted) !important; text-decoration: none }
.admin-body .page-hero .breadcrumb a:hover { color: var(--admin-ink) !important }
.admin-body .page-hero .breadcrumb span { color: var(--admin-line) !important; opacity: 1 }

.admin-body .pad { padding: 0 !important; }
.admin-body .pad .wrap { padding: 0 !important; max-width: none !important; }
.admin-body section + section { margin-top: 20px; }

.admin-body .empty {
  background: var(--admin-card) !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  color: var(--admin-muted);
}

.admin-body .form-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  padding: 24px;
}

/* KPI mini-cards (bw-item) used across admin sub-pages */
.admin-body .bw-grid { display: grid; gap: 14px }
.admin-body .bw-item {
  background: var(--admin-card);
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.admin-body .bw-item .bn { font-size: 1.6rem; font-weight: 800; color: var(--admin-ink); line-height: 1.1 }
.admin-body .bw-item .bl { color: var(--admin-muted); font-size: .82rem; margin-top: 4px }

/* Tabs inside admin — override public pill style */
.admin-body .tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--admin-line);
  padding-bottom: 0; margin-bottom: 20px;
}
.admin-body .tabs .tab {
  padding: 10px 14px !important;
  background: transparent !important;
  color: var(--admin-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: -1px;
}
.admin-body .tabs .tab:hover { color: var(--admin-ink) !important }
.admin-body .tabs .tab.on {
  color: var(--admin-ink) !important;
  background: transparent !important;
  border-bottom-color: #C98A5B !important;
}

/* Responsive */
@media (max-width: 900px) {
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform .25s;
  }
  [dir="rtl"] .admin-sidebar { transform: translateX(100%); }
  body.admin-sb-open .admin-sidebar { transform: translateX(0) !important; }
  .admin-main { margin-inline-start: 0; }
  .admin-menu-btn { display: inline-flex; }
  .admin-user-info { display: none }
  .admin-content { padding: 16px }
  .admin-flash { margin: 16px 16px 0 }
}

/* Arabic content stays visually right-aligned even when the LTR toggle
   mirrors the layout. `end` in an LTR container = right, so Arabic
   body/heading/cell text keeps its RTL reading alignment. Explicit
   `dir="ltr"` fragments (numbers, dates, emails, IDs) fall back to
   `start` = left inside their LTR-scoped element. */
html[dir="ltr"] body { text-align: end; }
html[dir="ltr"] [dir="ltr"] { text-align: start; }