* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: Arial, sans-serif;

    background:
        linear-gradient(
            rgba(0,0,0,0.65),
            rgba(0,0,0,0.65)
        ),
        url('/assets/img/background.jpg');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    min-height: 100vh;

    color: white;
}

.topbar {

    background: rgba(0,0,0,0.75);

    backdrop-filter: blur(5px);

    min-height: 90px;

    display: grid;

    grid-template-columns:
        90px
        1fr
        auto;

    align-items: center;

    gap: 15px;

    padding: 10px 20px;

    position: sticky;

    top: 0;

    z-index: 9999;
}

.logo-link {

    display: flex;

    align-items: center;

    justify-content: center;
}

.logo {

    width: 70px;

    height: 70px;

    object-fit: contain;
}

.portal-title {

    text-align: center;

    font-size: clamp(16px, 2vw, 28px);

    font-weight: bold;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.topbar-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}

.topbar-btn {

    background: #b30000;

    color: white;

    text-decoration: none;

    padding: 10px 16px;

    border-radius: 8px;

    font-weight: bold;

    white-space: nowrap;

    transition: 0.2s;
}

.topbar-btn:hover {

    background: #d00000;
}

/* Tablet */

@media (max-width: 900px) {

    .portal-title {

        font-size: 20px;
    }

    .topbar-btn {

        padding: 8px 12px;
    }
}

/* Smartphone */

@media (max-width: 768px) {

    .topbar {

        grid-template-columns:
            70px
            1fr;

        grid-template-rows:
            auto
            auto;

        gap: 10px;

        padding: 10px;
    }

    .logo-link {

        grid-column: 1;

        grid-row: 1;
    }

    .portal-title {

        grid-column: 2;

        grid-row: 1;

        text-align: left;

        white-space: normal;

        font-size: 18px;

        line-height: 1.2;
    }

    .topbar-actions {

        grid-column: 1 / span 2;

        grid-row: 2;

        justify-content: center;

        flex-wrap: wrap;
    }

    .topbar-btn {

        padding: 8px 10px;

        font-size: 14px;
    }

    .logo {

        width: 55px;

        height: 55px;
    }
}

.dashboard-grid,
.file-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

    padding: 25px;
}

.card {

    background: rgba(0,0,0,0.75);

    backdrop-filter: blur(5px);

    color: white;

    text-decoration: none;

    padding: 25px;

    border-radius: 15px;

    text-align: center;

    display: block;
}

.card:hover {

    background: rgba(179,0,0,0.9);
}

.icon {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    font-size: 90px;
}

.icon img {

    width: 90px;

    height: 90px;

    object-fit: contain;
}

.card h2 {

    font-size: 20px;

    word-break: break-word;
}

.pathbar {

    background: rgba(0,0,0,0.5);

    padding: 15px 25px;
}

.footer {

    text-align: center;

    padding: 20px;

    color: rgba(255,255,255,0.7);
}

.user-info {

    color: white;

    font-weight: bold;

    padding: 10px;

    white-space: nowrap;

    opacity: 0.9;
}


@media (max-width: 768px) {

    .user-info {

        display: none;
    }

}