/* =====================================================================
   RNJ Automotive Services — brand tokens (extracted from the logo)
   Forest green  #063B18  (RNJ letterforms)
   Speed orange  #E97A2E  (speedometer ticks / needle)
   Rust          #CC5F47  ("automotive")
   Redline       #BC3130  (speedometer redline)
   ===================================================================== */
:root {
    --rnj-green: #063B18;
    --rnj-green-800: #0A4A20;
    --rnj-green-700: #0F5A2A;
    --rnj-green-600: #16703A;
    --rnj-green-100: #E3EFE6;
    --rnj-green-50: #F2F7F3;
    --rnj-orange: #E97A2E;
    --rnj-orange-600: #D2661B;
    --rnj-orange-100: #FDEBDD;
    --rnj-rust: #CC5F47;
    --rnj-red: #BC3130;
    --rnj-ink: #14231A;
    --rnj-muted: #5C6B61;
    --rnj-line: #DDE5DF;
    --rnj-bg: #F6F8F6;
    --rnj-card: #FFFFFF;
    --rnj-radius: 14px;
    --rnj-shadow: 0 1px 2px rgba(6, 59, 24, .06), 0 8px 24px -12px rgba(6, 59, 24, .18);
    --bs-primary: #063B18;
    --bs-primary-rgb: 6, 59, 24;
    --bs-link-color: #0F5A2A;
    --bs-link-color-rgb: 15, 90, 42;
    --bs-link-hover-color: #D2661B;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-body-color: #14231A;
    --bs-border-color: #DDE5DF;
}

body { font-family: var(--bs-body-font-family); color: var(--rnj-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Manrope', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }

.text-green { color: var(--rnj-green) !important; }
.text-orange { color: var(--rnj-orange) !important; }
.text-rust { color: var(--rnj-rust) !important; }
.bg-green { background: var(--rnj-green) !important; }
.bg-green-50 { background: var(--rnj-green-50) !important; }
.bg-orange { background: var(--rnj-orange) !important; }
.bg-orange-100 { background: var(--rnj-orange-100) !important; }

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--rnj-green); --bs-btn-border-color: var(--rnj-green); --bs-btn-hover-bg: var(--rnj-green-700); --bs-btn-hover-border-color: var(--rnj-green-700); --bs-btn-active-bg: var(--rnj-green-800); --bs-btn-active-border-color: var(--rnj-green-800); --bs-btn-disabled-bg: var(--rnj-green); --bs-btn-disabled-border-color: var(--rnj-green); }
.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--rnj-orange); --bs-btn-border-color: var(--rnj-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--rnj-orange-600); --bs-btn-hover-border-color: var(--rnj-orange-600); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--rnj-orange-600); --bs-btn-focus-shadow-rgb: 233, 122, 46; }
.btn-outline-primary { --bs-btn-color: var(--rnj-green); --bs-btn-border-color: var(--rnj-green); --bs-btn-hover-bg: var(--rnj-green); --bs-btn-hover-border-color: var(--rnj-green); --bs-btn-active-bg: var(--rnj-green); }
.btn-outline-accent { --bs-btn-color: var(--rnj-orange-600); --bs-btn-border-color: var(--rnj-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--rnj-orange); --bs-btn-hover-border-color: var(--rnj-orange); }

.form-control, .form-select { border-radius: 10px; border-color: var(--rnj-line); }
.form-control:focus, .form-select:focus { border-color: var(--rnj-orange); box-shadow: 0 0 0 .2rem rgba(233, 122, 46, .18); }
.form-label { font-weight: 600; font-size: .875rem; color: #2a3a30; }
.form-check-input:checked { background-color: var(--rnj-green); border-color: var(--rnj-green); }

.card { border: 1px solid var(--rnj-line); border-radius: var(--rnj-radius); box-shadow: var(--rnj-shadow); }
.card-header { background: #fff; border-bottom: 1px solid var(--rnj-line); font-weight: 700; font-family: 'Manrope', sans-serif; }
.card-header:first-child { border-radius: var(--rnj-radius) var(--rnj-radius) 0 0; }

.badge.text-bg-primary { background: var(--rnj-green) !important; }
.alert { border-radius: 12px; }

/* Lifecycle status badges (by stage) */
.status-badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; font-size: .75rem; }
.st-1 { background: #EEF2F7; color: #334155; }
.st-2 { background: #E8F1FB; color: #1D4E89; }
.st-3 { background: #FFF4E5; color: #9A4B0B; }
.st-4 { background: var(--rnj-orange-100); color: #9B3F0A; }
.st-5 { background: #EAF4FF; color: #0B5394; }
.st-6 { background: #E6F4F1; color: #0F6152; }
.st-7 { background: var(--rnj-green-100); color: var(--rnj-green); }
.st-done { background: var(--rnj-green); color: #fff; }
.st-cancel { background: #F8E1E1; color: var(--rnj-red); }

/* Status tracker (portal + admin) */
.tracker { list-style: none; margin: 0; padding: 0; }
.tracker li { position: relative; padding: 0 0 18px 30px; }
.tracker li:last-child { padding-bottom: 0; }
.tracker li::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--rnj-line); }
.tracker li:last-child::before { display: none; }
.tracker .dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #CBD5CE; border: 3px solid #fff; box-shadow: 0 0 0 1px #CBD5CE; }
.tracker li.done .dot { background: var(--rnj-green-600); box-shadow: 0 0 0 1px var(--rnj-green-600); }
.tracker li.done::before { background: var(--rnj-green-600); }
.tracker li.current .dot { background: var(--rnj-orange); box-shadow: 0 0 0 4px rgba(233, 122, 46, .25); }
.tracker .t-label { font-weight: 600; font-size: .92rem; }
.tracker li.pending .t-label { color: #8A968E; font-weight: 500; }
.tracker .t-date { font-size: .78rem; color: var(--rnj-muted); }

/* 7-stage horizontal bar */
.stagebar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.stagebar .sb { text-align: center; font-size: .72rem; font-weight: 600; color: #8A968E; }
.stagebar .sb .bar { height: 6px; border-radius: 99px; background: #E3E8E4; margin-bottom: 6px; }
.stagebar .sb.done .bar { background: var(--rnj-green-600); }
.stagebar .sb.done { color: var(--rnj-green); }
.stagebar .sb.current .bar { background: linear-gradient(90deg, var(--rnj-green-600), var(--rnj-orange)); }
.stagebar .sb.current { color: var(--rnj-orange-600); }
@media (max-width: 575px) { .stagebar .sb span { display: none; } }

/* Timeline */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--rnj-line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { font-size: .78rem; color: var(--rnj-muted); line-height: 1.25; }
.timeline .when b { display: block; color: var(--rnj-ink); font-size: .85rem; }
.timeline .what { font-size: .9rem; }
.timeline .what .who { font-size: .75rem; color: var(--rnj-muted); }
.timeline .internal { background: #FFF9F3; margin: 0 -12px; padding: 10px 12px; }

.money-table td, .money-table th { padding: .55rem .75rem; }
.money-table tfoot th { border-top: 2px solid var(--rnj-green); font-size: 1.05rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--rnj-green); letter-spacing: .02em; }
.small-muted { font-size: .82rem; color: var(--rnj-muted); }
.empty-state { text-align: center; padding: 38px 16px; color: var(--rnj-muted); }
.empty-state i { font-size: 2rem; color: #B7C4BB; display: block; margin-bottom: 6px; }
.dl-grid { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
.dl-grid dt { color: var(--rnj-muted); font-weight: 500; }
.dl-grid dd { margin: 0; font-weight: 600; word-break: break-word; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.photo-grid a, .photo-grid .ph { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #EEF2EF; position: relative; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }