/**
 * CMBE Vote Center — couche visuelle professionnelle
 * S’appuie sur les tokens de app-theme.css
 */

/* ─── Fond & ambiance ─── */
body {
    background: var(--app-bg) !important;
    background-image:
        radial-gradient(ellipse 120% 80% at 100% -20%, var(--app-glow-1), transparent 50%),
        radial-gradient(ellipse 80% 60% at 0% 100%, var(--app-glow-2), transparent 45%) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-main {
    position: relative;
}

/* ─── Cartes & surfaces globales ─── */
.card {
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-sm) !important;
    background: var(--app-surface) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.card:hover {
    box-shadow: var(--app-shadow) !important;
}

.card-header {
    font-weight: 700;
    letter-spacing: .02em;
}

.btn {
    font-weight: 600;
    letter-spacing: .02em;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.btn:active:not(:disabled) {
    transform: scale(.98);
}

.btn-primary,
.btn-success {
    background: linear-gradient(180deg, var(--app-primary) 0%, var(--app-primary-deep) 100%) !important;
    border-color: var(--app-primary-deep) !important;
    box-shadow: 0 2px 8px rgba(11, 104, 68, .25);
}

.btn-primary:hover,
.btn-success:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 14px rgba(11, 104, 68, .32);
}

.alert {
    border: 1px solid transparent !important;
    backdrop-filter: blur(6px);
}

/* ─── Topbar application ─── */
.app-topbar {
    backdrop-filter: blur(12px);
    background: var(--app-surface-glass) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-sm) !important;
    padding: .85rem 1.15rem !important;
    border-radius: var(--app-radius-lg) !important;
}

.app-topbar h4 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.app-topbar h4::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.1em;
    margin-right: .55rem;
    vertical-align: -.15em;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--app-primary), var(--app-accent));
}

.topbar-search {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.topbar-search .btn-dark {
    background: var(--app-navy) !important;
    border-color: var(--app-navy) !important;
}

.user-pill {
    box-shadow: var(--app-shadow-sm);
}

/* ─── Sidebar premium ─── */
.sidebar {
    background: var(--app-sidebar) !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, .18) !important;
}

.sidebar-brand {
    position: relative;
}

.sidebar-brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: .35rem;
    right: .35rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
}

.sidebar .nav-link {
    border-radius: var(--app-radius-md) !important;
    position: relative;
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(13, 110, 58, .35) 0%, rgba(13, 110, 58, .12) 100%) !important;
    box-shadow: inset 3px 0 0 var(--app-primary-glow);
}

.sidebar-theme-bar .theme-toggle-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

/* ─── Bascule theme professionnelle ─── */
.cmbe-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.cmbe-theme-switch-track {
    position: relative;
    width: 3.25rem;
    height: 1.65rem;
    border-radius: 999px;
    background: var(--app-switch-track);
    border: 1px solid var(--app-switch-border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
    transition: background .25s ease, border-color .25s ease;
    flex-shrink: 0;
}

.cmbe-theme-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}

[data-theme="dark"] .cmbe-theme-switch-knob {
    transform: translateX(1.55rem);
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.cmbe-theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    line-height: 1;
    pointer-events: none;
    transition: opacity .2s ease;
}

.cmbe-theme-icon-sun {
    left: .42rem;
    color: #f59e0b;
    opacity: 1;
}

.cmbe-theme-icon-moon {
    right: .4rem;
    color: #93c5fd;
    opacity: .45;
}

[data-theme="dark"] .cmbe-theme-icon-sun { opacity: .35; }
[data-theme="dark"] .cmbe-theme-icon-moon { opacity: 1; }

.cmbe-theme-switch-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

.theme-label-dark { display: none; }
[data-theme="dark"] .theme-label-light { display: none; }
[data-theme="dark"] .theme-label-dark { display: inline; }

/* FAB premium */
.cmbe-theme-fab {
    padding: .5rem .65rem .5rem .5rem !important;
    border-radius: var(--app-radius-lg) !important;
    background: var(--app-surface-glass) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-lg), 0 0 0 1px rgba(255, 255, 255, .05) inset !important;
}

.cmbe-theme-fab .cmbe-theme-switch-track {
    width: 2.85rem;
    height: 1.5rem;
}

.cmbe-theme-fab .cmbe-theme-switch-knob {
    width: 1.22rem;
    height: 1.22rem;
}

[data-theme="dark"] .cmbe-theme-fab .cmbe-theme-switch-knob {
    transform: translateX(1.38rem);
}

.cmbe-theme-fab .fab-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
    padding-right: .35rem;
}

.cmbe-theme-fab .theme-label-dark { display: none; }
[data-theme="dark"] .cmbe-theme-fab .theme-label-light { display: none; }
[data-theme="dark"] .cmbe-theme-fab .theme-label-dark { display: inline; }

.cmbe-theme-fab:hover {
    border-color: var(--app-primary) !important;
    box-shadow: var(--app-shadow-lg), 0 0 20px var(--app-primary-glow-soft) !important;
}

/* Topbar & dashboard theme controls */
.app-topbar .cmbe-theme-switch,
.dashboard-topbar .cmbe-theme-switch,
.dashboard-tv-toolbar .cmbe-theme-switch {
    padding: .35rem .55rem;
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
}

.dashboard-topbar .cmbe-theme-switch,
.dashboard-tv-toolbar .cmbe-theme-switch {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
}

.dashboard-topbar .cmbe-theme-switch-label,
.dashboard-tv-toolbar .cmbe-theme-switch-label {
    color: rgba(255, 255, 255, .85);
}

.sidebar-theme-bar .cmbe-theme-switch {
    width: 100%;
    justify-content: space-between;
    padding: .55rem .65rem;
    border-radius: var(--app-radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%);
    border: 1px solid rgba(255, 255, 255, .18);
}

.sidebar-theme-bar .cmbe-theme-switch-label {
    color: rgba(255, 255, 255, .88);
}

/* ─── Dashboard pro ─── */
.dashboard-page {
    border-radius: var(--app-radius-lg) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-lg) !important;
    overflow: hidden;
    position: relative;
}

.dashboard-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-accent), var(--app-primary));
    z-index: 1;
    pointer-events: none;
}

.dashboard-topbar {
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--app-shadow-md), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    position: relative;
    overflow: hidden;
}

.dashboard-topbar::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 40%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, .06) 0%, transparent 70%);
    pointer-events: none;
}

.hero-chip {
    backdrop-filter: blur(8px);
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.hero-chip.is-live {
    box-shadow: 0 0 16px rgba(74, 222, 128, .25);
}

.perf-ultra-card {
    border-radius: var(--app-radius-md) !important;
    transition: transform .18s ease, box-shadow .2s ease !important;
}

.perf-ultra-card:hover {
    transform: translateY(-2px);
}

.perf-ultra-card.is-hero {
    box-shadow: var(--app-shadow-md), 0 0 24px rgba(15, 27, 45, .2) !important;
}

.kpi-card-ultra,
.kpi-card,
.section-card {
    border-radius: var(--app-radius-md) !important;
    overflow: hidden;
}

.section-card .card-header {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
}

.nb-board {
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--app-shadow-lg) !important;
    overflow: hidden;
}

.nb-board-head {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.nb-kpi {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nb-kpi:hover {
    box-shadow: var(--app-shadow-sm);
    border-color: var(--app-border-strong) !important;
}

.board-strip {
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .14em;
}

.details-board {
    border-radius: var(--app-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--app-shadow-md) !important;
}

.situation-board {
    border-radius: var(--app-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--app-shadow-md) !important;
}

[data-theme="dark"] .perf-ultra-card .perf-ring {
    background: conic-gradient(var(--ring-color, var(--app-primary-glow)) calc(var(--ring-pct) * 1%), rgba(255, 255, 255, .1) 0) !important;
}

[data-theme="dark"] .perf-ultra-card .perf-ring::after {
    background: var(--pro-surface, var(--app-surface)) !important;
}

[data-theme="dark"] .perf-ultra-card .perf-ring span {
    color: var(--app-text) !important;
}

[data-theme="light"] .perf-ultra-card .perf-ring::after {
    background: var(--pro-surface) !important;
}

[data-theme="light"] .perf-ultra-card .perf-ring span {
    color: var(--app-text) !important;
}

/* Tables pro */
.table-tight thead th,
.nb-table thead th,
.result-table thead th {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .7rem !important;
}

/* Guest login */
body.guest-layout {
    background-image:
        radial-gradient(ellipse 100% 70% at 50% -10%, var(--app-glow-1), transparent 55%),
        radial-gradient(ellipse 60% 50% at 100% 100%, var(--app-glow-2), transparent 50%) !important;
}

body.guest-layout .card {
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--app-shadow-lg) !important;
    border: 1px solid var(--app-border) !important;
}

body.guest-layout h3 {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Transition douce au changement de theme */
html.theme-transitioning,
html.theme-transitioning * {
    transition: background-color .35s ease, color .25s ease, border-color .3s ease, box-shadow .3s ease !important;
}

@media (max-width: 575.98px) {
    .cmbe-theme-fab .fab-label,
    .app-topbar .cmbe-theme-switch-label {
        display: none;
    }
}

/* Mode clair — ambiance contenu principal */
[data-theme="light"] .app-main {
    background: transparent;
}

[data-theme="light"] .sidebar {
    box-shadow: 4px 0 24px rgba(15, 23, 42, .06) !important;
}

/* Mode sombre — surfaces plus lisibles */
[data-theme="dark"] .app-topbar {
    background: var(--app-surface-glass) !important;
    border-color: var(--app-border-strong) !important;
}

[data-theme="dark"] .card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

[data-theme="dark"] .nb-board {
    box-shadow: var(--app-shadow-lg), 0 0 0 1px var(--app-border) !important;
}

[data-theme="dark"] .cmbe-theme-fab {
    border-color: var(--app-border-strong) !important;
    background: var(--app-surface-glass) !important;
    color: var(--app-text) !important;
}