/* AppSite Invoice — module-specific styles. Shared system from layout.css */

:root {
  --accent:      #0f766e;
  --accent-dark: #115e59;
  --soft:        #edf7f6;
  --primary:     var(--accent);
  --primary-hover: var(--accent-dark);
  --primary-light: var(--soft);
}

body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 20px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.workspace { padding: 12px; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.layout { flex: 1; min-height: 0; }
.order-list { overflow-y: auto; }
.order-list-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 8px; border-bottom:1px solid var(--line,#d9dee7); flex-shrink:0; }
.order-list-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

/* order-editor must be a flex column so tab panels can scroll inside */
.order-editor { overflow: hidden !important; display:flex !important; flex-direction:column !important; flex:1; min-height:0; }

/* Tab bar — must not scroll, must not be sticky (parent is overflow:hidden) */
#invoiceTabs { position:static !important; flex-shrink:0; }

/* Tab panel base */
.inv-tab-panel { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.inv-preview-panel { padding:0; background:var(--bg,#f4f6f9); }

/* ── Customer search ─────────────────────────────────────────────────────── */
.customer-search-wrap { position:relative; }
.customer-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.12); z-index:300; max-height:300px; overflow-y:auto;
}
.customer-dropdown-row { padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line); }
.customer-dropdown-row:last-child { border-bottom:none; }
.customer-dropdown-row:hover, .customer-dropdown-row.active { background:var(--soft); }
.cdr-name { font-size:13px; font-weight:600; color:var(--ink); }
.cdr-meta { font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdr-empty { padding:12px; text-align:center; color:var(--muted); font-size:13px; }

.customer-card { border:1px solid var(--line); border-radius:8px; background:var(--soft); padding:12px; min-height:60px; color:var(--muted); font-size:13px; }
.customer-card strong { display:block; color:var(--ink); font-size:14px; margin-bottom:2px; }
.add-customer-form { border:1px solid var(--line); border-radius:8px; background:var(--soft); padding:12px; display:flex; flex-direction:column; gap:10px; }

/* ── Service order / parts sections ─────────────────────────────────────── */
#serviceOrderSection, #invoicePartsSection { display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:8px; padding:12px; background:var(--soft); }
#serviceOrderSection[hidden], #invoicePartsSection[hidden] { display:none; }
.so-labour-readonly { font-size:13px; color:var(--muted); }

.inv-part-line { display:grid; grid-template-columns:1fr 64px 92px 36px; gap:6px; align-items:center; margin-bottom:6px; }
.ipl-remove { padding:0; min-width:36px; font-size:16px; }

/* SO preview box (inside preview tab) */
.so-preview-box { border:1px solid #e5e7eb; border-radius:6px; padding:16px 18px; }
.so-preview-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.so-preview-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#667085; }
.so-preview-wo { font-weight:700; font-size:15px; }
.so-meta { font-size:13px; color:#4b5563; margin-bottom:3px; }
.so-preview-table { width:100%; border-collapse:collapse; margin:8px 0; font-size:13px; }
.so-preview-table th { color:#667085; font-size:11px; text-transform:uppercase; border-bottom:1px solid #e5e7eb; padding:5px 0; text-align:left; }
.so-preview-table th:not(:first-child), .so-preview-table td:not(:first-child) { text-align:right; }
.so-preview-table td { padding:5px 0; border-bottom:1px solid #f3f4f6; }
.so-labour-line { font-size:13px; color:#374151; padding:6px 0; border-top:1px solid #e5e7eb; margin-top:4px; }
.so-section-total { text-align:right; font-weight:700; font-size:13px; padding-top:6px; }

/* ── Invoice preview (rendered invoice document) ─────────────────────────── */
.inv-preview-panel .invoice { margin:16px auto; }
.invoice {
  max-width:860px; min-height:980px; margin:0 auto;
  background:#fff; color:#111827;
  border:1px solid var(--line); border-radius:4px; padding:44px;
}
.invoice-header, .invoice-meta, .invoice-total-row, .invoice-party-grid { display:flex; justify-content:space-between; gap:28px; }
.invoice-title { font-size:34px; font-weight:800; }
.invoice-subtitle, .invoice-muted { color:#667085; }
.invoice-box { margin-top:28px; }
.invoice-party-grid > div { flex:1; }
.invoice table { width:100%; border-collapse:collapse; margin-top:28px; }
.invoice th, .invoice td { border-bottom:1px solid #e5e7eb; padding:11px 0; text-align:left; vertical-align:top; }
.invoice th:not(:first-child), .invoice td:not(:first-child) { text-align:right; }
.totals { margin:24px 0 0 auto; width:min(340px,100%); }
.invoice-total-row { padding:7px 0; border-bottom:1px solid #e5e7eb; }
.invoice-total-row.grand { font-size:20px; font-weight:800; border-bottom:0; }
.notes { margin-top:34px; white-space:pre-wrap; }
.invoice-number-block { display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.invoice-qr-box { display:inline-flex; flex-direction:column; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:6px; padding:10px 12px; background:#fff; }
.invoice-qr { display:block; width:88px; height:88px; }
.invoice-qr-label { font-size:11px; font-weight:700; color:#111827; letter-spacing:.04em; text-align:center; }

/* ── Invoice list items in sidebar ──────────────────────────────────────── */
.inv-list-item { padding:10px 14px; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px; }
.inv-list-item:hover { background:var(--bg); }
.inv-list-item.active { background:var(--soft); border-left:3px solid var(--accent); }
.inv-list-item .inv-num { font-weight:600; color:var(--ink); }
.inv-list-item .inv-sub { font-size:11px; color:var(--muted); margin-top:1px; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }

@media (max-width:620px) {
  .form-grid.two { grid-template-columns:1fr; }
}

@media print {
  body { background:#fff; }
  header.topbar, #statusBar, .order-list, .wo-tabs, #ssoBanner { display:none !important; }
  .workspace, .layout, .order-editor { display:block !important; padding:0; }
  .invoice { border:0; border-radius:0; max-width:none; min-height:auto; padding:24px; }
}