/*---List style---*/

/* body { font-family: sans-serif; margin: 20px; }  */

.product-list-container { 
	max-width: 800px; 
	min-height:580px;
	padding: 8px;
	margin-left: auto;
	margin-right: auto;
}

.product-list-table { border-collapse: collapse; margin-top: 20px; width: 100%; }
.product-list-table th, .product-list-table td { border-bottom: 2px solid #ddd; padding: 8px; text-align: left; vertical-align: top; }
.product-list-table th { background-color: #f2f2f2; }
.product-list-table img { max-width:250px; max-height:150px; } /*{ max-width:256px; max-height:128px; }*/

.standard {
    text-decoration: underline;
    color: blue;
}
/*.standard:visited { color: purple;}*/
.standard:hover { color: red;}
.standard:active { color: orange;}


.button {
    display: inline-block;
    /*padding: 8px 15px;*/
    padding: 3px 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.button:hover { background-color: #0056b3; color: #eeeeff;}

.error-message { color: red; padding: 10px; border: 1px solid red; margin-bottom: 20px; }
.ok-message { color: green; padding: 10px; border: 1px solid green; margin-bottom: 20px; }



/* --- General Form Styling (remains mostly the same) --- */
form {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 500px; /* Adjusted to 600px */
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    /* Increased shadow for better visual separation */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
}

form h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-weight: 600;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

/* --- Form Group (Div for each label/input pair) - Row Layout --- */
form div {
    margin-bottom: 18px;
    display: flex; /* Make the container a flex container */
    align-items: center; /* Vertically align items in the middle */
    gap: 15px; /* Space between label and input */
}

/* --- Labels --- */
form label {
    font-weight: 600;
    color: #555;
    flex-shrink: 0; /* Prevent label from shrinking */
    width: 100px; /* Changed fixed width for labels to 100px for alignment */
    text-align: right; /* Align label text to the right */
    margin-bottom: 0; /* Remove bottom margin */
}

/* --- Input Fields, Selects, and Textareas - General Styling --- */
form input[type="text"],
form input[type="number"],
form select,
form textarea {
    flex-grow: 1; /* Allow input/select/textarea to take remaining space by default */
    /* padding: 12px; */
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    /* max-width: calc(100% - 135px); is still correct as 100% refers to the parent div's width */
    max-width: calc(100% - 135px);
}

/* --- Make Numeric Inputs Shorter --- */
form input[type="number"] {
    max-width: 120px; /* Adjust this value as needed to make numeric inputs shorter */
    flex-grow: 0; /* Prevent number input from growing excessively */
    min-width: 80px; /* Ensure a minimum width for usability */
}

/* --- Make Select Inputs Shorter --- */
form select {
    max-width: 200px; /* Adjust this value as needed to make selects shorter */
    flex-grow: 0; /* Prevent select from growing excessively */
    min-width: 100px; /* Ensure a minimum width even if options are very short */
}

/* --- Specific adjustment for textarea to ensure it expands correctly --- */
form textarea {
    width: 100%; /* Force textarea to take 100% of its flex item's available space */
}


form input[type="text"]:focus,
form input[type="number"]:focus,
form select:focus,
form textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* --- Required Fields Indicator --- */
form label[required]::after {
    content: ' *';
    color: #dc3545;
    margin-left: 4px;
}

form input:required:invalid:not(:focus):not(:placeholder-shown),
form select:required:invalid:not(:focus):not([value=""]):not([value="0"]):not([value="0.00"]),
form textarea:required:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #dc3545;
}

/* --- Submit Button (remains the same) --- */
form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

form button[type="submit"]:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

form button[type="submit"]:active {
    background-color: #1e7e34;
    transform: translateY(0);
}

/* --- NEW: Action Buttons Container --- */
.form-actions {
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
    align-items: center;
    margin-top: 25px; /* Space above this section */
    padding-top: 15px;
    border-top: 1px solid #f0f0f0; /* Separator line */
    gap: 20px; /* Added gap between checkbox and button */
}

.save-as-new-label {
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and text */
    color: #555;
    cursor: pointer;
    text-align: left; /* Added text-align: left */
}

.save-as-new-label input[type="checkbox"] {
    /* Basic styling for checkbox */
    width: 20px; /* Increased width */
    height: 20px; /* Increased height */
    accent-color: #007bff; /* Highlight color for checkbox */
    cursor: pointer;
    box-sizing: border-box; /* Ensure width/height include padding and border */
    -webkit-appearance: none; /* Remove default browser styling for Webkit browsers */
    -moz-appearance: none;    /* Remove default browser styling for Mozilla browsers */
    appearance: none;         /* Remove default browser styling (standard) */
    border: 2px solid #ccc;    /* Changed border from 1px to 2px */
    border-radius: 3px;       /* Apply border-radius for rounded corners */
    background-color: #fff;   /* Ensure a white background */
    display: inline-block;    /* Ensure it behaves like a block for width/height */
    vertical-align: middle;   /* Align with text */
    flex-shrink: 0;           /* Prevent shrinking in flex container */
    position: relative;       /* Needed for pseudo-elements */
}

.save-as-new-label input[type="checkbox"]:checked {
    background-color: #007bff; /* Background when checked */
    border-color: #007bff;      /* Border color when checked */
}

/* Add a custom checkmark for the checked state */
.save-as-new-label input[type="checkbox"]:checked::before {
    content: '\2713'; /* Unicode checkmark character */
    display: block;
    color: white;
    line-height: 16px; /* Adjusted line height to vertically center the checkmark for 2px border */
    text-align: center;
}


/* Adjust submit button when inside form-actions */
.form-actions button[type="submit"] {
    width: auto; /* Override 100% width from general rule */
    padding: 10px 25px; /* Adjust padding for a more compact button */
    margin-top: 0; /* Remove top margin as it's handled by parent flex container */
    margin-right: 20px; /* Added right margin to match input field gap */
}

.mobile-content {
    display: none;
}

/* --- Responsive Adjustments (Crucial for row layout) --- */
@media (max-width: 500px) {
    form {
        margin: 20px;
        padding: 20px;
    }

    form h2 {
        margin-bottom: 20px;
    }

    /* Stack labels and inputs vertically on smaller screens */
    form div {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px; /* Reduce gap when stacked */
    }

    form label {
        width: auto; /* Remove fixed width */
        text-align: left; /* Align label text to left when stacked */
        margin-bottom: 5px; /* Add some space below label when stacked */
    }

    form input[type="text"],
    form input[type="number"],
    form select,
    form textarea {
        max-width: 100%; /* Allow inputs/textareas to take full width */
        padding: 10px;
        flex-grow: 1; /* Allow all inputs/textareas to grow again when stacked */
        min-width: unset; /* Remove min-width restriction when stacked */
    }

    form button[type="submit"] {
        padding: 10px;
    }

    /* Responsive adjustments for form-actions */
    .form-actions {
        flex-direction: row; /* Changed to row */
        justify-content: flex-end; /* Align items to the right */
        align-items: center; /* Vertically align items */
        gap: 15px; /* Space between stacked items */
    }

    .form-actions button[type="submit"] {
        width: auto; /* Revert to auto width for row layout */
        padding: 10px 25px; /* Adjust padding for a more compact button */
        margin-top: 0; /* Remove top margin as it's handled by parent flex container */
        margin-right: 0; /* Remove right margin on smaller screens if not desired */
    }
}


@media (max-width: 600px) {
	/*.product-list-table img { max-width:100px; max-height:150px; }*/
	
	.desktop-content {
        display: none;
    }
    .mobile-content {
        display: block; /* or flex, grid, etc. depending on your layout */
    }

}