/**
 * VITALSIM — couche design Volt (web/template)
 * Thèmes clair / sombre via body.vs-theme-light | body.vs-theme-dark
 */

/* ----- Palette Volt (réf. template/src/scss/volt/_variables.scss) ----- */
:root {
    --volt-primary: #262b40;
    --volt-secondary: #f0bc74;
    --volt-success: #10b981;
    --volt-info: #2361ce;
    --volt-danger: #e11d48;
    --volt-soft: #f2f4f6;
    --volt-gray-100: #f2f4f6;
    --volt-gray-200: #e5e7eb;
    --volt-gray-500: #6b7280;
    --volt-gray-800: #1f2937;
    --volt-accent: #2ca58d;
    --volt-radius: 0.5rem;
    --volt-radius-lg: 0.75rem;
    --volt-shadow: 0 0.125rem 0.25rem rgba(38, 43, 64, 0.07);
    --volt-shadow-lg: 0 1rem 2rem rgba(38, 43, 64, 0.12);
    --volt-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.vs-theme-dark {
    --vs-bg: #111827;
    --vs-surface: #1f2937;
    --vs-surface-hover: #374151;
    --vs-border: rgba(255, 255, 255, 0.08);
    --vs-border-focus: rgba(44, 165, 141, 0.55);
    --vs-teal: #2ca58d;
    --vs-teal-dim: #248f7a;
    --vs-text: #f9fafb;
    --vs-muted: #9ca3af;
    --vs-card-bg: #1f2937;
    --vs-card-border: rgba(255, 255, 255, 0.1);
    --vs-card-text: #f3f4f6;
    --vs-card-header-bg: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    --vs-sidebar-bg: #262b40;
    --vs-topbar-bg: rgba(31, 41, 55, 0.92);
}

body.vs-theme-light {
    --vs-bg: var(--volt-gray-100);
    --vs-surface: #ffffff;
    --vs-surface-hover: #f3f4f6;
    --vs-border: rgba(38, 43, 64, 0.1);
    --vs-border-focus: rgba(38, 43, 64, 0.35);
    --vs-teal: var(--volt-primary);
    --vs-teal-dim: var(--volt-primary);
    --vs-text: var(--volt-gray-800);
    --vs-muted: var(--volt-gray-500);
    --vs-card-bg: #ffffff;
    --vs-card-border: var(--volt-gray-200);
    --vs-card-text: var(--volt-gray-800);
    --vs-card-header-bg: linear-gradient(180deg, #ffffff 0%, var(--volt-gray-100) 100%);
    --vs-sidebar-bg: #ffffff;
    --vs-topbar-bg: rgba(255, 255, 255, 0.95);
}

/* ----- Typographie & base ----- */
body {
    font-family: var(--volt-font) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--volt-font);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ----- Sidebar style Volt ----- */
.admin-sidebar {
    background: var(--vs-sidebar-bg, var(--vs-surface)) !important;
    box-shadow: var(--volt-shadow);
}

body.vs-theme-dark .admin-sidebar {
    background: var(--volt-primary) !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

.admin-sidebar .sidebar-brand .brand {
    color: #fff !important;
    font-weight: 700;
}

body.vs-theme-light .admin-sidebar .sidebar-brand .brand {
    color: var(--volt-primary) !important;
}

body.vs-theme-dark .admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    border-radius: var(--volt-radius);
    margin: 0 0.5rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

body.vs-theme-dark .admin-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body.vs-theme-dark .admin-sidebar .nav-link.active {
    background: rgba(44, 165, 141, 0.22);
    color: #fff;
    border-left: none;
    box-shadow: inset 3px 0 0 var(--volt-accent);
    padding-left: calc(0.85rem - 3px);
}

body.vs-theme-light .admin-sidebar .nav-link.active {
    background: rgba(38, 43, 64, 0.08);
    color: var(--volt-primary);
    border-left: none;
    box-shadow: inset 3px 0 0 var(--volt-primary);
    padding-left: calc(1.25rem - 3px);
}

.admin-sidebar .nav-section-label {
    color: var(--vs-muted);
    opacity: 0.85;
}

body.vs-theme-dark .admin-sidebar .nav-section-label,
body.vs-theme-dark .admin-sidebar .sidebar-user-name,
body.vs-theme-dark .admin-sidebar .user-bar .logout-link {
    color: rgba(255, 255, 255, 0.55);
}

body.vs-theme-dark .admin-sidebar .sidebar-user-name {
    color: rgba(255, 255, 255, 0.9);
}

/* ----- Topbar ----- */
.admin-topbar {
    background: var(--vs-topbar-bg) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vs-border);
    box-shadow: var(--volt-shadow);
}

.admin-topbar .topbar-title {
    font-weight: 600;
    font-size: 1.15rem;
    flex: 1;
    min-width: 0;
}

.admin-topbar {
    align-items: center;
    gap: 0.75rem;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.vs-theme-toggle {
    border: 1px solid var(--vs-border);
    background: var(--vs-surface);
    color: var(--vs-teal);
    border-radius: var(--volt-radius);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vs-theme-toggle:hover {
    background: var(--vs-surface-hover);
    color: var(--volt-accent);
    border-color: var(--vs-border-focus);
}

body.vs-theme-dark .vs-theme-toggle {
    background: rgba(255, 255, 255, 0.06);
    color: #fbbf24;
    border-color: rgba(255, 255, 255, 0.12);
}

/* ----- Cartes & contenus ----- */
.card,
.vs-card,
.card-vitalsim {
    border-radius: var(--volt-radius-lg) !important;
    box-shadow: var(--volt-shadow) !important;
    border: 1px solid var(--vs-card-border, var(--vs-border)) !important;
}

.admin-content .card-header,
.vs-card-header {
    border-radius: var(--volt-radius-lg) var(--volt-radius-lg) 0 0;
    font-weight: 600;
}

.btn-primary,
.btn-vs,
.btn-teal {
    background: var(--volt-accent) !important;
    border-color: var(--volt-accent) !important;
    font-weight: 600;
    border-radius: var(--volt-radius);
}

.btn-primary:hover,
.btn-vs:hover,
.btn-teal:hover {
    background: #248f7a !important;
    border-color: #248f7a !important;
}

body.vs-theme-light .btn-primary {
    background: var(--volt-primary) !important;
    border-color: var(--volt-primary) !important;
}

body.vs-theme-light .btn-primary:hover {
    background: #1a2035 !important;
    border-color: #1a2035 !important;
}

/* ----- Tables ----- */
.table-vitalsim {
    border-radius: var(--volt-radius-lg);
    overflow: hidden;
}

/* ----- Modales ----- */
.modal-content {
    border-radius: var(--volt-radius-lg);
    border: 1px solid var(--vs-border);
    box-shadow: var(--volt-shadow-lg);
}

body.vs-theme-dark .modal-content {
    background: var(--vs-surface);
    color: var(--vs-text);
}

/* ----- Toasts rectangulaires (détail dans admin-polish.css) ----- */

/* ----- Back to top ----- */
.vs-back-top {
    border: 1px solid var(--vs-border);
    background: var(--vs-surface) !important;
    color: var(--volt-accent) !important;
    box-shadow: var(--volt-shadow-lg) !important;
}

/* ========== Pages authentification (Volt sign-in) ========== */
body.vs-auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--volt-soft) !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(44, 165, 141, 0.12), transparent),
        linear-gradient(180deg, var(--volt-gray-100) 0%, #e8ecf2 100%) !important;
    color: var(--volt-gray-800);
}

body.vs-auth-page.vs-theme-dark {
    background: #111827 !important;
    background-image:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(44, 165, 141, 0.15), transparent),
        linear-gradient(180deg, #111827 0%, #1f2937 100%) !important;
    color: #f9fafb;
}

.vs-auth-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.vs-auth-card {
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border: 0;
    border-radius: var(--volt-radius-lg);
    box-shadow: var(--volt-shadow-lg);
    padding: 2rem 2rem 1.75rem;
}

body.vs-auth-page.vs-theme-dark .vs-auth-card {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    color: var(--vs-text);
}

.vs-auth-card .form-control {
    border-radius: var(--volt-radius);
    padding: 0.65rem 0.85rem;
    border-color: var(--volt-gray-200);
}

body.vs-auth-page.vs-theme-dark .vs-auth-card .form-control {
    background: rgba(0, 0, 0, 0.25);
    border-color: var(--vs-border);
    color: var(--vs-text);
}

.vs-auth-card .btn-primary {
    border-radius: var(--volt-radius);
    padding: 0.65rem 1rem;
    width: 100%;
    font-weight: 600;
}

.vs-auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.vs-auth-brand img {
    max-height: 64px;
    object-fit: contain;
}

.vs-auth-brand h1 {
    font-size: 1.35rem;
    margin: 0.75rem 0 0;
    font-weight: 700;
}

.vs-auth-toolbar {
    position: fixed;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    z-index: 100;
    display: flex;
    gap: 0.5rem;
}

/* Compat anciennes pages login SB Admin */
body.vs-auth-page.bg-gradient-primary {
    background-image: none !important;
}

body.vs-auth-page .card.o-hidden {
    border: none;
    box-shadow: var(--volt-shadow-lg);
    border-radius: var(--volt-radius-lg);
}

/* ========== Pages publiques (join, maintenance…) ========== */
body.vs-public-page {
    min-height: 100vh;
    background: var(--vs-bg);
    color: var(--vs-text);
}

body.vs-public-page .join-form-panel,
body.vs-public-page .vs-public-panel {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--volt-radius-lg);
    box-shadow: var(--volt-shadow);
    color: var(--vs-text);
}

body.vs-public-page .join-form-panel .form-label {
    color: var(--vs-muted);
}

body.vs-public-page .join-form-panel .form-control {
    background: var(--vs-bg);
    border-color: var(--vs-border);
    color: var(--vs-text);
}

body.vs-public-page .join-form-panel .form-control:focus {
    border-color: var(--volt-accent);
    box-shadow: 0 0 0 3px rgba(44, 165, 141, 0.2);
}

body.vs-public-page .join-step-badge,
body.vs-public-page .badge.join-step-badge {
    background: var(--volt-accent) !important;
}

body.vs-public-page .text-secondary {
    color: var(--vs-muted) !important;
}

.vs-public-header {
    margin-bottom: 2rem;
}

.vs-public-header h1 {
    font-weight: 700;
}

.vs-public-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

body.vs-theme-dark.vs-public-page {
    --vs-bg: #111827;
}

body.vs-theme-light.vs-public-page {
    --vs-bg: #f2f4f6;
}

/* join legacy class */
body.join-page-bg {
    background: var(--vs-bg) !important;
}

/* ----- Footer admin ----- */
.admin-footer {
    border-top: 1px solid var(--vs-border);
    padding-top: 1rem;
    margin-top: auto;
}

.admin-footer a {
    color: var(--vs-muted);
    margin-right: 1rem;
}

.admin-footer a:hover {
    color: var(--volt-accent);
}

/* ----- Formulaires admin ----- */
.form-control-vitalsim,
.form-select-vitalsim {
    border-radius: var(--volt-radius);
}

/* ----- KPI / stat tiles polish ----- */
.stat-tile,
.vs-kpi {
    border-radius: var(--volt-radius-lg);
    box-shadow: var(--volt-shadow);
}

/* ----- Scrollbar discrète ----- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.35) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.35);
    border-radius: 999px;
}

/* ----- Changelog aligné ----- */
body.vs-public-page.cl-page {
    --cl-navy: var(--volt-primary);
    --cl-accent: var(--volt-accent);
}