/* css/style.css */

    /* আপনার দেওয়া সমস্ত CSS কোড এখানে থাকবে */

    /* Simple modal styling */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1000; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        overflow-y: auto;
        padding-top: 50px; /* Add padding to the top */
        padding-bottom: 50px; /* Add padding to the bottom */
    }
    .modal-content {
        background-color: #fefefe;
        margin: 0 auto; /* Center horizontally */
        padding: 20px;
        border: 1px solid #888;
        width: 95%; /* Make wider for more fields */
        max-width: 900px; /* Max width */
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        max-height: calc(100vh - 100px); /* Max height minus top/bottom padding */
        overflow-y: auto; /* Enable scroll within modal content */
    }
    /* Specific width for scanner modal */
    #scannerModal .modal-content {
        max-width: 500px; /* Adjust as needed for camera view */
    }

    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        top: 10px;
        right: 20px;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .close-button:hover,
    .close-button:focus {
        color: #777; /* Darker grey on hover */
        text-decoration: none;
    }

     /* Spinner basic style */
    .spinner {
        border: 3px solid rgba(255, 255, 255, 0.3); /* Light grey */
        border-top: 3px solid #fff; /* White */
        border-radius: 50%;
        width: 16px; /* Smaller spinner */
        height: 16px; /* Smaller spinner */
        animation: spin 1s linear infinite;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .hidden { display: none !important; }

    /* Basic image preview styling */
    .image-preview {
        max-width: 150px; /* Slightly larger preview */
        max-height: 150px; /* Slightly larger preview */
        margin-top: 10px;
        display: block;
        object-fit: contain; /* Use contain to show entire image without cropping */
        background-color: #eee; /* Add background for transparency */
        padding: 5px; /* Add padding */
        border: 1px solid #ccc; /* Add border */
        border-radius: 4px; /* Add border radius */
    }

     /* Style for the image input container */
    .image-input-container {
        border: 1px dashed #ccc; /* Dashed border */
        padding: 15px;
        border-radius: 5px;
        background-color: #f9f9f9; /* Light background */
        margin-top: 5px; /* Add some margin */
    }

    .image-input-container .flex-col { /* Stack image upload options */
        flex-direction: column;
        align-items: stretch; /* Stretch items */
        gap: 0.75rem; /* Add gap instead of space-y-3 */
    }

    /* Visually separate alternative sections */
    .alternative-section {
         border-bottom: 1px solid #eee; /* Separator line */
         padding-bottom: 20px;
         margin-bottom: 20px;
         padding-left: 10px; /* Add some padding */
         padding-right: 10px; /* Add some padding */
         border-radius: 4px; /* Optional: round corners */
    }
     .alternative-section:last-child {
         border-bottom: none; /* No border after the last one */
         padding-bottom: 0;
         margin-bottom: 0;
     }


     /* --- List View Styles --- */
    #requests-list {
        display: flex; /* Use flexbox for the list container */
        flex-direction: column; /* Stack items vertically */
        gap: 1px; /* Small gap between rows */
        border: 1px solid #ddd; /* Border around the list */
        border-radius: 8px; /* Rounded corners for the list container */
        overflow: hidden; /* Hide overflow like border-radius */
        background-color: #fff; /* White background for the list */
        margin-top: 1.5rem;
    }

    .product-row {
        display: flex; /* Flex container for each row */
        align-items: center; /* Vertically align items */
        padding: 12px 20px; /* Padding for each row */
        background-color: #fff; /* Default background */
        transition: background-color 0.2s ease;
         border-bottom: 1px solid #eee; /* Separator line for rows */
    }
     .product-row:hover {
         background-color: #f9f9f9; /* Light hover effect */
     }
     .product-row:last-child {
         border-bottom: none; /* No border on the last row */
     }


    .row-image {
         width: 48px; /* Smaller image in list */
         height: 48px; /* Smaller image in list */
         object-fit: cover;
         border-radius: 4px;
         margin-right: 16px;
         border: 1px solid #eee;
         flex-shrink: 0; /* Prevent image from shrinking */
    }

    .row-details {
         flex-grow: 1; /* Allow details section to take available space */
         margin-right: 16px; /* Space between details and actions */
    }
     .row-details p {
         font-size: 0.875rem; /* Tailwind text-sm */
         color: #4b5563; /* Tailwind text-gray-600 */
         margin-bottom: 4px; /* Space between detail lines */
         line-height: 1.4;
     }
      .row-details p:last-child {
         margin-bottom: 0;
     }
     .row-details strong {
         font-weight: 600; /* Tailwind font-semibold */
         color: #1f2937; /* Tailwind text-gray-800 */
          margin-right: 4px; /* Space after label */
     }

     .row-title {
         font-size: 1rem; /* Slightly smaller title in list */
         font-weight: 600;
         color: #1f2937;
         margin-bottom: 6px; /* Space after title */
     }


    .row-actions {
         display: flex;
         flex-shrink: 0; /* Prevent actions from shrinking */
         gap: 1rem; /* Tailwind space-x-4 */
         margin-left: auto; /* Push actions to the right */
    }

    .action-button {
         font-weight: 700; /* Tailwind font-bold */
         padding: 8px 16px; /* Tailwind py-2 px-4 */
         border-radius: 4px; /* Tailwind rounded */
         outline: none; /* Tailwind focus:outline-none */
         box-shadow: none; /* Tailwind focus:shadow-outline */
         text-align: center;
         cursor: pointer;
         transition: background-color 0.2s ease;
         display: inline-flex; /* Align spinner */
         align-items: center; /* Align spinner */
         justify-content: center; /* Align spinner */
    }
     .review-button {
         background-color: #3b82f6; /* Tailwind bg-blue-500 */
         color: white;
     }
      .review-button:hover {
         background-color: #2563eb; /* Tailwind hover:bg-blue-700 */
     }
     .delete-button {
         background-color: #ef4444; /* Tailwind bg-red-500 */
         color: white;
     }
      .delete-button:hover {
         background-color: #dc2626; /* Tailwind hover:bg-red-700 */
     }
     .add-button {
        background-color: #10b981; /* Tailwind bg-green-500 */
        color: white;
     }
     .add-button:hover {
         background-color: #059669; /* Tailwind hover:bg-green-600 */
     }
     .logout-button {
         background-color: #6b7280; /* Tailwind bg-gray-500 */
         color: white;
     }
      .logout-button:hover {
         background-color: #4b5563; /* Tailwind hover:bg-gray-600 */
     }

     /* Style for duplicate warning span */
     .duplicate-warning {
         color: #ef4444; /* Tailwind text-red-500 */
         font-size: 0.875rem; /* Tailwind text-sm */
         /* margin-left: 0.5rem; /* Tailwind ml-2 - remove if placing below */
         margin-top: 0.25rem; /* Add space above */
         font-weight: normal; /* Prevent bolding */
         display: block; /* Make it block to appear below input */
         min-height: 1.25rem; /* Reserve space even when hidden */
     }
     .duplicate-warning.hidden {
         visibility: hidden; /* Keep space but hide */
     }


      /* Login Form Specific Styles */
     #login-container {
         max-width: 400px;
         margin: 8rem auto;
         padding: 2rem;
         background-color: #fff;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         border-radius: 8px;
     }


     /* Responsive adjustments */
     @media (max-width: 768px) {
         .product-row {
             flex-direction: column;
             align-items: flex-start;
             padding: 16px;
         }
          .row-image {
              margin-right: 0;
              margin-bottom: 12px;
              width: 60px;
              height: 60px;
          }
          .row-details {
              width: 100%;
              margin-right: 0;
              margin-bottom: 12px;
          }
           .row-title {
               margin-bottom: 4px;
               font-size: 1.1rem;
           }
          .row-actions {
               width: 100%;
               flex-direction: row; /* Keep actions side-by-side on small screens */
               gap: 8px; /* Adjust gap */
               margin-left: 0;
               align-items: center; /* Center buttons vertically */
               justify-content: flex-end; /* Align to the right */
           }
           .action-button {
               width: auto; /* Allow buttons to size naturally */
               padding: 6px 12px; /* Smaller padding */
           }
            .modal-content {
                width: 95%;
                padding: 15px;
            }
             #scannerModal .modal-content {
                max-width: 95%;
            }
            .grid-cols-1 { /* Force single column in modals */
                 grid-template-columns: repeat(1, minmax(0, 1fr));
             }
             .md\:col-span-2 { /* Ensure items span full width */
                 grid-column: span 1 / span 1;
             }
             .image-input-container .flex-col { /* Stack image upload options */
                 flex-direction: column;
                 align-items: stretch; /* Stretch items */
                 gap: 0.75rem; /* Add gap */
             }
             .image-input-container .sm\:w-1\/2 {
                  width: 100%; /* Make full width */
             }
             .image-input-container .hidden.sm\:block {
                  display: none; /* Hide "OR" text */
             }
     }

    /* Style for the scan button */
    .scan-barcode-btn {
        padding: 0.4rem 0.75rem; /* Adjust padding to better align with input height */
        font-size: 0.875rem; /* text-sm */
        line-height: 1.25rem;
        /* Add other button styles as needed, leveraging Tailwind or custom CSS */
    }

    /* Ensure flex container allows input to grow */
    .input-with-button-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* space-x-2 */
        width: 100%; /* Ensure wrapper takes full width */
    }
    .input-with-button-wrapper input[type="text"] {
        flex-grow: 1; /* Allow input to take remaining space */
        min-width: 0; /* Prevent input from overflowing */
    }

     /* Scanner video and overlay */
     #scannerVideo {
         /* Ensure video fits container */
         max-width: 100%;
         height: auto;
         display: block; /* Remove extra space below video */
     }
     #scannerModal .relative {
         /* You might need to adjust aspect ratio based on camera */
         position: relative;
         width: 100%;
         padding-top: 75%; /* Default 4:3 aspect ratio */
         background-color: #333; /* Background while loading */
         overflow: hidden; /* Clip video */
     }
     #scannerModal video {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover; /* Cover the area */
     }
     #scannerModal .absolute.inset-0 {
         /* Styling for the red target box */
         display: flex;
         align-items: center;
         justify-content: center;
     }
      #scannerModal .absolute.inset-0 > div {
         width: 75%; /* Adjust size of target */
         height: 40%; /* Adjust size of target */
         border: 3px solid rgba(255, 0, 0, 0.7);
         background: rgba(255, 255, 255, 0.05);
         border-radius: 8px;
         box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.3); /* Dimming effect outside box */
     }

     /* Message area styling */
     .form-message {
        text-align: center;
        margin-top: 1rem;
        font-size: 0.875rem;
        min-height: 1.25rem; /* Reserve space */
        font-weight: 500;
     }
     .form-message.success { color: #10b981; } /* green-500 */
     .form-message.error { color: #ef4444; } /* red-500 */
     .form-message.loading { color: #6b7280; } /* gray-500 */