/* Workshop — Pastel-invoice inspired styling.
   Palette pivots on navy-framed rounded panels over a cool off-white body. */

:root {
    --navy:       #2e4a7a;
    --navy-deep:  #1e3460;
    --navy-soft:  #d7dfee;
    --navy-hair:  #b8c4dc;
    --ink:        #1b2233;
    --ink-soft:   #4a5366;
    --muted:      #6b7280;
    --page-bg:    #eef0f4;
    --panel-bg:   #ffffff;
    --accent:     #ffdede;
    --accent-ink: #8a1c1c;
    --radius-lg:  10px;
    --radius-sm:  6px;
    --shadow:     0 1px 2px rgba(30,52,96,0.06);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--page-bg) url("/Grey_Art_Wallpaper.jpg") center center / cover no-repeat fixed;
}
a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(46,74,122,0.45); text-underline-offset: 2px; font-weight: 600; }
a:hover { color: var(--navy-deep); text-decoration-color: currentColor; }
/* Navigation / tab / pill / badge links carry their own visual affordance — no underline */
.nav a, .subnav a, table.calendar .event, a.badge, a.btn { text-decoration: none; font-weight: inherit; }
.nav a, .subnav a { font-weight: 500; }
.subnav a { font-weight: 600; }
.nav a.brand { font-weight: 700; }
h1 { margin: 0 0 16px 0; font-size: 22px; color: var(--navy-deep); font-weight: 700; }
h2 { margin: 22px 0 10px 0; font-size: 16px; color: var(--navy-deep); font-weight: 700; }
h3 { margin: 16px 0 8px 0; font-size: 14px; color: var(--navy-deep); font-weight: 700; letter-spacing: 0.03em; }

/* ================= Navigation =================
   The coloured bars span the full viewport, but the link content inside is centred
   to the same 1200px column as .page, so Home/Client Search/etc. line up with the
   page body. The calc() pins the left/right padding to whatever's outside that column,
   with a 20px floor on narrow viewports. */
.nav { background: var(--navy-deep); color: #fff; padding: 11px max(20px, calc((100% - 1400px) / 2 + 20px)); box-shadow: var(--shadow); }
.nav a { color: #dfe6f4; margin-right: 16px; font-weight: 500; font-size: 14px; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.brand { color: #fff; font-weight: 700; margin-right: 24px; font-size: 16px; letter-spacing: 0.03em; }
.nav .right { float: right; color: #aab5c9; font-size: 13px; }
.nav .right a { color: #aab5c9; }

/* Sub-nav tabs (Services / Quotes / Reminders / Send SMS) —
   rendered as the top strip of the continuous paper, so the sheet reaches all
   the way up to the navy menu bar. Perforations continue down through .page. */
.subnav {
    max-width: 1400px;
    margin: 0 auto -1px;
    padding: 10px 78px 0;
    position: relative;
    background-color: #e8eff9;
    background-image: linear-gradient(to bottom, #f2f6fc 0%, #e3ecf6 100%);
    background-attachment: fixed;
    border: 1px solid var(--navy-hair);
    border-bottom: 0;
    z-index: 2;
}
.subnav::before,
.subnav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    background-image: radial-gradient(circle at 50% 18px, var(--page-bg) 0 4px, transparent 4.5px);
    background-size: 100% 36px;
    background-repeat: repeat-y;
}
.subnav::before { left: 0;  border-right: 1px dashed rgba(46,74,122,0.30); }
.subnav::after  { right: 0; border-left:  1px dashed rgba(46,74,122,0.30); }
.subnav a {
    display: inline-block; padding: 8px 18px; color: var(--ink-soft);
    background: var(--panel-bg); border: 1.5px solid var(--navy-hair); border-bottom: 0;
    margin-right: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-size: 13px; font-weight: 600;
    position: relative; top: 1px;
}
.subnav a.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ================= Layout =================
   .page is the body of the continuous tractor-feed sheet. It joins seamlessly
   onto the bottom of .subnav (same width, same paper gradient, no top border)
   so the paper runs uninterrupted from the navy menu bar down to the footer. */
.page {
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 32px 78px 40px;
    position: relative;
    background-color: #e8eff9;
    background-image: linear-gradient(to bottom, #f2f6fc 0%, #e3ecf6 100%);
    background-attachment: fixed;
    border: 1px solid var(--navy-hair);
    border-top: 0;
    box-shadow: 0 10px 24px rgba(30,52,96,0.10);
}
.page::before,
.page::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    background-image: radial-gradient(circle at 50% 18px, var(--page-bg) 0 4px, transparent 4.5px);
    background-size: 100% 36px;
    background-repeat: repeat-y;
}
.page::before { left: 0;  border-right: 1px dashed rgba(46,74,122,0.30); }
.page::after  { right: 0; border-left:  1px dashed rgba(46,74,122,0.30); }
.panel { background: var(--panel-bg); border: 1.5px solid var(--navy); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow); }
.panel-title { margin: -20px -20px 16px -20px; padding: 10px 18px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.muted { color: var(--muted); font-size: 13px; }

/* ================= Tables ================= */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel-bg); border: 1.5px solid var(--navy); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
table.list th, table.list td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #e6ebf3; font-size: 13px; }
table.list th { background: var(--navy); color: #fff; font-weight: 600; letter-spacing: 0.02em; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr:nth-child(even) td { background: #f7f9fc; }
table.list tr:hover td { background: #eef3fb; }

/* ================= Forms ================= */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; font-weight: 600; letter-spacing: 0.02em; }
.field.req label { color: var(--accent-ink); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], textarea, select {
    padding: 7px 9px; font-size: 13px; border: 1px solid var(--navy-hair); border-radius: var(--radius-sm); min-width: 240px; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }
textarea { min-height: 60px; min-width: 400px; }

button, input[type=submit] {
    padding: 8px 18px; font-size: 13px; font-weight: 600; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--navy); color: #fff; letter-spacing: 0.02em;
}
button:hover, input[type=submit]:hover { background: var(--navy-deep); }
button.secondary, input[type=submit].secondary { background: #fff; color: var(--navy-deep); border: 1.5px solid var(--navy-hair); }
button.secondary:hover, input[type=submit].secondary:hover { background: var(--navy-soft); }

/* Messages */
.error { color: var(--accent-ink); background: var(--accent); padding: 8px 12px; border-radius: var(--radius-sm); display: inline-block; border: 1px solid #e0b3b3; }
.ok { color: #0c5e22; background: #e6f6ec; padding: 8px 12px; border-radius: var(--radius-sm); display: inline-block; border: 1px solid #a7d3b4; }

/* Login box — Pastel-style navy-bordered card */
.login-box { max-width: 360px; margin: 80px auto; padding: 28px; background: var(--panel-bg); border-radius: var(--radius-lg); border: 1.5px solid var(--navy); box-shadow: 0 3px 10px rgba(30,52,96,0.1); }
.login-box h1 { text-align: center; }
.login-box .field label.inline-cb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: normal; margin-bottom: 0; cursor: pointer; }
.login-box .field label.inline-cb input { margin: 0; }

/* ================= Calendar ================= */
.cal-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px 0; }
.cal-bar .spacer { flex: 1; }
.cal-bar h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--navy-deep); }
.cal-bar a.btn, .cal-bar button { padding: 6px 12px; font-size: 13px; background: #fff; color: var(--navy-deep); border-radius: var(--radius-sm); border: 1.5px solid var(--navy-hair); font-weight: 600; cursor: pointer; }
.cal-bar a.btn:hover, .cal-bar button:hover { background: var(--navy-soft); text-decoration: none; }
.cal-bar .view-toggle a { background: #fff; border: 1.5px solid var(--navy-hair); padding: 6px 14px; color: var(--navy-deep); margin-left: -1px; font-weight: 600; font-size: 13px; }
.cal-bar .view-toggle a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.cal-bar .view-toggle a:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal-bar .view-toggle a:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

table.calendar { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel-bg); table-layout: fixed; border: 1.5px solid var(--navy); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
table.calendar th { background: var(--navy); color: #fff; padding: 6px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
table.calendar td { border-top: 1px solid #e6ebf3; border-left: 1px solid #e6ebf3; height: 96px; vertical-align: top; padding: 3px 5px; background: #fbfcfe; position: relative; }
table.calendar.calendar-week td { height: 520px; padding: 6px 8px; }
table.calendar td:first-child { border-left: 0; }
table.calendar tr:first-child td { border-top: 0; }
table.calendar td.other-month { background: #f0f2f6; }
table.calendar td.other-month .daynum { color: #b9bfcc; }
table.calendar td.today { background: #fff8d9; }
table.calendar .daynum { position: absolute; top: 4px; right: 8px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
table.calendar .newlink { position: absolute; inset: 0; display: block; }
table.calendar .event { position: relative; z-index: 1; display: block; font-size: 11px; border: 1px solid; padding: 2px 6px; margin-top: 3px; border-radius: 3px; text-decoration: none; font-weight: 600; }
table.calendar .event:first-of-type { margin-top: 22px; }
table.calendar .event.status-received   { background: #e4edf9; border-color: #6b8fc0; color: #1f4180; }
table.calendar .event.status-booked     { background: #dfeaff; border-color: #5a86d6; color: #1a3d85; }
table.calendar .event.status-inprogress { background: #fce4b6; border-color: #d39c3b; color: #5c3d0b; }
table.calendar .event.status-complete   { background: #d4ecd4; border-color: #74a874; color: #1c4a1c; }
table.calendar .event.status-cancelled  { background: #f0d0d0; border-color: #b57575; color: #7a2323; text-decoration: line-through; }

/* Legend */
.cal-legend { display: flex; gap: 14px; align-items: center; margin: -2px 0 14px 0; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.cal-legend .swatch { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid #9aa4b2; }
.cal-legend .dot.status-received   { background: #e4edf9; border-color: #6b8fc0; }
.cal-legend .dot.status-booked     { background: #dfeaff; border-color: #5a86d6; }
.cal-legend .dot.status-inprogress { background: #fce4b6; border-color: #d39c3b; }
.cal-legend .dot.status-complete   { background: #d4ecd4; border-color: #74a874; }
.cal-legend .dot.status-cancelled  { background: #f0d0d0; border-color: #b57575; }

/* Status badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid #9aa4b2; letter-spacing: 0.02em; }
.badge.badge-received   { background: #e4edf9; border-color: #6b8fc0; color: #1f4180; }
.badge.badge-booked     { background: #dfeaff; border-color: #5a86d6; color: #1a3d85; }
.badge.badge-inprogress { background: #fce4b6; border-color: #d39c3b; color: #5c3d0b; }
.badge.badge-complete   { background: #d4ecd4; border-color: #74a874; color: #1c4a1c; }
.badge.badge-cancelled  { background: #f0d0d0; border-color: #b57575; color: #7a2323; }

/* ================= Wizard steps ================= */
.wizard-step { margin-top: 12px; border: 1.5px solid var(--navy); border-radius: var(--radius-lg); background: var(--panel-bg); box-shadow: var(--shadow); overflow: hidden; }
.wizard-step-header { background: var(--navy); color: #fff; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: 0.03em; }
.wizard-step-body { padding: 20px; background: var(--panel-bg); }
.wizard-step.collapsed .wizard-step-body { display: none; }

/* ================= Form grid ================= */
.form-grid { display: table; border-collapse: separate; border-spacing: 0; width: 100%; background: var(--panel-bg); border: 1px solid var(--navy-hair); border-radius: var(--radius-sm); table-layout: fixed; overflow: hidden; }
.form-grid .row { display: table-row; }
.form-grid .lbl, .form-grid .val { display: table-cell; padding: 8px 12px; border-bottom: 1px solid #e6ebf3; font-size: 13px; vertical-align: middle; }
.form-grid .row:last-child .lbl, .form-grid .row:last-child .val { border-bottom: 0; }
.form-grid .lbl { width: 180px; background: #f4f7fc; color: var(--ink-soft); font-weight: 600; }
.form-grid .lbl.req { color: var(--accent-ink); font-weight: 700; }

/* Zebra + left-to-right fade.
   The label side sits in a slight navy tint and bleeds into white at the value side.
   Odd/even rows shift the tint slightly so the eye tracks across from label to input. */
.form-grid .row .lbl { background: linear-gradient(to right, #e5ecf4 0%, #edf1f7 100%); }
.form-grid .row .val { background: linear-gradient(to right, #edf1f7 0%, #ffffff 55%); }
.form-grid .row:nth-child(even) .lbl { background: linear-gradient(to right, #dde5f0 0%, #e5ecf4 100%); }
.form-grid .row:nth-child(even) .val { background: linear-gradient(to right, #e5ecf4 0%, #f8fafd 55%); }
.form-grid input[type=text], .form-grid input[type=email], .form-grid input[type=number], .form-grid input[type=date], .form-grid select, .form-grid textarea {
    min-width: 0; width: 100%; max-width: 340px; box-sizing: border-box;
}

/* Required-field highlight — selectors are deliberately specific so they out-rank the
   base input[type=...] rule and anything a parent grid declares on nested inputs. */
input[type=text].required,
input[type=password].required,
input[type=number].required,
input[type=date].required,
input[type=email].required,
input[type=tel].required,
textarea.required,
select.required,
.form-grid .val.req input,
.form-grid .val.req select,
.form-grid .val.req textarea,
table.worklines td.req input,
table.worklines td.req select,
table.worklines td.req textarea { background: var(--accent); border-color: #e0b3b3; }

/* Side-by-side form grids */
.form-two-col { display: flex; gap: 16px; align-items: flex-start; }
.form-two-col > * { flex: 1 1 0; min-width: 0; }

/* Work-to-do rows */
table.worklines { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel-bg); margin-top: 14px; table-layout: fixed; border: 1px solid var(--navy-hair); border-radius: var(--radius-sm); overflow: hidden; }
table.worklines col.c-check { width: 110px; }
table.worklines col.c-mileage { width: 220px; }
table.worklines col.c-hours { width: 150px; }
table.worklines th, table.worklines td { border-bottom: 1px solid #e6ebf3; border-right: 1px solid #e6ebf3; padding: 9px 11px; font-size: 13px; vertical-align: middle; }
table.worklines th:last-child, table.worklines td:last-child { border-right: 0; }
table.worklines tr:last-child th, table.worklines tr:last-child td { border-bottom: 0; }
table.worklines th { background: var(--navy); color: #fff; font-weight: 600; letter-spacing: 0.02em; }
table.worklines input[type=text], table.worklines input[type=number] { min-width: 0; width: 100%; box-sizing: border-box; }
table.worklines td.req input[type=text], table.worklines td.req input[type=number] { background: var(--accent); border-color: #e0b3b3; }
table.worklines .advisor-row td { background: #f4f7fc; }
table.worklines .advisor-row td.req { color: var(--accent-ink); font-weight: 700; }

/* Inline tab bar — sits inside .page to segment one screen into focused sub-tasks
   (e.g. Parts → Search / Add / Receive). The first tab is the default landing tab. */
.tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--navy-hair); margin: 4px 0 18px 0; }
.tab-bar a {
    display: inline-block; padding: 10px 20px; font-size: 13px; font-weight: 600;
    color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.tab-bar a:hover { color: var(--navy-deep); }
.tab-bar a.active { color: var(--navy-deep); border-bottom-color: var(--navy); }

/* Multi-line repair / other rows — each Insert click stacks another desc+hours pair. */
.workline-stack { display: flex; flex-direction: column; gap: 6px; }
.workline-stack .workline-row { display: flex; align-items: center; gap: 6px; }
.workline-stack .workline-row input[type=text] { flex: 1 1 auto; min-width: 0; width: 100%; }
.btn-insert-line { margin-top: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; background: #fff; color: var(--navy-deep); border: 1.5px solid var(--navy-hair); border-radius: var(--radius-sm); cursor: pointer; }
.btn-insert-line:hover { background: var(--navy-soft); }
.btn-remove-line { flex: 0 0 auto; padding: 2px 8px; font-size: 14px; line-height: 1; font-weight: 700; background: transparent; color: var(--accent-ink); border: 1px solid #e0b3b3; border-radius: var(--radius-sm); cursor: pointer; }
.btn-remove-line:hover { background: var(--accent); }

/* Job Card header — customer/vehicle title on the left, scannable barcode on the right */
.jobcard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.jobcard-header-main { flex: 1 1 auto; min-width: 0; }
.jobcard-header-barcode { flex: 0 0 auto; padding: 6px 10px; background: #fff; border: 1px solid var(--navy-hair); border-radius: var(--radius-sm); }
.jobcard-header-barcode svg { display: block; }

/* Print layout — the browser's native print dialog (window.print()) renders JobCardDetail
   as a one-page job sheet. Drop the wallpaper, nav, action buttons and paper chrome; keep
   the customer/vehicle/work info, status, sub-jobs table and the barcode. */
@media print {
    body { background: #fff !important; }
    .nav, .subnav, .no-print { display: none !important; }
    .page {
        max-width: none !important;
        margin: 0 !important;
        padding: 12mm !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .page::before, .page::after { display: none !important; }
    a { color: inherit !important; text-decoration: none !important; }
    table.list { box-shadow: none !important; }
    table.list th { background: #222 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Booking section headings & finalizer rows */
.booking-section-title { margin: 22px 0 10px 0; font-size: 14px; font-weight: 700; color: var(--navy-deep); letter-spacing: 0.04em; text-transform: uppercase; }
.flag-row { margin-top: 14px; padding: 6px 2px; font-size: 13px; }
.inline-radio label { margin-right: 14px; font-size: 13px; }
.centered-row { text-align: center; margin: 16px 0; font-size: 13px; }

/* Search criteria panel */
.search-panel { background: var(--panel-bg); border: 1.5px solid var(--navy); border-radius: var(--radius-lg); padding: 20px; margin-top: 12px; max-width: 620px; box-shadow: var(--shadow); }
.search-panel h3 { margin-top: 0; color: var(--navy-deep); }

/* Step-3 vehicle header */
.booking-header { font-size: 14px; color: var(--navy-deep); font-weight: 700; margin-bottom: 12px; padding: 8px 12px; background: var(--navy-soft); border-radius: var(--radius-sm); border-left: 4px solid var(--navy); }

/* Section-level small-caps heading (used on ClientSearch/NewBooking) */
.section-heading { color: var(--navy-deep); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 18px 0 8px 0; }