/* ═══════════════════════════════════════════ */
/* CALISTENIA PRO — Tema Spotify             */
/* ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ═══ Bootstrap Overrides ═══ */
:root {
    --spotify-black: #121212;
    --spotify-surface: #181818;
    --spotify-elevated: #1f1f1f;
    --spotify-card: #252525;
    --spotify-green: #1ed760;
    --spotify-green-hover: #1fdf64;
    --spotify-text: #ffffff;
    --spotify-subtext: #b3b3b3;
    --spotify-muted: #6a6a6a;
    --spotify-border: #4d4d4d;
    --spotify-error: #f3727f;
    --spotify-warning: #ffa42b;

    /* Bootstrap vars */
    --bs-body-bg: var(--spotify-black);
    --bs-body-color: var(--spotify-text);
    --bs-dark: #121212;
    --bs-dark-rgb: 18, 18, 18;
    --bs-border-color: #333;
    --bs-secondary-color: #b3b3b3;
    --bs-danger: #1ed760;
    --bs-danger-rgb: 30, 215, 96;
    --bs-success: #1ed760;
    --bs-success-rgb: 30, 215, 96;
}

/* ═══ Base ═══ */
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--spotify-black);
    color: var(--spotify-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ═══ Navbar ═══ */
.navbar {
    background: var(--spotify-black) !important;
    border-bottom: 1px solid #282828 !important;
    backdrop-filter: blur(10px);
    min-height: 56px;
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.3px;
    color: var(--spotify-text) !important;
}
.nav-link {
    color: var(--spotify-subtext) !important;
    font-weight: 600;
    font-size: 0.875rem;
    transition: color 0.2s;
}
.nav-link:hover, .nav-link.active {
    color: var(--spotify-text) !important;
}
.dropdown-menu-dark {
    background: var(--spotify-elevated);
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.5) 0px 8px 24px;
}
.dropdown-item {
    color: var(--spotify-subtext);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
}
.dropdown-item:hover {
    background: #333;
    color: var(--spotify-text);
}

/* ═══ Navbar ═══ */
.navbar {
    z-index: 1030 !important;
}
.navbar .dropdown-menu {
    z-index: 1031 !important;
}

/* ═══ Buttons ═══ */
.btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 9999px !important;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
    border: none;
}
.btn-danger, .btn-success {
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.btn-danger {
    background: var(--spotify-green) !important;
    color: #000 !important;
    box-shadow: none;
}
.btn-danger:hover {
    background: var(--spotify-green-hover) !important;
    transform: scale(1.02);
}
.btn-outline-light {
    background: transparent;
    color: var(--spotify-text);
    border: 1px solid var(--spotify-border);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}
.btn-outline-light:hover {
    background: var(--spotify-elevated);
    border-color: var(--spotify-text);
}
.btn-sm {
    font-size: 0.75rem;
    letter-spacing: 1px;
    padding: 0.35rem 1rem;
}
.btn-outline-danger {
    color: var(--spotify-green);
    border-color: var(--spotify-green);
}
.btn-outline-danger:hover {
    background: var(--spotify-green);
    color: #000;
}

/* ═══ Cards ═══ */
.card {
    background: var(--spotify-surface) !important;
    border: none !important;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
}
.card:hover {
    background: var(--spotify-card) !important;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid #282828;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}
.card-body {
    padding: 1rem;
}
.hover-card:hover {
    background: var(--spotify-card) !important;
    transform: translateY(-2px);
    box-shadow: rgba(0,0,0,0.3) 0px 8px 8px;
}

/* ═══ Forms ═══ */
.form-control, .form-select {
    background: var(--spotify-elevated) !important;
    border: 1px solid #333 !important;
    color: var(--spotify-text) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--spotify-green) !important;
    box-shadow: 0 0 0 2px rgba(30,215,96,0.15) !important;
    background: #252525 !important;
}
.form-control::placeholder {
    color: var(--spotify-muted);
}
.form-label {
    color: var(--spotify-subtext);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══ Tables ═══ */
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--spotify-text);
    --bs-table-hover-bg: #252525;
    --bs-table-border-color: #282828;
}
.table th {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--spotify-subtext);
    border-bottom: 1px solid #282828;
}

/* ═══ Progress bar ═══ */
.progress {
    background: #333;
    border-radius: 9999px;
    height: 6px;
}
.progress-bar {
    background: var(--spotify-green) !important;
    border-radius: 9999px;
}

/* ═══ Badges ═══ */
.badge {
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    padding: 0.25em 0.7em;
    border-radius: 9999px;
}
.bg-danger { background: var(--spotify-green) !important; color: #000 !important; }
.bg-secondary { background: #333 !important; color: var(--spotify-subtext) !important; }
.bg-info { background: var(--spotify-green) !important; }
.bg-warning { background: var(--spotify-warning) !important; color: #000 !important; }

/* ═══ Footer ═══ */
footer {
    background: var(--spotify-black) !important;
    border-top: 1px solid #282828 !important;
    color: var(--spotify-muted) !important;
    font-size: 0.75rem;
    padding: 1.5rem 0;
}

/* ═══ Alerts ═══ */
.alert {
    border-radius: 8px;
    border: none;
    font-weight: 500;
}
.alert-danger { background: rgba(243,114,127,0.15); color: var(--spotify-error); }
.alert-success { background: rgba(30,215,96,0.15); color: var(--spotify-green); }
.alert-warning { background: rgba(255,164,43,0.15); color: var(--spotify-warning); }

/* ═══ Alert/landing ═══ */
.alert-info { 
    background: rgba(30,215,96,0.1); 
    border: 1px solid rgba(30,215,96,0.2); 
    color: var(--spotify-green); 
}

/* ═══ Links ═══ */
a {
    color: var(--spotify-text);
    text-decoration: none;
}
a:hover {
    color: var(--spotify-green);
}

/* ═══ Video container ═══ */
.workout-video-container {
    margin: 0 auto;
}

/* ═══ Chart ═══ */
.chart-bars {
    overflow-x: auto;
    min-height: 150px;
    padding-bottom: 4px;
}

/* ═══ MOBILE ═══ */
@media (max-width: 576px) {
    .navbar-brand { font-size: 0.9rem; }
    h2, h3 { font-size: 1.15rem; }
    h5 { font-size: 0.95rem; }
    .display-4 { font-size: 1.8rem; }
    .display-5 { font-size: 1.5rem; }
    
    .form-control, .form-select {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .btn {
        min-height: 44px;
        padding: 0.55rem 1.1rem;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
    }
    .btn-sm {
        min-height: 38px;
        font-size: 0.75rem;
        padding: 0.35rem 0.9rem;
    }
    .btn-lg {
        font-size: 0.9rem;
        padding: 0.65rem 1.4rem;
    }
    
    /* Workout video full width */
    .workout-video-container {
        max-width: 100% !important;
    }
    
    /* Row spacing for stacked cols */
    .row.g-2 > [class*="col-"], .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
    
    /* Calendar - horizontal scroll */
    .d-flex.gap-2.overflow-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Pricing cards */
    #pricing .col-md-4 {
        margin-bottom: 0.75rem;
    }
    
    /* Table overflow */
    .table-responsive table {
        font-size: 0.72rem;
    }
    .table-responsive th, .table-responsive td {
        padding: 0.3rem 0.5rem;
    }
    
    /* Footer */
    footer {
        font-size: 0.7rem;
        padding: 0.75rem 0 1.25rem;
    }
    footer p { margin-bottom: 0; }
}

@media (max-width: 768px) {
    .table-responsive table {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .table-responsive th, .table-responsive td {
        padding: 0.3rem 0.5rem;
    }
}

/* ═══ iOS fix ═══ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input, select, textarea { font-size: 16px !important; }
}