/* 🔹 General Styles */
body { 
    text-align: center; 
    padding: 10px; 
    font-family: Arial, sans-serif; 
}

.container {
  max-width: 600px;
  margin-left: 3px;
  margin-right: 3px;
  padding-left: 2px;
  padding-right: 2px;
}

/* 🔹 Buttons */
.btn-lg { 
    width: 100%; 
    margin-top: 10px; 
}

/* 🔹 Hidden Elements */
.hidden { 
    display: none; 
}

.select-checkbox {
  margin: 0 auto;
  display: block;
}

/* 🔹 Scanner Container */
/* Hide scanner by default */
#scanner {
    display: none; /* Prevents empty space before activation */
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 280px;
    margin: 10px auto;
    background: black;
    overflow: hidden;
    border-radius: 8px;
}

/* Video feed */
#scanner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(2.0);
    transform-origin: center;
    filter: contrast(1.4) brightness(1.2); /* 🔹 Improves QR code visibility */
}

/* Center overlay (viewfinder), hidden initially */
#scanner-overlay {
    display: none;  /* Prevents unwanted square before activation */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    z-index: 10;
    pointer-events: none;
}


/* 🔹 Heading Adjustments */
h1 { font-size: 1.75rem; }  /* Default Bootstrap h1 is 2.5rem */
h2 { font-size: 1.5rem; }   /* Default h2 is 2rem */
h3 { font-size: 1.25rem; }  /* Default h3 is 1.75rem */

/* 🔹 List & Table Styling */
table {
    width: 100%;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
}

table td, table th {
    padding: 4px 6px;
}

td, th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
}

th {
    font-weight: bold;
}

/* 🔹 Responsive Table Font Sizes */
@media (max-width: 480px) {
    th, td {
        font-size: 14px;
    }
}

#freezerLabel {
    font-weight: bold;
    margin-bottom: 6px;
    text-align: center;
}

.freezer-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 5px;
}

.freezer-label {
    font-weight: bold;
    font-size: 0.95rem;
    min-width: 60px;
    text-align: center;
}

.freezer-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.freezer-switch .form-check-input {
    transform: scale(1.2);
    margin: 0 !important; /* Remove Bootstrap default left margin */
    cursor: pointer;
}

.freezer-switch .form-check-input:not(:checked) {
    background-color: #e0f0ff; /* Light blue background */
    border-color: #007bff;     /* Bootstrap primary */
}

.freezer-switch .form-check-input:not(:checked)::before {
    background-color: #007bff !important; /* Blue thumb */
}

.freezer-switch .form-check-input:checked {
    background-color: #0d6efd;  /* Bootstrap primary */
    border-color: #0d6efd;
}


/* 🔹 Reduce spacing between elements */
.spacing-sm {
    margin-bottom: 5px;
}