/* css/form-style.css */

/* General Resets & Body Styles (mimicking Tailwind's base) */
body {
    font-family: sans-serif; /* Corresponds to font-sans */
    line-height: 1.5;
    color: #374151; /* Default text color, similar to text-gray-700/800 */
}



*,
*::before,
*::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb; /* Default border color, similar to border-gray-200 */
}

/* Container for the whole app */
#supplier-questionnaire-app {
    min-height: 100vh; /* min-h-screen */
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 1rem; /* p-4 (adjust if needed, p-4 is typically 1rem) */
    display: flex;
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
}

/* Main form container card */
#supplier-questionnaire-app .bg-white {
    background-color: #ffffff; /* bg-white */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 1.5rem; /* p-6 */
    width: 100%;
    max-width: max-width: 64rem; /* max-w-5xl(approx) */
    margin-bottom: 1.5rem; /* mb-6 */
}

/* Headings */
#supplier-questionnaire-app h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center; /* text-center */
}

.sq-section-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
    border-bottom-width: 2px; /* border-b-2 */
    border-color: #bfdbfe; /* border-blue-200 */
    padding-bottom: 0.5rem; /* pb-2 */
    margin-top: 1.5rem; /* mt-6 */
}

#supplier-questionnaire-app h3.text-lg {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
    margin-top: 1rem; /* mt-4 */
}
#supplier-questionnaire-app h3.mb-2 {
    margin-bottom: 0.5rem; /* mb-2 */
}


/* User ID Paragraph */
#supplier-questionnaire-app .text-sm.text-gray-600 {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center; /* text-center */
}
#supplier-questionnaire-app .font-mono {
    font-family: monospace; /* font-mono */
}
#supplier-questionnaire-app .bg-gray-100.px-2.py-1.rounded {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem;
    padding-top: 0.25rem; /* py-1 */
    padding-bottom: 0.25rem;
    border-radius: 0.25rem; /* rounded */
}

/* Form Messages Area */
#sq-form-messages {
    margin-bottom: 1rem; /* mb-4 */
}
.sq-form-success {
    padding: 0.75rem 1rem;
    background-color: #d1fae5; /* Tailwind green-100 */
    border: 1px solid #a7f3d0; /* Tailwind green-200 */
    color: #065f46; /* Tailwind green-700 */
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}
.sq-form-error {
    padding: 0.75rem 1rem;
    background-color: #fee2e2; /* Tailwind red-100 */
    border: 1px solid #fecaca; /* Tailwind red-200 */
    color: #991b1b; /* Tailwind red-700 */
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}
.sq-form-error ul {
    margin-top: 0.5rem;
    margin-left: 1rem;
    list-style-type: disc;
}


/* Grid Layout */
.grid {
    display: grid;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-4 {
    gap: 1rem; /* gap-4 */
}
.mb-6 {
    margin-bottom: 1.5rem; /* mb-6 */
}
.mb-4 {
    margin-bottom: 1rem; /* mb-4 */
}

/* Responsive Grid (md: breakpoint approx 768px) */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* Form Elements: Labels, Inputs, Textareas */
.sq-label,
label.block.text-sm.font-medium.text-gray-700 { /* Catering to both sq-label and direct tailwind classes if any remain */
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.25rem; /* mb-1 */
}

.sq-input,
.sq-textarea,
input[type="text"].sq-input, /* More specific for default inputs */
input[type="email"].sq-input,
input[type="url"].sq-input,
input[type="tel"].sq-input,
input[type="date"].sq-input,
textarea.sq-textarea {
    margin-top: 0.25rem; /* mt-1 */
    display: block;
    width: 100%; /* w-full */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.375rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    font-size: 0.875rem; /* sm:text-sm */
}

.sq-input:focus,
.sq-textarea:focus {
    outline: none; /* focus:outline-none */
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* focus:ring-blue-500 (approximated with box-shadow) */
}

/* Checkboxes and Radio Buttons Styling */
.flex.flex-wrap.gap-x-4.gap-y-2 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem; /* gap-x-4 */
    row-gap: 0.5rem; /* gap-y-2 */
}

label.flex.items-center,
.sq-checkbox-label.flex.items-center {
    display: flex;
    align-items: center;
}

input[type="checkbox"].focus\:ring-blue-500,
input[type="radio"].focus\:ring-blue-500 {
    height: 1rem; /* h-4 */
    width: 1rem; /* w-4 */
    color: #2563eb; /* text-blue-600 */
    border-color: #d1d5db; /* border-gray-300 */
    border-radius: 0.25rem; /* rounded for checkbox, default for radio is circle */
}
input[type="checkbox"].focus\:ring-blue-500:focus,
input[type="radio"].focus\:ring-blue-500:focus {
    /* Tailwind uses a ring, which is an outer box-shadow. */
    /* Simple outline or slightly thicker border can approximate this. */
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Ring effect */
}


label.flex.items-center span.ml-2,
.sq-checkbox-label span.ml-2 {
    margin-left: 0.5rem; /* ml-2 */
    display: block;
    font-size: 0.875rem; /* text-sm */
    color: #111827; /* text-gray-900 */
}

/* Submit Button */
#sq-submit-button {
    width: 100%; /* w-full */
    background-color: #2563eb; /* bg-blue-600 */
    color: #ffffff; /* text-white */
    font-weight: 700; /* font-bold */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.375rem; /* rounded-lg */
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; /* transition */
    transition-duration: 300ms; /* duration-300 */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    cursor: pointer;
}

#sq-submit-button:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

#sq-submit-button:focus {
    outline: none; /* focus:outline-none */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 */
}
#sq-submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* Paragraphs */
p.text-sm.text-gray-700.mb-4 {
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
    margin-bottom: 1rem; /* mb-4 */
}

/* Declaration specific label */
.sq-checkbox-label { /* Already covered by label.flex.items-center */
    /* any specific styles for the declaration checkbox label itself if needed */
}


/* Styles for the submitted data list placeholder (if on the same page) */
#sq-submitted-data-list {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    width: 100%;
    max-width: 56rem; /* max-w-4xl */
}


/* Additional helper classes you might need */
.text-center { text-align: center; }


/* Table specific styles (for data-list-template.php, good to have them here) */
.overflow-x-auto {
    overflow-x: auto;
}
.rounded-lg {
    border-radius: 0.5rem; /* rounded-lg */
}
.border.border-gray-200 {
    border: 1px solid #e5e7eb; /* border border-gray-200 */
}
table.min-w-full {
    min-width: 100%;
}
table.divide-y.divide-gray-200 {
    /* Vertical borders for rows */
}
thead.bg-gray-50 {
    background-color: #f9fafb; /* bg-gray-50 */
}
th.sq-th, /* Custom class for table headers */
th.px-6.py-3 { /* Tailwind class for headers */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem;
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem;
    text-align: left; /* text-left */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-500 */
    text-transform: uppercase; /* uppercase */
    letter-spacing: 0.05em; /* tracking-wider */
}
tbody.bg-white {
    background-color: #ffffff;
}
tbody.divide-y.divide-gray-200 tr:not(:last-child) {
    border-bottom: 1px solid #e5e7eb; /* divide-y divide-gray-200 */
}
tr.hover\:bg-gray-50:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}
td.sq-td, /* Custom class for table data cells */
td.px-6.py-4 { /* Tailwind class for cells */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem;
    padding-top: 1rem; /* py-4 */
    padding-bottom: 1rem;
    white-space: nowrap; /* whitespace-nowrap */
    font-size: 0.875rem; /* text-sm */
    color: #111827; /* text-gray-900 */
}

/* Delete button in table */
button.sq-delete-button {
    background-color: #ef4444; /* bg-red-500 */
    color: white;
    font-weight: bold;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-radius: 0.375rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}
button.sq-delete-button:hover {
    background-color: #dc2626; /* hover:bg-red-600 */
}
button.sq-delete-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4); /* focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 */
}

/* Pagination */
.sq-pagination {
    margin-top: 1.5rem;
    text-align: center;
}
.sq-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    text-decoration: none;
    color: #3b82f6;
}
.sq-pagination .page-numbers.current,
.sq-pagination .page-numbers:hover {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.sq-pagination .page-numbers.dots {
    border: none;
    background: none;
    color: #6b7280;
}

.main-content-wrapper.clear {
  display: grid;
  place-items: center;
}