/* =====================================================
   FILEMANAGER.CSS — Toolbar, Grid, List, Dropzone, Bulk
   ===================================================== */

/* ---- Toolbar ---- */
.fm-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:0.75rem; margin-bottom:1.15rem;
  background:var(--surface); border:1px solid rgba(0,0,0,0.08);
  border-radius:8px; padding:0.85rem 1.1rem;
  box-shadow:0 2px 10px rgba(0,0,0,0.03);
}
.fm-toolbar-left  { display:flex; align-items:center; gap:0.6rem; flex:1; min-width:0; }
.fm-toolbar-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }

/* Breadcrumb */
.fm-breadcrumb {
  display:flex; align-items:center; flex-wrap:nowrap; overflow-x:auto;
  font-family:var(--mono); font-size:0.82rem;
  background:var(--surface-alt); border:var(--border);
  border-radius:var(--radius-sm); padding:0.4rem 0.75rem;
  box-shadow:2px 2px 0 var(--ink); gap:2px;
  min-width:0; flex:1;
}
.fm-breadcrumb span:not(.bc-sep) { 
  cursor:pointer; color:var(--ink); font-weight:700; white-space:nowrap; 
  padding: 0.2rem 0.5rem; border-radius: 4px;
  background: #fff; border: 1px solid rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.fm-breadcrumb span:not(.bc-sep):hover { 
  background: var(--yellow-lt);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.fm-breadcrumb span:not(.bc-sep):last-child { 
  cursor:default; 
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.fm-breadcrumb span:not(.bc-sep):last-child:hover { 
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.bc-sep { color:var(--txt-muted); margin:0 2px; display:inline-flex; align-items:center; }

/* Filter tabs */
.fm-filter-tabs {
  display:flex; gap:4px; margin-bottom:1rem; flex-wrap:wrap;
}
.filter-tab {
  padding:0.35rem 0.85rem;
  font-size:0.78rem; font-weight:800;
  border:var(--border); border-radius:30px;
  background:var(--surface); box-shadow:2px 2px 0 var(--ink);
  cursor:pointer; transition:all 0.12s var(--ease-bounce);
}
.filter-tab:hover { background:var(--yellow-lt); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.filter-tab.active { background:var(--yellow); box-shadow:var(--shadow-sm); }

/* Storage info strip */
.fm-storage-strip {
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
  padding:0.6rem 0.85rem; margin-bottom:1.15rem;
  background:var(--surface); border:var(--border); border-radius:var(--radius-md);
  font-size:0.8rem;
}
.storage-total { font-family:var(--mono); font-weight:800; color:var(--ink); display:flex; align-items:center; gap:0.4rem; }
.storage-pill {
  padding:0.2rem 0.6rem; border-radius:30px; border:var(--border);
  font-family:var(--mono); font-size:0.72rem; font-weight:700;
  background:var(--surface-alt);
}

/* ---- Sub-bar (Sort & View Toggle) ---- */
.fm-subbar {
  display:flex; justify-content:space-between; align-items:center;
  gap:0.75rem; margin-bottom:1rem; width:100%; flex-wrap:wrap;
}
.fm-subbar-left { display:flex; align-items:center; gap:0.5rem; }
.fm-subbar-title { font-size:1.1rem; font-weight:900; color:var(--ink); }
.fm-subbar-right { display:flex; align-items:center; gap:0.5rem; }

/* ---- Background Drag & Drop Overlay ---- */
.fm-drop-overlay {
  display:none; position:absolute; inset:0; min-height:220px; z-index:100;
  background:rgba(245, 200, 66, 0.96);
  border:4px dashed var(--ink); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  flex-direction:column; align-items:center; justify-content:center;
  gap:0.5rem; opacity:0; pointer-events:none;
  transition:opacity 0.2s var(--ease-bounce), transform 0.2s var(--ease-bounce);
  transform:scale(0.98);
}
.fm-drop-overlay.active {
  display:flex; opacity:1; pointer-events:auto; transform:scale(1);
}
.fm-drop-overlay i, .fm-drop-overlay svg { width:48px; height:48px; color:var(--ink); }
.drop-text-main { font-size:1.2rem; font-weight:900; color:var(--ink); }
.drop-text-sub { font-size:0.85rem; font-weight:700; color:rgba(0, 0, 0, 0.75); }

/* ---- File Grid ---- */
.fm-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1.25rem; min-height:180px;
}

.fm-item {
  background:var(--surface);
  border:1px solid rgba(0,0,0,0.12); border-radius:10px;
  padding:1.2rem 1rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0.75rem; cursor:pointer; position:relative;
  transition:all 0.15s ease;
}
@media (hover: hover) {
  .fm-item:hover { 
    transform:translateY(-2px); 
    box-shadow:0 6px 16px rgba(0,0,0,0.06); 
    background:#f8f9fa; border-color:rgba(0,0,0,0.15);
  }
}
.fm-item.selected { background:#e8f0fe; border-color:#1a73e8; }
.fm-item.drop-target { background:#e8f0fe; border-color:#1a73e8; }

/* File icon */
.fm-item-icon {
  width:48px; height:48px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--ink); margin-bottom:0.25rem;
  background:#f1f3f4;
}
.ftype-image    { background:var(--coral-lt); }
.ftype-video    { background:var(--purple-lt); }
.ftype-audio    { background:var(--cyan-lt); }
.ftype-document { background:var(--blue-lt); }
.ftype-archive  { background:var(--orange-lt); }
.ftype-code     { background:var(--lime-lt); }
.ftype-other    { background:var(--surface-alt); }

.fm-item-name {
  font-size:0.9rem; font-weight:600; word-break:break-word;
  line-height:1.3; color:#3c4043; max-width:100%;
}
.fm-item-meta {
  font-family:var(--font-primary); font-size:0.75rem; color:#5f6368; font-weight:500;
}

/* Checkbox */
.fm-checkbox {
  position:absolute; top:8px; left:8px;
  width:16px; height:16px; cursor:pointer;
  accent-color:var(--yellow); z-index:2;
  opacity:0; transition:opacity 0.12s;
}
.fm-item.selected .fm-checkbox { opacity:1; }

/* Delete & Download & Key buttons */
.fm-item-delete, .fm-item-download, .fm-item-key {
  position:absolute; top:8px; 
  width:26px; height:26px; background:#fff; color:#5f6368;
  border:1px solid rgba(0,0,0,0.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; cursor:pointer; z-index:2;
  opacity:0; transition:all 0.15s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}
.fm-item-delete { right:8px; }
.fm-item-key { right:40px; }
.fm-item-download { right:72px; }

@media (hover: hover) {
  .fm-item:hover .fm-checkbox,
  .fm-item:hover .fm-item-delete,
  .fm-item:hover .fm-item-key,
  .fm-item:hover .fm-item-download { opacity:1; }
}

@media (max-width: 768px) {
  .fm-checkbox { opacity: 1; }
  .fm-item-delete, .fm-item-key, .fm-item-download { display: none !important; }
}

.fm-item-delete:hover { transform:scale(1.05); background:#f1f3f4; color:#d93025; }
.fm-item-key:hover { transform:scale(1.05); background:#f1f3f4; color:#e6b800; }
.fm-item-download:hover { transform:scale(1.05); background:#f1f3f4; color:#1a73e8; }

/* ---- List Mode ---- */
.fm-grid.fm-list {
  display: flex; flex-direction: column; gap:0;
  border:1px solid rgba(0,0,0,0.1); border-radius:8px;
  overflow:hidden; box-shadow:none;
  min-height: auto;
}
.fm-grid.fm-list .fm-item {
  flex-direction:row; text-align:left; align-items: center; justify-content: flex-start;
  padding:0.75rem 1.25rem; border:none;
  padding-left: 2.5rem; /* make room for checkbox */
  padding-right: 7rem; /* make room for action buttons */
  border-bottom:1px solid rgba(0,0,0,0.08);
  border-radius:0; box-shadow:none;
  gap:1rem; min-height: 50px;
}
.fm-grid.fm-list .fm-checkbox {
  top: 50%; left: 1rem;
  transform: translateY(-50%);
}
.fm-grid.fm-list .fm-item-delete {
  top: 50%; right: 1rem;
  transform: translateY(-50%);
  margin-top: 0;
}
.fm-grid.fm-list .fm-item-key {
  top: 50%; right: 3rem;
  transform: translateY(-50%);
  margin-top: 0;
}
.fm-grid.fm-list .fm-item-download {
  top: 50%; right: 5rem;
  transform: translateY(-50%);
  margin-top: 0;
}
.fm-grid.fm-list .fm-item:last-child { border-bottom:none; }
@media (hover: hover) {
  .fm-grid.fm-list .fm-item:hover { transform:none; background:#f8f9fa; box-shadow:none; }
}
.fm-grid.fm-list .fm-item-icon { width:32px; height:32px; flex-shrink:0; background:none; font-size:1.25rem; margin-bottom:0; color:#5f6368; }
.fm-grid.fm-list .fm-item-name { flex:1; min-width:0; margin-bottom:0; font-size:0.95rem; font-weight:500; }
.fm-grid.fm-list .fm-item-size { width:80px; text-align:right; font-size:0.8rem; color:#5f6368; display:block; }
.fm-grid.fm-list .fm-item-date { width:120px; text-align:right; font-size:0.8rem; color:#5f6368; display:block; }
.fm-grid.fm-list .fm-item-meta { display:none; }

/* ---- FLOATING ACTION BUTTONS (FAB) ---- */
.fm-floating-actions {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 90;
}
.fm-fab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  transition: all 0.2s ease;
  border: 2px solid var(--ink);
}
@media (hover: hover) {
  .fm-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 4px 4px 0px rgba(0,0,0,1);
  }
}
.fm-fab .fab-label {
  display: inline-block;
}

@media (max-width: 768px) {
  .fm-grid.fm-list .fm-item-size,
  .fm-grid.fm-list .fm-item-date { display:none; }
  
  .fm-floating-actions {
    bottom: 1.5rem;
    right: 1rem;
    z-index: 90;
  }
}

/* ---- Empty State ---- */
.fm-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem 1.5rem; background: transparent; border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 12px; box-shadow: none;
  text-align: center; gap: 0.75rem;
}
.fm-empty p { font-weight: 500; font-size: 1rem; color: #5f6368; margin: 0; }

/* ---- Bulk Action Bar ---- */
.bulk-bar {
  position:fixed; bottom:1.5rem; left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--surface-deep); color:var(--txt-inverse);
  border:var(--border-thick); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:0.85rem 1.5rem;
  display:flex; align-items:center; gap:1.25rem; z-index:196;
  transition:transform 0.3s var(--ease-bounce);
  white-space:nowrap;
}
.bulk-bar.active { transform:translateX(-50%) translateY(0); }
#bulk-count { font-family:var(--mono); font-weight:800; font-size:0.9rem; }