/*
 * UniDoc UI redesign — P0 shell restyle (CSS-only, reversible).
 *
 * Loaded LAST, after every existing stylesheet, so these rules win on source
 * order at equal specificity. This layer restyles SHELL CHROME ONLY: top bar,
 * ribbon tab row, ribbon panel row, toolbar, side panels, status bar, menus,
 * popovers and dialog chrome, plus the clean gradient backdrop behind the pages.
 *
 * It paints nothing inside the document paper: its only page rules are the
 * drop shadow outside each sheet and the paper guard (section 0) that pins
 * in-paper colours to their pre-P0 values. It changes no geometry that
 * JavaScript measures against (no widths/heights/margins/padding on measured
 * shell containers such as #ribbon or #canvas). Removing the two <link>s in
 * index.html reverts it fully.
 *
 * Design source: docs/source/UNIDOC_UI_REDESIGN_20260929.html (P0) and the
 * high-fidelity prototype UNIDOC_EDITOR_PROTOTYPE_20260929.html.
 */

/* ============================================================
 * 0. Paper guard — document content keeps its pre-P0 pixels.
 *    The only persistent in-paper rule that reads a remapped shell variable
 *    is the blockquote bar (app.css `.page-content blockquote::before` uses
 *    var(--accent)). Exports serialise these sheets too, so pin it to the
 *    previous accent. Transient states (selection, hover) may follow iOS blue.
 * ============================================================ */
.page-content blockquote::before {
  background: #0b57d0;
}

/* ============================================================
 * 1. Canvas backdrop — one clean vertical gradient, no glows/dot grid.
 *    Background paint only; padding/geometry of #canvas is left untouched.
 * ============================================================ */
/* #canvas is itself the scroll container, so the default (scroll) attachment
   already pins the gradient to the visible canvas. `fixed` would force a
   repaint on every scroll frame of the main document scroller. */
#canvas {
  background: var(--ui-canvas-gradient);
}
/* Thin pill thumb: a transparent inset border keeps it off the track edges
   (app.css paints that border with --canvas-bg, which no longer matches the
   gradient behind it). */
#canvas::-webkit-scrollbar-thumb {
  background: rgba(60, 60, 67, .28) padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
#canvas::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 60, 67, .44) padding-box;
}

/* Soft 4-layer paper shadow around each page (drop-shadow is shell chrome,
   outside the paper; box-shadow/outline do not affect layout geometry). */
.page,
.page.col-first::before {
  box-shadow: var(--ui-paper-shadow);
  outline-color: transparent;
}

/* ============================================================
 * 2. Top bar / title bar — white surface, hairline underline.
 * ============================================================ */
#ribbon .rb-titlebar {
  background: var(--ui-surface);
  border-bottom: .5px solid var(--ui-line-soft);
}

/* ============================================================
 * 3. Ribbon tab row — clean single active indicator (segmented feel).
 *    A crisp underline bar marks exactly one active tab, so even if two tabs
 *    ever carry .active the intent is unambiguous. (See known-risks note re:
 *    the JS double-highlight; this cannot be corrected in CSS alone.)
 * ============================================================ */
#ribbon .rb-tab {
  border-radius: var(--ui-r-2);
  color: var(--ui-ink-2);
  transition: background-color .12s ease, color .12s ease;
}
#ribbon .rb-tab:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}
#ribbon .rb-tab.active,
#ribbon .rb-tab-context.active {
  color: var(--ui-accent);
  background: var(--ui-accent-weak);
  font-weight: 600;
  box-shadow: none;
}

/* ============================================================
 * 4. Ribbon panel row — grouped-grey pill container (segmented control look).
 * ============================================================ */
#ribbon .ribbon-panels {
  background: var(--ui-surface-2);
  border-radius: var(--ui-r-4);
}
#ribbon .rb-group + .rb-group::before {
  background: var(--ui-line-soft);
}

/* Toolbar toggle buttons: iOS fill for the on-state. */
#ribbon .rb-btn.active,
#ribbon .rb-btn[aria-pressed="true"],
#ribbon .rb-toggle.on {
  color: var(--ui-accent);
  background: var(--ui-accent-weak);
}

/* ============================================================
 * 5. Status bar — quiet white surface, hairline top.
 * ============================================================ */
#statusbar {
  background: var(--ui-surface);
  border-top: .5px solid var(--ui-line-soft);
  color: var(--ui-ink-2);
}

/* ============================================================
 * 6. Side panels (AI / ToC / etc.) — grouped grey, hairline, iOS radius.
 *    Position/size are untouched; only surface colours and borders change.
 * ============================================================ */
#ai-panel {
  background: var(--ui-bg);
  border-left: .5px solid var(--ui-line);
}
#ai-panel .ai-head {
  border-bottom: .5px solid var(--ui-line-soft);
}
#toc-panel {
  background: var(--ui-bg);
  border-left: .5px solid var(--ui-line);
}

/* ============================================================
 * 7. Menus & popovers — hairline, iOS radius, soft elevation.
 *    (Values come through --ui-surface-border / --ui-surface-shadow, already
 *    re-pointed to iOS in ui-tokens.css; these rules tighten radius + hairline.)
 * ============================================================ */
:is(.color-pop, #fs-menu, #num-panel, #tpl-panel, #para-drop,
    #find-panel, #wrap-panel, .plugin-panel),
#ctx-menu {
  border: .5px solid var(--ui-line);
  border-radius: var(--ui-r-3);
  box-shadow: var(--ui-shadow-2);
}
#fs-menu .fs-item.active,
#fs-menu .fs-item-cn.active {
  background: var(--ui-accent-weak);
  color: var(--ui-accent);
}

/* ============================================================
 * 8. Dialog chrome — hairline border, iOS radius, soft elevation.
 *    Chrome only; dialog body/content layout is left to the app.
 * ============================================================ */
#pagenum-dialog .pn-card {
  border: .5px solid var(--ui-line);
  border-radius: var(--ui-r-4);
  box-shadow: var(--ui-shadow-3);
}
#pagenum-dialog .pn-tab.on {
  color: var(--ui-accent);
  box-shadow: inset 0 -2px 0 var(--ui-accent);
}
#pagenum-dialog .pn-par.on {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-ink);
}
#article-export-dialog {
  border: .5px solid var(--ui-line);
  border-radius: var(--ui-r-4);
}
.uv-dialog {
  border-radius: var(--ui-r-4);
}
.uv-dialog input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-weak);
}

/* ============================================================
 * 9. Primary / secondary buttons — unify accent to iOS system blue.
 *    Several stylesheets hard-code the old Material blue (#0b57d0/#0842a0)
 *    on .primary; repaint them here so accent is iOS blue everywhere.
 * ============================================================ */
.collab-actions button.primary,
.uv-dialog-actions button.primary,
.source-drawer-actions button.primary,
.source-conflict-dialog button.primary {
  background: var(--ui-accent-strong);
  border-color: var(--ui-accent-strong);
  color: var(--ui-accent-ink);
}
.collab-actions button.primary:hover,
.uv-dialog-actions button.primary:hover,
.source-drawer-actions button.primary:hover,
.source-conflict-dialog button.primary:hover {
  background: var(--ui-accent-strong-hover);
  border-color: var(--ui-accent-strong-hover);
}

/* iOS focus ring for keyboard users on shell controls. */
#ribbon :is(button, .rb-tab):focus-visible,
#statusbar button:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}