/**
 * Mobile Proper Fix - ONLY affects mobile, preserves desktop
 * 
 * @package SENNA_Launcher
 * @since 4.9.0
 */

/* ===========================================
   DESKTOP PRESERVATION (min-width: 769px)
   =========================================== */

@media screen and (min-width: 769px) {
  /* Ensure desktop login displays normally */
  .login-link {
    position: relative !important;
    display: inline-flex !important;
    background: #1b4332 !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
  }

  .login-link:hover {
    background: #2d6a4f !important;
    transform: translateY(-2px) !important;
  }

  /* Show text, hide icon on desktop */
  .login-text {
    display: inline !important;
  }

  .login-icon {
    display: none !important;
  }

  /* User welcome shows normally on desktop */
  .user-welcome {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
  }
}

/* ===========================================
   MOBILE ONLY FIXES (max-width: 768px)
   =========================================== */

@media screen and (max-width: 768px) {
  /* ===============================
       FULL SCREEN CREAM BACKGROUND
       =============================== */

  /* Body and HTML - full viewport with cream background, NO SCROLLBAR */
  body,
  html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important; /* Hide vertical scrollbar for native app feel */
    background: #faf7f2 !important; /* Cream background */
    position: fixed !important; /* Prevent any scrolling */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* WordPress body classes - ensure cream background */
  body.single,
  body.page,
  body.home {
    background: #faf7f2 !important;
  }

  /* ===============================
       FULL WIDTH CONTAINER
       =============================== */

  /* Remove max-width constraints from launcher container - NO SCROLL */
  .skillfarm-launcher-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #faf7f2 !important; /* Ensure cream background */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important; /* No scrollbars */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Main container - full width, scrollable content */
  .main-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #faf7f2 !important; /* Cream background */
    overflow-y: auto !important; /* Allow internal scrolling */
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Content area - full width */
  .content-area {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important; /* Let parent background show through */
  }

  /* Onboarding steps - full width with padding */
  .onboarding-step {
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Focus content - full width with light cream background */
  .focus-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: #fffdf8 !important; /* Light cream for content */
    border-radius: 0 !important;
    border: none !important;
  }

  /* ===============================
       HEADER WITH LOGIN ICON
       =============================== */

  /* Header container */
  .header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Logo on left */
  .logo-section {
    flex: 0 0 auto !important;
  }

  /* Journey progress centered */
  .journey-progress {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Login icon on far right */
  .login-link {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 2px solid #1b4332 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
  }

  /* Show icon, hide text on mobile */
  .login-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: #1b4332 !important;
    fill: none !important;
  }

  .login-text {
    display: none !important;
  }

  /* Hide user welcome on mobile to save space */
  .user-welcome {
    display: none !important;
  }

  /* ===============================
       VISUAL CARDS - FULL WIDTH
       =============================== */

  /* Visual cards container - edge to edge */
  .visual-cards-container {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* Individual cards */
  .visual-card {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 25px !important;
    box-sizing: border-box !important;
  }

  /* ===============================
       LARGER FONTS FOR MOBILE
       =============================== */

  /* Questions and prompts - bigger */
  .senna-message-line,
  .welcome-message {
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    padding: 20px !important;
  }

  /* Visual card titles */
  .visual-card-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
  }

  /* Visual card descriptions */
  .visual-card-description {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Query input placeholder */
  .query-input,
  input[type="text"],
  input[type="email"] {
    font-size: 1.1rem !important;
    padding: 16px !important;
  }

  /* Buttons */
  .nav-button,
  button {
    font-size: 1.1rem !important;
    padding: 16px 24px !important;
    font-weight: 600 !important;
  }

  /* Quick questions */
  .quick-question {
    font-size: 1rem !important;
    padding: 14px 18px !important;
  }

  /* ===============================
       QUERY PANEL - FULL WIDTH
       =============================== */

  .query-panel {
    width: calc(100% + 40px) !important;
    margin: 20px -20px !important;
    padding: 25px 20px !important;
    box-sizing: border-box !important;
  }

  /* ===============================
       REMOVE SIDE MARGINS/PADDING
       =============================== */

  /* Profile card */
  .profile-card {
    width: calc(100% + 40px) !important;
    margin: 20px -20px !important;
    padding: 25px 20px !important;
  }

  /* Opportunities list */
  .opportunities-list {
    padding: 0 !important;
  }

  .opportunity-match-card {
    margin: 10px !important;
    width: calc(100% - 20px) !important;
  }

  /* Market intel card */
  .market-intel-card {
    width: calc(100% + 40px) !important;
    margin: 20px -20px !important;
    padding: 25px 20px !important;
  }

  /* Network cards */
  .network-cards {
    padding: 0 10px !important;
  }

  /* Priority actions */
  .priority-actions-card {
    width: calc(100% + 40px) !important;
    margin: 20px -20px !important;
    padding: 25px 20px !important;
  }
}

/* ===========================================
   SMALL MOBILE (max-width: 480px)
   =========================================== */

@media screen and (max-width: 480px) {
  /* Even larger fonts for small screens */
  .senna-message-line,
  .welcome-message {
    font-size: 1.3rem !important;
  }

  .visual-card-title {
    font-size: 1.15rem !important;
  }

  /* Smaller login icon for small screens */
  .login-link {
    width: 32px !important;
    height: 32px !important;
    right: 10px !important;
  }

  .login-icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* Compact header */
  .header-container {
    padding: 8px 10px !important;
    min-height: 50px !important;
  }
}

/* ===========================================
   ENSURE LOGIN ICON IS CREATED
   =========================================== */

@media screen and (max-width: 768px) {
  /* Add login icon if it doesn't exist */
  .login-link:not(:has(.login-icon))::before {
    content: "👤";
    font-size: 18px;
    display: block;
  }

  /* Fallback SVG icon */
  .login-icon:empty::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231B4332' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* ===============================
       FIRST STEP CONSISTENCY FIX
       =============================== */

  /* Override desktop-style padding from premium-fixes.css */
  .onboarding-step:first-child.active,
  .onboarding-step:first-child,
  #step-1 {
    padding: 0 10px !important; /* Same as other steps */
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* First step focus content - same styling as other steps */
  .onboarding-step:first-child .focus-content,
  .onboarding-step:first-child.active .focus-content,
  #step-1 .focus-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important; /* Same as other steps */
    box-sizing: border-box !important;
    background: #fffdf8 !important; /* Light cream for content */
    border-radius: 0 !important;
    border: none !important;
    max-width: none !important; /* Remove desktop max-width */
    text-align: center !important; /* Center text on mobile */
  }

  /* First step welcome message - consistent styling */
  .onboarding-step:first-child .welcome-message,
  .onboarding-step:first-child.active .welcome-message,
  #step-1 .welcome-message,
  .onboarding-step:first-child .sfs-message-content,
  .onboarding-step:first-child.active .sfs-message-content,
  #step-1 .sfs-message-content {
    padding: 20px !important; /* Same as senna-message-line */
    margin: 10px 0 !important;
    font-size: 1.25rem !important; /* Same as other steps */
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: center !important; /* Center text on mobile */
    background: transparent !important; /* Remove special background */
  }

  /* First step SENNA intro - consistent styling */
  .onboarding-step:first-child .senna-intro,
  .onboarding-step:first-child.active .senna-intro,
  #step-1 .senna-intro,
  .onboarding-step:first-child .senna-intro p,
  .onboarding-step:first-child.active .senna-intro p,
  #step-1 .senna-intro p {
    padding: 20px !important; /* Same as other message content */
    margin: 10px 0 !important;
    font-size: 1.25rem !important; /* Same as other steps */
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  /* First step - ALL TEXT ELEMENTS - ensure consistent font size */
  .onboarding-step:first-child *,
  .onboarding-step:first-child.active *,
  #step-1 *,
  .onboarding-step:first-child p,
  .onboarding-step:first-child.active p,
  #step-1 p,
  .onboarding-step:first-child div,
  .onboarding-step:first-child.active div,
  #step-1 div,
  .onboarding-step:first-child span,
  .onboarding-step:first-child.active span,
  #step-1 span {
    font-size: 1.25rem !important; /* Force consistent font size */
    line-height: 1.6 !important;
    font-weight: 500 !important;
  }

  /* Override any small font sizes on first step */
  .onboarding-step:first-child [style*="font-size"],
  .onboarding-step:first-child.active [style*="font-size"],
  #step-1 [style*="font-size"] {
    font-size: 1.25rem !important;
  }

  /* ===============================
       ALL STEPS UNIFORM STYLING
       =============================== */

  /* Ensure all onboarding steps have consistent styling */
  .onboarding-step {
    width: 100% !important;
    padding: 0 10px !important; /* Consistent padding for all steps */
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* All focus content sections - uniform styling */
  .focus-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: #fffdf8 !important;
    border-radius: 0 !important;
    border: none !important;
    text-align: center !important;
    max-width: none !important;
  }

  /* All visual cards containers - consistent full width */
  .visual-cards-container {
    width: calc(100% + 20px) !important;
    margin: 20px -10px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* All visual cards - consistent styling */
  .visual-card {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
    padding: 25px !important;
    box-sizing: border-box !important;
  }

  /* All SENNA messages - consistent styling */
  .senna-message-line {
    width: 100% !important;
    padding: 20px !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  /* All welcome messages - consistent styling */
  .welcome-message {
    width: 100% !important;
    padding: 20px !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  /* ===============================
       BACKGROUND OVERRIDES - HIGHEST PRIORITY
       =============================== */

  /* ===============================
       FORCE CREAM BACKGROUND - NUCLEAR OPTION
       =============================== */

  /* Override ALL background styles with maximum specificity */
  body,
  html,
  body[style],
  html[style] {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    background-image: none !important;
    background-attachment: scroll !important;
    background-size: auto !important;
  }

  /* Container overrides - including dynamic inline styles */
  .skillfarm-launcher-container,
  .skillfarm-launcher-container[style],
  .main-container,
  .main-container[style] {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    background-image: none !important;
    background-attachment: scroll !important;
    background-size: auto !important;
  }

  /* Remove overlays completely on mobile */
  .launcher-overlay,
  .welcome-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* HIDE DARK MODE TOGGLE - This was causing the green container! */
  .dark-mode-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Override template inline styles */
  div[style*="background-image"],
  div[style*="background-color"] {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
    background-image: none !important;
  }

  /* Override any containers with green backgrounds */
  [style*="#1B4332"],
  [style*="#2D6A4F"],
  [style*="#718E68"],
  [style*="green"] {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
  }

  /* Ensure opportunities containers don't show green */
  .opportunities-launcher-container,
  .opp-launcher-container,
  .opp-main-container {
    background: #faf7f2 !important;
    background-color: #faf7f2 !important;
  }

  /* ===============================
       HIDE SCROLLBARS FOR NATIVE APP FEEL
       =============================== */

  /* Hide scrollbar for Chrome, Safari and Opera */
  .main-container::-webkit-scrollbar,
  .content-area::-webkit-scrollbar,
  .onboarding-step::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .main-container,
  .content-area,
  .onboarding-step {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Ensure smooth scrolling when needed */
  .main-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}