@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

* {box-sizing: border-box; margin: 0; padding: 0;}
body {font-family: 'Orbitron', sans-serif; background: linear-gradient(135deg, #0f0f0f, #1a1a2e); color: #00ffff; min-height: 100vh;}
.page-header {text-align: center; padding: 20px 10px;}
.page-header h1 {font-size: 28px; color: #00e6e6; margin-bottom: 10px;}
.controls {display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px;}
.btn, .print-button {background: #00ffff; color: #000; text-decoration: none; padding: 10px 16px; border-radius: 8px; font-weight: bold; transition: background 0.3s; border: none; cursor: pointer;}
.btn:hover, .print-button:hover {background: #00cccc;}
.no-print {display: inline-block;}
.summary {text-align: center; margin: 10px auto; font-size: 18px;}
.highlight {font-weight: bold; color: #00ffff;}
.employees-container {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 10px;}
.employee-card {background: #1c1c2c; border: 1px solid #00ffff; border-radius: 12px; box-shadow: 0 0 15px #00ffff55; width: 350px; max-width: 90%; margin: 10px; overflow: hidden; display: flex; flex-direction: column;}
.card-header {background: #112233; padding: 12px; display: flex; justify-content: space-between; align-items: center;}
.card-header h2 {font-size: 20px; color: #00e6e6;}
.actions {display: flex; gap: 8px;}
.action-link {color: #00ffff; text-decoration: none; font-size: 16px; transition: color 0.2s;}
.action-link:hover {color: #00cccc;}
.card-body {padding: 12px;}
.row {display: flex; justify-content: space-between; margin-bottom: 8px;}
.row.total {border-top: 1px solid #00ffff; padding-top: 8px; margin-top: 8px;}
.label {font-weight: bold; color: #00e6e6;}
.value {color: #ffffff;}
.back-link {display: block; text-align: center; margin: 20px 0; color: #00ffff; text-decoration: none;}
.back-link:hover {text-decoration: underline;}
.table-responsive {margin: 20px 10px; overflow-x: auto;}
.admin-table {width: 100%; border-collapse: collapse; background: #111;}
.admin-table th, .admin-table td {border: 1px solid #00cccc; padding: 8px; text-align: center; white-space: nowrap;}
.admin-table th {background: #112233; color: #00ffff;}
.admin-table tbody tr:nth-child(even) {background: #1a1a2e;}
.name-cell {max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.uniform-cell {max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.form-box {background: #1c1c2c; padding: 20px; border-radius: 12px; border: 1px solid #00ffff; box-shadow: 0 0 15px #00ffff55; width: 350px; max-width: 90%; margin: 20px auto;}
.form-box h2 {text-align: center; margin-bottom: 15px; color: #00e6e6;}
.form-box label {display: block; margin-top: 10px; font-size: 14px;}
.form-box input[type="text"], .form-box input[type="number"], .form-box input[type="password"] {width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #00cccc; background: #111; color: #00ffff; margin-top: 5px;}
.form-box button {margin-top: 15px; width: 100%; padding: 10px; border: none; border-radius: 6px; background: #00ffff; color: #000; font-weight: bold; font-size: 14px; cursor: pointer; transition: background 0.3s;}
.form-box button:hover {background: #00cccc;}
.login-container {display: flex; justify-content: center; align-items: center; height: 70vh;}
.form-inline {display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px;}
.error {color: #ff5555; text-align: center; margin-bottom: 10px;}
.detail-container {margin: 20px auto; width: 90%; max-width: 600px; background: #1c1c2c; padding: 20px; border-radius: 12px; border: 1px solid #00ffff; box-shadow: 0 0 15px rgba(0,255,255,0.4);}
.input-checkbox-group label {display: flex; align-items: center; gap: 8px; margin-top: 8px;}
/* Print-specific */
@media print {
  .no-print, .no-print * {display: none !important;}
  body {background: #fff; color: #000;}
  .admin-table, .admin-table th, .admin-table td {border: 1px solid #000 !important; color: #000;}
  .admin-table th {background: #ddd !important;}
}
/* Responsive */
@media (max-width: 600px) {
  .page-header h1 {font-size: 24px;}
  .print-button, .btn {padding: 8px 12px; font-size: 12px;}
  .employee-card, .form-box, .detail-container {width: 100%; margin: 10px 0;}
  .card-header h2 {font-size: 18px;}
  .row {flex-direction: column; align-items: flex-start;}
  .row .label, .row .value {font-size: 14px;}
  .actions {gap: 6px;}
  .action-link {font-size: 14px;}
  .admin-table th, .admin-table td {padding: 6px; font-size: 12px;}
  .uniform-cell {max-width: 80px;}
  .name-cell {max-width: 80px;}
  .form-inline {flex-direction: column; align-items: center;}
}