/* assets/css/ai-reports-theme.css
   Procurement-system-matching restyle — scoped strictly to the AI Reports tab.
   Scope root: #tab-ai-reports (this tab opens no separate modals of its own —
   the whole feature lives inside the tab section).
   Loaded AFTER network-admin.css / project-templates.css / task-tracker-theme.css
   — same-specificity rules here win by source order, no !important needed.
   External file — no inline <style> — required by this site's CSP (no
   'unsafe-inline' in style-src). See assets/js/network-admin.js's
   applyDynamicStyles for the one CSP-safe way to set styles dynamically
   (data-style -> el.style.cssText via JS), used sparingly below in favor of
   real classes.

   Tokens mirror web/procurement/src/index.css's design-token set (Tailwind +
   CSS custom properties: --color-bg/surface/ink/accent/ok/warn/bad, the
   radius scale, --shadow-card, Sora/Inter fonts) so this tab reads as part of
   the same product family as the Procurement React app, even though it stays
   on this app's vanilla HTML/CSS/JS stack rather than pulling a second
   framework in for one tab — same approach already used for the Task
   Tracker's own scoped theme (assets/css/task-tracker-theme.css), just a
   different reference design. */

#tab-ai-reports {
    --air-bg: #f6f7fb;
    --air-surface: #ffffff;
    --air-surface-alt: #f0f2f8;
    --air-ink: #1a2036;
    --air-ink-soft: #5b6280;
    --air-line: #e2e5f0;
    --air-accent: #4f5fe0;
    --air-accent-ink: #3a46b8;
    --air-accent-pale: #eef0fd;
    --air-ok: #1f9d63;      --air-ok-bg: #e6f7ee;
    --air-warn: #b8790a;    --air-warn-bg: #fdf1de;
    --air-bad: #c23b3b;     --air-bad-bg: #fbe9e9;
    --air-radius-sm: 8px; --air-radius: 10px; --air-radius-lg: 16px;
    --air-shadow: 0 1px 2px rgba(20,24,50,.06), 0 8px 24px rgba(20,24,50,.06);
    --air-font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --air-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

    background: var(--air-bg);
    margin: -24px -32px -80px;
    padding: 28px 32px 80px;
    font-family: var(--air-font-body);
    color: var(--air-ink);
}
#tab-ai-reports h1, #tab-ai-reports h2, #tab-ai-reports h3 {
    font-family: var(--air-font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--air-ink);
}

/* ── Page header ── */
.air-page-head { margin-bottom: 20px; max-width: 1280px; }
.air-page-head h1 { font-size: 22px; margin: 0 0 4px; }
.air-page-head p { font-size: 13px; color: var(--air-ink-soft); margin: 0; max-width: 640px; }

/* ── Cards: .panel/.panel-head are shared app-wide, scope the override here ── */
#tab-ai-reports .panel {
    background: var(--air-surface); border: 1px solid var(--air-line); border-radius: var(--air-radius-lg);
    box-shadow: var(--air-shadow); margin-bottom: 20px; max-width: 1280px;
}
#tab-ai-reports .panel-head { border-bottom: 1px solid var(--air-line); padding: 18px 22px; }
#tab-ai-reports .panel-head h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
#tab-ai-reports .panel-head p { font-size: 12.5px; color: var(--air-ink-soft); margin-top: 4px; line-height: 1.5; }

/* ── Form layout ── */
.air-body { padding: 20px 22px; }
.air-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.air-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.air-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.air-field:last-child { margin-bottom: 0; }
.air-label { display: flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--air-ink-soft); }

.air-step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border-radius: 50%; background: var(--air-accent-pale); color: var(--air-accent-ink);
    font-size: 9.5px; font-weight: 800; margin-right: 6px; flex-shrink: 0;
}

.air-input, .air-select, .air-textarea {
    width: 100%; border: 1px solid var(--air-line); border-radius: var(--air-radius-sm);
    padding: 9px 12px; font-size: 13.5px; font-family: var(--air-font-body); color: var(--air-ink);
    background: var(--air-surface); transition: border-color .15s, box-shadow .15s;
}
.air-input:focus, .air-select:focus, .air-textarea:focus {
    outline: none; border-color: var(--air-accent); box-shadow: 0 0 0 3px var(--air-accent-pale);
}
.air-textarea { resize: vertical; line-height: 1.5; font-family: var(--air-font-body); }
.air-input[type="file"] { padding: 6px 10px; }

/* ── Buttons ── */
.air-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--air-radius-sm); padding: 9px 16px; font-size: 13px; font-weight: 600;
    font-family: var(--air-font-body); cursor: pointer; border: 1px solid transparent;
    transition: background .15s, opacity .15s, color .15s; white-space: nowrap;
}
.air-btn:disabled { opacity: .55; cursor: not-allowed; }
.air-btn-primary { background: var(--air-accent); color: #fff; }
.air-btn-primary:hover:not(:disabled) { background: var(--air-accent-ink); }
.air-btn-secondary { background: var(--air-surface); color: var(--air-ink); border-color: var(--air-line); }
.air-btn-secondary:hover:not(:disabled) { background: var(--air-surface-alt); }
.air-btn-danger { background: var(--air-bad-bg); color: var(--air-bad); border-color: var(--air-bad-bg); }
.air-btn-danger:hover:not(:disabled) { background: var(--air-bad); color: #fff; }
.air-btn-sm { padding: 5px 11px; font-size: 11.5px; border-radius: 6px; }

.air-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.air-msg-ok  { font-size: 12.5px; color: var(--air-ok);  font-weight: 600; display: none; }
.air-msg-err { font-size: 12.5px; color: var(--air-bad); font-weight: 600; display: none; }

/* ── Table ── */
#tab-ai-reports .table-wrap { border: 1px solid var(--air-line); border-radius: var(--air-radius); overflow: hidden; margin: 0 22px 20px; }
#tab-ai-reports table.reg-table, #tab-ai-reports table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#tab-ai-reports .reg-table thead tr, #tab-ai-reports .data-table thead tr { background: var(--air-surface-alt); }
#tab-ai-reports .reg-table th, #tab-ai-reports .data-table th {
    padding: 10px 14px; text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--air-ink-soft); border-bottom: 1px solid var(--air-line);
}
#tab-ai-reports .reg-table td, #tab-ai-reports .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--air-line); vertical-align: middle; color: var(--air-ink); }
#tab-ai-reports .reg-table tr:last-child td, #tab-ai-reports .data-table tr:last-child td { border-bottom: none; }
#tab-ai-reports .reg-table tbody tr:hover td, #tab-ai-reports .data-table tbody tr:hover td { background: var(--air-surface-alt); }
#tab-ai-reports .tbl-empty { text-align: center; color: var(--air-ink-soft); font-size: 13px; padding: 32px 16px; }

.air-cell-title { font-weight: 600; color: var(--air-ink); }
.air-cell-sub   { display: block; font-size: 11px; color: var(--air-ink-soft); margin-top: 2px; }
.air-cell-meta  { font-size: 12px; color: var(--air-ink-soft); }
.air-cell-mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--air-ink-soft); }
.air-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.air-row-archived td { opacity: .65; }

/* ── Badges/pills ── */
.air-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.air-badge-ok      { background: var(--air-ok-bg);      color: var(--air-ok); }
.air-badge-warn    { background: var(--air-warn-bg);    color: var(--air-warn); }
.air-badge-bad     { background: var(--air-bad-bg);     color: var(--air-bad); }
.air-badge-accent  { background: var(--air-accent-pale);color: var(--air-accent-ink); }
.air-badge-neutral { background: var(--air-surface-alt);color: var(--air-ink-soft); }

/* ── Trash / secondary section toggles ── */
.air-collapsible { display: none; }
.air-collapsible.air-open { display: block; }

/* ── Section-generation completeness heads-up (Phase 4 Item 4: which sections
   will hit the "Data was not available" fallback, computed by the backend
   after Stage A but previously never surfaced to the report author) ── */
.air-completeness { margin: 0 22px 18px; padding: 14px 16px; border: 1px solid var(--air-line); border-radius: var(--air-radius); background: var(--air-surface-alt); display: none; }
.air-completeness.air-open { display: block; }
.air-completeness-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--air-ink-soft); margin-bottom: 10px; }
.air-completeness-list { display: flex; flex-wrap: wrap; gap: 8px; }
.air-completeness-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--air-line); background: var(--air-surface); color: var(--air-ink); }
.air-completeness-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.air-completeness-dot.ok   { background: var(--air-ok); }
.air-completeness-dot.warn { background: var(--air-warn); }

/* ── Preview panel ── */
.air-preview-wrap { display: none; padding: 20px 22px; }
.air-preview-wrap.air-open { display: flex; flex-direction: column; }
.air-preview-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--air-ink); margin-bottom: 12px; }
.air-report-id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--air-accent-ink); background: var(--air-accent-pale); padding: 3px 8px; border-radius: 6px; }
.air-preview-frame { display: block; width: 100%; min-height: 600px; border: 1px solid var(--air-line); border-radius: var(--air-radius); background: #fff; margin-top: 14px; }

/* ── Upload dropzone-style panel ── */
.air-upload-card { background: var(--air-surface-alt); border: 1px dashed var(--air-line); border-radius: var(--air-radius); padding: 16px; margin-bottom: 18px; }
.air-upload-card-title { font-size: 12.5px; font-weight: 700; color: var(--air-ink); margin-bottom: 12px; }