/* ============================================
   Clubs Easy - Atlassian Design System
   Based on https://atlassian.design/
   ============================================ */

/* ---------- ADS Design Tokens ---------- */
:root {
    /* ADS Color Palette */
    --ds-text: #172B4D;
    --ds-text-subtle: #6B778C;
    --ds-text-subtlest: #97A0AF;
    --ds-text-inverse: #FFFFFF;
    --ds-text-disabled: #A5ADBA;

    --ds-link: #0052CC;
    --ds-link-pressed: #0747A6;

    --ds-background-input: #FAFBFC;
    --ds-background-neutral: #DFE1E6;
    --ds-background-neutral-subtle: #F4F5F7;
    --ds-background-neutral-bold: #42526E;

    --ds-surface: #FFFFFF;
    --ds-surface-raised: #FFFFFF;
    --ds-surface-overlay: #FFFFFF;
    --ds-surface-sunken: #F4F5F7;

    --ds-border: #DFE1E6;
    --ds-border-bold: #C1C7D0;
    --ds-border-focused: #4C9AFF;
    --ds-border-input: #DFE1E6;

    /* Brand */
    --ds-background-brand-bold: #0052CC;
    --ds-background-brand-bold-hovered: #0065FF;
    --ds-background-brand-bold-pressed: #0747A6;

    /* Status colors */
    --ds-background-success: #E3FCEF;
    --ds-background-success-bold: #00875A;
    --ds-background-success-bold-hovered: #006644;
    --ds-text-success: #006644;
    --ds-icon-success: #00875A;

    --ds-background-danger: #FFEBE6;
    --ds-background-danger-bold: #DE350B;
    --ds-background-danger-bold-hovered: #BF2600;
    --ds-text-danger: #DE350B;
    --ds-icon-danger: #DE350B;

    --ds-background-warning: #FFFAE6;
    --ds-background-warning-bold: #FF991F;
    --ds-background-warning-bold-hovered: #FF8B00;
    --ds-text-warning: #FF8B00;
    --ds-icon-warning: #FF991F;

    --ds-background-information: #DEEBFF;
    --ds-background-information-bold: #0052CC;
    --ds-text-information: #0052CC;

    --ds-background-discovery: #EAE6FF;
    --ds-background-discovery-bold: #6554C0;
    --ds-text-discovery: #6554C0;

    /* ADS Spacing */
    --ds-space-025: 2px;
    --ds-space-050: 4px;
    --ds-space-075: 6px;
    --ds-space-100: 8px;
    --ds-space-150: 12px;
    --ds-space-200: 16px;
    --ds-space-250: 20px;
    --ds-space-300: 24px;
    --ds-space-400: 32px;
    --ds-space-500: 40px;
    --ds-space-600: 48px;

    /* ADS Border Radius */
    --ds-radius-100: 3px;
    --ds-radius-200: 8px;
    --ds-radius-300: 12px;
    --ds-radius-round: 50%;

    /* ADS Elevation / Shadow */
    --ds-shadow-raised: 0 1px 1px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
    --ds-shadow-overlay: 0 4px 8px -2px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
    --ds-shadow-overflow: 0 8px 12px rgba(9,30,66,0.15), 0 0 1px rgba(9,30,66,0.31);

    /* ---- Backward-compat aliases (used by style.css + templates) ---- */
    --spectrum-global-color-blue-400: #0052CC;
    --spectrum-global-color-blue-500: #0747A6;
    --spectrum-global-color-blue-600: #003884;
    --spectrum-global-color-blue-100: #DEEBFF;
    --spectrum-global-color-seafoam-400: #00B8D9;
    --spectrum-global-color-seafoam-500: #008DA6;
    --spectrum-global-color-gray-50: #FFFFFF;
    --spectrum-global-color-gray-75: #FAFBFC;
    --spectrum-global-color-gray-100: #F4F5F7;
    --spectrum-global-color-gray-200: #DFE1E6;
    --spectrum-global-color-gray-300: #C1C7D0;
    --spectrum-global-color-gray-400: #A5ADBA;
    --spectrum-global-color-gray-500: #97A0AF;
    --spectrum-global-color-gray-600: #6B778C;
    --spectrum-global-color-gray-700: #505F79;
    --spectrum-global-color-gray-800: #42526E;
    --spectrum-global-color-gray-900: #172B4D;
    --spectrum-global-color-red-400: #DE350B;
    --spectrum-global-color-red-500: #BF2600;
    --spectrum-global-color-orange-400: #FF991F;
    --spectrum-global-color-green-400: #00875A;
    --spectrum-global-color-green-500: #006644;

    --spectrum-alias-border-radius-regular: 3px;
    --spectrum-alias-border-radius-medium: 3px;
    --spectrum-alias-border-radius-large: 8px;

    --primary: var(--ds-background-brand-bold);
    --primary-dark: var(--ds-background-brand-bold-pressed);
    --primary-light: var(--ds-background-information);
    --accent: var(--spectrum-global-color-seafoam-400);
    --accent-dark: var(--spectrum-global-color-seafoam-500);
    --navy: #172B4D;
    --text: var(--ds-text);
    --text-light: var(--ds-text-subtle);
    --bg: var(--ds-surface-sunken);
    --bg-alt: var(--ds-background-neutral-subtle);
    --white: var(--ds-surface);
    --border: var(--ds-border);
    --border-light: var(--ds-background-neutral-subtle);
    --success: var(--ds-background-success-bold);
    --warning: var(--ds-background-warning-bold);
    --danger: var(--ds-background-danger-bold);
    --info: var(--ds-background-brand-bold);

    --shadow-sm: var(--ds-shadow-raised);
    --shadow-md: var(--ds-shadow-overlay);
    --shadow-lg: var(--ds-shadow-overflow);

    --radius-sm: 3px;
    --radius-md: 3px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    --transition: all 0.2s cubic-bezier(0.15, 1, 0.3, 1);
}

/* ---------- Navigation (ADS TopNav style) ---------- */
.sp-nav {
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    display: flex;
    align-items: center;
}

.sp-nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    gap: 16px;
}

.sp-nav-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ds-background-brand-bold) !important;
    letter-spacing: -0.5px;
    text-decoration: none;
    white-space: nowrap;
}

.sp-nav-brand span {
    color: var(--spectrum-global-color-seafoam-400);
}

.sp-nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.sp-nav-left, .sp-nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-text-subtle) !important;
    text-decoration: none !important;
    border-radius: var(--ds-radius-100);
    transition: var(--transition);
    white-space: nowrap;
}

.sp-nav-link:hover {
    background: var(--ds-background-neutral-subtle);
    color: var(--ds-text) !important;
}

.sp-nav-user {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text);
}

.sp-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    padding: 6px 10px;
    color: var(--ds-text-subtle);
    cursor: pointer;
}

/* ---------- Badge (ADS Lozenge) ---------- */
.sp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
}

.sp-badge--danger {
    background: var(--ds-background-danger-bold);
    color: #fff;
}

.sp-badge--success {
    background: var(--ds-background-success-bold);
    color: #fff;
}

.sp-badge--info {
    background: var(--ds-background-information-bold);
    color: #fff;
}

.sp-badge--warning {
    background: var(--ds-background-warning-bold);
    color: var(--ds-text);
}

.sp-badge--neutral {
    background: var(--ds-background-neutral);
    color: var(--ds-text-subtle);
}

/* ---------- Buttons (ADS style) ---------- */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--ds-radius-100);
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: var(--transition);
    white-space: nowrap;
    line-height: 20px;
    height: 36px;
}

.sp-btn--sm {
    font-size: 13px;
    padding: 6px 12px;
    height: 30px;
}

.sp-btn--lg {
    font-size: 16px;
    padding: 10px 20px;
    height: 44px;
}

.sp-btn--primary {
    background: var(--ds-background-brand-bold);
    color: #fff !important;
}
.sp-btn--primary:hover {
    background: var(--ds-background-brand-bold-hovered);
    color: #fff !important;
}

.sp-btn--accent {
    background: var(--spectrum-global-color-seafoam-400);
    color: #fff !important;
}
.sp-btn--accent:hover {
    background: var(--spectrum-global-color-seafoam-500);
    color: #fff !important;
}

.sp-btn--secondary {
    background: var(--ds-background-neutral-subtle);
    color: var(--ds-text) !important;
}
.sp-btn--secondary:hover {
    background: var(--ds-background-neutral);
    color: var(--ds-text) !important;
}

.sp-btn--negative {
    background: var(--ds-background-danger-bold);
    color: #fff !important;
}
.sp-btn--negative:hover {
    background: var(--ds-background-danger-bold-hovered);
}

.sp-btn--success {
    background: var(--ds-background-success-bold);
    color: #fff !important;
}
.sp-btn--success:hover {
    background: var(--ds-background-success-bold-hovered);
}

.sp-btn--outline {
    background: transparent;
    color: var(--ds-background-brand-bold) !important;
    box-shadow: inset 0 0 0 2px var(--ds-border-bold);
}
.sp-btn--outline:hover {
    background: var(--ds-background-neutral-subtle);
}

/* ---------- Page Layout ---------- */
.sp-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px;
}

/* ---------- Toast / Flash Messages (ADS Flag style) ---------- */
.sp-toast {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: var(--ds-radius-100);
    font-size: 14px;
    font-weight: 400;
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-overlay);
    border-left: none;
}

.sp-toast--success {
    background: var(--ds-background-success);
    color: var(--ds-text-success);
}

.sp-toast--danger {
    background: var(--ds-background-danger);
    color: var(--ds-text-danger);
}

.sp-toast--warning {
    background: var(--ds-background-warning);
    color: var(--ds-text);
}

.sp-toast--info {
    background: var(--ds-background-information);
    color: var(--ds-text-information);
}

.sp-toast-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    color: inherit;
    opacity: 0.6;
}
.sp-toast-close:hover { opacity: 1; }

/* ---------- Cards (ADS style) ---------- */
.sp-card {
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
    overflow: hidden;
    transition: var(--transition);
}

.sp-card:hover {
    box-shadow: var(--ds-shadow-overlay);
}

.sp-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

.sp-card-header h5, .sp-card-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-text);
}

.sp-card-body {
    padding: 24px;
}

/* ---------- Tables (ADS DynamicTable style) ---------- */
.sp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.sp-table thead th {
    background: transparent;
    border-bottom: 2px solid var(--ds-border);
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ds-text-subtle);
    text-align: left;
}

.sp-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
}

.sp-table tbody tr:hover {
    background: var(--ds-background-neutral-subtle);
}

/* ---------- Forms (ADS TextField style) ---------- */
.sp-field {
    margin-bottom: 20px;
}

.sp-field label, .sp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-subtle);
    margin-bottom: 6px;
}

.sp-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 2px solid var(--ds-border-input);
    border-radius: var(--ds-radius-100);
    background: var(--ds-background-input);
    color: var(--ds-text);
    transition: var(--transition);
    outline: none;
    line-height: 20px;
}

.sp-input:hover {
    border-color: var(--ds-border-bold);
}

.sp-input:focus {
    border-color: var(--ds-border-focused);
    background: var(--ds-surface);
}

.sp-input::placeholder {
    color: var(--ds-text-subtlest);
}

textarea.sp-input {
    min-height: 80px;
    resize: vertical;
}

.sp-help-text {
    font-size: 12px;
    color: var(--ds-text-subtle);
    margin-top: 4px;
}

.sp-error-text {
    font-size: 12px;
    color: var(--ds-text-danger);
    margin-top: 4px;
}

/* ---------- Stat Cards ---------- */
.sp-stat {
    text-align: center;
    padding: 20px 16px;
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
}

.sp-stat-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.sp-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.sp-stat--blue .sp-stat-value { color: var(--ds-background-brand-bold); }
.sp-stat--green .sp-stat-value { color: var(--ds-background-success-bold); }
.sp-stat--orange .sp-stat-value { color: var(--ds-background-warning-bold); }
.sp-stat--red .sp-stat-value { color: var(--ds-background-danger-bold); }

/* ---------- Footer ---------- */
.sp-footer {
    background: #172B4D;
    color: var(--ds-text-subtlest);
    padding: 48px 0 24px;
    margin-top: 48px;
}

.sp-footer-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 12px;
}
.sp-footer-brand span { color: var(--spectrum-global-color-seafoam-400); }

.sp-footer-text {
    font-size: 14px;
    color: var(--ds-text-subtlest);
    max-width: 280px;
}

.sp-footer-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #B3D4FF;
    margin-bottom: 12px;
}

.sp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-footer-links li { margin-bottom: 8px; }

.sp-footer-links a {
    color: var(--ds-text-subtlest);
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition);
}
.sp-footer-links a:hover { color: #fff; }

.sp-footer-bottom {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 12px;
}

/* ---------- Utility ---------- */
.sp-text-muted { color: var(--ds-text-subtle); }
.sp-text-sm { font-size: 12px; }
.sp-text-lg { font-size: 16px; }
.sp-divider { border: none; border-top: 1px solid var(--ds-border); margin: 20px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .sp-nav { height: 48px; }
    .sp-nav-toggle { display: block; }
    .sp-nav-links {
        display: none;
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        background: var(--ds-surface);
        border-bottom: 1px solid var(--ds-border);
        flex-direction: column;
        padding: 12px;
        box-shadow: var(--ds-shadow-overlay);
    }
    .sp-nav-links.show { display: flex; }
    .sp-nav-left, .sp-nav-right {
        flex-direction: column;
        width: 100%;
        gap: 2px;
    }
    .sp-nav-link, .sp-nav-user { width: 100%; }
    .sp-page { padding: 20px 16px; }
}