/* ==========================================================================
   OMS unified theme — loaded last on every page (views/partials/unified-theme.php)
   Colours come from the theme chosen in Settings (CSS variables set by the partial).
   ========================================================================== */
:root {
  /* Fonts (--font-display, --font-body) and colours (--ink, --line, --canvas, --surface …) are defined
     per theme and per light/dark mode in <head> by App\Core\Theme::head(). */
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 48, 40, .05);
  --shadow: 0 1px 2px rgba(16, 48, 40, .05), 0 8px 24px rgba(16, 48, 40, .07);
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-border-radius: var(--r-sm);
}

/* ── Shared admin/portal components ─────────────────────────────────────────
   The base for .portal-* classes. Older views still carry their own copy in an inline
   <style>; newer views (Invoices, HR & Payroll, Message templates, …) rely on this one. */
:root { --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; }
.portal-wrap { color: var(--ink); }
.portal-page-header { background: var(--surface); padding: 22px 26px; margin-bottom: 22px; position: relative; overflow: hidden; }
.portal-page-header > * { position: relative; z-index: 1; }
.portal-page-header h1 { margin: 0 0 6px; font-weight: 700; }
.portal-page-header p { font-size: 15px; margin: 0; max-width: 78ch; }
.portal-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.portal-stat-card { background: var(--surface); position: relative; overflow: hidden; min-width: 0; }
.portal-stat-card h3 { margin: 0 0 6px; font-weight: 600; line-height: 1.35; }
.portal-stat-card .num { line-height: 1.1; overflow-wrap: anywhere; }
.portal-stat-card .num.num-sm { font-size: 20px !important; }
.portal-stat-card .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.portal-stat-card .icon { position: absolute; font-size: 20px; }
.portal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px; margin-bottom: 22px; }
.portal-card { background: var(--surface); overflow: hidden; margin-bottom: 20px; }
.portal-card-header { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portal-card-header h2, .portal-card-header h3, .portal-card-header h4, .portal-card-header h5, .portal-card-header .h5 { color: #fff !important; margin: 0; font-size: 16px; font-family: var(--font-body) !important; font-weight: 700; }
.portal-card-header .text-muted, .portal-card-header small { color: rgba(255,255,255,.75) !important; font-weight: 400; }
.portal-card-header .btn-outline-secondary, .portal-card-header .btn-outline-primary { color: #fff; border-color: rgba(255,255,255,.55); }
.portal-card-header .btn-outline-secondary:hover, .portal-card-header .btn-outline-primary:hover { background: var(--surface); color: var(--forest); }
.portal-card-body { padding: 20px 22px; }
.portal-card-body > .table-responsive:only-child, .portal-card-body.p-0 .table { margin-bottom: 0; }
.portal-btn { padding: 10px 20px; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; transition: background .2s ease; }
.portal-btn-primary { background: var(--forest); color: #fff; }
.portal-btn-gold { background: var(--gold); color: #fff; }
.portal-badge { padding: 4px 11px; border-radius: 20px; font-weight: 700; display: inline-block; }
.portal-badge-danger { background: #fdecec; color: #b42318; }
.portal-badge-secondary { background: var(--gray-100); color: var(--gray-600); }
.portal-badge-info { background: #e8f1fb; color: #1d5fa8; }
.portal-list-item { display: flex; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.portal-list-item:last-child { border-bottom: none; }
.portal-list-icon { width: 40px; height: 40px; background: var(--forest); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-inline-end: 14px; flex-shrink: 0; }
.portal-list-info { flex: 1; min-width: 0; }
.portal-list-info h4 { color: var(--forest); margin: 0 0 3px; font-size: 15px; }
.portal-list-info p { color: var(--ink-2); font-size: 13px; margin: 0; }
.portal-alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 18px; border-inline-start: 5px solid; font-size: 14px; }
.portal-alert-info { background: #e8f1fb; color: #1d5fa8; border-color: #2f80d1; }
.portal-alert-warning { background: #fff5e6; color: #9a5b00; border-color: #f0a020; }
.portal-alert-success { background: #e9f5ee; color: #1f6b3b; border-color: #2e7d4a; }
.portal-tabs { border: none; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.portal-tabs .nav-link { border: none; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 9px 16px; }
.portal-tabs .nav-link:not(.active):hover { background: rgba(var(--forest-rgb), .06); }
.portal-wrap .modal-header { color: #fff; border-bottom: none; padding: 16px 22px; }
.portal-wrap .modal-header .modal-title { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.portal-wrap .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .85; }
.portal-wrap .modal-body { padding: 22px; }
.portal-wrap .modal-footer { border-top: 1px solid var(--line); padding: 14px 22px; }

/* ── Typography: one text face, one heading face ─────────────────────────── */
/* :where() keeps this rule at zero specificity so the heading rules below still win */
:where(html body, body *:not(i):not(svg):not(path):not(code):not(pre):not(kbd):not([class^="bi"]):not([class*=" bi-"]):not([class^="fa"]):not([class*=" fa-"])) {
  font-family: var(--font-body) !important;
}
body { color: var(--ink); -webkit-font-smoothing: antialiased; }
body h1, body h2, body h3, body .h1, body .h2, body .h3,
body .display-1, body .display-2, body .display-3, body .display-4, body .display-5, body .display-6,
body .portal-page-header h1, body .section-title, body .hero-title, body .cta-title, body .page-hero h1,
body .form-hero h1, body .login-brand-title, body .login-form-side h2, body .success-card h2,
body .cause-title, body .project-title, body .alumni-title, body .blog-title, body .brand-font,
body #topbar .brand, body .oms-hdr-brand, body .oms-ftr-brand-text, body .site-nav .navbar-brand,
body .stat-num, body .zc-amount, body .code-value, body .event-day, body .card-title, body .modal-title,
body .oms-empty-page h1, body .oms-empty-page h2, body .oms-empty-code {
  font-family: var(--font-display) !important;
  letter-spacing: 0;
}
/* Arabic passages keep the Arabic display face */
body [lang="ar"], body .arabic, body .arabic-text, body .hero-arabic, body .cta-arabic, body .form-hero-arabic {
  font-family: var(--font-display) !important;
}
body h1, body .h1 { font-weight: 700; }
body h2, body h3 { font-weight: 700; }
body h4, body h5, body h6 { font-weight: 600; }
body .portal-card-header { font-family: var(--font-body) !important; }

/* ── Colour & links ─────────────────────────────────────────────────────── */
a { color: var(--forest); }
a:hover { color: var(--forest-dark); }
.text-primary { color: var(--forest) !important; }
.bg-primary { background-color: var(--forest) !important; }
.border-primary { border-color: var(--forest) !important; }
.text-warning { color: var(--gold-dark) !important; }
.bg-success-subtle { background-color: rgba(var(--forest-rgb), .10) !important; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
body .btn { border-radius: var(--r-sm); font-weight: 600; letter-spacing: 0; }
body .btn-primary, body .portal-btn-primary {
  background: var(--forest) !important; border-color: var(--forest) !important; color: #fff !important; box-shadow: none;
}
body .btn-primary:hover, body .btn-primary:focus, body .portal-btn-primary:hover {
  background: var(--forest-dark) !important; border-color: var(--forest-dark) !important; color: #fff !important; transform: none; box-shadow: none;
}
body .btn-warning, body .btn-donate, body .portal-btn-gold {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important;
}
body .btn-warning:hover, body .btn-donate:hover, body .portal-btn-gold:hover {
  background: var(--gold-dark) !important; border-color: var(--gold-dark) !important; color: #fff !important; transform: none;
}
body .btn-success { background: var(--forest-mid); border-color: var(--forest-mid); }
body .btn-success:hover { background: var(--forest-dark); border-color: var(--forest-dark); }
body .btn-outline-primary, body .btn-outline-success { color: var(--forest); border-color: rgba(var(--forest-rgb), .45); }
body .btn-outline-primary:hover, body .btn-outline-success:hover { background: var(--forest); border-color: var(--forest); color: #fff; }
body .btn-outline-secondary { color: var(--ink-2); border-color: var(--line); background: var(--surface); }
body .btn-outline-secondary:hover { color: var(--forest); border-color: var(--forest); background: var(--surface); }
body .portal-btn { border-radius: var(--r-sm); }
.btn:focus-visible, a:focus-visible, .form-control:focus-visible { outline: 3px solid rgba(var(--gold-rgb), .55); outline-offset: 2px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
body .form-control, body .form-select { border-radius: var(--r-sm); border-color: var(--bs-border-color); }
body .form-control:focus, body .form-select:focus { border-color: var(--forest); box-shadow: 0 0 0 .2rem rgba(var(--forest-rgb), .12); }
body .form-label, body label.form-label { font-weight: 600; color: var(--ink-2); font-size: .9rem; }
body .form-check-input:checked { background-color: var(--forest); border-color: var(--forest); }

/* ── Surfaces: cards, panels, page headers ──────────────────────────────── */
body .card, body .portal-card { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
body .card-header { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
body .portal-card-header { background: var(--forest) !important; font-size: 16px; padding: 16px 22px; }
body .portal-page-header {
  border-radius: var(--r-lg); border-left: 4px solid var(--gold); box-shadow: var(--shadow); padding: 22px 26px;
}
body .portal-page-header::before { display: none; }
body .portal-page-header h1 { color: var(--forest-dark); font-size: 30px; line-height: 1.2; }
body .portal-page-header h1 i { color: var(--gold); font-size: .8em; }
body .portal-page-header p { color: var(--ink-2); }

/* Stat tiles: label never sits under the icon */
body .portal-stat-card { border-radius: var(--r); border-left: 4px solid var(--forest); box-shadow: var(--shadow); text-align: start; padding: 18px 20px; }
body .portal-stat-card:hover { transform: none; box-shadow: var(--shadow); }
body .portal-stat-card h3 { font-family: var(--font-body) !important; font-size: 12.5px; letter-spacing: .02em; text-transform: none; color: var(--ink-2); padding-inline-end: 34px; margin-bottom: 6px; }
body .portal-stat-card .num { font-family: var(--font-body) !important; font-size: 28px; font-weight: 700; color: var(--forest-dark); }
body .portal-stat-card .icon { top: 16px; right: auto; left: auto; inset-inline-end: 16px; color: var(--gold); opacity: .9; }
body .portal-card, body .portal-stat-card { animation: none; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
body .table { --bs-table-hover-bg: rgba(var(--forest-rgb), .035); color: var(--ink); }
body .table thead th {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-2);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
body .table td { border-color: var(--line); vertical-align: middle; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
body .badge { font-weight: 600; letter-spacing: 0; }
body .portal-badge { text-transform: none; letter-spacing: 0; font-size: 12px; }
body .portal-badge-success { background: rgba(var(--forest-rgb), .10); color: var(--forest-dark); }
body .portal-badge-pending { background: rgba(var(--gold-rgb), .16); color: var(--gold-dark); }

/* ── Tabs & modals ──────────────────────────────────────────────────────── */
body .portal-tabs .nav-link.active, body .nav-pills .nav-link.active { background: var(--forest); color: #fff; }
body .nav-tabs .nav-link.active { color: var(--forest); border-bottom-color: var(--gold); }
body .modal-content { border: none; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 30, 20, .28); }
body .portal-wrap .modal-header, body .modal-header.bg-primary { background: var(--forest) !important; }
body .modal-title { font-size: 1.35rem; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
body .alert { border-radius: var(--r); }
body .alert:empty { display: none; }

/* ── App shell (admin + portals) — v11 design ─────────────────────────── */
body.oms-app { background: var(--canvas); --sbw: 268px; --tbh: 62px; }
#sidebar {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--sbw); z-index: 1045;
  display: flex; flex-direction: column; overflow-y: auto; color: #e8f2ee;
  background-color: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M36 6l8.8 21.2L66 36l-21.2 8.8L36 66l-8.8-21.2L6 36l21.2-8.8z'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3C/g%3E%3C/svg%3E");
  transition: transform .22s ease; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
#sidebar .sb-brand { padding: 22px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
#sidebar .sb-logo { display: block; text-decoration: none; }
#sidebar .sb-logo img { display: block; max-width: 196px; max-height: 70px; width: auto; height: auto; margin-inline: auto; }
#sidebar .sb-logo-text { display: block; font-family: var(--font-display) !important; font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.2; text-align: center; }
#sidebar .sb-who { margin-top: 16px; display: flex; gap: 11px; align-items: center; }
#sidebar .sb-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-weight: 600; flex-shrink: 0; object-fit: cover; }
#sidebar .sb-who strong { display: block; font-size: 14px; color: #fff; line-height: 1.3; }
#sidebar .sb-who span { font-size: 12.5px; color: #b9d3c9; }
#sidebar .sb-nav { list-style: none; margin: 0; padding: 8px 12px 20px; flex: 1; }
#sidebar .sb-section { font-size: 12px; color: #9dbfb2; padding: 16px 12px 6px; }
#sidebar .sb-nav a, #sidebar .sb-logout button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 0; background: none;
  color: #dbe9e3; text-decoration: none; font-size: 14.5px; text-align: start; cursor: pointer; line-height: 1.35;
}
#sidebar .sb-nav a i, #sidebar .sb-logout i { width: 20px; text-align: center; color: #9fc5b7; font-size: 1.02rem; flex-shrink: 0; }
#sidebar .sb-nav a:hover, #sidebar .sb-logout button:hover { background: rgba(255,255,255,.08); color: #fff; }
#sidebar .sb-nav a.active { background: var(--surface); color: var(--forest-dark); font-weight: 600; }
#sidebar .sb-nav a.active i { color: var(--gold); }
#sidebar .sb-logout { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
#sidebar .sb-foot { padding: 12px 20px 18px; font-size: 12px; color: #9dbfb2; border-top: 1px solid rgba(255,255,255,.1); }
.sb-backdrop { display: none; }

#topbar {
  position: fixed; top: 0; inset-inline-start: var(--sbw); inset-inline-end: 0; height: var(--tbh); z-index: 1040;
  display: flex; align-items: center; gap: 10px; padding: 0 24px;
  background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transition: inset-inline-start .22s ease;
}
#topbar .tb-title { font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .spacer { flex: 1; }
#topbar .icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--forest); font-size: 1.15rem; cursor: pointer; padding: 0;
}
#topbar .icon-btn:hover { border-color: var(--forest); }
#topbar .sidebar-toggle { border-radius: 10px; }
#topbar .badge-count {
  position: absolute; top: 4px; inset-inline-end: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px;
  background: #b42318; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
#topbar .search-wrap { position: relative; }
#topbar .search-wrap input { border-radius: 30px; border: 1px solid var(--line); padding: .45rem 1rem; padding-inline-start: 2.3rem; font-size: .88rem; width: 290px; background: var(--surface); }
#topbar .search-wrap .bi-search { position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
#topbar .lang-switch { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: 3px; }
#topbar .lang-switch a { text-decoration: none; padding: 4px 12px; border-radius: 30px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
#topbar .lang-switch a.is-on { background: var(--forest); color: #fff; }
#topbar .user-menu .dropdown-toggle { background: none; border: 0; display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 500; color: var(--ink); padding: .25rem .4rem; border-radius: 10px; }
#topbar .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--gold); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 600; }
#topbar .tb-drop { width: 310px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
#topbar .tb-drop-head { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--forest-dark); background: var(--surface-2); border-bottom: 1px solid var(--line); }
#topbar .tb-count { background: var(--gold) !important; }
.global-search-results { display: none; position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); max-height: 360px; overflow-y: auto; z-index: 1050; border: 1px solid var(--line); }
.global-search-results.open { display: block; }
.global-search-results a { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; color: var(--ink); text-decoration: none; font-size: .86rem; border-bottom: 1px solid var(--line); }
.global-search-results a:hover { background: var(--surface-2); }
.global-search-results .gsr-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--forest-rgb),.08); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; }
.global-search-results .gsr-type { font-size: .72rem; color: var(--ink-3); }
.global-search-results .gsr-empty, .global-search-results .gsr-loading { padding: .9rem; text-align: center; color: var(--ink-3); font-size: .84rem; }

#main-content { margin-inline-start: var(--sbw); padding: calc(var(--tbh) + 26px) 28px 36px; min-height: 100vh; transition: margin .22s ease; overflow-x: hidden; }
#main-content .row { margin-left: 0; margin-right: 0; }   /* rows are used without .container throughout the views */

body.sb-collapsed #sidebar { transform: translateX(-100%); }
[dir="rtl"] body.sb-collapsed #sidebar { transform: translateX(100%); }
body.sb-collapsed #topbar { inset-inline-start: 0; }
body.sb-collapsed #main-content { margin-inline-start: 0; }
@media (max-width: 992px) {
  #sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.25); }
  [dir="rtl"] #sidebar { transform: translateX(100%); }
  body.sb-open #sidebar { transform: none; }
  body.sb-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,20,14,.45); z-index: 1044; }
  #topbar { inset-inline-start: 0; padding: 0 14px; }
  #main-content { margin-inline-start: 0; padding: calc(var(--tbh) + 18px) 14px 28px; }
}
@media (max-width: 575px) { #topbar .tb-title { display: none; } #topbar .lang-switch a { padding: 4px 9px; } }

body .oms-empty-page { text-align: center; padding: 56px 16px; max-width: 620px; margin: 0 auto; }
body .oms-empty-code { font-size: 88px; line-height: 1; color: var(--gold); font-weight: 700; }
body .oms-empty-page h1, body .oms-empty-page h2 { color: var(--forest-dark); font-size: 30px; margin: 10px 0 8px; }
body .oms-empty-page p { color: var(--ink-2); margin-bottom: 20px; }

/* ── Public website ─────────────────────────────────────────────────────── */
body .page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
body .section-title { color: var(--forest-dark); }
body .section-tag { letter-spacing: .12em; }
body .oms-hdr-link { font-weight: 500; }

/* Print: no shell chrome */
@media print {
  #topbar, #sidebar, .oms-hdr, .oms-ftr { display: none !important; }
  #main-content { margin: 0 !important; padding: 0 !important; }
}

/* Public header: keep the menu on one line on laptop screens */
@media (min-width: 1100px) {
  body .oms-hdr-nav { flex-wrap: nowrap; gap: 0; }
  body .oms-hdr-link { padding: .5rem .62rem; font-size: .9rem; white-space: nowrap; }
}

/* Small screens: brand stays on one line, header actions stay visible */
@media (max-width: 575px) {
  body .oms-hdr-inner { padding: 0 .8rem; gap: .5rem; }
  body .oms-hdr-brand { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
  body .oms-hdr-brand img { height: 34px; }
  body .oms-hdr-actions { gap: .35rem; }
  body .portal-page-header h1 { font-size: 25px; }
}

/* ── Bilingual field pairs (English | العربية) ─────────────────────────── */
.bi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bi-col { position: relative; min-width: 0; }
.bi-col > .form-control, .bi-col > input, .bi-col > textarea { padding-inline-start: 40px !important; width: 100%; }
.bi-lang {
  position: absolute; inset-inline-start: 8px; top: 11px; z-index: 2;
  min-width: 24px; height: 22px; padding: 0 5px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10.5px/1 var(--font-body); letter-spacing: .3px;
  background: rgba(var(--forest-rgb, 0,73,56), .08); color: var(--forest, #004938); pointer-events: none;
}
.bi-col-ar .bi-lang { background: rgba(219,157,46,.16); color: #8a5a0a; font-family: var(--font-display); font-size: 14px; }
.bi-col-ar > .form-control, .bi-col-ar > input, .bi-col-ar > textarea { font-family: 'IBM Plex Sans Arabic', var(--font-body); background-color: #fffdf7; }
.form-grid { grid-auto-flow: row dense; }
.form-grid > .bi-group { grid-column: span 2; }
.form-grid > .bi-group.fg-full, .form-grid.single > .bi-group { grid-column: 1 / -1; }
.bi-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12.5px; color: var(--muted, #5a7a6e);
  background: #fffaf0; border: 1px solid #f1dfb8; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.bi-legend .bi-lang { position: static; margin-inline-end: 4px; }
@media (max-width: 680px) {
  .form-grid > .bi-group { grid-column: 1 / -1; }
  .bi-pair { grid-template-columns: 1fr; gap: 8px; }
}
/* read-only bilingual values in review/profile modals */
.bi-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bi-val .ar { font-family: 'IBM Plex Sans Arabic', var(--font-body); direction: rtl; unicode-bidi: isolate; color: #7a5a12; }
.bi-val .ar:empty { display: none; }
.bi-val .ar-missing { font-size: 11.5px; color: #b45309; }

/* Buttons placed in a coloured modal header stay readable */
.modal-header .btn:not(.btn-close) { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.38) !important; box-shadow: none !important; }
.modal-header .btn:not(.btn-close):hover { background: var(--surface) !important; color: var(--forest, #004938) !important; }

/* Arrows point the reading direction in Arabic */
[dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-left, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-chevron-left,
[dir="rtl"] .bi-arrow-right, [dir="rtl"] .bi-arrow-left, [dir="rtl"] .bi-chevron-right, [dir="rtl"] .bi-chevron-left,
[dir="rtl"] .fa-long-arrow-alt-right, [dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-angle-left { transform: scaleX(-1); display: inline-block; }

/* ── Accordions ─────────────────────────────────────────────────────────── */
body .accordion { --bs-accordion-active-bg: rgba(var(--forest-rgb), .06); --bs-accordion-active-color: var(--forest-dark); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--forest-rgb), .12); --bs-accordion-border-color: var(--line); }
body .accordion-item { background: var(--surface); }

/* Phones: stat tiles two per row, compact */
@media (max-width: 575.98px) {
  body .portal-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body .portal-stat-card { padding: 14px; }
  body .portal-stat-card .num { font-size: 20px; }
  body .portal-stat-card .icon { display: none; }
  body .portal-stat-card h3 { padding-inline-end: 0; font-size: 12px; }
  body .portal-page-header { padding: 18px; }
  body .portal-page-header h1 { font-size: 24px; }
}

/* ── Sidebar: department groups ─────────────────────────────────────────── */
#sidebar .sb-group { list-style: none; margin: 2px 0; }
#sidebar .sb-dept {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #e3f1ec;
  padding: 9px 12px; border-radius: 10px; font-size: .95rem; font-weight: 600; text-align: start;
}
#sidebar .sb-dept:hover { background: rgba(255,255,255,.08); color: #fff; }
#sidebar .sb-dept > i:first-child { width: 20px; text-align: center; color: var(--gold); font-size: 1.02rem; flex-shrink: 0; }
#sidebar .sb-dept span { flex: 1; min-width: 0; }
#sidebar .sb-dept .sb-chev { font-size: .75rem; color: #9fc5b7; transition: transform .15s ease; }
#sidebar .sb-group.open .sb-chev { transform: rotate(180deg); }
#sidebar .sb-sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 14px; display: none; border-inline-start: 1px solid rgba(255,255,255,.12); margin-inline-start: 21px; }
[dir="rtl"] #sidebar .sb-sub { padding: 0 14px 0 0; }
#sidebar .sb-group.open .sb-sub { display: block; }
#sidebar .sb-sub a { padding-top: 7px; padding-bottom: 7px; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { #sidebar .sb-dept .sb-chev { transition: none; } }
/* Switches sitting on a green card header */
body .portal-card-header .form-check-input { background-color: rgba(255,255,255,.25); border-color: rgba(255,255,255,.6); width: 2.6em; height: 1.35em; cursor: pointer;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
body .portal-card-header .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
body .portal-card-header .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.35); }
/* Every modal header in the app: the green band (unless a page gives it its own colour) */
body #main-content .modal-header:not([class*="bg-"]) { background: var(--forest); color: #fff; border-bottom: 0; }
body #main-content .modal-header:not([class*="bg-"]) .modal-title { color: #fff; }
body #main-content .modal-header:not([class*="bg-"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .85; }