/* ==========================================================================
   Daily Reports — report form, detail view, ledger summary, comments, print
   ========================================================================== */

/* ----------------------------------------------------------- Report form */

.report-form .field-date { max-width: 260px; }
.lines td { vertical-align: top; }
.lines .row-action { width: 52px; text-align: right; }
.lines .input { min-width: 90px; }
.lines td[data-label="Service"] .input { min-width: 240px; }
.lines td[data-label="Expense"] .input,
.lines td[data-label="Description"] .input { min-width: 180px; }
.line-total { display: inline-block; padding-top: .55rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.lines .field-error { display: block; margin-top: .25rem; text-align: left; }
.lines .num .field-error { text-align: right; }

.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .5rem; }

/* --------------------------------------------------------------- Ledger
   A ruled, accounting-sheet style summary. The net figure gets the
   accountant's double rule (a 3px "double" border) in the accent colour. */

.ledger {
    display: grid; grid-template-columns: 1fr 1fr 1.25fr;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); margin: 0 0 1.25rem; overflow: hidden;
}
.ledger-item { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; border-right: 1px solid var(--border); min-width: 0; }
.ledger-label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.ledger-value { font-size: 1.7rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.015em; overflow-wrap: anywhere; }
.ledger-earned .ledger-value { color: var(--success); }
.ledger-expenses .ledger-value { color: var(--warning); }
.ledger-formula { font-size: .78rem; opacity: .75; }
.ledger-net { background: var(--ink); color: #fff; border-right: 0; }
.ledger-net .ledger-label { color: var(--ink-text); }
.ledger-net .ledger-value { color: #fff; font-size: 2rem; display: inline-block; padding-bottom: .15rem; border-bottom: 4px double var(--accent); align-self: flex-start; }
.ledger-net.is-negative .ledger-value { color: #ffb4ab; }

/* ---------------------------------------------------------- Detail view */

.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.meta dt { font-size: .8rem; color: var(--muted); margin-bottom: .15rem; }
.meta dd { margin: 0; font-weight: 600; }
.meta dd small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }

.comments { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.comment { border-left: 3px solid var(--primary); background: var(--primary-50); padding: .75rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.comment-body { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.comment-meta { margin: 0; font-size: .82rem; color: var(--muted); }
.comment-form { border-top: 1px solid var(--border); padding-top: 1rem; }
.empty-comments { margin: 0 0 1rem; }

.print-only { display: none; }

/* ------------------------------------------------------ Small screens: the
   report form rows turn into stacked cards so nothing needs side-scrolling. */

@media (max-width: 760px) {
    .ledger { grid-template-columns: minmax(0, 1fr); }
    .ledger-item { border-right: 0; border-bottom: 1px solid var(--border); }
    .ledger-net { border-bottom: 0; }

    .lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .lines, .lines tbody, .lines tfoot { display: block; }
    .lines tr.line {
        display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
        padding: 1rem; border-bottom: 1px solid var(--border);
    }
    .lines tr.line td { display: block; padding: 0; border: 0; text-align: left; }
    .lines tr.line td::before {
        content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .2rem;
    }
    .lines tr.line td.row-action { grid-column: 1 / -1; width: auto; text-align: right; }
    .lines tr.line td.row-action::before { content: none; }
    .lines tr.line td[data-label="Service"],
    .lines tr.line td[data-label="Expense"],
    .lines tr.line td[data-label="Description"] { grid-column: 1 / -1; }
    .lines td[data-label="Service"] .input,
    .lines td[data-label="Expense"] .input,
    .lines td[data-label="Description"] .input { min-width: 0; }
    .lines .num, .lines .num .field-error { text-align: left; }
    .lines .input.num { text-align: left; }
    .lines tfoot tr { display: flex; justify-content: space-between; padding: .8rem 1rem; background: #f8fafc; border-top: 1px solid var(--border-strong); }
    .lines tfoot th, .lines tfoot td { display: block; padding: 0; border: 0; background: none; }
    .lines tfoot td:empty { display: none; }
    .lines tfoot th { text-align: left; }
    .lines tfoot th[colspan] { flex: 1; }
    .form-actions .btn { flex: 1 1 100%; }
    .push-right { margin-left: 0; }
}

/* ----------------------------------------------------------------- Print */

@media print {
    @page { margin: 16mm 14mm; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .sidebar, .topbar, .sidebar-backdrop, .toast-region, .skip-link,
    .no-print, .page-actions, .comment-form, .crumbs, .form-actions { display: none !important; }
    .shell { display: block; }
    .content { max-width: none; padding: 0; }
    .print-only { display: block; }
    .print-title { border-bottom: 2px solid #000; padding-bottom: .4rem; margin-bottom: 1rem; }
    .print-title h1 { font-size: 20pt; text-transform: uppercase; letter-spacing: .04em; }
    .print-kicker { margin: 0; font-size: 10pt; color: #444; }
    .card, .ledger, .stat { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
    .card { padding: .6rem .8rem; margin-bottom: .8rem; }
    .card-flush { padding: 0; }
    .data th, .data td { padding: .35rem .6rem; border-bottom: 1px solid #ccc; }
    .data thead th, .data tfoot th, .data tfoot td { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ledger { grid-template-columns: repeat(3, 1fr); }
    .ledger-item { padding: .6rem .8rem; }
    .ledger-value, .ledger-net .ledger-value { font-size: 15pt; color: #000 !important; }
    .ledger-net { background: #fff !important; color: #000; border-left: 1px solid #999; }
    .ledger-net .ledger-label { color: #333; }
    .ledger-net .ledger-value { border-bottom-color: #000; }
    .badge { border: 1px solid #666; background: #fff !important; color: #000 !important; }
    .comment { background: #fff; border-left: 3px solid #666; break-inside: avoid; }
    a { color: #000; text-decoration: none; }
}