/* =========================
   RESPONSIVE DESIGN - MINIMALIST
   ========================= */

/* Mobile & Tablet adjustments */
@media (max-width: 992px) {
  /* Layout: Stack Sidebar & Main Content */
  .dashboard {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* Main Content Adjustments */
  .main-content {
    padding: 20px;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100vw; /* Ensure it doesn't exceed viewport width */
    box-sizing: border-box; /* Include padding in width */
  }

  /* Field Responsiveness */
  #field-container {
    width: 100%;
    max-width: 100%;
    align-items: center;
    overflow-x: hidden; /* Prevent field container overflow */
  }

  #field {
    width: 100%;
    max-width: 600px; /* Limit max width on tablets */
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }

  /* Redefine cone positions using percentages for fluid scaling */
  :root {
     /* 
       Original: 800px width. 
       Margin 250px -> 31.25%
       Offset 100px -> 12.5%
     */
     --cone-margin: 31.25%;
     --cone-offset-y: 12.5%;
  }

  /* Adjust cones to use the new percentage variables correctly */
  #cone1 { left: var(--cone-margin); top: calc(var(--cone-margin) + var(--cone-offset-y)); }
  #cone2 { right: var(--cone-margin); top: calc(var(--cone-margin) + var(--cone-offset-y)); }
  #cone3 { left: var(--cone-margin); bottom: calc(var(--cone-margin) - var(--cone-offset-y)); }
  #cone4 { right: var(--cone-margin); bottom: calc(var(--cone-margin) - var(--cone-offset-y)); }
  
  /* Text Wrapping */
  #lineup-container {
    flex-direction: column;
  }
  
  #lineup-text-right {
    margin-top: 20px;
    width: 100%;
  }

  /* Profile Form Left Align */
  #profileForm {
    max-width: 100%;
  }

  /* Calendar View - Hide on mobile, show only upcoming */
  .calendar-main-view {
    display: none;
  }

  .upcoming-sidebar {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Dölj "Kommande event" rubrik på mobil */
  .upcoming-sidebar .sidebar-title {
    display: none;
  }

  /* Dashboard Home Layout - Fix scrolling on mobile */
#dashboard-home {
  height: auto !important; /* Allow content to dictate height */
  min-height: auto;
  display: block; /* Remove flex centering to allow natural flow */
  padding-bottom: 20px;
}

.dashboard-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto; /* Let rows grow naturally */
  padding: 0; /* Remove side padding on mobile */
  gap: 15px;
}

.dashboard-tile {
  min-height: 200px; /* Reduce height slightly on mobile */
}

/* Disable hover effects on touch devices */
.dashboard-tile:hover {
  transform: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  border-color: var(--glass-border) !important;
}

.dashboard-tile:hover .tile-description {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  max-height: 0 !important;
}
}

/* Mobile Specific (< 768px) - BOTTOM NAV BAR */
@media (max-width: 768px) {
  /* Flytta header till botten */
  .main-header {
    top: auto;
    bottom: 0;
    height: 60px; /* Lite lägre höjd på mobil */
    padding: 0 10px;
    grid-template-columns: 1fr; /* Endast en kolumn för menyn */
    background: rgba(10, 12, 16, 0.95); /* Lite mer solid bakgrund */
    border-top: 1px solid var(--glass-border);
    border-bottom: none;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4); /* Skugga uppåt */
  }

  /* Dölj logga och användarprofil/logout */
  .header-logo, 
  .header-user {
    display: none;
  }

  /* Anpassa navigeringen */
  .header-nav {
    width: 100%;
    justify-content: space-between; /* Sprid ut knapparna */
    gap: 0;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* Anpassa länkarna för touch */
  .nav-link {
    font-size: 10px; /* Mindre text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    flex: 1; /* Ta upp lika mycket plats */
  }

  /* Hem-ikonen */
  .nav-home {
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }

  .nav-home svg {
    width: 24px;
    height: 24px;
  }

  /* Justera main content padding så inget döljs bakom bottenmenyn */
  .main-content {
    padding-top: 20px !important;
    padding-bottom: 80px !important; /* Extra utrymme nertill */
  }
  
  /* Justera toggle edit position */
  #toggleEdit {
    top: 20px;
    right: 20px;
  }
}

/* Mobile Specific (< 600px) */
@media (max-width: 600px) {
  .content-section h2 {
    font-size: 24px;
  }
  
  .player-tooltip {
    display: none !important; /* Hide tooltips on touch devices to avoid getting stuck */
  }
  
  /* Admin panels stack */
  #radiusControlPanel,
  #chainAdminPanel {
    width: 90%;
    left: 5%;
    right: 5%;
    bottom: 80px; /* Ovanför menyn */
  }
  
  /* Hide complex controls on mobile if not admin */
  #field-controls {
    top: 5px;
    left: 5px;
  }
}

/* Landing Page Responsiveness */
@media (max-width: 992px) {
  .landing {
    padding: 40px 20px;
    height: auto;
    min-height: 100vh;
  }
  
  .content-wrapper {
    gap: 40px;
  }
  
  .text-column, .logo-column {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
  }
  
  .title {
    font-size: 36px;
  }
  
  .subtitle {
    text-align: center;
  }
  
  .logo-img {
    float: none;
    margin: 0 auto;
    max-width: 80%;
    width: 300px;
    clip-path: none;
    shape-outside: none;
  }
  
  .cta-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .login-dropdown {
    left: 50%;
    /* Override transform for centering */
    transform: translateX(-50%) translateY(-8px) scale(0.98);
    width: 90%;
    max-width: 300px;
  }
  
  .login-dropdown.show {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}