/* Alpine.js - prevent flash of unstyled content */
[x-cloak] {
    display: none !important;
}

::selection {
    background-color: rgba(var(--tblr-primary-rgb), 0.7);
    color: inherit;
}

input[readonly],
textarea[readonly],
select[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Disable Tabler's CSS filter hack for logos - we use proper logo switching instead */
.navbar-brand-autodark .navbar-brand-image {
    filter: none !important;
}

[data-bs-theme="dark"] .navbar-brand-autodark .navbar-brand-image,
[data-bs-theme="light"] .navbar-brand-autodark .navbar-brand-image {
    filter: none !important;
}

/* ==========================================================================
   WCAG 2.1 AA contrast — status/semantic colours (shared by client + cart)
   The Tabler status palette (used via `badge badge-outline text-{color}` and
   bare text-{color}) fails 4.5:1 on one surface or the other: dark-saturated
   hues fail on the dark theme, bright hues fail on the light theme. Each value
   is the original hue lifted/darkened to clear 4.5:1 (WCAG relative-luminance,
   computed). badge-outline borders use currentColor so they follow the text.
   Only the genuinely-failing hues are overridden.
   ========================================================================== */

/* Dark mode — brighten the dark-saturated hues (failed on gray-800 #1f2937). */
[data-bs-theme="dark"] .text-blue   { color: #4dabf7 !important; } /* 2.94 -> 5.93 */
[data-bs-theme="dark"] .text-red    { color: #ff6b6b !important; } /* 3.15 -> 5.29 */
[data-bs-theme="dark"] .text-purple { color: #da77f2 !important; } /* 3.03 -> 5.52 */
[data-bs-theme="dark"] .text-pink   { color: #f783ac !important; } /* 3.18 -> 6.15 */
[data-bs-theme="dark"] .text-indigo { color: #829efc !important; } /* 2.95 -> 5.76 */
[data-bs-theme="dark"] .text-secondary { color: #c3cbd6 !important; } /* gray-700 surface 4.06 -> */
[data-bs-theme="dark"] .badge.badge-outline.text-secondary { color: #c3cbd6 !important; border-color: #c3cbd6 !important; }

/* Light mode — darken the bright hues (failed on #f9fafb). */
[data-bs-theme="light"] .text-green  { color: #2f8132 !important; } /* 2.63 -> 4.67 */
[data-bs-theme="light"] .text-orange { color: #c9400a !important; } /* 2.91 -> 4.76 */
[data-bs-theme="light"] .text-cyan   { color: #0b7285 !important; } /* 2.91 -> 5.34 */
[data-bs-theme="light"] .text-yellow { color: #856404 !important; } /* 2.04 -> 5.26 */
[data-bs-theme="light"] .text-teal   { color: #0b7561 !important; } /* 2.98 -> 5.39 */
[data-bs-theme="light"] .text-lime   { color: #4c7a0a !important; } /* 2.33 -> 4.91 */
[data-bs-theme="light"] .text-red    { color: #c92a2a !important; } /* 4.46 -> 5.22 */

/* Invoice items tooltip: widen + left-align item list */
.tooltip.invoice-items-tooltip .tooltip-inner {
    max-width: 360px;
    text-align: left;
}
[data-bs-theme="light"] .text-pink   { color: #c2255c !important; } /* 4.42 -> 5.41 */

/* ==========================================================================
   Choice cards — radio-as-cards presentation for single-choice product
   options (OptionChoice.display === 'radio'). The radio input carries the
   state; CSS does all the visuals via :checked. Shared by cart + client area.
   Per-choice customization hooks: [data-option="slug"] on the group,
   [data-value="choice"] on each card.
   ========================================================================== */
.bz-choice-cards {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.bz-choice-card {
    flex: 1 1 9rem;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}
.bz-choice-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.bz-choice-card__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    padding: .75rem 1rem;
    border: 2px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    transition: border-color .12s ease, background-color .12s ease;
}
.bz-choice-card:hover .bz-choice-card__body {
    border-color: var(--tblr-secondary);
}
.bz-choice-card__input:checked + .bz-choice-card__body {
    border-color: var(--tblr-success);
    background-color: rgba(var(--tblr-success-rgb), .08);
}
.bz-choice-card__input:focus-visible + .bz-choice-card__body {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}
.bz-choice-card__title {
    font-weight: 600;
    line-height: 1.2;
}
.bz-choice-card__price {
    font-size: .8125rem;
    color: var(--tblr-secondary);
}