/* ==========================================================================
   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 on html:root /
   html[data-cp-theme] so a later, more specific 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; }

/* Every titled section on the create and edit forms is the shared collapsible
   (see below), so nothing here themes a plain .card any more. The one .card
   left on the edit form is the outer shell, whose cap carries the saved-type
   badge — it stays neutral on purpose, because an accent cap behind an accent
   badge makes the badge disappear. */

/* Section dividers inside a themed section. 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] .cp-user-group__content > 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 (every titled section on both forms) ──────────────
   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 {
    /* cp-card-chrome.css draws this shell's frame from --cp-card-accent and
       loads after this file, so repointing the token is what actually keeps the
       frame on the posting type — a border-color rule here would lose. The
       dark-mix opt-out keeps the frame on the raw accent so it matches the cap
       painted below instead of being darkened toward near-black. */
    --cp-card-accent: var(--ls-accent);
    --cp-card-accent-on: var(--ls-accent-contrast);
    --cp-card-accent-dark-mix: 100%;
}

[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;
    color: var(--ls-accent-contrast) !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);
}

/* ── Type badge (edit form header, browse cards, listing show) ──────────────
   Keyed off its own attribute rather than the page theme, for two reasons: on
   the edit form an unsaved type switch must still show what is actually
   stored, and on browse/show a list of mixed types has no single active theme.
   Deliberately outside [data-ls-type] so any page can render one. */
.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-type-btn { transition: none; }
}