/*
 * Files view — Dropbox file browser.
 *
 * Spec: .claude/specs/files-domain-redesign/ FR-01 / FR-03 / FR-05.
 * Extracted from inline <style> block at pwa/views/files.js:17-76 per the
 * per-view CSS-extraction discipline established in utility-domain-redesign
 * and shopping-domain-redesign. All hex/rgba literals migrated to design-
 * system tokens (var(--color-*) + color-mix). Legacy --text/--hint/--bg/
 * --bg2/--link/--card aliases left in place where the global stylesheet
 * resolves them — these are part of the shared shell tokens, not bespoke.
 */

.fs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.fs-breadcrumb::-webkit-scrollbar { display: none; }

.fs-breadcrumb-item {
  font-size: 15px;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px 2px;
}

.fs-breadcrumb-item:last-child {
  color: var(--text);
  cursor: default;
}

.fs-breadcrumb-sep {
  color: var(--hint);
  font-size: 12px;
  flex-shrink: 0;
}

.fs-search-wrap {
  padding: 0 16px 8px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}

.fs-search-box {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  background: var(--bg2);
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 40px;
}

.fs-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
  color: var(--text);
}

.fs-search-box input::placeholder { color: var(--hint); }

.fs-search-clear {
  display: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--hint);
}

.fs-search-clear.visible { display: block; }

.fs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 6px;
}

.fs-item-count {
  font-size: 12px;
  color: var(--hint);
}

.fs-sort-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-default);
  border: none;
  cursor: pointer;
  background: var(--bg2);
  color: var(--link);
}

.fs-file-list { padding: 0 0 80px; }

.fs-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 16px;
  height: 56px;
  cursor: pointer;
}

.fs-file-row:active { background: var(--bg2); }

.fs-file-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.fs-file-info {
  flex: 1;
  min-width: 0;
}

.fs-file-name {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-file-meta {
  font-size: 12px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-file-chevron {
  color: var(--hint);
  flex-shrink: 0;
}

/* Sheet button rows inside uxBottomSheet body — replaces legacy .fs-sheet-btn. */
.fs-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 0;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--bg2);
}

.fs-action-btn:last-child { border-bottom: none; }

.fs-action-btn.danger { color: var(--color-error); }

.fs-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 0.5px solid var(--bg2);
}

.fs-detail-row:last-child { border-bottom: none; }

.fs-detail-label { color: var(--hint); }

.fs-detail-value {
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  word-break: break-all;
}

.fs-modal-input {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-snug);
  border: 1px solid var(--bg2);
  background: var(--bg2);
  color: var(--text);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.fs-modal-input:focus { border-color: var(--link); }

.fs-fab {
  position: fixed;
  bottom: 80px;
  right: var(--space-wide);
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--link);
  color: var(--color-on-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-on-surface) 30%, transparent);
  -webkit-tap-highlight-color: transparent;
}

.fs-fab:active { transform: scale(0.92); }

.fs-fab svg {
  width: 24px;
  height: 24px;
}

.fs-upload-bar {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  z-index: 40;
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}

.fs-upload-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-upload-progress {
  width: 100%;
  height: 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  overflow: hidden;
}

.fs-upload-progress-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--link);
  transition: width 0.3s;
}

@keyframes fsSlideRight {
  from { transform: translateX(30%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fsSlideLeft {
  from { transform: translateX(-30%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.fs-slide-right { animation: fsSlideRight 0.25s ease-out; }
.fs-slide-left  { animation: fsSlideLeft  0.25s ease-out; }

/* T-28 watched-folder panel + T-27 audit link (dropbox-topic-memory). */
.fs-admin-row { padding: 0 16px 6px; flex-wrap: wrap; }

.fs-admin-link {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-default);
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  color: var(--link);
  border: none;
  cursor: pointer;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.fs-admin-link:hover {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}

.fs-watched-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-tight);
  padding: 8px 16px 10px;
  background: color-mix(in srgb, var(--color-on-surface) 3%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}

.fs-watched-panel.open { display: flex; }

.fs-watched-row { padding: 5px 0; font-size: 13px; }

.fs-watched-path {
  flex: 1;
  color: var(--text);
  word-break: break-all;
}

.fs-watched-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-tight);
  border: none;
  cursor: pointer;
  line-height: 1.3;
}

.fs-watched-btn-index {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
}

.fs-watched-btn-del {
  background: color-mix(in srgb, var(--color-error) 16%, transparent);
  color: var(--color-error);
}

.fs-watched-add {
  display: flex;
  gap: var(--space-tight);
  margin-top: var(--space-xs);
}

.fs-watched-add input {
  flex: 1;
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  border-radius: var(--radius-tight);
  padding: 5px 10px;
  color: var(--text);
  font-size: 12.5px;
}

.fs-watched-add button {
  background: var(--link);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-tight);
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
}

/* Hidden init elements — promoted to .hidden in pwa/styles/base.css
   2026-05-03. Markup migrated to use the global .hidden class. */

/* Breadcrumb terminal item (current segment is non-clickable). */
.fs-breadcrumb-item.fs-breadcrumb-terminal {
  cursor: default;
  color: var(--text);
}

/* Sheet body subtitle + delete-confirm copy — replaces inline
   `style="font-size:13px;color:var(--hint);margin-bottom:12px"` and
   `style="font-size:14px;color:var(--hint);line-height:1.4"`. */
.fs-sheet-subtitle {
  font-size: 13px;
  color: var(--hint);
  margin-bottom: var(--space-sm);
}
.fs-sheet-confirm-copy {
  font-size: 14px;
  color: var(--hint);
  line-height: 1.4;
}

/* Upload-bar inner row — flex that grows to fill the bar. */
.fs-upload-bar-inner { flex: 1; min-width: 0; }

/* Upload progress fill width is dynamic — flows in via --fs-upload-pct
   custom property (CSS-var carve-out). */
.fs-upload-progress-bar { width: var(--fs-upload-pct, 0%); }

/* Destructive (delete) bottom-sheet button — token-driven; replaces the
   imperative `destructive.style.background = 'var(--color-error)'` block. */
.fs-bottom-sheet-destructive .ux-bottom-sheet-btn.save {
  background: var(--color-error);
  color: var(--color-on-primary);
}

/* Watched-folder list status copy (loading / empty / error). */
.fs-watched-status {
  font-size: 12px;
  color: var(--hint);
}
.fs-watched-status.fs-watched-status-error {
  color: var(--color-error);
}