/**
 * Manic Pixels Web OS — Image Viewer CSS
 * Galeria + visualizador com Viewer.js.
 */

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

.mp-imgview {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     #0a0a12;
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  overflow:       hidden;
}

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

.mp-iv-toolbar {
  display:     flex;
  align-items: center;
  gap:         4px;
  padding:     6px 8px;
  background:  rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.mp-iv-tool-btn {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       30px;
  height:      28px;
  border:      none;
  border-radius: 5px;
  background:  transparent;
  color:       rgba(255,255,255,0.50);
  cursor:      pointer;
  transition:  background 0.10s, color 0.10s;
  padding:     0;
  flex-shrink: 0;
}
.mp-iv-tool-btn:hover {
  background: rgba(255,255,255,0.10);
  color:      rgba(255,255,255,0.85);
}
.mp-iv-tool-btn.active {
  background: rgba(var(--mp-accent-rgb,61,174,233), 0.18);
  color:      var(--mp-accent, #3daee9);
}
.mp-iv-tool-btn svg { width: 15px; height: 15px; }

.mp-iv-sep {
  width:      1px;
  height:     18px;
  background: rgba(255,255,255,0.08);
  margin:     0 2px;
  flex-shrink: 0;
}

.mp-iv-filename {
  flex:        1;
  font-size:   12px;
  color:       rgba(255,255,255,0.50);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding:     0 8px;
}

.mp-iv-zoom-label {
  font-size:   11px;
  color:       rgba(255,255,255,0.35);
  min-width:   44px;
  text-align:  center;
  font-variant-numeric: tabular-nums;
}

/* ── Área principal ──────────────────────────────────────────────────────── */

.mp-iv-main {
  flex:        1;
  display:     flex;
  overflow:    hidden;
  position:    relative;
}

/* ── Canvas do viewer (scroll area) ─────────────────────────────────────── */

.mp-iv-canvas {
  flex:        1;
  overflow:    auto;
  display:     flex;
  align-items: center;
  justify-content: center;
  position:    relative;
  cursor:      grab;
}
.mp-iv-canvas:active { cursor: grabbing; }

.mp-iv-canvas img {
  max-width:       none;
  display:         block;
  image-rendering: auto;
  transform-origin: center center;
  user-select:     none;
  -webkit-user-select: none;
  pointer-events:  none;
  transition:      transform 0.15s ease, filter 0.2s ease;
}

/* Checker de fundo para imagens transparentes */
.mp-iv-canvas.show-checker {
  background-image: repeating-conic-gradient(#2a2a3a 0% 25%, #1a1a28 0% 50%);
  background-size:  20px 20px;
}

/* ── Painel lateral — galeria/thumbs ─────────────────────────────────────── */

.mp-iv-sidebar {
  width:        110px;
  flex-shrink:  0;
  background:   rgba(0,0,0,0.30);
  border-left:  1px solid rgba(255,255,255,0.06);
  overflow-y:   auto;
  overflow-x:   hidden;
  display:      flex;
  flex-direction: column;
  gap:          4px;
  padding:      4px;
}

.mp-iv-sidebar.hidden { display: none; }

.mp-iv-thumb {
  width:        100%;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow:     hidden;
  cursor:       pointer;
  border:       2px solid transparent;
  transition:   border-color 0.12s, opacity 0.12s;
  flex-shrink:  0;
}
.mp-iv-thumb img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
  pointer-events: none;
}
.mp-iv-thumb:hover  { border-color: rgba(255,255,255,0.25); }
.mp-iv-thumb.active { border-color: var(--mp-accent, #3daee9); }

/* ── Barra de status ─────────────────────────────────────────────────────── */

.mp-iv-statusbar {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     3px 12px;
  border-top:  1px solid rgba(255,255,255,0.06);
  background:  rgba(0,0,0,0.30);
  flex-shrink: 0;
  font-size:   10px;
  color:       rgba(255,255,255,0.28);
}
.mp-iv-status-item { white-space: nowrap; }
.mp-iv-status-spacer { flex: 1; }

/* ── Empty / Loading ─────────────────────────────────────────────────────── */

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

.mp-iv-loading {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  background:  rgba(0,0,0,0.50);
  color:       rgba(255,255,255,0.50);
  font-size:   13px;
}

/* ── Override Viewer.js: esconde toolbar nativa pois usamos a nossa ──────── */
.viewer-container .viewer-toolbar { display: none !important; }
.viewer-container .viewer-navbar  { display: none !important; }