/* --- Safe Dark Mode Liquid Glass Theme --- */

:root {
    /* Deep obsidian canvas with neon glass highlights */
    --back-color: #05070f;
    --main-color: #00e5ff;
    --accent-color: #4a90e2;
    --surface-color: #0e131f;
}

/* Translucent frosted glass top header slab */
header {
    background: linear-gradient(
        to bottom, 
        rgba(25, 35, 55, 0.75) 0%, 
        rgba(15, 23, 42, 0.85) 50%, 
        rgba(8, 12, 21, 0.90) 51%, 
        rgba(18, 26, 42, 0.80) 100%
    ) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff !important;
}

/* Change header control elements to bright high-contrast text */
header button, header .action, header .title {
    color: #ffffff !important;
}

/* Style main action elements into glossy "liquid neon blue" droplets */
button.button, .button--contained {
    background: linear-gradient(
        to bottom, 
        #38bdf8 0%, 
        #0ea5e9 49%, 
        #0284c7 50%, 
        #0369a1 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important; 
    color: #ffffff !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 6px rgba(0,0,0,0.3) !important;
    font-weight: 500;
}

/* Hover pulse highlight for the buttons */
button.button:hover, .button--contained:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
}

/* Dark mesh style backdrop canvas background layer */
body {
    background-color: #070a12 !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 229, 255, 0.04) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(217, 70, 239, 0.03) 0px, transparent 50%) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Style file list items into dark frosted glass panes */
.item {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px;
    margin: 3px 0;
    
    /* Sleeker padding height so rows feel tight and crisp */
    padding: 6px 16px !important; 
}

/* Subtle dark alternate rows for interface depth */
.item:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01) !important;
}

/* Selected active items highlighted in electric glass cyan blue */
.item[aria-selected="true"], .item.is-selected {
    background: linear-gradient(to bottom, rgba(14, 165, 233, 0.3) 0%, rgba(2, 132, 199, 0.4) 100%) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(56, 189, 248, 0.4) !important;
}

/* --- THE CLOSING GAP RESOLUTION --- */

/* 1. Hardware scale the icons cleanly to 75% */
#listing .item .icon i.material-icons,
.item i.material-icons {
    transform: scale(0.75) !important;
    transform-origin: left center !important; /* Forces icon to stick left so gap behaves */
    display: inline-flex !important;
}

/* 2. CRITICAL FIX: Overrides both flex framework and block width definitions simultaneously */
#listing .item .icon,
.item .icon,
.item > div:first-of-type {
    width: 24px !important;         /* Forces layout width to drop to 24px from stock 40px */
    min-width: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px !important;       /* Overrides underlying flex-basis matrix constraints */
    margin-right: 8px !important;   /* Locks a tight, clean spacing gap before text filenames */
}

/* Ensure typography layout details match high dark contrast */
.item .name, .item .size, .item .modified {
    color: #e2e8f0 !important;
    font-size: 14px !important;
}