/* ---------------------------------------------------------
   Design tokens
   Palette: blueprint navy sidebar, cool paper background,
   steel-blue primary accent, safety-amber secondary accent.
   Status colors are fixed by domain meaning (see db.py).
--------------------------------------------------------- */
:root{
  --navy: #16283F;
  --navy-2: #1D3654;
  --steel: #2E7DA6;
  --steel-light: #E7F1F7;
  --amber: #F4A300;
  --paper: #F5F7FA;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --ink: #16283F;
  --ink-muted: #64748B;
  --ink-faint: #94A3B8;

  --pending: #64748B;
  --acc: #22C55E;
  --repair: #D97706;
  --reject: #991B1B;
  --reshoot: #2563EB;

  --radius: 10px;
  --radius-sm: 6px;
  --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }
::selection{ background: var(--amber); color: var(--navy); }

/* ---------------- Layout shell ---------------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width: 240px;
  flex-shrink:0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #142338 100%);
  color: #EAF1F8;
  display:flex;
  flex-direction:column;
  padding: 22px 16px;
  box-shadow: 2px 0 18px rgba(0,0,0,.12);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 2;
}
.brand{ display:flex; align-items:center; gap:12px; padding: 6px 8px 26px; }
.brand-mark{ flex-shrink:0; }
.brand-text{ min-width:0; }
.brand-mark{
  width:38px; height:38px; border-radius:9px;
  background: linear-gradient(135deg, var(--amber), #FFC94D);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 10px rgba(244,163,0,.35);
}
.brand-title{ font-weight:600; font-size:14.5px; line-height:1.2; }
.brand-sub{ font-size:11.5px; color:#9FB3C8; letter-spacing:.03em; }

.nav{ display:flex; flex-direction:column; gap:3px; margin-top: 8px;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: #C9D7E5;
  font-size: 13.5px;
  font-weight:500;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.nav-item:hover{ background: rgba(255,255,255,.07); color:#fff; transform: translateX(2px); }
.nav-item.active{ background: linear-gradient(90deg, rgba(244,163,0,.18), rgba(244,163,0,.05)); color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.nav-dot{ width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.7; flex-shrink:0; }

.sidebar-footer{
  margin-top:auto;
  padding: 14px 10px 2px; border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-footer-sub{ font-size:10.5px; color:#5D7893; margin-top:6px; text-align:center; }
.maker-logo{ display:block; max-width:100%; max-height:46px; width:auto; height:auto; margin:2px auto 0; object-fit:contain; }

/* ---------------- Global Back button (every page, every state) ---------------- */
.back-bar{ margin-bottom:14px; }
.back-btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:#fff;
  color: var(--ink-muted); font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px;
  cursor:pointer;
}
.back-btn:hover{ border-color: var(--steel); color: var(--steel); background: var(--paper); }

.content{ flex:1; padding: 28px 34px 60px; max-width: 1400px; }

/* ---------------- Flash messages ---------------- */
.flash-stack{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.flash{ padding:10px 14px; border-radius: var(--radius-sm); font-size:13.5px; font-weight:500; }
.flash-error{ background:#FEF2F2; color:#B91C1C; border:1px solid #FCA5A5; }
.flash-success{ background:#F0FDF4; color:#15803D; border:1px solid #86EFAC; }

/* ---------------- Typography helpers ---------------- */
h1{ font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em; }
h2{ font-size:15.5px; font-weight:600; margin:0 0 12px; }
.eyebrow{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.page-header{ margin-bottom: 26px; }
.page-header p{ color: var(--ink-muted); font-size:13.5px; margin:4px 0 0; }
.mono{ font-family: var(--font-mono); }

/* ---------------- Cards ---------------- */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.card + .card{ margin-top: 0; }
.grid-2{ display:flex; gap: 20px; align-items:flex-start; }
.grid-2 > div:first-child{ flex: 1 1 380px; min-width:340px; }
.grid-2 > div:last-child{ flex: 2 1 520px; min-width:380px; }
@media (max-width: 1050px){ .grid-2{ flex-direction:column; } }

/* ---------------- Project cards (dashboard) ---------------- */
.project-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.project-grid .project-card{ flex: 1 1 280px; min-width:260px; max-width:340px; }
.project-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px; transition: box-shadow .15s ease, transform .15s ease; display:block;
}
.project-card:hover{ box-shadow: 0 4px 18px rgba(22,40,63,.08); transform: translateY(-1px); }
.project-code{ font-family: var(--font-mono); font-size:12px; color: var(--steel); font-weight:600; letter-spacing:.03em; }
.project-name{ font-size:16px; font-weight:600; margin: 4px 0 2px; }
.project-mfr{ font-size:12.5px; color: var(--ink-muted); margin-bottom:14px; }
.project-stats{ display:flex; gap:18px; border-top:1px solid var(--border); padding-top:12px; }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat-num{ font-family: var(--font-mono); font-weight:600; font-size:16px; }
.stat-label{ font-size:10.5px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }

/* ---------------- Forms ---------------- */
label{ display:block; font-size:12px; font-weight:600; color: var(--ink-muted); margin-bottom:4px; }
.field{ margin-bottom:12px; }
input[type=text], input[type=date], input[type=number], select, textarea{
  width:100%; padding: 8px 10px; border:1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size:13.5px; background:#fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--steel); outline-offset:1px; border-color: var(--steel); }
.form-row{ display:flex; flex-wrap:wrap; gap:10px; }
.form-row .field{ flex: 1 1 140px; min-width:140px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding: 9px 16px; border-radius: var(--radius-sm); border:none; cursor:pointer;
  font-family: var(--font-ui); font-size:13px; font-weight:600;
  background: var(--steel); color:#fff; transition: background .12s ease;
}
.btn:hover{ background:#26668a; }
.btn-amber{ background: var(--amber); color: var(--navy); }
.btn-amber:hover{ background:#dd9200; }
.btn-ghost{ background:transparent; color: var(--steel); border:1px solid var(--steel); }
.btn-ghost:hover{ background: var(--steel-light); }
.btn-danger{ background:#fff; color:#DC2626; border:1px solid #FCA5A5; }
.btn-danger:hover{ background:#FEF2F2; }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------------- Tables ---------------- */
table{ width:100%; border-collapse: collapse; font-size:13px; }
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color: var(--ink-faint); font-weight:600; padding: 8px 10px; border-bottom:1px solid var(--border);
}
td{ padding: 9px 10px; border-bottom:1px solid #EEF1F5; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: #FAFBFD; }
.cell-mono{ font-family: var(--font-mono); font-size:12.5px; }
.empty-row{ text-align:center; color: var(--ink-faint); padding: 24px 0; font-size:13px; }

/* ---------------- Status stamp badges ---------------- */
.stamp-select{
  appearance:none; -webkit-appearance:none;
  font-family: var(--font-mono); font-weight:600; font-size:11px; letter-spacing:.03em;
  padding: 5px 24px 5px 12px; border-radius: 999px; border: 1.5px solid transparent;
  cursor:pointer; color:#fff; min-width: 104px; text-align:left; white-space:nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center;
}
.stamp-PENDING{ background: #64748B; }
.stamp-ACC{ background: #16A34A; }
.stamp-REPAIR{ background: #2563EB; color:#fff; }
.stamp-RESHOOT{ background: #EA580C; color:#fff; }
.stamp-RETAKE{ background: #7C3AED; color:#fff; }
.stamp-REJECT{ background: #B91C1C; color:#fff; }

.badge{
  display:inline-block; font-family: var(--font-mono); font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; background: var(--steel-light); color: var(--steel);
}

/* ---------------- Weld selection action bar ---------------- */
.action-bar{
  position: sticky; bottom: 16px; margin-top: 16px;
  background: var(--navy); color:#fff; border-radius: var(--radius);
  padding: 12px 18px; display:flex; align-items:center; justify-content:space-between;
  box-shadow: 0 8px 24px rgba(22,40,63,.25);
}
.action-bar span{ font-size:13px; color:#C9D7E5; }
.action-bar strong{ color:#fff; font-family: var(--font-mono); }

/* ---------------- Misc ---------------- */
.hr{ border:none; border-top:1px solid var(--border); margin: 18px 0; }
.muted{ color: var(--ink-muted); }
.section-title{ font-size:13px; font-weight:600; margin: 18px 0 10px; color: var(--ink); }
.two-col-form{ display:flex; flex-wrap:wrap; gap:10px; }
.two-col-form .field{ flex: 1 1 calc(50% - 10px); min-width:160px; }
.empty-state{ text-align:center; padding: 50px 20px; color: var(--ink-faint); }
.empty-state h3{ color: var(--ink-muted); font-size:14px; margin-bottom:6px;}
.checkbox-cell{ width:28px; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------------- Logo settings ---------------- */
.logo-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.logo-slot{
  flex: 1 1 200px; min-width:180px; max-width:230px;
  border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; display:flex; flex-direction:column; gap:8px;
}
.logo-slot-label{ font-size:11.5px; font-weight:600; color: var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; }
.logo-preview{
  height:70px; border:1px dashed var(--border); border-radius:6px;
  display:flex; align-items:center; justify-content:center; background:#FAFBFD;
}
.logo-preview img{ max-width:100%; max-height:60px; object-fit:contain; }
.logo-placeholder{ font-size:11.5px; color: var(--ink-faint); }
.logo-form{ display:flex; gap:6px; }
.logo-form input[type=file]{ flex:1; font-size:11px; padding:4px; border:1px solid var(--border); border-radius:6px; }
.slot-picker{ font-size:12px; padding:6px 8px; }

/* v3 additions */
.status-green{color:#16A34A}.status-gray{color:#64748B}
.mini-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.mini{font-size:10.5px;padding:3px 7px;border-radius:999px;font-weight:600}.mini.repair{background:#DBEAFE;color:#1D4ED8}.mini.reshoot{background:#FFEDD5;color:#9A3412}.mini.retake{background:#EDE9FE;color:#5B21B6}.mini.reject{background:#FEE2E2;color:#991B1B}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 18px;padding-bottom:2px}.tabs a{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink-muted);font-size:12px;font-weight:600}.tabs a.active{background:var(--navy);color:#fff;border-color:var(--navy)}.tab-count{font-family:var(--font-mono);margin-left:4px}.table-scroll{overflow-x:auto}.card-head,.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.legend{display:flex;gap:5px;flex-wrap:wrap}.status-pill{display:inline-block;font-size:10.5px;font-family:var(--font-mono);font-weight:700;padding:3px 8px;border-radius:999px}.status-repair{background:#DBEAFE;color:#1D4ED8}.status-reshoot{background:#FFEDD5;color:#9A3412}.status-retake{background:#EDE9FE;color:#5B21B6}.status-reject{background:#FEE2E2;color:#991B1B}.status-acc{background:#DCFCE7;color:#166534}.status-pending{background:#E2E8F0;color:#475569}.method-select{border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:11px}.method-rt{background:#E0F2FE;color:#075985}.method-paut{background:#ECFDF5;color:#047857}.process-picker{display:flex;gap:8px;flex-wrap:wrap}.check-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:#fff;font-size:12px}.unit-input{display:flex;gap:5px}.unit-input input{flex:1}.unit-input select{width:76px}.full{flex-basis:100%!important}.actions{white-space:nowrap}.actions form{display:inline}.inline-form{display:flex;gap:5px;align-items:center}.inline-form input{min-width:130px}.history-head{margin-bottom:12px}.code{font-family:var(--font-mono)}
/* ---------------- Kebab (three-dot) menu ---------------- */
.kebab-wrap{position:relative;display:inline-block}
.kebab-btn{width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink-muted);font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kebab-btn:hover{background:var(--paper);border-color:var(--border)}
.kebab-menu{position:absolute;top:32px;right:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(22,40,63,.16);min-width:150px;z-index:60;display:none;overflow:hidden}
.kebab-menu.open{display:block}
.kebab-menu button,.kebab-menu a{display:block;width:100%;text-align:left;padding:9px 14px;font-size:12.5px;background:none;border:none;cursor:pointer;color:var(--ink)}
.kebab-menu button:hover,.kebab-menu a:hover{background:var(--paper)}
.kebab-menu .danger{color:#B91C1C}
.project-card{position:relative}
.project-card .kebab-wrap{position:absolute;top:14px;right:14px}
.history-group-head{position:relative}
.hrow-actions{position:relative;width:34px}
.stamp-REPAIR{background:#2563EB}.stamp-RESHOOT{background:#EA580C}.stamp-RETAKE{background:#7C3AED}.stamp-REJECT{background:#B91C1C}.stamp-REPAIR{color:#fff}.stamp-RESHOOT{color:#fff}.stamp-RETAKE{color:#fff}.stamp-REJECT{color:#fff}
@media(max-width:1050px){.content{padding:20px}.grid-2{flex-direction:column}.grid-2>div:first-child,.grid-2>div:last-child{min-width:0;width:100%}.project-grid .project-card{max-width:none}}

.project-logo-card{margin-bottom:20px}.logo-upload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}.logo-upload-slot{border:1px solid var(--border);padding:10px;border-radius:8px;display:flex;flex-direction:column;gap:6px}.logo-upload-slot small{overflow:hidden;text-overflow:ellipsis}.search-bar{display:flex;gap:8px;margin-top:12px}.search-bar input{flex:1;min-width:240px}
@media(max-width:900px){.logo-upload-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------- Tighter weld joint table ---------------- */
.tight-table th, .tight-table td{ white-space:nowrap; padding:6px 8px; }
.tight-table td.ellipsis{ max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.remark-input{ border:1px solid transparent; background:transparent; padding:4px 6px; width:150px; font-size:12.5px; border-radius:5px; }
.remark-input:hover{ border-color:var(--border); }
.remark-input:focus{ border-color:var(--steel); background:#fff; outline:none; }

/* ---------------- Status-change modal ---------------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(22,40,63,.45); display:none; align-items:center; justify-content:center; z-index:100; }
.modal-backdrop.open{ display:flex; }
.modal{ background:#fff; border-radius:12px; width:420px; max-width:92vw; max-height:88vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }
.modal-head h3{ margin:0; font-size:14.5px; font-weight:700; }
.modal-close{ background:none; border:none; font-size:20px; line-height:1; cursor:pointer; color:var(--ink-muted); }
.modal-body{ padding:16px 18px; }
.modal-foot{ padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.req-mark{ color:#DC2626; }
.modal-error{ background:#FEF2F2; color:#B91C1C; border:1px solid #FCA5A5; border-radius:6px; padding:8px 10px; font-size:12.5px; }
/* ---------------- Footer credit ---------------- */
.app-credit{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, rgba(244,163,0,.16), rgba(244,163,0,.04));
  border:1px solid rgba(244,163,0,.3);
  border-radius: 10px;
  padding: 10px 12px;
  font-size:13px; color:#F0DBAE;
}
.app-credit-icon{ color: var(--amber); font-size:16px; flex-shrink:0; }
.app-credit-text{ font-size:11.5px; color:#B9C9D8; line-height:1.5; }
.app-credit strong{ display:block; color: var(--amber); font-size:15px; font-weight:700; letter-spacing:.02em; margin-top:1px; }

/* ---------------- Followup grouped rows ---------------- */
.group-row td{ background:#F0F4F8; font-weight:700; font-size:11.5px; color:var(--steel); text-transform:uppercase; letter-spacing:.03em; padding:7px 10px; }

/* ---------------- Report History (grouped by weld) ---------------- */
.history-group{ padding:0; overflow:hidden; }
.history-group-head{
  display:flex; align-items:center; gap:10px;
  background:#F0F4F8; padding:12px 16px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:13px; color:var(--navy);
}
.history-group-weld{ margin-left:4px; color:var(--steel); }
.history-group .table-scroll{ padding:0 4px 4px; }

.flag-picker{ display:flex; gap:4px; }
.flag-dot{
  width:14px; height:14px; border-radius:50%; border:2px solid #D8DEE6;
  background:#fff; cursor:pointer; padding:0; transition: transform .1s ease;
}
.flag-dot:hover{ transform:scale(1.15); }
.flag-dot-green{ border-color:#86EFAC; }
.flag-dot-green.on{ background:#22C55E; border-color:#16A34A; }
.flag-dot-yellow{ border-color:#FDE68A; }
.flag-dot-yellow.on{ background:#EAB308; border-color:#CA8A04; }
.flag-dot-red{ border-color:#FCA5A5; }
.flag-dot-red.on{ background:#EF4444; border-color:#DC2626; }

tr.flag-green{ background:#F0FDF4; }
tr.flag-yellow{ background:#FEFCE8; }
tr.flag-red{ background:#FEF2F2; }
tr.flag-green td:first-child{ box-shadow: inset 3px 0 0 #22C55E; }
tr.flag-yellow td:first-child{ box-shadow: inset 3px 0 0 #EAB308; }
tr.flag-red td:first-child{ box-shadow: inset 3px 0 0 #EF4444; }

.inline-form input[type=text]{ font-size:12px; padding:5px 8px; min-width:110px; }