/* Import IBM Plex Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap');

/* Carbon Design System - Color Palette & Spacing Scale (Approximations) */
:root {
    /* Light Theme Colors */
    --cds-ui-01: #ffffff; /* Backgrounds, primary surfaces */
    --cds-ui-02: #f4f4f4; /* Secondary surfaces, light backgrounds */
    --cds-ui-03: #e0e0e0; /* Borders, dividers */
    --cds-ui-04: #c6c6c6; /* Stronger borders, disabled components */
    --cds-text-01: #161616; /* Primary text */
    --cds-text-02: #525252; /* Secondary text, labels, placeholders */
    --cds-interactive-01: #0f62fe; /* Primary button background, active states */
    --cds-interactive-01-hover: #0353e9;
    --cds-interactive-01-active: #002d9c;
    --cds-support-success: #24a148; /* Success status */
    --cds-support-warning: #f1c21b; /* Warning status */
    --cds-support-error: #da1e28; /* Error status */
    --cds-support-info: #0043ce; /* Info messages - text color */
    --cds-link-01: #0f62fe;

    /* Info element specific colors (light mode) */
    --cds-info-bg-light: #edf5ff; /* Light blue background for info box */
    --cds-info-border-light: #c9e2fc; /* Lighter blue border for info box */


    /* Dark Theme Colors (Override for .dark-mode) */
    --cds-ui-01-dark: #262626; /* Backgrounds, primary surfaces */
    --cds-ui-02-dark: #393939; /* Secondary surfaces, light backgrounds */
    --cds-ui-03-dark: #525252; /* Borders, dividers */
    --cds-ui-04-dark: #6f6f6f; /* Stronger borders, disabled components */
    --cds-text-01-dark: #f4f4f4; /* Primary text */
    --cds-text-02-dark: #c6c6c6; /* Secondary text, labels, placeholders */
    --cds-interactive-01-dark: #4589ff; /* Primary button background, active states */
    --cds-interactive-01-hover-dark: #397de3;
    --cds-interactive-01-active-dark: #002d9c;
    --cds-support-success-dark: #42dc8e;
    --cds-support-warning-dark: #f1c21b;
    --cds-support-error-dark: #fa4d56;
    --cds-support-info-dark: #5076ff; /* Info messages - text color in dark mode */
    --cds-link-01-dark: #4589ff;

    /* Info element specific colors (dark mode) */
    --cds-info-bg-dark: var(--cds-ui-02-dark); /* Use a darker secondary UI color for better contrast */
    --cds-info-border-dark: var(--cds-ui-03-dark); /* Match border to dark UI */

    /* Spacing scale (multiples of 8px, but adjusted for compactness) */
    --spacing-01: 2px;
    --spacing-02: 4px;
    --spacing-03: 8px;
    --spacing-04: 12px;
    --spacing-05: 16px;
    --spacing-06: 24px;
    --spacing-07: 32px;
    --spacing-08: 40px;
}

/* Dark mode overrides */
html.dark-mode {
    --cds-ui-01: var(--cds-ui-01-dark);
    --cds-ui-02: var(--cds-ui-02-dark);
    --cds-ui-03: var(--cds-ui-03-dark);
    --cds-ui-04: var(--cds-ui-04-dark);
    --cds-text-01: var(--cds-text-01-dark);
    --cds-text-02: var(--cds-text-02-dark);
    --cds-interactive-01: var(--cds-interactive-01-dark);
    --cds-interactive-01-hover: var(--cds-interactive-01-hover-dark);
    --cds-interactive-01-active: var(--cds-interactive-01-active-dark);
    --cds-support-success: var(--cds-support-success-dark);
    --cds-support-warning: var(--cds-support-warning-dark);
    --cds-support-error: var(--cds-support-error-dark);
    --cds-support-info: var(--cds-support-info-dark);
    --cds-link-01: var(--cds-link-01-dark);

    /* Info element specific colors (dark mode override) */
    --cds-info-bg-light: var(--cds-info-bg-dark);
    --cds-info-border-light: var(--cds-info-border-dark);
}


/* Base styles */
body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    margin: 0;
    background-color: var(--cds-ui-02);
    color: var(--cds-text-01);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
}

/* Header Section */
header {
    background-color: var(--cds-ui-01); /* White/dark gray background */
    padding: var(--spacing-06) var(--spacing-07);
    border-bottom: 1px solid var(--cds-ui-03);
    position: relative; /* For positioning theme switch */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

header h1 {
    font-size: 2em;
    margin: 0; /* Remove default h1 margin inside header */
    color: var(--cds-text-01);
}

h1, h2, h3 {
    color: var(--cds-text-01);
    font-weight: 600;
    margin-bottom: var(--spacing-05);
}
h2 { font-size: 1.5em; margin-bottom: var(--spacing-05); }
h3 { font-size: 1.2em; margin-bottom: var(--spacing-04); }

.container {
    max-width: 1000px;
    margin: var(--spacing-07) auto; /* Top/bottom margin */
    padding: var(--spacing-07); /* Increased padding */
    border-radius: var(--spacing-03);
    background-color: var(--cds-ui-01);
    box-shadow: 0 var(--spacing-02) var(--spacing-05) rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Inputs */
input[type="text"],
input[type="number"] {
    width: 100%;
    height: var(--spacing-07); /* Slightly shorter height for table inputs */
    padding: var(--spacing-03); /* Smaller padding */
    margin-bottom: var(--spacing-04);
    border: 1px solid var(--cds-ui-04);
    border-radius: 0;
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--cds-ui-01);
    color: var(--cds-text-01);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease, color 0.3s ease;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder {
    color: var(--cds-text-02);
}
input[type="text"]:focus,
input[type="number"]:focus {
    border-color: var(--cds-interactive-01);
    box-shadow: 0 0 0 2px var(--cds-interactive-01); /* Carbon-like focus ring */
    outline: none;
}

/* Buttons (General Carbon styles) */
.cds-button {
    height: var(--spacing-08);
    padding: 0 var(--spacing-05);
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-right: var(--spacing-04);
    transition: background-color 0.15s ease, transform 0.1s ease, color 0.3s ease;
    text-transform: capitalize;
    box-shadow: none;
    display: inline-flex; /* For better text alignment */
    align-items: center;
    justify-content: center;
    text-decoration: none; /* For label acting as button */
    white-space: nowrap; /* Prevent text wrapping */
}
.cds-button:hover {
    transform: none; /* No lift effect for Carbon */
}
.cds-button:active {
    background-color: var(--cds-interactive-01-active);
}
.cds-button:disabled {
    background-color: var(--cds-ui-04);
    color: var(--cds-text-02);
    cursor: not-allowed;
}

/* Primary Button */
.cds-button--primary {
    background-color: var(--cds-interactive-01);
    color: var(--cds-ui-01);
}
.cds-button--primary:hover {
    background-color: var(--cds-interactive-01-hover);
}

/* Secondary Button (for Choose File) */
.cds-button--secondary {
    background-color: var(--cds-ui-03);
    color: var(--cds-text-01);
    border: 1px solid var(--cds-ui-03);
}
.cds-button--secondary:hover {
    background-color: var(--cds-ui-04);
    border-color: var(--cds-ui-04);
}
.cds-button--secondary:active {
    background-color: var(--cds-ui-04); /* Consistent active */
}

/* Danger Button */
.cds-button--danger {
    background-color: var(--cds-support-error);
    color: var(--cds-ui-01);
}
.cds-button--danger:hover {
    background-color: #a5121c; /* Darker red */
}
.cds-button--danger:active {
    background-color: #6d0a10; /* Even darker red */
}

/* Specific for Remove button in table */
.remove-row-btn {
    width: var(--spacing-07); /* Square button size */
    height: var(--spacing-07); /* Square button size */
    padding: 0; /* Remove padding for content centering */
    font-size: 1.2em; /* Larger 'x' character */
    background-color: var(--cds-ui-03); /* Default to UI gray */
    color: var(--cds-text-01); /* Dark text */
}
.remove-row-btn:hover {
    background-color: var(--cds-support-error); /* Red on hover */
    color: var(--cds-ui-01); /* White 'x' on hover */
}
html.dark-mode .remove-row-btn {
    background-color: var(--cds-ui-04-dark);
    color: var(--cds-text-01-dark);
}


.clear-all-rows-btn {
    margin-left: var(--spacing-05); /* Space from other buttons */
}

/* Info and Status Messages */
.info {
    color: var(--cds-support-info); /* Main text color for info */
    background-color: var(--cds-info-bg-light);
    padding: var(--spacing-04) var(--spacing-05);
    border-radius: var(--spacing-03);
    margin-bottom: var(--spacing-05);
    font-size: 0.9em;
    border: 1px solid var(--cds-info-border-light);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

html.dark-mode .info {
    background-color: var(--cds-info-bg-dark); /* Softer dark gray background */
    border-color: var(--cds-info-border-dark);
    color: var(--cds-text-01-dark); /* Ensure text is highly readable */
}
html.dark-mode .info strong, html.dark-mode .info a {
    color: var(--cds-support-info-dark); /* Specific info color for emphasis */
}


.error {
    color: var(--cds-support-error);
    font-weight: 600;
    font-size: 0.9em;
}
.success {
    color: var(--cds-support-success);
    font-weight: 600;
}
.warning-text {
    color: var(--cds-support-warning);
    font-weight: 600;
}
.no-data {
    color: var(--cds-text-02);
    font-style: italic;
    font-size: 0.85em;
}

/* Product Input Table */
.product-table-wrapper {
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--cds-ui-04);
    margin-bottom: var(--spacing-06);
    box-shadow: none;
    transition: border-color 0.3s ease;
}
.product-table {
    width: 100%;
    border-collapse: collapse;
}
.product-table th, .product-table td {
    border: 1px solid var(--cds-ui-03);
    padding: var(--spacing-03); /* Reduced padding for more compactness */
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    transition: border-color 0.3s ease;
}
.product-table th {
    background-color: var(--cds-ui-02);
    font-weight: 600;
    color: var(--cds-text-01);
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.product-table th:nth-child(3) { /* Action column specific width */
    width: var(--spacing-08); /* Fixed width for the remove button column */
    text-align: center;
}
.product-table td:nth-child(3) {
    text-align: center;
}
.product-table tbody tr:nth-child(even) {
    background-color: var(--cds-ui-01);
    transition: background-color 0.3s ease;
}
.product-table tbody tr:hover {
    background-color: var(--cds-ui-02);
}

/* CSV Upload Section */
.csv-upload-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-06);
    padding-top: var(--spacing-05);
    border-top: 1px dashed var(--cds-ui-04);
    gap: var(--spacing-04);
    font-size: 0.9em;
    transition: border-color 0.3s ease;
}
.csv-upload-section span {
    font-weight: 600;
    color: var(--cds-text-02);
    white-space: nowrap;
    transition: color 0.3s ease;
}
.csv-upload-section input[type="file"] {
    display: none;
}
.file-name-display {
    color: var(--cds-text-02);
    font-size: 0.85em;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: var(--spacing-08);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cds-ui-04);
    padding-bottom: 2px;
    transition: border-color 0.3s ease, color 0.3s ease;
}


/* Results Section */
#response {
    margin-top: var(--spacing-06);
    padding: var(--spacing-05);
    background-color: var(--cds-ui-02);
    border: 1px solid var(--cds-ui-03);
    border-radius: var(--spacing-03);
    overflow-x: auto;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Result Card Styling */
.product-result-card {
    border: 1px solid var(--cds-ui-03);
    border-radius: var(--spacing-03);
    padding: var(--spacing-04);
    margin-bottom: var(--spacing-04);
    background-color: var(--cds-ui-01);
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease-out, background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
}
.product-result-card:hover {
    background-color: var(--cds-ui-02);
}
.product-result-card.success {
    border-color: var(--cds-support-success);
}
.product-result-card.error {
    border-color: var(--cds-support-error);
}
.product-result-card.warning-text {
    border-color: var(--cds-support-warning);
}

/* Mini Card (Summary) Content */
.product-result-card .summary-content {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: var(--spacing-04);
    align-items: center;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
}
.product-result-card .summary-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-01);
}
.product-result-card .summary-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-01);
}
.product-result-card .summary-content .product-title {
    color: var(--cds-text-01);
    font-size: 1.05em;
    margin: 0;
    line-height: 1.2;
}
.product-result-card .summary-content .product-description {
    font-size: 0.85em;
    color: var(--cds-text-02);
    font-weight: normal;
    margin: 0;
    line-height: 1.2;
}
.product-result-card .summary-content .price-unit {
    font-size: 1.1em;
    color: var(--cds-text-01);
    white-space: nowrap;
    font-weight: 600;
}
.product-result-card .summary-content .stock-status {
    padding: var(--spacing-01) var(--spacing-03);
    border-radius: 100px;
    font-size: 0.75em;
    display: inline-block;
    margin-top: var(--spacing-02);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--cds-ui-01); /* Default text color for statuses */
}
.stock-status.in-stock { background-color: var(--cds-support-success); }
.stock-status.not-in-stock { background-color: var(--cds-support-error); }
.stock-status.partial-stock { background-color: var(--cds-support-warning); color: var(--cds-text-01); } /* Warning text needs to be dark */
.stock-status.unknown, .stock-status.error { background-color: var(--cds-ui-04); color: var(--cds-text-01); }

.product-result-card .summary-content .eta-info {
    font-size: 0.75em;
    color: var(--cds-text-02);
    margin-top: var(--spacing-02);
    font-weight: normal;
}
/* Expansion Indicator */
.product-result-card::after {
    content: '▼';
    position: absolute;
    top: var(--spacing-05);
    right: var(--spacing-05);
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    color: var(--cds-text-02);
    font-size: 0.7em;
}
.product-result-card.expanded::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Detailed Content */
.product-result-card .detailed-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
    opacity: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
}
.product-result-card.expanded .detailed-content {
    max-height: 700px;
    opacity: 1;
    padding-top: var(--spacing-04);
    border-top-color: var(--cds-ui-03);
}

.product-result-card p {
    margin-bottom: var(--spacing-03);
    line-height: 1.4;
    font-size: 0.9em;
}
.section-title {
    font-weight: 600;
    margin-top: var(--spacing-05);
    margin-bottom: var(--spacing-03);
    color: var(--cds-text-01);
    border-bottom: 1px dashed var(--cds-ui-03);
    padding-bottom: var(--spacing-02);
    font-size: 0.95em;
}
.availability-item {
    margin-left: var(--spacing-05);
    margin-bottom: var(--spacing-02);
    list-style-type: disc;
    color: var(--cds-text-01);
    font-size: 0.85em;
}
.availability-item strong {
    color: var(--cds-text-01);
}

.details-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-03) var(--spacing-05);
    margin-bottom: var(--spacing-04);
}
.details-item {
    flex: 1 1 auto;
    min-width: 140px;
}
.details-item strong {
    color: var(--cds-text-02);
    display: block;
    margin-bottom: var(--spacing-01);
    font-size: 0.85em;
    text-transform: uppercase;
}
.details-item span {
    color: var(--cds-text-01);
    font-weight: 400;
    font-size: 0.95em;
}

/* Theme switch */
.theme-switch-wrapper {
    /* Positioned relative to header now */
    display: flex;
    align-items: center;
    gap: var(--spacing-03);
    font-size: 0.9em;
    color: var(--cds-text-01);
}

/* Carbon-like toggle switch */
.cds-toggle-switch {
    --switch-width: 40px;
    --switch-height: 24px;
    --switch-handle-size: 16px;
    --switch-track-color: var(--cds-ui-04);
    --switch-handle-color: var(--cds-ui-01);
    --switch-active-track-color: var(--cds-interactive-01);

    appearance: none;
    -webkit-appearance: none;
    width: var(--switch-width);
    height: var(--switch-height);
    background-color: var(--switch-track-color);
    border-radius: var(--switch-height);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cds-toggle-switch::before {
    content: '';
    position: absolute;
    top: calc((var(--switch-height) - var(--switch-handle-size)) / 2);
    left: calc((var(--switch-height) - var(--switch-handle-size)) / 2); /* Aligns handle to left edge */
    width: var(--switch-handle-size);
    height: var(--switch-handle-size);
    background-color: var(--switch-handle-color);
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cds-toggle-switch:checked {
    background-color: var(--switch-active-track-color);
}

.cds-toggle-switch:checked::before {
    transform: translateX(calc(var(--switch-width) - var(--switch-handle-size) - (var(--switch-height) - var(--switch-handle-size))); /* Move handle to right */
}

/* Focus styles for accessibility */
.cds-toggle-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--cds-interactive-01);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-04);
        padding: var(--spacing-05);
    }
    .theme-switch-wrapper {
        position: static;
        margin-top: var(--spacing-03);
    }
    .container {
        margin: var(--spacing-05) auto;
        padding: var(--spacing-05);
    }
    .csv-upload-section {
        flex-direction: column;
        align-items: stretch;
    }
    .csv-upload-section .cds-button,
    .csv-upload-section .file-name-display {
        width: 100%;
        margin-right: 0;
    }
}