/* ============================================================================
   Shared invoice-form styles — used by AddInvoice / InvoiceView / DocPreview.
   Each page keeps only the rules unique to it; everything cross-page lives
   here so colors, paddings, sidebar widths are tuned in one place.

   Page-specific styles still live inline in each .razor's <style> block.
   ========================================================================== */

/* ── Two-column layout (main + sticky sidebar) ───────────────────────────
   minmax(0, 1fr) lets the main column actually shrink below the natural
   width of its widest descendant (the line-items table). Sidebar shrinks
   from 320 → 280 in tight windows before stacking at the breakpoint. */
.inv-layout       {
    /* Flex (not grid) so each column sizes to its OWN content height.
       Grid shared a single row track between the two columns, which
       meant whenever the sidebar was taller than the form column the
       form column had a visible empty area below its last card —
       the "white space below the Line Items / Additional Info toggle"
       reviewers kept circling. With flex + align-items: flex-start,
       columns are independent: the form column ends at its last card,
       the sidebar ends at its last card, no shared row stretching. */
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    min-width: 0;
}
.inv-layout > *   { min-width: 0; }
.inv-layout > :first-child { flex: 1 1 0; }                 /* form column — fills remaining width */
.inv-sidebar      { flex: 0 0 320px; min-width: 280px; position: sticky; top: 1.25rem; }
@media (max-width: 1023px) {
    .inv-layout    { flex-direction: column; }
    .inv-sidebar   { flex: 1 1 auto; position: static; }
}

/* ── Card sections (each logical group of fields) ──────────────────────── */
.inv-section      {
    background: var(--bg-card,#fff);
    border: 1px solid var(--border-color,#e2e8f0);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.inv-section:hover { box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04); }

.inv-section-title{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #0f172a;
    margin: -0.25rem -0.25rem 1rem;
    padding: .55rem .75rem;
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f6fa 100%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The leading icon inside an inv-section-title becomes a badge so each
   section is instantly identifiable (same visual language as DocSectionRenderer). */
.inv-section-title > .bi:first-child {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    border-radius: 7px;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(79, 70, 229, .08);
}

/* ── Line-items table base (each page can override per-column widths) ──── */
.line-table       {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    background: #fff;
}
.line-table th    {
    padding: 9px 12px;
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
    text-align: left;
    border-bottom: 1px solid var(--border-color,#e2e8f0);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.line-table td    {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}
.line-table tbody tr:nth-child(even) td { background: #fafbfd; }
.line-table tbody tr:hover td           { background: #eef2ff; }
.line-table tbody tr:last-child td      { border-bottom: none; }

/* Scrollable wrapper for line-items / KV tables. Visible scrollbar so
   reviewers know there's content off-screen. Same chrome on every page
   that hosts a wide grid (Documents review, Finance preview, Edit). */
.line-scroll, .inv-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color,#e2e8f0);
    border-radius: 10px;
    background: #fff;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}
.line-scroll::-webkit-scrollbar,
.inv-scroll::-webkit-scrollbar              { height: 10px; }
.line-scroll::-webkit-scrollbar-track,
.inv-scroll::-webkit-scrollbar-track        { background: #f1f5f9; border-radius: 4px; }
.line-scroll::-webkit-scrollbar-thumb,
.inv-scroll::-webkit-scrollbar-thumb        { background: #cbd5e1; border-radius: 4px; }
.line-scroll::-webkit-scrollbar-thumb:hover,
.inv-scroll::-webkit-scrollbar-thumb:hover  { background: #94a3b8; }

/* ── Summary card rows (subtotal/tax/total ladder) ─────────────────────── */
.summary-row       { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; }
.summary-row.total { font-size:16px; font-weight:700; border-top:2px solid var(--border-color,#e2e8f0); margin-top:4px; padding-top:10px; color:var(--brand-primary,#4f46e5); }

/* ── Invoice-status pill (Draft / Pending / Approved / Paid / Cancelled) ─ */
.status-pill      { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.status-Draft     { background:#f1f5f9; color:#64748b; }
.status-Pending   { background:#fef3c7; color:#92400e; }
.status-Approved  { background:#d1fae5; color:#065f46; }
.status-Paid      { background:#dbeafe; color:#1e40af; }
.status-Cancelled { background:#fee2e2; color:#991b1b; }

/* ── Responsive: collapse the sidebar onto the main column ───────────────
   Triggered at 1024px (tablet-portrait). Above that the sidebar stays on
   the right (sticky), where it belongs — Tax Breakdown / Summary is the
   reviewer's primary scanning surface and shouldn't move below the form
   on a typical desktop. The 320px sidebar shrinks toward 280px in tighter
   side-nav-open widths before the column-stack kicks in at 1023px. The
   stack itself is handled by the flex `flex-direction: column` rule
   alongside the .inv-layout definition above; nothing left to do here. */

/* ── Print: hide the sidebar + chrome marked .no-print ─────────────────── */
@media print {
    .inv-sidebar, .no-print { display:none !important; }
    .inv-layout              { grid-template-columns:1fr; }
    .inv-section             { break-inside:avoid; }
}