/* mosaic IT GmbH — BookStack Corporate Theme */

:root {
  --color-primary: #0640AB;
  --color-primary-light: rgba(6, 64, 171, 0.12);
  --mos-deep: #071B44;
  --mos-blue: #0640AB;
  --mos-orange: #FF9900;
  --mos-grey: #82868B;
  --mos-light: #F2F4F8;
  --mos-ink: #1A2437;
}

body {
  font-family: "Microsoft PhagsPa", "Segoe UI", Arial, sans-serif;
  color: var(--mos-ink);
}


/* Remove unnecessary pages - moved to /layouts/parts/custom-head.blade.php */
/* a[href$="/page/gate"] { display: none !important; } */
/* a[href$="/page/sync-state"] { display: none !important; } */

/* Hide Downloads everywhere - Made it's own header in layouts/parts/header-links-start.blade.php */
/* a[href$="/books/downloads"] { display: none !important; }*/

/* Light Mode Entiti Override*/
:root {
  --color-book: #0640AB;
  --color-bookshelf: #071B44;
  --color-chapter: #82868B;
  --color-page: #FF9900;
}

/* Header: dark-blue gradient, white nav */
header#header {
  background: linear-gradient(120deg, #071B44, #0B2A66 55%, #0640AB);
  box-shadow: none;
}
header#header .grid,
header#header a {
  color: #fff;
}

/* Surfaces */
body,
.content-wrap {
  background: var(--mos-light);
}
.card,
.content-wrap.card,
.grid-card {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(7, 27, 68, 0.08);
}
.content-wrap.card {
  background: #fff;
}
.grid-card {
  overflow: hidden;
  transition: box-shadow 0.12s ease;
}
.grid-card:hover {
  box-shadow: 0 4px 14px rgba(7, 27, 68, 0.14);
}

/* Headings */
.page-content h1,
.page-content h2 {
  color: var(--mos-deep);
}
.page-content h3 {
  color: var(--mos-blue);
}

/* Buttons: orange accent (sparingly), rounded */
.button {
  background: var(--mos-orange);
  color: var(--mos-deep);
  border-radius: 8px;
  border: none;
  font-weight: bold;
}
.button.outline {
  background: transparent;
  color: var(--mos-blue);
  border: 1px solid var(--mos-blue);
}

/* Links */
a {
  color: var(--mos-blue);
}

/* Tables: dark-blue header, zebra stripes */
.page-content table th {
  background: var(--mos-deep);
  color: #fff;
  border-color: var(--mos-deep);
}
.page-content table tr:nth-child(even) td {
  background: var(--mos-light);
}
.page-content table td {
  border-color: #D8DEE9;
}

/* Sidebar / navigation */
.sidebar .active > a,
.book-tree .active {
  color: var(--mos-blue);
}

/* Tags & secondary text */
.tag-item {
  border-radius: 999px;
}
.text-muted,
.entity-item-snippet {
  color: var(--mos-grey);
}

/* Hide the downloads gate page from listings */
a[href$="/page/gate"] {
  display: none !important;
}

.dropdown-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(7, 27, 68, 0.18);
}
.dropdown-menu a,
.dropdown-menu button {
  color: #1A2437 !important;
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: #F2F4F8;
}

/* ===== mosaic dark mode ===== */
html.dark-mode {
  --color-book: #7FA4E8;
  --color-bookshelf: #FF9900;
  --color-chapter: #8FA3C8;
  --color-page: #C7D3EE;
}
html.dark-mode body,
html.dark-mode .tri-layout-container,
html.dark-mode .content-wrap {
  background: #050F28 !important;
  color: #C7D3EE;
}
html.dark-mode .card,
html.dark-mode .content-wrap.card,
html.dark-mode .grid-card {
  background: #0B2A66 !important;
  color: #C7D3EE;
}
html.dark-mode header#header {
  background: linear-gradient(120deg, #050F28, #071B44 55%, #0B2A66) !important;
}
html.dark-mode h1, html.dark-mode h2,
html.dark-mode h3, html.dark-mode h4 {
  color: #fff;
}
html.dark-mode a { color: #7FA4E8; }
html.dark-mode .button { background: #FF9900; color: #071B44; }
html.dark-mode .page-content table th { background: #050F28 !important; color: #fff; }
html.dark-mode .page-content table tr:nth-child(even) td { background: #0B2A66 !important; }
html.dark-mode .page-content table td { border-color: #123268; }
html.dark-mode .text-muted,
html.dark-mode .entity-item-snippet { color: #8FA3C8; }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea {
  background: #0B2A66 !important; color: #C7D3EE; border-color: #123268;
}
/* dark mode: readable buttons */
html.dark-mode .button {
  background: #FF9900 !important;
  color: #071B44 !important;
}
html.dark-mode .button:hover,
html.dark-mode .button:focus {
  background: #0640AB !important;
  color: #ffffff !important;
}


/* dark mode: dropdown menus */
html.dark-mode .dropdown-menu {
  background: #0B2A66;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html.dark-mode .dropdown-menu a,
html.dark-mode .dropdown-menu button,
html.dark-mode .dropdown-menu .icon-item {
  color: #C7D3EE !important;
}
html.dark-mode .dropdown-menu a:hover,
html.dark-mode .dropdown-menu button:hover {
  background: #0640AB;
  color: #fff !important;
}
html.dark-mode .dropdown-menu svg {
  fill: #C7D3EE;
}
/* dark mode: header search */
html.dark-mode header#header input[type="text"],
html.dark-mode header#header .search-box input {
  color: #fff !important;
}
html.dark-mode header#header .search-box input::placeholder {
  color: #8FA3C8;
}
/* sidebar dark-mode toggle: style the form-wrapped button like icon-list items */
.actions form button.icon-list-item {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
/* listing-page dark-mode toggle: compact inline button */
.grid.half form[action*="toggle-dark-mode"] {
  display: inline-block;
}
.grid.half form[action*="toggle-dark-mode"] button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}
/* homepage portal hero: force light text over theme heading colors */
.mkb-hero, .mkb-hero h1, .mkb-hero h2, .mkb-hero a { color: #fff; }
html.dark-mode .mkb-hero h1 { color: #fff; }
/* portal homepage: dark sections keep light text in any mode */
.mkb-dark, .mkb-dark h1, .mkb-dark h2, .mkb-dark h3 { color: #fff !important; }
.mkb-dark p, .mkb-dark span { color: #C7D3EE; }
.mkb-dark a { color: #fff; text-decoration: underline; }
/* portal homepage: uniform page background */
body.tri-layout, .mkb-portal-page body { background: #F2F4F8; }
/* portal homepage: kill the white/grey band — one background everywhere */
html, body {
  background: #F2F4F8 !important;
}
/* ===== portal homepage: dark mode ===== */
html.dark-mode, html.dark-mode body {
  background: #050F28 !important;
}
/* light content sections keep readable dark-mode surfaces */
html.dark-mode .mkb-card,
html.dark-mode section[style*="background:#F2F4F8"],
html.dark-mode div[style*="background:#F2F4F8"],
html.dark-mode a[style*="background:#fff"],
html.dark-mode div[style*="background:#fff"] {
  background: #0B2A66 !important;
  color: #C7D3EE !important;
}
/* headings outside dark sections */
html.dark-mode section h2,
html.dark-mode section h3 {
  color: #fff !important;
}
html.dark-mode section p,
html.dark-mode section li {
  color: #C7D3EE;
}
/* keep the explicitly dark sections as designed */
html.dark-mode .mkb-dark, html.dark-mode .mkb-dark h1,
html.dark-mode .mkb-dark h2, html.dark-mode .mkb-dark h3 {
  color: #fff !important;
}
/* portal dark mode: body text inside cards must be light — beat inline styles */
html.dark-mode section p,
html.dark-mode section li,
html.dark-mode section span,
html.dark-mode div[style*="background"] p,
html.dark-mode a[style*="background"] p {
  color: #C7D3EE !important;
}
html.dark-mode section a:not(.mkb-cta-primary):not(.mkb-cta-secondary) {
  color: #7FA4E8 !important;
}
/* portal dark mode: refinements */
/* section-number labels (01/02/03) — the blue ones vanish on dark */
html.dark-mode section span[style*="letter-spacing"],
html.dark-mode section div[style*="letter-spacing"] {
  color: #7FA4E8 !important;
}
/* inline code chips: dark chip, light text (was light chip glaring) */
html.dark-mode section code,
html.dark-mode section span[style*="background"] {
  background: #050F28 !important;
  color: #FF9900 !important;
  border-radius: 4px;
  padding: 1px 5px;
}
/* heading vs body contrast: headings pure white + weight, body dimmer */
html.dark-mode section h2 { color: #fff !important; font-weight: 700; }
html.dark-mode section h3 { color: #fff !important; font-weight: 600; }
html.dark-mode section p,
html.dark-mode section li { color: #9FB0D0 !important; }