/* ═══════════════════════════════════════════════════════════════
   CFO-Connect Theme — Base para Governança de TI
   Tema escuro, glassmorphism, vinho/vermelho
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Cores base (dark) — sobrescreve app.css para tema cfo-connect */
    --background: hsl(220, 15%, 7%);
    --foreground: hsl(0, 0%, 96%);
    --card: hsl(220, 15%, 10%);
    --card-foreground: hsl(0, 0%, 96%);
    --border: hsl(220, 10%, 18%);
    --muted-foreground: hsl(215, 15%, 60%);
    /* Vinho / primário */
    --primary: hsl(345, 70%, 35%);
    --primary-foreground: hsl(0, 0%, 98%);
    --secondary: hsl(345, 50%, 18%);
    --wine: hsl(345, 70%, 35%);
    --wine-dark: hsl(340, 65%, 17%);
    --wine-deep: hsl(340, 70%, 12%);
    --red-accent: hsl(0, 72%, 51%);
    --gold: #D4A03C;
    --gold-light: #E8C266;

    /* Sidebar — uses --wine-dark from theme.css so admin color picker works */
    --sidebar-bg: var(--wine-dark, hsl(220, 15%, 10%));
    --sidebar-foreground: hsl(0, 0%, 92%);
    --sidebar-border: hsla(0,0%,100%,0.06);
    --sidebar-width: 64px;

    /* Utilitários */
    --radius: 1rem;
    --radius-sm: 0.75rem;
    --font-display: 'Exo 2', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ── Override body e variáveis para tema escuro ── */
body.cfo-connect-theme {
    --bg: hsl(220, 15%, 7%);
    --bg-card: hsl(220, 15%, 10%);
    --text: hsl(0, 0%, 96%);
    --text-light: hsl(215, 15%, 70%);
    --text-muted: hsl(215, 15%, 60%);
    --border-light: hsl(220, 10%, 15%);
    background: var(--background) !important;
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
}

body.cfo-connect-theme h1, body.cfo-connect-theme h2, body.cfo-connect-theme h3,
body.cfo-connect-theme h4, body.cfo-connect-theme h5, body.cfo-connect-theme h6 {
    font-family: var(--font-display) !important;
    color: var(--foreground) !important;
}

/* ── Glassmorphism ── */
.glass {
    background: hsla(220, 15%, 10%, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsla(0, 0%, 100%, 0.06);
}

.glass-wine {
    background: hsla(340, 65%, 17%, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid hsla(345, 70%, 35%, 0.2);
}

/* ── Mesh gradient (hero) ── */
@keyframes mesh-move {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.mesh-gradient {
    background: linear-gradient(135deg,
        hsl(340, 65%, 17%) 0%,
        hsl(345, 70%, 28%) 25%,
        hsl(0, 72%, 35%) 50%,
        hsl(345, 70%, 28%) 75%,
        hsl(340, 65%, 17%) 100%
    );
    background-size: 400% 400%;
    animation: mesh-move 12s ease-in-out infinite;
}

/* ── Layout cfo-connect ── */
.app-layout.cfo-connect-layout {
    display: flex;
    min-height: 100vh;
    background: var(--background);
}

body.cfo-connect-theme .sidebar-icon {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}

.app-layout.cfo-connect-layout .main-content {
    margin-left: var(--sidebar-width) !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-left: 0 !important;
}

/* ── Topbar glass ── */
.app-layout.cfo-connect-layout .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    height: 56px !important;
    background: hsla(220, 15%, 10%, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.06) !important;
    color: var(--foreground) !important;
}

.app-layout.cfo-connect-layout .topbar-title,
.app-layout.cfo-connect-layout .topbar-brand .topbar-title {
    color: var(--foreground) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
}

.app-layout.cfo-connect-layout .user-name,
.app-layout.cfo-connect-layout .topbar-icon {
    color: var(--muted-foreground) !important;
}

.app-layout.cfo-connect-layout .user-role {
    background: hsla(345, 70%, 35%, 0.3) !important;
    color: var(--primary-foreground) !important;
}

/* ── Content area ── */
.app-layout.cfo-connect-layout .content-area {
    flex: 1;
    padding: 1.5rem 1.5rem 2rem !important;
    background: var(--background);
}

/* ── Cards escuros ── */
body.cfo-connect-theme .home-card,
body.cfo-connect-theme .home-sala-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--card-foreground) !important;
}

body.cfo-connect-theme .home-card:hover,
body.cfo-connect-theme .home-sala-card:hover {
    border-color: hsla(345, 70%, 35%, 0.3) !important;
    box-shadow: 0 0 20px 4px hsla(345, 70%, 35%, 0.15) !important;
}

body.cfo-connect-theme .home-section-title,
body.cfo-connect-theme .home-card-title {
    color: var(--foreground) !important;
}

body.cfo-connect-theme .home-section-title .material-icons-outlined,
body.cfo-connect-theme .home-card-title .material-icons-outlined {
    color: var(--primary) !important;
}

body.cfo-connect-theme .home-card-link,
body.cfo-connect-theme a[href] {
    color: var(--primary) !important;
}

body.cfo-connect-theme .home-card-link:hover {
    color: var(--gold-light) !important;
}

/* ── Hero section (mesh gradient) ── */
.hero-cfo-connect {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.hero-cfo-connect .hero-inner {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.hero-cfo-connect .hero-inner.mesh-gradient {
    padding: 1.5rem 1.5rem 2rem;
}

/* ── Floormap / equipe ── */
body.cfo-connect-theme .floormap-container {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

body.cfo-connect-theme .home-mapa-legenda {
    color: var(--muted-foreground) !important;
}

/* ── Footer ── */
body.cfo-connect-theme .home-footer {
    border-top-color: var(--border) !important;
    color: var(--muted-foreground) !important;
}

/* ── Scrollbar ── */
body.cfo-connect-theme ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.cfo-connect-theme ::-webkit-scrollbar-track {
    background: var(--background);
}

body.cfo-connect-theme ::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

/* Mobile: sidebar stays visible (icon only is small enough) */
@media (max-width: 768px) {
    .app-layout.cfo-connect-layout .main-content {
        margin-left: var(--sidebar-width) !important;
    }
}