/* =========================
   Global Design System v2
   Two enterprise themes: classic + modern
   Scope: visual layer only (no business logic impact)
   ========================= */

/* The Persian "B-series" fonts (BYekan,
BNazanin,
BMitra) define
   PERSIAN glyphs for the ASCII digit codepoints U+0030..U+0039 —
   typing "5" in an input shows "۵" visually even though the DOM
   carries the Latin character. To override that we declare a tiny
   helper family "GhaemiLatinDigits" that resolves ONLY for the
   ASCII digit codepoints via system fallback fonts (Tahoma,
Arial,
Segoe UI). We then PREPEND that helper family to every font
   stack used in the app (--font-base,
--font-mono,
the doc/sheet
   fonts),
so the browser walks the chain like this for each char:
     • U+0030..U+0039  → GhaemiLatinDigits  → Tahoma  (Latin glyph)
     • U+0600..U+06FF  → skipped (unicode-range mismatch)
                        → GhaemiUIFont       → BYekan (Persian glyph)
     • U+0041..U+005A  → skipped (range mismatch)
                        → GhaemiUIFont       → BYekan (Latin letter)
   Same-family + unicode-range was tried first; that approach
   fails because the CSS cascade gives the LATER declaration with
   matching range precedence,
so the broad BYekan declaration kept
   winning. Using a SEPARATE family + chain prepend is the only
   reliable form.
 */
/* Inter — modern UI typeface (MIT licensed,
by Rasmus Andersson).
   Provides professional Latin + Cyrillic glyphs. We use it as the
   foundation of the Russian-mode font stack so Russian text reads
   the way it does on every major modern web product,
not like
   Persian script rendered with a Cyrillic fallback. */
@font-face {
  font-family: "GhaemiInter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GhaemiInter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  /* `optional` = if the font isn't already cached when the page
     paints, skip it on this view and use the fallback. Eliminates
     the late-arriving swap that makes a Russian page "flicker"
     mid-load. Subsequent views hit the SW cache and get Inter. */
  font-display: optional;
}
@font-face {
  font-family: "GhaemiInter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "GhaemiLatinDigits";
  /* Inter ships REAL Latin glyphs for ASCII digit codepoints
     (BYekan / BNazanin / BMitra substitute Persian glyphs for the
     same codepoints — exactly the behaviour we're cancelling).
     Self-hosted woff2 so we don't depend on `local()` lookups
     which some browsers (Chrome Incognito with the reduced Font
     Access API) reject. */
  src: url("/fonts/Inter-Regular.woff2") format("woff2"),
       local("Tahoma"), local("Arial"), local("Segoe UI"),
       local("Helvetica Neue"), local("DejaVu Sans"),
       local("Liberation Sans");
  unicode-range: U+0030-0039;
  font-display: swap;
}

@font-face {
  font-family: "GhaemiUIFont";
  src: url("/fonts/BYekan.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GhaemiDocFont";
  src: url("/fonts/BNazanin.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GhaemiSheetFont";
  src: url("/fonts/BMitra.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Russian viewers only — replace the Persian font stack with a
   pure-Cyrillic/Latin chain anchored on Inter. The Persian fonts
   stay as a tail-end fallback so any rare leftover Persian-script
   character (e.g. an untranslated word from the lazy-translation
   pipeline) still renders correctly instead of falling to a
   square box. GhaemiLatinDigits sits at the very front so ASCII
   digits route through Inter's Latin glyphs.
   Persian viewers don't match :lang(ru) — they see their original
   font stack unchanged. */
:root:lang(ru) {
  --font-base: "GhaemiLatinDigits", "GhaemiInter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "GhaemiUIFont", sans-serif;
  --font-mono: "GhaemiLatinDigits", "Consolas", "Courier New", "GhaemiInter", monospace;
}

/* Explicit custom chains that don't expand from --font-base also
   need the Russian font stack in lang=ru mode. Keep this list in
   sync with any inline font-family declarations in this file. */
/* All the global selectors that bake "GhaemiSheetFont",
"GhaemiDocFont",
var(--font-base) into their font-family need
   the Russian stack too — putting BMitra at the front (the
   default) lets BMitra claim ASCII digit codepoints with its
   Persian-shape glyphs,
completely undoing the digit fix. List
   mirrors line ~499 in this file. */
:lang(ru) body,
:lang(ru) .navbar,
:lang(ru) .dropdown-menu,
:lang(ru) .dropdown-item,
:lang(ru) .btn,
:lang(ru) .form-control,
:lang(ru) .form-select,
:lang(ru) .table {
  font-family: "GhaemiLatinDigits", "GhaemiInter", "Segoe UI", "Roboto", "GhaemiSheetFont", "GhaemiDocFont", "GhaemiUIFont", sans-serif;
}
:lang(ru) .table,
:lang(ru) .org-form-palette {
  font-family: "GhaemiLatinDigits", "GhaemiInter", "Segoe UI", "Roboto", "GhaemiSheetFont", "GhaemiDocFont", var(--font-base);
}
:lang(ru) .equipment-report-print-body {
  font-family: "GhaemiLatinDigits", "GhaemiInter", "Segoe UI", "Roboto", "GhaemiUIFont", Vazirmatn, IRANSansX, Tahoma, sans-serif;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

:root,
html[data-theme="classic"] {
  /* Default digit font = GhaemiUIFont, so ASCII digits inherit the
     Persian font's glyphs (Persian-script numerals). Russian
     viewers override this to "GhaemiLatinDigits" via the rule
     below — same chain position, different family, Latin glyphs. */
  --font-base: "GhaemiUIFont", Tahoma, "Segoe UI", sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;
  --text-xs: .78rem;
  --text-sm: .9rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.45rem;

  --line-normal: 1.9;
  --line-tight: 1.35;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;

  --radius-sm: .45rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, .08);
  --shadow-2: 0 8px 22px rgba(15, 23, 42, .1);
  --shadow-3: 0 18px 42px rgba(15, 23, 42, .14);

  --bg: #f1f5f9;
  --bg-gradient: radial-gradient(1200px 480px at 92% -10%, rgba(37, 99, 235, .12), transparent 55%);
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --text: #1e293b;
  --text-soft: #475569;
  --text-inverse: #ffffff;
  --border: #e2e8f0;

  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: #dbeafe;
  --ok: #16a34a;
  --warn: #f59e0b;
  --danger: #dc2626;
  --info: #0ea5e9;

  --nav-bg: rgba(255, 255, 255, .96);
  --nav-link: #1e293b;
  --nav-link-hover-bg: #f1f5f9;
  --nav-link-active: #2563eb;
  --nav-link-active-bg: transparent;

  --table-head: #e2e8f0;
  --table-row: #ffffff;
  --table-row-alt: #f8fafc;
  --table-row-hover: #f8fafc;

  --focus: 0 0 0 .2rem rgba(29, 78, 216, .3);
  --duration-fast: .16s;
  --duration-mid: .24s;
  --duration-slow: .38s;
  --easing: cubic-bezier(.2,.65,.2,1);
}

html[data-theme="modern"] {
  --font-base: "GhaemiUIFont", Tahoma, "Segoe UI", sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;
  --text-xs: .78rem;
  --text-sm: .9rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.45rem;

  --line-normal: 1.9;
  --line-tight: 1.35;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;

  --radius-sm: .45rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(2, 6, 23, .42);
  --shadow-2: 0 10px 24px rgba(2, 6, 23, .48);
  --shadow-3: 0 20px 50px rgba(2, 6, 23, .58);

  --bg: #0b1220;
  --bg-gradient: radial-gradient(1300px 550px at 90% -10%, rgba(37, 99, 235, .16), transparent 58%);
  --surface-1: #111827;
  --surface-2: #1f2937;
  --surface-3: #111827;
  --text: #e5e7eb;
  --text-soft: #94a3b8;
  --text-inverse: #0b1220;
  --border: #334155;

  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: #1e3a8a;
  --ok: #16a34a;
  --warn: #fbbf24;
  --danger: #dc2626;
  --info: #0ea5e9;

  --nav-bg: rgba(17, 24, 39, .94);
  --nav-link: #e5e7eb;
  --nav-link-hover-bg: #1f2937;
  --nav-link-active: #60a5fa;
  --nav-link-active-bg: transparent;

  --table-head: #1f2937;
  --table-row: #111827;
  --table-row-alt: #0f172a;
  --table-row-hover: #1f2937;

  --focus: 0 0 0 .2rem rgba(59, 130, 246, .35);
  --duration-fast: .16s;
  --duration-mid: .24s;
  --duration-slow: .38s;
  --easing: cubic-bezier(.2,.65,.2,1);
}

* { box-sizing: border-box; }

body {
  margin-bottom: 64px;
  min-height: 100vh;
  min-height: var(--app-viewport-height);
  width: 100%;
  max-width: 100%;
  padding-bottom: calc(52px + var(--app-safe-bottom));
  font-family: "GhaemiLatinDigits", "GhaemiSheetFont", "GhaemiDocFont", var(--font-base);
  font-size: var(--text-md);
  line-height: var(--line-normal);
  color: var(--text);
  background: var(--bg-gradient), var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  letter-spacing: .01rem;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.personnel-messages-page .message-compose-card,
.personnel-messages-page .card {
  border-radius: 18px;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-list__item {
  display: block;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.message-list__item:hover,
.message-list__item.is-active {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.message-list__header,
.message-list__meta,
.message-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.org-form-canvas-header--selected {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.org-brand-header {
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(14, 165, 233, 0.04)),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
}

.org-brand-header__grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.org-brand-header__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 96px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.org-brand-header__logo img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.org-brand-header__company {
  font-size: .9rem;
  color: var(--text-soft);
}

.org-brand-header__title {
  margin: 6px 0 8px;
  font-size: clamp(1.25rem, 1.6vw, 1.65rem);
  line-height: 1.35;
}

.org-brand-header__subtitle,
.org-brand-header__note {
  color: var(--text-soft);
  line-height: 1.8;
}

.org-brand-header__note {
  margin-top: 8px;
}

.procurement-editor-shell .org-form-runtime-shell .org-form-field--repeater .org-form-repeater__table th,
.procurement-editor-shell .org-form-runtime-shell .org-form-field--repeater .org-form-repeater__table td {
  vertical-align: top;
}

.procurement-editor-shell .org-form-runtime-shell .org-form-repeater__table th {
  background: rgba(226, 232, 240, 0.75);
  font-size: .86rem;
  white-space: normal;
}

.procurement-editor-shell .org-form-runtime-shell .org-form-repeater__table td {
  min-width: 120px;
}

.leave-mission-shell .card {
  border-radius: 22px;
  overflow: hidden;
}

.leave-mission-shell .card-header {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.03));
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

@media (max-width: 768px) {
  .org-brand-header__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
  justify-content: space-between;
  gap: 12px;
}

.message-list__header strong,
.message-view__header h4 {
  margin: 0;
  font-size: 1rem;
}

.message-list__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 700;
}

.message-list__meta {
  margin-top: 8px;
  color: var(--muted-text);
  font-size: 0.86rem;
}

.message-list__item p {
  margin: 10px 0 0;
  color: var(--muted-text);
  line-height: 1.8;
}

.message-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.message-view__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.message-view__body {
  min-height: 220px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(148, 163, 184, 0.08);
  line-height: 2;
  color: var(--text-color);
}

body,
.navbar,
.dropdown-menu,
.dropdown-item,
.btn,
.form-control,
.form-select,
.table {
  font-family: "GhaemiLatinDigits", "GhaemiSheetFont", "GhaemiDocFont", var(--font-base);
}

input,
button,
select,
textarea,
option {
  font: inherit;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font: inherit;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: -120px;
  left: 12px;
  z-index: 2000;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-inverse);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: top var(--duration-fast) var(--easing);
}

.skip-link:focus {
  top: 12px;
  color: var(--text-inverse);
}

main { animation: pageIn var(--duration-slow) var(--easing); }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--line-tight);
  color: var(--text);
}

a {
  color: var(--brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

a:hover { color: var(--brand-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--focus) !important;
  outline: none;
}

/* Navigation */
.app-fixed-nav {
  z-index: 1030;
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-main-wrapper { padding-top: 90px; }

.app-brand {
  max-width: 280px;
  color: var(--nav-link) !important;
  font-weight: 800;
  letter-spacing: .2px;
}

.app-brand-logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 200px;
  object-fit: contain;
}

.navbar .navbar-brand,
.navbar .nav-link { color: var(--nav-link) !important; }

.navbar .nav-link {
  border-radius: .45rem;
  padding: .4rem .52rem;
  font-size: .82rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing);
}

.app-fixed-nav .navbar-toggler {
  border-color: var(--border);
  color: var(--nav-link);
  background-color: var(--surface-1);
  padding: .45rem .72rem;
  line-height: 1;
  border-radius: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  box-shadow: var(--shadow-1);
}

.app-fixed-nav .navbar-toggler:hover,
.app-fixed-nav .navbar-toggler:focus {
  border-color: var(--brand);
}

.app-fixed-nav .navbar-toggler-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: .72rem;
  background-color: rgba(37, 99, 235, .12);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3crect x='4' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%231e293b' stroke-width='1.8'/%3e%3crect x='14' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%231e293b' stroke-width='1.8'/%3e%3crect x='4' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%231e293b' stroke-width='1.8'/%3e%3crect x='14' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%231e293b' stroke-width='1.8'/%3e%3c/svg%3e");
}

.navbar-toggler-label {
  font-size: .82rem;
  font-weight: 800;
  color: var(--nav-link);
}

html[data-theme="modern"] .app-fixed-nav .navbar-toggler-icon {
  background-color: rgba(96, 165, 250, .16);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3crect x='4' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%23e5e7eb' stroke-width='1.8'/%3e%3crect x='14' y='4' width='6' height='6' rx='1.5' fill='none' stroke='%23e5e7eb' stroke-width='1.8'/%3e%3crect x='4' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%23e5e7eb' stroke-width='1.8'/%3e%3crect x='14' y='14' width='6' height='6' rx='1.5' fill='none' stroke='%23e5e7eb' stroke-width='1.8'/%3e%3c/svg%3e");
}

.app-fixed-nav .container-fluid {
  flex-wrap: nowrap;
  align-items: center;
  gap: .3rem;
}

@media (min-width: 1200px) {
  .app-fixed-nav .navbar-toggler {
    display: none !important;
  }

  .app-fixed-nav .navbar-collapse {
    flex-wrap: nowrap;
    overflow: visible;
  }

  .app-fixed-nav .navbar-collapse .navbar-nav {
    flex-wrap: nowrap;
  }

  .app-fixed-nav .nav-utility-cluster {
    margin-inline-start: auto;
  }
}

.app-fixed-nav .navbar-nav {
  column-gap: .1rem;
}

.nav-compact-form .btn {
  padding: .26rem .5rem;
  font-size: .76rem;
  line-height: 1.15;
}

.nav-toggle-form {
  margin-bottom: 0;
}

.nav-toggle-btn {
  min-width: 84px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  border-radius: .85rem;
}

.nav-toggle-btn--utility {
  min-height: 2.55rem;
  padding-inline: .8rem;
  box-shadow: var(--shadow-1);
}

.nav-utility-cluster {
  min-width: 0;
  flex-wrap: nowrap;
}

.nav-utility-cluster form {
  margin: 0;
}

.nav-toggle-btn__icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.nav-toggle-btn__icon svg {
  width: 1rem;
  height: 1rem;
}

.nav-btn-group {
  white-space: nowrap;
}

.nav-toggle-btn .toggle-icon {
  font-size: .88rem;
  line-height: 1;
}

.nav-toggle-btn .label-short {
  display: none;
}

.theme-switch-container .btn.active {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--text-inverse);
}

.navbar .nav-link:hover {
  background-color: var(--nav-link-hover-bg);
  transform: translateY(-1px);
}

.navbar .nav-link.active {
  color: var(--nav-link-active) !important;
  background-color: var(--nav-link-active-bg);
  border-bottom-color: var(--nav-link-active);
  font-weight: 800;
}

.dropdown-menu {
  min-width: 14rem;
  padding: .45rem;
}

.app-fixed-nav .dropdown-menu {
  margin-top: .55rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-2);
}

.dropdown-item {
  border-radius: .55rem;
  padding: .52rem .72rem;
  font-size: .88rem;
  color: var(--text);
  transition: background-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-2);
  color: var(--brand);
}

.theme-label { color: var(--nav-link); font-weight: 700; }

.theme-switch-container .form-select,
.app-fixed-nav .form-select {
  border-color: var(--border);
  background-color: var(--surface-1);
  color: var(--text);
  border-radius: var(--radius-sm);
}

/* Surfaces */
.card,
.accordion-item,
.modal-content,
.dropdown-menu {
  background-color: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.card {
  transition: transform var(--duration-mid) var(--easing), box-shadow var(--duration-mid) var(--easing);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
}

.card-header,
.accordion-button,
.modal-header,
.dropdown-header {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.accordion-button:not(.collapsed) {
  background-color: var(--brand-soft);
  color: var(--text);
}

/* Forms */
.form-control,
.form-select,
.input-group-text {
  background-color: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing);
}

.form-control::placeholder { color: var(--text-soft); opacity: .9; }
.form-text,
.text-muted,
small { color: var(--text-soft) !important; }

/* Buttons */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .1px;
  transition: transform var(--duration-fast) var(--easing), filter var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.btn:active { transform: translateY(0); }

.btn-primary { background-color: var(--brand); border-color: var(--brand); color: var(--text-inverse); }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-inverse); }

.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover,
.btn-outline-primary:focus { background-color: var(--brand); border-color: var(--brand); color: var(--text-inverse); }

.btn-success { background-color: var(--ok); border-color: var(--ok); }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-warning { background-color: #64748b; border-color: #64748b; color: #fff; }
.btn-info { background-color: var(--info); border-color: var(--info); color: #081018; }

.btn-secondary {
  background-color: #64748b;
  border-color: #64748b;
  color: #fff;
}

/* Tables */
.table {
  color: var(--text);
  border-color: var(--border);
  background-color: var(--table-row);
  --bs-table-bg: var(--table-row);
  --bs-table-striped-bg: var(--table-row-alt);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--table-row-hover);
  --bs-table-hover-color: var(--text);
}

.table th,
.table td {
  border-color: var(--border);
  vertical-align: middle;
  line-height: 1.55;
  padding: 14px 16px;
  transition: background-color .2s ease, color .2s ease;
}

.table thead th {
  background-color: var(--table-head);
  color: var(--text);
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody tr:hover td {
  background-color: var(--table-row-hover);
}

.table-responsive {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-professional {
  margin-bottom: 0;
}

.table-professional thead th {
  font-size: var(--text-sm);
  letter-spacing: .1px;
}

.compact-table {
  max-height: min(64vh, 760px);
}

.page-toolbar {
  padding: .5rem 0;
  margin-bottom: 20px;
}

.filters-card,
.section-card,
.report-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  padding: 24px;
  margin-bottom: 32px;
}

/* Inside the page shell the grid `gap` already spaces the sections; the legacy
   margin-bottom (plus Bootstrap's .mb-4) stacked on top of it and left a gutter
   twice as tall between every report. */
.zd-page > .report-section { margin-bottom: 0; }


.action-cell {
  white-space: nowrap;
}

.action-cell .btn {
  margin-inline-end: .35rem;
  margin-bottom: .25rem;
}

.action-cell form {
  display: inline-block;
  margin: 0;
}

.home-hero {
  background: linear-gradient(140deg, var(--surface-2), var(--surface-1)) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.announcement-board {
  display: grid;
  gap: 1rem;
}

.announcement-board__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.announcement-board__actions,
.announcement-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.announcement-board__title {
  margin: 0;
  font-size: clamp(1.2rem, 1.4vw, 1.65rem);
}

.announcement-board__subtitle {
  color: var(--text-soft);
  max-width: 52rem;
}

.announcement-feed {
  display: grid;
  gap: 1rem;
}

.announcement-empty {
  padding: 2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-1);
  text-align: center;
}

.announcement-empty__title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: .35rem;
}

.announcement-empty__text {
  color: var(--text-soft);
}

.announcement-card {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) + 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.98)),
    var(--surface-1);
  box-shadow: var(--shadow-1);
}

html[data-theme="modern"] .announcement-card {
  background:
    linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.98)),
    var(--surface-1);
}

.announcement-card__meta {
  margin-bottom: .9rem;
}

.announcement-card__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}

.announcement-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .8rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.announcement-chip--pinned {
  background: #fef3c7;
  color: #92400e;
}

.announcement-chip--date {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-soft);
}

.announcement-card__body {
  display: grid;
  gap: 1.15rem;
}

.announcement-card--with-media .announcement-card__body {
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  align-items: start;
}

.announcement-card__media {
  min-width: 0;
}

.announcement-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-md) + 2px);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.announcement-card__content {
  min-width: 0;
  display: grid;
  gap: .85rem;
}

.announcement-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
}

.announcement-card__title {
  margin: 0;
  font-size: clamp(1.05rem, 1vw, 1.45rem);
  line-height: 1.65;
}

.announcement-card__text {
  color: var(--text);
  line-height: 2.1;
  white-space: pre-line;
  font-size: .98rem;
}

.announcement-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}

.announcement-card__update {
  color: var(--text-soft);
  font-size: .85rem;
}

.announcement-filters {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-1);
}

.announcement-filters__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(12rem, 1fr));
  gap: .9rem;
  align-items: end;
}

.announcement-filters__field {
  min-width: 0;
}

.announcement-filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.8rem;
  padding: .75rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  font-weight: 700;
}

.announcement-filters__toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.announcement-filters__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.announcement-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.announcement-results-bar__count {
  color: var(--text-soft);
  font-size: .95rem;
  font-weight: 700;
}

.announcement-card__text--clamped,
.announcement-timeline__text--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
}

.announcement-card__text--full {
  white-space: pre-line;
}

.announcement-card__footer-meta,
.announcement-card__footer-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.announcement-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.announcement-pagination__pages {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.announcement-pagination__link,
.announcement-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.announcement-pagination__page.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.announcement-pagination__link:hover,
.announcement-pagination__page:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.announcement-pagination__link.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.checklist-shell {
  display: grid;
  gap: 1rem;
}

.checklist-shell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.checklist-shell__title {
  margin: 0;
  font-size: clamp(1.2rem, 1.2vw, 1.55rem);
}

.checklist-shell__subtitle {
  margin: .35rem 0 0;
  color: var(--text-soft);
  max-width: 56rem;
}

.checklist-shell__person {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}

.checklist-empty-state,
.checklist-admin-person {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-1);
}

.checklist-empty-state__title {
  font-weight: 700;
}

.checklist-grid {
  display: grid;
  gap: 1rem;
}

.checklist-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) + 2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.99)),
    var(--surface-1);
  box-shadow: var(--shadow-1);
}

html[data-theme="modern"] .checklist-card {
  background:
    linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.98)),
    var(--surface-1);
}

.checklist-card__header,
.checklist-file-row,
.checklist-upload-form__controls,
.checklist-card__meta,
.checklist-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.checklist-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.checklist-card__description {
  margin: .35rem 0 0;
  color: var(--text-soft);
}

.checklist-card__meta {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
  color: var(--text-soft);
  font-size: .86rem;
}

.checklist-files {
  display: grid;
  gap: .75rem;
  margin-top: .95rem;
}

.checklist-files__empty {
  padding: .95rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--surface-2);
}

.checklist-file-row {
  padding: .85rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.checklist-file-row__info {
  min-width: 0;
}

.checklist-file-row__name {
  font-weight: 700;
  word-break: break-word;
}

.checklist-file-row__time {
  margin-top: .2rem;
  color: var(--text-soft);
  font-size: .84rem;
}

.checklist-file-row__actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.checklist-card__forms {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

.checklist-upload-form,
.checklist-finalize-form {
  padding: .95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.checklist-upload-form .form-text {
  margin-top: .45rem;
}

.file-picker {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  flex: 1 1 320px;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.file-picker__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: .1px;
  height: .1px;
}

.file-picker__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  margin: 0;
  padding: .55rem .95rem;
  border-radius: .7rem;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.file-picker__text {
  min-width: 0;
  color: var(--text-soft);
  font-size: .9rem;
  word-break: break-word;
}

.checklist-portal-shell {
  width: min(100%, 1680px);
  margin-inline: auto;
}

.checklist-portal {
  display: grid;
  gap: 1rem;
}

.checklist-portal__header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  background: linear-gradient(180deg, color-mix(in srgb,var(--surface-2) 84%,#fff), var(--surface-1));
  box-shadow: var(--shadow-1);
}

.checklist-portal__title {
  margin: 0;
  font-size: clamp(1.2rem, 1.1vw, 1.55rem);
  font-weight: 800;
}

.checklist-portal__subtitle {
  margin: .35rem 0 0;
  max-width: 60rem;
  color: var(--text-soft);
  line-height: 1.75;
}

.checklist-portal__person {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}

.checklist-portal__summary {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: .75rem;
}

.checklist-portal__summary-card {
  min-width: 0;
  padding: .82rem .9rem;
  border: 1px solid color-mix(in srgb,var(--border) 90%,transparent);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, color-mix(in srgb,var(--surface-1) 98%,#fff), color-mix(in srgb,var(--surface-2) 78%,#fff));
  box-shadow: var(--shadow-1);
}

.checklist-portal__summary-card--progress {
  grid-column: span 2;
}

.checklist-portal__summary-label,
.checklist-portal__summary-hint,
.checklist-portal__toolbar-note,
.checklist-portal__item-meta,
.checklist-portal__file-time {
  color: var(--text-soft);
}

.checklist-portal__summary-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
}

.checklist-portal__summary-value {
  display: block;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.2;
}

.checklist-portal__summary-hint {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
}

.checklist-portal__progress {
  display: grid;
  gap: .55rem;
}

.checklist-portal__progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.checklist-portal__progress-label {
  font-size: .88rem;
  font-weight: 700;
}

.checklist-portal__progress-value {
  font-size: 1.25rem;
  font-weight: 800;
}

.checklist-portal__progress-bar {
  position: relative;
  overflow: hidden;
  block-size: .72rem;
  border-radius: 999px;
  background: color-mix(in srgb,var(--surface-2) 92%,transparent);
}

.checklist-portal__progress-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: var(--progress-width,0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb,var(--brand) 72%,#34d399));
}

.checklist-portal__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: color-mix(in srgb,var(--surface-1) 98%,#fff);
}

.checklist-portal__filters,
.checklist-portal__item-row,
.checklist-portal__item-top,
.checklist-portal__item-badges,
.checklist-portal__item-meta,
.checklist-portal__item-actions,
.checklist-portal__file-actions,
.checklist-portal__upload-controls {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.checklist-portal__filter {
  appearance: none;
  border: 1px solid color-mix(in srgb,var(--border) 92%,transparent);
  border-radius: 999px;
  background: color-mix(in srgb,var(--surface-2) 92%,transparent);
  color: var(--text-soft);
  padding: .44rem .78rem;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.checklist-portal__filter:hover {
  border-color: color-mix(in srgb,var(--brand) 28%,var(--border));
  color: var(--text);
}

.checklist-portal__filter.is-active {
  background: color-mix(in srgb,var(--brand) 10%,var(--surface-1));
  border-color: color-mix(in srgb,var(--brand) 30%,var(--border));
  color: var(--brand);
  box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--brand) 10%,transparent);
}

.checklist-portal__toolbar-note {
  font-size: .85rem;
}

.checklist-portal__list {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.checklist-portal__item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--border) 90%,transparent);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, color-mix(in srgb,var(--surface-1) 100%,#fff), color-mix(in srgb,var(--surface-2) 50%,#fff));
  box-shadow: var(--shadow-1);
}

.checklist-portal__item-head,
.checklist-portal__file {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: .8rem;
  align-items: center;
}

.checklist-portal__item-head {
  padding: .9rem 1rem;
  align-items: start;
}

.checklist-portal__item-main,
.checklist-portal__file-main {
  min-width: 0;
}

.checklist-portal__item-main {
  display: grid;
  gap: .42rem;
}

.checklist-portal__item-row {
  justify-content: space-between;
  align-items: start;
  gap: .6rem 1rem;
}

.checklist-portal__item-badges {
  justify-content: flex-end;
}

.checklist-portal__item-title {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.checklist-portal__item-desc {
  margin: 0;
  color: var(--text-soft);
  font-size: .84rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checklist-portal__item-meta {
  font-size: .8rem;
  gap: .35rem .5rem;
}

.checklist-portal__dot {
  inline-size: .24rem;
  block-size: .24rem;
  border-radius: 999px;
  background: currentColor;
  opacity: .42;
}

.checklist-portal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .32rem .62rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.checklist-portal__badge--required {
  background: rgba(239,68,68,.12);
  color: #b91c1c;
}

.checklist-portal__badge--optional {
  background: rgba(148,163,184,.14);
  color: #475569;
}

.checklist-portal__badge--status.is-complete {
  background: rgba(34,197,94,.14);
  color: #166534;
}

.checklist-portal__badge--status.is-pending {
  background: rgba(100,116,139,.14);
  color: #475569;
}

.checklist-portal__badge--status.is-pending-uploaded {
  background: rgba(245,158,11,.16);
  color: #92400e;
}

.checklist-portal__badge--files {
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
}

.checklist-portal__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 2.35rem;
  min-width: 9rem;
  padding: .45rem .82rem;
  border-radius: .85rem;
  font-size: .83rem;
  font-weight: 800;
  white-space: nowrap;
}

.checklist-portal__toggle svg {
  inline-size: .9rem;
  block-size: .9rem;
  transition: transform .2s ease;
}

.checklist-portal__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.checklist-portal__panel {
  border-top: 1px solid color-mix(in srgb,var(--border) 82%,transparent);
  background: color-mix(in srgb,var(--surface-2) 68%,transparent);
}

.checklist-portal__panel-inner {
  display: grid;
  gap: .8rem;
  padding: .85rem 1rem 1rem;
}

.checklist-portal__files {
  display: grid;
  gap: .55rem;
}

.checklist-portal__files.is-scrollable {
  max-block-size: 14rem;
  overflow: auto;
  padding-inline-end: .15rem;
}

.checklist-portal__empty,
.checklist-portal__filter-empty {
  padding: .85rem .95rem;
  border: 1px dashed color-mix(in srgb,var(--border) 88%,transparent);
  border-radius: 1rem;
  color: var(--text-soft);
  background: color-mix(in srgb,var(--surface-2) 88%,transparent);
}

.checklist-portal__file {
  padding: .72rem .8rem;
  border: 1px solid color-mix(in srgb,var(--border) 86%,transparent);
  border-radius: 1rem;
  background: color-mix(in srgb,var(--surface-1) 98%,#fff);
}

.checklist-portal__file-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.checklist-portal__file-time {
  margin-top: .18rem;
  font-size: .78rem;
}

.checklist-portal__upload,
.checklist-portal__finalize {
  padding: .8rem;
  border: 1px solid color-mix(in srgb,var(--border) 88%,transparent);
  border-radius: 1rem;
  background: color-mix(in srgb,var(--surface-1) 96%,#fff);
}

.checklist-portal__upload .form-text {
  margin-top: .45rem;
}

.checklist-portal .file-picker {
  flex: 1 1 16rem;
  min-height: 3rem;
  padding: .55rem .7rem;
  gap: .6rem;
}

.checklist-portal .file-picker__button {
  min-width: 7rem;
  padding: .52rem .82rem;
  border-radius: .8rem;
  font-size: .88rem;
}

.checklist-portal .file-picker__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
}

.checklist-portal .btn-sm {
  border-radius: .8rem;
  padding: .38rem .72rem;
}

.checklist-portal__filter-empty[hidden] {
  display: none !important;
}

@media (min-width: 1400px) {
  .checklist-portal__list {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .95rem;
  }

  .checklist-portal__item-head {
    padding: 1rem 1.05rem;
  }
}

html[data-theme="modern"] .checklist-portal__header,
html[data-theme="modern"] .checklist-portal__summary-card,
html[data-theme="modern"] .checklist-portal__toolbar,
html[data-theme="modern"] .checklist-portal__item,
html[data-theme="modern"] .checklist-portal__file,
html[data-theme="modern"] .checklist-portal__upload,
html[data-theme="modern"] .checklist-portal__finalize {
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(17,24,39,.98));
  border-color: rgba(148,163,184,.16);
}

html[data-theme="modern"] .checklist-portal__panel {
  background: rgba(15,23,42,.42);
}

html[data-theme="modern"] .checklist-portal__empty,
html[data-theme="modern"] .checklist-portal__filter-empty {
  background: rgba(15,23,42,.65);
  border-color: rgba(148,163,184,.16);
}

html[data-theme="modern"] .checklist-portal__badge--optional {
  background: rgba(148,163,184,.16);
  color: #cbd5e1;
}

html[data-theme="modern"] .checklist-portal__badge--status.is-pending {
  background: rgba(100,116,139,.18);
  color: #e2e8f0;
}

html[data-theme="modern"] .checklist-portal__badge--files {
  color: #93c5fd;
}

@media (max-width: 991.98px) {
  .checklist-portal-shell {
    width: 100%;
  }

  .checklist-portal__list {
    grid-template-columns: 1fr;
  }

  .checklist-portal__summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .checklist-portal__summary-card--progress {
    grid-column: 1 / -1;
  }
}

details.card > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  /* Flex, so the +/− sits on the end edge of the header the way .zd-surface's
     chevron does. It used to be floated, which put it hard against the title —
     fine in a narrow card, but on a wide header it read as part of the text
     ("−گزارش تردد روزانه"). */
  display: flex;
  align-items: center;
  gap: .75rem;
}

details.card > summary::-webkit-details-marker {
  display: none;
}

details.card > summary::after {
  content: "+";
  font-weight: 800;
  margin-inline-start: auto;
  opacity: .65;
}

details.card[open] > summary::after {
  content: "−";
}

/* Alerts + badges */
.alert {
  border-radius: var(--radius-sm);
  border-width: 1px;
}

.badge {
  border-radius: var(--radius-pill);
  font-weight: 700;
  padding: .35rem .7rem;
  font-size: .78rem;
}

.badge-status-active {
  background: #dcfce7;
  color: #166534;
}

.badge-status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Bootstrap 5.3 utility polyfill ─────────────────────────────────
   The site ships Bootstrap 5.1.0,
but many views use the 5.3-only
   text-bg-*,
bg-*-subtle,
text-*-emphasis and border-*-subtle
   utilities,
which otherwise render invisible (e.g. blank status
   badges). Values mirror Bootstrap 5.3 defaults. */
.text-bg-primary { color: #fff !important; background-color: #0d6efd !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success { color: #fff !important; background-color: #198754 !important; }
.text-bg-danger { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-warning { color: #000 !important; background-color: #ffc107 !important; }
.text-bg-info { color: #000 !important; background-color: #0dcaf0 !important; }
.text-bg-light { color: #000 !important; background-color: #f8f9fa !important; }
.text-bg-dark { color: #fff !important; background-color: #212529 !important; }

.bg-primary-subtle { background-color: #cfe2ff !important; }
.bg-secondary-subtle { background-color: #e2e3e5 !important; }
.bg-success-subtle { background-color: #d1e7dd !important; }
.bg-danger-subtle { background-color: #f8d7da !important; }
.bg-warning-subtle { background-color: #fff3cd !important; }
.bg-info-subtle { background-color: #cff4fc !important; }
.bg-light-subtle { background-color: #fcfcfd !important; }
.bg-dark-subtle { background-color: #ced4da !important; }

.text-primary-emphasis { color: #052c65 !important; }
.text-secondary-emphasis { color: #2b2f32 !important; }
.text-success-emphasis { color: #0a3622 !important; }
.text-danger-emphasis { color: #58151c !important; }
.text-warning-emphasis { color: #664d03 !important; }
.text-info-emphasis { color: #055160 !important; }
.text-light-emphasis { color: #495057 !important; }
.text-dark-emphasis { color: #495057 !important; }

.border-primary-subtle { border-color: #9ec5fe !important; }
.border-secondary-subtle { border-color: #c4c8cb !important; }
.border-success-subtle { border-color: #a3cfbb !important; }
.border-danger-subtle { border-color: #f1aeb5 !important; }
.border-warning-subtle { border-color: #ffe69c !important; }
.border-info-subtle { border-color: #9eeaf9 !important; }
.border-light-subtle { border-color: #e9ecef !important; }
.border-dark-subtle { border-color: #adb5bd !important; }

/* Footer */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1025;
  background-color: var(--surface-1);
  border-top: 1px solid var(--border) !important;
  color: var(--text-soft) !important;
  direction: ltr;
  text-align: left;
}

.footer .container {
  max-width: none;
  padding-left: 88px;
  padding-right: 16px;
  text-align: left;
}

.container.app-main-wrapper main > .card,
.container.app-main-wrapper main > .filters-card,
.container.app-main-wrapper main > .section-card,
.container.app-main-wrapper main > .report-section {
  margin-bottom: 32px;
}

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: var(--shadow-2);
  z-index: 1040;
  transition: transform var(--duration-fast) var(--easing), filter var(--duration-fast) var(--easing);
}

.whatsapp-fab:hover { transform: translateY(-2px); filter: brightness(1.05); }
.whatsapp-fab svg { width: 24px; height: 24px; }

/* RTL precision */
html[dir="rtl"] body,
html[dir="rtl"] .form-label,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .card,
html[dir="rtl"] .accordion-button {
  text-align: right;
}

html[dir="rtl"] .navbar .nav-link {
  text-align: center;
}

/* Mobile CTA availability */
.sticky-mobile-cta {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  box-shadow: var(--shadow-2);
}

/* Personnel accordion helpers */
.accordion-button .group-count-badge {
  margin-inline-start: auto;
  min-width: 2.2rem;
  text-align: center;
}

.personnel-accordion .accordion-button::after { display: none !important; }
.personnel-accordion .accordion-button { position: relative; padding-left: 2.2rem; }
.personnel-accordion .accordion-button .toggle-sign {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  text-align: center;
  font-weight: 800;
}

.form-section-card {
  border-radius: 1.2rem;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.repeater-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.repeater-item {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  background: var(--surface-2);
}

.org-tree-level {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.org-tree-node {
  position: relative;
  padding-inline-start: 1.2rem;
}

.org-tree-node::before {
  content: "";
  position: absolute;
  inset-inline-start: .35rem;
  top: .25rem;
  bottom: -.75rem;
  width: 2px;
  background: rgba(59, 130, 246, .15);
}

.org-tree-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.98));
  box-shadow: var(--shadow-1);
}

.org-tree-eyebrow {
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

/* Responsive behavior */
@media (max-width: 1199.98px) {
  body.nav-drawer-open {
    overflow: hidden;
  }

  body.nav-drawer-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .32);
    z-index: 1041;
  }

  .app-main-wrapper { padding-top: 112px; }

  .app-fixed-nav .container-fluid {
    flex-wrap: wrap;
    row-gap: .45rem;
    overflow-x: hidden;
  }

  .app-brand {
    max-width: calc(100vw - 220px);
    min-width: 0;
    flex: 1 1 auto;
  }

  .app-fixed-nav .app-brand,
  .app-fixed-nav .navbar-toggler,
  .app-fixed-nav .nav-utility-cluster {
    position: relative;
    z-index: 1043;
  }

  .app-brand-logo {
    height: 34px;
    max-width: 170px;
  }

  .app-fixed-nav .nav-compact-form {
    order: 2;
  }

  .app-fixed-nav .navbar-toggler {
    order: 1;
    margin-inline-start: auto;
  }

  .app-fixed-nav .navbar-collapse {
    order: 3;
    position: fixed;
    inset-inline: 12px;
    top: 78px;
    width: auto;
    flex-basis: auto;
    margin-top: 0;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98)),
      var(--surface-1);
    box-shadow: var(--shadow-3);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1044;
  }

  html[data-theme="modern"] .app-fixed-nav .navbar-collapse {
    background:
      linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.98)),
      var(--surface-1);
  }

  .app-fixed-nav .navbar-collapse:not(.show) {
    display: none !important;
  }

  .app-fixed-nav .navbar-collapse.show {
    display: block !important;
  }

  .navbar-collapse .navbar-nav {
    width: 100%;
    row-gap: .35rem;
    flex-wrap: wrap;
  }

  .navbar-collapse .nav-item {
    width: 100%;
  }

  .navbar-collapse .nav-link {
    width: 100%;
    text-align: start !important;
    padding: .82rem .9rem;
    border: 1px solid transparent;
    background: var(--surface-2);
    border-radius: .9rem;
  }

  .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    transform: none !important;
    width: 100%;
    margin-top: .4rem;
    padding: .35rem;
    background: transparent;
    box-shadow: none;
    border-style: dashed;
  }

  .navbar-collapse .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-collapse .dropdown-toggle::after {
    margin-inline-start: .75rem;
  }

  .navbar-collapse .dropdown-item {
    padding: .72rem .78rem;
    font-size: .9rem;
  }

  .app-fixed-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .filters-card,
  .section-card,
  .report-section,
  .card {
    padding: 16px !important;
  }

  .row > [class*="col-"] {
    margin-bottom: .7rem;
  }
}

@media (max-width: 767.98px) {
  .app-main-wrapper { padding-top: 124px; }
  .app-brand {
    max-width: calc(100vw - 175px);
    font-size: .98rem;
  }

  .app-brand-logo {
    height: 30px;
    max-width: 140px;
  }

  .nav-toggle-btn {
    min-width: 58px;
    min-height: 2.3rem;
    padding: .3rem .55rem !important;
    font-size: .74rem !important;
  }

  .nav-toggle-btn .label-full {
    display: none;
  }

  .nav-toggle-btn .label-short {
    display: inline-flex;
    font-weight: 800;
    letter-spacing: .02rem;
  }

  .navbar .nav-link {
    font-size: .8rem;
  }

  .nav-toggle-btn__icon {
    width: .95rem;
    height: .95rem;
  }

  .navbar-toggler-label {
    display: inline;
    font-size: .76rem;
  }

  .table { font-size: var(--text-sm); }
  .btn { padding: .35rem .65rem; }
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-1);
  }

  .action-cell {
    min-width: 170px;
  }

  .compact-table {
    max-height: none;
  }

  .login-page .app-main-wrapper {
    padding-top: 92px;
  }

  .login-card-header {
    padding: 26px 20px 14px 20px;
  }

  .login-card-body {
    padding: 18px 20px 24px 20px;
  }

  .login-brand-watermark {
    font-size: 1rem;
  }

  .table-responsive {
    border-radius: .7rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table th,
.table td {
    padding: 10px 12px;
    white-space: nowrap;
  }

  .footer .container {
    padding-left: 72px;
    padding-right: 10px;
    font-size: .82rem;
  }

  .announcement-board__header {
    align-items: start;
    flex-direction: column;
  }

  .announcement-board__actions,
.announcement-panel__actions,
.announcement-filters__actions,
.announcement-card__footer,
.announcement-card__footer-actions {
    width: 100%;
  }

  .announcement-filters {
    padding: 1rem;
  }

  .announcement-filters__grid {
    grid-template-columns: 1fr;
  }

  .announcement-card {
    padding: 1rem;
  }

  .announcement-card--with-media .announcement-card__body {
    grid-template-columns: 1fr;
  }

  .announcement-card__image {
    aspect-ratio: 16 / 10;
  }

  .announcement-card__footer,
.announcement-card__badges {
    align-items: start;
    justify-content: start;
  }

  .announcement-pagination {
    justify-content: stretch;
  }

  .announcement-pagination__link {
    flex: 1 1 8rem;
  }

  .checklist-shell__header,
.checklist-upload-form__controls,
.checklist-file-row,
.checklist-card__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .checklist-file-row__actions {
    width: 100%;
  }

  .file-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .file-picker__button {
    width: 100%;
  }

  .checklist-portal__header,
.checklist-portal__item-head,
.checklist-portal__file {
    grid-template-columns: minmax(0,1fr);
  }

  .checklist-portal__person,
.checklist-portal__item-badges,
.checklist-portal__item-actions,
.checklist-portal__file-actions {
    justify-content: flex-start;
  }

  .checklist-portal__item-row {
    flex-direction: column;
    align-items: stretch;
  }

  .checklist-portal__summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .65rem;
  }

  .checklist-portal__summary-card--progress {
    grid-column: 1 / -1;
  }

  .checklist-portal__summary-value {
    font-size: 1.18rem;
  }

  .checklist-portal__filters {
    width: 100%;
    overflow: auto hidden;
    padding-bottom: .15rem;
    flex-wrap: nowrap;
  }

  .checklist-portal__filter {
    flex: 0 0 auto;
    font-size: 16px;
  }

  .checklist-portal__toolbar-note {
    width: 100%;
    font-size: .8rem;
  }

  .checklist-portal__item-head,
.checklist-portal__panel-inner {
    padding: .78rem;
  }

  .checklist-portal__item-title {
    -webkit-line-clamp: 2;
  }

  .checklist-portal__toggle {
    inline-size: 100%;
    font-size: 16px;
    min-width: 0;
  }

  .checklist-portal .file-picker {
    align-items: stretch;
    flex-direction: column;
    min-height: 3.2rem;
  }

  .checklist-portal .file-picker__button,
.checklist-portal .btn-primary,
.checklist-portal .btn-success,
.checklist-portal .file-picker__text {
    font-size: 16px;
  }

  .checklist-portal .file-picker__button,
.checklist-portal .btn-primary,
.checklist-portal .btn-success {
    width: 100%;
  }

  .checklist-portal .file-picker__text {
    white-space: normal;
  }

  .checklist-portal__files.is-scrollable {
    max-block-size: none;
  }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility refinement */
hr { border-color: var(--border); opacity: .9; }
code,
pre { font-family: var(--font-mono); }

/* =========================
   Login page premium UI
   ========================= */
.login-page {
  background:
    radial-gradient(720px 360px at 15% 20%, rgba(14, 165, 233, .18), transparent 62%),
    radial-gradient(860px 420px at 85% 10%, rgba(37, 99, 235, .2), transparent 58%),
    linear-gradient(135deg, #08111f 0%, #14233a 48%, #0f172a 100%);
}

body.login-page {
  margin-bottom: 0;
  padding-bottom: 0;
}

.login-page .footer,
.login-page .whatsapp-fab {
  display: none;
}

.login-page .app-main-wrapper {
  padding-top: 32px;
  padding-bottom: 16px;
}

.login-page-row {
  min-height: 0;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.login-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 440px);
  gap: 1.1rem;
  align-items: stretch;
}

.login-showcase {
  min-width: 0;
}

.login-showcase__surface {
  height: 100%;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 1.4rem;
  background: linear-gradient(160deg, rgba(15, 23, 42, .76), rgba(30, 41, 59, .62));
  box-shadow: 0 28px 70px rgba(2, 6, 23, .28);
  color: #e2e8f0;
  display: grid;
  gap: .9rem;
  backdrop-filter: blur(10px);
}

.login-showcase__brand {
  display: grid;
  gap: 1rem;
}

.login-showcase__logo {
  max-width: 170px;
  max-height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(15, 23, 42, .26));
}

.login-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(96, 165, 250, .14);
  color: #bfdbfe;
  font-size: .82rem;
  font-weight: 800;
}

.login-showcase__title {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.55rem);
  line-height: 1.25;
  color: #fff;
}

.login-showcase__text {
  margin: 0;
  max-width: 38rem;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 2;
}

.login-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.login-metric-card {
  padding: .7rem .85rem;
  border-radius: .9rem;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .34);
  display: grid;
  gap: .4rem;
}

.login-metric-card__icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .65rem;
  background: rgba(59, 130, 246, .18);
  color: #bfdbfe;
}

.login-metric-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.login-metric-card__title {
  font-size: .93rem;
  font-weight: 800;
  color: #fff;
}

.login-metric-card__text {
  font-size: .84rem;
  color: #cbd5e1;
  line-height: 1.8;
}

.login-page-row::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .22) 0%, rgba(37, 99, 235, .08) 42%, transparent 72%);
  filter: blur(82px);
  z-index: 0;
  pointer-events: none;
}

.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .98);
  border-radius: 1.4rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
  border: 1px solid rgba(226, 232, 240, .9);
  overflow: hidden;
}

.login-card-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 22px 32px 14px 32px;
  position: relative;
}

.login-card-header__top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: .9rem;
}

.login-language-toggle-form {
  display: flex;
}

.login-language-toggle {
  min-height: 2.75rem;
}

.login-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.login-language-switcher__label {
  font-size: .78rem;
  font-weight: 700;
  color: #475569;
}

.login-language-switcher__form {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem;
  border-radius: 999px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
}

.login-language-switcher__btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #475569;
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.login-language-switcher__btn:hover {
  color: #0f172a;
  background: rgba(148, 163, 184, .12);
}

.login-language-switcher__btn.is-active {
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.login-brand-watermark {
  position: absolute;
  inset-inline-end: 18px;
  top: 16px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  opacity: .08;
  user-select: none;
  pointer-events: none;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1.4;
}

.login-subtitle {
  font-size: .92rem;
  color: #475569;
  margin-bottom: 0;
}

.login-card-body {
  padding: 18px 32px 24px 32px;
}

.login-form-grid {
  display: grid;
  gap: .65rem;
}

.login-field {
  display: grid;
  gap: .45rem;
}

.login-input-wrap {
  position: relative;
}

.login-input-icon {
  position: absolute;
  inset-inline-start: .95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: #64748b;
  pointer-events: none;
}

.login-input-icon svg {
  width: 100%;
  height: 100%;
}

.login-page .form-control {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 9px 14px;
  min-height: 40px;
  padding-inline-start: 2.8rem;
  background: #fff;
}

.login-page .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}

.login-page .form-label {
  font-weight: 600;
  color: #1e293b;
}

.login-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ── Offline numeric captcha block (Login pages) ───────────────────── */
.captcha-field { display: flex; flex-direction: column; gap: .5rem; }
.captcha-field .form-label { display: flex; align-items: baseline; gap: .35rem; }
.captcha-field .form-label small {
  color: #64748b; font-weight: 400; font-size: .76rem;
  margin-inline-start: auto;
}

.captcha-row {
  display: flex; align-items: stretch; gap: .55rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.captcha-image {
  flex: 1; min-width: 0;
  height: 48px;
  border-radius: 9px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  /* Image is rendered as a <button> so it can also act as a refresh trigger
     (click anywhere on the code). Strip default button chrome and add a
     subtle hover hint so the affordance is discoverable without being noisy. */
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.captcha-image:hover {
  background: #f1f5f9;
  border-color: #93c5fd;
}
.captcha-image:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.captcha-image > svg {
  width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;   /* clicks always reach the parent button */
}
.captcha-image.is-spinning > svg { opacity: .35; transition: opacity .15s ease; }
.captcha-refresh {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  color: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.captcha-refresh:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.captcha-refresh:active { transform: scale(.96); }
.captcha-refresh:disabled { opacity: .55; cursor: wait; }
.captcha-refresh > svg { width: 22px; height: 22px; }
.captcha-refresh.is-spinning > svg {
  animation: captchaSpin .9s linear infinite;
}
@keyframes captchaSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The numeric input — wider letter spacing reads as "code" */
.captcha-answer {
  letter-spacing: .42em;
  font-feature-settings: "tnum" on, "lnum" on;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding-inline-start: 2.5rem !important;
}
.captcha-answer::placeholder {
  letter-spacing: .15em;
  color: #cbd5e1;
  font-weight: 500;
}

@media (max-width: 480px) {
  .captcha-image { height: 50px; }
  .captcha-refresh { width: 50px; height: 50px; flex: 0 0 50px; }
  .captcha-refresh > svg { width: 18px; height: 18px; }
}

.login-forgot-link {
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}

.login-submit-btn {
  border-radius: 10px !important;
  padding: 10px !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
}

.login-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .3) !important;
}

/* ── Login submit busy state ───────────────────────────────────────── */
.login-submit-btn { position: relative; }
.login-submit-btn__label { display: inline-block; }
.login-submit-btn__spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #ffffff;
  border-radius: 50%;
  margin-inline-end: .55rem;
  vertical-align: -3px;
  animation: loginBtnSpin .8s linear infinite;
}
.login-submit-btn.is-busy { opacity: .85; cursor: progress; }
.login-submit-btn.is-busy .login-submit-btn__spinner { display: inline-block; }
@keyframes loginBtnSpin { to { transform: rotate(360deg); } }

/* ── Password visibility toggle ────────────────────────────────────── */
.login-input-wrap--with-toggle .form-control {
  /* leave room for both the left-side icon AND the right-side toggle */
  padding-inline-end: 2.8rem;
}
.login-password-toggle {
  position: absolute;
  inset-inline-end: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem; height: 2rem;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .55rem;
  color: #64748b;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.login-password-toggle:hover { color: #1d4ed8; background: rgba(37, 99, 235, .08); }
.login-password-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.login-password-toggle__icon { width: 18px; height: 18px; }
.login-password-toggle__icon--hide { display: none; }
.login-password-toggle.is-revealed .login-password-toggle__icon--show { display: none; }
.login-password-toggle.is-revealed .login-password-toggle__icon--hide { display: inline-block; }

/* ── Security badge under submit ────────────────────────────────────── */
.login-secure-badge {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem;
  margin-top: .65rem;
  font-size: .72rem;
  color: #94a3b8;
  letter-spacing: .01em;
}
.login-secure-badge svg { width: 13px; height: 13px; color: #64748b; }

/* ── Orbit SVG (replaces legacy .login-orbit divs) ──────────────────── */
.login-showcase__illustration {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-orbit-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 620px;
  margin: 0 auto;
  filter: drop-shadow(0 22px 44px rgba(37, 99, 235, .28));
}
@media (max-width: 991.98px) {
  .login-orbit-svg { max-width: 480px; }
}
@media (max-width: 575.98px) {
  .login-orbit-svg { max-width: 360px; }
}

.pwa-install-btn {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 86px;
  z-index: 1051;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

@media (max-width: 768px) {
  .pwa-install-btn {
    inset-inline-end: 12px;
    bottom: 82px;
    padding: 9px 14px;
    font-size: .9rem;
  }
}

/* iOS "Add to Home Screen" instruction banner (shown only on iOS Safari,
not standalone).
   iOS has no beforeinstallprompt,
so this is the install affordance for iPhone/iPad. */
.ios-install-banner {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 1052;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin-inline: auto;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .22);
  animation: iosInstallIn .28s cubic-bezier(.2, .65, .2, 1);
}
@keyframes iosInstallIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.ios-install-banner__icon { inline-size: 44px; block-size: 44px; border-radius: 11px; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.ios-install-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ios-install-banner__text strong { font-size: .95rem; font-weight: 800; color: var(--text); }
.ios-install-banner__text span { font-size: .82rem; color: var(--text-soft); line-height: 1.6; }
.ios-install-banner__share { inline-size: 1.05em; block-size: 1.05em; vertical-align: -3px; color: var(--brand); margin-inline: 2px; }
.ios-install-banner__close {
  flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; display: grid; place-items: center;
  border: 0; background: var(--surface-2); color: var(--text-soft); border-radius: 999px; cursor: pointer;
}
.ios-install-banner__close svg { inline-size: 1rem; block-size: 1rem; }
.ios-install-banner__close:hover { background: var(--surface-3); color: var(--text); }

@media (max-width: 991.98px) {
  .login-shell {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .login-card {
    order: 1;
  }

  .login-showcase {
    order: 2;
  }

  .login-showcase__grid {
    grid-template-columns: 1fr;
  }
}

.rahkaran-sheet {
  border: 1px solid #cdd6e3;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  font-family: var(--font-base);
}

.rahkaran-sheet__title {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1b2a4a;
}

.rahkaran-sheet__subtitle {
  text-align: center;
  font-size: .9rem;
  color: #4f5d75;
  margin-bottom: 10px;
}

.rahkaran-sheet__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  border-top: 1px solid #e2e7ef;
  padding-top: 8px;
  margin-top: 8px;
}

.rahkaran-sheet__meta > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #e2e7ef;
  padding-bottom: 3px;
}

.rahkaran-sheet__meta span {
  color: #44556f;
  font-size: .9rem;
}

.rahkaran-sheet__meta strong {
  color: #202c3f;
  font-size: .92rem;
  font-weight: 700;
}

.rahkaran-sheet__table {
  border: 1px solid #d4dbe7;
}

.rahkaran-sheet__table thead th {
  background: #f4f6fa;
  border-bottom: 1px solid #d4dbe7;
  color: #20304d;
  font-weight: 700;
}

.rahkaran-sheet__table td,
.rahkaran-sheet__table th {
  font-family: var(--font-base);
}

@media (max-width: 767.98px) {
  .rahkaran-sheet__meta {
    grid-template-columns: 1fr;
  }

  .login-page .app-main-wrapper {
    padding-top: 72px;
  }

  .login-page-row {
    min-height: calc(100svh - 82px);
    align-items: start;
  }

  .login-shell {
    gap: .65rem;
  }

  .login-showcase__surface {
    padding: .95rem 1rem;
    border-radius: 1rem;
    gap: .75rem;
  }

  .login-showcase__brand {
    gap: .65rem;
  }

  .login-card {
    border-radius: 1.1rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .2);
  }

  .login-card-header {
    padding: 20px 18px 12px 18px;
  }

  .login-card-header__top {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: .75rem;
  }

  .login-language-toggle-form {
    width: 100%;
  }

  .login-language-toggle {
    width: 100%;
    justify-content: center;
  }

  .login-language-switcher {
    align-items: stretch;
  }

  .login-language-switcher__form {
    width: 100%;
  }

  .login-language-switcher__btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .login-card-body {
    padding: 14px 18px 18px 18px;
  }

  .login-brand-watermark {
    font-size: .96rem;
  }

  .login-showcase__title {
    font-size: 1.2rem;
  }

  .login-showcase__text,
.login-showcase__grid {
    display: none;
  }

  .login-showcase__logo {
    max-width: 126px;
    max-height: 48px;
  }

  .login-showcase__eyebrow {
    font-size: .74rem;
    padding: .22rem .55rem;
  }

  .login-form-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Organization form builder */
.org-form-field {
  margin-bottom: 1rem;
}

.org-form-field .form-label,
.org-form-readonly__label {
  font-weight: 800;
  color: var(--text);
  margin-bottom: .45rem;
}

.org-form-readonly__value {
  min-height: 46px;
  padding: .78rem .9rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface-2);
  color: var(--text);
}

.org-form-readonly__table,
.org-form-repeater__table {
  margin-bottom: 0;
}

.org-form-readonly__table th,
.org-form-repeater__table th {
  background: var(--surface-2);
}

.org-form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.org-form-submit-shell .card {
  border-radius: 1.1rem;
}

.org-form-repeater {
  padding: .95rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface-2);
}

/* Panel-per-row repeater (replaces the legacy table layout). Each row
   renders as a Bootstrap fieldset so the inputs sit on labelled rows
   instead of tight table cells — works equally well for the recruitment
   form's 7-column "higher education" entries and the leave form's
   3-field hourly block. */
.org-form-repeater--panels {
  padding: .85rem;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,250,252,.9));
}
.org-form-repeater__panels { display: flex; flex-direction: column; gap: .65rem; }
.org-form-repeater__panel {
  margin: 0 0 .25rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: .85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s, box-shadow .15s;
}
.org-form-repeater__panel:hover {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.org-form-repeater__panel-title {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .2rem .7rem;
  font-size: .92rem;
  font-weight: 700;
  color: #1e3a8a;
  background: linear-gradient(to left, #eff6ff, #e0e7ff);
  border-radius: .5rem;
  border: 1px solid rgba(37, 99, 235, .25);
  float: none;
  width: auto;
}
.org-form-repeater__panels--readonly .org-form-repeater__panel {
  background: #f8fafc;
}

/* ── Table-per-row repeater ───────────────────────────────────────────
   The panel layout above repeats every column LABEL for every row, which
   is right for a few wide fields and wrong for a price list: ten purchase
   items became several pages of mostly whitespace. Table layout prints the
   labels ONCE and gives each item a single line.

   Opt-in per field (RepeaterLayout = "table"), so nothing that relies on
   panels changes shape. */
.org-form-repeater--table {
  padding: .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,250,252,.9));
}
.org-form-repeater__tablewrap {
  /* A wide item table must scroll rather than force the whole page wider —
     see the .zd-rep-tablewrap precedent in the report theme. */
  overflow-x: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: .75rem;
  background: #fff;
}
.org-form-repeater--table .org-form-repeater__table {
  margin: 0;
  min-width: 640px;
}
.org-form-repeater__table > thead > tr > th {
  padding: .5rem .55rem;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  color: #1e3a8a;
  background: linear-gradient(to left, #eff6ff, #e0e7ff);
  border-bottom: 1px solid rgba(37, 99, 235, .25);
}
.org-form-repeater__table > tbody > tr > td,
.org-form-repeater__table > tfoot > tr > td {
  padding: .35rem .45rem;
  vertical-align: top;
}
.org-form-repeater__num {
  width: 2.5rem;
  text-align: center;
  color: var(--muted, #64748b);
  font-size: .85rem;
  /* Aligns the number with the first line of the inputs beside it. */
  padding-top: .75rem !important;
}
.org-form-repeater__actions { width: 2.75rem; text-align: center; }
.org-form-repeater__actions .btn {
  padding: .1rem .45rem;
  line-height: 1.3;
  font-size: 1rem;
}
.org-form-repeater__money { text-align: start; }
.org-form-repeater__money-value { font-variant-numeric: tabular-nums; }
/* The amount-in-words line under a money cell. It is the one thing allowed
   to wrap in an otherwise nowrap row, and it must stay small enough that a
   row with words is not twice the height of one without. */
.org-form-repeater__table .org-form-currency__words {
  font-size: .72rem;
  line-height: 1.35;
  margin-top: .15rem;
}
.org-form-repeater__table .org-form-currency--cell { min-width: 8.5rem; }
.org-form-repeater__totals > td {
  border-top: 2px solid rgba(37, 99, 235, .3);
  font-weight: 700;
  background: #f8fafc;
}
.org-form-repeater__total-label { color: #1e3a8a; white-space: nowrap; }

/* ── Review columns ──────────────────────────────────────────────────────
   The per-item verdict a buyer records after the request is filed. Tinted so
   that «what the requester asked for» and «what we decided about it» read as
   two halves of the same table without a second header. */
.org-form-repeater__review-col { background: rgba(13, 148, 136, .05); }
.org-form-repeater__table > thead > tr > th.org-form-repeater__review-col { background: rgba(13, 148, 136, .1); }
.org-form-repeater__review-placeholder { display: block; min-height: 1.4rem; }
.org-form-review-pill {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.org-form-review-pill--ok   { color: #065f46; background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .35); }
.org-form-review-pill--no   { color: #991b1b; background: rgba(239, 68, 68, .13);  border-color: rgba(239, 68, 68, .32); }
.org-form-review-pill--wait { color: #92400e; background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .38); }
.org-form-review-pill--none { color: #475569; background: rgba(100, 116, 139, .12); border-color: rgba(100, 116, 139, .28); }
/* The verdict controls live INSIDE the read-only اقلام table, so they need a floor
   width of their own — the surrounding cells are text and would otherwise squeeze a
   dropdown down to its arrow. */
.org-form-review-input { min-width: 7rem; }
.org-form-review-select { min-width: 9rem; }
.org-form-repeater__table--readonly td .org-form-review-input { margin: 0; }
/* Printing a request must not print empty form controls. */
@media print {
  .org-form-review-input { border: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; }
}
/* Print: a tinted cell wastes toner and a pill's background often drops out
   entirely, so the verdict falls back to a bordered chip that always shows. */
@media print {
  .org-form-repeater__review-col,
  .org-form-repeater__table > thead > tr > th.org-form-repeater__review-col { background: transparent; }
  .org-form-review-pill { border-color: #94a3b8; background: transparent; color: inherit; }
}

.org-form-repeater__table--readonly { width: 100%; border-collapse: collapse; }
.org-form-repeater__table--readonly > tbody > tr > td,
.org-form-repeater__table--readonly > tfoot > tr > td,
.org-form-repeater__table--readonly > thead > tr > th {
  border: 1px solid var(--border, #e2e8f0);
  padding: .3rem .45rem;
  font-size: .85rem;
}

/* Phone: a six-column table is unusable, so each row folds back into a
   labelled card. The label comes from data-label, which the renderer puts
   on every cell — one DOM, two layouts, no duplicate markup. */
@media (max-width: 767.98px) {
  .org-form-repeater--table .org-form-repeater__table { min-width: 0; }
  .org-form-repeater__tablewrap { overflow-x: visible; border: 0; background: transparent; }
  .org-form-repeater__table > thead { display: none; }
  /* The row groups have to leave table layout too. Turning only the ROWS into
     blocks left <tbody> as a table-row-group, so the browser wrapped them in an
     anonymous table box and shrink-to-fit sized every card to its content — on an
     iPhone the printed اقلام list rendered at 173px inside a 332px page, with the
     other half of the width blank. Reported from a real device; reproduced at
     390px before fixing. */
  .org-form-repeater__table,
  .org-form-repeater__table > tbody,
  .org-form-repeater__table > tfoot {
    display: block;
    width: 100%;
  }
  .org-form-repeater__table > tbody > tr,
  .org-form-repeater__table > tfoot > tr {
    display: block;
    margin-bottom: .6rem;
    padding: .6rem .7rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .75rem;
  }
  .org-form-repeater__table > tbody > tr > td,
  .org-form-repeater__table > tfoot > tr > td {
    display: block;
    width: auto !important;
    border: 0;
    padding: .2rem 0;
  }
  .org-form-repeater__table > tbody > tr > td[data-label]::before,
  .org-form-repeater__table > tfoot > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted, #64748b);
    margin-bottom: .1rem;
  }
  .org-form-repeater__table > tbody > tr > td.org-form-repeater__num {
    padding-top: 0 !important;
    text-align: start;
    font-weight: 700;
  }
  .org-form-repeater__actions { text-align: start; }
}

/* Print: the table is the whole point — keep it tight and unbroken, and
   never let the mobile card fallback kick in on a narrow print viewport. */
@media print {
  .org-form-repeater__tablewrap { overflow: visible !important; border: 0; }
  .org-form-repeater__table { min-width: 0 !important; page-break-inside: auto; }
  /* The row groups are reset alongside the rows. The card fallback turns these
     three into blocks, and restoring only the rows/cells would leave a block
     <tbody> holding table-rows — the same anonymous-box mess the fallback exists
     to avoid, just inverted. Printing from a phone can match BOTH media queries. */
  .org-form-repeater__table { display: table; }
  .org-form-repeater__table > tbody { display: table-row-group; }
  .org-form-repeater__table > tfoot { display: table-footer-group; }
  .org-form-repeater__table > thead { display: table-header-group; }
  .org-form-repeater__table > tbody > tr { page-break-inside: avoid; display: table-row; }
  .org-form-repeater__table > tbody > tr > td,
  .org-form-repeater__table > tfoot > tr > td { display: table-cell; padding: .18rem .3rem; font-size: .78rem; }
  .org-form-repeater__table > tbody > tr > td[data-label]::before,
  .org-form-repeater__table > tfoot > tr > td[data-label]::before { content: none; }
  .org-form-repeater__table .org-form-currency__words { font-size: .68rem; }
}

.org-form-print-shell .card,
.org-form-print-shell table {
  page-break-inside: avoid;
}

.font-monospace {
  font-family: var(--font-mono) !important;
}

.org-form-print-page {
  max-width: 1100px;
  margin: 0 auto;
}

.org-form-builder-list {
  display: grid;
  gap: 1rem;
}

.org-form-field-card {
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.org-form-field-card.dragging,
#workflowDesignerTable tbody tr.dragging {
  opacity: 0.6;
}

.org-form-field-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eef2f7;
}

.org-form-field-card__body {
  padding: 1.25rem;
}

.org-form-drag-handle {
  cursor: move;
  color: #64748b;
  font-size: 1.1rem;
  user-select: none;
}

.org-form-builder-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding-top: 0.45rem;
}

.org-form-visual-builder {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(220px, 280px);
  gap: 1.2rem;
  align-items: start;
}

.org-form-visual-builder__panel,
.org-form-visual-builder__canvas-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe4f0;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
  min-height: 680px;
  overflow: hidden;
}

.org-form-visual-builder__panel {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
}

.org-form-visual-builder__panel-head {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #e8eef7;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.95));
}

.org-form-palette {
  flex: 1 1 auto;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.org-form-builder-templatebar,
.org-form-builder-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.org-form-builder-summary {
  align-items: center;
}

.org-form-builder-templatebtn,
.org-form-builder-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 0.78rem;
  line-height: 1.2;
}

.org-form-builder-templatebtn {
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.org-form-builder-templatebtn:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
}

.org-form-builder-templatebtn strong,
.org-form-builder-stat strong {
  font-size: 0.76rem;
  font-weight: 800;
}

.org-form-builder-templatebtn span,
.org-form-builder-stat span {
  color: #64748b;
}

.org-form-palette-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem;
  padding: 0.95rem 1rem;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
  text-align: right;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.org-form-palette-item:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.org-form-palette-item strong {
  font-size: 0.95rem;
  color: #0f172a;
}

.org-form-palette-item span {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.7;
}

.org-form-palette-item__copy {
  display: grid;
  gap: 0.2rem;
}

.org-form-palette-item__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  height: 1.75rem;
  padding-inline: 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 700;
}

.org-form-page-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.org-form-page-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.72rem;
  font-weight: 700;
}

.org-form-builder-canvas {
  padding: 1rem;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 28%),
    linear-gradient(180deg, #f8fbff, #fdfefe);
  min-height: 760px;
}

.org-form-builder-canvas__inner {
  min-height: 640px;
}

.org-form-child-stack {
  display: grid;
  gap: 0.85rem;
}

.org-form-child-stack--compact {
  gap: 0.5rem;
}

.org-form-drop-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 38px;
  border: 1px dashed #93c5fd;
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.72);
  color: #2563eb;
  font-size: 0.78rem;
  opacity: 0.82;
  transition: opacity 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.org-form-drop-slot--compact {
  min-height: 30px;
  font-size: 0.72rem;
}

.org-form-drop-slot.is-over {
  border-color: #2563eb;
  background: rgba(191, 219, 254, 0.75);
  opacity: 1;
}

.org-form-drop-slot:hover {
  opacity: 1;
}

.org-form-drop-slot__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  font-weight: 800;
  line-height: 1;
}

.org-form-drop-slot--compact .org-form-drop-slot__plus {
  width: 1rem;
  height: 1rem;
}

.org-form-drop-slot__text {
  white-space: nowrap;
}

.org-form-canvas-node {
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.org-form-canvas-node.is-selected,
.org-form-table-cell.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.org-form-canvas-node.is-compact {
  border-radius: 14px;
}

.org-form-canvas-node__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid #eef2f7;
}

.org-form-canvas-node__identity {
  display: flex;
  gap: 0.75rem;
  min-width: 0;
}

.org-form-canvas-node__badge {
  display: inline-flex;
  align-items: center;
  height: fit-content;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.org-form-canvas-node__title {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.org-form-canvas-node__title strong {
  font-size: 0.95rem;
  color: #0f172a;
}

.org-form-canvas-node__title span,
.org-form-table-meta,
.org-form-table-cell__label,
.org-form-canvas-node__summary span {
  font-size: 0.8rem;
  color: #64748b;
}

.org-form-node-actions {
  display: inline-flex;
  gap: 0.35rem;
}

.org-form-canvas-node__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.3rem;
  border-radius: 12px;
  border: 1px dashed #d6e2f0;
  background: #fff;
  letter-spacing: -0.08em;
}

.org-form-canvas-node__body {
  padding: 1rem;
}

.org-form-canvas-node__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.org-form-canvas-node__code,
.org-form-canvas-node__text {
  padding: 0.85rem;
  border-radius: 14px;
  background: #f8fafc;
  font-size: 0.84rem;
  line-height: 1.9;
}

.org-form-table-preview {
  display: grid;
  gap: 0.65rem;
}

.org-form-table-cell {
  min-width: 150px;
  min-height: 120px;
  background: rgba(248, 250, 252, 0.85);
  vertical-align: top;
  padding: 0.6rem !important;
}

.org-form-cell-empty {
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  background: rgba(226, 232, 240, 0.45);
  color: #64748b;
  font-size: 0.78rem;
}

.org-form-builder-inspector {
  flex: 1 1 auto;
  padding: 1rem;
  display: grid;
  gap: 0.95rem;
  align-content: start;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.org-form-inspector-section {
  padding: 1rem;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
}

.org-form-inspector-section h6 {
  margin-bottom: 0.85rem;
  color: #0f172a;
}

.org-form-inspector-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.org-form-stage-checks {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.35rem;
}

.org-form-builder-empty-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.45rem;
  min-height: 140px;
  padding: 1.25rem 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.75);
  color: #64748b;
  text-align: center;
}

.org-form-builder-empty-state strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.org-form-builder-empty-state span {
  font-size: 0.82rem;
  line-height: 1.8;
  max-width: 18rem;
}

.org-form-builder-canvas {
  padding: 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 24%),
    linear-gradient(180deg, #f5f9ff, #eef4fb);
}

.org-form-builder-canvas__inner {
  min-height: 640px;
}

.org-form-builder-surface {
  width: min(100%, 1040px);
  margin: 0 auto;
  border: 1px solid #dce7f3;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.org-form-builder-surface__header {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 1.6rem;
  border-bottom: 1px solid #edf2f7;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.org-form-builder-surface__header strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.org-form-builder-surface__header span {
  color: #64748b;
  font-size: 0.88rem;
}

.org-form-builder-surface__body {
  padding: 1.15rem 1.25rem 1.4rem;
}

.org-form-builder-surface--preview {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.org-form-child-stack {
  gap: 1rem;
}

.org-form-child-flow {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.org-form-child-flow.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 0.85rem;
}

.org-form-child-flow.row > .org-form-canvas-node {
  min-width: 0;
}

.org-form-child-flow.row > .org-form-drop-slot {
  flex: 0 0 100%;
  width: 100%;
  min-height: 1.6rem;
}

.org-form-drop-slot--compact {
  min-height: 1.5rem;
  padding: 0;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.45);
  opacity: 0.58;
}

.org-form-drop-slot--compact .org-form-drop-slot__text {
  display: none;
}

.org-form-preview-container > .row {
  --bs-gutter-y: 1rem;
}

.org-form-canvas-node {
  position: relative;
  border: 1px dashed transparent;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  min-height: 3.5rem;
}

.org-form-canvas-node:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(248, 250, 252, 0.35);
}

.org-form-canvas-node.is-selected,
.org-form-table-cell.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: rgba(239, 246, 255, 0.35);
}

.org-form-canvas-node__header {
  position: absolute;
  top: -0.85rem;
  inset-inline-start: 0.75rem;
  z-index: 4;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid #d9e5f2;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.org-form-canvas-node.is-selected .org-form-canvas-node__header {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.org-form-canvas-node__identity {
  gap: 0.45rem;
  align-items: center;
}

.org-form-canvas-node__badge {
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
}

.org-form-canvas-node__title strong {
  font-size: 0.82rem;
}

.org-form-canvas-node__title span,
.org-form-table-meta,
.org-form-table-cell__label,
.org-form-canvas-node__summary span {
  font-size: 0.72rem;
}

.org-form-node-actions .btn {
  padding: 0.18rem 0.45rem;
  line-height: 1.2;
  border-radius: 10px;
}

.org-form-canvas-node__body {
  padding: 0.55rem;
}

.org-form-canvas-node--container > .org-form-canvas-node__body,
.org-form-canvas-node--field > .org-form-canvas-node__body,
.org-form-canvas-node--table > .org-form-canvas-node__body {
  padding: 0.5rem;
}

.org-form-canvas-node--bootstrap-row > .org-form-canvas-node__body,
.org-form-canvas-node--bootstrap-col > .org-form-canvas-node__body,
.org-form-canvas-node--card-header > .org-form-canvas-node__body,
.org-form-canvas-node--card-body > .org-form-canvas-node__body {
  padding: 0.2rem;
}

.org-form-canvas-node--bootstrap-row,
.org-form-canvas-node--bootstrap-col,
.org-form-canvas-node--card-header,
.org-form-canvas-node--card-body {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.org-form-canvas-node--bootstrap-row .org-form-preview-container,
.org-form-canvas-node--bootstrap-col .org-form-preview-container,
.org-form-canvas-node--card-body .org-form-preview-container {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.org-form-canvas-node--card-header .org-form-preview-container {
  min-height: 0;
  padding: 0.95rem 1.25rem;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: none;
}

.org-form-canvas-node--alert .org-form-preview-container {
  border-style: solid;
}

.org-form-canvas-node__code,
.org-form-canvas-node__text,
.org-form-preview-html {
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  font-size: 0.88rem;
  line-height: 1.9;
}

.org-form-preview-container {
  min-height: 4.5rem;
  padding: 0.85rem;
  border: 1px dashed #d6e2f0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
}

.org-form-preview-container.card {
  border-style: solid;
  border-color: #e2e8f0;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.org-form-preview-container.card:has(> .org-form-child-flow > .org-form-canvas-node--card-header),
.org-form-preview-container.card:has(> .org-form-child-flow > .org-form-canvas-node--card-body) {
  padding: 0;
  overflow: hidden;
}

.org-form-preview-container.card .org-form-child-flow,
.org-form-preview-container.card-body .org-form-child-flow {
  width: 100%;
}

.org-form-preview-container.card:has(> .org-form-child-flow > .org-form-canvas-node--card-header) > .org-form-child-flow,
.org-form-preview-container.card:has(> .org-form-child-flow > .org-form-canvas-node--card-body) > .org-form-child-flow {
  gap: 0;
}

.org-form-child-flow.row > .col,
.org-form-child-flow.row > [class~="col"] {
  flex: 1 0 0%;
  width: 0;
}

.org-form-child-flow.row > .col-auto,
.org-form-child-flow.row > [class~="col-auto"] {
  flex: 0 0 auto;
  width: auto;
}

.org-form-child-flow.row > .col-12,
.org-form-child-flow.row > [class~="col-12"] {
  flex: 0 0 100%;
  width: 100%;
}

.org-form-child-flow.row > .col-6,
.org-form-child-flow.row > [class~="col-6"] {
  flex: 0 0 50%;
  width: 50%;
}

.org-form-child-flow.row > .col-4,
.org-form-child-flow.row > [class~="col-4"] {
  flex: 0 0 33.333333%;
  width: 33.333333%;
}

.org-form-child-flow.row > .col-3,
.org-form-child-flow.row > [class~="col-3"] {
  flex: 0 0 25%;
  width: 25%;
}

.org-form-child-flow.row > [class*="col-"] {
  min-width: 0;
}

@media (min-width: 768px) {
  .org-form-child-flow.row > .col-md-12,
.org-form-child-flow.row > [class~="col-md-12"] {
    flex: 0 0 100%;
    width: 100%;
  }

  .org-form-child-flow.row > .col-md-8,
.org-form-child-flow.row > [class~="col-md-8"] {
    flex: 0 0 66.666667%;
    width: 66.666667%;
  }

  .org-form-child-flow.row > .col-md-6,
.org-form-child-flow.row > [class~="col-md-6"] {
    flex: 0 0 50%;
    width: 50%;
  }

  .org-form-child-flow.row > .col-md-4,
.org-form-child-flow.row > [class~="col-md-4"] {
    flex: 0 0 33.333333%;
    width: 33.333333%;
  }

  .org-form-child-flow.row > .col-md-3,
.org-form-child-flow.row > [class~="col-md-3"] {
    flex: 0 0 25%;
    width: 25%;
  }
}

@media (min-width: 992px) {
  .org-form-child-flow.row > .col-lg-12,
.org-form-child-flow.row > [class~="col-lg-12"] {
    flex: 0 0 100%;
    width: 100%;
  }

  .org-form-child-flow.row > .col-lg-6,
.org-form-child-flow.row > [class~="col-lg-6"] {
    flex: 0 0 50%;
    width: 50%;
  }

  .org-form-child-flow.row > .col-lg-4,
.org-form-child-flow.row > [class~="col-lg-4"] {
    flex: 0 0 33.333333%;
    width: 33.333333%;
  }

  .org-form-child-flow.row > .col-lg-3,
.org-form-child-flow.row > [class~="col-lg-3"] {
    flex: 0 0 25%;
    width: 25%;
  }
}

.org-form-preview-runtime {
  padding: 0.2rem;
}

.org-form-builder-live-preview {
  min-height: 620px;
}

.org-form-builder-live-preview .table-responsive {
  overflow-x: auto;
}

.org-form-sheet {
  max-width: 1120px;
  margin: 0 auto 1.5rem;
  padding: 1rem;
  border: 1px solid #d8e1ee;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.org-form-sheet__section-title {
  margin: 1rem 0 0.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid #d7e3f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #eff6ff, #f8fbff);
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
}

.org-form-sheet__table-wrap {
  overflow-x: auto;
}

.org-form-grid-table {
  --bs-table-bg: transparent;
  border-color: #d8e3ef;
  margin-bottom: 0;
}

.org-form-grid-table > :not(caption) > * > * {
  padding: 0.9rem;
  border-color: #d8e3ef;
  background: rgba(255, 255, 255, 0.98);
  vertical-align: top;
}

.org-form-grid-table--header > :not(caption) > * > * {
  background: linear-gradient(180deg, #f8fbff, #edf4fb);
}

.org-form-grid-table--signature > :not(caption) > * > * {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.org-form-sheet__brand-block,
.org-form-sheet__title-block,
.org-form-sheet__meta-stack,
.org-form-sheet__inline-meta,
.org-form-sheet__signature-box,
.org-form-sheet__placeholder {
  display: grid;
  gap: 0.45rem;
}

.org-form-sheet__brand-block {
  justify-items: center;
  min-height: 96px;
  padding: 0.75rem;
  border: 1px dashed #b8c9df;
  border-radius: 18px;
  color: #475569;
  background: rgba(255, 255, 255, 0.78);
}

.org-form-sheet__brand-block strong,
.org-form-sheet__title-block h2,
.org-form-sheet__meta-stack strong,
.org-form-sheet__inline-meta strong,
.org-form-sheet__signature-box strong {
  color: #0f172a;
}

.org-form-sheet__brand-block strong {
  font-size: 1rem;
}

.org-form-sheet__brand-block span,
.org-form-sheet__title-block div,
.org-form-sheet__meta-stack span,
.org-form-sheet__inline-meta span,
.org-form-sheet__signature-box span,
.org-form-sheet__placeholder {
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.9;
}

.org-form-sheet__title-block {
  justify-items: center;
}

.org-form-sheet__title-block h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 800;
}

.org-form-sheet__title-block div {
  font-size: 0.88rem;
}

.org-form-sheet__meta-stack > div,
.org-form-sheet__inline-meta {
  padding: 0.65rem 0.8rem;
  border: 1px solid #d7e3f3;
  border-radius: 14px;
  background: #f8fbff;
}

.org-form-sheet__meta-stack strong,
.org-form-sheet__inline-meta strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
}

.org-form-sheet__signature-box {
  align-content: start;
  min-height: 116px;
}

.org-form-sheet__signature-box span {
  margin-top: 2.5rem;
  display: block;
}

.org-form-sheet__placeholder {
  min-height: 96px;
  align-content: center;
  justify-items: center;
  padding: 1rem;
  border: 1px dashed #c6d4e5;
  border-radius: 18px;
  background: #f8fbff;
  text-align: center;
}

.org-form-sheet .org-form-field,
.org-form-sheet .org-form-readonly {
  margin: 0;
}

.org-form-sheet .org-form-field .form-label,
.org-form-sheet .org-form-readonly__label {
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.org-form-sheet .org-form-readonly__value {
  min-height: 44px;
  padding: 0.82rem 0.95rem;
  border: 1px solid #d8e3ef;
  border-radius: 12px;
  background: #f8fbff;
  color: #0f172a;
}

.org-form-sheet .form-control,
.org-form-sheet .form-select,
.org-form-sheet .form-check,
.org-form-sheet .org-form-radio-group,
.org-form-sheet .org-form-attachment-editor {
  border-radius: 12px;
}

.org-form-sheet .form-control,
.org-form-sheet .form-select {
  min-height: 44px;
  border-color: #cfd9e6;
  background: #fcfdff;
}

.org-form-sheet textarea.form-control {
  min-height: 118px;
}

.org-form-sheet .org-form-preview-repeater,
.org-form-sheet .table-responsive > .table {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .org-form-sheet {
    padding: 0.7rem;
    border-radius: 18px;
  }

  .org-form-grid-table > :not(caption) > * > * {
    padding: 0.7rem;
  }
}

.org-form-visual-builder__panel,
.org-form-builder-surface,
.org-form-builder-live-preview,
.org-form-sheet,
.org-form-preview-field,
.org-form-preview-html,
.org-form-table-preview,
.org-form-table-cell,
.org-form-builder-inspector,
.org-form-palette {
  font-family: "GhaemiLatinDigits", "GhaemiSheetFont", "GhaemiDocFont", var(--font-base);
}

.org-form-builder-canvas {
  padding: 0.75rem;
  background: #eef4fb;
}

.org-form-builder-surface {
  width: min(100%, 1120px);
  border: 1px solid #cfd9e6;
  border-radius: 10px;
  box-shadow: none;
}

.org-form-builder-surface__body {
  padding: 0.75rem;
}

.org-form-builder-surface--preview {
  background: #fff;
}

.org-form-visual-builder__panel {
  border-radius: 10px;
  box-shadow: none;
}

.org-form-canvas-node {
  border-radius: 8px;
  min-height: 2.4rem;
}

.org-form-canvas-node__header {
  top: -0.55rem;
  inset-inline-start: 0.4rem;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
  border-color: #d9e2ee;
  box-shadow: none;
}

.org-form-canvas-node__title strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.org-form-canvas-node__title span,
.org-form-table-meta,
.org-form-table-cell__label,
.org-form-canvas-node__summary span {
  font-size: 0.68rem;
}

.org-form-node-actions .btn {
  border-radius: 6px;
}

.org-form-canvas-node__body,
.org-form-canvas-node--container > .org-form-canvas-node__body,
.org-form-canvas-node--field > .org-form-canvas-node__body,
.org-form-canvas-node--table > .org-form-canvas-node__body {
  padding: 0.25rem;
}

.org-form-preview-container {
  min-height: 2.5rem;
  padding: 0.35rem;
  border: 1px dashed #cdd9e8;
  border-radius: 8px;
  background: #fff;
}

.org-form-preview-container.card,
.org-form-preview-container.card-body,
.org-form-preview-container.card-header {
  border-radius: 8px;
  box-shadow: none;
}

.org-form-table-preview {
  gap: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.org-form-table-meta {
  display: none;
}

.org-form-table-cell {
  min-width: 120px;
  min-height: 72px;
  padding: 0.3rem !important;
  border-style: dashed;
  border-color: #d7e0ec;
  border-radius: 6px;
  background: #fff;
}

.org-form-table-cell__label {
  margin-bottom: 0.2rem;
  padding: 0.1rem 0.35rem;
  background: #eef4fb;
  color: #4a6480;
}

.org-form-cell-empty {
  border-radius: 6px;
  background: #f8fbff;
  font-size: 0.72rem;
}

.org-form-drop-slot {
  min-height: 1.2rem;
  border-radius: 6px;
  border-style: dashed;
  background: #f8fbff;
}

.org-form-drop-slot__plus {
  width: 1rem;
  height: 1rem;
  font-size: 0.72rem;
}

.org-form-drop-slot__text {
  font-size: 0.72rem;
}

.org-form-preview-field,
.org-form-preview-html {
  padding: 0.55rem 0.65rem;
  border: 1px solid #d8e3ef;
  border-radius: 6px;
  background: #fff;
}

.org-form-preview-field .form-label,
.org-form-readonly__label {
  font-size: 0.78rem;
  font-weight: 700;
}

.org-form-preview-field .form-control,
.org-form-preview-field .form-select,
.org-form-sheet .form-control,
.org-form-sheet .form-select {
  min-height: 38px;
  border-radius: 6px;
}

.org-form-preview-field textarea.form-control,
.org-form-sheet textarea.form-control {
  min-height: 90px;
}

.org-form-builder-live-preview {
  min-height: 560px;
  padding: 0;
  background: #fff;
}

.org-form-sheet {
  border-radius: 8px;
  border-color: #cfd9e6;
  box-shadow: none;
}

.org-form-preview-field {
  padding: 0.95rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  width: 100%;
}

.org-form-preview-field .form-label {
  margin-bottom: 0.55rem;
  font-size: 0.86rem;
  color: #0f172a;
}

.org-form-preview-field .form-text {
  margin-top: 0.55rem;
}

.org-form-preview-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

.org-form-preview-repeater th,
.org-form-preview-repeater td {
  min-width: 120px;
}

.org-form-table-preview {
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
}

.org-form-table-preview .table-responsive {
  margin: 0;
}

.org-form-table-cell {
  min-width: 170px;
  min-height: 132px;
  background: #ffffff;
  border-color: #e2e8f0;
  padding: 0.7rem !important;
}

.org-form-table-cell__label {
  display: inline-flex;
  margin-bottom: 0.5rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

.org-form-cell-empty {
  border: 1px dashed #c7d6e6;
  background: #f8fbff;
}

.org-form-notification-stack,
.org-form-comment-stack {
  display: grid;
  gap: 0.75rem;
}

.org-form-notification-item,
.org-form-comment-item {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  text-decoration: none;
  color: inherit;
}

.org-request-hub {
  display: grid;
  gap: 1.25rem;
}

.org-request-hub__header,
.org-request-history__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.org-request-hub__title {
  margin: 0 0 .35rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 800;
  color: #0f172a;
}

.org-request-hub__subtitle {
  color: #64748b;
  line-height: 1.8;
}

.org-request-hub__header-actions,
.org-request-history__header-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.org-request-hub__form-title,
.org-request-history__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.org-request-hub__form-description,
.org-request-history__subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.org-request-hub__groups {
  display: grid;
  gap: 1rem;
}

.org-request-hub__group {
  display: grid;
  gap: 0.85rem;
}

.org-request-hub__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e2e8f0;
}

.org-request-hub__group-title {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
}

.org-request-hub__group-meta {
  color: #64748b;
  font-size: 0.84rem;
}

.org-request-hub__form-card {
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.org-request-hub__priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
}

.org-request-history__panel {
  border: 1px solid #dbe4f0;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
  padding: 1.1rem 1.1rem 1rem;
}

.org-request-history__section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.org-request-history__results {
  margin-top: .35rem;
  color: #64748b;
  font-size: .86rem;
}

.org-request-history__filters {
  display: grid;
  gap: .85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.org-request-history__filters-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, .8fr);
  gap: .85rem;
}

.org-request-history__field {
  min-width: 0;
}

.org-request-history__filter-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.org-request-history__table {
  margin-bottom: 0;
  table-layout: fixed;
  --bs-table-bg: transparent;
}

.org-request-history__table > :not(caption) > * > * {
  padding: .9rem .8rem;
  border-color: #e2e8f0;
  background: transparent;
  vertical-align: middle;
}

.org-request-history__table thead th {
  background: #eef4fb;
  color: #334155;
  font-size: .8rem;
  font-weight: 800;
}

.org-request-history__title-cell {
  min-width: 0;
}

.org-request-history__title {
  font-weight: 700;
  color: #0f172a;
}

.org-request-history__subtitle {
  margin-top: .2rem;
  font-size: .82rem;
  color: #64748b;
  line-height: 1.7;
}

.org-request-history__meta-cell {
  white-space: nowrap;
  color: #334155;
  font-size: .85rem;
}

.org-request-history__tracking {
  margin-top: .25rem;
  font-size: .78rem;
  color: #64748b;
}

.org-request-history__tracking code {
  background: #f1f5f9;
  color: #0f766e;
  padding: .05rem .4rem;
  border-radius: .4rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.org-request-history__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  color: #334155;
  background: #e2e8f0;
  white-space: nowrap;
}

.org-request-history__badge--draft {
  color: #7c2d12;
  background: #ffedd5;
}

.org-request-history__badge--progress {
  color: #1d4ed8;
  background: #dbeafe;
}

.org-request-history__badge--approved {
  color: #166534;
  background: #dcfce7;
}

.org-request-history__badge--rejected {
  color: #b91c1c;
  background: #fee2e2;
}

.org-request-history__badge--completed {
  color: #065f46;
  background: #ccfbf1;
}

.org-request-history__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.org-request-history__actions .btn {
  min-height: 2rem;
  padding: .35rem .7rem;
  border-radius: 10px;
  font-size: .78rem;
  white-space: nowrap;
}

.org-request-history__empty {
  padding: 1.5rem 1rem;
  border: 1px dashed #d7e3f3;
  border-radius: 16px;
  background: #fbfdff;
  color: #64748b;
  text-align: center;
}

.org-request-history__card {
  display: grid;
  gap: .7rem;
  padding: .95rem 1rem;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.org-request-history__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .7rem;
}

.org-request-history__card-meta {
  display: grid;
  gap: .35rem;
  color: #475569;
  font-size: .84rem;
}

.org-request-history__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.org-request-history__page-list {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}

.org-request-history__page-link,
.org-request-history__page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  min-height: 2.15rem;
  padding: .35rem .75rem;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  color: #1e3a8a;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
}

.org-request-history__page-number.is-active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.org-request-history__page-link.is-disabled {
  opacity: .45;
  pointer-events: none;
}

html[dir="ltr"] .org-request-history__actions,
html[dir="ltr"] .org-request-history__header,
html[dir="ltr"] .org-request-hub__header,
html[dir="ltr"] .org-request-history__card-head,
html[dir="ltr"] .org-request-history__pagination {
  direction: ltr;
}

html[dir="ltr"] .org-request-history__title,
html[dir="ltr"] .org-request-history__subtitle,
html[dir="ltr"] .org-request-history__card-meta,
html[dir="ltr"] .org-request-hub__subtitle,
html[dir="ltr"] .org-request-hub__form-description {
  text-align: left;
}

@media (max-width: 767.98px) {
  .org-request-history__panel {
    padding: .9rem;
    border-radius: 18px;
  }

  .org-request-history__filters-grid {
    grid-template-columns: 1fr;
  }

  .org-request-history__filters .form-control,
.org-request-history__filters .form-select {
    min-height: 44px;
    font-size: 16px;
  }

  .org-request-history__actions .btn {
    flex: 1 1 calc(50% - .45rem);
    justify-content: center;
  }

  .org-request-history__pagination {
    justify-content: center;
  }

  .org-request-history__page-link,
.org-request-history__page-number {
    min-width: 2rem;
    min-height: 2rem;
  }
}

.org-form-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.org-form-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
  font-size: 0.85rem;
}

.org-form-runtime-shell .org-form-field {
  margin-bottom: 1rem;
}

.org-form-readonly__label {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.org-form-readonly__value {
  min-height: 2.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
}

.org-form-repeater__table td,
.org-form-repeater__table th,
.org-form-readonly__table td,
.org-form-readonly__table th {
  vertical-align: middle;
}

.org-form-guide-list,
.org-form-guide-steps {
  display: grid;
  gap: 0.9rem;
}

.org-form-guide-tip,
.org-form-guide-step {
  display: grid;
  gap: 0.25rem;
  padding: 0.95rem 1rem;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.org-form-guide-tip strong,
.org-form-guide-step strong {
  color: #0f172a;
}

.org-form-guide-tip span,
.org-form-guide-step span {
  color: #475569;
  line-height: 1.9;
}

.org-form-routing-shell {
  display: grid;
  gap: 1rem;
}

.org-form-routing-summary {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.org-form-routing-summary__item,
.org-form-routing-card,
.org-form-routing-preview__step,
.org-form-routing-preview__empty {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.org-form-routing-summary__item {
  padding: 1rem 1.1rem;
}

.org-form-routing-summary__item strong,
.org-form-routing-card__head strong,
.org-form-routing-preview__step strong {
  display: block;
  font-size: .95rem;
  margin-bottom: .3rem;
  color: var(--bs-emphasis-color);
}

.org-form-routing-summary__item span,
.org-form-routing-card__head span,
.org-form-routing-preview__step small,
.org-form-routing-preview__empty {
  color: #475569;
  font-size: .87rem;
  line-height: 1.65;
}

.org-form-routing-card {
  height: 100%;
  padding: 1rem 1.1rem;
}

.org-form-routing-card__head {
  display: grid;
  gap: .15rem;
}

.org-form-picker-search {
  font-size: 16px;
}

.org-form-picker-stack {
  display: grid;
  gap: .75rem;
}

.org-form-picker-select {
  min-height: 13rem;
  font-size: .92rem;
  line-height: 1.8;
}

.org-form-picker-select option {
  white-space: normal;
}

.org-form-picker-results,
.org-form-picker-selected,
.org-form-routing-preview {
  display: grid;
  gap: .55rem;
}

.org-form-picker-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: .9rem;
  background: rgba(239, 246, 255, .75);
  color: var(--bs-emphasis-color);
  padding: .7rem .85rem;
  text-align: start;
}

.org-form-picker-result small {
  color: #2563eb;
  font-size: .78rem;
  white-space: nowrap;
}

.org-form-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: var(--bs-emphasis-color);
  padding: .45rem .5rem .45rem .8rem;
  margin: 0 .5rem .5rem 0;
}

.org-form-picker-chip span {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-form-picker-chip button {
  border: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: rgba(220, 38, 38, .12);
  color: #dc2626;
  line-height: 1;
}

.org-form-picker-empty,
.org-form-routing-preview__empty {
  padding: .85rem 1rem;
}

.org-form-picker-selected {
  min-height: 3.25rem;
  align-content: start;
}

.org-form-routing-preview__step {
  padding: .95rem 1rem;
}

.org-form-routing-preview__step span {
  display: block;
  font-size: .92rem;
  color: var(--bs-emphasis-color);
}

[dir="ltr"] .org-form-picker-chip {
  margin: 0 0 .5rem .5rem;
}

@media print {
  .no-print,
.app-fixed-nav,
.footer,
.whatsapp-fab,
.pwa-install-btn,
.ios-install-banner {
    display: none !important;
  }

  .app-main-wrapper {
    padding-top: 0 !important;
  }

  body {
    margin-bottom: 0;
    padding-bottom: 0;
    background: #fff !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
  }
}

.app-auth-main {
  min-height: 100vh;
  min-height: var(--app-viewport-height);
}

body.app-loading * {
  transition: none !important;
}

body {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 24rem),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.1), transparent 20rem),
    var(--bg-app);
  overflow-x: hidden;
}

:root {
  --sidebar-width: 280px;
}

.app-shell {
  min-height: 100vh;
  min-height: var(--app-viewport-height);
  display: block;
  position: relative;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.app-sidebar-backdrop {
  display: none;
}

.app-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sidebar-width);
  height: var(--app-viewport-height);
  min-height: var(--app-viewport-height);
  direction: ltr;
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
  border-left: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  z-index: 60;
}

[dir="ltr"] .app-sidebar {
  left: 0;
  right: auto;
  border-left: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
}

.app-sidebar__inner {
  min-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
  max-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
  overflow-y: auto;
  direction: ltr;
  display: flex;
  flex-direction: column;
  padding: calc(1.5rem + var(--app-safe-top)) 1rem calc(1rem + var(--app-safe-bottom));
  scrollbar-gutter: stable;
}

.app-sidebar__inner::-webkit-scrollbar {
  width: 0.55rem;
}

.app-sidebar__inner::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 999px;
}

.app-sidebar__brand,
.app-sidebar__nav,
.app-sidebar__footer {
  direction: rtl;
}

.app-sidebar__brand {
  margin-bottom: 1.5rem;
}

.app-sidebar__brand-link {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 0.875rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  color: #f8fafc;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(15, 23, 42, 0.22));
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.app-sidebar__brand-logo {
  width: 2.85rem;
  height: 2.85rem;
  object-fit: contain;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.4rem;
}

.app-sidebar__brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: flex-end;
  text-align: right;
}

.app-sidebar__brand-copy strong {
  font-size: 1rem;
  font-weight: 800;
}

.app-sidebar__brand-copy small {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.8rem;
}

.app-sidebar__nav {
  display: grid;
  gap: 0.9rem;
  flex: 1 1 auto;
  align-content: start;
}

.sidebar-section,
.sidebar-group {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 1rem;
  overflow: hidden;
}

.sidebar-section__label,
.sidebar-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
  padding: 0.95rem 1rem;
  font-weight: 700;
  color: #f8fafc;
  cursor: pointer;
  list-style: none;
}

.sidebar-group__summary::-webkit-details-marker {
  display: none;
}

.sidebar-group__summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-left: 2px solid rgba(226, 232, 240, 0.78);
  border-bottom: 2px solid rgba(226, 232, 240, 0.78);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.sidebar-group[open] .sidebar-group__summary::after {
  transform: rotate(-45deg) translateY(-0.12rem);
}

.sidebar-group__items {
  display: grid;
  gap: 0.3rem;
  padding: 0 0.55rem 0.65rem;
  direction: rtl;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.72rem 0.85rem;
  border-radius: 0.85rem;
  color: rgba(226, 232, 240, 0.88);
  text-decoration: none;
  font-weight: 600;
  text-align: right;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sidebar-link:hover,
.sidebar-link.active {
  color: #fff;
  background: rgba(37, 99, 235, 0.28);
  transform: none;
}

/* Dynamic per-form submenu under "کارتابل مدیر". Renders as a nested
   collapsible <details> with one child link per form that has
   submissions for the current user. The submenu summary uses the same
   visual treatment as a regular sidebar link (since it doubles as a
   click target for the "all forms" view) plus a chevron. */
.sidebar-subgroup { width: 100%; }
.sidebar-subgroup > summary {
  cursor: pointer;
  list-style: none;
}
.sidebar-subgroup > summary::-webkit-details-marker { display: none; }
.sidebar-subgroup > summary::marker { content: ""; }
.sidebar-link--summary {
  position: relative;
  padding-left: 1.8rem;
}
.sidebar-link--summary::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-0.18rem);
  transition: transform 0.2s ease;
}
.sidebar-subgroup[open] > .sidebar-link--summary::before {
  transform: rotate(45deg) translateY(-0.18rem);
}
.sidebar-subgroup__items {
  display: grid;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem 0.25rem 0.55rem;
  margin-right: 0.7rem;
  border-right: 1px dashed rgba(148, 163, 184, 0.25);
}
.sidebar-link--child {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: 0.65rem;
  gap: 0.4rem;
}
.sidebar-link__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-link__badge { margin-inline-start: auto; font-size: 0.7rem; }

.app-sidebar__footer {
  margin-top: auto;
  padding-top: 1rem;
}

.sidebar-mini-card {
  padding: 1rem;
  border-radius: 1rem;
  text-align: right;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(37, 99, 235, 0.22));
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.sidebar-mini-card__title {
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.3rem;
}

.sidebar-mini-card__text {
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.88rem;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR · LTR (Russian) MIRROR
   ---------------------------------------------------------------------------
   The sidebar is written RTL-first on purpose: .app-sidebar__inner is forced to
   `direction: ltr` so the scrollbar sits on the outer screen edge, and the
   content is then flipped back with `direction: rtl` plus physical right/left
   values. That means the Russian build — where <html dir="ltr"> and the sidebar
   moves to the left of the screen — kept right-aligned labels, a right-aligned
   brand block and chevrons pointing the wrong way.

   Everything below only mirrors the values that were pinned to a physical side.
   The RTL default above is untouched, which is the point: Persian is the primary
   experience and must not move by a pixel.
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="ltr"] .app-sidebar__brand,
[dir="ltr"] .app-sidebar__nav,
[dir="ltr"] .app-sidebar__footer,
[dir="ltr"] .sidebar-group__items {
  direction: ltr;
}

[dir="ltr"] .app-sidebar__brand-link {
  flex-direction: row;
  justify-content: flex-start;
}

[dir="ltr"] .app-sidebar__brand-copy {
  align-items: flex-start;
  text-align: left;
}

[dir="ltr"] .sidebar-section__label,
[dir="ltr"] .sidebar-group__summary,
[dir="ltr"] .sidebar-link,
[dir="ltr"] .sidebar-mini-card {
  text-align: left;
}

/* Group chevron. A horizontal mirror is BOTH halves of the trick: swap which
   border is drawn AND negate the rotation. Swapping only the border turns the
   collapsed "‹" into "⌄" — which then reads as the expanded state. */
[dir="ltr"] .sidebar-group__summary::after {
  border-left: 0;
  border-right: 2px solid rgba(226, 232, 240, 0.78);
  transform: rotate(-45deg);
}

[dir="ltr"] .sidebar-group[open] .sidebar-group__summary::after {
  transform: rotate(45deg) translateY(-0.12rem);
}

/* Nested submenu ("کارتابل مدیر" per-form list): move the disclosure arrow and
   its padding reservation to the end edge, and mirror the arrow itself. */
[dir="ltr"] .sidebar-link--summary {
  padding-left: 0.85rem;
  padding-right: 1.8rem;
}

/* Only the SIDE moves. The arrow keeps its border/rotation, which draws a "›" —
   the same direction the group chevron above now points. A literal mirror would
   have produced "‹" here, faithfully reproducing an inconsistency the RTL sheet
   already has between these two levels; there is no reason to import it. */
[dir="ltr"] .sidebar-link--summary::before {
  left: auto;
  right: 0.85rem;
}

[dir="ltr"] .sidebar-subgroup__items {
  margin-right: 0;
  margin-left: 0.7rem;
  border-right: 0;
  border-left: 1px dashed rgba(148, 163, 184, 0.25);
}

.app-content {
  margin-right: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  max-width: calc(100% - var(--sidebar-width));
  min-width: 0;
  min-height: var(--app-viewport-height);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

[dir="ltr"] .app-content {
  margin-left: var(--sidebar-width);
  margin-right: 0;
}

.app-content__body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(1rem + var(--app-safe-top)) calc(1.5rem + var(--app-safe-right)) 1rem calc(1.5rem + var(--app-safe-left));
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  overflow: visible;
}

body.dashboard-page {
  --dashboard-topbar-offset: calc(5.75rem + var(--app-safe-top));
}

body.dashboard-page .app-topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: var(--sidebar-width);
  inset-inline-end: 0;
  z-index: 1050;
}

body.dashboard-page .app-content__body {
  padding-top: var(--dashboard-topbar-offset);
}

html[data-theme="modern"] .app-topbar {
  background: rgba(15, 23, 42, 0.85);
}

.app-topbar__start,
.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-topbar__title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.app-topbar__title strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.app-topbar__title small {
  color: var(--text-muted);
}

/* The page title is the only elastic thing in the bar. The icon buttons and the
   profile chip don't shrink, so when the bar ran out of room flex squeezed the
   ACTIONS box instead and the profile chip was pushed a few pixels off-screen on
   a 390px phone. Let the title give up its width (and ellipsise) instead. */
.app-topbar__start { min-width: 0; }
.app-topbar__title strong,
.app-topbar__title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar__actions { flex: 0 0 auto; }

.app-menu-toggle {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(15, 23, 42, 0.08));
  color: var(--text-main);
  padding: 0.72rem;
}

.app-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  margin: 0.22rem 0;
  border-radius: 999px;
}

.topbar-icon-btn,
.topbar-utility-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.9rem;
  padding: 0 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-main);
  font-weight: 700;
}

.sidebar-section--home-only .sidebar-section__label {
  display: none;
}

html[data-theme="modern"] .topbar-icon-btn,
html[data-theme="modern"] .topbar-utility-btn {
  background: rgba(30, 41, 59, 0.9);
}

.topbar-icon-btn svg,
.topbar-utility-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.topbar-icon-btn__badge {
  position: absolute;
  top: -0.2rem;
  left: -0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.7);
}

/* Two distinct visual identities so the user can tell at a glance whether
   the badge is a workflow event (bell,
amber) or a chat message (envelope,
blue). Both still anchor at the same corner of their button. */
.topbar-icon-btn__badge--workflow {
  background: #f59e0b;
  color: #1c1310;
}
.topbar-icon-btn__badge--messages {
  background: #3b82f6;
  color: #fff;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.3rem 0.9rem 0.3rem 0.45rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.94);
}

html[data-theme="modern"] .profile-chip {
  background: rgba(30, 41, 59, 0.92);
}

.profile-chip__avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #fff;
  font-weight: 800;
  overflow: hidden;
}

.profile-chip__avatar--photo {
  background: transparent;
  padding: 0;
}

.profile-chip__meta {
  display: flex;
  flex-direction: column;
  text-align: start;
  line-height: 1.25;
}

.profile-chip__meta small {
  color: var(--text-muted);
}

.topbar-dropdown {
  min-width: 21rem;
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14);
}

/* The notifications/messages list scrolls INSIDE the dropdown (not the whole
   page). Without this,
a long list overflowed the viewport and the wheel
   scrolled the page behind it,
so older notifications were unreachable.
   overscroll-behavior: contain stops the scroll from chaining to the body. */
#topbarNotificationsList,
#topbarMessagesList {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.topbar-dropdown__header {
  padding: 0.75rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.topbar-dropdown__header--with-action {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.topbar-dropdown__link {
  border: 0;
  background: transparent;
  color: var(--brand-600);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.15rem 0;
}

.topbar-dropdown__header small,
.topbar-dropdown__item small,
.topbar-dropdown__item span,
.topbar-dropdown__empty {
  color: var(--text-muted);
}

.topbar-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.topbar-dropdown__item:hover {
  background: rgba(37, 99, 235, 0.08);
}

.topbar-dropdown__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.topbar-dropdown__item-head strong {
  flex: 1;
  font-weight: 700;
}

.topbar-dropdown__item-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.topbar-dropdown__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.topbar-dropdown__item-badge--unread {
  background: rgba(37, 99, 235, 0.14);
  color: var(--brand-700);
}

.topbar-dropdown__item.is-unread {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04));
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: inset 3px 0 0 var(--brand-500), 0 10px 24px rgba(37, 99, 235, 0.08);
}

.topbar-dropdown__item.is-unread > span:not(.topbar-dropdown__item-head),
.topbar-dropdown__item.is-unread > small {
  color: var(--text-default);
}

.topbar-dropdown__empty {
  padding: 0.85rem;
}

.topbar-dropdown__form {
  margin: 0.35rem 0 0;
}

.topbar-dropdown__button {
  width: 100%;
  min-height: 2.8rem;
  border: 0;
  border-radius: 0.85rem;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  font-weight: 700;
}

.mobile-account-backdrop,
.mobile-account-sheet {
  display: none;
}

.mobile-account-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 1048;
}

.mobile-account-sheet {
  position: fixed;
  inset: 0;
  z-index: 1049;
  padding: calc(4.8rem + var(--app-safe-top)) calc(0.9rem + var(--app-safe-right)) calc(0.9rem + var(--app-safe-bottom)) calc(0.9rem + var(--app-safe-left));
  pointer-events: none;
}

.mobile-account-sheet__card {
  width: min(22rem, 100%);
  margin-inline-start: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.2rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}

html[data-theme="modern"] .mobile-account-sheet__card {
  background: rgba(15, 23, 42, 0.98);
}

.mobile-account-backdrop.show {
  opacity: 1;
}

.mobile-account-sheet.show .mobile-account-sheet__card {
  opacity: 1;
  transform: translateY(0);
}

.mobile-account-sheet__header {
  padding: 1rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mobile-account-sheet__header small,
.mobile-account-sheet__action span {
  color: var(--text-muted);
}

.mobile-account-sheet__action {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
}

.mobile-account-sheet__action:hover,
.mobile-account-sheet__action:focus {
  background: rgba(37, 99, 235, 0.08);
}

.mobile-account-sheet__form {
  padding: 0.25rem 1rem 1rem;
}

.mobile-account-sheet__logout {
  width: 100%;
  min-height: 2.9rem;
  border: 0;
  border-radius: 0.95rem;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  font-weight: 800;
}

.app-main {
  flex: 1 0 auto;
  min-width: 0;
  padding: 1.5rem calc(1.5rem + var(--app-safe-right)) calc(0.85rem + var(--app-safe-bottom)) calc(1.5rem + var(--app-safe-left));
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT MEASURE — how wide the working column is allowed to get
   ---------------------------------------------------------------------------
   The shell is fluid, which is right up to about a 1080p screen and wrong past
   it: on a 27" monitor (2560px) the content track is 2280px, so a hero becomes
   an empty blue slab, a two-field filter row spreads its label a metre from its
   input, and a table's action buttons end up a full screen away from the row
   they belong to. Nothing overflows — it just stops being usable or looking
   designed.

   So: stay fluid up to --app-content-max, then centre and let the surplus
   become gutters. Below the cap NOTHING changes, which is why every existing
   breakpoint (and the whole mobile layout) is untouched by this block.

   The topbar and footer keep their full-bleed background but line their
   contents up with the same column, so the page reads as one grid instead of
   a narrow body under a wide bar.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --app-content-max: 1680px;
}

.app-main,
.app-content__body > .app-footer,
.app-topbar__inner {
  width: 100%;
  max-width: var(--app-content-max);
  margin-inline: auto;
}

/* The bar itself stays edge-to-edge (background, border, blur); only its
   contents are pulled into the column. */
.app-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

/* Full-bleed surfaces opt out: these are app-in-an-app canvases that are meant
   to use every pixel (chat panes, the 3-column form builder, print sheets).
   Capping them would letterbox a workspace, not tidy a page. */
body.messenger-page .app-main,
body.form-builder-page .app-main,
body.is-fullbleed .app-main,
.app-main--fullbleed {
  max-width: none;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding: 0.75rem calc(1.5rem + var(--app-safe-right)) calc(1rem + var(--app-safe-bottom)) calc(1.5rem + var(--app-safe-left));
  color: var(--text-muted);
  font-size: 0.78rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

html[data-theme="modern"] .app-footer {
  background: rgba(15, 23, 42, 0.58);
}

.app-footer__primary,
.app-footer__secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.app-footer__primary strong {
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 800;
}

.app-footer__secondary a {
  color: inherit;
  text-decoration: none;
}

.app-footer__secondary a:hover,
.app-footer__secondary a:focus {
  color: var(--text-main);
  text-decoration: underline;
}

.dashboard-hero,
.dashboard-panel,
.metric-card,
.announcement-timeline__card {
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(14.5rem, 0.8fr);
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  margin-bottom: 0.95rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(37, 99, 235, 0.9));
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.12);
  position: relative;
  overflow: hidden;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -6%;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.dashboard-hero__content,
.dashboard-hero__summary {
  position: relative;
  z-index: 1;
}

.dashboard-hero__copy {
  display: grid;
  gap: 0.45rem;
}

.dashboard-hero__eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.dashboard-hero__title {
  font-size: clamp(1.3rem, 1.65vw, 1.9rem);
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
}

.dashboard-hero__text {
  max-width: 44rem;
  color: rgba(248, 250, 252, 0.82);
  line-height: 1.75;
  margin: 0;
  font-size: 0.94rem;
}

.dashboard-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.dashboard-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-weight: 700;
  font-size: 0.78rem;
}

.dashboard-badge--accent,
.dashboard-badge--warning {
  background: rgba(34, 197, 94, 0.18);
}

.dashboard-badge--warning {
  background: rgba(245, 158, 11, 0.18);
}

.dashboard-badge--neutral {
  background: rgba(148, 163, 184, 0.18);
}

.dashboard-hero__summary {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.dashboard-hero-card {
  padding: 0.8rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.095);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

.dashboard-hero-card__label {
  color: rgba(248, 250, 252, 0.72);
  margin-bottom: 0.22rem;
  font-size: 0.8rem;
}

.dashboard-hero-card__value {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.45;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.metric-card {
  display: flex;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.16);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.28rem;
  background: rgba(148, 163, 184, 0.22);
}

.metric-card--primary::before { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.metric-card--accent::before { background: linear-gradient(180deg, #22c55e, #15803d); }
.metric-card--warning::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.metric-card--danger::before { background: linear-gradient(180deg, #ef4444, #dc2626); }
.metric-card--info::before { background: linear-gradient(180deg, #0ea5e9, #2563eb); }

.metric-card--status .metric-card__value {
  width: fit-content;
}

/* Clickable KPI card: the whole tile navigates to the menu the number belongs to.
   The overlay sits above the card body but BELOW nothing else,
so text stays
   selectable-looking while the entire surface is one big hit area. */
.metric-card--link {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.metric-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  text-decoration: none;
}

.metric-card--link:hover,
.metric-card--link:focus-within {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0.6rem 1.4rem rgba(15, 23, 42, 0.12);
}

.metric-card__link:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.75);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .metric-card--link,
.metric-card--link:hover,
.metric-card--link:focus-within {
    transition: none;
    transform: none;
  }
}

html[data-theme="modern"] .metric-card,
html[data-theme="modern"] .dashboard-panel,
html[data-theme="modern"] .announcement-timeline__card {
  background: rgba(15, 23, 42, 0.9);
}

html[data-theme="modern"] .dashboard-panel--secondary {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.92));
}

.metric-card__icon {
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 2.7rem;
  border-radius: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.metric-card__icon svg {
  width: 1.18rem;
  height: 1.18rem;
}

.metric-card--primary .metric-card__icon { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.metric-card--accent .metric-card__icon { background: linear-gradient(135deg, #22c55e, #15803d); }
.metric-card--warning .metric-card__icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.metric-card--danger .metric-card__icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.metric-card--info .metric-card__icon { background: linear-gradient(135deg, #0ea5e9, #2563eb); }

.metric-card__title {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.22rem;
  font-weight: 700;
}

.metric-card__value {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 0.18rem;
  line-height: 1.3;
}

.metric-card__value--status {
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.86rem;
  min-height: 1.85rem;
  display: inline-flex;
  align-items: center;
}

.metric-card--primary .metric-card__value--status,
.metric-card--info .metric-card__value--status {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.metric-card--accent .metric-card__value--status {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

.metric-card--warning .metric-card__value--status {
  color: #b45309;
  background: rgba(245, 158, 11, 0.13);
}

.metric-card--danger .metric-card__value--status {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

.metric-card__text {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.85rem;
  grid-auto-flow: dense;
}

.dashboard-panel {
  padding: 1.05rem 1.1rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.dashboard-panel--feature {
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.dashboard-panel--secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.98));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-panel--chart {
  padding-bottom: 0.9rem;
}

.dashboard-panel--wide {
  grid-column: span 12;
}

.dashboard-panel--span-7 {
  grid-column: span 7;
}

.dashboard-panel--span-5 {
  grid-column: span 5;
}

.dashboard-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.dashboard-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.dashboard-panel__subtitle {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.65;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.quick-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  text-decoration: none;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.96));
  color: var(--text-main);
  position: relative;
}

.quick-action--primary { border-color: rgba(37, 99, 235, 0.18); }
.quick-action--accent { border-color: rgba(34, 197, 94, 0.18); }
.quick-action--warning { border-color: rgba(245, 158, 11, 0.22); }
.quick-action--info { border-color: rgba(14, 165, 233, 0.22); }

.quick-action__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.8rem;
  background: rgba(148, 163, 184, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.quick-action__icon::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.3rem;
  background: currentColor;
  opacity: 0.16;
}

.quick-action--primary .quick-action__icon { color: #2563eb; background: rgba(37, 99, 235, 0.1); }
.quick-action--accent .quick-action__icon { color: #16a34a; background: rgba(34, 197, 94, 0.1); }
.quick-action--warning .quick-action__icon { color: #d97706; background: rgba(245, 158, 11, 0.12); }
.quick-action--info .quick-action__icon { color: #0284c7; background: rgba(14, 165, 233, 0.12); }

.quick-action__content {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.quick-action__arrow {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.quick-action__arrow::before {
  content: "›";
  font-size: 1.05rem;
  font-weight: 900;
}

[dir="ltr"] .quick-action__arrow::before {
  content: "›";
}

[dir="rtl"] .quick-action__arrow::before {
  content: "‹";
}

.quick-action:hover {
  transform: translateY(-0.15rem);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  border-color: rgba(37, 99, 235, 0.24);
}

.quick-action:focus-visible {
  outline: 0;
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}

.quick-action:hover .quick-action__arrow,
.quick-action:focus-visible .quick-action__arrow {
  transform: translateX(-0.1rem);
  color: var(--brand-600);
  border-color: rgba(37, 99, 235, 0.22);
}

[dir="ltr"] .quick-action:hover .quick-action__arrow,
[dir="ltr"] .quick-action:focus-visible .quick-action__arrow {
  transform: translateX(0.1rem);
}

.quick-action__title {
  font-weight: 800;
  line-height: 1.45;
}

.quick-action__text {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.82rem;
}

.activity-list {
  display: grid;
  gap: 0.65rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.95rem;
  background: rgba(248, 250, 252, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

html[data-theme="modern"] .activity-item,
html[data-theme="modern"] .quick-action {
  background: rgba(30, 41, 59, 0.72);
}

.activity-item__body,
.activity-item__side {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.activity-item__title {
  font-weight: 800;
  line-height: 1.45;
}

.activity-item__subtitle,
.activity-item__meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.activity-item__link {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
}

.status-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.status-pill--accent { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.status-pill--warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.status-pill--danger { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
.status-pill--info { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
.status-pill--neutral { background: rgba(148, 163, 184, 0.16); color: var(--text-muted); }

.chart-bars {
  height: 12.8rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
  padding: 0.3rem 0 0.15rem;
  border-radius: 0.95rem;
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0)),
    repeating-linear-gradient(
      to top,
      rgba(148, 163, 184, 0.08) 0,
      rgba(148, 163, 184, 0.08) 1px,
      transparent 1px,
      transparent 2.35rem
    );
}

.chart-bars__item {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}

.chart-bars__bar {
  width: 100%;
  border-radius: 0.9rem 0.9rem 0.45rem 0.45rem;
  position: relative;
  min-height: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.38rem;
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.chart-bars__bar--primary { background: linear-gradient(180deg, #2563eb, #0f172a); }
.chart-bars__bar--accent { background: linear-gradient(180deg, #22c55e, #14532d); }

.chart-bars__label {
  color: var(--text-muted);
  font-size: 0.74rem;
  text-align: center;
  line-height: 1.4;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: 1.1rem;
  text-align: center;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.85), rgba(241, 245, 249, 0.96));
  border: 1px dashed rgba(148, 163, 184, 0.3);
}

html[data-theme="modern"] .empty-state {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.92));
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.empty-state__text {
  color: var(--text-muted);
  max-width: 28rem;
  line-height: 1.8;
}

.announcement-timeline {
  display: grid;
  gap: 0.8rem;
}

.announcement-timeline--compact {
  gap: 0.85rem;
}

.announcement-timeline__item {
  display: grid;
  grid-template-columns: 4.7rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.announcement-timeline__date {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding-top: 0.75rem;
  color: var(--text-muted);
  position: relative;
}

.announcement-timeline__date::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1rem;
  right: 50%;
  width: 2px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(148, 163, 184, 0));
  transform: translateX(50%);
}

.announcement-timeline__date span {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-main);
}

.announcement-timeline__card {
  padding: 0.9rem 0.95rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.announcement-timeline__card--dashboard {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.announcement-timeline__meta,
.announcement-timeline__footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.announcement-timeline__title {
  margin: 0.55rem 0 0.4rem;
  font-size: 0.97rem;
  font-weight: 850;
  line-height: 1.55;
}

.announcement-timeline__text {
  color: var(--text-muted);
  line-height: 1.8;
  white-space: pre-line;
  font-size: 0.84rem;
}

.announcement-timeline__media {
  margin-top: 0.7rem;
}

.announcement-timeline__media img {
  max-width: 100%;
  display: block;
  border-radius: 0.95rem;
}

.dashboard-panel--announcements {
  margin-top: 0.4rem;
}

.dashboard-announcement-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.95fr);
  gap: 0.95rem;
  align-items: start;
}

.dashboard-announcement-board__primary,
.dashboard-announcement-board__sidebar {
  min-width: 0;
}

.dashboard-announcement-board__sidebar .announcement-timeline__archive {
  margin-top: 0;
  padding: 0.9rem;
  border-top: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.72), rgba(241, 245, 249, 0.92));
}

html[data-theme="modern"] .dashboard-announcement-board__sidebar .announcement-timeline__archive {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.9));
}

.announcement-timeline__archive {
  margin-top: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.announcement-timeline__archive--summary {
  display: grid;
  gap: 0.85rem;
}

.announcement-timeline__archive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.announcement-timeline__archive-header strong {
  font-size: 0.95rem;
  font-weight: 800;
}

.announcement-timeline__archive-text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.84rem;
}

.announcement-timeline__archive-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.76);
}

html[data-theme="modern"] .announcement-timeline__archive-stat {
  background: rgba(15, 23, 42, 0.52);
}

.announcement-timeline__archive-stat span {
  color: var(--text-muted);
}

.announcement-timeline__archive-stat strong {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-main);
}

.announcement-timeline__archive-link {
  width: 100%;
  justify-content: center;
}

.announcement-timeline__scroller {
  max-height: 28rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-inline-end: 0.35rem;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

body.dashboard-page .app-content,
body.dashboard-page .app-content__body,
body.dashboard-page .app-main,
body.dashboard-page .dashboard-panel--announcements,
body.dashboard-page .announcement-timeline__archive,
body.dashboard-page .announcement-timeline__scroller {
  overflow: visible;
}

body.dashboard-page .announcement-timeline__scroller {
  max-height: none;
  padding-inline-end: 0;
  scrollbar-gutter: auto;
}

body.dashboard-page .dashboard-metrics,
body.dashboard-page .dashboard-grid,
body.dashboard-page .quick-actions-grid {
  align-items: stretch;
}

body.dashboard-page .metric-card,
body.dashboard-page .dashboard-panel,
body.dashboard-page .quick-action {
  height: 100%;
}

body.dashboard-page .metric-card,
body.dashboard-page .dashboard-panel,
body.dashboard-page .quick-action,
body.dashboard-page .metric-card__body,
body.dashboard-page .activity-item__side {
  display: flex;
  flex-direction: column;
}

body.dashboard-page .metric-card__body,
body.dashboard-page .quick-action,
body.dashboard-page .activity-list,
body.dashboard-page .chart-bars,
body.dashboard-page .empty-state {
  flex: 1 1 auto;
}

body.dashboard-page .activity-item {
  align-items: stretch;
}

body.dashboard-page .activity-item__side {
  justify-content: space-between;
  align-items: flex-end;
}

body.dashboard-page .chart-bars {
  min-height: 15rem;
}

body.dashboard-page .announcement-timeline--sidebar .announcement-timeline__item {
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0.85rem;
}

body.dashboard-page .announcement-timeline--sidebar .announcement-timeline__date {
  padding-top: 0.75rem;
}

body.dashboard-page .announcement-timeline--sidebar .announcement-timeline__date span {
  font-size: 1.15rem;
}

body.dashboard-page .announcement-timeline--sidebar .announcement-timeline__card {
  padding: 1rem;
}

body.dashboard-page .announcement-timeline--sidebar .announcement-timeline__title {
  font-size: 0.95rem;
}

body.dashboard-page .announcement-timeline--sidebar .announcement-timeline__text {
  font-size: 0.88rem;
  line-height: 1.9;
}

.announcement-timeline__scroller::-webkit-scrollbar {
  width: 0.55rem;
}

.announcement-timeline__scroller::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.36);
  border-radius: 999px;
}

.announcement-timeline__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.app-toast-stack {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2000;
  display: grid;
  gap: 0.75rem;
}

.app-toast {
  min-width: 18rem;
  max-width: 24rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.app-toast--success {
  background: linear-gradient(135deg, #22c55e, #15803d);
}

.app-toast--danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.app-toast--warning {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}

.app-toast__title {
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

html[data-theme="modern"] .table-tools {
  background: rgba(15, 23, 42, 0.9);
}

.table-tools__group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.table-tools__search {
  min-width: 14rem;
}

.table-tools__btn,
.table-tools__select {
  min-height: 2.7rem;
  border-radius: 0.85rem;
}

.table-tools__btn {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.9);
  padding: 0 0.85rem;
  font-weight: 700;
}

html[data-theme="modern"] .table-tools__btn {
  background: rgba(30, 41, 59, 0.92);
  color: #e2e8f0;
}

.table-tools__menu {
  position: relative;
}

.table-tools__columns {
  position: absolute;
  top: calc(100% + 0.45rem);
  inset-inline-end: 0;
  min-width: 14rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.65rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.14);
  display: none;
  z-index: 20;
}

html[data-theme="modern"] .table-tools__columns {
  background: rgba(15, 23, 42, 0.98);
}

.table-tools__columns.show {
  display: block;
}

.permission-toolbar .form-control {
  min-width: min(100%, 22rem);
  flex: 1 1 18rem;
}

.permission-tab.is-active {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.28);
}

.user-admin-readonly {
  margin-bottom: 0;
}

.table-action-stack {
  display: grid;
  gap: 0.6rem;
  min-width: 14rem;
}

.table-action-stack form {
  margin: 0;
}

.table-action-stack__inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}

/* Native file inputs ship a plain gray English "Choose File" button that
   clashes with the RTL admin forms — restyle the selector button so file
   fields read as part of the design system. */
input[type="file"].form-control::file-selector-button {
  border: 0;
  border-inline-end: 1px solid var(--border);
  border-radius: .55rem;
  margin-inline-end: .85rem;
  padding: .42rem .95rem;
  font-weight: 600;
  color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  transition: background .15s ease;
}

input[type="file"].form-control:hover:not(:disabled)::file-selector-button {
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
}

@media (max-width: 991.98px) {

  .table-action-stack__inline {
    grid-template-columns: 1fr;
  }
}

.table-tools__columns label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.35rem;
  border-radius: 0.7rem;
}

.table-tools__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.table-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.table-pagination__info {
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* Opt-in leading «ردیف» (row number) column injected by initEnhancedTables. */
.table-rownum-head,
.table-rownum {
  width: 3rem;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-rownum-head { cursor: default; }

.table-sortable {
  cursor: pointer;
  user-select: none;
}

.table-sortable::after {
  content: "↕";
  font-size: 0.75rem;
  margin-inline-start: 0.35rem;
  opacity: 0.45;
}

.table-sortable[data-sort-dir="asc"]::after { content: "↑"; opacity: 1; }
.table-sortable[data-sort-dir="desc"]::after { content: "↓"; opacity: 1; }

.login-page {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.2), transparent 28rem),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.14), transparent 22rem),
    linear-gradient(135deg, rgba(241, 245, 249, 0.94), rgba(226, 232, 240, 0.96));
}

.login-page .whatsapp-fab,
.login-page .app-footer,
.login-page .app-toast-stack {
  display: none !important;
}

.login-page-row {
  min-height: 100vh;
  align-items: center;
  padding: 1.25rem 0;
}

.login-shell {
  align-items: stretch;
}

.login-showcase__illustration {
  position: relative;
  min-height: 12rem;
  margin: 1rem 0 0.5rem;
}

.login-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  animation: spin 14s linear infinite;
}

.login-orbit--one {
  inset: 0.25rem 18% auto 18%;
  height: 10rem;
}

.login-orbit--two {
  inset: 1.25rem 28% auto 28%;
  height: 8rem;
  animation-direction: reverse;
}

.login-device-card {
  position: relative;
  max-width: 15rem;
  margin: 0 auto;
  padding: 0.9rem;
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
}

.login-device-card__header {
  width: 5rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 auto 0.85rem;
}

.login-device-card__screen {
  display: grid;
  gap: 0.65rem;
}

.login-device-card__screen span {
  display: block;
  height: 2rem;
  border-radius: 0.9rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.32));
}

.login-submit-btn {
  min-height: 2.7rem;
  border-radius: .75rem;
  font-size: 1rem;
  font-weight: 800;
}

.careers-stats,
.careers-filter-grid,
.careers-grid,
.careers-card__meta,
.careers-card__actions,
.careers-card__share,
.careers-detail-grid,
.careers-detail-meta,
.careers-responsibility-grid,
.careers-detail-cta__actions {
  display: grid;
  gap: 0.85rem;
}

.careers-page {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 24rem),
    linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
  min-height: 100%;
}

/* ─── Mining-themed hero band (public careers landing) ───────────
   Visual goal: match the dark,
earth-toned look of the main
   corporate site (zdamining.com). Built from layered linear +
   radial gradients (no external image required) plus an inline-
   SVG dust/rock texture so the page loads instantly and renders
   the same on every device. */
.careers-page--mining { background: #f4f6fb; }

.careers-mining-hero {
  position: relative;
  isolation: isolate; /* keeps the shade layer above the bg, under the content */
  overflow: hidden;
  color: #e2e8f0;
  padding: 4.6rem 0 6rem;
  margin-bottom: 1.8rem;
  /* Default fallback background — used when no hero image is
     uploaded. A real image overrides this via inline style on the
     element. Subtle gold + blue radials over a dark mining base
     read as "earth + ore + sky" without literal stock photos. */
  background:
    radial-gradient(ellipse at 18% 12%, rgba(234, 179, 8, 0.22), transparent 40%),
    radial-gradient(ellipse at 84% 86%, rgba(37, 99, 235, 0.38), transparent 48%),
    linear-gradient(135deg, #0b132a 0%, #122140 45%, #1a2a3f 70%, #2b1d11 100%);
  background-size: cover;
  background-position: center;
}
/* When an admin-uploaded image is in play,
hide the dust texture
   (the picture itself provides the surface detail) — keeps the
   image clean instead of over-decorated. */
.careers-mining-hero--image::before { display: none; }

/* SVG-based pebble/rock texture overlaid via mask — lightweight
   way to suggest the rough surface of a mine without an image. */
.careers-mining-hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23ffffff' fill-opacity='0.7'><circle cx='10' cy='32' r='1.1'/><circle cx='56' cy='14' r='0.9'/><circle cx='118' cy='38' r='1.4'/><circle cx='172' cy='22' r='0.8'/><circle cx='44' cy='90' r='1.2'/><circle cx='96' cy='130' r='1.1'/><circle cx='158' cy='112' r='1.3'/><circle cx='30' cy='162' r='1.0'/><circle cx='184' cy='170' r='1.1'/><circle cx='120' cy='178' r='0.9'/></g></svg>");
  background-size: 240px 240px;
  z-index: -1;
}

/* Top-to-bottom shade that anchors the title against the
   gradient — ensures the white text always has contrast no
   matter where the image's brightest spot lands. */
.careers-mining-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 19, 42, 0.45) 100%);
  z-index: -1;
}

.careers-mining-hero__content {
  position: relative;
  display: grid;
  gap: 1.35rem;
  max-width: 62rem;
}

/* Brand row — logo + eyebrow + title stacked next to a glowing
   circular badge for the logo. Keeps a strong visual anchor
   regardless of whether a hero image is set. */
.careers-mining-hero__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.2rem;
}

.careers-mining-hero__logo {
  width: 90px;
  height: 90px;
  border-radius: 24px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32),
    0 0 0 6px rgba(234, 179, 8, 0.14);
  object-fit: contain;
}

@media (max-width: 560px) {
  .careers-mining-hero__brand { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .careers-mining-hero__logo { width: 76px; height: 76px; }
}

.careers-mining-hero__eyebrow {
  display: inline-block;
  width: fit-content;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.careers-mining-hero__title {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 900;
  line-height: 1.35;
  color: #fafafa;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.careers-mining-hero__subtitle {
  margin: 0;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 2.05;
  color: rgba(226, 232, 240, 0.86);
  max-width: 48rem;
}

.careers-mining-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.4rem;
  max-width: 42rem;
}

.careers-mining-hero__metric {
  padding: 0.95rem 1.1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  text-align: center;
}

.careers-mining-hero__metric strong {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fde68a;
  margin-bottom: 2px;
}

.careers-mining-hero__metric span {
  font-size: 0.82rem;
  color: rgba(226, 232, 240, 0.75);
}

.careers-mining-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: 0.6rem;
  padding: 0.78rem 1.4rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #1a1404;
  box-shadow: 0 12px 28px rgba(234, 179, 8, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.careers-mining-hero__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(234, 179, 8, 0.45);
  color: #1a1404;
}

@media (max-width: 720px) {
  .careers-mining-hero { padding: 2.8rem 0 3.6rem; }
  .careers-mining-hero__metrics { grid-template-columns: 1fr; }
}

.careers-hero,
.careers-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.95fr);
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}

.careers-hero__main,
.careers-hero__aside,
.careers-search-panel,
.careers-process,
.careers-card,
.careers-detail-panel,
.careers-detail-cta {
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.careers-hero__main {
  padding: 1.6rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #e2e8f0;
  display: grid;
  gap: 1.2rem;
}

.careers-hero__eyebrow,
.careers-results__eyebrow,
.careers-badge {
  width: fit-content;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.careers-hero__eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(226, 232, 240, 0.92);
}

.careers-hero__title,
.careers-results__header h2,
.careers-detail-hero__title {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  font-weight: 900;
}

.careers-hero__subtitle,
.careers-results__header p,
.careers-detail-hero__summary,
.careers-detail-panel__header p,
.careers-process__header p,
.careers-detail-cta p {
  margin: 0;
  line-height: 1.95;
}

.careers-hero__subtitle {
  color: rgba(226, 232, 240, 0.8);
  max-width: 52rem;
}

.careers-search-panel,
.careers-process,
.careers-detail-panel,
.careers-detail-cta {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
}

.careers-search-panel__header,
.careers-results__header,
.careers-card__top,
.careers-detail-hero__main,
.careers-detail-panel__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.careers-search-panel__header h2,
.careers-search-panel__title,
.careers-process__header h2,
.careers-detail-panel__header h2,
.careers-detail-cta h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 850;
}

.careers-search-panel--compact {
  margin-bottom: 1.25rem;
}

.careers-search-panel__title {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.careers-search-panel__header p,
.careers-process__header p {
  color: var(--text-soft);
}

.careers-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.careers-filter-grid__full {
  grid-column: 1 / -1;
}

.careers-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.careers-stat-card {
  padding: 1rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.careers-stat-card strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}

.careers-stat-card span {
  color: rgba(226, 232, 240, 0.72);
}

.careers-process__header {
  display: grid;
  gap: 0.4rem;
}

.careers-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.careers-timeline li {
  position: relative;
  padding-inline-start: 1.35rem;
  display: grid;
  gap: 0.25rem;
}

.careers-timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15rem;
  top: 0.4rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.12);
}

.careers-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.46rem;
  top: 1.3rem;
  bottom: -0.8rem;
  width: 1px;
  background: rgba(148, 163, 184, 0.4);
}

.careers-timeline strong {
  font-size: 0.97rem;
}

.careers-timeline span,
.careers-card__summary,
.careers-card__skills p,
.careers-detail-cta__note {
  color: var(--text-soft);
  line-height: 1.9;
}

.careers-results {
  display: grid;
  gap: 1rem;
}

.careers-results__count {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-weight: 800;
}

.careers-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.careers-card {
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.97);
  display: grid;
  gap: 1rem;
}

.careers-card__badges,
.careers-card__actions,
.careers-card__share,
.careers-detail-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.careers-badge--soft {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.careers-badge--accent {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.careers-card__title {
  margin: 0.45rem 0 0;
  font-size: 1.2rem;
  font-weight: 850;
}

.careers-card__capacity {
  padding: 0.55rem 0.8rem;
  border-radius: 1rem;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  font-weight: 800;
  white-space: nowrap;
}

.careers-card__meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.careers-meta-chip {
  padding: 0.85rem 0.95rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.careers-meta-chip strong,
.careers-card__skills strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.88rem;
}

.careers-card__skills {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(37, 99, 235, 0.05);
  border: 1px dashed rgba(37, 99, 235, 0.16);
}

.careers-empty-state {
  padding: 2rem;
  text-align: center;
  border-radius: 1.5rem;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.74);
}

.careers-apply-modal__frame {
  width: 100%;
  min-height: 75vh;
  border: 0;
  background: #fff;
}

.careers-back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 800;
}

.careers-detail-hero__main {
  display: grid;
  align-content: start;
  padding: 1.4rem;
  border-radius: 1.5rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.careers-detail-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.careers-detail-meta__card {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.careers-detail-meta__card strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.86rem;
}

.careers-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.careers-detail-panel {
  padding: 1.25rem;
}

.careers-detail-panel--wide {
  grid-column: span 2;
}

.careers-bullet-list {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: grid;
  gap: 0.55rem;
}

.careers-responsibility-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.careers-responsibility-card {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #f8fafc;
  line-height: 1.9;
}

html[data-theme="modern"] .careers-search-panel,
html[data-theme="modern"] .careers-process,
html[data-theme="modern"] .careers-card,
html[data-theme="modern"] .careers-detail-panel,
html[data-theme="modern"] .careers-detail-cta,
html[data-theme="modern"] .careers-detail-hero__main,
html[data-theme="modern"] .careers-empty-state,
html[data-theme="modern"] .careers-meta-chip,
html[data-theme="modern"] .careers-detail-meta__card,
html[data-theme="modern"] .careers-responsibility-card,
html[data-theme="modern"] .careers-card__skills {
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
}

html[data-theme="modern"] .careers-search-panel__header p,
html[data-theme="modern"] .careers-process__header p,
html[data-theme="modern"] .careers-timeline span,
html[data-theme="modern"] .careers-card__summary,
html[data-theme="modern"] .careers-card__skills p,
html[data-theme="modern"] .careers-detail-hero__summary,
html[data-theme="modern"] .careers-detail-panel__header p,
html[data-theme="modern"] .careers-detail-cta p,
html[data-theme="modern"] .careers-detail-cta__note {
  color: #cbd5e1;
}

:root,
html[data-theme="classic"] {
  --brand: #1976d2;
  --brand-hover: #1565c0;
  --brand-soft: #e3f2fd;
  --brand-gradient: linear-gradient(135deg, #1976d2, #42a5f5);
  --ok: #4caf50;
  --warn: #ffc107;
  --danger: #f44336;
  --bg: #f9f9f9;
  --surface-1: #ffffff;
  --surface-2: #fcfdff;
  --surface-3: #f4f7fb;
  --shadow-2: 0 14px 32px rgba(15, 23, 42, 0.1);
  --shadow-3: 0 24px 56px rgba(15, 23, 42, 0.15);
}

html[data-theme="modern"] {
  --brand: #42a5f5;
  --brand-hover: #1e88e5;
  --brand-soft: #153a63;
  --brand-gradient: linear-gradient(135deg, #42a5f5, #22c55e);
  --ok: #5ad66f;
  --warn: #ffd54f;
  --danger: #ff6b6b;
  --bg: #121826;
  --surface-1: #1b2233;
  --surface-2: #20293d;
  --surface-3: #151d2d;
  --text: #e0e0e0;
  --text-soft: #a9b4c7;
  --border: rgba(148, 163, 184, 0.28);
  --shadow-2: 0 16px 34px rgba(2, 6, 23, 0.5);
  --shadow-3: 0 28px 64px rgba(2, 6, 23, 0.62);
}

html,
body,
.card,
.accordion-item,
.modal-content,
.dropdown-menu,
.dashboard-panel,
.metric-card,
.btn,
.form-control,
.form-select,
.app-sidebar,
.sidebar-section,
.sidebar-group {
  transition:
    background-color var(--duration-mid) var(--easing),
    border-color var(--duration-mid) var(--easing),
    color var(--duration-mid) var(--easing),
    box-shadow var(--duration-mid) var(--easing),
    transform var(--duration-fast) var(--easing);
}

body {
  background-color: var(--bg);
}

.btn {
  min-height: 2.65rem;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
}

.btn-primary,
.btn-primary:disabled {
  background-image: var(--brand-gradient);
  background-color: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 28px rgba(25, 118, 210, 0.2);
}

.btn-primary:hover,
.btn-primary:focus {
  background-image: linear-gradient(135deg, var(--brand-hover), var(--brand));
  background-color: var(--brand-hover);
  border-color: transparent;
  color: #fff;
  filter: saturate(1.05);
}

.btn-outline-primary {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(25, 118, 210, 0.28);
}

html[data-theme="modern"] .btn-outline-primary,
html[data-theme="modern"] .btn-outline-secondary {
  background: rgba(15, 23, 42, 0.36);
}

.status-pill {
  gap: 0.38rem;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid transparent;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.status-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}

.status-pill--accent {
  background: rgba(76, 175, 80, 0.14);
  color: #2e7d32;
  border-color: rgba(76, 175, 80, 0.26);
}

.status-pill--warning {
  background: rgba(255, 193, 7, 0.18);
  color: #9a6700;
  border-color: rgba(255, 193, 7, 0.32);
}

.status-pill--danger {
  background: rgba(244, 67, 54, 0.14);
  color: #c62828;
  border-color: rgba(244, 67, 54, 0.26);
}

.status-pill--info {
  background: rgba(25, 118, 210, 0.14);
  color: #1565c0;
  border-color: rgba(25, 118, 210, 0.24);
}

.status-pill--neutral {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.24);
}

html[data-theme="modern"] .status-pill--accent {
  background: rgba(90, 214, 111, 0.18);
  color: #9bf5aa;
  border-color: rgba(90, 214, 111, 0.28);
}

html[data-theme="modern"] .status-pill--warning {
  background: rgba(255, 213, 79, 0.16);
  color: #ffe082;
  border-color: rgba(255, 213, 79, 0.26);
}

html[data-theme="modern"] .status-pill--danger {
  background: rgba(255, 107, 107, 0.16);
  color: #ff9e9e;
  border-color: rgba(255, 107, 107, 0.24);
}

html[data-theme="modern"] .status-pill--info {
  background: rgba(66, 165, 245, 0.18);
  color: #90caf9;
  border-color: rgba(66, 165, 245, 0.24);
}

html[data-theme="modern"] .status-pill--neutral {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.22);
}

.dashboard-panel,
.metric-card,
.careers-card,
.careers-search-panel,
.careers-process,
.careers-detail-panel,
.careers-detail-cta,
.careers-detail-meta__card,
.careers-meta-chip,
.careers-responsibility-card {
  box-shadow: var(--shadow-2);
}

.metric-card,
.dashboard-panel,
.careers-card,
.careers-search-panel,
.careers-process,
.careers-detail-panel,
.careers-detail-cta,
.careers-detail-meta__card,
.careers-meta-chip,
.careers-responsibility-card,
.careers-stat-card {
  transition:
    transform var(--duration-fast) var(--easing),
    box-shadow var(--duration-mid) var(--easing),
    border-color var(--duration-mid) var(--easing),
    background-color var(--duration-mid) var(--easing);
}

.metric-card:hover,
.dashboard-panel:hover,
.careers-card:hover,
.careers-detail-panel:hover,
.careers-detail-cta:hover,
.careers-detail-meta__card:hover,
.careers-meta-chip:hover,
.careers-responsibility-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

.careers-search-panel .form-control,
.careers-search-panel .form-select {
  min-height: 3rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme="modern"] .careers-search-panel .form-control,
html[data-theme="modern"] .careers-search-panel .form-select {
  background: rgba(15, 23, 42, 0.46);
}

.careers-page {
  background:
    radial-gradient(circle at top right, rgba(66, 165, 245, 0.14), transparent 23rem),
    radial-gradient(circle at bottom left, rgba(76, 175, 80, 0.08), transparent 20rem),
    linear-gradient(180deg, #f9fbff 0%, #eef4fb 100%);
}

html[data-theme="modern"] .careers-page {
  background:
    radial-gradient(circle at top right, rgba(66, 165, 245, 0.14), transparent 22rem),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.08), transparent 20rem),
    linear-gradient(180deg, #121826 0%, #151d2d 100%);
}

.careers-hero__main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(66, 165, 245, 0.22), transparent 22rem),
    linear-gradient(135deg, #10203c, #173155);
}

.careers-hero__main::after {
  content: "";
  position: absolute;
  inset: auto auto -4rem -3rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 66%);
  pointer-events: none;
}

.careers-stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

.careers-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #42a5f5, #66bb6a);
}

.careers-search-panel,
.careers-process,
.careers-detail-panel,
.careers-detail-cta,
.careers-card,
.careers-detail-meta__card,
.careers-meta-chip,
.careers-responsibility-card {
  border-color: rgba(148, 163, 184, 0.2);
}

.careers-search-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.98));
}

.careers-process {
  position: relative;
  overflow: hidden;
}

.careers-process::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #42a5f5, #22c55e);
}

.careers-timeline li {
  padding: 0.2rem 0 0.2rem 1.6rem;
}

.careers-timeline strong {
  font-size: 1rem;
}

.careers-card {
  position: relative;
  overflow: hidden;
  gap: 1.1rem;
}

.careers-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #42a5f5, #22c55e);
  opacity: 0.92;
}

.careers-card__capacity {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.careers-meta-chip,
.careers-detail-meta__card {
  position: relative;
  padding-inline-start: 1.15rem;
}

.careers-meta-chip::before,
.careers-detail-meta__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.36);
}

.careers-meta-chip--employment::before,
.careers-detail-meta__card--employment::before {
  background: linear-gradient(180deg, #42a5f5, #1e88e5);
}

.careers-meta-chip--location::before,
.careers-detail-meta__card--location::before {
  background: linear-gradient(180deg, #66bb6a, #43a047);
}

.careers-meta-chip--experience::before,
.careers-detail-meta__card--experience::before {
  background: linear-gradient(180deg, #ffca28, #ff9800);
}

.careers-meta-chip--manager::before,
.careers-detail-meta__card--capacity::before {
  background: linear-gradient(180deg, #ab47bc, #7e57c2);
}

.careers-card__actions .btn,
.careers-detail-cta__actions .btn {
  min-width: 10rem;
}

.careers-card__share .btn {
  border-radius: 999px;
}

html[data-theme="modern"] .careers-hero__main {
  background:
    radial-gradient(circle at top left, rgba(66, 165, 245, 0.2), transparent 22rem),
    linear-gradient(135deg, #121a2c, #1f2940);
}

html[data-theme="modern"] .careers-search-panel,
html[data-theme="modern"] .careers-process,
html[data-theme="modern"] .careers-card,
html[data-theme="modern"] .careers-detail-panel,
html[data-theme="modern"] .careers-detail-cta,
html[data-theme="modern"] .careers-detail-meta__card,
html[data-theme="modern"] .careers-meta-chip,
html[data-theme="modern"] .careers-responsibility-card {
  border-color: rgba(148, 163, 184, 0.22);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1399.98px) {
  .dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .app-shell {
    height: auto;
    overflow: visible;
  }

  .dashboard-announcement-board {
    grid-template-columns: 1fr;
  }

  .app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 70;
    display: block;
  }

  .app-shell.sidebar-open .app-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .app-sidebar {
    position: fixed;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inset-block: 0;
    right: 0;
    left: auto;
    width: min(20rem, 88vw);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 80;
    min-height: var(--app-viewport-height);
  }

  .app-sidebar__inner {
    min-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
    max-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
  }

  .app-content {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: var(--app-viewport-height);
    overflow: visible;
  }

  [dir="ltr"] .app-content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  [dir="ltr"] .app-sidebar {
    inset-inline-start: 0;
    inset-inline-end: auto;
    left: 0;
    right: auto;
    transform: translateX(-100%);
  }

  .app-shell.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .app-menu-toggle {
    display: inline-flex;
  }

  .dashboard-hero,
.dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-panel--wide,
.dashboard-panel--span-7,
.dashboard-panel--span-5 {
    grid-column: auto;
  }

  .careers-hero,
.careers-detail-hero,
.careers-grid,
.careers-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .app-sidebar-backdrop {
    display: none;
  }

  .app-sidebar {
    width: 15rem;
    transform: none;
    right: 0;
    left: auto;
  }

  [dir="ltr"] .app-sidebar {
    left: 0;
    right: auto;
    transform: none;
  }

  .app-content {
    margin-right: 15rem;
    width: calc(100% - 15rem);
    max-width: calc(100% - 15rem);
  }

  [dir="ltr"] .app-content {
    margin-left: 15rem;
    margin-right: 0;
  }

  .app-menu-toggle {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .dashboard-metrics,
.quick-actions-grid,
.careers-stats,
.careers-filter-grid,
.careers-detail-meta,
.careers-responsibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-topbar {
    padding: calc(0.9rem + var(--app-safe-top)) calc(1rem + var(--app-safe-right)) 0.9rem calc(1rem + var(--app-safe-left));
  }

  .app-main {
    padding: 1rem calc(1rem + var(--app-safe-right)) calc(1rem + var(--app-safe-bottom)) calc(1rem + var(--app-safe-left));
  }

  .app-footer {
    padding: 0.7rem calc(1rem + var(--app-safe-right)) calc(0.9rem + var(--app-safe-bottom)) calc(1rem + var(--app-safe-left));
  }

  .app-topbar__actions {
    gap: 0.5rem;
  }

  .topbar-dropdown {
    min-width: min(21rem, calc(100vw - 2rem));
  }

  .profile-chip__meta {
    display: none;
  }

  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    padding: 1rem;
  }

  .dashboard-hero__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    gap: 0.75rem;
  }

  .dashboard-panel,
.dashboard-panel--chart {
    padding: 0.95rem 1rem;
  }

  .quick-action {
    padding: 0.9rem 0.95rem;
  }

  .chart-bars {
    height: 11.5rem;
  }

  .announcement-timeline__archive-stat {
    padding: 0.68rem 0.78rem;
  }
}

@media (max-width: 767.98px) {
  .dashboard-metrics,
.quick-actions-grid,
.careers-stats,
.careers-filter-grid,
.careers-detail-meta,
.careers-responsibility-grid {
    grid-template-columns: 1fr;
  }

  .announcement-timeline__item {
    grid-template-columns: 1fr;
  }

  .announcement-timeline__date {
    justify-items: start;
    padding-top: 0;
  }

  .announcement-timeline__date::after {
    display: none;
  }

  .dashboard-announcement-board__sidebar .announcement-timeline__archive {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .dashboard-announcement-board__sidebar .announcement-timeline__archive--summary {
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.72), rgba(241, 245, 249, 0.92));
  }

  .dashboard-hero {
    padding: 0.95rem;
    margin-bottom: 0.8rem;
  }

  .dashboard-hero__copy {
    gap: 0.35rem;
  }

  .dashboard-hero__title {
    font-size: 1.15rem;
    line-height: 1.45;
  }

  .dashboard-hero__text {
    font-size: 0.84rem;
    line-height: 1.7;
  }

  .dashboard-hero__summary {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .dashboard-hero-card {
    padding: 0.72rem 0.8rem;
  }

  .dashboard-metrics,
.dashboard-grid,
.announcement-timeline {
    gap: 0.7rem;
  }

  .metric-card {
    padding: 0.82rem 0.9rem;
    gap: 0.7rem;
  }

  .metric-card__icon {
    width: 2.45rem;
    height: 2.45rem;
    flex-basis: 2.45rem;
  }

  .metric-card__value {
    font-size: 1.15rem;
  }

  .dashboard-panel,
.dashboard-panel--chart {
    padding: 0.9rem;
  }

  .dashboard-panel__header {
    gap: 0.7rem;
    margin-bottom: 0.7rem;
  }

  .dashboard-panel__title {
    font-size: 0.96rem;
  }

  .dashboard-panel__subtitle {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .quick-action {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.82rem 0.9rem;
  }

  .quick-action__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.7rem;
  }

  .quick-action__arrow {
    display: none;
  }

  .quick-action__title {
    font-size: 0.92rem;
  }

  .quick-action__text {
    font-size: 0.8rem;
  }

  .activity-item {
    gap: 0.6rem;
    padding: 0.8rem 0.82rem;
  }

  .chart-bars {
    height: 10.4rem;
    gap: 0.42rem;
  }

  .chart-bars__label {
    font-size: 0.7rem;
  }

  .empty-state {
    min-height: 7.75rem;
    padding: 0.95rem;
  }

  .announcement-timeline__card {
    padding: 0.85rem 0.9rem;
  }

  .announcement-timeline__title {
    margin-top: 0.48rem;
    font-size: 0.92rem;
  }

  .announcement-timeline__text {
    font-size: 0.81rem;
    line-height: 1.7;
  }

  .announcement-timeline__archive--summary {
    gap: 0.75rem;
  }

  .announcement-timeline__archive-header strong {
    font-size: 0.9rem;
  }

  .announcement-timeline__archive-text {
    font-size: 0.8rem;
    line-height: 1.65;
  }

  .announcement-timeline__archive-stat {
    padding: 0.62rem 0.74rem;
  }

  .careers-detail-grid {
    display: flex;
    flex-direction: column;
  }

  .careers-detail-panel,
.careers-detail-panel--wide,
.careers-detail-panel__content,
.careers-detail-panel__content p,
.careers-bullet-list,
.careers-bullet-list li,
.careers-responsibility-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .careers-detail-panel--wide {
    grid-column: auto;
  }

  .chart-bars {
    height: 12rem;
    gap: 0.45rem;
  }

  .activity-item,
.dashboard-panel__header,
.table-tools,
.table-tools__group,
.table-tools__footer {
    flex-direction: column;
    align-items: stretch;
  }

  body.dashboard-page .activity-item__side {
    align-items: stretch;
  }

  .app-topbar__title small,
.topbar-utility-btn span {
    display: none;
  }

  .app-footer {
    padding: 0.9rem 1rem 1.2rem;
  }

  .login-page-row {
    min-height: auto;
    padding: 0.5rem 0;
  }

  .login-shell {
    gap: 0;
  }

  .login-showcase {
    padding: 1rem 1rem 0;
  }

  .login-showcase__surface {
    padding-bottom: 0.5rem;
  }

  .login-showcase__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .login-showcase__illustration {
    min-height: 7rem;
    margin-top: 0.5rem;
  }

  .login-orbit {
    display: none;
  }

  .login-device-card {
    max-width: 12rem;
  }
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
  body.dashboard-page {
    --dashboard-topbar-offset: calc(5.35rem + var(--app-safe-top));
  }

  body.dashboard-page .app-topbar {
    inset-inline-start: 0;
  }

  html,
body,
.app-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-content,
.app-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  [dir="ltr"] .app-content {
    margin-left: 0;
    margin-right: 0;
  }

  [dir="ltr"] .app-content,
[dir="ltr"] .app-content__body,
[dir="ltr"] .app-main,
[dir="ltr"] .dashboard-hero,
[dir="ltr"] .dashboard-metrics,
[dir="ltr"] .dashboard-grid,
[dir="ltr"] .dashboard-panel,
[dir="ltr"] .metric-card,
[dir="ltr"] .announcement-timeline,
[dir="ltr"] .announcement-timeline__item,
[dir="ltr"] .announcement-timeline__card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app-sidebar {
    min-height: var(--app-viewport-height);
    max-height: var(--app-viewport-height);
  }

  .app-sidebar__inner {
    min-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
    max-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
  }

  .app-topbar {
    gap: 0.75rem;
  }

  .app-topbar__start,
.app-topbar__actions {
    min-width: 0;
    flex-wrap: nowrap;
  }

  .app-topbar__start {
    flex: 1 1 auto;
  }

  .app-topbar__actions {
    flex: 0 1 auto;
    justify-content: flex-end;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .app-topbar__actions::-webkit-scrollbar {
    display: none;
  }

  .app-topbar__title {
    min-width: 0;
  }

  .app-topbar__title strong {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-dropdown {
    max-width: calc(100vw - 1.25rem);
  }

  .modal-dialog {
    margin: 0.75rem;
    max-width: calc(100% - 1.5rem);
  }

  .modal-content,
.modal-body {
    min-width: 0;
    max-width: 100%;
  }

  .org-form-builder-live-preview .table-responsive,
.org-form-table-preview .table-responsive {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select,
.form-control,
.form-select {
    font-size: 16px !important;
  }
}

@media (max-width: 767.98px) {
  body.dashboard-page {
    --dashboard-topbar-offset: calc(4.9rem + var(--app-safe-top));
  }

  .app-topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
  }

  .app-topbar__start,
.app-topbar__actions {
    width: auto;
    min-width: 0;
  }

  .app-topbar__start {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .app-topbar__title {
    min-width: 0;
    flex: 1 1 auto;
  }

  .app-topbar__title strong {
    font-size: 0.98rem;
    max-width: 9.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-topbar__actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 0.2rem;
    overflow: visible;
  }

  .app-topbar__actions > * {
    flex: 0 0 auto;
  }

  .app-menu-toggle {
    flex: 0 0 auto;
  }

  .topbar-icon-btn,
.topbar-utility-btn,
.profile-chip {
    flex: 0 0 auto;
    min-height: 2.75rem;
  }

  .profile-chip {
    width: auto;
    min-width: 2.75rem;
    max-width: 100%;
    justify-content: center;
    margin-inline-start: auto;
  }

  .mobile-account-backdrop,
.mobile-account-sheet {
    display: block;
  }

  .app-main {
    padding: 0.85rem calc(0.85rem + var(--app-safe-right)) calc(0.85rem + var(--app-safe-bottom)) calc(0.85rem + var(--app-safe-left));
  }

  .app-footer {
    gap: 0.45rem;
    text-align: center;
    justify-content: center;
  }

  .app-footer__primary,
.app-footer__secondary {
    width: 100%;
    justify-content: center;
  }

  .dashboard-hero,
.careers-hero,
.careers-detail-hero {
    gap: 1rem;
  }

  .dashboard-hero__content,
.dashboard-hero__summary,
.careers-hero__main,
.careers-search-panel,
.careers-detail-hero__main,
.careers-detail-panel,
.careers-detail-cta {
    padding: 1rem;
  }

  .careers-search-panel__header,
.careers-results__header,
.careers-card__top,
.careers-detail-hero__main,
.careers-detail-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  .careers-card__actions,
.careers-card__share,
.careers-detail-cta__actions {
    grid-template-columns: 1fr;
  }

  .careers-card__actions .btn,
.careers-card__share .btn,
.careers-detail-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .careers-card {
    padding: 1rem;
  }

  .careers-card__meta {
    grid-template-columns: 1fr;
  }

  .table-tools,
.table-tools__group,
.table-tools__footer {
    width: 100%;
  }


  .action-cell {
    min-width: 0;
  }

  .action-cell .btn,
.action-cell form {
    width: 100%;
  }

  .careers-results__count {
    width: 100%;
    justify-content: center;
  }

  .org-form-field-card__header {
    flex-direction: column;
    align-items: stretch;
  }

  .org-form-drag-handle {
    align-self: flex-start;
  }

  .org-form-visual-builder {
    grid-template-columns: 1fr;
  }

  .org-form-visual-builder__panel,
.org-form-visual-builder__canvas-wrap {
    min-height: auto;
  }

  .org-form-visual-builder__panel {
    position: static;
    max-height: none;
  }

  .org-form-builder-canvas {
    min-height: 420px;
  }

  .org-form-builder-surface {
    width: 100%;
    border-radius: 22px;
  }

  .org-form-builder-surface__header,
.org-form-builder-surface__body {
    padding-inline: 1rem;
  }

  .org-form-canvas-node__header {
    position: static;
    margin-bottom: 0.55rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .org-form-builder-checks {
    grid-template-columns: 1fr;
  }

  .org-form-readonly__table,
.org-form-repeater__table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .careers-apply-modal .modal-dialog {
    margin: 0.5rem;
  }

  .careers-apply-modal__frame {
    min-height: 72vh;
  }
}

@media (max-width: 575.98px) {
  .app-sidebar {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .app-sidebar__brand,
.app-sidebar__nav,
.app-sidebar__footer {
    padding-inline: 1rem;
  }

  .app-topbar {
    padding: calc(0.75rem + var(--app-safe-top)) calc(0.75rem + var(--app-safe-right)) 0.75rem calc(0.75rem + var(--app-safe-left));
  }

  .app-topbar__actions {
    gap: 0.35rem;
  }

  .topbar-icon-btn,
.topbar-utility-btn {
    padding-inline: 0.55rem;
  }

  /* The actions row is a horizontal scroller here, so nothing was "broken" —
     but on a 390px phone the account chip started ~6px off-screen, which put
     the single most-used control behind a scroll gesture nobody expects in a
     toolbar. Tightening the gaps and the title's cap makes the row fit. */
  .app-topbar__title strong {
    max-width: 7.5rem;
  }

  .app-topbar__title strong {
    max-width: 7.5rem;
  }

  .sidebar-mini-card,
.dashboard-panel,
.metric-card,
.careers-card,
.permission-toolbar .form-control,
.table-tools__search {
    min-width: 0;
    flex-basis: 100%;
  }

  .table th,
.table td {
    white-space: normal;
  }

  .app-toast {
    min-width: 0;
    max-width: calc(100vw - 2rem);
  }
}

/* Portal refresh: Personnel checklist + delivered equipment */
.checklist-portal,
.equipment-portal {
  display: grid;
  gap: 1rem;
}

.checklist-portal__header,
.equipment-portal__hero {
  position: relative;
  overflow: hidden;
  padding: 1.4rem;
  border-radius: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, rgba(255, 255, 255, 0.82));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 18%, #fff) 0, transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #1d4ed8), color-mix(in srgb, var(--brand) 66%, #0f766e));
  color: #fff;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.14);
}

.checklist-portal__header::after,
.equipment-portal__hero::after {
  content: "";
  position: absolute;
  inset-inline-start: -3rem;
  inset-block-end: -3rem;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.checklist-portal__hero-grid,
.equipment-portal__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, .95fr);
  gap: 1rem;
  align-items: center;
}

.equipment-portal__hero {
  grid-template-columns: minmax(0, 1.8fr) minmax(15rem, .9fr);
}

.checklist-portal__hero-main,
.equipment-portal__hero-main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .8rem;
}

.checklist-portal__eyebrow,
.equipment-portal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.checklist-portal__eyebrow svg,
.equipment-portal__eyebrow svg {
  width: 1rem;
  height: 1rem;
}

.checklist-portal__title,
.equipment-portal__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
}

.checklist-portal__subtitle,
.equipment-portal__subtitle {
  margin: 0;
  max-width: 54rem;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.9;
}

.checklist-portal__person,
.equipment-portal__hero-side {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .8rem;
  justify-items: stretch;
}

.checklist-portal__identity-card,
.equipment-portal__identity-card {
  display: grid;
  gap: .3rem;
  padding: .95rem 1rem;
  border-radius: 1.2rem;
  background: rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.checklist-portal__identity-card strong,
.equipment-portal__identity-card strong {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  overflow-wrap: anywhere;
}

.checklist-portal__identity-label,
.equipment-portal__identity-label {
  font-size: .76rem;
  color: rgba(255, 255, 255, 0.76);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.checklist-portal__summary,
.equipment-portal__metrics {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .85rem;
}

.checklist-portal__summary-card,
.equipment-portal__metric-card {
  grid-column: span 3;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  min-width: 0;
  padding: 1rem;
  border-radius: 1.3rem;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.checklist-portal__summary-card--progress {
  grid-column: span 6;
  display: grid;
}

.checklist-portal__summary-icon,
.equipment-portal__metric-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(219, 234, 254, 0.94));
  color: var(--brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.checklist-portal__summary-icon svg,
.equipment-portal__metric-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.checklist-portal__summary-copy,
.equipment-portal__metric-copy,
.equipment-portal__meta-chip > div {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.checklist-portal__summary-card--primary,
.equipment-portal__metric-card--primary {
  border-color: color-mix(in srgb, #3b82f6 22%, var(--border));
}

.checklist-portal__summary-card--success,
.equipment-portal__metric-card--accent {
  border-color: color-mix(in srgb, #10b981 22%, var(--border));
}

.checklist-portal__summary-card--warning,
.equipment-portal__metric-card--warning {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
}

.checklist-portal__summary-card--accent {
  border-color: color-mix(in srgb, #8b5cf6 22%, var(--border));
}

.checklist-portal__summary-card--primary .checklist-portal__summary-icon,
.equipment-portal__metric-card--primary .equipment-portal__metric-icon {
  color: #2563eb;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(191, 219, 254, 0.85));
}

.checklist-portal__summary-card--success .checklist-portal__summary-icon,
.equipment-portal__metric-card--accent .equipment-portal__metric-icon {
  color: #059669;
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.96), rgba(167, 243, 208, 0.88));
}

.checklist-portal__summary-card--warning .checklist-portal__summary-icon,
.equipment-portal__metric-card--warning .equipment-portal__metric-icon {
  color: #d97706;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(253, 230, 138, 0.9));
}

.checklist-portal__summary-card--accent .checklist-portal__summary-icon {
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.96), rgba(221, 214, 254, 0.9));
}

.checklist-portal__summary-label,
.checklist-portal__summary-hint,
.checklist-portal__toolbar-note,
.checklist-portal__item-meta,
.checklist-portal__file-time,
.equipment-portal__metric-label,
.equipment-portal__metric-hint,
.equipment-portal__record-category,
.equipment-portal__section-subtitle,
.equipment-portal__note-label {
  color: var(--text-soft);
}

.checklist-portal__summary-value,
.equipment-portal__metric-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.checklist-portal__toolbar {
  border-radius: 1.3rem;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.95));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.checklist-portal__filter {
  min-height: 2.5rem;
  border-radius: 999px;
}

.checklist-portal__filter.is-active {
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

.checklist-portal__item,
.equipment-portal__section,
.equipment-portal__record,
.equipment-portal__empty {
  border-radius: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.96));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.checklist-portal__item {
  padding: 1rem 1.05rem;
}

.checklist-portal__item-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: start;
}

.checklist-portal__item-symbol {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.checklist-portal__item-symbol svg {
  width: 1.35rem;
  height: 1.35rem;
}

.checklist-portal__item-symbol--primary {
  color: #2563eb;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(191, 219, 254, 0.88));
}

.checklist-portal__item-symbol--success {
  color: #059669;
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.96), rgba(167, 243, 208, 0.88));
}

.checklist-portal__item-symbol--warning {
  color: #d97706;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(253, 230, 138, 0.9));
}

.checklist-portal__item-symbol--accent {
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.96), rgba(221, 214, 254, 0.9));
}

.checklist-portal__item-title {
  font-size: 1rem;
}

.checklist-portal__badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.checklist-portal__toggle {
  border-radius: 999px;
  padding-inline: 1rem;
}

.checklist-portal__panel,
.checklist-portal__upload,
.checklist-portal__finalize {
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--surface-1) 96%, #f8fbff);
}

.equipment-portal__section {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.equipment-portal__section-head,
.equipment-portal__section-title-wrap,
.equipment-portal__record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}

.equipment-portal__section-title-wrap {
  justify-content: flex-start;
}

.equipment-portal__section-icon,
.equipment-portal__meta-icon,
.equipment-portal__empty-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-grid;
  place-items: center;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(224, 242, 254, 0.88));
}

.equipment-portal__section-icon svg,
.equipment-portal__meta-icon svg,
.equipment-portal__empty-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.equipment-portal__section-title,
.equipment-portal__record-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.equipment-portal__section-count,
.equipment-portal__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding-inline: .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, #eff6ff);
  color: var(--brand);
  font-weight: 800;
}

.equipment-portal__record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.equipment-portal__record {
  padding: 1rem;
  display: grid;
  gap: .9rem;
}

.equipment-portal__record--returnable {
  border-color: color-mix(in srgb, #f59e0b 22%, var(--border));
}

.equipment-portal__record-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.equipment-portal__meta-chip {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .8rem .85rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-1) 96%, #f8fbff);
  border: 1px solid color-mix(in srgb, var(--brand) 8%, var(--border));
}

.equipment-portal__meta-chip strong,
.equipment-portal__flag,
.equipment-portal__attachment-link {
  color: var(--text);
}

.equipment-portal__record-flags,
.equipment-portal__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.equipment-portal__flag {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  font-size: .84rem;
  font-weight: 700;
}

.equipment-portal__flag.is-active {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.equipment-portal__note-block {
  padding: .85rem .95rem;
  border-radius: 1rem;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.08);
}

.equipment-portal__note-block--soft {
  background: rgba(15, 118, 110, 0.05);
  border-color: rgba(15, 118, 110, 0.08);
}

.equipment-portal__note-block p {
  margin: .35rem 0 0;
  line-height: 1.85;
}

.equipment-portal__attachment-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-1) 98%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
}

.equipment-portal__attachment-link svg {
  width: 1rem;
  height: 1rem;
}

.equipment-portal__empty {
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}

html[data-theme="modern"] .checklist-portal__header,
html[data-theme="modern"] .equipment-portal__hero {
  border-color: rgba(96, 165, 250, 0.22);
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.34);
}

html[data-theme="modern"] .checklist-portal__summary-card,
html[data-theme="modern"] .checklist-portal__toolbar,
html[data-theme="modern"] .checklist-portal__item,
html[data-theme="modern"] .equipment-portal__section,
html[data-theme="modern"] .equipment-portal__record,
html[data-theme="modern"] .equipment-portal__empty {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.92));
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.24);
}

html[data-theme="modern"] .checklist-portal__title,
html[data-theme="modern"] .equipment-portal__title,
html[data-theme="modern"] .checklist-portal__identity-card strong,
html[data-theme="modern"] .equipment-portal__identity-card strong {
  color: #fff;
}

html[data-theme="modern"] .checklist-portal__summary-value,
html[data-theme="modern"] .equipment-portal__metric-value,
html[data-theme="modern"] .equipment-portal__record-title,
html[data-theme="modern"] .equipment-portal__section-title {
  color: #f8fafc;
}

html[data-theme="modern"] .equipment-portal__meta-chip,
html[data-theme="modern"] .checklist-portal__panel,
html[data-theme="modern"] .checklist-portal__upload,
html[data-theme="modern"] .checklist-portal__finalize,
html[data-theme="modern"] .equipment-portal__attachment-link {
  background: rgba(15, 23, 42, 0.84);
  border-color: rgba(148, 163, 184, 0.16);
}

@media (max-width: 991.98px) {
  .checklist-portal__hero-grid,
.equipment-portal__hero {
    grid-template-columns: 1fr;
  }

  .checklist-portal__summary-card,
.equipment-portal__metric-card {
    grid-column: span 6;
  }

  .checklist-portal__summary-card--progress {
    grid-column: span 12;
  }

  .equipment-portal__record-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .checklist-portal__header,
.equipment-portal__hero {
    padding: 1.1rem;
    border-radius: 1.35rem;
  }

  .checklist-portal__summary,
.equipment-portal__metrics {
    grid-template-columns: 1fr;
  }

  .checklist-portal__summary-card,
.checklist-portal__summary-card--progress,
.equipment-portal__metric-card {
    grid-column: auto;
  }

  .checklist-portal__item-head {
    grid-template-columns: 1fr;
  }

  .checklist-portal__item-symbol {
    width: 2.75rem;
    height: 2.75rem;
  }

  .equipment-portal__record-meta {
    grid-template-columns: 1fr;
  }

  .equipment-portal__empty {
    flex-direction: column;
    align-items: flex-start;
  }
}

.equipment-admin {
  display: grid;
  gap: 1rem;
}

.equipment-admin__person-cell span,
.equipment-admin__item-cell span {
  color: var(--text-soft);
}

.equipment-admin__field {
  grid-column: span 3;
  min-width: 0;
}

.equipment-admin__field--personnel {
  display: flex;
  flex-direction: column;
}

.equipment-admin__personnel-picker {
  display: grid;
  gap: .55rem;
}

.equipment-admin__personnel-search {
  min-height: 3rem;
}

.equipment-admin__field--switch {
  grid-column: span 6;
}

.equipment-admin__report-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  justify-content: flex-end;
}

.equipment-admin__report-hint {
  margin-inline-end: auto;
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.8;
}

.equipment-admin__person-cell,
.equipment-admin__item-cell {
  display: grid;
  gap: .18rem;
}

.equipment-admin__person-cell strong,
.equipment-admin__item-cell strong {
  color: var(--text);
}

.equipment-admin__inline-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}

.equipment-admin__inline-chip {
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
}

.equipment-admin__pagination .page-link {
  border-radius: .85rem;
  margin-inline: .18rem;
  border-color: color-mix(in srgb, var(--brand) 10%, var(--border));
}

.equipment-report__hero {
  display: grid;
  gap: 1.25rem;
}

.equipment-report__title {
  font-size: 1.4rem;
}

.equipment-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.equipment-report__identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}

.equipment-report__identity-card {
  display: grid;
  gap: .25rem;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  border-radius: 1.1rem;
  background: rgba(248, 250, 252, .8);
}

.equipment-report__identity-label {
  color: var(--text-soft);
  font-size: .83rem;
  font-weight: 700;
}

.equipment-report__table th,
.equipment-report__table td {
  white-space: nowrap;
}

.equipment-report-print-body {
  margin: 0;
  background: #fff;
  color: #0f172a;
  font-family: "GhaemiUIFont", Vazirmatn, IRANSansX, Tahoma, sans-serif;
}

.equipment-report-print {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  direction: rtl;
}

.equipment-report-print__header {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.equipment-report-print__header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}

.equipment-report-print__header p {
  margin: 0;
  color: #475569;
}

.equipment-report-print__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  font-size: 14px;
}

.equipment-report-print__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.equipment-report-print__summary-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
}

.equipment-report-print__summary-card span,
.equipment-report-print__summary-card small {
  color: #64748b;
}

.equipment-report-print__summary-card strong {
  font-size: 22px;
  font-weight: 900;
}

.equipment-report-print__table {
  width: 100%;
  border-collapse: collapse;
}

.equipment-report-print__table th,
.equipment-report-print__table td {
  padding: 10px 8px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  text-align: right;
  vertical-align: top;
}

.equipment-report-print__table thead th {
  background: #eff6ff;
  font-weight: 800;
}

html[data-theme="modern"] .equipment-admin__person-cell strong,
html[data-theme="modern"] .equipment-admin__item-cell strong {
  color: #f8fafc;
}

@media (max-width: 991.98px) {

  .equipment-admin__field {
    grid-column: span 6;
  }

  .equipment-admin__field--switch {
    grid-column: span 12;
  }
}

@media (max-width: 767.98px) {

  .equipment-admin__field,
.equipment-admin__field--switch {
    grid-column: auto;
  }

  .equipment-admin__report-tools {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .equipment-admin__report-tools .btn {
    width: 100%;
  }
}

@media print {
  .equipment-report-print {
    max-width: none;
    padding: 0;
  }
}

.reviewer-list { row-gap: .75rem !important; }

.reviewer-card {
  position: relative;
  padding: 1rem;
  border-radius: .9rem;
  border: 1px solid rgba(148, 163, 184, .2);
  background: #fff;
}
.reviewer-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0;
  width: 4px; height: 100%;
  border-radius: 4px 0 0 4px;
  background: rgba(148, 163, 184, .35);
}
.reviewer-card--approved::before { background: #16a34a; }
.reviewer-card--rejected::before { background: #dc2626; }
.reviewer-card--needsfollowup::before { background: #0891b2; }
.reviewer-card--pending::before { background: #d97706; }

.reviewer-card__note {
  margin-top: .85rem;
  padding: .65rem .8rem;
  border-radius: .6rem;
  background: rgba(248, 250, 252, .75);
  border: 1px dashed rgba(148, 163, 184, .25);
  font-size: .9rem;
}
.reviewer-card__note-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: #64748b;
  margin-bottom: .15rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.reviewer-decision-form {
  padding-top: .8rem;
  border-top: 1px dashed rgba(148, 163, 184, .25);
}

[data-theme="modern"] .reviewer-card,
:root.dark-mode .reviewer-card {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(148, 163, 184, .14);
}
[data-theme="modern"] .reviewer-card__note,
:root.dark-mode .reviewer-card__note {
  background: rgba(15, 23, 42, .25);
  border-color: rgba(148, 163, 184, .18);
}

.reviewer-card--cancelled::before { background: #94a3b8; }
.reviewer-card--is-cancelled { opacity: .72; }
.reviewer-card--is-cancelled .fw-semibold { text-decoration: line-through; text-decoration-color: rgba(148,163,184,.7); }
.reviewer-card__note--decision {
  background: rgba(13, 110, 253, .06);
  border-style: solid;
  border-color: rgba(13, 110, 253, .25);
}
.reviewer-card__cancel {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px dashed rgba(148, 163, 184, .25);
}
.reviewer-card__cancel-reason { max-width: 16rem; }

/* ═══════════════════════════════════════════════════════════════
   Table pre-flight: stop the "all rows visible → shrink" jitter
   --------------------------------------------------------------
   The client-side pagination in site.js (initEnhancedTables) hides
   rows beyond the current page on DOMContentLoaded. Until then,
long admin lists (Personnel: 1650 rows,
Checklist admin: same,
WorkGroups: 100+) flash with every row rendered tall — the page
   visibly snaps from huge to compact when the JS finally runs.

   Pre-hide rows 11+ in any table that's eligible for the JS
   enhancement (Bootstrap `.table` without the `data-table-tools="off"`
   opt-out and without form inputs). The JS overrides these display
   styles per row when it sets up real pagination,
so this only
   affects the initial paint. For tables with ≤10 rows nothing is
   hidden; for tables that won't be enhanced at all (forms,
inline
   editors) the :has() guard keeps them unchanged.

   The :has() selector is supported in Chrome 105+,
Safari 15.4+,
Firefox 121+ — fine for an internal admin app on evergreen
   browsers. Browsers without :has() see the old behaviour (jitter
   but no broken layout).

   CRITICAL: the rule must stop applying once the JS takes over —
   the widget shows a page row by CLEARING its inline display,
which
   cannot beat a stylesheet rule. Without the [data-table-enhanced]
   guard every page after the first rendered permanently empty on
   tables whose rows contain no inputs (e.g. checklist admin). */
table.table:not([data-table-tools="off"]):not([data-table-enhanced="1"]):not(:has(input,
textarea,
select)) > tbody > tr:nth-child(n+11) {
  display: none;
}

/* Manager Inbox group — clean badge placement on the parent <summary>.
   Keeps the existing space-between layout (label cluster left,
chevron
   right) but adds a flex container so the aggregate pending badge sits
   right next to the label instead of being pushed away by the chevron. */
.sidebar-group__summary-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.sidebar-group__badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-weight: 800;
}

/* ===== Searchable chip multi-select (zd-tagms) =================================
   Progressive enhancement over a native <select multiple data-tagms> — see
   initTagMultiSelects() in site.js. Theme-aware via the shared design tokens. */
.zd-tagms-native.zd-tagms-native {
    /* Visually remove the native listbox but keep it focusable-by-script and
       posting. Not display:none so assistive tech / validation can still see it. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zd-tagms {
    position: relative;
}

.zd-tagms__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    min-height: calc(2.5rem + 2px);
    height: auto;
    padding: .3rem .5rem;
    cursor: text;
}

.zd-tagms.is-open .zd-tagms__box {
    border-color: var(--brand, #2563eb);
    box-shadow: 0 0 0 .2rem var(--brand-soft, rgba(37, 99, 235, .25));
}

.zd-tagms__chips {
    display: contents;
}

.zd-tagms__empty {
    color: var(--text-soft, #94a3b8);
    font-size: var(--text-sm, .9rem);
    padding-inline: .15rem;
}

.zd-tagms__chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .15rem .25rem .15rem .6rem;
    background: var(--brand-soft, #dbeafe);
    color: var(--brand-hover, #1d4ed8);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--text-sm, .9rem);
    line-height: 1.5;
}

.zd-tagms__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zd-tagms__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.zd-tagms__chip-remove:hover,
.zd-tagms__chip-remove:focus {
    background: rgba(220, 38, 38, .85);
    color: #fff;
    outline: none;
}

.zd-tagms__search {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text, #1e293b);
    font: inherit;
    padding: .2rem .15rem;
}

.zd-tagms__search::placeholder {
    color: var(--text-soft, #94a3b8);
}

/* FIXED, not absolute — and positioned by JS (positionMenu in site.js).
   An absolutely-positioned menu is clipped by the nearest ancestor with `overflow: hidden`, and
   `.zd-form__section` in design-system.css has exactly that (it is what keeps the header gradient
   inside the card's rounded corners). No z-index can defeat a clip, so a tagms sitting near the
   bottom of a form section had its dropdown sliced off at the card edge — reported on the careers
   «حوزه‌های شغلی» field, but every data-tagms in the app was one layout change away from it.
   position:fixed takes the viewport as its containing block, so no ancestor overflow can clip it.
   Verified there is no transform/filter/perspective/contain on any layout ancestor, which would
   otherwise re-anchor a fixed element and break this. z-index clears the Bootstrap modal (1055). */
.zd-tagms__menu {
    position: fixed;
    z-index: 1080;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--surface-1, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .6rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
    padding: .3rem;
}

.zd-tagms__option {
    display: block;
    width: 100%;
    text-align: start;
    padding: .5rem .65rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--text, #1e293b);
    font: inherit;
    cursor: pointer;
}

.zd-tagms__option:hover,
.zd-tagms__option:focus {
    background: var(--brand-soft, #dbeafe);
    color: var(--brand-hover, #1d4ed8);
    outline: none;
}

.zd-tagms__noresults {
    padding: .55rem .65rem;
    color: var(--text-soft, #94a3b8);
    font-size: var(--text-sm, .9rem);
}

/* ── Manual-correction marker (اصلاح تردد) ──────────────────────────────────
   «+» rendered next to punch times that were manually created/edited; used in
   the work-report tables (screen) — print views carry their own copy. */
sup.zd-edited-mark {
  color: #b45309;
  font-weight: 700;
  margin-inline-start: 2px;
}

.cursor-pointer {
  cursor: pointer;
}

/* .zd-copy / .zd-copied / .zd-ua now live in design-system.css alongside the
   other shared primitives. */

/* ── ROOT FIX for the bespoke admin grid shell (.equipment-admin) ─────────────
   The wrapper is `display:grid` with NO explicit grid-template-columns,
so its
   single implicit column is `auto` and grows to the min-content of the widest
   child (a wide table / metric row / hero). On phones that pushed the whole
   content column past the viewport and it got clipped by the shell's
   overflow:hidden — the page "wasn't responsive". Pinning the column to
   minmax(0,
1fr) caps it at the container width and lets children shrink
   (tables then scroll inside their own wrapper). Safe at every width: on
   desktop 1fr already equals the container. */
.equipment-admin {
  grid-template-columns: minmax(0, 1fr);
}

/* ── بیمه تکمیلی (supplementary insurance) — portal/admin uses hse.css for the
   page/hero/form chrome; only the read-only key/value + members table need extras. */
.ins-kv__label { display: block; font-size: .72rem; color: var(--bs-secondary-color, #6c757d); }
.ins-kv__value { font-weight: 600; min-height: 1.4rem; }
.ins-members-edit th,
.ins-members-edit td { vertical-align: middle; }
.ins-members-edit input,
.ins-members-edit select { min-width: 5.5rem; }
.ins-members-table th { white-space: nowrap; }

/* Mobile: turn the wide members tables into one stacked card per member. */
@media (max-width: 820px) {
  .ins-members-edit thead { display: none; }
  .ins-members-edit, .ins-members-edit tbody { display: block; width: 100%; }
  .ins-members-edit tr.ins-member-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    padding: .6rem .7rem .7rem;
    margin-bottom: .75rem;
    background: var(--bs-body-bg, #fff);
  }
  .ins-members-edit td { display: block; border: none !important; padding: 0; }
  .ins-members-edit td::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .15rem;
  }
  .ins-members-edit input, .ins-members-edit select { min-width: 0; width: 100%; }
  .ins-members-edit td.ins-row-num { grid-column: 1 / -1; font-weight: 700; color: var(--bs-primary, #0d6efd) !important; }
  .ins-members-edit td.ins-row-num::before { content: attr(data-label) " "; display: inline; }
  .ins-members-edit td.ins-remove-cell { grid-column: 1 / -1; text-align: end; }
  .ins-members-edit td.ins-remove-cell::before { display: none; }

  .ins-members-table thead { display: none; }
  .ins-members-table, .ins-members-table tbody { display: block; width: 100%; }
  .ins-members-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .6rem;
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem;
    padding: .5rem .6rem; margin-bottom: .6rem;
  }
  .ins-members-table td { display: block; border: none !important; padding: 0; text-align: start; }
  .ins-members-table td::before { content: attr(data-label); display: block; font-size: .68rem; color: var(--bs-secondary-color, #6c757d); }
  .ins-members-table td[data-label=""]::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REQUEST DETAILS · dense read-only form, attachment viewer, sub-tabs, pager
   ═══════════════════════════════════════════════════════════════════════════
   The read-only web view of a submitted form inherited the SUBMIT layout:
   every field on its own full-width row, because the builder's default column
   span is 12. That is right for inputs (they need room to type in) and wrong
   for a finished form, where a six-character value sits alone on a 1200px
   line — reading a 20-field request meant scrolling past a screenful of
   whitespace.

   The fix is content-driven, not per-form: inside the read-only shell the field
   row becomes an auto-filling grid, so as many short values pack onto a line as
   the viewport allows, while the field TYPES that genuinely need full width
   (repeater tables, textareas, rich text, file lists, html blocks) claim the
   whole row. Nothing is hard-coded per form, and the print view is untouched. */

.org-form-readonly-dense .card-body > .row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: .55rem .95rem;
  margin: 0;
}
.org-form-readonly-dense .card-body > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}
/* Block-ish value types take the whole row whatever their builder span says —
   a repeater table or a paragraph cannot share a line with anything. */
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--repeater),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--grid),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--textarea),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--richtext),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--html),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--section),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--divider),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--fileupload),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--multiplefiles),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--imageupload),
.org-form-readonly-dense .card-body > .row > [class*="col-"]:has(> .org-form-field--signature) {
  grid-column: 1 / -1;
}

.org-form-readonly-dense .org-form-field { margin-bottom: 0; }
.org-form-readonly-dense .org-form-readonly__label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-soft, #64748b);
  margin-bottom: .15rem;
  line-height: 1.35;
}
.org-form-readonly-dense .org-form-readonly__value {
  min-height: 0;
  padding: .32rem .6rem;
  border-radius: .55rem;
  font-weight: 600;
  line-height: 1.55;
  background: var(--surface-2, #f8fafc);
  overflow-wrap: anywhere;
}
/* An empty value should read as "nothing here", not as a mystery blank box. */
.org-form-readonly-dense .org-form-readonly__value:empty::before {
  content: "—";
  color: var(--text-soft, #94a3b8);
  font-weight: 500;
}
.org-form-readonly-dense .card { box-shadow: none; }
.org-form-readonly-dense .card-body { padding: .85rem .95rem; }
.org-form-readonly-dense .card + .card { margin-top: .6rem !important; }
.org-form-readonly-dense .card-header { padding: .55rem .95rem; }

/* ── Attachment pills ─────────────────────────────────────────────────────── */
.org-form-file-pill svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.org-form-file-pill { cursor: pointer; max-width: 100%; }
.org-form-file-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-form-file-pill:hover { background: #dbeafe; border-color: #93c5fd; }

/* ── In-page attachment viewer (images) ───────────────────────────────────── */
.zd-att-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, .88);
}
.zd-att-viewer[hidden] { display: none; }
.zd-att-viewer__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  color: #fff;
  background: rgba(15, 23, 42, .55);
  flex-wrap: wrap;
}
.zd-att-viewer__name {
  font-weight: 700;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 12rem;
  min-width: 0;
}
.zd-att-viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-radius: .55rem;
  padding: .35rem .7rem;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.zd-att-viewer__btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.zd-att-viewer__btn svg { width: 1rem; height: 1rem; }
.zd-att-viewer__stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: .8rem;
  overflow: auto;
  min-height: 0;
}
.zd-att-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: .5rem;
  background: #fff;
  cursor: zoom-in;
}
.zd-att-viewer.is-zoomed .zd-att-viewer__stage { place-items: start center; }
.zd-att-viewer.is-zoomed .zd-att-viewer__img {
  max-width: none;
  max-height: none;
  width: auto;
  cursor: zoom-out;
}

/* ── Sub-tabs inside a details tab ────────────────────────────────────────── */
.zd-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .85rem;
  padding: .3rem;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: .8rem;
}
.zd-subtab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  background: transparent;
  color: var(--text-soft, #64748b);
  font-weight: 700;
  font-size: .87rem;
  padding: .45rem .85rem;
  border-radius: .6rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.zd-subtab:hover { background: rgba(255, 255, 255, .75); color: var(--text, #0f172a); }
.zd-subtab.is-active { background: #fff; color: #0f766e; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.zd-subtab__count {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}
.zd-subtab.is-active .zd-subtab__count { background: #ccfbf1; color: #0f766e; }
.zd-subtab__count--attention { background: #fed7aa; color: #b45309; }
/* [hidden] is only a UA rule — any explicit `display` (Bootstrap's .card is
   display:flex, .zd-subtab is inline-flex) outranks it and the element stays
   visible. These have to win. */
.zd-subtab[hidden] { display: none !important; }
[data-subtab-panel][hidden] { display: none !important; }
.zd-subtabs[hidden] { display: none !important; }

/* ── Generic client pager for any list/table ──────────────────────────────── */
.zd-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem .2rem 0;
  border-top: 1px solid var(--border, #e2e8f0);
  margin-top: .5rem;
}
.zd-pager[hidden] { display: none; }
.zd-pager__info { color: var(--text-soft, #64748b); font-size: .8rem; }
.zd-pager__pages { display: flex; gap: .25rem; flex-wrap: wrap; }
.zd-pager__btn {
  min-width: 1.9rem;
  padding: .18rem .5rem;
  border-radius: .45rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-1, #fff);
  color: var(--text-soft, #475569);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.zd-pager__btn:hover:not(:disabled) { border-color: #0f766e; color: #0f766e; }
.zd-pager__btn:disabled { opacity: .45; cursor: default; }
.zd-pager__btn.is-current { background: #0f766e; border-color: #0f766e; color: #fff; }
.zd-pager__gap { color: var(--text-soft, #94a3b8); align-self: center; }

/* ── Row numbers in list tables ───────────────────────────────────────────── */
.zd-rownum-col { width: 3.2rem; text-align: center; }
.zd-rownum {
  text-align: center;
  color: var(--text-soft, #64748b);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zd-rownum-inline { color: var(--text-soft, #94a3b8); font-weight: 800; }

/* Sub-tabs rendered as links (server-side tabs) sit next to the button flavour. */
a.zd-subtab { text-decoration: none; }
a.zd-subtab:hover { text-decoration: none; }

/* The audience picker lives in a narrow column; keep the search box usable no
   matter how long the empty-state message is, or a click lands on the text and
   typing looks broken. */
.zd-tagms__search { min-width: 8rem; flex: 1 1 8rem; }
.zd-tagms__box { cursor: text; }

@media (max-width: 640px) {
  .zd-subtabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .zd-subtab { flex: 0 0 auto; }
  .org-form-readonly-dense .card-body > .row { grid-template-columns: 1fr; }
}