/*
 * ============================================================
 * ARISA FORUM — overrides.css  (Layer 3)
 * Targeted surgical fixes on SMF/Bootstrap legacy selectors.
 *
 * RULES FOR THIS FILE ONLY:
 *   - !important is ALLOWED here (SMF specificity wars require it)
 *   - Touch only what index.css (Layer 1) still breaks
 *   - Every rule must have a comment explaining WHY
 * ============================================================
 */

/* -------------------------------------------------------
   SMF TABLE LAYOUT RESETS
   SMF's .table_list uses <table> for forum boards.
   We keep the table but reset default browser table styles.
   ------------------------------------------------------- */

.table_list {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

.table_list tbody,
.table_list thead {
    background: transparent !important;
}

/* Remove legacy tr background overrides from index.css */
.table_list tr.windowbg,
.table_list tr.windowbg2 {
    background: transparent !important;
}

/* -------------------------------------------------------
   BOOTSTRAP PANEL / WELL CLEANUP
   Bootstrap panels leak border/bg into SMF wrappers.
   ------------------------------------------------------- */

.panel,
.panel-default,
.panel-body,
.panel-heading,
.panel-footer,
.well {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* -------------------------------------------------------
   SMF BUTTON STRIP
   .buttonlist is SMF's action button container.
   Reset Bootstrap btn classes, apply our token system.
   ------------------------------------------------------- */

.buttonlist ul,
.buttonlist .nav-pills {
    display: inline-flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.buttonlist a,
.buttonlist .nav-pills>li>a,
.button_reset,
input[type="button"] {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: 999px !important;
    color: var(--c-text-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    text-shadow: none !important;
    transition: background 120ms ease, color 120ms ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.buttonlist a:hover,
.button_reset:hover,
input[type="button"]:hover {
    background: var(--c-accent-dim) !important;
    color: var(--c-accent) !important;
    border-color: rgba(41, 196, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}

.buttonlist a.active,
.buttonlist a[href*="reply"] {
    background: var(--c-accent) !important;
    color: #05101a !important;
    border-color: var(--c-accent) !important;
    font-weight: 700 !important;
}

/* -------------------------------------------------------
   SMF INPUT OVERRIDES
   index.css has broad input resets that break our form styles.
   ------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
    background: var(--c-bg-raise) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: var(--r-sm) !important;
    color: var(--c-text) !important;
    font-family: var(--font-base) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px rgba(41, 196, 255, 0.15) !important;
    outline: none !important;
}

/* -------------------------------------------------------
   SMF CAT_BAR / TITLE_BAR — force transparent
   Legacy index.css assigns concrete bg colors to these.
   ------------------------------------------------------- */

div.cat_bar,
div.title_bar,
h3.catbg,
h4.titlebg,
.titlebg2 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------
   SMF .windowbg / .windowbg2 LEGACY BG
   The old index.css sets explicit dark backgrounds.
   We let theme.css handle these but need to kill the
   conflicting gradient from the old layer.
   ------------------------------------------------------- */

.windowbg,
.windowbg2 {
    background: var(--c-bg-raise) !important;
    background-image: none !important;
}

/* -------------------------------------------------------
   LASTPOST CELL — CLEAR FLOAT LAYOUT
   SMF uses float on avatar in the lastpost cell.
   Undo that so our flex layout works.
   ------------------------------------------------------- */

td.lastpost img,
td.lastpost img.avatar,
.table_list td.lastpost img {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* -------------------------------------------------------
   NAVBAR COLLAPSE — MOBILE DISPLAY
   Bootstrap's collapse class needs z-index boost
   so it appears above post content on mobile.
   ------------------------------------------------------- */

.navbar-collapse.in {
    z-index: var(--z-dropdown) !important;
}

/* -------------------------------------------------------
   DROPDOWN ANIMATION — Kill Bootstrap bounceIn
   bounceIn on dropdown feels cheap; use our fade instead.
   ------------------------------------------------------- */

.dropdown-menu.animated {
    animation: none !important;
}

.dropdown-menu {
    animation: arisa-fade-in 140ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu {
        animation: none !important;
    }
}

/* -------------------------------------------------------
   SCEDITOR CONTAINER — Keep dark theme
   SCEditor injects its own iframe; we need !important
   to push bg into the container wrapper.
   ------------------------------------------------------- */

.sceditor-container,
.sceditor-container iframe {
    background: var(--c-bg-raise) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: var(--r-sm) !important;
    color: var(--c-text) !important;
}

.sceditor-toolbar {
    background: linear-gradient(180deg, rgba(16, 26, 44, 0.96) 0%, rgba(10, 18, 32, 0.96) 100%) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: 6px !important;
}

.sceditor-toolbar .sceditor-group {
    background: rgba(9, 18, 32, 0.75) !important;
    border: 1px solid rgba(45, 94, 143, 0.45) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    margin: 0 6px 6px 0 !important;
    padding: 3px !important;
}

.sceditor-toolbar .sceditor-button {
    background: rgba(11, 21, 36, 0.9) !important;
    border: 1px solid rgba(58, 125, 190, 0.35) !important;
    border-radius: 8px !important;
    color: #cfe3ff !important;
    margin: 2px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Kill legacy sprite icons from default jquery.sceditor.css */
.sceditor-toolbar .sceditor-button div {
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
}

/* Render semantic FA icons directly on SCEditor buttons */
.sceditor-toolbar .sceditor-button::before {
    font-family: FontAwesome !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #8fd8ff !important;
    content: "\f111" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    text-align: center !important;
    pointer-events: none !important;
}

.sceditor-button-bold::before { content: "\f032" !important; }
.sceditor-button-italic::before { content: "\f033" !important; }
.sceditor-button-underline::before { content: "\f0cd" !important; }
.sceditor-button-strike::before { content: "\f0cc" !important; }
.sceditor-button-left::before { content: "\f036" !important; }
.sceditor-button-center::before { content: "\f037" !important; }
.sceditor-button-right::before { content: "\f038" !important; }
.sceditor-button-justify::before { content: "\f039" !important; }
.sceditor-button-font::before { content: "\f031" !important; }
.sceditor-button-size::before { content: "\f034" !important; }
.sceditor-button-color::before { content: "\f1fc" !important; }
.sceditor-button-removeformat::before { content: "\f12d" !important; }
.sceditor-button-link::before { content: "\f0c1" !important; }
.sceditor-button-unlink::before { content: "\f127" !important; }
.sceditor-button-email::before { content: "\f0e0" !important; }
.sceditor-button-image::before { content: "\f03e" !important; }
.sceditor-button-code::before { content: "\f121" !important; }
.sceditor-button-quote::before { content: "\f10e" !important; }
.sceditor-button-bulletlist::before { content: "\f0ca" !important; }
.sceditor-button-orderedlist::before { content: "\f0cb" !important; }
.sceditor-button-table::before { content: "\f0ce" !important; }
.sceditor-button-youtube::before { content: "\f16a" !important; }
.sceditor-button-superscript::before { content: "\f12b" !important; }
.sceditor-button-subscript::before { content: "\f12c" !important; }
.sceditor-button-horizontalrule::before { content: "\f068" !important; }
.sceditor-button-source::before { content: "\f1c9" !important; }
.sceditor-button-maximize::before { content: "\f065" !important; }
.sceditor-button-emoticon::before { content: "\f118" !important; }
.sceditor-button-rtl::before { content: "\f074" !important; }
.sceditor-button-ltr::before { content: "\f07e" !important; }
.sceditor-button-tex::before { content: "\f12b" !important; }
.sceditor-button-tt::before { content: "\f120" !important; }
.sceditor-button-spoiler::before { content: "\f070" !important; }
.sceditor-button-pre::before { content: "\f1c9" !important; }
.sceditor-button-floatleft::before { content: "\f036" !important; }
.sceditor-button-floatright::before { content: "\f038" !important; }
.sceditor-button-date::before { content: "\f073" !important; }
.sceditor-button-time::before { content: "\f017" !important; }
.sceditor-button-cut::before { content: "\f0c4" !important; }
.sceditor-button-copy::before { content: "\f0c5" !important; }
.sceditor-button-pastetext::before,
.sceditor-button-paste::before { content: "\f0ea" !important; }
.sceditor-button-indent::before { content: "\f03c" !important; }
.sceditor-button-outdent::before { content: "\f03b" !important; }
.sceditor-button-print::before { content: "\f02f" !important; }
.sceditor-button-format::before { content: "\f15c" !important; }
.sceditor-button-flash::before { content: "\f0e7" !important; }
.sceditor-button-disabled::before { opacity: .45 !important; }

.sceditor-button:hover::before,
.sceditor-button.active::before,
.sceditor-button:focus::before {
    color: #ffffff !important;
}

/* If JS injected fallback icons exist, hide them to avoid duplicates. */
.sceditor-toolbar .sceditor-button .arisa-sceditor-fa {
    display: none !important;
}

/* SCEditor may render SVG icons; hide them so our mapped icons are visible. */
.sceditor-toolbar .sceditor-button svg {
    display: none !important;
}

.sceditor-button:hover {
    background: rgba(26, 54, 84, 0.95) !important;
    border-color: rgba(90, 173, 255, 0.72) !important;
    color: #ffffff !important;
}

.sceditor-button.active,
.sceditor-button:focus {
    background: rgba(33, 88, 139, 0.95) !important;
    border-color: rgba(117, 197, 255, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(73, 162, 231, 0.2) !important;
}

/* -------------------------------------------------------
   COLLAPSED INFO CENTER — JS toggle compatibility
   The legacy upshrinkHeaderIC element needs overflow
   hidden when collapsed.
   ------------------------------------------------------- */

#upshrinkHeaderIC[style*="display: none"],
#upshrinkHeaderIC[style*="display:none"] {
    overflow: hidden !important;
}

/* -------------------------------------------------------
   AVATAR LAZY LOAD — prevent layout shift
   avatars must have fixed dimensions; PHP templates
   output them but some old markup doesn't.
   ------------------------------------------------------- */

.avatar,
img.avatar {
    display: block !important;
    contain: strict !important;
}

/* -------------------------------------------------------
   ICON ALIGNMENT — fa-fw is mandatory in new markup;
   Legacy markup without fa-fw needs fallback alignment.
   ------------------------------------------------------- */

.fa:not(.fa-fw) {
    min-width: 1em;
    text-align: center;
}

/* -------------------------------------------------------
   SEARCH FORM — Prevent index.css max-width conflicts
   ------------------------------------------------------- */

#searchform form,
form#registration,
form#postmodify,
form[name="postForm"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* -------------------------------------------------------
   QUOTE / CODE HEADER inline with codeheader class
   Legacy index.css sets a different bg on these; override.
   ------------------------------------------------------- */

.codeheader,
.quoteheader {
    background: rgba(41, 196, 255, 0.06) !important;
    color: var(--c-accent) !important;
    border: 1px solid rgba(41, 196, 255, 0.12) !important;
    border-bottom: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    padding: 5px 12px !important;
}

/* -------------------------------------------------------
   HELP POPUP
   ------------------------------------------------------- */

#help_popup {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: var(--r-md) !important;
    color: var(--c-text) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================================
   HEADER v4 REWRITE — Kills all old absolute-position nav rules
   The new structure is: #header > .arisa-header-inner > [#logo | .arisa-topnav > [.arisa-nav-left | .arisa-nav-right]]
   ============================================================ */

/* Reset header — no inherited height, let content define it */
#header {
  background: rgba(10, 14, 26, 1) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(41, 196, 255, 0.12) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  height: auto !important;
  width: 100% !important;
}

/* Remove any overlay / background-image from inside header */
#header .overlay,
#header > div:not(.arisa-header-inner) { display: none !important; }

/* Single flex row container */
.arisa-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 56px !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Logo — small, left-aligned */
#logo {
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-height: unset !important;
}

#logo a {
  display: block !important;
  width: 64px !important;
  height: 40px !important;
  background-image: url(../images/logo.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

#logo a:hover {
  transform: none !important;
  filter: none !important;
  opacity: 0.85 !important;
}

/* The top nav — flex row filling remaining space */
.arisa-topnav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
  min-width: 0 !important;
  gap: 8px !important;
}

/* Kill old absolute positioning on the nav groups */
.arisa-nav-left {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
}

.arisa-nav-right {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

/* Kill the old bootstrap navbar completely inside header */
.arisa-topnav .navbar,
.arisa-topnav .navbar-default,
.arisa-topnav .navbar-collapse,
.arisa-topnav ul.navbar-nav { display: none !important; }

/* Mobile: stack header vertically */
@media (max-width: 767px) {
  .arisa-header-inner {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 8px 16px !important;
    gap: 8px !important;
  }
  .arisa-topnav {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .arisa-nav-left {
    display: none !important;
  }
  .arisa-nav-right {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}