/* =====================================================================
   StudioDesk Manager - PALETTE 02
   Synchronisee avec studiodesk-app/assets/css/palettes/palette_02.css
   ===================================================================== */
:root {
    /* Surfaces */
    --bg: #060B1A;
    --panel: #0D1630;
    --panel-2: #0D1630;
    --inset: #060B1A;
    --card: #0D1630;
    --card-2: #0D1630;
    --card-3: #0D1630;
    --bg-box: #0A1127;

    /* Interaction */
    --hover: #18325B;
    --selected: #003BA2;
    --line: #18325B;
    --line-soft: rgba(255, 255, 255, 0.06);

    /* Texte */
    --text-app: #FFFFFF;
    --text-muted: #8A93B2;
    --text-muted-2: #5D6488;

    /* Accents */
    --blue: #003BA2;
    --blue-bright: #003BA2;
    --green: #008F24;
    --green-deep: #008F24;
    --red: #D02121;
    --red-bright: #D02121;
    --yellow: #D1740A;
    --magenta: #A600A3;

    /* Compatibilite avec le theme historique du manager */
    --outer: var(--bg);
    --frame: var(--bg);
    --sidebar: var(--panel);
    --sidebar-deep: var(--bg);
    --sidebar-card: var(--bg-box);
    --nav-active: var(--selected);
    --dark-card: var(--card);
    --panel-line: var(--line);
    --muted-dark: var(--text-muted);
}

html,
body {
    background-color: var(--bg);
}

body,
.workspace,
.auth-page,
.build-radio-page,
.player-page {
    color: var(--text-app);
    background: var(--bg);
}

.sidebar,
.content-board,
.stats-card,
.frequency-card,
.schedule-card,
.settings-card,
.media-card,
.playlist-card,
.program-card,
.ads-card,
.emissions-card,
.modal-content {
    background: var(--panel);
    border-color: var(--line-soft);
}

.station-player,
.sidebar-card,
.storage,
.form-control,
.form-select,
input,
select,
textarea,
.table > :not(caption) > * > * {
    color: var(--text-app);
    background-color: var(--bg-box);
    border-color: var(--line);
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--text-muted-2);
}

.nav-link:hover,
.submenu-link:hover,
.dropdown-item:hover,
tr:hover > td,
.media-row:hover,
.playlist-row:hover {
    background-color: var(--hover);
}

.nav-link.active,
.submenu-link.active,
.btn-primary,
.tab-button.active,
[aria-selected="true"] {
    background-color: var(--selected);
    border-color: var(--selected);
}

::-webkit-scrollbar-thumb {
    background: var(--hover);
}

* {
    scrollbar-color: var(--hover) transparent;
}