/* ============================================================
   SMS Portal — component layer.
   Tailwind provides the utilities; these are the repeated
   compositions, kept here so markup stays readable.
   ============================================================ */

:root { color-scheme: light; }
.dark { color-scheme: dark; }

html { -webkit-tap-highlight-color: transparent; }
body {
  text-rendering: optimizeLegibility;
  /* Bangla conjuncts (ক্ষ, ঙ্গ, ্র) turn to mush without this on the stem-heavy
     Hind Siliguri face — subpixel smoothing thickens them until they blur. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bangla needs a little more line-height than Latin. */
.font-bn { line-height: 1.75; }
.font-bn h1, .font-bn h2, .font-bn h3 { line-height: 1.5; }
/* Bangla has no capitals and a tall x-height, so it reads a size smaller than
   Latin at the same px. Nudge the body copy up rather than restyle anything. */
.font-bn { font-size: 1.02em; }

/* ------------------------------------------------------------------ nav */
.nav-link {
  position: relative; border-radius: .5rem; padding: .45rem .7rem;
  font-size: .82rem; font-weight: 600; color: rgb(31 36 46);
  transition: color .15s, background-color .15s; white-space: nowrap;
}
.nav-link:hover { color: rgb(15 106 74); background: rgb(238 251 244); }
.dark .nav-link { color: rgb(176 186 201); }
.dark .nav-link:hover { color: rgb(123 215 174); background: rgb(255 255 255 / .05); }
.nav-link-active { color: rgb(15 106 74); background: rgb(238 251 244); }
.dark .nav-link-active { color: rgb(123 215 174); background: rgb(255 255 255 / .07); }

/* mobile bottom tab bar — app-like */
.tab {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem .25rem .55rem; font-size: .6875rem; font-weight: 600;
  /* .62rem Bangla was illegible; ink-400 also failed contrast on the bar. */
  color: rgb(100 118 145); transition: color .15s;
}
.tab svg { height: 1.25rem; width: 1.25rem; }
.tab-active { color: rgb(18 133 91); }
.dark .tab-active { color: rgb(67 189 139); }
.tab:active { transform: scale(.94); }

/* ---------------------------------------------------------------- cards */
.card {
  border-radius: 1rem; border: 1px solid rgb(213 218 227);
  background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 4px 16px -4px rgb(16 24 40 / .06);
}
.dark .card { border-color: rgb(57 66 82); background: rgb(19 26 40); }
.card-pad { padding: 1rem; }
@media (min-width: 640px) { .card-pad { padding: 1.25rem; } }

.section-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.0625rem; font-weight: 700; color: rgb(15 84 61);
  letter-spacing: -.01em;
}
.dark .section-title { color: rgb(123 215 174); }

/* --------------------------------------------------------------- forms */
.field-label {
  display: block; margin-bottom: .35rem; font-size: .8125rem; font-weight: 600;
  /* Black: a label names what you must type, so it is primary content. */
  color: rgb(17 17 17);
}
.dark .field-label { color: rgb(213 218 227); }
.field-required::after { content: " *"; color: rgb(229 17 52); }

/* Type icon on every label. Fixed width so labels align into a column no
   matter which glyph a field gets. */
.field-icon {
  display: inline-block; width: 1.15em; margin-right: .4rem;
  text-align: center; font-size: .95em;
  color: rgb(31 161 112); opacity: .9;
}
.dark .field-icon { color: rgb(67 189 139); }

.input, .select, .textarea {
  width: 100%; border-radius: .6rem; border: 1px solid rgb(213 218 227);
  background: #fff; padding: .625rem .75rem; font-size: .9375rem; color: rgb(17 17 17);
  transition: border-color .15s, box-shadow .15s;
  /* 44px is the touch-target floor; .55rem padding on a .875rem line left these
     at ~36px, which is a miss on a form meant to be filled on a phone. */
  min-height: 2.75rem;
}
.textarea { min-height: 5rem; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: rgb(31 161 112);
  box-shadow: 0 0 0 3px rgb(31 161 112 / .16);
}
.input:disabled, .select:disabled {
  background: rgb(246 247 249); color: rgb(132 148 171); cursor: not-allowed;
}
.dark .input, .dark .select, .dark .textarea {
  border-color: rgb(65 77 97); background: rgb(11 18 32); color: rgb(236 239 243);
}
.dark .input:disabled, .dark .select:disabled { background: rgb(19 26 40); color: rgb(100 118 145); }
.input-error { border-color: rgb(248 48 70) !important; }
/* Red stays red — an error must not read as ordinary text. */
.field-error { margin-top: .3rem; font-size: .78rem; font-weight: 500; color: rgb(200 12 42); }
/* Help text is instructions, not decoration — grey, but a legible grey. */
.field-help { margin-top: .3rem; font-size: .775rem; color: rgb(75 85 99); }
.field-remark {
  margin-top: .35rem; border-radius: .45rem; background: rgb(255 251 235);
  border: 1px solid rgb(253 230 138); padding: .35rem .5rem;
  font-size: .72rem; color: rgb(146 64 14);
}
.dark .field-remark { background: rgb(69 26 3 / .4); border-color: rgb(146 64 14); color: rgb(253 230 138); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: .6rem; padding: .625rem 1.125rem; font-size: .875rem; font-weight: 600;
  transition: background-color .15s, transform .08s, opacity .15s; cursor: pointer;
  min-height: 2.75rem;  /* same touch-target floor as the inputs */
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: rgb(18 133 91); color: #fff; }
.btn-primary:hover { background: rgb(15 106 74); }
.btn-ghost { border: 1px solid rgb(213 218 227); color: rgb(65 77 97); background: #fff; }
.btn-ghost:hover { border-color: rgb(31 161 112); color: rgb(15 106 74); }
.dark .btn-ghost { border-color: rgb(65 77 97); color: rgb(213 218 227); background: transparent; }
.btn-danger { background: rgb(229 17 52); color: #fff; }
.btn-danger:hover { background: rgb(193 8 42); }
.btn-warn { background: rgb(217 119 6); color: #fff; }
/* Dense contexts (table rows, toolbars) opt out of the touch-target floor. */
.btn-sm { padding: .35rem .7rem; font-size: .78rem; min-height: 0; }

/* ------------------------------------------------- master data status dot */
/* চালু / বন্ধ as one button: a live green pulse or a still grey dot, so the
   state is readable at a glance down a long column — not just a word to read. */
.status-dot {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: .2rem .6rem .2rem .5rem;
  font-size: .7rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s;
}
.status-blip {
  height: .5rem; width: .5rem; border-radius: 999px; flex: none;
  background: currentColor;
}
.status-on {
  background: rgb(238 251 244); color: rgb(15 106 74); border-color: rgb(176 233 205);
}
.status-on .status-blip { animation: blip 1.4s ease-in-out infinite; }
.status-off {
  background: rgb(236 239 243); color: rgb(100 118 145); border-color: rgb(213 218 227);
}
.status-dot:hover { border-color: currentColor; }
.dark .status-on { background: rgb(13 69 51 / .5); color: rgb(123 215 174); border-color: rgb(15 106 74); }
.dark .status-off { background: rgb(255 255 255 / .06); color: rgb(132 148 171); border-color: rgb(65 77 97); }

@keyframes blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(31 161 112 / .5); }
  50%      { opacity: .55; box-shadow: 0 0 0 .25rem rgb(31 161 112 / 0); }
}
/* A blinking dot is decoration; for anyone who asked the OS to stop motion it
   is a distraction, and the colour already carries the state. */
@media (prefers-reduced-motion: reduce) {
  .status-on .status-blip { animation: none; }
}

/* ----------------------------------------------------------------- pills */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 999px; padding: .15rem .55rem; font-size: .68rem; font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto; border-radius: .9rem; border: 1px solid rgb(213 218 227); background: #fff;
  -webkit-overflow-scrolling: touch;
}
.dark .table-wrap { border-color: rgb(57 66 82); background: rgb(19 26 40); }
.table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: rgb(246 247 249); padding: .6rem .7rem; text-align: left;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: rgb(55 65 81); white-space: nowrap;
}
.dark .table thead th { background: rgb(11 18 32); color: rgb(132 148 171); }
.table tbody td { border-top: 1px solid rgb(236 239 243); padding: .6rem .7rem; vertical-align: top; }
.dark .table tbody td { border-color: rgb(57 66 82); }
.table tbody tr:hover { background: rgb(250 251 252); }
.dark .table tbody tr:hover { background: rgb(255 255 255 / .03); }

/* -------------------------------------------------------------- wizard */
.step-dot {
  display: grid; place-items: center; height: 1.65rem; width: 1.65rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  border: 2px solid rgb(213 218 227); color: rgb(132 148 171); background: #fff;
  flex: none;
}
.dark .step-dot { background: rgb(19 26 40); border-color: rgb(65 77 97); }
.step-dot-active { border-color: rgb(18 133 91); background: rgb(18 133 91); color: #fff; }
.step-dot-done { border-color: rgb(18 133 91); color: rgb(18 133 91); background: rgb(238 251 244); }

/* ------------------------------------------------------------- dropzone */
.dropzone {
  border: 2px dashed rgb(213 218 227); border-radius: .8rem; padding: 1rem;
  text-align: center; transition: border-color .15s, background-color .15s; cursor: pointer;
}
.dropzone:hover, .dropzone.is-drag { border-color: rgb(31 161 112); background: rgb(238 251 244); }
.dark .dropzone { border-color: rgb(65 77 97); }
.dark .dropzone:hover, .dark .dropzone.is-drag { border-color: rgb(31 161 112); background: rgb(255 255 255 / .03); }

/* ---------------------------------------------------------- searchable */
.combo-panel {
  position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin-top: .25rem;
  max-height: 15rem; overflow-y: auto; border-radius: .6rem;
  border: 1px solid rgb(213 218 227); background: #fff;
  box-shadow: 0 8px 32px -8px rgb(16 24 40 / .18);
}
.dark .combo-panel { border-color: rgb(65 77 97); background: rgb(19 26 40); }
.combo-item { padding: .45rem .65rem; font-size: .82rem; cursor: pointer; }
.combo-item:hover, .combo-item.is-active { background: rgb(238 251 244); }
.dark .combo-item:hover, .dark .combo-item.is-active { background: rgb(255 255 255 / .06); }

/* ------------------------------------------------------------- combobox */
/* ComboBox decorates a <select>: the native control stays in the DOM as the
   value store (form-engine reads and writes it), so it is hidden without
   display:none — a removed control cannot report selectedOptions. */
.combo-field { position: relative; }
.combo-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Room on the right for the caret, and for the clear button when one shows. */
.combo-input { padding-right: 2.1rem; text-overflow: ellipsis; }
.combo-field:has(.combo-clear:not(.hidden)) .combo-input { padding-right: 3.6rem; }
.combo-caret {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font-size: .7rem; line-height: 1; color: rgb(132 148 171);
  pointer-events: auto; cursor: pointer; transition: transform .15s;
}
.combo-field.is-open .combo-caret { transform: translateY(-50%) rotate(180deg); }
.combo-field.is-disabled .combo-caret { cursor: not-allowed; opacity: .5; }
.combo-clear {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
  border-radius: 999px; font-size: .85rem; line-height: 1;
  color: rgb(132 148 171); background: rgb(240 242 246); cursor: pointer;
}
.combo-clear:hover { color: rgb(200 12 42); background: rgb(254 226 231); }
.dark .combo-clear { background: rgb(37 47 66); }

/* The panel is fixed and lives on <body>: an in-flow panel is clipped by the
   address table's horizontal scroller, and z-index has to clear the sticky
   action bar (z-30) it may overlap. */
.combo-pop {
  position: fixed; z-index: 70; overflow-y: auto; overscroll-behavior: contain;
  border-radius: .6rem; border: 1px solid rgb(213 218 227); background: #fff;
  box-shadow: 0 12px 36px -8px rgb(16 24 40 / .28);
  -webkit-overflow-scrolling: touch;
}
.dark .combo-pop { border-color: rgb(65 77 97); background: rgb(19 26 40); }
.combo-row {
  padding: .5rem .7rem; font-size: .85rem; line-height: 1.35; cursor: pointer;
  color: rgb(17 17 17);
}
.dark .combo-row { color: rgb(236 239 243); }
.combo-row:hover, .combo-row.is-active { background: rgb(238 251 244); }
.dark .combo-row:hover, .dark .combo-row.is-active { background: rgb(31 161 112 / .16); }
/* The matched run, not a decoration — it is why this row is in the list. */
.combo-hit { font-weight: 700; color: rgb(21 128 88); }
.dark .combo-hit { color: rgb(67 189 139); }
.combo-empty { padding: .7rem; font-size: .8rem; color: rgb(132 148 171); text-align: center; }
@media (max-width: 640px) {
  /* Bigger rows where the target is a thumb. */
  .combo-row { padding: .65rem .8rem; font-size: .875rem; }
}

/* ---------------------------------------------- present/permanent address */
/* Three columns: row label | বর্তমান | স্থায়ী. Cells align on a shared grid so
   every row lines up regardless of field type. */
.addr-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: .75rem 1rem;
  align-items: start;
  padding: .7rem .9rem;
}
.addr-label { padding-top: .15rem; }
.addr-head { align-items: end; padding-top: .85rem; padding-bottom: .85rem; }
/* Quiet zebra + hover so a long address table stays readable. */
.addr-row:nth-of-type(2n) { background: rgb(249 250 251); }
.dark .addr-row:nth-of-type(2n) { background: rgb(255 255 255 / .02); }
.addr-row:not(.addr-head):hover { background: rgb(238 251 244); }
.dark .addr-row:not(.addr-head):hover { background: rgb(31 161 112 / .08); }
/* The permanent column sits on a faint tint, like the design's shaded side. */
.addr-permanent { position: relative; }
/* A branch row collapses when its *present* cell is hidden (area type not
   active). Watching only the present column means a same-as-mirrored permanent
   cell never hides a whole row. */
.addr-row:has(.addr-present > [data-field-wrap].hidden-field) { display: none; }
/* The field wrapper inside a cell no longer needs grid spans — it fills. */
.addr-cell > [data-field-wrap] { width: 100%; }
.addr-cell .field-help, .addr-cell .field-remark { margin-top: .25rem; }
@media (max-width: 640px) {
  /* Stack to one column so nothing scrolls sideways on a phone. Each row reads
     as a small card: bold label, then the two addresses with their own caption. */
  .addr-scroll { overflow-x: visible; }
  .addr-row { grid-template-columns: 1fr; gap: .5rem; padding: .85rem .95rem; }
  .addr-head { display: none; }
  .addr-label { padding-top: 0; }
  .addr-label > div:first-child { font-size: .9rem; font-weight: 700; }
  .addr-present::before { content: "বর্তমান / Present"; }
  .addr-permanent::before { content: "স্থায়ী / Permanent"; }
  .addr-present::before, .addr-permanent::before {
    display: block; font-size: 11px; font-weight: 600;
    color: rgb(132 148 171); margin-bottom: .25rem;
  }
  /* A dashed rule separates the permanent copy from the present one. */
  .addr-permanent { border-top: 1px dashed rgb(226 232 240); padding-top: .55rem; }
  .dark .addr-permanent { border-color: rgb(51 63 82); }
  /* When same-as hides a permanent cell entirely (non-branch mirror off), drop
     its caption too so no orphan label is left behind. */
  .addr-permanent:not(:has(input, select, textarea)) { display: none; }
}

/* -------------------------------------------------------------- utility */
.hidden-field { display: none !important; }
.skeleton {
  background: linear-gradient(90deg, rgb(236 239 243) 25%, rgb(246 247 249) 50%, rgb(236 239 243) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.toast-wrap { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); z-index: 60; }
@media (min-width: 1024px) { .toast-wrap { bottom: 1.5rem; left: auto; right: 1.5rem; transform: none; } }
.toast {
  border-radius: .7rem; padding: .6rem 1rem; font-size: .8rem; color: #fff;
  box-shadow: 0 8px 32px -8px rgb(16 24 40 / .35); animation: rise .2s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

*:focus-visible { outline: 2px solid rgb(31 161 112); outline-offset: 2px; }

/* ------------------------------------------------------------- switches */
/* An on/off control that reads as on/off at a glance. Built on a real
   <input type="checkbox"> (or a submit button styled as one) so it keeps
   keyboard focus, the disabled state and screen-reader semantics — a <div>
   with a click handler has none of those. */
.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; flex: none; width: 2.6rem; height: 1.45rem;
  border-radius: 999px; background: rgb(203 213 225);
  transition: background-color .22s cubic-bezier(.4, 0, .2, 1);
}
.dark .switch-track { background: rgb(55 65 81); }
.switch-thumb {
  position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem;
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgb(16 24 40 / .3);
  display: grid; place-items: center; font-size: .55rem; color: rgb(132 148 171);
  /* The overshoot is what makes it feel like a switch rather than a fade. */
  transition: transform .24s cubic-bezier(.34, 1.4, .64, 1), color .22s;
}
.switch input:checked + .switch-track { background: rgb(31 161 112); }
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(1.15rem); color: rgb(21 128 88);
}
.switch input:focus-visible + .switch-track {
  outline: none; box-shadow: 0 0 0 3px rgb(31 161 112 / .3);
}
.switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }
.switch-label { font-size: .8rem; font-weight: 500; }
.switch-on  { color: rgb(21 128 88); }
.switch-off { color: rgb(107 114 128); }

/* Same control as a one-click POST button on a list row. */
button.switch { background: none; border: 0; padding: 0; }
button.switch .switch-track { background: rgb(203 213 225); }
button.switch.is-on .switch-track { background: rgb(31 161 112); }
button.switch.is-on .switch-thumb { transform: translateX(1.15rem); color: rgb(21 128 88); }
button.switch:hover .switch-track { filter: brightness(.95); }
button.switch:focus-visible .switch-track {
  outline: none; box-shadow: 0 0 0 3px rgb(31 161 112 / .3);
}

/* A permission tile: the switch plus what it actually lets someone do. */
.perm-grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.perm-tile {
  display: flex; align-items: flex-start; gap: .6rem;
  border: 1px solid rgb(213 218 227); border-radius: .6rem;
  padding: .55rem .65rem; background: #fff;
  transition: border-color .15s, background-color .15s;
}
.dark .perm-tile { border-color: rgb(65 77 97); background: rgb(11 18 32); }
.perm-tile:hover { border-color: rgb(31 161 112); }
.perm-tile.is-on { border-color: rgb(31 161 112); background: rgb(238 251 244); }
.dark .perm-tile.is-on { background: rgb(31 161 112 / .1); }
/* Denied beats allowed in permission_set(), so it has to look different, not
   just "another green tile". */
.perm-tile.is-denied { border-color: rgb(248 48 70); background: rgb(254 242 243); }
.dark .perm-tile.is-denied { background: rgb(248 48 70 / .1); }
.perm-tile .perm-name { font-size: .8rem; font-weight: 600; line-height: 1.3; }
.perm-tile .perm-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem; color: rgb(107 114 128); word-break: break-all;
}
/* Marks a capability the role already grants, so the admin can see at a glance
   that ticking Allow here would change nothing. */
.perm-from-role {
  display: inline-block; margin-left: .3rem; padding: 0 .3rem;
  border-radius: .25rem; background: rgb(219 234 254); color: rgb(30 64 175);
  font-size: .6rem; font-weight: 700; vertical-align: middle;
}
.dark .perm-from-role { background: rgb(30 58 138 / .5); color: rgb(191 219 254); }

/* ------------------------------------------------- official form document */
/* The application rendered on screen as the sheet it prints as. Mirrors
   templates/applications/pdf.html so the two read as one document — the
   applicant compares the page against their printout and they must match.
   Proportions are relative (rem/%), not the PDF's fixed points, so the same
   markup holds up from a 320px phone to a wide desktop. */
.doc-sheet {
  max-width: 52rem; margin-inline: auto; padding: 1.5rem 1.5rem 1.25rem;
  background: #fff; color: #111;
  border: 1px solid rgb(213 218 227); border-radius: .75rem;
  box-shadow: 0 10px 40px -16px rgb(16 24 40 / .18);
}
/* The sheet stays paper-white in dark mode. An official record that inverts
   looks like a different document, and it is the one thing on the page the
   user will hold next to a printout. */
.dark .doc-sheet { border-color: rgb(65 77 97); box-shadow: 0 10px 40px -16px #000; }

.doc-head {
  display: grid; grid-template-columns: 4.5rem 1fr 4.75rem;
  gap: .75rem; align-items: start;
  border-bottom: 1.5px solid #111; padding-bottom: .6rem;
}
.doc-head-logo img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.doc-head-mid { text-align: center; }
.doc-head-mid h1 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.doc-head-mid h2 { margin: 0; font-size: .85rem; font-weight: 600; line-height: 1.3; }
.doc-head-meta { margin: .15rem 0 0; font-size: .68rem; color: #444; word-break: break-word; }
.doc-form-title {
  display: inline-block; margin: .4rem 0 0; padding: .1rem 1rem;
  border: 1px solid #111; font-size: .9rem; font-weight: 700;
}
.doc-photo {
  width: 4.6rem; height: 5.6rem; object-fit: cover;
  border: 1px solid #444; background: #f4f4f4; margin-inline-start: auto;
}
.doc-photo-empty {
  display: grid; place-items: center; padding: .25rem;
  border-style: dashed; border-color: #777;
  font-size: .55rem; line-height: 1.25; color: #777; text-align: center;
}
.doc-appno {
  display: inline-block; margin: .55rem 0 .1rem; padding: .1rem .7rem;
  border: 1px solid #111; font-size: .82rem; font-weight: 700;
}
.doc-sec {
  margin: .9rem 0 .3rem; padding-bottom: .15rem;
  border-bottom: 1px solid #666; font-size: .92rem; font-weight: 700; color: #000;
}

/* Two label/value pairs per line, as the form prints — one per line on a phone,
   where two would leave each value about eight characters wide. */
.doc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin: 0; }
.doc-kv-pair { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; padding: .22rem 0; }
.doc-kv-pair > dt { font-size: .82rem; color: #333; }
/* The colon sits on the label, not between two cells: a grid gap cannot keep a
   separator glued to text that wraps. */
.doc-kv-pair > dt::after { content: " :"; color: #666; }
.doc-kv-pair > dd {
  margin: 0; font-size: .82rem; font-weight: 600;
  border-bottom: 1px dotted #bbb; min-width: 0;
  word-break: break-word; overflow-wrap: anywhere;
}
/* A composed address is one long value — it takes the full width of the sheet. */
.doc-kv-wide { grid-column: 1 / -1; grid-template-columns: 8.5rem 1fr; }
.doc-remark { display: block; font-size: .7rem; font-weight: 500; color: rgb(200 12 42); }

/* বর্তমান | স্থায়ী headings over the paired address block, on the same two
   columns the pairs below them use. Folds to one column with the pairs. */
.doc-dual-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem;
  margin: .9rem 0 .1rem; font-size: .92rem; font-weight: 700;
}
.doc-dual-head > span { border-bottom: 1px solid #666; padding-bottom: .15rem; }
@media (max-width: 640px) { .doc-dual-head { grid-template-columns: 1fr; } }

.doc-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: .3rem; }
.doc-grid { width: 100%; border-collapse: collapse; min-width: 34rem; }
.doc-grid th, .doc-grid td {
  border: 1px solid #333; padding: .35rem .45rem;
  font-size: .8rem; text-align: center; vertical-align: middle;
}
.doc-grid th { background: #eee; font-weight: 700; }
/* Exam name and institution are the columns people read; a GPA, a year and a
   roll are a few characters and do not need equal shares. */
.doc-grid td:first-child, .doc-grid th:first-child { text-align: right; }
.doc-grid td:nth-child(2), .doc-grid th:nth-child(2) { text-align: left; }
.doc-grid-empty { color: #888; }

.doc-decl {
  margin-top: .9rem; padding: .55rem .7rem;
  border: 1px solid #ddd; background: #fafafa;
  font-size: .8rem; line-height: 1.6; text-align: justify;
}
.doc-sign {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem;
}
.doc-sign-date { font-size: .82rem; }
.doc-sign-box { text-align: right; }
.doc-sign-box img { max-height: 2.5rem; max-width: 9rem; }
.doc-sign-line {
  border-top: 1px solid #111; margin-top: .15rem; padding-top: .15rem;
  min-width: 9rem; font-size: .78rem;
}

@media (max-width: 640px) {
  .doc-sheet { padding: 1rem .85rem; border-radius: .5rem; }
  /* The photo drops below the title rather than squeezing the council's name
     into a third of the width. */
  .doc-head { grid-template-columns: 2.75rem 1fr; }
  .doc-head-logo img { width: 2.5rem; height: 2.5rem; }
  .doc-head-mid h1 { font-size: .95rem; }
  .doc-head-photo { grid-column: 1 / -1; }
  .doc-photo { margin-inline: auto; }
  .doc-kv { grid-template-columns: 1fr; }
  .doc-kv-pair, .doc-kv-wide { grid-template-columns: 7rem 1fr; }
}

@media print {
  header, footer, nav, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border-color: #999 !important; }
  /* Ctrl-P on the detail page should yield the form, not a screenshot of a
     card: drop the frame and let the sheet be the page. */
  .doc-sheet {
    max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  .doc-grid-scroll { overflow: visible; }
  .doc-grid { min-width: 0; }
  .doc-decl, .doc-sign, .doc-grid { break-inside: avoid; }
}