/* ============================================================
   MOD brand layer for Digital Compass
   Source of truth: design-system/tokens/*.css and
   design-system/guidelines/web-application-guidance.md
   Loads after Bootstrap 5.3; remaps its theme onto the official
   Ministry of Defense palette and fonts.
   ============================================================ */

/* ---- Arabic glyph rendering: Almarai ----
   unicode-range restricts these faces to Arabic script blocks, so
   Latin text is untouched and keeps the page's primary font.
   Self-hosted arabic-subset woff2 (≈32KB per weight). Almarai has
   no 500/600; those weights map to 400/700 below. */
@font-face {
  font-family: 'Almarai';
  src: url('/static/fonts/Almarai-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+1EE00-1EEF1;
}
@font-face {
  font-family: 'Almarai';
  src: url('/static/fonts/Almarai-400.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+1EE00-1EEF1;
}
@font-face {
  font-family: 'Almarai';
  src: url('/static/fonts/Almarai-700.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+1EE00-1EEF1;
}
@font-face {
  font-family: 'Almarai';
  src: url('/static/fonts/Almarai-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+1EE00-1EEF1;
}

:root {
  /* ---- MOD identity tokens (design-system/tokens/colors.css) ---- */
  --mod-pine: #29504D;
  --mod-pine-ink: #0E3C3B;
  --mod-pine-night: #0C2A28;
  --mod-green: #00A05A;
  --mod-green-bright: #05B050;
  --mod-green-dark: #007443;   /* AA-safe green for links/small text */
  --mod-gold: #D6BA77;
  --mod-red: #C00000;
  --mod-ink: #171E1C;
  --mod-slate: #506A68;
  --mod-gray-400: #B2BEC4;
  --mod-gray-200: #D1D7DB;
  --mod-gray-50: #F0F2F4;

  /* ---- Chart palette (data and status only, never page chrome) ---- */
  --chart-dark-green: #29504D;
  --chart-light-green: #00A05A;
  --chart-grey: #B2BEC4;
  --chart-dark-red: #861F41;
  --chart-dark-blue: #004C97;
  --chart-purple: #5F259F;
  --chart-red: #EE2737;
  --chart-light-blue: #009CDE;
  --chart-yellow: #EAAA00;

  /* ---- Bootstrap theme remap ---- */
  --bs-primary: var(--mod-green);
  --bs-primary-rgb: 0, 160, 90;
  --bs-secondary: var(--mod-slate);
  --bs-secondary-rgb: 80, 106, 104;
  --bs-success: var(--mod-green);
  --bs-success-rgb: 0, 160, 90;
  --bs-danger: var(--mod-red);
  --bs-danger-rgb: 192, 0, 0;
  --bs-warning: var(--chart-yellow);
  --bs-warning-rgb: 234, 170, 0;
  --bs-info: var(--chart-light-blue);
  --bs-info-rgb: 0, 156, 222;
  --bs-dark: var(--mod-pine-night);
  --bs-dark-rgb: 12, 42, 40;
  --bs-body-color: var(--mod-ink);
  /* Almarai first, but its @font-face is unicode-range-limited to
     Arabic, so Latin falls through to Bootstrap's system stack. */
  --bs-body-font-family: 'Almarai', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --bs-link-color: var(--mod-green-dark);
  --bs-link-color-rgb: 0, 116, 67;
  --bs-link-hover-color: var(--mod-pine);
  --bs-link-hover-color-rgb: 41, 80, 77;
  --bs-primary-bg-subtle: #E0F2EA;
  --bs-primary-text-emphasis: var(--mod-pine-ink);
  --bs-primary-border-subtle: #99D9BD;
  --bs-border-color: var(--mod-gray-200);
}

/* ---- Typography: brand ink for headings (fonts unchanged) ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--mod-pine-ink);
}

/* ---- Buttons ---- */
.btn-primary, .btn-success {
  --bs-btn-bg: var(--mod-green);
  --bs-btn-border-color: var(--mod-green);
  --bs-btn-hover-bg: #02914F;
  --bs-btn-hover-border-color: #02914F;
  --bs-btn-active-bg: #027A43;
  --bs-btn-active-border-color: #027A43;
  --bs-btn-disabled-bg: var(--mod-gray-400);
  --bs-btn-disabled-border-color: var(--mod-gray-400);
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--mod-green-dark);
  --bs-btn-border-color: var(--mod-green);
  --bs-btn-hover-bg: var(--mod-green);
  --bs-btn-hover-border-color: var(--mod-green);
  --bs-btn-active-bg: #02914F;
  --bs-btn-active-border-color: #02914F;
}
.btn-secondary {
  --bs-btn-bg: var(--mod-slate);
  --bs-btn-border-color: var(--mod-slate);
  --bs-btn-hover-bg: #425856;
  --bs-btn-hover-border-color: #425856;
  --bs-btn-active-bg: var(--mod-pine);
  --bs-btn-active-border-color: var(--mod-pine);
}
.btn-outline-secondary {
  --bs-btn-color: var(--mod-slate);
  --bs-btn-border-color: var(--mod-gray-400);
  --bs-btn-hover-bg: var(--mod-slate);
  --bs-btn-hover-border-color: var(--mod-slate);
}
.btn-danger {
  --bs-btn-bg: var(--mod-red);
  --bs-btn-border-color: var(--mod-red);
  --bs-btn-hover-bg: #9A0000;
  --bs-btn-hover-border-color: #9A0000;
}

/* ---- Dark chrome (main app navbar) ---- */
header.navbar.bg-dark, .navbar-dark.bg-dark {
  background-color: var(--mod-pine-night) !important;
  border-bottom: 3px solid var(--mod-green-bright);
}

/* ---- Status badge semantics (web-application-guidance.md §2) ---- */
.badge.bg-success, .badge.text-bg-success { background-color: var(--chart-light-green) !important; color: #fff !important; }
.badge.bg-info, .badge.text-bg-info { background-color: var(--chart-light-blue) !important; color: #fff !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--chart-dark-blue) !important; color: #fff !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--chart-yellow) !important; color: var(--mod-ink) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: var(--chart-grey) !important; color: var(--mod-ink) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--chart-red) !important; color: #fff !important; }

/* ---- Shape: flat and rectilinear (≤4px functional radius) ---- */
.card, .modal-content, .form-control, .form-select, .btn, .alert, .accordion-item {
  border-radius: 4px;
}
.card { border: 1px solid var(--mod-gray-200); }

/* ---- Tables ---- */
.table > thead { color: var(--mod-pine-ink); }

/* ---- Focus visibility (a11y floor) ---- */
:focus-visible {
  outline: 2px solid var(--mod-green);
  outline-offset: 2px;
}