/* ============================================================
   CloudDrop — Nextcloud-Clone UI
   ============================================================ */

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

:root {
  --c-bg: #171c28;
  --c-sidebar: #1e2536;
  --c-header: #0d1117;
  --c-surface: #1e2536;
  --c-surface2: #252d40;
  --c-surface3: #2d3650;
  --c-border: rgba(255,255,255,.08);
  --c-border2: rgba(255,255,255,.12);
  --c-text: #c9d1d9;
  /* --c-text2 / --c-text3 bumped 2025-04: previous #8b949e/#484f58 pair was
     hard to read on the dark background — file-list header, filter chips,
     size/date columns and topbar user button all looked greyed out. New
     values keep the hierarchy (primary > muted > placeholder) but land above
     WCAG AA contrast (~70% / ~55% brightness) on --c-bg. */
  --c-text2: #c3cad3;
  --c-text3: #8a93a0;
  --c-accent: #2563eb;
  --c-accent2: #1d4ed8;
  --c-accent-subtle: rgba(37,99,235,.15);
  --c-accent-hover: rgba(37,99,235,.1);
  --c-danger: #ef4444;
  --c-danger-subtle: rgba(239,68,68,.1);
  --c-star: #eab308;
  --c-success: #22c55e;
  --c-row-hover: rgba(255,255,255,.04);
  --c-row-even: rgba(255,255,255,.015);
  --c-radius: 6px;
  --c-radius-lg: 10px;
  --topbar-h: 50px;
  --sidebar-w: 220px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* .hidden moved to base.css */

/* Accessibility: visually hide but keep for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--c-accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  z-index: 10000;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

/* ================================================================
   LOGIN SCREEN
   ================================================================ */
#loginView, #registerView, #totpStepView {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  z-index: 1000;
}

#loginView::before, #registerView::before, #totpStepView::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(37,99,235,.04) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(37,99,235,.03) 0%, transparent 50%);
  pointer-events: none;
}

.login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.login-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: float 20s ease-in-out infinite;
}

.login-bg .orb:nth-child(1) {
  width: 400px; height: 400px;
  background: #2563eb;
  top: 10%; left: 20%;
  animation-duration: 25s;
}

.login-bg .orb:nth-child(2) {
  width: 300px; height: 300px;
  background: #7c3aed;
  top: 60%; right: 15%;
  animation-duration: 30s;
  animation-delay: -5s;
}

.login-bg .orb:nth-child(3) {
  width: 250px; height: 250px;
  background: #06b6d4;
  bottom: 20%; left: 40%;
  animation-duration: 22s;
  animation-delay: -10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(30px, -40px) scale(1.05); }
  50%  { transform: translate(-20px, 20px) scale(0.95); }
  75%  { transform: translate(40px, 30px) scale(1.02); }
}

.login-card {
  position: relative;
  width: 360px;
  max-width: 90vw;
  background: rgba(30, 37, 54, .85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--c-border2);
  border-radius: 16px;
  padding: 40px 32px 36px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02) inset;
}

.login-logo { text-align: center; margin-bottom: 6px; }

.login-logo .logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--c-text);
}

.login-logo .logo-text span { color: var(--c-accent); }

.login-subtitle {
  text-align: center;
  font-size: .8rem;
  color: var(--c-text3);
  margin-bottom: 28px;
  font-weight: 400;
  letter-spacing: .3px;
}

.login-field { margin-bottom: 14px; }
.pw-toggle-btn {
  position: absolute; right: 8px; top: 20px; transform: translateY(-50%);
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--c-text3); display: flex; align-items: center;
  justify-content: center; border-radius: 4px;
}
.pw-toggle-btn:hover { color: var(--c-text); }

.login-field input {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  border-radius: var(--c-radius);
  color: var(--c-text);
  padding: 10px 14px;
  font-size: .85rem;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}

.login-field input::placeholder { color: var(--c-text3); }
.login-field input:focus { border-color: var(--c-accent); }

.login-btn {
  width: 100%;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: var(--c-radius);
  padding: 10px;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s;
  margin-top: 6px;
}

.login-btn:hover { background: var(--c-accent2); }

.login-error {
  text-align: center;
  font-size: .78rem;
  color: var(--c-danger);
  margin-top: 12px;
  min-height: 1.2em;
}

.login-link {
  text-align: center;
  font-size: .72rem;
  color: var(--c-text3);
  margin-top: 16px;
  line-height: 1.5;
}
.login-link a {
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 500;
}
.login-link a:hover { text-decoration: underline; }

/* Register-specific field validation */
.login-field .field-hint {
  font-size: .68rem;
  color: var(--c-text3);
  margin-top: 4px;
  display: none;
}
.login-field .field-hint.visible { display: block; }
.login-field .field-hint.error { color: var(--c-danger); }
.login-field .field-hint.ok { color: var(--c-success); }

/* Password strength meter */
.pw-strength-bar {
  height: 3px;
  background: var(--c-border2);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.pw-strength-bar .pw-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width .25s, background .25s;
}
/* Task #183: strength label + policy checklist */
.pw-strength-label {
  display: block;
  font-size: 0.7rem;
  margin-top: 4px;
  color: var(--c-text2, #94a3b8);
  font-weight: 500;
}
.pw-strength-label.weak { color: #ef4444; }
.pw-strength-label.medium { color: #eab308; }
.pw-strength-label.strong { color: #22c55e; }
.pw-policy-list {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  line-height: 1.5;
}
.pw-policy-list li {
  color: var(--c-text2, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pw-policy-list li::before {
  content: '\2715';
  color: #ef4444;
  font-weight: 700;
  width: 10px;
  display: inline-block;
}
.pw-policy-list li.ok { color: #22c55e; }
.pw-policy-list li.ok::before { content: '\2713'; color: #22c55e; }

/* ================================================================
   GLOBAL LOADING BAR
   ================================================================ */
.global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2563eb;
  z-index: 9999;
  animation: loadSlide 1.5s ease-in-out infinite;
}
.global-loader.hidden { display: none; }

@keyframes loadSlide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ================================================================
   MAIN LAYOUT — header + sidebar + content (Nextcloud-style)
   ================================================================ */
#cloudView {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--c-bg);
}

/* ---- Top Header Bar (Nextcloud dark navy) ---- */
.topbar {
  height: var(--topbar-h);
  background: var(--c-header);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 20;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-right: 8px;
}

.topbar-logo .logo-icon {
  width: 32px;
  height: 32px;
  background: var(--c-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-logo .logo-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
}

.topbar-logo .logo-text {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--c-text);
}

.topbar-logo .logo-text span { color: var(--c-accent); }

.topbar-search {
  width: 260px;
  flex-shrink: 0;
  position: relative;
}

.topbar-search input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--c-text);
  padding: 7px 38px 7px 16px;
  font-size: .8rem;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s, background .15s;
}

.topbar-search input::placeholder { color: var(--c-text3); }
.topbar-search input:focus { border-color: var(--c-accent); background: rgba(255,255,255,.08); }

/* #301 — search filter dropdown button (replaces floating "In Inhalten" label
   that was pushing the search bar up and hanging below it unattached). */
.search-filter-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--c-text3);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
.search-filter-btn:hover { background: rgba(255,255,255,.08); color: var(--c-text); }
.search-filter-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.search-filter-btn[aria-expanded="true"] { color: var(--c-accent); background: rgba(255,255,255,.08); }
/* Active dot — shown only when a filter is actually applied, not just opened */
.search-filter-btn.has-active-filter::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-bg, #0c1222);
}

.search-filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--c-surface, #131b2e);
  border: 1px solid var(--c-border, rgba(255,255,255,.09));
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 200;
}
.search-filter-popover[hidden] { display: none; }

.search-content-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--c-text2, #8896ab);
  cursor: pointer;
  user-select: none;
}
.search-content-toggle input { accent-color: var(--c-accent); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.search-content-toggle:has(input:checked) span { color: var(--c-accent); }

/* Breadcrumb in top bar */
.topbar-breadcrumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: .82rem;
  min-width: 0;
}

.breadcrumb-item {
  color: var(--c-text2);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .1s, background .1s;
  font-weight: 400;
  white-space: nowrap;
}

.breadcrumb-item:hover { color: var(--c-text); background: rgba(255,255,255,.06); }
.breadcrumb-item:last-child { color: var(--c-text); font-weight: 500; }
.bc-arrow { display:inline-flex;align-items:center;margin-left:2px;padding:2px;border-radius:3px;color:var(--c-text3);cursor:pointer;transition:color .1s,background .1s; }
.bc-arrow:hover { color:var(--c-accent);background:rgba(37,99,246,.12); }
/* #286: keyboard focus ring — .bc-arrow is a non-native clickable, so
   :focus-visible needs explicit styles (default browser outline is absent). */
.bc-arrow:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; background: rgba(37,99,246,.2); }
.bc-arrow svg { pointer-events:none; }
.breadcrumb-item.breadcrumb-ellipsis { color: var(--c-text3); letter-spacing: 1px; font-weight: 700; }
.breadcrumb-item.breadcrumb-ellipsis:hover { color: var(--c-accent); }
.breadcrumb-item[data-truncated="true"] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; }
.breadcrumb-sep { color: var(--c-text3); opacity: .4; font-weight: 300; margin: 0 1px; font-size: .78rem; }
.breadcrumb-item.drag-over { background: var(--c-accent-hover); color: var(--c-accent); }

.breadcrumb-back-btn {
  background: none;
  border: none;
  color: var(--c-text2);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .1s, background .1s, opacity .1s;
  flex-shrink: 0;
}
.breadcrumb-back-btn:hover:not(:disabled) { color: var(--c-accent); background: var(--c-accent-subtle); }
.breadcrumb-back-btn:disabled { opacity: .35; cursor: default; }
.breadcrumb-back-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.breadcrumb-copy-btn {
  background: none;
  border: none;
  color: var(--c-text3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .1s, background .1s;
  margin-left: 4px;
  flex-shrink: 0;
}
.breadcrumb-copy-btn:hover { color: var(--c-accent); background: var(--c-accent-subtle); }
.breadcrumb-copy-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lang-picker { position: relative; }
.lang-picker-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--c-surface2); border: 1px solid var(--c-border);
  color: var(--c-text2); padding: 5px 8px; border-radius: 6px;
  cursor: pointer; transition: all .15s; touch-action: manipulation;
}
.lang-picker-btn:hover { border-color: var(--c-accent); background: var(--c-accent-hover); }
.lang-picker-btn img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; pointer-events: none; }
.lang-picker-btn .chevron { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .15s; pointer-events: none; }
.lang-picker.open .chevron { transform: rotate(180deg); }
.lang-picker-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--c-sidebar); border: 1px solid var(--c-border2);
  border-radius: 8px; padding: 4px; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 600;
}
.lang-picker.open .lang-picker-dropdown { display: block; }
.lang-picker-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; font-size: .8rem;
  color: var(--c-text); cursor: pointer; transition: background .1s;
}
.lang-picker-item:hover { background: var(--c-accent-hover); }
.lang-picker-item.active { background: var(--c-accent-subtle); color: var(--c-accent); font-weight: 600; }
.lang-picker-item img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; pointer-events: none; }

/* "+ Neu" green/blue button */
.btn-new {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn-new:hover {
  background: var(--c-surface2);
  border-color: var(--c-text3);
}
.btn-new svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}
.btn-new .btn-new-caret {
  width: 14px;
  height: 14px;
  opacity: .7;
}

.btn-new-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
  margin-left: 8px;
}
.btn-new-folder:hover {
  background: var(--c-surface2);
  border-color: var(--c-text3);
}
.btn-new-folder svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ---- Dropbox-style account menu (avatar + dropdown) ---- */
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent2, #1d4ed8) 100%);
  color: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  transition: border-color .12s, transform .08s;
  padding: 0;
  font-family: var(--font);
  user-select: none;
}
.account-avatar:hover { border-color: var(--c-accent); }
.account-avatar:active { transform: scale(.95); }
.account-avatar-initials { pointer-events: none; }

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  z-index: 500;
  overflow: hidden;
  animation: slideUp .12s ease;
}
.account-dropdown.hidden { display: none; }

.account-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
}
.account-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent2, #1d4ed8) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.account-dropdown-meta {
  flex: 1;
  min-width: 0;
}
.account-dropdown-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-dropdown-email {
  font-size: .72rem;
  color: var(--c-text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown-storage {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.account-dropdown-storage-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: var(--c-text2);
  margin-bottom: 6px;
}
.account-dropdown-storage-bar {
  height: 4px;
  background: var(--c-bg);
  border-radius: 2px;
  overflow: hidden;
}
.account-dropdown-storage-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
  transition: width .3s ease;
  width: 0;
}

.account-dropdown-sep {
  height: 1px;
  background: var(--c-border);
}

.account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--c-text);
  font-size: .82rem;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .1s, color .1s;
}
.account-dropdown-item:hover {
  background: var(--c-surface2);
  color: var(--c-text);
}
.account-dropdown-item svg {
  flex-shrink: 0;
  color: var(--c-text3);
}
.account-dropdown-item:hover svg {
  color: var(--c-accent);
}
.account-dropdown-item-danger:hover {
  background: var(--c-danger-subtle);
  color: var(--c-danger);
}
.account-dropdown-item-danger:hover svg {
  color: var(--c-danger);
}

/* ---- Body (sidebar + main) ---- */
.cloud-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---- Sidebar (Nextcloud dark sidebar) ---- */
.cloud-sidebar {
  width: var(--sidebar-w);
  background: var(--c-sidebar);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
}

.cloud-sidebar-nav {
  list-style: none;
  padding: 8px 10px;
  flex: 1;
}

.cloud-sidebar-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 400;
  color: var(--c-text2);
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 2px;
  transition: color .1s, background .1s;
  position: relative;
}

.cloud-sidebar-nav li:hover {
  color: var(--c-text);
  background: rgba(255,255,255,.05);
}

.cloud-sidebar-nav li.active {
  color: var(--c-accent);
  font-weight: 500;
  background: var(--c-accent-subtle);
}

.cloud-sidebar-nav li.uploading::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
  margin-left: auto;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.nav-icon-svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* Nav group (expandable submenu) */
.cloud-sidebar-nav li.nav-group { display: block; padding: 0; background: none; }
.cloud-sidebar-nav li.nav-group:hover { background: none; }
.nav-group-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; color: var(--c-text2); font-size: 0.835rem; border-radius: 6px; }
.nav-group-header:hover { background: var(--c-row-hover); color: var(--c-text); }
/* #286: keyboard focus ring on non-native collapsible header. */
.nav-group-header:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; background: var(--c-row-hover); color: var(--c-text); }
.nav-arrow { margin-left: auto; font-size: 0.7rem; transition: transform .15s; }
.nav-group.open .nav-arrow { transform: rotate(90deg); }
.nav-submenu { list-style: none; padding: 0 0 0 28px; margin: 0; }
.nav-submenu li { padding: 6px 12px; font-size: 0.78rem; color: var(--c-text2); cursor: pointer; border-radius: 4px; }
.nav-submenu li:hover { background: var(--c-row-hover); color: var(--c-text); }
.nav-submenu li.active { color: #2563eb; }

/* Folder tree (sidebar) */
.folder-tree { padding: 2px 0 4px 20px; min-height: 160px; max-height: 40vh; overflow-y: auto; }
.nav-group .folder-tree.hidden { display: none; }
.tree-item { font-size: 0.78rem; color: var(--c-text); padding: 0; }
.tree-item-row { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--c-radius); cursor: pointer; }
.tree-item-row:hover { background: var(--c-row-hover); }
.tree-item-row.active { background: var(--c-accent-subtle); color: var(--c-accent); }
.tree-item-row.active .tree-name { color: var(--c-accent); font-weight: 500; }
.tree-item-row.active .tree-folder-icon { stroke: var(--c-accent); }
.tree-toggle { width: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-text3); user-select: none; font-size: 0.7rem; }
.tree-toggle:hover { color: var(--c-text); }
.tree-folder-icon { width: 14px; height: 14px; flex-shrink: 0; stroke: #3b82f6; fill: none; stroke-width: 1.5; }
.tree-name { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-name:hover { color: var(--c-accent); }
.tree-children { padding-left: 14px; }
.tree-children.hidden { display: none; }

/* Hochladen dropdown menu */
.new-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  z-index: 50;
  transform-origin: top left;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .16s ease, transform .18s cubic-bezier(.4,0,.2,1);
}
.new-dropdown.hidden {
  display: block;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  visibility: hidden;
}
.new-dropdown-item {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .12s;
}
.new-dropdown-item svg {
  width: 18px;
  height: 18px;
  color: var(--c-text3);
  flex-shrink: 0;
}
.new-dropdown-item:hover {
  background: var(--c-surface2);
}
.new-dropdown-item:hover svg {
  color: var(--c-text);
}

/* Select-all checkbox — matches .file-checkbox (pseudo-checkbox in
 * file-cards) so the header and row checkboxes look identical. */
.select-all-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--c-text3);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: background .1s, border-color .1s;
  position: relative;
}
.select-all-cb:hover {
  border-color: var(--c-accent);
}
.select-all-cb:checked,
.select-all-cb:indeterminate {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.select-all-cb:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.select-all-cb:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}
.select-all-cb:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Sidebar bottom section */
.sidebar-bottom {
  border-top: 1px solid var(--c-border);
  padding: 10px 14px;
}

.sidebar-bottom-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--c-text);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .1s, background .1s;
  text-decoration: none;
}

.sidebar-bottom-link:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Active state — mirrors `.cloud-sidebar-nav li.active` so the trash link
   gets the same highlight as the regular nav items when its view is open. */
.sidebar-bottom-link.active {
  color: var(--c-accent);
  font-weight: 500;
  background: var(--c-accent-subtle);
}

.sidebar-bottom-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* Storage */
.storage-info {
  padding: 8px 14px 4px;
}

.storage-bar {
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}

.storage-bar-sidebar {
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}

.storage-bar-fill,
.storage-bar-sidebar .storage-bar-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 2px;
  transition: width .6s cubic-bezier(.4,0,.2,1), background .3s ease;
}

.storage-bar-fill.warn { background: #f59e0b; }
.storage-bar-fill.danger { background: var(--c-danger); }

.storage-bar[title],
.storage-info [title] { cursor: help; }

.storage-trend {
  display: inline-block;
  margin-left: 4px;
  font-size: .65rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}
.storage-trend.up { color: #f59e0b; }
.storage-trend.down { color: #22c55e; }

.storage-info .text-sm {
  font-size: .7rem;
  color: var(--c-text3);
}

/* ---- Main Content Area ---- */
.cloud-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}

.cloud-main.dragover {
  outline: 2px dashed var(--c-accent);
  outline-offset: -4px;
}

/* ---- Toolbar (filter chips + sort + view toggle) ---- */
.cloud-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 56px;
}

.toolbar-filters {
  display: flex;
  gap: 8px;
  flex: 1;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: .82rem;
  color: var(--c-text2);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background .15s, color .15s, border-color .15s;
}

.filter-chip:hover { background: rgba(255,255,255,.08); }
/* #286: keyboard focus ring — non-native button element. */
.filter-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; background: rgba(37,99,235,.18); }
.filter-chip.active { background: rgba(37,99,235,.18); color: #60a5fa; border-color: rgba(37,99,235,.5); box-shadow: 0 0 0 1px rgba(37,99,235,.15) inset; }
.filter-chip.active svg { color: #60a5fa; }

.filter-chip svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.filter-chip .filter-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(37,99,235,.25);
  color: #60a5fa;
  font-size: 11px;
  line-height: 1;
  margin-left: 4px;
  margin-right: -4px;
  transition: background .15s;
}
.filter-chip .filter-clear svg { width: 10px; height: 10px; stroke-width: 2.5; }
.filter-chip.active .filter-clear { display: inline-flex; }
.filter-chip .filter-clear:hover { background: rgba(239,68,68,.35); color: #fca5a5; }

.filter-dropdown-item .filter-count {
  display: inline-block;
  margin-left: 6px;
  font-size: .7rem;
  color: var(--c-text2);
  opacity: .7;
}
.filter-dropdown-item.active .filter-count { color: var(--c-accent); opacity: .85; }

/* Filter dropdown */
.filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: var(--c-radius);
  padding: 4px 0;
  min-width: 140px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.filter-dropdown-item {
  padding: 6px 14px;
  font-size: .78rem;
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
}

.filter-dropdown-item:hover { background: var(--c-row-hover); }
/* #286: keyboard focus ring — non-native menu item. */
.filter-dropdown-item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; background: var(--c-row-hover); }
.filter-dropdown-item.active { color: var(--c-accent); font-weight: 500; }

.toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.sort-select {
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  color: var(--c-text2);
  padding: 7px 14px;
  font-size: .82rem;
  font-family: var(--font);
  outline: none;
  cursor: pointer;
}

.sort-select option { background: var(--c-surface2); }
.sort-select:focus { border-color: var(--c-accent); }

.view-toggle {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-text3);
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.view-toggle svg { width: 16px; height: 16px; }
.view-toggle:hover { color: var(--c-text); border-color: var(--c-border2); }

/* ---- Upload Progress (thin bar) ---- */
.upload-progress {
  padding: 4px 20px;
}

.upload-progress .progress-bar {
  height: 2px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 1px !important;
  display: block !important;
  margin-bottom: 3px;
}

.upload-progress .progress-fill {
  background: var(--c-accent) !important;
  height: 100%;
  border-radius: 1px;
  transition: width .2s;
}

/* ================================================================
   FILE LIST — Nextcloud table-row style
   ================================================================ */
.cloud-files {
  flex: 1;
  overflow-y: auto;
}

/* Column header row */
.file-list-header {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 44px;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  font-size: .8rem;
  font-weight: 600;
  /* Explicit --c-text — the global muted palette is readable now, but the
     list header labels (Name / Größe / Geändert) deserve the same weight as
     the file rows beneath them so the user can scan them at a glance. */
  color: var(--c-text);
  background: var(--c-bg);
  position: sticky;
  top: 0;
  z-index: 5;
  user-select: none;
}

/* Header column widths must match the file-card column widths exactly,
   otherwise label positions drift away from the file/folder values below. */
.flh-check { width: 16px; flex-shrink: 0; margin-right: 16px; }
.flh-icon  { width: 32px; flex-shrink: 0; margin-right: 14px; }
.flh-name  {
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.flh-name:hover { color: var(--c-text2); }
.file-list-header .sort-arrow { font-size: .65rem; opacity: .5; display: inline-block; min-width: .55rem; }
.file-list-header .sort-arrow.active { opacity: 1; color: var(--c-text); }
/* Spacer matches the card's file-quick-actions (102px + 8px margin) +
   file-menu-btn (28px) area between filename and size column. Without it,
   the "Name" label would extend over the hover-only quick-action zone. */
.flh-actions-spacer { width: 138px; flex-shrink: 0; }
.flh-size  { width: 90px; text-align: center; flex-shrink: 0; cursor: pointer; position: relative; }
.flh-size:hover { color: var(--c-text2); }
.flh-date  { width: 160px; text-align: center; flex-shrink: 0; cursor: pointer; padding-right: 8px; position: relative; }
.flh-date:hover { color: var(--c-text2); }
.flh-access { width: 140px; text-align: center; flex-shrink: 0; }
.flh-star  { width: 24px; flex-shrink: 0; }
/* #314: Sort-arrow was previously an inline span that reserved 9px to the
 * right of the column label, shifting "Größe"/"Hochgeladen" ~5px left of
 * true center. The data cells below have no such offset so the values
 * looked slightly right of their headers. Absolute-position the arrow so
 * the label text centers honestly inside the column box. flh-name is
 * left-aligned so its inline arrow is harmless and stays inline. */
.flh-size .sort-arrow, .flh-date .sort-arrow {
  position: absolute;
  margin-left: 4px;
}

/* File grid — column layout (rows) */
.file-grid {
  display: flex;
  flex-direction: column;
}

/* ---- File Card (table row — Nextcloud style) ---- */
.file-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  height: 56px;
  min-height: 56px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: transparent;
  transition: background .08s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
}

.file-card:nth-child(even) { background: var(--c-row-even); }
.file-card:hover { background: var(--c-row-hover); }

.file-card.selected {
  background: var(--c-accent-subtle);
}

.file-card.focused {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.file-card.dragging { opacity: .3; }
.file-card.drag-over { background: var(--c-accent-hover); }
/* Stronger drop-target feedback: outline + subtle scale */
.file-card.drag-over-strong,
.breadcrumb-item.drag-over-strong,
.tree-item-row.drag-over-strong {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  background: var(--c-accent-hover);
  transform: scale(1.02);
  transition: transform .08s ease, outline-color .08s ease;
}
.tree-item-row.drag-over-strong { transform: none; } /* tree rows shouldn't scale */
/* Rejected drop target — not-allowed cursor + muted red tint */
.file-card.drag-not-allowed,
.breadcrumb-item.drag-not-allowed,
.tree-item-row.drag-not-allowed {
  cursor: not-allowed !important;
  outline: 2px dashed rgba(239,68,68,.6);
  outline-offset: -2px;
  background: rgba(239,68,68,.08);
}

/* Optimistic upload row — server has the file in `pending` state.
   Dim the row, override hover (so the user knows it's not interactive),
   and show a tiny spinner badge with a status text. The card click handler
   intercepts and shows a toast instead of opening preview/download. */
.file-card.file-card-pending {
  opacity: .62;
  cursor: progress;
  background: rgba(37,99,235,.05);
}
.file-card.file-card-pending:hover { background: rgba(37,99,235,.09); }
.file-card-pending-badge {
  --cd-pending-progress: 0%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 340px;
  flex: 0 0 340px;
  font-size: .7rem;
  font-weight: 500;
  color: #eaf1ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.4);
  border-radius: 10px;
  padding: 3px 8px 3px 8px;
  margin-left: auto;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 3px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.file-card-pending-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cd-pending-progress);
  background: linear-gradient(to right, rgba(37,99,235,.85), rgba(59,130,246,.78));
  transition: width 1800ms cubic-bezier(.22,1,.36,1);
  z-index: 0;
  pointer-events: none;
}
.file-card-pending-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: cd-spinner-rotate 0.7s linear infinite !important;
  animation-duration: 0.7s !important;
  animation-iteration-count: infinite !important;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.file-card-pending-badge-text {
  display: inline-block;
  position: relative;
  z-index: 1;
  letter-spacing: .01em;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-card-pending-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  border: none;
  background: transparent;
  color: #eaf1ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: .8;
  transition: opacity .15s, background .15s;
  position: relative;
  z-index: 1;
}
.file-card-pending-cancel:hover {
  opacity: 1;
  background: rgba(239,68,68,.4);
  color: #ffffff;
}
.file-card-pending-cancel:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.file-card.file-card-cancelling {
  opacity: .5;
  pointer-events: none;
}
/* Failed: server held the row but worker errored. Backend usually deletes
   these hard, but render defensively in case we see it. */
.file-card.file-card-failed {
  background: rgba(239,68,68,.06);
}
.file-card-failed-badge {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  color: var(--c-danger, #ef4444);
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}

/* Checkbox */
.file-card .file-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--c-text3);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-right: 16px;
}

.file-card:hover .file-checkbox { opacity: .5; }
.file-card.selected .file-checkbox { opacity: 1; background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.file-card.selected .file-checkbox::after { content: '\2713'; }

/* Lock badge */
.file-lock-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #eab308;
  font-size: 0.68rem;
  margin-left: 8px;
  flex-shrink: 0;
}

/* File icon */
.file-card .file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  margin-right: 14px;
}
.file-card .file-icon svg { width: 22px; height: 22px; }

/* Filename */
.file-card .file-name {
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.file-card .file-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Share + Menu buttons (visible on hover like Nextcloud) */
.file-card .file-share-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--c-text3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all .1s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.file-card:hover .file-share-btn { opacity: .4; }
.file-card .file-share-btn:hover { opacity: 1; color: var(--c-accent); background: var(--c-accent-subtle); }

.file-card .file-share-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Quick-Actions Bar (Share / Star / Tag / Delete) — nur on hover sichtbar */
.file-card .file-quick-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  flex-shrink: 0;
}
.file-card:hover .file-quick-actions,
.file-card .file-quick-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.file-card .file-quick-actions .qa-btn {
  background: none;
  border: none;
  color: var(--c-text3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.file-card .file-quick-actions .qa-btn:hover {
  color: var(--c-accent);
  background: var(--c-accent-subtle);
}
.file-card .file-quick-actions .qa-btn.qa-delete:hover {
  color: var(--c-danger);
  background: var(--c-danger-subtle);
}
.file-card .file-quick-actions .qa-btn.qa-star.active {
  color: var(--c-star);
  opacity: 1;
}
.file-card .file-quick-actions .qa-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.file-card .file-quick-actions .qa-btn.qa-star.active svg {
  fill: currentColor;
}
.file-grid.grid-view .file-card .file-quick-actions { display: none; }

.file-card .file-menu-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--c-text3);
  cursor: pointer;
  padding: 4px 6px;
  font-size: .95rem;
  border-radius: 4px;
  transition: all .1s;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.file-card:hover .file-menu-btn { opacity: .4; }
.file-card .file-menu-btn:hover { opacity: 1; background: rgba(255,255,255,.06); }

/* Size column */
.file-card .file-size {
  font-size: .82rem;
  color: var(--c-text3);
  width: 90px;
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* #320: Inline rename editor — minimal styling, fits the row exactly,
 * shows the full filename without clipping. .file-name's overflow:hidden
 * is suspended via the .editing class so the input can use its full
 * intrinsic width inside the flex column. The input itself is borderless
 * with a thin bottom accent line — looks like an in-place edit cursor,
 * not a separate dialog. Selection highlight overridden to the accent
 * color so the OS-default white selection box doesn't blast the row.
 *
 * #320b: Locked extension — rendered as a separate muted span next to the
 * input so the user can never accidentally clobber ".mkv" / ".pdf" / etc.
 * The input + span share a flex container during edit so they sit inline. */
.file-card .file-name.editing {
  overflow: visible;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.file-card .file-name .file-name-inline-editor {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-accent);
  border-radius: 0;
  padding: 0 2px 1px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  display: block;
}
.file-card .file-name .file-name-inline-ext {
  flex: 0 0 auto;
  font: inherit;
  color: var(--c-text3);
  padding: 0 0 1px 1px;
  border-bottom: 1px solid var(--c-border);
  user-select: none;
  cursor: default;
  pointer-events: auto;
}
.file-card .file-name .file-name-inline-editor:focus {
  border-bottom-color: var(--c-accent);
  background: transparent;
  box-shadow: none;
}
.file-card .file-name .file-name-inline-editor::selection {
  background: var(--c-accent-subtle, rgba(37,99,235,.35));
  color: var(--c-text);
}
.file-card .file-name .file-name-inline-editor::-moz-selection {
  background: var(--c-accent-subtle, rgba(37,99,235,.35));
  color: var(--c-text);
}

/* Date column — #314: widened to 150px to fit "dd.m.yyyy, hh:mm" MEGA-style
 * upload timestamp instead of the old short "9. April" day+month. */
.file-card .file-date {
  font-size: .82rem;
  color: var(--c-text3);
  width: 160px;
  text-align: center;
  flex-shrink: 0;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* #329: "Geteilt" badge for incoming shares merged into the root view.
 * Sits inline next to the filename like the pending/failed upload badges
 * do. Subtle blue tint signals it's not a destructive state. */
.file-card .incoming-share-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--c-accent);
  background: var(--c-accent-subtle, rgba(37,99,235,.15));
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.file-card.file-card-incoming-share .file-icon {
  position: relative;
}
.file-card.file-card-incoming-share .file-icon::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-bg);
}

/* #325: "Zugriff" per-row pill — matches file-date styling but slightly
 * narrower. Truncates long usernames with ellipsis so a 30-char name
 * doesn't push the column width around. */
.file-card .file-access {
  font-size: .82rem;
  color: var(--c-text3);
  width: 140px;
  text-align: center;
  flex-shrink: 0;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* Star */
.file-card .file-star {
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: opacity .1s;
  background: none;
  border: none;
  padding: 2px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  color: var(--c-text3);
}

.file-card:hover .file-star { opacity: .3; }
.file-card .file-star.active { opacity: 1; color: var(--c-star); }

/* ---- Grid mode ---- */
.file-grid.grid-view {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px 20px;
}

.file-grid.grid-view .file-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  height: auto;
  min-height: 110px;
  border-bottom: none;
  border: 1px solid transparent;
  border-radius: 8px;
  /* Override the list-view intrinsic-size (56px) so the browser reserves
     the right amount of scroll space for offscreen grid tiles. Without this
     override 5000 offscreen tiles all report 56px and the scrollbar jumps
     the moment a batch of them comes into view and expands to 110px+. */
  contain-intrinsic-size: auto 120px;
}

.file-grid.grid-view .file-card:hover { border-color: rgba(255,255,255,.06); }
.file-grid.grid-view .file-card .file-icon { font-size: 2rem; margin-bottom: 6px; margin-right: 0; }
.file-grid.grid-view .file-card .file-icon svg { width: 32px; height: 32px; }
.file-grid.grid-view .file-card .file-size { width: auto; text-align: center; }
.file-grid.grid-view .file-card .file-date { display: none; }
.file-grid.grid-view .file-card .file-access { display: none; }
.file-grid.grid-view .file-card .file-checkbox { top: 4px; left: 4px; position: absolute; margin: 0; }
.file-grid.grid-view .file-card .file-star { top: 4px; right: 4px; position: absolute; }
.file-grid.grid-view .file-card .file-share-btn { display: none; }
.file-grid.grid-view .file-card .file-menu-btn { display: none; }

/* ---- Selection Bar ---- */
.selection-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: var(--c-radius-lg);
  font-size: .78rem;
  color: var(--c-text);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 50;
}

.selection-bar.hidden { display: none; }

.btn-sm {
  padding: 5px 12px;
  font-size: .72rem;
  border-radius: var(--c-radius);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all .1s;
  border: none;
}

.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: var(--c-accent2); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-secondary { background: var(--c-surface); color: var(--c-text2); border: 1px solid var(--c-border); }
.btn-secondary:hover { background: var(--c-surface2); }

/* Disabled button styling (applies to all buttons) */
button:disabled,
button[disabled] {
  opacity: .5;
  cursor: not-allowed !important;
  pointer-events: none;
}
button:disabled:hover,
button[disabled]:hover {
  background: inherit;
}

/* ---- Empty State ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}

.empty-illustration { opacity: 0.6; margin-bottom: 8px; }
.empty-title { font-size: 1rem; font-weight: 500; color: var(--c-text2); }
.empty-sub { font-size: 0.82rem; color: var(--c-text3); }

/* ================================================================
   GALLERY VIEW
   ================================================================ */
.gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.gallery-toolbar-label {
  font-size: 0.78rem;
  color: var(--c-text2);
}
.gallery-toolbar-select {
  background: var(--c-surface2);
  color: var(--c-text);
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.gallery-toolbar-select:focus {
  outline: none;
  border-color: #2563eb;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 4px 0;
}
.gallery-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-surface2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.gallery-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.gallery-card:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}
.gallery-name {
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-size {
  font-size: 0.68rem;
  opacity: .8;
  margin-top: 2px;
}
.gallery-cta {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  margin-top: 8px;
}
.gallery-cta:hover { background: #1d4fd8; }
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-name { font-size: 0.72rem; }
  .gallery-size { font-size: 0.64rem; }
}

/* ================================================================
   CONTEXT MENU
   ================================================================ */
.context-menu {
  position: fixed;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 300;
  font-size: .8rem;
}

.context-menu.hidden { display: none; }

.context-item {
  padding: 7px 14px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--c-text);
  transition: background .06s;
  display: flex;
  align-items: center;
  gap: 10px;
  /* #322: kein text-selection auf menu items — klicks sollen actions sein,
   * keine text-copy gestures. Pre-fix sahen user manchmal die label texte
   * markiert (drag-select beim klick) was nach versehentlichem kopieren
   * aussah. Auch -webkit prefix für ältere Safari/iOS. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
}

.context-item .ctx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: 0 0 18px;
  font-size: .95em;
  opacity: .85;
  line-height: 1;
}

/* #312: Monochrome SVG icon replacement for context menu items.
 * Uses mask-image so the SVG inherits currentColor from the menu-item text,
 * which means the icons follow hover/kbd-focus state transitions without
 * separate dark/light variants. Non-listed data-action items fall back to
 * their emoji ctx-icon content (still valid). */
.context-item .ctx-icon-svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  flex: 0 0 16px;
}
.context-item[data-action="download"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/download.svg');
  -webkit-mask-image: url('/icons/ctx/download.svg');
}
.context-item[data-action="open-new-tab"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/open-new-tab.svg');
  -webkit-mask-image: url('/icons/ctx/open-new-tab.svg');
}
.context-item[data-action="copy"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/copy.svg');
  -webkit-mask-image: url('/icons/ctx/copy.svg');
}
.context-item[data-action="move"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/move.svg?v=2');
  -webkit-mask-image: url('/icons/ctx/move.svg?v=2');
}
.context-item[data-action="toggle-star"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/favorite.svg');
  -webkit-mask-image: url('/icons/ctx/favorite.svg');
}
.context-item[data-action="tags"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/tags.svg');
  -webkit-mask-image: url('/icons/ctx/tags.svg');
}
.context-item[data-action="details"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/details.svg');
  -webkit-mask-image: url('/icons/ctx/details.svg');
}
.context-item[data-action="toggle-lock"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/lock.svg');
  -webkit-mask-image: url('/icons/ctx/lock.svg');
}
.context-item[data-action="rename"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/rename.svg');
  -webkit-mask-image: url('/icons/ctx/rename.svg');
}
.context-item[data-action="share-link"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/share-link.svg');
  -webkit-mask-image: url('/icons/ctx/share-link.svg');
}
.context-item[data-action="share-folder"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/share-folder.svg');
  -webkit-mask-image: url('/icons/ctx/share-folder.svg');
}
.context-item[data-action="delete"] .ctx-icon-svg {
  mask-image: url('/icons/ctx/delete.svg');
  -webkit-mask-image: url('/icons/ctx/delete.svg');
}
/* Share-link icon is a full-color PNG (not themeable). Uses an inline img. */
.context-item .ctx-icon-png {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex: 0 0 18px;
  opacity: .9;
}
.context-item .ctx-icon-png img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.context-item .ctx-label { flex: 1 1 auto; }

.context-item:hover,
.context-item.kbd-focus { background: var(--c-accent-subtle); color: var(--c-accent); }
.context-item.danger:hover,
.context-item.danger.kbd-focus { background: var(--c-danger-subtle); color: var(--c-danger); }

.context-item.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.context-divider,
hr.context-divider {
  height: 1px;
  background: var(--c-border);
  margin: 4px 8px;
  border: 0;
}

/* Color picker popup */
.color-picker-popup {
  position: fixed;
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 110;
}
.color-picker-popup.hidden { display: none; }
.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s;
}
.color-dot:hover { transform: scale(1.2); border-color: rgba(255,255,255,.3); }

/* ================================================================
   SECTION VIEWS (shared, links, recent, starred)
   ================================================================ */
.cloud-section, .cloud-recent, .cloud-starred { padding: 24px; }
.cloud-section h2, .cloud-recent h2, .cloud-starred h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--c-text);
}

.shared-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 12px 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .1s;
  font-size: .82rem;
}

.shared-icon { font-size: 1.2rem; flex-shrink: 0; }
.shared-info { flex: 1; min-width: 0; }
.shared-name { font-size: .82rem; color: var(--c-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-meta { font-size: .72rem; color: var(--c-text3); margin-top: 2px; }
.shared-date { font-size: .68rem; color: var(--c-text3); flex-shrink: 0; white-space: nowrap; }
.shared-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.shared-revoke-btn {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-text3);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: .68rem;
  cursor: pointer;
  transition: all .15s;
}
.shared-revoke-btn:hover { border-color: var(--c-danger); color: var(--c-danger); }

.shared-group-header {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text2);
  padding: 12px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 6px;
}
.shared-group-header:first-child { padding-top: 0; }
.shared-group-count {
  font-size: .68rem;
  font-weight: 400;
  color: var(--c-text3);
  background: var(--c-surface2);
  border-radius: 10px;
  padding: 1px 7px;
}

/* Activity items */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: .82rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .9rem;
}
.activity-icon.upload { background: rgba(34,197,94,.12); color: #22c55e; }
.activity-icon.download { background: rgba(59,130,246,.12); color: #3b82f6; }
.activity-icon.delete { background: rgba(239,68,68,.12); color: #ef4444; }
.activity-icon.rename { background: rgba(234,179,8,.12); color: #eab308; }
.activity-icon.move { background: rgba(168,85,247,.12); color: #a855f7; }
.activity-icon.share { background: rgba(6,182,212,.12); color: #06b6d4; }
.activity-icon.default { background: var(--c-surface2); color: var(--c-text3); }
.activity-info { flex: 1; min-width: 0; }
.activity-action { color: var(--c-text); font-weight: 500; }
.activity-target { color: var(--c-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-time { font-size: .68rem; color: var(--c-text3); margin-top: 2px; }

.perm-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.perm-badge.read { background: var(--c-surface3); color: var(--c-text2); }
.perm-badge.write { background: var(--c-accent-subtle); color: var(--c-accent); }

/* Tag pills */
.tag-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 500; padding: 3px 10px;
  border-radius: 20px; cursor: pointer; transition: background .15s;
}
.tag-pill .tag-remove {
  font-size: .8rem; line-height: 1; cursor: pointer; opacity: .7; margin-left: 2px;
}
.tag-pill .tag-remove:hover { opacity: 1; }
.tag-pill-0 { background: rgba(37,99,235,.15); color: #60a5fa; }
.tag-pill-1 { background: rgba(34,197,94,.12); color: #4ade80; }
.tag-pill-2 { background: rgba(245,158,11,.12); color: #fbbf24; }
.tag-pill-3 { background: rgba(139,92,246,.12); color: #a78bfa; }
.tag-pill-4 { background: rgba(236,72,153,.12); color: #f472b6; }
.tag-pill-5 { background: rgba(6,182,212,.12); color: #22d3ee; }
.tag-pill-6 { background: rgba(249,115,22,.12); color: #fb923c; }
.tag-pill-7 { background: rgba(244,63,94,.12); color: #fb7185; }

.tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tags-cloud .tag-pill { cursor: pointer; padding: 5px 14px; font-size: .78rem; }
.tags-cloud .tag-pill:hover { filter: brightness(1.2); }
.tags-cloud .tag-pill.active { outline: 2px solid currentColor; outline-offset: 1px; }
.tag-count { font-size: .68rem; opacity: .7; margin-left: 4px; }

.link-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 12px 14px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .1s;
  font-size: .82rem;
}

.link-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-name { font-size: .82rem; color: var(--c-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.link-expiry { font-size: .72rem; color: var(--c-text3); flex-shrink: 0; }
.link-url-row { display: flex; align-items: center; gap: 8px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--c-radius); padding: 4px 8px; }
.link-url-row input { flex: 1; background: none; border: none; color: var(--c-text2); font-size: .72rem; font-family: monospace; outline: none; min-width: 0; }
.link-actions { display: flex; gap: 6px; flex-shrink: 0; }
.link-actions .btn-danger {
  background: transparent;
  color: var(--c-danger);
  border: 1px solid rgba(239, 68, 68, .35);
  padding: 5px 12px;
  font-size: .7rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: background .1s, border-color .1s, color .1s;
}
.link-actions .btn-danger:hover {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}

.shared-card:hover, .link-card:hover { background: var(--c-surface2); }

/* #329: Annehmen / Ablehnen buttons in the invitation inbox cards. Sit at
 * the right edge of the card next to the perm-badge. */
.shared-card-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}
.shared-card-actions .share-accept-btn,
.shared-card-actions .share-decline-btn {
  padding: 6px 14px;
  font-size: .76rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--c-border);
  font-weight: 500;
}
.shared-card-actions .share-accept-btn {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.shared-card-actions .share-accept-btn:hover { filter: brightness(1.1); }
.shared-card-actions .share-accept-btn:disabled,
.shared-card-actions .share-decline-btn:disabled { opacity: .5; cursor: not-allowed; }
.shared-card-actions .share-decline-btn {
  background: transparent;
  color: var(--c-text2);
}
.shared-card-actions .share-decline-btn:hover { background: var(--c-surface3, var(--c-surface2)); color: var(--c-text); }

/* ================================================================
   PREVIEW OVERLAY
   ================================================================ */
.preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: fadeIn .12s ease;
}

.preview-overlay.hidden { display: none; }

.preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 210;
  transition: background .15s, opacity .15s;
  opacity: .6;
}
.preview-nav:hover { background: rgba(255,255,255,.15); opacity: 1; }
.preview-nav-prev { left: 18px; }
.preview-nav-next { right: 18px; }
.preview-nav.hidden { display: none; }

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  color: var(--c-text);
  font-size: .82rem;
  font-weight: 500;
  gap: 16px;
}

.preview-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.preview-header-info > #previewTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-meta {
  font-size: .7rem;
  color: var(--c-text2);
  font-weight: 400;
}

.preview-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.preview-action {
  background: var(--c-surface2);
  border: none;
  color: var(--c-text);
  width: 30px;
  height: 30px;
  border-radius: var(--c-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s;
}

.preview-action:hover { background: var(--c-accent); color: #fff; }
.preview-action.active svg { fill: #fbbf24; stroke: #fbbf24; }

.preview-close {
  background: var(--c-surface2);
  border: none;
  color: var(--c-text);
  width: 30px;
  height: 30px;
  border-radius: var(--c-radius);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}

.preview-close:hover { background: var(--c-danger); }

.preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--c-text2);
  font-size: .85rem;
}

.preview-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--c-accent, #2563eb);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  max-width: 420px;
  color: var(--c-text2);
}

.preview-error-title {
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 600;
}

.preview-error-msg {
  font-size: .85rem;
  line-height: 1.5;
}

.preview-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}

.preview-content img { max-width: 90vw; max-height: 80vh; border-radius: var(--c-radius); object-fit: contain; }
.preview-content video { max-width: 90vw; max-height: 80vh; border-radius: var(--c-radius); }

.preview-content .text-preview,
.preview-content .code-preview {
  background: var(--c-surface);
  border-radius: var(--c-radius-lg);
  padding: 24px;
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--c-text);
}

.preview-content iframe { width: 90vw; height: 85vh; border: none; border-radius: var(--c-radius-lg); }

.markdown-preview {
  background: var(--c-surface);
  border-radius: var(--c-radius-lg);
  padding: 32px;
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  color: var(--c-text);
  font-size: .85rem;
  line-height: 1.7;
}

.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 { margin: 18px 0 8px; color: var(--c-text); font-weight: 600; }
.markdown-preview h1 { font-size: 1.4rem; }
.markdown-preview h2 { font-size: 1.15rem; border-bottom: 1px solid var(--c-border); padding-bottom: 5px; }
.markdown-preview code { background: var(--c-surface2); padding: 1px 5px; border-radius: 3px; font-size: .82em; }
.markdown-preview pre code { display: block; padding: 14px; border-radius: var(--c-radius); overflow-x: auto; background: var(--c-bg); }
.markdown-preview blockquote { border-left: 2px solid var(--c-accent); padding-left: 14px; color: var(--c-text2); margin: 10px 0; }
.markdown-preview a { color: var(--c-accent); }
.markdown-preview img { max-width: 100%; border-radius: var(--c-radius); }
.markdown-preview ul, .markdown-preview ol { padding-left: 20px; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .1s ease;
}

.modal-overlay.hidden { display: none; }

/* Modal close-X buttons — enforce min touch target (WCAG 2.5.5) */
button[data-click^="close-"] {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background .12s;
}
button[data-click^="close-"]:hover {
  background: var(--c-hover, rgba(255,255,255,.06));
}

/* Transparent backdrop variant — used by cdPrompt({transparentBackdrop:true})
   so the user can still see the file grid behind the dialog (folder-from-
   selection naming flow). Overlay only catches outside clicks; everything
   else stays readable. */
.modal-overlay.cd-transparent-backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cd-prompt-hint {
  font-size: .8rem;
  color: #f59e0b;
  line-height: 1.4;
  margin: 0;
  padding: 0 12px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.0);
  border-radius: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(.4,0,.2,1),
              opacity 250ms ease,
              padding 320ms cubic-bezier(.4,0,.2,1),
              margin 320ms cubic-bezier(.4,0,.2,1),
              border-color 250ms ease;
}
.cd-prompt-hint.visible {
  max-height: 300px;
  opacity: 1;
  padding: 10px 12px;
  margin: 8px 0 4px;
  border-color: rgba(245,158,11,.25);
}
.cd-prompt-hint .cd-hint-btn {
  display: inline-block;
  padding: 4px 12px;
  font-size: .75rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.cd-prompt-hint .cd-hint-btn:hover { background: #1d4ed8; transform: scale(1.03); }
.cd-prompt-hint .cd-hint-btn:active { transform: scale(.97); }

.modal-card {
  background: rgba(30, 37, 54, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  min-width: 340px;
  max-width: 90vw;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  animation: slideUp .12s ease;
}

@keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card h3 { font-size: .95rem; font-weight: 600; margin-bottom: 14px; color: var(--c-text); }

/* ---- Dateien-Einstellungen modal ---- */
.file-settings-modal { width: 420px; max-width: 92vw; }
.file-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px 0;
}
.file-settings-header h3 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--c-text); }
.file-settings-close {
  background: none;
  border: none;
  color: var(--c-text2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .1s, background .1s;
}
.file-settings-close:hover { color: var(--c-text); background: var(--c-surface2); }
.file-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--c-text);
  cursor: pointer;
  padding: 8px 0;
  line-height: 1.4;
}
.file-settings-row:hover { color: var(--c-text); }
.file-settings-footer {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.file-settings-footer .btn-primary {
  padding: 7px 18px;
  font-size: .8rem;
  border-radius: 6px;
}

/* Branded checkbox — reused across file-settings modal and anywhere else
 * we need a consistent checkbox style. Mirrors .select-all-cb. */
.file-settings-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--c-text3);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  transition: background .1s, border-color .1s;
}
.file-settings-cb:hover { border-color: var(--c-accent); }
.file-settings-cb:checked {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.file-settings-cb:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.file-settings-cb:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.modal-card input:not([type=checkbox]):not([type=radio]), .modal-card select {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  color: var(--c-text);
  padding: 8px 12px;
  font-size: .82rem;
  font-family: var(--font);
  outline: none;
  margin-bottom: 10px;
}

.modal-card input:focus, .modal-card select:focus { border-color: var(--c-accent); }

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.modal-actions .btn-primary {
  background: var(--c-accent); color: #fff; border: none;
  padding: 7px 16px; border-radius: var(--c-radius);
  font-weight: 600; font-size: .8rem; cursor: pointer;
  font-family: var(--font); transition: background .1s;
}
.modal-actions .btn-primary:hover { background: var(--c-accent2); }
.modal-actions .btn-secondary {
  background: transparent; color: var(--c-text2); border: 1px solid var(--c-border);
  padding: 7px 16px; border-radius: var(--c-radius);
  font-size: .8rem; cursor: pointer; font-family: var(--font); transition: background .1s;
}
.modal-actions .btn-secondary:hover { background: var(--c-surface2); }
.modal-actions .btn-danger { background: #dc2626; color: #fff; border: none; padding: 7px 16px; border-radius: var(--c-radius); font-weight: 600; font-size: .8rem; cursor: pointer; font-family: var(--font); transition: background .1s; }
.modal-actions .btn-danger:hover { background: #b91c1c; }
.cd-dialog-msg { font-size: .82rem; color: var(--c-text2); line-height: 1.5; margin-bottom: 14px; white-space: pre-line; word-break: break-word; overflow-wrap: anywhere; }

.result-link { display: flex; gap: 8px; align-items: center; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--c-radius); padding: 6px 10px; margin: 10px 0; }
.result-link input { margin: 0 !important; border: none !important; background: none !important; font-family: monospace; font-size: .75rem; }
.btn-copy { background: var(--c-accent); color: #fff; border: none; padding: 5px 12px; border-radius: 4px; font-size: .7rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font); }

.folder-picker { max-height: 320px; overflow-y: auto; background: var(--c-bg); border-radius: var(--c-radius); border: 1px solid var(--c-border); margin-bottom: 12px; }
.folder-picker-item { padding: 8px 12px; font-size: .8rem; cursor: pointer; color: var(--c-text2); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 8px; }
.folder-picker-item:hover { background: var(--c-accent-subtle); color: var(--c-accent); }
.folder-picker-item:last-child { border-bottom: none; }
.folder-picker-item.selected { background: var(--c-accent-hover); color: var(--c-accent); }
.folder-picker-item .fp-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-picker-item .fp-path-hint { font-size: .68rem; color: var(--c-text3); margin-left: 8px; flex-shrink: 0; }
.folder-picker-item .fp-open-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--c-text3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  opacity: .55;
  transition: opacity .12s, background .12s, color .12s;
}
.folder-picker-item .fp-open-btn:hover { opacity: 1; color: var(--c-accent); background: var(--c-accent-subtle); }
.folder-picker-item .fp-open-btn[hidden] { display: none; }
.folder-picker-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  font-size: .72rem;
  color: var(--c-text3);
  padding: 6px 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
  min-height: 24px;
}
.folder-picker-breadcrumb .fp-crumb {
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--c-text2);
  transition: background .12s, color .12s;
}
.folder-picker-breadcrumb .fp-crumb:hover { background: var(--c-accent-subtle); color: var(--c-accent); }
.folder-picker-breadcrumb .fp-crumb.current { color: var(--c-accent); font-weight: 500; cursor: default; }
.folder-picker-breadcrumb .fp-crumb.current:hover { background: transparent; }
.folder-picker-breadcrumb .fp-sep { color: var(--c-text3); opacity: .6; padding: 0 1px; }

.expiry-select {
  background: var(--c-bg); border: 1px solid var(--c-border);
  color: var(--c-text); border-radius: var(--c-radius);
  padding: 8px 12px; font-size: .8rem; outline: none; width: 100%;
  font-family: var(--font);
}

/* #326: Share-folder modal — search-as-you-type combobox + perm rows.
 * Replaces the old <select> dropdown which didn't scale beyond ~10 users
 * and the inline-style perm rows whose checkbox + label drifted off-axis. */
/* =========================================================
   #333 — Access management modal ("Zugriff verwalten")
   Dropbox-inspired people + links manager. Dark theme, matches
   the rest of CloudDrop's modal surface. Sister settings modal
   uses the same card dimensions so transitions feel continuous.
   ========================================================= */
.access-modal-card {
  width: 540px;
  max-width: 92vw;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: 14px;
}
.access-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  gap: 12px;
}
.access-modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.access-modal-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.access-icon-btn {
  background: none;
  border: none;
  color: var(--c-text2);
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.access-icon-btn:hover {
  background: var(--c-surface2);
  color: var(--c-text);
}
.access-icon-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.access-modal-body {
  padding: 0 24px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.access-section-label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 4px 0 12px;
}

/* Add-person input with focus dropdown */
.access-add-person {
  position: relative;
  margin-bottom: 18px;
}
.access-add-person-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 0 16px;
  height: 52px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.access-add-person-input-wrap:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.access-add-person-icon {
  color: var(--c-text3);
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
}
/* Override the generic .modal-card input rule which adds a background,
 * border and margin-bottom — our input needs to be fully transparent so
 * only the wrapper's border shows. Selector specificity is forced with
 * .modal-card prefix so this wins without !important. */
.modal-card .access-add-person-input {
  flex: 1;
  background: none !important;
  border: none !important;
  outline: none;
  color: var(--c-text);
  font-size: .88rem;
  font-family: var(--font);
  line-height: 1;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.access-add-person-input::placeholder { color: var(--c-text3); }

.access-add-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  z-index: 20;
}
.access-add-dropdown .access-add-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--c-text);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.access-add-dropdown .access-add-item:last-child { border-bottom: none; }
.access-add-dropdown .access-add-item:hover { background: var(--c-surface2); }
.access-add-dropdown .access-add-empty {
  padding: 14px;
  text-align: center;
  font-size: .78rem;
  color: var(--c-text3);
}

/* Person row (avatar + name/email + role) */
.access-people-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.access-person-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  min-height: 56px;
}
.access-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  line-height: 1;
}
.access-person-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.access-person-name {
  font-size: .9rem;
  color: var(--c-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.access-person-sub {
  font-size: .78rem;
  color: var(--c-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Role button (dropdown trigger) */
.access-role-btn {
  background: none;
  border: none;
  color: var(--c-text2);
  font-size: .82rem;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font);
  font-weight: 500;
  transition: background .1s ease, color .1s ease;
  white-space: nowrap;
}
.access-role-btn:hover:not(.disabled) {
  background: var(--c-surface2);
  color: var(--c-text);
}
.access-role-btn.disabled {
  color: var(--c-text3);
  cursor: default;
  padding: 8px 4px;
}
.access-role-btn .access-role-caret {
  font-size: .55rem;
  opacity: .7;
  margin-top: 2px;
}
.access-role-btn.disabled .access-role-caret { display: none; }

/* Role dropdown popover — absolutely positioned via JS */
.access-role-popover {
  position: fixed;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  min-width: 260px;
  z-index: 250;
  overflow: hidden;
  padding: 4px 0;
}
.access-role-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--c-text);
  transition: background .08s ease;
}
.access-role-option:hover { background: var(--c-surface2); }
.access-role-option .access-role-check {
  width: 16px;
  font-weight: 700;
  color: var(--c-accent);
  flex-shrink: 0;
  line-height: 1.3;
}
.access-role-option.active .access-role-check::before { content: '\2713'; }
.access-role-option .access-role-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.access-role-option .access-role-main { font-weight: 500; }
.access-role-option .access-role-desc {
  font-size: .72rem;
  color: var(--c-text3);
}
.access-role-popover .access-role-sep {
  height: 1px;
  background: var(--c-border);
  margin: 4px 0;
}
.access-role-option.danger {
  color: #ef4444;
}
.access-role-option.danger:hover {
  background: rgba(239,68,68,.12);
}
.access-role-option.danger .access-role-check { visibility: hidden; }

/* Link row */
.access-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
}
.access-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-surface2);
  color: var(--c-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.access-link-info {
  flex: 1;
  min-width: 0;
}
.access-link-title {
  font-size: .85rem;
  color: var(--c-text);
  font-weight: 500;
}
.access-link-sub {
  font-size: .74rem;
  color: var(--c-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.access-link-sub .access-link-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text3);
  display: inline-block;
  flex-shrink: 0;
}
.access-link-sub.active .access-link-dot { background: #22c55e; }

/* Settings modal tabs */
.access-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  padding: 0 22px;
  gap: 8px;
}
.access-tab {
  background: none;
  border: none;
  color: var(--c-text3);
  font-size: .85rem;
  padding: 14px 8px;
  cursor: pointer;
  position: relative;
  font-family: var(--font);
  font-weight: 500;
  flex: 1;
  text-align: center;
}
.access-tab.active { color: var(--c-text); }
.access-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent);
}
.access-tab-panel {
  padding: 22px;
  min-height: 200px;
}

.access-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-surface2);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 22px;
  color: var(--c-text2);
  font-size: .8rem;
}
.access-banner svg { flex-shrink: 0; margin-top: 1px; color: var(--c-text3); }

.access-setting-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}
.access-setting-info { flex: 1; }
.access-setting-title {
  font-size: .85rem;
  color: var(--c-text);
  font-weight: 500;
  margin-bottom: 2px;
}
.access-setting-sub {
  font-size: .74rem;
  color: var(--c-text3);
  line-height: 1.4;
}

/* Toggle switch */
.access-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.access-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.access-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--c-surface3, var(--c-border));
  border-radius: 22px;
  transition: background .15s ease;
}
.access-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
}
.access-toggle input:checked + .access-toggle-slider { background: var(--c-accent); }
.access-toggle input:checked + .access-toggle-slider::before { transform: translateX(16px); }

.access-link-panel-body { padding: 24px 0; text-align: center; }
.access-link-empty {
  background: var(--c-surface2);
  border-radius: 10px;
  padding: 24px;
  font-size: .82rem;
  color: var(--c-text2);
}
.access-link-action {
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 500;
}
.access-link-action:hover { text-decoration: underline; }
.access-link-value {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.access-link-value input {
  flex: 1;
  background: none;
  border: none;
  color: var(--c-text);
  font-size: .78rem;
  outline: none;
  font-family: var(--font);
}
.access-link-value button {
  background: var(--c-accent);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 500;
}

.access-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--c-border);
}
.access-footer-spacer { flex: 1; }
/* Proper Schließen button — overrides generic btn-secondary for this footer
 * so it has visible borders + hover state against the dark surface. */
.access-modal-footer .btn-secondary {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  font-family: var(--font);
}
.access-modal-footer .btn-secondary:hover {
  background: var(--c-surface2);
  border-color: var(--c-text3);
}
.access-unshare-btn {
  color: #ef4444 !important;
  border-color: transparent !important;
  background: none !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
}
.access-unshare-btn:hover {
  background: rgba(239,68,68,.12) !important;
  border-color: transparent !important;
}
.access-unshare-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* #329d: existing recipients section in the share-folder modal. Renders
 * above the "add user" combobox so the owner can manage current shares
 * (remove + see pending state) without leaving the modal. */
.share-existing-list {
  margin-bottom: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  background: var(--c-bg);
  max-height: 160px;
  overflow-y: auto;
}
.share-existing-list .share-existing-header {
  padding: 6px 12px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-text3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface2);
}
.share-existing-list .share-existing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.share-existing-list .share-existing-row:last-child { border-bottom: none; }
.share-existing-list .share-existing-name {
  flex: 1;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-existing-list .share-existing-pending {
  font-size: .68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
  font-weight: 500;
}
.share-existing-list .share-existing-perm {
  font-size: .68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c-surface2);
  color: var(--c-text2);
  font-weight: 500;
}
.share-existing-list .share-existing-remove {
  background: none;
  border: none;
  color: var(--c-text3);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.share-existing-list .share-existing-remove:hover {
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
}

.share-user-search {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--c-radius);
  padding: 8px 12px;
  font-size: .8rem;
  font-family: var(--font);
  outline: none;
  margin-bottom: 8px;
}
.share-user-search:focus { border-color: var(--c-accent); }

.share-user-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  background: var(--c-bg);
  margin-bottom: 12px;
}
.share-user-list .share-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--c-text);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .08s ease;
}
.share-user-list .share-user-item:last-child { border-bottom: none; }
.share-user-list .share-user-item:hover { background: var(--c-surface2); }
.share-user-list .share-user-item.selected {
  background: var(--c-accent);
  color: #fff;
}
.share-user-list .share-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-surface3, var(--c-surface2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-text2);
  flex-shrink: 0;
  text-transform: uppercase;
}
.share-user-list .share-user-item.selected .share-user-avatar {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.share-user-list .share-user-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: .76rem;
  color: var(--c-text3);
}

/* Permission checkboxes — checkbox + label on a single horizontal centerline.
 * The old inline-style version used flex but the default <input> 13px box
 * + 1.5 line-height label visually off-centered the text. Lock both at
 * line-height:1 + fixed checkbox size. */
.share-granular-perms {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--c-text2);
  cursor: pointer;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}
.share-perm-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.share-perm-row span { line-height: 1; }

/* ---- Details Panel (Nextcloud-style sidebar) ---- */
.details-panel {
  width: 320px;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  padding: 0;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width 0.2s ease, opacity 0.2s ease;
}

.details-panel.hidden {
  width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.details-panel-inner {
  padding: 20px;
  /* #323: was hardcoded width: 320px which collided with the parent's
   * 320px outer box (panel had no overflow:hidden, so the inner's
   * padding pushed total width to 360px and a horizontal scrollbar
   * appeared at the bottom — the "graue leiste" the user saw). */
  width: 100%;
  box-sizing: border-box;
}

.details-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 20px 20px 0; }
.details-header h3 { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; margin-right: 8px; }

/* Detail tabs — #323: tighter padding so all 4 tabs (Details / Kommentare /
 * Versionen / Verlauf) fit inside the 320px panel without overflowing.
 * Pre-fix Verlauf was clipped at the right edge ("Verl..."). */
.details-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  padding: 0 12px;
  gap: 0;
  justify-content: space-between;
}
.details-tab {
  padding: 8px 6px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--c-text3);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: color .1s, border-color .1s;
  font-family: var(--font);
  white-space: nowrap;
  flex: 0 1 auto;
}
.details-tab:hover { color: var(--c-text2); }
.details-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.details-tab-content { display: none; }
.details-tab-content.active { display: block; }

.detail-row { margin-bottom: 14px; }
.detail-label { font-size: .75rem; color: var(--c-text3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; font-weight: 500; }
.detail-value { font-size: .92rem; color: var(--c-text); word-break: break-all; }
.detail-accounts { list-style: none; padding: 0; }
.detail-accounts li { font-size: .88rem; padding: 3px 0; color: var(--c-text); }

/* Details panel inline actions */
/* #323: Action buttons sit in ONE row — was flex-wrap:wrap which forced
 * Download/Teilen onto row 1 and Umbenennen onto row 2 because the natural
 * width sum exceeded the 320px panel. flex:1 distributes the row evenly
 * and tighter padding/font keeps each label readable. */
.details-actions { display: flex; gap: 6px; padding: 0 16px; margin-bottom: 12px; flex-wrap: nowrap; }
.details-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 8px; font-size: .7rem; font-weight: 500;
  background: var(--c-surface2); color: var(--c-text2);
  border: 1px solid var(--c-border2); border-radius: var(--c-radius);
  cursor: pointer; font-family: var(--font); transition: background .12s, color .12s, border-color .12s;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details-action-btn:hover { background: var(--c-accent-subtle); color: var(--c-accent); border-color: var(--c-accent); }
.details-action-btn svg { flex-shrink: 0; }

/* Inline copy button beside detail values */
.detail-value-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: 6px;
  background: transparent; color: var(--c-text3);
  border: 1px solid var(--c-border2); border-radius: 4px;
  cursor: pointer; vertical-align: middle; transition: background .12s, color .12s, border-color .12s;
}
.detail-value-copy:hover { background: var(--c-accent-subtle); color: var(--c-accent); border-color: var(--c-accent); }
.detail-value-copy svg { display: block; }
.detail-value-inline { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.detail-id { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--c-text2); }

/* Clickable breadcrumb path */
.detail-path-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.detail-crumb {
  color: var(--c-accent); cursor: pointer; padding: 2px 4px;
  border-radius: 3px; transition: background .1s;
}
.detail-crumb:hover { background: var(--c-accent-subtle); text-decoration: underline; }
.detail-crumb.disabled { color: var(--c-text3); cursor: default; }
.detail-crumb.disabled:hover { background: none; text-decoration: none; }
.detail-crumb-sep { color: var(--c-text3); padding: 0 1px; user-select: none; }

/* File name click cursor */
.file-card .file-name.clickable { cursor: pointer; }
.file-card .file-name.clickable:hover { color: var(--c-accent); }

/* Suppress ALL hover effects on file cards while a drag is in flight.
   CSS :hover keeps matching regardless of HTML5 drag state, so without
   this override the file-name under the drag cursor would highlight
   (accent color + underline), the card background would toggle, and
   the file tooltip would intermittently trigger — all noise that
   competes with the drop-target highlight. body.is-dragging is set
   on dragstart (JS) and cleared on dragend (+ window safety net). */
body.is-dragging .file-card:hover { background: transparent; }
body.is-dragging .file-card .file-name.clickable:hover { color: inherit; text-decoration: none; }
body.is-dragging .file-card:hover .file-quick-actions,
body.is-dragging .file-card:hover .file-share-btn,
body.is-dragging .file-card:hover .file-menu-btn,
body.is-dragging .file-card:hover .file-star,
body.is-dragging .file-card:hover .file-checkbox { opacity: 0; }

/* What's New banner inner elements */
#whatsNewBanner strong { color: #e2e8f0; font-weight: 600; }
#whatsNewBanner kbd { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 1px 5px; font-size: 0.72rem; font-family: monospace; }

/* ================================================================
   UTILITY
   ================================================================ */
.text-muted { color: var(--c-text2); }
.text-sm { font-size: .78rem; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-text3); border-radius: 3px; }

.btn-primary.btn-sm { background: var(--c-accent); color: #fff; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 767px) {
  .cloud-body { flex-direction: column; }

  /* Sidebar becomes slide-out drawer */
  .cloud-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: 78vw;
    max-width: 300px;
    height: 100vh;
    flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
    border-right: 1px solid var(--c-border);
    border-bottom: none;
    background: var(--c-sidebar);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .cloud-sidebar.mobile-open { transform: translateX(0); }
  .cloud-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    overflow-y: auto;
  }
  .cloud-sidebar-nav li { white-space: nowrap; padding: 8px 12px; font-size: 0.85rem; }
  .sidebar-bottom { display: block; }
  .storage-info { display: block; }

  /* Sidebar backdrop */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hamburger button */
  .mobile-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-sidebar-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

  .topbar { padding: 0 10px; gap: 8px; min-height: var(--topbar-h); }
  .topbar-search { display: none !important; }
  .topbar-breadcrumb { display: none !important; }
  .topbar-actions { margin-left: auto; }
  .btn-new span { display: none; }
  .cloud-toolbar { flex-wrap: wrap; padding: 8px 10px; gap: 6px; }
  .toolbar-filters { display: none; }
  .toolbar-actions { width: 100%; justify-content: flex-end; }

  .upload-panel { width: calc(100% - 16px); left: 8px; right: 8px; }

  /* Compact list on mobile */
  .file-list-header { display: none; }
  .file-grid { padding: 0 4px; }
  .file-card {
    padding: 0 12px;
    height: 52px;
    min-height: 52px;
  }
  .file-card .file-size { display: none; }
  .file-card .file-date { display: none; }
  .file-card .file-access { display: none; }
  .file-card .file-star { display: none; }
  .file-card .file-share-btn { display: none; }
  .file-card .file-checkbox { opacity: .3; margin-right: 10px; }
  .file-card .file-icon { margin-right: 10px; }
  .file-card .file-name { font-size: .88rem; }

  .details-panel { display: none !important; }
  .selection-bar { width: calc(100% - 32px); bottom: 12px; }

  /* Onboarding / empty state compact */
  .empty-state { padding: 40px 16px; }
  .empty-illustration { width: 80px; height: 80px; }
  .empty-actions { flex-wrap: wrap; justify-content: center; }
  .empty-tips { max-width: 100% !important; }

  /* What's New banner responsive */
  #whatsNewBanner { margin: 0 0 8px 0 !important; padding: 8px 10px !important; font-size: 0.75rem !important; }
  #whatsNewBanner kbd { display: none; }

  /* Notification dropdown responsive */
  #notifDropdown { width: calc(100vw - 24px) !important; max-width: 360px; right: -40px !important; }

  /* Toolbar: sort + view on mobile */
  .sort-select { flex: 1; min-width: 0; }
  .cloud-toolbar { padding: 6px 10px; }

  /* Modal button touch targets */
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary,
  .modal-actions .btn-danger { min-height: 44px; padding: 10px 16px; }

  /* Login/Register form mobile */
  .login-card { padding: 28px 20px 24px; max-width: 92vw; }
  .login-field input { font-size: 16px !important; padding: 12px 14px; }
  .login-btn { min-height: 44px; font-size: .9rem; }
  .login-subtitle { margin-bottom: 20px; }

  /* ---- Bottom Sheet (replaces dropdowns on mobile) ---- */
  .new-dropdown,
  .filter-dropdown,
  .context-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 8px 10px 20px !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.55) !important;
    z-index: 9999 !important;
    transform: translateY(0);
    animation: sheetUp .22s ease;
    max-height: 70vh;
    overflow-y: auto;
  }
  .new-dropdown::before,
  .filter-dropdown::before,
  .context-menu::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--c-text3);
    border-radius: 2px;
    margin: 6px auto 12px;
    opacity: .6;
  }
  .new-dropdown-item,
  .filter-dropdown-item,
  .context-item {
    padding: 12px 14px !important;
    font-size: 0.92rem !important;
    border-radius: 8px !important;
  }
  .sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sheet-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Desktop: hide mobile toggles + backdrops */
@media (min-width: 768px) {
  .mobile-sidebar-toggle { display: none !important; }
  .sidebar-backdrop { display: none !important; }
  .sheet-backdrop { display: none !important; }
}

/* ---- Mobile UX: touch targets, safe-area, no-hover, input zoom ---- */
@media (max-width: 767px) {
  /* Touch targets >= 44x44 (WCAG) */
  .mobile-sidebar-toggle { width: 44px; height: 44px; }
  .btn-new { width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; padding: 0; gap: 0; justify-content: center; border-radius: 8px; line-height: 1; font-size: 0; }
  .btn-new svg { width: 18px; height: 18px; stroke-width: 2; }
  .lang-picker-btn { height: 32px; min-height: 32px; max-height: 32px; padding: 0 10px; border-radius: 8px; }
  .view-toggle { padding: 9px 12px; min-height: 44px; }
  .filter-chip { padding: 8px 12px; min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .breadcrumb-item { min-height: 44px; display: inline-flex; align-items: center; }
  .file-card .file-menu-btn { min-width: 44px; min-height: 44px; }
  .file-card .file-share-btn { min-width: 44px; min-height: 44px; }
  .file-card .file-quick-actions .qa-btn { min-width: 44px; min-height: 44px; }
  .file-card .file-checkbox {
    width: 22px;
    height: 22px;
    margin-right: 12px;
    opacity: .5;
  }
  .new-dropdown-item,
  .filter-dropdown-item,
  .context-item { min-height: 48px; display: flex; align-items: center; }

  /* Prevent iOS auto-zoom (inputs must be >= 16px on focus) */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select { font-size: 16px !important; }

  /* Safe-area padding for notched iPhones */
  .cloud-sidebar {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .upload-panel { bottom: max(16px, env(safe-area-inset-bottom)) !important; }
  .selection-bar { bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .new-dropdown,
  .filter-dropdown,
  .context-menu { padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
  .topbar { padding-top: env(safe-area-inset-top); }

  .file-card-pending-badge {
    width: auto;
    flex: 0 1 auto;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .topbar { padding: 0 8px; gap: 4px; }
  .topbar-logo .logo-text { display: none; }
  .topbar-actions { gap: 2px; }
  #notifDropdown { width: calc(100vw - 16px) !important; right: -8px !important; }
  .sort-select { max-width: 110px; font-size: .72rem; }
}

@media (max-width: 375px) {
  .topbar { gap: 2px; }
  .topbar-logo .logo-icon { width: 28px; height: 28px; }
  .btn-new { width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; }
  .lang-picker-btn { height: 28px; min-height: 28px; max-height: 28px; padding: 0 8px; }
  .sort-select { max-width: 90px; }
}

/* Disable sticky :hover on touch devices */
@media (hover: none) {
  .file-card:hover { background: transparent !important; }
  .breadcrumb-item:hover,
  .breadcrumb-copy-btn:hover,
  .btn-new:hover,
  .cloud-sidebar-nav li:hover,
  .nav-group-header:hover,
  .nav-submenu li:hover,
  .tree-item-row:hover,
  .tree-toggle:hover,
  .tree-name:hover,
  .new-dropdown-item:hover,
  .filter-dropdown-item:hover,
  .context-item:hover,
  .sidebar-bottom-link:hover,
  .filter-chip:hover,
  .view-toggle:hover,
  .file-card .file-menu-btn:hover,
  .file-card .file-share-btn:hover,
  .file-card .file-quick-actions .qa-btn:hover,
  .flh-name:hover { background: transparent !important; color: inherit; transform: none; }
  .file-card:hover .file-checkbox { opacity: .5; }
}

/* ---- Toast Notifications ---- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 14px 10px 16px;
  color: var(--c-text);
  font-size: 0.82rem;
  font-family: var(--font);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
  animation: toastIn 0.22s ease;
  pointer-events: auto;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity .18s ease, transform .18s ease;
}

.toast .toast-msg { flex: 1; min-width: 0; word-break: break-word; }

.toast-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

.toast-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--c-text);
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.toast-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.toast-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.toast-btn.primary:hover { filter: brightness(1.1); }

.toast-close {
  background: none;
  border: none;
  color: var(--c-text2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .15s ease, background .15s ease;
}
.toast-close:hover { color: var(--c-text); background: rgba(255,255,255,.08); }

.toast.toast-dismissing { opacity: 0; transform: translateX(40px); }

.toast.success { border-left: 3px solid var(--c-success); }
.toast.error { border-left: 3px solid var(--c-danger); }
.toast.info { border-left: 3px solid var(--c-accent); }
.toast.warn, .toast.warning { border-left: 3px solid #f59e0b; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Drop Overlay ---- */
.drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--c-accent);
  animation: fadeIn .15s ease;
}
.drop-overlay.hidden { display: none; }
.drop-overlay-content {
  text-align: center;
  color: var(--c-accent);
  font-size: 1.2rem;
  font-weight: 500;
}
.drop-overlay-content svg { margin-bottom: 16px; width: 64px; height: 64px; }

/* ---- Upload Panel (floating bottom-right) ---- */
/* =========================================================
   #335 — Dropbox-style Upload Drawer
   Bottom-right persistent drawer with three parts:
     1. Header (title, "Alle abbrechen", collapse chevron)
     2. Inner (filter chips + scrollable file list)
     3. Footer (status bar with progress fill, always visible)
   Collapsed state hides #1 and #2 and leaves only the status bar.
   ========================================================= */
.upload-panel {
  position: fixed;
  bottom: 9px;
  right: 9px;
  width: 540px;
  max-width: calc(100vw - 18px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.4);
  z-index: 200;
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: width .28s cubic-bezier(.4,0,.2,1);
}
.upload-panel.hidden { display: none; }

/* Resize handle (visual only — actual drag not wired yet, mirrors Dropbox) */
.upload-panel-resize-handle {
  height: 6px;
  width: 100%;
  cursor: ns-resize;
  background: transparent;
  flex-shrink: 0;
}

/* ---- Header ---- */
.upload-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 20px;
  gap: 10px;
  flex-shrink: 0;
}
.upload-panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.upload-header-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s ease, border-color .12s ease;
}
.upload-header-btn:hover {
  background: var(--c-surface2);
  border-color: var(--c-text3);
}
.upload-header-icon-btn {
  background: none;
  border: none;
  color: var(--c-text2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.upload-header-icon-btn:hover {
  background: var(--c-surface2);
  color: var(--c-text);
}
.upload-header-icon-btn[hidden] { display: none; }
.upload-header-icon-btn svg { display: block; }

/* ---- Inner (filter chips + body) ---- */
.upload-panel-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  max-height: 440px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.upload-panel-header {
  max-height: 64px;
  opacity: 1;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .18s ease, padding .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.upload-panel.collapsed .upload-panel-header {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.upload-panel.collapsed .upload-panel-inner {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.upload-panel.collapsed .upload-panel-resize-handle {
  display: none;
}

/* Filter chip row — nowrap so "Fehlgeschlagen" stays on the same line
 * as the others. Horizontal scroll on overflow. Scrollbar hidden. */
.upload-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 4px 20px 12px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.upload-chip-row::-webkit-scrollbar { display: none; }
.upload-chip {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text2);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.upload-chip:hover {
  background: var(--c-surface2);
  color: var(--c-text);
}
.upload-chip.active {
  background: var(--c-surface2);
  border-color: var(--c-text2);
  color: var(--c-text);
}

/* Scrollable body */
.upload-panel-body {
  flex: 1;
  min-height: 120px;
  max-height: 340px;
  overflow-y: auto;
  padding: 0 8px 8px;
}

/* Section header ("Upload läuft" / "Abgeschlossen" / etc.) */
.upload-section-header {
  position: sticky;
  top: 0;
  background: var(--c-surface);
  padding: 10px 12px 8px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.upload-section-header .upload-section-destination {
  color: var(--c-accent);
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.upload-section-header .upload-section-destination:hover { text-decoration: underline; }

/* File row — Dropbox layout: icon | (name + ext/status) | cancel btn,
 * with a thin progress bar running along the bottom edge of the row. */
.upload-file-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px;
  border-radius: 8px;
  transition: background .1s ease;
}
.upload-file-row:hover {
  background: var(--c-surface2);
}
.upload-file-row.hidden-filter { display: none; }

.upload-row-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
}
.upload-row-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}
.upload-row-icon.state-uploading { color: var(--c-accent); }
.upload-row-icon.state-done { color: #22c55e; }
.upload-row-icon.state-failed { color: #ef4444; }
.upload-row-icon.state-cancelled { color: var(--c-text3); }
.upload-row-icon.state-skipped { color: var(--c-text3); }
.upload-row-icon.state-processing { color: var(--c-accent); }
.upload-row-icon .cd-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(34, 197, 94, .25);
  border-top-color: #22c55e;
  border-radius: 50%;
  box-sizing: border-box;
  animation: cd-spinner-rotate 0.8s linear infinite !important;
  animation-duration: 0.8s !important;
  animation-iteration-count: infinite !important;
}
.upload-row-icon.state-processing .cd-spin {
  border-color: rgba(37, 99, 235, .25);
  border-top-color: #2563eb;
}
@keyframes cd-spinner-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes cd-pie-pending-pulse {
  0%, 100% { opacity: .4; transform: scale(.88); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

.upload-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.upload-row-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.upload-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--c-text3);
  line-height: 1.25;
  min-width: 0;
}
.upload-row-ext {
  background: var(--c-surface3, var(--c-surface2));
  color: var(--c-text2);
  font-size: .64rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-row-status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text3);
}
/* Hide the legacy provider slot text inline — its content is merged
 * into the status text on render via _updateRowDisplay. */
.upload-file-row .upload-file-provider { display: none; }

.upload-row-cancel-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease;
}
.upload-row-cancel-btn:hover {
  background: var(--c-surface3, var(--c-surface2));
  border-color: var(--c-text3);
}
.upload-row-retry-btn {
  background: var(--c-accent);
  color: #fff;
  border: none;
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font);
}
.upload-row-retry-btn:hover { filter: brightness(1.1); }
.upload-row-link-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: .74rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font);
}
.upload-row-link-btn:hover { background: var(--c-surface3, var(--c-surface2)); }

/* Thin progress bar along the bottom edge of the row */
.upload-file-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: var(--c-border);
  border-radius: 1px;
  overflow: hidden;
}
.upload-file-bar-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 1px;
  transition: width .2s ease, background .2s ease;
  transform-origin: left center;
}
.upload-file-row[data-status="uploading"] .upload-file-bar-fill,
.upload-file-row[data-status="pending"] .upload-file-bar-fill {
  background: #22c55e;
}
.upload-file-row[data-status="processing"] .upload-file-bar-fill {
  background: var(--c-accent);
}
.upload-file-row.upload-file-done .upload-file-bar { display: none; }
.upload-file-row.upload-file-error .upload-file-bar-fill { background: #ef4444; }
.upload-file-row.upload-file-error { opacity: .85; }
.upload-file-row.upload-file-skipped .upload-file-bar { display: none; }

/* ---- Footer status bar ---- */
.upload-panel-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid var(--c-border);
  transition: border-top-color .18s ease;
}
.upload-panel.collapsed .upload-panel-footer {
  border-top-color: transparent;
}
.upload-panel.collapsed {
  width: 480px;
}
.upload-status-bar {
  display: flex;
  align-items: stretch;
  /* No gap — icon box and content wrapper must abut seamlessly so the
   * color transitions between them read as a single bar (Dropbox-parity).
   * Pre-fix: a 10px dark gap cut through the middle in the success state. */
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-surface2);
  min-height: 52px;
}
.upload-status-icon-box {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: #fff;
}
.upload-status-icon-box[data-state="uploading"] { background: var(--c-accent); }
.upload-status-icon-box[data-state="done"] { background: #22c55e; }
.upload-status-icon-box[data-state="failed"] { background: #ef4444; }
.upload-status-icon-box[data-state="idle"] { background: var(--c-text3); }
.upload-status-icon-box svg {
  display: block;
}
.upload-status-icon-box[data-state="uploading"] .upload-status-icon-arrow {
  animation: upload-status-bounce 1.6s ease-in-out infinite;
}
@keyframes upload-status-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
/* Done state: solid green gradient from icon box (bright) into content
 * area (slightly darker). Dropbox uses two shades that abut directly —
 * the bar reads as a single unified green block. */
.upload-panel.state-done .upload-status-bar {
  background: #1e5e3b;
}
.upload-panel.state-done .upload-status-icon-box {
  background: #22c55e;
}
.upload-panel.state-done .upload-status-progress-fill {
  background: transparent;
  transform: scaleX(0);
}
.upload-panel.state-done .upload-status-primary,
.upload-panel.state-done .upload-status-secondary {
  color: #ffffff;
}
.upload-panel.state-done .upload-add-btn {
  color: #ffffff;
  border-color: rgba(255,255,255,.35);
  background: transparent;
}
.upload-panel.state-done .upload-add-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}

/* Failed state: solid red bar with the same pattern. */
.upload-panel.state-failed .upload-status-bar {
  background: #5e1e1e;
}
.upload-panel.state-failed .upload-status-icon-box {
  background: #ef4444;
}
.upload-panel.state-failed .upload-status-progress-fill {
  background: transparent;
  transform: scaleX(0);
}
.upload-panel.state-failed .upload-status-primary,
.upload-panel.state-failed .upload-status-secondary {
  color: #ffffff;
}

.upload-status-content-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.upload-status-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--c-accent);
  opacity: .18;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.upload-status-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  width: 100%;
  min-width: 0;
}
.upload-status-message {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-status-primary {
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.upload-status-secondary {
  font-size: .72rem;
  color: var(--c-text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.upload-status-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Hinzufügen dropdown button */
.upload-add-wrap { position: relative; }
.upload-add-btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s ease, border-color .12s ease;
}
.upload-add-btn:hover {
  background: var(--c-surface3, var(--c-surface2));
  border-color: var(--c-text3);
}
.upload-add-caret { display: block; flex-shrink: 0; }
.upload-add-menu {
  position: fixed;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  min-width: 160px;
  padding: 4px 0;
  z-index: 99999;
}
.upload-add-menu.hidden { display: none; }
.upload-add-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--c-text);
  padding: 10px 16px;
  font-size: .82rem;
  cursor: pointer;
  font-family: var(--font);
}
.upload-add-menu button:hover {
  background: var(--c-surface2);
}

.upload-status-expand-btn {
  background: none;
  border: none;
  color: var(--c-text2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.upload-status-expand-btn:hover {
  background: var(--c-surface3, var(--c-surface2));
  color: var(--c-text);
}
.upload-panel:not(.collapsed) .upload-status-expand-btn { display: none; }
.upload-panel.collapsed .upload-status-expand-btn { display: inline-flex; }

/* Empty-state message for when a filter has no matching rows */
.upload-filter-empty {
  text-align: center;
  padding: 40px 20px;
  font-size: .82rem;
  color: var(--c-text3);
}

.upload-row-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--c-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none;
  width: 420px;
  max-width: calc(100vw - 24px);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.upload-row-tooltip.visible {
  opacity: 1;
  visibility: visible;
}
.upload-row-tooltip-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-row-tooltip-status {
  font-size: .74rem;
  color: var(--c-text3);
  line-height: 1.35;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.access-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 200px;
  max-width: 320px;
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.access-tooltip.visible {
  opacity: 1;
  visibility: visible;
}
.access-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: .8rem;
  color: var(--c-text);
}
.access-tooltip-row .access-tooltip-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.access-tooltip-row .access-tooltip-label {
  font-size: .7rem;
  color: var(--c-text3);
  flex-shrink: 0;
}
.access-tooltip-row .access-tooltip-sub {
  font-size: .68rem;
  color: #f59e0b;
  flex-shrink: 0;
}

.new-folder-modal-card {
  width: 380px;
  max-width: 92vw;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.new-folder-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-folder-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text);
}
.modal-card .new-folder-input {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  color: var(--c-text);
  padding: 12px 14px;
  font-size: .9rem;
  font-family: var(--font);
  outline: none;
  margin: 0;
  transition: border-color .12s, box-shadow .12s;
}
.modal-card .new-folder-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.new-folder-access {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.new-folder-access-header {
  margin-bottom: 4px;
}
.new-folder-access-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 2px;
}
.new-folder-access-sub {
  font-size: .76rem;
  color: var(--c-text3);
}
.new-folder-access-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: border-color .12s, background .12s;
}
.new-folder-access-option:hover {
  background: var(--c-surface2);
}
.new-folder-access-option.selected {
  border-color: var(--c-text);
  background: var(--c-surface2);
}
.new-folder-access-option .new-folder-access-check {
  width: 20px;
  height: 20px;
  color: var(--c-text);
  flex-shrink: 0;
  visibility: hidden;
}
.new-folder-access-option.selected .new-folder-access-check {
  visibility: visible;
}
.new-folder-access-option .new-folder-access-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-text);
}

.new-folder-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.new-folder-footer-link {
  background: none;
  border: none;
  color: var(--c-text);
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: var(--font);
}
.new-folder-footer-link:hover { color: var(--c-accent); }

.new-folder-footer .btn-secondary,
.new-folder-footer .btn-primary {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, filter .12s;
}
.new-folder-footer .btn-secondary {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.new-folder-footer .btn-secondary:hover {
  background: var(--c-surface2);
  border-color: var(--c-text3);
}
.new-folder-footer .btn-primary {
  background: var(--c-accent);
  color: #fff;
  border: 1px solid var(--c-accent);
}
.new-folder-footer .btn-primary:hover {
  filter: brightness(1.1);
}
.new-folder-footer .btn-primary:disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: none;
}

/* ================================================================
   SKELETON LOADER
   ================================================================ */
.skeleton-row {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 44px;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.skeleton-box {
  background: linear-gradient(90deg, var(--c-surface) 25%, var(--c-surface3) 50%, var(--c-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-icon { width: 20px; height: 20px; border-radius: 4px; }
.skeleton-name { flex: 1; height: 12px; border-radius: 4px; max-width: 200px; }
.skeleton-size { width: 60px; height: 10px; border-radius: 4px; }

/* Grid variant for gallery / card layouts */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.skeleton-card .skeleton-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  margin-bottom: 4px;
}
.skeleton-card .skeleton-name { height: 11px; max-width: 140px; }
.skeleton-card .skeleton-size { height: 9px; width: 48px; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- View State: Empty / Error (in-container) ---- */
.view-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  gap: 10px;
  color: var(--c-text2);
}
.view-state .view-state-icon {
  opacity: 0.5;
  margin: 0 auto 4px;
  display: block;
}
.view-state .view-state-title {
  font-size: 0.95rem;
  color: var(--c-text);
  margin: 0;
  font-weight: 500;
}
.view-state .view-state-sub {
  font-size: 0.78rem;
  color: var(--c-text3);
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}
.view-state .view-state-retry {
  margin-top: 10px;
  background: var(--c-accent-subtle);
  color: var(--c-accent);
  border: 1px solid var(--c-accent-subtle);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-state .view-state-retry:hover {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.view-state.view-state-error .view-state-icon { color: var(--c-danger); }

/* ---- Toolbar refresh indicator (subtle background spinner) ---- */
.toolbar-refresh-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.toolbar-refresh-indicator.active { opacity: 0.7; }
.toolbar-refresh-indicator svg {
  width: 14px;
  height: 14px;
  color: var(--c-text3);
  animation: tri-spin 0.9s linear infinite;
}
@keyframes tri-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Light Theme ──────────────────────────────────────────── */
body.light-theme {
  --c-bg: #f1f5f9;
  --c-sidebar: #ffffff;
  --c-header: #ffffff;
  --c-surface: #ffffff;
  --c-surface2: #f1f5f9;
  --c-surface3: #e2e8f0;
  --c-border: rgba(0,0,0,.1);
  --c-border2: rgba(0,0,0,.15);
  --c-text: #1e293b;
  --c-text2: #64748b;
  --c-text3: #94a3b8;
  --c-accent: #2563eb;
  --c-accent2: #1d4ed8;
  --c-accent-subtle: rgba(37,99,235,.1);
  --c-accent-hover: rgba(37,99,235,.06);
  --c-danger: #dc2626;
  --c-danger-subtle: rgba(220,38,38,.08);
  --c-star: #ca8a04;
  --c-success: #16a34a;
  --c-row-hover: rgba(0,0,0,.04);
  --c-row-even: rgba(0,0,0,.02);
}
body.light-theme .cloud-sidebar { box-shadow: 1px 0 0 var(--c-border); }
body.light-theme .sidebar-bottom-link { color: var(--c-text2); }
body.light-theme .sidebar-bottom-link:hover { color: var(--c-text); }
body.light-theme .toast { background: #1e293b; color: #f8fafc; }
body.light-theme input, body.light-theme textarea, body.light-theme select {
  background: var(--c-surface2); color: var(--c-text); border-color: var(--c-border2);
}

/* #287: prefers-reduced-motion — a11y for motion-sensitive users.
   Neutralises all animations + transitions + scroll-behavior. Uses
   0.01ms (not 0) so transition-end events still fire, which some JS
   handlers rely on to chain state (e.g. modal show→focus→open). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Essential loading spinners override — reduced-motion users still need
     to see that something is loading, otherwise the UI looks frozen. */
  .cd-spin,
  .file-card-pending-badge::before,
  .loading-spinner,
  .spinner {
    animation-duration: 0.8s !important;
    animation-iteration-count: infinite !important;
  }
  /* Upload-panel collapse animation override — the expand/collapse
     gesture needs a visible transition so users can see the drawer
     morph between states. Without this, the wildcard rule kills the
     transition and collapse looks like an instant jump. */
  .upload-panel,
  .upload-panel-header,
  .upload-panel-inner,
  .upload-panel-footer {
    transition-duration: 0.28s !important;
  }
}

/* #296: Selection-Mode toggle — visual feedback while the mode is active.
   The active toolbar button gets a primary tint; every file-card shows a
   persistent dashed outline + grab cursor so the user understands that
   click = select (not open). Checkboxes are surfaced unconditionally on
   hover-free devices. */
#btnSelectionMode.active,
#btnSelectionMode[aria-pressed="true"] {
  background: var(--c-primary, #2563eb);
  border-color: var(--c-primary, #2563eb);
  color: #fff;
}
body.selection-mode-active .file-card {
  cursor: default;
  outline: 1px dashed rgba(37, 99, 235, 0.35);
  outline-offset: -2px;
}
body.selection-mode-active .file-card:hover {
  outline-color: rgba(37, 99, 235, 0.65);
}
body.selection-mode-active .file-card.selected {
  outline: 2px solid var(--c-primary, #2563eb);
  outline-offset: -2px;
}
body.selection-mode-active .file-card .file-checkbox {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Bookmarks list (sidebar) — moved from inline <style> in cloud.html */
#bookmarksList .bookmark-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 20px; font-size: 0.74rem; color: var(--c-text2); cursor: pointer; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bookmarksList .bookmark-item:hover { background: var(--c-row-hover); color: var(--c-text); }
#bookmarksList .bookmark-item.gone { opacity: 0.4; text-decoration: line-through; }
#bookmarksList .bookmark-item .bm-star { color: var(--c-star); flex-shrink: 0; }
#bookmarksList .bookmark-item .bm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#bookmarksList .bookmark-item .bm-remove { opacity: 0; background: none; border: none; color: var(--c-text2); cursor: pointer; padding: 0 4px; font-size: 0.85rem; line-height: 1; }
#bookmarksList .bookmark-item:hover .bm-remove { opacity: 1; }
#bookmarksList .bookmark-item .bm-remove:hover { color: #ef4444; }

/* Focus ring override — elements with custom .focused state skip generic outline */
.file-card:focus-visible, .file-card.focused:focus-visible { outline: none; }

/* Account dropdown mobile — prevent edge clipping on 320px viewports */
@media (max-width: 480px) {
  .account-dropdown { max-width: calc(100vw - 24px); }
}

/* ── Bulk-move conflict resolution modal (Dropbox-style) ─────────────── */
.cd-conflict-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cd-conflict-fade 120ms ease-out;
}
@keyframes cd-conflict-fade { from { opacity: 0 } to { opacity: 1 } }
.cd-conflict-modal {
  background: var(--c-surface, #1a1d24);
  color: var(--c-text, #e8eaed);
  border: 1px solid var(--c-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  width: min(92vw, 980px);
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  overflow: hidden;
}
.cd-conflict-header { padding: 20px 24px 12px; border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.06)); }
.cd-conflict-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: var(--c-text, #e8eaed); }
.cd-conflict-subtitle { margin: 0 0 14px; font-size: .85rem; color: var(--text3, #9aa0a6); line-height: 1.4; }
.cd-conflict-bulk { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-conflict-bulk-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--c-border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--c-text, #e8eaed);
  cursor: pointer;
  transition: background-color 80ms ease, border-color 80ms ease;
}
.cd-conflict-bulk-btn:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }
.cd-conflict-bulk-btn-danger { color: #ef4444; border-color: rgba(239,68,68,0.4); }
.cd-conflict-bulk-btn-danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.6); }

.cd-conflict-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
.cd-conflict-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.04));
}
.cd-conflict-row:last-child { border-bottom: 0; }
.cd-conflict-col { min-width: 0; }
.cd-conflict-col-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text3, #9aa0a6); margin-bottom: 4px; }
.cd-conflict-name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--c-text, #e8eaed);
}
.cd-conflict-meta { font-size: 11px; color: var(--text3, #9aa0a6); margin-top: 2px; }
.cd-conflict-arrow { font-size: 16px; color: var(--text3, #9aa0a6); text-align: center; }
.cd-conflict-col-choice { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.cd-conflict-radio {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--c-text, #e8eaed);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  user-select: none;
}
.cd-conflict-radio:hover:not(.cd-conflict-radio-disabled) { background: rgba(255,255,255,0.04); }
.cd-conflict-radio input { margin: 0; cursor: pointer; }
.cd-conflict-radio-disabled { opacity: .4; cursor: not-allowed; }
.cd-conflict-radio-disabled input { cursor: not-allowed; }

.cd-conflict-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--c-border, rgba(255,255,255,0.06));
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--c-surface-2, rgba(0,0,0,0.15));
}
.cd-conflict-btn {
  padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 80ms ease, border-color 80ms ease;
}
.cd-conflict-btn-secondary { background: transparent; color: var(--c-text, #e8eaed); border-color: var(--c-border, rgba(255,255,255,0.12)); }
.cd-conflict-btn-secondary:hover { background: rgba(255,255,255,0.04); }
.cd-conflict-btn-primary { background: var(--c-primary, #2563eb); color: #fff; }
.cd-conflict-btn-primary:hover { background: var(--c-primary-hover, #1d4ed8); }

@media (max-width: 720px) {
  .cd-conflict-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cd-conflict-arrow { display: none; }
  .cd-conflict-col-choice { min-width: 0; flex-direction: row; flex-wrap: wrap; }
}