/* ============================================================
   AEMS v2.0 Visual Override Layer — SAFE VERSION
   Only fixes specific known issues. No global !important destruction.
   ============================================================ */

/* ---- 1. TOPBAR: sticky positioning (set in aems.css, not overridden here) ---- */
/* Removed fixed position override — aems.css handles topbar correctly with position:sticky */

/* ---- 2. SIDEBAR ACTIVE STATE ---- */
.aems-nav-item.active {
    background: var(--clr-accent);
    color: var(--clr-accent-contrast);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
}

.aems-nav-item.active .aems-icon {
    color: var(--clr-accent-contrast);
}

/* ---- 3. HERO PADDING (pages without explicit hero styles) ---- */
.hero:not([style*="padding"]) {
    padding: 80px 24px 120px;
}

/* ---- 4. CONTENT PADDING (aems.css handles this, not overridden here) ---- */

.aems-public-content {
    padding: var(--space-6);
    max-width: var(--content-max);
    margin: 0 auto;
}

/* ---- 5. BUTTON CAPSULE (only if not already set) ---- */
.btn-primary:not([style*="border-radius"]) {
    border-radius: var(--radius-full);
}

/* ---- 6. CARD ELEVATION (only bare cards) ---- */
.card:not([style*="background"]):not([style*="border"]) {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--shadow-card);
}

/* ---- 7. MODAL/DROPDOWN BASE ---- */
.aems-modal {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-card-border);
    box-shadow: var(--shadow-modal);
}

.aems-dropdown {
    background: var(--clr-surface-raised);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-dropdown);
}

/* ---- 8. RESPONSIVE ---- */
@media (max-width: 768px) {
    .aems-app-main {
        margin-left: 0;
    }
    
    .aems-sidebar {
        transform: translateX(-100%);
    }
    
    .aems-sidebar.open {
        transform: translateX(0);
    }
    
    .hero {
        padding: var(--space-10) var(--space-4) var(--space-16);
    }
    
    .aems-public-content {
        padding: var(--space-4);
    }
}