/* ===================================
   SAKTHI FILE LIST – FIXED LAVENDER THEME
   (No Dark / Light Mode Switching)
   =================================== */

.file-list {
    width: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    color: #3d2b66;              /* primary text */
}

/* -------------------------------
   DESKTOP / LAPTOP – TABLE VIEW
   ------------------------------- */
.file-row {
    display: grid;
    grid-template-columns: 1fr 160px 120px 40px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #d8cff2;
    background: #ffffff;
    border-radius: 8px;
    transition: background .2s ease, box-shadow .2s ease;
}

.file-row.header {
    font-weight: 600;
    background: #e9e3fb;
    border-bottom: 2px solid #cbbef0;
    color: #3d2b66;
}

/* -------------------------------
   FILE NAME & ICON
   ------------------------------- */
.file-name a {
    text-decoration: none;
    color: #3d2b66;
    font-weight: 500;
}

.file-name a:hover {
    color: #6b4eff;
}

.file-name i {
    margin-right: 8px;
    color: #7c6be6;
}

/* -------------------------------
   META TEXT
   ------------------------------- */
.file-updated,
.file-size {
    font-size: 14px;
    color: #6a5fa3;
    white-space: nowrap;
}

/* -------------------------------
   HOVER EFFECT
   ------------------------------- */
.file-row:not(.header):hover {
    background: #f4f0ff;
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.12);
}

/* -------------------------------
   TABLET & MOBILE LANDSCAPE
   ------------------------------- */
@media (max-width: 1024px) {
    .file-row {
        grid-template-columns: 1fr 120px 90px 32px;
        padding: 8px 12px;
    }
}

/* -------------------------------
   MOBILE PORTRAIT – GRID CARDS
   ------------------------------- */
@media (max-width: 640px) {

    .file-row.header {
        display: none;
    }

    .file-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .file-row {
        display: block;
        border: 1px solid #d8cff2;
        border-radius: 14px;
        padding: 14px;
        background: #ffffff;
    }

    .file-name {
        font-size: 15px;
        margin-bottom: 6px;
        word-break: break-word;
    }

    .file-updated,
    .file-size {
        font-size: 13px;
        color: #756ab6;
        margin-bottom: 4px;
    }

    .file-row > div:last-child {
        margin-top: 8px;
    }
}

/* -------------------------------
   TOUCH FRIENDLY
   ------------------------------- */
@media (hover: none) {
    .file-row a {
        display: inline-block;
        padding: 6px 0;
    }
}

/* -------------------------------
   SKELETON LOADER (MATCH THEME)
   ------------------------------- */
.file-row.loading {
    background: linear-gradient(
        90deg,
        #e9e3fb 25%,
        #f4f0ff 37%,
        #e9e3fb 63%
    );
    background-size: 400% 100%;
    animation: sakthi-skeleton 1.4s ease infinite;
}

@keyframes sakthi-skeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}