/* ==========================================================================
   Al-Imdad — visual system
   Enterprise procurement, Arabic-first, RTL. Deep petrol-teal primary with a
   warm sand accent on a soft paper ground. Typography: IBM Plex Sans Arabic.
   ========================================================================== */

:root {
  /* Brand — PIF-inspired luxury: deep emerald + champagne gold */
  --imd-teal-900: #003D2D;
  --imd-teal-700: #035C44;
  --imd-teal-600: #1A7560;
  --imd-teal-100: #DCEAE3;
  --imd-sand-600: #B08D3E;
  --imd-sand-500: #C9A961;
  --imd-sand-100: #F2E8D0;

  /* Neutrals (warm) */
  --imd-ink: #0B1F18;
  --imd-muted: #5B6B65;
  --imd-line: #E6E3D9;
  --imd-paper: #FAF8F3;
  --imd-card: #ffffff;

  /* Status */
  --imd-ok: #1f7a52;
  --imd-warn: #b9791b;
  --imd-danger: #b23a3a;

  /* Map onto Bootstrap */
  --bs-primary: var(--imd-teal-700);
  --bs-body-bg: var(--imd-paper);
  --bs-body-color: var(--imd-ink);
  --bs-body-font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --bs-border-color: var(--imd-line);
  --bs-link-color: var(--imd-teal-600);
  --bs-link-hover-color: var(--imd-teal-900);
}

* { font-feature-settings: "ss01"; }

body {
  font-family: var(--bs-body-font-family);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(26,117,96,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,169,97,.07), transparent 55%),
    var(--imd-paper);
  color: var(--imd-ink);
  min-height: 100vh;
}

/* ---- Top bar ---------------------------------------------------------- */
.imd-nav {
  background: var(--imd-teal-900);
  color: #eef3f1;
  border-bottom: 3px solid var(--imd-sand-500);
}
.imd-brand {
  font-weight: 700;
  letter-spacing: .3px;
  display: flex; align-items: center; gap: .55rem;
}
.imd-brand .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--imd-sand-500), var(--imd-sand-600));
  color: var(--imd-teal-900); font-weight: 800;
  display: grid; place-items: center; font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.imd-nav .nav-link { color: #cdded9 !important; font-weight: 500; }
.imd-nav .nav-link.active,
.imd-nav .nav-link:hover { color: #fff !important; }
.imd-chip {
  font-size: .78rem; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); color: #eaf2f0;
  padding: .2rem .6rem; border-radius: 999px;
}

/* ---- Cards / surfaces ------------------------------------------------- */
.imd-card {
  background: var(--imd-card);
  border: 1px solid var(--imd-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11,31,24,.04), 0 12px 28px -22px rgba(11,31,24,.45);
}
.imd-card-pad { padding: 1.5rem 1.6rem; }
.imd-section-title { font-weight: 700; color: var(--imd-teal-900); }
.imd-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  color: var(--imd-sand-600); font-weight: 700;
}

/* ---- Hero ------------------------------------------------------------- */
.imd-hero {
  background:
    linear-gradient(135deg, var(--imd-teal-900), var(--imd-teal-700) 70%);
  color: #f2f7f5; border-radius: 22px; overflow: hidden; position: relative;
}
.imd-hero::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -10%;
  width: 55%;
  background: radial-gradient(closest-side, rgba(201,169,97,.22), transparent);
  pointer-events: none;
}
.imd-hero h1 { font-weight: 800; line-height: 1.15; }

/* ---- Buttons ---------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--imd-teal-700); --bs-btn-border-color: var(--imd-teal-700);
  --bs-btn-hover-bg: var(--imd-teal-900); --bs-btn-hover-border-color: var(--imd-teal-900);
  --bs-btn-active-bg: var(--imd-teal-900);
  font-weight: 600;
}
.btn-sand {
  background: var(--imd-sand-500); border: 1px solid var(--imd-sand-600);
  color: var(--imd-teal-900); font-weight: 700;
}
.btn-sand:hover { background: var(--imd-sand-600); color: #fff; }
.btn-outline-primary {
  --bs-btn-color: var(--imd-teal-700); --bs-btn-border-color: var(--imd-teal-600);
  --bs-btn-hover-bg: var(--imd-teal-700); --bs-btn-hover-border-color: var(--imd-teal-700);
}

/* ---- Forms ------------------------------------------------------------ */
.form-control, .form-select {
  border-radius: 11px; border-color: var(--imd-line); padding: .6rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--imd-teal-600);
  box-shadow: 0 0 0 .2rem rgba(26,117,96,.15);
}
.form-label { font-weight: 600; font-size: .9rem; color: var(--imd-teal-900); }

/* ---- Badges (status) -------------------------------------------------- */
.imd-badge {
  font-size: .76rem; font-weight: 700; padding: .28rem .6rem; border-radius: 8px;
  border: 1px solid transparent;
}
.imd-badge.draft   { background:#eef0ee; color:#525c58; border-color:#dfe2df; }
.imd-badge.open    { background: var(--imd-teal-100); color: var(--imd-teal-900); border-color:#B7D4C9; }
.imd-badge.awarded { background: var(--imd-sand-100); color: var(--imd-sand-600); border-color:#E3CFA0; }
.imd-badge.inprogress { background:#e3effa; color:#1c5a90; border-color:#c6ddf2; }
.imd-badge.closed  { background:#e7f3ec; color: var(--imd-ok); border-color:#c9e6d4; }
.imd-badge.cancelled, .imd-badge.declined { background:#f7e9e9; color: var(--imd-danger); border-color:#eccccc; }

/* ---- Stepper ---------------------------------------------------------- */
.imd-steps { display:flex; gap:.4rem; flex-wrap:wrap; }
.imd-step {
  flex:1; min-width:120px; text-align:center; padding:.55rem .4rem;
  border-radius:10px; background:#fff; border:1px solid var(--imd-line);
  font-size:.82rem; color:var(--imd-muted); position:relative;
}
.imd-step.active { background:var(--imd-teal-700); color:#fff; border-color:var(--imd-teal-700); font-weight:600; }
.imd-step.done { background:var(--imd-teal-100); color:var(--imd-teal-900); border-color:#B7D4C9; }

/* ---- Quote comparison best-row highlight ------------------------------ */
.imd-best { box-shadow: inset 4px 0 0 var(--imd-sand-500); }

/* ---- Table ------------------------------------------------------------ */
.table thead th {
  background: var(--imd-teal-900); color:#eaf2f0; font-weight:600;
  font-size:.85rem; border-color: var(--imd-teal-700);
}
.table > :not(caption) > * > * { padding:.8rem .9rem; }

/* ---- Toasts / misc ---------------------------------------------------- */
.imd-empty {
  text-align:center; color:var(--imd-muted); padding:2.5rem 1rem;
  border:1px dashed var(--imd-line); border-radius:14px; background:#fff;
}
.imd-fade { animation: imdFade .35s ease both; }
@keyframes imdFade { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }

.imd-kbd {
  font-family: ui-monospace, monospace; background:#fff; border:1px solid var(--imd-line);
  border-radius:6px; padding:.05rem .4rem; font-size:.85em;
}
footer.imd-foot { color: var(--imd-muted); font-size:.85rem; }