/**
 * Manic Pixels Web OS — Upload Dialog CSS
 * Estilos para o dialog de upload de arquivos e pastas (VfsUploadDialog).
 *
 * Sessão 1 — WP-1:
 *   Item 35 — painel de progresso per-file (.mp-ud-prog-*)
 *   Item 1  — painel de resolução de conflitos (.mp-ud-conflict-*)
 */

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

.mp-ud-body {
  padding: 0 !important;
  overflow: hidden !important;
}

.mp-ud-container {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  position:       relative;
}

/* ── Drop zone ───────────────────────────────────────────────────────────── */

.mp-ud-dropzone {
  position:         relative;
  flex-shrink:      0;
  margin:           12px 12px 0;
  border:           1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius:    8px;
  background:       rgba(255, 255, 255, 0.025);
  cursor:           pointer;
  transition:       border-color 0.15s, background 0.15s;
  overflow:         hidden;
}

.mp-ud-dropzone:hover,
.mp-ud-dropzone--over {
  border-color: var(--mp-accent, #3daee9);
  background:   rgba(var(--mp-accent-rgb, 61, 174, 233), 0.06);
}

.mp-ud-dz-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
  padding:        22px 16px 18px;
  pointer-events: none;
}

.mp-ud-dz-icon {
  color:       rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
  transition:  color 0.15s;
}

.mp-ud-dropzone:hover .mp-ud-dz-icon,
.mp-ud-dropzone--over .mp-ud-dz-icon {
  color:   var(--mp-accent, #3daee9);
  opacity: 0.85;
}

.mp-ud-dz-title {
  font-size:   12.5px;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.65);
}

.mp-ud-dz-sub {
  font-size:  10.5px;
  color:      rgba(255, 255, 255, 0.28);
  text-align: center;
}

.mp-ud-dz-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(var(--mp-accent-rgb, 61, 174, 233), 0.15);
  border-radius:   7px;
  font-size:       13px;
  font-weight:     600;
  color:           var(--mp-accent, #3daee9);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.12s;
}

.mp-ud-dropzone--over .mp-ud-dz-overlay { opacity: 1; }

/* ── Botões de seleção ────────────────────────────────────────────────────── */

.mp-ud-sel-btns {
  display:     flex;
  gap:         8px;
  margin:      10px 12px 0;
  flex-shrink: 0;
}

.mp-ud-sel-btn {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         7px 12px;
  border:          1px solid rgba(255, 255, 255, 0.10);
  border-radius:   6px;
  background:      rgba(255, 255, 255, 0.04);
  color:           rgba(255, 255, 255, 0.65);
  font-family:     var(--mp-font-ui, system-ui, sans-serif);
  font-size:       11.5px;
  font-weight:     500;
  cursor:          pointer;
  transition:      background 0.12s, color 0.12s, border-color 0.12s;
}

.mp-ud-sel-btn:hover {
  background:   rgba(var(--mp-accent-rgb, 61, 174, 233), 0.10);
  color:        var(--mp-accent, #3daee9);
  border-color: rgba(var(--mp-accent-rgb, 61, 174, 233), 0.30);
}

.mp-ud-sel-btn svg { flex-shrink: 0; opacity: 0.75; }

/* ── Destino ─────────────────────────────────────────────────────────────── */

.mp-ud-dest {
  display:       flex;
  align-items:   center;
  gap:           5px;
  margin:        10px 12px 0;
  padding:       6px 10px;
  background:    rgba(255, 255, 255, 0.03);
  border:        1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  flex-shrink:   0;
}

.mp-ud-dest svg          { color: var(--mp-accent, #3daee9); opacity: 0.7; flex-shrink: 0; }
.mp-ud-dest-label        { font-size: 10.5px; color: rgba(255,255,255,.35); flex-shrink: 0; }
.mp-ud-dest-path         { font-size: 10.5px; color: rgba(255,255,255,.60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Cabeçalho da lista ───────────────────────────────────────────────────── */

.mp-ud-list-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin:          10px 12px 0;
  flex-shrink:     0;
}

.mp-ud-list-title {
  font-size:      10.5px;
  font-weight:    600;
  color:          rgba(255,255,255,.40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mp-ud-clear-all-btn {
  font-size:     10.5px;
  color:         rgba(255,255,255,.30);
  background:    transparent;
  border:        none;
  cursor:        pointer;
  padding:       2px 6px;
  border-radius: 4px;
  transition:    background .1s, color .1s;
}

.mp-ud-clear-all-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); }

/* ── Área da lista ────────────────────────────────────────────────────────── */

.mp-ud-list-wrap {
  flex:            1;
  overflow-y:      auto;
  margin:          6px 12px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
}

.mp-ud-list-wrap::-webkit-scrollbar       { width: 4px; }
.mp-ud-list-wrap::-webkit-scrollbar-track { background: transparent; }
.mp-ud-list-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }

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

.mp-ud-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         28px 16px;
  color:           rgba(255,255,255,.20);
  font-size:       12px;
  text-align:      center;
}

.mp-ud-empty small { font-size: 10.5px; color: rgba(255,255,255,.13); }

/* ── Lista de itens ───────────────────────────────────────────────────────── */

.mp-ud-list { display: flex; flex-direction: column; gap: 2px; }

.mp-ud-item {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 8px;
  border-radius: 5px;
  background:    rgba(255,255,255,.025);
  border:        1px solid rgba(255,255,255,.05);
  transition:    background .1s;
}

.mp-ud-item:hover { background: rgba(255,255,255,.045); }

.mp-ud-item-icon        { display: flex; align-items: center; flex-shrink: 0; color: rgba(255,255,255,.40); }
.mp-ud-item-icon.folder { color: var(--mp-accent, #3daee9); opacity: .80; }
.mp-ud-item-icon svg    { display: block; }

.mp-ud-item-name {
  flex:          1;
  font-size:     11.5px;
  color:         rgba(255,255,255,.75);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.mp-ud-item-size {
  font-size:             10.5px;
  color:                 rgba(255,255,255,.28);
  flex-shrink:           0;
  font-variant-numeric:  tabular-nums;
}

.mp-ud-item-remove {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  20px; height: 20px;
  flex-shrink:  0;
  background:   transparent;
  border:       none;
  border-radius: 4px;
  cursor:       pointer;
  color:        rgba(255,255,255,.25);
  padding:      0;
  transition:   background .1s, color .1s;
}

.mp-ud-item-remove:hover { background: rgba(235,75,75,.15); color: rgba(235,75,75,.90); }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */

.mp-ud-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
  padding:         10px 12px 12px;
  border-top:      1px solid rgba(255,255,255,.07);
  margin-top:      8px;
  gap:             8px;
}

.mp-ud-count { font-size: 10.5px; color: rgba(255,255,255,.30); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ud-footer-btns { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Botões de ação ───────────────────────────────────────────────────────── */

.mp-ud-btn {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     6px 14px;
  border-radius: 6px;
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   12px;
  font-weight: 500;
  cursor:      pointer;
  border:      1px solid transparent;
  transition:  background .12s, color .12s, opacity .12s;
}

.mp-ud-btn svg { flex-shrink: 0; }

.mp-ud-btn-secondary { background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.10); }
.mp-ud-btn-secondary:hover { background: rgba(255,255,255,.10); color: rgba(255,255,255,.80); }

.mp-ud-btn-primary { background: var(--mp-accent, #3daee9); color: #fff; border-color: rgba(0,0,0,.15); }
.mp-ud-btn-primary:hover:not(:disabled) { filter: brightness(1.10); }
.mp-ud-btn-primary:disabled { opacity: .35; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   Item 1 — Painel de resolução de conflitos
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-ud-conflict-overlay {
  position:   absolute;
  inset:      0;
  z-index:    10;
  background: rgba(10, 12, 20, 0.82);
  backdrop-filter: blur(3px);
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    16px;
}

.mp-ud-conflict-panel {
  background:    rgba(28, 32, 48, 0.98);
  border:        1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding:       18px;
  width:         100%;
  max-width:     440px;
  box-shadow:    0 8px 32px rgba(0,0,0,.5);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
}

.mp-ud-conflict-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 12px;
}

.mp-ud-conflict-icon { color: #f0a040; flex-shrink: 0; display: flex; }
.mp-ud-conflict-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.88); }

.mp-ud-conflict-list {
  background:    rgba(255,255,255,.03);
  border:        1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  padding:       6px 8px;
  margin-bottom: 12px;
  max-height:    100px;
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
  gap:           3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
}

.mp-ud-conflict-item { display: flex; align-items: center; gap: 6px; }
.mp-ud-conflict-item-icon { color: rgba(255,255,255,.35); flex-shrink: 0; display: flex; }
.mp-ud-conflict-item-name { font-size: 11px; color: rgba(255,255,255,.60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ud-conflict-more { font-size: 10.5px; color: rgba(255,255,255,.30); padding: 2px 0; }

.mp-ud-conflict-question {
  font-size:     11.5px;
  color:         rgba(255,255,255,.45);
  margin:        0 0 10px;
}

.mp-ud-conflict-actions { display: flex; gap: 8px; margin-bottom: 10px; }

.mp-ud-conflict-btn {
  flex:          1;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           3px;
  padding:       9px 8px;
  border:        1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background:    rgba(255,255,255,.05);
  cursor:        pointer;
  transition:    background .12s, border-color .12s;
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
}

.mp-ud-conflict-btn strong { font-size: 12px; color: rgba(255,255,255,.80); font-weight: 600; }
.mp-ud-conflict-btn small  { font-size: 10px; color: rgba(255,255,255,.35); text-align: center; line-height: 1.3; }

.mp-ud-conflict-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }

.mp-ud-conflict-btn--primary { border-color: rgba(var(--mp-accent-rgb,61,174,233),.40); background: rgba(var(--mp-accent-rgb,61,174,233),.10); }
.mp-ud-conflict-btn--primary:hover { background: rgba(var(--mp-accent-rgb,61,174,233),.18); }
.mp-ud-conflict-btn--primary strong { color: var(--mp-accent, #3daee9); }

.mp-ud-conflict-cancel {
  width:         100%;
  padding:       6px;
  background:    transparent;
  border:        none;
  font-size:     11px;
  color:         rgba(255,255,255,.28);
  cursor:        pointer;
  border-radius: 5px;
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  transition:    color .12s, background .12s;
}

.mp-ud-conflict-cancel:hover { color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); }

/* ═══════════════════════════════════════════════════════════════════════════
   Item 35 — Painel de progresso per-file
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-ud-prog-header {
  flex-shrink: 0;
  padding:     12px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display:     flex;
  align-items: baseline;
  gap:         10px;
}

.mp-ud-prog-title {
  font-size:   12.5px;
  font-weight: 600;
  color:       rgba(255,255,255,.80);
  flex:        1;
}

.mp-ud-prog-summary {
  font-size:  11px;
  color:      rgba(255,255,255,.35);
  flex-shrink: 0;
}

.mp-ud-prog-list-wrap {
  flex:       1;
  overflow-y: auto;
  padding:    6px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
}

.mp-ud-prog-list-wrap::-webkit-scrollbar       { width: 4px; }
.mp-ud-prog-list-wrap::-webkit-scrollbar-track { background: transparent; }
.mp-ud-prog-list-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }

.mp-ud-prog-list { display: flex; flex-direction: column; gap: 3px; }

/* ── Linha de item no painel de progresso ─────────────────────────────────── */

.mp-ud-prog-item {
  display:     grid;
  /* icon | info | status | bar */
  grid-template-columns: 18px 1fr auto 80px;
  align-items: center;
  gap:         6px;
  padding:     5px 8px;
  border-radius: 5px;
  background:  rgba(255,255,255,.022);
  border:      1px solid rgba(255,255,255,.05);
  transition:  background .15s;
  min-height:  36px;
}

.mp-ud-prog-item--done    { background: rgba(65,190,120,.06);  border-color: rgba(65,190,120,.12); }
.mp-ud-prog-item--error   { background: rgba(220,80,80,.06);   border-color: rgba(220,80,80,.12); }
.mp-ud-prog-item--skipped { background: rgba(255,255,255,.015); opacity: .6; }

.mp-ud-prog-item-icon { color: rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.mp-ud-prog-item-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  overflow:       hidden;
}

.mp-ud-prog-item-name {
  font-size:     11.5px;
  color:         rgba(255,255,255,.75);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.mp-ud-prog-item-path {
  font-size:     10px;
  color:         rgba(255,255,255,.28);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Status badges */
.mp-ud-prog-item-status {
  font-size:  10px;
  font-weight: 500;
  padding:    2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mp-ud-prog-waiting  { color: rgba(255,255,255,.30); background: rgba(255,255,255,.05); }
.mp-ud-prog-uploading{ color: var(--mp-accent,#3daee9); background: rgba(var(--mp-accent-rgb,61,174,233),.12); }
.mp-ud-prog-done     { color: #41be78; background: rgba(65,190,120,.12); }
.mp-ud-prog-error    { color: #e05050; background: rgba(220,80,80,.12); }
.mp-ud-prog-skipped  { color: rgba(255,255,255,.30); background: rgba(255,255,255,.05); }

/* Barra de progresso individual */
.mp-ud-prog-bar-wrap {
  height:        4px;
  border-radius: 2px;
  background:    rgba(255,255,255,.08);
  overflow:      hidden;
  flex-shrink:   0;
  align-self:    center;
}

.mp-ud-prog-bar-fill {
  height:     100%;
  border-radius: 2px;
  background: var(--mp-accent, #3daee9);
  transition: width .25s linear;
}

.mp-ud-prog-item--done  .mp-ud-prog-bar-fill { background: #41be78; }
.mp-ud-prog-item--error .mp-ud-prog-bar-fill { background: #e05050; }

/* ── Rodapé do painel de progresso ────────────────────────────────────────── */

.mp-ud-prog-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
  padding:         10px 12px 12px;
  border-top:      1px solid rgba(255,255,255,.07);
  margin-top:      4px;
}

.mp-ud-prog-count {
  font-size: 11px;
  color:     rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}