/* View: Księgowość (js/views/accounting.js) + the locked-module overlay (.lock-screen).
   Quarter nav → limit panel (paper 2, radius 18: ring + facts + note) → income ledger rows → report form. */
@layer views {
/* ---- quarter nav ---- */
.q-nav { display: flex; align-items: center; gap: 4px; padding: 6px 0 4px; }
.q-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.q-label { max-width: 100%; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-label .muted { font-family: var(--font-text); font-size: var(--fs-body); font-variation-settings: normal; letter-spacing: 0; }

/* ---- limit panel ---- */
.limit-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px 20px; align-items: center; }   /* the enclosing .card is the tonal widget */
.limit-ring { display: grid; place-items: center; }
.limit-card .ring-bg { stroke: var(--paper); }
.limit-card .ring-label { font-size: 30px; }
.limit-card .ring-sub { margin-top: 4px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.limit-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.limit-grid b { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
.limit-grid b.amt:not(.pos):not(.neg) { color: var(--ink); }
.limit-card > .notice { grid-column: 1 / -1; margin: 0; }

/* ---- income ledger ---- */
.acc-count { font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; }
.acc-count b { color: var(--ink); }
.table-entries .trow { grid-template-columns: 96px minmax(0, 1fr) 120px 112px; gap: 0 12px; min-height: 48px; }
.table-entries-body { max-height: calc(8 * 49px); overflow-y: auto; overscroll-behavior: contain; }
.table-entries-body .trow { border-bottom: 0; border-top: 1px solid var(--rule); color: var(--ink); }
.table-entries-body .trow:first-child { border-top: 0; }
.ent-d { font-size: var(--fs-caption); color: var(--ink-2); }
.ent-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-entries .num b { font-weight: 600; white-space: nowrap; }

/* ---- reports ---- */
.acc-note { font-size: var(--fs-caption); }
.report-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; padding-top: 4px; }
.report-form .field { margin-bottom: 0; min-width: 0; }
.report-form [data-rep] { grid-column: 1 / -1; }
.report-form [hidden] { display: none; }
.report-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.report-btns .btn { flex: 1 1 0; }

/* ---- locked module ---- */
.lock-screen { position: relative; min-height: 440px; overflow: hidden; margin-top: var(--widget-gap); }
.lock-screen-bg { filter: blur(5px); opacity: .45; pointer-events: none; user-select: none; padding: 22px; }
.lock-screen-bg .stat-grid { margin: 0; }
.lock-screen-bg .stat { display: flex; justify-content: space-between; }
.lock-screen-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px 16px; background: linear-gradient(180deg, transparent, var(--paper-2) 28%); }
.lock-panel { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.lock-panel h2 { font-size: var(--fs-h2); line-height: 1.2; }
.lock-panel .paywall-perks { text-align: left; }
.lock-panel .btn-row { justify-content: center; width: 100%; }

@media (max-width: 760px) {
  .table-entries .thead { display: none; }
  .table-entries .trow { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .lock-screen { min-height: 0; }
  .lock-screen-bg { display: none; }
  .lock-screen-panel { position: relative; inset: auto; padding: 20px 16px; background: none; }
  .lock-panel .btn { width: 100%; }
}
@media (max-width: 520px) {
  /* ledger: two lines — description (wraps, never cut) | amount, date as a caption under it; section meta on its own line */
  .table-entries .trow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "d a"; gap: 2px 12px; padding: 10px 0; }
  .table-entries .ent-t { grid-area: t; white-space: normal; overflow: visible; line-height: 1.3; overflow-wrap: anywhere; }
  .table-entries .ent-d { grid-area: d; }
  .table-entries .num { grid-area: a; align-self: center; }
  .table-entries-body { max-height: none; overflow: visible; }
  .acc-count { flex: 1 1 100%; margin-left: 0; }
  .page-acc .section-title .section-right { margin-left: 0; flex: 1 1 100%; }
  /* ring on the left, the four facts as one column next to it; the note under both */
  .limit-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px 16px; }
  .limit-ring { --ring-size: 112px; }
  .limit-card .ring-label { font-size: 26px; }
  .limit-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 380px) { .q-label { font-size: 19px; } }
@media (min-width: 761px) {
  .report-form { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.4fr); }
  .report-form [data-rep] { grid-column: auto; }
  .report-btns { justify-content: flex-start; }
  .report-btns .btn { flex: none; }
  .limit-card { grid-template-columns: 132px minmax(0, 1fr); }
}
}