/* ============================================================
   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: pointer; }
.maktab-summary-row:active { background: rgba(130, 150, 114, 0.12); }
.maktab-student-name { font-weight: 600; }
.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 has FIVE columns, so those inherited rules mis-assigned every
   width (the date column's 20% landed on the narrow haidh column, and
   the 5th 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. */
.maktab-summary-headers > *:nth-child(1) { flex: 0 0 7%; }
.maktab-summary-headers > *:nth-child(2) { flex: 0 0 21%; }
.maktab-summary-headers > *:nth-child(3) { flex: 0 0 24%; }
.maktab-summary-headers > *:nth-child(4) { flex: 0 0 24%; }
.maktab-summary-headers > *:nth-child(5) { flex: 0 0 24%; }
.maktab-summary-table { table-layout: fixed; }
.maktab-summary-table td:nth-child(1) { width: 7%; }
.maktab-summary-table td:nth-child(2) { width: 21%; }
.maktab-summary-table td:nth-child(3) { width: 24%; }
.maktab-summary-table td:nth-child(4) { width: 24%; }
.maktab-summary-table td:nth-child(5) { width: 24%; }

/* 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 1fr;
  align-items: center;
  gap: 8px;
}
.maktab-summary-toprow .screen-close-btn { justify-self: end; }
.maktab-summary-date-input { font: inherit; font-weight: 600; }

/* Haidh: one small icon, BRIGHT YELLOW when marked (confirmed in chat
   -- the old muted-pink tint barely read as a state change across a
   full roster). Same treatment on both surfaces: the summary's leading
   column and the day view's icon beside the student name. */
.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; }
.maktab-haidh-check.marked { background: #FFD400; border-color: #E6BE00; }

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

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