/* ═══════════════════════════════════════════════════════════════════════════
   FRQ Invoice Tool — Frontend Styles
   Covers: Guest view, Builder UI, Live Invoice Preview, History panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --inv-navy:    #1B2035;
    --inv-gold:    #C9A035;
    --inv-gold-lt: #F0C040;
    --inv-white:   #FFFFFF;
    --inv-light:   #F8F9FA;
    --inv-border:  #E2E8F0;
    --inv-text:    #2D3748;
    --inv-muted:   #718096;
    --ui-radius:   10px;
    --ui-shadow:   0 4px 24px rgba(0,0,0,0.09);
}

/* ── Shared wrappers ─────────────────────────────────────────────────────── */
.frq-inv-guest-wrap,
.frq-inv-builder-wrap {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--inv-text);
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
}
.frq-inv-denied {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--ui-radius);
    padding: 20px;
    text-align: center;
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GUEST VIEW
   ═══════════════════════════════════════════════════════════════════════════ */
.frq-inv-guest-wrap { position: relative; }

.frq-inv-sample-label {
    font-size: 13px;
    color: var(--inv-muted);
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.frq-inv-sample-blur {
    filter: blur(4px);
    opacity: .55;
    pointer-events: none;
    user-select: none;
    transform: scale(.98);
}

/* ── Overlay Card ────────────────────────────────────────────────────────── */
.frq-inv-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.frq-inv-overlay-card {
    background: var(--inv-white);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    padding: 48px 40px;
    text-align: center;
    max-width: 440px;
    width: 90%;
}
.frq-inv-overlay-icon { font-size: 48px; margin-bottom: 12px; }
.frq-inv-overlay-card h2 { font-size: 22px; color: var(--inv-navy); margin: 0 0 12px; }
.frq-inv-overlay-card p { color: var(--inv-muted); font-size: 14px; margin: 0 0 24px; line-height: 1.6; }
.frq-inv-login-btn {
    display: inline-block;
    background: var(--inv-gold);
    color: var(--inv-navy) !important;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: background .2s;
}
.frq-inv-login-btn:hover { background: var(--inv-gold-lt); }
.frq-inv-register { margin-top: 16px; font-size: 13px; color: var(--inv-muted); }
.frq-inv-register a { color: var(--inv-gold); text-decoration: none; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUILDER UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page header + tabs */
.frq-inv-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.frq-inv-page-header h2 { margin: 0; font-size: 22px; color: var(--inv-navy); }
.frq-inv-page-tabs { display: flex; gap: 8px; }
.frq-page-tab {
    padding: 9px 20px; border-radius: 50px; border: 2px solid var(--inv-border);
    background: var(--inv-white); cursor: pointer; font-size: 14px; font-weight: 600;
    color: var(--inv-muted); transition: all .2s;
}
.frq-page-tab.active, .frq-page-tab:hover {
    background: var(--inv-navy); color: var(--inv-white); border-color: var(--inv-navy);
}

/* Panel show/hide */
.frq-panel { display: none; }
.frq-panel.active { display: block; }

/* Notification */
.frq-notify {
    padding: 12px 16px; border-radius: var(--ui-radius); font-size: 14px;
    font-weight: 600; margin-bottom: 16px;
}
.frq-notify.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.frq-notify.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.frq-notify.hidden  { display: none; }

/* Edit banner */
.frq-edit-banner {
    background: #fffbeb; border: 1px solid var(--inv-gold);
    border-radius: var(--ui-radius); padding: 10px 16px;
    font-size: 14px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.frq-edit-banner.hidden { display: none; }
.frq-link-btn {
    background: none; border: none; color: var(--inv-gold);
    font-weight: 700; cursor: pointer; font-size: 13px;
}

/* 2-column builder layout */
.frq-builder-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 960px) {
    .frq-builder-layout { grid-template-columns: 1fr; }
}

/* Form column */
.frq-form-col { display: flex; flex-direction: column; gap: 12px; }

/* Preview column */
.frq-preview-col { position: relative; }
.frq-preview-sticky {
    position: sticky; top: 80px;
    background: var(--inv-light); border-radius: var(--ui-radius);
    border: 1px solid var(--inv-border); overflow: hidden;
}
.frq-preview-header {
    background: var(--inv-navy); color: var(--inv-white);
    padding: 12px 16px; display: flex;
    justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 700;
}
.frq-preview-hint { font-weight: 400; opacity: .7; font-size: 12px; }
.frq-preview-scroll {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 16px;
}

/* Form sections */
.frq-form-section {
    background: var(--inv-white); border-radius: var(--ui-radius);
    border: 1px solid var(--inv-border); overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.frq-section-title {
    padding: 13px 16px; font-weight: 700; font-size: 14px;
    cursor: pointer; display: flex; justify-content: space-between;
    background: var(--inv-light); color: var(--inv-navy);
    user-select: none; border-bottom: 1px solid var(--inv-border);
}
.frq-section-title:hover { background: #eef2ff; }
.frq-toggle-arrow { font-size: 12px; transition: transform .2s; }
.frq-section-title.collapsed .frq-toggle-arrow { transform: rotate(-90deg); }
.frq-section-body { padding: 16px; display: block; }
.frq-section-body.hidden { display: none; }

/* Form grid + fields */
.frq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .frq-form-grid { grid-template-columns: 1fr; } }
.frq-field { display: flex; flex-direction: column; gap: 4px; }
.frq-field-full { grid-column: 1 / -1; }
.frq-field label { font-size: 12px; font-weight: 600; color: var(--inv-muted); text-transform: uppercase; letter-spacing: .04em; }
.frq-field input,
.frq-field select,
.frq-field textarea {
    padding: 9px 12px; border-radius: 7px; border: 1px solid var(--inv-border);
    font-size: 14px; color: var(--inv-text); background: var(--inv-white);
    transition: border-color .2s; width: 100%; box-sizing: border-box;
}
.frq-field input:focus,
.frq-field select:focus { outline: none; border-color: var(--inv-gold); box-shadow: 0 0 0 3px rgba(201,160,53,.15); }
.frq-field-hint { font-size: 11px; color: var(--inv-muted); margin: 4px 0 0; }

/* Photo upload */
.frq-photo-upload-row { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.frq-photo-preview {
    width: 70px; height: 70px; border-radius: 50%;
    border: 3px solid var(--inv-gold); background: var(--inv-light);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.frq-photo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.frq-photo-placeholder-icon { font-size: 28px; }
.frq-photo-actions { display: flex; flex-direction: column; gap: 8px; }

/* Line items */
.frq-item-row {
    display: grid; grid-template-columns: 2fr 1.5fr 60px 100px 30px;
    gap: 6px; align-items: center; margin-bottom: 8px;
}
.frq-item-row input { padding: 7px 10px; border: 1px solid var(--inv-border); border-radius: 6px; font-size: 13px; }
.frq-item-row input:focus { outline: none; border-color: var(--inv-gold); }
.frq-item-remove {
    background: none; border: none; color: #e53e3e;
    cursor: pointer; font-size: 18px; line-height: 1; padding: 4px;
}
.frq-items-header {
    display: grid; grid-template-columns: 2fr 1.5fr 60px 100px 30px;
    gap: 6px; font-size: 11px; font-weight: 700; color: var(--inv-muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
@media (max-width: 600px) {
    .frq-item-row, .frq-items-header { grid-template-columns: 1fr 1fr; }
}

/* Summary points */
.frq-point-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.frq-point-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--inv-border); border-radius: 6px; font-size: 13px; }
.frq-point-row input:focus { outline: none; border-color: var(--inv-gold); }
.frq-point-remove { background: none; border: none; color: #e53e3e; cursor: pointer; font-size: 18px; }

/* Buttons */
.frq-btn {
    padding: 11px 22px; border-radius: 50px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700; transition: all .2s; display: inline-flex;
    align-items: center; gap: 6px;
}
.frq-btn-primary  { background: var(--inv-navy); color: var(--inv-white); }
.frq-btn-primary:hover { background: #2d3a5f; }
.frq-btn-gold     { background: var(--inv-gold); color: var(--inv-navy); }
.frq-btn-gold:hover { background: var(--inv-gold-lt); }
.frq-btn-outline  { background: transparent; color: var(--inv-navy); border: 2px solid var(--inv-border); }
.frq-btn-outline:hover { border-color: var(--inv-navy); }
.frq-btn-danger   { background: #fee2e2; color: #991b1b; }
.frq-btn-danger:hover { background: #fca5a5; }
.frq-btn-sm       { padding: 7px 14px; font-size: 13px; }
.frq-action-bar   { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }

/* History panel */
.frq-history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.frq-history-header h3 { margin: 0; font-size: 18px; color: var(--inv-navy); }
.frq-history-loading { text-align: center; padding: 40px; color: var(--inv-muted); }
.frq-history-empty   { text-align: center; padding: 60px 20px; color: var(--inv-muted); }
.frq-history-list.hidden, .frq-history-empty.hidden { display: none; }
.frq-history-card {
    background: var(--inv-white); border: 1px solid var(--inv-border);
    border-radius: var(--ui-radius); padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow .2s;
}
.frq-history-card:hover { box-shadow: var(--ui-shadow); }
.frq-history-card-left h4 { margin: 0 0 4px; font-size: 15px; color: var(--inv-navy); }
.frq-history-card-left p  { margin: 0; font-size: 12px; color: var(--inv-muted); }
.frq-history-card-actions { display: flex; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   INVOICE DOCUMENT (used in preview + guest sample)
   ═══════════════════════════════════════════════════════════════════════════ */
.frq-invoice-doc {
    background: var(--inv-white);
    width: 100%;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    color: var(--inv-text);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* ── Invoice Header ─────────────────────────────────────────────────────── */
.inv-header {
    display: flex; align-items: stretch; padding: 20px 22px;
    border-bottom: 3px solid var(--inv-gold); gap: 16px; background: var(--inv-white);
}
.inv-header-left  { display: flex; gap: 14px; align-items: center; flex: 1; }
.inv-header-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.inv-header-divider { width: 1px; background: var(--inv-border); flex-shrink: 0; align-self: stretch; margin: 0 8px; }

/* Photo circle */
.inv-photo-wrap { flex-shrink: 0; }
.inv-photo-circle {
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid var(--inv-gold); overflow: hidden;
    background: #e2e8f0; display: flex; align-items: center; justify-content: center;
}
.inv-photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.inv-photo-placeholder { font-size: 26px; }

/* Sender info */
.inv-sender-name  { font-size: 18px; font-weight: 800; color: var(--inv-navy); margin: 0 0 2px; }
.inv-sender-title { font-size: 11px; color: var(--inv-gold); font-weight: 600; margin: 0 0 6px; }
.inv-sender-contacts p { margin: 2px 0; font-size: 10px; color: #555; display: flex; align-items: center; gap: 4px; }
.inv-icon { font-size: 10px; }

/* Invoice title (right) */
.inv-title-word { font-size: 32px; font-weight: 900; color: var(--inv-navy); margin: 0 0 8px; letter-spacing: -.5px; }
.inv-id-block {
    background: var(--inv-navy); color: var(--inv-white);
    border-radius: 8px; padding: 10px 14px; text-align: right; min-width: 140px;
}
.inv-id-label   { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--inv-gold); margin-bottom: 2px; }
.inv-id-number  { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.inv-id-date    { font-size: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* ── Info Row ───────────────────────────────────────────────────────────── */
.inv-info-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 2px solid var(--inv-border);
}
.inv-info-col { border-right: 1px solid var(--inv-border); }
.inv-info-col:last-child { border-right: none; }
.inv-section-hd {
    background: var(--inv-navy); color: var(--inv-white);
    padding: 8px 12px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    display: flex; align-items: center; gap: 6px;
}
.inv-section-body { padding: 10px 12px; }

/* Bill To */
.inv-client-name { font-size: 12px; font-weight: 700; color: var(--inv-navy); margin: 0 0 4px; display: flex; align-items: center; gap: 4px; }
.inv-section-body p { margin: 2px 0; font-size: 10px; color: #555; display: flex; align-items: center; gap: 4px; }

/* KV tables (project/invoice details) */
.inv-kv-table { width: 100%; border-collapse: collapse; }
.inv-kv-table td { padding: 2px 4px; font-size: 10px; vertical-align: top; }
.inv-kv-table td:first-child { font-weight: 600; color: var(--inv-navy); white-space: nowrap; width: 90px; }
.inv-kv-table td:nth-child(2) { color: var(--inv-muted); width: 8px; }

/* Status badge */
.inv-status-badge {
    display: inline-block; padding: 2px 8px;
    border-radius: 4px; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border: 1.5px solid currentColor;
}
.inv-status-unpaid  { color: #e53e3e; background: #fff5f5; }
.inv-status-paid    { color: #38a169; background: #f0fff4; }
.inv-status-partial { color: #d97706; background: #fffbeb; }
.inv-status-overdue { color: #9b2c2c; background: #fff5f5; }

/* ── Items Table ────────────────────────────────────────────────────────── */
.inv-items-table {
    width: 100%; border-collapse: collapse; margin: 0;
}
.inv-items-table thead tr {
    background: var(--inv-navy); color: var(--inv-gold);
}
.inv-items-table th {
    padding: 8px 10px; font-size: 9px; text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700; text-align: left;
}
.inv-items-table td {
    padding: 7px 10px; font-size: 10px; border-bottom: 1px solid var(--inv-border);
}
.inv-items-table tbody tr:nth-child(even) { background: #FAFBFC; }
.inv-items-table tbody tr:hover { background: #F0F4FF; }
.inv-td-num { text-align: center; width: 24px; color: var(--inv-muted); }
.inv-td-desc { font-weight: 600; color: var(--inv-navy); }
.inv-td-price, .inv-td-amount { text-align: right; font-size: 10px; }
.inv-td-qty { text-align: center; }

/* ── Bottom Row ─────────────────────────────────────────────────────────── */
.inv-bottom-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; padding: 16px 20px; align-items: start;
}
.inv-currency-note { font-size: 9px; color: var(--inv-muted); margin: 0 0 10px; }

/* Project Summary */
.inv-summary-box { background: var(--inv-light); border-radius: 6px; overflow: hidden; }
.inv-summary-hd  {
    background: var(--inv-navy); color: var(--inv-white);
    padding: 7px 12px; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.inv-summary-list { list-style: none; margin: 0; padding: 10px 12px; }
.inv-summary-list li { font-size: 10px; margin-bottom: 4px; color: #444; }

/* Totals */
.inv-totals-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.inv-totals-row td {
    padding: 6px 12px; font-size: 10px; border-bottom: 1px solid var(--inv-border);
}
.inv-totals-row td:last-child { text-align: right; font-weight: 600; }
.inv-totals-due {
    background: var(--inv-gold); color: var(--inv-navy);
}
.inv-totals-due td {
    padding: 8px 12px; font-size: 12px; font-weight: 800; border: none;
}
.inv-totals-due td:last-child { text-align: right; }

/* Payment box */
.inv-payment-box {
    border: 1.5px solid var(--inv-border); border-radius: 8px; overflow: hidden;
}
.inv-payment-hd {
    background: var(--inv-navy); color: var(--inv-white);
    padding: 7px 12px; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.inv-payment-body { display: flex; gap: 10px; padding: 10px 12px; align-items: center; }
.inv-payment-icon { font-size: 24px; }
.inv-payment-details p { margin: 2px 0; font-size: 10px; }
.inv-payment-details strong { color: var(--inv-navy); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.inv-footer {
    background: var(--inv-navy); text-align: center; padding: 14px 20px;
}
.inv-footer-heart { font-size: 20px; margin-bottom: 4px; }
.inv-footer-msg {
    font-size: 14px; font-weight: 700; font-style: italic;
    color: var(--inv-gold); margin: 0 0 3px;
}
.inv-footer-sub { font-size: 10px; color: rgba(255,255,255,.7); margin: 0; }

/* ─── PDF Off-screen clone overrides ─────────────────────────────────── */
#frq-pdf-offscreen {
    font-family: Arial, 'Helvetica Neue', sans-serif !important;
}
#frq-pdf-offscreen .frq-invoice-doc {
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 794px !important;
    font-size: 11px !important;
}
/* Force solid backgrounds (some browsers strip them in html2canvas) */
#frq-pdf-offscreen .inv-header,
#frq-pdf-offscreen .inv-id-block,
#frq-pdf-offscreen .inv-section-hd,
#frq-pdf-offscreen .inv-items-table thead tr,
#frq-pdf-offscreen .inv-totals-due,
#frq-pdf-offscreen .inv-summary-hd,
#frq-pdf-offscreen .inv-payment-hd,
#frq-pdf-offscreen .inv-footer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}
/* Page break hints */
#frq-pdf-offscreen .inv-items-table  { page-break-inside: avoid; }
#frq-pdf-offscreen .inv-bottom-row   { page-break-inside: avoid; }
#frq-pdf-offscreen .inv-footer       { page-break-inside: avoid; }

/* ─── Legacy print (browser print-to-PDF fallback) ───────────────────── */
@media print {
    .frq-inv-builder-wrap { padding: 0; }
    .frq-invoice-doc { box-shadow: none; border-radius: 0; }
}