/* General page styling - applies to the entire application */
body {
    background-color: #f8f9fa; /* Light gray background improves readability across all pages */
}

/* Card headers - used in cards on both pages (e.g., for section titles) */
.card-header {
    background-color: #007bff; /* Blue background for visual distinction */
    color: white; /* White text for contrast against the blue background */
}

/* Tables - used in data display (e.g., species table on one of your pages) */
.table {
    margin-bottom: 0; /* Removes extra spacing below tables, useful for fitting within cards or containers */
}

.table thead th {
    position: sticky; /* Keeps table headers fixed when scrolling, great for long tables */
    top: 0; /* Sticks headers to the top of the container */
    background-color: #fff; /* White background ensures headers remain visible over scrolling content */
    z-index: 1; /* Ensures headers stay above table body rows */
    border-bottom: 2px solid #dee2e6; /* Matches Bootstrap’s default table styling */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Adds a subtle shadow for better UX when scrolling */
}

/* Species table - specific to a scrollable table (e.g., species list) */
.species-table {
    max-height: 500px; /* Limits height to make large tables scrollable */
    overflow-y: auto; /* Enables vertical scrolling when content exceeds height */
    position: relative; /* Allows sticky headers to work within this container */
}

/* Species photos - used for images in tables or lists (e.g., species thumbnails) */
.species-photo {
    max-width: 100px; /* Caps width to keep photos uniform and prevent layout overflow */
    height: auto; /* Maintains aspect ratio */
    margin: 2px; /* Adds small spacing around photos for a clean look */
}

/* Editable elements - used for interactive table cells or fields */
.editable:hover {
    background-color: #f8f9fa; /* Light hover effect indicates editability */
    cursor: pointer; /* Pointer cursor shows the element is clickable */
}

/* Table feedback - used for messages below tables (e.g., "No data found") */
.table-feedback {
    font-size: 0.9em; /* Smaller text keeps feedback subtle but readable */
}

/* Status logos - used for small icons (e.g., status indicators in tables) */
.status-logo {
    max-width: 50px; /* Limits size for consistency in layouts */
    height: auto; /* Preserves aspect ratio */
    border-radius: 5px; /* Rounded corners for a polished look */
}

/* Photo items - used for individual photo containers in previews or galleries */
.photo-item {
    position: relative; /* Allows absolute positioning of child elements (e.g., delete buttons) */
}

.photo-item img {
    cursor: move; /* Indicates photos can be dragged (for reordering) */
}

/* Switch styling - used for toggle switches (e.g., enabling/disabling features) */
.form-switch {
    display: flex; /* Aligns switch and label horizontally */
    align-items: center; /* Centers items vertically */
}

.form-switch input[type="checkbox"] {
    display: none; /* Hides default checkbox for custom styling */
}

.form-switch .form-check-label {
    position: relative; /* Positions pseudo-elements (switch background/knob) */
    padding-left: 3rem; /* Space for the switch */
    cursor: pointer; /* Indicates clickability */
    user-select: none; /* Prevents text selection during interaction */
}

.form-switch .form-check-label::before {
    content: ''; /* Creates the switch background */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Centers vertically */
    width: 2.5rem; /* Switch width */
    height: 1.5rem; /* Switch height */
    background-color: #ccc; /* Gray when unchecked */
    border-radius: 1rem; /* Rounded for a modern look */
    transition: background-color 0.3s; /* Smooth color change */
}

.form-switch .form-check-label::after {
    content: ''; /* Creates the switch knob */
    position: absolute;
    left: 0.25rem; /* Starting position when unchecked */
    top: 50%;
    transform: translateY(-50%);
    width: 1rem; /* Knob size */
    height: 1rem;
    background-color: #fff; /* White knob */
    border-radius: 50%; /* Circular knob */
    transition: left 0.3s; /* Smooth movement */
}

.form-switch input[type="checkbox"]:checked + .form-check-label::before {
    background-color: #007bff; /* Blue when checked */
}

.form-switch input[type="checkbox"]:checked + .form-check-label::after {
    left: 1.25rem; /* Moves knob to the right when checked */
}

/* Photo drop zone - used for file upload areas (e.g., drag-and-drop zone) */
.photo-drop-zone {
    background-color: #f8f9fa; /* Light background for visibility */
    border: 2px dashed #ced4da; /* Dashed border indicates drop area */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Centers text (e.g., "Drop files here") */
    cursor: pointer; /* Indicates clickability */
    transition: all 0.3s ease; /* Smooth transitions for hover/drag effects */
}

.photo-drop-zone:hover {
    background-color: #e9ecef; /* Slightly darker on hover for feedback */
    border-color: #adb5bd; /* Darker border */
}

.photo-drop-zone.dragover {
    background-color: #d1e7dd; /* Greenish tint when files are dragged over */
    border-color: #0f5132; /* Dark green border for contrast */
}

.photo-drop-zone p {
    margin: 0; /* Removes default margin from text */
    color: #6c757d; /* Muted gray text for instructions */
}

/* Photo previews - used for uploaded photo thumbnails */
.photo-preview {
    position: relative; /* For positioning delete buttons */
    display: inline-block; /* Allows multiple previews side by side */
    margin: 10px; /* Spacing between previews */
}

.photo-preview img {
    width: 100px; /* Fixed width for consistency */
    height: 100px; /* Fixed height */
    object-fit: cover; /* Ensures images fit without distortion */
    border: 1px solid #ddd; /* Light border for definition */
    border-radius: 4px; /* Slightly rounded corners */
}

.photo-preview .delete-btn {
    position: absolute; /* Positions over the image */
    top: -10px; /* Above the image */
    right: -10px; /* To the right */
    background: red; /* Red for delete action */
    color: white; /* White "X" or icon */
    border: none; /* No border */
    border-radius: 50%; /* Circular button */
    width: 25px; /* Fixed size */
    height: 25px;
    display: flex; /* Centers content */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Indicates clickability */
    font-size: 14px; /* Size of "X" */
    line-height: 1; /* Tight line height */
}

.photo-preview .delete-btn:hover {
    background: darkred; /* Darker red on hover for feedback */
}

/* Photo metadata collapse - used for expandable metadata forms under previews */
.photo-preview .collapse {
    width: 200px; /* Fixed width for consistency */
}

.photo-preview .card-body {
    padding: 10px; /* Padding inside metadata card */
}

.progress-bar {
    background-color: #0d6efd; /* Blue to match theme */
    transition: width 0.3s ease; /* Smooth width change during upload */
}

#photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between cards */
}

/* Card group - used for displaying multiple photo cards (e.g., gallery) */
.card-group {
    display: flex; /* Flex layout for cards */
    flex-wrap: wrap; /* Wraps cards to the next line */
    gap: 1rem; /* Spacing between cards */
}

/* Photo card - individual card styling in the gallery */
.photo-card {
    width: 18rem; /* Fixed width for uniform cards */
    margin-bottom: 1rem; /* Space below each card */
    position: relative; /* For delete button positioning */
}

.photo-card img {
    height: 200px; /* Fixed height for images */
    object-fit: cover; /* Ensures images fit nicely */
}

/* Delete button - used on photo cards for removal */
 .delete-btn-photo {
    position: absolute;
    top: 10px; 
    right: 10px; 
    background: rgba(206, 205, 205, 0.8); 
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.delete-btn-photo:hover {
    background: rgba(255, 0, 0, 0.8);
    color: white;
} 

/* Draggable cards - enables reordering of cards (e.g., in the gallery) */
[data-sortable="true"] .card {
    cursor: move; /* Indicates draggability */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.logo-cell { position: relative; }
.logo-loader { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.8);
    z-index: 1;
}
.preview-mode {
    border: 2px solid #0d6efd;
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
}
.loading-error {
    border: 2px solid #dc3545;
}
.is-loading img {
    opacity: 0.5;
}