/* =============================================================
   Siddhivinayak Annex — Housing Society Maintenance System
   Design layer on top of Tailwind CSS + Preline UI
   -------------------------------------------------------------
   Tailwind (Play CDN) + Preline handle all app chrome.
   This file holds only what utilities cannot express well:
     1. Typography defaults (Anek Devanagari / Mukta for Marathi)
     2. The fixed-width printable receipt (पावती)
     3. Print rules
   ============================================================= */

:root {
    --ink: #17160f;          /* warm near-black */
    --ink-muted: #4a4639;    /* ink-mid */
    --ink-soft: #6b6658;     /* ink-soft */
    --line: #e4e0d6;         /* warm hairline */
    --primary: #17160f;
    --accent: #9a3412;       /* rust/terracotta */
    --success: #2f7d4f;      /* muted forest green */
    --danger: #b42318;       /* muted brick red */
    --warning: #d97706;      /* amber */
}

/* ---------- Base typography ---------- */
body {
    font-family: 'Mukta', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-display,
h1, h2, h3, h4 {
    font-family: 'Anek Devanagari', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* Tabular figures keep money columns aligned */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Native form controls that Preline styles but the browser owns */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
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; }

/* Keep sticky table headers crisp above scrolled rows */
.table-sticky thead th { position: sticky; top: 0; z-index: 1; }


/* =============================================================
   Printable Receipt (पावती) — traditional double-bordered voucher
   Sized in real mm/pt so on-screen = what prints (not A4 + margins).
   The page's @page size is computed by JS from the receipt's actual
   height, so printing crops to receipt size, not a full sheet.
   Deliberately kept off the Tailwind utility system: html2canvas and
   window.print() both need resolved, self-contained styles.
   ============================================================= */
.stage { display: flex; justify-content: center; padding-bottom: 64px; }
.paper {
    background: #fff;
    padding: 10mm;
    box-shadow: 0 1px 0 #e2ddd1, 0 30px 60px -30px rgba(23, 22, 15, .3);
    border-radius: 4px;
}
.cut { position: relative; height: 9mm; display: flex; align-items: center; justify-content: center; }
.cut::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #9c9585; }
.cut span { position: relative; background: #fff; padding: 0 10px; font-size: 9pt; color: var(--ink-soft); }

.rc {
    width: 190mm;
    position: relative;
    background: #fff;
    color: #000;
    border: 1.2pt solid #1b1a14;
    padding: 1.6mm;
    font-family: 'Mukta', sans-serif;
}
.rc-in { border: .5pt solid #1b1a14; padding: 5mm 8mm 4mm; position: relative; }
.rc-copy {
    position: absolute;
    top: 3mm;
    right: 4mm;
    font-size: 8pt;
    font-weight: 600;
    color: var(--ink-muted);
    border: .6pt solid var(--ink-muted);
    border-radius: 20pt;
    padding: .3mm 3mm;
}
.rc-om { text-align: center; font-size: 9pt; color: var(--accent); font-weight: 600; letter-spacing: .02em; }

.rc-hd { display: grid; grid-template-columns: 30mm 1fr 30mm; align-items: center; margin-top: 1.5mm; }
.rc-logo {
    width: 27mm;
    height: 27mm;
    border-radius: 6mm;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #fff;
}
.rc-logo img { width: 100%; height: 100%; object-fit: contain; }
.rc-org { text-align: center; }
.rc-org h1 { margin: 0; font-family: 'Anek Devanagari', sans-serif; font-size: 22pt; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.rc-org p { margin: .6mm 0 0; font-size: 9.5pt; color: var(--ink-muted); }
.rc-org .reg { font-size: 8.5pt; color: var(--ink-soft); }

.rc-band { display: flex; align-items: center; gap: 4mm; margin: 3mm 0; }
.rc-band::before, .rc-band::after { content: ""; flex: 1; border-top: .8pt solid #1b1a14; }
.rc-band b {
    font-family: 'Anek Devanagari', sans-serif;
    font-size: 12pt;
    font-weight: 600;
    background: #1b1a14;
    color: #fff;
    padding: 1mm 5mm;
    border-radius: 1mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.rc-ref { display: flex; justify-content: center; gap: 12mm; font-size: 10.5pt; margin-bottom: 2mm; text-align: center; }
.rc-ref span { color: var(--ink-soft); }
.rc-ref strong { font-weight: 700; margin-left: 1.5mm; letter-spacing: .01em; }

.rc-body { font-size: 11pt; line-height: 1.95; color: #1b1a14; text-align: center; }
.rc-f { display: inline-block; min-width: 20mm; padding: 0 2mm; border-bottom: .8pt dotted #1b1a14; font-weight: 700; line-height: 1.5; text-align: center; }
.rc-f.w1 { min-width: 70mm; } .rc-f.w2 { min-width: 60mm; } .rc-f.w3 { min-width: 24mm; }

.rc-split { margin-top: 2.5mm; font-size: 9pt; color: var(--ink-muted); text-align: center; }
.rc-split b { color: #1b1a14; }

.rc-foot { display: grid; grid-template-columns: auto 1fr auto; gap: 7mm; align-items: end; margin-top: 3mm; }
.rc-amt { border: 1.2pt solid #1b1a14; padding: 2mm 4mm; display: flex; align-items: center; gap: 2.5mm; }
.rc-amt span { font-family: 'Anek Devanagari', sans-serif; font-size: 9pt; font-weight: 600; color: var(--ink-muted); line-height: 1.1; }
.rc-amt strong { font-family: 'Anek Devanagari', sans-serif; font-size: 20pt; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.rc-stamp {
    justify-self: center;
    width: 23mm;
    height: 23mm;
    border-radius: 50%;
    border: 1.6pt double var(--success);
    color: var(--success);
    display: grid;
    place-items: center;
    text-align: center;
    transform: rotate(-12deg);
    line-height: 1.05;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.rc-stamp b { display: block; font-family: 'Anek Devanagari', sans-serif; font-size: 13pt; font-weight: 700; }
.rc-stamp span { display: block; font-size: 6.5pt; font-weight: 700; letter-spacing: .08em; }
.rc-stamp i { display: block; font-style: normal; font-size: 5.5pt; margin-top: .6mm; }
.rc-qr { width: 24mm; text-align: center; }
.rc-qr-img { width: 16mm; height: 16mm; display: block; margin: 0 auto; image-rendering: pixelated; }
.rc-qr span { display: block; margin-top: 1mm; font-size: 6.5pt; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); line-height: 1.4; }

.rc-fine { margin-top: 3mm; padding-top: 1.5mm; border-top: .5pt solid #bdb7a9; font-size: 7.5pt; color: var(--ink-soft); text-align: center; }

/* Cancelled state */
.rc.void .rc-in::after {
    content: "रद्द / CANCELLED";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Anek Devanagari', sans-serif;
    font-size: 40pt;
    font-weight: 700;
    color: rgba(180, 35, 24, .16);
    transform: rotate(-14deg);
    pointer-events: none;
}
.rc.void .rc-stamp { visibility: hidden; }

/* Native <dialog> used for the cancel-receipt confirmation */
dialog { border: 0; border-radius: 20px; padding: 28px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 30px 60px -20px rgba(23, 22, 15, .4); }
dialog::backdrop { background: rgba(23, 22, 15, .4); }
dialog h3 { margin: 0 0 6px; }
dialog p { margin: 0 0 16px; }
dialog textarea { min-height: 90px; resize: vertical; }
.d-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 760px) {
    .wrap-narrow-hide { display: none; }
}

/* =============================================================
   Print: paper = receipt size (not A4). @page size is set by JS
   from the receipt's real height — see setPageSize() in receipt.php.
   A generous margin/height buffer is added there so tiny rounding
   or printer-driver unprintable-margin differences never push the
   content onto a second page.
   ============================================================= */
@media print {
    /* body's mobile-nav clearance (Tailwind pb-24 md:pb-0) doesn't reset
       here: print's viewport is the small custom receipt page, below the
       md breakpoint, so md:pb-0 never applies — the leftover ~25mm of
       bottom padding was silently overflowing a blank 2nd page. */
    html, body { background: #fff !important; margin: 0; padding: 0 !important; }
    .no-print, .cut { display: none !important; }
    main { padding: 0 !important; max-width: none !important; }
    .stage { display: flex; justify-content: center; padding: 0; }
    .paper { padding: 0; box-shadow: none; border-radius: 0; zoom: 1 !important; }
    .rc { margin: 0 auto; break-inside: avoid; page-break-inside: avoid; break-after: page; page-break-after: always; }
    .rc:last-of-type { break-after: auto; page-break-after: auto; }
}