/* SnipsBot Web — Custom styles layered on Tailwind */

:root {
    --accent: #F27D20;
    --accent-dim: #c4631a;
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bright: rgba(255, 255, 255, 0.12);
    --danger: #dc2626;
    --danger-dim: #991b1b;
}

body {
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
}

/* Frosted glass card */
.glass {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
}

.glass-bright {
    background: var(--glass-bright);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
}

/* Accent button */
.btn-accent {
    background: var(--accent);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background 0.2s;
    cursor: pointer;
    border: none;
}
.btn-accent:hover {
    background: var(--accent-dim);
}

.btn-danger {
    background: var(--danger);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background 0.2s;
    cursor: pointer;
    border: none;
}
.btn-danger:hover {
    background: var(--danger-dim);
}

.btn-secondary {
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background 0.2s;
    cursor: pointer;
    border: 1px solid var(--glass-border);
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.2);
}

/* Modal backdrop */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}
.modal-backdrop.active {
    display: flex;
}

.modal-content {
    background: #1e1e30;
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 550px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    color: white;
}

/* Form inputs dark theme */
.input-dark {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: white;
    width: 100%;
}
.input-dark::placeholder {
    color: rgba(255,255,255,0.4);
}
.input-dark:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(242, 125, 32, 0.2);
}

/* Tom Select overrides for dark theme */
.ts-wrapper .ts-control {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 0.5rem !important;
    color: white !important;
    min-height: 40px !important;
}
.ts-wrapper .ts-control input {
    color: white !important;
}
.ts-wrapper .ts-control input::placeholder {
    color: rgba(255,255,255,0.4) !important;
}
.ts-dropdown {
    background: #1e1e30 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 0.5rem !important;
    color: white !important;
}
.ts-dropdown .option {
    color: white !important;
    padding: 8px 12px !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: rgba(242, 125, 32, 0.3) !important;
}
.ts-wrapper .ts-control .item {
    color: white !important;
    background: rgba(242, 125, 32, 0.3) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 4px !important;
}

/* Unit portrait in dropdown */
.unit-option {
    display: flex;
    align-items: center;
    gap: 8px;
}
.unit-option img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}

/* Team card with unit portraits */
.team-portraits {
    display: flex;
    gap: 4px;
    margin-top: 0.5rem;
}
.team-portraits img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid var(--glass-border);
    object-fit: cover;
}
.team-portraits .leader {
    border-color: var(--accent);
}
.team-portraits .strength-badge {
    font-size: 0.6rem;
    text-align: center;
    margin-top: 2px;
    color: rgba(255,255,255,0.6);
}

/* Stat card chart */
.stat-card {
    transition: transform 0.2s;
}
.stat-card:hover {
    transform: translateY(-2px);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}