/* ============================================================
   rent-receipt.css
   Page styles for the Rent Receipt Generator. Layout, cards and
   inputs use the same Tailwind classes as the Invoice Generator;
   this file only holds what Tailwind utilities can't express, plus
   every class that script.js toggles at runtime (so no runtime
   class ever depends on the Tailwind build picking it up).
   ============================================================ */

/* ---------- base (same as Invoice Generator) ---------- */
html { scrollbar-gutter: stable; overflow-y: scroll; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Native dropdown popups follow the site theme (two layers, same
   fix as Invoice Generator and Job Offer Comparison). */
html.dark { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }
select option { background-color: #f9fafb; color: #1a1a2e; }
html.dark select option { background-color: #161625; color: #e8e8f5; }

/* Selects inside the padded input boxes: keep the text clear of the
   arrow (the arrow sits on the select's own right edge, the box's
   padding gives it room). */
.rr-input select { padding-right: 22px; background-position: right 0 center; text-overflow: ellipsis; }

/* ---------- input wrapper error state ---------- */
.rr-input.has-error { border-color: #E24B4A !important; }
.rr-error { color: #E24B4A; font-size: 11px; margin-top: 4px; line-height: 1.45; }
.rr-error[hidden] { display: none; }

/* ---------- toggles (same look as Invoice quick-note toggles) ---------- */
.quick-note-toggle.is-on { background: #2A3AAF; }
html.dark .quick-note-toggle.is-on { background: #6B7FE8; }
.quick-note-toggle .toggle-knob { transition: transform .15s ease; }
.quick-note-toggle.is-on .toggle-knob { transform: translateX(16px); }
.quick-note-toggle:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
.quick-note-row.is-disabled { opacity: .45; }
.quick-note-row.is-disabled .quick-note-toggle { cursor: not-allowed; }
.quick-note-row.is-locked .quick-note-toggle { cursor: default; opacity: .6; }

/* ---------- helper notes under fields ---------- */
.rr-note { font-size: 11px; line-height: 1.5; color: #8888aa; margin-top: 6px; }
.rr-note:empty { display: none; }
.rr-note[hidden] { display: none; }
.rr-note.is-warn { color: #B45309; font-weight: 500; }
html.dark .rr-note.is-warn { color: #F2B94A; }
.rr-words { font-size: 11px; color: #8888aa; font-style: italic; margin-top: 6px; min-height: 16px; }

.rr-optional-tag { font-size: 10px; color: #aaaacc; font-weight: 400; }
.rr-required-tag { font-size: 10px; color: #B45309; font-weight: 600; }
html.dark .rr-required-tag { color: #F2B94A; }

/* PAN input when "no PAN" is on */
.rr-input.is-disabled { opacity: .45; }
.rr-input.is-disabled input { cursor: not-allowed; }

/* ---------- month picker ---------- */
.rr-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .rr-month-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.rr-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7px 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.1); background: #f9fafb; color: #4a4a6a;
  font-size: 12px; font-weight: 600; line-height: 1.15;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.rr-chip .rr-chip-year { font-size: 9.5px; font-weight: 500; color: #aaaacc; margin-top: 2px; }
.rr-chip:hover { border-color: #2A3AAF; }
.rr-chip[aria-pressed="true"] { background: #2A3AAF; border-color: #2A3AAF; color: #fff; }
.rr-chip[aria-pressed="true"] .rr-chip-year { color: rgba(255,255,255,.7); }
.rr-chip:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
html.dark .rr-chip { background: #161625; border-color: rgba(255,255,255,.1); color: #9898bb; }
html.dark .rr-chip:hover { border-color: #6B7FE8; }
html.dark .rr-chip[aria-pressed="true"] { background: #6B7FE8; border-color: #6B7FE8; color: #fff; }

.rr-months-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.rr-months-head .rr-months-actions { display: flex; gap: 8px; }

.rr-mini-btn {
  white-space: nowrap; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  background: #eef0fb; color: #2A3AAF; border: 0;
}
.rr-mini-btn.is-quiet { background: #f3f4f6; color: #8888aa; }
.rr-mini-btn:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
html.dark .rr-mini-btn { background: #1e2060; color: #b5bef6; }
html.dark .rr-mini-btn.is-quiet { background: #161625; color: #9898bb; }

.rr-month-summary { font-size: 11.5px; color: #4a4a6a; margin-top: 10px; }
.rr-month-summary strong { color: #1a1a2e; font-weight: 600; }
html.dark .rr-month-summary { color: #9898bb; }
html.dark .rr-month-summary strong { color: #e8e8f5; }

/* ---------- revision + custom day inline fields ---------- */
.rr-inline-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rr-inline-fields .rr-inline-text { font-size: 12px; color: #4a4a6a; }
html.dark .rr-inline-fields .rr-inline-text { color: #9898bb; }
.rr-small-input {
  border: 1px solid rgba(0,0,0,.15); border-radius: 8px; background: #fff;
  padding: 7px 10px; font-size: 13px; color: #1a1a2e; outline: none;
}
.rr-small-input:focus { border-color: #2A3AAF; }
.rr-small-input.has-error { border-color: #E24B4A; }
html.dark .rr-small-input { background: #1a1a2e; border-color: rgba(255,255,255,.15); color: #e8e8f5; }
html.dark .rr-small-input:focus { border-color: #6B7FE8; }
.rr-small-input.is-amount { width: 110px; }
.rr-small-input.is-day { width: 70px; }
select.rr-small-input { padding-right: 28px; background-position: right 10px center; }

/* ---------- action buttons ---------- */
.rr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-actions.is-single { grid-template-columns: 1fr; }
.rr-actions.is-single #zipBtn { display: none; }
.rr-btn-busy { opacity: .65; cursor: progress !important; }
.rr-status { font-size: 11.5px; text-align: center; color: #8888aa; min-height: 16px; }
.rr-status.is-error { color: #E24B4A; }
.rr-status.is-success { color: #0F9D6B; }
html.dark .rr-status.is-success { color: #34D399; }

.rr-link-btn {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font-size: 11.5px; color: #8888aa; text-decoration: underline; text-underline-offset: 3px;
}
.rr-link-btn:hover { color: #E24B4A; }

/* ---------- preview panel ---------- */
@media (min-width: 1024px) {
  #previewPanel { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-gutter: stable; }
}

.rr-tabs { display: inline-flex; gap: 4px; }
.rr-tab {
  font-size: 10.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: #f3f4f6; color: #4a4a6a; border: 0;
}
.rr-tab[aria-selected="true"] { background: #2A3AAF; color: #fff; }
.rr-tab[hidden] { display: none; }
.rr-tab:focus-visible { outline: 2px solid #2A3AAF; outline-offset: 2px; }
html.dark .rr-tab { background: #161625; color: #9898bb; }
html.dark .rr-tab[aria-selected="true"] { background: #6B7FE8; color: #fff; }

.rr-pages { display: flex; flex-direction: column; gap: 16px; }
.rr-page {
  display: block; width: 100%; height: auto; background: #fff;
  border-radius: 4px; box-shadow: 0 4px 16px -4px rgba(20,20,50,.18);
}
.rr-page-caption { font-size: 10px; color: #aaaacc; text-align: center; margin-top: -8px; }
.rr-preview-empty { font-size: 13px; color: #aaaacc; text-align: center; padding: 72px 16px; }

@media (prefers-reduced-motion: reduce) {
  .quick-note-toggle .toggle-knob, .rr-chip { transition: none; }
}