/* =====================================================================
   Alfaresi Pay dashboards
   Brand tokens match the public application page. Edit them here only.
   ===================================================================== */
:root {
  --brand: #0B3B66;
  --brand-ink: #072845;
  --accent: #1A7FD6;
  --accent-soft: #E8F2FC;
  --partner: var(--brand);

  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-2: #F1F4F8;
  --line: #E2E7EF;
  --line-2: #CFD7E3;
  --fg: #0E1A2B;
  --muted: #5B6B82;
  --faint: #8A98AD;

  --ok: #0F8A5F;   --ok-soft: #E6F5EE;
  --warn: #B7791F; --warn-soft: #FDF4E3;
  --bad: #C2384B;  --bad-soft: #FBEBEE;
  --info: #1A7FD6; --info-soft: #E8F2FC;

  --shadow: 0 1px 2px rgba(14,26,43,.05), 0 8px 24px -12px rgba(14,26,43,.12);
  --r: 12px;
  --f: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--f);
  --bs-body-color: var(--fg);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 26,127,214;
  --bs-link-hover-color: var(--brand);
  --bs-border-radius: 10px;
  --bs-secondary-color: var(--muted);
}

body { font-family: var(--f); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; font-size: 14.5px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
a { text-decoration: none; }
.form-control, .form-select { border-color: var(--line-2); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); }
.form-label { font-weight: 500; font-size: 13.5px; color: var(--fg); }

/* ---------- buttons ---------- */
.btn-brand { --bs-btn-bg: var(--partner); --bs-btn-border-color: var(--partner); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand-ink); --bs-btn-hover-border-color: var(--brand-ink); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--brand-ink); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--partner); --bs-btn-disabled-border-color: var(--partner); font-weight: 500; }
.btn-outline-brand { --bs-btn-color: var(--partner); --bs-btn-border-color: var(--line-2); --bs-btn-hover-bg: var(--accent-soft);
  --bs-btn-hover-color: var(--partner); --bs-btn-hover-border-color: var(--partner); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--partner); font-weight: 500; }
.btn-light { --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--line); }
.btn-icon { border: 1px solid var(--line); background: var(--surface); width: 38px; height: 38px; display: grid; place-items: center; padding: 0; font-size: 20px; }
.btn i.bi { margin-inline-end: 4px; }

/* ---------- auth ---------- */
.auth-body { min-height: 100vh; background: var(--bg); display: grid; place-items: center; }
.auth-card { width: min(460px, 92vw); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.auth-logo { height: 30px; }
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; }
.auth-aside { background: radial-gradient(70% 60% at 20% 30%, rgba(26,127,214,.35), transparent 70%), var(--brand); color: #fff;
  padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.auth-aside h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.25; max-width: 18ch; }
.auth-aside p { color: rgba(255,255,255,.75); max-width: 44ch; font-size: 16px; }
.auth-logo-light { height: 30px; align-self: flex-start; }
.auth-partners { display: flex; gap: 12px; flex-wrap: wrap; }
.auth-partners span { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 500; }
.auth-partners img { width: 24px; height: 24px; border-radius: 6px; }
.auth-form { display: grid; place-items: center; padding: 48px 24px; background: var(--surface); }
@media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; } .auth-aside { padding: 32px 24px; } .auth-aside h2 { font-size: 24px; } }

/* ---------- shell ---------- */
.dash { display: flex; min-height: 100vh; }
.side { width: 256px; flex: none; background: var(--surface); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; }
@media (min-width: 992px) { .side { position: sticky; top: 0; height: 100vh; visibility: visible !important; transform: none !important; } }
.side-head { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.side-logo { height: 26px; }
.side-tag { margin-inline-start: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); background: var(--accent-soft); padding: 3px 8px; border-radius: 6px; }
.side-partner { display: flex; align-items: center; gap: 10px; }
.side-partner img { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); object-fit: cover; }
.side-partner b { display: block; font-size: 15px; line-height: 1.2; }
.side-partner small { color: var(--muted); font-size: 12px; }
.side-nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-nav a { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 9px 12px; border-radius: 9px; font-weight: 500; transition: background .15s, color .15s; }
.side-nav a i { font-size: 17px; }
.side-nav a:hover { background: var(--surface-2); color: var(--fg); }
.side-nav a.on { background: color-mix(in srgb, var(--partner) 10%, transparent); color: var(--partner); }
.side-nav .count { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 600; background: var(--partner); color: #fff; border-radius: 999px; padding: 1px 8px; }
.side-foot { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.side-foot a { color: var(--muted); }
.side-foot a:hover { color: var(--accent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 14px 28px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.page-title { font-size: 19px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 4px; font-weight: 500; font-size: 14px; color: var(--fg); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--partner); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.content { padding: 24px 28px 48px; max-width: 1400px; width: 100%; }
@media (max-width: 991px) { .content { padding: 18px 16px 40px; } .topbar { padding: 12px 16px; } }

/* ---------- panels & kpis ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-h h2 { font-size: 15px; font-weight: 600; margin: 0; }
.panel-b { padding: 18px; }
.panel-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }

.kpi { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); color: var(--fg); height: 100%; transition: border-color .15s, transform .15s; position: relative; overflow: hidden; }
a.kpi:hover { border-color: var(--partner); transform: translateY(-1px); color: var(--fg); }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--partner); opacity: .9; }
.kpi-warn::before { background: var(--warn); }
.kpi-l { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi b { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.kpi small { color: var(--faint); font-size: 12.5px; }

/* ---------- tables ---------- */
.table-dash { --bs-table-bg: transparent; font-size: 14px; }
.table-dash thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 10px 14px; white-space: nowrap; }
.table-dash td { padding: 12px 14px; border-color: var(--line); }
.table-dash .empty { text-align: center; color: var(--faint); padding: 40px 14px; }
.row-link { cursor: pointer; }
.pchip { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.pchip img { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); }

/* status pills */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new { color: var(--info); background: var(--info-soft); }
.st-review { color: var(--warn); background: var(--warn-soft); }
.st-approved { color: #6741D9; background: #F0EBFF; }
.st-active { color: var(--ok); background: var(--ok-soft); }
.st-rejected { color: var(--bad); background: var(--bad-soft); }
.st-muted { color: var(--muted); background: var(--surface-2); }

/* filters & tabs */
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.filters .form-select, .filters input[type=date] { width: auto; }
.input-icon { position: relative; min-width: 240px; }
.input-icon i { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.input-icon .form-control { padding-inline-start: 36px; }
.nav-tabs-dash { display: flex; gap: 4px; list-style: none; padding: 0; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.nav-tabs-dash a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-tabs-dash a em { font-style: normal; font-size: 12px; background: var(--surface-2); color: var(--muted); padding: 0 7px; border-radius: 999px; }
.nav-tabs-dash a.on { color: var(--partner); border-color: var(--partner); }
.nav-tabs-dash a.on em { background: var(--partner); color: #fff; }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.pagination { --bs-pagination-active-bg: var(--partner); --bs-pagination-active-border-color: var(--partner); --bs-pagination-color: var(--fg); }

/* ---------- application detail ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.back-link:hover { color: var(--accent); }
.app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.app-head h2 { font-size: 24px; font-weight: 600; margin: 2px 0 8px; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stepper > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--faint); font-weight: 500; font-size: 13.5px; }
.stepper span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 12px; font-weight: 600; flex: none; }
.stepper .done { color: var(--ok); }
.stepper .done span { background: var(--ok); color: #fff; }
.stepper .now { color: var(--partner); border-color: var(--partner); box-shadow: 0 0 0 3px color-mix(in srgb, var(--partner) 12%, transparent); }
.stepper .now span { background: var(--partner); color: #fff; }
@media (max-width: 768px) { .stepper { grid-template-columns: 1fr 1fr; } }

.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
.kv-grid > div { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.kv-grid > div:nth-child(odd):not(.span-2) { border-inline-end: 1px solid var(--line); }
.kv-grid .span-2 { grid-column: span 2; }
.kv-grid dt { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.kv-grid dd { margin: 0; font-weight: 500; word-break: break-word; }
@media (max-width: 640px) { .kv-grid { grid-template-columns: 1fr; } .kv-grid .span-2 { grid-column: auto; } .kv-grid > div { border-inline-end: 0 !important; } }

.timeline { list-style: none; margin: 0; padding: 16px 18px 6px; }
.timeline li { position: relative; padding: 0 0 16px 20px; border-inline-start: 2px solid var(--line); margin-inline-start: 4px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--partner); }
.timeline li:last-child { border-color: transparent; }
.timeline b { display: block; font-weight: 600; font-size: 14px; }
.timeline p { margin: 2px 0; color: var(--fg); font-size: 13.5px; }
.timeline small { color: var(--faint); font-size: 12px; }

/* ---------- partners ---------- */
.partner-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); color: var(--fg); overflow: hidden; border-top: 3px solid var(--pc); transition: transform .15s, border-color .15s; }
.partner-card:hover { transform: translateY(-2px); color: var(--fg); }
.pc-top { display: flex; align-items: center; gap: 12px; padding: 18px; }
.pc-top img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.pc-top b { display: block; font-size: 16px; }
.pc-top small { color: var(--muted); }
.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pc-stats div { padding: 12px; text-align: center; border-inline-end: 1px solid var(--line); }
.pc-stats div:last-child { border: 0; }
.pc-stats b { display: block; font-size: 18px; font-weight: 600; }
.pc-stats span { font-size: 11.5px; color: var(--muted); }
.pc-foot { display: flex; justify-content: space-between; padding: 12px 18px; font-size: 13.5px; color: var(--muted); }
.pc-foot b { color: var(--fg); }
.logo-lg { width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--line); object-fit: cover; flex: none; }

.modal-content { border-radius: 14px; border: 1px solid var(--line); }
.alert { border-radius: 10px; }

/* Mixed Arabic / English values stay left-aligned inside the English dashboard */
.dash-body [dir=auto] { text-align: left; }
.chart-box { position: relative; height: 260px; }