/* ==========================================
   PWA Home Sidebar - Widgets Slide-in Panel
   ========================================== */

/* Sidebar header (hidden on desktop) */
.home-widgets-sidebar-header {
    display: none !important;
}

/* Overlay (hidden on desktop) */
.home-widgets-sidebar-overlay {
    display: none !important;
}

/* Hamburger button (hidden on desktop) */
.home-sidebar-toggle {
    display: none !important;
}

/* ==========================================
   Mobile: home-widgets-pane = sidebar
   ========================================== */
html.device-mobile .home-sidebar-toggle {
    display: flex !important;
}

/* Home grid: single column */
html.device-mobile #view-home.view.active {
    grid-template-columns: 1fr !important;
}

/* Transform home-widgets-pane into a fixed sidebar */
html.device-mobile .home-widgets-pane {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 80% !important;
    max-width: 360px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 200 !important;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    will-change: transform !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    background: var(--ipad-overlay-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    gap: 0 !important;
}

/* Sidebar open state */
html.device-mobile .home-widgets-pane.sidebar-open {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
}

/* Dark mode sidebar */
html.device-mobile body.dark-mode .home-widgets-pane {
    background: #0f0f1a !important;
}

/* Sidebar header with close button */
html.device-mobile .home-widgets-sidebar-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}
html.device-mobile body.dark-mode .home-widgets-sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.device-mobile .home-widgets-sidebar-header span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c1c1e;
}
html.device-mobile body.dark-mode .home-widgets-sidebar-header span {
    color: #f2f2f7;
}

/* Overlay */
html.device-mobile .home-widgets-sidebar-overlay.visible {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 199 !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}
html.device-mobile .home-widgets-sidebar-overlay.visible.show {
    opacity: 1;
}

/* Apps pane: full width */
html.device-mobile .home-apps-pane {
    width: 100% !important;
    max-width: 100% !important;
}

/* Widget cards inside sidebar: proper spacing */
html.device-mobile .home-widgets-pane .widget-card {
    margin: 0 16px 14px 16px;
    width: auto;
    min-height: 0;
    flex-shrink: 0;
}

/* ==========================================
   Mobile Home Layout Reorganization
   ========================================== */

/* Parent wrapper: stack vertically on mobile */
html.device-mobile .home-apps-header > div:first-child {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

/* Logo row: left aligned */
html.device-mobile .home-apps-header > div:first-child > div:first-child {
    justify-content: flex-start !important;
}

/* Action buttons: full row below logo, centered */
html.device-mobile .home-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

/* Greeting: more space above */
html.device-mobile .home-apps-header h1 {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}

/* Apps grid: more space above */
html.device-mobile .apps-grid {
    margin-top: 16px !important;
}

/* ==========================================
   Mobile View Header (non-home views)
   ========================================== */

/* Smaller Voltar/Home buttons */
html.device-mobile .app-header-back-btn {
    padding: 5px 12px 5px 10px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
}
html.device-mobile .app-header-back-btn i,
html.device-mobile .app-header-back-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Hide bell and settings — keep only dark/light toggle */
html.device-mobile .app-header-actions .notification-btn {
    display: none !important;
}
html.device-mobile .app-header-actions button[onclick*="showView('view-perfil')"] {
    display: none !important;
}

/* Smaller gap between left and actions */
html.device-mobile .app-header-bar {
    padding: 0 12px !important;
    gap: 8px !important;
}