/* ============================================================
   Autophix CRM — Client Portal Stylesheet
   ============================================================ */

:root {
  --bg:      #0a0a0a;
  --surface: #141414;
  --panel:   #1c1c1c;
  --panel2:  #242424;
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);
  --red:     #e63232;
  --red-d:   #b82a2a;
  --green:   #27ae60;
  --amber:   #e67e22;
  --white:   #f0eeea;
  --muted:   rgba(240,238,234,0.45);
  --mono:    'JetBrains Mono', monospace;
  --body:    'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--body); background:var(--bg); color:var(--white); line-height:1.65; font-size:15px; }
a { color:var(--red); text-decoration:none; }
a:hover { color:var(--white); }
input, select, textarea, button { font-family:var(--body); }

/* ── Header ─────────────────────────────────────────────── */
.client-header {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.client-header-inner {
  max-width:1100px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px; height:60px;
}
.c-brand { font-family:var(--mono); font-size:20px; font-weight:900; color:var(--white); letter-spacing:2px; flex-shrink:0; }
.c-brand span { color:var(--red); }
.c-brand-sub { font-size:11px; color:var(--muted); letter-spacing:1px; font-weight:400; }
.c-nav { display:flex; gap:4px; flex:1; }
.c-nav-link { padding:8px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-radius:2px; transition:.15s; }
.c-nav-link:hover { color:var(--white); background:var(--panel); }
.c-nav-active { color:var(--white); background:var(--panel); }
.c-header-user { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.c-user-name { font-size:13px; color:var(--muted); }
.c-logout { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border:1px solid var(--border2); padding:5px 10px; border-radius:2px; }
.c-logout:hover { color:var(--red); border-color:var(--red); }

/* ── Alerts ─────────────────────────────────────────────── */
.c-alert { padding:12px 24px; font-size:13px; }
.c-alert-success { background:rgba(39,174,96,.1); border-bottom:1px solid rgba(39,174,96,.2); color:#7dcea0; }
.c-alert-error   { background:rgba(230,50,50,.1);  border-bottom:1px solid rgba(230,50,50,.2);  color:#e87979; }

/* ── Main ─────────────────────────────────────────────── */
.client-main { min-height:calc(100vh - 60px - 80px); }
.c-container { max-width:1100px; margin:0 auto; padding:32px 24px; }
.c-page-header { margin-bottom:28px; }
.c-page-header h1 { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--white); }
.c-page-sub { font-size:13px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Cards ─────────────────────────────────────────────── */
.c-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:4px; margin-bottom:16px;
}
.c-card-feature { border-color:rgba(230,50,50,.25); }
.c-card-highlight { border-color:rgba(230,50,50,.3); }
.c-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.c-card-header h3 { font-size:14px; font-weight:500; }
.c-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted); flex-wrap:wrap; gap:10px;
}

/* ── 3-grid ─────────────────────────────────────────────── */
.c-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ── List items ─────────────────────────────────────────── */
.c-list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
}
.c-list-item:last-child { border-bottom:none; }
.c-li-main { flex:1; }
.c-li-title { font-size:13px; font-weight:500; }
.c-li-title a { color:var(--white); }
.c-li-title a:hover { color:var(--red); }
.c-li-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.c-empty { padding:28px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* ── Detail grid ─────────────────────────────────────────── */
.c-detail-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; padding:0 20px;
}
.c-detail-grid > div {
  padding:10px 0; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:2px;
}
.c-detail-grid > div:nth-last-child(-n+3) { border-bottom:none; }
.cd-label { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* ── Repair stepper ─────────────────────────────────────── */
.c-stepper {
  display:flex; align-items:center;
  padding:24px 20px; gap:0; overflow-x:auto;
}
.stepper-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.stepper-dot {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700;
  border:2px solid var(--border2); background:var(--panel2);
  color:var(--muted);
}
.stepper-label { font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.step-done .stepper-dot   { background:var(--green); border-color:var(--green); color:#fff; }
.step-active .stepper-dot { background:var(--red); border-color:var(--red); color:#fff; }
.step-active .stepper-label { color:var(--white); }
.stepper-line { flex:1; height:2px; background:var(--border2); margin:0 4px; margin-bottom:18px; min-width:20px; }
.stepper-line.line-done { background:var(--green); }

/* ── Quote actions ─────────────────────────────────────── */
.c-quote-actions { gap:12px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:2px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.badge-grey   { background:rgba(255,255,255,.07); color:#aaa; }
.badge-red    { background:rgba(230,50,50,.15); color:#e87979; }
.badge-green  { background:rgba(39,174,96,.15); color:#7dcea0; }
.badge-amber  { background:rgba(230,126,34,.15); color:#e8aa79; }
.badge-blue   { background:rgba(41,128,185,.15); color:#79b4e8; }
.badge-purple { background:rgba(142,68,173,.15); color:#c39bd3; }
.badge-teal   { background:rgba(22,160,133,.15); color:#7ecec4; }

/* ── Plate tag ─────────────────────────────────────────── */
.plate-tag { font-family:var(--mono); font-size:12px; background:#f0d060; color:#111; padding:2px 7px; border-radius:2px; letter-spacing:1px; font-weight:700; }
.mono { font-family:var(--mono); font-size:12px; }
.text-red { color:#e87979; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display:inline-block; padding:9px 20px; border-radius:2px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border:1px solid transparent; transition:.2s; text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--red); color:#fff; border-color:var(--red); }
.btn-primary:hover { background:var(--red-d); color:#fff; }
.btn-outline { background:transparent; color:var(--white); border-color:var(--border2); }
.btn-outline:hover { border-color:var(--white); }
.btn-red { border-color:var(--red); color:var(--red); background:transparent; }
.btn-red:hover { background:var(--red); color:#fff; }
.btn-sm { padding:6px 14px; font-size:10px; }
.btn-xs { padding:4px 10px; font-size:10px; }
.btn-full { width:100%; text-align:center; display:block; padding:12px; }

/* ── Login body ─────────────────────────────────────────── */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.login-wrap { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:40px 36px; width:100%; max-width:420px; }
.login-brand { font-family:var(--mono); font-size:30px; font-weight:900; color:var(--white); text-align:center; letter-spacing:4px; }
.login-brand span { color:var(--red); }
.login-sub { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; margin:6px 0 12px; }
.login-desc { font-size:14px; color:var(--muted); text-align:center; margin-bottom:24px; line-height:1.6; }
.login-form .form-group { margin-bottom:16px; }
.login-form label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.login-form input { width:100%; background:var(--panel); border:1px solid var(--border2); border-radius:2px; padding:11px 14px; color:var(--white); font-size:15px; outline:none; }
.login-form input:focus { border-color:var(--red); }

/* ── Footer ─────────────────────────────────────────────── */
.client-footer { background:var(--surface); border-top:1px solid var(--border); padding:20px 24px; }
.client-footer-inner { max-width:1100px; margin:0 auto; text-align:center; }
.cf-brand { font-family:var(--mono); font-size:16px; font-weight:900; letter-spacing:2px; color:var(--white); margin-bottom:6px; }
.cf-brand span { color:var(--red); }
.cf-contact { font-size:13px; color:var(--muted); margin-bottom:6px; }
.cf-contact a { color:var(--muted); }
.cf-contact a:hover { color:var(--red); }
.cf-copy { font-size:11px; color:rgba(240,238,234,.25); }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:768px) {
  .c-grid-3 { grid-template-columns:1fr; }
  .c-detail-grid { grid-template-columns:1fr 1fr; }
  .c-nav { display:none; }
  .client-header-inner { gap:12px; }
  .c-container { padding:20px 16px; }
  .c-stepper { padding:16px 12px; }
}
@media(max-width:480px) {
  .c-detail-grid { grid-template-columns:1fr; }
  .login-wrap { padding:28px 20px; }
}