/**
 * Manic Pixels Web OS — Notepad CSS
 * Editor de texto com CodeMirror 5. Tabs, barra de status, pesquisa.
 * WP-6 (Sessão 3): menubar, overlays (goto/font/encoding), case-sensitive, statusbar expandida.
 */

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

.mp-notepad {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     var(--mp-window-bg-solid, #14141e);
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  overflow:       hidden;
  position:       relative;
}

/* ── Barra de menus (WP-6) ───────────────────────────────────────────────── */

.mp-np-menubar {
  display:       flex;
  align-items:   stretch;
  background:    rgba(0, 0, 0, 0.30);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink:   0;
  padding:       0 4px;
  gap:           0;
}

.mp-np-menu-btn {
  display:       flex;
  align-items:   center;
  padding:       3px 10px;
  height:        24px;
  background:    transparent;
  border:        none;
  border-radius: 4px;
  color:         rgba(255, 255, 255, 0.60);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     11px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.10s, color 0.10s;
  user-select:   none;
}

.mp-np-menu-btn:hover,
.mp-np-menu-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color:      rgba(255, 255, 255, 0.88);
}

/* Área de popups de menu */
.mp-np-menu-popups {
  position: relative;
  flex-shrink: 0;
}

/* Popup dropdown de menu */
.mp-np-menu-popup {
  position:     absolute;
  top:          0;
  left:         0;
  z-index:      9000;
  min-width:    200px;
  background:   var(--mp-menu-bg, #1f2233);
  border:       1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  box-shadow:   0 8px 24px rgba(0, 0, 0, 0.50);
  padding:      4px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select:  none;
}

.mp-np-menu-item {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  width:         100%;
  padding:       5px 14px 5px 12px;
  border:        none;
  background:    transparent;
  color:         rgba(255, 255, 255, 0.75);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     11.5px;
  cursor:        pointer;
  text-align:    left;
  gap:           20px;
  transition:    background 0.08s;
}

.mp-np-menu-item:hover {
  background: rgba(var(--mp-accent-rgb, 61,174,233), 0.18);
  color:      rgba(255, 255, 255, 0.95);
}

.mp-np-menu-item-label { flex: 1; }

.mp-np-menu-item-kbd {
  font-size:  10px;
  color:      rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.mp-np-menu-sep {
  height:     1px;
  background: rgba(255, 255, 255, 0.07);
  margin:     4px 0;
}

/* ── Barra de abas ───────────────────────────────────────────────────────── */

.mp-np-tabbar {
  display:     flex;
  align-items: stretch;
  background:  rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow-x:  auto;
  overflow-y:  hidden;
  flex-shrink: 0;
  scrollbar-width: none;
}
.mp-np-tabbar::-webkit-scrollbar { display: none; }

.mp-np-tab {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     0 10px 0 12px;
  height:      32px;
  min-width:   100px;
  max-width:   180px;
  cursor:      pointer;
  border-right: 1px solid rgba(255,255,255,0.06);
  font-size:   11px;
  color:       rgba(255,255,255,0.45);
  user-select: none;
  transition:  background 0.10s, color 0.10s;
  flex-shrink: 0;
  white-space: nowrap;
}
.mp-np-tab:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.65); }
.mp-np-tab.active {
  background: var(--mp-window-bg-solid, #14141e);
  color:      rgba(255,255,255,0.88);
  border-bottom: 2px solid var(--mp-accent, #3daee9);
}

.mp-np-tab-name {
  flex:        1;
  overflow:    hidden;
  text-overflow: ellipsis;
  min-width:   0;
}

/* Ponto de modificado */
.mp-np-tab.dirty .mp-np-tab-name::after {
  content: ' •';
  color:   var(--mp-accent, #3daee9);
}

.mp-np-tab-close {
  width:       16px;
  height:      16px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color:       rgba(255,255,255,0.30);
  flex-shrink: 0;
  transition:  background 0.10s, color 0.10s;
}
.mp-np-tab-close:hover {
  background: rgba(255,255,255,0.12);
  color:      rgba(255,255,255,0.75);
}
.mp-np-tab-close svg { width: 8px; height: 8px; }

/* Botão nova aba */
.mp-np-new-tab {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       32px;
  flex-shrink: 0;
  color:       rgba(255,255,255,0.30);
  cursor:      pointer;
  border:      none;
  background:  transparent;
  font-size:   18px;
  transition:  background 0.10s, color 0.10s;
}
.mp-np-new-tab:hover {
  background: rgba(255,255,255,0.05);
  color:      rgba(255,255,255,0.70);
}

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

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

.mp-np-tool-btn {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       28px;
  height:      26px;
  border:      none;
  border-radius: 5px;
  background:  transparent;
  color:       rgba(255,255,255,0.45);
  cursor:      pointer;
  transition:  background 0.10s, color 0.10s;
  padding:     0;
}
.mp-np-tool-btn:hover {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.75);
}
.mp-np-tool-btn.active {
  background: rgba(var(--mp-accent-rgb,61,174,233), 0.15);
  color:      var(--mp-accent, #3daee9);
}
.mp-np-tool-btn svg { width: 14px; height: 14px; }

/* Botão case-sensitive (WP-6 item 21) */
.mp-np-case-btn {
  font-size:   11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  width:       28px;
}

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

/* Seletor de linguagem */
.mp-np-lang-select {
  background:  rgba(255,255,255,0.06);
  border:      1px solid rgba(255,255,255,0.09);
  border-radius: 5px;
  color:       rgba(255,255,255,0.55);
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   11px;
  padding:     3px 6px;
  cursor:      pointer;
  outline:     none;
  height:      26px;
}
.mp-np-lang-select option { background: #1b1e2e; }

/* Busca inline */
.mp-np-search-bar {
  display:     none;
  align-items: center;
  gap:         6px;
  padding:     4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  background:  rgba(0,0,0,0.15);
}
.mp-np-search-bar.visible { display: flex; }

.mp-np-search-input {
  flex:        1;
  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:     4px 8px;
  outline:     none;
  max-width:   220px;
}
.mp-np-search-input:focus { border-color: var(--mp-accent, #3daee9); }

.mp-np-search-count {
  font-size:   11px;
  color:       rgba(255,255,255,0.35);
  min-width:   40px;
}

/* ── Área do editor ──────────────────────────────────────────────────────── */

.mp-np-editor-wrap {
  flex:        1;
  overflow:    hidden;
  position:    relative;
}

/* Adaptações CodeMirror → tema KDE escuro */
.mp-np-editor-wrap .CodeMirror {
  height:      100% !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
  font-size:   13px !important;
  line-height: 1.6 !important;
  background:  transparent !important;
  color:       #c5cce8 !important;
}

.mp-np-editor-wrap .CodeMirror-scroll { height: 100%; }
.mp-np-editor-wrap .CodeMirror-gutters {
  background: rgba(0,0,0,0.20) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.mp-np-editor-wrap .CodeMirror-linenumber { color: rgba(255,255,255,0.22) !important; }
.mp-np-editor-wrap .CodeMirror-cursor     { border-left-color: var(--mp-accent, #3daee9) !important; }
.mp-np-editor-wrap .CodeMirror-selected   { background: rgba(61,174,233,0.18) !important; }
.mp-np-editor-wrap .CodeMirror-focused .CodeMirror-selected { background: rgba(61,174,233,0.25) !important; }
.mp-np-editor-wrap .CodeMirror-matchingbracket { color: #fff !important; font-weight: bold; }
.mp-np-editor-wrap .CodeMirror-search-match {
  background: rgba(246,180,0,0.30) !important;
  outline:    1px solid rgba(246,180,0,0.50);
}

/* ── Barra de status (WP-6 item 16) ─────────────────────────────────────── */

.mp-np-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.20);
  flex-shrink: 0;
  font-size:   10px;
  color:       rgba(255,255,255,0.28);
}

.mp-np-status-item { white-space: nowrap; }

.mp-np-status-spacer { flex: 1; }

.mp-np-status-encoding {
  cursor:  pointer;
  padding: 1px 5px;
  border-radius: 3px;
  transition: background 0.10s;
}
.mp-np-status-encoding:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════════════════════════════════════
   WP-6 Overlays — Ir para linha / Fonte / Encoding
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop semitransparente que cobre o editor */
.mp-np-overlay {
  position:        absolute;
  inset:           0;
  z-index:         800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Caixa de diálogo centralizada */
.mp-np-overlay-box {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  min-width:      260px;
  max-width:      360px;
  padding:        20px 22px;
  background:     var(--mp-menu-bg, #1f2233);
  border:         1px solid rgba(255, 255, 255, 0.12);
  border-radius:  10px;
  box-shadow:     0 16px 48px rgba(0, 0, 0, 0.60);
  user-select:    none;
}

.mp-np-overlay-title {
  font-size:   13px;
  font-weight: 600;
  color:       rgba(255, 255, 255, 0.88);
  margin-bottom: 4px;
}

.mp-np-overlay-label {
  font-size: 11px;
  color:     rgba(255, 255, 255, 0.45);
  display:   block;
}

.mp-np-overlay-input,
.mp-np-overlay-select {
  width:        100%;
  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:      6px 8px;
  outline:      none;
  box-sizing:   border-box;
  transition:   border-color 0.12s;
}
.mp-np-overlay-input:focus,
.mp-np-overlay-select:focus {
  border-color: var(--mp-accent, #3daee9);
}
.mp-np-overlay-select option { background: #1b1e2e; }

/* Linha de botões no final do diálogo */
.mp-np-overlay-btns {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
  margin-top:      4px;
}

.mp-np-overlay-btn {
  display:       inline-flex;
  align-items:   center;
  padding:       5px 14px;
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background:    rgba(255, 255, 255, 0.06);
  color:         rgba(255, 255, 255, 0.65);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     12px;
  cursor:        pointer;
  transition:    background 0.10s, color 0.10s;
}
.mp-np-overlay-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color:      rgba(255, 255, 255, 0.88);
}
.mp-np-overlay-btn--primary {
  background:   rgba(var(--mp-accent-rgb, 61,174,233), 0.22);
  border-color: rgba(var(--mp-accent-rgb, 61,174,233), 0.40);
  color:        var(--mp-accent, #3daee9);
}
.mp-np-overlay-btn--primary:hover {
  background: rgba(var(--mp-accent-rgb, 61,174,233), 0.32);
  color:      #fff;
}