/* --- General Body --- */
body {
  background-color: #000 !important;
  font-family: 'Courier New', Courier, monospace;
  color: #fff;
  margin: 0;
  padding: 0;
}

/* --- Performance Review Form (New/Edit) --- */
.performance-review-form {
  max-width: 800px;
  margin: 40px auto;
  background-color: #000;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 0, 86, 0.4);
  color: #fff;
  font-family: 'Courier New', monospace;
}

/* Heading */
.performance-review-form h2 {
  text-align: center;
  color: #ff2e6f;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 25px;
  text-shadow: 0 0 8px rgba(255, 46, 111, 0.5);
}

/* Labels */
.performance-review-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #d6d6d6;
  font-size: 14px;
}

/* Inputs */
.performance-review-form select,
.performance-review-form input[type="date"],
.performance-review-form input[type="text"],
.performance-review-form input[type="number"],
.performance-review-form textarea {
  width: 100%;
  padding: 10px 12px;
  background-color: #111;
  border: 1.5px solid #ff2e6f;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  box-sizing: border-box;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  font-family: 'Courier New', monospace;
}

.performance-review-form select:focus,
.performance-review-form input:focus,
.performance-review-form textarea:focus {
  border-color: #e82a64;
  outline: none;
  background-color: #111;
}

/* Form buttons container */
.performance-review-form .form-buttons {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 24px;
}

/* --- Buttons (General Styles for Form) --- */
.performance-review-form .btn-primary,
.performance-review-form .btn-secondary,
.performance-review-form .btn-success {
  font-family: 'Courier New', monospace !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  font-size: 18px !important;
}

/* Primary Button */
.performance-review-form .btn-primary {
  background-color: #ff2e6f !important;
  color: #fff !important;
  border: none !important;
}

.performance-review-form .btn-primary:hover {
  background-color: #e82a64 !important;
  box-shadow: 0 0 8px #ff2e6f !important;
  transform: scale(1.03) !important;
}

/* Secondary Button */
.performance-review-form .btn-secondary {
  background-color: transparent !important;
  color: #ff2e6f !important;
  border: 2px solid #ff2e6f !important;
}

.performance-review-form .btn-secondary:hover {
  background-color: #ff2e6f !important;
  color: #000 !important;
  border-color: #ff2e6f !important;
  transform: scale(1.03) !important;
}

/* Success Button */
.performance-review-form .btn-success {
  background-color: #ff2e6f !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.performance-review-form .btn-success:hover {
  background: linear-gradient(135deg, #ff2e6f, #ff2e6f) !important;
  box-shadow: 0 0 8px #ff2e6f !important;
  transform: scale(1.03) !important;
}

/* --- Performance Reviews Index/Table --- */
.performance-reviews-container {
  max-width: 1200px;
  margin: 50px auto;
  background-color: #000;
  padding: 40px 50px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(255, 46, 111, 0.3);
  color: #fff;
  font-family: 'Courier New', monospace;
}

.performance-reviews-container h2 {
  text-align: center;
  color: #ff2e6f;
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 30px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

/* --- Dropdown Selector Styling --- */
.performance-reviews-container select#employee_selector {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #111;
  color: #fff;
  border: 2px solid #ff2e6f;
  border-radius: 6px;
  padding: 10px 12px;
  padding-right: 30px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  cursor: pointer;
  min-width: 180px;
  max-width: 220px;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'10'%20height%3D'5'%20viewBox%3D'0%200%2010%205'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M0%200l5%205%205-5z'%20fill%3D'%23ff2e6f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 5px;
}

.performance-reviews-container select#employee_selector:hover,
.performance-reviews-container select#employee_selector:focus {
  border-color: #e82a64;
  outline: none;
  background-color: #111;
  transform: scale(1.02);
}

.performance-reviews-container label[for="employee_selector"] {
  display: inline-block;
  margin-right: 10px;
  color: #ff8caa;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  vertical-align: middle;
}

.performance-reviews-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  background-color: #111;
  border-radius: 16px;
}

.performance-reviews-container thead tr {
  background: #ff2e6f;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(255, 105, 180, 0.4);
}

.performance-reviews-container tbody tr {
  background: #111;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  color: #f1f1f1;
}

.performance-reviews-container tbody tr:hover {
  background: rgba(255, 105, 180, 0.12);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.3);
}

.performance-reviews-container td,
.performance-reviews-container th {
  padding: 16px 20px;
  font-size: 15px;
  vertical-align: middle;
}

/* --- Action Buttons (Edit/Delete) - Fully Consistent --- */
.performance-reviews-container .action-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.performance-reviews-container .action-buttons .btn-edit,
.performance-reviews-container .action-buttons .btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 12px 22px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: 'Courier New', monospace !important;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
  text-decoration: none !important;
  border: 2px solid #ff2e6f !important;
  box-sizing: border-box;
}

/* Edit Button */
.performance-reviews-container .btn-edit {
  background-color: #ff2e6f !important;
  color: #fff !important;
}

.performance-reviews-container .btn-edit:hover {
  background-color: #e82a64 !important;
  color: #000 !important;
  transform: scale(1.03) !important;
}

/* Delete Button */
.performance-reviews-container .btn-delete {
  background-color: transparent !important;
  color: #ff2e6f !important;
}

.performance-reviews-container .btn-delete:hover {
  background-color: #ff2e6f !important;
  color: #000 !important;
  transform: scale(1.03) !important;
}

/* --- Back Button --- */
/* --- Back Button --- */
/* Wrap Back button container to align with action buttons */
.performance-reviews-container .back-button-container {
  display: flex;
  justify-content: flex-start; /* or center, if you prefer */
  align-items: center;         /* vertically aligns the button */
  margin-top: 20px;            /* spacing from table/form above */
  gap: 12px;                   /* optional if multiple buttons */
}

/* Style the Back button */
.performance-reviews-container .btn-back {
  background-color: transparent !important;
  color: #ff2e6f !important;
  border: 2px solid #ff2e6f !important;
  padding: 12px 22px !important; /* match edit/delete */
  font-size: 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-family: 'Courier New', monospace !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.3s ease !important;
}

.performance-reviews-container .btn-back:hover {
  background-color: #ff2e6f !important;
  color: #000 !important;
  border-color: #ff2e6f !important;
}


.performance-reviews-container .btn-back i {
  font-size: 18px;
}