/* ============================================================================
   GolfStax UI System — gsx-* primitives
   Purpose:
   Shared visual/control primitives for cards, buttons, tables, forms, modals,
   toolbars, status pills, KPI cells, empty states, tabs, and page shells.
   This file is the normalization layer. Page-specific CSS should compose these
   classes instead of creating new visual patterns.
   ============================================================================ */

.gsx-page {
    min-height: 100vh; min-height: 100dvh;
    background: var(--gsx-bg);
    color: var(--gsx-text);
}

.gsx-page-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.gsx-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.gsx-page-title {
    margin: 0;
    color: var(--gsx-text);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
}

.gsx-page-subtitle {
    margin: var(--space-1-5) 0 0;
    color: var(--gsx-text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.gsx-workspace {
    display: grid;
    gap: var(--space-4);
}

.gsx-section {
    display: grid;
    gap: var(--space-3);
}

.gsx-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gsx-stack-gap, 0.75rem);
}

.gsx-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gsx-inline-gap, 0.5rem);
}

.gsx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--gsx-grid-gap, 1rem);
}

.gsx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.gsx-toolbar-left,
.gsx-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gsx-toolbar-right {
    justify-content: flex-end;
    margin-left: auto;
}

.gsx-card {
    background: var(--gsx-surface);
    color: var(--gsx-text);
    border: 1px solid var(--gsx-border);
    border-radius: var(--radius-3xl, 16px);   /* WOW: 18B-grade rounded cards */
    box-shadow: var(--gsx-shadow);
    overflow: hidden;
}

.gsx-card-header,
.gsx-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
}

.gsx-card-header {
    border-bottom: 1px solid var(--gsx-border);
}

.gsx-card-footer {
    border-top: 1px solid var(--gsx-border);
    background: var(--gsx-surface-2);
}

.gsx-card-title {
    margin: 0;
    color: var(--gsx-text);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: 0;
}

.gsx-card-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--gsx-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.gsx-card-body {
    padding: var(--space-4);
}

.gsx-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-3);
}

.gsx-kpi-cell {
    min-width: 0;
    padding: var(--space-3-5);
    background: var(--gsx-surface-2);
    border: 1px solid var(--gsx-border);
    border-radius: var(--gsx-radius-sm);
}

.gsx-kpi-label {
    display: block;
    color: var(--gsx-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gsx-kpi-value {
    display: block;
    margin-top: var(--space-1);
    color: var(--gsx-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.gsx-kpi-hint {
    display: block;
    margin-top: var(--space-1);
    color: var(--gsx-text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.gsx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--gsx-control-height);
    padding: 0 var(--space-3-5);
    border: 1px solid transparent;
    border-radius: var(--gsx-control-radius);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.gsx-btn:hover {
    transform: translateY(-1px);
}

.gsx-btn:disabled,
.gsx-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.gsx-btn:focus-visible,
.gsx-tab:focus-visible,
.gsx-input:focus-visible,
.gsx-select:focus-visible,
.gsx-textarea:focus-visible,
.gsx-modal-close:focus-visible {
    outline: 2px solid rgba(var(--gsx-brand-rgb), 0.75);
    outline-offset: 2px;
    box-shadow: var(--gsx-focus-ring);
}

.gsx-btn-primary {
    /* Darken the brand gold ~12% so the dark on-brand text reads clearly
       (plain brand gold + dark text is borderline for contrast). */
    background: color-mix(in srgb, var(--gsx-brand) 88%, #000);  /* tokens-allow: color-mix darken endpoint (pure black) */
    border-color: color-mix(in srgb, var(--gsx-brand) 88%, #000);  /* tokens-allow: color-mix darken endpoint (pure black) */
    color: var(--gsx-on-brand);
}

.gsx-btn-primary:hover {
    background: var(--gsx-brand);
    border-color: var(--primary-color);
}

.gsx-btn-secondary {
    background: var(--gsx-surface-2);
    border-color: var(--gsx-border-strong);
    color: var(--gsx-text);
}

.gsx-btn-secondary:hover,
.gsx-btn-muted:hover,
.gsx-btn-ghost:hover {
    background: var(--hover-bg);
    border-color: var(--gsx-border-strong);
}

.gsx-btn-muted {
    background: transparent;
    border-color: var(--gsx-border);
    color: var(--gsx-text-muted);
}

.gsx-btn-danger {
    background: var(--gsx-danger);
    border-color: var(--gsx-danger);
    color: var(--on-danger);
}

.gsx-btn-danger:hover {
    filter: brightness(1.08);
}

.gsx-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--gsx-text);
}

.gsx-btn-icon {
    width: var(--gsx-control-height);
    min-width: var(--gsx-control-height);
    padding: 0;
}

.gsx-btn-sm {
    min-height: var(--gsx-control-height-sm);
    padding: 0 var(--space-2-5);
    font-size: 0.82rem;
}

.gsx-btn-lg {
    min-height: var(--gsx-control-height-lg);
    padding: 0 var(--space-5);
    font-size: 1rem;
}

.gsx-btn-block {
    width: 100%;
}

.gsx-form {
    display: grid;
    gap: var(--space-4);
}

.gsx-form-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.gsx-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-3-5);
}

.gsx-field {
    display: grid;
    min-width: 0;
    gap: var(--space-1-5);
}

.gsx-label {
    color: var(--gsx-text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.gsx-input,
.gsx-select,
.gsx-textarea {
    width: 100%;
    min-height: var(--gsx-control-height);
    padding: var(--space-2-5) var(--space-3);
    background: var(--gsx-input-bg);
    color: var(--gsx-text);
    border: 1px solid var(--gsx-border);
    border-radius: var(--gsx-control-radius);
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.gsx-select {
    padding-right: var(--space-8);
}

.gsx-textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.gsx-input::placeholder,
.gsx-textarea::placeholder {
    color: var(--gsx-text-muted);
    opacity: 0.85;
}

.gsx-input:disabled,
.gsx-select:disabled,
.gsx-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gsx-help-text,
.gsx-error-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

.gsx-help-text {
    color: var(--gsx-text-muted);
}

.gsx-error-text {
    color: var(--danger-ink);
}

.gsx-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--gsx-border);
    border-radius: var(--gsx-radius-md);
    background: var(--gsx-surface);
}

.gsx-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--gsx-text);
    font-size: 0.9rem;
}

.gsx-table th,
.gsx-table td {
    padding: var(--space-3) var(--space-3-5);
    border-bottom: 1px solid var(--gsx-border);
    text-align: left;
    vertical-align: middle;
}

.gsx-table th {
    background: var(--gsx-table-head-bg);
    color: var(--gsx-text);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gsx-table tbody tr:nth-child(even) {
    background: var(--row-stripe);
}

.gsx-table tbody tr:hover {
    background: var(--row-hover);
}

.gsx-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Opt-in mobile CARD-STACK for gsx-tables — no horizontal scroll. Each row
   becomes a self-contained card; value cells show their column via data-label.
   Convert a table by adding .gsx-table-cards + data-label on value cells (and
   .gsx-cell-head / .gsx-cell-actions on the header/action cells). Desktop is
   unaffected — this only applies at the mobile breakpoint. (W6 unification.) */
@media (max-width: 768px) {
    table.gsx-table-cards {
        display: block;
        width: 100%;
    }
    .gsx-table-cards thead {
        display: none;
    }
    .gsx-table-cards tbody {
        display: block;
    }
    .gsx-table-cards tbody tr {
        display: block;
        margin-bottom: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--gsx-border);
        border-radius: var(--gsx-radius-md);
        background: var(--gsx-surface);
    }
    .gsx-table-cards tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-1-5) 0;
        border: 0;
        text-align: right;
    }
    .gsx-table-cards tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--gsx-text-muted);
        text-align: left;
    }
    /* Name/primary cell = card header: full width, no label, divider under it. */
    .gsx-table-cards tbody td.gsx-cell-head {
        justify-content: flex-start;
        text-align: left;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid var(--gsx-border);
    }
    /* Actions cell = footer row. */
    .gsx-table-cards tbody td.gsx-cell-actions {
        justify-content: flex-end;
        padding-top: var(--space-2);
        margin-top: var(--space-1);
        border-top: 1px solid var(--gsx-border);
    }
}

.gsx-table-compact th,
.gsx-table-compact td {
    padding: var(--space-2) var(--space-2-5);
    font-size: 0.84rem;
}

.gsx-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1-5);
    white-space: nowrap;
}

.gsx-row-muted {
    color: var(--gsx-text-muted);
    opacity: 0.78;
}

.gsx-row-warning {
    background: rgba(var(--gsx-warning-rgb), 0.12);
}

.gsx-row-danger {
    background: rgba(var(--gsx-danger-rgb), 0.12);
}

.gsx-pill,
.gsx-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 1.5rem;
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.gsx-pill-success {
    background: rgba(var(--gsx-success-rgb), 0.14);
    border-color: rgba(var(--gsx-success-rgb), 0.35);
    color: var(--success-ink);
}

.gsx-pill-warning {
    background: rgba(var(--gsx-warning-rgb), 0.16);
    border-color: rgba(var(--gsx-warning-rgb), 0.38);
    color: var(--warning-ink);
}

.gsx-pill-danger {
    background: rgba(var(--gsx-danger-rgb), 0.14);
    border-color: rgba(var(--gsx-danger-rgb), 0.35);
    color: var(--danger-ink);
}

.gsx-pill-info {
    background: rgba(var(--gsx-info-rgb), 0.14);
    border-color: rgba(var(--gsx-info-rgb), 0.35);
    color: var(--info-ink);
}

.gsx-pill-muted {
    background: var(--gsx-surface-2);
    border-color: var(--gsx-border);
    color: var(--gsx-text-muted);
}

.gsx-badge {
    min-height: 1.35rem;
    padding: var(--space-0-5) var(--space-2);
    background: var(--gsx-surface-2);
    border-color: var(--gsx-border);
    color: var(--gsx-text-muted);
    font-size: 0.68rem;
}

.gsx-badge-gold {
    background: rgba(var(--gsx-brand-rgb), 0.16);
    border-color: rgba(var(--gsx-brand-rgb), 0.42);
    color: var(--brand-ink);
}

.gsx-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 5001);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.gsx-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop, 5000);
    background: var(--scrim-strong);
    backdrop-filter: blur(2px);
}

.gsx-modal-dialog {
    position: relative;
    z-index: var(--z-modal, 5001);
    width: min(100%, var(--gsx-modal-width, 42rem));
    max-height: min(90vh, 52rem);
    display: flex;
    flex-direction: column;
    background: var(--gsx-surface);
    color: var(--gsx-text);
    border: 1px solid var(--gsx-border-strong);
    border-radius: var(--gsx-radius-md);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.gsx-modal-header,
.gsx-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
}

.gsx-modal-header {
    border-bottom: 1px solid var(--gsx-border);
}

.gsx-modal-footer {
    border-top: 1px solid var(--gsx-border);
    background: var(--gsx-surface-2);
}

.gsx-modal-title {
    margin: 0;
    color: var(--gsx-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.gsx-modal-body {
    flex: 1 1 auto;
    padding: var(--space-4);
    overflow: auto;
}

.gsx-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    color: var(--gsx-text-muted);
    border: 1px solid transparent;
    border-radius: var(--gsx-radius-sm);
    font: inherit;
    cursor: pointer;
}

.gsx-modal-close:hover {
    background: var(--hover-bg);
    color: var(--gsx-text);
    border-color: var(--gsx-border);
}

.gsx-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: 1px solid var(--gsx-border);
    overflow-x: auto;
}

.gsx-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0 var(--space-3-5);
    background: transparent;
    color: var(--gsx-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.gsx-tab:hover {
    color: var(--gsx-text);
    background: var(--hover-bg);
}

.gsx-tab-active {
    color: var(--brand-ink);
    border-bottom-color: var(--primary-color);
}

.gsx-empty-state {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    min-height: 12rem;
    padding: var(--space-8);
    text-align: center;
    color: var(--gsx-text-muted);
    border: 1px dashed var(--gsx-border-strong);
    border-radius: var(--gsx-radius-md);
    background: var(--gsx-surface);
}

.gsx-empty-title {
    margin: 0;
    color: var(--gsx-text);
    font-size: 1rem;
    font-weight: 800;
}

.gsx-empty-text {
    max-width: 34rem;
    margin: 0;
    color: var(--gsx-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.gsx-empty-ico {
    margin-bottom: var(--space-1);
    color: var(--gsx-text-muted);
    opacity: 0.7;
    font-size: 2.4rem;
    line-height: 1;
}
.gsx-empty-ico svg { width: 42px; height: 42px; display: block; }
.gsx-empty-state .gsx-btn { margin-top: var(--space-2); }

/* Lightweight inline state note — the centered loading / empty / error message
   that replaces a list or table body while it (re)loads. Distinct from the
   heavier full-panel .gsx-empty-state (dashed box + min-height). Replaces the
   repeated inline `padding:2rem;text-align:center;color:…` divs across modules. */
.gsx-note {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.gsx-note-error { color: var(--double-ink); }

.gsx-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gsx-text-muted);
    font-size: 0.9rem;
    font-weight: 650;
}

.gsx-loading::before {
    content: '';
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--gsx-border-strong);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-pill);
    animation: gsx-spin 0.8s linear infinite;
}

.gsx-alert {
    padding: var(--space-3) var(--space-3-5);
    border: 1px solid var(--gsx-border);
    border-radius: var(--gsx-radius-sm);
    color: var(--gsx-text);
    background: var(--gsx-surface-2);
    font-size: 0.9rem;
    line-height: 1.45;
}

.gsx-alert-info {
    background: rgba(var(--gsx-info-rgb), 0.12);
    border-color: rgba(var(--gsx-info-rgb), 0.35);
}

.gsx-alert-success {
    background: rgba(var(--gsx-success-rgb), 0.12);
    border-color: rgba(var(--gsx-success-rgb), 0.35);
}

.gsx-alert-warning {
    background: rgba(var(--gsx-warning-rgb), 0.14);
    border-color: rgba(var(--gsx-warning-rgb), 0.4);
}

.gsx-alert-danger {
    background: rgba(var(--gsx-danger-rgb), 0.12);
    border-color: rgba(var(--gsx-danger-rgb), 0.35);
}

@keyframes gsx-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 720px) {
    .gsx-page-shell {
        padding: var(--space-3-5);
    }

    .gsx-page-header,
    .gsx-card-header,
    .gsx-card-footer,
    .gsx-modal-header,
    .gsx-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .gsx-toolbar,
    .gsx-toolbar-left,
    .gsx-toolbar-right,
    .gsx-form-row {
        align-items: stretch;
    }

    .gsx-toolbar-right {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .gsx-toolbar-right>.gsx-btn,
    .gsx-toolbar-left>.gsx-btn {
        flex: 1 1 auto;
    }

    .gsx-modal {
        align-items: flex-end;
        padding: 0;
    }

    .gsx-modal-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--gsx-radius-md) var(--gsx-radius-md) 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gsx-btn,
    .gsx-input,
    .gsx-select,
    .gsx-textarea {
        transition: none;
    }

    .gsx-loading::before {
        animation: none;
    }
}