/* Explore_Theme_0.css - Default Dark Theme (Midnight Blue) */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Gabriela&family=Aptos&display=swap');

body {
    background-color: #0a192f; /* Midnight Blue */
    color: #ccd6f6; /* Light Slate - for text */
    font-family: 'Aptos', 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

.explorer-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 15px;
    background-color: #112240; /* Slightly Lighter Navy for container */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* --- Titles & Header Area --- */
.main-header-container {
    margin-bottom: 10px;
}

h1.main-title { /* This is now the settings trigger */
    font-family: 'Gabriela', serif;
    color: #64ffda;
    font-size: 2.5em;
    margin-top: 10px;
    margin-bottom: 5px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    text-align: center; /* Centers title and inline cog */
    cursor: pointer;    /* Indicates clickability */
    padding: 5px 0;     /* Clickable area padding */
    transition: color 0.2s ease-in-out;
    position: relative;
}
h1.main-title:hover {
    color: #bbeeff; /* Hover effect on title */
}

.titlebar-container {
    text-align: center; /* Helps if the image is inline-block and you want it centered */
    margin-bottom: 15px; /* Or your preferred spacing */
}

.title-bar-image {
    max-width: 100%; /* Ensure it's responsive */
    height: auto;
    display: block; /* Or inline-block if you prefer */
    margin-left: auto; /* For centering if display:block */
    margin-right: auto; /* For centering if display:block */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Smooth transitions */
    /* Initial state for shadow (optional, can be added only on hover) */
    /* filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3)); */ /* Soft initial shadow */
}

.title-bar-image:hover {
    transform: scale(1.03); /* Slight zoom effect on hover */
    /* filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.5)); */ /* Enhanced shadow on hover */
    /* Alternative hover effect: Brightness or Opacity */
    /* opacity: 0.9; */
    /* filter: brightness(1.1) drop-shadow(4px 4px 6px rgba(0,0,0,0.5)); */
}

.settings-cog-icon { /* Span around the cog icon within H1 */
    margin-left: 8px;
    font-size: 0.8em; /* Adjust size relative to H1 */
    display: inline-block;
    vertical-align: baseline; /* Adjust for visual alignment */
}

.settings-fallback-trigger { /* Clickable cog if no main title */
    /* PHP applies: text-align: right; padding: 10px; cursor: pointer; font-size: 1.5em; */
    color: #64ffda;
    transition: color 0.2s ease-in-out;
    margin-bottom: 10px; /* Ensure space if it's the only header element */
}
.settings-fallback-trigger:hover {
    color: #bbeeff;
}
.settings-fallback-trigger .settings-cog-icon { /* Cog inside fallback */
    margin-left: 0; /* No extra margin needed if it's the only content */
    font-size: 1em; /* Match font-size of parent */
}

.second-title {
    color: #8892b0;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1em;
}

/* --- Settings Panel (triggered by H1 click) --- */
.settings-panel {
    display: none; /* JS will toggle */
    background-color: #1c355e;
    padding: 10px;
    margin-top: 5px; /* Space from H1 or fallback trigger */
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #2a4a7e;
    text-align: center;
    clear: both; /* In case any floats were in the header before this */
}

.settings-panel-button { /* For Next Theme, Font Size buttons */
    background-color: #64ffda;
    color: #0a192f;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
    margin: 5px;
    min-width: 110px;
}
.settings-panel-button:hover {
    background-color: #52d1bc;
}

.font-size-display { /* Span that shows current font size */
    display: inline-block;
    margin-left: 8px;
    padding: 8px 10px;
    background-color: #0a192f;
    border-radius: 5px;
    color: #8892b0;
    min-width: 60px; /* Ensure it has some width */
    text-align: center;
    vertical-align: middle; /* Align with buttons if they are inline-block too */
    font-size: 0.9em; /* Slightly smaller text for the display */
}

/* --- Navigation Controls (Back Button Area) --- */
.navigation-controls { /* Top back button area */
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.bottom-navigation-controls { /* Bottom back button area */
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: left; /* Or center/right as you prefer for the container */
}

/* General style for clickable images for transition setup */
.table .icon img[onclick], /* Audio play/stop icons */
.item.dir img,             /* Folder icons (image inside a directory link) */
.back-button img           /* Back button image */
{
    transition: transform 0.1s ease-out; /* Quick transition for the click effect */
}

/* Active state for these clickable images */
.table .icon img[onclick]:active,
.item.dir img:active,
.back-button img:active {
    transform: translateY(3px); /* Move down slightly when clicked. Adjust px value as needed */
    /* You wanted 10px, but that might be too much for small icons. Start with a smaller value. */
}

.back-button { /* Common style for both top and bottom back buttons */
    display: inline-flex; /* Aligns image and text if any (text was removed) */
    align-items: center;
    gap: 0px; /* No gap needed if only image */
    background-color: #173a5e;
    color: #64ffda; /* Not visible if no text, but good for consistency */
    padding: 5px 8px; /* Padding around the image */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}
.back-button img {
    vertical-align: middle; /* Good for inline-flex */
    display: block; /* Can help prevent extra space under image */
}
.back-button:hover {
    background-color: #2a5288;
}

/* --- Table Styling --- */
.table.file-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    table-layout: fixed; /* Columns determined by first row or explicit widths */
}

.table th, .table td { /* General cell styling */
    padding: 10px; /* Default padding, adjusted by font size classes */
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #1c355e; /* Separator lines */
}

.table .row.one {
    background-color: #112240; /* Base container color - for row striping */
}
.table .row.two {
    background-color: #172a45; /* Slightly lighter for row striping */
}
.table .row:hover { /* General hover, might be overridden by playing row if its background is also changed */
    background-color: #203c66;
}

.table .icon { /* Icon cell styling */
    width: 40px; /* Fixed width for icon column */
    text-align: center;
    padding-right: 8px; /* <<< KEY CHANGE: Creates space between icon and name cell */
}
.table .icon img {
    vertical-align: middle;
    max-width: 100%; /* Ensure icons don't overflow if larger than container */
    height: auto; /* Maintain aspect ratio if width is constrained */
    cursor: default; /* Default cursor for non-interactive icons */
}
.table .icon img[onclick] { /* Specific for clickable icons like audio play/stop */
    cursor: pointer;
}
.table .icon img.playing {
    /* Optional: style for playing icon, e.g., slight glow */
    /* box-shadow: 0 0 8px #64ffda; */
}


.table .name { /* Name cell styling - now takes remaining width after icon column */
    word-break: break-all; /* For long filenames/foldernames */
    /* No explicit width needed here if table-layout:fixed and icon column has width */
}

.table a.item,
.table a.item:visited { /* Ensure visited links have the same color and no default underline */
    color: #ccd6f6;
    text-decoration: none; /* No underline by default */
    font-weight: 500;
}
.table a.item:hover {
    color: #64ffda;
    text-decoration: none; /* Explicitly no underline on hover, or set to 'underline' if desired */
}
.table a.item.dir { /* Specific styling for directory links if needed */
    font-weight: bold;
}

/* --- Styling for the currently playing audio row --- */
.table .row.audio-playing-row {
    outline: 2px solid #64ffda; /* Title text color for the outline */
    outline-offset: -2px;       /* Pulls outline inward to look like a border inside the row */
}
.table .row.audio-playing-row:hover { /* Ensure hover on playing row doesn't remove outline or look odd */
    background-color: #203c66; /* Keep standard row hover background */
    /* Outline should persist over this background color */
}


/* --- Font Size Adjustments (applied to body tag by JS) --- */
body.font-x-small .file-list-table td,
body.font-x-small .file-list-table th,
body.font-x-small .back-button {
    font-size: 0.7rem;
    padding-top: 4px;
    padding-bottom: 4px;
}

body.font-small .file-list-table td,
body.font-small .file-list-table th,
body.font-small .back-button {
    font-size: 0.85rem;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.font-medium .file-list-table td,
body.font-medium .file-list-table th,
body.font-medium .back-button {
    font-size: 1rem; /* Default size */
    padding-top: 10px;
    padding-bottom: 10px;
}

body.font-large .file-list-table td,
body.font-large .file-list-table th,
body.font-large .back-button {
    font-size: 1.15rem;
    padding-top: 12px;
    padding-bottom: 12px;
}

body.font-x-large .file-list-table td,
body.font-x-large .file-list-table th,
body.font-x-large .back-button {
    font-size: 1.3rem;
    padding-top: 14px;
    padding-bottom: 14px;
}


/* --- Iframe Container --- */
.iframe-container {
    margin-top: 25px;
    border: 1px solid #2a4a7e;
    border-radius: 5px;
    overflow: hidden; /* To contain iframe border and ensure rounded corners apply */
}
.iframe-container iframe {
    display: block; /* Remove bottom space under iframe */
    border-radius: 4px; /* Match container if needed, or remove border entirely */
    border: none; /* Usually best to control border on the container */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .explorer-container {
        margin: 10px;
        padding: 10px;
    }

    h1.main-title {
        font-size: 2em;
    }
    .second-title {
        font-size: 1em;
    }

    .navigation-controls {
        flex-direction: column;
        align-items: flex-start; /* Align items to start on smaller screens when stacked */
    }

    .table td, .table th { /* Reduce padding for table cells on smaller screens */
        padding-left: 5px;
        padding-right: 5px;
    }
    /* Adjust icon cell padding for mobile if needed */
    .table .icon {
        padding-right: 5px; /* Slightly less padding for mobile */
    }


    /* Font size adjustments for mobile table content */
    body.font-x-small .file-list-table td, body.font-x-small .file-list-table th { font-size: 0.65rem; padding-top: 4px; padding-bottom: 4px;}
    body.font-small .file-list-table td, body.font-small .file-list-table th { font-size: 0.8rem; padding-top: 5px; padding-bottom: 5px;}
    body.font-medium .file-list-table td, body.font-medium .file-list-table th { font-size: 0.9rem; padding-top: 8px; padding-bottom: 8px;} /* Base for mobile */
    body.font-large .file-list-table td, body.font-large .file-list-table th { font-size: 1.0rem; padding-top: 10px; padding-bottom: 10px;}
    body.font-x-large .file-list-table td, body.font-x-large .file-list-table th { font-size: 1.1rem; padding-top: 11px; padding-bottom: 11px;}

    /* Settings panel buttons on mobile */
    .settings-panel-button {
        padding: 6px 10px;
        min-width: 100px;
        font-size: 0.9em;
    }
    .font-size-display {
        padding: 6px 8px;
        font-size: 0.8em;
        min-width: 50px;
    }
}

@media (max-width: 480px) {
    h1.main-title {
        font-size: 1.6em;
    }
    .settings-cog-icon {
        font-size: 0.7em; /* Adjust cog size for very small screens */
    }

    .second-title {
        font-size: 0.9em;
    }
    .settings-panel {
        padding: 8px;
    }
    /* Stack buttons in settings panel on very small screens */
    .settings-panel-button, .font-size-display {
        display: block;
        width: calc(100% - 10px); /* Full width minus margin */
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .font-size-display {
        margin-top: 10px; /* More space above display when stacked */
    }
}

/* Error message styling */
.error-message {
    color: #ff6464;
    background-color: #2f0a0a;
    border: 1px solid #a03030;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}


/* Style for links that are just wrapping an icon, if needed */
a.icon-link,
a.icon-link:visited {
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Or block, helps contain the image properly */
    /* Add other resets if necessary, e.g., border: none; */
}
a.icon-link:hover {
    /* Optional: if you want a hover effect on the icon link */
    /* Example: opacity: 0.8; */
}

/* Ensure the clickable image animation still works for these icon links */
/* The existing .item.dir img:active might cover folder icons.
   For file icon links, we need to target the img inside a.icon-link */
a.icon-link img {
    transition: transform 0.1s ease-out; /* If not already covered by a more general rule */
}
a.icon-link:active img { /* When the link (wrapper) is active, transform the image */
    transform: translateY(3px);
}

/* --- Appended Styles for Download Button Feature --- */

/* Styling for the table cell containing the filename and download button */
.table td.name.has-download-button-container {
    display: flex;                     /* Use flexbox to position items side-by-side */
    justify-content: space-between;    /* Pushes filename to left, download button to right */
    align-items: center;               /* Vertically aligns items in the middle */
    gap: 10px;                         /* Adds a small space between filename and download button */
}

/* Wrapper for the filename link, allows it to take available space */
.name-link-wrapper {
    flex-grow: 1;                      /* Allows the name wrapper to expand and fill space */
    overflow: hidden;                  /* Prevents long filenames from breaking layout */
    text-overflow: ellipsis;           /* Shows "..." if filename is too long (requires white-space: nowrap too) */
    /* white-space: nowrap; */         /* Uncomment if you prefer names on one line with ellipsis */
}

/* Wrapper for the download button/icon */
.download-button-wrapper {
    /* display: none; or display: inline-block; is controlled by JavaScript */
    flex-shrink: 0;                    /* Prevents the download button from shrinking if space is tight */
}

/* Styling for the download icon itself */
.download-icon {
    vertical-align: middle;            /* Good for inline elements like images */
    transition: opacity 0.2s ease-in-out, transform 0.1s ease-out; /* Smooth transitions */
    cursor: pointer;                   /* Indicates it's clickable */
}

.download-icon:hover {
    opacity: 0.75;                     /* Slight fade on hover, adjust as desired per theme */
}

/* Active state for the download icon (when clicked) */
/* This reuses the transform from your existing clickable image styles */
.download-icon:active {
    transform: translateY(3px);        /* Moves down slightly when clicked */
}

/* Styling for the <a> tag that wraps the download icon */
a.download-link,
a.download-link:visited {
    text-decoration: none;             /* Remove underline from the link */
    display: inline-block;             /* Helps contain the image properly */
    line-height: 1;                    /* Can help prevent extra space if image is display:inline-block */
}

/* Responsive considerations for smaller screens, if needed */
@media (max-width: 480px) { /* Example breakpoint, adjust as needed */
    .table td.name.has-download-button-container {
        gap: 5px; /* Reduce gap on very small screens */
    }
    /* If names and download buttons cause too much clutter on very small screens,
       you might consider stacking them or further reducing icon size here,
       but the flexbox setup should handle shrinking reasonably well. */
}

/* --- End of Appended Styles --- */