/* Base Reset & Typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f1f1f;
    background-color: #f8f9fa;
    padding: 24px;
}

/* Header styling */
h1 {
    font-size: 22px;
    font-weight: 400;
    color: #444746;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e3e3;
}

/* Fallback handling for both <table> and <pre> indices */
table, pre {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

/* Modern Card Grid (PC View) */
tr, pre a {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    width: calc(25% - 12px); /* 4 columns on wide screens */
    min-width: 240px;
    transition: box-shadow 0.2s, background-color 0.2s;
    text-decoration: none;
    color: #1f1f1f;
}

tr:hover, pre a:hover {
    background-color: #f1f3f4;
    box-shadow: 0 1px 3px rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
}

/* Hide unneeded default headers, sizes, and timestamps */
th, td:nth-child(3), td:nth-child(4), hr {
    display: none !important;
}

/* Format the links inside the table rows */
td a, pre a {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Inject Google Drive folder/file look via default icons */
img {
    width: 24px !important;
    height: 24px !important;
    margin-right: 12px !important;
    border-radius: 4px;
}

/* Responsive Breakpoints (Android / Mobile View) */
@media (max-width: 1024px) {
    tr, pre a {
        width: calc(50% - 8px); /* 2 columns for tablets */
    }
}

@media (max-width: 600px) {
    body {
        padding: 16px;
    }
    table, pre {
        flex-direction: column;
        gap: 8px;
    }
    tr, pre a {
        width: 100% !important; /* Full-width row list on Android */
        padding: 12px;
        border-radius: 8px;
    }
}