/* Tile insides, one copy. Cars on Site and the parts catalogue both load this.
   Order matches the old cascade: the base, then the phone and tablet row, then Day colours,
   then the label treatment that used to sit at the end of cars-redesign.css.
   Grid and Compact placement stays in cars-views-settings.css and cars-layout-polish.css. */

.badge-category { font-weight: 600; align-self: flex-end; width: 70%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-jobs .kw-sc-ok { --sc: var(--ok); }
.kw-jobs .kw-sc-warn { --sc: var(--warn); }
.kw-jobs .kw-sc-info { --sc: var(--info); }
.kw-jobs .kw-sc-bad { --sc: var(--bad); }
.kw-jobs .kw-example-cat { background: #3b82f6; color: #fff; }
/* Example tiles match the real card: 14px corners, and the category chip shares the status pill's right edge. */
.kw-jobs > .card { border-radius: var(--radius-lg); }
.kw-jobs .card > div > .flex-shrink-0.ml-2 > .badge-category { grid-column: 1 / -1; justify-self: end; width: auto; }
/* Same badge metrics as cars-on-site.css. Scoped so this sheet can load after the theme without moving that rule. */
.kw-jobs .badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 9999px; }
/* Fault-code count under the status / category pills (cars-cards.js dtcTag): small text, no pill, so the pill column keeps its look. */
.tile-dtc { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit; text-decoration: underline dotted; text-underline-offset: 2px; font-size: 0.68rem; line-height: 1.2; font-weight: 600; color: var(--text-2, #9ca3af); white-space: nowrap; }
.tile-dtc-none { opacity: .6; font-weight: 400; }
.tile-dtc:hover, .tile-dtc:focus-visible { color: var(--text, #fff); }
/* Status pill on top; the DTC count beside the category, so the column is no taller than before and the issue does not move. */
#cars-grid .card > div > .flex-shrink-0.ml-2 { display: grid; grid-template-columns: auto auto; justify-content: end; justify-items: end; align-items: center; column-gap: 6px; row-gap: 4px; }
#cars-grid .card > div > .flex-shrink-0.ml-2 > .quick-edit { grid-column: 1 / -1; }
#cars-grid .card .tile-dtc:last-child { grid-column: 1 / -1; }   /* no category: the count sits under the status */
html:not(.cos-grid) #cars-grid .card .tile-dtc + .badge-category { width: auto; padding-left: 12px; padding-right: 12px; }
.meta-highlight { font-size: 0.9rem; font-weight: 600; color: #FFD700; }
.gold-divider {
    width: 2px;
    background: linear-gradient(to bottom, transparent, #FFD700, transparent);
    align-self: stretch;
    margin: 0 12px;
    flex-shrink: 0;
}
.tile-row { font-size: 0.9rem; line-height: 1.5; }
.reg-row { font-size: 1.05rem; }
.issue-row { font-size: 0.9rem; }
.issue-row .label-bold { font-size: 1rem; }
.label-bold { font-weight: 600; color: #FFD700; font-size: inherit; margin-right: 2px; }
.value-normal {
    font-weight: 400;
    color: #ffffff;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.reg-text { user-select: text; cursor: text; font-weight: 700; letter-spacing: 0.5px; }
.copy-reg { margin-left: 6px; color: #888; font-size: 0.8rem; padding: 2px 4px; border-radius: 4px; vertical-align: middle; }
.copy-reg:hover { color: #FFD700; background: #262626; }
/* Vehicle status pill (colours live in STATUS_COLORS in cars-utils.js) */
.status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
    padding: 3px 11px; border-radius: 9999px; white-space: nowrap; line-height: 1.3;
    color: color-mix(in srgb, var(--sc) 70%, #fff);
    background: color-mix(in srgb, var(--sc) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc) 50%, transparent);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); flex-shrink: 0; }
/* Footer row: people + tags | due (centred) | days on site */
.card-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-size: 0.75rem; }
.people { font-size: 0.95rem; }
.people-label { font-weight: 700; color: #FFD700; }
.people-name { font-weight: 600; color: #fff; }
.tech-pill { display: inline-block; font-weight: 600; padding: 1px 10px; border-radius: 9999px; }
.footer-due { text-align: center; }
/* Due date (centred in the footer row) */
.due-line { text-align: center; font-size: 0.9rem; font-weight: 600; color: #ddd; white-space: nowrap; }

/* Phone and tablet: the issue takes the next line, so the status and category are not squeezed onto it. */
@media (max-width: 1023.98px) {
    :where(#cars-grid) .card > .flex:first-child { flex-wrap: wrap; gap: 8px; }
    :where(#cars-grid) .card > .flex:first-child > .gold-divider { display: none; }
    :where(#cars-grid) .card > .flex:first-child > .flex-shrink-0:first-child { flex: 1 1 auto; min-width: 0; }
    :where(#cars-grid) .card > .flex:first-child > .issue-row { order: 3; flex: 1 1 100%; }
    .tile-row, .issue-row, .issue-row .label-bold { font-size: 15px; }
    .card-footer { grid-template-columns: 1fr; gap: 8px; font-size: 14px; }
    .card-footer > .text-right { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; }
    .card-footer .people { font-size: 14px; }
    .kw-jobs .badge { font-size: 12px; }
}

/* Day (and Pink, which is also theme-light). Same declarations as the old cars-theme.css tile lines. */
html.theme-light .label-bold, html.theme-light .people-label { color: var(--l-gold); }
html.theme-light .value-normal, html.theme-light .people-name { color: var(--l-text); }
html.theme-light .meta-highlight { color: var(--l-gold); }
html.theme-light .gold-divider { background: linear-gradient(to bottom, transparent, var(--l-gold-line), transparent); }
html.theme-light .status-badge { color: color-mix(in srgb, var(--sc) 60%, #000); background: color-mix(in srgb, var(--sc) 14%, #fff); border-color: color-mix(in srgb, var(--sc) 55%, #fff); }
html.theme-light .due-line { color: #374151; }

/* The word "Reg" stays for screen readers. Model is the muted label.
   Flagged cars draw the same tile outside #cars-grid (#pf-list). */
#cars-grid .reg-row .label-bold,
#pf-list .reg-row .label-bold { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#cars-grid .reg-row + .tile-row .label-bold,
#pf-list .reg-row + .tile-row .label-bold { color: var(--text-2); }