/* Service report: customer + machine information */

.service-info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}


/* Service report meta information */

.report-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;

    max-width: 850px;
    margin-bottom: 28px;
}

.report-meta-grid .report-info-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 15px;
    align-items: center;
}

/* =========================================================
   SERVICE REPORT VIEW
   ========================================================= */

.report-status {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 12px 16px;
    margin-bottom: 18px;

    border: 1px solid;
    font-size: 15px;
}

.report-status-draft {
    border-color: #4f5fa8;
    background: rgba(79, 95, 168, 0.10);
    color: #172033;
}

.report-status-closed {
    border-color: #b42318;
    background: rgba(180, 35, 24, 0.08);
    color: #b42318;
}

.report-top-actions,
.report-section-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.report-top-actions {
    margin-bottom: 14px;
}

.report-section-actions {
    margin-bottom: 35px;
}

.report-top-actions a,
.report-section-actions a {
    display: inline-block;

    min-width: 170px;
    padding: 10px 18px;

    border: 1px solid #52606f;
    border-radius: 2px;

    color: #172033;
    background: transparent;

    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.report-top-actions a:hover,
.report-section-actions a:hover {
    background: rgba(255, 255, 255, 0.35);
}

.report-top-actions .button-primary {
    background: #4f5fa8;
    border-color: #4f5fa8;
    color: #ffffff;
}

.report-top-actions .button-primary:hover {
    background: #46559a;
    color: #ffffff;
}


/* =========================================================
   NEW SERVICE REPORT
   ========================================================= */

.service-report-create {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-machine-info {
    padding: 0 10px 30px;
    border-bottom: 1px solid rgba(23, 32, 51, 0.15);
}

.service-machine-info h2,
.service-report-entry h2 {
    margin: 0 0 22px;

    font-size: 21px;
    font-weight: 600;
}

.machine-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 70px;
}

.machine-info-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 15px;

    font-size: 15px;
}

.info-label {
    font-weight: 600;
}

.info-value {
    min-width: 0;
}


/* Service report form */

.new-service-report-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-report-entry {
    padding: 25px 10px 0;
}

.service-report-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 70px;

    margin-bottom: 28px;
}

.service-report-field {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 15px;
}

.service-report-field label {
    font-size: 15px;
    font-weight: 600;
}

.service-report-field input {
    width: 100%;
    height: 34px;
    padding: 5px 8px;

    border: 1px solid #6f7885;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;
}


/* Large text fields */

.service-report-text-field {
    margin-bottom: 22px;
}

.service-report-text-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 15px;
    font-weight: 600;
}

.service-report-text-field textarea {
    display: block;

    width: 100%;
    min-height: 105px;
    padding: 10px;

    resize: vertical;

    border: 1px solid #6f7885;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;
}


/* Bottom actions */

.service-report-create-actions {
    margin-top: auto;

    display: flex;
    justify-content: center;
    gap: 70px;

    padding-top: 35px;
}

.service-report-create-actions .button-primary,
.service-report-create-actions .button-secondary {
    display: inline-block;

    width: 220px;
    min-width: 220px;
    padding: 11px 18px;

    border: 1px solid #52606f;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.service-report-create-actions .button-secondary {
    background: transparent;
    color: #172033;
}

.service-report-create-actions .button-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   MATERIALS PAGE
   ========================================================= */

.materials-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.materials-project {
    display: flex;
    gap: 18px;

    margin-bottom: 25px;

    font-size: 15px;
}

.materials-section h2,
.add-material-section h2 {
    margin: 0 0 18px;

    font-size: 20px;
    font-weight: 600;
}


/* Existing materials */

.materials-table {
    width: 100%;
    border-collapse: collapse;

    margin-bottom: 45px;
}

.materials-table th {
    padding: 10px 14px;

    background: #4f5fa8;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.materials-table td {
    padding: 10px 14px;

    border-bottom: 1px solid rgba(23, 32, 51, 0.12);

    font-size: 14px;
    vertical-align: middle;
}

.materials-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.materials-actions form {
    margin: 0;
}

.material-action-button {
    display: inline-block;

    min-width: 80px;
    padding: 7px 12px;

    border: 1px solid #52606f;
    border-radius: 2px;

    background: transparent;
    color: #172033;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
}

.material-action-button:hover {
    background: rgba(255, 255, 255, 0.35);
}


/* Add material */

.add-material-section {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.add-material-form {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.add-material-row {
    width: 520px;

    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 18px;
    align-items: center;

    margin-bottom: 14px;
}

.add-material-row label {
    font-size: 15px;
    font-weight: 600;
}

.add-material-row input {
    width: 100%;
    height: 34px;

    padding: 5px 8px;

    border: 1px solid #6f7885;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;
}


/* Bottom actions */

.materials-page-actions {
    margin-top: auto;

    display: flex;
    justify-content: center;
    gap: 30px;

    padding-top: 40px;
}

.materials-page-actions .button-primary,
.materials-page-actions .button-secondary {
    display: inline-block;

    width: 220px;
    min-width: 220px;
    padding: 11px 18px;

    border: 1px solid #52606f;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.materials-page-actions .button-secondary {
    background: transparent;
    color: #172033;
}

.materials-page-actions .button-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
}


/* =========================================================
   WORK HOURS PAGE
   ========================================================= */

.work-hours-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.report-reference {
    margin: 0 0 25px;

    font-size: 15px;
}

.work-hours-page h2 {
    margin: 0 0 18px;

    font-size: 20px;
    font-weight: 600;
}


/* Existing work hours */

.work-hours-table {
    width: 100%;
    border-collapse: collapse;

    margin-bottom: 45px;
}

.work-hours-table th {
    padding: 10px 14px;

    background: #4f5fa8;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.work-hours-table td {
    padding: 10px 14px;

    border-bottom: 1px solid rgba(23, 32, 51, 0.12);

    font-size: 14px;
    vertical-align: middle;
}

.work-hours-total td {
    background: rgba(255, 255, 255, 0.20);
}


/* Edit / Delete */

.work-hours-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.work-hours-actions form {
    margin: 0;
}

.table-action-button {
    display: inline-block;

    min-width: 80px;
    padding: 7px 12px;

    border: 1px solid #52606f;
    border-radius: 2px;

    background: transparent;
    color: #172033;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
}

.table-action-button:hover {
    background: rgba(255, 255, 255, 0.35);
}


/* Add Work Hours */

.add-work-hours-title {
    margin-top: 0;
}

.work-hours-form {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.work-hours-form-row {
    width: 560px;

    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    align-items: center;

    margin-bottom: 14px;
}

.work-hours-form-row label,
.work-hours-form-label {
    font-size: 15px;
    font-weight: 600;
}

.work-hours-form-row input {
    width: 100%;
    height: 34px;

    padding: 5px 8px;

    border: 1px solid #6f7885;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;
}

.work-hours-info-row {
    align-items: start;
}

.work-hours-info-row span:last-child {
    font-size: 14px;
}


/* Bottom actions */

.work-hours-page-actions {
    margin-top: auto;

    display: flex;
    justify-content: center;
    gap: 30px;

    padding-top: 40px;
}

.work-hours-page-actions .button-primary,
.work-hours-page-actions .button-secondary {
    display: inline-block;

    width: 220px;
    min-width: 220px;
    padding: 11px 18px;

    border: 1px solid #52606f;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.work-hours-page-actions .button-secondary {
    background: transparent;
    color: #172033;
}

.work-hours-page-actions .button-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   TRAVEL DETAILS PAGE
   ========================================================= */

.travel-details-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.travel-details-page h2 {
    margin: 0 0 18px;

    font-size: 20px;
    font-weight: 600;
}


/* Existing travel details */

.travel-details-table {
    width: 100%;
    border-collapse: collapse;

    margin-bottom: 45px;
}

.travel-details-table th {
    padding: 10px 14px;

    background: #4f5fa8;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.travel-details-table td {
    padding: 10px 14px;

    border-bottom: 1px solid rgba(23, 32, 51, 0.12);

    font-size: 14px;
    vertical-align: middle;
}

.travel-details-total td {
    background: rgba(255, 255, 255, 0.20);
}


/* Edit / Delete */

.travel-details-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.travel-details-actions form {
    margin: 0;
}


/* Add Travel Detail */

.add-travel-detail-title {
    margin-top: 0;
}

.travel-details-form {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.travel-details-form-row {
    width: 560px;

    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    align-items: center;

    margin-bottom: 14px;
}

.travel-details-form-row label,
.travel-details-form-label {
    font-size: 15px;
    font-weight: 600;
}

.travel-details-form-row input {
    width: 100%;
    height: 34px;

    padding: 5px 8px;

    border: 1px solid #6f7885;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;
}

.travel-details-info-row {
    align-items: start;
}

.travel-details-info-row span:last-child {
    font-size: 14px;
}


/* Bottom actions */

.travel-details-page-actions {
    margin-top: auto;

    display: flex;
    justify-content: center;
    gap: 30px;

    padding-top: 40px;
}

.travel-details-page-actions .button-primary,
.travel-details-page-actions .button-secondary {
    display: inline-block;

    width: 220px;
    min-width: 220px;
    padding: 11px 18px;

    border: 1px solid #52606f;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.travel-details-page-actions .button-secondary {
    background: transparent;
    color: #172033;
}

.travel-details-page-actions .button-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Service Report tables */

.report-table th {
    text-align: left;
}

@media (max-width: 700px) {

    /* Signatures */

    .signature-reference {
        margin-bottom: 25px;
    }

    .signature-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .signature-panel {
        width: 100%;
    }

    .signature-field input,
    .signature-static-value,
    .signature-canvas,
    .signature-image,
    .signature-empty {
        width: 100%;
        max-width: none;
    }

    .signature-form-actions {
        width: 100%;

        flex-direction: column;
        gap: 12px;

        padding-top: 30px;
    }

    .signature-form-actions .button-primary,
    .signature-form-actions .signature-back-button {
        width: 100%;
        min-width: 0;
    }

    .signature-close-button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   SIGNATURES
   ========================================================= */

.signature-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.signature-reference {
    margin-bottom: 22px;
    font-size: 15px;
}

.signature-status {
    margin-bottom: 12px;
    font-size: 15px;
}

.signature-closed-message,
.signature-success,
.signature-error {
    margin-bottom: 25px;
    padding: 10px 14px;

    border: 1px solid #52606f;
    background: rgba(255, 255, 255, 0.30);

    font-size: 14px;
}

.signature-error {
    border-color: #a94442;
}

.signature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.signature-panel h2 {
    margin: 0 0 22px;
    font-size: 18px;
    font-weight: 600;
}

.signature-field {
    margin-bottom: 24px;
}

.signature-label {
    display: block;
    margin-bottom: 7px;

    font-size: 15px;
    font-weight: 600;
}

.signature-field input,
.signature-static-value {
    width: 100%;
    max-width: 500px;
    min-height: 38px;

    padding: 8px 10px;

    border: 1px solid #6f7885;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;
}

.signature-static-value {
    background: rgba(255, 255, 255, 0.35);
}

.signature-canvas {
    display: block;

    width: 100%;
    max-width: 500px;
    height: auto;

    border: 1px solid #6f7885;
    background: #ffffff;

    touch-action: none;
}

.signature-canvas-actions {
    margin-top: 10px;
}

.signature-button-secondary,
.signature-back-button,
.signature-close-button {
    display: inline-block;

    padding: 9px 16px;

    border: 1px solid #52606f;
    border-radius: 4px;

    background: transparent;
    color: #172033;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.signature-button-secondary:hover,
.signature-back-button:hover {
    background: rgba(255, 255, 255, 0.35);
}

.signature-signed-time {
    margin-top: 10px;
    font-size: 13px;
}

.signature-image {
    display: block;

    width: 100%;
    max-width: 500px;
    height: 180px;

    object-fit: contain;

    border: 1px solid #6f7885;
    background: #ffffff;
}

.signature-empty {
    width: 100%;
    max-width: 500px;

    padding: 25px;

    border: 1px solid #6f7885;
    background: rgba(255, 255, 255, 0.25);

    text-align: center;
    font-size: 14px;
}

.signature-form-actions {
    margin-top: auto;
    padding-top: 40px;

    display: flex;
    justify-content: center;
    gap: 40px;
}

.signature-form-actions .button-primary,
.signature-form-actions .signature-back-button {
    width: 220px;
    min-width: 220px;
}

.signature-form-actions .button-primary {
    border: none;
    cursor: pointer;
}

.signature-close-box {
    margin-top: 40px;
    padding-top: 30px;

    border-top: 1px solid rgba(23, 32, 51, 0.15);
}

.signature-close-box h2 {
    margin-top: 0;
    font-size: 18px;
}

.signature-close-button {
    min-width: 180px;

    background: #4f5fa8;
    color: #ffffff;

    border-color: #4f5fa8;
}

.signature-close-button:hover {
    filter: brightness(0.92);
}

/* Edit Service Report */

.service-report-form-errors {
    margin: 0 10px 25px;
    padding: 10px 14px;

    border: 1px solid #a94442;
    background: rgba(255, 255, 255, 0.45);

    font-size: 14px;
}

.service-report-form-errors div {
    margin-top: 5px;
}

/* Return journey notice */

.travel-return-notice {
    margin-top: 18px;
    padding: 12px 16px;

    border: 1px solid #4f5fa8;
    border-left: 5px solid #4f5fa8;

    background: rgba(79, 95, 168, 0.08);

    font-size: 14px;
    line-height: 1.5;
    color: #172033;
}

.travel-return-notice strong {
    color: #4f5fa8;
}