/* File: assets/css/style.css */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color:rgb(255, 255, 255);
}

h2 {
    color: #333;
}

a {
    text-decoration: none;
    color: #007bff;
}

a:hover {
    text-decoration: underline;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

table th, table td {
    padding: 12px;
    border: 1px solidrgb(255, 255, 255);
    text-align: center;
}

table th {
    background-color: #007bff;
    color: #fff;
}

table tr:nth-child(even) {
    background-color:rgb(255, 255, 255);
}

button, input[type="submit"], input[type="button"] {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 8px 14px;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #0056b3;
}

input[type="text"], input[type="number"] {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form {
    max-width: 600px;
    margin: 0 auto;
    background-color:rgb(255, 255, 255);
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.05);
}
/* Tambahan: Styling khusus saat dicetak */
@media print {
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      -moz-print-color-adjust: exact !important;
    }
  
    body {
      background: white;
      color: black;
      margin: 0;
    }
  
    a, button, .no-print {
      display: none !important;
    }
  
    table {
      width: 100%;
      border-collapse: collapse;
    }
  
    table th, table td {
      border: 1px solid black;
      padding: 8px;
    }
  
    table th {
      background-color: #007bff !important; /* Use a strong color */
      color: white !important;
    }
  
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
  }
  Implementing these changes should help your printouts retain color. However, final results depend on the user's printer and browser settings.
  
  If you want, I can help you generate a full updated CSS file with these print improvements.
  
  
  pada saat klik tombol tolong background belakangnya tetap putih
  
  
  The user wants that when they click the print button, the background behind the content remains white in the printout. This means the background color of the body or main container should stay white in the print media styles.
  
  In the previous suggestion, the body background was set to white in the print media, which should keep the background white. Possibly the user wants to ensure that the background is explicitly white and not overridden or removed.
  
  I will update the print media CSS to explicitly set the background color of the body and main containers to white and ensure that no other background colors override it.
  
  I will provide an updated CSS snippet for the print media query that ensures the background remains white when printing, while preserving colors for other elements.
  
  No files to edit, so I will provide the updated CSS snippet in the completion.
  
  
  Task Completed
  To ensure the background remains white when you click the print button and print the page, you should explicitly set the background color of the body (and any main container if applicable) to white in your print CSS.
  
  Here is an updated @media print CSS snippet that keeps the background white while preserving colors for other elements:
  
  @media print {
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      -moz-print-color-adjust: exact !important;
    }
  
    body {
      background-color: white !important;
      color: black !important;
      margin: 0;
    }
  
    a, button, .no-print {
      display: none !important;
    }
  
    table {
      width: 100%;
      border-collapse: collapse;
    }
  
    table th, table td {
      border: 1px solid black !important;
      padding: 8px;
    }
  
    table th {
      background-color: #007bff !important; /* Strong blue background */
      color: white !important;
    }
  
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
  }
/* style.css */

/* Mengatur gaya umum untuk halaman */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f9;
}

/* Judul halaman */
h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Tombol cetak */
.btn-cetak {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-cetak:hover {
    background-color: #45a049;
}

/* Gaya untuk tabel */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

/* Header tabel */
th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Tabel yang menunjukkan data Surat Jalan */
.table-surat-jalan {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
}

.table-surat-jalan th, .table-surat-jalan td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.table-surat-jalan th {
    background-color:rgb(54, 157, 253);
}

.table-surat-jalan tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-surat-jalan td {
    text-align: right;
}

/* Tombol kembali */
.no-print {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #2196F3;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}

.no-print:hover {
    background-color: #0b7dda;
}