/* "Ultimate" Apple-like Theme for FileBrowser
   Focus: Typography, Spacing, and iOS-style Icons
*/

:root {
    --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --apple-blue: #007aff;
    --apple-bg-light: #f5f5f7;
    --apple-card-light: #ffffff;
    --apple-bg-dark: #000000;
    --apple-card-dark: #1c1c1e;
    --radius: 16px;
}

/* GLOBAL RESET & TYPOGRAPHY */
body, #app, main {
    font-family: var(--font-stack) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.02em;
}

/* LIGHT MODE */
body {
    background-color: var(--apple-bg-light) !important;
    color: #1d1d1f !important;
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
    body, #app, main {
        background-color: var(--apple-bg-dark) !important;
        color: #f5f5f7 !important;
    }
}

/* ----------------------------------------------------------------
   HEADER - Glassmorphism & Cleanup
---------------------------------------------------------------- */
header {
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: none !important;
    height: 64px !important;
    padding: 0 16px !important;
}

@media (prefers-color-scheme: dark) {
    header {
        background-color: rgba(28, 28, 30, 0.75) !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

/* Logo & Title */
header img {
    height: 28px !important;
    width: auto !important;
    opacity: 0.9;
}

/* Search Bar - iOS Style Pill */
#search {
    background-color: rgba(118, 118, 128, 0.12) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin: 0 16px !important;
    border: none !important;
    box-shadow: none !important;
    flex-grow: 1;
    max-width: 600px;
}

#search input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    font-weight: 400 !important;
}

/* ----------------------------------------------------------------
   FILE GRID - The "App Store" Look
---------------------------------------------------------------- */
/* Remove default spacing/margins to control grid exactly */
#listing.mosaic {
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 16px !important;
}

/* The Card */
#listing.mosaic .item {
    background-color: var(--apple-card-light) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: none !important;
    margin: 0 !important; /* Reset margins for grid gap */
    padding: 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    aspect-ratio: 1 / 1.1; /* Slightly taller than square */
    transition: transform 0.2s, background-color 0.2s;
    width: 100% !important;
    height: auto !important;
}

@media (prefers-color-scheme: dark) {
    #listing.mosaic .item {
        background-color: var(--apple-card-dark) !important;
        box-shadow: none !important; /* Flat look in dark mode is cleaner */
    }
}

/* Active/Pressed State */
#listing.mosaic .item:active {
    transform: scale(0.96);
    opacity: 0.8;
}

/* FOLDERS - Re-styling the Icon */
#listing .item[data-dir="true"] .material-icons {
    font-size: 64px !important;
    color: var(--apple-blue) !important;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 6px rgba(0,122,255,0.15));
}

/* FILES - Re-styling the Icon */
#listing .item[data-dir="false"] .material-icons {
    font-size: 56px !important;
    color: #8e8e93 !important;
    margin-bottom: 8px;
}

/* TEXT LABELS */
#listing .item .name {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center;
    color: inherit !important;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
    padding: 0 4px !important;
}

/* Hide Size/Date in Grid View for cleanliness */
#listing.mosaic .item .size, 
#listing.mosaic .item .modified {
    display: none !important;
}

/* ----------------------------------------------------------------
   SIDEBAR - Sidebar / Drawers
---------------------------------------------------------------- */
nav {
    background-color: var(--apple-bg-light) !important;
    border-right: 1px solid rgba(0,0,0,0.05) !important;
}

@media (prefers-color-scheme: dark) {
    nav {
        background-color: #151516 !important;
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }
}

/* Sidebar Buttons */
nav button.action {
    border-radius: 10px !important;
    padding: 10px 16px !important;
    margin: 4px 8px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-weight: 500 !important;
}

nav button.action.active {
    background-color: rgba(0, 122, 255, 0.15) !important;
    color: var(--apple-blue) !important;
}

nav button.action i {
    margin-right: 12px !important;
    font-size: 20px !important;
}

/* ----------------------------------------------------------------
   CONTEXT MENUS
---------------------------------------------------------------- */
#dropdown, .context-menu {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    border: none !important;
    padding: 6px !important;
}

@media (prefers-color-scheme: dark) {
    #dropdown, .context-menu {
        background-color: rgba(40, 40, 40, 0.85) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
}

.context-menu button.action {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    margin: 2px 0 !important;
}

/* Hide Credits/Footer clutter */
.credits {
    opacity: 0.3 !important;
    transform: scale(0.8);
}