/*
 * utilities.css — small, opinionated utility classes that replace the
 * style="..." attributes the templates used to ship with. We removed
 * those because the Content-Security-Policy now uses style-src with a
 * per-request nonce and no 'unsafe-inline', which means inline-style
 * attributes are blocked by the browser. CSS-Nonce only covers <style>
 * BLOCKS, not the style="..." ATTRIBUTE — there is no per-attribute
 * nonce in the CSP spec — so every visual tweak that used to live in an
 * attribute now lives here as a class.
 *
 * Naming is deliberately boring: u-<purpose>-<value> for layout; for
 * page-specific helpers we prefix with the page name (e.g. .freeship-fill,
 * .role-card). Keep this file tiny — anything that appears in three or
 * more templates earns a class; one-offs stay as a nonced <style> block
 * inside the template.
 */

/* ----- form widgets that need to flow inline ----- */
.u-form-inline { display: inline; }

/* ----- visually-hidden (a11y SR-only) — used to be inline absolute ----- */
.u-sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- text/decoration helpers ----- */
.u-text-uppercase { text-transform: uppercase; }
.u-text-center    { text-align: center; }

/* Soft success / danger inline labels (used in cart, checkout). Match the
   colour palette already documented in main.css. */
.u-text-success { color: #0a7d2c; }
.u-text-danger  { color: #b00020; }
.u-text-muted   { color: #6b7280; }

/* ----- spacing helpers ----- */
.u-mt-1   { margin-top: .25rem; }
.u-mt-2   { margin-top: .5rem; }
.u-mt-3   { margin-top: 1rem; }
.u-mt-4   { margin-top: 1.5rem; }
.u-mt-5   { margin-top: 2rem; }
.u-mb-1   { margin-bottom: .25rem; }
.u-mb-3   { margin-bottom: 1rem; }
.u-my-2   { margin-block: .5rem; }
.u-my-3   { margin-block: 1rem; }

/* The "or" divider between login methods — visible label, faint colour.
   Used in account_login.html. */
.u-or-divider {
    text-align: center;
    margin: 1rem 0;
    color: var(--muted);
}

/* ----- explicit fixed widths (only used inside admin tables) ----- */
.u-w-4em { width: 4em; }
.u-w-5em { width: 5em; }
.u-w-6em { width: 6em; }

/* ----- layout helpers ----- */
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }

.u-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.u-row-end {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: end;
}
.u-flex-1     { flex: 1; }
.u-flex-2     { flex: 2; }
.u-min-200    { min-width: 200px; }
.u-min-110    { min-width: 110px; }
.u-min-140    { min-width: 140px; }

/* Disabled-look wrapper used in cart for an out-of-stock item. */
.u-locked {
    pointer-events: none;
    opacity: .55;
}

/* ----- the passkey "create one" prompt that floats over the dashboard ----- */
.passkey-prompt {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    max-width: 32rem;
    margin-inline: auto;
    padding: 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    z-index: 50;
}
.passkey-prompt strong { display: block; margin-bottom: .25rem; }
.passkey-prompt p { margin: .25rem 0; }
.passkey-prompt p + p { margin: .5rem 0 0; }

/* ----- staff-invite landing card ----- */
.staff-accept-card {
    max-width: 520px;
    margin: 48px auto;
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.staff-accept-card h1,
.staff-accept-card h2,
.staff-accept-card p:first-of-type { margin-top: 0; }
.staff-accept-card .meta {
    margin: 16px 0;
    padding: 14px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 14px;
}

/* ----- admin email-template error list ----- */
.tmpl-error-heading {
    margin: 0 0 8px;
    font-size: 1rem;
}
.tmpl-error-list {
    margin: 0;
    padding-inline-start: 20px;
}

/* ----- admin countries-form helpers ----- */
.country-checkbox {
    display: inline-block;
    margin-inline-end: 0.5em;
}

/* ----- admin countries cards (replaces the old wide table) -----
   Each country renders as an <article class="country-card"> with a
   labelled <form>. The list uses role="list" so VoiceOver/NVDA still
   announce item count after the visual list-style is stripped. */
.country-card-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}
.country-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    box-shadow: var(--glass-shadow);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.country-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    margin: 0;
}
.country-card__title {
    margin: 0;
    font-size: 1.15rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.country-card__code {
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.1em 0.45em;
    border-radius: 0.35em;
    background: rgba(0, 0, 0, 0.06);
    letter-spacing: 0.05em;
}
.country-card__currency {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted, #555);
}
.country-card__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.country-card__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.country-card__field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.country-card__field label {
    font-size: 0.9rem;
    font-weight: 600;
}
.country-card__field input {
    width: 100%;
    box-sizing: border-box;
}
.country-card__fieldset {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
}
.country-card__fieldset legend {
    padding: 0 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}
.country-card__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0.35rem;
}
.country-card__methods .country-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-inline-end: 0;
    padding: 0.25em 0.5em;
    border-radius: 0.4em;
    background: rgba(0, 0, 0, 0.03);
}
.country-card__active .country-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
}
.country-card__active {
    margin: 0;
}
.country-card__actions {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

/* ----- audience analytics dashboard ----- */
.analytics-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.analytics-range {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.analytics-range__btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.analytics-range__btn.is-active {
    background: var(--primary, #c8472a);
    color: #fff;
    border-color: transparent;
}
.analytics-window {
    margin: 0;
    color: var(--muted, #555);
    font-size: 0.95rem;
}
.analytics-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    padding: 1rem 1.25rem;
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.kpi-card__label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted, #555);
}
.kpi-card__value {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
}
.kpi-card__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted, #777);
}
.analytics-chart {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.analytics-chart h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}
.analytics-chart__bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 8rem;
}
.analytics-chart__bar {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 4px;
}
.analytics-chart__bar-fill {
    width: 100%;
    /* Height is set per-bar via a nonced <style> block in admin_analytics.html.
       Default 0% guarantees the column stays at zero if the inline block is
       blocked by CSP. */
    height: 0%;
    background: linear-gradient(to top, var(--primary, #c8472a), color-mix(in srgb, var(--primary, #c8472a) 60%, transparent));
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s ease-out;
}
.analytics-chart__legend {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--muted, #777);
}
.analytics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    margin-bottom: 1.5rem;
}
.analytics-panel {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-soft);
    padding: 1rem 1.25rem;
    box-shadow: var(--glass-shadow);
}
.analytics-panel h2 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}
.analytics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.analytics-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--border);
}
.analytics-list li:last-child {
    border-bottom: none;
}
.analytics-list__k {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-list__v {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.analytics-footer {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--muted, #666);
}
.analytics-warning {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-inline-start: 3px solid #d97706;
    background: color-mix(in srgb, #d97706 8%, transparent);
    border-radius: 0.35rem;
}

/* ----- admin role card colour bar (set via nonced <style>) -----
   The `.role-card[data-color]` selector matches each card; the actual
   colour string is emitted in a nonced <style> block at the top of
   admin_roles.html so it's CSP-safe. */
.role-card { border-inline-start: 4px solid transparent; }

/* ----- cart's free-shipping progress bar ----- */
.freeship-fill { width: 0; }   /* base; the actual % is set per-render. */

/* ----- admin breadcrumb / staff section spacing ----- */
.u-section { margin-top: 32px; }