/* ============================================
   ConsignRev - Watchlists Row List
   Responsive tabular grid for Watchlists page.
   Mobile-first stacked rows; tablet/desktop
   becomes a true table with sticky header.
   Namespaced under .cr-rowlist* so it doesn't
   collide with other .cr-card-* styles.
   ============================================ */

.cr-rowlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    box-sizing: border-box;
}

/* Header is hidden on mobile; rows present the column structure */
.cr-rowlist-head {
    display: none;
}

.cr-row {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.cr-row:hover,
.cr-row:focus-within {
    border-color: var(--line2);
}

.cr-row.is-unavailable {
    opacity: .65;
}

.cr-row .cr-row-main {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
}

/* Stock */
.cr-col-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cr-stock-text {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Vehicle primary */
.cr-col-vehicle {
    min-width: 0;
}

.cr-vehicle-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* Brand/Year secondary column - hidden on mobile */
.cr-col-vehicle-sub {
    display: none;
}

/* Status badge column */
.cr-col-status {
    display: flex;
    align-items: center;
}

.cr-col-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Per-row circular icon buttons */
.cr-row-action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    background: var(--panel2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    padding: 0;
}

.cr-row-action .material-icons {
    font-size: 18px;
}

.cr-row-action:hover {
    background: var(--panel);
}

.cr-row-action:active {
    transform: scale(.94);
}

.cr-row-action:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.cr-row-action-primary {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.cr-row-action-primary:hover {
    background: var(--red2, #ff2834);
    border-color: var(--red2, #ff2834);
}

.cr-row-action-danger:hover {
    background: var(--red-bg, rgba(207,17,28,.1));
    border-color: var(--red);
    color: var(--red-text, #cf111c);
}

.cr-row-action-save {
    color: var(--gold);
    border-color: var(--gold-bg, rgba(199,155,74,.25));
}

.cr-row-action-save:hover {
    background: var(--gold-bg, rgba(199,155,74,.1));
}

/* Expand chevron: hidden by default on mobile (rows are vertical; details
   attach beneath). On desktop it sits inline and reveals a balloon row. */
.cr-row-expand {
    display: none;
}

.cr-row-detail {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 0 14px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, padding .25s ease, opacity .15s ease;
}

.cr-row-detail.is-open {
    display: flex;
    opacity: 1;
    max-height: 600px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
}

.cr-row-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap;
}

.cr-row-detail-row.is-cta,
.cr-row-detail-cta {
    margin-top: 4px;
}

.cr-row-detail-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-row-detail-cta .cr-card-btn {
    width: 100%;
}

/* ============================================
   720px+ — true tabular grid, sticky header
   ============================================ */

@media (min-width: 720px) {

    .cr-rowlist {
        padding: 12px 14px;
        gap: 6px;
    }

    .cr-rowlist-head {
        display: grid;
        grid-template-columns: 130px minmax(0,1.4fr) minmax(0,1fr) 150px 110px;
        gap: 14px;
        align-items: center;
        padding: 10px 16px;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        position: sticky;
        top: 0;
        background: var(--bg2);
        z-index: 1;
        border-bottom: 1px solid var(--line);
        margin-bottom: 6px;
        font-weight: 600;
    }

    .cr-row {
        border-radius: 12px;
    }

    .cr-row .cr-row-main {
        display: grid;
        grid-template-columns: 130px minmax(0,1.4fr) minmax(0,1fr) 150px 110px;
        gap: 14px;
        padding: 12px 16px;
    }

    .cr-col-vehicle-sub {
        display: block;
        min-width: 0;
    }

    .cr-vehicle-sub-text {
        color: var(--muted);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        max-width: 100%;
    }

    .cr-row-expand {
        display: none;       /* keep details inline as a balloon row instead */
    }

    /* Balloon detail spans full width below its parent row */
    .cr-row-detail.is-open {
        grid-column: 1 / -1;
        border-top: 1px dashed var(--line);
        border-radius: 0 0 12px 12px;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 10px 24px;
        align-items: center;
    }

    .cr-row-detail-cta {
        grid-column: span 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 6px;
    }

    /* Zebra striping */
    .cr-row:nth-of-type(odd):not(.is-open-related) {
        background: var(--panel);
    }

    .cr-row:nth-of-type(even) {
        background: var(--panel2);
    }

    .cr-row:hover {
        box-shadow: 0 2px 14px rgba(0,0,0,.35);
        transform: translateY(-1px);
    }
}

/* ============================================
   Very small phones - tighten gutters
   ============================================ */

@media (max-width: 480px) {
    .cr-rowlist { padding: 10px; gap: 8px; }
    .cr-row .cr-row-main {
        grid-template-columns: auto minmax(0,1fr) auto;
        grid-template-areas:
            "stock vehicle actions"
            "status status actions";
        gap: 6px 10px;
        padding: 12px;
    }
    .cr-col-stock { grid-area: stock; }
    .cr-col-vehicle { grid-area: vehicle; }
    .cr-col-status { grid-area: status; }
    .cr-col-actions { grid-area: actions; align-self: center; }
}