/* ═══════════════════════════════════════════════════════════
   DEXA Titanium Design System for BookStack v5
   app-color=#3d4148 (grau) eliminiert alles Rosa
   CI-Rot nur via CSS für Links, Buttons, Akzente
   ═══════════════════════════════════════════════════════════ */

:root {
  --ti-bg: #F8F9FA;
  --ti-fg: #212529;
  --ti-card: #FFFFFF;
  --ti-muted: #E9ECEF;
  --ti-border: #DEE2E6;
  --ti-red: #e1242c;
  --ti-bar: #B0B3B8;
  --ti-secondary: #787882;
  --ti-hover-bg: #f0f1f2;
  --ti-active-bg: #e8e9eb;
  --ti-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  --ti-accent-width: 5px;
}
.dark-mode {
  --ti-bg: #191B1F;
  --ti-fg: #E9ECEF;
  --ti-card: #282C34;
  --ti-muted: #343A40;
  --ti-border: #495057;
  --ti-red: #ff6b6f;
  --ti-bar: #555962;
  --ti-secondary: #B4B7BF;
  --ti-hover-bg: #2f333b;
  --ti-active-bg: #363a44;
}

/* ═══ Global ═══ */
body, html { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif !important; }
* { border-radius: 0 !important; }
body { background: var(--ti-bg) !important; color: var(--ti-fg) !important; }

/* ═══ Logo ═══ */
header .logo-image {
  content: url('/uploads/images/system/2026-02/dx-logo-black.png') !important;
  max-height: 40px !important; width: auto !important;
}
.dark-mode header .logo-image {
  content: url('/uploads/images/system/2026-02/dx-logo-wcolor.png') !important;
}

/* ═══ Header ═══ */
header#header, header#header.primary-background, header.primary-background {
  background: #fff !important;
  border-bottom: 1px solid var(--ti-border) !important;
  box-shadow: var(--ti-shadow) !important;
  color: var(--ti-fg) !important;
}
.dark-mode header#header, .dark-mode header.primary-background {
  background: #21252B !important;
}
/* Header: ALL elements dark text */
header#header a, header#header button,
header .links a, header .user-name, header .user-name > *,
header .mobile-menu-toggle, header .logo-text {
  color: var(--ti-fg) !important;
  /* fill removed */
}
header#header a:hover, header#header button:hover,
header .links a:hover { color: var(--ti-red) !important; fill: var(--ti-red) !important; }
header .logo:hover { background: rgba(0,0,0,.05) !important; }
.dark-mode header .logo:hover { background: rgba(255,255,255,.1) !important; }

/* ═══ Search: clean grey ═══ */
header .search-box input {
  background: var(--ti-muted) !important;
  border: 1px solid var(--ti-border) !important;
  color: var(--ti-fg) !important;
}
header .search-box input:focus,
header .search-box.search-active:focus-within input {
  background: var(--ti-card) !important;
  border-color: var(--ti-red) !important;
  color: var(--ti-fg) !important;
}
header .search-box input::placeholder { color: var(--ti-secondary) !important; opacity: 1 !important; }
#header-search-box-button, #header-search-box-button svg {
  color: var(--ti-secondary) !important;
  fill: var(--ti-secondary) !important;
}
header .search-box:focus-within #header-search-box-button,
header .search-box:focus-within #header-search-box-button svg {
  color: var(--ti-fg) !important;
  /* fill removed */
}
.global-search-suggestions { background: var(--ti-card) !important; }

/* ═══ primary-background-light: KILL all rosa ═══ */
.primary-background-light,
html.dark-mode .primary-background-light {
  background-color: var(--ti-hover-bg) !important;
  background: var(--ti-hover-bg) !important;
}
.primary-background-light .text-link,
.primary-background-light a { color: var(--ti-fg) !important; }

/* ═══ Dropdowns/Menus: grey hover ═══ */
.dropdown-menu { background: var(--ti-card) !important; border: 1px solid var(--ti-border) !important; }
.dropdown-menu .icon-item:hover, .dropdown-menu .text-item:hover,
.dropdown-menu .label-item:hover, .dropdown-menu .icon-item:focus,
.dropdown-menu .text-item:focus, .dropdown-menu .label-item:focus {
  background-color: var(--ti-hover-bg) !important;
  color: var(--ti-fg) !important;
}
.dropdown-menu a, .dropdown-menu button, .dropdown-menu .icon-item,
.dropdown-menu .text-item { color: var(--ti-fg) !important; }

/* ═══ Mobile header ═══ */
@media screen and (max-width: 1000px) {
  header .header-links { background: var(--ti-card) !important; }
  header .links a:hover, header .dropdown-container ul li a:hover,
  header .dropdown-container ul li button:hover {
    background: var(--ti-hover-bg) !important;
    color: var(--ti-fg) !important;
  }
  header .mobile-menu-toggle { border-color: var(--ti-border) !important; }
}

/* ═══ Sidebar ═══ */
.tri-layout-left, .tri-layout-left-contents, #sidebar,
.tri-layout-right, .tri-layout-right-contents { background: #F5F6F7 !important; }
.dark-mode .tri-layout-left, .dark-mode .tri-layout-left-contents,
.dark-mode .tri-layout-right, .dark-mode .tri-layout-right-contents { background: #1E2127 !important; }

.tri-layout-left a, .sidebar-page-list a, .page-list a, .book-tree a, .chapter-child-menu a {
  border-left: var(--ti-accent-width) solid transparent !important;
}
.tri-layout-left a:hover, .sidebar-page-list a:hover, .page-list a:hover,
.book-tree a:hover, .chapter-child-menu a:hover,
.book-tree .sidebar-page-list .entity-list-item:hover,
.book-tree .sidebar-page-list .chapter-contents-toggle:hover {
  border-left-color: var(--ti-bar) !important;
  background: var(--ti-hover-bg) !important;
}
.tri-layout-left a.selected, .tri-layout-left a.active,
.book-tree .sidebar-page-list .entity-list-item.selected {
  border-left-color: var(--ti-red) !important;
  background: var(--ti-active-bg) !important;
  font-weight: 600 !important;
}

/* ═══ Sidebar action list items with primary-background ═══ */
.tri-layout-right .icon-list-item.primary-background,
.tri-layout-left .icon-list-item.primary-background,
aside .icon-list-item.primary-background,
.entity-list-item.primary-background {
  background: var(--ti-muted) !important;
  color: var(--ti-fg) !important;
}
.tri-layout-right .icon-list-item.primary-background *,
aside .icon-list-item.primary-background * {
  color: var(--ti-fg) !important;
  /* fill removed */
}

/* ═══ Main ═══ */
.tri-layout-middle { background: var(--ti-bg) !important; }

/* ═══ Cards ═══ */
.card, .content-wrap { background: var(--ti-card) !important; border: 1px solid var(--ti-border) !important;
  border-left: var(--ti-accent-width) solid var(--ti-bar) !important; box-shadow: var(--ti-shadow) !important; }

/* ═══ Buttons: RED (override grey from app-color) ═══ */
button[type="submit"], .button:not(.outline):not(.text-button),
.button.primary, a.button.primary, input[type="submit"] {
  /* color: #fff !important; */
  
  /* font-weight: 600 !important; text-transform: uppercase !important; */
  /* letter-spacing: 0.05em !important; font-size: 0.8125rem !important; */
  font-family: 'Nunito', sans-serif !important;
}
.button:not(.outline):not(.text-button):hover { filter: brightness(0.9) !important; }

.button.outline {
  background: transparent !important; border: 1px solid var(--ti-border) !important;
  color: var(--ti-fg) !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important; font-size: 0.8125rem !important;
}
.button.outline:hover { background: var(--ti-hover-bg) !important; }

button.text-button, .text-button {
  background: transparent !important; border: none !important;
  text-transform: none !important; letter-spacing: normal !important;
  font-size: inherit !important; box-shadow: none !important;
}

/* Toolbar/editor buttons should not get red */
.editor-button, .editor-toolbar-main button,
.editor-toolbar button, .toolbar button {
  background: transparent !important;
  color: var(--ti-fg) !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
}
.editor-button:hover { background: var(--ti-hover-bg) !important; }

/* Card footer links */
.card-footer-link, button.card-footer-link {
  background: transparent !important;
  color: var(--ti-red) !important;
  border: none !important;
  border-top: 1px solid var(--ti-border) !important;
  text-transform: none !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
}
.card-footer-link:hover { background: var(--ti-hover-bg) !important; }

/* ═══ Inputs ═══ */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="search"], input[type="date"], textarea {
  background: var(--ti-card) !important; border: 1px solid var(--ti-border) !important;
  color: var(--ti-fg) !important; font-family: 'Nunito', sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ti-red) !important;
  outline: 1px solid var(--ti-red) !important;
}
select { background: var(--ti-card) !important; border: 1px solid var(--ti-border) !important; color: var(--ti-fg) !important; }

/* ═══ Tables ═══ */
table thead th { background: #3d4148 !important; color: #fff !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important; font-size: 0.75rem !important; }
table tbody tr:hover { background: var(--ti-hover-bg) !important; }

/* ═══ Links: RED ═══ */
a { color: var(--ti-red) !important; }
a:hover { color: #b81e24 !important; }
.dark-mode a { color: var(--ti-red) !important; }
.dark-mode a:hover { color: #ff9a9d !important; }

/* ═══ Headings ═══ */
h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', sans-serif !important; color: var(--ti-fg) !important; font-weight: 700 !important; }

/* ═══ Toolbars ═══ */
.toolbar, .page-edit-toolbar, .editor-toolbar-main {
  background: var(--ti-card) !important;
  border-bottom: 2px solid var(--ti-red) !important;
}

/* ═══ Popups ═══ */
.popup-body { background: var(--ti-card) !important; }
.popup-header, .editor-modal-header { background: #3d4148 !important; color: #fff !important; }
.popup-footer { background: var(--ti-muted) !important; }

/* ═══ Tags, Code, Notifications ═══ */
.tag-item { border-left: var(--ti-accent-width) solid var(--ti-bar) !important; background: var(--ti-muted) !important; }
code { background: var(--ti-muted) !important; border: 1px solid var(--ti-border) !important; }
pre { background: var(--ti-muted) !important; border-left: var(--ti-accent-width) solid var(--ti-bar) !important; }
pre code { border: none !important; background: transparent !important; }
.notification { border-left: var(--ti-accent-width) solid var(--ti-bar) !important; background: var(--ti-card) !important; }

/* ═══ Entity List ═══ */
.entity-list-item { border-left: var(--ti-accent-width) solid transparent !important; }
.entity-list-item:hover { border-left-color: var(--ti-bar) !important; }

/* ═══ Contained search ═══ */
.contained-search-box button { background: var(--ti-muted) !important; color: var(--ti-secondary) !important; }
.image-manager-filter-bar { background: var(--ti-card) !important; }
.image-manager-filter-bar-bg { background: var(--ti-muted) !important; opacity: 1 !important; }
.image-manager-filters button { background: var(--ti-card) !important; }

/* ═══ Settings ═══ */
.setting-list > div { border-bottom: 1px solid var(--ti-border) !important; }
nav.active-link-list a { color: var(--ti-fg) !important; border-left: var(--ti-accent-width) solid transparent !important; }
nav.active-link-list a:hover { border-left-color: var(--ti-bar) !important; background: var(--ti-hover-bg) !important; }
nav.active-link-list a.active { border-left-color: var(--ti-red) !important; background: var(--ti-active-bg) !important; font-weight: 600 !important; }

/* Tabs */
.tab-container [role=tablist] button[role=tab][aria-selected=true] {
  color: var(--ti-red) !important; border-bottom-color: var(--ti-red) !important;
}

/* ═══ Breadcrumbs ═══ */
.breadcrumbs .icon-list-item, .breadcrumbs a { color: var(--ti-secondary) !important; }
.breadcrumbs a:hover { color: var(--ti-red) !important; }

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ti-muted); }
::-webkit-scrollbar-thumb { background: var(--ti-secondary); }
::-webkit-scrollbar-thumb:hover { background: var(--ti-red); }

/* ═══ Editor ═══ */
#markdown-editor-input { background: var(--ti-card) !important; color: var(--ti-fg) !important; }

/* ═══ Grid cards: grey bg on empty cover ═══ */
.grid-card .featured-image-container,
.bg-book, .bg-bookshelf, .bg-chapter {
  background-color: var(--ti-muted) !important;
}

/* ═══ Generic ═══ */
footer { background: #F5F6F7 !important; border-top: 1px solid var(--ti-border) !important; }
.dark-mode footer { background: #1E2127 !important; }

/* ═══ Print ═══ */
@media print { * { border-left-width: 0 !important; box-shadow: none !important; } }

/* ═══ Sidebar: no fade ═══ */
.tri-layout-left-contents > *, .tri-layout-right-contents > *,
html.dark-mode .tri-layout-left-contents > *, html.dark-mode .tri-layout-right-contents > * {
  opacity: 1 !important;
  transition: none !important;
}

/* ═══ Dark mode: entity icons light grey ═══ */
.dark-mode .entity-list-item > span:first-child,
.dark-mode .icon-list-item > span:first-child,
.dark-mode .entity-list-item > span:first-child svg,
.dark-mode .icon-list-item > span:first-child svg,
.dark-mode .split-icon-list-item > a > .icon,
.dark-mode .split-icon-list-item > a > .icon svg,
.dark-mode .chapter-expansion > .icon,
.dark-mode .book-tree .entity-list-item .icon,
.dark-mode .book-tree .entity-list-item .icon svg,
.dark-mode .text-bookshelf, .dark-mode .text-book,
.dark-mode .text-chapter, .dark-mode .text-page,
.dark-mode .breadcrumbs .icon-list-item > span:first-child,
.dark-mode .breadcrumbs .icon-list-item > span:first-child svg {
  color: #9CA3AF !important;
  fill: #9CA3AF !important;
}
.dark-mode .entity-list-item > span:first-child:after,
.dark-mode .icon-list-item > span:first-child:after,
.dark-mode .split-icon-list-item > a > .icon:after,
.dark-mode .chapter-expansion > .icon:after,
.dark-mode .book-tree .entity-list-item .icon:after {
  background-color: #9CA3AF !important;
}

/* ═══ Book contents: no left border on chapter expansion ═══ */
.book-contents .entity-list-item + .chapter-expansion,
.book-contents .entity-list-item-children,
.book-contents > div {
  border-left: none !important;
}

/* ═══ Main content entity lists: no left border ═══ */
#main-content .entity-list-item,
#main-content .entity-list > div,
.tri-layout-middle .entity-list-item,
.content-wrap .entity-list-item {
  border-left: none !important;
}