/* style.css - Vibrant Professional Dashboard Theme (AI-Inspired) */

/* --- Variables --- */
:root {
    --primary-color: #5A67D8; /* A slightly softer, yet vibrant, indigo for core elements */
    --primary-glow: rgba(90, 103, 216, 0.4); /* Lighter, more spread out for glow */
    --secondary-color: #06B6D4; /* A bright, clear cyan for accents and interactive elements */
    --secondary-glow: rgba(6, 182, 212, 0.4);
    --accent-color: #EC4899; /* A bold and energetic pink for highlights and important actions */
    --accent-glow: rgba(236, 72, 153, 0.4);

    --text-color-dark: #2D3748; /* Dark charcoal for main text, excellent readability */
    --text-color-light: #718096; /* Muted gray for secondary text and descriptions */
    --background-color-body: #F8FAFC; /* Very light, clean background, almost white */
    --background-color-card: #FFFFFF; /* Pure white for cards and elevated elements */
    --border-color: #E2E8F0; /* Soft, light gray for subtle borders */

    --shadow-light: rgba(90, 103, 216, 0.08); /* Slightly more visible */
    --shadow-medium: rgba(90, 103, 216, 0.18); /* More pronounced */
    --shadow-strong: rgba(90, 103, 216, 0.28); /* Even stronger */

    --success-color: #2ECC71; /* Green for positive indicators */
    --success-glow: rgba(46, 204, 113, 0.4);
    --danger-color: #EF4444; /* A clear, impactful red for negative indicators */
    --danger-glow: rgba(239, 68, 68, 0.4);
    --warning-color: #F97316; /* A warm, visible orange for warnings */
    --warning-glow: rgba(249, 115, 22, 0.4);
}

/* --- Base Styles & Typography --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color-body);
    color: var(--text-color-dark);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 16px; /* Base font size for responsiveness */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color-dark);
    font-weight: 700;
    margin-bottom: 0.5rem; /* Consistent spacing */
}

p {
    color: var(--text-color-light);
    margin-bottom: 1rem; /* Consistent spacing */
}

/* --- Layout & Sections --- */
.max-w-full.mx-auto {
    padding: 2.5rem 2rem; /* Generous padding for content */
    max-width: 1600px; /* Max width for large screens */
}

header {
    margin-bottom: 2.5rem;
    background-color: var(--background-color-card);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 6px 15px var(--shadow-light); /* Subtle header shadow */
    display: flex; /* Flexbox for alignment */
    align-items: center;
    justify-content: space-between; /* Space out title and other elements */
}

/* --- Card Styles --- */
.card {
    background-color: var(--background-color-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-light); /* Softer initial card shadow */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother, more modern transition */
}

.card:hover {
    box-shadow: 0 12px 30px var(--shadow-medium), 0 0 15px var(--primary-glow); /* More dynamic hover shadow with glow */
    transform: translateY(-7px); /* Slightly more lift on hover */
}

.card p {
    color: var(--text-color-dark); /* Ensure main card text is dark */
}
.card p.text-gray-400 {
    color: var(--text-color-light); /* Secondary card text */
}
.card .text-2xl.font-bold {
    color: var(--primary-color); /* Highlight key numbers with primary color */
}

/* --- Tab Navigation --- */
.mb-6.border-b.border-gray-700 {
    border-color: var(--border-color); /* Light border for tabs section */
}

.tab-button {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    color: var(--text-color-light);
    cursor: pointer;
    background: none;
    outline: none;
    transition: all 0.2s ease, box-shadow 0.2s ease; /* Added box-shadow to transition */
    border-top-left-radius: 0.5rem; /* Rounded tops for tabs */
    border-top-right-radius: 0.5rem;
}

.tab-button:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: rgba(90, 103, 216, 0.08); /* Very light tint on hover */
    box-shadow: 0 2px 10px var(--primary-glow); /* Subtle shadow with glow on hover */
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: rgba(90, 103, 216, 0.15); /* Lighter tint of primary for active */
    font-weight: 700; /* Make active tab bolder */
    box-shadow: 0 6px 18px var(--primary-glow); /* More prominent shadow with glow for active */
}

.tab-pane {
    padding-top: 1.5rem; /* Spacing below tabs */
}

/* --- Card Capture Padding (Added for screenshot margins) --- */
.capture-container-padding {
    padding: 1.5rem; /* Điều chỉnh giá trị này nếu muốn có thêm/bớt khoảng trống */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước tổng thể */
}


/* --- Table Styles --- */
.table-container {
    overflow-x: auto; /* Enable horizontal scrolling for narrow screens */
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-light);
    background-color: var(--background-color-card); /* Ensure table background is white */
}

table {
    width: 100%;
    border-collapse: separate; /* Allows for border-radius on cells */
    border-spacing: 0;
    color: var(--text-color-dark);
}

th,
td {
    padding: 12px 15px; /* Increased padding for better readability */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    white-space: nowrap; /* Prevent text wrapping in cells */
}

th:last-child,
td:last-child {
    border-right: none; /* Remove right border for last column */
}

/* Rounded corners for table */
thead tr:first-child th:first-child { border-top-left-radius: 0.75rem; }
thead tr:first-child th:last-child { border-top-right-radius: 0.75rem; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 0.75rem; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 0.75rem; }


th {
    background-color: #F1F5F9; /* A very light blue-gray for header */
    color: var(--text-color-dark);
    font-weight: 700;
    position: sticky; /* Keep header visible on scroll */
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--border-color); /* Thicker bottom border for header */
}

tbody tr:nth-child(even) {
    background-color: var(--background-color-card); /* White for even rows */
}

tbody tr:nth-child(odd) {
    background-color: #FDFEFF; /* Slightly off-white for odd rows */
}

tbody tr:hover {
    background-color: rgba(90, 103, 216, 0.05); /* Very light primary tint on hover */
    cursor: pointer;
}

/* --- Form Elements (Select, Text Input, Buttons) --- */
select,
input[type="text"],
.multiselect-btn {
    background-color: var(--background-color-card);
    border: 1px solid var(--border-color);
    color: var(--text-color-dark);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    height: 40px; /* Consistent height for form elements */
    font-size: 0.9rem;
    appearance: none; /* Remove default select arrow */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select:focus,
input[type="text"]:focus,
.multiselect-btn:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-glow); /* Primary color glow on focus */
    outline: none;
}

/* --- Custom File Input --- */
.custom-file-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--background-color-card);
    box-shadow: inset 0 1px 2px var(--shadow-light); /* Subtle inner shadow */
    transition: all 0.2s ease;
    height: 40px; /* Consistent height */
    box-sizing: border-box; /* Include padding/border in height */
}

.custom-file-input-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-glow); /* Primary glow on focus */
}

.custom-file-input-wrapper input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    cursor: pointer;
}

.file-label {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; /* Added box-shadow to transition */
    white-space: nowrap;
    box-shadow: 0 4px 10px var(--primary-glow); /* Primary color glow */
    font-size: 0.9rem;
}

.file-label:hover {
    background-color: #434C8E; /* Darker primary on hover */
    transform: translateY(-2px); /* Slightly more lift */
    box-shadow: 0 6px 15px var(--primary-glow); /* Enhanced shadow on hover */
}

.file-label:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px var(--primary-glow); /* Reset shadow on active */
}

.file-status {
    flex-grow: 1;
    color: var(--text-color-light);
    padding: 0.4rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Apply Filters Button */
#apply-filters-btn {
    background-color: var(--warning-color); /* Orange for action */
    color: white;
    font-weight: bold;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 20px var(--warning-glow); /* Enhanced shadow for AI look with glow */
    font-size: 1rem;
    border: none; /* Remove default button border */
    cursor: pointer;
}

#apply-filters-btn:hover {
    background-color: #E27B00; /* Darker orange on hover */
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: 0 12px 30px var(--warning-glow), 0 0 20px var(--warning-glow); /* More prominent shadow and glow on hover */
}

#apply-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 15px var(--warning-glow); /* Reduced shadow on active */
}


/* --- Loader Animation --- */
.loader {
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Multi-select Styles --- */
.multiselect {
    position: relative;
    display: inline-block;
    width: 100%;
}

.multiselect-options {
    display: none;
    position: absolute;
    background-color: var(--background-color-card);
    border: 1px solid var(--border-color);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    border-radius: 0.375rem;
    margin-top: 0.4rem;
    box-shadow: 0 4px 12px var(--shadow-medium);
}

.multiselect-options label {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* Increased padding */
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-color-dark);
    font-size: 0.875rem;
}

.multiselect-options label:hover {
    background-color: rgba(90, 103, 216, 0.08); /* Lighter primary tint on hover */
}

.multiselect-option input[type="checkbox"] {
    margin-right: 0.6rem;
    accent-color: var(--primary-color); /* Use primary color for checkbox */
    width: 1rem; /* Slightly larger checkbox */
    height: 1rem;
}

.multiselect-options .p-2 input[type="text"] {
    background-color: #FDFEFF; /* Very light background for search input */
    border-color: var(--border-color);
    color: var(--text-color-dark);
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    height: 32px;
}

/* Style for "Select All" */
.multiselect-options label.hover\:bg-slate-600.p-2.rounded.block.border-b.border-slate-500 {
    background-color: rgba(90, 103, 216, 0.12); /* Slightly darker primary tint for "Select All" */
    color: var(--primary-color);
    font-weight: 700;
    border-bottom-color: var(--border-color);
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
}
.multiselect-options [id^="multiselect-select-all-"] {
    accent-color: var(--primary-color);
}


/* --- Sub-tab Buttons --- */
.sub-tab-button {
    background-color: #EEF2FF; /* Very light primary tint */
    border: 1px solid rgba(90, 103, 216, 0.3); /* Primary tint border */
    padding: 0.4rem 0.8rem;
    border-radius: 0.3rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    color: var(--text-color-dark);
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease, box-shadow 0.2s ease; /* Added box-shadow to transition */
    border: none; /* Remove default button border */
}

.sub-tab-button:hover {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px var(--primary-glow); /* Enhanced shadow with glow on hover */
}

.sub-tab-button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 6px 15px var(--primary-glow); /* More prominent shadow with glow for active */
    font-weight: 600; /* Bolder for active state */
}

/* --- Conditional Styling --- */
.below-average {
    color: var(--danger-color);
    font-weight: bold;
}
/* New classes for positive growth in tables */
.text-green-400 {
    color: var(--success-color);
    font-weight: 600;
}
.text-red-400 {
    color: var(--danger-color);
    font-weight: 600;
}
.text-amber-400 {
    color: var(--warning-color);
    font-weight: 600;
}

/* New classes for performance indicators in tables */
.performance-good {
    color: var(--success-color);
    font-weight: 600;
}

.performance-average {
    color: var(--warning-color);
    font-weight: 600;
}

.performance-poor {
    color: var(--danger-color);
    font-weight: 600;
}


.expand-icon {
    cursor: pointer;
    display: inline-block;
    width: 1rem;
    text-align: center;
    font-weight: bold;
    color: var(--text-color-light);
    font-size: 0.9em;
    transition: transform 0.2s ease, color 0.2s ease;
}
.expand-icon:hover {
    color: var(--primary-color);
    transform: scale(1.1); /* Slight scale on hover */
}

/* Improved padding and background for nested table rows */
.manuf-row td {
    padding-left: 2.5rem !important;
    background-color: #F8F9FA !important; /* Slightly off-white, distinct from main rows */
    color: var(--text-color-dark);
}

.product-row td {
    padding-left: 3.75rem !important;
    background-color: #FDFEFF !important; /* Even lighter, almost pure white */
    color: var(--text-color-light);
}

/* Improved text color for percentage values in tables */
.text-sky-400 {
    color: var(--secondary-color);
    font-weight: 600;
}
.text-orange-500 {
    color: var(--accent-color);
    font-weight: 600;
}


/* --- Modal Styles --- */
.modal-overlay {
    background: rgba(0, 0, 0, 0.65); /* Slightly darker overlay */
}

.modal-content {
    background-color: var(--background-color-card);
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 30px var(--shadow-strong), 0 8px 16px var(--shadow-medium); /* More prominent modal shadow */
}

.modal-close {
    color: var(--text-color-light);
    font-size: 1.8rem;
    right: 15px;
    top: 10px;
    transition: color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text-color-dark);
    transform: rotate(90deg); /* Subtle rotation on close icon hover */
}

/* Capture Button (used in JS, ensure it maps to a variable) */
.p-2.bg-secondary.rounded-md.hover\:bg-secondary-dark { /* Updated class name for consistency */
    background-color: var(--secondary-color);
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px var(--secondary-glow); /* Enhanced shadow for AI look with glow */
    border: none; /* Remove default button border */
    cursor: pointer;
}

.p-2.bg-secondary.rounded-md.hover\:bg-secondary-dark:hover {
    background-color: #069DAA; /* Darker secondary on hover (Cyan 700) */
    transform: translateY(-2px); /* Slightly more lift */
    box-shadow: 0 6px 15px var(--secondary-glow), 0 0 15px var(--secondary-glow); /* More prominent shadow and glow on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .max-w-full.mx-auto {
        padding: 0.8rem;
    }
    .tab-button {
        padding: 0.6rem 0.7rem;
        font-size: 0.85rem;
    }
    th, td {
        padding: 6px 8px;
    }
    .manuf-row td {
        padding-left: 1.5rem !important;
    }
    .product-row td {
        padding-left: 2.25rem !important;
    }
    header h1 {
        font-size: 2rem;
    }
    select,
    input[type="text"],
    .multiselect-btn {
        height: 34px;
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
    .custom-file-input-wrapper {
        height: 34px;
    }
    .file-label {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    .file-status {
        font-size: 0.75rem;
    }
    #apply-filters-btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
    }
    .multiselect-options label {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .multiselect-options .p-2 input[type="text"] {
        height: 30px;
        font-size: 0.8rem;
    }
    .sub-tab-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    .card p.text-2xl.font-bold {
        font-size: 1.5rem;
    }
    .card p.text-sm.text-gray-400 {
        font-size: 0.75rem;
    }
}

/* Specific adjustments for input file */
input[type="file"] {
    background-color: var(--background-color-card);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.4rem;
    color: var(--text-color-dark);
    font-size: 0.85rem;
}

input[type="file"]::file-selector-button {
    background-color: var(--primary-color);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 0.3rem;
    border: none;
    cursor: pointer;
    margin-right: 0.8rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Added box-shadow to transition */
    font-size: 0.85rem;
}

input[type="file"]::file-selector-button:hover {
    background-color: #434C8E; /* Darker primary on hover */
    box-shadow: 0 4px 10px var(--primary-glow); /* Subtle glow on hover */
}

/* Specific styling for the guide link */
#showGuideLink {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: underline;
    text-shadow: none;
    transition: color 0.2s ease;
}

#showGuideLink:hover {
    color: #434C8E; /* Darker primary on hover */
}

/* Table specific alignment classes */
.table-data-col {
    text-align: right !important;
    font-variant-numeric: tabular-nums; /* Ensures numbers align vertically */
}

.table-header-numeric {
    text-align: right !important;
}

.manuf-row td:first-child,
.product-row td:first-child {
    text-align: left !important; /* Ensure first column of nested rows is left-aligned */
}