/* ================================================================
   1. Foundation — colours, typography, layout, forms and tables
   ================================================================ */
:root{--wl-ink:#0b2a34;--wl-text:#2d5964;--wl-border:#b9cfd7}*{box-sizing:border-box}body{margin:0;font:15px Segoe UI,Arial;color:var(--wl-ink);background:#f7fafb}.wl-banner{color:#fff;background:linear-gradient(115deg,#17556e,#4f9fb9,#a8d7e3)}.wl-banner-inner,.wl-nav-inner,.container{max-width:1120px;margin:auto}.wl-banner-inner{padding:19px 24px;display:flex;justify-content:space-between}.wl-brand{font-size:28px;font-weight:650;color:#fff;text-decoration:none}.wl-brand span{font-weight:400}.wl-nav{background:#edf6f9;border-bottom:1px solid var(--wl-border)}.wl-nav a{display:inline-block;padding:11px 16px;color:var(--wl-text);text-decoration:none;font-weight:600}.container{margin-top:26px;margin-bottom:32px;background:#fff;border:1px solid var(--wl-border);border-radius:12px;padding:24px;box-shadow:0 2px 8px #0b2a3414}h1{margin-top:0}button,.wl-primary-link{border:1px solid #397b90;border-radius:5px;padding:8px 15px;color:white;background:#458fa7;font-weight:600;text-decoration:none}input,textarea{padding:7px;border:1px solid #b9c4cc;border-radius:4px;font:inherit}table{width:100%;border-collapse:collapse;margin:16px 0}th{padding:9px;text-align:left;background:#d9eef4;border:1px solid var(--wl-border)}td{padding:8px;border:1px solid #d5e0e4}tr:nth-child(even){background:#edf6f9}a{color:#216d87}.wl-footer{text-align:center;color:#5d7780;font-size:13px;padding:16px}.wl-public{text-align:center;padding:55px 15px}.wl-public h1{font-size:34px}.wl-cards{display:grid;grid-template-columns:minmax(250px,400px)}.wl-card{display:block;padding:20px;border:1px solid var(--wl-border);border-radius:9px;background:#edf6f9;text-decoration:none}.wl-login-card{max-width:430px;margin:20px auto;padding:26px;border:1px solid var(--wl-border);border-radius:10px;background:#eff8fa}.wl-login-form{display:grid;gap:8px;margin-top:22px}.wl-login-form input{width:100%;margin-bottom:8px}.wl-validation{color:#b32222;font-size:13px}.invoice-actions{display:flex;gap:10px;flex-wrap:wrap;margin:-24px -24px 24px;padding:12px 24px;background:#f1f3f4;border-bottom:1px solid #dde2e4}.invoice-actions a{padding:7px 10px;color:#53666d;text-decoration:none;font-size:16px;font-weight:600}.invoice-actions a:hover{color:#1f738d;background:#e3edf0;border-radius:4px}

/* ================================================================
   2. Public home page
   ================================================================ */
.public-hero {
    margin: -24px -24px 38px;
    min-height: 390px;
    padding: 70px 9%;
    border-radius: 11px 11px 0 0;
    color: white;
    background: radial-gradient(circle at 83% 20%, rgba(145, 215, 238, .42), transparent 29%), linear-gradient(125deg, #064d78 0%, #087fc0 56%, #5dbbdc 100%);
}

.public-hero-content {
    max-width: 700px;
}

.public-eyebrow {
    margin: 0 0 14px;
    color: #c8edfa;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.public-hero h1 {
    margin: 0 0 20px;
    color: white;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -.8px;
}

.public-intro {
    max-width: 580px;
    margin: 0 0 28px;
    color: #e6f7fd;
    font-size: 19px;
    line-height: 1.6;
}

.public-login-button {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid white;
    border-radius: 6px;
    color: #075981;
    background: white;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 46, 74, .22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

    .public-login-button:hover {
        color: #064d78;
        background: #e4f6fc;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 46, 74, .30);
    }

.public-services {
    padding: 0 2% 42px;
}

    .public-services header {
        max-width: 700px;
        margin: 0 auto 25px;
        text-align: center;
    }

    .public-services h2 {
        margin-bottom: 8px;
        color: #075a89;
        font-size: 29px;
    }

    .public-services header p {
        color: #52727b;
        font-size: 17px;
    }

.public-image-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 920px;
    margin: auto;
}

.public-image-card {
    overflow: hidden;
    border: 1px solid #c6e0ea;
    border-radius: 12px;
    background: white;
    box-shadow: 0 5px 16px rgba(12, 69, 95, .10);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .public-image-card:hover {
        z-index: 1;
        border-color: #42a6cc;
        box-shadow: 0 16px 32px rgba(12, 69, 95, .24);
        transform: translateY(-8px) scale(1.015);
    }

    .public-image-card img {
        display: block;
        width: 100%;
        aspect-ratio: 1.18 / 1;
        object-fit: cover;
        object-position: center;
    }

.public-card-caption {
    padding: 17px 20px 19px;
    background: linear-gradient(135deg, #fff, #effaff);
}

    .public-card-caption h3 {
        margin: 0 0 7px;
        color: #0872ad;
        font-size: 20px;
    }

    .public-card-caption p {
        margin: 0;
        color: #426672;
        line-height: 1.45;
    }

.public-callout {
    margin: 0 -24px -24px;
    padding: 38px 20px;
    border-radius: 0 0 11px 11px;
    color: white;
    text-align: center;
    background: linear-gradient(120deg, #075883, #1495c7);
}

    .public-callout h2 {
        margin: 0 0 9px;
        color: white;
    }

    .public-callout p {
        margin: 0 0 23px;
        color: #e1f7ff;
    }

.public-login-button-light {
    color: white;
    background: transparent;
}

    .public-login-button-light:hover {
        color: #075a89;
        background: white;
    }

@media (max-width: 700px) {
    .public-hero {
        margin: -16px -16px 28px;
        min-height: auto;
        padding: 50px 25px;
    }

    .public-image-cards {
        grid-template-columns: 1fr;
    }

    .public-callout {
        margin: 0 -16px -16px;
    }
}

/* ================================================================
   3. Header, brand and public-page refinements
   ================================================================ */
.wl-banner {
    background: linear-gradient(100deg, #a9ddea 0%, #43a6c8 50%, #07547b 100%);
}

.wl-banner-inner {
    min-height: 76px;
    padding: 9px 24px;
}

.wl-brand {
    display: flex;
    align-items: center;
}

    .wl-brand img {
        display: block;
        width: 340px;
        max-width: 65vw;
        height: auto;
        border-radius: 3px;
    }

.public-hero {
    min-height: 255px;
    margin: -24px -24px 30px;
    padding: 37px 8%;
    border-radius: 11px 11px 0 0;
}

.public-eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 1.7px;
}

.public-hero h1 {
    max-width: 720px;
    margin-bottom: 12px;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.08;
}

.public-intro {
    max-width: 650px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.45;
}

.public-login-button {
    padding: 9px 19px;
}

.public-services {
    padding-bottom: 30px;
}

    .public-services header {
        margin-bottom: 20px;
    }

    .public-services h2 {
        margin-bottom: 5px;
        font-size: 27px;
    }

.public-image-cards {
    max-width: 950px;
    gap: 26px;
}

.public-image-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .public-image-card img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 320px;
        padding: 8px;
        object-fit: contain;
        object-position: center;
        background: white;
    }

.public-card-caption {
    margin-top: auto;
}

.public-image-card:hover {
    transform: translateY(-7px) scale(1.01);
}

@media (max-width: 700px) {
    .wl-banner-inner {
        min-height: 64px;
    }

    .wl-brand img {
        width: 220px;
    }

    .public-hero {
        min-height: auto;
        margin: -16px -16px 25px;
        padding: 32px 25px;
    }

    .public-image-card img {
        max-height: none;
    }
}

.wl-brand img {
    background: transparent;
    mix-blend-mode: multiply;
}

/* ================================================================
   4. Login and dashboard cards
   ================================================================ */
.wl-login-card {
    max-width: 430px;
    margin: 20px auto;
    padding: 26px;
    border: 1px solid #b9cfd7;
    border-radius: 10px;
    background: linear-gradient(145deg, #ffffff, #eff8fa);
    color: #0b2a34;
    box-shadow: none;
}

    .wl-login-card h1,
    .wl-login-card .wl-muted,
    .wl-login-card label {
        color: inherit;
    }

    .wl-login-card .wl-muted {
        color: #52727b;
    }

    .wl-login-card input {
        border-color: #b9c4cc;
        background: white;
        color: #0b2a34;
    }

    .wl-login-card button {
        border-color: #397b90;
        background: #458fa7;
        color: white;
    }

.wl-cards {
    grid-template-columns: repeat(2, minmax(250px, 400px));
    gap: 16px;
}

@media (max-width: 700px) {
    .wl-cards {
        grid-template-columns: 1fr;
    }
}

.wl-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .wl-card:hover {
        border-color: #249bc5;
        box-shadow: 0 12px 24px rgba(5, 84, 123, .22);
        transform: translateY(-6px);
    }

/* ================================================================
   5. Debtors — accounts, details and documents
   ================================================================ */
.amount {
    text-align: right;
    white-space: nowrap;
}

th.amount {
    text-align: center;
}

.debtor-details-form {
    max-width: 680px;
}

.debtor-active-row {
    margin: 0 0 20px;
}

.debtor-details-section {
    margin: 0 0 22px;
    padding: 18px 20px 20px;
    border: 1px solid #c8dce4;
    border-radius: 8px;
    background: linear-gradient(145deg, #fff, #f2fafc);
}

    .debtor-details-section h2,
    .debtor-documents h2 {
        margin: 0 0 16px;
        color: #126b8c;
        font-size: 19px;
    }

.debtor-form-grid {
    display: grid;
    grid-template-columns: 150px minmax(280px, 1fr);
    gap: 10px 14px;
    align-items: center;
}

    .debtor-form-grid label {
        text-align: right;
        color: #294d58;
    }

    .debtor-form-grid input,
    .debtor-form-grid textarea {
        width: 100%;
    }

    .debtor-form-grid textarea {
        resize: vertical;
    }

.debtor-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 30px 164px;
}

.debtor-documents {
    max-width: 680px;
    padding-top: 18px;
    border-top: 1px solid #c8dce4;
}

    .debtor-documents ul {
        padding-left: 20px;
    }

.document-delete-form {
    display: inline;
    margin-left: 8px;
}

    .document-delete-form button {
        padding: 4px 9px;
        font-size: 12px;
    }

@media (max-width: 650px) {
    .debtor-form-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

        .debtor-form-grid label {
            margin-top: 8px;
            text-align: left;
        }

    .debtor-form-actions {
        margin-left: 0;
    }
}

.debtor-details-form {
    max-width: 900px;
}

.debtor-form-grid {
    grid-template-columns: 150px minmax(500px, 1fr);
}

    .debtor-form-grid textarea {
        min-height: 150px;
    }

.debtor-upload-form {
    display: flex;
    align-items: center;
    gap: 14px;
}

.invoice-number {
    text-align: right !important;
    white-space: nowrap;
}

.invoice-total-label {
    text-align: right;
}

/* ================================================================
   6. Invoices and credit notes
   ================================================================ */
.invoice-actions {
    background: #e3f2f7;
    border-bottom-color: #bddbe5;
    border-radius: 11px 11px 0 0;
}

.invoice-entry { font-size: 13px; }.invoice-entry h1 { font-size: 28px; }.invoice-entry label,.invoice-entry input,.invoice-entry select,.invoice-entry button { font-size: 13px; }.invoice-lines-wrap { overflow-x:auto; }.invoice-lines { table-layout:fixed;min-width:850px;margin:12px 0; }.invoice-lines col.description { width:36%; }.invoice-lines col.cost-centre { width:17%; }.invoice-lines col.gl-code { width:22%; }.invoice-lines col.quantity { width:8%; }.invoice-lines col.unit-price { width:10%; }.invoice-lines col.line-total { width:10%; }.invoice-lines col.actions { width:7%; }.invoice-lines input,.invoice-lines select { width:100%;min-width:0; }.invoice-lines .number,.invoice-lines .number-input { text-align:right; }.invoice-lines .line-total-input { color:#294d58;background:#f4f8f9;cursor:default; }.invoice-lines .line-actions { white-space:nowrap; }.invoice-lines .line-actions button { display:block;width:100%;padding:5px 3px;margin-bottom:4px;font-size:11px; }.invoice-entry-actions { display:flex;flex-wrap:wrap;gap:5px; }.invoice-entry-actions button { padding:6px 11px; }

.invoice-header-grid{display:grid;grid-template-columns:minmax(475px,1fr) minmax(250px,.7fr);gap:10px 18px;max-width:950px;margin:14px 0}.invoice-header-grid label{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:7px}.invoice-header-grid .terms-field{grid-column:1;align-items:start}.invoice-header-grid .terms-field>span:first-child,.invoice-header-grid .purchase-order-field>span:first-child{padding-top:8px}.invoice-header-grid .purchase-order-field{align-items:start}.invoice-header-grid .terms-input{display:block}.invoice-header-grid .terms-input small{display:block;margin-top:3px;color:#607580;font-size:12px;font-weight:400}.invoice-header-grid input{width:100%;height:36px}.invoice-header-grid .gst-option{grid-column:2;grid-row:1}.invoice-header-grid .gst-option input{width:auto;height:auto}.invoice-lines col.description{width:38%}.invoice-lines col.cost-centre{width:14%}.invoice-lines col.gl-code{width:20%}.invoice-lines col.quantity{width:6%}.invoice-lines col.unit-price{width:8%}.invoice-lines col.line-total{width:8%}.invoice-lines col.actions{width:6%}.invoice-lines th.number{text-align:center}.invoice-lines .description-input{display:block;width:100%;min-height:36px;height:36px;resize:vertical;overflow:hidden;line-height:20px}.invoice-lines select,.invoice-lines .number-input{height:36px}.invoice-totals{width:220px;margin:14px 92px 0 auto}.invoice-totals>div{display:flex;justify-content:space-between;gap:18px;padding:3px 0}.invoice-totals>div strong{min-width:80px;text-align:right}.invoice-totals .invoice-grand-total{margin-top:4px;padding-top:8px;border-top:1px solid #bcd2da;font-size:14px}.invoice-entry-actions{justify-content:flex-end;margin-top:12px}.invoice-entry textarea{font-family:inherit}.debtor-account-actions{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 22px}.debtor-account-actions a{color:#53666d;font-size:16px;font-weight:600;text-decoration:none}.debtor-account-actions a:hover{color:#1f738d}
.invoice-validation{max-width:850px;margin:8px 0 14px;padding:10px 12px;border:1px solid #d5827d;border-radius:4px;color:#8e201b;background:#fff2f1}
.invoice-debtor-name{margin:-10px 0 16px;color:#315d6b;font-size:19px;font-weight:600}
.quote-header-grid{max-width:720px;grid-template-columns:repeat(2,minmax(260px,1fr))}
.quote-actions{margin:12px -24px 24px}
.quote-header-grid .quote-check{align-items:center}
.quote-header-grid .quote-check input{width:auto;height:auto}
.quote-filter-form{margin:14px 0 18px}
.quote-list-grid th:nth-child(1){width:120px}.quote-list-grid th:nth-child(2){width:170px}.quote-list-grid th:nth-child(4){width:130px}.quote-list-grid th:nth-child(5){width:130px}
.quote-list-grid a{font-weight:600}
.quote-invoiced-row td{color:#8d3a35}

/* ================================================================
   7. Debtor jobs
   ================================================================ */
.job-picker,
.job-form-grid {
    width: 500px;
    max-width: 100%;
}

.job-picker {
    margin: 14px 0 12px;
}

.job-picker label,
.job-form-grid label {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.job-form-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.job-picker select,
.job-form-grid input,
.job-form-grid select,
.job-form-grid textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
}

.job-picker select,
.job-form-grid input,
.job-form-grid select {
    height: 36px;
}

.job-form-grid textarea {
    min-height: 76px;
    resize: vertical;
}

.job-form-grid .job-details-field {
    align-items: start;
}

.job-form-grid .job-details-field > span:first-child {
    padding-top: 8px;
}

.job-form-grid .job-active-field input {
    width: auto;
    height: auto;
}

.job-blank-strip {
    min-height: 59px;
}

.job-list-actions,
.job-maintenance-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 59px;
}

.job-maintenance-actions { justify-content: flex-start; }
.job-list-actions { justify-content: flex-start; }
.job-list-actions { gap: 18px; }

.job-list-actions .job-list-nav { padding: 7px 0; border: 0; border-radius: 0; color: #53666d; background: transparent; font-size: 16px; font-weight: 600; text-decoration: none; }
.job-list-actions .job-list-nav:hover { color: #1f738d; background: transparent; }
.invoice-actions .wl-primary-link { color: #fff; background: #458fa7; }

.wl-primary-link,
.wl-primary-button {
    display: inline-block;
    border: 1px solid var(--wl-primary, #287c9b);
    border-radius: 5px;
    padding: 8px 15px;
    color: #fff;
    background: var(--wl-primary, #287c9b);
    text-decoration: none;
    font-weight: 600;
}

.wl-danger-button { border-color: #ae4b45; color: #8e302c; background: #fff; }

.job-list-grid { width: 100%; min-width: 760px; margin: 14px 0 4px; }
.job-list-grid th { white-space: nowrap; }
.job-list-grid th:nth-child(1) { width: 11%; }
.job-list-grid th:nth-child(2) { width: 21%; }
.job-list-grid th:nth-child(3) { width: 40%; }
.job-list-grid th:nth-last-child(2) { width: 14%; }
.job-list-grid th:last-child { width: 10%; }
.job-list-grid a { display: block; color: inherit; font-weight: 600; text-decoration: none; }
.job-list-grid .job-number-link { display: inline-flex; min-width: 76px; flex-direction: column; align-items: center; gap: 2px; padding: 6px 9px; border: 1px solid #287c9b; border-radius: 5px; color: #fff; background: #287c9b; text-align: center; line-height: 1.05; }
.job-list-grid .job-number-link strong { font-size: 15px; }
.job-list-grid .job-number-link small { font-size: 10px; font-weight: 600; }
.job-list-grid .job-number-link:hover { color: #fff; background: #1d6681; }
.job-list-grid .job-list-row:hover td { background: #eff8fb; }
.job-details-cell { white-space: pre-line; }
.job-code-cell { text-align: right; white-space: nowrap; }
.job-status { display: inline-block; min-width: 65px; padding: 3px 8px; border-radius: 12px; text-align: center; font-size: 12px; font-weight: 600; }
.job-status-active { color: #23633a; background: #e2f3e7; }
.job-status-inactive { color: #6a5b20; background: #fff4cf; }
.job-list-help { margin-top: 8px; color: #607580; font-size: 13px; }
.job-success-message { margin: 12px 0; padding: 9px 12px; border: 1px solid #a9d6b7; border-radius: 5px; color: #1c5b35; background: #f1fbf4; }
.employee-save-confirmation{display:grid;gap:4px;margin:18px 0 22px;padding:15px 18px;border:1px solid #83c99d;border-left:6px solid #31824f;border-radius:7px;background:#edf9f1;color:#174f2d;box-shadow:0 1px 3px #1c5b3514}.employee-save-confirmation strong{font-size:17px}.employee-save-confirmation span{font-size:15px}

.job-sheet-lines { table-layout: fixed; min-width: 850px; }
.job-sheet-lines col.job-sheet-date { width: 14%; }
.job-sheet-lines col.job-sheet-comments { width: 41%; }
.job-sheet-lines col.job-sheet-cost-item { width: 19%; }
.job-sheet-lines col.job-sheet-quantity,
.job-sheet-lines col.job-sheet-rate { width: 8%; }
.job-sheet-lines col.job-sheet-rate { width: 11%; }
.job-sheet-lines col.job-sheet-invoice { width: 7%; }
.job-sheet-lines input,
.job-sheet-lines select,
.job-sheet-lines textarea { width: 100%; min-width: 0; }
.job-sheet-lines .job-sheet-comments-input { display: block; min-height: 36px; resize: vertical; font: inherit; line-height: 20px; overflow: hidden; }
.job-sheet-lines .job-sheet-invoice-heading,
.job-sheet-lines .job-sheet-invoice-cell { text-align: center; }
.job-sheet-lines .job-sheet-invoice-cell input { width: auto; height: auto; }
.job-sheet-lines .job-sheet-number[readonly] { color: #66777d; background: #eef3f5; cursor: not-allowed; }
.job-sheet-job-details { margin: -8px 0 16px; color: #607580; white-space: pre-line; }

.cost-items-page { max-width: 1040px; }
.cost-items-grid { table-layout: fixed; min-width: 820px; }
.cost-items-grid th:nth-child(1) { width: 28%; }
.cost-items-grid th:nth-child(2) { width: 18%; }
.cost-items-grid th:nth-child(3) { width: 14%; }
.cost-items-grid th:nth-child(4) { width: 40%; }
.cost-items-grid input,
.cost-items-grid select { width: 100%; min-width: 0; }
.cost-items-grid .number-input,
.cost-item-new-form .number-input { text-align: right; }
.cost-item-new-form { display: grid; grid-template-columns: minmax(210px, 1.3fr) 150px 120px minmax(180px, 1fr); gap: 12px; align-items: end; margin-top: 24px; padding: 18px; border: 1px solid #c8dce4; border-radius: 7px; background: #f4fafc; }
.cost-item-new-form h2,
.cost-item-new-form > div { grid-column: 1 / -1; margin: 0; }
.cost-item-new-form label { display: grid; gap: 5px; }
.cost-item-new-form input,
.cost-item-new-form select { width: 100%; height: 36px; }

.job-top-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 12px;
}

.job-heading-row,
.job-sheet-heading-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.job-heading-row h1,
.job-sheet-heading-row h1 { margin-bottom: 12px; }
.job-heading-row .invoice-debtor-name,
.job-sheet-heading-row .invoice-debtor-name { margin-top: 0; }
.job-sheet-top-actions { display: grid; gap: 8px; min-width: 126px; }
.job-sheet-top-actions button { width: 100%; }

.job-cost-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

.job-cost-heading h2 {
    margin: 0;
}

.job-cost-actions {
    display: flex;
    gap: 8px;
}

.job-cost-actions button:disabled {
    border-color: #aebbc0;
    color: #74848a;
    background: #e4eaec;
}

.job-cost-items col.cost-description { width: 18%; }
.job-cost-items col.cost-type { width: 16%; }
.job-cost-items col.cost-rate { width: 16%; }
.job-cost-items col.cost-comments { width: 38%; }
.job-cost-items col.cost-include { width: 12%; }

.cost-item-select-locked {
    pointer-events: none;
    color: inherit;
    background: #f4f7f8;
}

.job-new-cost {
    display: grid;
    grid-template-columns: 1fr 190px 150px 1fr;
    gap: 10px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #c8dce4;
    border-radius: 7px;
    background: #f4fafc;
}

.job-new-cost[hidden] {
    display: none;
}

.job-new-cost h2,
.job-new-cost > div {
    grid-column: 1 / -1;
}

.job-new-cost label {
    display: grid;
    gap: 5px;
}

.job-new-cost input,
.job-new-cost select {
    width: 100%;
    height: 36px;
}

.job-new-cost > div {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.no-debtor-jobs {
    min-height: 180px;
    margin-top: 24px;
    padding: 42px 24px;
    border: 1px solid #b9cfd7;
    border-radius: 6px;
    color: #4b86a0;
    background: #fff;
    font-size: 22px;
}

.no-debtor-jobs strong,
.no-debtor-jobs span { display: block; }
.no-debtor-jobs span { margin-top: 10px; color: #607580; font-size: 15px; }

@media(max-width:650px) {
    .job-picker label,
    .job-form-grid label {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .job-cost-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .job-new-cost {
        grid-template-columns: 1fr;
    }
}
/* ================================================================
   8. Email debtor and invoice drafts
   ================================================================ */
.debtor-email{max-width:900px}.email-form-grid{display:grid;gap:14px;max-width:780px}.email-form-grid label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:10px}.email-form-grid input{width:100%;height:36px}.email-form-grid .email-message{align-items:start}.email-form-grid textarea{width:100%;min-height:230px;resize:vertical}.email-documents{max-width:780px;margin:20px 0}.email-document{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #c5dbe4;background:#f6fbfc}.email-document+.email-document{margin-top:8px}.ccact-document-hidden{display:none}.pdf-badge{display:inline-flex;width:38px;height:46px;align-items:center;justify-content:center;border:1px solid #e15b53;border-radius:4px;color:#c52c26;font-size:11px;font-weight:700}.email-options{display:grid;gap:12px;margin:18px 0}.email-options input[type=file]{margin-left:10px}.email-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:24px}.email-sending-status{color:#315d6b;font-weight:600}.wl-secondary-link{display:inline-block;border:1px solid #b7c6cb;border-radius:5px;padding:8px 15px;color:#355a66;background:#fff;text-decoration:none;font-weight:600}@media(max-width:650px){.email-form-grid label{grid-template-columns:1fr}.email-form-grid .email-message{gap:5px}}
.draft-actions{display:flex;align-items:center;gap:14px}.draft-actions form{margin:0}

/* ================================================================
   9. Debtor statements
   ================================================================ */
.statement-page {
    padding: 0 20px 22px;
    background: #fff;
}

.statement-page:hover {
    border-color: var(--wl-border);
    box-shadow: none;
    transform: none;
}

.statement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 -20px 24px;
    padding: 12px 20px;
    border-bottom: 1px solid #bddbe5;
    border-radius: 9px 9px 0 0;
    background: #e8f3f7;
}

.statement-actions a,
.statement-actions button {
    color: #286b83;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.statement-actions a:hover,
.statement-actions button:hover {
    color: #124f65;
    text-decoration: underline;
}

.statement-page h1 {
    margin: 0 0 20px;
}

.statement-page h2 {
    margin: 0 0 16px;
    font-size: 21px;
}

.statement-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid #d6e0e4;
    border-radius: 6px;
    background: #fafcfc;
}

.statement-filters label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.statement-filters .statement-message {
    align-items: flex-start;
    flex-direction: column;
    flex-basis: 100%;
    gap: 6px;
}

.statement-message textarea {
    width: min(680px, 100%);
    min-width: min(520px, 100%);
    max-width: 100%;
    min-height: 95px;
    resize: vertical;
}

.statement-filters .statement-actions {
    order: -1;
    flex-basis: 100%;
    margin: -14px -16px 10px;
}

.statement-lines,
.statement-aging {
    margin: 16px 0;
    background: #fff;
}

.statement-lines th,
.statement-aging th {
    background: #e8f3f7;
    text-align: center;
}

.statement-lines tr:nth-child(even),
.statement-aging tr:nth-child(even) {
    background: #fff;
}

.statement-lines td,
.statement-aging td {
    background: #fff;
}

.statement-aging {
    max-width: 100%;
}

.statement-aging td {
    text-align: right;
}

@media (max-width: 650px) {
    .statement-page { padding: 0 14px 18px; }
    .statement-actions { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
    .statement-filters { align-items: stretch; }
    .statement-filters label { justify-content: space-between; }
}


/* ================================================================
   9. Public About and friendly error pages
   ================================================================ */
.public-hero-actions,.about-hero-actions,.error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.public-about-link,.wl-secondary-link{display:inline-block;border:1px solid #a9c8d3;border-radius:5px;padding:8px 15px;color:#315d6b;background:#fff;text-decoration:none;font-weight:600}.public-about-link:hover,.wl-secondary-link:hover{background:#eff7f9}.about-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:34px;align-items:center;padding:20px 8px 36px}.about-hero-copy h1{max-width:760px;font-size:40px;line-height:1.1;margin-bottom:18px}.about-hero-copy>p:not(.public-eyebrow){max-width:760px;font-size:18px;line-height:1.65;color:#456773}.about-hero-image{width:100%;max-height:340px;object-fit:cover;border-radius:14px;box-shadow:0 14px 35px #0b2a3422}.about-section{padding:42px 8px;border-top:1px solid #d7e6eb}.about-section-heading{max-width:780px;margin-bottom:25px}.about-section-heading h2,.about-value h2{font-size:30px;line-height:1.2}.about-section-heading>p:last-child,.about-value p{color:#4d6d77;line-height:1.65}.about-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.about-feature-grid article{padding:21px;border:1px solid #c9dde5;border-radius:10px;background:linear-gradient(145deg,#fff,#f2fafc)}.about-feature-grid h3{margin:0 0 9px;color:#126b8c}.about-feature-grid p{margin:0;color:#536e77;line-height:1.55}.about-screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.about-screen-card{margin:0;overflow:hidden;border:1px solid #b9cfd7;border-radius:12px;background:#fff;box-shadow:0 8px 22px #173f4d18}.screen-browser-bar{height:36px;padding:9px 12px;background:#eaf3f6;border-bottom:1px solid #cadde4;display:flex;align-items:center;gap:6px;color:#59737c;font-size:11px}.screen-browser-bar span{width:8px;height:8px;border-radius:50%;background:#9fb9c2}.screen-browser-bar strong{margin-left:7px;font-size:11px}.screen-demo{min-height:220px;padding:16px;background:#fbfdfe}.screen-demo-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:11px;border-bottom:2px solid #b9dce7}.screen-demo-title b{color:#155f78;font-size:15px}.screen-demo-title small{color:#647b83}.screen-demo-table{margin-top:12px;border:1px solid #cfdee3}.screen-row{display:grid;grid-template-columns:1.7fr repeat(3,.8fr);font-size:9px}.screen-row span{padding:7px;border-bottom:1px solid #e0e9ec;text-align:right}.screen-row span:first-child{text-align:left}.screen-head{font-weight:700;background:#dff0f5}.screen-form-lines{margin-top:13px;display:grid;gap:8px}.screen-form-lines>div{display:grid;grid-template-columns:92px 1fr;gap:8px;padding:7px;border:1px solid #d6e4e9;border-radius:4px;background:#fff;font-size:9px}.screen-form-lines em{color:#66808a;font-style:normal}.screen-money{grid-template-columns:55px 1fr 55px 1fr!important}.screen-total{display:flex;justify-content:flex-end;gap:18px;margin-top:14px;padding-top:9px;border-top:1px solid #bcd2da;font-size:12px}.screen-week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}.screen-week span{padding:8px 4px;text-align:center;border:1px solid #cfdee4;border-radius:5px;background:#fff;color:#667e87;font-size:9px}.screen-week strong{display:block;margin-top:6px;color:#175f78;font-size:14px}.screen-timesheet-note{margin-top:16px;padding:12px;border-radius:6px;background:#e8f4f7;color:#486a75;font-size:10px;line-height:1.5}.about-screen-card figcaption{padding:15px 17px 18px}.about-screen-card figcaption strong{display:block;margin-bottom:6px;color:#145f78;font-size:16px}.about-screen-card figcaption span{display:block;color:#5c747c;line-height:1.45;font-size:13px}.about-value{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:34px;align-items:center}.about-value img{width:100%;max-height:360px;object-fit:cover;border-radius:12px}.error-page{max-width:920px;margin:0 auto;padding:18px 8px}.error-status-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;margin-bottom:14px;color:#fff;background:#b5524d;font-size:30px;font-weight:700}.error-page h1{font-size:34px;margin-bottom:10px}.error-summary{font-size:18px;line-height:1.55;color:#405f69}.error-reference{padding:10px 13px;border-left:4px solid #5b9db4;background:#edf7fa}.error-success,.error-warning{margin:15px 0;padding:12px 14px;border-radius:5px}.error-success{border:1px solid #9ecfb0;color:#225f39;background:#edf9f1}.error-warning{border:1px solid #e0bd77;color:#745517;background:#fff9e9}.error-actions{margin:18px 0 24px}.error-actions form{margin:0}.error-technical{margin-top:26px;border:1px solid #c8d9df;border-radius:8px;background:#f8fbfc}.error-technical summary{padding:13px 15px;cursor:pointer;font-weight:700;color:#315d6b}.error-technical-note{margin:0;padding:0 15px 12px;color:#697c83;font-size:12px}.error-technical pre{max-height:430px;overflow:auto;margin:0;padding:16px;border-top:1px solid #d8e5e9;background:#13262d;color:#e7f2f5;font:12px/1.5 Consolas,Monaco,monospace;white-space:pre-wrap;word-break:break-word}
@media(max-width:900px){.about-feature-grid{grid-template-columns:repeat(2,1fr)}.about-screen-grid{grid-template-columns:1fr}.about-hero,.about-value{grid-template-columns:1fr}.about-hero-image,.about-value img{max-height:300px}.about-hero-copy h1{font-size:34px}}
@media(max-width:560px){.about-feature-grid{grid-template-columns:1fr}.about-hero-copy h1{font-size:29px}.about-section-heading h2,.about-value h2{font-size:25px}.error-page h1{font-size:28px}.error-actions{align-items:stretch}.error-actions>*{width:100%}.error-actions button,.error-actions a{width:100%;text-align:center}}


/* About/public page refinements */
.public-hero-actions > a,
.about-hero-actions > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.2;
}

.public-about-link,
.wl-secondary-link {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.public-about-link:hover,
.wl-secondary-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 46, 74, .22);
    border-color: #6daec2;
}

.about-hero-image {
    width: 100%;
    max-height: 360px;
    padding: 10px;
    object-fit: contain;
    object-position: center;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.about-pop-image:hover {
    position: relative;
    z-index: 2;
    transform: translateY(-6px) scale(1.035);
    box-shadow: 0 18px 38px rgba(11, 42, 52, .28);
}

.screen-aged-row {
    grid-template-columns: minmax(100px, 1.65fr) repeat(5, minmax(48px, .72fr));
}

.screen-aged-row span {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 8px;
}

.screen-grand-total {
    font-weight: 700;
    background: #eef7f9;
}

.screen-grand-total span {
    border-top: 2px solid #9ebdc8;
}

.screen-invoice-totals {
    margin-top: 12px;
    margin-left: auto;
    width: 170px;
    font-size: 10px;
}

.screen-invoice-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 0;
}

.screen-invoice-totals .screen-total {
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px solid #bcd2da;
    font-size: 12px;
}

/* Only the Free Accounting Software hero image pops out on the About page.
   The screen examples and lower promotional image remain static. */
.about-screen-card,
.about-value img {
    transform: none;
}

@media (max-width: 560px) {
    .public-hero-actions > a,
    .about-hero-actions > a {
        min-height: 42px;
    }

    .screen-aged-row span {
        font-size: 7px;
    }
}


/* ================================================================
   10. About page screen examples — match the live WellLinked UI
   ================================================================ */
.about-screen-grid {
    grid-template-columns: 1fr;
    max-width: 980px;
    margin: 0 auto;
    gap: 26px;
}

.about-screen-card {
    width: 100%;
}

.screen-demo-wide {
    min-height: 0;
    padding: 20px;
}

.screen-page-heading {
    margin: 0 0 14px;
    color: #0b2a34;
    font-size: 23px;
    font-weight: 650;
}

.screen-filter-lines {
    display: grid;
    gap: 6px;
    margin: 0 0 15px;
    color: #294d58;
    font-size: 12px;
}

.screen-atb-table {
    width: 100%;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid #b9cfd7;
}

.screen-atb-row {
    display: grid;
    grid-template-columns: minmax(165px, 1.9fr) repeat(5, minmax(78px, .9fr)) minmax(72px, .8fr);
    font-size: 11px;
}

.screen-atb-row > span {
    min-width: 0;
    padding: 8px 7px;
    border-right: 1px solid #d5e0e4;
    border-bottom: 1px solid #d5e0e4;
    text-align: right;
    white-space: nowrap;
}

.screen-atb-row > span:first-child {
    text-align: left;
}

.screen-atb-row > span:last-child {
    border-right: 0;
}

.screen-atb-head {
    background: #d9eef4;
    font-weight: 700;
}

.screen-atb-head > span:not(:first-child) {
    text-align: center;
}

.screen-alt-row {
    background: #edf6f9;
}

.screen-link {
    color: #216d87;
    text-decoration: underline;
}

.screen-atb-total {
    font-weight: 700;
}

.screen-atb-total > span:not(:first-child):not(:last-child) {
    background: #d9eef4;
}

.screen-debtor-heading {
    margin: -6px 0 15px;
    color: #315d6b;
    font-size: 17px;
    font-weight: 600;
}

.screen-invoice-header {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(230px, .7fr);
    gap: 10px 18px;
    max-width: 850px;
    margin: 0 0 14px;
    font-size: 11px;
}

.screen-invoice-header label {
    display: grid;
    grid-template-columns: 105px 1fr;
    align-items: start;
    gap: 7px;
}

.screen-invoice-header label > span:first-child {
    color: #294d58;
}

.screen-invoice-header strong {
    min-height: 31px;
    padding: 7px;
    border: 1px solid #b9c4cc;
    border-radius: 4px;
    background: #fff;
    font-weight: 400;
}

.screen-invoice-header small {
    grid-column: 2;
    margin-top: -4px;
    color: #607580;
    font-size: 9px;
}

.screen-gst-check strong {
    border: 0;
    padding-left: 0;
    background: transparent;
}

.screen-invoice-lines {
    width: 100%;
    border: 1px solid #b9cfd7;
}

.screen-invoice-row {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) minmax(190px, 1.45fr) 60px 78px 78px 76px;
    font-size: 10px;
}

.screen-invoice-row > span {
    min-width: 0;
    padding: 8px;
    border-right: 1px solid #d5e0e4;
    border-bottom: 1px solid #d5e0e4;
}

.screen-invoice-row > span:nth-child(3),
.screen-invoice-row > span:nth-child(4),
.screen-invoice-row > span:nth-child(5) {
    text-align: right;
}

.screen-invoice-row > span:last-child {
    border-right: 0;
    text-align: center;
}

.screen-invoice-head {
    background: #d9eef4;
    font-weight: 700;
}

.screen-invoice-head > span:nth-child(3),
.screen-invoice-head > span:nth-child(4),
.screen-invoice-head > span:nth-child(5) {
    text-align: center;
}

.screen-invoice-row b {
    display: block;
    margin: 0 0 3px;
    padding: 3px 4px;
    border: 1px solid #397b90;
    border-radius: 3px;
    color: #fff;
    background: #458fa7;
    font-size: 9px;
    font-weight: 600;
}

.screen-invoice-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
}

.screen-invoice-actions span {
    padding: 6px 11px;
    border: 1px solid #397b90;
    border-radius: 5px;
    color: #fff;
    background: #458fa7;
    font-size: 10px;
    font-weight: 600;
}

.screen-invoice-totals {
    width: auto;
    margin: 14px 84px 0 0;
    text-align: right;
    font-size: 11px;
}

.screen-invoice-totals > div {
    justify-content: flex-end;
    gap: 10px;
    padding: 2px 0;
}

.screen-invoice-totals > div strong {
    min-width: 70px;
}

.screen-invoice-totals .screen-total {
    justify-content: flex-end;
    margin-top: 3px;
    padding-top: 6px;
    border-top: 1px solid #bcd2da;
    font-size: 12px;
}

@media (max-width: 760px) {
    .screen-demo-wide {
        overflow-x: auto;
    }

    .screen-atb-table,
    .screen-invoice-lines,
    .screen-invoice-header {
        min-width: 760px;
    }
}


/* Public enquiry form */
.enquire-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 8px 30px;
}

.enquire-page h1 {
    margin-bottom: 10px;
}

.enquire-intro {
    margin-bottom: 24px;
    color: #4d6d77;
    font-size: 17px;
    line-height: 1.6;
}

.enquire-form {
    display: grid;
    gap: 16px;
}

.enquire-form label {
    display: grid;
    gap: 6px;
    color: #294d58;
    font-weight: 600;
}

.enquire-form input,
.enquire-form textarea {
    width: 100%;
    background: #fff;
}

.enquire-form textarea {
    resize: vertical;
}

.enquire-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.enquire-actions .public-login-button,
.enquire-actions .public-action-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 560px) {
    .enquire-actions > * {
        width: 100%;
        text-align: center;
    }
}