body {
    background-image: url('../img/hideout.svg');
    background-size: 200px;
    background-color: #f2f0eb;
    background-attachment: fixed;
    padding-bottom: 60px;
}

.mainDiv {
    background-color: rgba(205, 205, 205, 0.9);
    min-height: 90vh;
    height: fit-content;
}

.navbar {
    background-color: transparent;
}

.nav-link {
  color: #222222;          /* text color */
  background-color: #ffffff;
  border-radius: 8px;      /* optional: rounded buttons */
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: #ffffff !important;          /* text color on hover */
  background-color: #4a4a4a !important; /* background on hover */
}

.nav-link:focus, 
.nav-link:active {
    color: #222222; 
    background-color: #ffffff;
    outline: none;
    box-shadow: none; /* This kills the blue Bootstrap glow */
}

#darkModeToggle {
    background-color: #ffffff !important;
    border: none !important;
    color: #222222 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#darkModeToggle:hover {
    color: #ffffff !important;
    background-color: #4a4a4a !important;
    border-radius: 8px;
}

#darkModeToggle:focus {
    outline: none;
    box-shadow: none;
}

.btn-cart-float {
    /* Position override */
    position: absolute !important;
    top: 10px;
    right: 10px;
    
    /* Sizing */
    width: 38px;
    height: 38px;
    z-index: 10; /* Ensures it stays above the image */
    
    /* Centering the icon */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    transition: all 0.3s ease-in-out;
}

.btn-cart-float:hover {
    transform: scale(1.1); /* "Pops" slightly when hovered */
    background-color: #f8f9fa;
}

/* Ensure the icon size stays consistent */
.btn-cart-float i {
    font-size: 1.1rem;
}

.btn-cart-float.added {
    width: auto !important;
    height: auto !important;
    border-radius: 50rem !important; /* Ensures pill shape */
    padding: 0.5rem 1rem !important; /* Add breathing room for text */
}

.btn-cart-float.added:hover {
    background-color: #198754 !important; /* Forces Bootstrap's green color */
    color: #ffffff !important;            /* Forces white text */
}

/* Sticky footer centered at the bottom of the viewport */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #d3d3d3; /* gray footer */
    color: #222222;
    padding: 0.5rem 0;
    text-align: center;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.08);
    z-index: 1000;
}

/* Small, compact trash button used in cart list */
.cart-trash-btn {
    padding: 0.18rem 0.28rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.cart-trash-btn i {
    font-size: 0.95rem;
}

/* Product details modal/backdrop */
.product-backdrop {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0,0,0,0.45);
    z-index: 2000;
}

.product-details {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(95%, 1000px);
    max-height: 90vh;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 2001;
    padding: 1rem;
    outline: none;
}

.product-details:focus { outline: none; }

.product-inner { gap: 1rem; }
.product-inner { gap: 1rem; display: flex; flex-wrap: nowrap; }
.product-left { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; }
.product-left img { max-width: 100%; height: auto; border-radius: 6px; }

.product-right { 
    flex: 1 1 60%;
    min-width: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden; /* prevent horizontal scroll */
    -webkit-overflow-scrolling: touch;
    max-height: calc(90vh - 3rem);
    padding-right: 0.5rem;
}
.product-title { font-weight: 700; font-size: 1.25rem; }
.product-desc { 
    white-space: pre-wrap; /* preserve line breaks but allow wrapping */
    overflow-wrap: anywhere; /* force long words to wrap */
    word-break: break-word;
    hyphens: auto;
}

.product-close { position: absolute; top: 0.5rem; right: 0.5rem; }

/* Truncate long descriptions in product cards on the main gallery to avoid layout break */
.card-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
}

/* Make thumbnails indicate they open a detail view */
.product-thumb { cursor: pointer; }
.see-more-note { display: block; font-size: 0.8rem; color: #6c757d; margin-top: 0.35rem; }

.drag-over {
    border-color: #0d6efd !important; /* Bootstrap Primary Blue */
    background-color: #e9ecef !important;
    border-width: 2px !important;
}

#fileNameDisplay {
    word-break: break-all;
    white-space: normal;
}

/* Inventory statistics styles */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}
.stat-card {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    text-align: center;
    box-shadow: none;
}
.stat-value {
    font-weight: 700;
    font-size: 1.25rem;
    color: #222222;
}
.stat-label {
    font-size: 0.85rem;
    color: #6c757d;
}
.stat-card.w-100 { grid-column: 1 / -1; display:flex; flex-direction:column; justify-content:center; }

/* Dark-mode specific tweaks for inventory statistics */
body.dark-mode .inventory-grid .stat-card {
    background: linear-gradient(180deg, #2a2a2a, #232323);
    border: 1px solid #3a3a3a;
    box-shadow: none;
}

body.dark-mode .inventory-grid .stat-card.w-100 {
    background: linear-gradient(180deg, #2e2e2e, #272727);
}

body.dark-mode .stat-value {
    color: #e9ecef;
}

body.dark-mode .stat-label {
    color: #b0b0b0;
}

@media (min-width: 768px) {
    .inventory-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stock badge and toggle */
.stock-toggle-btn { padding: 0.18rem 0.35rem; font-size: 0.85rem; }
.card .badge.bg-success { background-color: #198754 !important; }
.card .badge.bg-danger { background-color: #dc3545 !important; }

/* Dark mode styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/hideout.svg');
    background-size: 200px;
    background-attachment: fixed;
    filter: invert(0.8) brightness(1.2);
    pointer-events: none;
    z-index: -1;
}

body.dark-mode .mainDiv {
    background-color: rgba(40, 40, 40, 0.95);
    color: #e0e0e0;
}

body.dark-mode .nav-link {
    color: #e0e0e0;
    background-color: #2a2a2a;
}

body.dark-mode .nav-link:hover {
    color: #ffffff !important;
    background-color: #3a3a3a !important;
}

body.dark-mode .card {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

body.dark-mode .card-body {
    background-color: #2a2a2a;
}

body.dark-mode .text-muted {
    color: #b0b0b0 !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

body.dark-mode .form-control::placeholder {
    color: #808080;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #0d6efd;
}

body.dark-mode .input-group-text {
    background-color: #3a3a3a !important;
    color: #e0e0e0;
    border-color: #3a3a3a !important;
}

body.dark-mode .badge {
    background-color: #3a3a3a !important;
}

body.dark-mode .pagination .page-link {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

body.dark-mode .pagination .page-link:hover {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

body.dark-mode .site-footer {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-top-color: #3a3a3a;
}

body.dark-mode .offcanvas {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

body.dark-mode .offcanvas-header {
    background-color: #1a1a1a;
    border-bottom-color: #3a3a3a;
}

body.dark-mode .offcanvas-body {
    background-color: #2a2a2a;
}

body.dark-mode .product-details {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

body.dark-mode .product-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .alert {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

body.dark-mode hr {
    border-color: #3a3a3a;
}

body.dark-mode .card-header {
    background-color: #3a3a3a !important;
    color: #e0e0e0;
}

body.dark-mode .modal-content {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary {
    background-color: #3a3a3a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary:hover {
    background-color: #4a4a4a;
    border-color: #4a4a4a;
}

body.dark-mode #dropZone {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #b0b0b0;
}

body.dark-mode #dropZone.drag-over {
    background-color: #3a3a3a !important;
    border-color: #0d6efd !important;
}

body.dark-mode input[type="file"] {
    color: #e0e0e0;
}

body.dark-mode input[type="file"]::file-selector-button {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

body.dark-mode #stats-temp {
    background-color: #2a2a2a !important;
    color: #b0b0b0;
    border-color: #3a3a3a;
}

body.dark-mode #darkModeToggle {
    color: #e0e0e0 !important;
    background-color: #2a2a2a !important;
}

body.dark-mode #darkModeToggle:hover {
    color: #ffffff !important;
    background-color: #3a3a3a !important;
}

body.dark-mode img[src*="placeholder"] {
    filter: invert(1);
}