/* style.css */

/* Ensure dropdown menu in dark mode has correct styling */
.dropdown-menu.bg-dark .dropdown-item {
    color: #dee2e6; /* Light text for items */
}
.dropdown-menu.bg-dark .dropdown-item:hover,
.dropdown-menu.bg-dark .dropdown-item:focus {
    color: #fff; /* White text on hover/focus */
    background-color: #343a40; /* Darker background on hover/focus */
}
.dropdown-menu.bg-dark .dropdown-item.active,
.dropdown-menu.bg-dark .dropdown-item:active {
     color: #000; /* Black text for active item (against warning background) */
     background-color: var(--bs-warning); /* Use Bootstrap warning color for active background */
}
.dropdown-menu.bg-dark .dropdown-divider {
    border-top-color: #495057; /* Slightly darker divider */
}

/* Style form elements inside the dark dropdown */
.dropdown-menu.bg-dark .form-label {
     color: #ced4da; /* Lighter label text */
     font-size: 0.9em;
}
.dropdown-menu.bg-dark .form-control::placeholder {
     color: #6c757d; /* Muted placeholder text */
}
.dropdown-menu.bg-dark small,
.dropdown-menu.bg-dark .small {
     color: #adb5bd !important; /* Muted small text, !important needed sometimes for Bootstrap overrides */
}
.dropdown-menu.bg-dark a.small {
     color: var(--bs-warning) !important; /* Ensure link is warning color */
     text-decoration: none;
}
.dropdown-menu.bg-dark a.small:hover {
     text-decoration: underline;
}

/* Card border color (General) */
.card {
    border-color: #495057 !important;
}

/* Specific section background */
#about-us {
    /* background-color: #212529; */ /* Example, can be controlled by JS/Admin */
}

/* Footer styling */
footer {
    font-size: 0.9em;
    color: #6c757d; /* Muted text color */
}

/* --- Carousel Styles --- */
#headerCarousel .carousel-item {
    height: 60vh; /* Relative viewport height */
    min-height: 400px; /* Minimum height */
    background-color: #333; /* Fallback background if image fails */
    position: relative; /* Needed for absolute positioning of children */
    overflow: hidden; /* Hide parts of image that might overflow */
}

#headerCarousel .carousel-image-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   opacity: 0.8;
   z-index: 1;
}

/* MODIFIED Caption Styles */
#headerCarousel .carousel-caption {
    position: absolute; /* Position absolutely within the carousel item */
    bottom: 3rem; /* Position 3rem from the bottom */
    width: 45%; /* Width of the caption box */
    max-width: 500px; /* Max width for larger screens */
    background-color: rgba(0, 0, 0, 0.65); /* Dark semi-transparent background */
    padding: 1.5rem; /* Padding inside the caption box */
    border-radius: 0.375rem; /* Slightly rounded corners */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Increased shadow slightly */
    z-index: 2; /* Above background image */
    color: #fff; /* White text color */
}

/* Positioning for left/right alignment */
#headerCarousel .carousel-caption.text-start {
    left: 5%; /* Position from the left */
    right: auto;
    text-align: left !important;
}

#headerCarousel .carousel-caption.text-end {
    right: 5%; /* Position from the right */
    left: auto;
    text-align: right !important;
}
#headerCarousel .carousel-caption.text-center { /* Added for center alignment */
   left: 50%;
   transform: translateX(-50%);
   text-align: center !important;
   width: 60%; /* Adjust width for centered captions if needed */
}


/* Caption text styling */
#headerCarousel .carousel-caption h5 {
    color: var(--bs-warning);
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.5rem;
}
 #headerCarousel .carousel-caption p {
     font-size: 1rem; /* Standard paragraph size */
     line-height: 1.6; /* Spacing between lines */
     margin-bottom: 1rem; /* Space below paragraphs */
 }
  #headerCarousel .carousel-caption .btn {
      margin-top: 0.5rem; /* Space above button */
      text-shadow: none; /* Remove text shadow from button text */
  }

/* Control Styles */
#headerCarousel .carousel-control-prev,
#headerCarousel .carousel-control-next {
  z-index: 10; /* Ensure controls are above caption */
  width: 5%; /* Make controls slightly narrower */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Make controls slightly more visible */
  border-radius: 50%;
  padding: 1.2rem; /* Increase clickable area */
  background-size: 60% 60%; /* Adjust size of the arrow inside */
}

/* Indicator Styles */
 #headerCarousel .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white for inactive indicators */
    border: 1px solid rgba(0,0,0,0.2);
    height: 4px; /* Make indicators thinner */
    width: 30px; /* Make indicators wider */
    margin: 0 5px; /* Spacing between indicators */
 }
 #headerCarousel .carousel-indicators .active {
     background-color: var(--bs-warning); /* Warning color for the active indicator */
     border-color: var(--bs-warning);
 }

/* --- Tool Icon Hover Animation (Homepage) --- */
.tool-link img {
   transition: transform 0.3s ease-in-out; /* Smooth transition for the transform */
   will-change: transform; /* Optimize rendering */
}

.tool-link:hover img {
   transform: scale(1.1); /* Scale image up slightly on hover */
}

/* --- Admin Panel Accordion Styling --- */
.accordion-header {
   position: relative; /* Needed for absolute positioning of toggle */
}
.accordion-button:focus { /* Prevent default blue box shadow */
   box-shadow: none;
   border-color: rgba(0,0,0,.125);
}
.accordion-button:not(.collapsed) { /* Keep warning color when expanded */
   color: var(--bs-warning);
   background-color: #343a40; /* Slightly different bg when open */
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button {
    /* MODIFIED: Increased padding significantly */
    padding-right: 6rem !important; /* Add space for arrow AND toggle */
    font-weight: bold; /* Make button text bold always */
}

.accordion-button::after { /* Style the accordion arrow for dark theme */
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after { /* Arrow when expanded */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffc107'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Warning color arrow */
    transform: rotate(-180deg);
}
.accordion-item {
    background-color: #2c3034; /* Match slide config item background */
    border: 1px solid #495057; /* Match slide config item border */
}
.accordion-body {
    background-color: #212529; /* Slightly darker body */
    padding: 1.25rem; /* Standard Bootstrap padding */
}

/* Styling for the visibility toggle positioned absolutely */
.admin-accordion-toggle {
   position: absolute;
   /* MODIFIED: Adjusted position slightly */
   top: 0.8rem;
   right: 3.5rem; /* Position it left of the accordion arrow */
   z-index: 5;   /* Ensure it's above the button */
   padding: 0;
}

.admin-accordion-toggle .form-check-input {
     background-color: #6c757d;
     border-color: #6c757d;
     cursor: pointer;
     margin-top: 0;
     margin-left: 0;
}
.admin-accordion-toggle .form-check-input:checked {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}
.admin-accordion-toggle .form-check-label {
    /* Label is now empty, these styles might not be needed or used */
    padding-left: 0.5em;
    font-size: 0.8em;
    color: #adb5bd;
    cursor: pointer;
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}


/* --- Tool Config Container Styling (NEW) --- */
.tool-config-container {
    background-color: #1c1e21; /* Darker than accordion body */
    border: 1px solid #404347; /* Subtle darker border */
    border-radius: 0.375rem; /* Standard rounding */
    padding: 1.25rem; /* Padding inside */
}
/* Remove bottom margin from the last container inside accordion body */
.accordion-body .tool-config-container:last-child {
    margin-bottom: 0 !important;
}


/* --- Form Field Styling Inside Accordion Body (NEW) --- */
.accordion-body input.form-control,
.accordion-body textarea.form-control,
.accordion-body select.form-select {
    background-color: #2a2d30; /* Distinct input background */
    border-color: #495057; /* Match other borders */
    color: #dee2e6; /* Light text */
}
.accordion-body input.form-control:focus,
.accordion-body textarea.form-control:focus,
.accordion-body select.form-select:focus {
     background-color: #2f3235; /* Slightly lighter on focus */
     border-color: var(--bs-warning);
     box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25); /* Warning focus glow */
     color: #fff;
}
.accordion-body input.form-control::placeholder,
.accordion-body textarea.form-control::placeholder {
    color: #6c757d; /* Muted placeholder */
}

/* --- Form Label Styling Inside Accordion Body (NEW) --- */
.accordion-body .form-label {
     font-size: 0.85em;
     margin-bottom: 0.25rem;
     color: var(--bs-warning); /* Yellow labels */
}

/* Optional: Style the h6 inside the tool config container */
.tool-config-container h6 {
    color: #adb5bd; /* Muted heading for Tool X */
    border-bottom: 1px dashed #495057; /* Optional separator */
    padding-bottom: 0.5rem;
}

/* --- *** STYLES FOR IRG CALCULATOR PAGE *** --- */

/* Darker background for the calculator card */
.bg-darker {
    background-color: #1c1e21 !important; /* Darkest grey */
}

/* Styling for the main result display area */
.result-display {
    background-color: var(--bs-body-tertiary);
    border: 1px solid var(--bs-border-color-translucent);
}
.result-display strong {
    color: var(--bs-warning);
}

/* Styling for Recent Results List Items */
#recent-results-list .list-group-item {
    /* REMOVED background-color here */
    border-color: #495057;
    color: #adb5bd;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: background-color 0.2s ease-in-out, max-height 0.3s ease-in-out 0.3s, padding 0.3s ease-in-out 0.3s, margin 0.3s ease-in-out 0.3s;
    overflow: hidden;
}

/* *** ADDED: Define alternating background colors *** */
.bg-recent-item-dark {
    background-color: #1c1e21 !important; /* Match calculator card bg */
}
.bg-recent-item-darker {
    background-color: #191A1D !important; /* Slightly lighter dark grey */
}

/* Apply hover effect based on the specific background */
#recent-results-list .list-group-item.bg-recent-item-dark:hover {
    background-color: #25292d !important; /* Slightly lighter version of #1c1e21 */
}
#recent-results-list .list-group-item.bg-recent-item-darker:hover {
    background-color: #1E2124 !important; /* Slightly lighter version of 

    */
}


#recent-results-list .list-group-item .fw-bold {
    color: var(--bs-light);
}
#recent-results-list .list-group-item .salary-value {
    color: var(--bs-warning) !important;
}
#recent-results-list .list-group-item .text-warning {
    color: var(--bs-warning) !important;
}
#recent-results-list .list-group-item small {
    font-size: 0.8em;
}

/* Styling for Icon Buttons (Copy/Delete) */
.copy-button,
.delete-result-button,
#delete-all-results-btn {
    cursor: pointer;
    vertical-align: middle;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}
.copy-button i,
.delete-result-button i,
#delete-all-results-btn i {
    vertical-align: middle;
    font-size: 0.9em;
}

.copy-button:hover {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.1);
}
.delete-result-button:hover,
#delete-all-results-btn:hover {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

/* --- Delete Animation --- */
@keyframes slide-fade-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

#recent-results-list .list-group-item.deleting {
  animation: slide-fade-out 0.5s forwards ease-in-out;
  border-width: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: -1px !important;
  max-height: 0;
  transition: max-height 0.3s ease-in-out 0.5s, padding 0.3s ease-in-out 0.5s, margin 0.3s ease-in-out 0.5s, border-width 0.3s ease-in-out 0.5s;
}

/* Custom styles for checked checkboxes */
.form-check-input:checked {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

/* Ensure focus ring matches theme */
.form-check-input:focus {
    border-color: #ffc107; /* Bootstrap warning color */
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25); /* Bootstrap warning focus shadow */
}


/* Ensure switches also use warning color */
.form-switch .form-check-input:checked {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.7)'/%3e%3c/svg%3e"); /* Darker circle for contrast */
}