/* === CalgaryN Modern Theme === */
:root {
  --bg: #000; --bg2: #0a0a0a; --bg3: #111;
  --text: #e5e7eb; --text2: #9ca3af; --text3: #6b7280;
  --link: #60a5fa; --link-hover: #93bbfd;
  --accent: #2563eb; --accent2: #1e3a5f;
  --border: #222; --border2: #333;
  --green: #22c55e; --red: #ef4444; --yellow: #eab308;
}

/* ============================================================
   DARK MODE STYLES (scoped to body.dark-mode)
   ============================================================ */
body.dark-mode, body.dark-mode td, body.dark-mode th,
html.dark-mode, html.dark-mode body {
  background-color: #000 !important;
  color: var(--text) !important;
}
body.dark-mode td.alt1, body.dark-mode td.alt2,
body.dark-mode div.alt1, body.dark-mode div.alt2,
body.dark-mode .alt1, body.dark-mode .alt2,
body.dark-mode .alt1Active, body.dark-mode .alt2Active {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body.dark-mode .page, body.dark-mode .panel,
body.dark-mode .panelsurround, body.dark-mode .tborder {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
body.dark-mode .tcat, body.dark-mode td.tcat {
  background: #111 !important;
  color: #ccc !important;
  border-color: var(--border) !important;
}
body.dark-mode .tcat a { color: #93bbfd !important; }
body.dark-mode .thead, body.dark-mode td.thead {
  background: var(--accent2) !important;
  color: #fff !important;
  border-color: var(--border) !important;
}
body.dark-mode .thead a { color: #fff !important; }
body.dark-mode .tfoot, body.dark-mode td.tfoot {
  background: #0a0a0a !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
}
body.dark-mode .tfoot a { color: var(--link) !important; }
body.dark-mode a:link, body.dark-mode a:visited { color: var(--link) !important; }
body.dark-mode a:hover { color: var(--link-hover) !important; }
body.dark-mode .tcat a:link, body.dark-mode .tcat a:visited { color: #93bbfd !important; }

/* Nav bar */
body.dark-mode .vbmenu_control, body.dark-mode td.vbmenu_control {
  background: var(--accent2) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}
body.dark-mode .vbmenu_control a:link,
body.dark-mode .vbmenu_control a:visited,
body.dark-mode .vbmenu_control a:hover { color: #fff !important; font-weight: 600 !important; }
body.dark-mode .vbmenu_control:hover { background: var(--accent) !important; }

/* Popup menus */
body.dark-mode .vbmenu_popup, body.dark-mode .vbmenu_popup td {
  background: #111 !important; color: var(--text) !important; border-color: var(--border2) !important;
}
body.dark-mode .vbmenu_popup .thead { background: var(--accent2) !important; }
body.dark-mode .vbmenu_option, body.dark-mode .vbmenu_hilite { background: #111 !important; color: var(--text) !important; }
body.dark-mode .vbmenu_hilite, body.dark-mode .vbmenu_option:hover { background: #1a1a2e !important; }
body.dark-mode .vbmenu_hilite a, body.dark-mode .vbmenu_option a { color: var(--link) !important; }

/* Inputs */
body.dark-mode input, body.dark-mode textarea, body.dark-mode select,
body.dark-mode .bginput, body.dark-mode .button {
  background: #111 !important; color: var(--text) !important;
  border: 1px solid var(--border2) !important; border-radius: 4px !important;
}
body.dark-mode .button, body.dark-mode input[type="submit"] {
  background: var(--accent) !important; color: #fff !important;
  border: none !important; padding: 6px 14px !important; cursor: pointer !important;
}
body.dark-mode .button:hover, body.dark-mode input[type="submit"]:hover { background: #3b82f6 !important; }
body.dark-mode #qr_textbox, body.dark-mode textarea[name="message"] {
  background: #0a0a0a !important; color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}
body.dark-mode .navbar, body.dark-mode td.navbar {
  background: #0a0a0a !important; color: var(--text2) !important; border-color: var(--border) !important;
}
body.dark-mode .navbar a { color: var(--link) !important; }
body.dark-mode img[src*="navbits"] { filter: brightness(3) !important; }
body.dark-mode img[src*="misc/"] { filter: brightness(2) !important; }
body.dark-mode img[src*="collapse_"] { filter: invert(1) !important; }
body.dark-mode::-webkit-scrollbar { width: 8px; }
body.dark-mode::-webkit-scrollbar-track { background: #000; }
body.dark-mode::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
body.dark-mode .smallfont, body.dark-mode .time { color: var(--text2) !important; }
body.dark-mode .smallfont a { color: var(--link) !important; }
body.dark-mode .bigusername { color: var(--link) !important; }
body.dark-mode .postbit, body.dark-mode .postbitlegacy { border-bottom: 1px solid var(--border) !important; }
body.dark-mode .imagebutton { filter: brightness(1.5) !important; }
body.dark-mode .vBulletin_editor { background: #111 !important; border-color: var(--border2) !important; }
body.dark-mode .controlbar { background: #0a0a0a !important; }
body.dark-mode #inlinemodbar { background: #111 !important; border-color: var(--border2) !important; }
body.dark-mode .noticerow { background: #0a0a1a !important; color: var(--text) !important; }

/* ============================================================
   MOBILE RESPONSIVE - WORKS IN ALL MODES (NOT dark-mode scoped)
   ============================================================ */

/* === GLOBAL FLUID LAYOUT === */
html, body {
  max-width: 100vw !important;
}
body > table, body > div, body > form {
  max-width: 100% !important;
}

/* === 1024px - TABLETS === */
@media screen and (max-width: 1024px) {
  html, body {
    -webkit-text-size-adjust: 100% !important;
  }
  /* Kill all fixed/hardcoded widths on outer containers */
  body > table, body > div, body > form,
  .page, .tborder, .panel, .panelsurround {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  /* All tables should be fluid */
  table {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* But don't force inner layout tables */
  td table { width: auto !important; max-width: 100% !important; }
  /* Break long words */
  td, th, div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
}

/* === 768px - PHONES (landscape) + small tablets === */
@media screen and (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Force all containers fluid */
  body > table, body > div, body > form,
  .page, .tborder, .panel, .panelsurround,
  table.tborder {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* === FORUM LIST: Hide stats columns === */
  /* JS tags cells with data-mobile-hide, hide them */
  [data-mobile-hide="true"] {
    display: none !important;
  }

  /* Also hide thead stats headers */
  .thead[data-mobile-hide="true"] {
    display: none !important;
  }

  /* Forum/thread titles - bigger tap targets */
  td.alt1Active a[href*="forumdisplay"],
  td.alt1Active a[href*="showthread"],
  td.alt1 a[href*="forumdisplay"],
  td.alt1 a[href*="showthread"],
  td.alt2 a[href*="showthread"] {
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 6px 0 !important;
    display: inline-block !important;
  }

  /* Forum descriptions - compact */
  td.alt1Active .smallfont,
  td.alt1 .smallfont {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* Category headers - clean */
  .tcat {
    font-size: 13px !important;
    padding: 8px 6px !important;
  }

  /* Logo responsive */
  img[src*="logo"] {
    max-width: 200px !important;
    height: auto !important;
  }

  /* Nav bar - wrap and compact */
  td.vbmenu_control {
    display: inline-block !important;
    margin: 2px 1px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  /* === POST VIEW: Stack user info above content === */
  /* Post rows - stack cells */
  table[id^="post"] tr:first-child > td,
  .postbitlegacy tr > td {
    display: block !important;
    width: 100% !important;
  }

  /* User info panel - horizontal bar */
  td[id^="postmenu_"],
  td.alt2[nowrap] {
    border-bottom: 1px solid #ddd !important;
    padding: 6px 8px !important;
  }
  body.dark-mode td[id^="postmenu_"],
  body.dark-mode td.alt2[nowrap] {
    border-bottom-color: #222 !important;
  }

  /* Post content */
  div[id^="post_message_"] {
    font-size: 14px !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    padding: 8px !important;
  }

  /* Images in posts - responsive */
  div[id^="post_message_"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Quick reply */
  #qr_textbox, textarea[name="message"] {
    width: 100% !important;
    min-height: 80px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    border-radius: 6px !important;
  }

  /* Buttons - touch friendly */
  .button, input[type="submit"], input[type="button"] {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    touch-action: manipulation !important;
  }

  /* Button images */
  img[src*="buttons/"] {
    max-height: 26px !important;
    width: auto !important;
  }

  /* Status icons */
  img[src*="statusicon/"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* Hide spacers */
  img[src*="spacer"], img[src*="clear.gif"] {
    width: 0 !important;
    height: 0 !important;
    display: inline !important;
  }

  /* Breadcrumb compact */
  .navbar, td.navbar {
    font-size: 11px !important;
    padding: 4px !important;
  }

  /* Pagination - bigger tap targets */
  .pagenav a, .pagenav span, td.vbmenu_control a {
    display: inline-block !important;
    min-width: 36px !important;
    min-height: 36px !important;
    line-height: 36px !important;
    text-align: center !important;
  }

  /* Forms - full width */
  .fieldset, fieldset, input[name="query"],
  input[name="searchquery"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Footer */
  .copyright, #footer { font-size: 10px !important; text-align: center !important; }

  /* iOS zoom prevention on inputs */
  input, select, textarea { font-size: 16px !important; }
}

/* === 480px - PHONES (portrait) === */
@media screen and (max-width: 480px) {
  img[src*="logo"] { max-width: 150px !important; }

  td.vbmenu_control {
    font-size: 10px !important;
    padding: 5px 6px !important;
  }

  /* Post content tighter */
  div[id^="post_message_"] {
    font-size: 13px !important;
    padding: 6px !important;
  }

  /* Category headers compact */
  .tcat {
    font-size: 12px !important;
    padding: 6px 4px !important;
  }

  /* Thread/forum links */
  td.alt1Active a[href*="forumdisplay"],
  td.alt1Active a[href*="showthread"],
  td.alt1 a[href*="showthread"] {
    font-size: 14px !important;
    padding: 4px 0 !important;
  }

  /* Compact descriptions */
  td.alt1Active .smallfont div,
  td.alt1 .smallfont div {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  /* Hide subforum listings on tiny screens */
  td.alt1Active .smallfont div[style*="margin-top"] {
    display: none !important;
  }
}

/* === DARK MODE TOGGLE BUTTON === */
#dark-toggle, #darkModeToggle {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 99999 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #1e3a5f !important;
  color: #fff !important;
  border: 2px solid #2563eb !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  touch-action: manipulation !important;
}
#dark-toggle:hover, #darkModeToggle:hover { background: #2563eb !important; }

/* === AJAX LOADING INDICATOR === */
#ajax-loader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb);
  background-size: 200% 100%;
  animation: ajax-loading 1.5s infinite;
  z-index: 999999;
  display: none;
}
#ajax-loader.active { display: block; }
@keyframes ajax-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === ERROR/MESSAGE PAGES (ban, maintenance, etc) === */
body.dark-mode .standard_error,
body.dark-mode .restoreerror,
body.dark-mode .maintitle {
  color: var(--text) !important;
  background: var(--bg) !important;
}
body.dark-mode .panelsurround .panel {
  background: var(--bg) !important;
  color: var(--text) !important;
}
body.dark-mode .panelsurround .panel .alt1,
body.dark-mode .panelsurround .panel .alt2 {
  background: var(--bg) !important;
  color: var(--text) !important;
}
/* Make sure ALL text is visible in dark mode */
body.dark-mode font, body.dark-mode span,
body.dark-mode p, body.dark-mode div,
body.dark-mode li, body.dark-mode blockquote {
  color: inherit !important;
}
body.dark-mode hr { border-color: var(--border) !important; }