* {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
:root {
    --grey: #2a3135;
    --turquoise: #55D6BE;
    --navy: #1C333D;
    --blue: #123f63;
    --green: #2F7C57;
    --white: #fff;
    --container-max: 1200px;
    --gap: 1rem;
    --nav-h: 72px;
    --card:#ffffff;
    --bg:#f7fafc;
    --red: rgba(233,51,35, .3);
    --red-full: rgba(233,51,35, 1);
}

body {
    background-color: var(--white);
    margin: 0;
    overflow-x: hidden;
    display: flex;
}

@media (max-width: 768px) {
    body { display: block; }
    .nav-menu {
        position: static;
        width: 100%;
        height: auto;
    }
    .container {
        margin-left: 0;
    }
}


/* ------ NAV ------ */


.nav-menu{
    background-color: var(--navy);
    flex: 0 0 200px;
    width: 200px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 20px;
}

.nav-menu a {
    color: var(--white) !important;
    width: 100%;
    text-decoration: none;
    margin: 12px 10px;
    border-bottom: 1px solid transparent;
    transition:  transform .3s ease, border-color 120ms ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-menu a:hover {
    color: var(--turquoise) !important;
    transform: translateX(2px);
}

.nav-menu .active{
    color: var(--turquoise) !important;
    transform: translateX(2px);
}

nav img{
    width: 80%;
    margin: 0 auto 50px auto;
    display: block;
}

.nav-section{
    color: #aaa;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 10px auto;
}

.nav-section::after,
.nav-section::before{
    content: "";
    width: 20px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

.logout{
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    background-color: var(--white);
    border: 1px solid var(--white);
    color: var(--navy);
    border-radius: 0;
    font-size: 14px;
    padding: 10px;
}

.logout:hover{
    cursor: pointer;
    color: var(--white) !important;
    background-color: transparent;
}

/* ------  WELCOME  ------ */


.welcome{
    background-image: url('/img/net.png');
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--navy);
}

.card{
    background-color: var(--bg);
    width: 30%;
    margin: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
    color: var(--grey);
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .card{
        width:45%
    }
}

@media (max-width: 767.98px) {
    .card{
        width:70%
    }
}

@media (max-width: 450px) {
    .card{
        width:85%
    }
}

.card-header{
    margin: auto auto 30px auto;
    text-align: center;
}

.card-body{
    text-align: center;
}

.card-body label{
    font-size: 16px;
}

.card-body input{
    width: 250px;
    outline: none;
    padding: 10px 20px;
    font-size: 16px;
    border: 1px solid var(--blue);
    background-color: var(--bg);
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--navy);
}

.card-body .btn-primary,
.profile .btn-primary{
    margin-top: 30px;
    width: 245px;
    background-color: var(--red-full);
    border: none;
    padding: 10px;
    color: #ffffff;
    border-radius: 25px;
    font-size: 16px;
}

.card .alert{
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 50px;
    background-color: var(--red-full);
    color: #ffffff;
    width: 100%;
    border: none;
    font-weight: 300;
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
}

/* ------ UPLOAD ------ */


.upload-page {
    margin: 0 auto;
}

.upload-card {
    background: #E7ECEF;
    color: var(--navy);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 22px 22px 18px;
}

.upload-head, .section{
    margin: 10px auto 30px auto;
}

.upload-head h1, .section h1{
    margin: 0 0 6px;
    font-size: 32px;
    color: var(--navy);
}

.upload-head p {
    margin: 0 0 16px;
    font-weight: 300;
    color: var(--blue);
    opacity: .8;
}

.form-row {
    margin: 14px 0;
    display: grid;
    gap: 6px;
}

.form-row label {
    font-size: 14px;
    opacity: .9;
}

select, textarea {
    background: var(--white);
    color: var(--navy);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    resize: none;
}

select:focus, textarea:focus {
    outline: 2px solid var(--turquoise);
}

.dropzone {
    margin: 14px 0;
    background: var(--white);
    border: 1.5px dashed var(--turquoise);
    border-radius: 14px;
    min-height: 160px;
    display: grid;
    place-items: center;
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
}

.dropzone:focus {
    outline: none;
    border-color: var(--turquoise);
}

.dropzone.dragover {
    border-color: var(--turquoise);
    background: rgba(85,214,192,.1);
    transform: scale(0.998);
}

.dz-inner {
    text-align: center;
    padding: 16px;
}

.dz-inner i {
    font-size: 64px;
    opacity: .9;
    display: block;
    margin: 10px auto 10px;
    color: var(--navy);
}

.dz-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.dz-text strong {
    font-weight: 700;
}

.dz-hint {
    opacity: .65;
    font-size: 13px;
    margin-top: 8px;
}

.upload-btn {
    background: var(--turquoise);
    border: 1px solid var(--turquoise);
    color: var(--white);
    font-size: 16px;
    border-radius:10px;
    padding: 10px 14px;
    cursor: pointer;
    width: 100%;
}

.upload-btn:hover {
    filter: brightness(1.05);
}

.btn{
    background-color: var(--blue);
    min-width: 150px;
    color: var(--white);
    border: 1px solid var(--blue);
    text-decoration: none !important;
    padding: 10px 40px;
    cursor: pointer;
    font-size: 16px;
    border-radius:10px;
}

.add-user{
    display: flex;
    width: 180px;
    margin-left: auto;
}

.add-user i{
    margin-right: 10px;
}

.btn:hover{
    background-color: transparent;
    color: var(--blue);
}

.btn-ghost {
    background: transparent;
    color: var(--red-full);
    border: 1px solid var(--red-full);
    min-width: 140px;
    text-align: center;
    border-radius:10px;
}

.btn-ghost:hover {
    background: var(--red-full);
    color: var(--white);
}


@media (max-width: 700px) {
    .btn-ghost {
        margin: unset !important;
    }
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.delete{
    -webkit-appearance: none;
    appearance: none;
    color: var(--red-full);
    background: transparent;
    font-size: 18px;
    border: 0;
}

.delete:hover{
    filter: brightness(2);
    cursor: pointer;
}

.download{
    color: var(--blue);
    font-size: 18px;
}

.download:hover{
    filter: brightness(2);
    cursor: pointer;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.file-preview { margin-top: 10px; }

.file-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    background: var(--white);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 10px;
}

.file-icon { font-size: 28px; }
.file-name { font-weight: 600; }
.file-size { opacity: .7; font-size: 13px; }

.link {
    background: none;
    border: none;
    color: var(--red-full);
    cursor: pointer;
    font-weight: 600;
    margin-right: 10px;
    font-size: 14px;
}

.error { color: var(--red-full); font-size: 13px; margin-top: 4px; }

.progress {
    margin-top: 10px;
    background: var(--white);
    border-radius: 999px;
    height: 10px;
    border: 1px solid var(--turquoise);
    overflow: hidden;
}

.progress .bar {
    height: 100%;
    background: linear-gradient(90deg, #22d3ee, #60a5fa);
    width: 0%;
    transition: width .1s ease;
}

.hidden { display: none !important; }


/* ------ MAIN WINDOW ------ */


.container{
    flex: 1 1 auto;
    padding: 24px 50px;
    overflow: auto;
    margin-left: 200px;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    background-image:
        linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)),  /* alfa tu */
        url('/img/net.png');
    background-size: cover, cover;
    background-position: bottom right, bottom right;
    background-repeat: no-repeat, no-repeat;
}



.section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title{
    color: var(--blue);
    font-size: clamp(1rem, 2vw, 2rem);
}

.content{
    background-color:#E7ECEF;
    padding: 24px;
    margin-top: 30px;
    border-radius: 10px;
}

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    gap: 16px;
    justify-content: start;
}

.admin-tiles .tile {
    background-color: var(--blue);
    max-width: 200px;
    color: var(--white);
    border: 1px solid var(--blue);
    border-radius: 12px;
    text-decoration: none;
    display: grid;
    place-items: center;
    padding: 16px;
    aspect-ratio: 1 / 1;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.admin-tiles .tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border-color: rgba(255,255,255,.22);
    cursor: pointer;
}

.admin-tiles i{
    font-size: clamp(1rem, 2.5vw, 2.5rem);
}

.admin-tiles .tile span {
    text-align: center;
    font-weight: 400;
    line-height: 1.25;
}

.flash{
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.flash-success{
    background: #e6ffed;
    border-color: #a7f3d0;
    color: #065f46;
}

.flash-error{
    background: #fee2e2;
    border-color: var(--red);
    color: var(--red-full);
}

.table-wrap{
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
}

.data-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #e6f1ff;
}

.data-table thead th{
    background: var(--blue);
    color: #fff;
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.data-table tbody td{
    padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.08);
    vertical-align: middle;
    font-weight: 300;
    color: var(--grey);
}

.data-table tbody tr:first-child td{ border-top: 0; }

.data-table td.col-name{
    font-weight: 600;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table td.col-comment{
    overflow-wrap: anywhere;
}

.data-table td.col-size{
    width: 120px;
    white-space: nowrap;
}

.data-table td.col-date{
    width: 120px;
    white-space: nowrap;
}

.data-table th.col-actions,
.data-table td.actions{
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.data-table tbody tr:hover{
    background: #f3f2f2;
}

/* Przyciski akcji (spójne z resztą UI) */
.btn-icon{
    -webkit-appearance: none; appearance: none;
    background: transparent; border: 0; color: var(--turquoise);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    transition: background-color .15s ease, color .15s ease, transform .06s ease;
    text-decoration: none;
    margin-left: 6px;
}
.btn-icon:hover{ background: rgba(85,214,190,.12); color: var(--turquoise); }
.btn-icon:active{ transform: translateY(1px); }
.btn-icon.danger{ color:var(--red-full); }
.btn-icon.danger:hover{ background: rgba(233,51,35,.12); color:var(--red-full); }

/* Zaokrąglenie nagłówka (gdy nie używasz .table-wrap) */
.data-table thead th:first-child{ border-top-left-radius: 12px; }
.data-table thead th:last-child { border-top-right-radius: 12px; }


/* ------- Files ------ */


.section { display:block; align-items:center; gap:12px; margin-bottom:14px; width:100%;  }
.section-actions { margin-left:auto; display:flex; gap:8px; }
.input-search{
    background: #E7ECEF;
    color: var(--grey);
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    padding:10px 12px;
    min-width:260px;
    width: 100%;
}
.input-search:focus{
    outline:2px solid var(--turquoise);
    border-color: var(--turquoise); }

.user-grid{
    --tile: 200px;
    --gap: 16px;
    display:grid;
    grid-template-columns: repeat(auto-fill, var(--tile));
    gap: var(--gap);
    justify-content: start;
}

@media (max-width: 480px){ .user-grid{ --tile: 170px; --gap: 12px; } }

.user-tile{
    background:var(--blue); color:#fff; text-decoration:none;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:14px; aspect-ratio:1/1;
    display:grid; grid-template-rows:auto auto 1fr auto; align-items:start; gap:6px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.user-tile:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border-color: rgba(255,255,255,.22);
}
.avatar{
    width:48px; height:48px; border-radius:12px;
    display:grid; place-items:center; font-weight:800;
    background: var(--turquoise);
    color:var(--blue);
}
.u-name{
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-email{
    font-size: 12px; opacity:.8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-count{
    margin-top:auto;
    font-size: 12px; opacity:.75;
}


/* ---- ADD USER ----- */


.form{ display:grid; gap:14px; }
.grid-2{
    display:grid; gap:14px;
    grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 680px){ .grid-2{ grid-template-columns: 1fr; } }

.form-row{ display:grid; gap:6px; }
.form-row label{ font-size:14px; opacity:.9; }

.form-row input{
    background:var(--white); color:var(--grey);
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    padding:10px 12px; font:inherit;
}
.form-row input:focus{
    outline:2px solid var(--turquoise); border-color:var(--turquoise);
}

.chk{ display:flex; align-items:center; gap:10px; height:100%; padding-top:26px; }
.chk input{ width:18px; height:18px; accent-color:#22d3ee; }

.error{ color:var(--red-full); font-size:13px; margin-top:2px; }

.actions{
    display:flex; justify-content:flex-end; gap:10px;
}