/* ==========================================================================
   Marriage-System-BD — shared theme
   Base tokens/components taken from the approved prototype theme.
   Extended with: sidebar app-shell, tables, badges, stat cards, checklists,
   timeline, and form patterns needed across the Authority / Married /
   Public / Admin panels.
   ========================================================================== */

:root {
  --green: #006a4e;
  --green-dark: #004f3a;
  --green-light: #e8f5f0;
  --red: #f42a41;
  --ink: #14231f;
  --muted: #65746f;
  --bg: #f6f9f7;
  --white: #ffffff;
  --border: #dce7e2;
  --shadow: 0 16px 45px rgba(0, 74, 55, 0.10);
  --radius: 18px;
  --max: 1180px;

  /* status colors used across dashboards */
  --ok-bg: #eaf8ef;
  --ok-fg: #18743b;
  --ok-dot: #26a269;
  --warn-bg: #fff6e6;
  --warn-fg: #92600a;
  --warn-dot: #d68a00;
  --danger-bg: #fdeceb;
  --danger-fg: #b3211b;
  --danger-dot: var(--red);
  --info-bg: #eaf1fb;
  --info-fg: #1c4f8a;
  --info-dot: #2e6fc9;
  --neutral-bg: #eef2f0;
  --neutral-fg: #4a5751;
  --neutral-dot: #8a978f;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, "Noto Sans", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  width: min(92%, var(--max));
  margin: 0 auto;
}

/* ---------- Announcement bar ---------- */
.announcement {
  background: var(--green-dark);
  color: #fff;
  font-size: 13px;
  padding: 8px 0;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.dot {
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
  flex-shrink: 1;
}

.brand-mark {
  width: 45px;
  height: 45px;
  border-radius: 100px;
  background: var(--white);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 7px 20px rgba(0, 106, 78, .38);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand-mark::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--red);
  opacity: .95;
  right: 5px;
  bottom: 5px;
}

.brand-text {
  min-width: 0;
}

.brand-text strong {
  display: block;
  font-size: 16px;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-text span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .7px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 9px 12px;
  border-radius: 10px;
  color: #44534e;
  font-size: 14px;
  font-weight: 600;
}

.nav-links a:hover,
.nav-links a.current {
  background: var(--green-light);
  color: var(--green);
}

.panel-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; /* the button/select group should never be squeezed by the brand */
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  background: #fff;
  gap: 1px;
}

.language-option {
  border: 0;
  border-radius: 7px;
  padding: 6px 8px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.language-option:hover { color: var(--green-dark); background: var(--green-light); }
.language-option.is-active { color: #fff; background: var(--green); }
.language-option:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Bengali glyph coverage while retaining the existing Latin font for English. */
html[lang="bn"] body { font-family: Inter, "Noto Sans Bengali", "Noto Sans", Arial, sans-serif; }

.panel-select {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--green-dark);
  border-radius: 11px;
  padding: 10px 34px 10px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.panel-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 106, 78, .10);
}

.mobile-toggle {
  display: none;
  border: 0;
  background: var(--green-light);
  color: var(--green);
  width: 42px;
  height: 42px;
  flex: 0 0 42px; /* fixed size — never allowed to shrink to nothing or get pushed off-row */
  border-radius: 11px;
  cursor: pointer;
  font-size: 20px;
}

/* ---------- Buttons ---------- */
.btn {
  border: 0;
  border-radius: 12px;
  padding: 13px 19px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 106, 78, .20);
}

.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background: #fff;
  color: var(--green);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
}

.btn-ghost:hover {
  color: var(--green);
  border-color: var(--green);
}

.btn-danger {
  background: #fff;
  color: var(--red);
  border: 1px solid #f6c9ce;
}

.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-sm {
  padding: 9px 13px;
  font-size: 12px;
  border-radius: 10px;
}

.btn-block {
  width: 100%;
}

/* ---------- Sections / headings ---------- */
section {
  padding: 78px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 32px;
}

.section-head h2 {
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -1px;
}

.section-head p {
  max-width: 520px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Status pill ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok-dot);
}

.status.warn {
  background: var(--warn-bg);
  color: var(--warn-fg);
}

.status.warn::before {
  background: var(--warn-dot);
}

.status.danger {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.status.danger::before {
  background: var(--danger-dot);
}

.status.info {
  background: var(--info-bg);
  color: var(--info-fg);
}

.status.info::before {
  background: var(--info-dot);
}

.status.neutral {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

.status.neutral::before {
  background: var(--neutral-dot);
}

/* ---------- Badges (compact, no dot) ---------- */
.badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

.badge.green {
  background: var(--green-light);
  color: var(--green-dark);
}

.badge.red {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.badge.amber {
  background: var(--warn-bg);
  color: var(--warn-fg);
}

/* ---------- Generic card ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  min-width: 0;
}

.card-title {
  font-size: 15px;
  font-weight: 800;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

/* ---------- Footer ---------- */
footer {
  background: #0b2520;
  color: #fff;
  padding: 42px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 35px;
  padding-bottom: 35px;
}

footer .brand-text strong {
  color: #fff;
}

footer .brand-text span {
  color: rgba(255, 255, 255, .5);
}

.footer-about {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  max-width: 330px;
  margin-top: 14px;
}

footer h4 {
  font-size: 12px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: rgba(255, 255, 255, .57);
  font-size: 12px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: rgba(255, 255, 255, .43);
  font-size: 11px;
}

/* ---------- Toast ---------- */
.panel-message {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 120px);
  background: #102c26;
  color: #fff;
  padding: 12px 17px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .20);
  font-size: 12px;
  font-weight: 700;
  z-index: 2000;
  transition: .3s ease;
  max-width: 90vw;
}

.panel-message.show {
  transform: translate(-50%, 0);
}

/* ==========================================================================
   Auth pages (login / register)
   ========================================================================== */
.auth-shell {
  min-height: calc(100vh - 74px - 41px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
}

.auth-visual {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff;
  padding: 60px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-visual::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border: 40px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  right: -120px;
  bottom: -140px;
}

.auth-visual .eyebrow {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}

.auth-visual h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -1.4px;
  line-height: 1.15;
  margin: 18px 0 14px;
  position: relative;
  z-index: 1;
  max-width: 420px;
}

.auth-visual>p {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  max-width: 400px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.auth-features {
  list-style: none;
  position: relative;
  z-index: 1;
}

.auth-features li {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
}

.auth-features span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 24px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
}

.auth-card-head {
  margin-bottom: 22px;
}

.auth-card-head h2 {
  font-size: 24px;
  letter-spacing: -.6px;
  margin-bottom: 6px;
}

.auth-card-head p {
  color: var(--muted);
  font-size: 13px;
}

.role-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg);
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 22px;
}

.role-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 6px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.role-tab.active {
  background: #fff;
  color: var(--green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.account-type-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 22px;
}

.account-type {
  border: 1px solid var(--border);
  background: #fff;
  padding: 12px 8px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  transition: .2s ease;
}

.account-type:hover,
.account-type.active {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #43534e;
}

.form-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}

.account-input,
.field-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  outline: none;
  background: #fff;
  font-size: 13px;
  transition: .2s ease;
}

.account-input:focus,
.field-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 106, 78, .08);
}

select.field-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.account-form {
  display: none;
}

.account-form.active {
  display: block;
}

.form-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--green);
  margin: 22px 0 12px;
}

.form-section-title:first-child {
  margin-top: 0;
}

.account-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
}

.account-note a {
  color: var(--green);
  font-weight: 800;
}

.otp-boxes {
  display: flex;
  gap: 9px;
}

.otp-boxes input {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  padding: 12px 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  outline: none;
}

.otp-boxes input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 106, 78, .08);
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    padding: 42px 26px;
  }
}

@media (max-width: 480px) {

  .account-type-select,
  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Dashboard app-shell (Authority / Married / Admin panels)
   ========================================================================== */
/* --- Dashboard app-shell (Authority / Married / Admin panels) ---
   Layout contract: the shell spans the full viewport and the whole page
   scrolls as ONE unit, so the green sidebar stays pinned (sticky, full
   viewport height) while only the main column's content moves. For that
   to hold, html/body must not become scroll containers themselves — see
   the html-only overflow guard further down. */
.app-shell {
  display: grid;
  /* Sidebar column hugs its content (was a fixed 258px) but never gets
     squeezed below a usable width; the main column takes the rest. */
  grid-template-columns: minmax(200px, max-content) minmax(0, 1fr);
  min-height: 100vh;
}

.app-sidebar {
  background: var(--green-dark);
  color: #fff;
  padding: 22px 16px;
  /* Pinned for the whole page scroll: the green bar runs full viewport
     height and never scrolls away with the content. It scrolls internally
     only when its own links don't fit a short screen. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-sidebar .brand {
  padding: 6px 8px 20px;
}

.app-sidebar .brand-text strong {
  color: #fff;
}

.app-sidebar .brand-text span {
  color: rgba(255, 255, 255, .55);
}

.side-role {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  padding: 12px;
  margin-bottom: 18px;
}

.side-role .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 36px;
}

.side-role small {
  display: block;
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.side-role strong {
  font-size: 13px;
}

.side-nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(255, 255, 255, .45);
  margin: 18px 10px 8px;
}

.side-nav {
  list-style: none;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 11px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.side-nav a .ic {
  width: 18px;
  text-align: center;
  opacity: .9;
}

.side-nav a:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.side-nav a.active {
  background: #fff;
  color: var(--green-dark);
  font-weight: 800;
}

.app-main {
  min-width: 0;
  overflow-x: hidden;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.app-topbar h1 {
  font-size: 20px;
  letter-spacing: -.4px;
}

.app-topbar .sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--muted);
}

.icon-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.sidebar-toggle {
  display: none;
}

.app-content {
  padding: 26px 28px 60px;
  min-width: 0;
}

/* Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 19px;
}

.stat-card .stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}

.stat-card .stat-value {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.7px;
}

.stat-card .stat-delta {
  font-size: 11px;
  margin-top: 8px;
  font-weight: 700;
  color: var(--green);
}

.stat-card .stat-delta.down {
  color: var(--red);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.content-grid > * {
  min-width: 0;
}

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.quick-action {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 17px;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.quick-action:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.quick-action .qa-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--green-light);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 16px;
  margin-bottom: 12px;
}

.quick-action strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}

.quick-action span {
  color: var(--muted);
  font-size: 11px;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

/* Visual hint that a table scrolls sideways on narrow screens: fades the
   right edge of the table when there's more content to scroll to. Purely
   decorative — doesn't affect layout. */
@media (max-width: 900px) {
  .table-wrap {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #eef2f0;
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table tr:hover td {
  background: var(--bg);
}

.mono {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  letter-spacing: -.2px;
}

.row-actions {
  display: flex;
  gap: 6px;
}

/* Checklist (prerequisite engine) */
.checklist {
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #eef2f0;
  font-size: 13px;
}

.checklist li:last-child {
  border-bottom: 0;
}

.chk {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: transparent;
}

.checklist li.done .chk {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.checklist li.done span.label {
  color: var(--ink);
}

.checklist li:not(.done) span.label {
  color: var(--muted);
}

.checklist .req-tag {
  margin-left: auto;
}

/* Timeline (marriage state machine) */
.timeline {
  list-style: none;
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.timeline li {
  position: relative;
  padding-bottom: 22px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
}

.timeline li.done::before {
  background: var(--green);
  border-color: var(--green);
}

.timeline li.current::before {
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-light);
}

.timeline li strong {
  display: block;
  font-size: 13px;
}

.timeline li span {
  color: var(--muted);
  font-size: 11px;
}

/* Documents list */
.doc-list {
  list-style: none;
}

.doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #eef2f0;
}

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

.doc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--green-light);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: 0 0 38px;
}

.doc-meta {
  flex: 1;
  min-width: 0;
}

.doc-meta strong {
  display: block;
  font-size: 13px;
}

.doc-meta span {
  color: var(--muted);
  font-size: 11px;
}

.doc-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.empty-state .es-icon {
  font-size: 30px;
  margin-bottom: 10px;
}

.empty-state strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 4px;
}

.empty-state p {
  font-size: 12px;
  max-width: 340px;
  margin: 0 auto;
}

@media (max-width: 1100px) {

  .stat-grid,
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 950px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: max-content;
    max-width: 86vw;
    z-index: 900;
    transform: translateX(-100%);
    transition: .25s ease;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0);
  }

  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, .35);
  }

  .sidebar-toggle {
    display: grid;
  }
}

@media (max-width: 620px) {
  .app-content {
    padding: 20px 16px 50px;
  }

  .app-topbar {
    padding: 14px 16px;
  }

  .stat-grid,
  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {

  .stat-grid,
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Responsive: shared nav (public pages) */
@media (max-width: 1050px) {
  .nav-links {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .nav-inner {
    position: relative;
  }

  .nav-links.mobile-open {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links.mobile-open a {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* Navbar: reclaim space step by step so the hamburger button always has
   room and is never pushed outside the visible row */
@media (max-width: 700px) {
  .panel-switcher label {
    display: none; /* drop the "Preview:" / "User:" caption first */
  }

  .panel-select {
    max-width: 130px;
    font-size: 11px;
    padding: 9px 26px 9px 10px;
  }

  .nav-inner {
    min-height: 64px;
    gap: 10px;
  }

  .language-option { padding: 6px 6px; font-size: 11px; }
  .language-switcher { gap: 0; }

  .brand {
    min-width: 0; /* overrides the desktop min-width:max-content so the
                     brand can actually shrink instead of pushing the
                     hamburger button off the visible row */
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .brand-text span {
    display: none; /* drop the tagline next, keep the product name */
  }

  .panel-select {
    max-width: 96px;
  }
}

@media (max-width: 380px) {
  .panel-select {
    display: none; /* on the narrowest phones, keep only Login/☰ visible */
  }

  .language-option { padding: 5px 4px; font-size: 10px; }
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    display: block;
  }

  .footer-bottom span {
    display: block;
    margin-top: 5px;
  }
}

/* ==========================================================================
   MOBILE FIXES — inline-style grid overrides
   --------------------------------------------------------------------------
   The pages built on top of this theme (index.html, dashboard-public.html)
   lay out several sections with an inline `style="grid-template-columns:…"`
   attribute directly on the element, instead of a class. A normal CSS rule
   — even inside a media query — cannot beat an inline style, so none of the
   breakpoints above were ever reaching those sections; that's why the
   layout wasn't changing on a phone.

   The fix: target the exact inline pattern with an attribute selector
   ( [style*="..."] ) and force it with !important, which — and only which —
   is allowed to override an inline style. Nothing else on the page changes;
   this only kicks in at phone/tablet widths.
   ========================================================================== */

/* Stop any leftover fixed-width element from causing sideways scroll on a
   narrow screen. Deliberately html ONLY: adding overflow-x to body makes
   body a scroll container, which silently disables the sticky full-height
   dashboard sidebar (it would scroll away with the page again). */
html {
  max-width: 100%;
  overflow-x: hidden;
}

/* Tablet: soften the widest grids to 2 columns first */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns: 1.08fr .92fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:1.1fr .9fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Phone: everything that was still multi-column collapses to one */
@media (max-width: 600px) {
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.08fr .92fr"],
  [style*="grid-template-columns:1.1fr .9fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero/eyebrow/section blocks built with inline flex row + fixed gaps
     often need to re-wrap and re-align once they're single column */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
  }

  /* Section vertical rhythm is comfortable on desktop but too tall once
     everything is stacked on a phone */
  section {
    padding: 48px 0;
  }

  .section-head {
    display: block;
  }

  .section-head h2 {
    margin-bottom: 10px;
  }
}

/* Small phones: tighten further and make sure text-heavy inline hero
   headings stay readable without overflowing */
@media (max-width: 420px) {
  .container {
    width: 94%;
  }

  h1 {
    letter-spacing: -1.4px !important;
  }

  .brand-text span {
    display: none;
  }
}

/* Prevent iOS Safari from auto-zooming the page when a form field is
   focused (it does this to any input/select under 16px font-size) */
@media (max-width: 600px) {
  .account-input,
  .field-input,
  .otp-boxes input {
    font-size: 16px;
  }
}

/* ==========================================================================
   AUTHORITY DASHBOARD — deep mobile fixes
   --------------------------------------------------------------------------
   The components below (Recent Applications table, Document Verification
   Queue, Prerequisite Checklist, stat/quick-action cards, timeline) were
   only getting a horizontal-scroll fallback (.table-wrap) or nothing at
   all. That "works" but rows overflow, badges get clipped, and text runs
   off the edge on real phones. These rules make each component actually
   restructure itself at narrower widths instead of just scrolling.
   ========================================================================== */

/* ---- Data table: tighten up before we lean on horizontal scroll ---- */
@media (max-width: 900px) {
  .data-table th,
  .data-table td {
    padding: 10px 10px;
  }
}

@media (max-width: 680px) {
  table.data-table {
    font-size: 12px;
    min-width: 560px; /* keeps columns legible; .table-wrap still scrolls it */
  }

  .data-table th,
  .data-table td {
    padding: 9px 8px;
    white-space: normal; /* let long values wrap instead of forcing overflow */
  }

  .row-actions {
    flex-wrap: wrap;
    gap: 5px;
  }

  .row-actions .btn {
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* Optional: true card-style table for small phones, no horizontal scroll
   at all. Opt in per-table with class="data-table stack-on-mobile" and add
   data-label="Column Name" to every <td> (matching its <th> text). If you
   don't add data-label attributes, this block simply never applies. */
@media (max-width: 560px) {
  table.data-table.stack-on-mobile,
  table.data-table.stack-on-mobile thead,
  table.data-table.stack-on-mobile tbody,
  table.data-table.stack-on-mobile th,
  table.data-table.stack-on-mobile td,
  table.data-table.stack-on-mobile tr {
    display: block;
    width: 100%;
  }

  table.data-table.stack-on-mobile {
    min-width: 0;
  }

  table.data-table.stack-on-mobile thead {
    position: absolute;
    left: -9999px;
  }

  table.data-table.stack-on-mobile tr {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
  }

  table.data-table.stack-on-mobile tr:hover td {
    background: transparent;
  }

  table.data-table.stack-on-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #eef2f0;
    text-align: right;
    white-space: normal;
  }

  table.data-table.stack-on-mobile td:last-child {
    border-bottom: 0;
  }

  table.data-table.stack-on-mobile td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: left;
    flex: 0 0 auto;
    margin-right: 10px;
  }

  table.data-table.stack-on-mobile .row-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

/* ---- Prerequisite checklist ---- */
@media (max-width: 480px) {
  .checklist li {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 12px 0;
  }

  .checklist li span.label {
    flex: 1 1 160px;
    min-width: 0;
  }

  .checklist .req-tag {
    margin-left: 0;
  }
}

/* ---- Document verification queue ---- */
@media (max-width: 560px) {
  .doc-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .doc-meta {
    flex: 1 1 calc(100% - 52px);
    min-width: 0;
  }

  .doc-meta strong,
  .doc-meta span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .doc-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}

/* ---- Cards, card headers, stat cards, quick actions ---- */
@media (max-width: 480px) {
  .card {
    padding: 18px;
  }

  .card-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .stat-card {
    padding: 15px;
  }

  .stat-card .stat-value {
    font-size: 22px;
  }

  .quick-action {
    padding: 14px;
  }
}

/* ---- Timeline (marriage state machine) ---- */
@media (max-width: 480px) {
  .timeline {
    padding-left: 22px;
  }

  .timeline li::before {
    left: -22px;
  }

  .timeline li strong {
    font-size: 12.5px;
  }
}

/* ---- Topbar: keep icon buttons from overflowing on narrow phones ---- */
@media (max-width: 480px) {
  .app-topbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }
}
/* ---------- Markdown notice bodies ---------- */
.md-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--bg, #faf9f6);
  border: 1px solid var(--border, #e6e2d8);
  border-radius: 12px;
  max-width: 72ch;
}
.md-body h1, .md-body h2, .md-body h3 { margin: 0.6em 0 0.35em; line-height: 1.3; }
.md-body h1:first-child, .md-body h2:first-child, .md-body h3:first-child { margin-top: 0; }
.md-body p { margin: 0.45em 0; }
.md-body ul, .md-body ol { margin: 0.45em 0; padding-left: 1.4em; }
.md-body blockquote {
  margin: 0.6em 0; padding: 6px 12px;
  border-left: 3px solid var(--green, #1c7c54); color: var(--muted, #6b675e);
}
.md-body code {
  background: rgba(0,0,0,0.06); border-radius: 5px; padding: 1px 6px;
  font-family: ui-monospace, monospace; font-size: 12px;
}
.md-body pre {
  background: #14190f; color: #e8e6df; padding: 12px 14px; border-radius: 10px;
  overflow-x: auto; margin: 0.6em 0;
}
.md-body pre code { background: none; color: inherit; padding: 0; }
.md-body a { color: var(--green, #1c7c54); font-weight: 700; }
.md-body hr { border: none; border-top: 1px solid var(--border, #e6e2d8); margin: 0.9em 0; }
.md-body table { border-collapse: collapse; margin: 0.6em 0; }
.md-preview {
  border: 1px dashed var(--border, #e6e2d8); border-radius: 12px;
  padding: 12px 14px; margin-top: 10px; font-size: 13px;
}

/* --- RBAC admin helpers (2026-09-24) --- */
.muted { color: #64748b; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }

/* --- Modal dialogs (2026-09-24) -------------------------------------
   The global `* { margin: 0 }` reset above wipes out the browser's
   default `dialog { margin: auto }`, which is what centres <dialog>
   elements. Without it every modal pins to the top-left corner.
   Restore the centring for ALL modal dialogs, and dim the backdrop. */
dialog[open] {
  margin: auto; /* centre middle of the page */
}
dialog::backdrop {
  background: rgba(2, 20, 40, 0.5);
}