/* ════════════════════════════════════════════════════════
   Procurement System - Application Styles
   Design-system refresh (v141) — refined tokens, elevation,
   typography and components. Layout + the discharge frozen-column
   block are unchanged. Brand: navy + green.
   ════════════════════════════════════════════════════════ */

/* ─── Design tokens ─────────────────────────────────── */
:root {
  /* brand (existing names kept for compatibility) */
  --brand-green:       #1B5E35;
  --brand-green-mid:   #2E7D32;
  --brand-green-light: #A5D6A7;
  --brand-navy:        #0D2E5C;
  --brand-navy-light:  #1565C0;
  --brand-bg:          #EEF2F7;
  --sidebar-width:      240px;
  --header-height:      60px;

  /* extended palette */
  --navy-900: #0A2347;
  --navy-700: var(--brand-primary, #16324F);
  --green-700:#155029;
  --ink:      #1f2a37;
  --muted:    #6b7280;
  --line:     #e6ebf2;
  --surface:  #ffffff;
  --surface-2:#f7f9fc;
  --app-bg:   #eef2f7;

  /* elevation + shape */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.07);
  --shadow-md: 0 4px 14px rgba(16,24,40,.08);
  --shadow-lg: 0 14px 34px rgba(16,24,40,.16);
  --ring:      0 0 0 .2rem rgba(27,94,53,.20);
  --t:         .18s ease;

  /* ─── Glass ──────────────────────────────────────────
     Translucency here is a MATERIAL, not a finish. Every surface below sits over
     something worth seeing — the sidebar over the page wash, the top bar over the
     content that scrolls under it, a button over whatever card it is on — so the blur
     is doing work rather than fogging a flat colour for the look of it.

     Three layers make the material read, and dropping any one of them turns it back
     into a tinted rectangle: a TINT that carries the hue, a BLUR that bends what is
     behind, and a hairline EDGE lit from the top so the pane has a thickness. The
     highlight is what your eye reads as glass; the blur alone never does. */
  --glass-blur:      18px;
  --glass-sat:       1.45;
  --glass-navy:      rgba(13,46,92,.82);
  --glass-navy-soft: rgba(13,46,92,.10);
  --glass-green:     rgba(27,94,53,.82);
  --glass-green-soft:rgba(27,94,53,.10);
  --glass-white:     rgba(255,255,255,.72);
  --glass-edge:      rgba(255,255,255,.20);   /* lit edge on dark panes  */
  --glass-edge-ink:  rgba(16,24,40,.10);      /* lit edge on light panes */
  --glass-hi:        rgba(255,255,255,.26);   /* top inner highlight     */
  --glass-shadow:    0 10px 34px rgba(10,24,53,.26);
}

/* backdrop-filter is the whole effect. Where it is unsupported the panes must not
   become unreadable, so the fallbacks below run OPAQUE rather than translucent —
   a transparent sidebar over the page wash with no blur is illegible, and that is
   exactly the state an untested @supports fallback ships. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-navy:  rgba(13,46,92,.97);
    --glass-green: rgba(27,94,53,.97);
    --glass-white: rgba(255,255,255,.97);
  }
}

/* ─── Base ─────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: 'Cairo', 'Segoe UI', Arial, sans-serif;
  /* The ambient wash. Glass needs SOMETHING behind it or the blur has nothing to bend,
     and a flat #EEF2F7 gives it nothing — the panes read as grey plastic. These are the
     brand's own two hues at very low strength, placed where the panes actually sit: the
     green anchored at the sidebar edge (the right in Arabic, the left in English) and the navy
     spread across the content. Deliberately pale. The page stays a LIGHT surface that
     white cards and dense tables read against; this is the light the glass catches, not
     a dark theme arriving through the back door. */
  background:
    radial-gradient(1100px 720px at 100% 0%,   rgba(27,94,53,.13) 0%, rgba(27,94,53,0) 62%),
    radial-gradient(900px 620px at 8% 4%,      rgba(21,101,192,.11) 0%, rgba(21,101,192,0) 58%),
    radial-gradient(1000px 800px at 45% 110%,  rgba(13,46,92,.09) 0%, rgba(13,46,92,0) 60%),
    var(--app-bg);
  background-attachment: fixed;
  margin: 0;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Sidebar ──────────────────────────────────────── */
/* The pane is built in three stacked layers, painted back to front:
     1. a DIAGONAL SHEEN — the bright corner that falls away across the panel. This is
        the gesture the reference is built on; here it runs the brand's green into its
        navy instead of the reference's cyan into blue.
     2. the BODY gradient, navy at the top through to the deep navy at the foot.
     3. the lit EDGE and the top highlight, which is what reads as thickness.
   The tint sits at .82 rather than opaque, so the page wash behind genuinely moves
   through it as the content scrolls. */
.sidebar {
  position: fixed;
  top: 0; inset-inline-start: 0;
  width: var(--sidebar-width);
  height: 100vh;
  /* EVERY layer carries alpha. An opaque gradient here would paint straight over the
     translucent background-color beneath it and the pane would stop being glass at all —
     the blur would still run, costing a compositor layer, and show nothing. The stack
     deepens from .84 at the head to .93 at the foot, so the panel reads as one piece of
     material that thickens as it falls rather than as a flat tint. */
  background:
    linear-gradient(157deg, rgba(46,125,50,.24) 0%, rgba(21,101,192,.15) 26%,
                            rgba(10,35,71,.00) 52%),
    linear-gradient(188deg, rgba(13,46,92,.84) 0%, rgba(10,35,71,.90) 58%, rgba(7,26,51,.93) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-inline-start: 1px solid var(--glass-edge);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--glass-shadow);
}
/* The top highlight. A pseudo-element rather than a border, because it has to sit
   INSIDE the rounded edge and fade out — a border cannot do either. */
/* English (left-to-right, decision 41): the sidebar moves to the left, so the page's
   ambient wash and the pane's sheen are mirrored with it. */
[dir="ltr"] body {
  background:
    radial-gradient(1100px 720px at 0% 0%,     rgba(27,94,53,.13) 0%, rgba(27,94,53,0) 62%),
    radial-gradient(900px 620px at 92% 4%,     rgba(21,101,192,.11) 0%, rgba(21,101,192,0) 58%),
    radial-gradient(1000px 800px at 55% 110%,  rgba(13,46,92,.09) 0%, rgba(13,46,92,0) 60%),
    var(--app-bg);
  background-attachment: fixed;
}
[dir="ltr"] .sidebar {
  background:
    linear-gradient(203deg, rgba(46,125,50,.24) 0%, rgba(21,101,192,.15) 26%,
                            rgba(10,35,71,.00) 52%),
    linear-gradient(172deg, rgba(13,46,92,.84) 0%, rgba(10,35,71,.90) 58%, rgba(7,26,51,.93) 100%);
}
.sidebar::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 120px;
  background: linear-gradient(180deg, var(--glass-hi) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.sidebar > * { position: relative; }
/* A dark scrollbar: the light default cut a bright stripe down the pane. */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border: none; border-radius: 6px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

.sidebar-brand {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--glass-edge);
  text-align: center;
}
.sidebar-brand .brand-title {
  font-size: 18px; font-weight: 800; letter-spacing: 1px; color: #fff;
}
.sidebar-brand .brand-subtitle {
  font-size: 10px; color: rgba(255,255,255,.84); margin-top: 2px; letter-spacing: .5px;
}
.sidebar-logo { width: 56px; margin-bottom: 6px; }

.sidebar-section { padding: 12px 0 4px 0; }
/* The group label. Raised off .5 to .62 alpha: at 9px and 2px of tracking, half-white
   on this panel measures under 4.5:1 and these are the words that tell you where you
   are in the menu. */
.sidebar-section-title {
  font-size: 9.5px; font-weight: 800; letter-spacing: 2px;
  color: rgba(255,255,255,.80); padding: 0 20px 7px; text-transform: uppercase;
}
/* A hairline between groups, the way the reference separates its own bands. Drawn on
   the group rather than as an element, so it survives any number of hidden links. */
.sidebar-section + .sidebar-section { border-top: 1px solid rgba(255,255,255,.10); margin-top: 4px; }

/* ── Nav links ───────────────────────────────────────
   The rest position is BARE — no fill, no border. Fourteen framed pills stacked down a
   panel is a list of buttons, not a menu, and it leaves nothing for the selected one to
   say. Hover lifts a faint pane; the active row is the only one wearing glass. */
.sidebar-link {
  display: flex; align-items: center; gap: 11px;
  margin: 1px 10px; padding: 10px 14px;
  color: rgba(255,255,255,.86);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border-radius: 11px; border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
  cursor: pointer;
}
.sidebar-link:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
/* State is carried by fill AND weight AND the lit edge — never by colour alone, which
   is the same redundancy rule the printed documents follow. */
.sidebar-link.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%),
    rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.24);
  color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 10px rgba(0,0,0,.16);
}
/* The selected marker, on the START edge — logical, so it stays on the reading side
   in the RTL shell and in the LTR foreign module alike. */
.sidebar-link.active::before {
  content: ''; position: absolute; inset-inline-start: -10px; top: 50%;
  width: 3px; height: 18px; transform: translateY(-50%);
  border-radius: 0 3px 3px 0; background: var(--brand-green-light);
}
.sidebar-link { position: relative; }
.sidebar-link i { font-size: 15px; width: 20px; text-align: center; opacity: .9; flex: none; }
.sidebar-link.active i { opacity: 1; }
.sidebar-link:focus-visible {
  outline: 2px solid var(--brand-green-light); outline-offset: -2px;
}

.sidebar-footer {
  margin-top: auto; padding: 14px 16px;
  border-top: 1px solid var(--glass-edge);
  font-size: 10px; color: rgba(255,255,255,.76); text-align: center; line-height: 1.7;
}

/* ─── Main content ─────────────────────────────────── */
.main-content { margin-inline-start: var(--sidebar-width); min-height: 100vh; padding: 0; }

/* Light glass, because this pane sits over the CONTENT rather than over the wash, and
   content is what has to stay readable through it. Same three layers as the sidebar,
   inverted: white tint, blur, and a lit edge — here the highlight is on the underside,
   which is where a pane lit from above catches it. */
.top-bar {
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  padding: 12px 28px;
  border-bottom: 1px solid var(--glass-edge-ink);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 6px 22px rgba(16,24,40,.07);
}
.top-bar-title { font-size: 16.5px; font-weight: 800; color: var(--navy-700); letter-spacing: .2px; }

.page-body { padding: 24px 28px; }

/* ─── Section headers ──────────────────────────────── */
.section-header {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.section-title {
  font-size: 18px; font-weight: 800; color: var(--navy-700);
  position: relative; padding-inline-start: 14px;
}
.section-title::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 3px;
  background: linear-gradient(var(--brand-green), var(--brand-navy));
}

/* ─── Tables ───────────────────────────────────────── */
.data-table-wrapper {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.table { margin-bottom: 0; }
.table thead th {
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--brand-navy) 100%);
  color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .2px;
  border: none; padding: 12px 14px; white-space: nowrap;
}
.table tbody td {
  vertical-align: middle; font-size: 13px; padding: 10px 14px;
  border-color: #eef1f5; color: var(--ink);
}
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover td { background: #eef7f1; }

/* ─── Cards ────────────────────────────────────────── */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-header { font-weight: 700; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ─── Form controls ────────────────────────────────── */
.form-label { font-weight: 700; font-size: 13px; color: #374151; margin-bottom: 4px; }
.form-control, .form-select {
  font-family: 'Cairo', sans-serif; font-size: 13px;
  border-radius: var(--radius-sm); border-color: #d7dde5; color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-control:hover, .form-select:hover { border-color: #b9c2cf; }
.form-control:focus, .form-select:focus { border-color: var(--brand-green); box-shadow: var(--ring); }
.form-control::placeholder { color: #aab2bd; }
.form-check-input:checked { background-color: var(--brand-green); border-color: var(--brand-green); }
.form-check-input:focus { border-color: var(--brand-green); box-shadow: var(--ring); }
.input-group-text { border-radius: var(--radius-sm); }

/* ─── Buttons ──────────────────────────────────────── */
/* ─── Buttons: tinted glass ──────────────────────────
   Every button is a pane of coloured glass — a tint that carries the hue, a blur behind
   it, a lit top edge, and the surface showing through.

   The alpha is the whole engineering problem, and it is set by CONTRAST, not by taste.
   These buttons sit mostly on white cards, and white label text needs 4.5:1 against
   whatever the tint composites to. Navy #0D2E5C at .72 over white lands on #51698A —
   4.6:1, which passes and then fails the moment the button is dragged onto a grey
   toolbar. At .88 it composites to #26456F and holds 8.0:1 on white and 6.2:1 on the
   darkest surface in the app, so .88 is the floor for any filled button and the label
   never depends on what happens to be underneath.

   The translucency is still doing real work: the surface tints the pane, the blur bends
   what scrolls behind it, and on the glass sidebar and the coloured alert heads the
   buttons pick up their host instead of punching a solid hole in it. */
.btn {
  font-family: 'Cairo', sans-serif; font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
  transition: background var(--t), border-color var(--t), box-shadow var(--t),
              transform var(--t), color var(--t);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; box-shadow: none; }

/* Filled panes. The inset top line is the lit edge; without it a translucent fill is
   just a weak colour. */
.btn-primary, .btn-success, .btn-danger, .btn-warning,
.btn-secondary, .btn-dark, .btn-info {
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 8px rgba(16,24,40,.10);
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover,
.btn-secondary:hover, .btn-dark:hover, .btn-info:hover {
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary   { background: rgba(13,46,92,.88);  border-color: rgba(255,255,255,.18); color: #fff; }
.btn-primary:hover   { background: rgba(10,35,71,.94);  border-color: rgba(255,255,255,.26); color: #fff; }
.btn-success   { background: rgba(27,94,53,.88);  border-color: rgba(255,255,255,.18); color: #fff; }
.btn-success:hover   { background: rgba(21,80,41,.94);  border-color: rgba(255,255,255,.26); color: #fff; }
.btn-danger    { background: rgba(178,32,32,.90); border-color: rgba(255,255,255,.18); color: #fff; }
.btn-danger:hover    { background: rgba(152,26,26,.95); border-color: rgba(255,255,255,.26); color: #fff; }
.btn-secondary { background: rgba(71,85,105,.88); border-color: rgba(255,255,255,.18); color: #fff; }
.btn-secondary:hover { background: rgba(51,65,85,.94);  border-color: rgba(255,255,255,.26); color: #fff; }
.btn-dark      { background: rgba(16,24,40,.88);  border-color: rgba(255,255,255,.20); color: #fff; }
.btn-dark:hover      { background: rgba(10,16,28,.95);  border-color: rgba(255,255,255,.28); color: #fff; }
.btn-info      { background: rgba(17,84,159,.92); border-color: rgba(255,255,255,.18); color: #fff; }
.btn-info:hover      { background: rgba(14,69,133,.96); border-color: rgba(255,255,255,.26); color: #fff; }
/* Amber is the one hue that cannot take white text at any alpha — it is a LIGHT colour.
   It keeps the dark label Bootstrap gives it, and the tint stays high so the ink holds. */
.btn-warning   { background: rgba(249,168,37,.90); border-color: rgba(120,80,0,.22); color: #3d2c00; }
.btn-warning:hover   { background: rgba(232,152,20,.96); border-color: rgba(120,80,0,.32); color: #3d2c00; }
/* .btn-light is used ON the coloured alert heads, where it is the only pale thing
   present; it stays near-solid so it reads as a control rather than a smudge. */
.btn-light     { background: rgba(255,255,255,.92); border-color: rgba(16,24,40,.10); color: var(--navy-700); }
.btn-light:hover     { background: #fff; border-color: rgba(16,24,40,.18); color: var(--brand-navy); }

/* Outline panes. Here the glass is genuinely thin — a breath of the hue over whatever
   is behind — and the LABEL carries the contrast at full strength, so it stays legible
   at any alpha. This is the variant that shows the material best. */
.btn-outline-primary, .btn-outline-success, .btn-outline-danger,
.btn-outline-secondary, .btn-outline-warning, .btn-outline-dark {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-outline-primary   { color: var(--brand-navy); background: var(--glass-navy-soft);  border-color: rgba(13,46,92,.28); }
.btn-outline-primary:hover   { color: #fff; background: rgba(13,46,92,.90);  border-color: rgba(13,46,92,.90); }
.btn-outline-success   { color: var(--green-700);  background: var(--glass-green-soft); border-color: rgba(27,94,53,.30); }
.btn-outline-success:hover   { color: #fff; background: rgba(27,94,53,.90);  border-color: rgba(27,94,53,.90); }
.btn-outline-danger    { color: #A81E1E; background: rgba(198,40,40,.09);  border-color: rgba(198,40,40,.30); }
.btn-outline-danger:hover    { color: #fff; background: rgba(198,40,40,.90); border-color: rgba(198,40,40,.90); }
.btn-outline-secondary { color: #3f4a5a; background: rgba(71,85,105,.09);  border-color: rgba(71,85,105,.28); }
.btn-outline-secondary:hover { color: #fff; background: rgba(71,85,105,.90); border-color: rgba(71,85,105,.90); }
.btn-outline-warning   { color: #745300; background: rgba(201,150,12,.12); border-color: rgba(201,150,12,.36); }
.btn-outline-warning:hover   { color: #3d2c00; background: rgba(249,168,37,.92); border-color: rgba(201,150,12,.60); }
.btn-outline-dark      { color: #1f2a37; background: rgba(16,24,40,.08);   border-color: rgba(16,24,40,.26); }
.btn-outline-dark:hover      { color: #fff; background: rgba(16,24,40,.90); border-color: rgba(16,24,40,.90); }

.btn-sm { border-radius: 7px; }
/* Disabled is a STATE, not a faded copy: the pane loses its lift and its edge, which is
   what says «not now» without relying on the label going grey. */
.btn:disabled, .btn.disabled {
  opacity: .55; box-shadow: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ─── Badges ───────────────────────────────────────── */
.badge { font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 700; padding: .38em .6em; border-radius: 7px; letter-spacing: .2px; }

/* ─── Modals (Bootstrap) ───────────────────────────── */
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header  { border-bottom: 1px solid var(--line); }
.modal-footer  { border-top: 1px solid var(--line); }

/* ─── Alerts ───────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); }
.alert-light { background: var(--surface-2); }

/* ─── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #eef1f5; }
::-webkit-scrollbar-thumb { background: #c2cbd6; border-radius: 6px; border: 2px solid #eef1f5; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-green); }

/* ─── Utilities ────────────────────────────────────── */
.text-brand { color: var(--brand-green); }
.bg-brand   { background: var(--brand-green); }

@media (max-width: 768px) {
  .sidebar { width: 220px; }
  .main-content { margin-inline-start: 220px; }
  .page-body { padding: 14px 16px; }
}

/* ── Discharge sheet: freeze the leading columns (م + الصنف + الوحدة + الكمية)
   so the item stays visible while scrolling between vendors. Pinned to the start side.
   The offsets are the RUNNING SUM of those column widths. Since v157 they are fed
   as CSS variables by `_updateDisTableWidth()` from the single `DISW` width table
   in js/discharge.js, so changing a column width can no longer desync the freeze.
   The literals below are only fallbacks (the pre-v157 widths 52/260/60). ── */
#dis-items-table thead th:nth-child(1),
#dis-items-table tbody td:nth-child(1) { position: sticky; inset-inline-start: 0;                     z-index: 2; }
#dis-items-table thead th:nth-child(2),
#dis-items-table tbody td:nth-child(2) { position: sticky; inset-inline-start: var(--dis-r2, 52px);   z-index: 2; }
#dis-items-table thead th:nth-child(3),
#dis-items-table tbody td:nth-child(3) { position: sticky; inset-inline-start: var(--dis-r3, 312px);  z-index: 2; }
#dis-items-table thead th:nth-child(4),
#dis-items-table tbody td:nth-child(4) { position: sticky; inset-inline-start: var(--dis-r4, 372px);  z-index: 2; }
/* opaque backgrounds so scrolled vendor columns don't show through the frozen cells */
#dis-items-table tbody td:nth-child(-n+4) { background: #fff; }
#dis-items-table thead th:nth-child(-n+4) { background: #212529; z-index: 4; }
/* freeze the totals label (it spans the first 4 columns) */
#dis-items-table tfoot td:nth-child(1) { position: sticky; inset-inline-start: 0; z-index: 2; background: #fff3cd; }
/* visible separator at the freeze boundary */
#dis-items-table thead th:nth-child(4),
#dis-items-table tbody td:nth-child(4),
#dis-items-table tfoot td:nth-child(1) { box-shadow: -3px 0 5px -2px rgba(0,0,0,.25); }

/* ════════════════════════════════════════════════════════
   REPORTS HUB  (#page-reports)  — «مركز التقارير»
   Scoped entirely under .rpx so it cannot reach any other screen.

   The identity is the app's own navy + green; what makes this page its own is
   STRUCTURE, not a new palette: a sticky index rail on the start side (the tab
   dividers of a physical file), and a monospace document code on every card —
   PR / P / DIS / CHQ is how this department names its own paperwork, so it is
   the fastest label there is and it says what the report reads.
   ════════════════════════════════════════════════════════ */
.rpx { --rpx-rail: 210px; padding-bottom: 40px; }

/* ── head ── */
.rpx-head {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  justify-content: space-between;
  padding: 0; margin-bottom: 18px;
  background: none; color: var(--c-ink, #16324F);
}
.rpx-eyebrow {
  font-size: 13px; font-weight: 500;
  color: var(--c-muted, #51637A); margin-bottom: 4px;
}
.rpx-title { font-size: 26px; font-weight: 600; margin: 0 0 6px; line-height: 1.25; }
.rpx-lede { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.8; color: var(--c-muted, #51637A); }
.rpx-stats { display: flex; gap: 10px; }
.rpx-stat {
  min-width: 84px; text-align: center; padding: 10px 14px;
  background: var(--c-surface, #fff); border: 1px solid var(--c-line, #E3E8EE);
  border-radius: var(--radius-sm);
}
.rpx-stat b { display: block; font-size: 22px; font-weight: 600; line-height: 1.15; }
.rpx-stat span { font-size: 12px; color: var(--c-muted, #51637A); }
.rpx-stat-new { background: var(--c-warn-tint, #FFF1DC); border-color: #F2D3A6; }
.rpx-stat-new b { color: var(--c-warn, #8A4600); }

/* ── search ── */
.rpx-search { position: relative; margin-bottom: 16px; }
.rpx-search > .bi-search {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.rpx-search input {
  width: 100%; padding: 12px 42px; font-family: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--t), border-color var(--t);
}
.rpx-search input:focus { outline: none; border-color: var(--brand-green); box-shadow: var(--ring); }
.rpx-clear {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.rpx-clear:hover { background: var(--line); color: var(--ink); }

/* ── layout ── */
.rpx-body { display: grid; grid-template-columns: var(--rpx-rail) 1fr; gap: 22px; align-items: start; }

/* ── index rail ── */
.rpx-rail { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 2px; }
.rpx-rail-i {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  border-inline-start: 3px solid transparent; transition: all var(--t);
}
.rpx-rail-i:hover { background: var(--surface); color: var(--ink); }
.rpx-rail-i.on {
  background: var(--surface); color: var(--navy-900);
  border-inline-start-color: var(--brand-green); box-shadow: var(--shadow-sm);
}
.rpx-rail-i .bi { font-size: 14px; opacity: .8; }
.rpx-rail-t { flex: 1; min-width: 0; }
.rpx-rail-n {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border-radius: 20px; padding: 1px 7px;
}
.rpx-rail-i.on .rpx-rail-n { background: #E8F2EA; color: var(--green-700); }

/* ── group ── */
.rpx-g { scroll-margin-top: 14px; margin-bottom: 30px; }
.rpx-g[hidden] { display: none; }
.rpx-g-h {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 2px solid var(--navy-900);
}
.rpx-g-h > .bi {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  background: var(--navy-900); color: #fff; border-radius: var(--radius-sm); font-size: 16px;
}
.rpx-g-h h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy-900); line-height: 1.3; }
.rpx-g-h span { font-size: 12px; color: var(--muted); }
.rpx-g-codes { margin-inline-start: auto; display: flex; gap: 5px; }
.rpx-g-codes code {
  font-family: Consolas, "Courier New", monospace; font-size: 10.5px; font-weight: 700;
  direction: ltr; color: var(--navy-700); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px;
}

/* ── cards ── */
.rpx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px; align-items: start;
}
.rpx-c {
  display: flex; flex-direction: column;
  padding: 15px 16px 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.rpx-c[hidden] { display: none; }
.rpx-c:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #cfd9e6; }
.rpx-c-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }

/* the signature mark */
.rpx-code {
  font-family: Consolas, "Courier New", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; direction: ltr;
  color: #fff; background: var(--navy-900);
  border-radius: 5px; padding: 3px 9px;
}
.rpx-c.t-audit  .rpx-code { background: #8A4B00; }
.rpx-c.t-custom .rpx-code { background: var(--green-700); }
.rpx-new {
  font-size: 10px; font-weight: 800; color: #8A4B00;
  background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 20px; padding: 1px 8px;
}
.rpx-c.is-new { border-color: #FCD34D; }

.rpx-c h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.rpx-c p  { margin: 0 0 13px; font-size: 12px; line-height: 1.85; color: var(--muted); }
.rpx-c-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

.rpx-run {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: #fff; background: var(--brand-green); border: 0; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--t);
}
.rpx-run-w { width: 100%; }
.rpx-run:hover { background: var(--green-700); }
.rpx-run:focus-visible { outline: none; box-shadow: var(--ring); }

.rpx-pick { display: flex; gap: 7px; }
.rpx-pick select {
  flex: 1; min-width: 0; padding: 8px 10px; font-family: inherit; font-size: 12px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rpx-pick select:focus { outline: none; border-color: var(--brand-green); box-shadow: var(--ring); }

.rpx-doc {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; font-size: 11.5px; line-height: 1.6; color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.rpx-home {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
}
.rpx-home .bi { font-size: 12px; opacity: .7; }

.rpx-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ── responsive ── */
@media (max-width: 900px) {
  .rpx-body { grid-template-columns: 1fr; }
  .rpx-rail {
    position: static; flex-direction: row; flex-wrap: wrap;
    padding-bottom: 4px; margin-bottom: 4px;
  }
  .rpx-rail-i { border-inline-start: 0; border-bottom: 3px solid transparent; }
  .rpx-rail-i.on { border-inline-start: 0; border-bottom-color: var(--brand-green); }
  .rpx-head { padding: 0; }
  .rpx-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .rpx-c, .rpx-rail-i, .rpx-run, .rpx-search input { transition: none; }
  .rpx-c:hover { transform: none; }
}
@media print { .rpx { display: none; } }

/* ════════════════════════════════════════════════════════
   SIDEBAR GROUPS — مجموعات القائمة الجانبية المنسدلة
   صارت الشاشات ٢٧ رابطاً، وهو أطول من الشاشة. الأقسام كانت عناوين ساكنة؛
   صارت أزراراً تطوي محتواها.

   .sidebar-section-title باقٍ على العنوان عمداً — app.js يخفيه بهذا الصنف
   لمستخدم الإدارة الطالبة، وتغييرُ الصنف كان سيكسر ذلك بصمت.
   ════════════════════════════════════════════════════════ */

.sidebar-section-title.sg-h {
  display: flex; align-items: center; gap: 9px;
  width: calc(100% - 20px); margin: 0 10px 4px;
  padding: 8px 10px;
  background: transparent; border: 0; border-radius: 9px;
  text-align: start; cursor: pointer;
  text-transform: uppercase;
  transition: background var(--t);
}
.sidebar-section-title.sg-h:hover  { background: rgba(255,255,255,.07); }
.sidebar-section-title.sg-h:focus-visible {
  outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.45);
}
.sg-ic { font-size: 13px; opacity: .75; flex: none; }
.sg-t  { flex: 1; min-width: 0; letter-spacing: 2px; }

/* عدّاد الروابط الظاهرة — يملؤه app.js، ويختفي وهو فارغ فلا يترك دائرة خاوية */
.sg-n {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0;
  color: rgba(255,255,255,.72); background: rgba(255,255,255,.12);
  border-radius: 20px; padding: 1px 7px;
}
.sg-n:empty { display: none; }

.sg-cv {
  font-size: 11px; flex: none; opacity: .65;
  transition: transform var(--t);
}
.sidebar-section-title.sg-h[aria-expanded="false"] .sg-cv { transform: rotate(-90deg); }

/* الطي: شبكة بصفّ واحد ينكمش من 1fr إلى 0fr — بلا ارتفاع محسوب بجافاسكربت.
   الغلاف .sg-inner لازم لا زينة: بدونه تصير الروابط الثمانية ثمانية صفوف،
   وgrid-template-rows:0fr تصفّر الأول وحده فلا ينطوي شيء — وهذا ما حدث فعلاً في أول تجربة. */
.sidebar-section-body {
  display: grid; grid-template-rows: 1fr;
  /* الطيّ فوري: grid-template-rows غير مدرجة في الانتقال عمداً.
     الانتقال بين 1fr و 0fr مدعوم في كروم الحديث، لكنه غير مدعوم في محرّكات
     أقدم — وعندها تعلق الحركة عند قيمتها الأولى فلا تنطوي القائمة أبداً.
     وفشل الميزة بالكامل ثمن أكبر من حركة لطيفة، فالإيماءة في دوران السهم وحده.
     (لم أستطع قياس الحركة في أداة المعاينة: لا يكتمل فيها أي انتقال،
      حتى تلاشٍ بسيط للشفافية — فالقرار مبنيّ على الدعم لا على قياس.) */
  transition: opacity var(--t);
}
.sg-inner { min-height: 0; overflow: hidden; }
.sidebar-section-title.sg-h[aria-expanded="false"] + .sidebar-section-body {
  grid-template-rows: 0fr; opacity: 0; pointer-events: none;
}
/* المتصفحات التي لا تدعم تحريك grid-template-rows تُخفيه فوراً — لا انسكاب */
@supports not (grid-template-rows: 0fr) {
  .sidebar-section-title.sg-h[aria-expanded="false"] + .sidebar-section-body { display: none; }
}
.sidebar-section-body > .sidebar-link:last-child { margin-bottom: 6px; }

/* مجموعة كل روابطها مخفية بالصلاحيات تختفي بعنوانها — لا عنوان بلا محتوى */
.sidebar-section[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-section-body, .sg-cv, .sidebar-section-title.sg-h { transition: none; }
}

/* English (left-to-right): directional icons point the other way. An arrow chosen to mean
   "back" or "next" in Arabic means the same in English only mirrored. */
[dir="ltr"] .bi-arrow-left, [dir="ltr"] .bi-arrow-right,
[dir="ltr"] .bi-arrow-left-short, [dir="ltr"] .bi-arrow-right-short,
[dir="ltr"] .bi-chevron-left, [dir="ltr"] .bi-chevron-right,
[dir="ltr"] .bi-caret-left-fill, [dir="ltr"] .bi-caret-right-fill,
[dir="ltr"] .bi-box-arrow-right, [dir="ltr"] .bi-box-arrow-left {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── Contract wording editor (js/contract-wording.js) ───────────────────────── */
.cw-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:16px}
.cw-card{width:100%;max-width:980px;max-height:94vh;display:flex;flex-direction:column;background:#fff;border-radius:8px}
.cw-card .card-header,.cw-card .card-footer{background:#f8fafc}
.cw-body{overflow:auto}
.cw-clause .cw-title{margin-bottom:4px}
.cw-text{white-space:pre-wrap;min-height:3.2em;line-height:1.9;font-size:14px}
.cw-clause.cw-bad .cw-text{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.2)}
/* A fixed field: visibly not text, and not editable (contenteditable=false). */
.cw-ph{display:inline-block;background:#e0ecff;color:#1d4ed8;border:1px solid #93c5fd;
  border-radius:4px;padding:0 5px;margin:0 1px;font-size:12.5px;line-height:1.5;
  user-select:all;cursor:default;unicode-bidi:isolate}
.cw-ph::before{content:'\2039';opacity:.6;margin-inline-end:2px}
.cw-ph::after{content:'\203A';opacity:.6;margin-inline-start:2px}

/* ── The setup wizard (Phase 6, js/onboarding.js) ── */
.onb-overlay { position: fixed; inset: 0; z-index: 20000; background: rgba(13, 30, 50, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.onb-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: 100%; max-width: 820px; max-height: 92vh; overflow: auto; padding: 24px 28px; }
.onb-dots { display: flex; gap: 6px; }
.onb-dot { width: 10px; height: 10px; border-radius: 50%; background: #d6dde6; display: inline-block; }
.onb-dot.past { background: #8fb3d1; }
.onb-dot.on { background: var(--brand-primary, #16324F); }