/* =========================
   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) .admin-workspace__stat-value {
  font-family: "GhaemiLatinDigits", "GhaemiInter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "GhaemiUIFont", sans-serif;
}
: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: "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: "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;
}

.settings-company-logo-preview {
  display: block;
  width: auto;
  max-width: 320px;
  max-height: 90px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  background: var(--surface-1);
}

.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;
}

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

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

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

.admin-workspace {
  display: grid;
  gap: 1.5rem;
}

.admin-workspace__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, .2);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.92));
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.admin-workspace__hero-copy {
  display: grid;
  gap: .65rem;
  max-width: 52rem;
}

.admin-workspace__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .42rem .82rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: #1d4ed8;
  font-size: .85rem;
  font-weight: 800;
}

.admin-workspace__title {
  margin: 0;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.15rem);
  font-weight: 900;
  color: var(--text);
}

.admin-workspace__subtitle {
  margin: 0;
  max-width: 48rem;
  color: var(--text-muted);
  line-height: 1.9;
}

.admin-workspace__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.admin-workspace__alert {
  margin-bottom: 0;
}

.admin-workspace__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.admin-workspace__stat-card,
.admin-workspace__card {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}

.admin-workspace__stat-card {
  display: grid;
  gap: .35rem;
  padding: 1.15rem 1.25rem;
}

.admin-workspace__stat-label {
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 700;
}

.admin-workspace__stat-value {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--text);
  font-family: "GhaemiUIFont", Tahoma, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.admin-workspace__stat-hint {
  color: var(--text-muted);
  line-height: 1.8;
}

.admin-workspace__card {
  padding: 1.35rem 1.4rem;
}

.admin-workspace__card--form {
  padding-bottom: 1.5rem;
}

.admin-workspace__section-head,
.admin-workspace__subpanel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-workspace__section-title,
.admin-workspace__subpanel-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--text);
}

.admin-workspace__section-subtitle,
.admin-workspace__subpanel-subtitle {
  margin: .3rem 0 0;
  color: var(--text-muted);
  line-height: 1.8;
}

.admin-workspace__section-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.admin-workspace__badge {
  display: inline-flex;
  align-items: center;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(226, 232, 240, .75);
  color: var(--text);
  font-size: .82rem;
  font-weight: 800;
}

.admin-workspace__subpanel {
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
}

.admin-workspace__logo-preview {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, .35);
  border-radius: 1rem;
  background: rgba(248, 250, 252, .9);
}

.admin-workspace__empty-note {
  margin-bottom: 1rem;
  padding: .95rem 1rem;
  border-radius: 1rem;
  background: rgba(248, 250, 252, .95);
  color: var(--text-muted);
}

.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;
}

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

details.card > summary::after {
  content: "+";
  float: inline-start;
  font-weight: 800;
  margin-inline-start: .5rem;
}

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;
}

/* 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;
  }
}

@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;
}

.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: "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__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 {
    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;
}

.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;
}

.app-topbar__title strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.app-topbar__title small {
  color: var(--text-muted);
}

.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;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
}

.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);
}

.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));
}

.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;
}

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-admin-shell {
  display: grid;
  gap: 1rem;
}

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

.permission-stat {
  padding: 1rem 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.2rem;
}

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

.permission-stat__label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.permission-stat__value {
  font-size: 1.7rem;
  font-weight: 800;
}

.permission-stat__hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.permission-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.permission-toolbar .form-control {
  min-width: min(100%, 22rem);
  flex: 1 1 18rem;
}

.permission-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.permission-tab {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-weight: 700;
}

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

.permission-tab.is-active {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.28);
}

.permission-group-panel {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

html[data-theme="modern"] .permission-group-panel {
  background: rgba(15, 23, 42, 0.76);
}

html[data-theme="modern"] .admin-workspace__stat-card,
html[data-theme="modern"] .admin-workspace__card,
html[data-theme="modern"] .admin-workspace__subpanel {
  background: rgba(15, 23, 42, .78);
}

html[data-theme="modern"] .admin-workspace__hero {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .24), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.88));
}

.permission-group-panel.is-hidden,
.permission-row.is-hidden {
  display: none !important;
}

.permission-group-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.permission-group-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.permission-list {
  display: grid;
}

.permission-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  cursor: pointer;
}

.permission-row:last-child {
  border-bottom: 0;
}

.permission-row--matrix {
  grid-template-columns: minmax(0, 1.4fr) minmax(14rem, 1fr) auto;
  cursor: default;
}

.permission-row__main {
  display: grid;
  gap: 0.18rem;
}

.permission-row__main strong {
  font-size: 0.98rem;
}

.permission-row__main small {
  color: var(--text-muted);
  line-height: 1.7;
}

.permission-row__toggle,
.permission-row__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.permission-row__toggle-label {
  white-space: nowrap;
  font-weight: 700;
}

.permission-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.permission-admin-toolbar__search {
  min-width: min(100%, 18rem);
}

.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;
}

.settings-shell__hero-actions .btn {
  min-width: 7rem;
}

.settings-module-card {
  display: grid;
  gap: 1rem;
}

.settings-kpi .admin-workspace__stat-value {
  line-height: 1.2;
  word-break: break-word;
}

.settings-permission-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.settings-permission-pill.is-allowed {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.settings-permission-pill.is-readonly {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

.settings-logo-stage {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
}

.settings-company-logo-preview {
  max-width: min(100%, 18rem);
  max-height: 9rem;
  object-fit: contain;
}

.settings-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.settings-inline-note {
  padding: 0.8rem 0.95rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.82);
  color: var(--text-muted);
  line-height: 1.8;
}

.settings-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.25rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  font-weight: 800;
}

.settings-status-chip--success {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.settings-status-chip--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.settings-status-log {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.82);
  overflow: hidden;
}

.settings-status-log summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
}

.settings-status-log pre {
  margin: 0;
  padding: 0 1rem 1rem;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
  font-family: inherit;
  line-height: 1.9;
}

.permission-source-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.permission-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.permission-badge--direct {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.permission-badge--role {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.permission-badge--effective {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.permission-badge--muted {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

.permission-role-summary {
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 0.9rem;
  background: rgba(248, 250, 252, 0.7);
  display: grid;
  gap: 0.35rem;
}

html[data-theme="modern"] .permission-role-summary {
  background: rgba(15, 23, 42, 0.55);
}

@media (max-width: 991.98px) {
  .admin-workspace__hero,
  .admin-workspace__section-head,
  .admin-workspace__subpanel-head {
    flex-direction: column;
  }

  .permission-summary-grid {
    grid-template-columns: 1fr;
  }

  .permission-row--matrix {
    grid-template-columns: 1fr;
  }

  .permission-source-badges,
  .permission-row__toggle-label {
    margin-top: 0.25rem;
  }

  .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;
}

.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;
}

.recruitment-workspace,
.recruitment-editor,
.recruitment-review-grid,
.recruitment-record-list,
.recruitment-activity-list,
.recruitment-editor__side,
.recruitment-preview-card__grid {
  display: grid;
  gap: 1rem;
}

.recruitment-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.95fr);
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 252, 0.98));
  color: #0f172a;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.recruitment-hero__main,
.recruitment-public-card,
.recruitment-flow,
.recruitment-editor__header {
  display: grid;
  gap: 1rem;
}

.recruitment-hero__header,
.recruitment-hero__actions,
.recruitment-public-card__actions,
.recruitment-toolbar,
.recruitment-filter-group,
.recruitment-record-card__top,
.recruitment-record-card__actions,
.recruitment-table__actions,
.recruitment-editor__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.recruitment-hero__eyebrow,
.recruitment-editor__eyebrow,
.recruitment-preview-card__eyebrow,
.recruitment-public-card__label {
  width: fit-content;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 800;
}

.recruitment-hero__title,
.recruitment-editor__title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 900;
}

.recruitment-hero__subtitle,
.recruitment-editor__subtitle,
.recruitment-public-card__text,
.recruitment-form-section__header p {
  margin: 0;
  line-height: 1.95;
  color: #475569;
}

.recruitment-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recruitment-flow__item,
.recruitment-review-card,
.recruitment-record-card,
.recruitment-activity-item,
.recruitment-preview-card,
.recruitment-preview-tips {
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.recruitment-flow__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.18);
}

.recruitment-flow__item strong {
  color: #0f172a;
}

.recruitment-flow__item small {
  color: #64748b;
  line-height: 1.8;
}

.recruitment-flow__step {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: #fff;
  font-weight: 900;
}

.recruitment-public-card {
  height: 100%;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  color: var(--text);
}

.recruitment-public-card__title,
.recruitment-form-section__header h2,
.recruitment-preview-tips h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 850;
}

.recruitment-public-card__notes {
  margin: 0;
  padding-inline-start: 1.1rem;
  color: var(--text-soft);
  line-height: 1.9;
}

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

.recruitment-panel--wide {
  grid-column: span 2;
}

.recruitment-toolbar {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.recruitment-toolbar__search {
  min-width: min(100%, 18rem);
  flex: 1 1 18rem;
}

.recruitment-filter-chip {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  border-radius: 999px;
  padding: 0.52rem 0.9rem;
  font-weight: 700;
}

.recruitment-filter-chip.is-active {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.24);
}

.recruitment-review-grid,
.recruitment-record-list {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.recruitment-review-card,
.recruitment-record-card,
.recruitment-activity-item {
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}

.recruitment-review-card__top,
.recruitment-record-card__top,
.recruitment-activity-item {
  align-items: flex-start;
  justify-content: space-between;
}

.recruitment-review-card__meta,
.recruitment-record-card__meta,
.recruitment-record-card__text,
.recruitment-activity-item__main span,
.recruitment-activity-item__side small {
  color: var(--text-soft);
  line-height: 1.8;
}

.recruitment-review-card__link {
  color: #1d4ed8;
  font-weight: 800;
}

.recruitment-record-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 850;
}

.recruitment-record-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  color: var(--text-soft);
  font-size: 0.88rem;
}

.recruitment-activity-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.recruitment-activity-item__main,
.recruitment-activity-item__side {
  display: grid;
  gap: 0.2rem;
}

.recruitment-activity-item__side {
  justify-items: end;
  text-align: end;
}

.recruitment-table th {
  white-space: nowrap;
  font-weight: 800;
}

.recruitment-select-group,
.recruitment-stage-summary,
.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;
}

.recruitment-select-group {
  grid-template-columns: repeat(3, minmax(0, 12rem));
  width: 100%;
}

.recruitment-stage-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.recruitment-stage-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  text-align: start;
  color: var(--text);
}

.recruitment-stage-card strong {
  display: block;
  font-size: 1.2rem;
}

.recruitment-stage-card span {
  color: var(--text-soft);
  font-size: 0.88rem;
}

.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"] .recruitment-stage-card,
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"] .recruitment-stage-card span,
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;
}

.recruitment-editor__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.recruitment-form-section + .recruitment-form-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.recruitment-switch {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.recruitment-preview-card,
.recruitment-preview-tips {
  padding: 0.2rem;
}

.recruitment-preview-card__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
}

.recruitment-preview-card__summary,
.recruitment-preview-card__grid small,
.recruitment-preview-tips li {
  color: var(--text-soft);
  line-height: 1.9;
}

.recruitment-preview-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recruitment-preview-card__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recruitment-preview-card__grid strong {
  font-size: 0.95rem;
}

.recruitment-preview-card__full {
  grid-column: span 2;
}

html[data-theme="modern"] .recruitment-filter-chip,
html[data-theme="modern"] .recruitment-flow__item,
html[data-theme="modern"] .recruitment-public-card,
html[data-theme="modern"] .recruitment-review-card,
html[data-theme="modern"] .recruitment-record-card,
html[data-theme="modern"] .recruitment-activity-item,
html[data-theme="modern"] .recruitment-preview-card,
html[data-theme="modern"] .recruitment-preview-tips,
html[data-theme="modern"] .recruitment-switch {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
}

html[data-theme="modern"] .recruitment-record-card__meta,
html[data-theme="modern"] .recruitment-record-card__text,
html[data-theme="modern"] .recruitment-review-card__meta,
html[data-theme="modern"] .recruitment-activity-item__main span,
html[data-theme="modern"] .recruitment-activity-item__side small,
html[data-theme="modern"] .recruitment-preview-card__summary,
html[data-theme="modern"] .recruitment-preview-card__grid small,
html[data-theme="modern"] .recruitment-preview-tips li,
html[data-theme="modern"] .recruitment-public-card__text,
html[data-theme="modern"] .recruitment-public-card__notes {
  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,
.recruitment-review-card,
.recruitment-record-card,
.recruitment-activity-item,
.recruitment-stage-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,
.recruitment-review-card,
.recruitment-record-card,
.recruitment-activity-item,
.recruitment-stage-card,
.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,
.recruitment-review-card:hover,
.recruitment-record-card:hover,
.recruitment-activity-item:hover,
.recruitment-stage-card: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);
}

.recruitment-hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top left, rgba(66, 165, 245, 0.16), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 247, 252, 0.98));
  color: #0f172a;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.recruitment-hero::after {
  content: "";
  position: absolute;
  inset: auto -8rem -9rem auto;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14), transparent 62%);
  pointer-events: none;
}

.recruitment-flow {
  position: relative;
  gap: 0.9rem;
}

.recruitment-flow__item {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 1.05rem;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(10px);
}

.recruitment-flow__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #60a5fa, #22c55e);
}

.recruitment-flow__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

.recruitment-public-card {
  border: 1px solid rgba(66, 165, 245, 0.12);
}

.recruitment-public-card__url .form-control,
.recruitment-toolbar__search,
.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"] .recruitment-public-card__url .form-control,
html[data-theme="modern"] .recruitment-toolbar__search,
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);
}

.recruitment-review-card,
.recruitment-record-card,
.recruitment-activity-item {
  position: relative;
  overflow: hidden;
}

.recruitment-review-card::before,
.recruitment-record-card::before,
.recruitment-activity-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(34, 197, 94, 0.8));
  opacity: 0.9;
}

.recruitment-stage-card {
  position: relative;
  overflow: hidden;
  padding: 1rem 1rem 1rem 1.15rem;
  text-align: right;
}

.recruitment-stage-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.35rem;
  background: rgba(25, 118, 210, 0.5);
}

.recruitment-stage-card strong {
  font-size: 1.35rem;
  margin-bottom: 0.18rem;
}

.recruitment-stage-card--warning::before {
  background: linear-gradient(180deg, #ffd54f, #ffb300);
}

.recruitment-stage-card--info::before {
  background: linear-gradient(180deg, #64b5f6, #1e88e5);
}

.recruitment-stage-card--accent::before {
  background: linear-gradient(180deg, #66bb6a, #2e7d32);
}

.recruitment-stage-card--primary::before {
  background: linear-gradient(180deg, #42a5f5, #1565c0);
}

.recruitment-hero__copy,
.recruitment-collapse__summary-main {
  display: grid;
  gap: 0.35rem;
}

.recruitment-collapse {
  padding: 0;
  overflow: hidden;
}

.recruitment-collapse > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

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

.recruitment-collapse__summary-side,
.recruitment-panel__content-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.recruitment-collapse__summary-side {
  flex-shrink: 0;
}

.recruitment-collapse__summary-main .dashboard-panel__title,
.recruitment-collapse__summary-main .dashboard-panel__subtitle {
  margin: 0;
}

.recruitment-collapse__summary:hover {
  background: rgba(248, 250, 252, 0.7);
}

.recruitment-collapse__chevron {
  width: 0.9rem;
  height: 0.9rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--easing);
  margin-top: 0.35rem;
  opacity: 0.72;
}

.recruitment-collapse[open] .recruitment-collapse__chevron {
  transform: rotate(225deg);
}

.recruitment-collapse__body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.recruitment-panel__content-head {
  justify-content: flex-end;
  margin-bottom: 1rem;
}

html[data-theme="modern"] .recruitment-hero {
  border-color: rgba(148, 163, 184, 0.2);
  background:
    radial-gradient(circle at top left, rgba(66, 165, 245, 0.22), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.14), transparent 22rem),
    linear-gradient(135deg, rgba(21, 29, 45, 0.98), rgba(27, 34, 51, 0.97));
  color: var(--text);
  box-shadow: 0 28px 64px rgba(2, 6, 23, 0.48);
}

html[data-theme="modern"] .recruitment-hero::after {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.18), transparent 64%);
}

html[data-theme="modern"] .recruitment-hero__eyebrow,
html[data-theme="modern"] .recruitment-public-card__label {
  background: rgba(66, 165, 245, 0.18);
  color: #93c5fd;
}

html[data-theme="modern"] .recruitment-hero__title,
html[data-theme="modern"] .recruitment-flow__item strong,
html[data-theme="modern"] .recruitment-public-card__title,
html[data-theme="modern"] .recruitment-stage-card strong {
  color: var(--text);
}

html[data-theme="modern"] .recruitment-hero__subtitle,
html[data-theme="modern"] .recruitment-flow__item small,
html[data-theme="modern"] .recruitment-public-card__text,
html[data-theme="modern"] .recruitment-public-card__notes,
html[data-theme="modern"] .recruitment-record-card__meta,
html[data-theme="modern"] .recruitment-record-card__text,
html[data-theme="modern"] .recruitment-review-card__meta,
html[data-theme="modern"] .recruitment-activity-item__main span,
html[data-theme="modern"] .recruitment-activity-item__side small,
html[data-theme="modern"] .recruitment-stage-card span,
html[data-theme="modern"] .recruitment-preview-card__summary,
html[data-theme="modern"] .recruitment-preview-card__grid small,
html[data-theme="modern"] .recruitment-preview-tips li {
  color: var(--text-soft);
}

html[data-theme="modern"] .recruitment-collapse,
html[data-theme="modern"] .recruitment-flow__item,
html[data-theme="modern"] .recruitment-public-card,
html[data-theme="modern"] .recruitment-review-card,
html[data-theme="modern"] .recruitment-record-card,
html[data-theme="modern"] .recruitment-activity-item,
html[data-theme="modern"] .recruitment-stage-card,
html[data-theme="modern"] .recruitment-preview-card,
html[data-theme="modern"] .recruitment-preview-tips,
html[data-theme="modern"] .recruitment-switch {
  background: linear-gradient(180deg, rgba(27, 34, 51, 0.98), rgba(21, 29, 45, 0.98));
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.36);
}

html[data-theme="modern"] .recruitment-flow__item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}

html[data-theme="modern"] .recruitment-filter-chip {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.26);
}

html[data-theme="modern"] .recruitment-filter-chip.is-active {
  background: rgba(66, 165, 245, 0.16);
  color: #bfdbfe;
  border-color: rgba(66, 165, 245, 0.3);
}

html[data-theme="modern"] .recruitment-public-card__url .form-control,
html[data-theme="modern"] .recruitment-toolbar__search,
html[data-theme="modern"] .recruitment-select-group .form-select {
  background: rgba(15, 23, 42, 0.5);
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.24);
}

html[data-theme="modern"] .recruitment-workspace .table,
html[data-theme="modern"] .recruitment-workspace .table th,
html[data-theme="modern"] .recruitment-workspace .table td,
html[data-theme="modern"] .recruitment-workspace .small.text-muted {
  color: var(--text) !important;
}

html[data-theme="modern"] .recruitment-collapse__body {
  border-top-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="modern"] .recruitment-collapse__summary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.recruitment-workspace {
  gap: 1.25rem;
}

.recruitment-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 0.9fr);
  gap: 1.35rem;
  padding: 1.55rem;
  border-radius: 1.75rem;
}

.recruitment-hero__main {
  align-content: start;
}

.recruitment-hero__aside {
  display: grid;
}

.recruitment-hero__header {
  align-items: end;
  justify-content: space-between;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.recruitment-hero__copy {
  max-width: 42rem;
}

.recruitment-hero__title {
  font-size: clamp(1.85rem, 2vw, 2.35rem);
  letter-spacing: -0.02em;
}

.recruitment-hero__subtitle {
  max-width: 50rem;
  font-size: 0.98rem;
}

.recruitment-hero__actions {
  justify-content: flex-end;
  align-items: center;
}

.recruitment-hero__actions .btn {
  min-width: 9.5rem;
  min-height: 3.15rem;
  border-radius: 1rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.recruitment-flow {
  gap: 1rem;
}

.recruitment-flow__item {
  min-height: 8.6rem;
  padding: 1.15rem 1rem 1rem;
  border-radius: 1.35rem;
}

.recruitment-flow__item > div {
  display: grid;
  gap: 0.35rem;
}

.recruitment-flow__step {
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.recruitment-public-card {
  position: relative;
  align-content: start;
  padding: 1.35rem;
  border-radius: 1.45rem;
}

.recruitment-public-card::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.09), transparent 68%);
  pointer-events: none;
}

.recruitment-public-card__url {
  padding: 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.1rem;
  background: rgba(248, 250, 252, 0.82);
}

.recruitment-public-card__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.65rem;
}

.recruitment-public-card__actions .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: 0.95rem;
  font-weight: 800;
}

.recruitment-public-card__notes {
  padding: 0.9rem 1.15rem;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 1.1rem;
  background: rgba(248, 250, 252, 0.8);
}

.recruitment-metrics {
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  gap: 1.1rem;
}

.recruitment-metrics .metric-card {
  position: relative;
  overflow: hidden;
  min-height: 8.9rem;
  padding: 1.15rem 1.15rem 1.2rem;
  border-radius: 1.35rem;
}

.recruitment-metrics .metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.88), rgba(34, 197, 94, 0.72));
  opacity: 0.9;
}

.recruitment-metrics .metric-card > div:last-child {
  display: grid;
  gap: 0.12rem;
}

.recruitment-metrics .metric-card__icon {
  width: 3.15rem;
  height: 3.15rem;
  flex-basis: 3.15rem;
  border-radius: 1.1rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.recruitment-metrics .metric-card__value {
  font-size: 1.65rem;
}

.recruitment-collapse {
  border-radius: 1.35rem !important;
}

.recruitment-collapse > summary {
  padding: 1.1rem 1.2rem;
}

html[data-theme="modern"] .recruitment-hero__header {
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="modern"] .recruitment-hero__actions .btn {
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
}

html[data-theme="modern"] .recruitment-public-card__url {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(148, 163, 184, 0.2);
}

html[data-theme="modern"] .recruitment-public-card__notes {
  background: rgba(15, 23, 42, 0.32);
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="modern"] .recruitment-public-card::after {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.14), transparent 68%);
}

html[data-theme="modern"] .recruitment-metrics .metric-card::before {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.92), rgba(90, 214, 111, 0.7));
}

html[data-theme="modern"] .recruitment-metrics .metric-card__icon {
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.26);
}

@media (max-width: 991.98px) {
  .recruitment-collapse > summary {
    flex-direction: column;
  }

  .recruitment-collapse__summary-side,
  .recruitment-panel__content-head {
    width: 100%;
    justify-content: space-between;
  }
}

.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,
html[data-theme="modern"] .recruitment-stage-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;
  }

  .recruitment-hero,
  .careers-hero,
  .careers-detail-hero,
  .recruitment-editor__grid,
  .recruitment-grid,
  .careers-grid,
  .careers-detail-grid {
    grid-template-columns: 1fr;
  }

  .recruitment-panel--wide {
    grid-column: auto;
  }
}

@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,
  .recruitment-stage-summary {
    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,
  .recruitment-stage-summary,
  .recruitment-select-group {
    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;
  }

  .recruitment-flow,
  .recruitment-preview-card__grid {
    grid-template-columns: 1fr;
  }

  .recruitment-preview-card__full {
    grid-column: auto;
  }

  .recruitment-toolbar,
  .recruitment-public-card__actions,
  .recruitment-table__actions,
  .recruitment-editor__header-actions,
  .recruitment-hero__actions,
  .recruitment-record-card__actions,
  .recruitment-activity-item {
    flex-direction: column;
    align-items: stretch;
  }

  .recruitment-activity-item__side {
    justify-items: start;
    text-align: start;
  }
}

.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;
  }


  .recruitment-workspace,
  .recruitment-hero,
  .recruitment-hero__main,
  .recruitment-hero__aside,
  .recruitment-public-card,
  .recruitment-grid,
  .recruitment-panel,
  .recruitment-toolbar,
  .recruitment-filter-group,
  .recruitment-select-group,
  .recruitment-stage-summary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@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,
  .recruitment-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,
  .recruitment-hero__main,
  .recruitment-public-card,
  .recruitment-editor__header {
    padding: 1rem;
  }

  .careers-search-panel__header,
  .careers-results__header,
  .careers-card__top,
  .careers-detail-hero__main,
  .careers-detail-panel__header,
  .recruitment-hero__header,
  .recruitment-hero__actions,
  .recruitment-toolbar,
  .recruitment-editor__header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .careers-card__actions,
  .careers-card__share,
  .careers-detail-cta__actions,
  .recruitment-public-card__actions,
  .recruitment-table__actions,
  .recruitment-record-card__actions {
    grid-template-columns: 1fr;
  }

  .careers-card__actions .btn,
  .careers-card__share .btn,
  .careers-detail-cta__actions .btn,
  .recruitment-public-card__actions .btn,
  .recruitment-table__actions .btn,
  .recruitment-record-card__actions .btn,
  .recruitment-hero__actions .btn,
  .recruitment-editor__header-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .careers-card,
  .recruitment-review-card,
  .recruitment-record-card,
  .recruitment-activity-item,
  .recruitment-stage-card {
    padding: 1rem;
  }

  .recruitment-workspace,
  .recruitment-hero,
  .recruitment-hero__main,
  .recruitment-hero__aside,
  .recruitment-public-card,
  .recruitment-panel,
  .recruitment-toolbar,
  .recruitment-filter-group,
  .recruitment-select-group,
  .recruitment-stage-summary,
  .recruitment-record-card__top,
  .recruitment-activity-item,
  .recruitment-activity-item__main,
  .recruitment-activity-item__side {
    min-width: 0;
  }

  .recruitment-hero__title {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }

  .recruitment-public-card__url .form-control,
  .recruitment-record-card__title,
  .recruitment-record-card__meta,
  .recruitment-record-card__text,
  .recruitment-activity-item__main strong,
  .recruitment-activity-item__main span,
  .recruitment-activity-item__side span,
  .recruitment-review-card__meta,
  .recruitment-public-card__text,
  .recruitment-public-card__notes {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .recruitment-public-card__url .form-control {
    max-width: 100%;
  }

  .careers-card__meta,
  .recruitment-record-card__stats {
    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,
  .recruitment-table__actions .btn {
    width: 100%;
  }

  .recruitment-table__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .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;
  }

  .recruitment-panel,
  .recruitment-review-grid,
  .recruitment-record-list,
  .recruitment-table__actions,
  .recruitment-public-card__actions {
    max-width: 100%;
  }
}

@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.4rem;
  }

  .topbar-icon-btn,
  .topbar-utility-btn {
    padding-inline: 0.75rem;
  }

  .app-topbar__title strong {
    max-width: 7.5rem;
  }

  .sidebar-mini-card,
  .dashboard-panel,
  .metric-card,
  .careers-card,

  .recruitment-toolbar__search,
  .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__hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr);
  gap: 1rem;
  padding: 1.45rem;
  border-radius: 1.8rem;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, rgba(255, 255, 255, 0.82));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 20%, #fff) 0, transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #1d4ed8), color-mix(in srgb, var(--brand) 68%, #0f766e));
  color: #fff;
  box-shadow: 0 28px 62px rgba(15, 23, 42, 0.14);
}

.equipment-admin__hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -2.5rem;
  inset-block-end: -2.5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.equipment-admin__hero-main,
.equipment-admin__hero-actions {
  position: relative;
  z-index: 1;
}

.equipment-admin__hero-main {
  display: grid;
  gap: .8rem;
  align-content: center;
}

.equipment-admin__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  padding: .45rem .78rem;
  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;
}

.equipment-admin__eyebrow svg {
  width: 1rem;
  height: 1rem;
}

.equipment-admin__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 2vw, 2.3rem);
  font-weight: 900;
}

.equipment-admin__subtitle {
  margin: 0;
  max-width: 52rem;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.9;
}

.equipment-admin__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  align-content: flex-start;
}

.equipment-admin__hero-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding-inline: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.equipment-admin__hero-btn:hover,
.equipment-admin__hero-btn:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.equipment-admin__hero-btn--primary {
  background: rgba(255, 255, 255, 0.96);
  color: var(--brand);
  border-color: rgba(255, 255, 255, 0.92);
}

.equipment-admin__hero-btn--primary:hover,
.equipment-admin__hero-btn--primary:focus {
  color: var(--brand);
  background: #fff;
}

.equipment-admin__hero-btn svg {
  width: 1rem;
  height: 1rem;
}

.equipment-admin__metrics {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .85rem;
}

.equipment-admin__metric-card {
  grid-column: span 3;
  display: flex;
  gap: .8rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 1.35rem;
  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 40px rgba(15, 23, 42, 0.08);
}

.equipment-admin__metric-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.equipment-admin__metric-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.equipment-admin__metric-copy {
  min-width: 0;
  display: grid;
  gap: .22rem;
}

.equipment-admin__metric-label,
.equipment-admin__metric-hint,
.equipment-admin__surface-subtitle,
.equipment-admin__person-cell span,
.equipment-admin__item-cell span {
  color: var(--text-soft);
}

.equipment-admin__metric-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.equipment-admin__metric-card--primary .equipment-admin__metric-icon {
  color: #2563eb;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(191, 219, 254, 0.88));
}

.equipment-admin__metric-card--warning .equipment-admin__metric-icon {
  color: #d97706;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(253, 230, 138, 0.9));
}

.equipment-admin__metric-card--accent .equipment-admin__metric-icon {
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.96), rgba(221, 214, 254, 0.9));
}

.equipment-admin__metric-card--success .equipment-admin__metric-icon {
  color: #059669;
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.96), rgba(167, 243, 208, 0.88));
}

.equipment-admin__surface {
  padding: 1.15rem;
  border-radius: 1.5rem;
  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 44px rgba(15, 23, 42, 0.07);
}

.equipment-admin__surface-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.equipment-admin__surface-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
}

.equipment-admin__surface-subtitle {
  margin: .3rem 0 0;
  line-height: 1.75;
}

.equipment-admin__filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .9rem;
}

.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__filter-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .7rem;
  margin-top: 1rem;
  align-items: center;
}

.equipment-admin__flash {
  margin-bottom: 0;
}

.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__table-wrap {
  border-radius: 1.25rem;
}

.equipment-admin__table {
  margin-bottom: 0;
}

.equipment-admin__table thead th {
  border-top: 0;
  border-bottom-width: 1px;
  background: color-mix(in srgb, var(--surface-2) 78%, #fff);
  color: var(--text-soft);
  font-weight: 800;
  white-space: nowrap;
}

.equipment-admin__table tbody td {
  vertical-align: middle;
  padding-block: 1rem;
}

.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,
.equipment-admin__status-badge {
  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__status-badge--primary {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.equipment-admin__status-badge--success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.equipment-admin__status-badge--warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.equipment-admin__status-badge--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.equipment-admin__status-badge--muted {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

.equipment-admin__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.equipment-admin__empty {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--surface-1) 96%, #f8fbff);
  border: 1px dashed color-mix(in srgb, var(--brand) 16%, var(--border));
}

.equipment-admin__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-admin__empty-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.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__hero {
  box-shadow: 0 30px 66px rgba(2, 6, 23, 0.34);
}

html[data-theme="modern"] .equipment-admin__metric-card,
html[data-theme="modern"] .equipment-admin__surface {
  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 44px rgba(2, 6, 23, 0.24);
}

html[data-theme="modern"] .equipment-admin__metric-value,
html[data-theme="modern"] .equipment-admin__surface-title,
html[data-theme="modern"] .equipment-admin__person-cell strong,
html[data-theme="modern"] .equipment-admin__item-cell strong {
  color: #f8fafc;
}

html[data-theme="modern"] .equipment-admin__table thead th {
  background: rgba(30, 41, 59, 0.86);
  color: #cbd5e1;
}

html[data-theme="modern"] .equipment-admin__empty {
  background: rgba(15, 23, 42, 0.84);
  border-color: rgba(148, 163, 184, 0.2);
}

@media (max-width: 991.98px) {
  .equipment-admin__hero {
    grid-template-columns: 1fr;
  }

  .equipment-admin__hero-actions {
    justify-content: flex-start;
  }

  .equipment-admin__metric-card {
    grid-column: span 6;
  }

  .equipment-admin__field {
    grid-column: span 6;
  }

  .equipment-admin__field--switch {
    grid-column: span 12;
  }
}

@media (max-width: 767.98px) {
  .equipment-admin__hero,
  .equipment-admin__surface {
    padding: 1rem;
    border-radius: 1.3rem;
  }

  .equipment-admin__metrics,
  .equipment-admin__filter-grid {
    grid-template-columns: 1fr;
  }

  .equipment-admin__metric-card,
  .equipment-admin__field,
  .equipment-admin__field--switch {
    grid-column: auto;
  }

  .equipment-admin__surface-head {
    flex-direction: column;
    align-items: stretch;
  }

  .equipment-admin__hero-actions,
  .equipment-admin__filter-actions,
  .equipment-admin__row-actions {
    width: 100%;
  }

  .equipment-admin__report-tools {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .equipment-admin__hero-actions .btn,
  .equipment-admin__filter-actions .btn,
  .equipment-admin__row-actions .btn,
  .equipment-admin__report-tools .btn {
    width: 100%;
  }

  .equipment-admin__empty {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media print {
  .equipment-report-print {
    max-width: none;
    padding: 0;
  }
}