/*
 * oiv-gold: oiv.ae "honey gold on black" for BookStack v26.03+ (oiv.ae)
 * Managed by Terraform (modules/bookstack-node/files/theme/public/oiv-gold/oiv-gold.css).
 *
 * Palette = the :root tokens of mirrors.oiv.ae (modules/mirror-node/files/status.css), variant
 * g01-l4 of the oiv.ae logo drafts: honey gold #E0B44C on black #000000, muted gold #A8894A,
 * functional status colours unchanged. ONE dark theme for every visitor: the same values are
 * set for BookStack's light and dark mode, and the dark-mode toggle is hidden.
 * Fonts are not downloaded: IBM Plex / Inter / Roboto when installed locally, else system fonts.
 * The ":root:root" selectors intentionally beat the colours saved in Settings > Customization.
 */

:root:root, :root:root.dark-mode {
  /* mirrors.oiv.ae tokens (status.css) */
  --oiv-bg: #000000; --oiv-panel: #0d0b06; --oiv-fg: #e0b44c; --oiv-muted: #a8894a; --oiv-line: #2e2612;
  --oiv-accent: #e0b44c; --oiv-accent-bg: #2a200a;
  --oiv-ok: #5fd39b; --oiv-ok-bg: #0f2a1d; --oiv-run: #7fb0ff; --oiv-run-bg: #13213a;
  --oiv-warn: #ff9a3c; --oiv-warn-bg: #3a1f08; --oiv-bad: #ff8a80; --oiv-bad-bg: #3a1614;
  --oiv-radius: 10px;
  --oiv-mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* derived for BookStack */
  --oiv-line-strong: #4a3d1c;
  --oiv-hover: #1c170b;       /* = --new-bg of status.css */
  --oiv-on-accent: #000000;

  /* BookStack's own variables */
  --font-body: "IBM Plex Sans", Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "IBM Plex Sans", Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: var(--oiv-mono);
  --color-primary: #e0b44c;
  --color-primary-light: rgba(224, 180, 76, 0.14);
  --color-link: #e0b44c;
  --color-bookshelf: #e0b44c;
  --color-book: #5fd39b;
  --color-chapter: #ff9a3c;
  --color-page: #7fb0ff;
  --color-page-draft: #a8894a;
  --color-positive: #5fd39b;
  --color-negative: #ff8a80;
  --color-info: #7fb0ff;
  --color-warning: #ff9a3c;
  color-scheme: dark;
}

html[lang^="ar"] {
  --font-body: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-heading: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html, html body { background-color: var(--oiv-bg) !important; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--oiv-fg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--oiv-fg); }
a { color: var(--oiv-accent); text-underline-offset: 3px; }
a:hover { color: var(--oiv-accent); }
:focus-visible { outline: 2px solid var(--oiv-accent) !important; outline-offset: 2px; }
::selection { background: var(--oiv-accent); color: var(--oiv-on-accent); }
.text-muted, .text-muted-light { color: var(--oiv-muted) !important; }
.text-primary, .text-link { color: var(--oiv-accent) !important; }
hr { border-color: var(--oiv-line); background-color: var(--oiv-line); }
code, pre, kbd, .cm-editor { font-family: var(--oiv-mono); }
svg { fill: currentColor; }

/* One theme: the light/dark toggle has nothing to switch */
form[action$="/preferences/toggle-dark-mode"] { display: none !important; }

/* ---------- Utility bar (above the header) ---------- */
.oiv-util { background: var(--oiv-bg); border-bottom: 1px solid var(--oiv-line); color: var(--oiv-muted); font-size: .8125rem; line-height: 1.25rem; }
.oiv-util-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 6px 32px; min-height: 32px; }
.oiv-util-tag { font-family: var(--oiv-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.oiv-util-links { display: flex; gap: 16px; }
.oiv-util-links a { color: var(--oiv-fg); text-decoration: none; font-family: var(--oiv-mono); }
.oiv-util-links a:hover { text-decoration: underline; }
@media (max-width: 600px) { .oiv-util-inner { padding-inline: 16px; } .oiv-util-tag { display: none; } }

/* ---------- Header: panel bar, gold wordmark (like the /status/ title bar) ---------- */
header#header, header#header.primary-background {
  background: var(--oiv-panel) !important;
  color: var(--oiv-fg);
  border-bottom: 1px solid var(--oiv-line);
  box-shadow: none;
}
header#header .logo { color: var(--oiv-fg); }
header#header .logo:hover { background: transparent; }
header#header .logo-text { color: var(--oiv-fg); font-weight: 700; font-size: 1.25rem; }
.oiv-logo { display: inline-flex; align-items: center; }
.oiv-logo .oiv-wordmark { height: 30px; width: auto; display: block; }
header#header .links a, header#header .user-name { color: var(--oiv-fg); border-radius: 8px; }
header#header .links a:hover, header#header .user-name:hover { background-color: var(--oiv-accent-bg); color: var(--oiv-fg); }
header#header .links a svg, header#header .user-name svg { fill: currentColor; }
header#header .search-box input {
  background-color: var(--oiv-bg);
  border: 1px solid var(--oiv-line-strong);
  color: var(--oiv-fg);
  border-radius: 8px;
}
header#header .search-box input::placeholder { color: var(--oiv-muted); opacity: 1; }
header#header .search-box input:focus { border-color: var(--oiv-accent); box-shadow: 0 0 0 3px var(--color-primary-light); }
header#header .search-box button, header#header #header-search-box-button { color: var(--oiv-muted); opacity: 1; }
header#header .mobile-menu-toggle { color: var(--oiv-fg); fill: var(--oiv-fg); border-color: var(--oiv-line-strong); }
@media (max-width: 1000px) {
  header#header .header-links { background: var(--oiv-panel); border-top: 1px solid var(--oiv-line); }
  header#header .header-links a, header#header .header-links .user-name { color: var(--oiv-fg); }
}

/* ---------- Surfaces ---------- */
.card, .content-wrap.card, .grid-card, .popup-body, .dropdown-menu, .tri-layout-mobile-tabs,
.book-tree .entity-list, .sidebar-page-nav, .bg-white, .list-sort-container, .comment-box, .comment-branch .comment-box {
  background-color: var(--oiv-panel) !important;
  color: var(--oiv-fg);
  border-color: var(--oiv-line) !important;
}
.card, .content-wrap.card { border: 1px solid var(--oiv-line); border-radius: var(--oiv-radius); box-shadow: none; }
.card-title, .list-heading, h5, .text-dark { color: var(--oiv-fg) !important; fill: var(--oiv-fg); }
.tri-layout-left, .tri-layout-right, .tri-layout-middle { background: transparent; color: var(--oiv-fg); }
.tri-layout-left h5, .tri-layout-right h5, .tri-layout-left h2, .tri-layout-right h2 { font-size: 1rem; font-weight: 700; }
.dropdown-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .7); }
.dropdown-menu a, .dropdown-menu button, .dropdown-menu li > * { color: var(--oiv-fg) !important; }
.dropdown-menu a:hover, .dropdown-menu button:hover, .dropdown-menu li > *:hover { background-color: var(--oiv-accent-bg) !important; }
.popup-header, .popup-title { background-color: var(--oiv-accent-bg) !important; color: var(--oiv-fg) !important; }
.popup-background { background-color: rgba(0, 0, 0, .8); }
.entity-meta, .list-sort-label, .card .text-muted, .entity-list-item-children .text-muted { color: var(--oiv-muted) !important; }

/* Headings: bold, like the /status/ page */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-weight: 700; }
#content main h1, #content .content-wrap > h1, .page-content h1 { font-weight: 800; }

/* Entity lists and grids */
.entity-list-item { border-radius: 8px; }
.entity-list-item:hover, .entity-list-item.is-hovered, .entity-list-item.selected,
.book-contents .entity-list-item.selected, .chapter-contents .entity-list-item.selected { background-color: var(--oiv-hover) !important; }
.entity-list-item .entity-list-item-name { font-weight: 600; }
.featured-image-container-wrap, .grid-card { border-radius: var(--oiv-radius); overflow: hidden; }
.grid-card { border: 1px solid var(--oiv-line); box-shadow: none; }
.grid-card:hover { border-color: var(--oiv-accent) !important; }
.chapter-expansion, .entity-list-item-children { background-color: transparent !important; }

/* Tags */
.tag-item { border-radius: 999px; border-color: var(--oiv-line-strong); }
.tag-item .tag-name { background-color: var(--oiv-accent-bg); color: var(--oiv-fg); }
.tag-item .tag-value { background-color: var(--oiv-panel); color: var(--oiv-muted); }

/* ---------- Buttons: solid gold with black text, outline gold ---------- */
.button, .button.primary {
  font-weight: 600;
  border-radius: 8px;
  background-color: var(--oiv-accent);
  border: 1px solid var(--oiv-accent);
  color: var(--oiv-on-accent);
}
.button:hover, .button:focus, .button:active {
  background-color: #f0c866;
  border-color: #f0c866;
  color: var(--oiv-on-accent);
  filter: none;
}
.button.outline {
  background-color: transparent;
  color: var(--oiv-accent);
  border: 1px solid var(--oiv-accent);
}
.button.outline:hover, .button.outline:focus, .button.outline:active {
  background-color: var(--oiv-accent-bg);
  color: var(--oiv-accent);
  box-shadow: none;
}
.text-button, .icon-list-item { color: var(--oiv-fg); border-radius: 8px; }
.text-button:hover, .icon-list-item:hover { color: var(--oiv-accent); background-color: var(--oiv-accent-bg); }
.back-to-top { background-color: var(--oiv-accent); color: var(--oiv-on-accent); }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"],
input[type="number"], input[type="date"], select, textarea, .input-base {
  border-radius: 8px;
  border-color: var(--oiv-line-strong) !important;
  background-color: var(--oiv-bg) !important;
  color: var(--oiv-fg) !important;
}
input::placeholder, textarea::placeholder { color: var(--oiv-muted); opacity: 1; }
input:focus, select:focus, textarea:focus, .input-base:focus {
  border-color: var(--oiv-accent) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}
label, .setting-list-label { color: var(--oiv-fg); }
.toggle-switch-checkbox:checked + .toggle-switch-track, .custom-checkbox input:checked + .custom-checkbox-box { background-color: var(--oiv-accent); }

/* ---------- Page content ---------- */
.page-content { color: var(--oiv-fg); font-size: 1rem; line-height: 1.6; }
.page-content h1 { font-size: 2.25rem; line-height: 1.15; margin-top: .6em; }
.page-content h2 { font-size: 1.6rem; line-height: 1.2; margin-top: 1.4em; }
.page-content h3 { font-size: 1.3rem; line-height: 1.25; margin-top: 1.3em; }
.page-content h4 { font-size: 1.15rem; margin-top: 1.2em; }
.page-content h5, .page-content h6 { font-size: 1rem; margin-top: 1.1em; }
.page-content p { text-align: start; }
/* Text is gold as well, so links are underlined to stand out */
.page-content a { text-decoration: underline; text-decoration-thickness: 1px; }
.page-content a:hover { background: var(--oiv-accent-bg); text-decoration-thickness: 2px; }
.page-content li::marker { color: var(--oiv-muted); }
.page-content blockquote {
  border-inline-start: 3px solid var(--oiv-accent);
  background: var(--oiv-panel);
  border-radius: 0 6px 6px 0;
  padding: 10px 16px;
  color: var(--oiv-fg);
}
html[dir="rtl"] .page-content blockquote { border-radius: 6px 0 0 6px; }
.page-content img { border-radius: 6px; }

/* Code: like the command boxes of /status/ (pre.cmd) */
.page-content code, .page-content kbd {
  background-color: var(--oiv-accent-bg);
  color: var(--oiv-fg);
  border: 0;
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .88em;
}
.page-content pre, .page-content .cm-editor, .page-content .CodeMirror, .code-block-wrap {
  background-color: var(--oiv-bg) !important;
  color: var(--oiv-fg);
  border: 1px solid var(--oiv-line) !important;
  border-left: 3px solid var(--oiv-accent) !important;
  border-radius: 6px;
}
.page-content pre code { background: none; padding: 0; font-size: inherit; }
.code-block-wrap, .page-content pre, .page-content .cm-editor, .page-content .cm-content { direction: ltr; text-align: left; }
.cm-editor .cm-gutters { background-color: var(--oiv-panel) !important; color: var(--oiv-muted) !important; border-color: var(--oiv-line) !important; }

/* Tables */
.page-content table { border-collapse: collapse; }
.page-content table th, .page-content table td { border-color: var(--oiv-line) !important; padding: 8px 12px; }
.page-content table th { text-align: start; }
.page-content table thead th, .page-content table thead td {
  background: var(--oiv-panel);
  color: var(--oiv-muted);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
html[lang^="ar"] .page-content table thead th { text-transform: none; letter-spacing: 0; }

/* Callouts: the functional status colours of /status/ */
.page-content .callout, .callout { border-inline-start-width: 3px; border-radius: 6px; }
.callout.info    { background: var(--oiv-run-bg);  border-color: var(--oiv-run);  color: var(--oiv-fg); }
.callout.success { background: var(--oiv-ok-bg);   border-color: var(--oiv-ok);   color: var(--oiv-fg); }
.callout.warning { background: var(--oiv-warn-bg); border-color: var(--oiv-warn); color: var(--oiv-fg); }
.callout.danger  { background: var(--oiv-bad-bg);  border-color: var(--oiv-bad);  color: var(--oiv-fg); }
.callout.info:before    { color: var(--oiv-run); }
.callout.success:before { color: var(--oiv-ok); }
.callout.warning:before { color: var(--oiv-warn); }
.callout.danger:before  { color: var(--oiv-bad); }

/* Navigation bits */
.breadcrumbs .text-button, .breadcrumbs a { font-weight: 500; }
.tabs-inner button[aria-selected="true"], .tab-container [role="tab"][aria-selected="true"] {
  color: var(--oiv-accent);
  border-bottom-color: var(--oiv-accent);
}
.sidebar-page-nav .primary-background-light, .page-nav-item .link-background { background-color: var(--oiv-accent) !important; }

/* Editor toolbars (WYSIWYG / Markdown) */
.editor-toolbar, .markdown-editor-wrap .editor-toolbar, .tox .tox-toolbar, .tox .tox-toolbar__primary,
.tox .tox-menubar, .tox .tox-statusbar, .tox .tox-editor-header {
  background-color: var(--oiv-panel) !important;
  border-color: var(--oiv-line) !important;
}

/* ---------- Footer (like the /status/ foot, with columns) ---------- */
footer:not(.oiv-footer) { background: transparent; }
.oiv-footer {
  background: var(--oiv-panel);
  color: var(--oiv-fg);
  border-top: 1px solid var(--oiv-line);
  margin-top: 48px;
  padding: 40px 32px 24px;
  font-size: .9375rem;
}
.oiv-footer-inner { max-width: 1400px; margin: 0 auto; display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 880px) { .oiv-footer-inner { grid-template-columns: 1fr 1fr; } .oiv-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .oiv-footer { padding-inline: 16px; } .oiv-footer-inner { grid-template-columns: 1fr; } }
.oiv-footer-logo { display: inline-block; }
.oiv-footer-logo .oiv-wordmark { height: 26px; width: auto; display: block; }
.oiv-footer-brand p { color: var(--oiv-muted); margin: 14px 0 0; max-width: 42ch; }
.oiv-footer h2 {
  font-family: var(--oiv-mono);
  font-size: .75rem; line-height: 1.25rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--oiv-muted); margin: 0 0 12px;
}
html[lang^="ar"] .oiv-footer h2 { letter-spacing: 0; font-family: var(--font-heading); }
.oiv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oiv-footer a { color: var(--oiv-fg); text-decoration: none; }
.oiv-footer a:hover { text-decoration: underline; }
.oiv-footer-bottom {
  max-width: 1400px; margin: 32px auto 0; padding-top: 16px;
  border-top: 1px solid var(--oiv-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  color: var(--oiv-muted); font-size: .85rem;
}
.oiv-footer-bottom p { margin: 0; max-width: 80ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}