/* General styling for body and background */
body {
    background-color: #121212; /* Dark black background */
    background-image: url('../images/dark-texture.png'); /* Optional: add a background texture */
    color: #E0E0E0; /* Light grey text */
    font-size: 16px;
}

/* Apply white text color to all headers, paragraphs, and labels */
h1, h2, p, label {
    color: #FFFFFF; /* White text */
}

/* Specific form labels */
.col-form-label {
    color: #FFFFFF; /* White text for form labels */
}

.mb-3 {
    color: #FFFFFF; /* White text for form labels */
}

/* Override Bootstrap navbar variables */
.navbar {
    background-image: var(--bs-gradient);
    background-color: #1E1E2F; /* Dark textured background for navigation */
}

/* Ensure white text for navbar brand and centered text with higher specificity */
.navbar .navbar-text, 
.navbar .navbar-brand, 
.navbar .navbar-text h5, 
.navbar .navbar-brand h1 {
    color: #FFFFFF !important; /* Force white text */
}


/* Card components */
.card {
    background-color: #1A1A2E; /* Darker background for cards */
    border: 1px solid #2C3E50; /* Blueish border */
    color: #FFFFFF;
}

.card-header {
    background-color: #232323; /* Darker background for card headers */
    color: #FFFFFF;
}

/* Buttons */
.btn-primary {
    background-color: #375A7F; /* Muted blue for primary buttons */
    border-color: #2C3E50;
}

.btn-primary:hover {
    background-color: #2C3E50; /* Darker blue on hover */
    border-color: #1B4F72;
}

.btn-warning {
   
    border-color: #2C3E50;
}


.btn-warning {
   
    border-color: #2C3E50;
}

.btn-warning:hover {
    
    border-color: #1B4F72;
}

.btn-success {
   
    border-color: #2C3E50;
}

.btn-success:hover {
    
    border-color: #1B4F72;
}


.btn-secondary {
    background-color: #4A4A4A; /* Secondary grey color */
    border-color: #2C3E50;
}
/* Info Buttons */
.btn-info {
    background-color: #5bc0de; /* Soft cyan for info buttons */
    border-color: #2C3E50;
}

.btn-info:hover {
    background-color: #31b0d5; /* Darker cyan on hover */
    border-color: #1B4F72;
}

/* Danger Buttons */
.btn-danger {
    background-color: #E74C3C; /* Soft red for danger buttons */
    border-color: #2C3E50;
}

.btn-danger:hover {
    background-color: #C0392B; /* Darker red on hover */
    border-color: #1B4F72;
}

/* Custom alternating row colors */
#pendingApplicationsTable tbody tr:nth-of-type(odd),
#allLeaveRecordsTable tbody tr:nth-of-type(odd),
#leaveRecordsTable tbody tr:nth-of-type(odd),
#employeeTable tbody tr:nth-of-type(odd){
    background-color: #2C2C2C !important; /* Darker background for odd rows */
    color: #E0E0E0 !important; /* Light text for dark rows */
}

#pendingApplicationsTable tbody tr:nth-of-type(even),
#allLeaveRecordsTable tbody tr:nth-of-type(even),
#leaveRecordsTable tbody tr:nth-of-type(even),
#employeeTable tbody tr:nth-of-type(even) {
    background-color: #232323 !important; /* Slightly lighter background for even rows */
    color: #E0E0E0 !important; /* Light text for dark rows */
}

/* Ensure that Bootstrap table styles don't interfere */
#pendingApplicationsTable tbody tr,
#allLeaveRecordsTable tbody tr,
#leaveRecordsTable tbody tr,
#employeeTable tbody tr {
    background-color: inherit !important;
    color: inherit !important;
}

/* Hover effect for all rows */
#pendingApplicationsTable tbody tr:hover,
#allLeaveRecordsTable tbody tr:hover,
#leaveRecordsTable tbody tr:hover,
#employeeTable tbody tr:hover {
    background-color: #1E1E2F !important; /* Darker hover color */
    color: #FFFFFF !important; /* White text on hover */
}

/* Custom highlight for selected row */
#pendingApplicationsTable tbody tr.row-selected,
#allLeaveRecordsTable tbody tr.row-selected,
#leaveRecordsTable tbody tr.row-selected,
#employeeTable tbody tr.row-selected {
    background-color: #4A90E2 !important; /* Slightly darker blue background for selected row */
    color: #FFFFFF !important; /* Black text for selected row */
}

/* Ensure hover styles don't interfere with selected row */
#pendingApplicationsTable tbody tr:hover.row-selected,
#allLeaveRecordsTable tbody tr:hover.row-selected,
#leaveRecordsTable tbody tr:hover.row-selected,
#employeeTable tbody tr:hover.row-selected {
    background-color: #357ABD !important; /* Darker blue on hover */
    color: #FFFFFF !important; /* Black text for selected row on hover */
}


/* Link styling */
a, .btn-link {
    color: #64B5F6; /* Light blue for links */
}

a:hover {
    color: #42A5F5; /* Brighter blue on hover */
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1E1E2F; /* Darker background for scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: #375A7F; /* Blue scrollbar thumb */
    border-radius: 20px;
}

/* Input Fields */
input, textarea, select {
    background-color: #1A1A2E; /* Dark background for input fields */
    border: 1px solid #2C3E50; /* Blueish border */
    color: #E0E0E0; /* Light grey text */
}

input::placeholder {
    color: #B0BEC5; /* Placeholder text color */
}

/* Form styling */
.form-control {
    background-color: #1A1A2E;
    color: #E0E0E0;
    border: 1px solid #375A7F; /* #2C3E50;*/
}

.dropdown {
    background-color: #1A1A2E;
    color: #E0E0E0;
    border: 1px solid #375A7F; /* #2C3E50;*/
}

.form-control:focus {
    border-color: #375A7F;
    box-shadow: none; /* Disable the default shadow effect */
}

/* Table headers sticky */
.table-sticky th {
    background: #1E1E2F;
    color: #FFFFFF;
    position: sticky;
    top: -20px;
    z-index: 990;
}

/* Ensure dark theme for lists */
.p-3 {
    background-color: #1A1A2E; /* Dark background for lists */
    color: #FFFFFF; /* Light text color */
}

.list-unstyled {
    background-color: #1A1A2E; /* Dark background for lists */
    color: #FFFFFF; /* Light text color */
}

.list-unstyled li {
    padding: 5px;
}

/* List item hover effect */
.list-unstyled li:hover {
    background-color: #375A7F; /* Darker blue on hover */
    color: #FFFFFF;
}

.table tbody tr:nth-of-type(odd) {
    background-color: #2C2C2C !important; /* Darker background for odd rows */
    color: #E0E0E0 !important;
}

.table tbody tr:nth-of-type(even) {
    background-color: #232323 !important; /* Slightly lighter background for even rows */
    color: #E0E0E0 !important;
}

/* Hover effect for table rows */
.table tbody tr:hover {
    background-color: #375A7F !important; /* Darker hover color */
    color: #FFFFFF !important;
}

/* Modal customization */
.modal-content {
    background-color: #1A1A2E; /* Dark background */
    border: 1px solid #375A7F; /* Blue border */
    color: #FFFFFF; /* White text */
}

.modal-header, .modal-footer {
    background-color: #232323; /* Darker background for header/footer */
    color: #FFFFFF; /* White text */
}

.modal-title {
    color: #FFFFFF; /* Ensure white text for modal title */
}

.modal-body {
    background-color: #1A1A2E; /* Dark background for modal body */
    color: #E0E0E0; /* Light grey text */
}

.modal-body input, .modal-body select, .modal-body textarea {
    background-color: #1A1A2E; /* Dark background for inputs */
    border: 1px solid #375A7F; /* Blueish border */
    color: #E0E0E0; /* Light grey text */
}

.modal-body input::placeholder, .modal-body textarea::placeholder {
    color: #B0BEC5; /* Lighter placeholder text */
}

.btn-close {
    color: #FFFFFF;
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

.read-notification {
    background-color: #444444 !important;
    color: #cccccc !important;
}

/* ===== Wagemaster dark form look (Windows-like blue focus) ===== */

/* Text inputs / selects / textareas */
.wm-dark-form .form-control,
.wm-dark-form .form-select,
.wm-dark-form textarea {
  background-color: #141414;               /* dark field surface */
  color: #eaeaea;                           /* text on dark */
  border: 1.25px solid #d9d9d9;/* softer than pure white at rest */
  border-radius: .375rem;
  outline: none;
  box-shadow: none;
  color-scheme: dark;                       /* native pickers pop in dark */
}

.wm-dark-form .form-control::placeholder,
.wm-dark-form textarea::placeholder {
  color: #9aa0a6;
}

/* Blue border + gentle glow on focus (Windows-like) */
.wm-dark-form .form-control:focus,
.wm-dark-form .form-select:focus,
.wm-dark-form textarea:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
  background-color: #141414;
  color: #eaeaea;
}

/* Disabled/read-only */
.wm-dark-form .form-control:disabled,
.wm-dark-form .form-select:disabled,
.wm-dark-form textarea:disabled {
  background-color: #1b1b1b;
  color: #888;
  border-color: #777; /* slightly lighter than 2f2f2f for visibility */
}

/* Checkboxes / radios */
.wm-dark-form .form-check-input {
  background-color: #141414;
  border: 1.25px solid #d9d9d9;  /* softer white at rest */
  accent-color: #0d6efd;                      /* blue when checked (modern) */
}

.wm-dark-form .form-check-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

.wm-dark-form .form-check-input:checked {
  border-color: #0d6efd;
  background-color: #0d6efd;
}

/* Date input: ensure calendar icon is visible on dark */
.wm-dark-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.9);
}
.wm-dark-form input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: .25rem 0; }
.wm-dark-form input[type="date"]::-webkit-datetime-edit,
.wm-dark-form input[type="date"]::-webkit-datetime-edit-year-field,
.wm-dark-form input[type="date"]::-webkit-datetime-edit-month-field,
.wm-dark-form input[type="date"]::-webkit-datetime-edit-day-field {
  color: #eaeaea;
}
.wm-dark-form input[type="date"]:focus::-webkit-calendar-picker-indicator {
  filter: invert(36%) sepia(96%) saturate(3051%) hue-rotate(206deg) brightness(96%) contrast(104%);
}

/* Invalid state (Bootstrap) */
.wm-dark-form .is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25) !important;
}