/**
 * Mobile-First Styles for BC-UR Playground
 * Target: 400x770 viewport (mobile priority)
 * Philosophy: Content-first, minimal padding, remove desktop cruft
 */

@media (max-width: 768px) {
    /* ============================================
       FOUNDATION - Body & Container
       ============================================ */
    
    body {
        background: white !important; /* Remove gradient on mobile */
        padding: 0 !important; /* Remove body padding */
        display: flex !important;
        flex-direction: column !important; /* Stack vertically instead of horizontally */
        align-items: stretch !important; /* Full width */
        justify-content: flex-start !important; /* Start from top */
        min-height: 100vh;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        width: 100%;
        max-width: 100vw;
    }
    
    .container {
        padding: 12px !important; /* Minimal container padding */
        border-radius: 0 !important; /* Sharp edges for max space */
        box-shadow: none !important; /* Flat design */
        max-width: 100%;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* ============================================
       HEADER - Compact & Hamburger Menu
       ============================================ */
    
    .header {
        margin-bottom: 16px !important; /* Reduce from 50px */
        padding-left: 0 !important; /* Remove left padding - hamburger is positioned absolutely */
        padding-right: 0 !important; /* Even spacing */
        position: relative;
    }
    
    .header-content {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .header-text {
        text-align: left !important; /* Override main.css center alignment */
        padding-left: 48px !important; /* Make room for hamburger menu */
        padding-right: 0 !important; /* Even spacing on right */
    }
    
    .header h1 {
        font-size: 1.2rem !important; /* Reduce size */
        margin-bottom: 0.3rem !important;
    }
    
    .header p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important; /* Increase from 1.3 for better readability */
        margin-bottom: 0 !important;
        overflow: visible !important; /* Ensure text can wrap and show */
    }
    
    /* Hide desktop "Made by" section and social links in header */
    div.header div.header-links,
    div.header div.made-by,
    .header-links,
    .header .header-links,
    .header .made-by,
    .header .header-links .made-by,
    .header .header-links .social-link,
    .header .header-links .github,
    .header .header-links .linkedin,
    .header .header-links .medium {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .header .project-link {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hamburger menu button */
    .hamburger-menu {
        display: block !important; /* Override inline style */
        position: absolute;
        top: 12px;
        left: 12px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
        z-index: 1000;
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        display: block !important; /* Override main.css display: none */
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
        z-index: 999;
        padding: 60px 20px 20px;
        overflow-y: auto;
    }
    
    .mobile-menu-overlay.active {
        left: 0;
    }
    
    .mobile-menu-backdrop {
        display: block !important; /* Override main.css display: none */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 998;
    }
    
    .mobile-menu-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* ============================================
       FOOTER - Made By Section
       ============================================ */
    
    .mobile-footer {
        display: block !important; /* Show footer on mobile */
        margin-top: 40px;
        padding: 20px 12px;
        border-top: 1px solid #e1e4e8;
        text-align: center;
    }
    
    .mobile-footer .made-by {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        font-size: 0.85rem;
    }
    
    .mobile-footer .social-links {
        display: flex !important;
        gap: 1rem;
        justify-content: center;
    }
    
    .mobile-footer .social-link,
    .mobile-footer .project-link {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
    }
    
    /* ============================================
       TAB NAVIGATION - Icons Only (Compact Horizontal)
       ============================================ */
    
  .tab-nav {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0 !important;
    min-height: 48px !important;
    padding: 8px 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    width: 100% !important;
  }    .tab-buttons {
        gap: 0 !important; /* Remove gap for flexible sizing */
        display: flex !important;
        flex-direction: row !important; /* Ensure horizontal layout */
    }
    
    .tab-button {
        flex: 1 !important; /* Equal width for all tabs */
        padding: 8px 2px !important; /* Compact padding */
        min-height: 48px !important; /* Reduce height */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.7rem !important; /* Smaller text if labels show */
    }
    
    .tab-icon {
        font-size: 20px !important; /* Smaller icons for compact look */
        margin: 0 !important;
        display: block !important;
        line-height: 1 !important;
    }
    
    .tab-label {
        display: none !important; /* Hide labels, show icons only */
    }
    
    /* ============================================
       CONVERTER TAB - Stacked Layout
       ============================================ */
    
    .converter-panel {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 16px;
    }
    
    /* Format row - buttons stack below dropdown */
    .format-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .format-select,
    .bytewords-style-select {
        width: 100%;
    }
    
    #copyBtn,
    #sendToMultiUR {
        width: 100% !important;
        margin: 0 !important;
        height: 48px !important;
        padding: 12px !important;
    }
    
    /* Quick Examples buttons */
    .quick-examples {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    
    .quick-examples button {
        width: 100% !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
    }
    
    /* ============================================
       MULTI-UR TAB - Vertical Stack & Settings Toggle
       ============================================ */
    
    /* Input/Output grid to single column */
    #multi-ur-tab .input-section,
    #multi-ur-tab .output-section {
        grid-column: 1 / -1; /* Full width */
    }
    
    #multi-ur-tab > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Encoder parameters - hidden by default with toggle */
    .encoder-params-section {
        margin-top: 16px;
    }
    
    .encoder-params-toggle {
        display: flex !important; /* Override inline style */
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px;
        background: #f6f8fa;
        border: 1px solid #e1e4e8;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95em;
        font-weight: 600;
        margin-bottom: 12px;
    }
    
    .encoder-params-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .encoder-params-content.expanded {
        max-height: 1000px;
    }
    
    /* Encoder params as single column */
    .encoder-params-section > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* ============================================
       PROPERTY INSPECTOR - Less Cramped
       ============================================ */
    
    .property-inspector-wide {
        padding: 16px; /* More padding */
    }
    
    .tree-view-content {
        font-size: 0.85rem; /* Slightly smaller */
        line-height: 1.6; /* More breathing room */
    }
    
    .tree-item {
        padding: 10px 8px; /* More vertical padding */
        margin-bottom: 6px; /* Space between items */
    }
    
    .tree-item-indent {
        padding-left: 20px; /* More indent for nesting */
    }
    
    .tree-value {
        margin-top: 4px; /* Space above values */
    }
    
    /* Copy buttons in inspector */
    .inspector-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .copy-option-btn {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
    
    /* ============================================
       TYPOGRAPHY - Reduced Sizes
       ============================================ */
    
    .section-label {
        font-size: 0.75rem; /* Reduce from 13px */
        margin-bottom: 6px;
    }
    
    h1 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    /* Status messages */
    .status {
        font-size: 0.85rem;
        padding: 10px;
    }
    
    /* Text areas */
    .text-area {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    /* Buttons */
        /* Buttons */
    .example-btn {
        font-size: 0.85rem;
        padding: 10px 14px;
    }
    
    /* ============================================
       CATCH-ALL BUTTON & LAYOUT FIXES
       ============================================ */
    
    /* Any button containers we missed */
    .button-group,
    .actions,
    .controls {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .button-group button,
    .actions button,
    .controls button {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* QR Canvas sizing */
    #multi-ur-qr-canvas {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
    }
    
    #qr-canvas-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
    }
    
    #qr-container {
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    #qr-display-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.5rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    #qr-display-section .section-label,
    #qr-display-section #frame-indicator {
        align-self: center !important;
    }
    
    /* ============================================
       UTILITIES
       ============================================ */
    
    /* Ensure no horizontal scroll */
    body, .container {
        overflow-x: hidden;
    }
    
    * {
        max-width: 100%;
    }
}