/* ── Nusuk / Ministry-of-Hajj-inspired palette ─────────────────────
   Primary  #006C35  Saudi national green (Ministry of Hajj)
   Deep     #004C24  darker emerald for headers/hover
   Gold     #C9A961  Nusuk gold accent
   Gold-lt  #E8D9A8  soft gold tint
   Cream    #FAF8F2  warm off-white surface
   Border   #E5DDD0
   Text     #1A2B1F
   Muted    #5F6B61
──────────────────────────────────────────────────────────────────── */

:root {
  /* ── Semantic tokens, now bound to the official MoHU palette.
     Variable names kept for backwards-compatibility — what matters
     is the resolved color. ─────────────────────────────────────── */
  --green:      #14181b;   /* primary button bg — MoHU charcoal */
  --green-dark: #00080b;   /* navbar / table head / heading text — MoHU black */
  --green-50:   #efe6d7;   /* soft hover / approved badge tint — MoHU beige-deep */
  --green-100:  #d9c79a;   /* approved badge border — gold-soft */
  --gold:       #d7a562;   /* official MoHU gold */
  --gold-soft:  #e8d9a8;
  --cream:      #f5ede3;   /* page surface — MoHU beige */
  --surface:    #FFFFFF;
  --border:     #ebe0cf;   /* MoHU beige-deep, used on card/form borders */
  --text:       #1a1f24;   /* near-black for body copy */
  --text-muted: #6b7280;   /* neutral muted */
  --danger:     #b54033;
  --warning:    #a87325;
  --success:    #038061;   /* MoHU secondary green */

  /* ── MoHU official identity tokens ─────────────────────────────────
     Source: Ministry of Hajj & Umrah Visual Identity Guidelines, 2025
     Primary (≈55% usage): black, gold, beige, nili
     Secondary (≈40%):     dark/light green, dark/light blue, browns
     Accent (≈5%):         success / danger / warning */
  --mohu-black:        #00080b;
  --mohu-black-soft:   #14181b;
  --mohu-gold:         #d7a562;
  --mohu-gold-deep:    #b8893f;
  --mohu-gold-soft:    rgba(215,165,98,.35);
  --mohu-beige:        #f5ede3;
  --mohu-beige-deep:   #ebe0cf;
  --mohu-nili:         #d6dee5;
  --mohu-green:        #038061;
  --mohu-green-dark:   #004545;
  --mohu-blue:         #70a3c2;
  --mohu-blue-dark:    #174766;
  --mohu-brown:        #87452b;
  --mohu-brown-dark:   #2b140a;
}

* { box-sizing: border-box; }

html, body {
  font-family: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: .95rem;
  min-height: 100%;
}
body.lang-en {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main.page {
  flex: 1 0 auto;
  padding-bottom: 2.5rem;
}

/* ── Top utility bar (gold hairline + language switcher) ── */
.top-utility { position: relative; background: #fff; border-bottom: 1px solid var(--border); }
.brand-band-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 50%, var(--gold) 100%);
}
.utility-inner {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 8px 1.5rem 6px;
  min-height: 38px;
}
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--cream);
}
.lang-btn {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 4px 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
  border-inline-end: 1px solid var(--border);
}
.lang-btn:last-child { border-inline-end: none; }
.lang-btn:hover { color: var(--green-dark); background: #fff; }
.lang-btn.active {
  background: var(--green);
  color: #fff;
}
.lang-btn.active:hover { color: #fff; background: var(--green-dark); }

/* ── Navbar ── */
.navbar {
  background: var(--green-dark);
  border-bottom: none;
  padding: .7rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  position: relative;
}
/* Thin gold kiswa hairline directly beneath the navbar */
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 12%, var(--gold) 88%, transparent 100%);
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  color: #fff !important;
}
.navbar-brand .brand-logo {
  height: 42px;
  width: auto;
  display: block;
}
.navbar-brand .brand-divider {
  width: 1px; height: 30px;
  background: linear-gradient(180deg, transparent, rgba(215,165,98,.55), transparent);
}
.navbar-brand .brand-mark {
  width: 36px;
  height: 36px;
  background: rgba(215,165,98,.10);
  border: 1px solid rgba(215,165,98,.4);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-brand .brand-mark svg { width: 22px; height: 22px; }
.navbar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.navbar-brand .brand-text .ar { font-size: 1.02rem; font-weight: 700; }
.navbar-brand .brand-text .en {
  font-size: .67rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 500;
}

.navbar .nav-user {
  display: flex; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.92); font-size: .9rem;
}
.navbar .role-pill {
  background: var(--gold); color: var(--green-dark);
  font-size: .7rem; font-weight: 700; letter-spacing: .4px;
  padding: 2px 9px; border-radius: 10px; text-transform: uppercase;
}
.navbar .btn-outline-light {
  border-color: rgba(255,255,255,.4);
  color: #fff;
  font-size: .82rem;
  padding: 4px 14px;
  border-radius: 6px;
  font-weight: 500;
}
.navbar .btn-outline-light:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); }

/* ── Page container ── */
.container { max-width: 1140px; }

/* ── Section heading bar ── */
.section-head {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1.1rem;
}
.section-head .bar {
  display: inline-block; width: 4px; height: 22px;
  background: var(--gold); border-radius: 2px;
}
.section-head h5, .section-head h6 {
  margin: 0; color: var(--green-dark); font-weight: 700;
}
.section-head .badge-count {
  background: var(--green); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 10px;
}

/* ── Cards ── */
.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,76,36,.05);
  overflow: hidden;
}
.card-header {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .92rem;
  padding: .7rem 1.1rem;
  color: var(--green-dark);
  letter-spacing: .2px;
}
.card-accent { border-top: 3px solid var(--gold); }

/* ── Tables ── */
.table {
  font-size: .9rem;
  color: var(--text);
  margin-bottom: 0;
}
.table thead th {
  background: var(--green-dark);
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .3px;
  border: none;
  padding: .65rem .85rem;
  text-align: start;
}
.table-bordered { border-color: var(--border); }
.table-bordered td, .table-bordered th { border-color: var(--border); }
.table-hover tbody tr:hover { background: var(--green-50); }
.table td { padding: .55rem .85rem; vertical-align: middle; }

/* ── Buttons ── */
.btn { border-radius: 6px; font-weight: 500; }
.btn-dark, .btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-size: .9rem;
  padding: .45rem 1.1rem;
}
.btn-dark:hover, .btn-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}
.btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-muted);
  font-size: .85rem;
  background: #fff;
}
.btn-outline-secondary:hover { background: var(--cream); color: var(--text); border-color: var(--gold); }
.btn-outline-success { border-color: var(--green); color: var(--green); }
.btn-outline-success:hover { background: var(--green); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover { background: #155f3a; border-color: #155f3a; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background: #a06500; color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #952626; border-color: #952626; }

/* gold accent CTA */
.btn-gold {
  background: var(--gold); border: 1px solid var(--gold); color: var(--green-dark);
  font-weight: 700; letter-spacing: .3px;
}
.btn-gold:hover { background: #b89849; color: var(--green-dark); }

/* ── Form controls ── */
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .92rem;
  color: var(--text);
  padding: .5rem .75rem;
  background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,108,53,.12);
  outline: none;
}
.form-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: .35rem;
  letter-spacing: .2px;
}

/* ── Status badges ── */
.status-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 12px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.badge-pending  { background: #FFF4CC; color: #7A5500; border: 1px solid #E6C84A; }
.badge-approved { background: var(--green-50); color: var(--green-dark); border: 1px solid var(--green-100); }
.badge-rejected { background: #F8D7DA; color: #721C24; border: 1px solid #E08090; }
.badge-success  { background: var(--green-50); color: var(--green-dark); border: 1px solid var(--green-100); }
.badge-failed   { background: #F8D7DA; color: #721C24; border: 1px solid #E08090; }
.badge-pending.api { background: #FFF4CC; color: #7A5500; border: 1px solid #E6C84A; }

/* ── Ticket description box (Arabic text RTL) ── */
.description-box {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  line-height: 2;
  white-space: pre-wrap;
  direction: rtl;
  text-align: right;
  min-height: 110px;
  font-size: .95rem;
  color: var(--text);
}
textarea.description-box {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}

/* ── Nav tabs ── */
.nav-tabs .nav-link {
  font-size: .9rem;
  color: var(--text-muted);
  border-radius: 0;
  padding: .55rem 1.1rem;
  font-weight: 600;
  border: none;
}
.nav-tabs .nav-link.active {
  color: var(--green-dark);
  font-weight: 700;
  border-bottom: 3px solid var(--gold);
  background: transparent;
}
.nav-tabs { border-bottom: 2px solid var(--border); }

/* ── Stat boxes ── */
.stat-box {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1rem 1rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,76,36,.04);
}
.stat-box .val { font-size: 1.85rem; font-weight: 700; color: var(--green-dark); line-height: 1.1; }
.stat-box .lbl { font-size: .76rem; color: var(--text-muted); letter-spacing: .3px; margin-top: 4px; font-weight: 600; }

/* ── Alert ── */
.alert { font-size: .9rem; border-radius: 8px; border: 1px solid transparent; }
.alert-success { background: var(--green-50); color: var(--green-dark); border-color: var(--green-100); }
.alert-danger  { background: #F8D7DA; color: #721C24; border-color: #E08090; }
.alert-warning { background: #FFF4CC; color: #7A5500; border-color: #E6C84A; }

/* ── Login page ── */
.login-wrap {
  min-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.2rem 2rem 1.8rem;
  box-shadow: 0 8px 30px rgba(0,76,36,.08);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--gold));
}
.login-emblem {
  width: 72px; height: 72px;
  background: var(--green);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
  box-shadow: 0 6px 18px rgba(0,108,53,.25);
}
.login-emblem svg { width: 40px; height: 40px; fill: #fff; }
.login-title-ar {
  text-align: center; color: var(--green-dark);
  font-weight: 700; font-size: 1.35rem; margin: 0;
}
.login-title-en {
  text-align: center; color: var(--text-muted);
  font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase;
  margin: 4px 0 1.6rem; font-weight: 500;
}

/* ── Footer ── */
.site-footer {
  flex-shrink: 0;
  background: var(--green-dark);
  color: rgba(255,255,255,.85);
  padding: 1.1rem 0;
  margin-top: auto;
  border-top: 3px solid var(--gold);
  font-size: .82rem;
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.site-footer .ascend-mark {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--gold-soft); font-weight: 600; letter-spacing: .4px;
}
.site-footer .ascend-mark .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  display: inline-block;
}
.site-footer a { color: var(--gold-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* ── Misc ── */
code { font-size: .82rem; color: var(--green); background: var(--green-50); padding: 1px 5px; border-radius: 4px; }
hr { border-color: var(--border); }
.text-muted { color: var(--text-muted) !important; }
.small, small { font-size: .82rem; }

/* RTL niceties for Bootstrap utility classes that assume LTR */
[dir="rtl"] .me-1, [dir="rtl"] .me-2, [dir="rtl"] .me-3 { margin-right: 0 !important; }
[dir="rtl"] .me-1 { margin-left: .25rem !important; }
[dir="rtl"] .me-2 { margin-left: .5rem !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; }
[dir="rtl"] .ms-1, [dir="rtl"] .ms-2, [dir="rtl"] .ms-3 { margin-left: 0 !important; }
[dir="rtl"] .ms-1 { margin-right: .25rem !important; }
[dir="rtl"] .ms-2 { margin-right: .5rem !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; }

/* Latin text inline (IDs, dates, codes) stays LTR for readability.
   No `display` override — when this class lands on a <td>, the cell must
   keep its native `display: table-cell` or columns visually collapse. */
.ltr { direction: ltr; unicode-bidi: embed; }

/* ───────────────────────────────────────────────────────────────────
   MoHU-identity login page — scoped to body.mohu-login-page only
   so the rest of the app keeps its current look until approved.
   ─────────────────────────────────────────────────────────────────── */

body.mohu-login-page {
  background: var(--mohu-black);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(215,165,98,.10), transparent 55%),
    radial-gradient(ellipse at 50% 115%, rgba(215,165,98,.08), transparent 55%),
    /* faint repeating ornament watermark */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23d7a562' stroke-width='.7' opacity='.07'><path d='M10 80 Q40 50 80 80 T150 80'/><path d='M10 100 Q40 70 80 100 T150 100'/><circle cx='80' cy='80' r='2.2' fill='%23d7a562' stroke='none'/></g></svg>");
  background-attachment: fixed;
}

/* Top utility bar — invert for dark background */
body.mohu-login-page .top-utility { background: transparent; border-bottom: none; }
body.mohu-login-page .brand-band-bg {
  background: linear-gradient(90deg, transparent 0%, var(--mohu-gold) 25%, var(--mohu-gold) 75%, transparent 100%);
  opacity: .8;
}
body.mohu-login-page .lang-switch {
  background: rgba(255,255,255,.06);
  border-color: rgba(215,165,98,.35);
  backdrop-filter: blur(4px);
}
body.mohu-login-page .lang-btn { color: rgba(245,237,227,.75); border-color: rgba(215,165,98,.25); }
body.mohu-login-page .lang-btn:hover { color: var(--mohu-gold); background: rgba(215,165,98,.08); }
body.mohu-login-page .lang-btn.active { background: var(--mohu-gold); color: var(--mohu-black); }
body.mohu-login-page .lang-btn.active:hover { background: var(--mohu-gold-deep); color: var(--mohu-black); }

/* Footer — sit on the dark theme */
body.mohu-login-page .site-footer {
  background: transparent;
  border-top: 1px solid rgba(215,165,98,.2);
  color: rgba(245,237,227,.65);
}
body.mohu-login-page .site-footer .ascend-mark { color: var(--mohu-gold); }
body.mohu-login-page .site-footer .ascend-mark .dot { background: var(--mohu-gold); }

/* Centered hero wrapper */
.mohu-login-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.6rem;
}

/* Hayyakum Allah seasonal mark (sits above login card) */
.mohu-season-mark {
  height: 84px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(215,165,98,.18));
}

/* The beige card */
.mohu-login-card {
  width: 100%;
  max-width: 460px;
  background: var(--mohu-beige);
  border-radius: 4px;
  padding: 2.5rem 2.4rem;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(215,165,98,.35),
    0 0 0 8px rgba(0,8,11,.4);
  position: relative;
}

/* Gold zukhrufat ornament rows (top & bottom of card) */
.mohu-ornament {
  display: block;
  width: 100%;
  height: 22px;
  margin: 0 auto;
}
.mohu-ornament.top    { margin-bottom: 1.4rem; }
.mohu-ornament.bottom { margin-top: 1.4rem; }

/* Brand mark stack inside card */
.mohu-brand {
  text-align: center;
  margin-bottom: 1.8rem;
}
.mohu-brand .crest {
  width: auto;
  height: 72px;
  margin: 0 auto .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  background: var(--mohu-black);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.mohu-brand .crest svg { width: 100%; height: 100%; }
.mohu-brand .crest img { height: 72px; width: auto; display: block; }
.mohu-brand .ministry-ar {
  font-family: 'Tajawal', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--mohu-black);
  letter-spacing: .5px;
  margin: 0;
  line-height: 1.2;
}
.mohu-brand .ministry-en {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mohu-brown);
  margin: 4px 0 0;
  font-weight: 600;
}
.mohu-brand .system-divider {
  width: 36px; height: 1px;
  background: var(--mohu-gold);
  margin: 1rem auto;
}
.mohu-brand .system-ar {
  font-family: 'Tajawal', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--mohu-brown-dark);
  margin: 0;
}
.mohu-brand .system-en {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: 1.5px;
  color: var(--mohu-brown);
  margin: 3px 0 0;
  opacity: .85;
}

/* Form fields */
.mohu-login-card .form-label {
  font-family: 'Tajawal', 'Inter', sans-serif;
  color: var(--mohu-brown-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: .35rem;
  text-transform: none;
}
.mohu-login-card .form-control {
  background: #fff;
  border: 1px solid var(--mohu-beige-deep);
  border-radius: 3px;
  padding: .65rem .85rem;
  font-size: .95rem;
  color: var(--mohu-black);
  transition: border-color .15s, box-shadow .15s;
}
.mohu-login-card .form-control:focus {
  border-color: var(--mohu-gold);
  box-shadow: 0 0 0 3px rgba(215,165,98,.22);
  outline: none;
}

/* Gold CTA */
.mohu-cta {
  width: 100%;
  background: var(--mohu-black);
  color: var(--mohu-gold);
  border: 1px solid var(--mohu-gold);
  border-radius: 3px;
  padding: .8rem 1rem;
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .18s, color .18s, transform .05s;
}
.mohu-cta:hover { background: var(--mohu-gold); color: var(--mohu-black); }
.mohu-cta:active { transform: translateY(1px); }

/* Bottom tagline inside card */
.mohu-tagline {
  text-align: center;
  font-size: .74rem;
  color: var(--mohu-brown);
  margin: 1.4rem 0 0;
  letter-spacing: .3px;
  opacity: .85;
}

/* Alerts inside the login card */
body.mohu-login-page .alert {
  background: rgba(217,94,74,.12);
  border: 1px solid rgba(217,94,74,.4);
  color: #7a2418;
  border-radius: 3px;
}