/* ═══════════════════════════════════════════════════════════
   VigilSaaS — styles.css v3
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────── */
vaadin-app-layout::part(drawer) {
    background-color: var(--vs-sidebar-bg, #8B0A0A) !important;
    border-right: none !important;
}

/* ── Menú: TODOS los textos visibles ─────────────────────── */
vaadin-side-nav,
vaadin-side-nav *,
vaadin-side-nav-item,
vaadin-side-nav-item::part(item),
vaadin-side-nav-item::part(label),
vaadin-side-nav-item::part(link),
vaadin-side-nav-item > *,
vaadin-side-nav-item span,
vaadin-side-nav-item a {
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 13px !important;
}

vaadin-side-nav-item::part(item) {
    border-radius: 6px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
    transition: background 0.15s;
}

vaadin-side-nav-item::part(item):hover,
vaadin-side-nav-item[active]::part(item) {
    background-color: var(--vs-sidebar-active, rgba(255,255,255,0.18)) !important;
    color: #ffffff !important;
}

vaadin-side-nav-item[active]::part(label),
vaadin-side-nav-item[active] span,
vaadin-side-nav-item[active] a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Íconos del menú */
vaadin-side-nav-item vaadin-icon,
vaadin-side-nav-item iron-icon,
vaadin-side-nav-item [slot="prefix"] {
    color: rgba(255, 255, 255, 0.80) !important;
    fill: rgba(255, 255, 255, 0.80) !important;
}

vaadin-side-nav-item[active] vaadin-icon,
vaadin-side-nav-item[active] [slot="prefix"] {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Título "GuardSaaS" en el drawer */
vaadin-app-layout::part(drawer) h1,
vaadin-app-layout::part(drawer) h2,
vaadin-app-layout::part(drawer) h3,
vaadin-app-layout::part(drawer) span,
vaadin-app-layout::part(drawer) div {
    color: #ffffff !important;
}

/* ── Topbar / Navbar ─────────────────────────────────────── */
vaadin-app-layout::part(navbar) {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Forzar texto oscuro en topbar */
vaadin-app-layout::part(navbar) *,
vaadin-app-layout [slot="navbar"],
vaadin-app-layout [slot="navbar"] *,
vaadin-drawer-toggle {
    color: #333333 !important;
}

/* ── Fondo del contenido ─────────────────────────────────── */
vaadin-app-layout::part(content) {
    background-color: var(--vs-page-bg, #f5f5f5) !important;
}

/* ── Botones primarios ───────────────────────────────────── */
vaadin-button[theme~="primary"] {
    background-color: var(--vs-accent, #c51a1a) !important;
    color: #ffffff !important;
    border-color: var(--vs-accent, #c51a1a) !important;
}

/* ── Grid header ─────────────────────────────────────────── */
vaadin-grid::part(header-cell) {
    background-color: var(--vs-table-header-bg, #8B0A0A) !important;
    color: var(--vs-table-header-color, #ffffff) !important;
    font-weight: 500 !important;
}