/* ══════════════════════════════════════════════════════════
   DMA — Główny arkusz stylów
   Motyw: dark (domyślny) / light
   ══════════════════════════════════════════════════════════ */

/* ── Zmienne ─────────────────────────────────────────────── */
:root {
    --bg-app:       #141414;
    --bg-sidebar:   #1a1a1a;
    --bg-main:      #1e1e1e;
    --bg-card:      #252525;
    --bg-hover:     #2e2e2e;
    --bg-selected:  #1a3a5c;
    --bg-input:     #2a2a2a;
    --bg-modal:     #222222;
    --bg-toolbar:   #1a1a1a;

    --text-primary:   #e8e8e8;
    --text-secondary: #8a8a8a;
    --text-muted:     #555;

    --border:         #2e2e2e;
    --border-focus:   #4a9eff;

    --accent:         #e53935;
    --accent-hover:   #c62828;
    --accent-blue:    #1565c0;
    --accent-blue-h:  #0d47a1;

    --ok:    #4caf50;
    --warn:  #ff9800;
    --error: #f44336;

    --badge-local:   #1565c0;
    --badge-gdrive:  #2e7d32;
    --badge-ext:     #6a1b9a;
    --badge-weblink: #e65100;

    --shadow:        0 4px 24px rgba(0,0,0,.5);
    --radius:        6px;
    --radius-sm:     4px;
    --sidebar-w:     240px;
    --toolbar-h:     52px;
    --statusbar-h:   32px;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

[data-theme="light"] {
    --bg-app:       #f0f0f0;
    --bg-sidebar:   #fafafa;
    --bg-main:      #f5f5f5;
    --bg-card:      #ffffff;
    --bg-hover:     #eeeeee;
    --bg-selected:  #e3f2fd;
    --bg-input:     #ffffff;
    --bg-modal:     #ffffff;
    --bg-toolbar:   #fafafa;

    --text-primary:   #1a1a1a;
    --text-secondary: #555;
    --text-muted:     #9e9e9e;

    --border:         #ddd;
    --border-focus:   #1565c0;

    --shadow:        0 2px 16px rgba(0,0,0,.12);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── Layout shell ────────────────────────────────────────── */
body {
    display: flex;
    height: 100vh;
    height: 100dvh; /* iOS Safari: dynamiczny viewport (ukrywa wycięcie paska adresu) */
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden; /* nav scrolluje wewnętrznie, dół zawsze widoczny */
    user-select: none;
    transition: width .2s ease, min-width .2s ease;
    position: relative;
}
/* ── Sidebar collapsed ───────────────────────────────────── */
.sidebar.collapsed {
    width: 52px;
    min-width: 52px;
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .sidebar-actions .btn span,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .user-name { display: none; }

.sidebar.collapsed .sidebar-actions .btn {
    justify-content: center;
    padding: .5rem;
}
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: .55rem;
}
.sidebar.collapsed .sidebar-bottom {
    flex-direction: column;
    gap: .35rem;
    padding: .5rem .35rem;
}
.sidebar.collapsed .user-info { flex-direction: column; }
.sidebar.collapsed .btn-login-guest span { display: none; }
.sidebar.collapsed .btn-login-guest { padding: .4rem; justify-content: center; }

/* ── Sidebar collapse button ─────────────────────────────── */
/* ── Storage widget ──────────────────────────────────────────── */
.storage-widget {
    border-top: 1px solid var(--border);
    padding: .5rem .35rem;
    flex-shrink: 0;
}
/* Collapsed: tylko donut */
.storage-donut {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px; height: 36px;
    margin: 0 auto;
    cursor: default;
}
.storage-donut-svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.storage-donut-bg  { stroke: var(--border); }
.storage-donut-arc { stroke: var(--accent); transition: stroke-dasharray .5s ease; }
.storage-donut-pct {
    position: absolute;
    font-size: .45rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    pointer-events: none;
}
/* Expanded: pasek + etykieta (ukryty gdy collapsed) */
.storage-bar-wrap { display: none; padding: 0 .4rem; }
.storage-bar-track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: .3rem;
}
.storage-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width .5s ease;
}
.storage-bar-label {
    font-size: .65rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
}
/* Gdy sidebar rozwinięty: ukryj donut, pokaż pasek */
.sidebar:not(.collapsed) .storage-donut  { display: none; }
.sidebar:not(.collapsed) .storage-bar-wrap { display: block; }

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .45rem;
    background: var(--bg-sidebar);
    border: none;
    border-top: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-secondary);
    transition: color .15s, background .15s;
    flex-shrink: 0;
    margin-top: auto;
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-collapse-btn svg { width: 18px; height: 18px; fill: currentColor; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.2rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
}
.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 5px;
    flex-shrink: 0;
    color: #fff;
    font-size: 1rem;
}
.logo-dma {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
    display: none;          /* ukryte w trybie rozszerzonym */
}
.logo-text  { font-weight: 700; font-size: 1rem; letter-spacing: .02em; }

/* collapsed: pokaż DMA w kwadracie, ukryj logo-text */
.sidebar.collapsed .logo-icon {
    width: 32px;
    height: 32px;
}
.sidebar.collapsed .logo-dma { display: block; }
.sidebar.collapsed .sidebar-logo {
    justify-content: center;
    padding: .85rem .5rem;
}

.sidebar-actions {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
}
.sidebar-actions .btn { justify-content: flex-start; width: 100%; }
.sidebar-actions .btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

.sidebar-nav {
    flex: 1;
    padding: .25rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s;
    font-size: .875rem;
}
.nav-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.nav-item:hover  { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--bg-selected); color: var(--text-primary); }

.sidebar-bottom {
    padding: .75rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.user-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
}
.user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.user-name { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Main area ───────────────────────────────────────────── */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-main);
}

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
    height: var(--toolbar-h);
    min-height: var(--toolbar-h);
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    user-select: none;
}
.breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: .875rem;
    overflow: hidden;
}
.bc-item {
    color: var(--text-secondary);
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
}
.bc-item:hover { color: var(--text-primary); }
.bc-item:last-child { color: var(--text-primary); font-weight: 500; }
.bc-sep { color: var(--text-muted); padding: 0 .1rem; }

.toolbar-actions { display: flex; align-items: center; gap: .5rem; }
.toolbar-right   { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.view-toggle     { opacity: .5; }
.view-toggle.active { opacity: 1; }

/* ── File area ───────────────────────────────────────────── */
.file-area {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.file-list-header {
    display: grid;
    grid-template-columns: 36px 1fr 100px 120px 130px 80px;
    align-items: center;
    padding: .4rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-toolbar);
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: .8rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.file-row {
    display: grid;
    grid-template-columns: 36px 1fr 100px 120px 130px 80px;
    align-items: center;
    padding: .35rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
}
.file-row:hover    { background: var(--bg-hover); }
.file-row.selected { background: var(--bg-selected); }

.col-check  { display: flex; align-items: center; }
.col-name   { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.col-size   { font-size: .8rem; color: var(--text-secondary); }
.col-storage { }
.col-date   { font-size: .8rem; color: var(--text-secondary); }
.col-actions { display: flex; gap: .3rem; justify-content: flex-end; }

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}
.folder-row .file-name { font-weight: 500; }

/* Ikony plików */
.file-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700; color: #fff;
    background: var(--text-muted);
}
.file-icon::after { content: 'FILE'; }

.icon-folder  { background: #f9a825; }
.icon-folder::after { content: ''; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") no-repeat center/20px; width: 32px; height: 32px; display: block; }

.icon-image   { background: #1565c0; }
.icon-image::after { content: 'IMG'; }
.icon-pdf     { background: #c62828; }
.icon-pdf::after { content: 'PDF'; }
.icon-video   { background: #6a1b9a; }
.icon-video::after { content: 'VID'; }
.icon-audio   { background: #00695c; }
.icon-audio::after { content: 'AUD'; }
.icon-word    { background: #1565c0; }
.icon-word::after { content: 'DOC'; }
.icon-excel   { background: #2e7d32; }
.icon-excel::after { content: 'XLS'; }
.icon-ppt     { background: #e65100; }
.icon-ppt::after { content: 'PPT'; }
.icon-archive { background: #4e342e; }
.icon-archive::after { content: 'ZIP'; }
.icon-file    { background: #424242; }

/* ── Grid view ───────────────────────────────────────────── */
.file-area.grid-view .file-list-header { display: none; }
.file-area.grid-view #fileList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    padding: 1rem;
    align-items: start; /* karty mają własną wysokość, nie wyrównują się do rzędu */
}
.file-area.grid-view .file-row {
    display: flex; flex-direction: column; align-items: center;
    padding: 1rem .75rem; border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
    grid-template-columns: unset;
}
.file-area.grid-view .file-row .file-icon { width: 48px; height: 48px; font-size: .75rem; }
.file-area.grid-view .file-row .col-check  { display: none; }
.file-area.grid-view .file-row .col-size,
.file-area.grid-view .file-row .col-date,
.file-area.grid-view .file-row .col-storage { display: none; }
.file-area.grid-view .file-row .col-empty  { display: none; }
.file-area.grid-view .file-row .col-actions { display: none; }
.file-area.grid-view .file-row .col-name  { flex-direction: column; gap: .35rem; width: 100%; }
.file-area.grid-view .file-row .badge-pub-inline { display: none; }
/* tile-only meta elements */
.tile-meta, .tile-badges { display: none; }
.file-area.grid-view .file-row .tile-meta {
    display: block;
    font-size: .7rem;
    color: var(--text-secondary);
}
.file-area.grid-view .file-row .tile-meta:empty { display: none; }
.file-area.grid-view .file-row .tile-badges {
    display: flex;
    gap: .25rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.file-area.grid-view .file-row .tile-badges:empty { display: none; }
.file-area.grid-view .file-row .col-name .file-name {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: calc(1.3em * 3);
}

/* ── Status bar ──────────────────────────────────────────── */
.statusbar {
    height: var(--statusbar-h);
    min-height: var(--statusbar-h);
    background: var(--bg-toolbar);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    font-size: .78rem;
    color: var(--text-secondary);
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60%;
    gap: 1rem;
    color: var(--text-muted);
}
.empty-state svg { width: 64px; height: 64px; fill: var(--text-muted); opacity: .4; }
.empty-state p { font-size: 1rem; }

/* ── Loading ─────────────────────────────────────────────── */
.loading-spinner {
    display: flex; align-items: center; justify-content: center;
    padding: 4rem;
}
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    border: none;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}
.btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-hover); color: var(--text-primary); }
.btn-secondary:hover { background: var(--border); }
.btn-danger    { background: var(--error); color: #fff; }
.btn-danger:hover { opacity: .85; }
.btn-sm        { padding: .3rem .65rem; font-size: .8rem; }
.btn-xs        { padding: .2rem .5rem; font-size: .75rem; }
.btn-full      { width: 100%; }
.btn-upload    { background: var(--accent); color: #fff; }
.btn-icon {
    background: transparent; border: none; cursor: pointer;
    padding: .4rem; border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
}
.badge-local   { background: var(--badge-local); }
.badge-gdrive  { background: var(--badge-gdrive); }
.badge-ext     { background: var(--badge-ext); }
.badge-weblink { background: var(--badge-weblink); }
.badge-admin      { background: var(--accent); }
.badge-superuser  { background: #7b1fa2; }
.badge-user       { background: var(--text-muted); }

/* ── Forms ───────────────────────────────────────────────── */
.form-group {
    display: flex; flex-direction: column;
    gap: .35rem;
    margin-bottom: .85rem;
}
.form-group label { font-size: .82rem; color: var(--text-secondary); font-weight: 500; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-check {
    display: flex; align-items: center; gap: .5rem;
    font-size: .85rem;
    margin-bottom: .75rem;
}
.form-group-btn { justify-content: flex-end; align-self: flex-end; }
.form-hint { font-size: .78rem; color: var(--text-secondary); opacity: .8; }
.form-hint code { font-family: monospace; background: var(--bg-hover); padding: 0 3px; border-radius: 3px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], select, textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: .875rem;
    padding: .5rem .75rem;
    width: 100%;
    transition: border-color .15s;
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--border-focus); }
select { appearance: none; cursor: pointer; }

/* ── Modals ──────────────────────────────────────────────── */
.modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 100;
}
.modal.open { display: flex; align-items: center; justify-content: center; }
.modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(2px);
}
.modal-box {
    position: relative; z-index: 1;
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 520px; max-width: 95vw;
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: modalIn .15s ease;
}
.modal-sm  { width: 380px; }
.modal-lg  { width: 700px; }
@keyframes modalIn {
    from { opacity:0; transform: scale(.96) translateY(8px); }
    to   { opacity:1; transform: none; }
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1rem; font-weight: 600; }
.modal-close {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0;
    transition: color .15s;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}
.modal-footer {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: .5rem;
}

/* ── Upload modal ────────────────────────────────────────── */
.upload-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.upload-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-secondary); cursor: pointer; padding: .5rem 1rem;
    font-size: .875rem; font-family: var(--font);
    margin-bottom: -1px;
    transition: color .15s;
}
.upload-tab:hover  { color: var(--text-primary); }
.upload-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 500; }
.upload-panel { display: none; }
.upload-panel.active { display: block; }

.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    transition: border-color .2s, background .2s;
    cursor: pointer;
}
.drop-zone.dragover { border-color: var(--accent); background: rgba(229,57,53,.06); }
.drop-zone svg { width: 40px; height: 40px; fill: var(--text-muted); margin-bottom: .75rem; }
.drop-zone p { font-size: .875rem; line-height: 1.8; }
.drop-zone span { font-size: .8rem; }

.upload-queue { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.upload-item {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
    display: flex; align-items: center; gap: .75rem;
}
.upload-item-name { flex: 1; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item-status { font-size: .8rem; color: var(--text-secondary); white-space: nowrap; }
.upload-item-status.ok     { color: var(--ok); }
.upload-item-status.error  { color: var(--error); }
.upload-progress {
    height: 3px; background: var(--bg-card); border-radius: 99px;
    overflow: hidden; margin-top: .3rem;
}
.upload-progress-bar {
    height: 100%; background: var(--accent);
    transition: width .2s;
}

/* ── Context menu ────────────────────────────────────────── */
.context-menu {
    position: fixed; z-index: 200;
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 180px;
    overflow: hidden;
    animation: ctxIn .1s ease;
}
@keyframes ctxIn {
    from { opacity:0; transform: scale(.95); }
    to   { opacity:1; transform: none; }
}
.context-menu ul { list-style: none; }
.context-menu li a,
.context-menu li button {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .55rem 1rem;
    background: none; border: none; font-family: var(--font);
    font-size: .875rem; color: var(--text-primary);
    cursor: pointer; text-align: left;
    transition: background .1s;
}
.context-menu li:hover > a,
.context-menu li:hover > button { background: var(--bg-hover); }
.context-menu li svg { width: 16px; height: 16px; fill: currentColor; color: var(--text-secondary); }
.context-menu li.danger button { color: var(--error); }
.context-menu li.separator { border-top: 1px solid var(--border); margin: .2rem 0; }
.ctx-icon {
    width: 16px; text-align: center;
    font-size: .9rem; line-height: 1;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ── Copy row ────────────────────────────────────────────── */
.copy-row { display: flex; gap: .5rem; align-items: center; }
.copy-row input { flex: 1; font-family: var(--mono); font-size: .8rem; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    padding: .65rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    margin-bottom: .75rem;
}
.alert-error   { background: rgba(244,67,54,.15); color: #ef9a9a; border: 1px solid rgba(244,67,54,.3); }
.alert-success { background: rgba(76,175,80,.15); color: #a5d6a7; border: 1px solid rgba(76,175,80,.3); }
.alert-warn    { background: rgba(255,152,0,.15); color: #ffcc80; border: 1px solid rgba(255,152,0,.3); }

/* ── Auth pages ──────────────────────────────────────────── */
body.auth-page {
    display: flex; align-items: center; justify-content: center;
    height: 100vh;
}
.auth-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 400px; max-width: 95vw;
}
.auth-logo { justify-content: center; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.auth-box h2 { text-align: center; margin-bottom: .25rem; font-size: 1.25rem; }
.auth-sub { text-align: center; color: var(--text-secondary); font-size: .875rem; margin-bottom: 1.5rem; }

/* ── Admin area ──────────────────────────────────────────── */
.admin-area {
    overflow-y: auto;
    padding-bottom: 2rem;
}
.admin-header {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-toolbar);
}
.admin-header h1 { font-size: 1.25rem; margin-bottom: 1rem; }
.stats-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1.25rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.stat-val   { font-size: 1.5rem; font-weight: 700; }
.stat-label { font-size: .78rem; color: var(--text-secondary); }

.admin-section { padding: 1.5rem 2rem; }
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.section-header h2 { font-size: 1rem; font-weight: 600; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.admin-table th, .admin-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.admin-table th {
    color: var(--text-secondary);
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--bg-toolbar);
}
.admin-table tr:hover td { background: var(--bg-hover); }
.admin-table .row-inactive { opacity: .5; }
.admin-table .actions-cell { display: flex; gap: .4rem; flex-wrap: wrap; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.sort-link:hover { color: var(--accent); }
.sort-arrow { font-size: .75rem; opacity: .9; }
.sort-none { opacity: .35; }

.inline-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* ── Share page ──────────────────────────────────────────── */
body.share-page { display: block; overflow: auto; padding: 2rem 1rem; }
.share-container {
    max-width: 800px;
    margin: 0 auto;
}
.share-header {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
.share-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; word-break: break-word; overflow-wrap: anywhere; }
.share-files .file-name { white-space: normal; word-break: break-word; overflow-wrap: anywhere; text-overflow: unset; overflow: visible; }
.share-meta  { color: var(--text-secondary); font-size: .875rem; margin-bottom: 1.25rem; }
.share-actions { display: flex; justify-content: center; gap: 1rem; }
.share-files {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.share-files .file-list-header {
    grid-template-columns: 1fr 100px 120px 80px;
}
.share-files .file-row {
    grid-template-columns: 1fr 100px 120px 80px;
}
.share-footer {
    display: flex; justify-content: center; margin-top: 1rem;
}
.share-error {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    color: var(--text-secondary);
}
.share-error svg { width: 56px; height: 56px; fill: var(--text-muted); }
.share-error h2  { color: var(--text-primary); }

/* ── Text helpers ────────────────────────────────────────── */
.text-ok      { color: var(--ok); }
.text-muted   { color: var(--text-secondary); }
.text-error   { color: var(--error); }

/* ── Checkbox ────────────────────────────────────────────── */
input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Responsive adjustments ──────────────────────────────── */
@media (max-width: 768px) {
    /* ── Sidebar ── */
    .sidebar { width: 52px; min-width: 52px; }
    .sidebar-logo .logo-text,
    .nav-item span, .sidebar-actions .btn span,
    .user-name { display: none; }
    .sidebar-actions .btn { padding: .5rem; justify-content: center; }
    .nav-item { padding: .55rem; justify-content: center; }
    /* sidebar-bottom: kolumna ikon jak w trybie collapsed */
    .sidebar-bottom { flex-direction: column; gap: .35rem; padding: .5rem .35rem; }
    .sidebar-bottom .user-info { flex-direction: column; }
    .sidebar-collapse-btn { display: flex; } /* zawsze widoczny */
    /* storage widget: na mobile sidebar zawsze wąski — pokaż donut */
    .storage-donut    { display: flex !important; }
    .storage-bar-wrap { display: none  !important; }

    /* ── Toolbar: breadcrumb nad searchem ── */
    .toolbar {
        height: auto;
        min-height: var(--toolbar-h);
        flex-wrap: wrap;
        padding: .4rem .75rem;
        gap: .35rem .5rem;
        row-gap: .35rem;
    }
    .breadcrumb    { flex: 1 1 100%; order: 1; min-width: 0; }
    .search-box    { flex: 1 1 100%; max-width: 100%; min-width: 0; order: 2; }
    .toolbar-actions { order: 3; }
    .toolbar-right { order: 4; margin-left: auto; }

    /* ── File list: tylko checkbox + nazwa ── */
    .file-list-header,
    .file-row { grid-template-columns: 36px 1fr; }
    .col-size, .col-storage, .col-date, .col-actions,
    .file-list-header .col-size,
    .file-list-header .col-storage,
    .file-list-header .col-date { display: none; }

    /* ── col-name: wrap + przyciski do prawej ── */
    .file-row .col-name {
        flex-wrap: wrap;
        align-items: center;
        padding: .25rem 0;
        row-gap: 0;
    }
    .file-row .col-name .file-icon { align-self: flex-start; margin-top: 2px; }
    .file-row .col-name .file-name { flex: 1; min-width: 0; }
    /* tile-btns (pub+star) przesunięty do prawej */
    .file-row .col-name .tile-btns { margin-left: auto; display: flex; gap: .25rem; align-items: center; flex-shrink: 0; }

    /* ── Metadane pod nazwą ── */
    .file-row .tile-meta {
        display: block !important;
        flex-basis: 100%;
        padding-left: calc(32px + .6rem); /* icon 32px + col-name gap .6rem */
        font-size: .7rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 0;
        line-height: 1.2;
    }

    /* ── Przywróć wygląd grid-view (kafelki) na mobile ── */
    .file-area.grid-view .file-row .col-name {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0;
        gap: .35rem;
    }
    .file-area.grid-view .file-row .col-name .file-icon { align-self: center; margin-top: 0; }
    .file-area.grid-view .file-row .col-name .file-name { flex: unset; min-width: unset; }
    .file-area.grid-view .file-row .col-name .tile-btns { margin-left: 0; justify-content: center; }
    .file-area.grid-view .file-row .tile-meta           { padding-left: 0; text-align: center; }

    /* ── Admin — mobile layout: body scrolluje, nie admin-area ── */
    body.admin-page { height: auto; overflow-x: clip; overflow-y: auto; }
    body.admin-page .admin-area { overflow: visible; height: auto; padding: 0; min-width: 0; width: 0; flex: 1; }
    .admin-section { padding: .75rem 1rem; min-width: 0; }
    .form-row { grid-template-columns: 1fr; }

    /* subtabs przyklejone do góry viewport */
    .admin-subtabs { top: 0; }

    /* stat-boxy: kompaktowe chipsy w jednym rzędzie */
    .admin-header { padding: .75rem 1rem .5rem; }
    .admin-header h1 { font-size: 1.1rem; margin-bottom: .1rem; }
    .admin-subtitle { font-size: .78rem; margin-bottom: .5rem; }
    .stats-row { gap: .4rem; flex-wrap: nowrap; }
    .stat-box {
        flex: 1;
        flex-direction: row;
        align-items: baseline;
        gap: .3rem;
        padding: .3rem .5rem;
        min-width: 0;
    }
    .stat-val   { font-size: .95rem; }
    .stat-label { font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* subtabs: przyklejony na górze + scrollowalny poziomo */
    .admin-subtabs {
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-top: .4rem;
        border-bottom-width: 1px;
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--bg-toolbar);
    }
    .admin-subtabs::-webkit-scrollbar { display: none; }
    .admin-subtab { padding: .45rem .85rem; font-size: .82rem; }

    /* ── Share page — mobile ── */
    .share-container { max-width: 100%; }
    body.share-page  { padding: 1rem .75rem; }
    .share-files .file-list-header,
    .share-files .file-row { grid-template-columns: 1fr auto; }
    .share-files .col-size,
    .share-files .col-storage { display: none; }
}

@media (max-width: 480px) {
    /* Na bardzo małych ekranach ukryj też sidebar zupełnie,
       zastąp hamburgerem — na razie minimalizuj do ikon */
    .sidebar { width: 44px; min-width: 44px; }
    .nav-item { padding: .45rem; }
    .file-row { padding: .4rem .5rem; }
    /* Checkbox zbyt mały do tapnięcia — ukryj na małych */
    .col-check { display: none; }
    .file-list-header,
    .file-row { grid-template-columns: 1fr; }

    /* Admin subtabs: tylko ikony na bardzo małych ekranach */
    .admin-subtab span { display: none; }
    .admin-subtab { padding: .5rem 1rem; }
    .admin-subtab svg { width: 18px; height: 18px; }
}

/* ── Row new highlight animation ─────────────────────────── */
@keyframes row-new-flash {
    0%   { background: rgba(var(--accent-rgb, 229,57,53), 0.35); }
    50%  { background: rgba(var(--accent-rgb, 229,57,53), 0.15); }
    100% { background: transparent; }
}
.row-new {
    animation: row-new-flash 2s ease-out forwards;
}

/* ── Upload queue scroll ─────────────────────────────────── */
.upload-queue {
    max-height: 220px;
    overflow-y: auto;
}

/* ── Sort icons ──────────────────────────────────────────── */
.col-sortable {
    cursor: pointer;
    user-select: none;
}
.col-sortable:hover {
    color: var(--text-primary);
}
.col-sortable .sort-icon {
    font-size: .75rem;
    opacity: .7;
}
.col-sortable.sort-active {
    color: var(--accent);
}
.col-sortable.sort-active .sort-icon {
    opacity: 1;
}

/* ── Search box ──────────────────────────────────────────── */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 360px;
    min-width: 160px;
}
.search-icon {
    position: absolute;
    left: .6rem;
    width: 16px;
    height: 16px;
    fill: var(--text-secondary);
    pointer-events: none;
    flex-shrink: 0;
}
.search-box input[type="text"] {
    width: 100%;
    padding: .45rem 1.8rem .45rem 2rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: .85rem;
    transition: border .15s;
}
.search-box input[type="text"]:focus {
    outline: none;
    border-color: var(--border-focus);
}
.search-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    z-index: 200;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
.search-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    cursor: pointer;
    transition: background .1s;
    font-size: .85rem;
}
.search-item:hover {
    background: var(--bg-hover);
}
.search-item .file-icon {
    width: 24px;
    height: 24px;
    font-size: .55rem;
    flex-shrink: 0;
}
.search-item-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.search-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.search-item-path {
    font-size: .72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-item-type {
    font-size: .72rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    align-self: start;
    margin-top: .1rem;
}
.search-loading {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.search-no-results {
    padding: .75rem 1rem;
    color: var(--text-secondary);
    font-size: .85rem;
    text-align: center;
}

/* ── Viewer modal fullscreen ─────────────────────────────── */
.modal-fullscreen .modal-box {
    max-width: none !important;
    width: 92vw;
    max-height: 92vh;
}
.modal-viewer-box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 90vh;
}
.viewer-content-wrap {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
    position: relative;
}
.viewer-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;            /* override .modal-body padding */
    position: relative;    /* anchor for absolute-positioned PDF iframe */
}
.viewer-arrow {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .15s, background .15s;
    z-index: 2;
}
.viewer-arrow:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.viewer-arrow:disabled {
    opacity: .2;
    cursor: default;
}
.viewer-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.viewer-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
}
.viewer-media-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.viewer-audio-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}
.viewer-audio-name {
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: center;
}
.viewer-audio-wrap audio {
    width: min(400px, 90%);
}
.viewer-body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* ── PDF.js canvas viewer ────────────────────────────────── */
.pdf-canvas-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #404040;
}
.pdf-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    background: #323232;
    border-bottom: 1px solid #222;
}
.pdf-nav-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--accent);
    border-radius: 3px;
    color: var(--accent);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.pdf-nav-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.pdf-nav-btn:disabled { opacity: .25; cursor: default; }
.pdf-page-info {
    color: #bbb;
    font-size: .8rem;
    min-width: 56px;
    text-align: center;
    user-select: none;
}
.pdf-zoom-group { margin-left: auto; display: flex; gap: .35rem; }
.pdf-zoom-btn {
    height: 1.75rem;
    padding: 0 .6rem;
    background: none;
    border: 1px solid #555;
    border-radius: 3px;
    color: #ccc;
    font-size: .78rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.pdf-zoom-btn.active, .pdf-zoom-btn:hover { background: #555; color: #fff; }
.pdf-canvas-area {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #525659;
}
.pdf-canvas-area canvas {
    display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,.6);
    max-width: 100%;
}
.pdf-msg {
    color: #ccc;
    text-align: center;
    padding: 2rem 1rem;
    font-size: .9rem;
    line-height: 1.8;
}
.pdf-msg a { color: #90caf9; }
.pdf-newtab-btn {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    z-index: 10;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    color: #bbb;
    border-radius: 4px;
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1;
    opacity: .4;
    transition: opacity .15s;
}
.pdf-newtab-btn:hover { opacity: 1; color: #fff; }
#viewerFileName {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin-right: auto;
}

/* ── Settings form ───────────────────────────────────────── */
.settings-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    background: var(--bg-secondary);
}
.settings-card > .settings-card-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.settings-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.settings-card-toggle:hover { color: var(--text-primary); }
.card-chevron {
    width: 18px; height: 18px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform .2s;
}
.settings-card-toggle.collapsed .card-chevron { transform: rotate(-90deg); }
.settings-card-body { overflow: hidden; }
.settings-card-toggle.collapsed + .settings-card-body { display: none; }
.settings-card-toggle.collapsed { margin-bottom: 0; border-bottom-color: transparent; }
.settings-card .settings-section:last-child {
    margin-bottom: 0;
}
.settings-section {
    margin-bottom: 2rem;
}
.settings-section h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .25rem;
}
.settings-desc {
    font-size: .82rem;
    color: var(--text-secondary);
    margin-bottom: .75rem;
}
.color-picker-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.color-picker-row input[type="color"] {
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    cursor: pointer;
}
.color-preview-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── Area drag-and-drop overlay ──────────────────────────── */
.file-area {
    position: relative; /* potrzebne dla overlay */
}

/* ── GDrive inline panel ─────────────────────────────────── */
.gdrive-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    z-index: 2;
}
.gdrive-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.gdrive-panel-name {
    flex: 1;
    font-size: .875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.gdrive-panel-body {
    flex: 1;
    min-height: 0;
    position: relative;
}
.gdrive-panel-body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Breadcrumb — GDrive badge w ścieżce */
.bc-gdrive.bc-item { cursor: default; }
.bc-gdrive.bc-item:hover { color: var(--text-primary); }
.area-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(var(--accent-rgb, 229,57,53), 0.08);
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.file-area.drag-over .area-drop-overlay {
    display: flex;
}
.area-drop-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.area-drop-message svg {
    width: 52px;
    height: 52px;
    fill: var(--accent);
    opacity: .8;
}

/* ── Ostatnio dodane — grupy ─────────────────────────────── */
.recent-group-header {
    padding: .5rem 1rem .3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.recent-separator {
    border: none;
    border-top: 1px solid var(--border);
    margin: .5rem 0;
}
.recent-folder-tag {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    padding: .1rem .4rem;
    font-size: .68rem;
    border-radius: 3px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ── Strona profilu ───────────────────────────────────────── */
.profile-box {
    width: 100%;
    max-width: 520px;
    margin: 2rem auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.profile-back {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.profile-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700;
    flex-shrink: 0;
    margin-left: 2.5rem;
}
.profile-title h2 { font-size: 1.1rem; margin-bottom: .15rem; }
.profile-role {
    font-size: .78rem;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: .15rem .5rem;
    border-radius: 3px;
}
.profile-info {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.profile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-label { color: var(--text-secondary); flex-shrink: 0; }
.profile-info-value { color: var(--text-primary); font-weight: 500; text-align: right; }
.profile-section {
    padding: 1.25rem 1.5rem;
}
.profile-section h3 {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* user-info jako link */
a.user-info {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background .15s;
    padding: .2rem .3rem;
    margin: -.2rem -.3rem;
    text-decoration: none;
    color: inherit;
}
a.user-info:hover { background: var(--bg-hover); }

/* ── Moje push linki — filtry i lista ────────────────────── */
.shares-filter-bar {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-toolbar);
}
.shares-filter-bar input[type="text"],
.shares-filter-bar input[type="date"] {
    padding: .35rem .6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .82rem;
    font-family: var(--font);
}
.shares-filter-bar input[type="text"] { flex: 1; min-width: 0; }
.shares-filter-bar input:focus { outline: none; border-color: var(--border-focus); }

.shares-sort-label {
    font-size: .8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.shares-sort-select {
    padding: .35rem .5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .82rem;
    font-family: var(--font);
    cursor: pointer;
    flex-shrink: 0;
}
.shares-sort-narrow { width: auto; }
.shares-sort-select:focus { outline: none; border-color: var(--border-focus); }

/* Paginacja */
.shares-pagination {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
}
.shares-page-btns {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    align-items: center;
}
.shares-page-btn {
    padding: .25rem .6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: .8rem;
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, color .12s;
    line-height: 1.4;
}
.shares-page-btn:hover:not([disabled]) { background: var(--bg-hover); color: var(--text-primary); }
.shares-page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.shares-page-btn[disabled] { opacity: .35; cursor: default; }
.shares-page-arrow { font-size: .9rem; padding: .25rem .5rem; }
.shares-page-ellipsis { color: var(--text-muted); font-size: .85rem; padding: 0 .15rem; line-height: 1.8; }
.shares-perpage-row { display: flex; align-items: center; }

.share-list-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .7rem .85rem;
    margin-bottom: .4rem;
}
.share-list-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.share-list-info { flex: 1; min-width: 0; }
.share-list-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}
.share-list-meta {
    font-size: .77rem;
    color: var(--text-secondary);
    margin-top: .2rem;
}
.share-list-btns {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Folder picker (modal przenoszenia) ──────────────────────── */
.folder-picker-tree {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .35rem 0;
}
.fp-node {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--text-primary);
    border-radius: 0;
    transition: background .12s;
    user-select: none;
}
.fp-node:hover    { background: var(--bg-hover); }
.fp-node.fp-selected { background: var(--bg-selected); }
.fp-root { font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: .2rem; }
.fp-icon { font-size: .95rem; flex-shrink: 0; line-height: 1; }
.fp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Skróty ──────────────────────────────────────────────────── */
.shortcut-row { opacity: .92; }
.shortcut-icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.shortcut-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    font-size: .58rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ── Gwiazdki ────────────────────────────────────────────────── */
.star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    margin-left: .3rem;
    border-radius: 3px;
    opacity: .25;
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
    vertical-align: middle;
    color: var(--text-secondary);
}
.star-btn.starred         { opacity: 1; color: #f59e0b; }
.file-row:hover .star-btn { opacity: .55; }
.star-btn:hover           { opacity: 1; color: #f59e0b; }
.star-svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* ── Tile-btns: kontener pub-btn + star-btn ───────────────────── */
.tile-btns {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}
/* W grid-view: przyciski wyśrodkowane poziomo */
.file-area.grid-view .file-row .tile-btns {
    justify-content: center;
}

/* ── Pub badge (zawsze widoczny dla zalogowanych) ─────────────── */
.pub-btn {
    display: inline-flex;
    align-items: center;
    font-size: .65rem;
    padding: .1rem .45rem;
    border-radius: 3px;
    border: 1px solid currentColor;
    cursor: default;
    background: transparent;
    font-weight: 600;
    opacity: .25;
    color: var(--text-secondary);
    transition: opacity .15s, color .15s;
    flex-shrink: 0;
    vertical-align: middle;
}
.pub-btn.public             { opacity: 1; background: var(--ok); color: #fff; border-color: var(--ok); }
.file-row:hover .pub-btn    { opacity: .55; }
.pub-btn[data-pub-type]     { cursor: pointer; }
.pub-btn[data-pub-type]:hover { opacity: 1; }

/* tile-meta-storage: ukryty w grid-view (storage jest tam jako badge kolorowy) */
.file-area.grid-view .file-row .tile-meta-storage { display: none; }

/* ── Search clear button ──────────────────────────────────────── */
.search-clear {
    position: absolute;
    right: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: .85rem;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}
.search-clear:hover { color: var(--text-primary); background: var(--bg-hover); }

/* ── Folder picker — flat SVG icons ─────────────────────────── */
.fp-svg { width: 16px; height: 16px; fill: var(--text-secondary); display: block; }
.fp-node.fp-selected .fp-svg,
.fp-node:hover .fp-svg { fill: var(--text-primary); }

/* ── Admin — subtitle, logi, filtry ─────────────────────────── */
.admin-subtitle {
    font-size: .82rem;
    color: var(--text-secondary);
    margin: .2rem 0 0;
}
.log-filter-bar {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.log-filter-bar input,
.log-filter-bar select {
    padding: .35rem .6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .82rem;
    font-family: var(--font);
}
.log-filter-bar input[type="text"] { flex: 1; min-width: 120px; }
.log-filter-bar input:focus,
.log-filter-bar select:focus { outline: none; border-color: var(--border-focus); }

.log-action-badge {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.log-login        { background: rgba(76,175,80,.15);  color: #4caf50; }
.log-upload       { background: rgba(21,101,192,.15); color: #90caf9; }
.log-create_folder{ background: rgba(21,101,192,.1);  color: #90caf9; }
.log-delete       { background: rgba(244,67,54,.15);  color: #ef9a9a; }
.log-rename       { background: rgba(255,152,0,.15);  color: #ffcc80; }
.log-move         { background: rgba(156,39,176,.15); color: #ce93d8; }
.log-create_share { background: rgba(0,150,136,.15);  color: #80cbc4; }
.log-delete_share { background: rgba(244,67,54,.1);   color: #ef9a9a; }
.log-toggle_public{ background: rgba(255,193,7,.15);  color: #ffe082; }

/* ── Admin — poziome zakładki (subtabs) ──────────────────────── */
.admin-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin: 0 2rem;
    padding-top: .75rem;
}
.admin-subtab {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    font-size: .875rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
}
.admin-subtab svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.admin-subtab:hover  { color: var(--text-primary); }
.admin-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Admin header — pełna szerokość */
.admin-header { padding: 1.5rem 2rem .5rem; }
.admin-header h1 { font-size: 1.4rem; margin-bottom: .15rem; }

/* ── Nav Links — sekcja skrótów w sidebarze ──────────────────── */
.sidebar-nav-links {
    margin: 0;
    padding: .3rem 0 .4rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-sidebar));
    /* Fallback dla starszych przeglądarek */
    background: rgba(255,255,255,.03);
}
/* Tryb jasny */
[data-theme="light"] .sidebar-nav-links {
    background: rgba(0,0,0,.025);
}
.nav-links-section-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .35rem .9rem .2rem;
}
.sidebar.collapsed .nav-links-section-label { display: none; }

/* Elementy skrótów — styl jak .nav-item */
.nav-link-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .9rem;
    font-size: .875rem;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
}
.nav-link-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .75;
}
.nav-link-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-link-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.nav-link-item:hover svg { opacity: 1; }
.nav-link-item.active {
    background: var(--bg-hover);
    color: var(--accent);
}
.nav-link-item.active svg { opacity: 1; color: var(--accent); }

/* Zwinięty sidebar — ukryj etykiety, wyśrodkuj ikony */
.sidebar.collapsed .nav-link-item {
    padding: .45rem 0;
    justify-content: center;
    gap: 0;
}
.sidebar.collapsed .nav-link-item span { display: none; }

/* ── Nav link panel (iframe) ──────────────────────────────────── */
.nav-link-panel .nav-link-panel-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.nav-link-panel .nav-link-panel-icon svg {
    width: 18px;
    height: 18px;
}
/* breadcrumb ikona skrótu */
.bc-navlink.bc-item { cursor: default; }
.bc-navlink.bc-item:hover { color: var(--text-primary); }
.nav-link-crumb-icon {
    display: inline-flex;
    align-items: center;
    margin-right: .3rem;
    vertical-align: middle;
}
.nav-link-crumb-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* ── Nav link panel — fallback (strona zablokowana / brak połączenia) ── */
.nl-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: var(--bg-main);
    padding: 2rem;
    text-align: center;
    z-index: 1;
}
.nl-fallback-icon {
    opacity: .25;
    color: var(--text-primary);
}
.nl-fallback-icon svg {
    width: 48px;
    height: 48px;
}
.nl-fallback-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.nl-fallback-msg {
    font-size: .875rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
}

/* ── Admin — lista skrótów ────────────────────────────────────── */
.nav-links-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.nl-drag-handle {
    display: flex; align-items: center; justify-content: center;
    cursor: grab; opacity: .35; padding: 0 2px;
    color: var(--text-secondary);
}
.nl-drag-handle:active { cursor: grabbing; }
.nav-link-row.nl-dragging  { opacity: .4; }
.nav-link-row.nl-hidden-row { opacity: .45; }
.nav-link-row.nl-drag-over { outline: 2px solid var(--accent); border-radius: 6px; }
.nav-link-row {
    display: grid;
    grid-template-columns: 18px 28px 1fr 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background .15s;
}
.nav-link-row:hover { background: var(--bg-hover); }
.nav-link-icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.nav-link-icon-preview svg {
    width: 18px;
    height: 18px;
}
.nav-link-row-name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-link-row-url {
    font-size: .78rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-link-row-actions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}

/* ── Admin — picker ikon ──────────────────────────────────────── */
.icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 220px;
    overflow-y: auto;
}
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}
.icon-btn-selected {
    background: rgba(var(--accent-rgb, 229,57,53), .15);
    border-color: var(--accent);
    color: var(--accent);
}