/* =====================================================
   EXTRA.CSS — Utilities, Overrides, Fine-tuning
   ===================================================== */

/* ---- Code line numbers ---- */
.line-num {
  display: inline-block;
  min-width: 2.5em;
  padding-right: 1em;
  color: var(--txt-muted);
  font-size: 0.82em;
  user-select: none;
  border-right: 1px solid rgba(0,0,0,0.1);
  margin-right: 0.75em;
  text-align: right;
}

/* ---- File type icon colors override for list mode ---- */
.fm-grid.fm-list .ftype-image  { background: var(--coral-lt); }
.fm-grid.fm-list .ftype-video  { background: var(--purple-lt); }
.fm-grid.fm-list .ftype-audio  { background: var(--cyan-lt); }
.fm-grid.fm-list .ftype-document { background: var(--blue-lt); }
.fm-grid.fm-list .ftype-archive { background: var(--orange-lt); }
.fm-grid.fm-list .ftype-code   { background: var(--lime-lt); }

/* ---- Storage pill colors ---- */
.storage-pill.images   { border-color: var(--coral); }
.storage-pill.videos   { border-color: var(--purple); }
.storage-pill.audio    { border-color: var(--cyan); }
.storage-pill.documents { border-color: var(--blue); }
.storage-pill.archives { border-color: var(--orange); }
.storage-pill.code     { border-color: var(--lime); }

/* ---- Select (sort dropdown) style ---- */
select.btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-color: var(--surface);
}

/* ---- Responsive ---- */
/* Desktop: sidebar always open, hide hamburger & close button */
@media (min-width: 1024px) {
  .hamburger { display: none; }
  .sidebar-close { display: none; }
}

@media (max-width: 1023px) {
  .topbar-search input { width: 160px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .stat-chips { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 1.3rem; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 260px; }
  .topbar-search input { width: 120px; }
  .fm-filter-tabs { gap: 3px; }
  .filter-tab { padding: 0.3rem 0.65rem; font-size: 0.72rem; }
  .bulk-bar { width: calc(100% - 2rem); left: 1rem; transform: translateX(0) translateY(100px); }
  .bulk-bar.active { transform: translateX(0) translateY(0); }

  /* Responsive Neofetch ASCII art for mobile */
  .sysinfo-body { flex-direction: column !important; align-items: center; width: 100%; box-sizing: border-box; gap: 1.25rem; }
  .sysinfo-ascii {
    font-family: 'Courier New', Courier, monospace !important;
    display: inline-block !important;
    text-align: left !important;
    border: none;
    padding: 0.5rem 0;
    font-size: clamp(0.38rem, 2.6vw, 0.65rem) !important;
    line-height: 1.15 !important;
    overflow-x: auto;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .sysinfo-rows { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .stat-chips { grid-template-columns: 1fr; }
  .speed-stats { grid-template-columns: 1fr; }
  .fm-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .page-actions { gap: 0.4rem; }
  .page-actions .btn span { display: none; }
  .sysinfo-ascii {
    font-size: clamp(0.35rem, 2.8vw, 0.58rem) !important;
    padding: 0.5rem 0;
  }
}

/* ---- Backdrop click to close for modal-backdrop ---- */
.modal-backdrop { cursor: default; }
.modal-backdrop .modal { cursor: default; }

/* ---- Search clear button visibility ---- */
#search-input:not(:placeholder-shown) ~ #search-clear { display: flex !important; }

/* ---- Audio bar sits above content when visible ---- */
.audio-bar.active ~ * { padding-bottom: 70px; }

/* ---- Smooth body transition when sidebar opens ---- */
body { transition: padding-left 0.28s cubic-bezier(0.16,1,0.3,1); }

/* ---- fm-modal default hidden ---- */
.fm-modal { display: none; }

/* ---- Modal backdrop default hidden ---- */
.modal-backdrop { display: none; }

/* ---- Active page animation stagger for metrics ---- */
#pg-dash.active .metric-card:nth-child(1) { animation-delay: 0.05s; }
#pg-dash.active .metric-card:nth-child(2) { animation-delay: 0.10s; }
#pg-dash.active .metric-card:nth-child(3) { animation-delay: 0.15s; }
#pg-dash.active .metric-card:nth-child(4) { animation-delay: 0.20s; }
#pg-dash.active .metric-card:nth-child(5) { animation-delay: 0.25s; }

/* ---- fm-info-panel push content on wide screens ---- */
@media (min-width: 1280px) {
  .fm-info-panel.active + .fm-grid,
  .fm-info-panel.active ~ .fm-grid {
    margin-right: 308px;
    transition: margin-right 0.28s cubic-bezier(0.16,1,0.3,1);
  }
}

/* ---- Drag opacity ---- */
.fm-item[draggable="true"] { cursor: grab; }
.fm-item[draggable="true"]:active { cursor: grabbing; }

/* ---- Button loading spinner ---- */
.btn-loading { pointer-events: none; opacity: 0.7; }
.btn-loading i { animation: spin 0.8s linear infinite; }