/* Hazard Stripe theme: dark gym floor, chalk text, safety-yellow accent.
   Loaded after Pico; overrides Pico's dark-theme variables and adds app components. */

:root {
    --gt-bg: #17191C;
    --gt-bar: #0F1012;
    --gt-surface: #22252A;
    --gt-surface-2: #1A1C20;
    --gt-surface-hover: #272A30;
    --gt-border: #2E3238;
    --gt-border-strong: #3E434A;
    --gt-text: #ECEBE6;
    --gt-text-2: #C9CBC8;
    --gt-muted: #9EA3A8;
    --gt-accent: #F5C518;
    --gt-accent-hover: #FFD84D;
    --gt-ok: #7FDCA2;
    --gt-ok-bg: rgba(95, 208, 138, 0.14);
    --gt-bad: #FF9C8F;
    --gt-bad-bg: rgba(255, 138, 122, 0.14);

    --gt-font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --gt-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Pico variable overrides ---- */

[data-theme=dark] {
    --pico-font-family: var(--gt-font-body);
    --pico-font-family-sans-serif: var(--gt-font-body);
    --pico-border-radius: 6px;

    --pico-background-color: var(--gt-bg);
    --pico-color: var(--gt-text);
    --pico-h1-color: var(--gt-text);
    --pico-h2-color: var(--gt-text);
    --pico-h3-color: var(--gt-text);
    --pico-h4-color: var(--gt-text);
    --pico-h5-color: var(--gt-text);
    --pico-h6-color: var(--gt-text);
    --pico-muted-color: var(--gt-muted);
    --pico-muted-border-color: var(--gt-border);

    --pico-primary: var(--gt-accent);
    --pico-primary-background: var(--gt-accent);
    --pico-primary-border: var(--gt-accent);
    --pico-primary-underline: rgba(245, 197, 24, 0.5);
    --pico-primary-hover: var(--gt-accent-hover);
    --pico-primary-hover-background: var(--gt-accent-hover);
    --pico-primary-hover-border: var(--gt-accent-hover);
    --pico-primary-hover-underline: var(--gt-accent-hover);
    --pico-primary-focus: rgba(245, 197, 24, 0.35);
    --pico-primary-inverse: var(--gt-bg);

    --pico-secondary: var(--gt-text-2);
    --pico-secondary-background: var(--gt-surface);
    --pico-secondary-border: var(--gt-border-strong);
    --pico-secondary-underline: var(--gt-border-strong);
    --pico-secondary-hover: var(--gt-accent);
    --pico-secondary-hover-background: var(--gt-surface);
    --pico-secondary-hover-border: var(--gt-accent);
    --pico-secondary-hover-underline: var(--gt-accent);
    --pico-secondary-focus: rgba(245, 197, 24, 0.25);
    --pico-secondary-inverse: var(--gt-text);

    --pico-card-background-color: var(--gt-surface);
    --pico-card-border-color: var(--gt-border);
    --pico-card-sectioning-background-color: var(--gt-surface-2);

    --pico-form-element-background-color: var(--gt-surface-2);
    --pico-form-element-selected-background-color: var(--gt-surface-hover);
    --pico-form-element-border-color: var(--gt-border-strong);
    --pico-form-element-active-background-color: var(--gt-surface-2);
    --pico-form-element-active-border-color: var(--gt-accent);
    --pico-form-element-focus-color: rgba(245, 197, 24, 0.35);

    --pico-table-border-color: var(--gt-border);
    --pico-ins-color: var(--gt-ok);
    --pico-del-color: var(--gt-bad);

    --pico-dropdown-background-color: var(--gt-surface);
    --pico-dropdown-border-color: var(--gt-border);
    --pico-dropdown-color: var(--gt-text);
    --pico-dropdown-hover-background-color: var(--gt-surface-hover);
}

body {
    background: var(--gt-bg);
}

/* ---- Typography ---- */

h1, h2 {
    font-family: var(--gt-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 1.9rem); }

button,
[role=button],
input[type=submit],
input[type=button],
input[type=reset] {
    font-family: var(--gt-font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow {
    margin: 0;
    font-family: var(--gt-font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gt-muted);
}

.muted { color: var(--gt-muted); }

/* ---- Site header ---- */

.site-header {
    background: var(--gt-bar);
    margin-bottom: 1.75rem;
}

.site-header nav a { text-decoration: none; }

.brand {
    font-family: var(--gt-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gt-accent);
}

.brand:hover { color: var(--gt-accent-hover); }

.nav-links a,
.nav-menu summary {
    font-family: var(--gt-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gt-text-2);
}

.nav-links a:hover { color: var(--gt-accent); }

.hazard-stripe {
    height: 6px;
    background: repeating-linear-gradient(-45deg, var(--gt-accent) 0 10px, var(--gt-bar) 10px 20px);
}

.brand-short { display: none; }
.nav-menu { display: none; }

@media (max-width: 767px) {
    .brand-full { display: none; }
    .brand-short { display: inline; }
    .nav-links { display: none; }
    .nav-menu { display: flex; }
}

/* ---- Flash messages ---- */

.flashes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.35rem 0.35rem 0.9rem;
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid rgba(245, 197, 24, 0.4);
    border-radius: 6px;
}

.flash-close {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--gt-text);
}

.flash-close:hover,
.flash-close:focus { background: rgba(245, 197, 24, 0.15); }

/* ---- Page hero (gym name, actions) ---- */

.page-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}

.page-hero h1 { margin: 0.4rem 0 0; }
.page-hero p { margin: 0; }
.hero-address { margin-top: 0.6rem !important; color: var(--gt-text-2); }
.hero-meta { font-size: 0.85rem; color: var(--gt-muted); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hero-actions [role=button] { margin: 0; }

/* ---- Category sections ---- */

.category { margin-bottom: 2.25rem; }

.category-heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.category-heading .count {
    font-family: var(--gt-font-body);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gt-muted);
}

.alt-names { color: var(--gt-muted); font-weight: 400; }

/* ---- Status pills and feature chips ---- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pill-present { background: var(--gt-ok-bg); color: var(--gt-ok); }
.pill-absent { background: var(--gt-bad-bg); color: var(--gt-bad); }

.features {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.features div {
    display: flex;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--gt-surface-2);
    font-size: 0.85rem;
}

.features dt { color: var(--gt-muted); font-weight: 400; margin: 0; }
.features dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---- Gym equipment table (cards on phones) ---- */

.table-box {
    overflow-x: auto;
    background: var(--gt-surface);
    border: 1px solid var(--gt-border);
    border-radius: 8px;
}

.equipment-table {
    margin: 0;
}

.equipment-table th,
.equipment-table td {
    background: transparent;
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

.equipment-table th {
    font-family: var(--gt-font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gt-muted);
}

.equipment-table tbody tr:last-child td { border-bottom: 0; }
.equipment-table tbody tr:hover td { background: var(--gt-surface-hover); }

.eq-name strong { font-weight: 600; font-size: 1.05rem; }

.eq-actions {
    text-align: right;
    white-space: nowrap;
}

.eq-actions form {
    display: inline;
    margin: 0;
}

.eq-actions [role=button],
.eq-actions button {
    margin: 0 0 0 0.35rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
    width: auto;
}

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

@media (max-width: 767px) {
    .table-box {
        overflow: visible;
        background: none;
        border: 0;
    }

    .equipment-table,
    .equipment-table tbody,
    .equipment-table tr,
    .equipment-table td {
        display: block;
    }

    .equipment-table thead { display: none; }

    .equipment-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .equipment-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name status"
            "details details"
            "actions actions";
        gap: 0.75rem;
        padding: 0.9rem;
        background: var(--gt-surface);
        border: 1px solid var(--gt-border);
        border-radius: 8px;
    }

    .equipment-table td {
        padding: 0;
        border: 0;
    }

    .equipment-table tbody tr:hover td { background: transparent; }

    .eq-name { grid-area: name; }
    .eq-status { grid-area: status; }
    .eq-details { grid-area: details; }
    .eq-details:has(> .muted) { display: none; }

    .eq-actions {
        grid-area: actions;
        display: flex;
        gap: 0.5rem;
        text-align: left;
    }

    .eq-actions > *,
    .eq-actions form button {
        flex: 1;
        width: 100%;
        margin: 0;
    }

    .eq-actions [role=button],
    .eq-actions button {
        min-height: 44px;
        margin: 0;
    }

    .hero-actions { width: 100%; }
    .hero-actions [role=button] { flex: 1; }
}

/* ---- Equipment catalogue list ---- */

.equipment-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.5rem;
}

.equipment-list li {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0.9rem;
    background: var(--gt-surface);
    border: 1px solid var(--gt-border);
    border-radius: 6px;
}

.equipment-list a {
    font-weight: 600;
    color: var(--gt-text);
    text-decoration: none;
}

.equipment-list a:hover { color: var(--gt-accent); }

/* ---- Add-equipment card ---- */

.add-equipment h2 { margin-bottom: 1rem; }

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.feature-row input,
.feature-row > button { margin: 0; }

.feature-hint {
    grid-column: 1 / -1;
    color: var(--gt-muted);
}

.feature-error {
    grid-column: 1 / -1;
    color: var(--gt-bad);
}

.link-button,
.link-button:hover,
.link-button:focus {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--gt-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.feature-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.feature-suggestions small { color: var(--gt-muted); }

.feature-chip {
    width: auto;
    margin: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
}

/* Searchable equipment dropdown (Tom Select), styled to match Pico's inputs */

.ts-wrapper {
    --ts-pr-caret: 2.5rem;
    margin-bottom: var(--pico-spacing);
}

.ts-wrapper + small {
    display: block;
    margin-top: calc(var(--pico-spacing) * -0.75);
    margin-bottom: var(--pico-spacing);
    color: var(--pico-muted-color);
}

.ts-wrapper .ts-control,
.ts-wrapper.single.input-active .ts-control {
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-form-element-background-color) var(--pico-icon-chevron) no-repeat right 0.75rem center / 1rem auto;
}

/* Keep the chosen item and the search input on one line */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }

.ts-wrapper.single .ts-control > .item {
    flex: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-wrapper.single.has-items .ts-control > input {
    flex: 1 1 0;
    min-width: 0;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--pico-form-element-active-border-color);
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

.ts-wrapper.invalid .ts-control { border-color: var(--gt-bad); }

.ts-dropdown,
.ts-control,
.ts-control input {
    color: var(--pico-form-element-color);
    font-size: 1rem;
    line-height: var(--pico-line-height);
}

.ts-control > input {
    height: auto;
    color: var(--pico-form-element-color);
}

.ts-control > input::placeholder { color: var(--pico-form-element-placeholder-color); }

.ts-dropdown {
    margin-top: 0.25rem;
    border: var(--pico-border-width) solid var(--gt-border-strong);
    border-radius: var(--pico-border-radius);
    background: var(--gt-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.ts-dropdown-content { max-height: 18rem; }

.ts-dropdown .option,
.ts-dropdown .no-results { padding: 0.5rem 0.75rem; }

.ts-dropdown .optgroup + .optgroup { border-top: 1px solid var(--gt-border); }

.ts-dropdown .optgroup-header {
    padding: 0.5rem 0.75rem 0.25rem;
    background: var(--gt-surface);
    color: var(--gt-accent);
    font-family: var(--gt-font-display);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ts-dropdown .active {
    background: var(--gt-surface-hover);
    color: var(--gt-text);
}

.ts-dropdown [data-selectable] .highlight {
    background: rgba(245, 197, 24, 0.25);
    color: inherit;
}

.ts-dropdown .no-results { color: var(--gt-muted); }

.ts-aliases { color: var(--gt-muted); }

@media (max-width: 767px) {
    .feature-row { grid-template-columns: 1fr 1fr; }
    .feature-row > button { grid-column: 1 / -1; }
}

/* ---- Footer ---- */

.site-footer {
    margin-top: 2rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--gt-border);
    color: var(--gt-muted);
}