/**
 * Damage Code Tool - Mobile Navigation Fix
 * Overrides shared nav to create clean single-line topbar
 */

@media (max-width: 768px) {
  /* ========================================
     COMPREHENSIVE MOBILE TOPBAR FIX
     ======================================== */

  /* Hide the original damage-header (we'll show brand in topbar) */
  .damage-header {
    display: none !important;
  }

  /* Show mobile-topbar-logo and style it for brand text */
  .mobile-topbar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important; /* Take available space */
    min-width: 0 !important; /* Allow shrinking */
    order: 1 !important; /* After hamburger, before user controls */
    padding: 0 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hide the logo image, we'll show text instead via JS */
  .mobile-topbar-logo img {
    display: none !important;
  }

  /* Ensure topbar uses proper flex layout */
  .topbar.nav-redesigned {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
  }

  /* Hamburger - left side */
  .mobile-hamburger {
    display: flex !important;
    order: 0 !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 5px !important;
    margin-right: 0 !important;
  }

  /* Fix hamburger icon spacing */
  .mobile-hamburger {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .mobile-hamburger span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--text) !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
  }

  /* Hamburger X animation when open - FIXED */
  .mobile-hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  .mobile-hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  /* User controls - right side */
  .header-right-compact {
    display: flex !important;
    order: 2 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 0 !important; /* Remove auto margin, we're using space-between */
  }

  /* Nav container stays as sidebar (already correct) */
  .nav-container {
    position: fixed !important;
    order: 999 !important; /* Out of flex flow */
  }

  /* ========================================
     DAMAGE CODE SPECIFIC FIXES
     ======================================== */

  /* Hide the damage-header on mobile - we show title in topbar now */
  .damage-header {
    display: none !important;
  }

  /* Remove top margin from breadcrumb since header is gone */
  .breadcrumb-nav {
    margin-top: 0 !important;
  }

  /* Adjust app container to account for no header */
  .app {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Ensure damage-container starts right after topbar */
  .damage-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ========================================
     USER CONTROL SIZES - ULTRA COMPACT
     ======================================== */

  .compact-input {
    width: 60px !important;
    height: 26px !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
  }

  .compact-btn {
    height: 26px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  .pill-compact {
    height: 26px !important;
    font-size: 9px !important;
    padding: 0 6px !important;
    max-width: 70px !important;
  }

  .btn-icon-compact {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .btn-icon-compact svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (max-width: 768px) {
  [data-theme="dark"] .mobile-topbar-logo::after {
    color: var(--text);
  }
}