/* General page styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f1ed; /* #edf2f4; Light grey-blue background */
}
.sidebar {
    background-color: #636f65; /* #2b3a2e Dark sidebar background */
    min-height: 100vh;
    padding: 20px;
}
.sidebar a {
    display: block;
    padding: 10px 15px;
    margin-bottom: 10px;
    background-color: #423f3c; /* Light grey buttons */
    color: #f5f1ed;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}
.sidebar a.active {
    background-color: #cbc6ba; /* Active button color */
    color: #423f3c;
}
.sidebar a:hover {
    background-color: #cbc6ba;
    color: #423f3c;
}
.main-content {
    padding: 50px;
    text-align: center;
}
.main-content h1 {
    font-size: 3rem;
    color: #423f3c;
    margin-bottom: 40px;
}

.card {
    background-color: #cbc6ba; /* Light grey card background */
    padding: 20px;
    border-radius: 10px;
    margin: 15px;
}
.card:hover {
    background-color: #cbc6ba;
}


.dynamic-text {
    font-size: clamp(1rem, 2vw, 1.25rem); /* Dynamic size based on viewport width */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    position: relative; /* Enable positioning for the tooltip */
    cursor: pointer; /* Indicate interactivity */
}

.dynamic-text:hover::after {
    content: attr(title); /* Display the full name from the title attribute */
    position: absolute; /* Position relative to the parent */
    top: 100%; /* Position below the text */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment adjustment */
    background-color: #423f3c; /* Tooltip background color (dark) */
    color: #f5f1ed; /* Tooltip text color (light) */
    padding: 5px 10px; /* Padding for tooltip */
    border-radius: 5px; /* Rounded corners for tooltip */
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 10; /* Ensure tooltip is on top */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Add slight shadow */
    font-size: 0.875rem; /* Slightly smaller text for tooltip */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Ensure tooltip doesn't affect layout */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth appearance */
}

.dynamic-text:hover::before {
    content: ''; /* Arrow for the tooltip */
    position: absolute;
    top: 100%; /* Position below the text */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
    border-width: 5px; /* Arrow size */
    border-style: solid;
    border-color: #423f3c transparent transparent transparent; /* Match tooltip background */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Ensure tooltip arrow doesn't affect layout */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dynamic-text:hover::after,
.dynamic-text:hover::before {
    opacity: 1; /* Show tooltip */
    visibility: visible; /* Make tooltip visible */
}

.navbar {
    background-color: #636f65;
    padding: 10px;
}
.navbar a {
    color: #fff;
    background-color: transparent; /* Remove any background highlight */
}

.navbar a:focus,
.navbar a:active {
    color: #fff; /* Keep the text white when clicked */
    background-color: transparent; /* Remove any background highlight */
    outline: none; /* Remove focus outline */
    text-decoration: none; /* Prevent underline on click */
}

.navbar .dropdown-item-black {
    color: black !important;
}

#shoppingCartButton {
    color: #fff; /* Same color as the navbar text */
    border: none; /* Remove any default button border */
    background: none; /* Remove any default button background */
    cursor: pointer; /* Pointer cursor for better UX */
    font-size: 1.2rem; /* Increase the font size */
    padding: 10px; /* Add padding to make the button larger */
}

#shoppingCartButton:hover {
    color: #cbc6ba; /* Optional: Match the hover effect of navbar links */
}

#qrPendingButton {
    color: #fff; /* Same color as the navbar text */
    border: none; /* Remove any default button border */
    background: none; /* Remove any default button background */
    cursor: pointer; /* Pointer cursor for better UX */
    font-size: 1.2rem; /* Increase the font size */
    padding: 10px; /* Add padding to make the button larger */
}

#qrPendingButton:hover {
    color: #cbc6ba; /* Match the hover effect of the shopping cart button */
}

/* Price tag styling based on #shoppingCartButton */
.price-tag {
    color: #f5f1ed; /* Same color as the navbar text */
    background: none; /* No background */
    border: none; /* No border */
    font-size: 1.2rem; /* Slightly larger text for emphasis */
}

.btn-inventory {
    padding: 10px 15px;
    background-color: #423f3c; /* Same color as sidebar buttons */
    color: #f5f1ed; /* Button text color */
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    border: none; /* Remove default button border */
    cursor: pointer;
}

.btn-inventory:hover {
    background-color: #cbc6ba; /* Same hover effect as sidebar buttons */
    color: #423f3c;
}

/* Push the button to the right */
.btn-container {
    text-align: right;
}

.btn-filter-inventory {
    background-color: #423f3c;
    color: #f5f1ed;
    border: none;
}

.btn-filter-inventory:hover {
    background-color: #cbc6ba; /* Darken on hover */
    color: #423f3c;
}

.btn-filter-clear {
    background-color: #cbc6ba;
    color: #423f3c;
    border: none;
}

.btn-filter-clear:hover{
    background-color: #423f3c;
    color: #f5f1ed;
}

.gallery-container {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.project-card {
    width: 275px; /* Width of the folder */
    height: 200px; /* Height of the folder */
    background-color: #e0e0e0; /* Background color */
    border-radius: 10px; /* Slightly rounded corners */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    text-align: center; 
    padding: 15px; 
    position: relative; /* Positioning for the flap */
    margin: 20px;
}

.project-card::before {
    content: ""; /* Empty content for pseudo-element */
    position: absolute; /* Position it relative to .project-card */
    top: -20px; /* Adjust to create the flap effect */
    left: 10px; /* Position the flap */
    width: calc(100% - 20px); /* Full width minus padding */
    height: 20px; /* Height of the flap */
    background-color: #d0d0d0; /* A slightly darker shade for the flap */
    border-top-left-radius: 10px; /* Rounded top left corner */
    border-top-right-radius: 10px; /* Rounded top right corner */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

@keyframes openFolder {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1); /* Slightly increase size */
        opacity: 0.8; /* Fade slightly */
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.project-card p {
    margin: 0;
    font-size: 16px;
    color: #555;
    transition: transform 0.3s ease;
}

/* Inventory Section */
.inventory-section {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between rows */
}

/* Row Layout */
.card-inventory-update {
    display: grid;
    grid-template-columns: 1fr 1fr 4fr 1fr 1fr 1fr; /* Set column sizes */
    align-items: center; /* Vertically center content */
    background-color: #cbc6ba;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    gap: 0; /* No gaps between columns */
}

/* Header Styling */
.card-inventory-update.header {
    font-weight: bold;
    background-color: #a89e91; /* Slightly darker for header */
    text-transform: uppercase; /* Uppercase for header text */
}

/* Cell Styling */
.cell {
    overflow: hidden; /* Prevent overflow */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Add ellipsis for long text */
    padding: 0 10px; /* Add horizontal padding */
}

/* Image Styling */
.cell img.small-item-image {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    display: block; /* Ensure image is inline */
}

/* Action Button Styling */
.btn-inventory {
    padding: 6px 12px;
    background-color: #423f3c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.btn-inventory:hover {
    background-color: #cbc6ba;    /* Match hover effect of Filter button */
    color: #423f3c;
}

.btn-main-btn {
    padding: 6px 12px;
    background-color: #423f3c;
    color: #f5f1ed;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.btn-main-btn:hover {
    background-color: #cbc6ba;    /* Match hover effect of Filter button */
    color: #423f3c;
}

.btn-main-login {
    padding: 6px 12px;
    background-color: #423f3c;
    color: #f5f1ed;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.btn-main-login:hover {
    background-color: #fff;    /* Match hover effect of Filter button */
    color: #423f3c;
}

.btn-secondary-btn {
    padding: 6px 12px;
    background-color: #cbc6ba;
    color: #423f3c;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.btn-secondary-btn:hover {
    background-color: #423f3c;
    color: #f5f1ed;
}

.btn-outline-remove-color {
    background-color: transparent; /* Transparent background */
    color: #423f3c; /* Match the "Remove" button text color */
    border: 2px solid #423f3c; /* Outline color */
    border-radius: 5px; /* Match rounded corners */
    cursor: pointer; /* Indicate interactivity */
    padding: 5px 10px; /* Adjust padding */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth hover effect */
}

.btn-outline-remove-color:hover {
    background-color: #423f3c; /* Fill with the same color as "Remove" button */
    color: #f5f1ed; /* Invert text color on hover */
}

.custom-badge {
    background-color: #636f65 !important;
    color: #ffffff !important;
}

.d-flex {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
}

.custom-badge {
    flex: 1 1 auto; /* Allow items to grow and shrink based on space */
    text-align: center; /* Center the badge text */
    margin-bottom: 5px; /* Add spacing between wrapped badges */
}

.dropdown-container {
    position: relative;
}

.dropdown-select {
    appearance: none; /* Custom styling, removes default arrow */
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff; /* Match input box color */
    border: 1px solid #ced4da; /* Match input box border */
    border-radius: 0.375rem; /* Match border radius */
    padding: 0.375rem 1.75rem 0.375rem 0.75rem; /* Add padding for dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='gray' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.72-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.25a.75.75 0 01.02-1.04z' clip-rule='evenodd'/%3E%3C/svg%3E"); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    color: #495057; /* Text color */
    font-size: 1rem; /* Font size to match input boxes */
    height: calc(2.25rem + 2px); /* Match input height */
    cursor: pointer; /* Show pointer on hover */
}

.qr-btn,
.update-quantities-btn,
.add-to-cart-btn {
    padding: 6px 12px; /* Ensure consistent padding for all buttons */
    font-size: 0.85rem; /* Match font size */
    height: 36px; /* Consistent height for all buttons */
    display: flex; /* Center content inside the button */
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment */
    border-radius: 5px; /* Match rounded corners */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* QR Button Specific */
.qr-btn {
    background-color: #423f3c; /* Dark background */
    color: #f5f1ed; /* Light text */
}

.qr-btn:hover {
    background-color: #f5f1ed; /* Light hover */
    color: #423f3c; /* Dark text */
}

/* Update Quantities Button */
.update-quantities-btn {
    background-color: #f5f1ed; /* Light background */
    color: #423f3c; /* Dark text */
}

.update-quantities-btn:hover {
    background-color: #423f3c; /* Dark hover */
    color: #f5f1ed; /* Light text */
}

/* Add to Cart Button */
.add-to-cart-btn {
    background-color: #423f3c; /* Dark background */
    color: #f5f1ed; /* Light text */
}

.add-to-cart-btn:hover {
    background-color: #f5f1ed; /* Light hover */
    color: #423f3c; /* Dark text */
}

.remove-from-cart-btn {
    background-color: #423f3c; /* Match the Filter button's color */
    color: #f5f1ed; /* White text for contrast */
    border: none; /* Remove border */
    font-size: 0.85rem; /* Slightly smaller font size */
    padding: 6px 12px; /* Smaller padding for a compact look */
    border-radius: 5px; /* Rounded corners to match Filter button */
    cursor: pointer; /* Pointer cursor for better UX */
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

.remove-from-cart-btn:hover {
    background-color: #f5f1ed; /* Match hover effect of Filter button */
    color: #423f3c;
}

.room-box {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: fit-content;
    height: fit-content;
    background-color: #f8f9fa;
    border: 2px dashed #6c757d;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.room-box:hover, .room-box.dragover {
    background-color: #e9ecef;
    border-color: #343a40;
}

.room-name {
    font-size: 18px;
    font-weight: bold;
    color: #343a40;
    text-align: center;
}

.room-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.stack-container {
    transition: all 0.3s ease-in-out;
}

.item-card {
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: grab;
}

.stack-count-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ffc107;
    color: #343a40;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 50%;
    font-size: 1rem;
}

.small-item-box {
    transform: scale(0.8); /* Slightly smaller appearance */
    margin: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.filter-container {
    display: flex;
    margin-bottom: 1rem; /* Add spacing between the filter and the cards */
    justify-content: flex-start;
}

.form-select-sm {
    padding: 6px 12px; /* General padding */
    padding-right: 30px; /* Add extra padding on the right for space between text and dropdown arrow */
    height: auto; /* Ensure proper height */
    border-radius: 5px; /* Rounded corners */
    background-color: #e0e0e0; /* Neutral background */
    color: #423f3c; /* Text color */
    font-size: 1rem; /* Font size */
    cursor: pointer; /* Indicate interactivity */
    outline: none; /* Remove default outline */
    -moz-appearance: none; /* Remove default dropdown arrow on Firefox */
    -webkit-appearance: none; /* Remove default dropdown arrow on WebKit browsers */
    appearance: none; /* For consistent appearance */
    background-position: right 10px center; /* Position the dropdown arrow properly */
    background-repeat: no-repeat; /* Prevent repeating the arrow */
}

.form-select-sm::-ms-expand {
    display: none; /* Hide default dropdown arrow on IE */
}

.form-select-sm:hover {
    border-color: #cbc6ba;
}

.form-select-sm:focus {
    border-color: #cbc6ba;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    border-radius: 5px;
    background: #f5f1ed;
    padding: 8px 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pagination li {
    margin: 0 5px;
}

/* Ensure all numbers retain their default text color */
.pagination a, .pagination span {
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 16px;
    transition: 0.2s ease;
    color: #423f3c; /* Default text color */
    font-weight: bold;
}

/* Hover effect */
.pagination a:hover {
    background: #636f65;
    color: #f5f1ed;
    border-radius: 6px;
}

/* Active (selected) page styling */
.pagination .active {
    background: #636f65;
    color: #f5f1ed; /* Matches .pagination background */
    border-radius: 6px;
    font-weight: bold;
}

/* Dots and Disabled Buttons */
.pagination .dots {
    pointer-events: none;
    color: gray;
}

.pagination .disabled {
    pointer-events: none;
    color: lightgray;
}

.pagination .arrow {
    font-weight: bold;
    font-size: 18px;
}

#loadingModal {
    z-index: 1100 !important;  /* Higher than Bootstrap modals */
}

#loadingModal .modal-backdrop {
    z-index: 1090 !important;  /* Ensure the backdrop is also above */
}

#loadingModal .modal-content {
    background-color: #f5f1ed;
    border: none;
    box-shadow: none;
}

#loadingModal .spinner-border {
    width: 3rem;
    height: 3rem;
}

.total-lost-box {
    width: 180px; /* Adjust width as needed */
    height: 180px; /* Adjust height as needed */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Ensures rounded corners apply properly */
    font-family: Arial, sans-serif;
    text-align: center;
    font-weight: bold;
}

.total-lost-header {
    background-color: #777; /* Dark gray for the top */
    color: white;
    padding: 8px 0;
    font-size: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.total-lost-number {
    background-color: #D3D3D3; /* Lighter gray for the bottom */
    color: black; /* Black text */
    font-size: 45px;
    font-weight: bold;
    padding: 15px 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.inventory-section h4 {
    font-size: 1rem; /* Keep it subtle */
    font-weight: bold;
    text-align: left;
    color: #333;
    background-color: #e0e0e0;
    display: inline-block; /* Keep the width as long as the text */
    padding: 6px 14px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: 1px solid #ccc;
    border-bottom: none; /* Make it blend into the table */
    position: relative;
    top: 1px; /* Slight lift */
    margin-left: 8px; /* Optional: Adjust to align with the table */
}