.order-check-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 2rem;
}

/* Design tokens */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    --radius-md: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 6px 16px rgba(16,24,40,0.08);
    --surface-subtle: #f8f9fa;
    --surface-muted: #f1f3f5;
    --text-muted: #6c757d;
    --primary: #198754; /* bootstrap success green to align brand */
    --chip-info-bg: #eef6ff;
    --chip-info-border: #cfe2ff;
    --chip-info-text: #0b5ed7;
    --gradient-header: linear-gradient(135deg, #198754, #0f5132);
}

body, input, textarea, button {
    font-family: var(--font-sans);
}

/* Base responsive media handling */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* Layout helpers extracted from inline styles */
.app-container { max-width: 1024px; }
.logo { max-width: 70px; height: auto; }
.pre-wrap { white-space: pre-wrap; }
.progress-thin { height: 8px; }
.col-qty { width: 10%; }

/* Skeleton size utilities */
.sk-h-18 { height: 18px; }
.sk-h-16 { height: 16px; }
.sk-h-14 { height: 14px; }
.sk-w-60 { width: 60%; }
.sk-w-30 { width: 30%; }
.sk-w-25 { width: 25%; }
.sk-my-10 { margin: 10px 0; }

@media (max-width: 576px) {
    .order-check-wrapper {
        align-items: flex-start;
        padding-top: 3rem;
    }

    .order-check-wrapper .card {
        border-radius: 1rem;
        box-shadow: none;
    }

    .card-title {
        font-size: 1.25rem;
    }

    input, textarea {
        font-size: 1rem;
    }

    /* Container and card padding for small screens */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .container.my-5 { margin-top: .5rem !important; }
    .card .card-body { padding: .75rem 1rem; }
    /* Reduce padding for main content body on mobile */
    .card-body.p-4 { padding: 1rem !important; }
    .card .card-header, .card .card-footer { padding: .75rem 1rem; }
    /* Tighten contact card header spacing */
    .contact-card .card-header { padding-top: .3rem; padding-bottom: .3rem; }

    /* App container: remove outer spacing on mobile */
    .container.app-container { padding-left: 0; padding-right: 0; }
    .container.my-5.app-container { margin-top: 0 !important; }

    /* Header logo/title: wrap and scale */
    .card-header h4 {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1rem;
        line-height: 1.2;
    }
    .card-header h4 img { max-width: 52px; height: auto; flex: 0 0 auto; }
    .logo { max-width: 52px; }
    #intro-text {
        font-size: .95rem;
    }

    /* Section card headers layout with grid */
    .section-header .header-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem; min-width: 0; }
    /* Flatten utility wrapper so its children can be placed in grid */
    .section-header .header-top > .d-flex { display: contents; }
    .section-header .header-bottom { flex-wrap: wrap; gap: .25rem; }
    .date-chip {
        height: auto;
        font-size: .8125rem;
        padding: .1rem .4rem;
    }
    .toggle-btn { width: 44px; height: 44px; padding: 0; font-size: 1.125rem; display: inline-flex; align-items: center; justify-content: center; }
    .section-card .toggle-btn { grid-column: 2 / 3; justify-self: end; margin-left: .25rem; }

    /* Summary line control: prevent awkward breaks */
    .summary-line { display: grid; grid-template-columns: 1fr; row-gap: .25rem; align-items: center; min-width: 0; }
    .summary-metrics { white-space: nowrap; min-width: 0; }
    .summary-next { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
    #summary-container { margin-top: .25rem !important; }
    #filters-container { margin-top: .5rem !important; }
    #results-container { margin-top: .5rem !important; }

    /* Filter chips: horizontal scroll if needed */
    .filter-chips {
        overflow-x: auto;
        padding: 0 .5rem .5rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-bottom: 1px solid #eef1f3;
        position: sticky;
        top: .75rem;
        background: #fff;
        z-index: 5;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .chip { padding: .4rem .7rem; font-size: .9rem; }

    /* Table polish on small screens */
    .section-card .table thead th {
        padding-top: .45rem;
        padding-bottom: .45rem;
    }
    .section-card .table tbody td {
        padding: .5rem .75rem;
    }

    /* Item line wraps to two rows: code then name */
    .item-line {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    .item-code {
        min-width: 0;
        font-size: .8rem;
        opacity: .9;
    }
    .product-name {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* Buttons: comfortable tap targets */
    .btn { min-height: 44px; }
    /* Smaller specific buttons on mobile */
    #search-again, .contact-card button[type="submit"] {
        min-height: 38px;
        padding: .45rem .75rem;
        font-size: .95rem;
    }

    /* Reduce nested shadows on small screens */
    .section-card { box-shadow: var(--shadow-sm); }
    #summary-container .card { box-shadow: none; }

    /* Badge and chip fine-tuning */
    .section-header .badge { padding: .3rem .45rem; font-size
        : .825rem; }
    .date-chip { padding: .1rem .4rem; font-size: .8125rem; }
    /* Footer smaller on mobile */
    .app-container .card-footer { font-size: .8rem; }
    /* Mobile-specific 2x2 grid for reference/date rows */
    .header-mobile { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; }
    .header-mobile .toggle-btn { justify-self: end; }
    .ref-grid { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: .5rem; row-gap: .125rem; align-items: center; width: 100%; }
    .ref-grid.equal-cols > * { text-align: center; }
    .ref-grid .ref-title, .ref-grid .ref-value { justify-self: center; }
    .ref-grid .date-chip { justify-self: center; }
    .ref-grid .date-title { justify-self: center; }
    .ref-grid .date-value { justify-self: center; }
    .ref-grid .ref-title { grid-column: 1 / 2; grid-row: 1 / 2; }
    .ref-grid .ref-value { grid-column: 1 / 2; grid-row: 2 / 3; }
    .ref-grid .date-title { grid-column: 2 / 3; grid-row: 1 / 2; }
    .ref-grid .date-value { grid-column: 2 / 3; grid-row: 2 / 3; }
    /* Hide desktop date chip in header-top on mobile */
    .section-header .header-top .date-chip { display: none; }
}

@media (max-width: 360px) {
    .card-header h4 { font-size: .95rem; }
    .card-header h4 img { max-width: 44px; }
    .logo { max-width: 44px; }
}


/* Grouped results UI */
.section-card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* ensure table corners clip to card radius */
}
.section-header {
    background: var(--surface-subtle);
    border-bottom: 1px solid #e9ecef; /* keep header attached to table without gaps */
    gap: .4rem;
}
.date-chip, .date-chip-mobile {
    background: var(--chip-info-bg);
    color: var(--chip-info-text);
    border: 1px solid var(--chip-info-border);
    padding: .15rem .45rem;
    border-radius: .375rem;
    font-size: .875rem;
    height: 28px;
}
.date-chip-mobile { display: none; }

/* Keep header values in one row by allowing slight shrink */
.section-header .header-top { margin-bottom: .2rem; }
.section-header .badge { white-space: nowrap; font-size: .85rem; padding: .35rem .5rem; display: inline-flex; align-items: center; }
.section-header .date-chip { white-space: nowrap; }
.ref-label { font-weight: 400; font-size: 1rem; }
.ref-label strong { font-weight: 600; }
.section-header .ref-label { font-size: 1rem; font-weight: 400; }

/* Origin-level grouping */
.origin-card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* ensure inner content respects radius */
}
.origin-header {
    background: var(--surface-muted);
}
.meta-chip {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .375rem;
    padding: .2rem .5rem;
    font-size: .875rem;
}

/* Table polish */
.table tr:hover td {
    background: #fbfbfc;
}

/* Filter chips */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.chip {
    border: 1px solid #e6e8eb;
    background: #fff;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .875rem;
    cursor: pointer;
}
.chip[aria-pressed="true"] {
    background: #eef6ff;
    border-color: #cfe2ff;
    color: #0b5ed7;
}

/* Collapse toggle */
.toggle-btn {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    height: 28px;
    padding: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.table td:nth-child(1) {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.product-name {
    font-size: .94rem; /* slightly smaller than default */
    text-transform: none; /* handled via JS title casing */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
}
.product-name:hover {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: normal;
}
.table td:nth-child(3), .table th:nth-child(3) {
    text-align: right;
}

/* Compact tables used in outstanding view */
.table-hide-head thead { display: none; }
.item-line { display: flex; gap: .5rem; align-items: baseline; }
.item-code { min-width: 64px; font-variant-numeric: tabular-nums; }
.qty-badge { min-width: 2.25rem; }

/* Normalize table borders to avoid double lines and misalignment */
.section-card .table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.section-card .table th, .section-card .table td {
    border: 0;
    vertical-align: middle;
}
.section-card .table thead th {
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.section-card .table tbody tr td {
    border-top: 1px solid #e9ecef; /* single divider between rows */
    background: #fff; /* ensure consistent row bg */
}
.section-card .table tbody tr:first-child td {
    border-top: 0;
}

/* App header refinement */
.card-header.bg-success {
    background-image: var(--gradient-header);
}

/* Progress full width fix when 100% */
.progress-bar[aria-valuenow="100"] { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.progress { border-radius: 0.375rem; overflow: hidden; background-color: #eef1f3; }

/* Button spinner */
.btn[aria-busy="true"] {
    position: relative;
    pointer-events: none;
    opacity: .85;
}
.btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    right: .75rem;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6);
    border-top-color: rgba(255,255,255,1);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeletons */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #eef2f4;
    border-radius: .375rem;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }