/* Hifzhelper build 4.2.15.25 | css/journal-table.css */
/* ============================================================
   Hifzhelper — journal landing table
   2026-08-05, confirmed in chat -- complete rebuild alongside js/
   journal.js's own rewrite. Matches the physical paper planner:
   Day/Date | Sabaq | Sabaq Dhor | Dhor, Sage header for Date, Mauve
   header for the log columns. This is the default landing page --
   deliberate attention here, not just functional correctness.
   ============================================================ */

/* Fixed header, scrollable rows -- a genuinely different model from the
   old position:sticky-header-riding-along-a-scrolling-page approach
   (still used elsewhere in the app, e.g. this exact file's own header
   used to be sticky). Here the header sits outside the scrolling
   region entirely, closer to a spreadsheet's frozen header row than a
   sticky one -- confirmed in chat as the better fit once rows gained
   their own bounded scroll area for the 10-days-then-rollups design. */
.journal-header-row {
  display: flex;
  /* V3.91.0: overflow:hidden (there for the rounded corners) was
     CLIPPING the search dropdown into invisibility — the user typed
     and saw nothing while the logic worked perfectly. The corners now
     round on the first/last CELLS; nothing needs clipping. */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.journal-header-cell:first-child { border-top-left-radius: var(--radius-md); }
.journal-header-cell:last-child { border-top-right-radius: var(--radius-md); }
.journal-header-cell {
  /* Confirmed in chat: ~20% taller than the previous 8px vertical
     padding -- 11px lands at 36px total cell height (11+14+11) against
     the old 30px (8+14+8), a precise 20% increase, not an eyeballed one. */
  padding: 11px var(--space-sm);
  font-weight: 700;
  color: var(--color-table-header-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-header-cell.col-date { background: var(--color-table-header-date); }
.journal-header-cell.col-log  { background: var(--color-table-header-log); }
/* 4 columns now (Feedback removed) -- Sabaq Dhor gets the most room
   since "Sabaq Dhor" is the longest label. */
.journal-header-row > *:nth-child(1) { flex: 0 0 20%; }
.journal-header-row > *:nth-child(2) { flex: 0 0 25%; }
.journal-header-row > *:nth-child(3) { flex: 0 0 30%; }
.journal-header-row > *:nth-child(4) { flex: 0 0 25%; }

/* Column headers double as navigation into the detail screen — icon +
   label, matching the app-wide icon-nav pattern, no extra chrome. */
.journal-header-cell.col-log button {
  display: flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.journal-header-cell.col-log svg { width: 14px; height: 14px; }

.journal-wrap {
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 1px solid var(--color-table-border);
  border-top: none;
  /* The actual scrolling region now -- confirmed in chat: rows scroll
     vertically within their own bounded area, header stays fixed above
     it rather than riding along. --auth-band-height accounts for the
     app's own top band; the header row's own real height (set above)
     accounts for the rest, so the scroll area fills exactly whatever
     space is genuinely left in the viewport. */
  max-height: calc(100vh - var(--auth-band-height, 60px) - 52px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

/* V3.44: the negative-margin edge-bleed technique that used to live
   here is REMOVED -- it was built to cancel out #appContent's own
   padding so the table reached the screen's edges, which is
   fundamentally incompatible with the new requirement below (a fixed
   width + centering can't coexist with negative margins pulling the
   element wider than its container). Necessary consequence of the
   70% rule, not a separately-requested change.
   .journal-header-row + .journal-wrap TOGETHER (confirmed explicitly
   in chat -- not just the wrap alone, so the two stay visually
   aligned as one continuous colored-top/white-bottom card) become an
   exception to the standard 30%/50% cap, same as Juz Tracker already
   is -- a fixed 70% width instead, at the same breakpoints the
   standard cap applies everywhere else. A 4-column table needs more
   room than the standard cap gives it, unlike a simple form/section. */
@media (min-width: 768px) {
  .journal-header-row, .journal-wrap { width: 70%; margin-left: auto; margin-right: auto; }
}

.journal-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-table-border);
  vertical-align: top;
}
.journal-table tr:last-child td { border-bottom: none; }

/* Confirmed in chat: cells are plain text, not selectable/editable
   directly -- a plain click (js/journal.js's wireClick, same for touch
   and mouse) is what opens editing, not the browser's own default
   text-selection/copy behaviour, which user-select suppresses.
   touch-action:none used to sit here too, for an earlier press-and-hold
   mechanism -- removed along with it (2026-08-05, confirmed in chat):
   it also blocked the browser's own scroll-vs-tap disambiguation, so an
   ordinary slow scroll through the table could cross the hold's timing
   threshold and trigger an unwanted navigation. A plain click has no
   timing window for a scroll to fall into, so this is no longer needed. */
.journal-table td {
  user-select: none;
  cursor: pointer;
}

.journal-table .cell-date {
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-ink);
}
.journal-table .cell-date .weekday {
  display: block;
  font-size: 12px;
  color: var(--color-ink-faint);
  font-weight: 400;
}

.journal-cell-empty {
  color: var(--color-ink-faint);
}

.journal-cell-text {
  color: var(--color-ink);
}

/* V3.39: haidh mark with nothing logged yet — static text (no checkbox,
   confirmed in chat), permanently overridable by logging any entry for
   that date. */
.journal-cell-haidh {
  color: var(--color-haidh);
  font-size: 11px;
  line-height: 1.3;
  font-style: italic;
}
/* 2026-08-05, confirmed in chat: was a plain, non-interactive span --
   now a real button, the popup's own trigger (js/journal.js's
   openEntriesPopup), listing every entry for that date/type instead of
   only ever making the most recent one reachable. */
.entry-count-badge {
  font: inherit;
  font-size: 10px;
  color: var(--color-ink-faint);
  background: var(--color-canvas);
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  cursor: pointer;
}
.entry-count-badge:hover { color: var(--color-ink-soft); }

/* Small popup listing every entry for one date/type (reuses
   .modal-overlay/.modal-card, css/components.css) -- confirmed in chat
   as the scalable alternative to a "+N" badge that only ever led to the
   most recent entry. */
.journal-popup-card {
  max-width: 340px;
  width: 100%;
}
.journal-popup-header {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.journal-popup-entry {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px var(--space-sm);
  background: none;
  border: none;
  border-top: 1px solid var(--color-table-border);
  font: inherit;
  font-size: 14px;
  color: var(--color-ink);
  cursor: pointer;
}
.journal-popup-entry:first-of-type { border-top: none; }
.journal-popup-entry:hover { background: var(--color-canvas); }

/* Weekly rollup rows (older than the 10 most recent days) — just the
   date range, deliberately no attempt to summarize several different
   entries across several days in one line (confirmed in chat: either
   too crowded or too vague to be worth reading). */
.journal-rollup-row td {
  cursor: default;
}
.journal-rollup-cell {
  text-align: center;
  color: var(--color-ink-faint);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 10px var(--space-sm) !important;
  background: var(--color-canvas);
}

.journal-load-more-cell {
  text-align: center;
  padding: var(--space-md) !important;
  cursor: default !important;
}
#journalLoadMoreBtn {
  background: none;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  padding: 8px 20px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  cursor: pointer;
}
#journalLoadMoreBtn:hover { background: var(--color-canvas); }
#journalLoadMoreBtn:disabled { opacity: 0.5; cursor: default; }

/* Wider screens: a bit more padding, slightly larger type — same table,
   not a different layout, per "consistent sizing for tablets/large screens" */
@media (min-width: 720px) {
  .journal-table { font-size: 14px; }
  .journal-table td { padding: var(--space-md); }
  .journal-header-cell { padding: 13px var(--space-md); }
}

/* ============================================================
   Maktab summary + Maktab Journal (V3.59.0, delivery (e1)).
   Deliberately appended to THIS file, not a new css/maktab.css:
   both screens are the journal table pattern reused wholesale --
   these few rules are the entire divergence, and keeping them next
   to the classes they extend beats a one-rule file. Maktab
   deployment only, like everything since V3.56.0.
   ============================================================ */
.maktab-summary-row { cursor: default; }
/* V4.2.0 (user): the names ARE buttons — tapping one opens her day — so
   they now look like it: the app's light blue in a pill. The pill wraps
   the NAME only; the cell also carries the attendance icon. */
.maktab-student-name { font-weight: 600; }
.maktab-student-name .maktab-name-pill {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--color-accent-soft, #D0DBE7);
  border-radius: 999px;
  padding: 4px 14px;
}
.maktab-day-placeholder { color: var(--muted, #8e8e93); }

/* V3.61.1: summary column alignment + the date pill.
   The PJ journal's header is a flex row and its body is a <table> --
   they line up only because .journal-header-row's nth-child(1..4)
   percentages happen to match a 4-column auto-layout table. The maktab
   grid historically had five columns, so those inherited rules mis-assigned
   every width (the date column's 20% landed on the narrow haidh column, and
   the last column got no rule at all) -- that's the misalignment reported from
   the device. Fixed properly rather than nudged: ONE set of widths
   below drives both the header cells and the table columns, and the
   table is table-layout:fixed so it obeys them exactly instead of
   auto-sizing to content. Percentages sum to 100 -- no fixed px, which
   would overflow a 100% table by that many pixels. */
/* V4.2.15.15: Attendance, Name, blank Log action, then activity columns.
   Mobile uses its existing explicit grid placement below. */
.maktab-summary-headers > *:nth-child(1) { flex: 0 0 7%; }
.maktab-summary-headers > *:nth-child(2) { flex: 0 0 20%; }
.maktab-summary-headers > *:nth-child(3) { flex: 0 0 10%; }
.maktab-summary-headers > *:nth-child(4) { flex: 0 0 21%; }
.maktab-summary-headers > *:nth-child(5) { flex: 0 0 21%; }
.maktab-summary-headers > *:nth-child(6) { flex: 0 0 21%; }
.maktab-summary-table { table-layout: fixed; }
.maktab-summary-table td:nth-child(1) { width: 7%; }
.maktab-summary-table td:nth-child(2) { width: 20%; }
.maktab-summary-table td:nth-child(3) { width: 10%; }
.maktab-summary-table td:nth-child(4) { width: 21%; }
.maktab-summary-table td:nth-child(5) { width: 21%; }
.maktab-summary-table td:nth-child(6) { width: 21%; }

/* Date pill (V3.63.0 — corrected). The PJ never overrides the pill's
   own width: .card-date-row is `display: grid; grid-template-columns:
   auto 1fr`, so the pill sits in an AUTO column that sizes to its
   intrinsic width while the 1fr sibling absorbs the rest. width:100%
   inside an auto column resolves to the content width -- that's why
   the PJ's pills never stretch. V3.61.1 fought that instead (a
   width:auto override plus a 7% indent that silently duplicated the
   haidh column's share and would drift if those percentages changed);
   both are gone, replaced by the PJ's own structure. */
/* V3.74.0 — the date pill stretched across the screen. TWO causes, both fixed
   here rather than one patched over.

   1. THIS RULE NEVER APPLIED. The element carries both .screen-top-close-row
      and .maktab-summary-toprow, and .screen-top-close-row sets
      display:flex. Equal specificity (0,1,0) each, so source order decided
      — and detail-pages.css loads AFTER journal-table.css, so flex won and
      the grid was ignored. Qualifying with both class names takes this to
      (0,2,0), which wins on specificity and no longer depends on the order
      stylesheets happen to be listed in. Third time this project has been
      bitten by equal-specificity-plus-source-order (see V3.52.0).

   2. .custom-date-wrap is created at RUNTIME with width:100%. As a FLEX
      item that meant "the whole row" — which is what actually stretched the
      pill. It needs no override: in the auto/1fr grid the percentage
      resolves against a track sized to content, which is exactly how the
      PJ's own pill is constrained.

   V3.63.0 had already chosen this grid as the fix and deliberately removed
   an earlier width-override hack, with verify_e1.mjs asserting the hack
   stays gone. That guard fired when a width override was tried again here,
   and it was right to: V3.63.0's approach was correct all along and merely
   inert, so the structural fix is enough on its own. */
.screen-top-close-row.maktab-summary-toprow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.maktab-summary-toprow .screen-close-btn { justify-self: end; }
.maktab-summary-date-input { font: inherit; font-weight: 600; }
/* V4.2.15.1: Maktab Summary <-> Attendance uses one explicit forest-green
   rectangular navigation button in both directions. Deliberately NOT a pill. */
.maktab-cross-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--palette-evergreen);
  border-radius: var(--radius-sm);
  background: var(--palette-evergreen);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.maktab-cross-nav-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.maktab-cross-nav-btn:hover { filter: brightness(.96); }
.maktab-summary-attendance-link { justify-self: center; }

/* V4.2.11.4: the leading attendance icon is a neutral navigation
   control. Confirmed Haidh is already stated by the small pink Haidh text
   in the Sabaq cell; colouring this icon yellow duplicated the same state. */
.maktab-haidh-col { padding: 0 2px; text-align: center; }
.maktab-haidh-check { font: inherit; padding: 3px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); background: #fff; line-height: 0; cursor: pointer; }
.maktab-haidh-check svg { width: 16px; height: 16px; }
/* V4.2.15: visible row index + attendance icon share the existing narrow
   leading summary cell, so no journal column widths need to move. */
.maktab-row-meta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.maktab-row-number { min-width: 1.35em; text-align: right; font-size: 12px; font-weight: 700; color: var(--color-ink-soft); line-height: 1; }

/* V3.64.0: the maktab day view IS the PJ day view (js/logContext.js), so
   there is no maktab card layout to style any more — every V3.60.0–
   V3.63.0 rule for hand-built cards is deleted with the markup it
   served. What's left is the two genuinely maktab-only additions inside
   the PJ's own cards: the student-name row, and the notes block's
   teacher-side variant. */
.maktab-name-row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 2px 0 6px; }
/* V4.2.10: identify the active student without making the name louder.
   The same soft-blue pill language already used on the Maktab Summary
   highlights the name consistently on Sabaq / Sabaq Dhor / Dhor. */
.maktab-name-text {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--color-accent-soft, #D0DBE7);
  border-radius: 999px;
  padding: 4px 14px;
}
.maktab-name-haidh { padding: 2px; }
.maktab-name-haidh svg { width: 14px; height: 14px; }
.mk-vis-row { display: flex; gap: 10px; align-items: center; font-size: 12px; margin: 0 0 4px; }
.mk-vis-opt { display: inline-flex; gap: 3px; align-items: center; }
.mk-vis-opt input { margin: 0; }
.mk-student-note { margin: 6px 0 0; font-size: 13px; }
.mk-student-note-label { display: block; font-weight: 600; color: var(--muted, #8e8e93); margin-bottom: 2px; }
.mk-student-note-text { background: rgba(0,0,0,0.05); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
/* V3.66.0: maktab student setup */
.maktab-setup-btn { font: inherit; font-size: 11px; margin-left: 6px; padding: 1px 7px; border-radius: 7px; border: 1px solid rgba(0,0,0,0.2); background: #fff; }
.maktab-setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 10px 0; }
.maktab-setup-juz { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.maktab-setup-juz.partial span { font-style: italic; color: var(--muted, #8e8e93); }

/* V3.67.0: derived attendance on the summary */
.journal-cell-absent { color: #B4534F; font-style: italic; }
.maktab-row-flagged { background: rgba(255, 212, 0, 0.18); }

/* V3.72.0 — Maktab student setup as a sheet over the Dhor card.
   Reuses .modal-overlay / .modal-card; only the close button and the card
   width are specific here. The X sits ON the card, not on a screen above
   it, which is what the full-screen version got wrong. */
.maktab-setup-card {
  position: relative;              /* anchors the close button */
  max-width: 420px;
  width: 100%;
}
.maktab-setup-close {
  position: absolute;
  top: var(--space-sm, 8px);
  right: var(--space-sm, 8px);
  background: none;
  border: none;
  padding: 4px;
  /* V3.73.2: the button was there and clickable — the ICON was invisible.
     iconHtml('close') is an inline <svg stroke="currentColor"> with no
     intrinsic size, so with no colour and no width set it inherited
     whatever the card gave it and rendered as nothing. Both are set here.
     This is why tapping the corner worked while showing no X. */
  color: var(--ink, #2b2b2b);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
}
.maktab-setup-close svg { width: 20px; height: 20px; display: block; }
/* The instruction text must not run under the X. */
.maktab-setup-card #maktabSetupBody { padding-top: var(--space-md, 16px); }

/* V3.74.0 — the summary header's leading cell.
   The header ALREADY had five cells matching the table; the first one
   (.col-haidh, aria-hidden, empty) simply had no background, so the header
   appeared to start at "Student" and read as inset against the rows below.
   Nothing was missing — it was invisible. Giving it the same green as the
   Student cell makes the header span the full width and line up.
   No heading text: it sits over the haidh icons, which have no label. */
.maktab-summary-headers .col-haidh {
  background: var(--color-table-header-date);   /* the SAME token the Student
     cell uses -- not a lookalike, so the two read as one green block and
     stay in step if the palette ever changes. */
}

/* V3.74.2 — item 9: no border around the haidh control on the summary.
   It is a BUTTON, not a badge — since V3.73.0 it is the only place haidh
   is marked, the day cards having lost theirs. So the border goes but the
   affordance must not: the tap target keeps its full size rather than
   shrinking to the glyph, and a hover state replaces the border as the
   signal that it does something. */
.maktab-haidh-check {
  border: none;
  background: transparent;
  border-radius: 999px;
}
.maktab-haidh-check:hover { background: var(--surface-track); }

/* V3.74.2 — the multi-entry peek. A floating panel over the row rather than
   expanding it: summary rows are short and stretching one open would shift
   every row beneath it. */
.maktab-entry-peek {
  position: fixed;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: var(--space-sm, 8px);
  min-width: 160px;
  max-width: 280px;
}
.maktab-entry-peek-row {
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  font-size: 14px;
  white-space: nowrap;
}
.maktab-entry-peek-row + .maktab-entry-peek-row { border-top: 1px solid var(--color-table-border); }
/* It is a button again (V3.74.2), so it needs to look tappable. */
.entry-count-badge[data-entry-peek] { cursor: pointer; }

/* ============================================================
   V3.83.0 (k) — the PERSONAL-entry marker. The merged journal shows
   maktab entries unmarked (the spine); entries the student logged
   herself carry .pj-personal. THREE OPTIONS were prepared (user leans
   colour/tint; pick by swapping which block is live):

   OPTION A (LIVE) — accent edge + faint tint: quiet, reads at a glance.
   OPTION B — a small "personal" chip after the text: most explicit.
   OPTION C — accent-coloured text only: lightest possible touch.
   ============================================================ */
/* V3.91.0 — the user's VERDICT (2026-08-29): Option A read "a little
   too subtle". The marker is now a LAVENDER FILL from the palette, no
   left border. Options B/C retired with the verdict. */
.pj-personal {
  background: var(--palette-lavender, #E3DADE);
  border-radius: 4px;
  padding-left: 6px;
}

/* V4.2.15.7: Personal Journal non-Maktab entries are real pills, not
   tiny inline highlights. Fixed width + normal control height makes the
   personal entries read consistently down Sabaq / Sabaq Dhor / Dhor. */
#screen-journal .journal-table .journal-cell-text.pj-personal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  max-width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 999px;
  text-align: center;
}

/* the popup's read-only maktab rows: same shape as the tappable ones,
   provenance under the text, no button affordance */
.journal-popup-maktab { cursor: default; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.journal-popup-teacher { font-size: 11px; opacity: .6; }

/* V3.90.0 (user): the summary's date + X align to the TABLE's width on
   wide screens instead of floating at the screen corners — the same
   70%/768px centring the table itself uses. */
@media (min-width: 768px) {
  .screen-top-close-row.maktab-summary-toprow { width: 70%; margin-left: auto; margin-right: auto; }
}

/* V3.93.0: the SECOND clipper (user, 2026-08-30) — the header CELL's
   own overflow:hidden (there for label ellipsis) was swallowing the
   search dropdown a level below the V3.91.0 row fix. The search cell
   alone is visible; the other cells keep their ellipsis clipping. */
.journal-header-cell.maktab-search-cell { overflow: visible; }

/* ============================================================
   V4.2.2 (user) — MOBILE: one compact CARD per student on the maktab
   summary. Done entirely in CSS over the existing table rows, so all
   tap targets survive: the name opens her summary page, each log cell opens
   Quick Log, the +N pill peeks, and attendance opens her attendance page.
   From V4.2.12.1 the phone row itself opens the combined Quick Log card;
   desktop/tablet row whitespace still opens the full day view.
   The captions come from data-label (set in js/maktabSummary.js). */
@media (max-width: 767px) {
  .maktab-summary-headers { display: none; }   /* no columns left to label */
  .maktab-summary-table, .maktab-summary-table tbody,
  .maktab-summary-table tr, .maktab-summary-table td { display: block; width: 100%; }
  /* V4.2.8 mobile correction: the desktop nth-child widths above carry
     more specificity than `.maktab-summary-table td`, so Student stayed
     at 21% and each log cell at 24% on phones even after display:block.
     Match that specificity here and let every stacked card cell consume
     the full card width. This fixes the structure; the uniform pill rule
     itself remains unchanged for desktop/tablet. */
  .maktab-summary-table td:nth-child(n) { width: 100%; }
  /* V4.2.8.2: the mobile card's top line is a REAL two-column grid:
     name pill | attendance button. The previous absolute-positioned icon
     reserved a corner INSIDE the name cell, which made the two controls
     look nested/overlaid and left the cached skeleton vulnerable to an
     unbounded raw SVG. Keep them as sibling table cells and let CSS place
     them beside one another. The three log cells span both columns below. */
  .maktab-summary-table tr:not(.maktab-group-gap) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-table-border);
    position: relative;
  }
  .maktab-summary-table td.maktab-haidh-col {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    padding: 0 0 6px;
    align-self: center;
    justify-self: start;
  }
  .maktab-row-meta { gap: 3px; }
  .maktab-row-number { font-size: 11px; }
  .maktab-summary-attendance-link { padding: 5px 9px; font-size: 12px; }
  .maktab-summary-attendance-link svg { width: 16px; height: 16px; }
  .maktab-summary-table .maktab-student-name {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 6px;
    min-width: 0;
  }
  /* V4.2.8 / item 68: a REAL two-column line. The flex version left the
     value inside a table cell at its min-content width, so "Juz 28 H1"
     could collapse to one word per line. Grid gives the value the whole
     remaining track and keeps every caption/value pair aligned. */
  .maktab-summary-table .journal-cell {
    grid-column: 1 / -1;
    padding: 4px 0;
    border: none;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-sm);
    min-width: 0;
    white-space: normal;
  }
  .maktab-summary-table .journal-cell::before {
    content: attr(data-label);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-ink-soft);
  }
  .maktab-summary-table .journal-cell > * { min-width: 0; }
  .maktab-summary-skeleton-attendance { cursor: default; }
  .maktab-summary-table tr:last-child td { border-bottom: none; }
}

/* ============================================================
   V4.2.12 / V4.2.12.1 — Maktab Summary Quick Log.
   V4.2.12.1 compacts the identity/date/action rows, gives Dhor one short
   Portion -> Juz/position/confirm flow, and turns the phone sheet into one
   combined Sabaq | Sabaq Dhor | Dhor entry card.
   ============================================================ */
.maktab-quick-log-card { max-width: 520px; }
.maktab-quick-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-right: 28px;
  margin-bottom: 6px;
}
.maktab-quick-kind {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--color-ink);
}
.maktab-quick-student {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--color-accent-soft, #D0DBE7);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 600;
}
.maktab-quick-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.maktab-quick-detail-action {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 11px;
  line-height: 1.05;
  cursor: pointer;
  padding: 0;
}
.maktab-quick-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-table-border);
  border-radius: 12px;
  background: var(--color-surface);
}
.maktab-quick-detail-icon svg { width: 24px; height: 24px; }
.maktab-quick-detail-action:hover .maktab-quick-detail-icon { background: var(--surface-track); }
.maktab-quick-date {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-canvas);
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* V4.2.14.4: the Quick Log date pill (Quick Attendance was retired in V4.2.15) is
   now selectable. Keep the native input as the real iOS-safe tap target while
   wireCustomDateDisplay supplies the same formatted pill used elsewhere. */
.maktab-quick-date-control {
  flex: 0 0 150px;
  width: 150px;
  height: 42px;
  min-width: 0;
}
.maktab-quick-date-control .custom-date-wrap {
  width: 100%;
  height: 42px;
}
.maktab-quick-date-input,
.custom-date-display.maktab-quick-date-input {
  width: 100%;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  background: var(--color-canvas);
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.custom-date-display.maktab-quick-date-input {
  display: flex;
  align-items: center;
  justify-content: center;
}
.maktab-quick-existing {
  margin: 4px 0 12px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--color-canvas);
  color: var(--color-ink-soft);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.maktab-quick-existing span { font-weight: 700; margin-right: 6px; }
.maktab-quick-range-grid { display: grid; gap: 10px; }
.maktab-quick-range-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.modal-card .maktab-quick-range-row > label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}
.maktab-quick-verse-field { min-width: 0; }
.maktab-quick-verse-field input { border: 0; border-radius: 0; padding: 0; }

/* V4.2.14.1: keep every Quick Log selector in normal flow. The shared
   .unit-pill rule is loaded later (detail-pages.css) and is absolute by
   default, so these scoped two-class selectors deliberately outrank it. */
.maktab-quick-log-card .maktab-quick-type-switch {
  position: static;
  right: auto;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  margin: 0 0 12px;
  box-sizing: border-box;
}
.maktab-quick-log-card .maktab-quick-type-switch button {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

/* V4.2.15.10: Sabaq Dhor's confirmation controls are a real shared
   right-hand grid track on EVERY viewport size. components.css is loaded
   after this file and its `.modal-card label { display:block }` used to win
   on tablet/desktop, letting each quarter pill consume the full row and
   dropping its checkbox underneath. The more-specific label selector below
   owns the layout structurally, while the manual To checkbox uses the exact
   same fixed track. */
.maktab-quick-sd-layout {
  --maktab-quick-sd-check-col: 44px;
  display: grid;
  gap: 12px;
  width: 100%;
}
.maktab-quick-sd-quarters { display: grid; gap: 7px; width: 100%; min-width: 0; }
.modal-card label.maktab-quick-sd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--maktab-quick-sd-check-col, 44px);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.maktab-quick-sd-row-pill {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--color-accent-soft, #D0DBE7);
  color: var(--color-ink-soft);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.modal-card .maktab-quick-sd-row > input,
.modal-card .maktab-quick-sd-manual-line > input,
.modal-card .maktab-quick-sd-picker-row > input {
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--palette-evergreen, #344C3D);
  justify-self: center;
  align-self: center;
}
.modal-card .maktab-quick-sd-row > input { grid-column: 2; }
.maktab-quick-sd-manual { display: grid; gap: 8px; width: 100%; min-width: 0; }
.maktab-quick-sd-manual-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--maktab-quick-sd-check-col, 44px);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.maktab-quick-sd-manual-line .maktab-quick-range-row {
  grid-column: 1;
  grid-template-columns: 64px minmax(0, 1fr);
  min-width: 0;
}
.maktab-quick-sd-manual-line > input { grid-column: 2; }
.maktab-quick-sd-check-spacer {
  grid-column: 2;
  width: 22px;
  justify-self: center;
}
.maktab-quick-sd-empty { display: grid; gap: 7px; }
.maktab-quick-sd-picker-row {
  display: grid;
  grid-template-columns: minmax(92px, 30%) minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}
.modal-card .maktab-quick-sd-picker-row select {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  border-radius: 999px;
}
.maktab-quick-log-card .maktab-quick-sd-quarter-pill {
  position: static;
  right: auto;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}
.maktab-quick-log-card .maktab-quick-sd-quarter-pill button {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0;
}
.maktab-quick-sd-preview { min-height: 16px; font-size: 11px; color: var(--color-ink-soft); text-align: center; }

.maktab-quick-dhor-grid { display: grid; gap: 10px; }
.maktab-quick-dhor-primary-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.maktab-quick-dhor-position-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.maktab-quick-control-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.maktab-quick-log-card .maktab-quick-unit-pill,
.maktab-quick-log-card .maktab-quick-position-pill {
  position: static;
  right: auto;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}
.maktab-quick-log-card .maktab-quick-unit-pill button,
.maktab-quick-log-card .maktab-quick-position-pill button {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.modal-card .maktab-quick-dhor-primary-row select {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 34px 0 12px;
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  box-sizing: border-box;
}
.maktab-quick-confirm {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--color-ink) !important;
}
.maktab-quick-confirm-action {
  height: 42px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-sizing: border-box;
}
.modal-card .maktab-quick-confirm input {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--palette-evergreen, #344C3D);
}
.maktab-quick-actions {
  display: grid;
  grid-template-columns: minmax(110px, .9fr) minmax(120px, 1.35fr);
  justify-content: start;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.maktab-quick-confirm-slot { min-width: 0; }
.maktab-quick-actions.no-confirm { grid-template-columns: minmax(120px, 220px); }
.maktab-quick-actions.no-confirm .maktab-quick-confirm-slot { display: none; }
.maktab-quick-actions .maktab-quick-save {
  width: 100%;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}
.maktab-quick-details {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
  cursor: pointer;
}
.maktab-quick-log-card .form-error { min-height: 18px; margin-top: 4px; }
.maktab-quick-surah-modal { z-index: 320; }

@media (max-width: 767px) {
  /* V4.2.15.8: data rows are no longer Quick Log targets; only the dedicated
     Log action opens the unified card. */
  .maktab-summary-table .journal-cell { min-height: 38px; align-content: center; cursor: default; }

  .maktab-quick-log-card { padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
  .maktab-quick-heading.is-combined {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 28px;
  }
  .maktab-quick-heading.is-combined .maktab-quick-student { width: 100%; }
  .maktab-quick-date-row { margin-bottom: 10px; }
  .maktab-quick-date-control { flex-basis: 142px; width: 142px; }
  .maktab-quick-range-row { grid-template-columns: 74px minmax(0, 1fr); }
  .maktab-quick-dhor-primary-row { grid-template-columns: 128px minmax(0, 1fr); }
  .maktab-quick-dhor-position-row { grid-template-columns: 96px minmax(0, 1fr); }
  .maktab-quick-actions { grid-template-columns: minmax(96px, .9fr) minmax(112px, 1.25fr); }
  .maktab-quick-actions.no-confirm { grid-template-columns: minmax(112px, 58%); }
}

/* ============================================================
   V4.2.14.1 legacy Quick Attendance sheet styles.
   V4.2.15 routes the icons directly to the existing Attendance calendar;
   retained only so a stale open modal is harmless across a service-worker swap.
   ============================================================ */
.maktab-quick-attendance-card { max-width: 520px; }
.maktab-quick-attendance-card .maktab-quick-heading { grid-template-columns: minmax(0, 1fr); padding-right: 28px; }
.maktab-quick-attendance-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.maktab-quick-attendance-current {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-canvas);
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 600;
}
.maktab-quick-attendance-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 42px;
  min-height: 42px;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--color-surface);
}
.maktab-quick-attendance-status button {
  min-width: 0;
  height: 40px;
  border: 0;
  border-right: 1px solid var(--color-table-border);
  background: transparent;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
  cursor: pointer;
}
.maktab-quick-attendance-status button:last-child { border-right: 0; }
.maktab-quick-attendance-status button.on {
  background: var(--color-accent-soft, #D0DBE7);
  color: var(--color-ink);
  font-weight: 700;
}
.maktab-quick-attendance-status button:disabled { opacity: .52; cursor: default; }
.maktab-quick-attendance-hint { min-height: 18px; margin: 7px 0 0; }
.maktab-quick-attendance-card .form-error { min-height: 18px; margin-top: 2px; }
.maktab-quick-attendance-actions {
  display: grid;
  grid-template-columns: minmax(120px, 220px) auto;
  justify-content: start;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.maktab-quick-attendance-actions .primary {
  width: 100%;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}
.maktab-quick-attendance-actions .maktab-quick-details { height: 42px; }
@media (max-width: 767px) {
  .maktab-quick-attendance-card { padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
  .maktab-quick-attendance-actions { grid-template-columns: minmax(120px, 55%) auto; }
}

/* ============================================================
   V4.2.15.5 — mobile Maktab Summary Log target + Sabaq Dhor checkbox grid. */
/* V4.2.15.8: the Log column is no longer mobile-only despite the legacy
   class name. Desktop/tablet use a compact action; mobile enlarges it below. */
.maktab-summary-table td.maktab-mobile-log-col {
  display: table-cell;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
}
.maktab-mobile-log-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--palette-evergreen, #344C3D);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px;
}
.maktab-mobile-log-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; }
.maktab-mobile-log-icon svg { width: 29px; height: 29px; }
.maktab-mobile-log-skeleton { opacity: .35; cursor: default; }
.maktab-log-head { justify-content: center; }
@media (max-width: 767px) {
  .maktab-summary-table tr:not(.maktab-group-gap) {
    grid-template-columns: minmax(0, 1fr) 76px;
  }
  .maktab-summary-table .journal-cell {
    grid-column: 1;
  }
  .maktab-summary-table td.maktab-mobile-log-col {
    display: flex;
    grid-column: 2;
    grid-row: 2 / span 3;
    width: auto;
    padding: 0;
    align-self: center;
    justify-self: center;
    border: 0;
  }
  .maktab-mobile-log-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--palette-evergreen, #344C3D);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 3px;
  }
  .maktab-mobile-log-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
  }
  .maktab-mobile-log-icon svg { width: 42px; height: 42px; }
  .maktab-mobile-log-skeleton { opacity: .35; cursor: default; }

  /* components.css's later `.modal-card label {display:block}` used to
     knock the Sabaq Dhor label rows out of their grid and drop checkboxes
     beneath the pills. This higher-specificity rule keeps one shared RHS
     checkbox column for quarter rows and the manual To row. */
  .modal-card .maktab-quick-sd-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin: 0;
  }
  .maktab-quick-sd-row-pill {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
  .maktab-quick-sd-manual-line {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
}


/* V4.2.15.16: continuous pink desktop header; compact Log label below +. */
@media (min-width: 768px) {
  #screen-maktabSummary .maktab-summary-headers .journal-header-cell {
    background: var(--color-table-header-log);
  }
  #screen-maktabSummary .maktab-summary-table td.maktab-mobile-log-col {
    background: var(--color-surface, #fff);
  }
  #screen-maktabSummary .maktab-mobile-log-action {
    flex-direction: column;
    gap: 1px;
    padding: 2px;
    font-size: 11px;
    line-height: 1;
    min-height: 0;
    white-space: nowrap;
  }
  #screen-maktabSummary .maktab-mobile-log-icon { width: 20px; height: 20px; }
  #screen-maktabSummary .maktab-mobile-log-icon svg { width: 20px; height: 20px; }
}

/* V4.2.15.9 — one unified Quick Log selector: a dark evergreen outline
   with the selected activity highlighted green instead of pale blue. */
.maktab-quick-log-card .maktab-quick-type-switch {
  height: 44px;
  min-height: 44px;
  border: 2px solid var(--palette-evergreen, #344C3D);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface, #fff);
}
.maktab-quick-log-card .maktab-quick-type-switch button {
  height: 40px;
  color: var(--color-ink-soft);
}
.maktab-quick-log-card .maktab-quick-type-switch button.on {
  background: var(--palette-evergreen, #344C3D);
  color: #fff;
  font-weight: 700;
}


/* ============================================================
   V4.2.15.11 — Maktab roster search + Quick Log selector ergonomics. */
.maktab-summary-mobile-search-row { display: none; }

/* Quick Log From/To: make the custom Ayah stepper a larger target and
   anchor it toward the LEFT of its own track, away from the pill edge. */
.maktab-quick-log-card .maktab-quick-verse-field {
  grid-template-columns: 38px minmax(0, 1fr) minmax(72px, 30%) 52px;
  gap: 4px;
  padding-right: 12px;
}
.maktab-quick-log-card .maktab-quick-verse-field .verse-ref-ayah-stepper {
  justify-self: start;
  width: 40px;
}
.maktab-quick-log-card .maktab-quick-verse-field .verse-ref-ayah-stepper button {
  width: 40px;
  min-height: 18px;
  padding: 3px 8px;
}

/* Desktop Safari/Chromium otherwise show the native number spinner beside
   the app's explicit Ayah stepper. Keep only the deliberate custom chevrons
   on large screens. */
@media (min-width: 768px) {
  .maktab-quick-log-card .maktab-quick-verse-field input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .maktab-quick-log-card .maktab-quick-verse-field input[type=number]::-webkit-inner-spin-button,
  .maktab-quick-log-card .maktab-quick-verse-field input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

/* Searchable Surah picker used by Ayah From / Ayah To in unified Quick Log. */
.maktab-quick-surah-search {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  margin: 8px 0 2px;
  padding: 8px 12px;
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}
.maktab-quick-surah-modal .surah-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.maktab-quick-surah-ayah-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-ink-faint);
  white-space: nowrap;
}
.maktab-quick-surah-empty {
  padding: 12px;
  color: var(--color-ink-faint);
  font-size: 13px;
}

@media (max-width: 767px) {
  .maktab-summary-mobile-search-row {
    display: block;
    position: relative;
    margin: -2px 0 var(--space-sm);
  }
  .maktab-summary-mobile-search-row input[type=search] {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 8px 13px;
    border: 1px solid var(--color-table-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
  }
  .maktab-summary-mobile-search-empty {
    margin-top: 5px;
    padding: 0 4px;
    font-size: 12px;
    color: var(--color-ink-faint);
  }
  #maktabSummaryBody tr.maktab-mobile-search-hidden { display: none !important; }
}

/* V4.2.15.18 — field-side confirmation and shared Tajweed picker. */
.maktab-quick-sd-manual-line > .maktab-quick-confirm,
.maktab-quick-dhor-primary-row > .maktab-quick-confirm {
  width: auto; min-height: 0; height: auto; padding: 0; border: 0;
  background: transparent; justify-content: center;
}
.maktab-quick-dhor-primary-row { grid-template-columns: minmax(70px, .75fr) minmax(0, 1.5fr) 34px; }
.maktab-quick-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#maktabQuickTajweed .tajweed-trigger-btn {
  border-radius: 999px;
  width: 50%;
  min-height: 42px;
  color: var(--palette-evergreen, #344C3D);
  border: 1px solid var(--palette-evergreen, #344C3D);
  text-align: center;
  justify-content: center;
}
.tajweed-popup-modal { z-index: 1001; }

/* V4.2.15.19: pin confirmation beside the range, even outside SD layout. */
.maktab-quick-sd-manual-line > .maktab-quick-confirm { grid-column: 2; grid-row: 1; }
@media (min-width: 768px) {
  #screen-maktabSummary .maktab-summary-headers .journal-header-cell:nth-child(-n+3) {
    background: var(--color-table-header-date);
  }
}