/* reset minimalny */
*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Roboto,Arial,sans-serif}

body{min-height:100vh;background:#f5f7fb;color:#222;display:flex;flex-direction:column;align-items:center}

/* header */
header{width:100%;max-width:980px;padding:28px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
#tytul{font-size:28px}
#upload_button button{padding:8px 14px;font-size:14px;cursor:pointer;border-radius:6px;border:1px solid #2b7; background:#2b7fff;color:#fff}

/* main grid */
main{width:100%;max-width:980px;padding:12px}
.grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}

/* file box (zmodyfikowane aby mieć lewą kolumnę z danymi i prawą z typem) */
.file-box{
    width:200px;
    background:#fff;
    border-radius:8px;
    padding:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    display:flex;
    gap:12px;
    align-items:stretch;
    position:relative;
    min-height:200px;
}

/* delete button for admin */
.file-delete{
    position:absolute;
    top:8px;
    right:8px;
    display:none;
    width:28px;
    height:28px;
    border-radius:6px;
    border:none;
    background:#e74c3c;
    color:#fff;
    font-weight:700;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

/* show delete on hover of box */
.file-box:hover .file-delete{ display:flex; }

/* główna kolumna z informacjami */
.file-main{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
    height:100%;
    min-width:0; /* ADDED: allow flex child to shrink so right column stays visible */
}
.file-title{
    font-weight:600;
    display:-webkit-box;
    line-clamp:2;               /* standard property for compatibility */
    -webkit-line-clamp:2;       /* limit to 2 lines */
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-word;
}

/* meta (rozmiar + data) */
.file-meta{font-size:13px;color:#444;display:flex;flex-direction:column;gap:4px}
.file-size, .file-date{color:#555}

/* prawa kolumna - typ pliku (duży bold na środku) */
.file-type{
    flex:0 0 64px; /* ADDED: fixed width column that doesn't get pushed */
    min-width:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    color:#2b7fff;
    background:rgba(43,123,255,0.06);
    border-radius:6px;
    padding:6px;
    text-align:center;
    height:100%; /* new: wyrównaj pionowo do wysokości boxa */
}

/* file-actions pozostaje na dole w kolumnie głównej */
.file-actions{margin-top:auto;display:flex;gap:8px;justify-content:space-between}
.btn{padding:6px 10px;border-radius:6px;border:1px solid #ccc;background:#f0f0f0;cursor:pointer}
.btn-download{background:#2b7fff;color:#fff;border-color:#1a5fd1}

/* modal & overlay */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:1200}
.modal-overlay.show{display:flex}
.modal{background:#fff;padding:18px;border-radius:10px;width:360px;box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.modal h2{margin-bottom:8px}
.modal label{display:block;margin-top:8px;font-size:13px}
.modal input[type="text"], .modal input[type="file"], .modal input[type="password"]{width:100%;padding:8px;margin-top:6px;border:1px solid #ddd;border-radius:6px}

/* actions */
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.actions button{padding:8px 12px;border-radius:6px;border:1px solid #ccc;background:#f5f5f5;cursor:pointer}

/* auth overlay (full-screen blocking) */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,20,30,0.6);z-index:1300}
.overlay.show{display:flex}

/* ukryj nagłówek dopóki overlay ma klasę .show */
.overlay.show ~ header { display: none; }

.overlay-panel{background:#fff;padding:22px;border-radius:12px;width:320px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.25)}
.overlay-panel h2{margin-bottom:12px}
.overlay-panel input{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px}
.overlay-panel button{padding:8px 12px;border-radius:8px;background:#2b7fff;color:#fff;border:none;cursor:pointer}
.msg{margin-top:8px;color:#b00;font-size:13px}

/* theme variables */
:root{
    --bg: #f5f7fb;
    --text: #222;
    --panel-bg: #fff;
    --muted: #666;
    --accent: #2b7fff;
    --box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --overlay-bg: rgba(10,20,30,0.6);
}
[data-theme="dark"]{
    --bg: #0f1114;
    --text: #e6eef8;
    --panel-bg: #121419;
    --muted: #9aa6b2;
    --accent: #4aa3ff;
    --box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    --overlay-bg: rgba(0,0,0,0.65);
}

/* apply variables */
body{background:var(--bg);color:var(--text)}
header, .modal, .overlay-panel, .file-box{background:var(--panel-bg)}
.file-author, .file-meta, .msg{color:var(--muted)}
.file-box{box-shadow:var(--box-shadow)}
.btn-download, #upload_button button{background:var(--accent);color:#fff;border-color:darken(var(--accent),10%)}

/* theme toggle button (fixed top-right) */
#themeToggle{
    position:fixed;
    top:12px;
    right:12px;
    z-index:1600;
    width:44px;
    height:36px;
    border-radius:8px;
    border:1px solid rgba(0,0,0,0.08);
    background:var(--panel-bg);
    color:var(--text);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--box-shadow);
    font-size:16px;
}

/* small visual tweak in dark mode border */
[data-theme="dark"] #themeToggle{border-color:rgba(255,255,255,0.06)}

/* admin badge (top-left) */
.admin-badge{
    position:fixed;
    top:12px;
    left:12px;
    z-index:1700;
    display:none; /* hidden by default */
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:8px;
    background:#e74c3c;
    color:#fff;
    font-weight:700;
    font-size:13px;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    pointer-events:auto;
}
.admin-badge.show{ display:flex; }

/* dark-theme tweak */
[data-theme="dark"] .admin-badge{ background:#c0392b; color:#fff; }