/* ============================================================
   SUJUMA QUOTATION PORTAL — style.css
   Brand tokens pulled from the Sujuma mark:
     Green #11C009  Blue #051ACB  Red #EC0000

   Sections:
     1. Fonts / tokens
     2. Base / reset
     3. Buttons
     4. App shell / sidebar
     5. Main head
     6. Forms
     7. Bill-of-items table
     8. Totals
     9. Status pill
    10. Summary / quote plate
    11. Alerts
    12. Filters row (history page)
    13. History table
    14. Empty state / loading row
    15. Modal
    16. Spinner
    17. Utility classes
    18. Print / PDF
    19. Responsive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */

:root{
  --ink:        #10151c;
  --ink-soft:   #3b4552;
  --muted:      #68717d;
  --faint:      #9aa2ac;
  --paper:      #f4f5f2;
  --panel:      #ffffff;
  --panel-hover:#fafaf8;
  --line:       #e1e4df;
  --line-soft:  #ecefea;

  --green:      #11c009;
  --blue:       #051acb;
  --red:        #ec0000;

  --green-tint: #e7f9e5;
  --blue-tint:  #e7e9fb;
  --red-tint:   #fde8e8;

  /* Compatibility aliases — some older markup/scripts reference these
     generic names; keep them pointed at the brand tokens above so
     nothing silently falls back to an undefined color. */
  --accent:     var(--green);
  --accent-ink: #052b02;
  --border:     var(--line);
  --text:       var(--ink);
  --text-muted: var(--muted);

  --font-head:  'Space Grotesk', sans-serif;
  --font-body:  'Inter', sans-serif;
  --font-plate: 'Space Grotesk', sans-serif;

  --radius: 10px;
  --radius-sm: 6px;

  --shadow-sm: 0 1px 2px rgba(16,21,28,.04);
  --shadow-md: 0 10px 28px rgba(16,21,28,.06);
  --shadow-lg: 0 24px 60px rgba(16,21,28,.16);
}

/* ============================================================
   2. BASE / RESET
   ============================================================ */

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Faint schematic grid on the page background — a nod to circuit/board
   layout drawings without becoming decoration for its own sake. */
body{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }

:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.app-shell{
  display:flex;
  align-items:stretch;
  min-height:100vh;
}

/* ============================================================
   3. BUTTONS
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 16px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease,
             opacity .12s ease, box-shadow .12s ease, transform .12s ease;
  white-space:nowrap;
}

.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn:active:not(:disabled){ transform:translateY(1px); }

.btn-primary{
  background:var(--green);
  color:#052b02;
  border-color:var(--green);
  box-shadow:0 6px 16px rgba(17,192,9,.18);
}
.btn-primary:hover:not(:disabled){ background:#0ea708; box-shadow:0 8px 20px rgba(17,192,9,.24); }

.btn-secondary{
  background:var(--panel);
  color:var(--ink);
  border-color:var(--line);
}
.btn-secondary:hover:not(:disabled){ border-color:#c7ccc4; background:var(--panel-hover); }

.btn-danger{
  background:#fff;
  color:var(--red);
  border-color:#f3b9b9;
}
.btn-danger:hover:not(:disabled){ background:var(--red-tint); }

.btn-ghost{
  background:transparent;
  color:#c7ccd4;
  border-color:rgba(244,245,242,0.18);
}
.btn-ghost:hover:not(:disabled){ color:#fff; border-color:rgba(244,245,242,0.35); }

.btn-block{ width:100%; }
.btn-sm{ height:32px; padding:0 12px; font-size:12.5px; }

/* ============================================================
   4. APP SHELL / SIDEBAR
   ============================================================ */

.sidebar{
  background:var(--ink);
  color:#f4f5f2;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  flex:0 0 232px;
  width:232px;
  position:sticky;
  top:0;
  height:100vh;
  box-shadow: 10px 0 30px rgba(16,21,28,.08);
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 4px 24px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(244,245,242,0.12);
  font-family:var(--font-head);
  font-size:15px;
  font-weight:700;
}

.brand-mark img,
.brand-mark .brand-logo{
  width:100%;
  height:auto;
  max-height:56px;
  object-fit:contain;
  object-position:left center;
}

.nav-group{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:#b7bec7;
  font-size:14px;
  font-weight:500;
  border-left:2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.nav-link:hover{
  color:#fff;
  background:rgba(244,245,242,0.06);
  transform: translateX(2px);
  text-decoration:none;
}

.nav-link.is-active{
  color:#fff;
  background:rgba(17,192,9,0.14);
  border-left:2px solid var(--green);
}

.nav-icon{
  width:16px;
  text-align:center;
  font-weight:700;
  opacity:0.85;
  flex-shrink:0;
}

.sidebar-foot{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(244,245,242,0.12);
}

.sidebar-user{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 4px 12px;
}

.user-email{
  font-size:13px;
  font-weight:600;
  color:#fff;
  word-break:break-word;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

.user-role{
  font-size:11.5px;
  color:#8b93a0;
}

/* ============================================================
   5. MAIN HEAD
   ============================================================ */

.main{
  padding:30px 34px 60px;
  max-width:1180px;
  flex:1 1 auto;
  min-width:0;
}

.main-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.main-head h1{
  font-size:25px;
  margin:0 0 4px;
}

.subhead{
  font-size:13.5px;
  color:var(--muted);
}

.main-head-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

/* ============================================================
   6. FORMS
   ============================================================ */

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
.field-row .field{ margin-bottom:0; }

.field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fdfdfc;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--blue);
  background:#fff;
  outline:none;
  box-shadow:0 0 0 3px var(--blue-tint);
}

.field textarea{
  min-height:88px;
  resize:vertical;
  line-height:1.55;
}

.field-hint{
  font-size:12px;
  color:var(--muted);
}

/* ============================================================
   LAYOUT: quote grid + panels
   ============================================================ */

.quote-grid{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

.side-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
  flex:1 1 auto;
  min-width:0;
}

.side-stack-summary{
  flex:0 0 300px;
  width:300px;
}

/* Left rule cycles through the brand triad instead of a uniform
   shadow on every card — a quiet system, not decoration. */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease;
}

.panel:hover{ box-shadow:var(--shadow-md); }

.side-stack > .panel:nth-of-type(2){ border-left-color:var(--blue); }
.side-stack > .panel:nth-of-type(3){ border-left-color:var(--red); }

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
}

.panel-head h3{
  font-size:15px;
}

.panel-pad{ padding:18px 20px 20px; }

/* ============================================================
   7. BILL OF ITEMS TABLE
   ============================================================ */

/* Scrolls internally on narrow panels/screens instead of spilling
   out over whatever sits next to the card (e.g. the summary
   sidebar) — the table itself keeps a comfortable minimum width. */
.bom-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

table.bom{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

table.bom thead th{
  text-align:left;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#dfe3ee;
  padding:12px 20px;
  background:var(--ink);
}

table.bom .col-idx{ width:34px; color:var(--muted); }
table.bom .col-amount{ text-align:right; white-space:nowrap; }
table.bom .col-remove{ width:36px; }

table.bom tbody td{
  padding:8px 20px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}

table.bom tbody tr:last-child td{ border-bottom:none; }

table.bom input{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  padding:7px 8px;
  border-radius:6px;
  transition:border-color .12s ease, background .12s ease;
}

table.bom input:hover{ border-color:var(--line); }
table.bom input:focus{ border-color:var(--blue); background:#fff; outline:none; }

table.bom .item-qty,
table.bom .item-price{ text-align:right; }
table.bom .qty-input{ width:60px; }
table.bom .price-input{ width:100px; text-align:right; }

/* Unit of measure — same look as the other cell inputs, but a real
   textarea so a longer unit description can wrap onto a second line
   instead of scrolling sideways. Grows with content via JS. */
table.bom textarea.uom-input{
  display:block;
  width:100%;
  min-width:70px;
  min-height:36px;
  border:1px solid transparent;
  background:transparent;
  padding:7px 8px;
  border-radius:6px;
  font-family:inherit;
  font-size:inherit;
  line-height:1.4;
  resize:vertical;
  overflow:hidden;
  transition:border-color .12s ease, background .12s ease;
}

table.bom textarea.uom-input:hover{ border-color:var(--line); }
table.bom textarea.uom-input:focus{
  border-color:var(--blue);
  background:#fff;
  outline:none;
}

.item-amount{
  display:block;
  text-align:right;
  font-family:var(--font-plate);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.remove-item{
  width:26px;
  height:26px;
  padding:0;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:16px;
  line-height:1;
  transition:color .12s ease, background .12s ease;
}
.remove-item:hover{ color:var(--red); background:var(--red-tint); }

.add-row-btn{
  padding:12px 20px 4px;
}

/* ============================================================
   8. TOTALS
   ============================================================ */

.totals-box{
  padding:14px 20px 18px;
  border-top:1px solid var(--line);
  margin-top:6px;
}

.totals-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  font-size:13.5px;
  color:var(--ink-soft);
}

.totals-line input{
  width:110px;
  text-align:right;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:6px;
}

.totals-line input:focus{
  border-color:var(--blue);
  outline:none;
  box-shadow:0 0 0 3px var(--blue-tint);
}

.totals-line.grand{
  margin-top:10px;
  padding:12px 14px;
  border-top:none;
  background:var(--blue-tint);
  border-radius:var(--radius-sm);
  font-family:var(--font-plate);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
}

/* ============================================================
   9. STATUS PILL — mapped straight to the three brand rings, plus
   a neutral for draft. Not an arbitrary color choice.
   ============================================================ */

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:100px;
  font-size:12px;
  font-weight:600;
}

.status-pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}

.status-pill.draft{ background:#eef0ec; color:#5a6270; }
.status-pill.sent{ background:var(--blue-tint); color:var(--blue); }
.status-pill.accepted{ background:var(--green-tint); color:#0a8905; }
.status-pill.rejected{ background:var(--red-tint); color:var(--red); }

/* ============================================================
   10. SUMMARY / QUOTE PLATE
   Styled like a technical rating plate: the reference number is
   the one bold, deliberate move on the page.
   ============================================================ */

.summary-card{
  border-left:3px solid var(--green);
  overflow:hidden;
}

.summary-card .panel-pad{ padding:0; }

.summary-card h4{
  font-family:var(--font-head);
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  margin:0;
  padding:16px 20px 0;
}

.quote-plate{
  margin:14px 20px 0;
  padding:16px 16px 14px;
  background:var(--ink);
  border-radius:8px;
  color:#f4f5f2;
  position:relative;
  overflow:hidden;
}

.quote-plate::after{
  /* a single faint ring echoing the mark, tucked in the corner */
  content:"";
  position:absolute;
  right:-46px;
  bottom:-46px;
  width:92px;
  height:92px;
  border-radius:50%;
  border:10px solid var(--green);
  opacity:0.14;
}

.meta-label{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.04em;
  color:#9aa2ac;
  margin-bottom:4px;
}

.meta-value{
  display:block;
  font-family:var(--font-plate);
  font-size:19px;
  font-weight:700;
  letter-spacing:0.01em;
  color:#fff;
  word-break:break-word;
}

.quote-meta-item{ margin-bottom:0; }

.currency-total{
  padding:16px 20px 6px;
}

.currency-total .ccy{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  margin-right:6px;
}

.currency-total span:last-child{
  font-family:var(--font-plate);
  font-size:26px;
  font-weight:700;
}

#last-saved{ padding:0 20px; }

.summary-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 20px 20px;
}

/* ============================================================
   11. ALERTS
   ============================================================ */

.alert{
  display:none;
  padding:11px 16px;
  border-radius:var(--radius-sm);
  font-size:13.5px;
  margin-bottom:16px;
  border:1px solid transparent;
}

.alert.show{ display:block; }

.alert-error{
  background:var(--red-tint);
  color:#8a1414;
  border-color:#f3b9b9;
}

.alert-success{
  background:var(--green-tint);
  color:#0a5f06;
  border-color:#9fe29a;
}

/* ============================================================
   12. FILTERS ROW (history page)
   ============================================================ */

.filters-row{
  display:flex;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.filters-row input,
.filters-row select{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  color:var(--ink);
  height:38px;
  transition:border-color .12s ease, box-shadow .12s ease;
}

.filters-row input:focus,
.filters-row select:focus{
  border-color:var(--blue);
  outline:none;
  box-shadow:0 0 0 3px var(--blue-tint);
}

.filters-row .search-input{ flex:1; min-width:200px; }

/* ============================================================
   13. HISTORY TABLE
   ============================================================ */

table.history{
  width:100%;
  border-collapse:collapse;
}

table.history thead th{
  text-align:left;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:var(--panel-hover);
}

table.history tbody td{
  padding:15px 20px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
  color:var(--ink-soft);
}

table.history tbody tr{ cursor:pointer; transition:background .12s ease; }
table.history tbody tr:hover{ background:var(--panel-hover); }
table.history tbody tr:last-child td{ border-bottom:none; }

table.history .qnum{
  font-family:var(--font-plate);
  font-weight:600;
  color:var(--ink);
}

table.history .amt{
  font-family:var(--font-plate);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   14. EMPTY STATE / LOADING ROW
   ============================================================ */

.empty-state{
  text-align:center;
  padding:70px 30px;
  color:var(--muted);
}
.empty-state h3{ color:var(--ink); margin-bottom:8px; font-size:17px; }
.empty-state p{ font-size:13.5px; max-width:320px; margin:0 auto; }

.loading-row td{
  text-align:center;
  padding:40px !important;
  color:var(--muted);
}

/* ============================================================
   15. MODAL
   ============================================================ */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(16,21,28,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:50;
}
.modal-backdrop.show{ display:flex; }

.modal{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  width:100%;
  max-width:640px;
  max-height:86vh;
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:20px 22px;
  border-bottom:1px solid var(--line-soft);
}

.modal-body{ padding:20px 22px 24px; }

.modal-foot{
  padding:16px 22px;
  border-top:1px solid var(--line-soft);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Confirmation dialog (e.g. "start a new quotation and lose changes?") */
.quotation-modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(16,21,28,0.5);
  opacity:0;
  transition:opacity .2s ease;
}
#new-quotation-modal.is-visible .quotation-modal-overlay{ opacity:1; }

.quotation-modal{
  width:100%;
  max-width:440px;
  background:#fff;
  border-radius:16px;
  padding:30px;
  box-shadow:var(--shadow-lg);
  transform:translateY(15px) scale(0.97);
  transition:transform .2s ease;
}
#new-quotation-modal.is-visible .quotation-modal{ transform:translateY(0) scale(1); }

.quotation-modal-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:50%;
  background:#fff3cd;
  color:#856404;
  font-size:22px;
  font-weight:700;
}

.quotation-modal h3{
  margin:0 0 10px;
  font-size:22px;
  color:var(--ink);
}

.quotation-modal p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.quotation-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:26px;
}
.quotation-modal-actions button{ min-width:120px; }

/* ============================================================
   16. SPINNER
   ============================================================ */

.spinner{
  width:15px;
  height:15px;
  border:2px solid rgba(16,21,28,0.2);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.spinner.on-dark{
  border:2px solid rgba(244,245,242,0.25);
  border-top-color:#fff;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   17. UTILITY CLASSES
   ============================================================ */

.text-muted{ color:var(--muted); }
.text-faint{ color:var(--faint); }

/* ============================================================
   18. PRINT / PDF — a real quote sheet
   ============================================================ */

.print-letterhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:26px 28px;
  margin-bottom:22px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.letterhead-company{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.letterhead-logo{
  height:64px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  object-position:left center;
}

.letterhead-address{
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
}

.print-letterhead .plate{ text-align:right; }

.quote-word{
  font-family:var(--font-head);
  font-size:36px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--blue);
  line-height:1;
  margin-bottom:14px;
}

.doc-meta{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.doc-meta-row{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:16px;
  font-size:13.5px;
}

.doc-meta-row .meta-label{
  display:inline;
  margin:0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--blue);
  text-transform:none;
  white-space:nowrap;
}

.doc-meta-row .meta-value{
  display:inline;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:normal;
}

@media print{
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide the native browser date-picker icon in printed/PDF output —
     it renders as a second, redundant calendar glyph next to our own
     field styling. */
  input[type="date"]{
    -webkit-appearance:none;
    appearance:none;
  }
  input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
  }
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-clear-button{
    display:none;
  }

  .sidebar, .main-head-actions, .add-row-btn, table.bom .col-remove,
  .summary-card, .status-pill, .no-print{ display:none !important; }

  .bom-scroll{ overflow:visible; }
  table.bom{ min-width:0; }

  body{
    background:#fff !important;
    background-image:none !important;
  }

  .app-shell{ display:block; }
  .main{ padding:0; max-width:none; }
  .main-head{ display:none; }

  /* The letterhead (logo + company address + QUOTE block) always sits
     first in the document, so it always prints at the top regardless
     of the on-screen column layout below it. */
  .print-letterhead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding-bottom:18px;
    margin-bottom:22px;
    border:none;
    border-radius:0;
    box-shadow:none;
    border-bottom:3px solid var(--ink);
  }
  .letterhead-logo{ height:72px; }
  .letterhead-address{ color:var(--muted); }
  .print-letterhead .plate{ text-align:right; }
  .print-letterhead .doc-meta-row .meta-label{ color:var(--blue); }
  .print-letterhead .doc-meta-row .meta-value{ color:var(--ink); font-size:13.5px; }

  .field select{
    -webkit-appearance:none;
    appearance:none;
    background:none;
    border:none;
    padding:0;
  }

  /* Bill-to fields: force the 2-column layout (page/print width can
     otherwise trigger the mobile single-column breakpoint) and shrink
     everything down to a compact address-block size instead of full
     form-field size. */
  .side-stack > .panel:first-child .field-row{
    grid-template-columns: 1fr 1fr !important;
    gap:14px !important;
    margin-bottom:8px !important;
  }
  .side-stack > .panel:first-child .field{
    margin-bottom:8px !important;
  }
  .side-stack > .panel:first-child .field label{
    font-size:9.5px !important;
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--muted) !important;
    margin-bottom:2px !important;
  }
  .side-stack > .panel:first-child .field input,
  .side-stack > .panel:first-child .field select{
    font-size:13px !important;
    min-height:0 !important;
    padding:0 !important;
  }
  #clientName{
    font-size:16px !important;
    font-weight:700 !important;
    color:var(--ink) !important;
  }
  .side-stack > .panel:first-child .panel-pad{ padding-top:10px; }

  /* Print-only "Bill to" kicker to match the reference layout without
     changing the on-screen heading text. */
  .side-stack > .panel:first-child > .panel-head{
    border-bottom:none;
    padding-bottom:2px;
  }
  .side-stack > .panel:first-child > .panel-head h3{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--blue);
  }

  .quote-grid{ display:block; }
  .side-stack, .side-stack-summary{ width:auto; }

  .panel{
    border:none;
    border-radius:0;
    box-shadow:none;
    break-inside:avoid;
  }
  .panel-head, .panel-pad{ padding-left:0; padding-right:0; }

  table.bom input,
  table.bom textarea,
  .field input, .field select, .field textarea{
    border-color:transparent;
    background:transparent;
    padding-left:0;
  }

  a{ text-decoration:none !important; }
}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */

@media screen and (max-width: 900px){
  .app-shell{ flex-direction:column; }
  .sidebar{ position:relative; height:auto; width:100%; flex-basis:auto; box-shadow:none; }
  .quote-grid{ flex-direction:column; }
  .side-stack-summary{ width:100%; flex-basis:auto; }
  .field-row{ grid-template-columns:1fr; }
  .main{ padding:22px 18px 50px; }
  .filters-row{ flex-direction:column; }
  .filters-row .search-input{ min-width:0; }
}

/* ============================================================
   20. AUTH / LOGIN
   Split screen: dark brand rail on the left, sign-in card on the
   right. Reuses the same tokens, .field, .btn, .alert and .spinner
   rules already defined above so the login page feels like part
   of the same product, not a bolted-on screen.
   ============================================================ */

.auth-shell{
  display:flex;
  min-height:100vh;
  background:var(--paper);
}

/* ---- Left: brand rail ------------------------------------- */

.auth-rail{
  flex:0 0 42%;
  min-width:360px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
  background:var(--ink);
  color:#f4f5f2;
  overflow:hidden;
}

/* Same faint schematic grid used on the app background, plus a
   soft brand-colored glow so the dark rail doesn't read as flat. */
.auth-rail::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(244,245,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,245,242,0.05) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}

.auth-rail::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-120px;
  width:340px;
  height:340px;
  border-radius:50%;
  border:34px solid var(--green);
  opacity:0.10;
  pointer-events:none;
}

.auth-rail-mark{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
  max-width:380px;
}

.auth-rail-mark .brand-logo{
  width:auto;
  height:52px;
  max-width:220px;
  object-fit:contain;
  object-position:left center;
}

.auth-welcome h1{
  font-family:var(--font-head);
  font-size:28px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:#fff;
  margin:0;
}

.auth-rail-name{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#9aa2ac;
  padding-top:18px;
  border-top:1px solid rgba(244,245,242,0.14);
  width:100%;
}

.auth-rail-name::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}

/* ---- Right: sign-in card ------------------------------------ */

.auth-panel{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}

.auth-card{
  width:100%;
  max-width:380px;
}

.auth-card-head{
  margin-bottom:26px;
}

.auth-card-head h2{
  font-family:var(--font-head);
  font-size:23px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
}

.auth-card-head p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

.auth-card .field{
  margin-bottom:16px;
}

.auth-card .field label{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
}

.auth-card .field input{
  height:44px;
  padding:0 13px;
  font-size:14px;
}

.auth-card .btn-primary{
  margin-top:6px;
  height:44px;
  font-size:14px;
}

.auth-card .btn-primary .spinner{
  border-color:rgba(5,43,2,0.25);
  border-top-color:#052b02;
}

.auth-foot-link{
  margin-top:20px;
  text-align:center;
  font-size:13px;
}

.auth-foot-link a{
  color:var(--blue);
  font-weight:600;
}

/* Alert box sits above the form on the login card; give it its own
   top spacing so it doesn't collide with the card head above it. */
.auth-card .alert{
  margin-top:0;
  margin-bottom:18px;
}

@media screen and (max-width: 860px){
  .auth-shell{ flex-direction:column; }

  .auth-rail{
    flex:0 0 auto;
    min-width:0;
    width:100%;
    padding:36px 24px;
  }

  .auth-rail-mark{ max-width:none; }

  .auth-panel{ padding:36px 24px 48px; }
}