/* BuildProof - app-specific styles on top of the shared portal.css (linked first by index.html).
   The shared sheet is written against --navy / --amber tokens; BuildProof re-points them to its own
   identity (deep teal + safety orange) so every shared component picks the brand up unchanged. */

:root {
    --navy: #0E4D64;
    --navy-light: #186A87;
    --amber: #F26B1D;
    --amber-dark: #C4520F;
    --bg: #F4F7F7;
    --shadow: 0 1px 2px rgba(14, 77, 100, 0.06), 0 4px 16px rgba(14, 77, 100, 0.06);
    --sev-low: #2E7D32;
    --sev-medium: #E8A400;
    --sev-high: #E8730A;
    --sev-critical: #C62828;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #101719;
        --surface: #182226;
        --surface-2: #1F2C31;
    }
}

/* ---- new report form ---------------------------------------------------------------------- */
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (min-width: 640px) { .trade-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- photo grid ---------------------------------------------------------------------------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.photo-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.photo-card.selected { outline: 2px solid var(--amber); }
.photo-thumb { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--surface-2); display: block; }
.photo-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.5rem; }
.photo-card-body { padding: 0.45rem 0.55rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; }
.photo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.photo-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.photo-remove:disabled { opacity: 0.4; cursor: default; }

/* ---- upload progress ----------------------------------------------------------------------- */
.upload-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.upload-actions input[type="file"] { display: none; }
.upload-progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.upload-progress > span { display: block; height: 100%; background: var(--amber); transition: width 0.2s ease; }
.upload-progress.done > span { background: var(--success); }
.upload-progress.failed > span { background: var(--danger); }

/* ---- verdicts & findings ------------------------------------------------------------------- */
.verdict-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.verdict-pill.pass { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); }
.verdict-pill.issues { background: color-mix(in srgb, var(--sev-high) 16%, var(--surface)); color: var(--sev-high); }
.verdict-pill.needs-info { background: color-mix(in srgb, var(--sev-medium) 22%, var(--surface)); color: var(--amber-dark); }
.verdict-pill.failed { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.verdict-pill.pending, .verdict-pill.analysing { background: var(--surface-2); color: var(--text-secondary); }

.result-card { border-left: 4px solid var(--border); }
.result-card.pass { border-left-color: var(--success); }
.result-card.issues { border-left-color: var(--sev-high); }
.result-card.needs-info { border-left-color: var(--sev-medium); }
.result-card.failed { border-left-color: var(--danger); }
.result-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.result-head img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); flex: none; }
.result-head .result-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.result-head h3 { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .result-head img { width: 160px; height: 120px; } }

.finding-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; background: var(--surface); }
.finding-card.decided { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.finding-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.finding-head strong { flex: 1; min-width: 0; }
.sev { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.sev.low { background: var(--sev-low); }
.sev.medium { background: var(--sev-medium); color: #1A1E28; }
.sev.high { background: var(--sev-high); }
.sev.critical { background: var(--sev-critical); }
.finding-meta { font-size: 0.85rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.15rem; }
.finding-meta span strong { color: var(--text); font-weight: 600; }
.finding-note { position: relative; }
.finding-note textarea { width: 100%; min-height: 7rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; line-height: 1.4; resize: vertical; box-sizing: border-box; }
.finding-note textarea:focus { outline: none; border-color: var(--amber); }
.finding-note .spinner { position: absolute; right: 0.6rem; bottom: 0.6rem; }

.decision-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.decision-segment button { min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.35rem 0.4rem; }
.decision-segment button:disabled { cursor: default; opacity: 0.75; }
.decision-segment button.fix.selected { background: var(--danger); border-color: var(--danger); color: #fff; }
.decision-segment button.accept.selected { background: var(--info); border-color: var(--info); color: #fff; }
.decision-segment button.dismiss.selected { background: var(--text-secondary); border-color: var(--text-secondary); color: #fff; }

.question-box { border: 1px dashed var(--sev-medium); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; background: color-mix(in srgb, var(--sev-medium) 8%, var(--surface)); }

/* ---- analyse / finalise action cards ------------------------------------------------------- */
.action-card { display: flex; flex-direction: column; gap: 0.6rem; }
.action-card .quote { font-size: 1.05rem; font-weight: 600; }
.summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; }
.summary-strip > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; display: flex; flex-direction: column; }
.summary-strip strong { font-size: 1.25rem; }
.summary-strip small { color: var(--text-secondary); }