/* Library CSS - simplified for Bootstrap 5 dark mode (FE-006) */
/* Most dark mode styling now handled by Bootstrap 5's data-bs-theme="dark" */

/* Custom cursor */
body,
a {
  cursor: url("/static/maplestory.cur"), default;
}

/* Orange accent color for active states and hovers */
a:hover {
  color: #ff9900 !important;
}

.navbar-nav > .nav-item.active > .nav-link,
.dropdown-item.active {
  color: #ff9900 !important;
}

/* Table styling - use Bootstrap 5 table-dark and table-striped classes */
/* Just add subtle border styling */
.table {
  --bs-table-border-color: #444;
}

.table th {
  text-align: center;
}

/* Pagination active state with orange accent */
.pagination .page-item.active .page-link {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #ff9900;
}

/* Nav tabs with orange active state */
.nav-tabs .nav-link.active {
  color: #ff9900 !important;
  background-color: var(--bs-dark-bg-subtle);
  border-color: var(--bs-border-color);
}

/* Card styling - subtle rounded corners */
.card {
  border-radius: 12px;
}

/* Fix white background on embedded images (object tags) */
/* The object tag loads PNG images which may have browser default backgrounds */
object {
  background: transparent !important;
  color-scheme: dark;
}

/* Library info-page utility classes (FE-014) */
.lib-header-radius {
  border-radius: 25px;
}

.lib-body-bg {
  background-color: #262626;
}

.lib-radius-15 {
  border-radius: 15px;
}

.valign-middle {
  vertical-align: middle;
}

.lib-accent-text {
  color: #ff9900;
}

.lib-small-text {
  font-size: 90%;
}

.lib-job-cell {
  border-radius: 15px;
  padding-left: 0px;
  padding-right: 0px;
}

.lib-img-scaled {
  width: 40%;
  image-rendering: pixelated;
}

/* LIB-031: global-search typeahead dropdown (partials/lib/search_suggest.html) */
.lib-suggest-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
}

.lib-suggest-list {
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.lib-suggest-loading {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1051;
  pointer-events: none;
  padding: 0.5rem 1rem;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.lib-suggest-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* LIB-045: landing page ("search is the page") -- hero shrinks to a banner
   so it never competes with the search box or the category chips for
   vertical space, on mobile least of all. LIB-050: that cap was applied at
   every width, undercutting the logo-as-headline presentation prod uses on
   desktop -- restore a large, centered hero at md+ where there's vertical
   room above the fold, keep the compact banner below it. */
.lib-hero-banner {
  max-height: 110px;
  width: auto;
}

@media (min-width: 768px) {
  .lib-hero-banner {
    max-height: 400px;
  }
}

/* LIB-054: on desktop, anchor the landing search bar to the bottom of a
   shared flex column with the hero so its position never jumps, and let
   the suggest results grow upward into the hero's space (rather than
   downward off the bottom of the viewport). Below 768px this is inert --
   mobile keeps the original hero-then-form-then-downward-dropdown flow. */
@media (min-width: 768px) {
  .lib-landing-search-area {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 460px;
  }

  /* visibility:hidden (not display:none) keeps the hero's flex slot intact
     so the form doesn't need a second reflow to re-anchor at the bottom. */
  .lib-landing-search-area:has(#lib-suggest-home:not(:empty)) .lib-hero-row {
    visibility: hidden;
  }

  /* #lib-suggest-home is unique to the landing form -- this cannot affect
     the navbar (#lib-suggest) or palette (#lib-suggest-palette) instances,
     which share the same .lib-suggest-dropdown/.lib-suggest-list classes
     and are out of scope for LIB-054. */
  #lib-suggest-home {
    top: auto;
    bottom: 100%;
  }

  /* Best match first in the DOM (unchanged, keyboard nav relies on it) but
     visually closest to the input it grows from. */
  #lib-suggest-home .lib-suggest-list {
    display: flex;
    flex-direction: column-reverse;
  }
}

.lib-chip {
  border-radius: 999px;
}

.lib-recent-card {
  min-width: 0;
  max-width: 160px;
}

.lib-recent-card .lib-recent-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* LIB-035: omnipresent search palette overlay. Hidden by default (the
   [hidden] attribute); lib_search_palette.js toggles it. */
.lib-search-palette {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1rem 0;
}

.lib-search-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.lib-search-palette-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.lib-search-trigger {
  display: inline-flex;
  align-items: center;
}

/* LIB-060: informational preview placed directly above/below its source.
   Placement measures only the active link and card (O(1)); pointer-events none
   guarantees the panel can never swallow a neighboring entity click. */
.lib-preview-card {
  position: fixed;
  z-index: 1055;
  width: fit-content;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100vh - 2rem));
  overflow: auto;
  pointer-events: none;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--bs-body-bg, #212529);
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.lib-preview-card-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.lib-preview-card .min-width-0 {
  min-width: 0;
}

.lib-preview-card-name {
  font-weight: 600;
}

.lib-preview-card-stats li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* LIB-044: browse-view result cards (<768px) and their sprite thumbnail --
   the per-type table partials this view replaces always led with an image
   column (monster_table_body.html et al.); the card layout carries the same
   thumbnail so the cutover doesn't drop it on mobile either. */
.lib-browse-card {
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg, rgba(255, 255, 255, 0.03));
  text-decoration: none;
  color: inherit;
}

.lib-browse-card-image {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
}

.lib-browse-card-name {
  color: var(--bs-link-color, #6ea8fe);
}

/* FE-051 sweep: quest dialogue renders game color code #r as an inline
   style="color: #e60000" span (services/library/quest.py) — 3.2:1 on the
   library's dark card background (data-bs-theme="dark"). Inline styles
   outrank normal author rules, so the readability lift needs !important. */
span[style*="color: #e60000"] {
  color: #ff6b6b !important;
}

/* BUG-079: relationship/related-entity sprites (item_relationships_row.html,
   related_entities_group.html) ship at their PNG natural size — boss-tier
   monsters run up to 923x582 — so cap them to the row height like
   .lib-browse-card-image above. */
.lib-obtain-source-img,
.lib-related-edge-img {
  max-height: 40px;
  max-width: 80px;
  flex: 0 0 auto;
  object-fit: contain;
}