/*
 * =================================================================
 * Dashboard Mobile-Specific Styles
 * =================================================================
 * This file contains all CSS overrides for the main dashboard layout
 * on mobile viewports (<= 767px).
 *
 * It is loaded conditionally via a <link> tag in index.html.
 *
 * EVERY RULE in this file MUST use the `!important` declaration
 * to guarantee it overrides any conflicting desktop styles.
 * =================================================================
 */

/*
 * Viewport Overflow Fix
 * ---------------------
 * These rules enforce that the entire dashboard application is contained
 * within the mobile device's viewport, preventing page-level vertical scrolling
 * caused by overflowing child components like Thor Pro.
 */
body.dashboard-view-active {
  overflow: hidden !important; /* Disables scrolling on the body */
  width: 100% !important; /* ADD THIS LINE - ensure full width */
  max-width: 100vw !important; /* ADD THIS LINE - ensure it never exceeds viewport width */
  box-sizing: border-box !important; /* ADD THIS LINE - include padding/border in width calculation */
}

.dashboardContainer {
  height: 100dvh !important; /* Use dynamic viewport height to account for browser UI */
  width: 100% !important;
  max-width: 100vw !important; /* Reinforce viewport width limit */
  overflow: hidden !important; /* Strictly contain all content */
  box-sizing: border-box !important;
}

/*
 * Migrated Layout Styles
 * ---------------------
 */
.main {
  /* This container holds the <Outlet />, which renders child pages. */
  /* We allow it to scroll internally, but it cannot grow larger than its parent. */
  width: 100% !important;
  max-width: 100% !important; /* Ensure main content doesn't exceed its parent */
  overflow-y: auto !important;
  overflow-x: hidden !important; /* Forbid horizontal scrolling within the main content area */
  box-sizing: border-box !important;
  height: 100% !important;
  
  /* Add padding to prevent content from being obscured by fixed header */
  padding-top: 60px !important;    /* Height of MobileHeader */
  padding-bottom: var(--spacing-lg) !important; /* Provide standard bottom spacing */
  margin-left: 0 !important; /* Override any desktop margin styles */
}

/*
 * Migrated Sidebar Styles
 * ---------------------
 * Controls the slide-out drawer behavior on mobile.
 */
.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width-expanded) !important;
    height: 100dvh !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform var(--transition-duration-normal) var(--standard-ease) !important;
    box-shadow: 2px 0 10px rgba(0,0,0,.5) !important;
    max-width: 100vw !important; /* ADD THIS LINE - ensure it never exceeds viewport width */
    box-sizing: border-box !important; /* ADD THIS LINE - include padding/border in width calculation */
    overflow: hidden !important; /* ADD THIS LINE - contain any overflow */
}

.sidebar.mobile-open {
    transform: translateX(0) !important;
}

/* Override desktop collapsed styles on mobile */
.sidebar.collapsed {
    width: var(--sidebar-width-expanded) !important;
}

.sidebar.collapsed .sidebar-link > span:not(.sidebar-icon),
.sidebar.collapsed .sidebar-logout-btn > span:not(.sidebar-icon),
.sidebar.collapsed .user-profile-wallet {
    opacity: 1 !important;
    width: auto !important;
    pointer-events: auto !important;
}

.sidebar.collapsed .sidebar-logo img {
    width: var(--sidebar-logo-width-expanded) !important;
}

/*
 * Migrated Mobile Header Styles
 * -----------------------------
 */
.mobile-header {
    display: flex !important; /* Changed from none to flex */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important; /* ADD THIS LINE - ensure it never exceeds viewport width */
    height: 60px !important;
    background-color: var(--color-background-primary) !important;
    border-bottom: 1px solid var(--color-background-secondary) !important;
    z-index: 1030 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--spacing-md) !important;
    box-sizing: border-box !important; /* ADD THIS LINE - include padding/border in width calculation */
    overflow: hidden !important; /* ADD THIS LINE - contain any overflow */
}

.mobile-header-logo {
    height: 40px !important;
    max-width: calc(100% - 40px) !important; /* ADD THIS LINE - ensure logo doesn't exceed available space */
    overflow: hidden !important; /* ADD THIS LINE - contain any overflow */
}

.mobile-header-logo img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    max-width: 100% !important; /* ADD THIS LINE - ensure image doesn't exceed container */
}

.mobile-header-toggle {
    background: none !important;
    border: none !important;
    color: var(--color-text-primary) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: var(--spacing-xs) !important;
    flex-shrink: 0 !important; /* ADD THIS LINE - prevent button from shrinking */
}