body.job-sheets-route .content-area > :not(#job-sheets-extension-page) { display: none !important; }
body.job-sheets-route #job-sheets-extension-page { display: block !important; }

.job-sheet-page { color: #073c3b; padding: 1.4rem clamp(1rem, 2vw, 2rem) 3rem; }
.job-sheet-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.job-sheet-kicker { color: #087c4f; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.job-sheet-hero h1 { color: #003e55; font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1; margin: .45rem 0 .5rem; }
.job-sheet-hero p { color: #58716c; margin: 0; }
.job-sheet-hero-actions { align-items: flex-end; display: flex; flex-direction: column; gap: .65rem; }

.job-sheet-form { display: grid; gap: 1rem; }
.job-sheet-card { background: rgba(255,255,255,.94); border: 1px solid #cedfd9; border-radius: 16px; box-shadow: 0 10px 28px rgba(6,63,49,.05); overflow: visible; padding: 0 1.25rem 1.25rem; }
.job-sheet-card > header { align-items: center; border-bottom: 1px solid #deebe7; display: flex; gap: .85rem; margin: 0 -1.25rem 1.1rem; padding: 1rem 1.25rem; }
.job-sheet-card > header > span { align-items: center; background: #073f3a; border-radius: 10px; color: white; display: inline-flex; flex: 0 0 2.15rem; font-size: .76rem; font-weight: 900; height: 2.15rem; justify-content: center; }
.job-sheet-card > header h2 { color: #003e55; font-size: 1.05rem; margin: 0 0 .18rem; }
.job-sheet-card > header p { color: #69807b; font-size: .78rem; margin: 0; }

.job-sheet-google { background: linear-gradient(135deg,#edf9f4,#f8fcfa); border: 1px solid #c9e7da; border-radius: 12px; margin-bottom: 1.1rem; padding: 1rem; position: relative; }
.job-sheet-google label { display: grid; gap: .42rem; }
.job-sheet-google label > span, .job-sheet-field > span { color: #365c55; font-size: .75rem; font-weight: 800; }
.job-sheet-field b, .job-sheet-check b { color: #df244d; }
.job-sheet-google input, .job-sheet-field input, .job-sheet-field select, .job-sheet-field textarea { background: #fff; border: 1px solid #bdcec9; border-radius: 9px; box-sizing: border-box; color: #063f3e; font: inherit; min-height: 2.85rem; outline: none; padding: .7rem .82rem; transition: border-color .15s, box-shadow .15s; width: 100%; }
.job-sheet-field textarea { line-height: 1.45; min-height: 5rem; resize: vertical; }
.job-sheet-google input:focus, .job-sheet-field input:focus, .job-sheet-field select:focus, .job-sheet-field textarea:focus { border-color: #079467; box-shadow: 0 0 0 3px rgba(7,148,103,.12); }
.job-sheet-google > p { color: #628079; font-size: .72rem; margin: .55rem 0 0; }
.job-sheet-google-results { background: white; border: 1px solid #bdd8ce; border-radius: 10px; box-shadow: 0 16px 38px rgba(2,55,44,.15); left: 1rem; max-height: 17rem; overflow: auto; position: absolute; right: 1rem; top: 5rem; z-index: 30; }
.job-sheet-google-results button, .job-sheet-google-results > div { background: white; border: 0; border-bottom: 1px solid #e3ece9; color: #083f3d; cursor: pointer; display: flex; flex-direction: column; gap: .18rem; padding: .75rem .9rem; text-align: left; width: 100%; }
.job-sheet-google-results button:hover { background: #effaf5; }
.job-sheet-google-results button span { color: #718680; font-size: .72rem; }

.job-sheet-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.job-sheet-grid--visit { grid-template-columns: repeat(3,minmax(0,1fr)); }
.job-sheet-field { display: grid; gap: .42rem; }
.job-sheet-field--wide { grid-column: 1 / -1; }
.job-sheet-duration { background: #eef8f4; border-radius: 8px; color: #26705d; font-size: .76rem; font-weight: 800; margin-top: .85rem; padding: .62rem .8rem; }
.job-sheet-check { align-items: flex-start; background: #f4f9f7; border: 1px solid #d4e6df; border-radius: 10px; cursor: pointer; display: flex; gap: .7rem; margin-top: 1rem; padding: .85rem; }
.job-sheet-check input { accent-color: #07865a; flex: 0 0 auto; height: 1.05rem; margin-top: .12rem; width: 1.05rem; }
.job-sheet-check span { color: #5e7670; display: grid; font-size: .75rem; gap: .15rem; }
.job-sheet-check strong { color: #174d45; font-size: .8rem; }
.job-sheet-check--confirmation { background: #fff9e9; border-color: #f0d995; }

.job-sheet-signature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.job-sheet-signature-grid > div { background: #f6faf8; border: 1px solid #d3e2dd; border-radius: 12px; padding: .8rem; }
.job-sheet-signature-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: .55rem; }
.job-sheet-signature-heading strong { color: #174d45; font-size: .78rem; }
.job-sheet-signature-heading button { background: transparent; border: 0; color: #07865a; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; }
.job-sheet-signature-grid canvas { background: white; border: 1px dashed #9ebbb1; border-radius: 8px; cursor: crosshair; display: block; height: 9rem; touch-action: none; width: 100%; }
.job-sheet-signature-grid small { color: #748a84; display: block; font-size: .68rem; margin-top: .4rem; }

.job-sheet-footer { align-items: center; background: #073f3a; border-radius: 16px; color: white; display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr) minmax(14rem,auto) auto; padding: 1.1rem 1.25rem; }
.job-sheet-footer > div { display: grid; gap: .18rem; }
.job-sheet-footer > div strong { font-size: .9rem; }
.job-sheet-footer > div span { color: #bbd7cf; font-size: .72rem; }
.job-sheet-footer .button-primary { background: #8bd516; border: 0; border-radius: 9px; color: #073f3a; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 900; padding: .82rem 1rem; }
.job-sheet-footer .button-primary:disabled { cursor: wait; opacity: .65; }
.job-sheet-message { color: #d1e4de; font-size: .75rem; margin: 0; text-align: right; }
.job-sheet-message.is-success { color: #bafb79; }
.job-sheet-message.is-error { color: #ffb4c3; }

@media (max-width: 900px) {
  .job-sheet-hero { align-items: flex-start; flex-direction: column; }
  .job-sheet-hero-actions { align-items: flex-start; }
  .job-sheet-grid--visit { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-sheet-footer { grid-template-columns: 1fr; }
  .job-sheet-message { text-align: left; }
}
@media (max-width: 640px) {
  .job-sheet-page { padding-inline: .65rem; }
  .job-sheet-grid, .job-sheet-grid--visit, .job-sheet-signature-grid { grid-template-columns: 1fr; }
  .job-sheet-card { padding-inline: .9rem; }
  .job-sheet-card > header { margin-inline: -.9rem; padding-inline: .9rem; }
}

@media print {
  body.job-sheets-route .sidebar, body.job-sheets-route .top-header, .job-sheet-hero-actions, .job-sheet-footer { display: none !important; }
  .job-sheet-page { padding: 0; }
  .job-sheet-card { break-inside: avoid; box-shadow: none; }
}