/* Fonts are bundled locally (IBM Plex, SIL OFL) - no internet connection needed. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');}
/* ---------------------------------------------------------
   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; }
.app-version{ text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-muted); margin-top:6px; }
.maker-logo{ display:block; max-width:100%; max-height:115px; 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{ flex: 1 1 380px; min-width:340px; }
@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{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; }

/* ---------------- Item 4: edit/delete keeps your place ----------------
   A row/card that was just edited, or the one that receives focus right
   after a delete, gets a brief highlight so it's easy to spot without
   having to scroll and hunt for it. */
.just-focused{ animation: justFocusedFade 2.2s ease-out; }
tr.just-focused{ background:#FFF6DF !important; box-shadow: inset 3px 0 0 var(--amber); }
.card.just-focused, .history-group.just-focused{ box-shadow: 0 0 0 2px var(--amber), 0 10px 28px rgba(22,40,63,.12); }
@keyframes justFocusedFade{ from{ background:#FFEDBE; } to{ background:transparent; } }

/* ---------------- Item 4: remember the last equipment filter ---------------- */
/* (behaviour lives in JS/localStorage; no styling needed here) */

/* ---------------- Item 3: weld joints - full width + always-reachable
   horizontal scrollbar ----------------
   The joints table can have many columns and many rows; instead of only
   showing a horizontal scrollbar after scrolling to the very bottom of a
   long table, a slim sticky scrollbar proxy stays pinned to the bottom of
   the viewport (as long as the table is on screen) and stays in sync with
   the table's real horizontal scroll position. */
.joints-card{ width:100%; }
.hscroll-proxy{
  position: sticky; bottom: 0; left: 0; right: 0;
  height: 14px; overflow-x: auto; overflow-y: hidden;
  background: var(--paper); border-top: 1px solid var(--border);
  z-index: 4; margin-top: -1px;
}
.hscroll-proxy-inner{ height: 1px; }
.hscroll-proxy::-webkit-scrollbar{ height: 11px; }
.hscroll-proxy::-webkit-scrollbar-thumb{ background: var(--ink-faint); border-radius: 999px; }
.hscroll-proxy::-webkit-scrollbar-track{ background: transparent; }

/* ---------------- Search boxes on list pages (welders, weld joints) ---------------- */
.list-search{ display:flex; gap:8px; max-width:360px; margin-bottom:10px; }
.list-search input{ flex:1; }

/* bulk edit modal */
.bulk-edit-row{ display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:center; margin-bottom:8px; }
.bulk-edit-row .chg{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink); }
.action-bar{ flex-wrap:wrap; gap:10px; }

/* ---- Welders page: livelier, easier to scan ---- */
.stat-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.stat-tile{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; border-top:4px solid var(--steel); box-shadow:0 1px 2px rgba(22,40,63,.04); }
.stat-tile span{ display:block; font-size:11.5px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-tile strong{ display:block; font-family:var(--font-mono); font-size:20px; margin-top:4px; color:var(--ink); }
.t-blue{ border-top-color:#3B82F6; } .t-teal{ border-top-color:#14B8A6; } .t-amber{ border-top-color:#F59E0B; }
.t-rose{ border-top-color:#F43F5E; } .t-green{ border-top-color:#22C55E; }
.welders-table{ border-collapse:separate; border-spacing:0; }
.welders-table thead th{ background:#EAF1F8; color:var(--navy); position:sticky; top:0; z-index:1; padding:11px 12px; border-bottom:2px solid #CFDCEA; }
.welders-table tbody td{ padding:12px 12px; border-bottom:1px solid #E7EDF4; transition:background .12s; }
.welders-table tbody tr:nth-child(even) td{ background:#F3F7FC; }
.welders-table tbody tr:nth-child(odd) td{ background:#FFFFFF; }
.welders-table tbody tr:hover td{ background:#DCEBFA; }
.welders-table tbody tr:hover td:first-child{ box-shadow:inset 4px 0 0 var(--steel); }
.avatar{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-size:11.5px; font-weight:700; color:#fff; margin-right:9px; vertical-align:middle; }
.av-0{ background:#3B82F6; } .av-1{ background:#14B8A6; } .av-2{ background:#F59E0B; }
.av-3{ background:#8B5CF6; } .av-4{ background:#F43F5E; } .av-5{ background:#0EA5E9; }
.wname{ vertical-align:middle; font-weight:600; }
.chip{ display:inline-block; background:#E7F1F7; color:#1E5F82; border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; }
.rate{ display:flex; align-items:center; gap:8px; min-width:130px; }
.rate b{ font-family:var(--font-mono); font-size:12.5px; min-width:56px; }
.rate-bar{ flex:1; height:8px; background:#E2E8F0; border-radius:999px; overflow:hidden; }
.rate-bar i{ display:block; height:100%; border-radius:999px; }
.rate-ok .rate-bar i{ background:#22C55E; } .rate-mid .rate-bar i{ background:#F59E0B; } .rate-high .rate-bar i{ background:#EF4444; }
.rate-ok b{ color:#15803D; } .rate-mid b{ color:#B45309; } .rate-high b{ color:#B91C1C; }

/* ---- Report History: one card per equipment, weld sub-headers inside ---- */
.eq-group > summary{ cursor:pointer; list-style:none; user-select:none; background:linear-gradient(90deg,#E3EDF8,#F0F4F8); border-left:5px solid var(--steel); }
.eq-group > summary::-webkit-details-marker{ display:none; }
.eq-chevron{ width:0; height:0; border-left:6px solid var(--navy); border-top:5px solid transparent; border-bottom:5px solid transparent; transition:transform .15s; }
.eq-group[open] > summary .eq-chevron{ transform:rotate(90deg); }
.eq-tag{ font-size:14px; background:var(--navy); color:#fff; padding:2px 9px; border-radius:6px; }
.eq-name{ font-size:14.5px; flex:1; }
tr.weld-sub td{ background:#F6F9FC; border-top:2px solid #D5E0EC; border-bottom:1px solid #E1E9F2; padding:7px 12px; }
tr.weld-sub .history-group-weld{ margin:0; font-weight:700; color:var(--navy); font-size:12.5px; }
.weld-sub-count{ margin-left:10px; font-size:11.5px; color:var(--ink-muted); }
.eq-jump{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; }
.eq-jump a{ background:#fff; border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:600; color:var(--navy); text-decoration:none; }
.eq-jump a:hover{ background:#E3EDF8; }
.eq-jump em{ font-style:normal; margin-left:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); }

/* ---- welding process chips ---- */
.chip.proc-gtaw{ background:#DBEAFE; color:#1D4ED8; } .chip.proc-smaw{ background:#FFEDD5; color:#9A3412; }
.chip.proc-saw{ background:#EDE9FE; color:#5B21B6; } .chip.proc-gmaw{ background:#DCFCE7; color:#166534; }
.chip-ss{ background:#E2E8F0 !important; color:#334155 !important; margin-left:2px; }
.joints-card .chip{ padding:2px 8px; font-size:10.5px; font-family:var(--font-mono); }
.proc-limit .check-chip:has(input:disabled){ opacity:.45; }

tr.eq-sub td{ background:#EAF1F8 !important; border-top:2px solid #CFDCEA; }

/* ---- logos: PayaVist on top, RT brand at the bottom ---- */
.maker-top{ padding:2px 4px 0; }
.brand-footer{ padding:8px 6px 2px; }
.chip.pwht-before{ background:#FEF3C7; color:#92400E; } .chip.pwht-after{ background:#E0E7FF; color:#3730A3; }
/* ---- view-only accounts ---- */
body.viewer .edit-only, body.viewer .kebab-wrap, body.viewer .action-bar, body.viewer .weld-check, body.viewer #selectAll,
body.viewer a[href*="/edit"], body.viewer form[method="post"] .btn-danger, body.viewer .btn-danger, body.viewer .flag-dot-btn{ display:none !important; }

/* ================= graphic status select (weld joints) ================= */
select.stamp-select{
  --g1:#94A3B8; --g2:#64748B;
  appearance:none; -webkit-appearance:none; border:0; color:#fff; cursor:pointer;
  font-family:var(--font-ui); font-weight:700; font-size:11.5px; letter-spacing:.03em; text-align:left; white-space:nowrap;
  min-width:124px; padding:7px 30px 7px 13px; border-radius:999px;
  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' fill-opacity='.9'/%3E%3C/svg%3E"), linear-gradient(135deg,var(--g1),var(--g2));
  background-repeat:no-repeat,no-repeat; background-position:right 11px center,0 0; background-size:10px 6px,100% 100%;
  box-shadow:0 1px 2px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
select.stamp-select:hover{ transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 5px 12px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.3); }
select.stamp-select:focus{ outline:3px solid rgba(37,99,235,.25); outline-offset:1px; }
select.stamp-select option{ background:#fff; color:#0F172A; text-shadow:none; font-weight:600; }
select.stamp-select:disabled{ opacity:.85; cursor:default; transform:none; filter:none; }
select.stamp-select.stamp-PENDING{ --g1:#A3B1C6; --g2:#64748B; }
select.stamp-select.stamp-ACC{ --g1:#34D399; --g2:#15803D; }
select.stamp-select.stamp-REPAIR{ --g1:#60A5FA; --g2:#1D4ED8; }
select.stamp-select.stamp-RESHOOT{ --g1:#FB923C; --g2:#C2410C; }
select.stamp-select.stamp-RETAKE{ --g1:#A78BFA; --g2:#6D28D9; }
select.stamp-select.stamp-REJECT{ --g1:#F87171; --g2:#991B1B; }
/* a coloured edge on each weld row shows the result at a glance */
tr[data-status] td:first-child{ box-shadow:inset 4px 0 0 transparent; }
tr[data-status="ACC"] td:first-child{ box-shadow:inset 4px 0 0 #22C55E; }
tr[data-status="REPAIR"] td:first-child{ box-shadow:inset 4px 0 0 #3B82F6; }
tr[data-status="RESHOOT"] td:first-child{ box-shadow:inset 4px 0 0 #F97316; }
tr[data-status="RETAKE"] td:first-child{ box-shadow:inset 4px 0 0 #8B5CF6; }
tr[data-status="REJECT"] td:first-child{ box-shadow:inset 4px 0 0 #EF4444; }
tr[data-status="PENDING"] td:first-child{ box-shadow:inset 4px 0 0 #CBD5E1; }
.legend .status-pill{ color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.18); box-shadow:0 1px 2px rgba(15,23,42,.25); padding:4px 11px; }
.legend .status-repair{ background:linear-gradient(135deg,#60A5FA,#1D4ED8); } .legend .status-reshoot{ background:linear-gradient(135deg,#FB923C,#C2410C); }
.legend .status-retake{ background:linear-gradient(135deg,#A78BFA,#6D28D9); } .legend .status-reject{ background:linear-gradient(135deg,#F87171,#991B1B); }
/* a colour per welder */
.wchip{ display:inline-block; min-width:30px; text-align:center; padding:3px 10px; border-radius:999px; color:#fff; font-family:var(--font-mono); font-size:11.5px; font-weight:700; box-shadow:0 1px 2px rgba(15,23,42,.25); text-shadow:0 1px 1px rgba(0,0,0,.2); }
/* welder statistics: joint status counters */
.status-counts{ white-space:nowrap; }
.scount{ display:inline-block; margin:1px 3px 1px 0; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; font-family:var(--font-mono); color:#fff; }
.scount.status-acc{ background:#16A34A; } .scount.status-repair{ background:#2563EB; } .scount.status-reshoot{ background:#EA580C; }
.scount.status-retake{ background:#7C3AED; } .scount.status-reject{ background:#B91C1C; } .scount.status-pending{ background:#64748B; }

/* =====================================================================
   v1.09 additions (visual only)
   ===================================================================== */
.content{ max-width:1700px; min-width:0; }

/* ---- per-cell highlight (right-click a cell) ---- */
td[data-cc-color="yellow"]{ background:#FFE680 !important; }
td[data-cc-color="orange"]{ background:#FFC785 !important; }
td[data-cc-col]{ transition:background .12s; }
.cc-pop{ position:fixed; z-index:300; display:flex; gap:7px; padding:7px 9px; background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow:0 8px 24px rgba(15,23,42,.22); }
.cc-sw{ width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #CBD5E1; cursor:pointer; padding:0; transition:transform .1s; }
.cc-sw:hover{ transform:scale(1.18); }
.cc-sw.on{ box-shadow:0 0 0 2px var(--steel); }
.cc-yellow{ background:#FFD633; } .cc-orange{ background:#FFA64D; }
.cc-none{ background:#fff linear-gradient(135deg,transparent 45%,#DC2626 45%,#DC2626 55%,transparent 55%); }
.cc-hint{ margin-left:auto; align-self:end; font-size:11.5px; color:var(--ink-faint); padding-bottom:8px; }

/* ---- Welders statistics: one line per welder, space used well ---- */
.welders-stats thead th{ padding:10px 10px; }
.welders-stats tbody td{ padding:9px 10px; white-space:nowrap; }
.welders-stats .avatar{ width:26px; height:26px; font-size:10.5px; margin-right:7px; }
.welders-stats .rate{ min-width:104px; gap:6px; }
.welders-stats .rate b{ min-width:50px; }
.welders-stats .cell-remark{ max-width:170px; overflow:hidden; text-overflow:ellipsis; }

/* ---- graphic status picker ---- */
@keyframes stPop{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:none; } }
.st-menu{ position:fixed; z-index:200; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 44px rgba(15,23,42,.30); padding:6px; animation:stPop .12s ease-out; }
.st-menu-title{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; padding:6px 10px 5px; }
.st-opt{ display:flex; align-items:center; gap:11px; width:100%; border:0; background:transparent; padding:7px 10px; border-radius:10px; cursor:pointer; font:600 13px var(--font-ui); color:var(--ink); text-align:left; }
.st-opt:hover, .st-opt.is-current{ background:#F1F5F9; }
.st-dot{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px; box-shadow:0 1px 3px rgba(15,23,42,.3), inset 0 1px 0 rgba(255,255,255,.3); flex-shrink:0; }
.st-tick{ margin-left:auto; color:#16A34A; font-weight:700; }
.st-opt-PENDING .st-dot{ background:linear-gradient(135deg,#A3B1C6,#64748B); }
.st-opt-ACC .st-dot{ background:linear-gradient(135deg,#34D399,#15803D); }
.st-opt-REPAIR .st-dot{ background:linear-gradient(135deg,#60A5FA,#1D4ED8); }
.st-opt-RESHOOT .st-dot{ background:linear-gradient(135deg,#FB923C,#C2410C); }
.st-opt-RETAKE .st-dot{ background:linear-gradient(135deg,#A78BFA,#6D28D9); }
.st-opt-REJECT .st-dot{ background:linear-gradient(135deg,#F87171,#991B1B); }

/* ---- status result window ---- */
.modal-backdrop{ backdrop-filter:blur(2px); }
.modal-status{ --g1:#64748B; --g2:#334155; width:470px; border-radius:16px; overflow:hidden; animation:stPop .16s ease-out; }
.modal-status.st-ACC{ --g1:#34D399; --g2:#15803D; } .modal-status.st-REPAIR{ --g1:#60A5FA; --g2:#1D4ED8; }
.modal-status.st-RESHOOT{ --g1:#FB923C; --g2:#C2410C; } .modal-status.st-RETAKE{ --g1:#A78BFA; --g2:#6D28D9; }
.modal-status.st-REJECT{ --g1:#F87171; --g2:#991B1B; }
.modal-status .st-head{ gap:13px; justify-content:flex-start; padding:18px 20px; border-bottom:0; color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2)); }
.st-badge{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.st-titles{ flex:1; min-width:0; }
.modal-status .st-head h3{ font-size:16.5px; color:#fff; letter-spacing:.01em; }
.st-weld{ display:inline-block; margin-top:4px; font-family:var(--font-mono); font-size:11.5px; background:rgba(0,0,0,.2); padding:2px 9px; border-radius:999px; }
.modal-status .modal-close{ color:#fff; opacity:.8; font-size:24px; }
.modal-status .modal-close:hover{ opacity:1; }
.modal-status .modal-body{ padding:20px 22px 8px; }
.modal-status label{ font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-muted); }
.modal-status input[type=text], .modal-status input[type=number], .modal-status select{ padding:10px 12px; border-radius:9px; border:1.5px solid #D9E1EB; font-size:14px; }
.modal-status input:focus, .modal-status select:focus{ outline:none; border-color:var(--g2); box-shadow:0 0 0 3px rgba(100,116,139,.18); }
.st-optional{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink-faint); margin-left:4px; }
.modal-status .modal-foot{ background:#F8FAFC; padding:14px 22px; }
.st-save{ color:#fff; padding:10px 22px; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 2px 6px rgba(15,23,42,.25); }
.st-save:hover{ filter:brightness(1.08); background:linear-gradient(135deg,var(--g1),var(--g2)); }

/* ---- Welding materials page ---- */
.mat-project{ padding:0; overflow:hidden; }
.mat-top{ display:flex; align-items:center; gap:12px; padding:15px 20px; background:linear-gradient(90deg,var(--navy),var(--navy-2)); }
.mat-code{ font-family:var(--font-mono); font-weight:700; font-size:12.5px; background:var(--amber); color:var(--navy); padding:3px 10px; border-radius:7px; }
.mat-title{ margin:0; font-size:16px; color:#fff; font-weight:600; }
.mat-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; padding:16px 20px 4px; }
.mat-kpi{ border:1px solid var(--border); border-top:4px solid var(--steel); border-radius:10px; padding:10px 14px; background:#fff; }
.mat-kpi span{ display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
.mat-kpi strong{ display:block; margin-top:3px; font-family:var(--font-mono); font-size:21px; color:var(--ink); }
.mat-kpi small{ font-size:12px; font-weight:500; color:var(--ink-faint); }
.mat-kpi.k-blue{ border-top-color:#3B82F6; } .mat-kpi.k-teal{ border-top-color:#14B8A6; }
.mat-kpi.k-amber{ border-top-color:#F59E0B; } .mat-kpi.k-violet{ border-top-color:#8B5CF6; }
.mat-alert{ margin:12px 20px 0; padding:9px 13px; border-radius:8px; background:#FEF2F2; border:1px solid #FCA5A5; color:#B91C1C; font-size:12.5px; }
.mat-note{ margin:10px 20px 0; padding:8px 13px; border-radius:8px; background:#F1F5F9; color:var(--ink-muted); font-size:12px; }
.mat-section{ padding:18px 20px 9px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); }
details.mat-eq{ margin:0 20px 10px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.mat-eq > summary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; cursor:pointer; list-style:none; user-select:none; background:#F3F7FC; border-left:4px solid var(--steel); }
.mat-eq > summary::-webkit-details-marker{ display:none; }
.mat-eq[open] > summary .eq-chevron{ transform:rotate(90deg); }
.mat-eq[open] > summary{ border-bottom:1px solid var(--border); }
.mat-tag{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; background:var(--navy); color:#fff; padding:2px 9px; border-radius:6px; }
.mat-eq-name{ font-weight:600; font-size:13.5px; }
.mat-eq-meta{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.mat-pill{ font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; background:#DBEAFE; color:#1D4ED8; }
.mat-pill.soft{ background:#E7EDF4; color:#475569; } .mat-pill.warn{ background:#FEE2E2; color:#B91C1C; }
.mat-empty{ padding:12px 16px; color:var(--ink-faint); font-size:12.5px; }
.mat-table{ border-collapse:separate; border-spacing:0; }
.mat-table thead th{ background:#fff; color:var(--ink-muted); padding:9px 14px; border-bottom:2px solid #E2E8F0; white-space:nowrap; }
.mat-table tbody td{ padding:9px 14px; border-bottom:1px solid #EEF2F7; white-space:nowrap; background:#fff; }
.mat-table tbody tr:nth-child(even) td{ background:#F8FAFC; }
.mat-table tbody tr:hover td{ background:#EAF3FB; }
.mat-table tbody tr:last-child td{ border-bottom:none; }
.mat-table th.num, .mat-table td.num{ text-align:right; }
.qty{ display:inline-block; font-family:var(--font-mono); font-weight:700; background:#FEF3C7; color:#92400E; padding:3px 10px; border-radius:7px; }
.mat-project > .table-scroll{ padding:0 20px 18px; }
.mat-total{ border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.mat-filter{ padding:16px 20px; }

.chip-more{ background:#CFDCEA; color:var(--navy); cursor:help; }

/* =====================================================================
   v1.12 - calmer welding-process tags + clearer selection action bar
   ===================================================================== */
.chip.proc-gtaw, .chip.proc-smaw, .chip.proc-saw, .chip.proc-gmaw{
  --pc:#94A3B8; background:#F4F7FB; color:#3B4B61; border:1px solid #E1E8F0;
  display:inline-flex; align-items:center; gap:6px; font-weight:600; letter-spacing:.02em;
}
.chip.proc-gtaw::before, .chip.proc-smaw::before, .chip.proc-saw::before, .chip.proc-gmaw::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--pc); flex-shrink:0;
}
.chip.proc-gtaw{ --pc:#38A3D8; } .chip.proc-smaw{ --pc:#E8A33D; }
.chip.proc-saw{ --pc:#9B87D9; }  .chip.proc-gmaw{ --pc:#4DB88A; }

.action-bar{
  background:linear-gradient(135deg,#1B3350,#12233A); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:12px 14px 12px 18px; box-shadow:0 14px 34px rgba(15,30,50,.35);
}
.action-bar > span{ display:flex; align-items:center; gap:10px; font-size:13px; color:#D5E1EE; font-weight:500; }
.action-bar > span strong{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px;
  background:var(--amber); color:var(--navy); border-radius:999px; font-size:14px; font-weight:700;
}
.action-bar .btn{ border-radius:10px; font-weight:600; padding:8px 15px; border:1px solid transparent; transition:transform .1s, filter .15s, background .15s; }
.action-bar .btn:hover{ transform:translateY(-1px); }
.action-bar .btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.22); }
.action-bar .btn-ghost:hover{ background:rgba(255,255,255,.20); }
.action-bar .btn-danger{ background:rgba(248,113,113,.16); color:#FECACA; border-color:rgba(248,113,113,.45); }
.action-bar .btn-danger:hover{ background:rgba(248,113,113,.30); color:#fff; }
.action-bar #genRt{ background:linear-gradient(135deg,#3FA0D6,#1F6FA8); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(31,111,168,.45); }
.action-bar #genRt:hover{ filter:brightness(1.1); }
.action-bar .btn-amber{ background:linear-gradient(135deg,#FBBF3B,#E08A00); color:#2A1B00; box-shadow:0 2px 8px rgba(224,138,0,.45); }
.action-bar .btn-amber:hover{ filter:brightness(1.07); background:linear-gradient(135deg,#FBBF3B,#E08A00); }

/* joints table: softer, easier on the eyes */
.joints-card .tight-table thead th{ background:#F1F5FA; color:#5B6B80; }
.joints-card .tight-table tbody tr{ transition:background .12s; }
.joints-card input[type=checkbox]{ accent-color:#2F7FB0; width:15px; height:15px; }

/* =====================================================================
   v2.11.4 - one font family for all tags in the weld table (same as the app UI)
   ===================================================================== */
.joints-card .chip, .chip.proc-gtaw, .chip.proc-smaw, .chip.proc-saw, .chip.proc-gmaw, .chip.pwht-before, .chip.pwht-after{
  font-family:var(--font-ui); font-size:11.5px; font-weight:600; letter-spacing:.015em; padding:3px 10px; line-height:1.35;
}
.chip.pwht-before, .chip.pwht-after{
  --pc:#94A3B8; background:#F4F7FB; color:#3B4B61; border:1px solid #E1E8F0;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.chip.pwht-before::before, .chip.pwht-after::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pc); flex-shrink:0; }
.chip.pwht-before{ --pc:#E8A33D; } .chip.pwht-after{ --pc:#6C7BD9; }
.joints-card .chip-ss{ font-family:var(--font-ui); }

/* =====================================================================
   v2.12 - invoice check, contractors & contracts
   ===================================================================== */
.inv-h{ font-size:15px; margin:0 0 12px; }
.inv-hint{ background:#EFF6FF; border-color:#BFDBFE; color:#1E3A8A; font-size:13px; }
.inv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.inv-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.inv-warns{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.inv-warn{ font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; background:#E7EDF4; color:#475569; }
.inv-warn.bad{ background:#FEE2E2; color:#B91C1C; }
.inv-total td{ background:#EEF3F9 !important; font-weight:700; border-top:2px solid #CFDCEA; }
.inv-days{ margin-top:14px; } .inv-days summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--steel); padding:6px 0; }
.inv-checkbar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.inv-checkstats{ margin-left:auto; font-size:13px; color:var(--ink-muted); background:#F1F5FA; padding:6px 14px; border-radius:999px; }
.inv-checkstats strong{ color:var(--ink); font-family:var(--font-mono); }
.inv-checkbtns{ display:flex; gap:8px; }
.inv-table tr.inv-skip td{ opacity:.55; }
.inv-table input[type=checkbox]{ width:16px; height:16px; accent-color:#2F7FB0; }
.ct-used{ margin-left:auto; font-size:12px; color:#C9D7E5; }
.ct-card .mat-top{ gap:14px; flex-wrap:wrap; }
.ct-body{ padding:16px 20px 18px; }
.ct-add{ display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.ct-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.ct-foot{ margin-top:12px; }
.ct-row-actions{ display:flex; gap:8px; align-items:flex-start; justify-content:flex-end; }
.ct-edit summary{ list-style:none; cursor:pointer; } .ct-edit summary::-webkit-details-marker{ display:none; }
.ct-edit[open]{ position:relative; }
.ct-edit-body{ position:absolute; right:0; top:36px; z-index:30; width:min(760px,86vw); background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 18px 44px rgba(15,23,42,.3); }
.ct-add-contract{ margin-top:14px; border:1px dashed #BCCADB; border-radius:12px; padding:10px 14px; }
.ct-add-contract summary{ cursor:pointer; font-weight:600; font-size:13px; color:var(--steel); }
.ct-add-contract .contract-form{ margin-top:12px; }
.ct-rename summary{ cursor:pointer; font-size:12px; color:#C9D7E5; list-style:none; }
.ct-rename form{ display:flex; gap:6px; margin-top:6px; }
.cc-hint-note{ font-size:11.5px; color:var(--ink-faint); }
.modal-status .field select{ width:100%; }
.ct-edit-row{ display:none; } .ct-edit-row.open{ display:table-row; }
.ct-edit-row td{ background:#F3F7FC !important; padding:14px 16px !important; }

/* ===== v2.12.3 additions: alerts, qualification, audit, progress ===== */
.alert-box{ border-radius:10px; padding:10px 14px; margin:0 0 12px; font-size:13px; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.alert-red{ background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; }
.alert-amber{ background:#FFFBEB; border:1px solid #FCD34D; color:#92400E; }
.alert-chip{ background:#fff; border:1px solid currentColor; border-radius:999px; padding:2px 10px; font-weight:600; font-size:12px; }
.alert-set{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-muted); margin:0 0 14px; }
.alert-set input{ width:74px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; }
tr.row-alert td{ background:#FFF5F5; }
.warn-flag{ font-style:normal; color:#DC2626; margin-left:6px; }
.qchip{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.q-ok{ background:#DCFCE7; color:#166534; } .q-soon{ background:#FEF3C7; color:#92400E; } .q-expired{ background:#FEE2E2; color:#991B1B; }
.late{ color:#B91C1C; }
.audit-table td{ font-size:12.5px; vertical-align:top; } .audit-table .detail{ max-width:520px; word-break:break-word; color:#475569; }
.pager{ display:flex; gap:10px; align-items:center; margin-top:12px; }
.pg-row{ display:flex; align-items:center; gap:10px; margin:7px 0; font-size:12.5px; }
.pg-row .pg-label{ width:130px; flex-shrink:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-bar{ flex:1; height:16px; background:#E2E8F0; border-radius:6px; overflow:hidden; display:flex; min-width:80px; }
.pg-bar i{ display:block; height:100%; } .pg-val{ width:130px; flex-shrink:0; text-align:right; font-family:var(--font-mono); font-size:12px; }
.pg-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; margin-bottom:8px; } .pg-legend b{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.limit-line{ position:relative; } .limit-line:after{ content:""; position:absolute; top:-3px; bottom:-3px; width:2px; background:#DC2626; left:var(--lim); }
.chart-svg{ width:100%; height:auto; display:block; }
.hamburger{ display:none; }
.nav-badge{ margin-left:8px; background:#DC2626; color:#fff; border-radius:999px; font-size:10.5px; padding:1px 7px; font-weight:700; }
.topbar-m{ display:none; }
.nav-backdrop{ display:none; }

/* ===== Mobile / phone layout (v2.12.3) ===== */
@media (max-width: 820px){
  html,body{ overflow-x:hidden; }
  .topbar-m{ display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30; height:48px; padding:0 12px; background:var(--navy); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); }
  .topbar-m .hamburger{ display:block; background:none; border:0; color:#fff; font-size:26px; line-height:1; padding:4px 8px; cursor:pointer; }
  .tb-title{ font-weight:600; font-size:15px; }
  .shell{ display:block; }
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:270px; max-width:85vw; height:100vh; z-index:50; transform:translateX(-105%); transition:transform .2s; }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .nav-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
  .content{ padding:14px 12px 50px; max-width:100%; }
  .page-header h1{ font-size:22px; }
  .stat-tiles{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-tile strong{ font-size:17px; }
  .two-col-form{ grid-template-columns:1fr !important; }
  .grid-2{ flex-direction:column; }
  .card{ padding:14px 12px; overflow-x:auto; }
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ font-size:12.5px; }
  .btn{ min-height:38px; }
  input,select,textarea{ font-size:16px; max-width:100%; }
  .filter-row .field{ flex:1 1 140px; }
  .pg-row{ flex-wrap:wrap; } .pg-row .pg-label{ width:100%; } .pg-val{ width:auto; margin-left:auto; }
  .modal{ max-width:94vw; }
  .project-grid .project-card{ max-width:none; width:100%; }
  .back-bar{ margin-bottom:8px; }
}
/* Weld drawer (classic menu) */
.nav-drawer > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; }
.nav-drawer > summary::-webkit-details-marker{ display:none; }
.drawer-chev{ margin-left:auto; font-size:12px; opacity:.7; transition:transform .15s; }
.nav-drawer[open] .drawer-chev{ transform:rotate(180deg); }
.drawer-items{ margin:2px 0 6px 18px; padding-left:10px; border-left:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; }
.nav-sub{ display:block; padding:7px 10px; border-radius:8px; font-size:13px; color:#C7D6E6; text-decoration:none; }
.nav-sub:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-sub.active{ color:#FBBF24; background:rgba(255,255,255,.08); }
/* bulk select toolbar */
.sel-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; padding:8px 12px; background:#fff; border:1px solid var(--border); border-radius:10px; position:sticky; top:0; z-index:5; }
.sel-count{ font-size:12.5px; color:var(--ink-muted); margin:0 6px; font-family:var(--font-mono); }
.sel-cell{ width:26px; text-align:center; } .sel-cell input,.history-head input.sel-row{ width:16px; height:16px; cursor:pointer; vertical-align:middle; }
body.viewer .sel-cell, body.viewer .sel-toolbar{ display:none; }

/* licence banner + page */
.lic-banner{ padding:9px 14px; border-radius:10px; margin:0 0 14px; font-size:13px; font-weight:600; }
.lic-banner a{ margin-left:8px; text-decoration:underline; color:inherit; }
.lic-info{ background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE; } .lic-warn{ background:#FFFBEB; color:#92400E; border:1px solid #FCD34D; } .lic-error{ background:#FEF2F2; color:#991B1B; border:1px solid #FCA5A5; }
.lic-wrap{ max-width:760px; margin:4vh auto; padding:0 14px; } .lic-box{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:16px; }
.lic-box h2{ margin:0 0 6px; } .lic-box .field{ margin:10px 0; } .lic-box input[type=text],.lic-box input[type=email]{ width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px; font:inherit; }

.brand-sub{ font-size:10.5px; line-height:1.25; }