/* ============================================================
   A-Team Roleplay UCP - Custom Styles
   Themes: dark, light, ateam, midnight
   ============================================================ */

/* Default (dark) */
:root,
[data-ucp-theme="dark"] {
    --ucp-bg: #1a1d20;
    --ucp-card: #25282c;
    --ucp-accent: #0d6efd;
    --ucp-accent-2: #6610f2;
    --ucp-text: #e9ecef;
    --ucp-muted: #adb5bd;
    --ucp-border: #343a40;
    --ucp-hero-grad: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}

[data-ucp-theme="light"] {
    --ucp-bg: #f4f6f9;
    --ucp-card: #ffffff;
    --ucp-accent: #0d6efd;
    --ucp-accent-2: #6f42c1;
    --ucp-text: #212529;
    --ucp-muted: #6c757d;
    --ucp-border: #dee2e6;
    --ucp-hero-grad: linear-gradient(135deg, #4dabf7 0%, #845ef7 100%);
}

[data-ucp-theme="ateam"] {
    --ucp-bg: #14080a;
    --ucp-card: #1e0d10;
    --ucp-accent: #dc3545;
    --ucp-accent-2: #fd7e14;
    --ucp-text: #f8d7da;
    --ucp-muted: #c79ba0;
    --ucp-border: #3a1419;
    --ucp-hero-grad: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
}

[data-ucp-theme="midnight"] {
    --ucp-bg: #0b1426;
    --ucp-card: #15203a;
    --ucp-accent: #0dcaf0;
    --ucp-accent-2: #6610f2;
    --ucp-text: #cfe2ff;
    --ucp-muted: #8da4c5;
    --ucp-border: #1f2c4a;
    --ucp-hero-grad: linear-gradient(135deg, #0dcaf0 0%, #6610f2 100%);
}

body {
    background-color: var(--ucp-bg) !important;
    color: var(--ucp-text);
}

.card {
    background-color: var(--ucp-card);
    border-color: var(--ucp-border);
    color: var(--ucp-text);
}

.card-header {
    background-color: rgba(255,255,255,0.03);
    border-bottom-color: var(--ucp-border);
    font-weight: 600;
}

.app-header, .app-sidebar, .app-footer {
    background-color: var(--ucp-card) !important;
    border-color: var(--ucp-border) !important;
    color: var(--ucp-text);
}

.app-sidebar .nav-link {
    color: var(--ucp-text) !important;
}
.app-sidebar .nav-link.active {
    background: var(--ucp-hero-grad);
    color: #fff !important;
    border-radius: 6px;
}
.app-sidebar .nav-link:hover:not(.active) {
    background-color: rgba(255,255,255,0.05);
}

.text-muted, .text-secondary { color: var(--ucp-muted) !important; }

/* Hero stat tiles */
.stat-tile {
    background: var(--ucp-hero-grad);
    color: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.stat-tile .stat-icon {
    position: absolute;
    right: 1rem;
    top: 1rem;
    opacity: 0.25;
    font-size: 3.2rem;
}
.stat-tile .stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
}
.stat-tile .stat-label {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.stat-tile.money { background: linear-gradient(135deg, #198754, #20c997); }
.stat-tile.bank  { background: linear-gradient(135deg, #0d6efd, #0dcaf0); }
.stat-tile.respect { background: linear-gradient(135deg, #fd7e14, #ffc107); color:#212529; }
.stat-tile.level { background: linear-gradient(135deg, #6610f2, #d63384); }
.stat-tile.kills { background: linear-gradient(135deg, #dc3545, #fd7e14); }
.stat-tile.deaths { background: linear-gradient(135deg, #495057, #adb5bd); }
.stat-tile.hours { background: linear-gradient(135deg, #20c997, #0dcaf0); }
.stat-tile.wanted { background: linear-gradient(135deg, #dc3545, #6f42c1); }

/* Skill progress bars */
.skill-row { margin-bottom: 0.85rem; }
.skill-row .skill-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.skill-row .progress { height: 8px; background-color: rgba(255,255,255,0.08); }

/* Tables */
.table {
    color: var(--ucp-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ucp-text);
    --bs-table-border-color: var(--ucp-border);
    --bs-table-striped-color: var(--ucp-text);
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-color: var(--ucp-text);
    --bs-table-hover-bg: rgba(255,255,255,0.06);
}

/* Login page */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ucp-bg);
    background-image: radial-gradient(circle at 20% 20%, rgba(13,110,253,0.15), transparent 40%),
                      radial-gradient(circle at 80% 80%, rgba(220,53,69,0.15), transparent 40%);
}
.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--ucp-card);
    border: 1px solid var(--ucp-border);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}
.login-logo h2 {
    background: var(--ucp-hero-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    margin: 0;
}

.vehicle-thumb {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
}

.skin-thumb {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border: 2px solid var(--ucp-border);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    padding: 8px;
}

/* Theme picker on login page */
.theme-strip {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 1rem;
}
.theme-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: #fff; }
.theme-swatch.s-dark { background: linear-gradient(135deg,#0d6efd,#6610f2); }
.theme-swatch.s-light { background: linear-gradient(135deg,#4dabf7,#845ef7); }
.theme-swatch.s-ateam { background: linear-gradient(135deg,#dc3545,#fd7e14); }
.theme-swatch.s-midnight { background: linear-gradient(135deg,#0dcaf0,#6610f2); }