/**
 * Acrylic Paint Density Chart – Front-end Styles
 *
 * Covers the full chart UI: controls bar, density legend, table layout,
 * density colour coding, expanded row highlighting, opacity icons,
 * pagination, and all responsive breakpoints.
 *
 * Breakpoints:
 *   ≤ 700px  — tablet/large phone: abbreviate column headers, show opacity icons
 *   ≤ 480px  — small phone: stack controls vertically
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */

.apdc-wrap {
    font-family: inherit;
    font-size: 0.95em;
    color: #1a1a1a;
    margin: 0 0 24px;
}

/* ==========================================================================
   Controls bar (product filter + search)
   ========================================================================== */

.apdc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
    background: #f8f8fc;
    border: 1px solid #e2e2ef;
    border-radius: 6px;
}

.apdc-controls select,
.apdc-controls input[type="text"] {
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    background: #fff;
    box-sizing: border-box;
}

.apdc-controls select {
    min-width: 160px;
}

.apdc-controls input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
}

/* ==========================================================================
   Density legend
   Sits between the controls bar and the table. Uses the same density CSS
   classes as the table cells so colours are always in sync.
   ========================================================================== */

.apdc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.apdc-legend-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
    margin-right: 2px;
}

/* Legend items share the density colour classes — they just need pill shape */
.apdc-legend-item {
    display: inline-block;
    padding: 2px 10px 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    border-left-width: 3px;
    border-left-style: solid;
}

/* ==========================================================================
   Table wrapper (enables horizontal scroll on small screens)
   ========================================================================== */

.apdc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Table base
   ========================================================================== */

.apdc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.9em;
}

/* ── Header ── */

.apdc-table thead tr {
    background: #0b0739;
    color: #fff;
}

.apdc-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.03em;
    font-size: 0.8em;
    text-transform: uppercase;
}

/* Suppress the default dotted underline on <abbr> in column headers.
   The tooltip is still accessible via the title attribute. */
.apdc-table thead th abbr {
    text-decoration: none;
    cursor: default;
}

/* On desktop the full label is shown; abbreviation is hidden */
.apdc-th-abbr { display: none; }
.apdc-th-full { display: inline; }

/* ── Body cells ── */

.apdc-table tbody td {
    padding: 5px 12px;
    border-bottom: 1px solid #e8e8f0;
    vertical-align: middle;
}

.apdc-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alternating row shading */
.apdc-table tbody tr.apdc-row:nth-child(4n+1),
.apdc-table tbody tr.apdc-row:nth-child(4n+2) {
    background: #fff;
}
.apdc-table tbody tr.apdc-row:nth-child(4n+3),
.apdc-table tbody tr.apdc-row:nth-child(4n+4) {
    background: #f9f9fd;
}

/* ── Sortable headers ── */

.apdc-table thead th.apdc-sortable {
    cursor: pointer;
    user-select: none;
}

.apdc-table thead th.apdc-sortable:hover {
    background: #1a237e;
}

.apdc-sort-icon {
    display: inline-block;
    width: 1em;
}

/* ==========================================================================
   Density colour coding  (colorblind-safe: blue / yellow / orange)
   Left border stripe gives a strong non-colour cue as well.
   ========================================================================== */

/* Light density — blue */
.apdc-density-light {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border-left: 3px solid #60a5fa !important;
    font-weight: 600;
}

/* Medium density — yellow/amber */
.apdc-density-medium {
    background-color: #fefce8 !important;
    color: #854d0e !important;
    border-left: 3px solid #facc15 !important;
    font-weight: 600;
}

/* Heavy density — orange */
.apdc-density-heavy {
    background-color: #fff7ed !important;
    color: #9a3412 !important;
    border-left: 3px solid #fb923c !important;
    font-weight: 600;
}

/* ==========================================================================
   Row interaction — hover and expanded state
   Uses individual td borders to create an outline effect (box-shadow doesn't
   work on <tr> in most browsers).
   ========================================================================== */

/* Hover highlight — does not affect density-coloured cells */
.apdc-table tbody tr.apdc-row {
    cursor: pointer;
    transition: background 0.1s;
}

.apdc-table tbody tr.apdc-row:hover td:not([class*="apdc-density"]) {
    background: #f0f0fa;
}

/* Expanded row — navy outline on the summary row */
.apdc-table tbody tr.apdc-expanded td {
    border-top: 2px solid #0b0739;
    border-bottom: 2px solid transparent;
}

.apdc-table tbody tr.apdc-expanded td:first-child {
    border-left: 2px solid #0b0739;
}

.apdc-table tbody tr.apdc-expanded td:last-child {
    border-right: 2px solid #0b0739;
}

/* Expanded row — density cells keep their background, just gain the border */
.apdc-table tbody tr.apdc-expanded td[class*="apdc-density"] {
    border-top: 2px solid #0b0739;
}

/* Detail row — neutral background, navy outline continues below summary row */
.apdc-table tbody tr.apdc-expanded + tr.apdc-expand-row td {
    background: #f8f8fc;
    border-left: 2px solid #0b0739;
    border-right: 2px solid #0b0739;
    border-bottom: 2px solid #0b0739;
}

/* ==========================================================================
   Expanded detail row content
   ========================================================================== */

.apdc-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 10px 4px;
    font-size: 0.88em;
}

.apdc-detail-grid div {
    white-space: nowrap;
}

/* Lightfast entry — hidden on desktop, shown only on mobile where the
   Lightfast column is hidden from the main table */
.apdc-detail-lf {
    display: none;
}

/* ==========================================================================
   Color name link (links to Amazon or Brand purchase page)
   ========================================================================== */

.apdc-color-link {
    color: #0b0739;
    text-decoration: underline;
    text-decoration-color: #fb923c;
    text-underline-offset: 2px;
}

.apdc-color-link:hover {
    color: #1e40af;
    text-decoration-color: #1e40af;
}

/* ==========================================================================
   Opacity display — text on desktop, SVG icon on mobile
   ========================================================================== */

.apdc-opacity-icon {
    display: none; /* shown on mobile via media query below */
}

.apdc-opacity-text {
    display: inline;
}

.apdc-opacity-svg {
    vertical-align: middle;
}

/* ==========================================================================
   Footer bar (pagination + per-page selector)
   ========================================================================== */

.apdc-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.apdc-footer select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85em;
    background: #fff;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.apdc-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.apdc-page-summary {
    font-size: 0.85em;
    color: #555;
    margin-right: 8px;
}

.apdc-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.apdc-page-btn:hover:not([disabled]) {
    background: #f0f0fa;
    border-color: #0b0739;
}

.apdc-page-btn.active {
    background: #0b0739;
    color: #fff;
    border-color: #0b0739;
    font-weight: 700;
    cursor: default;
}

.apdc-page-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

.apdc-page-ellipsis {
    padding: 0 4px;
    color: #888;
    font-size: 0.85em;
}

/* ==========================================================================
   Responsive — tablet / large phone  (≤ 700px)
   ========================================================================== */

@media ( max-width: 700px ) {

    /* Switch column headers to abbreviations */
    .apdc-th-full { display: none; }
    .apdc-th-abbr { display: inline; }

    /* Hide the Lightfast column — value moves into expanded detail row */
    .apdc-table thead th[data-col="lightfast_rating"],
    .apdc-table tbody td.apdc-col-lightfast {
        display: none;
    }

    /* Show Lightfast in the expanded detail row on mobile */
    .apdc-detail-lf {
        display: block;
    }

    /* Swap opacity text for SVG icon to save horizontal space */
    .apdc-opacity-text { display: none; }
    .apdc-opacity-icon { display: inline; }
}

/* ==========================================================================
   Responsive — small phone  (≤ 480px)
   ========================================================================== */

@media ( max-width: 480px ) {

    /* Stack controls vertically */
    .apdc-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .apdc-controls select,
    .apdc-controls input[type="text"] {
        width: 100%;
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    /* Stack footer vertically */
    .apdc-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}