/****************************
RESPONSIVE CSS FOR INDEX.PHP
*****************************/

/* Responsive Adjustments */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden; /* Prevent the body from shifting horizontally */
    }
    input, button {
        touch-action: manipulation;
    }
    /* Top Navigation Bar */
    .top-nav {
        display: none; /* Hide top navigation bar in mobile view */
    }

    /* User Actions Container */
    .all-user-actions-container {
        display: flex; 
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        padding: 0px;
        /* Pin this container at the bottom of the screen */
        position: fixed; /* ADDED */
        bottom: 0;       /* ADDED */
        left: 0;         /* ADDED */
        width: 95%;     /* ADDED */
        border-top: none !important;
        padding-top: 5px !important;
    }
    .all-user-actions-container::after {
        display: none !important;
        content: none !important; /* optional to clear the pseudo-element content */
    }

    /* Adust buttons for mobile */
    #sort-brightness,
    #sort-temperature,
    #sort-hues,
    #sort-saturation,
    #addColor,
    #unlockAll,
    #prevPalette,
    #savePalette,
    #saved-palettes {
        color: white !important;
        width: 35px; /* Slightly smaller buttons */
        height: 35px;
        font-size: 1rem; /* Reduce font size */
        margin-right: 12px;
    }

    /* Remove white line hover effect on palette action buttons */
    #sort-brightness::after,
    #sort-temperature::after,
    #sort-hues::after,
    #sort-saturation::after,
    #addColor::after,
    #unlockAll::after,
    #prevPalette::after,
    #savePalette::after,
    #saved-palettes::after {
        display: none !important;
        content: none !important;
    }

    /* Icons/Dropdowns */
    /* HIDE THE DROPDOWNS FOR NOW AS USING DIFFERENT METHOD TO DISPLAY */
    .theme-dropdown,
    .dropdown,
    .separator {
        display: none;
    }

    .dropdowns-action-buttons-container {
        display: flex; /* Ensure buttons and dropdowns are in one row */
        flex-wrap: nowrap; /* Prevent wrapping to a new line */
        justify-content: space-between;
        gap: 0px; /* Reduce gap between elements */
        width: 96%;
        order: 1; /* NEW: Ensure this row is on top */
    }
    /* Dropdowns */
    .dropdown-toggle {
        font-size: 0.9rem; /* Reduce text size for shorter labels */
    }
    .dropdown-toggle {
        font-size: 0.9rem; /* Reduce text size for shorter labels */
    }
 
    /* Separator HIDING FOR NOW */
    .separator {
        /*display: inline-block;*/
        display: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* "Themes", "Tools", “Previous” and “New Colors” Buttons */
    .color-randomizer-button-container {
        order: 2;                  /* ensure it's below the first row */
        display: flex;             /* so buttons can sit side-by-side */
        align-items: center;       /* vertically center them in container */
        justify-content: center;   /* horizontally center both buttons */
        gap: 10px;                 /* small space between them */
        width: 100%;
        padding-left: 20px;
    }
    .previous-palette-button,
    .color-randomizer-button {
        width: 35% !important;  
        height: 35px !important; 
        font-size: 0.72rem;
    }
    .themes-button,
    .tools-button {
        width: 15% !important;  
        height: 35px !important; 
        border: 1px solid white;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        background-color: transparent;
        color: white;
        cursor: pointer; 
    }
    /* Do not show New Colors tooltip on hover in mobile mode */
    .color-randomizer-button:not([data-showtooltip="false"])::after {
        display: none !important;
    }

    /* Main Palette Container */
    .main-palette-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100vh; /* Take full viewport height */
        margin-bottom: 100px; /* Keep footer from covering the palette content */
    }
    .color-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align color codes to the left */
        justify-content: center;
        width: 100%;
        height: calc(100vh / var(--color-count)); /* Divide height equally by the number of colors */
        margin: 0;
        position: relative; /* Allow positioning of color codes */
    }
    .color-panel {
        flex: 1;
        height: 100%;
        width: 100%; /* Panels now take the full width */
        border-radius: 0 !important; /* Remove custom borders for simpler mobile look */
        position: relative; /* For color codes placement */
    }
    .color-codes {
        position: absolute;
        background: transparent !important;
        color: white; /* White text for visibility */
        padding: 5px 10px; /* Add padding around the text */
        font-size: 1rem;
        z-index: 1;
        border: none !important;
        box-shadow: none; /* Remove black borders */
        width: auto;
    }

    /* Hide on-panel buttons */
    .removeColor,
    .pickerButton,
    .lockColor,
    .lighter-button,
    .darker-button,
    .arrow-buttons-container {
        display: none;
    }

    /* Container to align panel action buttons in a row */
    .modal-button-container {
        display: flex;
        justify-content: space-evenly; 
        align-items: center;
        width: 100%; 
        height: 100%;
        flex-wrap: wrap; 
    }
    .modal-button-container button {
        display: inline-block;
        width: auto;
        font-size: 0.85rem;
        background-color: transparent;
        color: #fff;
        border: none;
        text-align: center;
        cursor: pointer;
        transition: border-bottom 0.3s ease;
        border-bottom: 2px solid transparent; /* Hidden by default */
    }
    .modal-button-container button:hover {
        border-bottom: 2px solid white; /* Show white border on hover */
    }

    /* Styling for the sliding modal */
    .panel-modal {
        position: fixed;
        top: 0;
        right: -100%; /* Initially hidden off-screen */
        width: 52%; /* percent of screen covered on slideout */
        background: rgba(0, 0, 0, 0.9); /* Dark background for the modal */
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        transition: right 0.4s ease; /* Smooth slide-in effect */
        box-shadow: -2px 0 5px rgba(25, 4, 4, 0.5); /* Add a slight shadow on the left side */
    }
    /* When the modal is opened, it slides into view */
    .panel-modal.open {
        right: 0; /* Slide into view */
    }

  
    /* Ensure icons fit and scale properly */
    #savePalette i, #saved-palettes i {
        font-size: 1.2rem !important; /* Ensure icons are visible */
        line-height: 1 !important; /* Proper vertical alignment */
        display: inline-block !important; /* Prevent hiding */
    }
    /* Remove hover and active effects on palette action buttons */
    #sort-brightness:hover,
    #sort-temperature:hover,
    #sort-hues:hover,
    #sort-saturation:hover,
    #addColor:hover,
    #unlockAll:hover,
    #prevPalette:hover,
    #savePalette:hover,
    #saved-palettes:hover,
    #sort-brightness:active,
    #sort-temperature:active,
    #sort-hues:active,
    #sort-saturation:active,
    #addColor:active,
    #unlockAll:active,
    #prevPalette:active,
    #savePalette:active,
    #saved-palettes:active {
        box-shadow: none !important;
        color: white !important;
        background-color: transparent !important;
    }

    .saved-palettes-panel {
        width: 80% !important;
        right: -80% !important;
        height: 100%;
        position: fixed;
        top: 0;
        background: #333;
        z-index: 9999;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        overflow-y: auto; /* Allow vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
        touch-action: pan-y; /* Allow only vertical touch scrolling */
        display: flex;
        flex-direction: column;
    }
    .saved-palettes-list {
        text-align: left;
        font-size: 1.5rem;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal movement */
        width: 100%; /* Ensure it sticks within the container */
    }
    .saved-palettes-panel.open {
        right: 0 !important; /* Ensure it slides into view */
    }
    .saved-palette-item {
        display: grid;
        grid-template-columns: 1fr auto; /* 1fr for the palette, auto for the delete button */
        gap: 5px; /* Adjust space between the palette and delete button */
        padding-left: 5px;
        align-items: center;
    }

    .swatch-row {
        display: flex;
        justify-content: space-between;
        width: 100%; /* Ensure the swatches take the available space */
    }

    .delete-palette-button {
        margin-right: 0; /* Minimal space to the right edge */
        align-self: right;
    }

    /* THEME SELECTOR MODAL */
    .themes-modal {
        position: fixed;
        top: 0;
        left: -100%; /* Hidden off-screen initially */
        width: 70%;
        height: 100%;
        background-color: #333;
        color: white;
        z-index: 9999;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
        transition: left 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
    }
    .themes-modal.open {
        left: 0; /* Slide into view */
    }
    .themes-modal-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #444;
    }
    .close-themes-modal {
        background: transparent;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }
    .themes-modal-options-container {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        overflow-y: auto;
    }
    .themes-modal-options-container button {
        padding: 10px;
        font-size: 1rem;
        background-color: #555;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .themes-modal-options-container button:hover {
        background-color: #777;
    }

    /* MORE TOOLS SELECTOR MODAL */
    .tools-modal {
        position: fixed;
        top: 0;
        left: -100%; /* Hidden off-screen initially */
        width: 70%;
        height: 100%;
        background-color: #333;
        color: white;
        z-index: 9999;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
        transition: left 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
    }
    .tools-modal.open {
        left: 0; 
    }
    .tools-modal-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #444;
    }
    .close-tools-modal {
        background: transparent;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }
    .tools-modal-options-container {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow-y: auto;
    }
    .tools-modal-options-container a {
        background: none;
        border: none;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
        text-decoration: none; /* Remove link underline */
    }
    .tools-modal-options-container a:hover {
        background-color: #555;
        color: #ddd;
    }
}