/**
 * Manic Pixels Web OS — Documents CSS
 * Dark chrome KDE Plasma + área de edição paper-white (estilo LibreOffice/Word).
 * Depende de: quill.snow.css (CDN), variables.css.
 */

/* ── Layout principal ────────────────────────────────────────────────────── */

.mp-doc {
  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);
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */

.mp-doc-tabbar {
  display:       flex;
  align-items:   center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink:   0;
  background:    rgba(0,0,0,0.15);
  overflow:      hidden;
}

.mp-doc-tabs {
  display:    flex;
  align-items: stretch;
  flex:       1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.mp-doc-tabs::-webkit-scrollbar { display: none; }

.mp-doc-tab {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       0 12px 0 14px;
  height:        34px;
  min-width:     100px;
  max-width:     200px;
  border-right:  1px solid rgba(255,255,255,0.06);
  cursor:        pointer;
  font-size:     12px;
  color:         rgba(255,255,255,0.45);
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    background 0.1s, color 0.1s;
  position:      relative;
}
.mp-doc-tab:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }

.mp-doc-tab.active {
  color:       var(--mp-menu-fg, #e8e8f0);
  background:  var(--mp-window-bg-solid, #14141e);
  border-bottom: 2px solid var(--mp-accent, #3daee9);
}

.mp-doc-tab.dirty .mp-doc-tab-name::after {
  content: ' •';
  color:   var(--mp-accent, #3daee9);
}

.mp-doc-tab-name {
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.mp-doc-tab-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  border-radius:   4px;
  border:          none;
  background:      transparent;
  color:           inherit;
  cursor:          pointer;
  flex-shrink:     0;
  opacity:         0;
  transition:      opacity 0.1s, background 0.1s;
}
.mp-doc-tab:hover .mp-doc-tab-close,
.mp-doc-tab.active .mp-doc-tab-close { opacity: 0.6; }
.mp-doc-tab-close:hover { background: rgba(255,255,255,0.12); opacity: 1 !important; }
.mp-doc-tab-close svg { width: 8px; height: 8px; }

.mp-doc-new-tab-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  flex-shrink:     0;
  border:          none;
  background:      transparent;
  color:           rgba(255,255,255,0.4);
  cursor:          pointer;
  border-radius:   5px;
  margin:          0 4px;
  transition:      background 0.1s, color 0.1s;
}
.mp-doc-new-tab-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.mp-doc-new-tab-btn svg { width: 12px; height: 12px; }

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

.mp-doc-body {
  flex:           1;
  position:       relative;
  overflow:       hidden;
  background:     #3a3a4a; /* fundo cinza escuro ao redor do "papel" */
}

/* ── Wrap de cada aba ────────────────────────────────────────────────────── */

.mp-doc-tab-wrap {
  position:       absolute;
  inset:          0;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.mp-doc-tab-wrap--fallback {
  align-items:     center;
  justify-content: center;
}

.mp-doc-fallback-notice {
  padding:       20px 24px;
  background:    rgba(231,76,60,0.1);
  border:        1px solid rgba(231,76,60,0.3);
  border-radius: 8px;
  color:         #e74c3c;
  font-size:     13px;
  max-width:     420px;
  text-align:    center;
}

/* ── Toolbar (sobrescreve Quill Snow) ────────────────────────────────────── */

.mp-doc-toolbar.ql-toolbar,
.mp-doc-toolbar.ql-toolbar.ql-snow {
  padding:        6px 10px;
  background:     var(--mp-window-bg-solid, #14141e);
  border:         none !important;
  border-bottom:  1px solid rgba(255,255,255,0.07) !important;
  flex-shrink:    0;
  display:        flex;
  flex-wrap:      wrap;
  gap:            2px;
  align-items:    center;
}

/* Ícones SVG dentro do toolbar */
.mp-doc-toolbar .ql-stroke { stroke: rgba(255,255,255,0.65) !important; }
.mp-doc-toolbar .ql-fill   { fill:   rgba(255,255,255,0.65) !important; }
.mp-doc-toolbar .ql-thin   { stroke: rgba(255,255,255,0.65) !important; }

.mp-doc-toolbar .ql-picker-label,
.mp-doc-toolbar .ql-picker-label.ql-active,
.mp-doc-toolbar button {
  color:  rgba(255,255,255,0.7) !important;
}

.mp-doc-toolbar button {
  border-radius: 4px !important;
  transition: background 0.08s !important;
}
.mp-doc-toolbar button:hover,
.mp-doc-toolbar button.ql-active {
  background: rgba(255,255,255,0.12) !important;
}
.mp-doc-toolbar button.ql-active .ql-stroke { stroke: var(--mp-accent, #3daee9) !important; }
.mp-doc-toolbar button.ql-active .ql-fill   { fill:   var(--mp-accent, #3daee9) !important; }

.mp-doc-toolbar .ql-picker {
  color: rgba(255,255,255,0.7) !important;
}
.mp-doc-toolbar .ql-picker-label {
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.05) !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
}
.mp-doc-toolbar .ql-picker-label:hover { background: rgba(255,255,255,0.1) !important; }

.mp-doc-toolbar .ql-picker-options {
  background:    #1e2030 !important;
  border:        1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  box-shadow:    0 6px 24px rgba(0,0,0,0.5) !important;
  z-index:       9999 !important;
}
.mp-doc-toolbar .ql-picker-item       { color: rgba(255,255,255,0.7)  !important; }
.mp-doc-toolbar .ql-picker-item:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.mp-doc-toolbar .ql-picker-item.ql-selected { color: var(--mp-accent, #3daee9) !important; }

/* ── Área de edição (paper) ──────────────────────────────────────────────── */

.mp-doc-quill-editor {
  flex:       1;
  overflow-y: auto;
  padding:    24px;               /* margem ao redor do "papel" */
  display:    flex;
  flex-direction: column;
  align-items: center;
}

/* Container Quill — sem borda, full height */
.mp-doc-tab-wrap .ql-container.ql-snow {
  border:  none !important;
  flex:    1;
  width:   100%;
  display: flex;
  flex-direction: column;
  align-items:    center; /* centraliza o "papel" (ql-editor) horizontalmente */
}

/* Paper: branco, largura A4-like, sombra */
.mp-doc-tab-wrap .ql-editor {
  background:    #ffffff;
  color:         #1a1a2e;
  min-height:    700px;
  width:         750px;
  max-width:     100%;
  box-shadow:    0 2px 20px rgba(0,0,0,0.4);
  border-radius: 2px;
  padding:       48px 56px !important;
  font-family:   'Noto Sans', Georgia, serif !important;
  font-size:     14px !important;
  line-height:   1.7 !important;
  caret-color:   #3daee9;
  outline:       none !important;
  box-sizing:    border-box;
}

/* Placeholder — contido dentro da folha (não vaza para fora) */
.mp-doc-tab-wrap .ql-editor.ql-blank::before {
  color:         #aaa !important;
  font-style:    italic !important;
  top:           48px !important;  /* coincide com padding-top do .ql-editor */
  left:          56px !important;
  right:         56px !important;
  overflow:      hidden !important;
  white-space:   nowrap !important;
  text-overflow: ellipsis !important;
}

/* Tipografia dentro do editor */
.mp-doc-tab-wrap .ql-editor h1 { font-size: 2em;   font-weight: 700; margin: .4em 0; }
.mp-doc-tab-wrap .ql-editor h2 { font-size: 1.6em; font-weight: 700; margin: .4em 0; }
.mp-doc-tab-wrap .ql-editor h3 { font-size: 1.3em; font-weight: 600; margin: .4em 0; }
.mp-doc-tab-wrap .ql-editor h4 { font-size: 1.1em; font-weight: 600; margin: .3em 0; }
.mp-doc-tab-wrap .ql-editor h5,
.mp-doc-tab-wrap .ql-editor h6 { font-size: 1em;   font-weight: 600; margin: .3em 0; }
.mp-doc-tab-wrap .ql-editor p  { margin-bottom: .6em; }
.mp-doc-tab-wrap .ql-editor blockquote {
  border-left: 4px solid #3daee9;
  padding-left: 16px;
  color: #555;
  margin: .8em 0;
}
.mp-doc-tab-wrap .ql-editor pre.ql-syntax {
  background:  #1e2030;
  color:       #c5cce8;
  border-radius: 4px;
  padding:     12px 16px;
  font-family: 'Noto Sans Mono', monospace;
  font-size:   12px;
  overflow-x:  auto;
}

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

.mp-doc-statusbar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  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;
  background:    rgba(0,0,0,0.1);
}

.mp-doc-stat-sep    { color: rgba(255,255,255,0.2); }
.mp-doc-stat-spacer { flex: 1; }
.mp-doc-stat-file   { font-style: italic; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }