.darkroom-light-safe {
    background-color: #000; /* Black background */
    color: #ff4500; /* Dim orange text */
}
.darkroom-light-safe a {
    color: #ff6347; /* Slightly brighter for links */
}
.darkroom-light-safe input, .darkroom-light-safe textarea {
    background-color: #330000; /* Dark reddish background */
    color: #ff4500;
    border-color: #ff4500;
}
.darkroom-light-safe button {
    background-color: #660000;
    color: #ff4500;
    border-color: #ff4500;
}





/* General table styling for darkroom mode */
.darkroom-light-safe table {
    background-color: #330000; /* Dark reddish background */
    border-collapse: collapse;
    width: 100%;
}

/* Header row styling */
.darkroom-light-safe table thead tr {
    background-color: #660000; /* Slightly brighter for header */
}

.darkroom-light-safe table th {
    border: 1px solid #ff4500; /* Orange borders */
    padding: 8px;
    background-color: #660000;
    color: #ff6347; /* Brighter orange text */
    text-align: left;
}

/* Body row styling */
.darkroom-light-safe table tbody tr {
    background-color: #440000; /* Dark reddish background */
}

.darkroom-light-safe table tbody tr:nth-child(even) {
    background-color: #550000; /* Slightly darker for alternating rows */
}

.darkroom-light-safe table tbody tr:hover {
    background-color: #770000; /* Highlight on hover */
}

.darkroom-light-safe table td {
    border: 1px solid #ff4500; /* Orange borders */
    padding: 8px;
    background-color: #660000;
    color: #ff4500; /* Dim orange text */
}

/* Darkroom Safe Mode Styling for .photo-id */
.darkroom-light-safe .photo-id {
    font-size: 20px; /* Font size */
    font-weight: bold; /* Bold text */
    color: #ff4500; /* Dim orange text color for darkroom mode */
    background-color: #330000; /* Dark reddish background */
    padding: 10px; /* Increased padding for a more spacious look */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 1px 1px 3px rgba(255, 69, 0, 0.7); /* Slight shadow in orange to match theme */
    display: inline-block; /* Make it inline block */
    text-align: center; /* Center the text */
    border: 2px solid #ff4500; /* Border color in orange */
    min-width: 50px; /* Minimum width to ensure visibility */
    max-width: 60px; /* Maximum width to maintain proportion */
}

/* Darkroom Safe Mode Styling for Alert Success */
.darkroom-light-safe .alert-success {
    background-color: #440000; /* Darker red background */
    color: #ff4500; /* Dim orange text for better contrast */
    border: 1px solid #ff4500; /* Orange border */
    box-shadow: 0 2px 4px rgba(255, 69, 0, 0.6); /* Slight shadow to enhance visibility */
}

.darkroom-light-safe .alert-success h4 {
    color: #ff6347; /* Brighter orange color for headings */
}

.darkroom-light-safe .alert-success ul {
    list-style-type: none; /* Remove list bullets */
    padding-left: 0; /* Remove left padding */
}

.darkroom-light-safe .alert-success li {
    color: #ff6347; /* Brighter orange for list items */
}

/* Darkroom Safe Mode Styling for Alert Info */
.darkroom-light-safe .alert-info {
    background-color: #330000; /* Dark reddish background */
    color: #d18f47; /* Muted amber text for better contrast */
    border: 1px solid #b36b33; /* Softer muted orange border */
    box-shadow: 0 2px 4px rgba(179, 107, 51, 0.6); /* Subtle shadow for depth */
}

.darkroom-light-safe .alert-info h4 {
    color: #e3a863; /* Muted yellow-amber for headings */
}

.darkroom-light-safe .alert-info ul {
    list-style-type: none; /* Remove list bullets */
    padding-left: 0; /* Remove left padding */
}

.darkroom-light-safe .alert-info li {
    color: #e3a863; /* Muted yellow-amber for list items */
}

/* Darkroom Safe Mode Styling for Alert Warning */
.darkroom-light-safe .alert-warning {
    background-color: #4d2a00; /* Darker, muted orange background */
    color: #ff4500; /* Soft yellow-orange text for better readability */
    border: 1px solid #ffb84d; /* Muted yellow-orange border */
    box-shadow: 0 2px 4px rgba(255, 184, 77, 0.6); /* Subtle yellow-orange shadow */
}

.darkroom-light-safe .alert-warning h4 {
    color: #ff4500; /* Slightly brighter muted yellow for headings */
}

.darkroom-light-safe .alert-warning ul {
    list-style-type: none; /* Remove list bullets */
    padding-left: 0; /* Remove left padding */
}

.darkroom-light-safe .alert-warning li {
    color: #ff4500; /* Muted yellow-orange for list items */
}

/* When darkroom mode is enabled */
.darkroom-light-safe .image-overlay {
    position: relative;
}

.darkroom-light-safe .image-overlay img {
    display: block;
    width: 100%;
    height: auto;
}

.darkroom-light-safe .image-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 0, 0, 0.3); /* Semi-transparent red overlay */
    pointer-events: none; /* So that the image is still clickable */
}

/* Darkroom Safe Mode Styling for Select Element */
.darkroom-light-safe .form-select.dimensionSelect {
    background-color: #333333; /* Dark gray background for the select dropdown */
    color: #ffcc66; /* Soft yellow-orange text for contrast */
    border: 1px solid #ffcc66; /* Matching border color for consistency */
    padding: 5px; /* Padding for better spacing */
    width: 250px; /* Fixed width */
    margin: 10px;
}

.darkroom-light-safe .form-select.dimensionSelect option {
    background-color: #333333; /* Dark background for options */
    color: #ffcc66; /* Consistent text color for options */
}

.darkroom-light-safe .form-select.dimensionSelect:focus {
    outline: none; /* Remove the default blue outline on focus */
    border: 1px solid #ffb84d; /* Slightly brighter border on focus for visibility */
    box-shadow: 0 0 5px rgba(255, 184, 77, 0.6); /* Soft yellow-orange glow on focus */
}

.darkroom-light-safe .form-select.dimensionSelect option:checked {
    background-color: #4d2a00; /* Darker orange background for selected option */
    color: #ffb84d; /* Lighter yellow-orange text for selected option */
}

/* Darkroom Safe Styling for Tooltip Icon */
.darkroom-light-safe .tooltip-icon {
    color: #ffcc66; /* Soft yellow-orange text color */
    font-size: 20px; /* Slightly larger font size for better visibility */
    background-color: #333333; /* Dark background for the icon */
    padding: 5px; /* Space around the icon for a more spacious look */
    //border-radius: 50%; /* Rounded corners for the icon */
    border: none; /* Yellow-orange border to match text color */
    /*box-shadow: 0 2px 4px rgba(255, 204, 0, 0.6); /* Yellow-orange glow for emphasis */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Tooltip appearance */
.darkroom-light-safe .tooltip-icon:hover {
    background-color: #4d2a00; /* Dark orange background when hovering */
    color: #ffb84d; /* Lighter yellow-orange for text when hovered */
}

/* Styling for the tooltip content */
.darkroom-light-safe .tooltip-inner {
    background-color: #333333; /* Dark background for tooltip */
    color: #ffcc66; /* Soft yellow-orange text for readability */
    border: 1px solid #ffcc66; /* Matching border color for the tooltip */
}

/* Tooltip arrow styling */
.darkroom-light-safe .tooltip-arrow {
    border-top-color: #ffcc66; /* Soft yellow-orange for the arrow */
}

/* Darkroom Safe Modal Styling */
.darkroom-light-safe .modal-content {
    background-color: #2c2c2c; /* Dark background for the modal */
    color: #ffffff; /* White text color for readability */
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Dark shadow for depth */
}

/* Modal header */
.darkroom-light-safe .modal-header {
    background-color: #1a1a1a; /* Even darker background for the header */
    border-bottom: 2px solid #444; /* Subtle border to separate header */
    color: #ffcc66; /* Soft yellow-orange text for contrast */
}

.darkroom-light-safe .modal-header .modal-title {
    font-size: 1.25rem; /* Slightly larger title for emphasis */
}

/* Close button */
.darkroom-light-safe .modal-header .btn-close {
    background-color: #ffcc66; /* Close button in soft yellow-orange */
    border: none;
}

/* Modal body */
.darkroom-light-safe .modal-body {
    background-color: #2c2c2c; /* Dark background for the body */
    color: #ffffff; /* White text color for clarity */
    overflow: hidden; /* Hide overflow to avoid scrollbars */
}

.darkroom-light-safe .modal-body img {
    max-width: 100%; /* Ensure the image fits within the modal */
    max-height: 100%; /* Ensure the image fits within the modal */
    border-radius: 8px; /* Rounded corners for the image */
}

/* Modal footer */
.darkroom-light-safe .modal-footer {
    background-color: #1a1a1a; /* Dark background for footer */
    border-top: 2px solid #444; /* Subtle border to separate footer */
}

/* Darkroom Safe Mode Styling for Modal Footer Buttons (Précédent & Suivant) */
.darkroom-light-safe .modal-footer .btn-secondary {
    background-color: #333333; /* Dark gray background for buttons */
    border: 1px solid #555555; /* Lighter gray border for subtle visibility */
    color: #cccccc; /* Light gray text for better contrast */
    font-size: 1rem; /* Standard font size */
    padding: 10px 20px; /* Adequate padding for easy clickability */
    border-radius: 5px; /* Rounded corners for a smoother look */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition on hover */
}

.darkroom-light-safe .modal-footer .btn-secondary:hover {
    background-color: #444444; /* Slightly lighter gray on hover */
    border-color: #666666; /* Lighter gray border on hover */
}

.darkroom-light-safe .modal-footer .btn-secondary:focus {
    outline: none; /* Remove default outline on focus */
    box-shadow: 0 0 5px rgba(204, 204, 204, 0.6); /* Soft white glow on focus for accessibility */
}

/* Subtle button colors for 'Précédent' and 'Suivant' */
.darkroom-light-safe .modal-footer .btn-secondary#prevImage {
    background-color: #5c4b3b; /* Muted brownish color for 'Précédent' */
    border: 1px solid #7a6651; /* Slightly lighter brownish border */
}

.darkroom-light-safe .modal-footer .btn-secondary#nextImage {
    background-color: #3b5c4b; /* Muted dark greenish color for 'Suivant' */
    border: 1px solid #516a5a; /* Slightly lighter greenish border */
}

/* Hover effects for 'Précédent' and 'Suivant' buttons */
.darkroom-light-safe .modal-footer .btn-secondary#prevImage:hover {
    background-color: #6a5c4b; /* Darker brown on hover for 'Précédent' */
    border-color: #8b7a65; /* Lighter brown border on hover */
}

.darkroom-light-safe .modal-footer .btn-secondary#nextImage:hover {
    background-color: #4b6a5c; /* Darker greenish color on hover for 'Suivant' */
    border-color: #6a7a6a; /* Lighter greenish border on hover */
}

/* Darkroom Safe Mode Styling for Input Fields */
.darkroom-light-safe input[type="text"],
.darkroom-light-safe input[type="number"],
.darkroom-light-safe textarea,
.darkroom-light-safe select {
    background-color: #330000; /* Dark reddish background */
    color: #ffcc66; /* Yellow-orange text color */
    border: 1px solid #996633; /* Border to match text color */
    padding: 5px; /* Space inside the input */
}

/* Remove white background on focus */
.darkroom-light-safe input[type="text"]:focus,
.darkroom-light-safe input[type="number"]:focus,
.darkroom-light-safe textarea:focus,
.darkroom-light-safe select:focus {
    background-color: #440000; /* Slightly lighter dark reddish background */
    color: #ffcc66; /* Keep the text color consistent */
    outline: none; /* Remove default browser outline */
    border: 1px solid #996633; /* Optional: Brighter border to indicate focus */
}