/* mobile-styles.css: Responsive styles for MandalaSpin application */

/* --- Base Styles (applied to all screens, overridden by media queries) --- */
.mobile-only {
    display: none; /* Hidden by default, shown on mobile */
}

.desktop-only {
    display: flex; /* Shown by default, hidden on mobile */
    flex-direction: column;
}

/* --- Mobile Styles (< 900px) --- */
@media (max-width: 1181px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important; /* Use flex for the main mobile container */
        flex-direction: column;
        width: clamp(300px, 95vw, 500px); /* Responsive width */
        margin: 10px auto 0;
        background: rgba(30, 30, 47, 0.7);
        border-radius: 10px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        gap: 10px;
    }

    #canvasSection {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    #canvasContainer {
        position: relative;
        margin: auto;
        width: 90vw;
        height: 90vw; /* Explicitly set height to match width */
        max-width: 85vh; /* Constrain both dimensions to prevent overflow on landscape */
        max-height: 85vh;
        aspect-ratio: 1 / 1; /* Fallback and reinforcement */
    }

    #controls, #controls-left {
        display: none !important;
    }

    #mobile-top-bar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        gap: clamp(10px, 3vw, 15px); /* Responsive gap */
        padding: 8px clamp(5px, 2vw, 8px); /* Responsive padding */
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        box-sizing: border-box; /* Ensure padding is included in width */
    }

    .mobile-color-picker {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    .mobile-color-picker label {
        font-size: clamp(0.6rem, 2vw, 0.7rem);
        color: #a0a0a0;
        font-weight: 600;
    }

    #mobile-top-bar input[type="color"] {
        width: clamp(38px, 10vw, 44px);
        height: clamp(38px, 10vw, 44px);
    }

    #mobile-preset-nav {
        display: flex;
        justify-content: center;
    }
    
    #mobile-preset-nav .controls-preset-slots-container {
        display: flex;
        gap: clamp(4px, 1.5vw, 8px);
    }

    #mobile-preset-nav .controls-preset-slot {
        width: clamp(34px, 9vw, 40px);
        height: clamp(34px, 9vw, 40px);
    }

    .mobile-tab-nav {
        display: flex;
        gap: 5px;
        width: 100%;
    }

    .mobile-tab-trigger {
        flex: 1;
        padding: 8px 5px;
        background-color: #38333F;
        color: #e0e0e0;
        border: 1px solid transparent;
        border-radius: 5px;
        cursor: pointer;
        font-size: clamp(0.7rem, 2.5vw, 0.8rem);
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .mobile-tab-trigger:hover {
        background-color: #494766;
    }

    .mobile-tab-trigger.active {
        background-color: #FFD140;
        color: #1e1e2f;
        border-color: #FFD140;
    }

    #mobile-tab-panels {
        width: 100%;
    }

    .mobile-tab-panel {
        display: none; 
        grid-template-columns: repeat(3, 1fr);
        gap: 15px 10px;
        align-items: start;
        animation: fadeIn 0.3s ease-in-out;
    }

    .mobile-tab-panel.active {
        display: grid;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .mobile-tab-panel .control-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }

    .mobile-tab-panel .control-group > * {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .mobile-tab-panel input[type="color"] {
        width: 56px; 
        height: 56px;
        padding: 2px;
    }
    
    .mobile-tab-panel .sub-controls input[type="color"] {
        width: 50px; 
        height: 50px;
    }

    .mobile-tab-panel .sub-controls {
        display: none; 
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 8px;
        padding: 10px;
        background: rgba(0,0,0,0.2);
        border-radius: 8px;
    }

    .mobile-tab-panel .sub-controls[style*="flex"] {
        display: flex !important;
    }
    
    #mobile-panel-effects button.active {
        background-color: #FFB74D;
        color: #1e1e2f;
        border-color: #FFB74D;
    }

    .premium-feature-1, .premium-feature-2 {
        display: none !important;
    }

    .mobile-tab-panel .premium-feature-1.premium-unlocked,
    .mobile-tab-panel .premium-feature-2.premium-unlocked {
        display: flex !important;
    }

    #mobile-panel-effects .control-group > button,
    #mobile-panel-effects .sub-controls > button {
        background-color: #FFD140 !important;
        color: #1e1e2f !important;
        border-color: transparent !important;
    }

    #mobile-panel-effects .control-group > button.active,
    #mobile-panel-effects .sub-controls > button.active {
        background-color: #FFB74D !important;
        color: #1e1e2f !important;
        border-color: transparent !important;
    }

    #mobile-panel-effects .control-group > button:not(.controls-preset-slot),
    #mobile-panel-effects .sub-controls > button:not(.controls-preset-slot) {
        background-color: #FFD140 !important;
    }

    #mobile-panel-effects .control-group > button[class*="slot-"]:not(.slot-saved-flash-animation),
    #mobile-panel-effects .sub-controls > button[class*="slot-"]:not(.slot-saved-flash-animation) {
        background-color: #FFD140 !important;
        border-color: transparent !important;
    }

    .color-group-title {
        text-align: center;
        font-size: 0.8rem;
        color: #FFD140;
        margin-bottom: 5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 5px;
    }

    /* --- FIX: Action Navbar Adjustments for Mobile --- */
    #actionNavbar {
        width: 95%; /* Ensure it doesn't exceed the screen width */
        gap: 4px; /* Reduce space between buttons */
        padding: 4px; /* Slightly reduce padding of the bar itself */
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }

    #actionNavbar button {
        flex-grow: 1; /* Allow buttons to expand and fill the space evenly */
        flex-shrink: 1; /* Allow buttons to shrink if needed */
        flex-basis: 0; /* Let flexbox determine the size */
        padding: 8px 5px; /* Adjust padding for smaller screens */
        min-width: 0; /* Remove min-width to allow full flexibility */
    }

    #actionNavbar button i {
        font-size: 1.1rem; /* Adjust icon size for mobile */
    }
}