/* ================================================================
   Loopin Theme — BookStack Dark Override  v3
   Palette  : Apple macOS Dark Mode  (#1c1c1e body, not pitch-black)
   Reference : landing/index.blade.php design system
   Typography: SF Pro Display, tight letter-spacing
   Cards     : 20px radius, 1px border, no shadow, hover translateY
   Header    : rgba(28,28,30,0.85) + blur, frosted-glass
   ================================================================ */

/* ===== Design Tokens ===== */
:root {
  /* Apple macOS dark backgrounds */
  --lp-bg:    #1c1c1e;   /* primary   — System Background  */
  --lp-bg2:   #2c2c2e;   /* secondary — Secondary System Bg */
  --lp-bg3:   #3a3a3c;   /* tertiary  — Tertiary System Bg  */
  --lp-bg4:   #48484a;   /* quaternary */

  /* borders */
  --lp-border:        rgba(255, 255, 255, 0.10);
  --lp-border-hover:  rgba(255, 255, 255, 0.22);

  /* text — Apple label colours */
  --lp-text:    #f5f5f7;   /* primary label   */
  --lp-text2:   #aeaeb2;   /* secondary label */
  --lp-text3:   #6e6e73;   /* tertiary / muted */

  /* accent — matches landing --lp-accent */
  --lp-accent:  #677eea;

  /* radius */
  --lp-radius-l:   20px;
  --lp-radius:     14px;
  --lp-radius-s:   10px;
  --lp-radius-xs:   8px;

  /* transition */
  --lp-trans: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Global Base ===== */
html, body {
  background-color: var(--lp-bg) !important;
  color: var(--lp-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Scrollbar ===== */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* ===== Typography ===== */
h1, h2, h3, h4, h6 {
  color: var(--lp-text) !important;
  letter-spacing: -0.02em;
}
h5 {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--lp-text3) !important;
  fill: var(--lp-text3) !important;
}
p, li, td, th, label { color: var(--lp-text); }
.text-muted, .text-muted * {
  color: var(--lp-text2) !important;
  fill: var(--lp-text2) !important;
}
small, .text-small { color: var(--lp-text3) !important; }
a:hover { text-decoration: none !important; }

/* ===== Header — frosted glass (macOS dark) ===== */
header#header,
header#header.primary-background {
  background: rgba(28, 28, 30, 0.85) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--lp-border) !important;
  box-shadow: none !important;
}
header .search-box input {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--lp-border) !important;
  border-radius: 980px !important;
  color: var(--lp-text) !important;
}
header .search-box input::placeholder { color: var(--lp-text3); }
header .search-box button { color: var(--lp-text2); }
.global-search-suggestions.card {
  background: var(--lp-bg2) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: var(--lp-radius) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ===== Main Layout ===== */
.tri-layout-left, .tri-layout-right, .tri-layout-middle, #content {
  background: var(--lp-bg) !important;
}
.tri-layout-left-contents, .tri-layout-right-contents { background: transparent !important; }
.content-wrap { background: var(--lp-bg) !important; }

/* ===== Cards ===== */
.card {
  background-color: var(--lp-bg2) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: var(--lp-radius) !important;
  box-shadow: none !important;
  color: var(--lp-text) !important;
  transition: border-color var(--lp-trans), transform var(--lp-trans) !important;
}
.card:hover {
  border-color: var(--lp-border-hover) !important;
  transform: translateY(-2px) !important;
}
.card-title, .card-title * { color: var(--lp-text2) !important; fill: var(--lp-text2) !important; }
.card-footer-link { border-color: var(--lp-border) !important; color: var(--lp-text2) !important; }
.card-footer-link:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--lp-text) !important;
}

/* ===== Grid Cards (shelves / books) ===== */
.grid-card {
  background: var(--lp-bg2) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: var(--lp-radius-l) !important;
  box-shadow: none !important;
  transition: border-color var(--lp-trans), transform var(--lp-trans) !important;
  text-decoration: none !important;
}
.grid-card:hover {
  border-color: var(--lp-border-hover) !important;
  transform: translateY(-2px) !important;
}
.grid-card .grid-card-content h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--lp-text) !important;
}
.grid-card .grid-card-content p { color: var(--lp-text2) !important; }
.grid-card .grid-card-footer,
.grid-card .grid-card-footer * { color: var(--lp-text3) !important; fill: var(--lp-text3) !important; }
.featured-image-container-wrap {
  border-radius: calc(var(--lp-radius-l) - 1px) calc(var(--lp-radius-l) - 1px) 0 0 !important;
  overflow: hidden !important;
}
.featured-image-container { background-color: var(--lp-bg3) !important; }

/* ===== Breadcrumbs ===== */
.breadcrumbs, .breadcrumbs .breadcrumb-inner { background: transparent !important; }
.breadcrumbs a, .breadcrumbs span, .breadcrumbs svg {
  color: var(--lp-text2) !important;
  fill: var(--lp-text2) !important;
}
.breadcrumbs svg { opacity: 0.6; }

/* ===== Entity List (sidebar compact) ===== */
.entity-list-item {
  border-bottom: 1px solid var(--lp-border) !important;
  background: transparent !important;
  transition: background 0.15s !important;
}
.entity-list-item:hover { background: rgba(255, 255, 255, 0.04) !important; }
.entity-list-item h4, .entity-list-item h5 {
  color: var(--lp-text) !important;
  text-transform: none !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}
.entity-list-item a { color: var(--lp-text) !important; }
.entity-list-item p, .entity-item-snippet { color: var(--lp-text2) !important; }

/* ===== Icon List (sidebar actions) ===== */
.icon-list .icon-list-item {
  color: var(--lp-text2) !important;
  fill: var(--lp-text2) !important;
  border-radius: var(--lp-radius-s) !important;
  padding: 7px 10px !important;
  transition: background 0.15s, color 0.15s !important;
}
.icon-list .icon-list-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--lp-text) !important;
  fill: var(--lp-text) !important;
}
.icon-list .icon-list-item span,
.icon-list .icon-list-item svg { color: inherit !important; fill: inherit !important; }

/* ===== HR Dividers ===== */
hr { border-color: var(--lp-border) !important; border-bottom: none !important; }
hr.primary-background {
  background: rgba(255, 255, 255, 0.08) !important;
  height: 1px !important;
  border: none !important;
}

/* ===== Page Content (article body) ===== */
.page-content { color: var(--lp-text) !important; }
.page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6 {
  color: var(--lp-text) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
.page-content p, .page-content li { color: var(--lp-text); }
.page-content a { color: var(--lp-accent) !important; }
.page-content a:hover { color: #8fa1f0 !important; }
.page-content blockquote {
  border-left-color: rgba(103, 126, 234, 0.5) !important;
  background: rgba(103, 126, 234, 0.08) !important;
  color: var(--lp-text2) !important;
  border-radius: 0 var(--lp-radius-xs) var(--lp-radius-xs) 0 !important;
}
.page-content code {
  background: var(--lp-bg3) !important;
  color: #c9d1d9 !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 5px !important;
}
.page-content pre {
  background: var(--lp-bg3) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: var(--lp-radius-xs) !important;
}
.page-content table th {
  background: var(--lp-bg3) !important;
  color: var(--lp-text) !important;
  border-color: var(--lp-border) !important;
}
.page-content table td { border-color: var(--lp-border) !important; color: var(--lp-text) !important; }
.page-content table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03) !important; }

/* ===== Book / Shelf Description ===== */
.book-content .text-muted, .description-content { color: var(--lp-text2) !important; }

/* ===== Dropdown Menus ===== */
.dropdown-container ul, .dropdown-menu {
  background: var(--lp-bg2) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: var(--lp-radius) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
.dropdown-container ul li a, .dropdown-menu li a { color: var(--lp-text2) !important; }
.dropdown-container ul li a:hover, .dropdown-menu li a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--lp-text) !important;
}

/* ===== Tags ===== */
.tag-item.primary-background-light {
  background: rgba(103, 126, 234, 0.14) !important;
  border: 1px solid rgba(103, 126, 234, 0.28) !important;
  color: var(--lp-text2) !important;
  border-radius: var(--lp-radius-s) !important;
}

/* ===== Notifications ===== */
.notification {
  background: var(--lp-bg2) !important;
  border: 1px solid var(--lp-border) !important;
  color: var(--lp-text) !important;
  border-radius: var(--lp-radius) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ===== Forms ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  background: var(--lp-bg3) !important;
  border-color: var(--lp-border) !important;
  color: var(--lp-text) !important;
  border-radius: var(--lp-radius-xs) !important;
}
input::placeholder, textarea::placeholder { color: var(--lp-text3) !important; }

/* ===== Footer ===== */
footer {
  background: var(--lp-bg) !important;
  border-top: 1px solid var(--lp-border) !important;
}
footer * { color: var(--lp-text3) !important; }

/* ===== Tint override ===== */
.primary-background-light { background: rgba(103, 126, 234, 0.1) !important; }

/* ===== Rounded corners — global override ===== */

/* Buttons */
.button, button:not(.mobile-menu-toggle),
[type="button"], [type="submit"], [type="reset"],
.btn, .btn-default, .btn-primary, .btn-danger, .btn-warning,
a.button { border-radius: var(--lp-radius-s) !important; }
.button.icon-only, .round { border-radius: 50% !important; }

/* Additional input types */
input[type="number"], input[type="url"], input[type="tel"],
input[type="date"], input[type="time"] {
  border-radius: var(--lp-radius-xs) !important;
}

/* Callout / alert blocks */
.callout, .notification-callout,
.alert, .alert-info, .alert-warning, .alert-danger, .alert-success {
  border-radius: var(--lp-radius-s) !important;
}

/* Code blocks (global) */
pre  { border-radius: var(--lp-radius-s) !important; }
code { border-radius: 5px !important; }
.code-base { border-radius: var(--lp-radius-s) !important; }

/* Tabs */
.tabs-container .tab-item,
.tabs-wrap .tab-item {
  border-radius: var(--lp-radius-xs) var(--lp-radius-xs) 0 0 !important;
}

/* Sidebar panels & floating toolboxes */
.panel, .floating-toolbox { border-radius: var(--lp-radius) !important; }

/* Tag chips */
.tag-item { border-radius: var(--lp-radius-s) !important; }

/* Avatar — Apple-style rounded square */
.avatar { border-radius: 8px !important; }

/* Labels / status badges */
.label, .label-info, .label-success, .label-warning, .label-danger {
  border-radius: var(--lp-radius-s) !important;
}

/* Modal / popup dialogs */
.popup-body, [overlay] .popup-inner { border-radius: var(--lp-radius) !important; }

/* Entity list item image/icon strip */
.entity-list-item-image { border-radius: var(--lp-radius-xs) !important; }

/* Wysiwyg area */
.wysiwyg-area { border-radius: var(--lp-radius-s) !important; }

/* ===== Print ===== */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
}