/* Documents app layout (ribbon UI) */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.body { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 230px; background: var(--fo-surface); border-right: 1px solid var(--fo-line);
  display: flex; flex-direction: column; padding: 12px;
}
.sidebar-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.sidebar-actions button { border: 1px solid var(--fo-line); }
.sidebar-actions .primary { border-color: transparent; }
.sidebar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 6px; }
.doc-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.doc-list li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; gap: 6px;
}
.doc-list li:hover { background: var(--fo-bg); }
.doc-list li.active { background: var(--fo-accent-soft); color: var(--fo-accent); font-weight: 600; }
.doc-list .doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-list .doc-del { opacity: 0; font-size: 12px; padding: 2px 6px; }
.doc-list li:hover .doc-del { opacity: .7; }
.doc-list .doc-del:hover { color: var(--fo-danger); opacity: 1; }

.editor-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.page-scroll { flex: 1; overflow: auto; padding: 28px; background: #e9ebee; }

.page {
  max-width: 816px; margin: 0 auto; background: #fff; border: 1px solid var(--fo-line);
  box-shadow: 0 1px 4px rgba(16,24,40,.14); padding: 96px; min-height: 1056px;
  transform-origin: top center;
}

/* Status bar */
.statusbar {
  display: flex; align-items: center; gap: 18px; height: 26px; padding: 0 14px;
  background: var(--app-accent, #185abd); color: #fff; font-size: 12px;
}

/* ProseMirror content */
.ProseMirror { outline: none; line-height: 1.5; color: var(--fo-ink); font-family: Calibri, "Segoe UI", sans-serif; }
.ProseMirror:focus { outline: none; }
.ProseMirror p { margin: 0 0 .55em; }
.ProseMirror h1 { font-size: 28px; margin: .5em 0 .3em; font-weight: 600; color: #2e74b5; }
.ProseMirror h2 { font-size: 21px; margin: .5em 0 .3em; font-weight: 600; color: #2e74b5; }
.ProseMirror h3 { font-size: 17px; margin: .5em 0 .3em; font-weight: 600; color: #1f4e79; }
.ProseMirror ul, .ProseMirror ol { padding-left: 1.6em; margin: 0 0 .55em; }
.ProseMirror blockquote { border-left: 3px solid var(--fo-line); margin: 0 0 .55em; padding-left: 1em; color: var(--fo-muted); }
.ProseMirror pre { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px 14px; font-family: Consolas, monospace; font-size: 13px; overflow-x: auto; }
.ProseMirror code { background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 5px; font-family: Consolas, monospace; font-size: .9em; }
.ProseMirror pre code { background: none; padding: 0; }
.ProseMirror hr { border: none; border-top: 1px solid var(--fo-line); margin: 1.1em 0; }
.ProseMirror a { color: var(--fo-accent); text-decoration: underline; }
.ProseMirror img { max-width: 100%; height: auto; }
.ProseMirror table { border-collapse: collapse; margin: .5em 0; width: 100%; }
.ProseMirror th, .ProseMirror td { border: 1px solid #b7b7b7; padding: 5px 8px; min-width: 40px; vertical-align: top; }
.ProseMirror th { background: #f2f2f2; font-weight: 600; }
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); color: var(--fo-muted); float: left; height: 0; pointer-events: none;
}

/* line-spacing applied at page level */
.page.ls-1   .ProseMirror p { line-height: 1.0; }
.page.ls-115 .ProseMirror p { line-height: 1.15; }
.page.ls-15  .ProseMirror p { line-height: 1.5; }
.page.ls-2   .ProseMirror p { line-height: 2.0; }

/* ---------------- Find & Replace panel (Word-style) ---------------- */
.fo-find {
  position: fixed; top: 118px; right: 18px; z-index: 900;
  width: 340px; background: #fff; border: 1px solid #d0d7de;
  border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,.18);
  padding: 10px 12px 12px; font-size: 13px;
}
.fo-find .ff-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fo-find #ff-title { font-weight: 650; color: #185abd; }
.fo-find .ff-x { border: 0; background: none; cursor: pointer; font-size: 14px; color: #57606a; }
.fo-find .ff-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.fo-find .ff-in { flex: 1; padding: 6px 8px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 13px; }
.fo-find .ff-in:focus { outline: 2px solid #185abd55; border-color: #185abd; }
.fo-find .ff-count { min-width: 62px; text-align: right; color: #57606a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-find .ff-nav, .fo-find .ff-btn {
  border: 1px solid #d0d7de; background: #f6f8fa; border-radius: 6px; cursor: pointer; padding: 6px 8px; font-size: 12px;
}
.fo-find .ff-nav:hover, .fo-find .ff-btn:hover { background: #eaeef2; }
.fo-find .ff-btn { padding: 6px 10px; }
.fo-find .ff-opts { display: flex; gap: 14px; color: #57606a; margin-top: 2px; }
.fo-find .ff-opts label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
/* current match highlight (ProseMirror inline decoration) */
.ProseMirror .fo-find-hit { background: #ffe58a; border-radius: 2px; }
.ProseMirror .fo-find-cur { background: #ff9f45; border-radius: 2px; box-shadow: 0 0 0 1px #e8791d; }