/* ── Layout ──────────────────────────────────────────────────────── */

body { font-size: 14px; }

/* Sidebar */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  overflow-y: auto;
}

.sidebar .nav-link {
  color: #495057;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.sidebar .nav-link:hover {
  background: #e9ecef;
  color: #0d6efd;
}

.sidebar .nav-link.active {
  background: #0d6efd;
  color: #fff;
}

/* Toolbar */
.toolbar {
  background: #fff;
  min-height: 52px;
}

/* ── File Grid ───────────────────────────────────────────────────── */

.file-card {
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  user-select: none;
  background: #fff;
  position: relative;
}

.file-card[draggable="true"] {
  cursor: grab;
}

.file-card:hover {
  border-color: #0d6efd40;
  box-shadow: 0 2px 12px rgba(13,110,253,0.12);
}

.file-card.selected {
  border-color: #0d6efd;
  background: #e7f0ff;
}

.file-card.dragging {
  opacity: 0.45;
}

.file-card.drop-target {
  border-color: #0d6efd;
  background: #dbe8ff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.file-card .file-icon {
  font-size: 2.4rem;
  line-height: 1;
}

.file-card .file-name {
  font-size: 12px;
  word-break: break-word;
  margin-top: 6px;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.file-card .file-badges {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* icon colors */
.fa-folder       { color: #f5a623; }
.fa-file-pdf     { color: #e53935; }
.fa-file-word    { color: #1565c0; }
.fa-file-excel   { color: #2e7d32; }
.fa-file-powerpoint { color: #c62828; }
.fa-file-image   { color: #7b1fa2; }
.fa-file-video   { color: #00838f; }
.fa-file-audio   { color: #ad1457; }
.fa-file-zipper  { color: #6d4c41; }
.fa-file-lines   { color: #546e7a; }
.fa-file         { color: #78909c; }

/* ── File List View ──────────────────────────────────────────────── */

#file-list .fa { font-size: 1.2rem; }
#file-list tr { cursor: pointer; }
#file-list tr[draggable="true"] { cursor: grab; }
#file-list tr.dragging { opacity: 0.45; }
#file-list tr.drop-target > td {
  background: #dbe8ff;
  box-shadow: inset 0 1px 0 #0d6efd, inset 0 -1px 0 #0d6efd;
}

/* ── Drop Zone ───────────────────────────────────────────────────── */

.drop-zone {
  border: 2px dashed #0d6efd;
  border-radius: 10px;
  background: #f0f5ff;
  transition: background 0.2s;
  margin: 8px 12px;
}

.drop-zone.drag-over {
  background: #dbe8ff;
}

/* ── Context Menu ────────────────────────────────────────────────── */

.ctx-menu {
  position: fixed;
  z-index: 9000;
  background: #fff;
  border: 1px solid #dee2e6;
  min-width: 170px;
  border-radius: 8px;
  overflow: hidden;
}

.ctx-item {
  display: block;
  padding: 7px 16px;
  color: #212529;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.1s;
  white-space: nowrap;
}

.ctx-item:hover { background: #f0f2ff; color: #0d6efd; }
.ctx-item.text-danger:hover { background: #fff0f0; color: #dc3545; }

/* ── Storage bar ─────────────────────────────────────────────────── */

.storage-info { font-size: 12px; }

/* ── Breadcrumb ──────────────────────────────────────────────────── */

.breadcrumb { font-size: 13px; }
.breadcrumb-item a { color: #0d6efd; text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 576px) {
  .sidebar { width: 56px; min-width: 56px; }
  .sidebar .nav-link span { display: none; }
  .sidebar .nav-link { justify-content: center; padding: 10px; }
}

/* ── Admin ───────────────────────────────────────────────────────── */

.badge-role-admin { background: #dc3545; }
.badge-role-user  { background: #6c757d; }

/* Scrollable table */
.overflow-scroll-y { overflow-y: auto; }

/* ── Share pill ──────────────────────────────────────────────────── */

.share-badge {
  background: #0d6efd20;
  color: #0d6efd;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sync-badge {
  background: #198754;
  color: #fff;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
}