/**
 * Manic Pixels Web OS — Archiver CSS
 */

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

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

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

.mp-arc-tool-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 12px;
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color:         rgba(255,255,255,0.7);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     12px;
  cursor:        pointer;
  transition:    background 0.1s;
  white-space:   nowrap;
}
.mp-arc-tool-btn svg      { width: 14px; height: 14px; flex-shrink: 0; }
.mp-arc-tool-btn:hover:not(:disabled)    { background: rgba(255,255,255,0.12); }
.mp-arc-tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.mp-arc-sep {
  width:      1px;
  height:     20px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.mp-arc-filename {
  margin-left:  auto;
  font-size:    11px;
  color:        rgba(255,255,255,0.4);
  font-style:   italic;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
  max-width:    160px;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.mp-arc-body {
  flex:     1;
  display:  flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Tree (esquerda) ─────────────────────────────────────────────────────── */

.mp-arc-tree {
  width:       200px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow-y:  auto;
  padding:     8px 6px;
  background:  rgba(0,0,0,0.1);
}

.mp-arc-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding:        32px 12px;
  color:          rgba(255,255,255,0.2);
  font-size:      11px;
  text-align:     center;
}

.mp-arc-tree-root { padding: 0; }

.mp-arc-tree-group { padding-left: 12px; }

.mp-arc-tree-children { padding-left: 12px; }

.mp-arc-tree-item {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 8px;
  border-radius: 5px;
  cursor:        pointer;
  font-size:     12px;
  transition:    background 0.08s;
  color:         rgba(255,255,255,0.7);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.mp-arc-tree-item:hover  { background: rgba(255,255,255,0.07); }
.mp-arc-tree-item.active {
  background: rgba(var(--mp-accent-rgb,61,174,233), 0.15);
  color:      var(--mp-menu-fg, #e8e8f0);
}
.mp-arc-tree-item svg.mp-arc-icon {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
  color:      var(--mp-accent, #3daee9);
  opacity:    0.8;
}

/* ── Content (direita) ───────────────────────────────────────────────────── */

.mp-arc-content {
  flex:     1;
  display:  flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.mp-arc-col-header {
  display:       flex;
  padding:       7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:    rgba(0,0,0,0.15);
  flex-shrink:   0;
  font-size:     11px;
  font-weight:   600;
  color:         rgba(255,255,255,0.4);
  position:      sticky;
  top:           0;
}

.mp-arc-list {
  flex:       1;
  overflow-y: auto;
}

.mp-arc-row {
  display:    flex;
  align-items: center;
  padding:    6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor:     pointer;
  font-size:  12px;
  transition: background 0.08s;
}
.mp-arc-row:hover    { background: rgba(255,255,255,0.05); }
.mp-arc-row.selected { background: rgba(var(--mp-accent-rgb,61,174,233), 0.12); }

/* Colunas */
.mp-arc-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-arc-col-name  { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.mp-arc-col-size  { width: 80px; text-align: right; color: rgba(255,255,255,0.55); font-family: var(--mp-font-mono, monospace); font-size: 11px; }
.mp-arc-col-csize { width: 90px; text-align: right; color: rgba(255,255,255,0.4);  font-family: var(--mp-font-mono, monospace); font-size: 11px; }
.mp-arc-col-type  { width: 90px; color: rgba(255,255,255,0.45); }

.mp-arc-row-ico {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
  color:      var(--mp-accent, #3daee9);
  opacity:    0.75;
}

.mp-arc-empty-content {
  padding:    32px 16px;
  font-size:  12px;
  color:      rgba(255,255,255,0.25);
  text-align: center;
}

/* ── Status bar ──────────────────────────────────────────────────────────── */

.mp-arc-statusbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         5px 12px;
  border-top:      1px solid rgba(255,255,255,0.06);
  font-size:       11px;
  color:           rgba(255,255,255,0.4);
  flex-shrink:     0;
}