/* MoFA Virtual Diplomatic Library — styles matched to the Figma file
   "Virtual Diplomatic Library — Ministry of Foreign Affairs" (page
   الواجهات الرئيسية). Measurements come from the 1440×1024 frames:
   01 تسجيل الدخول (2:2), 05 المديريات (10:2), 06 مديرية مختارة (33:5659),
   07 وثائق الدائرة (33:5678). Values are noted with their Figma source.

   Later screens: settings / document types (167:8808) and the document page
   (50:11642). Layout direction is RTL (<html dir="rtl">), so logical
   properties (margin-inline-*, padding-inline-*) are used where the side
   matters; physical "left/right" values are deliberate and mirror Figma.

   Served same-origin from /static: the Content-Security-Policy forbids
   inline styles, so every rule lives in this file (no style="" attributes).

   Section order: font, tokens, base, shared controls, sign-in, app shell,
   page headings, directorates, selected directorate, document list,
   data-entry panel, card forms, responsive, change password / error,
   settings, document page, print. */

/* Cairo (SIL Open Font License, see /static/fonts/OFL.txt), self-hosted
   because the Content-Security-Policy only allows same-origin fonts. */
@font-face {
  font-family: "Cairo";
  src: url("/static/fonts/Cairo-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* Design tokens. Colours are sampled from Figma; "derived" ones are not in
   the file and were picked to fit (hover states). */
:root {
  /* Figma colours */
  --maroon: #6e0913;        /* buttons, titles, bubbles, footer */
  --maroon-dark: #570710;   /* hover (derived) */
  --active-bg: #fbf2f2;     /* sidebar active item */
  --page: #f9f7f4;          /* page background, header search */
  --surface: #ffffff;
  --text: #1a1c21;
  --muted: #666970;         /* secondary text in the app shell */
  --muted-login: #63666e;   /* secondary text on the sign-in page */
  --placeholder: #8c8c91;
  --line: #e0dbd6;          /* borders and dividers */
  --table-head: #f0ebe5;
  --ok: #1d6b3a;
  --shadow-shape: 0 7px 16px rgba(46, 20, 20, .10); /* bubble drop shadow (feOffset 7, blur σ8, 10%) */
  --font: "Cairo", "Segoe UI", Tahoma, sans-serif;
}
/* Type scale (owner, 2026-10-29): no text is smaller than 14px. Every size the Figma frames gave
   between 10 and 18px was remapped as 14 + (size − 10) / 2, keeping the order (10→14, 12→15,
   13→15.5, 14→16, 16→17); 18px and up are unchanged. New rules follow the same floor. */

/* Base reset: predictable box sizing, no default margins, Cairo everywhere. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--text); background: var(--page); line-height: normal; }
a { color: var(--maroon); text-decoration: none; }
/* The 14px floor for what the browser sizes itself: <small> (normally 83% of its parent) and
   controls without a size of their own (13.33px by default). Class rules override these. */
small { font-size: max(14px, .85em); }
button { font-size: 14px; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
p { margin: 0; }

/* ---------- shared controls ----------
   Buttons, labels, inputs and message boxes used on every screen. Heights
   (46px buttons, 58px inputs) and the 10px radius come from the sign-in
   frame (2:2) and are reused app-wide. .alert = error (maroon tint),
   .notice = success/info (green tint), .field-error = per-field message
   under data-entry inputs. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 46px;
  padding: 0 1.3rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: 600 16.5px var(--font); cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; border-color: var(--maroon); }
.btn-primary { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-dark); }
.btn-block { width: 100%; }
label { display: block; font-weight: 600; font-size: 17px; margin: 0 0 8px; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=email], input[type=tel], textarea, select {
  width: 100%; height: 58px; padding: 0 20px; border: 1px solid var(--line); border-radius: 10px;
  font: 400 17px var(--font); background: #fff; color: var(--text); }
textarea { height: auto; padding: 14px 20px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--active-bg); border-color: var(--maroon); }
.alert { background: #fdecee; color: var(--maroon-dark); border: 1px solid #f3c6cb; padding: 10px 14px; border-radius: 10px; font-size: 16px; }
.notice { background: #e9f6ee; color: var(--ok); border: 1px solid #bfe3cc; padding: 10px 14px; border-radius: 10px; font-size: 16px; }
.hint { color: var(--muted); font-size: 15.5px; }
.field-error { color: var(--maroon); font-size: 15.5px; margin-top: 4px; }

/* ---------- sign-in (frame 2:2) ----------
   body.landing is used by login.html and error.html: full-height column
   with the background photo at 60% opacity behind the logo, titles and
   the white 560px login card. */
body.landing { min-height: 100vh; display: flex; flex-direction: column; position: relative; background: var(--page); }
body.landing::before { /* background photo, opacity .6, cover */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("/static/img/signin-bg.jpg") center / cover no-repeat; opacity: .6; }
/* Narrow screens see a tall slice of the wide photo: aim it at Bustros Palace (the right third of
   the image, D7, 2026-10-29) rather than the empty sky in its centre. */
@media (max-width: 900px) { body.landing::before { background-position: 82% center; } }
.landing-lang { position: absolute; top: 35px; right: 60px; z-index: 2; font: 600 18px var(--font); color: var(--maroon); }
.landing-lang a { color: var(--maroon); }
.landing-lang .sep { margin: 0 12px; }
.landing-main { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 600px; margin: 0 auto;
  padding: 28px 20px 84px; text-align: center; }
.landing-logo { width: 280px; height: 176px; margin: 0 auto; overflow: hidden; background: #fff; }
.landing-logo img { display: block; width: 280px; height: 280px; max-width: none; margin-top: -51px; } /* Figma crop: h 159.21%, top −28.95% */
.landing-title { margin: 6px 0 0; font: 700 40px/1.4 var(--font); color: var(--maroon); }
.landing-sub-en { margin: 6px 0 0; font: 400 26px/1.25 var(--font); color: var(--text); }
.landing-tagline { margin: 0 0 60px; font: 400 18px/1.4 var(--font); color: var(--muted-login); }
.login-card { width: 560px; max-width: 100%; margin: 0 auto; padding: 9px 56px 26px; text-align: right;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.login-card h2 { margin: 0 0 23px; text-align: center; font: 700 30px/1.6 var(--font); color: var(--maroon); }
.login-card label { margin: 0 16px 5px; }   /* label y=card+80, field y=card+115 */
.login-card .alert, .login-card .notice { margin: -10px 0 14px; }
.login-card .pw-label { margin-top: 20px; }
.login-row { display: flex; justify-content: center; align-items: center; gap: 30px; margin: 17px 0 22px; font-size: 16.5px; }
.login-row a { font-weight: 600; color: var(--maroon); }
.login-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; font-size: 16.5px; cursor: pointer; }
.login-row input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--maroon); }
.login-btn { height: 62px; font: 600 19px var(--font); }
.login-note { margin-top: 12px; text-align: center; color: var(--muted-login); font-size: 15.5px; }

/* ---------- app shell: header 9:2, sidebar 9:12, footer 25:2617 ----------
   layouts/main.html: sticky 88px top bar, 280px sidebar + content grid, and
   the maroon footer (shared with the landing pages). */
body.app { min-height: 100vh; display: flex; flex-direction: column; }
/* Signed-in pages sit on the faded globe + Bustros Palace photo (owner, 2026-10-29). It is already
   washed out, so no overlay; fixed so it stays put while the content scrolls (phones that ignore
   "fixed" let it scroll, which is fine). Visitors' pages (body.app.public) keep the plain colour. */
body.app:not(.public) { background: var(--page) url("/static/img/app-bg.jpg") center / cover no-repeat fixed; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 88px;
  padding: 0 33px 0 40px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 50px; height: 50px; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; font: 700 16.5px/1.6 var(--font); }
.search { position: relative; width: 500px; max-width: 100%; height: 50px; margin-inline: auto; }
.search input { height: 50px; padding: 0 20px 0 50px; background: var(--page); border-radius: 10px;
  font: 500 16px var(--font); }
.search input::placeholder { color: var(--muted); }
.search .glyph { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font: 700 20px var(--font); color: var(--maroon); }
.lang { font: 600 15.5px var(--font); color: var(--muted); white-space: nowrap; }
.lang a { color: var(--muted); }
.lang .sep { margin: 0 8px; }

.shell { flex: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
/* The sidebar stays put while the page scrolls (owner, 2026-10-28): sticky under the 88px top
   bar, as tall as the window minus the top bar and the 46px pinned footer; when the menu is longer
   than that, it scrolls inside itself. align-self: start lets sticky work inside the grid. */
.sidebar { background: #fff; padding-top: 34px; position: sticky; top: 88px; align-self: start;
  height: calc(100vh - 88px - 46px); overflow-y: auto; overscroll-behavior: contain; }
.sidebar nav { display: flex; flex-direction: column; gap: 10px; }
.nav-item { display: flex; align-items: center; gap: 16px; height: 40px; margin: 0 16px; padding: 0 14px;
  border-radius: 10px; background: none; border: 0; width: calc(100% - 32px);
  font: 700 16px var(--font); color: var(--text); cursor: pointer; text-align: right; }
.nav-item:hover { background: var(--page); text-decoration: none; }
.nav-item .glyph { width: 28px; flex: none; text-align: center; font: 600 17.5px var(--font); color: var(--muted); }
.nav-item.is-active { background: var(--active-bg); color: var(--maroon); }
.nav-item.is-active .glyph { color: var(--maroon); }
.nav-item[aria-disabled=true] { cursor: default; }
.sidebar form { margin: 0; }
.content { min-width: 0; padding: 28px 50px 40px; }   /* breadcrumb at y=116–118 */

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px;
  padding: 0 75px 0 52px; background: var(--maroon); color: #fff; font: 500 16.5px var(--font);
  /* Pinned to the bottom of the window on every page (owner, 2026-10-28). Sticky, not fixed: the
     footer is a direct child of <body> on every layout, so it keeps its own place at the end of
     the page and the last lines of content never slide under it; no padding to keep in step. */
  position: sticky; bottom: 0; z-index: 9; }
.site-footer a { color: #fff; }
.site-footer .sep { margin: 0 14px; }
/* GOLD logo link: pinned to the footer's far left (the footer is sticky, so it positions it), vertically
   centred, outside the flow so the links and © keep their places on every width. */
.footer-gold { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: block; line-height: 0;
  border-radius: 50%; }
.footer-gold img { width: 34px; height: 34px; }
.footer-gold:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- page headings ----------
   Breadcrumbs (.crumbs), the 30px page title, its muted description and the
   title-row with a right-aligned action (.page-head-row). */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15.5px; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--muted); }
.page-title { margin: 0; font: 700 30px/1.6 var(--font); color: var(--text); }
.page-desc { margin: 0; font-size: 16.5px; color: var(--muted); }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }

/* ---------- directorates (frame 10:2) ----------
   The bubble map is drawn as LINES BY RANK (minutes of 12 October 2026,
   3.1; owner decisions of 2026-10-25): one .bubble-line per rank in use,
   rank 0 on top; units with the same rank share a line, centred, wrapping
   when wider than the screen. Bubbles are horizontal ovals that get
   smaller going down (.line-s0 … .line-s4, the line's position from the
   top; owner request of 2026-10-25). The look (glossy maroon, halo, gentle
   float) is the Figma map's. */
.dirs-head { padding-top: 19px; height: 84px; }            /* title at y=135, map origin at y=200 */
.dirs-head .page-title { font-size: 34px; line-height: 1.45; }
.bubble-map { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; padding: 8px 0 4px; }
.bubble-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 34px; }
.bubble { position: relative; width: var(--bw, 215px); height: var(--bh, 152px); padding: 0 18px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; text-align: center;
  /* Lit from the top-left: lighter maroon highlight fading to a deep rim,
     an inner top shine and bottom shade for volume, a soft maroon halo
     ring, and a coloured drop shadow. */
  /* Colours come from variables so every palette class (bp-*) and custom
     colour (bc-<slug> in /map-colors.css) reuses this one look:
     --g1/--g2/--g3 gradient highlight/base/rim, --bt text, --ts text
     shadow, --bd border. The defaults are the maroon directorate bubble. */
  background: radial-gradient(circle at 32% 26%, var(--g1, #a01a2b) 0%, var(--g2, var(--maroon)) 52%, var(--g3, #4a0610) 100%);
  color: var(--bt, #fff); border: var(--bd, 0);
  box-shadow: 0 0 0 7px rgba(110, 9, 19, .07), 0 12px 26px rgba(110, 9, 19, .24),
    inset 0 7px 14px rgba(255, 255, 255, .14), inset 0 -8px 16px rgba(0, 0, 0, .22);
  font: 600 var(--bf, 16.5px)/1.6 var(--font);
  letter-spacing: .1px; text-shadow: var(--ts, 0 1px 2px rgba(0, 0, 0, .25));
  /* Gentle float, staggered per bubble (nth-child) so they don't move in
     sync; uses the translate property so the hover transform composes. */
  animation: bubble-float 6s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.bubble:nth-child(2n) { animation-delay: -1.5s; animation-duration: 7s; }
.bubble:nth-child(3n) { animation-delay: -3s; animation-duration: 6.5s; }
.bubble:hover, .bubble:focus-visible { transform: scale(1.06); text-decoration: none; filter: brightness(1.08);
  box-shadow: 0 0 0 10px rgba(110, 9, 19, .12), 0 18px 34px rgba(110, 9, 19, .32),
    inset 0 7px 14px rgba(255, 255, 255, .16), inset 0 -8px 16px rgba(0, 0, 0, .22); }
.bubble:focus-visible { outline: 3px solid #f2c8cd; outline-offset: 4px; }
@keyframes bubble-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
/* Bubble palette (spec 2026-10-25-map-bubbles-colours §1.3), shared by the
   map bubbles, the form swatches and the preview. Keys = units.Palette. */
.bp-maroon   { --g1: #a01a2b; --g2: #6e0913; --g3: #4a0610; }
.bp-white    { --g1: #ffffff; --g2: #fbf3f3; --g3: #f1dfe0; --bt: var(--maroon); --ts: none; --bd: 2px solid var(--maroon); }
.bp-gold     { --g1: #d4a84a; --g2: #a8781e; --g3: #6d4d10; }
.bp-navy     { --g1: #3d5f8f; --g2: #1f3b63; --g3: #12243e; }
.bp-green    { --g1: #3f9160; --g2: #1d6b3a; --g3: #104526; }
.bp-teal     { --g1: #3fa3a1; --g2: #127c7a; --g3: #0a504f; }
.bp-slate    { --g1: #75869a; --g2: #4a5a6e; --g3: #2f3a48; }
.bp-rose     { --g1: #c9617f; --g2: #a33a5c; --g3: #6a243b; }
.bp-sand     { --g1: #f0e4cb; --g2: #d9c7a3; --g3: #b49c6e; --bt: #3d2b12; --ts: none; }
.bp-charcoal { --g1: #55555b; --g2: #2f2f33; --g3: #1a1a1d; }
/* Locked bubbles (decision D3): greyed, not clickable for non-admins. */
.bubble.is-locked { background: radial-gradient(circle at 32% 26%, #b9b4b4 0%, #8d8787 60%, #6d6868 100%);
  color: #fff; border: 0; filter: saturate(.4); cursor: not-allowed; animation: none; }
a.bubble.is-locked { cursor: pointer; } /* only administrators see (and open) locked units */
/* Oval sizes by line position: largest on top, smaller going down. */
.line-s0 { --bw: 280px; --bh: 196px; --bf: 17.5px; }
.line-s1 { --bw: 250px; --bh: 175px; --bf: 17px; }
.line-s2 { --bw: 222px; --bh: 156px; --bf: 16.5px; }
.line-s3 { --bw: 198px; --bh: 139px; --bf: 16px; }
.line-s4 { --bw: 178px; --bh: 125px; --bf: 15.75px; }
.bubble .lock { font-size: 26px; line-height: 1; margin-bottom: 6px; text-shadow: none; filter: grayscale(1) brightness(2.2); }
.bubble small { margin-top: 4px; padding: 1px 10px; border-radius: 10px; background: rgba(0, 0, 0, .28); font-size: 15.25px; font-weight: 700; }
.map-hint { margin-top: 12px; text-align: center; font-size: 15.5px; color: var(--muted); }

/* ---------- selected directorate (frame 33:5659) ----------
   unit.html without documents: the directorate as one maroon bubble, then
   its departments as white ovals in a row. Restyled 2026-10-12 to match the
   directorates map (smaller shapes, glossy maroon bubble with halo and
   float; white ovals with a maroon rim and soft tint) and placed closer
   together (centred row with a fixed gap instead of space-around). */
.selected-dir { display: flex; justify-content: center; margin: 48px 0 28px; }
.selected-dir .shape { width: 210px; height: 168px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  padding: 0 18px; text-align: center; color: #fff; font: 700 18px/1.6 var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  background: radial-gradient(circle at 32% 26%, #a01a2b 0%, var(--maroon) 52%, #4a0610 100%);
  box-shadow: 0 0 0 7px rgba(110, 9, 19, .07), 0 12px 26px rgba(110, 9, 19, .24),
    inset 0 7px 14px rgba(255, 255, 255, .14), inset 0 -8px 16px rgba(0, 0, 0, .22);
  animation: bubble-float 6s ease-in-out infinite; }
.section-title { margin: 0 0 32px; font: 700 21px/1.6 var(--font); }
.dept-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
.dept { display: flex; align-items: center; justify-content: center; width: 168px; height: 136px; padding: 0 16px;
  border-radius: 50%; border: 1.5px solid var(--maroon); color: var(--maroon); text-align: center; font: 700 17px/1.6 var(--font);
  background: radial-gradient(circle at 32% 26%, #fff 0%, #fff 45%, #f7e9eb 100%);
  box-shadow: 0 0 0 6px rgba(110, 9, 19, .05), 0 10px 22px rgba(110, 9, 19, .14), inset 0 -6px 12px rgba(110, 9, 19, .06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.dept:hover, .dept:focus-visible { transform: scale(1.06); text-decoration: none;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #fdf4f5 45%, #f2dde0 100%);
  box-shadow: 0 0 0 9px rgba(110, 9, 19, .09), 0 16px 30px rgba(110, 9, 19, .22), inset 0 -6px 12px rgba(110, 9, 19, .08); }
.dept:focus-visible { outline: 3px solid #f2c8cd; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .selected-dir .shape { animation: none; } }
.unit-hint { margin-top: 40px; font-size: 15.5px; color: var(--muted); }

/* ---------- document list (frame 33:5678) ----------
   partials/documents.html: search box + filter strip, the table card and the
   footer with the range text and pager. The 30px inline-end margins keep the
   table at Figma's x=80…1110 inside the content column. */
.doc-head .page-desc { font-size: 16px; }
.list-tools { display: flex; gap: 25px; margin: 29px 0 31px; }
.list-search { position: relative; flex: 0 1 550px; margin: 0; }
.list-search input { height: 54px; padding: 0 40px 0 58px; font-size: 16px; }
.list-search input::placeholder { color: var(--muted); }
.list-search button { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px;
  border: 0; background: none; font: 700 18px var(--font); color: var(--maroon); cursor: pointer; }
.list-filters { flex: 0 1 455px; display: flex; align-items: center; justify-content: center; gap: 28px; height: 54px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; font: 600 15.5px var(--font); }
.list-filters span { cursor: default; }
.docs-card { margin-inline-end: 30px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } /* table x=80…1110 */
.docs-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.docs-table thead th { height: 58px; padding: 0 18px; background: var(--table-head); color: var(--muted);
  font-weight: 600; text-align: right; white-space: nowrap; }
.docs-table tbody td { height: 72px; padding: 8px 18px; text-align: right; vertical-align: middle; }
.docs-table tbody tr + tr td { border-top: 1px solid var(--line); }
.docs-table td.title { font-weight: 600; }
.docs-table td.action { text-align: center; color: var(--maroon); white-space: nowrap; }
.chip, .docs-table .chip { display: inline-block; background: var(--page); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 8px; margin: 0 0 3px 3px; font-size: 14.5px; }
.docs-empty { padding: 48px 0; text-align: center; color: var(--muted); font-size: 16px; }
.list-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 17px; margin-inline-end: 30px; font-size: 15px; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 270px; height: 42px; padding: 0 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; font: 600 15px var(--font); color: var(--text); }
.pager a { color: var(--text); }
.pager .is-current { color: var(--maroon); }
.pager .off { color: var(--placeholder); }

/* data entry panel
   #doc-panel is an empty placeholder (unit list and document page) that the
   HTMX form/review partials fill; it only gets its card look once it has
   content (:not(:empty)), so the empty div takes no space. No Figma frame:
   uses the card language of the list. */
#doc-panel:not(:empty) { margin: 0 0 24px; margin-inline-end: 30px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.doc-form h3, .doc-review h3 { margin: 0 0 16px; font: 700 20px var(--font); color: var(--maroon); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.span-2 { grid-column: 1 / -1; }
.field label em { color: var(--maroon); font-style: normal; }
.actions { display: flex; gap: 12px; margin-top: 20px; }
.review { display: grid; grid-template-columns: 10rem 1fr; gap: 10px 16px; margin: 16px 0; font-size: 16.5px; }
.review dt { color: var(--muted); font-weight: 600; }
.review dd { margin: 0; }
.saved { margin-bottom: 16px; }

/* forms in cards (change password, document-type form)
   .card is the white rounded card; .narrow limits it to the login-card
   width (560px). */
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px 40px; }
.card.narrow { max-width: 560px; }
.card label { margin-top: 18px; }
.card .btn { margin-top: 22px; height: 58px; }

/* ---------- responsive (no Figma mobile frames: same tokens, stacked) ----------
   ≤1100px: bubbles shrink (each map line still wraps); departments wrap.
   ≤900px: sidebar becomes a horizontal scrolling strip above the content,
   search drops to its own row, list tools stack.
   ≤640px: single-column forms and the document table turns into one card
   per row, labelled from each cell's data-label attribute. */
@media (max-width: 1100px) {
  .line-s0 { --bw: 230px; --bh: 160px; --bf: 16.75px; }
  .line-s1 { --bw: 208px; --bh: 146px; --bf: 16.5px; }
  .line-s2 { --bw: 188px; --bh: 132px; --bf: 16px; }
  .line-s3 { --bw: 170px; --bh: 120px; --bf: 15.75px; }
  .line-s4 { --bw: 156px; --bh: 110px; --bf: 15.5px; }
  .dirs-head { height: auto; padding-bottom: 24px; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line);
    position: static; height: auto; overflow: visible; } /* phones: the menu is a scrolling strip above the page */
  .sidebar nav { flex-direction: row; overflow-x: auto; gap: 6px; padding: 0 16px; }
  .nav-item { width: auto; margin: 0; white-space: nowrap; }
  .topbar { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
  .search { order: 3; flex-basis: 100%; width: auto; }
  .lang { margin-inline-start: auto; }
  .content { padding: 20px 16px 32px; }
  .docs-card, .list-foot { margin-inline-end: 0; }
  #doc-panel:not(:empty) { margin-inline-end: 0; }
  .list-tools { flex-direction: column; }
  .list-search, .list-filters { flex: none; width: 100%; }
  /* Pinned footer stays short on narrow screens: one tight stack, no paragraph margins. */
  .site-footer { flex-direction: column; justify-content: center; gap: 4px; min-height: 0; padding: 8px 16px;
    text-align: center; font-size: 15.5px; }
  .site-footer p { margin: 0; }
  .landing-lang { right: 16px; top: 16px; }
}
@media (max-width: 640px) {
  .bubble-map, .bubble-line { gap: 16px; }
  .line-s0 { --bw: 168px; --bh: 120px; --bf: 15.75px; }
  .line-s1 { --bw: 156px; --bh: 112px; --bf: 15.5px; }
  .line-s2, .line-s3, .line-s4 { --bw: 146px; --bh: 104px; --bf: 15.25px; }
  .bubble { line-height: 1.5; padding: 0 12px; animation: none; }
  .landing-main { padding-top: 56px; }
  .landing-title { font-size: 30px; }
  .landing-sub-en { font-size: 20px; }
  .landing-tagline { font-size: 16.5px; }
  .login-card { padding: 9px 20px 22px; }
  .login-card label { margin-inline: 4px; }
  .grid { grid-template-columns: 1fr; }
  .review { grid-template-columns: 1fr; }
  .card { padding: 22px 18px; }
  .dept { width: 140px; height: 112px; font-size: 16px; }
  .selected-dir .shape { width: 170px; height: 136px; font-size: 17px; }
  .page-title { font-size: 26px; }
  /* document table → one labelled card per row */
  .docs-card { border: 0; background: none; }
  .docs-table thead { display: none; }
  .docs-table, .docs-table tbody, .docs-table tr, .docs-table td { display: block; width: 100%; }
  .docs-table tbody tr { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; padding: 6px 0; }
  .docs-table tbody tr + tr td { border-top: 0; }
  .docs-table tbody td { height: auto; padding: 5px 14px; display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px; font-size: 15.5px; }
  .docs-table td::before { content: attr(data-label); color: var(--muted); font-weight: 600; }
  .docs-table td.action { text-align: right; }
  .docs-table td:empty { display: none; }
  .list-foot { flex-direction: column; }
}

/* change password (no dedicated Figma frame; same card language as sign-in)
   .error-card is the card of error.html (same landing layout). */
.pw-card { margin-top: 24px; }
.pw-hint { margin-top: 12px; }
.error-card { margin-top: 32px; text-align: center; } .error-card p { margin-bottom: 24px; }

/* ---------- settings: document types (Figma 167:8808) ----------
   The first rules (.sr-only, .list-filters select/.filter)
   actually style the document-list filter strip (partials/documents.html)
   and were added in the same change as the settings page; .sr-only hides
   the visually redundant <select> labels while keeping them for screen
   readers. The settings colours (#8a0b1a, #66666b, #dbd6d6, #faf2f2) are
   the literal values of frame 167:8808, which differ slightly from the
   older tokens, so they are not tokenised. The table is a CSS grid of divs
   with ARIA table roles (settings_doctypes.html). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.list-filters .filter { margin: 0; }
.list-filters select { height: 36px; width: auto; padding: 0 10px; border: 0; background: transparent; font: 601 16px var(--font); color: var(--text); cursor: pointer; }
.list-filters select:focus { outline: 2px solid var(--active-bg); }
.settings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.settings-title { margin: 0; font: 700 25px/1.6 var(--font); color: #8a0b1a; }
.settings-sub { margin: 0; font-size: 15px; color: #66666b; }
.settings-table { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid #dbd6d6; border-radius: 10px; overflow: hidden; }
.settings-row { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 90px 90px; align-items: center; gap: 18px; min-height: 48px;
  padding: 7px 14px; border-bottom: 1px solid #dbd6d6; font-size: 15px; color: #1f1f21; }
.settings-row:last-child { border-bottom: 0; }
.settings-row-head { background: #faf2f2; color: #66666b; font-weight: 600; font-size: 14.5px; }
.settings-row .name { font-weight: 600; display: flex; flex-direction: column; }
.settings-row .name small { font-weight: 400; color: #66666b; align-self: flex-start; }
.settings-row .units em { color: #66666b; }
.badge-on { display: inline-block; padding: 4px 10px; border-radius: 10px; background: #e5f7ed; color: #1a784a; font-weight: 600; font-size: 14.5px; }
.badge-off { display: inline-block; padding: 4px 10px; border-radius: 10px; background: #f1eee9; color: #66666b; font-weight: 600; font-size: 14.5px; }
.btn-edit { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 32px; border: 1px solid #8a0b1a;
  border-radius: 10px; color: #8a0b1a; font: 600 14.5px var(--font); background: #fff; }
.btn-edit:hover { background: #faf2f2; text-decoration: none; }
.doctype-form { max-width: 1010px; margin-top: 16px; }
.doctype-form .units { margin: 24px 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.doctype-form legend { padding: 0 8px; font-weight: 700; }
.units-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; margin-top: 12px; }
.unit-group { display: flex; flex-direction: column; gap: 4px; }
.unit-group label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.unit-dir { font-weight: 700; }
.unit-dept { font-weight: 400; padding-inline-start: 22px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 16.5px; margin-top: 16px; }
input[type=checkbox] { accent-color: var(--maroon); width: 16px; height: 16px; }
@media (max-width: 900px) {
  .settings-row { grid-template-columns: 1fr 1fr; }
  .settings-row-head { display: none; }
}

/* ---------- document page (Figma 50:11642) ----------
   document.html: type badge + title + meta, the action buttons row, and the
   two-column card grid (525:475 ratio from the frame). Disabled actions are
   dimmed placeholders. .doc-history is the admin-only history card. */
.doc-head { margin-bottom: 18px; }
.doc-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 34px; padding: 0 16px;
  border: 1px solid var(--maroon); border-radius: 17px; background: var(--active-bg); color: var(--maroon); font: 600 14.5px var(--font); }
.doc-title { margin: 10px 0 0; font: 700 28px/1.6 var(--font); }
.doc-meta { display: flex; gap: 10px; font: 600 15px var(--font); color: #146b40; }
.doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; margin: 0 0 28px; margin-inline-end: 30px; } /* buttons x=80…790 */
.doc-action { width: 130px; height: 42px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: 600 14.5px var(--font); color: var(--text); cursor: pointer; }
.doc-action:disabled { cursor: not-allowed; opacity: .55; }
.doc-action.is-primary { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.doc-action.is-edit { border-color: var(--maroon); color: var(--maroon); }
.doc-action:not(:disabled):hover { border-color: var(--maroon); }
/* «تحميل» / «عرض الملف» become links once the document has a file
   (document.html): centre their label like the buttons' and keep the
   button look (no underline, no link colour). */
a.doc-action { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; color: var(--text); }
a.doc-action.is-primary { color: #fff; }
a.doc-action:hover { text-decoration: none; }
a.doc-action.is-primary:hover { background: var(--maroon-dark); }
.doc-grid { display: grid; grid-template-columns: 525fr 475fr; gap: 25px 30px; margin-inline-end: 30px; }
.doc-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 40px 24px; min-height: 115px; }
.doc-card h2 { margin: 0 0 14px; font: 700 17.5px var(--font); }
.doc-card h3 { margin: 0 0 14px; font: 700 16.5px var(--font); }
.doc-facts { display: grid; grid-template-columns: 180px 1fr; gap: 12px 30px; margin: 0; font-size: 14.5px; }
.doc-facts dt { color: var(--muted); }
.doc-facts dd { margin: 0; font-weight: 600; }
.doc-text { color: var(--muted); font-size: 15.5px; line-height: 1.9; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.doc-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 125px; height: 32px; padding: 0 14px;
  border: 1px solid var(--maroon); border-radius: 16px; background: var(--active-bg); color: var(--maroon); font: 600 14px var(--font); }
.muted { color: var(--muted); font-size: 15px; }
.doc-history ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--muted); }
.doc-history .bullet { color: var(--muted); margin-inline-end: 6px; }
.doc-history .changes { list-style: none; margin: 4px 0 0; padding-inline-start: 18px; color: var(--text); }
.doc-history .changes b { font-weight: 600; color: var(--muted); }
@media (max-width: 1100px) {
  .doc-grid { grid-template-columns: 1fr; margin-inline-end: 0; }
  .doc-actions { justify-content: flex-start; margin-inline-end: 0; }
  .doc-card { padding: 18px 20px; }
}
@media (max-width: 640px) {
  .doc-action { width: auto; flex: 1 1 40%; }
  .doc-facts { grid-template-columns: 7.5rem 1fr; }
}
/* Print ("طباعة" button → window.print()): only the document itself — hide
   the chrome, actions, any open edit panel and breadcrumbs; one column. */
@media print {
  .topbar, .sidebar, .site-footer, .doc-actions, #doc-panel, .crumbs { display: none !important; }
  .shell { display: block; }
  .doc-grid { grid-template-columns: 1fr; margin: 0; }
  body { background: #fff; }
}

/* ---------- settings: users (Figma 167:8578 list, 167:8656 add, 167:8713 edit) ----------
   .settings-tabs is the tab bar shared by all settings pages. The list
   reuses .settings-table with six columns; .status-* are the computed
   account states (account.Display*: active, pending, inactive, deleted).
   The add form is a two-column grid of bordered "boxes" (label on top,
   borderless input below, as in the frame); the edit form is a list of
   <details> sections whose summary shows the current value, an optional
   "يتطلب تأكيداً" chip and a "تعديل" pill. Colours are the frame values. */
.settings-tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid #dbd6d6;
  /* Six tabs do not fit a phone: the bar scrolls sideways by itself so the
     page never scrolls horizontally. */
  overflow-x: auto; scrollbar-width: thin; }
.settings-tabs a { flex: none; white-space: nowrap; padding: 8px 14px; color: #66666b; font-weight: 600; font-size: 15.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.settings-tabs a.is-current { color: #8a0b1a; border-bottom-color: #8a0b1a; }
.settings-tabs a:hover { text-decoration: none; color: #8a0b1a; }
.users-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px; margin-bottom: 12px;
  background: #fff; border: 1px solid #dbd6d6; border-radius: 10px; }
.users-filters label { margin: 0; flex: 0 1 140px; }
.users-filters .uf-search { flex: 1 1 250px; }
.users-filters input, .users-filters select { height: 40px; padding: 0 10px; font-size: 15px; border-color: #dbd6d6; }
.users-filters .uf-add { height: 38px; font-size: 15px; margin-inline-start: auto; }
.users-table .settings-row { grid-template-columns: 1.1fr 1.4fr 1.1fr 1.4fr 100px 150px; }
.users-table .email { font-size: 14.5px; text-align: right; }
.row-actions { display: flex; gap: 6px; }
.status { display: inline-block; padding: 4px 10px; border-radius: 10px; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.status-active { background: #e5f7ed; color: #1a784a; }
.status-pending { background: #fdf6e3; color: #a3740a; }
.status-inactive { background: #f1eee9; color: #66666b; }
.status-deleted { background: #fdecee; color: #8a0b1a; }
.uf-card { background: #fff; border: 1px solid #dbd6d6; border-radius: 10px; padding: 13px; max-width: 980px; }
.uf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.uf-box { border: 1px solid #dbd6d6; border-radius: 8px; padding: 8px 9px 4px; }
.uf-box label { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; color: #1f1f21; }
.uf-box input, .uf-box select { height: 32px; padding: 0; border: 0; font-size: 15px; color: #1f1f21; }
.uf-box input:focus, .uf-box select:focus { outline: 0; }
.uf-box:focus-within { border-color: #8a0b1a; }
.uf-box input[readonly] { color: #66666b; }
.uf-chip { display: inline-block; margin: 12px 0 6px; padding: 7px 8px; border-radius: 8px; background: #faf2f2; color: #8a0b1a; font-size: 14.5px; }
.uf-actions { display: flex; gap: 8px; margin-top: 12px; }
.uf-actions .btn { min-width: 140px; height: 38px; font-size: 15px; }
.uf-sections { display: flex; flex-direction: column; gap: 9px; }
.uf-sec { border: 1px solid #dbd6d6; border-radius: 8px; background: #fff; }
.uf-sec.is-tint { background: #faf2f2; }
.uf-sec > summary { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 15.5px; }
.uf-sec > summary::-webkit-details-marker { display: none; }
.uf-sec > summary b { font-weight: 600; }
.uf-cur { color: #66666b; font-size: 14.5px; }
.uf-warn { padding: 6px 8px; border-radius: 8px; background: #fdf6e3; color: #c28a0e; font-size: 14.5px; }
.uf-toggle { margin-inline-start: auto; width: 140px; height: 38px; }
.uf-sec[open] > summary .uf-toggle { background: #faf2f2; }
.uf-sec > .uf-grid, .uf-sec > .check, .uf-sec > .field-error { margin: 0 12px 12px; }
.user-created h2 { margin: 0 0 14px; font: 700 18px var(--font); color: #1a784a; }
.user-created .alert { margin-top: 14px; }
.temp-pass { display: inline-block; padding: 4px 10px; border-radius: 6px; background: #f1eee9; font: 600 16.5px ui-monospace, monospace; letter-spacing: .5px; user-select: all; }
.user-card { max-width: 980px; background: #fff; border: 1px solid #dbd6d6; border-radius: 10px; padding: 18px 22px; }
.uc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.user-card > .notice { margin-bottom: 12px; }
.uc-temp { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #fdf6e3; font-size: 15.5px; }
.uc-temp p { margin-bottom: 6px; }
/* Open forgot-password request on the profile card (sprint-8 §7). */
.uc-reset { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #fdecea; font-size: 15.5px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
/* Users tab banner «طلبات إعادة تعيين مفتوحة: N» and the forgot-password help text. */
.reset-banner { margin-bottom: 12px; }
.reset-banner a { color: inherit; font-weight: 600; }
.login-card .forgot-help { margin: 0 0 14px; text-align: start; }
.uc-facts { margin-bottom: 16px; font-size: 15px; }
.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-actions form { margin: 0; }
.uc-actions .btn { height: 38px; font-size: 15px; }
.btn-danger { border-color: #8a0b1a; color: #8a0b1a; }
.btn-danger:hover { background: #fdecee; }
@media (max-width: 900px) {
  .users-table .settings-row { grid-template-columns: 1fr 1fr; }
  .uf-grid { grid-template-columns: 1fr; }
  .uf-sec > summary { flex-wrap: wrap; }
  .uf-toggle { width: auto; padding: 0 16px; }
}
/* user screens: polish found in the browser check. LTR values (email,
   username) stay right-aligned in the RTL fact lists; the error alert and
   the result card share the form width; boxes inside tinted edit sections
   stay white as in 167:8713. */
.user-form, .user-created { max-width: 980px; }
.user-form > .alert { margin-bottom: 12px; }
.doc-facts dd[dir=ltr] { text-align: right; unicode-bidi: plaintext; }
.uf-sec .uf-box { background: #fff; }
/* dir="auto" inputs (email, phone) resolve to LTR while empty, which would
   push their Arabic placeholder to the left edge; keep them RTL until the
   user types (the typed value then follows dir="auto"). */
.uf-box input[dir=auto]:placeholder-shown { direction: rtl; }


/* ---------- settings: units (الجهات) ----------
   List: two tree tables (البعثات في الخارج / الإدارة المركزية) using the
   .settings-table grid with six columns; .depth-N indents the name by tree
   depth. The add/edit form reuses the user form boxes (.uf-*). */
.units-add { display: flex; flex-wrap: wrap; gap: 8px; }
.units-add .btn { height: 38px; font-size: 15px; }
.units-section { margin: 18px 0 8px; font: 700 17px var(--font); color: #1f1f21; }
.units-table .settings-row { grid-template-columns: 2fr .8fr 1.6fr 100px 80px 150px; }
.units-table .num { text-align: center; }
.units-table .name.depth-1 { padding-inline-start: 32px; }
.units-table .name.depth-2 { padding-inline-start: 64px; }
.units-table .name.depth-3, .units-table .name.depth-4 { padding-inline-start: 96px; }
.units-table .name.depth-0 { font-weight: 700; }
.unit-children { margin-top: 12px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
@media (max-width: 900px) {
  .units-table .settings-row { grid-template-columns: 1fr 1fr; }
  .units-table .name[class*=depth-] { padding-inline-start: 0; }
}

/* ---------- library search (spec 2026-10-12) ----------
   Header: the ⌕ glyph is now the submit button; #search-suggest is the
   dropdown under the box (hidden while empty). Results page: one card per
   document with highlighted matches (<mark>), where it resides, tags. */
.search button.glyph { border: 0; background: none; padding: 0; cursor: pointer; }
.search-suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 30; }
.search-suggest:empty { display: none; }
.suggest-box { background: #fff; border: 1px solid #dbd6d6; border-radius: 12px; box-shadow: 0 14px 30px rgba(46, 20, 20, .16);
  overflow: hidden; text-align: right; }
.suggest-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; color: var(--text); border-bottom: 1px solid #f1eee9; }
.suggest-item:hover, .suggest-item:focus { background: #faf2f2; text-decoration: none; outline: 0; }
.suggest-title { font: 600 16px/1.5 var(--font); }
.suggest-place { font-size: 14.5px; color: var(--muted); }
.suggest-empty { padding: 12px 16px; font-size: 15.5px; color: var(--muted); }
.suggest-all { display: block; padding: 10px 16px; font: 600 15px var(--font); background: #faf2f2; }
mark { background: #f8dfa3; color: inherit; border-radius: 3px; padding: 0 1px; }
.search-total { margin: 4px 0 12px; font: 600 15.5px var(--font); color: var(--muted); }
.result { background: #fff; border: 1px solid #dbd6d6; border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; max-width: 1060px; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.result-title { font: 700 17px/1.6 var(--font); color: var(--text); }
.result-title:hover { color: var(--maroon); text-decoration: none; }
.result-head .doc-chip { min-width: 0; height: 26px; font-size: 14px; }
.result-place { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.result-place a { font-weight: 600; }
.result-subject { margin: 6px 0 0; font-size: 15.5px; color: #44444a; line-height: 1.8; }
.result-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.result-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; color: var(--muted); }
.tag { display: inline-block; padding: 2px 10px; border: 1px solid #e6cfd2; border-radius: 12px; background: #fdf7f8; color: var(--maroon); font-weight: 600; }
.users-filters .btn-primary { height: 38px; font-size: 15px; }

/* Document classification marks (Figma 11 التصنيف): عام is plain; مقيّد
   amber; سري maroon and bold. Used on the document page meta line, the
   all-documents table and search results. */
.class-public { color: inherit; }
.class-restricted { color: #a3740a; font-weight: 600; }
.class-secret { color: #8a0b1a; font-weight: 700; }

/* ---------- all documents / library search (Figma 11 "جميع المستندات") ----------
   Measured on the exported frame (1440×1024, content x 80…1110):
   search box 669×53 and filter box 329×53 (31 apart, radius 10, border
   #E0DBD6, white); filter links row at y≈300; table card 1029 wide
   (radius 12, border #E0DBD6) with a 54px #F0EBE6 header band and 73px
   rows separated by #E0DBD6 rules inset 18px; 11–12px table text. */
.lib-head { margin-bottom: 24px; }
.lib-head .page-title { font-size: 34px; line-height: 1.45; }
.lib-head .page-desc { font-size: 15.5px; }
.lib-tools { display: grid; grid-template-columns: 669fr 329fr; gap: 14px 31px; align-items: start; }
.lib-search { position: relative; }
.lib-search input { height: 53px; border-color: #e0dbd6; font-size: 15.5px; padding: 0 20px 0 48px; }
.lib-search button { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); border: 0; background: none;
  font: 700 18px var(--font); color: var(--maroon); cursor: pointer; }
.lib-filters { display: flex; justify-content: center; gap: 18px; height: 53px; padding: 0 16px; background: #fff;
  border: 1px solid #e0dbd6; border-radius: 10px; }
.lib-filters label { margin: 0; display: flex; align-items: center; }
.lib-filters select, .lib-more select { width: auto; height: 36px; padding: 0 6px; border: 0; background: transparent;
  font: 600 15px var(--font); color: var(--text); cursor: pointer; }
.lib-more { grid-column: 1 / -1; font-size: 15px; }
.lib-more > summary { display: inline-block; cursor: pointer; color: var(--maroon); font-weight: 600; list-style: none; }
.lib-more > summary::-webkit-details-marker { display: none; }
.lib-more[open] > summary { margin-bottom: 8px; }
.lib-more-body { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 10px 16px; background: #fff; border: 1px solid #e0dbd6; border-radius: 10px; }
.lib-more-body label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; color: var(--muted); font-weight: 600; }
.lib-more-body select { border: 1px solid #e0dbd6; border-radius: 8px; padding: 0 10px; }
.lib-tools .lib-clear { grid-column: 1 / -1; justify-self: start; margin-top: -32px; margin-inline-start: 160px; font-size: 15px; color: var(--maroon); }
.lib-tools .lib-more:not([open]) + .lib-clear { margin-top: -32px; }
.lib-tools .lib-more[open] + .lib-clear { margin-top: 0; margin-inline-start: 0; }
.lib-card { margin-top: 28px; background: #fff; border: 1px solid #e0dbd6; border-radius: 12px; overflow: visible; }
.lib-table { width: 100%; border-collapse: collapse; font-size: 14.75px; }
.lib-table thead th { height: 54px; background: #f0ebe6; color: #66666b; font-weight: 600; text-align: right; padding: 0 9px; white-space: nowrap; }
.lib-table thead th:first-child { border-start-start-radius: 12px; padding-inline-start: 18px; }
.lib-table thead th:last-child { border-start-end-radius: 12px; }
.lib-table tbody td { height: 73px; padding: 0 9px; vertical-align: middle; border-bottom: 1px solid #e0dbd6; white-space: nowrap; }
.lib-table tbody td:first-child { padding-inline-start: 18px; }
.lib-table tbody td:last-child { padding-inline-end: 18px; }
.lib-table tbody tr:last-child td { border-bottom: 0; }
.lib-table .t-title { width: 100%; white-space: normal; text-align: right; }
.lib-table td.t-title { text-align: right; font-size: 15.25px; font-weight: 600; }
.lib-table td.t-title a { color: var(--text); }
.lib-table td.t-title a:hover { color: var(--maroon); text-decoration: none; }
.lib-table .t-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; margin-top: 4px; font-weight: 400; }
.lib-table .t-place { color: var(--text); }
.lib-table .t-place:hover { color: var(--maroon); }
.t-act { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.t-actions > a { font-weight: 600; }
.row-menu { display: inline-block; position: relative; margin-inline-start: 4px; }
.row-menu > summary { list-style: none; cursor: pointer; padding: 0 4px; font-weight: 700; color: var(--muted); }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > div { position: absolute; inset-inline-start: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; min-width: 170px;
  background: #fff; border: 1px solid #e0dbd6; border-radius: 10px; box-shadow: 0 10px 24px rgba(46, 20, 20, .14); overflow: hidden; }
.row-menu > div a { padding: 9px 14px; color: var(--text); white-space: nowrap; }
.row-menu > div a:hover { background: #faf2f2; text-decoration: none; }
.st-draft { color: var(--muted); }
.st-in_force { color: #1a784a; font-weight: 600; }
.st-superseded, .st-archived { color: #66666b; }
.lib-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; font-size: 15px; color: #66666b; }
.lib-per { display: flex; align-items: center; }
.lib-per label { margin: 0; font-size: 15px; font-weight: 400; color: #66666b; display: flex; align-items: center; gap: 4px; }
.lib-per select { width: auto; height: 28px; padding: 0 4px; border: 0; background: transparent; font: 600 15px var(--font); }
@media (max-width: 900px) {
  .lib-tools, .lib-tools.req-tools { grid-template-columns: minmax(0, 1fr); } /* .req-tools sets two columns later on */
  .lib-tools .lib-clear { margin: 0; }
  .lib-table thead { display: none; }
  .lib-table, .lib-table tbody, .lib-table tr, .lib-table td { display: block; width: 100%; }
  .lib-table tbody tr { border-bottom: 1px solid #e0dbd6; padding: 8px 0; display: flex; flex-direction: column; }
  .lib-table tbody td { height: auto; border: 0; padding: 3px 14px; white-space: normal; display: grid; grid-template-columns: 7rem 1fr; gap: 8px; text-align: right; }
  .lib-table td::before { content: attr(data-label); color: var(--muted); font-weight: 600; }
  .lib-table td.t-title { order: -1; text-align: right; }
}

/* ---------- terms (Figma 25) and contact (Figma 24) ----------
   Terms: one white card (x 220…1020 in the frame) with the numbered
   sections in two columns, maroon headings, 11px muted text. Contact: form
   card (645 wide) beside the details card (350 wide), radius 16. The public
   layout (signed-out visitors) has no sidebar. */
.terms-card { max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid #e0dbd6; border-radius: 16px; padding: 40px 40px 30px; }
.terms-list { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; counter-reset: term; }
.terms-list li { break-inside: avoid; margin-bottom: 26px; counter-increment: term; }
.terms-list h2 { margin: 0 0 6px; font: 700 15.5px/1.6 var(--font); color: #8a0b1a; }
.terms-list h2::before { content: counter(term) ". "; }
.terms-list p { font-size: 14.5px; line-height: 1.9; color: #66666b; }
.contact-grid { display: grid; grid-template-columns: 645fr 350fr; gap: 35px; align-items: start; }
.contact-card { background: #fff; border: 1px solid #e0dbd6; border-radius: 16px; padding: 30px 35px; }
.contact-card h2 { margin: 0 0 22px; font: 700 18px var(--font); }
.contact-form label { font-size: 15px; margin: 14px 0 6px; }
.contact-form input, .contact-form textarea { height: 48px; border-color: #dbd6d6; font-size: 15.5px; }
.contact-form textarea { height: auto; min-height: 100px; }
.contact-form .btn { margin-top: 18px; min-width: 250px; height: 48px; font-size: 15.5px; }
.contact-form > .notice { margin-bottom: 12px; }
.contact-info dl { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.contact-info dt { color: #66666b; margin-top: 18px; }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: 0; color: #44444a; text-align: right; }
body.public { min-height: 100vh; display: flex; flex-direction: column; }
.public-content { flex: 1 0 auto; width: 100%; padding: 40px 80px 60px; max-width: 1200px; margin: 0 auto; }
.public-signin { height: 40px; font-size: 15.5px; }
.msg-filter { display: flex; gap: 14px; margin-bottom: 12px; font-size: 15.5px; }
.msg-filter a { color: #66666b; font-weight: 600; }
.msg-filter a.is-current { color: #8a0b1a; }
.msg-table .settings-row { grid-template-columns: 1.6fr 1.4fr 1fr 130px 110px 90px; }
.msg-table .settings-row.is-new .name { font-weight: 700; }
.msg-table small { display: block; color: #66666b; }
.msg-body { white-space: pre-wrap; padding: 16px 18px; margin-bottom: 16px; background: #faf8f6; border: 1px solid #ece7e2; border-radius: 10px; font-size: 16px; line-height: 1.9; }
@media (max-width: 900px) {
  .terms-list { columns: 1; }
  .terms-card, .contact-card { padding: 22px 18px; }
  .contact-grid { grid-template-columns: 1fr; }
  .public-content { padding: 24px 16px 40px; }
  .msg-table .settings-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- missions directory (Figma 14) and mission page (Figma 15) ----------
   Measured on the exported frames: filters 559 + 209 + 199 wide × 51
   (gaps 31); cards 484 × 259, radius 14, two per row with 31 gaps; type
   chip 119 × 29 (#FBF2F2, maroon border, radius 15); «عرض التفاصيل» 145 × 36
   maroon, radius 8. Mission header card 1029 × 179 radius 16; info cards
   474 (right) and 524 (left) × 324, radius 14. */
.mis-filters { display: grid; grid-template-columns: 559fr 209fr 199fr; gap: 31px; margin-bottom: 38px; }
.mis-filters .lib-search input { height: 51px; }
.mis-select { margin: 0; display: flex; align-items: center; height: 51px; padding: 0 14px; background: #fff;
  border: 1px solid #e0dbd6; border-radius: 10px; }
.mis-select select { width: 100%; height: 40px; border: 0; padding: 0; background: transparent; font: 600 15px var(--font); cursor: pointer; }
.mis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 31px; }
.mis-card { position: relative; min-height: 259px; padding: 22px 25px 24px; background: #fff; border: 1px solid #e0dbd6; border-radius: 14px;
  display: flex; flex-direction: column; }
.mis-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mis-card h2 { margin: 0; font: 700 16.5px/1.7 var(--font); }
.mis-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 119px; height: 29px; padding: 0 12px;
  border: 1px solid var(--maroon); border-radius: 15px; background: #fbf2f2; color: var(--maroon); font: 600 14px var(--font); white-space: nowrap; }
.mis-sub { margin: 4px 0 14px; font-size: 14.5px; color: #66666b; }
.mis-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: #33333a; }
.mis-contacts li { display: flex; align-items: center; gap: 8px; }
.mis-contacts li > span[aria-hidden] { width: 12px; text-align: center; color: #66666b; }
.mis-btn { align-self: flex-end; margin-top: auto; width: 145px; height: 36px; border-radius: 8px; font-size: 14.5px; }
.mis-foot { justify-content: space-between; }
.mis-pager { padding: 8px 16px; background: #fff; border: 1px solid #e0dbd6; border-radius: 9px; }
.mp-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: 179px; padding: 24px 30px;
  background: #fff; border: 1px solid #e0dbd6; border-radius: 16px; margin-bottom: 26px; }
.mp-head img { width: 72px; height: 72px; object-fit: contain; }
.mp-title h1 { margin: 0; font: 700 26px/1.5 var(--font); }
.mp-title p { margin: 2px 0 12px; font-size: 15.5px; color: #66666b; }
.mp-title .mis-chip { min-width: 139px; height: 33px; border-radius: 17px; }
.mp-actions { display: flex; flex-direction: column; gap: 14px; }
.mp-actions .btn { width: 210px; height: 46px; font-size: 15.5px; border-radius: 9px; }
.mp-grid { display: grid; grid-template-columns: 474fr 524fr; gap: 31px; margin-bottom: 40px; }
.mp-card { min-height: 324px; padding: 30px 35px; background: #fff; border: 1px solid #e0dbd6; border-radius: 14px; }
.mp-card h2 { margin: 0 0 24px; font: 700 18px var(--font); }
.mp-card .doc-facts { font-size: 15px; gap: 22px 30px; }
.mp-contacts { gap: 24px; font-size: 15px; }
.mp-docs-head { margin-bottom: 14px; }
.mp-docs-head .page-title { font-size: 22px; }
@media (max-width: 1100px) {
  .mis-filters { grid-template-columns: 1fr 1fr; }
  .mis-filters .lib-search { grid-column: 1 / -1; }
  .mis-grid, .mp-grid { grid-template-columns: 1fr; }
  .mp-head { grid-template-columns: auto 1fr; }
  .mp-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .mis-filters { grid-template-columns: 1fr; }
  .mp-head { grid-template-columns: 1fr; text-align: right; }
  .mp-actions .btn { width: 100%; }
}

/* ---------- globe (Figma 01 "الكرة الأرضية التفاعلية") ----------
   Frame: search 400 wide (right) and filter box 600 (left) × 50; the globe
   550 × 530 on the left; the mission card 285 × 405 (radius 16) on the
   right with «دليل السفارات والبعثات» (235 × 48) under it; counters
   (الدول / السفارات / القنصليات / البعثات) at the bottom-left. The SVG is
   drawn by static/js/globe.js. */
.globe-tools { display: grid; grid-template-columns: 400fr 600fr; gap: 30px; margin-bottom: 18px; }
.globe-tools .lib-search input { height: 50px; }
.globe-tools .lib-filters { height: 50px; justify-content: center; gap: 28px; }
.globe-tools .glabel { font: 600 15px var(--font); color: var(--text); margin-inline-end: 4px; }
.globe-stage { display: grid; grid-template-columns: 1fr 550px; gap: 40px; align-items: start; direction: rtl; }
.globe-side { order: -1; display: flex; flex-direction: column; align-items: center; gap: 140px; padding-top: 18px; }
.globe-card { width: 285px; min-height: 405px; padding: 34px 26px 28px; background: #fff; border: 1px solid #e0dbd6; border-radius: 16px;
  display: flex; flex-direction: column; }
.globe-card h2 { margin: 0 0 18px; font: 700 26px/1.4 var(--font); }
.gc-name { margin: 0 0 30px; font: 600 16.5px var(--font); color: #8a0b1a; }
.globe-card dl { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #55555a; }
.globe-card dl div { display: flex; gap: 4px; }
.globe-card dt { color: #66666b; }
.globe-card dd { margin: 0; }
.globe-card .gc-phone { margin-top: 24px; }
.gc-btn { margin-top: auto; height: 48px; font-size: 15.5px; }
.globe-dir { width: 235px; height: 48px; font-size: 15.5px; }
.globe-wrap { position: relative; }
#globe { display: block; width: 100%; height: auto; max-width: 550px; touch-action: none; cursor: grab; user-select: none; }
#globe:active { cursor: grabbing; }
#globe .g-marker { cursor: pointer; }
#globe .g-marker:focus { outline: none; }
#globe .g-marker:focus circle:last-of-type { stroke: #f2c8cd; stroke-width: 3; }
.globe-hint { margin: 4px 0 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.globe-stats { display: flex; gap: 50px; justify-content: center; margin: 22px 0 30px; direction: ltr; }
.globe-stats div { display: flex; flex-direction: column; align-items: center; }
.globe-stats b { font: 700 26px/1.3 var(--font); color: #1f1f21; }
.globe-stats span { font: 600 15.5px var(--font); color: #66666b; }
.globe-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.globe-list li { display: flex; flex-direction: column; padding: 10px 14px; background: #fff; border: 1px solid #e0dbd6; border-radius: 10px; font-size: 15px; }
.globe-list li a { font-weight: 600; }
.globe-list li span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 1100px) {
  .globe-tools { grid-template-columns: minmax(0, 1fr); }
  .globe-stage { grid-template-columns: 1fr; }
  .globe-side { gap: 16px; order: 0; } /* phones: globe first, then the card */
  .globe-stats { justify-content: center; gap: 28px; }
}

/* ---------- embassy portal (Figma "Embassy Account" frames 1–5) ----------
   Frame 1: counters 3 per row (300 × 102, gap 30, radius 12) with large
   coloured numbers; «آخر المساهمات» table. Frame 2: summary card with
   label/value rows; send (maroon) and back (outline) buttons. Frame 3:
   header card, info cards (left) and counters (right, 340 × 82). Frame 4:
   pill tabs (175 × 42, active maroon), notification cards with time ago
   and an outlined pill action; unread cards outlined in maroon. */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: 8px; border-radius: 10px; background: #8a0b1a; color: #fff; font: 700 14.5px var(--font); }
.portal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 38px; }
.portal-crumbs { font-size: 15px; color: #8a0b1a; margin-bottom: 8px; }
.portal-head .page-title { font-size: 32px; }
.portal-add { height: 56px; min-width: 220px; font-size: 16px; }
.portal-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px 30px; max-width: 960px; margin-bottom: 56px; }
.pc { display: flex; align-items: center; gap: 22px; height: 102px; padding: 0 40px; background: #fff; border: 1px solid #e0dbd6; border-radius: 12px;
  color: #55555a; font: 500 20px var(--font); }
.pc:hover { border-color: #8a0b1a; text-decoration: none; }
.pc b { font: 700 32px var(--font); min-width: 40px; }
.pc-pending b, .pc-sent b { color: #1f5fa8; }
.pc-draft b { color: #6b6b70; }
.pc-rejected b { color: #8a0b1a; }
.pc-approved b { color: #1a784a; }
.pc-changes b { color: #c27a0e; }
.portal-sub { margin: 0 0 14px; font: 700 24px var(--font); }
.req-table td, .req-table th { font-size: 15.25px; }
.req-table .t-muted { color: #66666b; }
.st-pending { color: #1f5fa8; font-weight: 600; }
.st-changes_requested { color: #c27a0e; font-weight: 600; }
.st-rejected { color: #8a0b1a; font-weight: 600; }
.st-published { color: #1a784a; font-weight: 600; }
.req-tools { grid-template-columns: 540fr 460fr; }
.req-title { margin: 6px 0 30px; font-size: 32px; }
.req-card { max-width: 1030px; padding: 36px 40px; background: #fff; border: 1px solid #e0dbd6; border-radius: 14px; }
.req-card h2 { margin: 0 0 20px; font: 700 20px var(--font); }
.req-facts { display: grid; grid-template-columns: 330px 1fr; gap: 22px 30px; margin: 0; font-size: 15.5px; }
.req-facts dt { color: #66666b; }
.req-facts dd { margin: 0; font-weight: 500; }
/* dir="auto" makes a Latin reference LTR, which would align it to the far
   left; keep it on the right edge of the column like the other values. */
.req-facts dd[dir=auto] { text-align: right; unicode-bidi: plaintext; }
.req-note { white-space: pre-wrap; color: #8a0b1a; }
.req-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; max-width: 1030px; margin-top: 40px; }
.req-actions form { margin: 0; }
.req-actions .btn { height: 52px; min-width: 170px; font-size: 16px; }
.req-actions > form:first-child .btn-primary { min-width: 270px; }
.req-decide { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.req-decide label { font-size: 15.5px; color: #66666b; }
.req-decide textarea { min-height: 90px; }
.req-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.note-tabs { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 38px; }
.note-tabs a { display: inline-flex; align-items: center; justify-content: center; width: 175px; height: 42px; border: 1px solid #e0dbd6;
  border-radius: 21px; background: #fff; color: #44444a; font: 500 15.5px var(--font); }
.note-tabs a:hover { border-color: #8a0b1a; text-decoration: none; }
.note-tabs a.is-current { background: #6e0913; border-color: #6e0913; color: #fff; }
.note-list { display: flex; flex-direction: column; gap: 20px; max-width: 1030px; }
.note { display: flex; justify-content: space-between; gap: 20px; min-height: 125px; padding: 22px 70px 22px 20px; background: #fff;
  border: 1px solid #e0dbd6; border-radius: 12px; }
.note.is-unread { border-color: #8a0b1a; }
.note h2 { margin: 0 0 10px; font: 700 16.5px var(--font); }
.note p { font-size: 15px; color: #55555a; line-height: 1.8; }
.note-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 14px; flex: 0 0 auto; }
.note-ago { font-size: 14.5px; color: #66666b; align-self: flex-end; }
.note-side form { margin: 0; }
.note-btn { width: 170px; height: 40px; border: 1px solid #8a0b1a; border-radius: 20px; background: #fdf7f8; color: #8a0b1a;
  font: 600 15px var(--font); cursor: pointer; }
.note-btn:hover { background: #faecee; }
.pf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1030px; min-height: 130px; margin: 28px 0 36px;
  padding: 20px 40px; background: #fff; border: 1px solid #e0dbd6; border-radius: 16px; }
.pf-head h2 { margin: 0 0 6px; font: 700 24px var(--font); }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15.5px; color: #1a784a; }
.pf-meta span + span::before { content: "•"; margin-inline-end: 14px; }
.pf-head .btn { min-width: 170px; height: 44px; font-size: 15.5px; color: #8a0b1a; border-color: #dbd6d6; }
.pf-grid { display: grid; grid-template-columns: 660fr 340fr; gap: 30px; max-width: 1030px; align-items: start; }
.pf-cards { display: flex; flex-direction: column; gap: 22px; }
.pf-card { padding: 22px 40px; background: #fff; border: 1px solid #e0dbd6; border-radius: 14px; }
.pf-card h3 { margin: 0 0 12px; font: 700 16.5px var(--font); }
.pf-card p { font-size: 15px; color: #55555a; line-height: 1.9; }
.pf-gap { display: inline-block; width: 14px; }
.pf-counters { display: flex; flex-direction: column; gap: 22px; }
.pf-count { display: flex; justify-content: space-between; align-items: center; height: 82px; padding: 0 40px; background: #fff;
  border: 1px solid #e0dbd6; border-radius: 12px; color: #55555a; font-size: 15px; }
.pf-count:hover { border-color: #8a0b1a; text-decoration: none; }
.pf-count b { font: 700 22px var(--font); }
.c-maroon { color: #8a0b1a; }
.c-green { color: #1a784a; }
@media (max-width: 1100px) {
  .portal-counters { grid-template-columns: repeat(2, 1fr); }
  .pf-grid { grid-template-columns: 1fr; }
  .req-facts { grid-template-columns: 10rem 1fr; }
}
@media (max-width: 640px) {
  .portal-head { flex-direction: column; align-items: stretch; }
  .portal-counters { grid-template-columns: 1fr; }
  .note { flex-direction: column; padding: 18px; }
  .note-side { align-items: stretch; }
  .note-tabs a { width: auto; flex: 1 1 40%; }
  .req-facts { grid-template-columns: 1fr; gap: 4px; }
  .req-facts dd { margin-bottom: 10px; }
}

/* ---- Flash error area (#flash in the layouts) -------------------------
   Holds the Arabic message of a failed HTMX action (internal/app.htmlError
   retargets error responses here). Empty → takes no space. */
.flash:empty { display: none; }
.flash { margin: 0 0 18px; }
.flash-msg { margin: 0; padding: 12px 16px; border-radius: 10px; background: #fdecec; border: 1px solid #e3a3a3;
  color: #7a1010; font-weight: 600; font-size: 16px; }

/* ---- Settings / audit log (سجل التدقيق) --------------------------------- */
.audit-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 18px; }
.audit-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #66666b; }
.audit-filter select, .audit-filter input { min-width: 150px; padding: 8px 10px; border: 1px solid #dbd6d6; border-radius: 8px; background: #fff; font: inherit; color: #1c1c1e; }
/* Fields and buttons share one height and no outer margin, so «تصفية» /
   «مسح» (and «بحث» in المحذوفات) line up with the fields' bottom edge
   (inputs otherwise take the global 58px, buttons 46px). */
.audit-filter select, .audit-filter input, .audit-filter .btn { height: 46px; margin: 0; }
.audit-filter .btn { flex: none; }
.audit-filter label { margin: 0; } /* the global label margin lifted the fields 8px above the buttons */
.audit-table .settings-row { grid-template-columns: 140px 1.3fr 70px 1fr 1fr 110px 1.6fr; font-size: 15px; }
.audit-table small { display: block; color: #8a8a8f; font-size: 14px; }
.audit-details { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; color: #44444a; word-break: break-word; text-align: left; }
@media (max-width: 900px) {
  .audit-table .settings-row { grid-template-columns: 1fr 1fr; }
  .audit-filter select, .audit-filter input { min-width: 0; width: 100%; }
  .audit-filter label { flex: 1 1 140px; }
}

/* Terms of use editor (settings_terms, sprint-8 §9): metadata row, one card
   per section with its move/remove tools, and the action bar. */
.terms-editor { display: grid; gap: 16px; }
.te-meta { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.te-meta label, .te-section label { display: grid; gap: 6px; font-size: 16px; }
.te-sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.te-section { background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.te-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.te-tools { display: flex; gap: 6px; }
.te-tools .btn-sm { height: 32px; padding: 0 10px; font-size: 15.5px; }
.te-section textarea { width: 100%; resize: vertical; font: inherit; }
.te-hint { font-size: 15.5px; color: var(--muted, #6b7280); }
.te-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.terms-preview { border: 1px dashed var(--line, #e5e7eb); border-radius: 12px; padding: 16px; }
@media (max-width: 640px) { .te-meta { grid-template-columns: 1fr; } }

/* Change password: one line per broken password rule (web.passwordViolationsAR). */
.alert p { margin: 0; }
.pw-violations { margin: 6px 0 0; padding-inline-start: 18px; }
.pw-violations li { margin: 2px 0; }

/* Unit document lists: the «الملاحظات» filter box (decision D8), smaller
   than the main search and without its button. */
.list-notes { flex: 0 1 260px; }
.list-notes input { padding: 0 16px; }
/* Phones: the list tools stack (see the 900px block above); .list-notes is
   declared after that block, so its 260px flex-basis would otherwise become
   a 260px-tall gap in the column. */
@media (max-width: 900px) { .list-notes { flex: none; width: 100%; } }

/* Search by date (minutes of 12 October 2026, 3.4): the chip above the
   results and the clickable dates in the table and on the document page. */
.date-chip { margin: 0 0 12px; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px;
  border-radius: 16px; background: #faf2f2; color: #5a0b13; font-size: 15.5px; }
.date-chip a { color: inherit; font-weight: 700; text-decoration: none; }
.date-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.date-link:hover { color: var(--maroon, #7a0e18); }

/* Locked units (minutes of 12 October 2026, 3.1; D3): greyed department
   ovals and the administrators' banner on a locked unit's page. */
.dept.is-locked { background: #ecebeb; color: #77706f; border-color: #bdb6b6; cursor: not-allowed; box-shadow: none; }
a.dept.is-locked { cursor: pointer; }
.locked-banner { margin: 0 0 16px; }

/* Unit form: the «إظهار كفقاعة على الخريطة» checkbox box. */
.uf-check { display: flex; align-items: center; }
.uf-check label { display: flex; gap: 8px; align-items: center; font-size: 15.5px; color: var(--text, #1c1c1e); }

/* الجهات list: the map rank next to the status (minutes of 12 October 2026, 3.1). */
.rank-tag { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 8px; background: #f1eee9; color: #66666b; font-size: 14.5px; text-align: center; }

/* Unit form: «لون الفقاعة» — palette swatches, the custom picker and the
   live preview oval (app.js updates it; spec 2026-10-25-map-bubbles-colours). */
.bubble-colour { grid-column: 1 / -1; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 6px 0 10px; }
.swatches label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14.5px; color: #44444a; cursor: pointer; }
.swatches input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch { width: 38px; height: 28px; border-radius: 50%; border: var(--bd, 0);
  background: radial-gradient(circle at 32% 26%, var(--g1, #a01a2b), var(--g2, var(--maroon)) 52%, var(--g3, #4a0610)); }
.swatches input:checked + .swatch { outline: 3px solid #1c1c1e; outline-offset: 3px; }
.swatches input:focus-visible + .swatch { outline: 3px solid #f2c8cd; outline-offset: 3px; }
.swatch-custom { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.swatch-custom input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid #dbd6d6; border-radius: 6px; background: #fff; }
.bubble.bubble-preview { --bw: 220px; --bh: 152px; --bf: 16.5px; margin: 6px auto 0; animation: none; pointer-events: none; }
/* «لون مخصص» has no swatch circle, so its radio stays visible. */
.swatches .swatch-custom input[type=radio] { position: static; opacity: 1; width: auto; height: auto; }
.swatch-custom label { flex-direction: row; font-size: 15px; }

/* ---- المرفقات card of the document page (partials/doc_attachments.html,
   Sprint 10 spec §1.1). It spans both grid columns because file names are
   long; each row is icon · name with facts · actions, wrapping on phones.
   The file input is visually hidden and opened by its «+ إرفاق ملف» label,
   but stays focusable (keyboard users tab to it; the label shows focus). */
.doc-attachments { grid-column: 1 / -1; }
.doc-attachments .alert { margin: 0 0 12px; }
.doc-attachments .alert ul { margin: 6px 0 0; padding-inline-start: 18px; }
.doc-attachments > .notice { margin: 0 0 12px; }
.att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.att { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.att.is-removed { opacity: .6; border-style: dashed; }
.att-icon { font-size: 18px; flex: none; }
.att-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-main b { font: 600 15.5px var(--font); overflow-wrap: anywhere; }
.att-main small { color: var(--muted); font-size: 14.5px; }
.att-actions { display: flex; gap: 8px; flex: none; }
.att-actions form { margin: 0; }
.btn-edit.danger { border-color: #b3261e; color: #b3261e; }
.btn-edit.danger:hover { background: #fdecec; }
.att-upload { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.att-upload .btn { margin: 0; height: 40px; padding: 0 18px; cursor: pointer; }
.att-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.att-file:focus-visible + .btn { outline: 2px solid var(--maroon); outline-offset: 2px; }
.att-upload .hint { flex-basis: 100%; }
.att-chosen { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .att { flex-wrap: wrap; }
  .att-actions { width: 100%; justify-content: flex-end; }
}

/* 📎 n after a title in the document tables (library_table, documents):
   the number of live attachments (Document.LiveAttachments). */
.t-clip { margin-inline-start: 6px; color: var(--muted); font-size: 14.5px; white-space: nowrap; }
/* Files listed in «ملخص الطلب» (request.html). */
.req-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.req-files small { color: var(--muted); }

/* Link in the «تم حفظ المستند» notice to the new document's المرفقات card. */
.notice-link { margin-inline-start: 8px; font-weight: 700; color: inherit; text-decoration: underline; }

/* ---- Version links (Sprint 10 spec §2) ----
   .ver-banner: «توجد نسخة أحدث من هذا المستند» on an older document.
   .doc-relations: «يحل محل» / «حلّ محلّه» and the chain (document.html).
   .ver-picker: «نسخة سابقة من» in the document form (partials/doc_form,
   options from partials/version_options; app.js handles the choice). */
.ver-banner { margin: 0 0 18px; }
.ver-banner a { font-weight: 700; color: inherit; text-decoration: underline; }
.ver-links { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0 0 14px; font-size: 15px; }
.ver-links dt { color: var(--muted); }
.ver-links dd { margin: 0; }
.ver-chain-title { margin: 0 0 8px; font: 600 15px var(--font); color: var(--muted); }
.ver-chain { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ver-chain small { color: var(--muted); }
.ver-chosen { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15.5px; }
.ver-results:empty { display: none; }
.ver-options { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; max-height: 240px; overflow-y: auto; }
.ver-option { display: block; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff;
  font: 500 15.5px var(--font); text-align: start; cursor: pointer; }
.ver-options li:last-child .ver-option { border-bottom: 0; }
.ver-option:hover, .ver-option:focus-visible { background: var(--active-bg); }
.ver-picker .check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15.5px; }
.ver-clear[hidden] { display: none; }

/* ---- Country pages and bilateral treaties (Sprint 10 spec §3) ----
   .t-country: a treaty's country next to its title or place in document
   tables (partials/documents, library_table), linked to its page.
   .ct-missions: the country page's missions (country.html). */
.t-country { margin-inline-start: 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14.5px; color: var(--maroon); white-space: nowrap; }
.t-country:hover { border-color: var(--maroon); text-decoration: none; }
.ct-missions { margin: 0 0 28px; }
.ct-missions .page-title { margin-bottom: 14px; }
/* The country page's cards carry no contacts: no directory-card height. */
.ct-missions .mis-card { min-height: 0; }
/* «+ إضافة معاهدة» / «+ إضافة مستند» stay on one line next to a long title. */
.mp-docs-head .btn { flex: none; white-space: nowrap; }

/* ---- Soft deletion (Sprint 11) ----
   .del-banner: «هذا المستند محذوف» on a deleted document (document.html).
   .doc-delete: the «حذف المستند» disclosure with its reason form.
   .deleted-table: ⚙ الإعدادات → المحذوفات (settings_deleted.html). */
.del-banner { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.del-banner p { margin: 0; }
.del-banner form { margin-inline-start: auto; }
.del-banner .btn { height: 38px; }
.doc-delete { margin: -12px 0 24px; margin-inline-end: 30px; }
.doc-delete summary { width: max-content; margin-inline-start: auto; cursor: pointer; color: #8a0b1a; font: 600 15px var(--font); }
.doc-delete form { max-width: 560px; margin: 10px 0 0 auto; padding: 16px 18px; background: #fff; border: 1px solid #f3c6cb; border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px; }
.doc-delete textarea { width: 100%; }
.doc-delete .btn { align-self: flex-start; }
.deleted-table .settings-row { grid-template-columns: 2fr 1.4fr 1fr 1fr 2fr auto; }
.deleted-table form { margin: 0; }
@media (max-width: 900px) {
  .doc-delete { margin-inline-end: 0; }
  .deleted-table .settings-row { grid-template-columns: 1fr 1fr; } /* as the other settings tables */
}

/* ---- Two-way message box (Sprint 12) ----
   .msg-card / .msg-head: a conversation page (message.html,
   settings_message.html, settings_message_new.html).
   .msg-thread: the exchange (partials/msg_thread) — the Ministry's messages
   on the opposite side and tinted. .st-msg-<state>: status chips
   (new = بانتظار الرد, answered = تم الرد, closed = مغلقة). */
.msg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.msg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; }
.msg-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msg-entry { max-width: 78%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); }
.msg-entry.is-ministry { margin-inline-start: auto; background: var(--active-bg); border-color: #efd3d6; }
.msg-entry header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font-size: 15px; }
.msg-entry header b { color: var(--maroon); }
.msg-entry time { color: var(--muted); }
.msg-entry p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.8; }
.msg-reply, .msg-new { display: flex; flex-direction: column; gap: 8px; }
.msg-reply textarea, .msg-new textarea, .msg-new input[type=text] { width: 100%; }
.msg-reply .btn, .msg-new .btn { align-self: flex-start; }
.msg-to { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.msg-to legend { padding: 0 6px; font-weight: 600; }
.msg-to .field-error { grid-column: 1 / -1; }
.msg-unread { align-self: flex-start; width: max-content; padding: 0 8px; border-radius: 9px; background: var(--maroon); color: #fff; font-size: 14px; } /* sized to its text inside the stacked name cell */
.st-msg-new { background: #fff4e5; color: #8a5300; }
.st-msg-answered { background: #e9f6ee; color: var(--ok); }
.st-msg-closed { background: #efefef; color: var(--muted); }
@media (max-width: 640px) {
  .msg-card { padding: 18px 16px; }
  .msg-entry { max-width: 100%; }
  .msg-to { grid-template-columns: 1fr; }
}

/* Filter strips (globe, requests, library lists, unit document lists) wrap onto a second line on
   phones instead of widening the page; with the 14px floor and «السنة» they no longer fit one 390px
   line. Kept last so it overrides .lib-filters, .globe-tools .lib-filters and .list-filters. */
@media (max-width: 640px) {
  .lib-filters, .globe-tools .lib-filters, .list-filters { flex-wrap: wrap; height: auto; min-height: 53px;
    padding: 6px 12px; row-gap: 0; }
}

/* Every card (owner, 2026-10-29): a soft light-grey glow that darkens to grey on hover. One list,
   so a new *-card class should be added here. pf-cards is the profile column, not a card. */
.card, .login-card, .docs-card, .doc-card, .uf-card, .user-card, .lib-card, .terms-card, .contact-card,
.mis-card, .mp-card, .globe-card, .req-card, .pf-card, .msg-card {
  box-shadow: lightgrey 0px 0px 5px 3px; transition: box-shadow .2s ease; }
.card:hover, .login-card:hover, .docs-card:hover, .doc-card:hover, .uf-card:hover, .user-card:hover,
.lib-card:hover, .terms-card:hover, .contact-card:hover, .mis-card:hover, .mp-card:hover,
.globe-card:hover, .req-card:hover, .pf-card:hover, .msg-card:hover { box-shadow: grey 0px 0px 5px 3px; }
@media (prefers-reduced-motion: reduce) {
  .card, .login-card, .docs-card, .doc-card, .uf-card, .user-card, .lib-card, .terms-card, .contact-card,
  .mis-card, .mp-card, .globe-card, .req-card, .pf-card, .msg-card { transition: none; }
}