/* ============================================================================
   istqdam — Arabic-First Design System (Phase 1.5)
   Overlay stylesheet. Loaded AFTER the base theme so it can refine typography,
   colour tokens and RTL details for both the public site and the dashboard.
   Base theme CSS lives in assets/{backend,frontend}/... this file only adds
   Arabic identity + RTL polish; it does not replace the base layout.
   ============================================================================ */

/* Brand fonts: Tajawal (Arabic) + Poppins (Latin numerals). */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Poppins:wght@500;600;700&display=swap');

:root {
  /* --- Brand palette: deep green identity (our own layout) --- */
  --ist-primary:        #0E6B45;   /* deep green */
  --ist-primary-dark:   #0A4E32;
  --ist-primary-soft:   #E5F1EB;
  --ist-secondary:      #C9A24B;   /* warm gold accent */
  --ist-bg:             #F7F8FA;
  --ist-card:           #FFFFFF;
  --ist-text:           #1F2A37;   /* dark slate headings */
  --ist-text-muted:     #6B7280;   /* muted body text */
  --ist-border:         #E7EAEF;
  /* --- Semantic states --- */
  --ist-success:        #2E8B57;
  --ist-success-soft:   #E4F3EA;
  --ist-warning:        #B9770B;
  --ist-warning-soft:   #FBF0DC;
  --ist-danger:         #C0392B;
  --ist-danger-soft:    #FaE7E4;
  --ist-info:           #2C7BE5;
  --ist-info-soft:      #E5EFFC;
  --ist-muted:          #6B7280;
  --ist-muted-soft:     #EEF0F3;
  /* --- Type & shape --- */
  --ist-font-ar: "Tajawal", "Cairo", "Noto Kufi Arabic", "Noto Sans Arabic",
                 "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --ist-radius:         12px;
  --ist-radius-sm:      8px;
}

/* ---- Arabic typography (applies when the page is RTL / lang=ar) ---- */
html[dir="rtl"] body,
html[lang^="ar"] body,
body[dir="rtl"] {
  font-family: var(--ist-font-ar);
  letter-spacing: 0;            /* Arabic must not be letter-spaced */
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .btn, html[dir="rtl"] input,
html[dir="rtl"] select, html[dir="rtl"] textarea,
html[dir="rtl"] table, html[dir="rtl"] .form-control {
  font-family: var(--ist-font-ar);
}
/* Keep digits readable: use Latin digits inside phone/ID/reference cells */
html[dir="rtl"] .ist-ltr-nums,
html[dir="rtl"] .phone, html[dir="rtl"] .reference {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ---- RTL polish for common LTR-template leftovers ---- */
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }
html[dir="rtl"] .ms-auto { margin-inline-start: auto; }

/* ---- Unified status badges (pair with status_badge_class() helper) ---- */
.ist-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1.4;
  font-family: var(--ist-font-ar);
}
.ist-badge.is-success { color: var(--ist-success); background: var(--ist-success-soft); }
.ist-badge.is-warning { color: var(--ist-warning); background: var(--ist-warning-soft); }
.ist-badge.is-danger  { color: var(--ist-danger);  background: var(--ist-danger-soft); }
.ist-badge.is-info    { color: var(--ist-info);     background: var(--ist-info-soft); }
.ist-badge.is-muted   { color: var(--ist-muted);    background: var(--ist-muted-soft); }

/* ---- Empty-state (Arabic "no data") ---- */
.ist-empty { text-align: center; color: var(--ist-text-muted); padding: 2.5rem 1rem; }
.ist-empty__title { font-family: var(--ist-font-ar); font-weight: 600; color: var(--ist-text); }

/* Latin numerals use Poppins. */
.ist-ltr-nums, .ist-h__stat-num, .ist-about__badge-num {
    font-family: "Poppins", var(--ist-font-ar);
    font-feature-settings: "tnum";
}