/**
 * MOBILE RESPONSIVE FIX
 * Additional fixes and improvements for mobile layout
 */

/* ===== Z-INDEX HIERARCHY ===== */
/* 
  10000+ Modal dialogs
  999    Hamburger menu button
  998    Sidebar overlay
  997    Overlay backdrop
  1000+  Angular Material dialogs
*/

/* ===== MOBILE MENU BUTTON ===== */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 999 !important;
  background: var(--background-gradient) !important;
  border: none !important;
  border-radius: 10px !important;
  color: white !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(160, 212, 5, 0.3) !important;
  transition: all 0.3s ease !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  outline: none !important;
}

.mobile-menu-toggle:active {
  transform: scale(0.95) !important;
}

.mobile-menu-toggle.active {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%) !important;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
}

.mobile-menu-toggle i {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== MOBILE ONLY (768px and below) ===== */
@media (max-width: 768px) {
  /* SHOW HAMBURGER BUTTON */
  .mobile-menu-toggle {
    display: flex !important;
  }

  /* ===== MAIN APP CONTAINER ===== */
  .app-container {
    display: flex !important;
    min-height: 100vh !important;
    position: relative !important;
  }

  /* ===== SIDEBAR MOBILE OVERLAY ===== */
  .sidebar {
    position: fixed !important;
    width: 280px !important;
    max-width: 100% !important;
    height: 100vh !important;
    left: -280px !important;
    top: 0 !important;
    margin-left: 0 !important;
    z-index: 998 !important;
    transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
    overflow-y: auto !important;
    background: linear-gradient(135deg, #313a42 0%, #2c3e50 100%) !important;
  }

  /* SIDEBAR ACTIVE STATE */
  .sidebar.active {
    left: 0 !important;
  }

  /* ===== OVERLAY BACKDROP ===== */
  .sidebar.active + .main-content::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 997 !important;
    pointer-events: auto;
  }

  /* ===== MAIN CONTENT AREA ===== */
  .main-content {
    position: relative !important;
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 60px !important;
    transition: all 0.3s ease !important;
  }

  /* When sidebar is active, main content should remain visible and interactive */
  .sidebar.active ~ .main-content {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ===== APP CARD ===== */
  .app-card {
    margin: 0.75rem !important;
    border-radius: 20px !important;
    padding: 0.75rem !important;
  }

  /* ===== CONTENT PADDING ===== */
  .title {
    font-size: 1.6rem !important;
    margin: 0.75rem 0 !important;
  }

  .subtitle {
    font-size: 0.95rem !important;
  }

  /* ===== BUTTONS ===== */
  .recording-controls {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .btn-start,
  .btn-stop,
  .btn-clear,
  .btn-download {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
    height: auto !important;
    min-height: 44px !important;
  }

  /* ===== ACTION BUTTONS ===== */
  .action-buttons-section .d-flex {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .btn-action {
    flex: 1 1 calc(50% - 0.25rem) !important;
    min-width: 120px !important;
    max-width: 100% !important;
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    min-height: 52px !important;
    border-radius: 12px !important;
  }

  /* ===== INPUT FIELDS ===== */
  .form-select,
  md-input-container input {
    padding: 10px 12px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  /* ===== SIDEBAR ELEMENTS VISIBILITY ===== */
  .logo-text,
  .nav-text {
    display: inline !important;
  }

  .sidebar-user-section {
    display: block !important;
  }

  .footer-brand {
    display: block !important;
  }

  /* ===== MODALS ===== */
  md-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: auto !important;
    border-radius: 18px !important;
    z-index: 10000 !important;
  }

  md-dialog-content {
    padding: 1.2rem 1rem !important;
  }

  /* ===== AUDIO PLAYERS ===== */
  #audioPlayer,
  #uploadAudioPlayer {
    height: 42px !important;
    border-radius: 10px !important;
  }

  /* ===== FORM FIELDS ===== */
  .field input {
    padding: 10px 12px !important;
    font-size: 16px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
}

/* ===== SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {
  /* ===== SIDEBAR ===== */
  .sidebar {
    width: 100% !important;
  }

  /* ===== MAIN CONTENT ===== */
  .main-content {
    padding-top: 50px !important;
  }

  /* ===== BUTTON SIZING ===== */
  .btn-start,
  .btn-stop,
  .btn-clear {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  /* ===== ACTION BUTTONS ===== */
  .action-buttons-section .d-flex {
    gap: 0.4rem !important;
  }

  .btn-action {
    flex: 1 1 calc(50% - 0.2rem) !important;
    min-width: 100px !important;
    padding: 8px 6px !important;
    font-size: 0.7rem !important;
    min-height: 48px !important;
  }

  /* ===== TYPOGRAPHY ===== */
  .title {
    font-size: 1.4rem !important;
  }

  .output-text {
    font-size: 0.85rem !important;
  }

  /* ===== FORM FIELDS ===== */
  md-input-container input,
  .form-select {
    padding: 8px 10px !important;
    font-size: 15px !important;
    height: 40px !important;
  }

  /* ===== MODALS ===== */
  md-dialog {
    width: 98vw !important;
    max-width: 98vw !important;
  }

  md-dialog-content {
    padding: 0.9rem 0.75rem !important;
  }

  /* ===== SIDEBAR ELEMENTS ===== */
  .logo-text {
    display: none !important;
  }

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

  .sidebar-user-section {
    display: none !important;
  }
}

/* ===== FIX FOR ANGULAR MATERIAL DIALOGS ===== */
.md-dialog-container {
  z-index: 10000 !important;
  border-radius: 18px !important;
}

md-dialog {
  border-radius: 18px !important;
  z-index: 10000 !important;
}

/* ===== PREVENT LAYOUT SHIFT ===== */
html {
  overflow-y: scroll; /* Reserve space for scrollbar */
}

body.sidebar-open {
  overflow: hidden !important;
}

/* ===== SMOOTH TRANSITIONS ===== */
* {
  transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar {
  transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.main-content {
  transition: opacity 0.3s ease !important;
}