/* Dark theme for karaoke player */

:root {
    --primary: #3273dc;
    --success: #48c774;
    --warning: #ffdd57;
    --danger: #f14668;
    --info: #209cee;
    --dark-bg: #1a1a1a;
    --card-bg: #2a2a2a;
    --border: #444;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--dark-bg);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;
}

a {
    color: var(--primary);
}

a:hover {
    color: lighten(var(--primary), 10%);
}

.box {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border);
}

.button {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    color: #fff;
}

.button:hover {
    background-color: lighten(var(--card-bg), 10%);
    border-color: var(--border);
}

.button.is-info {
    background-color: var(--info);
    border-color: var(--info);
    color: #fff;
}

.button.is-info:hover {
    background-color: lighten(var(--info), 10%);
    border-color: lighten(var(--info), 10%);
}

.button.is-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}

.button.is-success:hover {
    background-color: lighten(var(--success), 10%);
    border-color: lighten(var(--success), 10%);
}

.button.is-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #000;
}

.button.is-warning:hover {
    background-color: darken(var(--warning), 10%);
    border-color: darken(var(--warning), 10%);
}

.button.is-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.button.is-danger:hover {
    background-color: lighten(var(--danger), 10%);
    border-color: lighten(var(--danger), 10%);
}

.button.is-dark {
    background-color: #3a3a3a;
    border-color: #555;
    color: #fff;
}

.button.is-dark:hover {
    background-color: #4a4a4a;
    border-color: #666;
}

.input {
    background-color: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: #fff !important;
}

.input::placeholder {
    color: #999 !important;
}

.input:focus {
    background-color: lighten(var(--card-bg), 5%) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

.label {
    color: #ccc;
}

.heading {
    color: #aaa;
}

.title {
    color: #fff;
}

.subtitle {
    color: #aaa;
}

/* Utility Classes */
.has-background-dark {
    background-color: var(--dark-bg) !important;
}

.has-background-grey-darker {
    background-color: var(--card-bg) !important;
}

.has-background-grey {
    background-color: #3a3a3a !important;
}

.has-text-grey {
    color: #999 !important;
}

.has-text-grey-light {
    color: #bbb !important;
}

.has-text-white {
    color: #fff !important;
}

.has-text-info {
    color: var(--info) !important;
}

.has-text-success {
    color: var(--success) !important;
}

.has-text-warning {
    color: var(--warning) !important;
}

.has-text-danger {
    color: var(--danger) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-container {
        padding: 0.5rem;
    }

    .button {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .queue-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .queue-item-actions {
        width: 100%;
        margin-top: 0.5rem;
    }
}