/* ============================================================
   PMA — Precious Metal Authority System
   Palette + layout mimic the sibling CRM app: deep slate navy +
   warm white + amber accent, Inter (UI) / DM Sans (headings).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --pma-navy: #1E2A3A;
  --pma-navy-dark: #131D28;
  --pma-navy-light: #2C3E52;
  --pma-map-fill: #c9d3ea;
  --pma-gold: #E8A020;
  --pma-gold-light: #F5C355;
  --pma-gold-dark: #B87A10;
  --pma-bg: #F4F6F9;
  --pma-surface: #FFFFFF;
  --pma-surface-alt: #F8FAFC;
  --pma-border: #DDE3EC;
  --pma-border-strong: #C7CFDC;
  --pma-text: #1E2A3A;
  --pma-text-muted: #6B7A8D;
  --pma-danger: #D94040;
  --pma-danger-bg: #FDE8E8;
  --pma-success: #2E8B57;
  --pma-success-bg: #E6F4ED;
  --pma-warning: #856404;
  --pma-warning-bg: #FFF3CD;
  --pma-info: #1B5E9E;
  --pma-info-bg: #E3EFFC;
  --pma-radius: 8px;
  --pma-radius-sm: 6px;
  --pma-sidebar-w: 240px;
  --pma-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06);
  --pma-shadow-md: 0 4px 16px rgba(0, 0, 0, .12);
  --pma-shadow-lg: 0 14px 40px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Arial, sans-serif;
  background: var(--pma-bg);
  color: var(--pma-text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--pma-navy); }

:focus-visible {
  outline: none;
  border-color: var(--pma-navy) !important;
  box-shadow: 0 0 0 3px rgba(30, 42, 58, 0.15) !important;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.pma-layout { display: flex; min-height: 100vh; }

/* SIDEBAR — anchored with logical properties so it sits on the right in
   Arabic (RTL, the app default) and the left in English (super_admin only),
   matching how the sidebar is real UI chrome (unlike the governorates map's
   geographic SVG, which must stay pinned physical-left — see the map CSS
   below for that distinction). */
.pma-sidebar {
  width: var(--pma-sidebar-w);
  background: var(--pma-navy-dark);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 100;
  overflow: hidden;
}

.pma-sidebar-logo {
  padding: 22px 18px 18px;
  border-block-end: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.pma-sidebar-logo .pma-logo-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 9px;
  object-fit: contain;
  display: block;
}

.pma-sidebar-logo .pma-logo-text {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  min-width: 0;
}

.pma-sidebar-logo .pma-logo-text span {
  display: block;
  font-weight: 400;
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pma-sidebar-nav { padding: 12px 0 0; flex: 1; overflow-y: auto; overflow-x: hidden; }

.pma-nav-group { margin-block-end: 2px; }

.pma-nav-section {
  padding: 10px 18px 4px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.pma-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 400;
  border-inline-start: 3px solid transparent;
  transition: all .15s;
}

.pma-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.pma-nav-item.active {
  background: rgba(232, 160, 32, .12);
  color: var(--pma-gold-light);
  border-inline-start-color: var(--pma-gold);
  font-weight: 500;
}

.pma-nav-item .pma-nav-badge {
  margin-inline-start: auto;
  background: var(--pma-danger);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .68rem;
  font-weight: 700;
}

.pma-sidebar-user {
  padding: 14px 18px;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pma-sidebar-user .pma-avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--pma-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  color: var(--pma-navy-dark);
}

.pma-sidebar-user .pma-user-info { flex: 1; min-width: 0; }
.pma-sidebar-user .pma-user-name { font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pma-sidebar-user .pma-user-role { font-size: .7rem; color: rgba(255, 255, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pma-sidebar-user .pma-logout { color: rgba(255, 255, 255, .4); font-size: 1rem; text-decoration: none; margin-inline-start: auto; flex-shrink: 0; }
.pma-sidebar-user .pma-logout:hover { color: var(--pma-danger); }

/* MAIN CONTENT */
.pma-main-content {
  margin-inline-start: var(--pma-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* TOPBAR */
.pma-topbar {
  background: var(--pma-surface);
  border-block-end: 1px solid var(--pma-border);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  top: 0;
  z-index: 50;
}

.pma-topbar-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pma-navy);
  white-space: nowrap;
  pointer-events: none;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pma-topbar-actions { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--pma-text-muted); }

.pma-lang-toggle {
  color: var(--pma-navy);
  text-decoration: none;
  border: 1px solid var(--pma-border-strong);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: .8rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.pma-lang-toggle:hover { background: var(--pma-surface-alt); border-color: var(--pma-border-strong); }

/* Hamburger button that opens the sidebar on mobile — hidden on desktop,
   where the sidebar is always visible. */
.pma-sidebar-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  margin-inline-end: auto;
  color: var(--pma-navy);
  font-size: 1.2rem;
  font-family: inherit;
  line-height: 1;
}
.pma-sidebar-toggle-btn span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.pma-sidebar-toggle-btn span::before, .pma-sidebar-toggle-btn span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.pma-sidebar-toggle-btn span::before { top: -6px; }
.pma-sidebar-toggle-btn span::after { top: 6px; }

/* Dims/blocks the page behind the sidebar while it's open on mobile —
   tapping it closes the sidebar again. */
.pma-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 99;
}
.pma-sidebar-backdrop.open { display: block; }

/* Shown under the topbar on every page whenever the logged-in user has due-or-overdue pending
   reminders in scope (see includes/header.php + includes/notification_helpers.php) - the
   "push notification" for a host with no real push/cron infrastructure: it follows the user
   around the app rather than living only on the Reminders screen or dashboard badge, and
   clears itself automatically once those reminders are handled (marked sent/dismissed). */
.pma-reminder-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--pma-warning-bg);
  color: var(--pma-warning);
  border-block-end: 1px solid var(--pma-gold);
  padding: 0.65rem 28px;
  font-size: 0.86rem;
  font-weight: 600;
}
.pma-reminder-banner-icon { font-size: 1rem; }
.pma-reminder-banner a {
  margin-inline-start: auto;
  color: var(--pma-navy);
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}

/* PAGE CONTENT */
.pma-main { padding: 28px; flex: 1; max-width: 1200px; }

h1 {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  font-family: 'DM Sans', sans-serif;
  margin-block: 0 1.5rem; color: var(--pma-navy); font-size: 1.4rem; font-weight: 700;
}
h2 {
  font-family: 'DM Sans', sans-serif;
  color: var(--pma-navy); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-block: 2rem 0.9rem; padding-block-end: 0.5rem; border-block-end: 2px solid var(--pma-gold);
  display: inline-block;
}

/* ============================================================
   DASHBOARD CARDS
   ============================================================ */
.pma-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-block-start: 1.5rem; }
.pma-card {
  background: var(--pma-surface);
  border: 1px solid var(--pma-border);
  border-radius: var(--pma-radius);
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  color: var(--pma-text);
  box-shadow: var(--pma-shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pma-card:hover { border-color: var(--pma-gold); box-shadow: var(--pma-shadow-md); }
.pma-card h2 { margin: 0; border: none; padding: 0; color: var(--pma-navy); font-size: 1.02rem; text-transform: none; letter-spacing: normal; }
.pma-card p { margin: 0.4rem 0 0; color: var(--pma-text-muted); font-size: 0.85rem; }

/* ============================================================
   TABLES
   ============================================================ */
.pma-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pma-surface);
  border: 1px solid var(--pma-border);
  border-radius: var(--pma-radius);
  overflow: hidden;
  box-shadow: var(--pma-shadow-sm);
  font-size: .875rem;
}
.pma-table th, .pma-table td {
  padding: 0.7rem 1rem;
  text-align: start;
  border-block-end: 1px solid var(--pma-border);
}
.pma-table th { background: var(--pma-surface-alt); color: var(--pma-text-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.pma-table tbody tr:last-child td { border-block-end: none; }
.pma-table tbody tr:hover td { background: var(--pma-surface-alt); }
.pma-table a { text-decoration: none; font-weight: 600; }
.pma-table a:hover { text-decoration: underline; }
.pma-empty { text-align: center; color: var(--pma-text-muted); padding: 2.5rem 1rem; }
.pma-note { color: var(--pma-text-muted); font-size: 0.9rem; }
.pma-required-mark { color: var(--pma-danger, #c0392b); font-weight: 700; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.pma-status {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px; font-size: .73rem; font-weight: 600;
  white-space: nowrap;
}
.pma-status-draft, .pma-status-pending, .pma-status-pending_director { background: var(--pma-warning-bg); color: var(--pma-warning); }
.pma-status-approved { background: var(--pma-success-bg); color: var(--pma-success); }
.pma-status-temporarily_approved { background: var(--pma-info-bg); color: var(--pma-info); }
.pma-status-rejected, .pma-status-revoked { background: var(--pma-danger-bg); color: #9B1C1C; }
.pma-status-suspended { background: #E2E3E5; color: #383D41; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.pma-login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--pma-navy-dark);
  padding: 1.5rem;
}
.pma-login-box {
  background: var(--pma-surface);
  padding: 2.5rem 2.25rem;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--pma-shadow-lg);
}
.pma-login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 26px;
  justify-content: center;
}
.pma-login-logo .pma-logo-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 12px;
  object-fit: contain;
  display: block;
}
.pma-login-box h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem; font-weight: 700; color: var(--pma-navy);
  text-align: center; margin: 0 0 6px;
  justify-content: center; display: block;
}
.pma-login-sub { font-size: .85rem; color: var(--pma-text-muted); text-align: center; margin-block-end: 24px; }
.pma-login-box form { display: flex; flex-direction: column; gap: 1.1rem; }
.pma-login-box label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; color: var(--pma-navy); font-weight: 600; }
.pma-login-box input {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--pma-border);
  border-radius: var(--pma-radius-sm);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pma-login-box input:focus {
  border-color: var(--pma-gold);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, .15);
}
.pma-login-box button {
  margin-block-start: 0.6rem;
  padding: 0.75rem;
  background: var(--pma-navy);
  color: #fff;
  border: none;
  border-radius: var(--pma-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.pma-login-box button:hover { background: var(--pma-navy-light); }
.pma-error {
  background: var(--pma-danger-bg);
  color: #9B1C1C;
  padding: 0.7rem 0.9rem;
  border-radius: var(--pma-radius);
  border-inline-start: 4px solid var(--pma-danger);
  font-size: 0.88rem;
}
.pma-error p { margin: 0.2rem 0; }
.pma-dialog {
  border: none;
  border-radius: var(--pma-radius);
  padding: 1.25rem 1.5rem;
  width: min(480px, 90vw);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.pma-dialog::backdrop { background: rgba(20, 26, 36, 0.55); }
.pma-success-box {
  background: var(--pma-success-bg);
  color: var(--pma-success);
  padding: 0.7rem 0.9rem;
  border-radius: var(--pma-radius);
  border-inline-start: 4px solid var(--pma-success);
  font-size: 0.88rem;
}
.pma-success-box p { margin: 0.2rem 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.pma-footer { text-align: center; color: var(--pma-text-muted); font-size: 0.8rem; padding: 2rem 1rem 1rem; }

/* ============================================================
   FORMS (license create/edit, dealers, users, fees...)
   ============================================================ */
.pma-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; }
.pma-form fieldset {
  /* No `border` property here - that's deliberate, not an oversight. A <legend> always
     straddles its fieldset's border edge, half poking above the box, and that positioning is
     hard-wired into every browser regardless of the fieldset's display type (block, flex, and
     grid all still do it - tested directly, this isn't a case where flex helps). The one thing
     that actually stops it: a fieldset with no real border has no border edge for the legend to
     straddle, so browsers just lay it out inside the padding box like a normal block. The
     visible border+radius look is faked with an inset box-shadow instead (stacked with the
     card's drop shadow below), which paints in the same place a real border would but never
     triggers the legend's straddle behavior. */
  position: relative; margin: 0;
  border: none; border-radius: var(--pma-radius);
  padding: 1.5rem 1.6rem 1.6rem; background: var(--pma-surface);
  box-shadow: inset 0 0 0 1px var(--pma-border), var(--pma-shadow-sm);
}
.pma-form legend {
  /* A <legend> always anchors to its fieldset's block-start (top) edge and ignores the
     fieldset's own padding-block-start, no matter what - that's true even with the fieldset's
     border removed above. Left/right positioning does respect the fieldset's inline padding (so
     the legend lines up with the fields below it), it's only the top inset that's missing -
     hence the explicit margin-block-start here, standing in for the padding the legend doesn't
     otherwise get. */
  display: block; width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pma-gold-dark);
  position: relative; inset-block-start: 1.5rem;
  padding-block-end: 0.55rem; margin-block-end: calc(1rem + 1.5rem);
  border-block-end: 2px solid var(--pma-gold);
}
.pma-form label { display: flex; flex-direction: column; gap: 0.35rem; margin-block-end: 1rem; font-size: 0.86rem; color: var(--pma-navy); font-weight: 600; }
.pma-form label:last-child { margin-block-end: 0; }
/* The flex display above (needed so a label's text sits above its input) otherwise silently
   defeats the native [hidden] behavior for <label> elements specifically - an author rule with
   this selector's specificity overrides the UA stylesheet's `[hidden] { display: none }`, so a
   hidden label without this override would render fully visible. Divs/paragraphs aren't affected
   since nothing here sets their display, but any label toggled via el.hidden (e.g. the users
   create/edit office field) needs this. */
.pma-form label[hidden] { display: none; }
.pma-form input[type="text"], .pma-form input[type="number"], .pma-form input[type="password"], .pma-form select, .pma-form textarea {
  padding: 0.58rem 0.8rem; border: 1px solid var(--pma-border); border-radius: var(--pma-radius-sm);
  font-size: 0.9rem; font-family: inherit; color: var(--pma-text); background: #fff; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}
.pma-form input:hover, .pma-form select:hover, .pma-form textarea:hover { border-color: var(--pma-border-strong); }
.pma-form input:focus, .pma-form select:focus, .pma-form textarea:focus {
  border-color: var(--pma-gold);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, .15);
}
.pma-form textarea { min-height: 78px; resize: vertical; }

.pma-form select {
  appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-size: 13px; padding-inline-end: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html[dir="ltr"] .pma-form select { background-position: right 0.85rem center; }
html:not([dir="ltr"]) .pma-form select { background-position: left 0.85rem center; }

.pma-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1.25rem; }
.pma-grid-2 label { margin-block-end: 1rem; }
/* Fixed 3-across row (e.g. applicant/father/mother name on the Shop application) - unlike
   .pma-grid-2's auto-fit, this always reserves 3 columns so a short third field doesn't get
   pushed to its own line just because the container has room for only 2 at 210px each. */
.pma-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.25rem; }
.pma-grid-3 label { margin-block-end: 1rem; }
.pma-span-2 { grid-column: 1 / -1; }

/* License type "cards" */
.pma-type-choice { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-block-end: 0.3rem; }
.pma-type-card {
  flex: 1 1 190px; display: flex; align-items: center; gap: 0.65rem;
  padding: 0.95rem 1.1rem; border: 1.5px solid var(--pma-border); border-radius: var(--pma-radius-sm);
  cursor: pointer; background: var(--pma-surface-alt); margin: 0;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  /* .pma-type-card also renders as a plain <a> on the step-1 type picker (create.php) */
  text-decoration: none; color: inherit; justify-content: center;
}
.pma-type-card:hover { border-color: var(--pma-gold-light); }
.pma-type-card.is-selected { border-color: var(--pma-navy); background: #EEF1F6; box-shadow: 0 0 0 3px rgba(30, 42, 58, 0.08); }
.pma-type-card input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--pma-navy); flex-shrink: 0; }
.pma-type-card-title { font-weight: 700; color: var(--pma-text); font-size: 0.94rem; }

.pma-type-fields {
  margin-block-start: 1rem; padding: 1.1rem 1.2rem;
  border-radius: var(--pma-radius-sm); background: var(--pma-surface-alt); border: 1px dashed var(--pma-border-strong);
}

/* Plain single-select radio choice (e.g. Shop's license subtype) - lighter-weight than the
   .pma-type-card treatment above, which is reserved for the top-level application type picker. */
.pma-radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-block: 0.3rem 1rem; }
.pma-radio-row label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.88rem; color: var(--pma-text); margin: 0; }
.pma-radio-row input { accent-color: var(--pma-navy); }

/* The printed attachment checklist for a membership application type (see
   includes/licensing_helpers.php's pmaRequiredDocumentsChecklist()). */
.pma-required-docs { margin-block-start: 1rem; padding-block-start: 0.9rem; border-block-start: 1px dashed var(--pma-border-strong); }
.pma-required-docs-list { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; font-size: 0.85rem; color: var(--pma-text); }
.pma-required-docs-list li { margin-block-end: 0.35rem; }

.pma-form-actions { display: flex; gap: 0.8rem; margin-block-start: 0.25rem; flex-wrap: wrap; }
.pma-actions-link { margin-block-end: 1.25rem; display: block; }

.pma-btn-primary, .pma-btn-secondary, .pma-btn-danger {
  padding: 0.6rem 1.3rem; border-radius: var(--pma-radius-sm); border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; gap: 0.4rem; font-family: inherit; transition: background .15s ease, opacity .15s ease;
}
.pma-btn-primary { background: var(--pma-navy); color: #fff; border-color: var(--pma-navy); }
.pma-btn-primary:hover { background: var(--pma-navy-light); }
.pma-btn-secondary { background: #fff; color: var(--pma-navy); border-color: var(--pma-border); }
.pma-btn-secondary:hover { background: var(--pma-surface-alt); }
.pma-btn-danger { background: #fff; color: var(--pma-danger); border-color: var(--pma-danger); }
.pma-btn-danger:hover { background: var(--pma-danger); color: #fff; }

.pma-badge {
  display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.4rem;
  padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--pma-danger); color: #fff;
  font-size: 0.72rem; font-weight: 700; vertical-align: middle;
}
.pma-doc-upload { display: flex; gap: 0.6rem; align-items: center; margin-block-end: 1rem; flex-wrap: wrap; }
.pma-doc-upload input[type="file"] { font-size: 0.85rem; }

/* ============================================================
   VERIFICATION CHECKLIST (modules/licensing/verify.php)
   ============================================================ */
.pma-checklist-check { display: flex; align-items: center; gap: 0.5rem; }
.pma-checklist-check input[type="checkbox"] { inline-size: 1.05rem; block-size: 1.05rem; }
.pma-checklist-meta { display: block; font-size: 0.72rem; color: var(--pma-text-muted); margin-block-start: 0.15rem; }
.pma-checklist-file { font-size: 0.85rem; }
.pma-checklist-file .pma-note { display: block; margin: 0; }
.pma-checklist-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pma-checklist-file-list li { display: flex; align-items: center; gap: 0.4rem; }
.pma-btn-remove-file {
  border: none; background: none; color: var(--pma-danger); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0 0.15rem; font-weight: 700;
}
.pma-btn-remove-file:hover { text-decoration: underline; }
.pma-checklist-upload { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pma-checklist-upload input[type="file"] { font-size: 0.8rem; max-inline-size: 13rem; }

.pma-badge-muted { background: var(--pma-text-muted); }

/* ============================================================
   APPLICANT WORKFLOW (modules/licensing/applicant_workflow.php)
   ============================================================ */
.pma-workflow-search { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-block-end: 1rem; }
.pma-workflow-search input[type="text"] { min-inline-size: 20rem; max-inline-size: 100%; }
.pma-workflow-summary {
  background: var(--pma-surface-alt); border: 1px solid var(--pma-border); border-radius: var(--pma-radius);
  padding: 0.9rem 1.1rem; margin-block-end: 1.25rem; font-weight: 600;
}
.pma-workflow-boxes { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; margin-block: 1.5rem; padding-block-start: 0.75rem; }
.pma-workflow-box {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-inline-size: 160px; min-block-size: 92px; padding: 1.4rem 1rem 1rem;
  border: 2px solid var(--pma-border-strong); border-radius: var(--pma-radius);
  background: var(--pma-surface); text-decoration: none; color: var(--pma-navy); font-weight: 700;
  text-align: center; transition: box-shadow 0.15s ease, transform 0.15s ease; font-size: 0.92rem;
}
.pma-workflow-box:hover { box-shadow: var(--pma-shadow-md); transform: translateY(-2px); }
.pma-workflow-icon {
  position: absolute; inset-block-start: -15px; inset-inline-start: 50%; transform: translateX(-50%);
  inline-size: 30px; block-size: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; font-weight: 700; border: 3px solid var(--pma-surface); box-shadow: var(--pma-shadow-sm);
}
.pma-workflow-check { border-color: var(--pma-success); }
.pma-workflow-check .pma-workflow-icon { background: var(--pma-success); }
.pma-workflow-attention { border-color: var(--pma-warning); }
.pma-workflow-attention .pma-workflow-icon { background: var(--pma-warning); }
.pma-workflow-reject { border-color: var(--pma-danger); }
.pma-workflow-reject .pma-workflow-icon { background: var(--pma-danger); }
.pma-workflow-results-table td a { font-weight: 600; }

.pma-fee-voided { opacity: 0.6; }
.pma-fee-voided td { text-decoration: line-through; }
.pma-fee-voided td:last-child { text-decoration: none; } /* the Edit link stays clickable-looking */

.pma-checkbox-label {
  display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--pma-text);
  margin-block-end: 0.6rem;
}
.pma-checkbox-label input[type="checkbox"] { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--pma-gold); }
.pma-void-form { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--pma-border); }

/* ============================================================
   GOVERNORATES MAP
   ============================================================ */
.pma-map-central-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--pma-navy);
  color: #fff; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.86rem; font-weight: 700;
  margin-block: 0.75rem 1.5rem; box-shadow: var(--pma-shadow-sm);
}
.pma-map-central-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--pma-gold); flex-shrink: 0; }

/* Real governorate boundaries (see includes/syria_map_data.php). The SVG paths carry no
   text of their own — office names/counts render in the plain-HTML tooltip and name labels
   below, never as SVG <text> — because a forced-dark-mode browser can repaint SVG fill/
   stroke inconsistently versus ordinary text/background pairs (the exact bug that made the
   previous tile-grid map unreadable on some devices).
   The map's coordinates are real lon/lat projected to SVG space, so the `d` path data itself
   is never mirrored by page direction. But `direction: ltr` on the wrap IS required: the
   name/tooltip overlays are ordinary HTML positioned with inset-inline-start, a logical
   property that resolves from the opposite edge under an Arabic (RTL) page and drifts the
   labels away from the shapes they belong to. Pinning the wrap to ltr keeps every logical
   property inside it physical-left, matching the untouched geography — Arabic text inside
   the labels still shapes and reads correctly, since direction only affects layout/ordering,
   not glyph shaping. This is the opposite call from the sidebar above: the sidebar is real UI
   chrome that should mirror with the page, the map is geographic content that must not.
   position:relative on the wrap is what lets the tooltip and name labels sit above the SVG
   using plain percentage-based positioning (computed server-side in PHP), no JS layout math. */
.pma-geomap-wrap { position: relative; max-width: 640px; margin-inline: auto; direction: ltr; }
.pma-geomap-svg { display: block; inline-size: 100%; block-size: auto; }

.pma-geomap-shape {
  fill: var(--pma-surface-alt, #F8FAFC); stroke: #fff; stroke-width: 0.6;
}
.pma-geomap-shape-disabled { fill: #E2E3E5; opacity: 0.7; }
.pma-geomap-shape-open { fill: var(--pma-map-fill, #c9d3ea); cursor: pointer; }
.pma-geomap-shape-own { fill: var(--pma-gold, #E8A020); stroke: var(--pma-navy, #1E2A3A); stroke-width: 1; }

a:has(> .pma-geomap-shape-open):hover .pma-geomap-shape-open,
a:has(> .pma-geomap-shape-open):focus-visible .pma-geomap-shape-open { fill: var(--pma-navy, #1E2A3A); }
a:has(> .pma-geomap-shape-own):hover .pma-geomap-shape-own,
a:has(> .pma-geomap-shape-own):focus-visible .pma-geomap-shape-own { fill: var(--pma-gold-dark, #B87A10); }
a:focus-visible { outline: 2px solid var(--pma-navy, #1E2A3A); outline-offset: 2px; }

.pma-geomap-hit { fill: transparent; cursor: pointer; }

.pma-geomap-own-label {
  position: absolute; transform: translate(-50%, -130%); pointer-events: none;
  background: var(--pma-navy, #1E2A3A); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; box-shadow: var(--pma-shadow-sm);
  z-index: 4;
}

/* Always-on name label for every other governorate, so names don't rely on hover/touch
   discovery. Opaque pill background keeps text readable regardless of the shape's fill
   color underneath (default pale, hover navy, disabled grey). */
.pma-geomap-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  background: rgba(255, 255, 255, 0.9); color: var(--pma-navy-dark, #131D28);
  font-size: 0.62rem; font-weight: 600; line-height: 1.2;
  padding: 0.05rem 0.35rem; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
}

.pma-geomap-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--pma-navy-dark, #131D28); color: #fff; font-size: 0.78rem; font-weight: 600;
  padding: 0.35rem 0.6rem; border-radius: var(--pma-radius-sm); white-space: nowrap;
  box-shadow: var(--pma-shadow-md);
}

.pma-geomap-credit { margin-block-start: 0.5rem; font-size: 0.78rem; }
.pma-geomap-credit a { color: inherit; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pma-sidebar { transform: translateX(-100%); transition: transform .2s; }
  html[dir="rtl"] .pma-sidebar { transform: translateX(100%); }
  /* html[dir="rtl"] .pma-sidebar above has higher specificity than a plain .open class rule
     (one extra type selector), so the open state needs to be repeated with the same "html[dir]"
     prefix on both branches - otherwise .open would silently lose to the RTL closed-state rule
     and the sidebar would never actually slide into view on a narrow Arabic screen. */
  .pma-sidebar.open, html[dir="rtl"] .pma-sidebar.open { transform: translateX(0); }
  .pma-main-content { margin-inline-start: 0; }
  .pma-grid-2, .pma-grid-3 { grid-template-columns: 1fr; }
  .pma-main { padding: 16px; }
  .pma-sidebar-toggle-btn { display: inline-flex !important; }

  /* The title is normally centered on the whole topbar via absolute
     positioning, which works fine on desktop (plenty of room beside the
     sidebar) but overlaps the hamburger on a narrow mobile topbar. Drop it
     back into normal flow instead, truncated with an ellipsis rather than
     wrapping into the actions on the right. */
  .pma-topbar { padding: 0 12px; gap: 8px; }
  .pma-topbar-title {
    position: static;
    transform: none;
    left: auto; top: auto;
    flex: 1;
    min-width: 0;
    max-width: none;
    font-size: 1rem;
    text-align: start;
  }
}

@media (max-width: 640px) {
  .pma-form fieldset { padding: 1.25rem 1.1rem; }
}

/* ============================================================
   PRINTABLE CARDS (modules/licensing/worker_undertaking_view.php)
   ============================================================ */
.pma-print-card {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--pma-border);
  border-radius: 8px;
  padding: 2rem 2.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
.pma-print-letterhead td { vertical-align: top; padding-bottom: 0.75rem; }
.pma-print-letterhead { width: 100%; border-bottom: 2px solid var(--pma-navy); margin-bottom: 0.75rem; }
.pma-print-emblem { height: 72px; width: auto; }
.pma-print-title { text-align: center; margin: 0.75rem 0 1.25rem; font-size: 1.15rem; }
.pma-print-fields { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.pma-print-fields td { border-bottom: 1px dotted var(--pma-border); padding: 0.4rem 0.35rem; }
.pma-print-label { color: var(--pma-text-muted); white-space: nowrap; font-size: 0.85rem; }
.pma-print-value { font-weight: 600; min-width: 90px; }
.pma-print-subhead { font-weight: 700; margin: 1.1rem 0 0.5rem; }
.pma-print-pledge { white-space: pre-line; margin: 1.25rem 0; text-align: justify; }
.pma-print-signatures { width: 100%; margin: 1.5rem 0; }
.pma-print-signatures td { width: 50%; padding: 0.5rem 0.25rem; }
.pma-print-issued { text-align: center; font-weight: 600; margin: 1.25rem 0; }

@media print {
  .pma-sidebar, .pma-sidebar-backdrop, .pma-topbar, .pma-footer, .pma-no-print { display: none !important; }
  .pma-main-content { margin-inline-start: 0 !important; }
  .pma-main { padding: 0 !important; }
  .pma-print-card { border: none; box-shadow: none; padding: 0; max-width: none; }
  body { background: #fff !important; }
}