/**
 * Operra Shell — Responsive breakpoints
 * Sprint UX-1: Mobile + Tablet + Desktop adaptation
 */

/* ─── Desktop (> 1024px) ────────────────────────────────────── */

@media (min-width: 1025px) {
    .shell-hamburger {
        display: none;
    }

    body.shell-active .shell-header {
        left: 0;
    }

    .shell-user-name {
        display: inline;
    }
}

/* ─── Tablet (768px — 1024px) ───────────────────────────────── */

@media (max-width: 1024px) and (min-width: 769px) {
    .shell-hamburger {
        display: none;
    }

    /* Sidebar collapsed by default on tablet */
    body.shell-active .sidebar {
        width: 56px;
        overflow: hidden;
    }

    body.shell-active .sidebar .sidebar-session,
    body.shell-active .sidebar .nav-section-title,
    body.shell-active .sidebar .sidebar-settings,
    body.shell-active .sidebar .sidebar-footer,
    body.shell-active .sidebar .demo-cta,
    body.shell-active .sidebar .sidebar-divider {
        display: none;
    }

    body.shell-active .sidebar .nav-btn {
        justify-content: center;
        padding: 0.6rem;
    }

    body.shell-active .sidebar .nav-btn span,
    body.shell-active .sidebar .nav-btn i {
        display: none;
    }

    body.shell-active .sidebar .nav-btn svg {
        margin: 0;
    }

    /* Expand on hover */
    body.shell-active .sidebar:hover {
        width: 280px;
        overflow-y: auto;
    }

    body.shell-active .sidebar:hover .sidebar-session,
    body.shell-active .sidebar:hover .nav-section-title,
    body.shell-active .sidebar:hover .sidebar-settings,
    body.shell-active .sidebar:hover .sidebar-footer,
    body.shell-active .sidebar:hover .demo-cta,
    body.shell-active .sidebar:hover .sidebar-divider {
        display: block;
    }

    body.shell-active .sidebar:hover .nav-btn {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem;
    }

    body.shell-active .sidebar:hover .nav-btn span,
    body.shell-active .sidebar:hover .nav-btn i {
        display: inline;
    }

    .shell-tenant {
        display: none;
    }

    .shell-user-name {
        display: none;
    }
}

/* ─── Mobile (< 768px) ──────────────────────────────────────── */

@media (max-width: 768px) {
    .shell-hamburger {
        display: flex;
    }

    body.shell-active .shell-header {
        left: 0;
    }

    /* Sidebar = overlay */
    body.shell-active .sidebar {
        position: fixed;
        left: -280px;
        top: 48px;
        width: 280px;
        height: calc(100vh - 48px);
        z-index: 1050;
        transition: left 0.25s ease;
    }

    body.shell-active .sidebar.open {
        left: 0;
    }

    /* Backdrop */
    .shell-backdrop {
        display: none;
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }

    body.shell-active .sidebar.open ~ .shell-backdrop {
        display: block;
    }

    /* Hide non-essential header items */
    .shell-tenant {
        display: none;
    }

    .shell-breadcrumb {
        display: none;
    }

    .shell-user-name {
        display: none;
    }

    /* Collapse button hidden on mobile */
    .shell-collapse-btn {
        display: none;
    }

    /* Full-width main content */
    body.shell-active .main-content {
        margin-left: 0 !important;
    }
}