/**
 * Manic Pixels Web OS — PDF Reader CSS
 */

.mp-pdf {
  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-pdf-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-pdf-tool-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          28px;
  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);
  cursor:          pointer;
  transition:      background 0.1s;
  flex-shrink:     0;
}
.mp-pdf-tool-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.mp-pdf-tool-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.mp-pdf-tool-btn svg { width: 15px; height: 15px; }

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

/* ── Navegação de página ─────────────────────────────────────────────────── */

.mp-pdf-page-ctrl {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.mp-pdf-page-input {
  width:         40px;
  background:    rgba(255,255,255,0.07);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color:         var(--mp-menu-fg, #e8e8f0);
  font-family:   var(--mp-font-mono, monospace);
  font-size:     12px;
  padding:       3px 4px;
  text-align:    center;
  outline:       none;
}
.mp-pdf-page-input:focus { border-color: var(--mp-accent, #3daee9); }
.mp-pdf-page-input:disabled { opacity: 0.4; }

.mp-pdf-page-sep   { color: rgba(255,255,255,0.3); font-size: 12px; }
.mp-pdf-page-total { font-size: 12px; color: rgba(255,255,255,0.5); min-width: 20px; }

/* ── Zoom ────────────────────────────────────────────────────────────────── */

.mp-pdf-zoom-label {
  font-size:   12px;
  font-variant-numeric: tabular-nums;
  color:       rgba(255,255,255,0.6);
  min-width:   40px;
  text-align:  center;
}

/* ── Busca ───────────────────────────────────────────────────────────────── */

.mp-pdf-search-wrap { flex: 1; max-width: 220px; }
.mp-pdf-search-input {
  width:         100%;
  box-sizing:    border-box;
  background:    rgba(255,255,255,0.07);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color:         var(--mp-menu-fg, #e8e8f0);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     12px;
  padding:       5px 10px;
  outline:       none;
}
.mp-pdf-search-input:focus { border-color: var(--mp-accent, #3daee9); }
.mp-pdf-search-input:disabled { opacity: 0.4; }

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

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

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

/* ── Thumbnails ──────────────────────────────────────────────────────────── */

.mp-pdf-thumbs {
  width:       110px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow-y:  auto;
  padding:     8px 6px;
  display:     flex;
  flex-direction: column;
  gap:         6px;
  background:  rgba(0,0,0,0.15);
}

.mp-pdf-thumb {
  cursor:        pointer;
  border-radius: 4px;
  border:        2px solid transparent;
  padding:       4px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           4px;
  transition:    border-color 0.1s, background 0.1s;
  background:    rgba(255,255,255,0.03);
}
.mp-pdf-thumb:hover  { background: rgba(255,255,255,0.07); }
.mp-pdf-thumb.active { border-color: var(--mp-accent, #3daee9); background: rgba(var(--mp-accent-rgb,61,174,233),0.1); }

.mp-pdf-thumb canvas {
  width:      100% !important;
  max-width:  90px;
  height:     auto !important;
  border-radius: 2px;
  background: #fff;
}

.mp-pdf-thumb span {
  font-size:   10px;
  color:       rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}

/* ── Viewport ────────────────────────────────────────────────────────────── */

.mp-pdf-viewport {
  flex:           1;
  overflow:       auto;
  display:        flex;
  align-items:    flex-start;
  justify-content: center;
  background:     rgba(0,0,0,0.2);
  padding:        16px;
}

.mp-pdf-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding-top:    60px;
  color:          rgba(255,255,255,0.25);
  font-size:      12px;
  text-align:     center;
}

.mp-pdf-canvas {
  box-shadow:    0 4px 32px rgba(0,0,0,0.5);
  border-radius: 2px;
  background:    #fff;
}

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

.mp-pdf-loading {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            12px;
  background:     rgba(14,14,22,0.7);
  font-size:      12px;
  color:          rgba(255,255,255,0.6);
}

.mp-pdf-spinner {
  width:        24px;
  height:       24px;
  border:       3px solid rgba(255,255,255,0.1);
  border-top-color: var(--mp-accent, #3daee9);
  border-radius: 50%;
  animation:    mp-pdf-spin 0.7s linear infinite;
}
@keyframes mp-pdf-spin { to { transform: rotate(360deg); } }

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

.mp-pdf-statusbar {
  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;
}