:root {
    --bg-dark: #121214;
    --bg-sidebar: #1a1a21;
    --bg-light: #f4f6f9;
    --primary: #2d74ff;
    --text-dark: #333;
    --text-light: #fff;
    --text-muted: #8e8e9e;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }

/* Layout Base */
.dashboard-layout {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
    height: 100vh;
}

/* Header / Topbar */
.topbar {
    grid-area: header; background-color: var(--bg-dark); color: var(--text-light);
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
    z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 20px; }
.logo-text { font-weight: 800; color: var(--primary); font-size: 1.2rem; }
.menu-btn { background: none; border: none; color: var(--text-light); font-size: 1.2rem; cursor: pointer; display: none; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.user-profile { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 0.9rem; }
.avatar { background: var(--primary); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.text-danger { color: #ff4757; cursor: pointer; }

/* Sidebar */
.sidebar {
    grid-area: sidebar; background-color: var(--bg-sidebar); padding: 20px 0;
    transition: transform 0.3s ease;
}
.menu-section { margin-bottom: 20px; }
.menu-section span { display: block; padding: 0 20px; color: var(--text-muted); font-size: 0.75rem; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px; }
.sidebar a {
    display: flex; align-items: center; padding: 12px 20px; color: var(--text-light);
    text-decoration: none; transition: 0.2s; font-size: 0.95rem; gap: 15px;
}
.sidebar a:hover, .sidebar a.active { background-color: rgba(45, 116, 255, 0.1); color: var(--primary); border-left: 3px solid var(--primary); }
.badge-alert { background: #ff4757; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: auto; }

/* Main Content */
.main-content { grid-area: main; padding: 30px; overflow-y: auto; }

/* Welcome Banner */
.welcome-banner {
    background: linear-gradient(135deg, #0a192f 0%, #112240 100%); color: white;
    padding: 30px; border-radius: 15px; margin-bottom: 30px; position: relative; overflow: hidden;
}
.badge-version { background: rgba(45, 116, 255, 0.2); border: 1px solid var(--primary); color: var(--primary); padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }
.welcome-banner h2 { margin: 15px 0 5px 0; font-size: 1.8rem; }
.welcome-banner p { color: #a0a0a0; font-size: 0.9rem; margin-bottom: 20px; }
.user-greeting { display: flex; align-items: center; gap: 10px; color: var(--primary); }

/* Cards Grid */
.section-title { font-size: 1.1rem; color: #555; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.stat-card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; justify-content: space-between; align-items: center; }
.stat-info span { font-size: 0.75rem; color: var(--text-muted); font-weight: bold; display: block; margin-bottom: 5px; }
.stat-info h4 { font-size: 1.8rem; color: var(--text-dark); }
.stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; }
.bg-blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.bg-red { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); }
.bg-green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

/* Responsividade Mobile */
@media (max-width: 768px) {
    .dashboard-layout {
        grid-template-areas: 
            "header"
            "main";
        grid-template-columns: 1fr;
    }
    .menu-btn { display: block; }
    .sidebar {
        position: fixed; top: 60px; left: 0; height: calc(100vh - 60px);
        width: 250px; transform: translateX(-100%); z-index: 9;
    }
    .sidebar.show { transform: translateX(0); }
}