/* ============== File: style.css (Lengkap dan Diperbaiki) ============== */
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
}

/* Style login */
.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0056b3,#1c3d5a);padding:20px;box-sizing:border-box}.login-container{width:100%;max-width:420px;padding:40px;background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.1);text-align:center}.login-header{margin-bottom:30px}.logo-icon{color:#007bff;margin-bottom:15px}.login-header h2{font-size:26px;font-weight:700;color:#1c3d5a;border-bottom:none;margin:0 0 8px 0}.login-header p{font-size:16px;color:#6c757d;margin:0}.login-form{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:0}.input-group{position:relative}.input-group i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#adb5bd;width:20px;height:20px}.input-group input{width:100%;padding:14px 15px 14px 50px;border:1px solid #ced4da;border-radius:8px;box-sizing:border-box;transition:border-color .3s,box-shadow .3s;font-size:16px}.input-group input::placeholder{color:#adb5bd}.input-group input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 4px rgba(0,123,255,.1)}.input-group input:focus+i{color:#007bff}.login-form button{width:100%;grid-column:auto;padding:15px 20px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:background-color .3s,transform .2s;margin-top:10px}.login-form button:hover{background-color:#0056b3;transform:translateY(-3px)}.error-message{background-color:#f8d7da;color:#721c24;padding:12px;border-radius:8px;border:1px solid #f5c6cb;text-align:center;margin-bottom:20px;font-size:14px}

/* PERUBAHAN: Lebar kontainer diubah menjadi 80% */
.container{max-width:85%;margin:20px auto;background:#fff;padding:25px 30px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1)}

/* Style untuk Header dan Navigasi Baru */
.header {
    text-align: center;
    margin-bottom: 15px;
}
.header h2 {
    border-bottom: 3px solid #eef2f7;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 25px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.icon-header{vertical-align:middle;margin-right:8px}
.nav-button{text-decoration:none;background-color:#6c757d;color:#fff;padding:8px 15px;border-radius:6px;font-size:14px;transition:background-color .3s}.nav-button:hover{background-color:#5a6268}
.nav-button-alt{background-color:#6c757d;color:#fff;padding:8px 15px;border-radius:6px;font-size:14px;border:none;cursor:pointer;font-family:'Poppins',sans-serif;transition:background-color .3s}
.nav-button-alt:hover{background-color:#5a6268}
.user-info{background-color:#eef2f7;padding:8px 15px;border-radius:20px;font-size:14px;display:flex;align-items:center;gap:10px}.logout-button{text-decoration:none;color:#dc3545;font-weight:700;display:flex;align-items:center;gap:5px}.logout-button:hover{color:#a71d2a}
fieldset{border:1px solid #ddd;border-radius:8px;padding:20px;margin-bottom:20px}legend{font-weight:600;color:#0056b3;padding:0 10px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.form-grid-tambah{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:flex-end}.jasa-select-container{flex-grow:1}label{font-weight:600;font-size:14px;color:#555;margin-bottom:8px;display:block}
input[type=text],input[type=password],input[type=number],input[type=date],select{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;font-size:15px;font-family:'Poppins',sans-serif}
input:focus,select:focus{outline:none;border-color:#007bff;box-shadow:0 0 5px rgba(0,123,255,.25)}.button-tambah{padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:15px;transition:background-color .3s}.button-tambah:hover{background-color:#218838}.table-wrapper{border:1px solid #ddd;border-radius:8px;overflow-x:auto;margin-bottom:20px}table{width:100%;border-collapse:collapse}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #dee2e6;white-space:nowrap;}th{background-color:#eef2f7;color:#333;font-weight:600}tr:last-child td{border-bottom:none}tr:hover{background-color:#f8f9fa}.button-hapus{background-color:#dc3545;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px;position: relative; z-index: 1;}.button-hapus:hover{background-color:#c82333}.pesan-info{text-align:center;padding:20px;color:#6c757d;background-color:#f8f9fa}.total-container{display:flex;justify-content:flex-end;align-items:center;padding:20px;background-color:#eef2f7;border-radius:8px;margin-top:20px}.total-text{font-size:18px;font-weight:600;color:#333;margin-right:15px}.total-harga{font-size:24px;font-weight:700;color:#0056b3}.button-simpan{width:100%;padding:15px;font-size:18px;font-weight:600;background:linear-gradient(90deg,#007bff,#0056b3);color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s}.button-simpan:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,123,255,.3)}.button-simpan:disabled{background:#adb5bd;cursor:not-allowed;transform:none;box-shadow:none}.pesan-sukses{padding:15px;background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;border-radius:8px;margin-bottom:20px}.button-detail{background-color:#17a2b8;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;position: relative; z-index: 1;}.button-detail:hover{background-color:#138496}

.pesan-error {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    margin-bottom: 20px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

fieldset > .checkbox-grid:last-of-type {
    margin-bottom: 0;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-item input[type="checkbox"] {
    width: auto;
    accent-color: #007bff;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

.checkbox-item label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: #fefefe;
    padding: 25px 30px;
    border: none;
    width: 100%;
    /*max-width: 1400px;*/ /* PERUBAHAN: Lebar modal diperbesar lagi */
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    position: relative;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
}

#modal-body h4, #password-modal h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    color: #1c3d5a;
    border-bottom: 2px solid #eef2f7;
    padding-bottom: 10px;
}
#modal-body h4:first-child {
    margin-top: 0;
}

#modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 15px;
}

.detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

.detail-list li:last-child {
    border-bottom: none;
}

.detail-list li strong {
    color: #555;
}

.detail-list li span {
    font-weight: 600;
    color: #0056b3;
}

.check-list li span:is(:contains('Tidak')) {
    color: #dc3545;
}

.check-list li span:is(:contains('Ok')) {
    color: #28a745;
}

.form-group {
    margin-bottom: 15px;
}

#password-modal .pesan-info,
#password-modal .pesan-sukses,
#password-modal .pesan-error {
    margin-bottom: 15px;
    text-align: center;
    padding: 10px;
}

.search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.search-form {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.form-group-filter {
    display: flex;
    flex-direction: column;
}
.form-group-filter label {
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 500;
}

.button-cari {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s;
}

.button-cari:hover {
    background-color: #0056b3;
}

.button-reset {
    text-decoration: none;
    background-color: #6c757d;
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color .3s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.button-reset:hover {
    background-color: #5a6268;
}

#save-pdf-btn {
    background-color: #28a745;
}

#save-pdf-btn:hover {
    background-color: #218838;
}

.form-grid-pelanggan {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: flex-end;
}

.button-tambah-alt {
    padding: 10px 20px;
    background-color: #17a2b8;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color .3s;
}

.button-tambah-alt:hover {
    background-color: #138496;
}

.pemeriksaan-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.pemeriksaan-table td {
    border: 1px solid #eee;
    padding: 8px;
    width: 50%;
}
.pemeriksaan-table span {
    font-weight: 600;
    color: #0056b3;
}
.spooring-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.spooring-detail-table th,
.spooring-detail-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 14px;
}

.spooring-detail-table th {
    background-color: #eef2f7;
}

.spooring-detail-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.form-grid-jasa {
    display: grid;
    grid-template-columns: 3fr 1fr auto; 
    gap: 15px;
    align-items: flex-end;
}

.button-wo {
    /*background: linear-gradient(45deg, #ffc107, #ff9800);*/
    background-color: #28a745;
    /*color: #212529;*/
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    position: relative; 
    z-index: 1;
}

.button-wo:hover {
    background-color: #218838;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    gap: 5px;
}

.pagination-link {
    text-decoration: none;
    color: #007bff;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.3s;
}

.pagination-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.pagination-link.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: 600;
}

.spooring-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    align-items: end;
}
.adjust-text-label {
    font-weight: 600;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 10px;
}

.tire-check-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px 10px;
    text-align: center;
}

.tire-check-grid label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

.tire-check-grid input {
    width: 100%;
    text-align: center;
    padding: 8px;
}

.tire-check-grid > div:nth-child(n+8):nth-child(-n+9),
.tire-check-grid > div:nth-child(n+15):nth-child(-n+16) {
    visibility: hidden;
}

.jasa-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.jasa-detail-table th,
.jasa-detail-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.jasa-detail-table th {
    background-color: #eef2f7;
}

.jasa-detail-table td:nth-child(2),
.jasa-detail-table td:nth-child(3),
.jasa-detail-table td:nth-child(4) {/* ============== File: style.css (Lengkap dan Diperbaiki) ============== */
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
}

/* Style login */
.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0056b3,#1c3d5a);padding:20px;box-sizing:border-box}.login-container{width:100%;max-width:420px;padding:40px;background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.1);text-align:center}.login-header{margin-bottom:30px}.logo-icon{color:#007bff;margin-bottom:15px}.login-header h2{font-size:26px;font-weight:700;color:#1c3d5a;border-bottom:none;margin:0 0 8px 0}.login-header p{font-size:16px;color:#6c757d;margin:0}.login-form{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:0}.input-group{position:relative}.input-group i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#adb5bd;width:20px;height:20px}.input-group input{width:100%;padding:14px 15px 14px 50px;border:1px solid #ced4da;border-radius:8px;box-sizing:border-box;transition:border-color .3s,box-shadow .3s;font-size:16px}.input-group input::placeholder{color:#adb5bd}.input-group input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 4px rgba(0,123,255,.1)}.input-group input:focus+i{color:#007bff}.login-form button{width:100%;grid-column:auto;padding:15px 20px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:background-color .3s,transform .2s;margin-top:10px}.login-form button:hover{background-color:#0056b3;transform:translateY(-3px)}.error-message{background-color:#f8d7da;color:#721c24;padding:12px;border-radius:8px;border:1px solid #f5c6cb;text-align:center;margin-bottom:20px;font-size:14px}

.container{max-width:1600px;margin:20px auto;background:#fff;padding:25px 30px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1)}

/* Style untuk Header dan Navigasi Baru */
.header {
    text-align: center;
    margin-bottom: 15px;
}
.header h2 {
    border-bottom: 3px solid #eef2f7;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 25px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.icon-header{vertical-align:middle;margin-right:8px}
.nav-button{text-decoration:none;background-color:#6c757d;color:#fff;padding:8px 15px;border-radius:6px;font-size:14px;transition:background-color .3s}.nav-button:hover{background-color:#5a6268}
.nav-button-alt{background-color:#6c757d;color:#fff;padding:8px 15px;border-radius:6px;font-size:14px;border:none;cursor:pointer;font-family:'Poppins',sans-serif;transition:background-color .3s}
.nav-button-alt:hover{background-color:#5a6268}
.user-info{background-color:#eef2f7;padding:8px 15px;border-radius:20px;font-size:14px;display:flex;align-items:center;gap:10px}.logout-button{text-decoration:none;color:#dc3545;font-weight:700;display:flex;align-items:center;gap:5px}.logout-button:hover{color:#a71d2a}
fieldset{border:1px solid #ddd;border-radius:8px;padding:20px;margin-bottom:20px}legend{font-weight:600;color:#0056b3;padding:0 10px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.form-grid-tambah{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:flex-end}.jasa-select-container{flex-grow:1}label{font-weight:600;font-size:14px;color:#555;margin-bottom:8px;display:block}
input[type=text],input[type=password],input[type=number],input[type=date],select{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;font-size:15px;font-family:'Poppins',sans-serif}
input:focus,select:focus{outline:none;border-color:#007bff;box-shadow:0 0 5px rgba(0,123,255,.25)}.button-tambah{padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:15px;transition:background-color .3s}.button-tambah:hover{background-color:#218838}.table-wrapper{border:1px solid #ddd;border-radius:8px;overflow-x:auto;margin-bottom:20px}table{width:100%;border-collapse:collapse}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #dee2e6;white-space:nowrap;}th{background-color:#eef2f7;color:#333;font-weight:600}tr:last-child td{border-bottom:none}tr:hover{background-color:#f8f9fa}.button-hapus{background-color:#dc3545;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px;position: relative; z-index: 1;}.button-hapus:hover{background-color:#c82333}.pesan-info{text-align:center;padding:20px;color:#6c757d;background-color:#f8f9fa}.total-container{display:flex;justify-content:flex-end;align-items:center;padding:20px;background-color:#eef2f7;border-radius:8px;margin-top:20px}.total-text{font-size:18px;font-weight:600;color:#333;margin-right:15px}.total-harga{font-size:24px;font-weight:700;color:#0056b3}.button-simpan{width:100%;padding:15px;font-size:18px;font-weight:600;background:linear-gradient(90deg,#007bff,#0056b3);color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s}.button-simpan:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,123,255,.3)}.button-simpan:disabled{background:#adb5bd;cursor:not-allowed;transform:none;box-shadow:none}.pesan-sukses{padding:15px;background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;border-radius:8px;margin-bottom:20px}.button-detail{background-color:#17a2b8;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;position: relative; z-index: 1;}.button-detail:hover{background-color:#138496}

.pesan-error {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    margin-bottom: 20px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

fieldset > .checkbox-grid:last-of-type {
    margin-bottom: 0;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-item input[type="checkbox"] {
    width: auto;
    accent-color: #007bff;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

.checkbox-item label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: #fefefe;
    padding: 25px 30px;
    border: none;
    width: 100%;
    max-width: 750px; 
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    position: relative;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
}

#modal-body h4, #password-modal h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    color: #1c3d5a;
    border-bottom: 2px solid #eef2f7;
    padding-bottom: 10px;
}
#modal-body h4:first-child {
    margin-top: 0;
}

#modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 15px;
}

.detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

.detail-list li:last-child {
    border-bottom: none;
}

.detail-list li strong {
    color: #555;
}

.detail-list li span {
    font-weight: 600;
    color: #0056b3;
}

.check-list li span:is(:contains('Tidak')) {
    color: #dc3545;
}

.check-list li span:is(:contains('Ok')) {
    color: #28a745;
}

.form-group {
    margin-bottom: 15px;
}

#password-modal .pesan-info,
#password-modal .pesan-sukses,
#password-modal .pesan-error {
    margin-bottom: 15px;
    text-align: center;
    padding: 10px;
}

.search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.search-form {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.form-group-filter {
    display: flex;
    flex-direction: column;
}
.form-group-filter label {
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 500;
}

.button-cari {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s;
}

.button-cari:hover {
    background-color: #0056b3;
}

.button-reset {
    text-decoration: none;
    background-color: #6c757d;
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color .3s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.button-reset:hover {
    background-color: #5a6268;
}

#save-pdf-btn {
    background-color: #28a745;
}

#save-pdf-btn:hover {
    background-color: #218838;
}

.form-grid-pelanggan {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: flex-end;
}

.button-tambah-alt {
    padding: 10px 20px;
    background-color: #17a2b8;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color .3s;
}

.button-tambah-alt:hover {
    background-color: #138496;
}

.pemeriksaan-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.pemeriksaan-table td {
    border: 1px solid #eee;
    padding: 8px;
    width: 50%;
}
.pemeriksaan-table span {
    font-weight: 600;
    color: #0056b3;
}
.spooring-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.spooring-detail-table th,
.spooring-detail-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 14px;
}

.spooring-detail-table th {
    background-color: #eef2f7;
}

.spooring-detail-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.form-grid-jasa {
    display: grid;
    grid-template-columns: 3fr 1fr auto; 
    gap: 15px;
    align-items: flex-end;
}

.button-wo {
    background: linear-gradient(45deg, #ffc107, #ff9800);
    color: #212529;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    position: relative; 
    z-index: 1;
}

.button-wo:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    gap: 5px;
}

.pagination-link {
    text-decoration: none;
    color: #007bff;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.3s;
}

.pagination-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.pagination-link.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: 600;
}

.spooring-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    align-items: end;
}
.adjust-text-label {
    font-weight: 600;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 10px;
}

.tire-check-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px 10px;
    text-align: center;
}

.tire-check-grid label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

.tire-check-grid input {
    width: 100%;
    text-align: center;
    padding: 8px;
}

.tire-check-grid > div:nth-child(n+8):nth-child(-n+9),
.tire-check-grid > div:nth-child(n+15):nth-child(-n+16) {
    visibility: hidden;
}

.jasa-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.jasa-detail-table th,
.jasa-detail-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.jasa-detail-table th {
    background-color: #eef2f7;
}

.jasa-detail-table td:nth-child(2),
.jasa-detail-table td:nth-child(3),
.jasa-detail-table td:nth-child(4) {
    text-align: right;
}

/* PERUBAHAN: Gaya untuk input kuantitas dibuat lebih spesifik */
#keranjang-belanja .quantity-input {
    width: 50px;
    text-align: center;
    padding: 6px;
}

    text-align: right;
}

/* PERUBAHAN: Gaya untuk input kuantitas diperkecil */
.quantity-input {
    width: 45px;
    text-align: center;
    padding: 5px;
}

/* PERUBAHAN: Menambahkan gaya untuk 4 input telapak ban */
.multi-input-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.multi-input-row {
    display: flex;
    gap: 2px;
}
.multi-input-row input {
    width: 100%;
    padding: 5px;
    font-size: 12px;
    box-sizing: border-box;
}
.average-input {
    background-color: #e9ecef;
    font-weight: bold;
    border: 1px solid #ced4da;
    padding: 5px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* BARU: Gaya untuk tombol Edit */
.button-edit {
    text-decoration: none;
    background-color: #ffc107;
    color: #212529;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background-color .3s;
}

.button-edit:hover {
    background-color: #e0a800;
}