body {
    background-color: #f4f4f4;
    margin: 0;
    /* Use flexbox to center content horizontally, but not vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Remove height: 100vh and justify-content: center to let elements stack from the top */
    color: #334155;
}

/* Header bar styling */
.header-image-container {
    width: 100%; /* Stretch container to 100% of the page */
    height: 120px;
   /* background-image: url('../img/header.png'); */
    background-size: 1024px 72px;
    background-repeat: no-repeat;
    
    /* Center the background image horizontally and vertically */
    background-position: center; 
    
    /* Ensures it is the first element at the very top */
}

.box_login {
    width: 550px;
    height: 550px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Centering the links inside the box */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px; /* Adds space between the links and text */
}
.footer-bar {
    width: 100%;
    height: 60px;
    background-color: #d3d3d3;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* File explorer area */
        .list-container { max-width: 900px; margin: auto; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
        .header { padding: 20px; background: #fff; border-bottom: 2px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
        .row { display: flex; justify-content: space-between; align-items: center; padding: 14px 25px; border-bottom: 1px solid #f1f5f9; transition: 0.2s; }
        .row:nth-child(even) { background: #fcfdfe; }
        .row:hover { background: #f1f5f9; }
        .file-name { font-weight: 500; font-size: 0.95rem; }
        .btn-dl { background: #0f172a; color: white; text-decoration: none; padding: 7px 15px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
        
        /* Pagination Styling */
        .pagination { padding: 20px; display: flex; justify-content: center; align-items: center; gap: 15px; background: #fff; border-top: 2px solid #f1f5f9; }
        .page-link { 
            text-decoration: none; color: #475569; background: #fff; border: 1px solid #e2e8f0; 
            padding: 8px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; 
        }
        .page-link:hover:not(.disabled) { background: #0f172a; color: white; border-color: #0f172a; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); }
        .page-link.disabled { color: #cbd5e1; cursor: not-allowed; border-color: #f1f5f9; }
        .page-info { font-size: 0.85rem; color: #94a3b8; font-weight: 500; }

/* CSV Excel Spreadsheet file */
        table { width: 100%; border-collapse: collapse; background: white; margin-bottom: 20px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #333; color: white; }
        /* Zebra Stripes */
        tr:nth-child(even) { background-color: #f2f2f2; }
        tr:hover { background-color: #e9e9e9; }
        .pagination { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
        .btn2 { padding: 8px 16px; text-decoration: none; background: #007bff; color: white; border-radius: 4px; border: none; cursor: pointer; }
        .btn2:disabled { background: #ccc; }
        .download-bar { margin-bottom: 15px; }