/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}


.container, .container-login {
    max-width: 800px;
    margin: 60px auto 20px;
    padding: 20px;
    background: white;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative; /* Allow absolute positioning of child elements */
    min-height: 80%;
}

.container {
    max-width: 1200px;
}

.container-login {
    max-width: 500px;
}
 ul {
     margin-left: 25px;
 }

header {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    text-align: center;
    font-size: 1.5em;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input, button {
    padding: 10px;
    font-size: 16px;
}

    input[type="color" i] {
        appearance: auto;
        inline-size: 50px;
        cursor: default;
        box-sizing: border-box;
        background-color: buttonface;
        color: buttontext;
        border-width: 1px;
        border-style: solid;
        border-image: initial;
        padding: 1px 2px;
    }

button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    min-width: 50px;
    border-radius: 3px;
}

.centeredButton {
    width: 90%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}



    button:hover {
        background-color: #0056b3;
    }

/* Style the back button */
.back-button, .logout-button, .login-button {
    display: inline-block; /* Make the link behave like a button */
    padding: 5px 15px; /* Match the padding of other buttons */
    font-size: 16px; /* Match the font size of other buttons */
    background-color: #007bff; /* Match the button background color */
    color: white; /* Match the button text color */
    border: none; /* Remove default border */
    border-radius: 3px; /* Slight rounding for button-like appearance */
    text-decoration: none; /* Remove underline from the link */
    position: absolute; /* Position in the top left corner */
}

.back-button {
    top: 20px;
    left: 20px;
}

.logout-button, .login-button {
    top: 20px;
    right: 20px;
}

.back-button:hover {
    background-color: #0056b3; /* Match the hover effect of other buttons */
}

#message {
    margin-top: 10px;
    color: red;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

#qrResult {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

    #qrResult * {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #qrResult #qrSvg {
        margin-left: auto;
        margin-right: auto;
    }

#qrPng, #qrSvg {
    max-width: 400px;
    margin: 10px 0;
}

.qr-code {
    max-width: 150px;
}

.destination {
    margin-top: 5px; /* Add spacing between URL and timestamp */
}

    .destination span {
        font-size: 0.8em;
        color: #666;
        white-space: normal; /* Allow text to wrap naturally for better readability */
    }

.nav-bar {
    display: flex;
    align-items: center;
}

    .nav-bar .nav-button {
        margin-right: 15px;
        padding: 5px 10px;
        text-decoration: none;
        color: #333;
        font-size: 0.9em;
    }

        .nav-bar .nav-button:hover {
            color: #007bff;
            text-decoration: underline;
        }

        .nav-bar .nav-button.dashboard {
            display: none; /* Hidden by default, shown when logged in */
        }

#qrTempExplain {
    color: red;
}

.dashboard-buttons {
    margin-bottom: 20px;
}

    .dashboard-buttons a.button {
        display: inline-block;
        padding: 8px 15px;
        margin-right: 10px;
        text-decoration: none;
        color: #fff;
        background-color: #007bff;
        border-radius: 4px;
    }

        .dashboard-buttons a.button:hover {
            background-color: #0056b3;
        }

#qrTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
    /* Ensure table rows have consistent height */
    #qrTable tr {
        height: 20px; /* Set a fixed height to match the tallest content (QR code + links) */
        vertical-align: middle; /* Center content vertically in the row */
    }

    #qrTable th,
    #qrTable td {
        padding: 5px;
        border: 1px solid #ddd;
        text-align: left;
    }

    #qrTable th {
        background-color: #007bff;
        color: #fff;
    }

    /* Ensure all table cells have consistent height and alignment */
    #qrTable td {
        vertical-align: middle; /* Center content vertically in cells */
        height: 100%; /* Ensure cells fill the row height */
    }

    #qrTable tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    #qrTable button{
        min-width: 30px;
        max-height: 50px;
        padding: 1px;
    }

.qr-code {
    max-width: 130px;
    max-height: 130px;
    display: block;
    margin: 0 auto;
}

.download-links {
    display: flex;
    justify-content: center; /* Center the links horizontally */
    gap: 5px;
    text-align: center;
    margin-top: 0px;
}

    .download-links a {
        font-size: 0.9em;
        text-decoration: none;
        color: #007bff;
        margin: 0 5px;
    }

        .download-links a:hover {
            text-decoration: underline;
        }

/* Ensure QR redirect page remains unstyled */
body[data-page="qr-redirect"] {
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.user-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .user-button .user-icon {
        margin-right: 5px;
        color: white;
    }

    .user-button:hover {
        background-color: #0056b3;
    }

    .user-button.dropdown-toggle::after {
        content: ' ▼'; /* Down arrow to indicate dropdown */
        font-size: 0.7em;
        margin-left: 5px;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

/* User button container for positioning the dropdown */
.user-button-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below the user button */
    right: 0; /* Align to the right edge of the user button */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 1001; /* Ensure it appears above other elements */
}

    .dropdown-menu.active {
        display: block !important; /* Force display when active */
    }

.dropdown-item {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
}

    .dropdown-item:hover {
        background-color: #f4f4f4;
        color: #007bff;
    }



#userTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    #userTable th, #userTable td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    #userTable th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

    #userTable tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    #userTable tr:hover {
        background-color: #f1f1f1;
    }

    #userTable select {
        padding: 5px;
        font-size: 0.9em;
    }

    #userTable button {
        padding: 5px 5px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        min-width: 40px;
    }

        #userTable button:hover {
            background-color: #0056b3;
        }

.stats {
    margin-top: 20px;
}

    .stats div {
        margin: 10px 0;
    }

/* Error message styling */
.error-message {
    background-color: #ffe6e6;
    color: #d32f2f;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 0.9em;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    /* Ensure error message doesn't disrupt form layout */
    .error-message:empty {
        display: none;
    }

    .error-message ul {
        list-style-type: disc;
        margin-left: 20px;
    }

#modeSelection {
    display: block;
}

/*.auto-arrange-container {
    display: flex;
    flex-wrap: wrap;*/ /* This allows items to wrap to new rows when they don't fit */
    /*gap: 10px;*/ /* Space between items */
    /*padding: 20px;
    max-width: 800px;*/ /* Adjust this value as needed */
    /*margin: 0 auto;*/ /* Center the container */
/*}*/

.qr-style-selection {
    min-height: 140px;
}

    .qr-style-selection .combo-box-container {
        display: flex;
    }

    .color-picker-container, .combo-box-container {
        display: flex;
        flex-direction: column;
    }



.tileContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px; /* Ensures minimum 10px gap between tiles */
    justify-content: center; /* Centers tiles horizontally */
    width: 100%;
    max-width: 1280px; /* Matches Tailwind's max-w-7xl */
    margin: 30px auto; /* Centers the container */
    padding: 0; /* No additional padding needed */
}

    /*#tileContainer div {
        display: block;
        unicode-bidi: isolate;
    }*/

    .tileContainer .shadow-md {
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    .tileContainer .tile {
        min-width: 300px;
        max-width: 300px;
        border-block-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
        border-width: 2px;
        margin: 10px auto;
    }

.tile .qr-code {
    max-width: 290px;
    max-height: 290px;
    object-fit: cover;
}

.tile button, select {
    text-transform: none;
}

    .tile button:hover {
        background-color: transparent;
    }

/*.tile div {
    display: block;
    unicode-bidi: isolate;
}*/

.rounded-lg {
    border-radius: 0.5rem;
}

.overflow-hidden {
    overflow: hidden;
}

.flex-col {
    flex-direction: column;
}

.flex {
    display: flex;
}

.tile {
    min-width: 300px;
    max-width: 300px;
}

.name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-align: center
}

.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.items-center {
    align-items: center;
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.w-5 {
    width: 1.25rem;
}
.w-30 {
    width: 30px;
}

.h-5 {
    height: 1.25rem;
}

.h-30 {
    height: 30px;
}

.p-4 {
    padding: 0.5rem 1rem 0.75rem 1rem;
}

.p-05 {
    padding: 0.5rem;
}

.p-05025 {
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
}

.margin-0-0-0-5 {
    margin: 0px 0px 0px 5px;
}

.border-t {
    border-top-width: 1px;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.text-centered {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

.items-center {
    align-items: center;
}

.flex {
    display: flex;
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-30 {
    --tw-bg-opacity: 1;
    background-color: rgb(230 230 230 / var(--tw-bg-opacity, 1));
}

.bg-gray-40 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.tile-button {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    cursor: pointer;
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    text-transform: none;
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    margin: 0;
    padding: 0;
    min-width: 20px;
    min-height: 20px;
    height: 30px;
}

.space-x-2 {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.marg-5 {
    margin: 5px;
}

.fontsize-16 {
    font-size: 16px;
}

/* Dashboard header layout */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
}

.qr-count-display {
    font-size: 16px;
    color: #666;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 4px;
    margin: 10px 0;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid black;
}

/* Disabled button style */
button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

button:disabled:hover {
    background-color: #6c757d;
}

#block {
    display: block;
}

#inline-block {
    display: inline-block;
}