/* FieldLedger — look and feel.
   A quiet, light work tool that reads like a well-kept ledger. Black ink on white, grey for
   anything secondary, blue only for links and focus. Green / amber / red appear only as status
   (done or in profit, needs attention, overdue or in loss).
   The older variable and class names (--amber, .btn-amber, .card …) are kept because the
   markup and app.js refer to them. */
:root{
  --ink:#1F2429;
  --ink-soft:#3A4149;
  --paper:#FFFFFF;
  --side:#F4F5F6;
  --soft:#F7F8F9;
  --card:#FFFFFF;
  --brand:#1F5BA6;
  --brand-dark:#184A88;
  --brand-tint:#EAF1FA;
  --amber:#D98E04;
  --amber-dark:#A65F00;
  --slate:#5C636C;
  --slate-light:#6B727B;
  --line:#E4E6E9;
  --line-strong:#CDD1D6;
  --head:#F7F8F9;
  --hover:#F7F8F9;
  --green:#1A7F4B;
  --green-bg:#E6F4EC;
  --red:#C42B1C;
  --red-bg:#FCEBE9;
  --amber-bg:#FDF3DF;
  --amber-text:#8A4F00;
  --amber-tint:#FDF3DF;
  --shadow-sm:none;
  --shadow-lg:0 20px 50px rgba(20,24,28,0.18);
  --grad-brand:var(--ink);
  --grad-dark:var(--side);
  --font-ui:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:var(--font-ui);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--brand-tint); }
a{ color:var(--brand); }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ===== Layout shell ===== */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:232px;
  flex-shrink:0;
  background:var(--side);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:20;
}
.brand{ padding:24px 20px 16px; }
.brand-name{ font-size:19px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.brand-name span{ font-weight:400; color:var(--slate); margin-left:4px; font-size:15px; }
.brand-sub{ font-size:13px; color:var(--slate); margin-top:1px; }
nav.main-nav{ padding:4px 12px 16px; flex:1; overflow-y:auto; scrollbar-width:thin; }
.nav-group{ font-size:12px; color:var(--slate-light); margin:18px 10px 4px; }
.nav-item{
  display:block;
  width:100%;
  text-align:left;
  padding:7px 10px;
  border-radius:6px;
  background:none;
  border:none;
  color:var(--ink-soft);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  margin-bottom:1px;
}
.nav-item:hover{ background:#E9EBED; color:var(--ink); }
.nav-item.active{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 0 0 1px var(--line); }
.nav-footer{
  padding:16px 20px 20px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--slate);
  display:flex;
  flex-direction:column;
  gap:8px;
}
#currentUserBar{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; color:var(--ink); }
#currentUserBar strong{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#connectionBadge{ font-size:12px; color:var(--slate-light); }
#connectionBadge::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--green); margin-right:6px; vertical-align:1px;
}
#connectionBadge.offline::before{ background:var(--red); }
.nav-data-links{ display:flex; gap:14px; flex-wrap:wrap; }
.link-btn{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--brand); font-size:13px; font-weight:500; text-align:left;
}
.link-btn:hover{ text-decoration:underline; text-underline-offset:2px; }
#resetDataBtn{ color:var(--red); font-size:12px; margin-top:6px; }

.main{
  margin-left:232px;
  flex:1;
  min-width:0; /* wide tables scroll inside their panel instead of stretching the page */
  padding:32px 44px 72px;
  max-width:1240px;
}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:12px;
}
.page-head h1{ font-size:24px; margin:0 0 2px; font-weight:600; letter-spacing:-0.015em; }
.page-head p{ margin:0; color:var(--slate); font-size:14px; }
.section-title{ font-size:15px; font-weight:600; margin:0 0 8px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
  padding:8px 16px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  line-height:1.3;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.12s ease, border-color 0.12s ease;
}
.btn:hover{ background:#373E46; border-color:#373E46; }
/* The main action button. Named for the old amber look; it is now the ink primary. */
.btn-amber{ background:var(--ink); color:#fff; }
.btn-amber:hover{ background:#373E46; color:#fff; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--soft); border-color:#B5BBC2; }
.btn-danger{ background:#fff; color:var(--red); border-color:#EDC3BE; }
.btn-danger:hover{ background:var(--red-bg); border-color:#E3A9A2; }
.btn-small{ padding:5px 10px; font-size:13px; }
.btn-link{ background:none; border-color:transparent; color:var(--slate); }
.btn-link:hover{ background:none; border-color:transparent; color:var(--ink); text-decoration:underline; }

/* ===== Totals: one ruled line of figures, like a ledger. The last figure is the total and gets
   the accountant's double rule. ===== */
.cards{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  margin-bottom:40px;
}
.card{
  flex:1 1 150px;
  padding:14px 20px 16px;
  border-left:1px solid var(--line);
}
.card:first-child{ border-left:none; padding-left:0; }
.card-label{ font-size:13px; color:var(--slate); margin-bottom:4px; }
.card-value{ font-size:24px; font-weight:600; letter-spacing:-0.01em; line-height:1.25; }
.card-value.profit{ color:var(--green); }
.card-value.loss{ color:var(--red); }
.card-total .card-value{ display:inline-block; border-bottom:3px double currentColor; padding-bottom:1px; }
.card-sub{ font-size:13px; color:var(--slate-light); margin-top:2px; }

/* ===== Needs attention: one list, the dot says how urgent ===== */
.attention{ margin-bottom:40px; }
.attention .section-title{ padding-bottom:8px; border-bottom:1px solid var(--line-strong); margin-bottom:0; }
.attention-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:14px 0 14px 22px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.attention-item::before{
  content:""; position:absolute; left:2px; top:21px;
  width:9px; height:9px; border-radius:50%; background:var(--slate-light);
}
.attention-item.sev-urgent::before{ background:var(--red); }
.attention-item.sev-warn::before{ background:var(--amber); }
.attention-item.sev-info::before{ background:var(--brand); }
.attention-text{ flex:1; min-width:0; padding-top:3px; }
.attention-text strong{ font-weight:600; }
.attention-sub{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; color:var(--slate); margin-top:4px; }
.attention-clear{ display:none; margin:0; padding:14px 0; color:var(--slate); border-bottom:1px solid var(--line); }
.attention.is-clear .attention-clear{ display:block; }
.text-loss{ color:var(--red); font-weight:600; }

/* ===== Sections and tables: no boxes, just rules ===== */
.panel{ margin-bottom:40px; }
.panel-head{
  padding:0 0 8px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.panel-head h2{ font-size:15px; margin:0; font-weight:600; }
.panel-head .hint{ font-size:13px; color:var(--slate-light); }
.panel-body{ padding:0; overflow-x:auto; border-top:1px solid var(--line-strong); }
.panel-body.padded{
  padding:20px;
  border:1px solid var(--line);
  border-radius:8px;
}
.panel-head + .panel-body.padded{ border-top-color:var(--line); }
/* Dashboard notices used elsewhere keep a coloured edge. */
.panel.notice .panel-body{ border:1px solid var(--line); border-left:4px solid var(--slate-light); border-radius:6px; }
.notice-urgent .panel-body{ border-left-color:var(--red) !important; }
.notice-warn .panel-body{ border-left-color:var(--amber) !important; }
.notice-info .panel-body{ border-left-color:var(--brand) !important; }

table{ width:100%; border-collapse:collapse; }
th, td{
  text-align:left;
  padding:10px 12px;
  font-size:14px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  vertical-align:middle;
}
th:first-child, td:first-child{ padding-left:0; }
th:last-child, td:last-child{ padding-right:0; }
th{ font-size:13px; color:var(--slate); font-weight:500; background:none; }
tbody tr:hover{ background:var(--hover); }
td.num, th.num{ text-align:right; }
td.wrap{ white-space:normal; }
/* Row actions read as links, not a wall of buttons. */
td .btn-ghost.btn-small, td .btn-danger{
  background:none; border-color:transparent; padding:4px 6px; font-weight:500;
}
td .btn-ghost.btn-small{ color:var(--brand); }
td .btn-ghost.btn-small:hover{ background:var(--brand-tint); }
td .btn-danger:hover{ background:var(--red-bg); }

/* Status: a coloured dot and plain text. */
.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  color:var(--ink-soft);
}
.pill-profit::before, .pill-loss::before, .pill-warn::before{
  content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0;
}
.pill-profit{ color:var(--green); }
.pill-loss{ color:var(--red); }
.pill-warn{ color:var(--amber-text); }
.pill-warn::before{ background:var(--amber); }
.pill-neutral{ color:var(--slate); }
/* Machine IDs added to a job are removable tags, not statuses. */
#jobMachineIdChips .pill{
  color:var(--ink); background:var(--soft); border:1px solid var(--line-strong);
  border-radius:4px; padding:2px 4px 2px 8px;
}
#jobMachineIdChips .pill::before{ display:none; }
.panel-body .hint, .hint{ font-size:13px; color:var(--slate-light); }
.job-detail-line{ font-size:13px; color:var(--slate); }

.empty-state{ padding:28px 0; color:var(--slate); font-size:14px; }

/* ===== Forms ===== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:14px; font-weight:500; color:var(--ink); }
.field label .hint{ display:block; font-weight:400; margin-top:1px; }
.field-error{ font-size:13px; color:var(--red); }
input, select, textarea{
  font-family:inherit;
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  width:100%;
  transition:border-color 0.12s ease, box-shadow 0.12s ease;
}
input::placeholder, textarea::placeholder{ color:#8E949B; }
input:hover, select:hover, textarea:hover{ border-color:#AEB4BB; }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(31,91,166,0.15);
}
input[type="checkbox"], input[type="radio"]{ accent-color:var(--ink); width:auto; }
textarea{ resize:vertical; min-height:72px; }
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

/* ===== New job: sections on the left, the bill and Save on the right ===== */
.job-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:48px;
  align-items:start;
}
.form-section{ padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.form-section:last-child{ border-bottom:none; margin-bottom:0; }
.form-section h3, .subsection-head h3{ font-size:16px; font-weight:600; margin:0 0 16px; }
.job-summary{
  position:sticky;
  top:24px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:20px;
}
.job-summary h3{ font-size:16px; font-weight:600; margin:0 0 8px; }
.job-summary .calc-strip{ display:block; background:none; border:none; padding:0; margin:0; }
.job-summary .calc-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.job-summary .calc-item .label{ font-size:14px; color:var(--slate); font-weight:400; }
.job-summary .calc-item .value{ font-size:15px !important; font-weight:600; margin:0; }
.job-summary .calc-item:nth-child(3) .label{ color:var(--ink); font-weight:500; }
.job-summary .calc-item:nth-child(3) .value{ font-size:20px !important; }
.job-summary .form-actions{ flex-direction:column; border-top:none; padding-top:0; }
.job-summary .form-actions .btn{ width:100%; }
.job-summary .hint{ margin-top:8px; }

.subsection{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.subsection-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.photo-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.photo-thumb{ position:relative; width:72px; height:72px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.photo-thumb .remove-photo{
  position:absolute; top:3px; right:3px; background:rgba(0,0,0,0.6); color:#fff;
  border:none; border-radius:50%; width:18px; height:18px; font-size:11px; line-height:1; cursor:pointer;
}
.photo-add-btn{
  width:72px; height:72px; border:1px dashed var(--line-strong); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color:var(--slate); cursor:pointer; background:#fff; flex-shrink:0;
}
.photo-add-btn:hover{ border-color:var(--ink); color:var(--ink); }
.receipt-cell{ width:34px; }
.receipt-add{
  width:34px; height:34px; border:1px dashed var(--line-strong); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  color:var(--slate); cursor:pointer; background:#fff;
}
.receipt-add:hover{ border-color:var(--ink); color:var(--ink); }
.receipt-thumb-wrap{ position:relative; width:34px; height:34px; }
.receipt-thumb-wrap img{ width:100%; height:100%; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:zoom-in; }
.receipt-thumb-wrap .remove-receipt{
  position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--red); color:#fff; border:none; font-size:9px; line-height:1; cursor:pointer;
}
.receipt-mini{ width:34px; height:34px; border-radius:6px; object-fit:cover; border:1px solid var(--line); cursor:zoom-in; }
.pi-line-item{ border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; position:relative; background:#fff; }
.pi-line-item .form-grid{ grid-template-columns:1fr 1fr 1fr; gap:10px; }
.pi-line-item textarea{ min-height:56px; }
.pi-line-item .remove-pi-line{ position:absolute; top:8px; right:8px; }

/* ===== Lightbox ===== */
.lightbox-backdrop{
  position:fixed; inset:0; background:rgba(14,17,20,0.9);
  display:none; align-items:center; justify-content:center;
  z-index:300; padding:40px;
}
.lightbox-backdrop.open{ display:flex; }
.lightbox-backdrop img{ max-width:100%; max-height:100%; border-radius:6px; }
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.14); color:#fff; border:none;
  width:42px; height:42px; border-radius:50%; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:rgba(255,255,255,0.28); }
.lightbox-download{ position:fixed; top:22px; right:72px; color:#fff; font-size:14px; }
.lightbox-close{ position:fixed; top:20px; right:26px; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

/* ===== Part and expense rows on a job ===== */
.row-line{
  display:grid;
  grid-template-columns:1.3fr 55px 80px 80px 0.9fr 70px 32px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.row-line.expense{ grid-template-columns:1fr 100px 1fr 44px 32px; }
.row-line-head{ font-size:13px; color:var(--slate); font-weight:500; }
.icon-btn{
  background:none; border:none; color:var(--slate);
  cursor:pointer; font-size:16px; line-height:1;
  padding:4px; border-radius:6px;
}
.icon-btn:hover{ color:var(--red); background:var(--red-bg); }
.add-row-btn{
  background:#fff; border:1px solid var(--line-strong);
  color:var(--ink); padding:6px 12px; border-radius:6px;
  font-size:13px; font-weight:500; cursor:pointer; margin-top:4px;
}
.add-row-btn:hover{ background:var(--soft); border-color:#AEB4BB; }

.calc-strip{
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  padding:14px 0;
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.calc-item .label{ font-size:13px; color:var(--slate); }
.calc-item .value{ font-size:18px; font-weight:600; margin-top:2px; }
.calc-item .value.profit{ color:var(--green); }
.calc-item .value.loss{ color:var(--red); }

/* ===== Filters ===== */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; padding:0 0 16px; align-items:flex-end; }
.filter-bar .field{ min-width:150px; }
.filter-bar .field label{ font-size:13px; color:var(--slate); }
.filter-bar input, .filter-bar select{ padding:7px 9px; font-size:14px; }
.panel-body > .filter-bar{ padding-top:16px; }

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(20,24,28,0.45);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:48px 20px;
  z-index:100;
  overflow-y:auto;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:#fff;
  border-radius:10px;
  width:100%;
  max-width:460px;
  padding:24px;
  box-shadow:var(--shadow-lg);
}
.modal h2{ font-size:18px; font-weight:600; margin:0 0 16px; letter-spacing:-0.01em; }
.modal .form-grid{ grid-template-columns:1fr; }
.modal .panel-body{ border-top-color:var(--line); }

/* Sign-in, setup and reset: a plain page, not a floating card. */
.modal-backdrop.auth-screen{ background:#fff; padding-top:12vh; }
.auth-screen .modal{ box-shadow:none; padding:0 4px; max-width:380px; margin-top:0 !important; }
.auth-screen .modal h2{ font-size:22px; }
.auth-brand{ font-size:20px; font-weight:700; letter-spacing:-0.01em; margin-bottom:40px; }
.auth-brand span{ font-weight:400; color:var(--slate); margin-left:4px; font-size:16px; }
.auth-screen .form-actions{ border-top:none; padding-top:0; }
.auth-screen .form-actions .btn{ flex:1; }

.toast{
  position:fixed;
  bottom:24px; right:24px;
  max-width:min(460px, calc(100vw - 48px));
  background:var(--ink);
  color:#fff;
  padding:12px 18px;
  border-radius:6px;
  font-size:14px;
  box-shadow:0 8px 24px rgba(20,24,28,0.22);
  z-index:200;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.18s ease, transform 0.18s ease;
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

.view{ display:none; }
.view.active{ display:block; }
.job-card-list{ display:flex; flex-direction:column; }

/* ===== Customer portal: a slim top bar instead of an empty sidebar ===== */
#customerPortalShell{ flex-direction:column; }
.portal-bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 44px; border-bottom:1px solid var(--line); background:#fff;
}
.portal-bar-user{ display:flex; gap:16px; align-items:baseline; font-size:14px; color:var(--slate); }
#customerPortalShell .main{ margin-left:0; width:100%; }

.mobile-topbar{ display:none; }
@media (max-width: 880px){
  .sidebar{
    width:270px;
    transform:translateX(-100%);
    transition:transform 0.2s ease;
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,0.18); }
  .sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(20,24,28,0.4); z-index:19; }
  .sidebar-overlay.show{ display:block; }
  .mobile-topbar{
    display:flex;
    align-items:center;
    gap:10px;
    position:fixed;
    top:0; left:0; right:0;
    height:56px;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:0 12px;
    z-index:21;
  }
  .mobile-topbar .brand-name{ font-size:17px; margin:0; }
  .hamburger-btn{ background:none; border:none; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; padding:6px 8px; }
  .main{ margin-left:0; padding:80px 16px 64px; max-width:100%; }
  .page-head{ flex-direction:column; align-items:flex-start; margin-bottom:22px; }
  .page-head h1{ font-size:22px; }
  .cards{ display:grid; grid-template-columns:1fr 1fr; border-bottom:none; }
  .card, .card:first-child{ border-left:none; padding:12px 0; border-bottom:1px solid var(--line); }
  .card:nth-child(even){ padding-left:16px; border-left:1px solid var(--line); }
  .card-value{ font-size:20px; }
  .attention-item{ flex-direction:column; gap:10px; }
  .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; }
  .calc-strip{ grid-template-columns:1fr 1fr; }
  .modal{ max-width:calc(100vw - 24px); max-height:calc(100vh - 48px); overflow-y:auto; padding:18px; }
  .modal-backdrop{ padding:16px 8px; }
  .auth-screen .modal{ max-height:none; padding:0 8px; }
  #partsRows, #expenseRows, .row-line-head{ overflow-x:auto; }
  .row-line, .row-line-head{ min-width:560px; }
  /* Long free-text columns keep a readable width and the table scrolls sideways instead. */
  td.wrap{ min-width:240px; }

  /* New job on a phone: one column, and the Save buttons stay pinned to the bottom. */
  .job-layout{ display:block; }
  /* The summary box dissolves so its Save bar can stick to the bottom of the whole form. */
  .job-summary{ display:contents; }
  .job-summary h3{ border-top:1px solid var(--line-strong); padding-top:20px; margin-top:4px; }
  .job-summary .form-actions{
    position:sticky; bottom:0; z-index:5;
    flex-direction:row; background:#fff;
    margin:16px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
  }
  .job-summary .form-actions .btn{ width:auto; flex:1 1 40%; }
  .job-summary .form-actions .btn-link{ flex:0 0 auto; }

  .portal-bar{ padding:14px 16px; }
  #customerPortalShell .main{ padding:22px 16px 56px; }
}
@media (max-width: 480px){
  .calc-strip{ grid-template-columns:1fr; }
  th, td{ font-size:13px; }
}

/* ===== Wide tables on a phone swipe sideways while the first column stays put ===== */
@media (max-width: 880px){
  table.sticky-first th:first-child,
  table.sticky-first td:first-child{
    position:sticky; left:0; z-index:1;
    background:#fff;
    box-shadow:1px 0 0 var(--line);
    padding-right:12px;
  }
  table.sticky-first tbody tr:hover td:first-child{ background:var(--hover); }
}
button:disabled{ opacity:0.5; cursor:not-allowed; }

/* ===== Print / PDF (invoices, job detail sheets) ===== */
#printArea{ display:none; }
@media print{
  @page{ margin: 14mm 12mm; }
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ display:block; position:absolute; top:0; left:0; width:100%; }
  .print-doc{
    page-break-after:always; font-family:'Inter',sans-serif; color:#1C2530;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-doc:last-child{ page-break-after:auto; }
  .print-doc table{ width:100%; border-collapse:collapse; margin:14px 0; }
  .print-doc th{
    background:#1C2530; color:#fff; padding:9px 10px; font-size:11px;
    text-transform:uppercase; letter-spacing:0.03em; text-align:left;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-doc td{ border-bottom:1px solid #E4E1D8; padding:9px 10px; font-size:12.5px; text-align:left; vertical-align:top; }
  .print-doc tbody tr:nth-child(even){ background:#FAF8F3; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print-logo-mark{
    width:110px; height:110px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, #E8A23D, #C8811F); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:40px; font-family:'Inter',sans-serif;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .print-doc .print-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:18px; padding-bottom:14px; border-bottom:3px solid #E8A23D;
  }
  .print-doc .print-title{ font-size:24px; font-weight:800; color:#1C2530; letter-spacing:-0.01em; }
  .print-doc .quotation-to{ border-left:4px solid #E8A23D; padding-left:12px; }
  .print-doc .quotation-to .label{ font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:#E8A23D; }
  .print-doc .print-total-row td{ font-weight:800; font-size:14px; background:#1C2530; color:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print-doc .pi-accent-link{ color:#C8811F; font-weight:600; }
  .print-doc .print-footer{ margin-top:26px; padding-top:12px; border-top:1px solid #E4E1D8; font-size:10.5px; color:#8A93A0; text-align:center; }
}


/* Portal search sits directly above its table, not in a box of its own. */
#customerPortalShell .panel-body.padded{ border:none; border-radius:0; padding:0 0 12px; }

/* Machines on a job, one under the other, each with its own photos */
.machine-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.machine-card{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.machine-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.part-photos{ margin:0 0 12px; }