/**
 * Manic Pixels Web OS — Downloads CSS
 * Painel do Gerenciador de Downloads (usado dentro do Navegador Web).
 */

/* ── Container principal ─────────────────────────────────────────────────── */

.mp-downloads {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--mp-window-bg-solid, #14141e);
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  font-size:      var(--mp-font-size-base, 13px);
  color:          var(--mp-menu-fg, #e8e8f0);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.mp-dl-toolbar {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.mp-dl-toolbar-title {
  font-size:   13px;
  font-weight: 600;
  color:       rgba(255,255,255,0.80);
  flex:        1;
}

.mp-dl-clear-btn {
  font-size:   11px;
  color:       rgba(255,255,255,0.40);
  background:  transparent;
  border:      1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  cursor:      pointer;
  padding:     4px 10px;
  transition:  background 0.12s, color 0.12s, border-color 0.12s;
  font-family: var(--mp-font-ui, system-ui, sans-serif);
}
.mp-dl-clear-btn:hover {
  background:  rgba(255,255,255,0.08);
  color:       rgba(255,255,255,0.70);
  border-color: rgba(255,255,255,0.18);
}

/* ── Lista ───────────────────────────────────────────────────────────────── */

.mp-dl-list {
  flex:        1;
  overflow-y:  auto;
  overflow-x:  hidden;
  padding:     8px 0;
}

/* ── Item de download ────────────────────────────────────────────────────── */

.mp-dl-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition:  background 0.10s;
}
.mp-dl-item:hover { background: rgba(255,255,255,0.03); }
.mp-dl-item:last-child { border-bottom: none; }

/* Ícone do tipo de arquivo */
.mp-dl-icon {
  width:       32px;
  height:      32px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background:  rgba(255,255,255,0.06);
  font-size:   18px;
  flex-shrink: 0;
}

/* Corpo */
.mp-dl-body {
  flex:        1;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         4px;
}

.mp-dl-filename {
  font-size:   12px;
  font-weight: 600;
  color:       rgba(255,255,255,0.85);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-dl-meta {
  font-size:   10px;
  color:       rgba(255,255,255,0.35);
  display:     flex;
  gap:         8px;
}

/* Barra de progresso */
.mp-dl-progress-wrap {
  width:       100%;
  height:      3px;
  background:  rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow:    hidden;
}

.mp-dl-progress-fill {
  height:      100%;
  background:  var(--mp-accent, #3daee9);
  border-radius: 3px;
  transition:  width 0.3s ease;
}

/* Cores por status */
.mp-dl-item[data-status="done"]      .mp-dl-progress-fill { background: #27ae60; }
.mp-dl-item[data-status="error"]     .mp-dl-progress-fill { background: #e74c3c; }
.mp-dl-item[data-status="cancelled"] .mp-dl-progress-fill { background: rgba(255,255,255,0.20); }

/* Ação (cancelar / abrir pasta) */
.mp-dl-action {
  width:       28px;
  height:      28px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border:      none;
  background:  transparent;
  color:       rgba(255,255,255,0.35);
  cursor:      pointer;
  flex-shrink: 0;
  transition:  background 0.12s, color 0.12s;
  padding:     0;
}
.mp-dl-action:hover {
  background: rgba(255,255,255,0.10);
  color:      rgba(255,255,255,0.75);
}
.mp-dl-action svg { width: 12px; height: 12px; }

/* ── Estado vazio ────────────────────────────────────────────────────────── */

.mp-dl-empty {
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:         12px;
  height:      100%;
  color:       rgba(255,255,255,0.18);
  font-size:   12px;
}
.mp-dl-empty svg { width: 40px; height: 40px; }