/* Small helpers that are awkward to express purely with Tailwind utility classes */

/* ---------- Cards (file/folder) ---------- */
.file-card, .folder-card {
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease, background-color .15s ease;
  position: relative;
}
.file-card:hover, .folder-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.dark .file-card:hover, .dark .folder-card:hover {
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.file-card:active, .folder-card:active {
  transform: scale(0.98);
}
.file-card.selected, .file-row.selected {
  outline: 2px solid #4285f4;
  outline-offset: -2px;
  background-color: #eef4ff;
}
.dark .file-card.selected, .dark .file-row.selected {
  background-color: rgba(66,133,244,.15);
}
.folder-card.drop-hover {
  outline: 2px dashed #4285f4;
  outline-offset: -2px;
  background-color: #eef4ff;
}
.dark .folder-card.drop-hover {
  background-color: rgba(66,133,244,.18);
}
.file-card.dragging-source, .folder-card.dragging-source, .file-row.dragging-source {
  opacity: .4;
}

/* Selection checkbox overlay on cards */
.select-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,.92);
  border: 2px solid #9aa0a6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .1s ease, background-color .1s ease, border-color .1s ease;
  cursor: pointer;
  z-index: 2;
}
.dark .select-check {
  background: rgba(31,41,55,.92);
  border-color: #6b7280;
}
.file-card:hover .select-check, .file-card.selected .select-check,
.folder-card:hover .select-check, .folder-card.selected .select-check {
  opacity: 1;
}
.file-row .select-check {
  top: 50%;
  transform: translateY(-50%);
}
.file-row:hover .select-check, .file-row.selected .select-check {
  opacity: 1;
}
.select-check.checked {
  background: #4285f4;
  border-color: #4285f4;
  opacity: 1;
}

/* ---------- Sidebar nav ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .55rem .9rem;
  border-radius: 0 999px 999px 0;
  font-size: .875rem;
  color: #444;
  transition: background-color .1s ease;
}
.dark .nav-item { color: #d1d5db; }
.nav-item:hover { background-color: #f1f3f4; }
.dark .nav-item:hover { background-color: #1f2937; }
.nav-item.active {
  background-color: #e8f0fe;
  color: #1a73e8;
  font-weight: 600;
}
.dark .nav-item.active {
  background-color: rgba(66,133,244,.2);
  color: #8ab4f8;
}
.nav-item.drop-hover {
  outline: 2px dashed #4285f4;
  outline-offset: -2px;
  background-color: #eef4ff;
}
.dark .nav-item.drop-hover {
  background-color: rgba(66,133,244,.18);
}

/* ---------- Dropdown / context menu items ---------- */
.menu-item, .ctx-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  text-align: left;
  padding: .55rem .9rem;
  font-size: .85rem;
  color: #3c4043;
  transition: background-color .08s ease;
}
.dark .menu-item, .dark .ctx-item { color: #e5e7eb; }
.menu-item:hover, .ctx-item:hover { background-color: #f1f3f4; }
.dark .menu-item:hover, .dark .ctx-item:hover { background-color: #2d3748; }
.ctx-item.danger { color: #d93025; }
.dark .ctx-item.danger { color: #f28b82; }
.ctx-item svg { flex-shrink: 0; }
.ctx-divider { border-top: 1px solid #f1f3f4; margin: .35rem 0; }
.dark .ctx-divider { border-color: #374151; }

/* ---------- Buttons / inputs used in modals ---------- */
.btn-primary {
  background: #1a73e8;
  color: #fff;
  font-weight: 500;
  font-size: .875rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  transition: background-color .1s ease;
}
.btn-primary:hover { background: #1765cc; }
.btn-secondary {
  color: #1a73e8;
  font-weight: 500;
  font-size: .875rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  transition: background-color .1s ease;
}
.btn-secondary:hover { background: #f1f3f4; }
.dark .btn-secondary { color: #8ab4f8; }
.dark .btn-secondary:hover { background: #2d3748; }

.modal-input {
  width: 100%;
  border: 1px solid #dadce0;
  border-radius: 6px;
  padding: .6rem .75rem;
  font-size: .9rem;
  outline: none;
  background: #fff;
  color: #202124;
}
.modal-input:focus { border-color: #1a73e8; box-shadow: 0 0 0 1px #1a73e8; }
.dark .modal-input {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}

/* ---------- Move-to folder picker rows ---------- */
.move-folder-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.25rem;
  font-size: .875rem;
  color: #3c4043;
  cursor: pointer;
  transition: background-color .1s ease;
}
.dark .move-folder-row { color: #e5e7eb; }
.move-folder-row:hover { background: #f1f3f4; }
.dark .move-folder-row:hover { background: #1f2937; }

/* ---------- Progress bars ---------- */
.progress-track {
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  height: 6px;
}
.dark .progress-track { background: #374151; }
.progress-fill {
  background: #4285f4;
  height: 100%;
  width: 0%;
  transition: width .15s ease, background-color .2s ease;
}
.progress-fill.done { background: #34a853; }
.progress-fill.error { background: #ea4335; }
.progress-fill.warn { background: #f9ab00; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- Misc ---------- */
.view-toggle-btn.active {
  background: #e8f0fe;
  color: #1a73e8;
}
.dark .view-toggle-btn.active {
  background: rgba(66,133,244,.2);
  color: #8ab4f8;
}

#previewBody video, #previewBody img {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 4px;
}
#previewBody iframe {
  width: 100%;
  height: 65vh;
  border: none;
  background: white;
  border-radius: 4px;
}

body.dragging-files #dropOverlay {
  display: flex;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Breadcrumb chevrons */
.crumb-sep { color: #9aa0a6; flex-shrink: 0; }
.dark .crumb-sep { color: #6b7280; }
.crumb-btn {
  padding: .3rem .55rem;
  border-radius: 999px;
  color: #5f6368;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .1s ease;
}
.dark .crumb-btn { color: #d1d5db; }
.crumb-btn:hover { background: #f1f3f4; }
.dark .crumb-btn:hover { background: #1f2937; }
.crumb-btn.current { color: #202124; }
.dark .crumb-btn.current { color: #f3f4f6; }
.crumb-btn.drop-hover {
  outline: 2px dashed #4285f4;
  outline-offset: -1px;
  background: #eef4ff;
}
.dark .crumb-btn.drop-hover { background: rgba(66,133,244,.18); }

@media (max-width: 400px) {
  .xs\:inline { display: none; }
}