/* =========================================================
   koplok.cloud — motyw "Vault"
   Paleta: grafit + mosiądz. Typografia: Space Grotesk / IBM Plex Sans / IBM Plex Mono.
   ========================================================= */

:root{
  --bg:            #14171C;
  --surface:       #1B1F26;
  --surface-2:     #232830;
  --surface-3:     #2B313B;
  --border:        #333A45;
  --text:          #E9E7E1;
  --text-dim:      #9AA2AD;
  --text-faint:    #6B7280;
  --accent:        #C99A5B;
  --accent-soft:   #C99A5B22;
  --accent-strong: #E0B37C;
  --ok:            #6FB3A0;
  --ok-soft:       #6FB3A022;
  --danger:        #E1615A;
  --danger-soft:   #E1615A22;
  --radius:        10px;
  --radius-lg:     14px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
::selection{ background: var(--accent-soft); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout shell ---------- */
.shell{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width: 240px;
  flex-shrink:0;
  background: linear-gradient(180deg, #171B21, #131619);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 20px 14px;
  position: sticky;
  top:0;
  height:100vh;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding: 4px 8px 22px;
  font-family: var(--font-display);
}
.brand-mark{
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, var(--accent-strong), var(--accent));
  color:#1A1206; font-weight:700; font-size:16px;
}
.brand-name{ font-weight:600; font-size:16px; letter-spacing:.2px; }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-sep{
  margin: 16px 8px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-faint);
}
.nav-link{
  display:flex; align-items:center; gap:10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text-dim); font-weight:500; font-size:14px;
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover{ background: var(--surface-2); color: var(--text); }
.nav-link.active{ background: var(--accent-soft); color: var(--accent-strong); }
.nav-ico{ width:18px; text-align:center; opacity:.9; }

.quota{ margin-top: 14px; padding: 12px 10px 4px; border-top: 1px solid var(--border); }
.quota-label{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:11.5px; color:var(--text-dim); margin-bottom:6px; }
.quota-dim{ color: var(--text-faint); }
.quota-track{ height:6px; border-radius:4px; background: var(--surface-3); overflow:hidden; }
.quota-fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius:4px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:64px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 26px; border-bottom: 1px solid var(--border);
  background: rgba(20,23,28,.7); backdrop-filter: blur(6px);
  position: sticky; top:0; z-index: 20;
}
.topbar-title{ font-family: var(--font-display); font-weight:600; font-size:18px; }
.topbar-user{ display:flex; align-items:center; gap:10px; }
.user-badge{
  width:28px; height:28px; border-radius:50%; background: var(--surface-3);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; color: var(--accent-strong);
}
.user-name{ font-weight:500; }
.logout-link{ color: var(--text-faint); font-size:13px; margin-left:6px; }
.logout-link:hover{ color: var(--danger); }

.content{ padding: 24px 26px 60px; max-width: 1180px; }

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 10%, #C99A5B14, transparent 40%),
    radial-gradient(circle at 85% 90%, #6FB3A012, transparent 40%),
    var(--bg);
  padding: 20px;
}
.auth-card{
  width: 380px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow);
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 22px; font-family: var(--font-display); }
.auth-title{ font-family: var(--font-display); font-size: 21px; font-weight:600; margin: 0 0 4px; }
.auth-sub{ color: var(--text-dim); font-size:13.5px; margin: 0 0 22px; }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:12.5px; color: var(--text-dim); margin-bottom:6px; font-weight:500; }
.field input, .field select{
  width:100%; padding: 10px 12px; border-radius: 8px; border:1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size:14px; font-family: var(--font-body);
}
.field input:focus, .field select:focus{ border-color: var(--accent); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 16px; border-radius:8px; border:1px solid transparent;
  font-weight:600; font-size:13.5px; cursor:pointer; transition: transform .06s ease, filter .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: linear-gradient(145deg, var(--accent-strong), var(--accent)); color:#1A1206; width:100%; }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ background: var(--surface-2); }
.btn-danger{ background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover{ filter: brightness(1.15); }
.btn-sm{ padding: 6px 10px; font-size:12.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.error-box{
  background: var(--danger-soft); color:#F3B5B1; border:1px solid #7A322E;
  padding: 10px 12px; border-radius:8px; font-size:13px; margin-bottom:16px;
}
.auth-foot{ margin-top:18px; text-align:center; font-size:12.5px; color: var(--text-faint); }

/* ---------- Toolbar / breadcrumbs ---------- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.breadcrumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:14px; color: var(--text-dim); }
.breadcrumbs a{ padding:4px 6px; border-radius:6px; }
.breadcrumbs a:hover{ background: var(--surface-2); color: var(--text); }
.breadcrumbs .sep{ color: var(--text-faint); }
.toolbar-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.search-box{
  display:flex; align-items:center; gap:8px; background: var(--surface-2);
  border:1px solid var(--border); border-radius:8px; padding: 7px 10px; min-width:200px;
}
.search-box input{ background:transparent; border:none; color:var(--text); font-size:13.5px; outline:none; width:100%; }
.search-scope-btn{
  flex-shrink:0; background: var(--surface-3); border:1px solid var(--border); color: var(--text-dim);
  font-size:11px; font-weight:600; padding: 4px 8px; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.search-scope-btn.active{ background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }

.toolbar-secondary{ margin-bottom: 16px; gap:10px; }
.results-info{ font-size:12.5px; color: var(--text-dim); margin: -8px 0 14px; }

.dropdown-wrap{ position:relative; }
.dropdown-panel{
  position:absolute; top: calc(100% + 6px); left:0; z-index:30; width:230px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
}
.filter-group{ margin-bottom:14px; }
.filter-group:last-of-type{ margin-bottom:12px; }
.filter-group-title{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); margin-bottom:8px; font-weight:600; }
.filter-row-2{ display:flex; gap:8px; }
.filter-row-2 input{ width:50%; padding: 7px 8px; border-radius:6px; border:1px solid var(--border); background: var(--surface); color: var(--text); font-size:12.5px; }
.filter-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--accent); margin-left:6px; vertical-align:middle; }

.saved-filters-list{ display:flex; flex-direction:column; gap:4px; }
.saved-filter-chip{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding: 6px 8px; border-radius:6px; background: var(--surface); border:1px solid var(--border);
  font-size:12.5px; cursor:pointer;
}
.saved-filter-chip:hover{ border-color: var(--accent); }
.saved-filter-chip .sf-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-filter-chip .sf-del{ flex-shrink:0; color: var(--text-faint); background:none; border:none; cursor:pointer; font-size:13px; padding:2px 4px; }
.saved-filter-chip .sf-del:hover{ color: var(--danger); }

.sort-wrap{ display:flex; align-items:center; gap:4px; }
.sort-select{
  padding: 7px 10px; border-radius:8px; border:1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size:13px; font-family: var(--font-body); cursor:pointer;
}

.view-toggle{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.view-btn{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); border:none; color: var(--text-dim); cursor:pointer; font-size:15px;
  border-left:1px solid var(--border);
}
.view-btn:first-child{ border-left:none; }
.view-btn.active{ background: var(--accent-soft); color: var(--accent-strong); }
.view-btn:hover:not(.active){ background: var(--surface-3); }

/* ---------- Widok listy ---------- */
.file-table td, .file-table th{ padding: 9px 12px; }
.file-table .col-check{ width:34px; }
.file-table .col-size{ width:110px; }
.file-table .col-date{ width:170px; }
.file-table .col-actions{ width:44px; }
.file-table th.sortable{ cursor:pointer; user-select:none; }
.file-table th.sortable:hover{ color: var(--text); }
.file-table th.sortable .sort-ind{ opacity:.6; }
.file-table tbody tr{ cursor:pointer; }
.file-table tbody tr.selected td{ background: var(--accent-soft); }
.file-row-name{ display:flex; align-items:center; gap:10px; }
.file-row-badge{
  flex-shrink:0; font-family: var(--font-mono); font-size:9.5px; font-weight:700;
  background: var(--surface-3); color: var(--accent-strong); border-radius:5px; padding: 3px 5px; min-width:30px; text-align:center;
}
.file-row-badge.dir{ background: var(--ok-soft); color: var(--ok); }
.file-row-name-text{ word-break:break-word; }
.file-table .file-select{ position:static; opacity:1; }
.file-table tr:not(:hover):not(.selected) .file-select{ opacity: .55; }

/* ---------- Kategorie plików (kolory odznak) ---------- */
.file-badge.cat-image, .file-row-badge.cat-image{ background:#C99A5B22; color:#E0B37C; }
.file-badge.cat-video, .file-row-badge.cat-video{ background:#E1615A22; color:#EA8C87; }
.file-badge.cat-audio, .file-row-badge.cat-audio{ background:#A98FD222; color:#C4B0E8; }
.file-badge.cat-document, .file-row-badge.cat-document{ background:#6FB3A022; color:#6FB3A0; }
.file-badge.cat-archive, .file-row-badge.cat-archive{ background:#9AA2AD22; color:#B5BBC5; }
.file-badge.cat-code, .file-row-badge.cat-code{ background:#6C90C922; color:#8FADDD; }

/* ---------- Dropzone / file grid ---------- */
.dropzone{
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  padding: 34px 20px; text-align:center; color: var(--text-dim);
  margin-bottom: 20px; transition: border-color .15s ease, background .15s ease;
}
.dropzone.drag-over{ border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.dropzone strong{ color: var(--text); }
.dropzone input[type=file]{ display:none; }

.file-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap:12px;
}
.file-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 32px 12px 14px; cursor:pointer; position:relative; user-select:none;
  transition: border-color .12s ease, transform .08s ease;
}
.file-card:hover{ border-color: var(--accent); }
.file-card.selected{ border-color: var(--accent); background: var(--accent-soft); }
.file-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  background: var(--surface-3); color: var(--accent-strong);
  border-radius:5px; padding: 3px 6px; margin-bottom:10px;
}
.file-badge.dir{ background: var(--ok-soft); color: var(--ok); }
.file-thumb-wrap{
  position:relative; margin: -32px -12px 10px; height: 96px; overflow:hidden;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-3);
}
.file-thumb-wrap::after{
  content:''; position:absolute; top:0; left:0; right:0; height:40px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events:none;
}
.file-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.file-row-thumb{ width:32px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0; background: var(--surface-3); }
.file-name{ font-size:13.5px; font-weight:500; word-break:break-word; margin-bottom:4px; line-height:1.35; max-height: 2.7em; overflow:hidden; }
.file-meta{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); }
.file-menu-btn{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:6px; z-index:2;
  display:flex; align-items:center; justify-content:center; color: var(--text-faint);
  background:transparent; border:none; cursor:pointer;
}
.file-menu-btn:hover{ background: var(--surface-3); color: var(--text); }

.file-select{
  position:absolute; top:8px; left:8px; width:18px; height:18px; z-index:2;
  border-radius:5px; border:1.5px solid var(--border); background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition: opacity .12s ease, background .12s ease, border-color .12s ease;
}
.file-card:hover .file-select,
.file-card.selected .file-select{ opacity:1; }
.file-card.selected .file-select{ background: var(--accent); border-color: var(--accent); }
.file-select.checked{ background: var(--accent); border-color: var(--accent); opacity:1; }

/* ---------- Przeciąganie myszką (drag & drop przenoszenie) ---------- */
.file-card[draggable="true"], .file-table tbody tr[draggable="true"]{ cursor: grab; }
.file-card.dragging, .file-table tbody tr.dragging{ opacity:.4; }
.file-card.drag-target{
  outline: 2px dashed var(--accent); outline-offset: -2px;
  background: var(--accent-soft); border-color: var(--accent);
}
.file-table tbody tr.drag-target td{ background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.breadcrumbs a.drag-target{
  background: var(--accent-soft); color: var(--accent-strong);
  outline: 2px dashed var(--accent); outline-offset: -2px; border-radius:6px;
}
.drag-ghost{
  position:fixed; top:-999px; left:-999px; padding: 6px 12px; border-radius:8px;
  background: var(--surface-3); color: var(--text); border:1px solid var(--accent);
  font-size:12.5px; font-weight:600; box-shadow: var(--shadow); pointer-events:none;
}
.file-select::after{
  content:''; width:5px; height:9px; border-right:2px solid #1A1206; border-bottom:2px solid #1A1206;
  transform: rotate(45deg) translate(-1px,-1px); opacity:0;
}
.file-card.selected .file-select::after, .file-select.checked::after{ opacity:1; }

.selection-bar{
  position:sticky; top:64px; z-index:15; margin-bottom:16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--surface-2); border:1px solid var(--accent); border-radius: var(--radius);
  padding: 10px 14px;
}
.selection-bar .sel-count{ font-weight:600; color: var(--accent-strong); margin-right:4px; }
.selection-bar .spacer{ flex:1; }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--text-faint); }
.empty-state .big{ font-size:34px; margin-bottom:10px; }

/* ---------- List (tables: shares, history, admin users) ---------- */
.panel{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
table.data{ width:100%; border-collapse: collapse; font-size:13.5px; }
table.data th{
  text-align:left; padding: 12px 16px; color: var(--text-faint); font-weight:600;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border);
}
table.data td{ padding: 12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background: var(--surface-2); }
.mono{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-dim); }
.tag{ display:inline-flex; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; letter-spacing:.02em; }
.tag-admin{ background: var(--accent-soft); color: var(--accent-strong); }
.tag-user{ background: var(--surface-3); color: var(--text-dim); }
.tag-ok{ background: var(--ok-soft); color: var(--ok); }
.tag-off{ background: var(--danger-soft); color: var(--danger); }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(10,12,15,.6); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal{
  width: 420px; max-width:100%; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow);
}
.modal h3{ margin: 0 0 16px; font-family: var(--font-display); font-size:17px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top: 20px; }
.hint{ font-size:12px; color: var(--text-faint); margin-top:4px; }

/* ---------- Context menu ---------- */
.ctx-menu{
  position:fixed; z-index:200; background: var(--surface-2); border:1px solid var(--border);
  border-radius:8px; padding:6px; box-shadow: var(--shadow); min-width:180px;
}
.ctx-item{ padding: 8px 10px; border-radius:6px; font-size:13.5px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.ctx-item:hover{ background: var(--surface-3); }
.ctx-item.danger{ color: var(--danger); }
.ctx-sep{ height:1px; background: var(--border); margin: 5px 2px; }

/* ---------- Toasts ---------- */
.toast-stack{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:300; }
.toast{
  background: var(--surface-2); border:1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius:8px; font-size:13.5px; box-shadow: var(--shadow); min-width:240px;
  animation: toast-in .18s ease;
}
.toast.ok{ border-left-color: var(--ok); }
.toast.error{ border-left-color: var(--danger); }
@keyframes toast-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- Misc ---------- */
.progress-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:12.5px; }
.progress-track{ flex:1; height:5px; border-radius:3px; background: var(--surface-3); overflow:hidden; }
.progress-fill{ height:100%; background: var(--accent); border-radius:3px; transition: width .15s ease; }

.section-title{ font-family: var(--font-display); font-weight:600; font-size:16px; margin: 0 0 14px; }
.subtle{ color: var(--text-dim); }
.card-pad{ padding: 18px 20px; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.spacer{ flex:1; }

/* checkbox row for permissions */
.check-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:10px; }

@media (max-width: 860px){
  .sidebar{ display:none; }
  .content{ padding: 18px; }
}