/* ============================================================
   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;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.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); }
}