/* Palette, theme handling, spacing/type/radius scales and the shared
   baseline all live in shared.css — this file is dashboard layout only. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Smooths the light/dark switch so colors ease into place instead of
   flashing. Lowest possible specificity, so any element with its own
   transition (hover effects etc.) simply overrides this — nothing here
   fights those. */
*, *::before, *::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
}
button, input, textarea, select { font-family: inherit; }

/* Keyboard users get a clear, branded focus ring; mouse users never see it.
   Fields keep their own focus treatment, so they're left out here. */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
.ms-option:focus-visible,
.radio-opt:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: var(--rad-ctl);
}

::selection { background: var(--blue-600); color: #fff; }

/* Digits line up column-to-column instead of jittering by glyph width —
   matters most in a table full of amounts and dates. */
.num, .amount, .ths-stat b, .cq-amount { font-variant-numeric: tabular-nums; }

/* A slim, theme-aware scrollbar everywhere the page scrolls, instead of the
   browser's stark default (which stays white even in dark mode). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--rad-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Only the actual cheque data (table/card values, and anything the user is
   typing) can be selected — every other label, title, and button stays
   un-selectable so a stray tap or drag doesn't highlight the UI chrome. */
body { -webkit-user-select: none; user-select: none; }
input, textarea,
.cheque-table td, .cheque-table td *,
.cq-card, .cq-card * { -webkit-user-select: text; user-select: text; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  font-family: 'IRANYekanX', 'Tahoma', sans-serif;
  font-variation-settings: var(--f-body);
  color: var(--ink);
  min-height: 100vh;
}

/* A 10% zoom was tried twice (on body, then on html) to make desktop read
   a little larger, but both times it threw every JS-computed popup position
   (calendar, dropdowns, autocomplete) out of sync with its anchor field.
   Given that's broken it twice, it's left off for reliability. */

.main { position: relative; }

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start; /* right side in RTL */
}

.theme-toggle-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.theme-toggle-btn:hover { color: var(--blue-600); }
.theme-toggle-btn svg { width: 19px; height: 19px; }
.theme-toggle-btn .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: block; }

.logout-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--rad-ctl);
  transition: color 0.15s ease, background 0.15s ease;
}
.logout-btn:hover { color: var(--error); background: var(--error-bg); }
.logout-btn svg { width: 19px; height: 19px; }

.company-name {
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
@media (max-width: 720px) { .company-name { display: none; } }

.header-support-btn {
  display: none;   /* only shown on mobile — see the media query below */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--rad-ctl);
  background: var(--bg);
  color: var(--blue-600);
  cursor: pointer;
  transition: background 0.15s ease;
}
.header-support-btn:hover { background: var(--blue-100); }
.header-support-btn svg { width: 19px; height: 19px; }
@media (max-width: 720px) { .header-support-btn { display: flex; } }
.header-logo {
  justify-self: center;
  font-size: 24px;
  color: var(--blue-900);
  font-variation-settings: var(--f-brand);
  letter-spacing: 0.5px;
  user-select: none;
}

.header-clock {
  justify-self: end; /* left side in RTL */
  display: flex;
  align-items: center;
  gap: 12px;
}

.clock-box {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* A small shared tooltip for table cells that carry extra info on hover
   (serial→sayad id, owner→send date, etc.), positioned via JS. */
.cell-tooltip {
  position: fixed;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: 13px;
  font-variation-settings: var(--f-num);
  padding: 6px 10px;
  border-radius: var(--rad-ctl);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 250;
}
.cell-tooltip.show { opacity: 1; }
.cheque-table [data-tip] { cursor: default; }

.clock-face-wrap { position: relative; flex-shrink: 0; }
.clock-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: 13px;
  font-variation-settings: var(--f-num);
  padding: 6px 10px;
  border-radius: var(--rad-ctl);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}
.analog-clock:hover ~ .clock-tooltip,
.clock-tooltip.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Smaller and quieter than it was: the clock is orientation, not the
   subject of the page, so it no longer competes with the logo beside it. */
.analog-clock {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  cursor: default;
}
.ac-face { fill: var(--surface); stroke: var(--border-strong); stroke-width: 3; }
.ac-tick { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.ac-tick.ac-tick-major { stroke: var(--border-strong); stroke-width: 3; }
.ac-hand { stroke-linecap: round; }
.ac-hour { stroke: var(--ink-2); stroke-width: 5.5; }
.ac-minute { stroke: var(--ink-2); stroke-width: 4; }
/* the second hand is the one moving part, so it carries the accent —
   red is reserved for things that are actually wrong */
.ac-second { stroke: var(--accent); stroke-width: 2; }
.ac-pin { fill: var(--ink-2); }

.clock-date {
  display: flex;
  align-items: center;
  height: 34px;
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-num);
  white-space: nowrap;
}

/* ===== Main content ===== */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) 96px;
}

.add-check-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s6);
}

/* ===== Due-date alert bar ===== */
.due-alert-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--error);
  border-radius: var(--rad-ctl);
  padding: 10px 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}
.due-alert-bar[hidden] { display: none; }
/* The bell nudges every few seconds so an overdue cheque catches the eye
   without the whole bar flashing. */
.due-alert-icon {
  width: 20px;
  height: 20px;
  color: var(--error);
  flex-shrink: 0;
  transform-origin: 50% 15%;
  animation: bellNudge 5s var(--ease) infinite;
}
@keyframes bellNudge {
  0%, 88%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(9deg); }
  94% { transform: rotate(-7deg); }
  97% { transform: rotate(3deg); }
}
.due-alert-viewport { flex: 1; min-width: 0; overflow: hidden; height: 22px; position: relative; }
.due-alert-track { position: absolute; inset: 0; display: flex; align-items: center; }
.due-alert-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
}
.due-alert-item.enter { animation: dueAlertSlideIn 0.4s var(--ease); }
.due-alert-item:hover .due-alert-text { color: var(--blue-700); }
.due-alert-item:hover .due-alert-dot { transform: scale(1.35); }
.due-alert-dot { transition: transform 0.18s var(--ease); }
@keyframes dueAlertSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.due-alert-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.due-alert-item.due-overdue .due-alert-dot,
.due-alert-item.due-today .due-alert-dot { background: var(--error); }
.due-alert-item.due-soon .due-alert-dot { background: var(--state-warn); }
.due-alert-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink);
  font-variation-settings: var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.due-alert-text b { font-variation-settings: var(--f-label); }
.due-alert-when {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  font-variation-settings: var(--f-micro);
  white-space: nowrap;
}
.due-alert-item.due-overdue .due-alert-when,
.due-alert-item.due-today .due-alert-when { color: var(--error); }
.due-alert-item.due-soon .due-alert-when { color: var(--state-warn); }
.due-alert-count {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  font-variation-settings: var(--f-micro);
}
@media (max-width: 600px) {
  .due-alert-bar { padding: 8px 12px; gap: 8px; }
  /* the count is the droppable part on a narrow screen — never the urgency */
  .due-alert-count { display: none; }
}

@keyframes rowFlash {
  0%   { background: var(--blue-100); }
  100% { background: transparent; }
}
#chequeBody tr.row-flash,
#chequeCards .cq-card.row-flash { animation: rowFlash 1.6s ease; }

.add-check-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blue-700);
  color: var(--white);
  border: none;
  border-radius: var(--rad-ctl);
  padding: 16px 32px;
  font-family: inherit;
  font-size: 17px;
  font-variation-settings: var(--f-btn);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  overflow: hidden;
}
.add-check-btn::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -55%;
  width: 34%;
  height: 220%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.02) 30%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.02) 70%,
    transparent 100%
  );
  transform: rotate(11deg);
  filter: blur(2.5px);
  animation: btnShimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShimmer {
  0%   { left: -55%; }
  55%  { left: 145%; }
  100% { left: 145%; }
}
.add-check-btn:hover {
  background: var(--blue-hover);
}
/* The grow-on-hover effect only makes sense for a real mouse — on
   touch, tapping can trigger a lingering ":hover" state on some mobile
   browsers with no matching "un-hover" event, since there's no pointer
   to move away, so it's scoped out of touch devices entirely. */
@media (hover: hover) and (pointer: fine) {
  .add-check-btn:hover { transform: scale(1.05); }
}
.add-check-btn:active { transform: scale(0.98); }
.add-check-btn.just-saved { animation: pulseOnce 0.6s ease; }
.add-check-btn svg { width: 22px; height: 22px; }

.section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 28px;
}
.section-divider.plain { height: 1px; background: var(--border); margin: 4px 0 28px; }
.section-divider .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-divider span {
  font-size: 14px;
  color: var(--muted);
  font-variation-settings: var(--f-micro);
  white-space: nowrap;
}

.placeholder-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed var(--border);
  border-radius: var(--rad-card);
  background: var(--surface);
  padding: 72px var(--s5);
  color: var(--muted);
}
.placeholder-area svg { width: 34px; height: 34px; opacity: 0.5; margin-bottom: 6px; }
.placeholder-area .p-title {
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: var(--f-value);
}
.placeholder-area .p-sub {
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-hint);
}

/* ===== Motion ===== */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseOnce {
  0%   { box-shadow: 0 0 0 0 rgba(45,140,255,0.35); }
  100% { box-shadow: 0 0 0 12px rgba(45,140,255,0); }
}
/* Anyone who asked their system to cut motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== Search & filter bar ===== */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  padding: 10px 12px;
  margin-bottom: 14px;
  position: sticky;
  top: 12px;
  z-index: 40;
  box-shadow: var(--shadow-1);
}
.search-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-box {
  flex: 1 1 240px;
  min-width: 190px;
  max-width: 360px;
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-box:focus-within { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); }
.search-icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; margin-left: 8px; }
.search-box input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-value);
  color: var(--ink);
  direction: ltr;
  text-align: left;
}
.search-box input::placeholder { color: var(--muted); font-size: 13px; font-variation-settings: var(--f-hint); text-align: right; }
.search-clear {
  width: 24px; height: 24px;
  border: none; border-radius: var(--rad-ctl);
  background: none; color: var(--muted);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-clear.show { display: flex; }
.search-clear:hover { background: var(--error-bg); color: var(--error); }
.search-clear svg { width: 13px; height: 13px; }

.filter-by-label {
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-label);
  flex-shrink: 0;
  /* Search sits at one end of the bar and the filter controls at the other,
     instead of both bunching up and leaving dead space on the far side. */
  margin-inline-start: auto;
}
.filter-pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill-btn {
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              color 0.16s var(--ease), transform 0.12s var(--ease);
}
.filter-pill-btn:hover { border-color: var(--blue-600); color: var(--blue-700); }
.filter-pill-btn:active { transform: scale(0.96); }
.filter-pill-btn.open { background: var(--blue-100); border-color: var(--blue-600); color: var(--blue-900); }
.filter-pill-btn.active {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
}
/* Touch targets stay comfortable on phones even though the row is tighter
   on desktop. */
@media (max-width: 700px) {
  .search-box { height: 42px; }
  .filter-pill-btn { height: 42px; padding: 0 16px; font-size: 13px; }
}

.filter-clear-btn {
  display: none;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: var(--rad-ctl);
  background: var(--bg);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.filter-clear-btn.show { display: flex; }
.filter-clear-btn:hover { background: var(--error-bg); color: var(--error); }
.filter-clear-btn svg { width: 13px; height: 13px; }

/* summary strip: which filters are engaged and what they're set to */
.active-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: margin-top 0.15s ease;
}
.active-filters-row:not(:empty) { margin-top: 10px; max-height: none; overflow: visible; }
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: var(--rad-card);
  background: var(--blue-100);
  border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-size: 12px;
  font-variation-settings: var(--f-micro);
  white-space: nowrap;
}
.active-chip button {
  width: 20px; height: 20px;
  border: none; border-radius: 50%;
  background: rgba(10,78,214,0.12);
  color: var(--blue-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.active-chip button:hover,
.active-chip button:active { background: var(--error); color: #fff; transform: scale(1.1); }
.active-chip button svg { width: 11px; height: 11px; }

/* ---- Popovers: fixed, float above the table, never push it down ---- */
.filter-popover {
  position: fixed;
  display: none;
  width: 340px;
  max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  padding: 16px;
  z-index: 500;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2);
}
.filter-popover.show { display: block; animation: riseIn 0.16s var(--ease); }
@media (max-width: 480px) {
  .filter-popover { width: calc(100vw - 56px); }
}
.fp-title {
  font-size: 13px;
  color: var(--blue-700);
  font-variation-settings: var(--f-label);
  margin-bottom: 12px;
}
.radio-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.radio-opt { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--ink); font-variation-settings: var(--f-body); }
.radio-opt input { accent-color: var(--blue-700); width: 15px; height: 15px; cursor: pointer; }
#filterRangeField { cursor: pointer; }
#filterRangeInput { cursor: pointer; }

.amount-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.amount-filter-box { flex: 1; min-width: 0; }
.amount-filter-box input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-num);
  color: var(--ink);
  direction: ltr;
  text-align: left;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.amount-filter-box input:focus { border-color: var(--blue-600); }
.amount-filter-box input::placeholder { color: var(--muted); font-size: 13px; font-variation-settings: var(--f-hint); text-align: right; }
.af-sep { padding-bottom: 10px; color: var(--muted); font-size: 13px; font-variation-settings: var(--f-hint); flex-shrink: 0; }

.amount-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.af-preset {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-card);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-variation-settings: var(--f-micro);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.af-preset:hover { border-color: var(--blue-600); color: var(--blue-700); }
.af-preset.active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

.filter-people-row { display: flex; flex-direction: column; gap: 16px; }
#filterOwnerList, #filterPartyList, #filterBenefList { max-height: 150px; }
.filter-people-row .form-field { margin-bottom: 0; }
.filter-people-row .ac-input { height: 42px; font-size: 13px; padding: 0 12px; }

.status-chip-row { display: flex; flex-direction: column; gap: 8px; }
.archive-toggle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.status-filter-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.status-filter-chip .st-dot { width: 9px; height: 9px; border-radius: 50%; }
.status-filter-chip.active { border-color: var(--blue-600); background: var(--blue-100); }

@media (max-width: 600px) {
  .filter-bar { position: static; top: auto; }
  /* Full-width search on its own row, with the label and pills below it —
     capping the width here just stranded the label out on the far edge. */
  .search-box { width: 100%; max-width: none; flex-basis: 100%; }
  /* Search owns the first row here, so the label starts the second row
     normally rather than being pushed to the far edge. */
  .filter-by-label { margin-inline-start: 0; }
}

/* ===== Cheque table ===== */
.table-head-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
  row-gap: 8px;
}
.ths-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 8px;
  flex: 1;
  min-width: 0;
}
.ths-title {
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: var(--f-title);
}
.ths-count {
  padding: 2px 10px;
  border-radius: var(--rad-card);
  background: var(--blue-100);
  color: var(--blue-900);
  font-size: 12px;
  font-variation-settings: var(--f-num);
}
.ths-amount {
  margin-right: auto;
  display: flex;
  min-width: 0;
}
.ths-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.ths-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Icon-first action buttons: a square icon at rest, and the label unrolls
   beside it on hover/focus so the strip stays quiet until you reach for it. */
.icon-action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-btn);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), max-width 0.3s var(--ease),
              padding 0.3s var(--ease), opacity 0.2s var(--ease),
              transform 0.12s var(--ease);
}
.icon-action svg { width: 17px; height: 17px; flex-shrink: 0; }
.icon-action .ia-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.32s var(--ease), opacity 0.22s var(--ease), margin 0.32s var(--ease);
}
.icon-action:hover,
.icon-action:focus-visible {
  background: var(--blue-100);
  border-color: var(--blue-600);
  color: var(--blue-700);
}
.icon-action:hover .ia-label,
.icon-action:focus-visible .ia-label {
  max-width: 150px;
  opacity: 1;
  margin-inline-start: var(--s2);
}
.icon-action:active { transform: scale(0.95); }

/* Export cluster: the trigger collapses away and the two format buttons
   unroll into the space it leaves behind. */
.export-cluster { display: inline-flex; align-items: center; gap: 6px; }
.export-cluster.open #reportBtn {
  max-width: 0;
  padding: 0;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
}
.export-opt {
  display: inline-flex;
  align-items: center;
  height: 36px;
  max-width: 0;
  padding: 0;
  opacity: 0;
  border: 1px solid transparent;
  border-radius: var(--rad-ctl);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-btn);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  pointer-events: none;
  transition: max-width 0.32s var(--ease), padding 0.32s var(--ease),
              opacity 0.24s var(--ease), background 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.12s var(--ease);
}
.export-opt svg { width: 16px; height: 16px; flex-shrink: 0; }
.export-opt span { margin-inline-start: 6px; }
.export-cluster.open .export-opt {
  max-width: 130px;
  padding: 0 12px;
  opacity: 1;
  pointer-events: auto;
}
.export-cluster.open .opt-pdf { transition-delay: 0.02s; }
.export-cluster.open .opt-excel { transition-delay: 0.08s; }
.export-opt:active { transform: scale(0.95); }
.opt-pdf { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.opt-pdf:hover, .opt-pdf:focus-visible { background: var(--error); color: #fff; border-color: var(--error); }
.opt-excel { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.opt-excel:hover, .opt-excel:focus-visible { background: var(--success); color: #fff; border-color: var(--success); }
.ths-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-micro);
  min-width: 0;
}
.ths-stat b {
  color: var(--ink);
  font-size: 13px;
  font-variation-settings: var(--f-num);
  word-break: break-word;
}
@media (max-width: 700px) {
  .table-head-strip { padding: 14px 16px; }
  .ths-stats { width: 100%; order: 3; }
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.cheque-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}
.cheque-table thead th {
  text-align: center;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-label);
  letter-spacing: 0.2px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.cheque-table td {
  padding: 10px 16px;
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: var(--f-body);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center;
  transition: background 0.15s ease;
}
.cheque-table tbody tr:last-child td { border-bottom: none; }
.cheque-table tbody tr { animation: riseIn 0.28s ease both; }
.cheque-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.cheque-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.cheque-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.cheque-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.cheque-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
.cheque-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.cheque-table td { cursor: default; }
.cheque-table tbody tr:hover td { background: var(--surface-2); }
.cheque-table td .status-btn, .cheque-table td .eye-btn { cursor: pointer; }

/* Option 1 — a thin colored outline eases in around the whole row on hover.
   Kept here, commented out, so it's a one-line swap back if wanted.
.cheque-table tbody tr {
  outline: 0px solid transparent;
  outline-offset: -2px;
  transition: outline-width 0.2s ease;
}
.cheque-table tbody tr:hover { outline-width: 2px; }
.cheque-table tbody tr.st-pending:hover { outline-color: var(--state-idle-dot); }
.cheque-table tbody tr.st-done:hover { outline-color: var(--state-ok); }
.cheque-table tbody tr.st-problem:hover { outline-color: var(--state-warn); }
*/

/* Option 2 — a few faint dots drift with no fixed pattern inside whichever
   row is hovered, tinted to that row's status. Positioned via JS (random
   per hover) rather than a tiled CSS background, so they never look like a
   repeating grid. */
.hover-dots {
  position: fixed;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hover-dots.show { opacity: 1; }
.hover-dots span {
  position: absolute;
  border-radius: 50%;
  background: var(--dot-color, var(--blue-600));
  opacity: var(--base-op, 0.2);
  animation: dotFloat 5s ease-in-out infinite;
}
@keyframes dotFloat {
  0%   { transform: translate(0, 0) scale(0.8); opacity: calc(var(--base-op, 0.2) * 0.55); }
  50%  { transform: translate(var(--fx), var(--fy)) scale(1.15); opacity: var(--base-op, 0.2); }
  100% { transform: translate(0, 0) scale(0.8); opacity: calc(var(--base-op, 0.2) * 0.55); }
}

.cheque-table .col-row { width: 56px; color: var(--muted); }
.cheque-table th.col-row,
.cheque-table th.col-num,
.cheque-table th.col-status,
.cheque-table th.col-eye,
.cheque-table td.num,
.cheque-table td.amount,
.cheque-table td.status-cell,
.cheque-table td.col-eye { text-align: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.cheque-table .col-eye { width: 84px; }
.cheque-table .col-status { width: 148px; }
.cheque-table .num { font-variation-settings: var(--f-num); white-space: nowrap; }
.cheque-table .amount { font-variation-settings: var(--f-num); font-size: 15px; color: var(--ink); white-space: nowrap; }
.cheque-table .owner-name,
.cheque-table .party-name,
.cheque-table .benef-name { font-variation-settings: var(--f-value); }
.cheque-table .benef-name { display: block; text-align: center; }
.cheque-table .benef-nid {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-num);
}
/* A hairline of status colour down the row edge — enough to scan a long
   table by, quiet enough not to fight the chip in the status column. */
.cheque-table tbody tr td:first-child { border-right: 3px solid transparent; position: relative; }
.cheque-table tr.st-pending td:first-child { border-right-color: var(--state-idle-dot); }
.cheque-table tr.st-done td:first-child { border-right-color: var(--state-ok); }
.cheque-table tr.st-problem td:first-child { border-right-color: var(--state-warn); }
/* a faint echo of the status colour on the far edge too, so the row reads as
   one accented unit rather than just a coloured stripe down one side */

.status-cell { position: relative; }
.status-cell .status-btn { width: 100%; justify-content: center; }
.status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--rad-pill);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-micro);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.status-btn { transition: filter 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease); }
.status-btn:hover { border-color: var(--border-strong); }
.status-btn:active { transform: scale(0.97); }
.status-btn .st-dot { display: none; }
.status-btn svg { width: 13px; height: 13px; opacity: 0.7; }
.status-btn::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.st-pending .status-btn {
  background: var(--state-idle-bg);
  color: var(--state-idle);
  border-color: transparent;
  font-variation-settings: var(--f-label);
}
.st-pending .status-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
}
.st-done .status-btn {
  background: var(--state-ok-bg);
  color: var(--state-ok);
  border-color: transparent;
  font-variation-settings: var(--f-label);
}
.st-done .status-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.st-problem .status-btn {
  background: var(--state-warn-bg);
  color: var(--state-warn);
  border-color: transparent;
  font-variation-settings: var(--f-label);
}
.st-problem .status-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.86 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.86a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.86 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.86a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

.status-menu {
  position: fixed;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-ctl);
  padding: 6px;
  z-index: 500;
  display: none;
}
.status-menu.show { display: block; animation: slideDown 0.16s ease; }
.status-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: var(--rad-ctl);
  cursor: pointer;
  font-size: 13px;
  font-variation-settings: var(--f-body);
  color: var(--ink);
}
.status-opt:hover { background: var(--bg); }
.status-opt .st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Reverting to "منتظر ثبت" morphs this option in place, the same slide-in
   idea as the delete/save confirmations elsewhere, scaled down for this
   small dropdown row. */
.status-opt.confirming-revert {
  background: var(--blue-100);
  color: var(--blue-700);
  justify-content: space-between;
  font-variation-settings: var(--f-btn);
}
.status-revert-cancel {
  width: 0;
  height: 26px;
  padding: 0;
  margin-right: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-variation-settings: var(--f-label);
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: width 0.22s ease, opacity 0.18s ease, margin-right 0.22s ease, background 0.15s ease;
}
.status-revert-cancel.show { width: 56px; opacity: 1; margin-right: 8px; padding: 0 4px; }
.status-revert-cancel:hover { background: var(--bg); }
.status-reason {
  padding: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.status-reason textarea {
  width: 100%;
  min-height: 62px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-body);
  color: var(--ink);
  background: var(--surface);
  direction: rtl;
  resize: vertical;
  outline: none;
}
.status-reason textarea:focus { border-color: var(--blue-600); }
.status-reason-actions { display: flex; gap: 6px; margin-top: 6px; }
.status-reason-actions button {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: var(--rad-ctl);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
}
.sr-save { background: var(--blue-hover); color: #fff; }
.sr-cancel { background: var(--bg); color: var(--muted); }

/* Both row actions sit in fixed-width slots, and the receipt slot is still
   reserved (just empty) on rows that have no receipt yet — otherwise the eye
   button would shift sideways from row to row as statuses change. */
.row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.row-actions-slot { width: 34px; height: 34px; flex-shrink: 0; }

.eye-btn,
.receipt-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--rad-ctl);
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}
.eye-btn:hover, .receipt-btn:hover { background: var(--blue-100); color: var(--blue-600); transform: scale(1.08); }
.eye-btn:active, .receipt-btn:active { transform: scale(0.94); }
.eye-btn svg { width: 19px; height: 19px; }
.receipt-btn svg { width: 18px; height: 18px; }
.receipt-btn.copied { color: var(--success); background: var(--success-bg); }
.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 72px var(--s5);
  color: var(--muted);
}

/* Until the first fetch lands, shimmer placeholders stand in for the rows.
   Without this the empty state ("no cheques yet") flashes up for as long as
   the request takes, telling the user something that isn't true yet. */
.table-skeleton { display: none; padding: 14px 16px 16px; }
.table-wrap.is-loading .table-skeleton { display: block; }
.table-wrap.is-loading .table-scroll,
.table-wrap.is-loading .cheque-cards,
.table-wrap.is-loading .table-empty,
.table-wrap.is-loading .table-pager { display: none !important; }
.sk-row {
  height: 44px;
  border-radius: var(--rad-ctl);
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-sheen) 37%, var(--skeleton-base) 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.3s var(--ease) infinite;
}
.sk-row:nth-child(2) { animation-delay: 0.08s; opacity: 0.9; }
.sk-row:nth-child(3) { animation-delay: 0.16s; opacity: 0.8; }
.sk-row:nth-child(4) { animation-delay: 0.24s; opacity: 0.7; }
.sk-row:nth-child(5) { animation-delay: 0.32s; opacity: 0.6; }
@keyframes skShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.table-empty svg { width: 34px; height: 34px; opacity: 0.45; margin-bottom: 4px; }
.table-empty .p-title { font-size: 15px; color: var(--ink); font-variation-settings: var(--f-value); }
.table-empty .p-sub { font-size: 13px; font-variation-settings: var(--f-hint); }

.table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border-top: 1px solid var(--border);
}
.table-pager:empty { display: none; }
.pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-num);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pg-btn:hover:not(:disabled) { background: var(--blue-100); border-color: var(--blue-600); }
.pg-btn.active { background: var(--blue-hover); color: #fff; border-color: var(--blue-hover); }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-info { font-size: 13px; color: var(--muted); font-variation-settings: var(--f-micro); margin: 0 8px; }

/* Mobile: a separate, genuinely block-based card list — not a <table> with its
   display overridden, which several mobile browsers render unreliably. */
.cheque-cards { display: none; }
@media (max-width: 760px) {
  .table-wrap { border: none; box-shadow: none; background: transparent; border-radius: 0; }
  .cheque-table { display: none; }
  .cheque-cards { display: block; }
  .table-head-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rad-card);
    margin-bottom: 12px;
    /* Two buttons plus the info cluster no longer read well trying to
       share one wrapping row on a narrow screen — a clean stack instead:
       info on its own row, both action buttons together right under it. */
    flex-direction: column;
    align-items: stretch;
  }
  .ths-info { justify-content: space-between; }
  .ths-amount { margin-right: 0; }
  .ths-actions { justify-content: stretch; }
  /* There's no hover on a phone, so the labels that unroll on desktop are
     simply always out here — and the buttons share the row evenly. */
  .table-head-strip .icon-action { flex: 1; justify-content: center; }
  .table-head-strip .icon-action .ia-label { max-width: 150px; opacity: 1; margin-inline-start: var(--s2); }
  .table-head-strip .export-cluster { flex: 1; }
  .table-head-strip .export-cluster #reportBtn { width: 100%; }
  .table-head-strip .export-cluster.open .export-opt { flex: 1; justify-content: center; }
}

.cq-card {
  animation: riseIn 0.3s ease both;
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: 3px solid var(--state-idle-dot);
  border-radius: var(--rad-ctl);
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: default;
}
.cq-card .status-btn, .cq-card .eye-btn { cursor: pointer; }
.cq-card.st-pending { border-right-color: var(--state-idle-dot); }
.cq-card.st-done { border-right-color: var(--state-ok); }
.cq-card.st-problem { border-right-color: var(--state-warn); }
.cq-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg);
}
.cq-serial {
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: var(--f-value);
}
.cq-serial span { color: var(--muted); font-variation-settings: var(--f-micro); font-size: 12px; margin-left: 6px; }
.cq-amount { font-size: 15px; color: var(--blue-900); font-variation-settings: var(--f-num); }
.cq-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cq-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.cq-row .cq-label { color: var(--muted); font-variation-settings: var(--f-micro); flex-shrink: 0; }
.cq-row .cq-value { color: var(--ink); font-variation-settings: var(--f-body); text-align: left; }
.cq-row .cq-value .benef-nid { font-size: 12px; display: inline-block; margin-top: 2px; }
.cq-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cq-icon-group { display: flex; align-items: center; gap: 2px; }

/* ===== Add Check Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,27,51,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 24px;
}
.modal-overlay.show { display: flex; }

.modal-box {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.22s var(--ease);
  box-shadow: var(--shadow-2);
}
@media (min-width: 601px) {
  .modal-box { max-width: 700px; max-height: 82vh; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
@media (min-width: 601px) {
  .modal-header { padding: 10px 20px; }
}
.modal-header h2 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: var(--f-title);
}
.modal-close {
  width: 30px;
  height: 30px;
  border-radius: var(--rad-ctl);
  border: none;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--error-bg); color: var(--error); }
.modal-close svg { width: 16px; height: 16px; }

.modal-body {
  padding: 14px 16px;
  overflow-y: auto;
}
@media (min-width: 601px) {
  .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    align-items: start;
    padding: 16px 20px;
  }
  .form-field.field-full { grid-column: 1 / -1; }
}

.form-field {
  position: relative;
  margin-bottom: 14px;
}
.form-field:last-child { margin-bottom: 0; }
/* serialField ends up as the only child of its own wrapper (split off so
   sayadField could sit outside the view-mode inert boundary — see
   #sayadField/.sayad-static), which makes the :last-child rule above
   strip its bottom margin even though sayadField visually follows right
   after it. Restoring it explicitly keeps the two fields from touching. */
#serialField { margin-bottom: 14px; }

.form-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  font-size: 15px;
  font-family: inherit;
  font-variation-settings: var(--f-value);
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  direction: ltr;
  text-align: left;
}
/* Shown instead of #sayadInput only while viewing (never editing) a cheque —
   plain text can be selected and copied without ever taking focus, unlike
   an <input>, which has to focus just to let its text be selected at all. */
.sayad-static {
  display: none;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  font-size: 15px;
  font-family: inherit;
  font-variation-settings: var(--f-value);
  color: var(--ink);
  background: var(--surface);
  direction: ltr;
  text-align: left;
  cursor: default;
  user-select: text;
}
#sayadField.view-mode .sayad-static { display: flex; }
#sayadField.view-mode input { display: none; }
.form-field input::placeholder {
  color: var(--muted);
  font-size: 13px;
  font-variation-settings: var(--f-hint);
  text-align: right;
}

.form-field label {
  position: absolute;
  z-index: 2;
  right: 14px;
  top: -8px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  font-variation-settings: var(--f-label);
  display: flex;
  align-items: center;
  gap: 2px;
}
.form-field label .req { color: var(--error); }
.form-field label .opt { color: var(--muted); font-variation-settings: var(--f-hint); }

.form-field input:focus {
  border-color: var(--blue-600);
}
.form-field input:focus ~ label { color: var(--blue-600); }

.form-field.error input {
  border-color: var(--error);
}
.form-field.error input:focus {
  border-color: var(--error);
}
.form-field.error label { color: var(--error); }

.field-msg {
  margin-top: 6px;
  font-size: 13px;
  color: var(--error);
  display: none;
}
.form-field.error .field-msg { display: block; }

/* ---- Date field (day/month/year segments) ---- */
.date-field { position: relative; }
.date-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.date-mask-input {
  flex: 1;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  direction: ltr;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-variation-settings: var(--f-num);
  letter-spacing: 3px;
  color: var(--ink);
  caret-color: var(--blue-600);
  outline: none;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.date-mask-input:focus {
  border-color: var(--blue-600);
}
.date-mask-input::placeholder { color: var(--muted); letter-spacing: 0; font-variation-settings: var(--f-hint); text-align: right; }
.date-field.error .date-mask-input { border-color: var(--error); }
.date-field.error .date-mask-input:focus { border-color: var(--error); }

.amount-box {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.amount-box:focus-within {
  border-color: var(--blue-600);
}
.amount-field.error .amount-box { border-color: var(--error); }
.amount-field.error .amount-box:focus-within { border-color: var(--error); }
.form-field .amount-input,
.form-field .amount-input:focus {
  flex: 1;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  outline: none;
  background: transparent;
  padding: 0;
  min-width: 0;
  font-family: inherit;
  font-size: 17px;
  font-variation-settings: var(--f-num);
  color: var(--ink);
  caret-color: var(--blue-600);
  direction: ltr;
  text-align: left;
  letter-spacing: 0.5px;
}
.amount-input::placeholder {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0;
  font-variation-settings: var(--f-hint);
  text-align: right;
}
.amount-unit {
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--muted);
  font-size: 15px;
  font-variation-settings: var(--f-micro);
}
.amount-words {
  margin-top: 8px;
  font-size: 13px;
  color: var(--blue-700);
  font-variation-settings: var(--f-micro);
  min-height: 18px;
  line-height: 1.6;
}

.ac-field { position: relative; }
.form-field .ac-input {
  direction: rtl;
  text-align: right;
}
.form-field #nidInput {
  direction: ltr;
  text-align: left;
}
.ac-list {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-ctl);
  max-height: 210px;
  overflow-y: auto;
  z-index: 550;
  display: none;
  padding: 4px;
}
.ac-list.show { display: block; animation: slideDown 0.16s ease; }
.ac-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rad-ctl);
  cursor: pointer;
  font-size: 15px;
  font-variation-settings: var(--f-body);
  color: var(--ink);
}
.ac-item:hover, .ac-item.active { background: var(--blue-100); }
.ac-item .ac-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-item mark {
  background: none;
  color: var(--blue-700);
  font-variation-settings: var(--f-label);
}
.ac-item .ac-tag {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  font-variation-settings: var(--f-micro);
}
.ac-new .ac-tag { color: var(--success); }
.nid-kind {
  margin-top: 8px;
  font-size: 13px;
  color: var(--success);
  font-variation-settings: var(--f-micro);
  min-height: 18px;
}
.ac-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-hint);
  text-align: center;
}

.notes-field { position: relative; }
.form-field .notes-input {
  width: 100%;
  height: auto;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  font-family: inherit;
  font-size: 15px;
  font-variation-settings: var(--f-body);
  color: var(--ink);
  direction: rtl;
  text-align: right;
  line-height: 1.8;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field .notes-input:focus {
  border-color: var(--blue-600);
}
.notes-input::placeholder { color: var(--muted); font-size: 14px; font-variation-settings: var(--f-hint); }
.notes-count {
  margin-top: 6px;
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-variation-settings: var(--f-hint);
}

.ms-field { position: relative; }
.ms-box {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  text-align: right;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ms-placeholder {
  flex: 1;
  color: var(--muted);
  font-size: 14px;
  font-variation-settings: var(--f-hint);
}
.ms-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chips:empty { display: none; }
.ms-chip {
  animation: popIn 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--rad-pill);
  background: var(--blue-100);
  color: var(--blue-900);
  font-size: 13px;
  font-variation-settings: var(--f-micro);
}
.ms-chip .ch-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ms-box:focus { outline: none; border-color: var(--blue-600); }
.ms-field.open .ms-box { border-color: var(--blue-600); }
.ms-field.error .ms-box { border-color: var(--error); }
.ms-caret { color: var(--muted); display: flex; flex-shrink: 0; }
.ms-caret svg { width: 18px; height: 18px; transition: transform 0.15s ease; }
.ms-field.open .ms-caret svg { transform: rotate(180deg); }

.ms-list {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-ctl);
  padding: 6px;
  z-index: 500;
  display: none;
  max-height: 260px;
  overflow-y: auto;
}
.ms-list.show { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; animation: slideDown 0.16s ease; }
@media (max-width: 420px) { .ms-list.show { grid-template-columns: 1fr; } }
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: var(--rad-ctl);
  cursor: pointer;
  font-size: 15px;
  font-variation-settings: var(--f-body);
  color: var(--ink);
}
.ms-option:hover { background: var(--bg); }
.ms-option .ms-check {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ms-option .ms-check svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.ms-option.checked .ms-check { background: var(--blue-600); border-color: var(--blue-600); }
.ms-option.checked .ms-check svg { opacity: 1; }
.ms-option.kb-active { background: var(--blue-100); }
.ms-option .ms-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--rad-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.ms-option .ms-icon svg { width: 18px; height: 18px; }
.ms-option .ms-icon-plain { border: 1px solid var(--border); }
.ms-option .ms-icon-plain svg { width: 21px; height: 21px; }

.file-box {
  border: 1.5px dashed var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  padding: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.file-box.dragging { border-color: var(--blue-600); background: var(--blue-100); }
.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.file-chips:empty { display: none; }
.file-chip {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: var(--rad-ctl);
  overflow: visible;
  flex-shrink: 0;
}
.file-chip { animation: popIn 0.2s ease; }
.file-chip img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: var(--rad-ctl);
  border: 1px solid var(--border);
  display: block;
  cursor: pointer;
}
.file-chip .file-view-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--rad-ctl);
  background: rgba(15,27,51,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: pointer;
  pointer-events: none;
}
.file-chip:hover .file-view-overlay { opacity: 1; pointer-events: auto; }
.file-chip .file-view-overlay svg { width: 20px; height: 20px; color: #fff; }
.file-chip .file-doc {
  width: 58px;
  height: 58px;
  border-radius: var(--rad-ctl);
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-chip .file-doc svg { width: 22px; height: 22px; }
.file-remove {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15,27,51,0.25);
  transition: transform 0.12s ease;
  z-index: 2;
}
.file-remove:hover { transform: scale(1.1); }
.file-remove svg { width: 12px; height: 12px; }

/* ===== Photo editor (crop + rotate) ===== */
.photo-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,15,25,0.78);
  z-index: 850;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.photo-editor-overlay.show { display: flex; animation: riseIn 0.15s ease; }
.pe-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  background: #14181f;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--rad-card);
  overflow: hidden;
}
.pe-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  flex-shrink: 0;
}
.pe-title { color: #fff; font-size: 14px; font-variation-settings: var(--f-value); }
.pe-topbar-spacer { width: 38px; }
.pe-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--rad-ctl);
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.pe-icon-btn:hover { background: rgba(255,255,255,0.2); }
.pe-icon-btn.pe-close:hover { background: var(--error); }
.pe-icon-btn svg { width: 18px; height: 18px; }
.pe-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 6px 16px;
}
.pe-stage {
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pe-stage img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pe-shade { position: absolute; background: rgba(0,0,0,0.55); pointer-events: none; display: none; }
.pe-crop-box {
  position: absolute;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  cursor: move;
  display: none;
}
.pe-crop-box.active { display: block; }
.pe-shade.active { display: block; }
.pe-grid { position: absolute; inset: 0; pointer-events: none; }
.pe-grid span { position: absolute; background: rgba(255,255,255,0.35); }
.pe-grid span:nth-child(1) { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.pe-grid span:nth-child(2) { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.pe-grid span:nth-child(3) { top: 33.33%; left: 0; right: 0; height: 1px; }
.pe-grid span:nth-child(4) { top: 66.66%; left: 0; right: 0; height: 1px; }
.pe-handle {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -16px;
  z-index: 5;
}
.pe-handle::after {
  content: '';
  position: absolute;
  inset: 9px;
  background: var(--blue-600);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  border-radius: 50%;
}
.pe-h-tl { top: 0; left: 0; cursor: nwse-resize; }
.pe-h-tr { top: 0; right: 0; left: auto; cursor: nesw-resize; }
.pe-h-bl { bottom: 0; top: auto; left: 0; cursor: nesw-resize; }
.pe-h-br { bottom: 0; top: auto; right: 0; left: auto; cursor: nwse-resize; }

.pe-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 16px 14px;
  flex-shrink: 0;
}
.pe-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--rad-ctl);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  font-variation-settings: var(--f-micro);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pe-ctrl-btn svg { width: 19px; height: 19px; }
.pe-ctrl-btn:hover:not(:disabled) { background: rgba(255,255,255,0.16); color: #fff; }
.pe-ctrl-btn.active { background: var(--blue-700); color: #fff; }
.pe-ctrl-btn:disabled { opacity: 0.35; cursor: default; }
.pe-footer {
  display: flex;
  padding: 0 16px 16px;
  flex-shrink: 0;
}
.pe-send-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--rad-ctl);
  background: var(--blue-700);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-variation-settings: var(--f-btn);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pe-send-btn:hover { background: var(--blue-hover); }

@media (max-width: 600px) {
  .photo-editor-overlay { padding: 0; }
  .pe-card { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .pe-body { padding: 10px; }
  .pe-ctrl-btn { padding: 10px 16px; font-size: 13px; }
  .pe-ctrl-btn svg { width: 22px; height: 22px; }
  .pe-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 12px)); }
}

/* ===== Image lightbox ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,15,25,0.78);
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-overlay.show { display: flex; animation: riseIn 0.15s ease; }
.lightbox-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 78vh;
  background: #14181f;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--rad-card);
  overflow: hidden;
}
.lightbox-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.lightbox-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--rad-ctl);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  transition: background 0.15s ease;
}
.lightbox-btn:hover { background: rgba(255,255,255,0.22); }
.lightbox-btn svg { width: 17px; height: 17px; }
.lightbox-btn.lightbox-close { background: rgba(255,255,255,0.08); margin-left: auto; }
.lightbox-btn.lightbox-close:hover { background: var(--error); }
.lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px 16px;
  min-height: 0;
}
.lightbox-body img {
  max-width: 100%;
  /* An explicit viewport-relative cap (not just 100% of the flex parent) —
     this is what keeps a very tall portrait photo from ballooning the whole
     card up toward its own max-height, feeling like it takes over the
     screen. The image is only ever displayed smaller here; the stored
     data (and what gets downloaded) is untouched, so nothing about its
     actual quality changes. */
  max-height: 62vh;
  object-fit: contain;
  border-radius: var(--rad-ctl);
}
@media (max-width: 600px) {
  .lightbox-overlay { padding: 0; background: rgba(10,15,25,0.94); }
  .lightbox-card { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .lightbox-btn span { display: none; }
  .lightbox-btn { padding: 10px; }
  .ve-receipt-btn span { display: none; }
  .ve-receipt-btn { padding: 8px; }
  /* The mobile card is deliberately full-screen, so the tighter desktop cap
     that keeps a tall photo from taking over a floating card doesn't apply
     here — let the image use the space it actually has. */
  .lightbox-body img { max-height: 100%; }
}
.file-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 0;
  padding: 12px;
  border: none;
  border-radius: var(--rad-ctl);
  background: none;
  color: var(--blue-700);
  font-family: inherit;
  font-size: 14px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  transition: background 0.15s ease;
}
.file-chips:not(:empty) + .file-add { margin-top: 10px; }
.file-add:hover { background: var(--blue-100); }
.file-add svg { width: 18px; height: 18px; }
.file-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  font-variation-settings: var(--f-hint);
}

.form-alert {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 10px;
  border-radius: var(--rad-ctl);
  padding: 14px 16px;
  font-size: 14px;
  font-variation-settings: var(--f-body);
  margin-bottom: 20px;
}
.form-alert.show { display: flex; animation: slideDown 0.22s ease; }
.form-alert svg { width: 19px; height: 19px; flex-shrink: 0; }
.form-alert.success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.form-alert.error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }

.ve-status-banner {
  grid-column: 1 / -1;
  display: none;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: var(--rad-ctl);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.9;
  font-variation-settings: var(--f-body);
  margin-bottom: 20px;
  border: 1px solid;
}
.ve-status-banner.show { display: flex; }
.ve-status-banner b { font-size: 15px; font-variation-settings: var(--f-title); }
.modal-header-actions { display: flex; align-items: center; gap: 8px; }
.ve-receipt-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--success-border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--success);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-btn);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ve-receipt-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ve-receipt-btn:hover { background: var(--success-bg); }
.ve-receipt-btn.copied { background: var(--success-bg); }
.ve-status-banner.st-pending { background: var(--blue-100); color: var(--blue-900); border-color: var(--blue-100); }
.ve-status-banner.st-done { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.ve-status-banner.st-problem { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }

.ve-history {
  grid-column: 1 / -1;
  display: none;
  margin-bottom: 20px;
}
.ve-history.show { display: block; }
.ve-history-label {
  font-size: 12px;
  color: var(--muted);
  font-variation-settings: var(--f-label);
  margin-bottom: 8px;
}
.ve-history-list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.ve-history-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  padding-top: 1px;
}
/* An invisible line the same height as a date, under the arrow's glyph —
   this is what keeps the arrow sitting on the exact same line as the
   status names above the dates, instead of drifting toward the middle
   of the whole two-line block. */
.ve-history-arrow::after { content: ''; height: 14px; }
.ve-history-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ve-history-name {
  font-size: 13px;
  color: var(--hist-dot, var(--ink));
  font-variation-settings: var(--f-value);
  white-space: nowrap;
}
.ve-history-date {
  font-size: 12px;
  color: var(--muted);
  font-variation-settings: var(--f-num);
  white-space: nowrap;
}
.ve-history-reason {
  font-size: 12px;
  color: var(--muted);
  font-variation-settings: var(--f-hint);
  white-space: nowrap;
}

.ve-fields-wrap { display: contents; }

/* ===== People management (owners / parties / beneficiaries) ===== */
.people-box { max-width: 520px; }
.people-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; flex-shrink: 0; }
.people-tab {
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.people-tab.active { color: var(--blue-700); border-bottom-color: var(--blue-600); }
.people-tab:hover:not(.active) { color: var(--ink); }
.people-modal-body { display: block; padding: 16px 20px; max-height: 58vh; overflow-y: auto; }
.people-add-row { display: flex; gap: 8px; margin-bottom: 14px; }
.people-add-row input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.people-add-row input:focus { border-color: var(--blue-600); outline: none; }
.people-add-row button {
  padding: 0 16px;
  border: none;
  border-radius: var(--rad-ctl);
  background: var(--blue-700);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.people-add-row button:hover { background: var(--blue-hover); }
.people-list { display: flex; flex-direction: column; gap: 6px; }
.people-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
}
.people-item-edit {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rad-ctl);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.people-item-edit:hover { background: var(--blue-100); color: var(--blue-600); }
.people-item-edit svg { width: 14px; height: 14px; }
.people-item-confirm {
  border: none;
  background: none;
  color: var(--blue-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rad-ctl);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.people-item-confirm:hover { background: var(--blue-100); }
.people-item-confirm svg { width: 15px; height: 15px; }
.people-item-cancel {
  border: none;
  background: none;
  color: var(--error);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rad-ctl);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.people-item-cancel:hover { background: var(--error-bg); }
.people-item-cancel svg { width: 14px; height: 14px; }
.people-item-display {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.people-item-name-text {
  font-size: 13px;
  color: var(--ink);
  font-variation-settings: var(--f-value);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-item-edit-fields {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.people-item-edit-fields input {
  flex: 1;
  border: 1.5px solid var(--blue-600);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
}
.people-item-edit-fields .people-item-nid-input { flex: 0 0 110px; direction: ltr; text-align: left; }
.people-item-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.people-item-nid { font-size: 12px; color: var(--muted); font-variation-settings: var(--f-num); white-space: nowrap; }
.people-item-delete {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rad-ctl);
  flex-shrink: 0;
}
.people-item-delete:hover { background: var(--error-bg); color: var(--error); }
.people-item-delete svg { width: 15px; height: 15px; }
.people-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 0; }
.people-benef-party-select { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.people-benef-party-select label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.people-benef-party-select select {
  flex: 1;
  height: var(--h-md);
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}

/* Read-only mode: the whole form is visible but inert until "ویرایش" is pressed */
/* Locked (view-mode) fields look exactly like normal active fields — no grey
   background, no dimmed text — the status banner and the "ویرایش" button
   already make clear it's read-only. Only the pointer/typing cursor is
   nudged to `default` so hovering doesn't promise editability it can't
   deliver (the fields themselves are `inert`, see lockFormFields()). */
.modal-body.ve-locked .form-field input,
.modal-body.ve-locked .form-field textarea,
.modal-body.ve-locked .amount-box,
.modal-body.ve-locked .date-input-wrap,
.modal-body.ve-locked .ms-box,
.modal-body.ve-locked .file-box {
  cursor: default;
}
.modal-body.ve-locked .date-cal-btn,
.modal-body.ve-locked .file-add,
.modal-body.ve-locked .file-remove { display: none; }
.form-section {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.form-section:first-child { margin-top: 0; }
.form-section span {
  font-size: 13px;
  color: var(--blue-700);
  font-variation-settings: var(--f-label);
  white-space: nowrap;
}
.form-section .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.date-cal-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.date-cal-btn:hover { color: var(--blue-600); }
.date-cal-btn svg { width: 19px; height: 19px; }

/* ---- Calendar popup: centered on mobile, anchored dropdown on desktop ---- */
.cal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,27,51,0.45);
  z-index: 600;
  display: none;
}
.cal-backdrop.show { display: block; }
.cal-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  padding: 16px;
  z-index: 601;
  display: none;
}
.cal-popup.show { display: block; animation: popIn 0.18s ease; }
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 6px;
}
.cal-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cal-select-wrap::after {
  content: '';
  position: absolute;
  left: 11px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}
.cal-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border);
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-label);
  padding: 8px 14px 8px 24px;
  border-radius: var(--rad-ctl);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cal-select:hover { border-color: var(--blue-600); }
.cal-select:focus { border-color: var(--blue-600); }
.cal-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--rad-ctl);
  border: none;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.cal-nav-btn:hover { background: var(--blue-100); color: var(--blue-600); }
.cal-nav-btn svg { width: 16px; height: 16px; }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-variation-settings: var(--f-micro);
  padding: 6px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--rad-ctl);
  font-size: 15px;
  font-family: inherit;
  font-variation-settings: var(--f-num);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-day:hover:not(:disabled) { background: var(--blue-100); }
.cal-day:disabled { visibility: hidden; cursor: default; }
.cal-day.holiday { color: var(--error); }
.cal-day.today {
  color: var(--blue-600);
  background: var(--blue-100);
  font-variation-settings: var(--f-num);
}
.cal-day.today.holiday { color: var(--error); background: var(--error-bg); }
.cal-day.selected, .cal-day.selected.holiday { background: var(--blue-hover); color: var(--white); }

/* A continuous band for the picked range: middle days form one unbroken strip
   (square corners, no gap between cells), and only the two ends round off —
   each on the side that faces away from the rest of the range. */
.cal-day.range-mid { background: var(--blue-100); border-radius: 0; }
.cal-day.range-mid.holiday { color: var(--error); }
.cal-day.range-mid.today { background: var(--blue-100); }
.cal-day.range-start, .cal-day.range-end { background: var(--blue-hover); color: var(--white); }
.cal-day.range-start.holiday, .cal-day.range-end.holiday { color: var(--white); }
.cal-day.range-start { border-radius: 0 9px 9px 0; }
.cal-day.range-end { border-radius: var(--rad-ctl) 0 0 var(--rad-ctl); }
.cal-day.range-start.range-end { border-radius: var(--rad-ctl); }

.cal-today-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  border-radius: var(--rad-ctl);
  background: var(--bg);
  color: var(--blue-700);
  font-family: inherit;
  font-size: 14px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cal-today-btn:hover { background: var(--blue-100); }

.cal-footer { margin-top: 10px; display: none; }
.cal-footer.show { display: flex; gap: 8px; }
.cal-confirm-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: var(--rad-ctl);
  background: var(--blue-700);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-variation-settings: var(--f-label);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cal-confirm-btn:hover { background: var(--blue-hover); }
.cal-clear-btn {
  width: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cal-clear-btn:hover { border-color: var(--error); color: var(--error); background: var(--error-bg); }
.cal-clear-btn svg { width: 17px; height: 17px; }

/* Desktop: calendar is anchored under the field via JS (position:fixed so it can
   escape the modal's scrolling area instead of being clipped by it) */
@media (min-width: 601px) {
  .cal-backdrop { display: none !important; }
  .cal-popup.anchored {
    top: auto;
    left: auto;
    transform: none;
    width: 300px;
    border: 1px solid var(--border);
  }
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
@media (min-width: 601px) {
  .modal-footer { padding: 12px 20px; }
}
.btn-submit {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1.5px solid transparent;
  border-radius: var(--rad-ctl);
  background: var(--blue-700);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-variation-settings: var(--f-btn);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-submit:hover { background: var(--blue-hover); }
.btn-submit.pending-confirm {
  background: var(--surface);
  color: var(--blue-700);
  border-color: var(--blue-700);
}
.btn-submit.pending-confirm:hover { background: var(--blue-100); }
.btn-submit.delete-warning {
  background: var(--surface);
  color: var(--error);
  border-color: var(--error);
  cursor: default;
  pointer-events: none;
}

/* The trash button morphs into a wide "بله، حذف شود" button — the exact same
   mechanic as "ذخیره تغییرات" turning into a question — just colored for a
   destructive action, and a small "انصراف" button slides in beside it the
   same way the green checkmark does for saving. */
.delete-confirm-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.btn-clear {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: var(--rad-ctl);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.28s ease, padding 0.28s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-clear:hover { border-color: var(--error); color: var(--error); background: var(--error-bg); }
.btn-clear svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-clear .icon-cancel { display: none; }
.btn-clear .btn-clear-text { display: none; font-size: 14px; font-variation-settings: var(--f-btn); }

/* Pending a SAVE (edit flow): trash icon swaps for an × to cancel the edit. */
.btn-clear.pending-cancel .icon-trash { display: none; }
.btn-clear.pending-cancel .icon-cancel { display: block; }
.btn-clear.pending-cancel { border-color: var(--error); color: var(--error); }

/* Confirming a DELETE: the button widens into a red "بله، حذف شود" button. */
.btn-clear.confirming-delete {
  width: 132px;
  padding: 0 16px;
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}
.btn-clear.confirming-delete:hover { background: var(--state-bad); color: #fff; filter: brightness(.9); }
.btn-clear.confirming-delete .icon-trash,
.btn-clear.confirming-delete .icon-cancel { display: none; }
.btn-clear.confirming-delete .btn-clear-text { display: inline; }

.save-confirm-slide {
  width: 0;
  height: 46px;
  padding: 0;
  margin-right: 0;
  border: none;
  border-radius: var(--rad-ctl);
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: width 0.22s ease, opacity 0.18s ease, margin-right 0.22s ease, background 0.15s ease;
}
.save-confirm-slide.show { width: 46px; opacity: 1; margin-right: 8px; }
.save-confirm-slide:hover { background: var(--state-ok); filter: brightness(.9); }
.save-confirm-slide svg { width: 19px; height: 19px; flex-shrink: 0; }
.save-confirm-wrap { position: relative; flex: 1; display: flex; align-items: stretch; }

.delete-cancel-slide {
  width: 0;
  height: 46px;
  padding: 0;
  margin-right: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--rad-ctl);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-btn);
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: width 0.28s ease, opacity 0.2s ease, margin-right 0.28s ease, background 0.15s ease;
}
.delete-cancel-slide.show { width: 84px; opacity: 1; margin-right: 8px; padding: 0 4px; }
.delete-cancel-slide:hover { background: var(--bg); }

@media (max-width: 600px) {
  .modal-overlay { padding: 0; }
  .modal-box { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .modal-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 12px));
  }
}
@media (max-width: 420px) {
  /* Squeeze the delete-confirmation row a bit so the warning message,
     the "بله، حذف شود" button, and "انصراف" all still fit on one line. */
  .btn-submit.delete-warning { font-size: 12px; }
  .btn-clear.confirming-delete { width: 100px; padding: 0 8px; font-size: 12px; }
  .delete-cancel-slide.show { width: 60px; font-size: 12px; padding: 0; }
}


/* ===== Back-to-top button ===== */
.totop-float {
  position: fixed;
  bottom: 28px;
  left: 96px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 199;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.totop-float.show { display: flex; }
.totop-float:hover { color: var(--blue-600); border-color: var(--blue-600); transform: translateY(-2px); }
.totop-float svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .totop-float { bottom: 20px; left: 20px; width: 46px; height: 46px; }
  .totop-float svg { width: 19px; height: 19px; }
}

/* ===== Floating Telegram button ===== */
.tg-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  z-index: 200;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tg-float:hover { background: var(--blue-700); transform: scale(1.06); }
.tg-tooltip {
  position: fixed;
  bottom: 44px;
  left: 96px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--rad-ctl);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateX(6px);
  z-index: 200;
}
.tg-tooltip.show { opacity: 1; transform: translateX(0); }
.app-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: var(--surface);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 10px 20px;
  border-radius: var(--rad-ctl);
  font-size: 13px;
  font-variation-settings: var(--f-value);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 600;
  white-space: nowrap;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.tg-float svg { width: 27px; height: 27px; color: var(--white); }
@media (max-width: 720px) { .tg-float { display: none; } }   /* moves into the header on mobile instead */



/* ===== Responsive ===== */
@media (max-width: 720px) {
  .header { padding: 0 14px; height: 62px; }
  .header-user { gap: 6px; }
  .header-logo { font-size: 21px; }
  .clock-box { display: none; }
  .main { padding: var(--s5) 14px 96px; }
.add-check-btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 15px; }
  .tg-float { bottom: 20px; left: 20px; width: 52px; height: 52px; }
}

/* ===== Discard-changes confirmation ===== */
/* Sits above the cheque form (z-index 300) because it is asking about it. */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,27,51,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 24px;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  padding: 24px;
  box-shadow: var(--shadow-2);
  animation: modalIn 0.18s var(--ease);
}
.confirm-box h2 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink);
  font-variation-settings: var(--f-title);
}
.confirm-body {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.confirm-actions button {
  flex: 1;
  height: var(--h-md);
  border: none;
  border-radius: var(--rad-ctl);
  font-family: inherit;
  font-size: 13px;
  font-variation-settings: var(--f-btn);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
/* Keeping the work is the safe default, so it is the one the keyboard
   lands on and the one that carries the filled-in weight. */
.confirm-actions .confirm-cancel {
  background: var(--accent);
  color: #fff;
}
.confirm-actions .confirm-cancel:hover { background: var(--accent-hover); }
.confirm-actions .confirm-ok {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--state-bad);
}
.confirm-actions .confirm-ok:hover { border-color: var(--state-bad); background: var(--state-bad-bg); }

/* ═══════════════════════════════════════════════════════════════════
   LINEAR PASS
   Calibrates this page to the rules set out at the top of shared.css.
   It lives at the end of the file, as overrides, rather than rewritten
   in place: the sections above are organised by feature, and unpicking
   them by hand would have risked the behaviour they carry. Everything
   here is presentation only.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Depth belongs to floating surfaces only ──
   These are the six things in the app that genuinely sit above the page.
   They get the larger radius, which is what makes them read as lifted
   even before the shadow registers. Everything else stays flat. */
.modal-box,
.confirm-box,
.filter-popover,
.cal-popup,
.status-menu,
.ac-list,
.ms-list,
.cell-tooltip,
.clock-tooltip,
.tg-tooltip,
.app-toast,
.lightbox-card,
.pe-card {
  border-radius: var(--rad-float);
}

/* ── 2 · The cheque table ──
   Zebra striping went out. It was doing the job a divider does, and it
   was actively harmful here: the stripe colour and the hover colour were
   the same token, so hovering an even row changed nothing at all. One
   subtle divider per row plus a real hover state reads cleaner and makes
   the pointer position unambiguous. */
.cheque-table tbody tr:nth-child(even) td { background: transparent; }

.cheque-table td {
  padding: 11px 16px;          /* → 44px row rhythm at 14px text */
  font-size: var(--t-body);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-1) var(--ease);
}
.cheque-table thead th {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cheque-table tbody tr:hover td { background: var(--accent-wash); }

/* Rows no longer fly in one after another. The stagger was decorative —
   it animated something the user didn't do, and it put 100ms of theatre
   between the data arriving and the data being readable. */
.cheque-table tbody tr { animation: none; }

/* Serial numbers, sayad ids and national ids are machine values. Tabular
   figures plus a little tracking is what tells the eye "this is data" and
   makes a transposed digit findable. */
.cheque-table .num,
.cheque-table .benef-nid,
.cq-serial,
.sayad-static {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.cheque-table .amount { font-size: var(--t-value); }

/* ── 3 · Structure through border tiers ──
   Outer edges of a panel take the strong tier so the panel reads as one
   object; internal dividers take the subtle tier so they separate without
   competing. */
.table-wrap,
.filter-bar,
.due-alert-bar { border-color: var(--border); }
.table-head-strip { border-bottom-color: var(--border); }
.table-pager { border-top-color: var(--border-subtle); }

/* ── 4 · Motion, normalised ──
   Hover and press land at 90ms; anything that enters the screen lands at
   200ms on the expo curve. Nothing animates a layout property. */
.status-btn,
.eye-btn,
.filter-pill-btn,
.icon-action,
.add-check-btn,
.ths-report-btn,
.file-chip,
.st-opt {
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.modal-overlay.show .modal-box,
.confirm-overlay.show .confirm-box {
  animation: floatIn var(--dur-3) var(--ease-out) both;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 5 · Empty state ──
   A centred mark, a plain sentence, and the one action that resolves it.
   "Nothing found" on its own tells the user a fact and leaves them there. */
.table-empty { padding: 64px var(--s5); gap: var(--s2); }
.table-empty svg { width: 30px; height: 30px; opacity: 0.35; }

/* ── 6 · Scanning: one consistent edge ──
   Every cell used to be centre-aligned, which reads tidy on a mockup and
   badly in use: with nothing sharing an edge, the eye re-finds the start of
   each value on every row. Text now starts at the row's start edge (the
   right, in RTL) so a column becomes a single line to scan down. The
   utility columns — row number, status, the eye — stay centred, because
   they are marks rather than values. */
.cheque-table thead th,
.cheque-table td { text-align: start; }
.cheque-table th.col-row,  .cheque-table td.col-row,
.cheque-table th.col-status, .cheque-table td.status-cell,
.cheque-table th.col-eye,  .cheque-table td.col-eye { text-align: center; }
.cheque-table .benef-name { text-align: start; }

/* ── 7 · Row height ──
   The beneficiary cell carries a name over its national id, and that pair
   was setting the height of every row in the table. Tightening the two
   leadings gets the row back near the 44px rhythm without dropping the id,
   which is the field people actually check a cheque against. */
.cheque-table td { padding: 8px 16px; line-height: 1.35; }
.cheque-table .benef-name { display: block; line-height: 1.35; }
.cheque-table .benef-nid { display: block; font-size: var(--t-micro); line-height: 1.25; color: var(--muted); }

/* ── 8 · The primary action belongs in the toolbar ──
   It used to sit alone in a centred band above the filters, spending a
   whole horizontal stripe of the page on one button. In the table's own
   header it is still the most prominent control on screen, and the table
   starts most of a screenful higher. */
.ths-actions .add-check-btn {
  height: var(--h-sm);
  padding: 0 var(--s3);
  gap: var(--s2);
  font-size: var(--t-cap);
  border-radius: var(--rad-ctl);
  white-space: nowrap;
}
.ths-actions .add-check-btn svg { width: 15px; height: 15px; }
.ths-actions .add-check-btn:hover { background: var(--accent-hover); }
/* The shortcut rides on the button itself — the same way the palette shows
   it — so the keyboard path is learned by using the mouse. */
.btn-kbd {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
@media (max-width: 720px) {
  .btn-kbd { display: none; }
  .ths-actions .add-check-btn { height: var(--h-md); font-size: var(--t-body); }
}