/* ============================================================================
   Trecker design-system canonical layer
   Loaded last so these rules win over trecker-components.css,
   trecker-v2-bridge.css, and Bootstrap without page markup changes.
   All NEW component CSS belongs here or in a scoped .razor.css file, never in
   the legacy stylesheets.
   ============================================================================ */

/* Contrast-safe primitive repaint: colors only; legacy geometry is preserved. */
.TreckerButtonPrimary {
    background: var(--trecker-accent-solid);
    color: var(--trecker-on-accent);
    border-color: var(--trecker-accent-solid);
}

.TreckerButtonPrimary:hover:not(:disabled) {
    background: var(--trecker-accent-hover);
    color: var(--trecker-on-accent);
    border-color: var(--trecker-accent-hover);
}

.TreckerButtonDanger {
    background: var(--trecker-danger-solid);
    color: var(--trecker-on-danger);
    border-color: var(--trecker-danger-solid);
}

.TreckerButtonDanger:hover:not(:disabled) {
    background: var(--trecker-danger-solid);
    color: var(--trecker-on-danger);
    border-color: var(--trecker-danger-solid);
}

.TreckerButtonWarning {
    background: var(--trecker-warning-solid);
    color: var(--trecker-on-warning);
}

.TreckerButtonSuccess {
    background: var(--trecker-success-bg);
    color: var(--trecker-success);
    border: 1px solid var(--trecker-success);
}

.TreckerButtonSecondary {
    background: var(--trecker-bg-secondary);
    color: var(--trecker-text-primary);
    border-color: var(--trecker-border);
}

.TreckerButtonGhost {
    background: transparent;
    color: var(--trecker-text-primary);
    border-color: var(--trecker-border);
}

.TreckerBadgeSuccess,
.TreckerBadge-success {
    background: var(--trecker-success-bg);
    color: var(--trecker-success);
    border: 1px solid var(--trecker-success);
}

.TreckerBadgeWarning,
.TreckerBadge-warning {
    background: var(--trecker-warning-bg);
    color: var(--trecker-warning-solid);
    border: 1px solid var(--trecker-warning-solid);
}

.TreckerBadgeInfo,
.TreckerBadge-info {
    background: var(--trecker-info-bg);
    color: var(--trecker-info);
    border: 1px solid var(--trecker-info);
}

.TreckerBadgeDanger,
.TreckerBadge-danger {
    background: var(--trecker-danger-bg);
    color: var(--trecker-danger-solid);
    border: 1px solid var(--trecker-danger-solid);
}

/* Keyboard-accessibility baseline. Outlines remain enabled everywhere. */
.TreckerButton:focus-visible,
.TreckerInput:focus-visible,
.TreckerSelect:focus-visible,
.TreckerTextarea:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--trecker-accent-solid);
    outline-offset: 2px;
}

/* Touch sizing includes browser touch UIs and Android/iOS MAUI WebViews. */
@media (pointer: coarse) {
    .TreckerButton,
    .TreckerInput,
    .TreckerSelect,
    .tds-touch {
        min-height: var(--trecker-touch-target);
        min-width: var(--trecker-touch-target);
    }
}

/* .TreckerCheckbox — <label> wrapper around <input type="checkbox"> + <span>text</span>, used
   across the Shared project. Was completely unstyled (relying on default inline layout); this
   only formalizes the row the markup already visually implies (checkbox, gap, text) — no
   colour/size change and no reposition of the reading order. The 18x18px checkbox glyph itself
   (trecker-base.css) is untouched. Scoped to the <label> element specifically so it never
   matches the one place in the repo where .TreckerCheckbox sits on the bare <input> itself
   (AdminPublishControl.razor) — that usage is unaffected by every rule below. */
label.TreckerCheckbox {
    display: inline-flex;
    align-items: center;
    gap: var(--trecker-space-sm);
    cursor: pointer;
}

/* Coarse-pointer touch targets for checkbox/radio controls. The 18x18px checkbox glyph itself
   stays put — enlarging the glyph would look broken — but clicking anywhere on its <label>
   already toggles the checkbox, so growing the LABEL's row to the touch-target minimum gives a
   real >=44px tap target without changing what the control looks like.
   No shared design-system class exists yet for radio-label wrappers (repository search: every
   page currently rolls its own local class, e.g. gcl-radio/agc-link-radio/fat-pw-mode) — extend
   this same label.TreckerCheckbox pattern to one if/when such a shared class is introduced. */
@media (pointer: coarse) {
    label.TreckerCheckbox {
        min-height: var(--trecker-touch-target);
    }

    /* Opt-in helper for a BARE checkbox/radio with no label wrapper to enlarge: pads the hit
       area and offsets it with an equal negative margin (so surrounding layout doesn't shift)
       instead of resizing the 18x18px glyph. Apply directly on the input, e.g.
       <input type="checkbox" class="tds-touch-inline" />. */
    .tds-touch-inline {
        padding: calc((var(--trecker-touch-target) - 18px) / 2);
        margin: calc((18px - var(--trecker-touch-target)) / 2);
    }
}

/* Approved pairings and measured contrast ratios:
   text-primary/bg-primary 16.6:1;
   text-secondary/bg-primary 7.2:1;
   text-tertiary/bg-card 4.6:1 (meta text only);
   accent-solid/on-accent 7.3:1 dark and 6.2:1 light;
   danger-solid/on-danger 4.77:1. */
.tds-surface-1 {
    background: var(--trecker-bg-primary);
    color: var(--trecker-text-primary);
}

.tds-surface-2 {
    background: var(--trecker-bg-secondary);
    color: var(--trecker-text-primary);
}

.tds-surface-3 {
    background: var(--trecker-bg-card);
    color: var(--trecker-text-primary);
}

.tds-text-secondary {
    color: var(--trecker-text-secondary);
}

.tds-text-tertiary {
    color: var(--trecker-text-tertiary);
}

@keyframes tdsShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.tds-skeleton {
    background: linear-gradient(
        90deg,
        var(--trecker-bg-secondary) 25%,
        var(--trecker-bg-tertiary) 37%,
        var(--trecker-bg-secondary) 63%
    );
    background-size: 400% 100%;
    animation: tdsShimmer 1.4s ease infinite;
    border-radius: var(--trecker-border-radius);
}

@media (prefers-reduced-motion: reduce) {
    .tds-skeleton {
        animation: none;
    }
}

/* Reserve media space before its content loads to prevent layout shift. */
.tds-media {
    --tds-aspect: 16 / 9;
    aspect-ratio: var(--tds-aspect);
    width: 100%;
    object-fit: cover;
    background: var(--trecker-bg-secondary);
}

.tds-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}