/* ==========================================================================
   Market listing type theming — create & edit forms
   --------------------------------------------------------------------------
   The selected posting type is the form's colour theme. `data-ls-type` on the
   page section carries the active type; JS updates that one attribute on
   switch and every rule below follows from the tokens.

   Previously these colours were hardcoded ~58 times across create.blade.php
   and edit.blade.php (plus inline styles and a JS colour map), so retuning one
   type meant editing both files in several places.

   Each type now needs exactly two authored values — an accent and the ink that
   sits on it — and everything else (hover, tints, rings, borders, the darker
   ink used for accent text on a light surface) is derived with color-mix. That
   is what lets Site Settings → Marketplace type colors retheme the page:
   superusers overwrite the same eight :root vars, so the whole form follows a
   picked colour without any of these rules knowing about it.
   ========================================================================== */

/* ── Per-type palette ───────────────────────────────────────────────────────
   Defaults mirror config/market_listing_types.php. Admin overrides are emitted
   after this file by shared/_cat-theme-overrides.blade.php, which repeats these
   same var names at the same :root specificity so a later declaration wins. */
:root {
    --cp-ls-item: #3b71ca;
    --cp-ls-item-font: #ffffff;
    --cp-ls-service: #0dcaf0;
    --cp-ls-service-font: #00323d;
    --cp-ls-mod: #ffc107;
    --cp-ls-mod-font: #3d2c00;
    --cp-ls-request: #dc3545;
    --cp-ls-request-font: #ffffff;
}

[data-ls-type="item"] {
    --ls-accent: var(--cp-ls-item);
    --ls-accent-contrast: var(--cp-ls-item-font);
}

[data-ls-type="service"] {
    --ls-accent: var(--cp-ls-service);
    --ls-accent-contrast: var(--cp-ls-service-font);
}

[data-ls-type="mod"] {
    --ls-accent: var(--cp-ls-mod);
    --ls-accent-contrast: var(--cp-ls-mod-font);
}

[data-ls-type="request"] {
    --ls-accent: var(--cp-ls-request);
    --ls-accent-contrast: var(--cp-ls-request-font);
}

/* Derived steps. Kept as their own tokens so the mix ratios stay consistent
   across cards, headers, borders and rings rather than being retyped per rule. */
[data-ls-type] {
    --ls-accent-hover: color-mix(in srgb, var(--ls-accent) 86%, #000);
    --ls-glow: color-mix(in srgb, var(--ls-accent) 22%, transparent);
    --ls-ring-soft: color-mix(in srgb, var(--ls-accent) 20%, transparent);
    --ls-frame: color-mix(in srgb, var(--ls-accent) 80%, transparent);
    --ls-hairline: color-mix(in srgb, var(--ls-accent) 30%, transparent);

    /* The accent used as *text* on the page background. A picked colour can be
       far too light to read (amber was the original offender and carried its
       own hardcoded override), so accent ink is always mixed toward the
       theme's far end instead of using the raw swatch. */
    --ls-ink: color-mix(in srgb, var(--ls-accent) 74%, #000);

    /* Repoint the design system's accent at the active type. Everything built
       on these tokens — .btn-primary's gradient and bevel, accent links, focus
       chrome — follows the posting type without needing its own rule here, and
       keeps the 3D treatment a flat colour override would have flattened. */
    --cp-accent: var(--ls-accent);
    --cp-accent-strong: var(--ls-accent-hover);
    --cp-accent-ink: var(--ls-accent-contrast);
}

[data-cp-theme="dark"] [data-ls-type],
[data-ls-type][data-cp-theme="dark"] {
    --ls-ink: color-mix(in srgb, var(--ls-accent) 82%, #fff);
}

/* ── Type sections: only the active one is rendered ─────────────────────── */
[data-ls-type] .ls-type-section { display: none; }
[data-ls-type] .ls-type-section.ls-type-active { display: block; }

/* ── Cards: shared always-visible + the active type's detail card ─────────
   cp-discovery.css draws every .cp-content-card frame from --cp-card-cat and
   sets it on the card itself, so the type accent has to be re-declared there
   rather than inherited from the page section. */
[data-ls-type] .card.cp-content-card {
    --cp-card-cat: var(--ls-frame);
}

[data-ls-type] .ls-shared-card {
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow .2s;
    box-shadow: 0 4px 18px var(--ls-glow), 0 1px 4px rgba(0, 0, 0, .08);
}

/* The type-specific detail card matches the active type by definition, so it
   reads the same tokens instead of carrying its own per-type rules. */
[data-ls-type] .ls-type-card {
    box-shadow: 0 4px 18px var(--ls-glow), 0 1px 4px rgba(0, 0, 0, .08);
}

/* Section title bands. Solid accent with the type's own ink, plus the inset lip
   used by the rest of the design system's accent cards (011) so the title reads
   as stacked above the body.

   site.css forces `background-color: inherit !important` onto every un-themed
   .cp-content-card cap at specificity (0,4,0), so this must repeat its :not()
   guards to outrank it — and set `background-color`, since that beats the
   `background` shorthand when both are !important.

   Only .ls-card-header is themed, not every .card-header: the edit form's top
   card has a metadata cap (id, updated-at, saved-type badge) that has to stay
   neutral or the badge would vanish into a same-coloured band. The `.card`
   step is load-bearing — without it the selector drops to (0,3,0) and site.css
   wins. */
[data-ls-type] .card .ls-card-header:not([class*="bg-"]) {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-weight: 700;
    background-color: var(--ls-accent) !important;
    background-image: none !important;
    color: var(--ls-accent-contrast) !important;
    border-bottom-color: var(--ls-accent-hover) !important;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22) !important;
    transition: background-color .2s, color .2s;
}

/* Icons, badges and muted spans inside a themed band follow its ink — the
   header is a coloured surface, so text-muted / text-primary would drop out. */
[data-ls-type] .ls-card-header i,
[data-ls-type] .ls-card-header span,
[data-ls-type] .ls-card-header .text-muted,
[data-ls-type] .ls-card-header .text-primary {
    color: inherit !important;
}

/* Section dividers inside a themed card. Card *footers* deliberately keep the
   neutral hairline: site.css repaints those under [data-cp-theme="dark"] from a
   9-class selector, and out-specifying it would take a selector long enough to
   be its own maintenance problem for a divider nobody reads. */
[data-ls-type] .ls-shared-card .card-body > hr,
[data-ls-type] .ls-type-card .card-body > hr,
[data-ls-type] .ls-type-section > hr {
    border-color: var(--ls-hairline);
    opacity: 1;
}

/* ── Type selector buttons ──────────────────────────────────────────────── */
[data-ls-type] .ls-type-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

[data-ls-type] .ls-type-btn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: .55rem .75rem;
    border: 2px solid;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    font-weight: 600;
    font-size: .88rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* Each button always shows its OWN type's colour, not the active theme —
   that is what makes the group readable as a set of choices. The `--ls-btn-*`
   locals shadow the page tokens for the length of each button. */
[data-ls-type] .ls-type-btn[data-type="item"]    { --ls-btn: var(--cp-ls-item);    --ls-btn-contrast: var(--cp-ls-item-font); }
[data-ls-type] .ls-type-btn[data-type="service"] { --ls-btn: var(--cp-ls-service); --ls-btn-contrast: var(--cp-ls-service-font); }
[data-ls-type] .ls-type-btn[data-type="mod"]     { --ls-btn: var(--cp-ls-mod);     --ls-btn-contrast: var(--cp-ls-mod-font); }
[data-ls-type] .ls-type-btn[data-type="request"] { --ls-btn: var(--cp-ls-request); --ls-btn-contrast: var(--cp-ls-request-font); }

/* Unselected — filled with the type's colour */
[data-ls-type] .ls-type-btn {
    --ls-btn-hover: color-mix(in srgb, var(--ls-btn) 86%, #000);
    --ls-btn-ink: color-mix(in srgb, var(--ls-btn) 74%, #000);
    border-color: var(--ls-btn);
    background: var(--ls-btn);
    color: var(--ls-btn-contrast);
}

[data-cp-theme="dark"] [data-ls-type] .ls-type-btn {
    --ls-btn-ink: color-mix(in srgb, var(--ls-btn) 82%, #fff);
}

[data-ls-type] .ls-type-btn:not(.active):hover {
    background: var(--ls-btn-hover);
    border-color: var(--ls-btn-hover);
}

/* Active — outlined: body bg + coloured border + glow ring. The label uses the
   mixed ink, not the raw swatch, so a light pick stays legible in both themes. */
[data-ls-type] .ls-type-btn.active {
    background: var(--bs-body-bg);
    border-color: var(--ls-btn);
    color: var(--ls-btn-ink);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ls-btn) 35%, transparent),
        0 2px 8px color-mix(in srgb, var(--ls-btn) 20%, transparent);
}

/* ── Collapsible sections (Photos, Photo Album) ─────────────────────────────
   These use the shared cp-user-group component, whose `market` variant paints
   itself Marketplace green (via --cp-cat-trail in cp-form-chrome.css). Inside
   the listing form the posting type is the theme, so the accent wins here —
   scoped to [data-ls-type] so the component keeps its category colour
   everywhere else in the app. Overriding rather than repointing
   --cp-cat-trail, which is the Trails category colour used site-wide. */
[data-ls-type] .cp-user-group--market {
    border-color: color-mix(in srgb, var(--ls-accent) 45%, var(--cp-border)) !important;
}

[data-ls-type] .cp-user-group--market .cp-user-group__toggle {
    background: var(--ls-accent) !important;
    background-image: none !important;
    color: var(--ls-accent-contrast) !important;
    /* The shared rule hardcodes a white text-shadow, which turns unreadable
       against a light accent. The type's own ink already carries the contrast. */
    text-shadow: none !important;
}

/* cp-form-chrome.css paints the dark-theme header with an !important gradient
   from `html[data-cp-theme="dark"] .cp-user-group--market …`. Carry the same
   `html` + attribute shape so the accent outranks it instead of losing the
   header to a transparent background-color under the gradient. */
html[data-cp-theme="dark"] [data-ls-type] .cp-user-group--market .cp-user-group__toggle {
    background: var(--ls-accent) !important;
    background-image: none !important;
}

/* The chevron and count pill carry their own hardcoded white in the shared
   component; on the lighter accents (service cyan, mod amber) white is
   unreadable, so both follow the type's ink. */
[data-ls-type] .cp-user-group--market .cp-user-group__chevron {
    color: var(--ls-accent-contrast);
}

[data-ls-type] .cp-user-group--market .cp-user-group__count,
html[data-cp-theme="dark"] [data-ls-type] .cp-user-group--market .cp-user-group__count {
    color: var(--ls-accent-contrast);
    border-color: color-mix(in srgb, var(--ls-accent-contrast) 45%, transparent);
    background: color-mix(in srgb, var(--ls-accent-contrast) 16%, transparent);
}

/* ── Read-only saved-type badge (edit form header) ──────────────────────────
   Keyed off its own attribute, not the page theme: while an unsaved type
   switch is pending the badge must keep showing what is actually stored. */
.ls-type-badge[data-ls-badge-type="item"]    { background-color: var(--cp-ls-item);    color: var(--cp-ls-item-font); }
.ls-type-badge[data-ls-badge-type="service"] { background-color: var(--cp-ls-service); color: var(--cp-ls-service-font); }
.ls-type-badge[data-ls-badge-type="mod"]     { background-color: var(--cp-ls-mod);     color: var(--cp-ls-mod-font); }
.ls-type-badge[data-ls-badge-type="request"] { background-color: var(--cp-ls-request); color: var(--cp-ls-request-font); }

/* ── Focus rings follow the active type ─────────────────────────────────── */
[data-ls-type] .form-control:focus,
[data-ls-type] .form-select:focus {
    border-color: var(--ls-accent);
    box-shadow: 0 0 0 .25rem var(--ls-ring-soft);
}

[data-ls-type] .form-check-input:focus {
    border-color: var(--ls-accent);
    box-shadow: 0 0 0 .25rem var(--ls-ring-soft);
}

[data-ls-type] .form-check-input:checked {
    background-color: var(--ls-accent);
    border-color: var(--ls-accent);
}

/* Primary buttons (Add Photos, Create/Save) need no rules of their own —
   they render from --cp-accent, repointed above. */
/* ── Inline sub-fields, revealed by JS ──────────────────────────────────── */
[data-ls-type] #travel-radius-wrap,
[data-ls-type] #request-deadline-wrap,
[data-ls-type] #service-rate-wrap,
[data-ls-type] #mod-price-wrap,
[data-ls-type] #travel-radius-wrap-e,
[data-ls-type] #request-deadline-wrap-e,
[data-ls-type] #service-rate-wrap-e,
[data-ls-type] #mod-price-wrap-e { display: none; }

/* Accent symbols in the body — section markers and the icon on every radio,
   switch and contact tile label (previously text-info / text-warning /
   text-primary, hardcoded per section). Uses the mixed ink, not the raw
   swatch, so these stay readable on the page background in both themes. */
[data-ls-type] .ls-accent-icon { color: var(--ls-ink) !important; }

@media (prefers-reduced-motion: reduce) {
    [data-ls-type] .ls-shared-card,
    [data-ls-type] .ls-card-header,
    [data-ls-type] .ls-type-btn { transition: none; }
}