/* ============================================
   DIABLO 2 THEME - ResurgenceArmory
   Dark Fantasy Aesthetic
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
:root {
    /* Colors - Dark Diablo Palette */
    --d2-bg-primary: #1a1614;
    --d2-bg-secondary: #2a2420;
    --d2-border: #363330;
    --d2-border-light: #66605b;
    --d2-text-primary: #d4c5a9;
    --d2-text-secondary: #8b7d6b;
    --d2-gold: #ffd700;
    --d2-gold-glow: rgba(255, 215, 0, 0.6);
    --d2-amber: #ff9900;
    --d2-red: #8b0000;
    --d2-unique-text: #c7b790;
    --d2-set-text-light: #4cc238;
    --d2-set-text-dark: #249a24;
    --d2-prop-text: #6377ef;
    --d2-item-type-text: #f9fafb;
    --d2-item-base-text: #9ca3af;
    /* Fonts */
    --font-active: 'classic-font';
    --font-diablo: var(--font-active);
    --font-body: var(--font-active);
    /* Borders */
    --border-radius: 2px;
    --border-width: 2px;
    /* Shadows & Glows */
    --glow-gold: 0 0 10px var(--d2-gold-glow), 0 0 20px var(--d2-gold-glow);
    --shadow-deep: 0 4px 8px rgba(0, 0, 0, 0.8);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================
   2. GLOBAL OVERRIDES
   ============================================ */
@font-face {
    font-family: 'classic-font';
    src: url('../fonts/EXL_____.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'resurrected-font';
    src: url('../fonts/exocetblizzardot-medium.otf') format('opentype');
    font-display: swap;
}

/* Roboto (the "modern" font option) — self-hosted via @fontsource (restored into
   wwwroot/lib/roboto by libman.json), replacing the former Google Fonts CDN link. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/roboto/files/roboto-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/roboto/files/roboto-latin-700-normal.woff2') format('woff2');
}

html[data-font="classic"]     { --font-active: 'classic-font'; }
html[data-font="resurrected"] { --font-active: 'resurrected-font'; }
html[data-font="modern"]      { --font-active: 'Roboto', sans-serif; }

html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  /* Background image with fixed attachment */
  background: url('../images/backgrounds/bg2.jpg') no-repeat center center fixed;
  background-size: cover;
  background-color: var(--d2-bg-primary); /* Fallback */
  color: var(--d2-text-primary);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  cursor: url('../images/cursor/normal cursor.cur'), auto;
}

/* ----- CUSTOM CURSORS ----- */
/* Use !important to override Bootstrap's high-specificity cursor rules
   (e.g. [type=submit]:not(:disabled) at 0,2,0) */
a,
.btn,
button:not(:disabled),
[type="submit"]:not(:disabled),
[role="button"],
.nav-link,
.navbar-brand,
.navbar-toggler,
.breadcrumb-item a,
.list-group-item,
.table tbody tr:hover,
.form-select,
select,
option {
  cursor: url('../images/cursor/link select.cur'), pointer !important;
}

.form-control,
.form-control:focus,
textarea,
textarea:focus,
input[type="text"],
input[type="search"] {
  cursor: url('../images/cursor/text.cur'), text !important;
}

.btn:disabled,
button:disabled,
[aria-busy="true"] {
  cursor: url('../images/cursor/busy.ani'), wait !important;
}

/* Darkening overlay for background image */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* 40% black overlay */
  pointer-events: none;
  z-index: -1;
}

main {
  flex: 1;
}

.footer {
  width: 100%;
  margin-top: 3rem;
  padding: 0;
  background: url('../images/backgrounds/ad-back.gif') repeat left top;
  background-size: auto 100%;
  border-top: none;
  position: relative;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.9);
}

.footer::before,
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

.footer::before {
  left: 0;
  background-image: url('../images/backgrounds/ad-leftborder.gif');
  background-position: left top;
}

.footer::after {
  right: 0;
  background-image: url('../images/backgrounds/ad-rightborder.gif');
  background-position: right top;
}

.footer > .container {
  padding-left: 100px;
  padding-right: 100px;
}

.container {
  position: relative;
  z-index: 1;
}

/* ============================================
   3. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-diablo);
  color: var(--d2-gold);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

p, span, td, li, a {
  color: var(--d2-text-primary);
}

a {
  color: var(--d2-gold);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--d2-amber);
  text-shadow: var(--glow-gold);
}

strong {
  font-weight: 600;
}

/* ============================================
   4. BOOTSTRAP OVERRIDES
   ============================================ */

/* ----- TOP BAR (auth + brand, textured with corner borders) ----- */
.navbar-top {
  background: url('../images/backgrounds/ad-back.gif') repeat-x left top;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  padding: 0;
  position: relative;
  z-index: 1;
}

.navbar-top::before,
.navbar-top::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

.navbar-top::before {
  left: 0;
  background-image: url('../images/backgrounds/ad-leftborder.gif');
  background-position: left top;
}

.navbar-top::after {
  right: 0;
  background-image: url('../images/backgrounds/ad-rightborder.gif');
  background-position: right top;
}

.navbar-top .container-fluid {
  display: block;
  text-align: center;
  padding-left: 100px;
  padding-right: 100px;
}

.navbar-auth {
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.25rem;
  position: relative;
  z-index: 3;
}

/* ----- BOTTOM NAV (textured links bar, no corner borders) ----- */
.navbar {
  background: url('../images/backgrounds/ad-back.gif') repeat-x left top;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  padding: 0;
  position: relative;
}

.navbar > .container-fluid {
  display: block;
  text-align: center;
  padding-left: 100px;
  padding-right: 100px;
}

.navbar-auth .nav-link {
  display: inline;
  padding: 0;
  font-size: 0.8rem;
}

.navbar-auth .nav-link-separator {
  color: var(--d2-gold);
  opacity: 0.5;
}

.navbar-font-switcher + .nav-link-separator {
  margin: 0 0.35rem;
}

.navbar-auth-logout {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.navbar-brand {
  font-family: var(--font-diablo);
  font-size: 1.5rem;
  color: var(--d2-gold) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.navbar-brand:hover {
  text-shadow: var(--glow-gold);
  transform: scale(1.05);
}

.navbar-brand .bi {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.nav-link {
  color: var(--d2-gold) !important;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 1rem !important;
  font-weight: 500;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--d2-gold), transparent);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--d2-gold) !important;
  text-shadow: var(--glow-gold);
}

.nav-link:hover::before {
  width: 80%;
}

/* ----- NAVBAR DROPDOWNS ----- */
.navbar .dropdown-menu-dark,
.navbar-top .dropdown-menu-dark,
.search-recipes-dropdown {
  background-color: var(--d2-bg-primary);
  border: 1px solid var(--d2-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-deep);
}

.navbar .dropdown-menu-dark .dropdown-item,
.navbar-top .dropdown-menu-dark .dropdown-item {
  color: var(--d2-text-primary);
  transition: all 0.3s ease;
}

.navbar .dropdown-menu-dark .dropdown-item:hover,
.navbar .dropdown-menu-dark .dropdown-item:focus,
.navbar-top .dropdown-menu-dark .dropdown-item:hover,
.navbar-top .dropdown-menu-dark .dropdown-item:focus {
  color: var(--d2-gold);
  background-color: var(--d2-bg-secondary);
  text-shadow: var(--glow-gold);
}

.navbar .dropdown-menu-dark .dropdown-divider,
.navbar-top .dropdown-menu-dark .dropdown-divider {
  border-color: var(--d2-border);
}

/* ----- CARDS ----- */
.card {
  /* Parchment effect using CSS gradients */
  background:
    linear-gradient(135deg,
      rgba(42, 36, 32, 0) 0%,
      rgba(54, 51, 48, 0.3) 50%,
      rgba(42, 36, 32, 0) 100%),
    linear-gradient(180deg,
      rgba(42, 36, 32, 0.95) 0%,
      rgba(54, 51, 48, 0.95) 50%,
      rgba(42, 36, 32, 0.95) 100%);
  background-color: rgba(42, 36, 32, 0.95);
  border: var(--border-width) solid var(--d2-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-deep);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Top golden accent line */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--d2-gold) 50%,
    transparent);
  opacity: 0.3;
}

.card-header {
  /* D2 authentic header background */
  background: url('../images/backgrounds/header-back.gif') repeat-x center;
  background-size: auto 100%;
  border-bottom: 1px solid var(--d2-border-light);
  font-family: var(--font-diablo);
  color: var(--d2-gold);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  padding: 1rem 1.25rem;
  position: relative;
  min-height: 60px;
  display: flex;
  align-items: center;
  /* Center all text content horizontally */
  justify-content: center;
  text-align: center;
}

/* Left header cap */
.card-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: url('../images/backgrounds/header-left.gif') no-repeat left center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

/* Right header cap */
.card-header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: url('../images/backgrounds/header-right.gif') no-repeat right center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Ensure all header content is above background images */
.card-header * {
  position: relative;
  z-index: 1;
}

.card-body {
  padding: 1.5rem;
}

.favorite-btn {
  display: block;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--d2-text-secondary);
  font-size: 1.2rem;
  padding: 0;
  margin-top: 0.5rem;
  transition: color 0.2s ease;
}

.favorite-btn.favorited,
.favorite-btn:hover {
  color: var(--d2-gold);
}

.card-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.card-actions .favorite-btn {
  margin-top: 0;
}

.copy-card-image-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--d2-text-secondary);
  font-size: 1.2rem;
  padding: 0;
  transition: color 0.2s ease;
}

.copy-card-image-btn:hover {
  color: var(--d2-gold);
}

.card-title {
  font-family: var(--font-diablo);
  color: var(--d2-gold) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9),
              0 0 20px var(--d2-gold-glow);
  border-color: var(--d2-border-light);
}

.card-footer {
  background: rgba(26, 22, 20, 0.5);
  border-top: 1px solid var(--d2-border);
  padding: 1rem 1.25rem;
}

/* D2 Card with Authentic Border Images - Using pseudo-elements with layered backgrounds */
.d2-card-bordered {
  /* Remove default borders */
  border: none !important;
  box-shadow: none !important;

  /* Position context for absolutely positioned borders */
  position: relative;

  /* No padding - let content determine size, borders will overlay */
  padding: 0 !important;

  /* Add margin-bottom to create space below card for border images */
  margin-bottom: 3em !important;

  /* Card background transparent */
  background: transparent !important;
}

/* Top and left borders using ::before - overlay on edges */
.d2-card-bordered::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: 38px !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 11;

  /* Layer multiple border images - corners on top, then repeating borders at bottom */
  background:
    url('../images/borders/mid-textboxtop-left.gif') no-repeat left 0 top 0 / 36px 23px,
    url('../images/borders/mid-textboxtop-right.gif') no-repeat right 0 top 0 / 36px 23px,
    url('../images/borders/mid-textboxleft.gif') repeat-y left 0 top 23px / 20px auto,
    url('../images/borders/mid-textboxtop-back.gif') repeat-x left 36px top 0 / calc(100% - 72px) 23px !important;
}

/* Right and bottom borders using ::after - overlay on edges */
.d2-card-bordered::after {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  pointer-events: none;
  z-index: 10;

  /* Layer multiple border images - corners on top, then repeating borders */
  background:
    url('../images/borders/mid-textboxbot-left.gif') no-repeat 0 bottom / 132px 40px,
    url('../images/borders/mid-textboxbot-right.gif') no-repeat right bottom / 106px 40px,
    url('../images/borders/mid-textboxbot-back.gif') repeat-x 132px bottom / calc(100% - 238px) 40px,
    url('../images/borders/mid-textboxright.gif') repeat-y right 0 top 23px / 21px auto !important;
}

/* Disable hover effect for bordered cards */
.d2-card-bordered:hover {
  transform: none !important;
}

/* Ensure card body has proper spacing and background */
.d2-card-bordered .card-body {
  /* Add padding for spacing from borders - more bottom padding to prevent button cutoff */
  padding: 1.75rem 1.5rem 3rem 1.5rem;
  /* Pure black background instead of gray */
  background: #000000;
  background-color: #000000;
  border-radius: 0;
  position: relative;
  z-index: 1;
  /* Ensure content is sized naturally */
  min-height: auto;
  /* Use flexbox to align buttons at bottom */
  display: flex;
  flex-direction: column;
}

/* Push buttons to bottom of card */
.d2-card-bordered .card-body .btn {
  margin-top: auto;
}

/* Ensure card header works with bordered cards */
.d2-card-bordered .card-header {
  padding: 1.25rem 1.5rem;
  border-radius: 0;
  position: relative;
  z-index: 1;
  /* Match the black background */
  background-color: #000000;
}

/* ============================================
   RUNEWORD-SPECIFIC STYLING
   ============================================ */

/* Card name styling (used across all card types) */
.runeword-name {
  color: var(--d2-unique-text);
  font-family: var(--font-diablo);
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1.5px;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* Item type styling */
.item-type,
.item-type-header {
  color: var(--d2-item-base-text);
  font-family: var(--font-body);
  font-weight: normal;
  letter-spacing: 0.5px;
}

/* Rune sequence styling */
.rune-sequence {
  color: var(--d2-item-base-text);
  font-family: var(--font-body);
  font-weight: normal;
}

.rune-badge {
  color: var(--d2-item-base-text);
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.rune-separator {
  color: var(--d2-text-secondary);
  margin: 0 0.25rem;
  font-weight: bold;
}

/* Item type inclusion/exclusion colors */
.text-included {
  color: var(--d2-set-text-light);
}

.text-excluded {
  color: #ff4444;
}

/* Level requirement styling */
.level-requirement {
  color: #ff4444 !important;
  font-family: var(--font-body);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

/* Properties list styling */
.properties-list {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.property-item {
  color: var(--d2-prop-text);
  font-family: var(--font-body);
  line-height: 1.6;
  padding: 0.25rem 0;
  text-align: center;
  white-space: nowrap;
}

.rune-bonus-rune {
  color: var(--d2-item-base-text);
  margin-right: 0.25rem;
}

/* ============================================
   BASE ITEM-SPECIFIC STYLING
   ============================================ */

/* Item type section header */
.item-type-section-header {
  color: var(--d2-gold);
  font-family: var(--font-diablo);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--d2-border);
}

/* Item image styling */
.item-image {
  max-width: 100%;
  height: auto;
  max-height: 80px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Base item name styling (includes tier indicator like "Stag Bow [N]") */
.base-item-name {
  color: var(--d2-item-type-text);
  font-family: var(--font-diablo);
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Item stats styling */
.item-stats {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--d2-text-primary);
}

.item-stats .stat-label {
  color: var(--d2-text-secondary);
  font-weight: normal;
}

.item-stats .stat-value {
  color: var(--d2-text-primary);
  font-weight: normal;
}

/* Auto mods list styling */
.auto-mods-list {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin-top: 0.75rem;
}

.auto-mod-item {
  color: var(--d2-prop-text);
  font-family: var(--font-body);
  line-height: 1.5;
  padding: 0.15rem 0;
  font-size: 1.1rem;
  text-align: center;
  white-space: nowrap;
}

.auto-mod-tier {
  margin-bottom: 0.5rem;
}

.auto-mod-tier:last-child {
  margin-bottom: 0;
}

.auto-mod-spawn-label {
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

.auto-mod-property {
  color: var(--d2-prop-text);
  font-family: var(--font-body);
  line-height: 1.4;
  font-size: 1.1rem;
  padding-left: 1rem;
  white-space: nowrap;
}

/* Flexible grid for item cards to accommodate varying content widths */
.flex-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.flex-card-grid > .flex-card {
  flex: 0 1 auto;
  min-width: 280px;
  max-width: 100%;
}

/* Level requirement styling (reuse from runeword) */
.base-item-level-req {
  color: #ff4444 !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ============================================
   BANNER BORDERED STYLING
   ============================================ */

.banner-bordered {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Top and left borders using ::before */
.banner-bordered::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none;
  z-index: 11;

  /* Layer border images */
  background:
    url('../images/backgrounds/ad-top.gif') repeat-x center top,
    url('../images/backgrounds/ad-left.gif') repeat-y left center !important;
}

/* Bottom and right borders using ::after */
.banner-bordered::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none;
  z-index: 10;

  /* Layer border images */
  background:
    url('../images/backgrounds/ad-bot.gif') repeat-x center bottom,
    url('../images/backgrounds/ad-right.gif') repeat-y right center !important;
}

/* ----- TABLES ----- */
.table {
  color: var(--d2-text-primary);
  border-color: var(--d2-border);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(54, 51, 48, 0.3);
  --bs-table-hover-bg: rgba(255, 215, 0, 0.1);
  --bs-table-color: var(--d2-text-primary);
}

.table thead th {
  background: rgba(26, 22, 20, 0.8);
  color: var(--d2-gold);
  border-color: var(--d2-border);
  font-family: var(--font-diablo);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-weight: normal;
  padding: 0.75rem;
  border-bottom: 2px solid var(--d2-border-light);
}

.table tbody tr {
  background: rgba(42, 36, 32, 0.6);
  border-color: var(--d2-border);
  transition: all 0.3s ease;
}

.table tbody tr:hover {
  background: rgba(255, 215, 0, 0.1);
  box-shadow: inset 0 0 10px var(--d2-gold-glow);
  transform: scale(1.01);
}

.table td, .table th {
  border-color: var(--d2-border);
  vertical-align: middle;
  padding: 0.75rem;
  color: var(--d2-text-primary) !important;
}

/* Ensure strong elements in tables are gold */
.table td strong {
  color: var(--d2-gold);
}

/* …except when wrapped by a .property-item, whose blue must win.
   `.table .property-item strong` (specificity 0,0,2,1) outranks the gold
   rule above (`.table td strong`, specificity 0,0,1,2). */
.table .property-item strong {
  color: inherit;
}

/* Crafting grid: pin the leftmost column (item-type labels) so it stays
   visible while the user scrolls horizontally through gem columns. The
   thead corner cell pins to both the top of its container and the left
   edge so it stays in the corner.

   The hover scale/transform inherited from `.table tbody tr` creates a
   new containing block that breaks sticky positioning, so it's disabled
   on this grid. */
.crafting-grid th[scope="row"],
.crafting-grid thead th:first-child {
  position: sticky;
  left: 0;
  background-color: #2a2420;
  z-index: 1;
}

.crafting-grid thead th:first-child {
  background-color: #1a1614;
  z-index: 2;
}

.crafting-grid tbody tr:hover,
.crafting-crystals tbody tr:hover {
  transform: none;
  box-shadow: none;
  background: rgba(42, 36, 32, 0.6);
}

/* Ensure all text content in table cells is readable */
.table tbody td {
  color: var(--d2-text-primary) !important;
}

/* Override Bootstrap's default table text color */
.table > :not(caption) > * > * {
  color: var(--d2-text-primary);
}

.table-bordered {
  border: 2px solid var(--d2-border);
}

.table-responsive {
  border: 1px solid var(--d2-border);
  border-radius: var(--border-radius);
}

/* ----- BUTTONS ----- */
.btn {
  font-family: var(--font-diablo);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--d2-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-weight: normal;
}

/* Sweeping light effect on buttons */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 215, 0, 0.3),
    transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-d2 {
  background: linear-gradient(180deg, #44403a, #33302b);
  border: 2px solid #1a1715;
  border-radius: 0;
  color: #b8b0a0;
  padding: 0.45rem 1.5rem;
  box-shadow:
    inset 2px 2px 0 #635d55,
    inset -2px -2px 0 #1e1b18;
}

.btn-d2:hover {
  color: var(--d2-gold);
  background: linear-gradient(180deg, #4e4a42, #3a3630);
  border-color: #1a1715;
  box-shadow:
    inset 2px 2px 0 #706a60,
    inset -2px -2px 0 #1e1b18;
  transform: none;
}

.btn-d2:active,
.btn-d2.active {
  color: var(--d2-gold);
  background: linear-gradient(180deg, #302d28, #3a3630);
  border-color: #1a1715;
  box-shadow:
    inset 2px 2px 0 #1e1b18,
    inset -2px -2px 0 #635d55;
  transform: none;
}

.btn-primary {
  background: linear-gradient(180deg,
    rgba(139, 0, 0, 0.8),
    rgba(109, 0, 0, 0.9));
  border-color: var(--d2-border-light);
  color: var(--d2-gold);
}

.btn-primary:hover {
  background: linear-gradient(180deg,
    rgba(139, 0, 0, 1),
    rgba(109, 0, 0, 1));
  border-color: var(--d2-gold);
  color: var(--d2-gold);
  box-shadow: var(--glow-gold), var(--shadow-deep);
  transform: translateY(-2px);
}

.btn-secondary {
  background: linear-gradient(180deg,
    rgba(54, 51, 48, 0.8),
    rgba(42, 36, 32, 0.9));
  border-color: var(--d2-border-light);
  color: var(--d2-text-primary);
}

.btn-secondary:hover {
  background: linear-gradient(180deg,
    rgba(54, 51, 48, 1),
    rgba(42, 36, 32, 1));
  border-color: var(--d2-border-light);
  color: var(--d2-gold);
  box-shadow: 0 0 10px rgba(102, 96, 91, 0.5);
  transform: translateY(-2px);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--d2-border-light);
  color: var(--d2-text-primary);
}

.btn-outline-primary:hover {
  background: rgba(139, 0, 0, 0.3);
  border-color: var(--d2-gold);
  color: var(--d2-gold);
  box-shadow: var(--glow-gold);
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
}

/* ----- BADGES ----- */
.badge {
  font-family: var(--font-body);
  border: 1px solid;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  padding: 0.35em 0.65em;
  font-weight: 500;
  border-radius: 3px;
}

.badge.bg-danger {
  background: linear-gradient(135deg, #8b0000, #a00000) !important;
  border-color: #600000;
  box-shadow: 0 2px 4px rgba(139, 0, 0, 0.5);
}

.badge.bg-warning {
  background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
  border-color: #cc9900;
  color: #1a1614 !important;
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.badge.bg-info {
  background: linear-gradient(135deg, #4169e1, #6495ed) !important;
  border-color: #1e3a8a;
  box-shadow: 0 2px 4px rgba(65, 105, 225, 0.5);
}

.badge.bg-secondary {
  background: linear-gradient(135deg, #6c757d, #868e96) !important;
  border-color: #495057;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.5);
}

/* ----- FORMS ----- */
.form-control, .form-select {
  background-color: rgba(26, 22, 20, 0.9);
  border: 2px solid var(--d2-border);
  color: var(--d2-text-primary);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  background-color: rgba(26, 22, 20, 1);
  border-color: var(--d2-amber);
  box-shadow: 0 0 0 0.2rem rgba(255, 153, 0, 0.25);
  color: var(--d2-gold);
}

.form-control::placeholder {
  color: var(--d2-text-secondary);
  opacity: 0.7;
}

.form-label {
  color: var(--d2-text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d4c5a9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ----- BREADCRUMB ----- */
.breadcrumb {
  background: rgba(26, 22, 20, 0.7);
  border: 1px solid var(--d2-border);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.breadcrumb-item {
  color: var(--d2-text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--d2-border-light);
  content: "›";
}

.breadcrumb-item a {
  color: var(--d2-gold);
  text-decoration: none;
  transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
  color: var(--d2-amber);
  text-shadow: var(--glow-gold);
}

.breadcrumb-item.active {
  color: var(--d2-text-primary);
}

/* ----- LIST GROUPS ----- */
.list-group-item {
  background-color: rgba(42, 36, 32, 0.7);
  border: 1px solid var(--d2-border);
  color: var(--d2-text-primary);
  margin-bottom: 0.5rem;
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
}

.list-group-item:hover {
  background-color: rgba(42, 36, 32, 0.9);
  border-color: var(--d2-border-light);
}

.list-group-item:first-child {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  margin-bottom: 0;
}

/* ============================================
   5. CUSTOM COMPONENTS
   ============================================ */

/* Ornate Panel */
.d2-panel {
  background: linear-gradient(180deg,
    rgba(42, 36, 32, 0.95) 0%,
    rgba(54, 51, 48, 0.95) 50%,
    rgba(42, 36, 32, 0.95) 100%);
  border: var(--border-width) solid var(--d2-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-deep);
  position: relative;
}

/* Decorative Divider */
.d2-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--d2-gold) 50%,
    transparent);
  margin: 2rem 0;
  opacity: 0.5;
  border: none;
}

/* Golden Glow Effect */
.d2-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px var(--d2-gold-glow),
                 0 0 10px var(--d2-gold-glow);
  }
  to {
    text-shadow: 0 0 10px var(--d2-gold-glow),
                 0 0 20px var(--d2-gold-glow),
                 0 0 30px var(--d2-gold-glow);
  }
}

/* Corner Decorations for Cards (CSS-only version) */
.d2-card-decorated::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid var(--d2-gold);
  border-radius: var(--border-radius);
  opacity: 0.2;
  pointer-events: none;
}

/* ============================================
   6. SCROLLBAR STYLING (Webkit)
   ============================================ */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--d2-bg-primary);
  border: 1px solid var(--d2-border);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--d2-border-light),
    var(--d2-border));
  border-radius: var(--border-radius);
  border: 1px solid var(--d2-border);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    var(--d2-gold),
    var(--d2-amber));
  box-shadow: var(--glow-gold);
}

::-webkit-scrollbar-corner {
  background: var(--d2-bg-primary);
}

/* ============================================
   7. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .navbar-brand {
    font-size: 1.25rem;
  }

  .card-body {
    padding: 1rem;
  }

  .table {
    font-size: 0.875rem;
  }

  .btn {
    font-size: 0.875rem;
  }

  .navbar > .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }


  .navbar-top::before,
  .navbar-top::after {
    width: 80px;
  }

  .navbar-top .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer > .container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (max-width: 576px) {
  .card:hover {
    transform: none; /* Disable hover transform on mobile */
  }

  .table tbody tr:hover {
    transform: none; /* Disable table row transform on mobile */
  }
}

/* ============================================
   8. UTILITY CLASSES
   ============================================ */
.text-gold {
  color: var(--d2-gold) !important;
}

.text-amber {
  color: var(--d2-amber) !important;
}

.bg-d2-dark {
  background-color: var(--d2-bg-primary) !important;
}

.bg-d2-secondary {
  background-color: var(--d2-bg-secondary) !important;
}

.border-d2 {
  border-color: var(--d2-border) !important;
}

/* Text muted override for D2 theme */
.text-muted {
  color: var(--d2-text-secondary) !important;
}

/* Augment description color classes (D2 color codes) */
.text-augment-red {
  color: #ff6464 !important;
}

.text-augment-green {
  color: #00ff00 !important;
}

.text-augment-blue {
  color: #6969ff !important;
}

.text-augment-yellow {
  color: #ffff64 !important;
}

.text-augment-purple {
  color: #af50ff !important;
}

/* Charm component name color classes (rarity-based) */
.charm-name-magic {
  color: var(--d2-prop-text) !important;
}

.charm-name-rare {
  color: #ffff64 !important;
}

.charm-name-unique {
  color: var(--d2-unique-text) !important;
}

/* ============================================
   9. BOOTSTRAP ICON ENHANCEMENTS
   ============================================ */
.bi {
  transition: all 0.3s ease;
}

.btn .bi {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.btn:hover .bi {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

/* Icon glow effects */
.navbar-brand .bi-lightning-fill {
  color: var(--d2-amber);
  animation: lightning-pulse 3s ease-in-out infinite;
}

@keyframes lightning-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 153, 0, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 153, 0, 0.8));
  }
}

/* ----- FONT SWITCHER ----- */
.font-preview-classic     { font-family: 'classic-font'; }
.font-preview-resurrected { font-family: 'resurrected-font'; }
.font-preview-modern      { font-family: 'Roboto', sans-serif; }

.navbar-font-switcher {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.navbar-font-switcher .btn {
  padding: 0;
  line-height: 1;
  font-size: 1.4em;
  color: var(--d2-text-primary);
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
}

.navbar-font-switcher .btn:hover,
.navbar-font-switcher .btn:focus {
  color: var(--d2-gold);
  box-shadow: none;
}

.navbar-font-switcher .dropdown-item.active,
.navbar-font-switcher .dropdown-item:active {
  color: var(--d2-gold);
  background-color: var(--d2-bg-secondary);
  text-shadow: var(--glow-gold);
}

/* === Card text & layout utilities === */
.text-d2-set-dark {
  color: var(--d2-set-text-dark);
}

.text-d2-secondary {
  color: var(--d2-text-secondary);
}

.text-d2-primary {
  color: var(--d2-text-primary);
}

.d2-set-heading {
  color: var(--d2-set-text-dark);
  font-family: var(--font-diablo);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.1rem;
}

.d2-set-item-heading {
  color: var(--d2-set-text-dark);
  font-family: var(--font-diablo);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.1rem;
}

.d2-affix-name {
  color: var(--d2-prop-text);
  font-size: 1.1rem;
}

.d2-class-restriction {
  font-size: 1.1rem;
  color: var(--d2-set-text-dark);
}

.d2-card-divider {
  border-color: var(--d2-border);
  opacity: 0.5;
}

.d2-card-divider-faint {
  border-color: var(--d2-border);
  opacity: 0.3;
}

.d2-count-faded {
  opacity: 0.7;
}

.archetype-icon {
  max-height: 40px;
}

.set-bonus-icon {
  max-height: 24px;
  width: auto;
}

/* Reference tables used by the Search Syntax help on the home page.
   The site's default .table styling is dense, hover-scaled, and themed for
   data grids — too heavy for a quiet reference list. This variant flattens
   the look: subtle row striping, no hover transform, very compact padding
   so the table fits above the fold with the search box and category cards. */
.syntax-table {
  font-size: 0.78rem;
  line-height: 1.25;
}

.syntax-table thead th {
  background: transparent;
  border-bottom: 1px solid var(--d2-border);
  font-family: var(--font-base, inherit);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
}

.syntax-table tbody tr {
  background: transparent;
  transition: none;
}

.syntax-table tbody tr:nth-of-type(odd) {
  background: rgba(54, 51, 48, 0.25);
}

.syntax-table tbody tr:hover {
  background: rgba(255, 215, 0, 0.06);
  box-shadow: none;
  transform: none;
}

.syntax-table td,
.syntax-table th {
  padding: 0.1rem 0.4rem;
  border-color: transparent;
}

/* Inline code chips share the D2 amber across the app — Bootstrap's
   default `<code>` is bright pink, which clashes with the dark theme. */
code {
    color: var(--d2-amber);
}

.syntax-table code {
    white-space: nowrap;
    font-size: 0.95em;
}

/* Click-to-fill rows enhanced by wwwroot/js/searchSyntaxFill.js.
   Pointer/affordance only appear when JS wires up the behavior. */
.syntax-table tbody tr.syntax-row-clickable {
  cursor: pointer;
}

.syntax-table tbody tr.syntax-row-clickable:hover,
.syntax-table tbody tr.syntax-row-clickable:focus-visible {
  background: rgba(255, 215, 0, 0.12);
  outline: none;
}

/* Popup that opens below the navbar-docked global search input on
   focus. Width hugs the widest inner element (typically the right
   syntax table); centered relative to the parent .container-fluid
   so it stays under the input regardless of viewport size. */
.search-recipes-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  margin-top: 0.25rem;
  padding: 0.75rem 1rem;
  z-index: 1050;
}

.search-recipes-dropdown .dropdown-header {
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem;
}

/* Override Bootstrap's .table width: 100% so the syntax tables hug
   their content and the columns sit close together inside the popup.
   .mx-auto on each table keeps it centered within its col-lg-6. */
.search-recipes-dropdown .syntax-table {
  width: auto;
}

.search-recipes-dropdown .syntax-table th,
.search-recipes-dropdown .syntax-table td {
  white-space: nowrap;
}

/* Example queries inside the popup — informational only, not clickable.
   Auto-width + .mx-auto on the table so the two columns hug their
   content and the whole block sits centered in the popup, instead of
   stretching the row across the full width with empty space between
   the query and its description. */
.search-recipes-dropdown .search-examples-table {
  font-size: 0.78rem;
  line-height: 1.25;
  width: auto;
}

.search-recipes-dropdown .search-examples-table tbody tr {
  cursor: default;
  background: transparent;
}

.search-recipes-dropdown .search-examples-table tbody tr:nth-of-type(odd) {
  background: rgba(54, 51, 48, 0.25);
}

.search-recipes-dropdown .search-examples-table td {
  padding: 0.1rem 0.6rem;
  border-color: transparent;
  white-space: nowrap;
}

.search-recipes-dropdown .search-examples-table code {
  white-space: nowrap;
  font-size: 0.95em;
}

/* Search input docked at the bottom of the sticky header. The form is
   centered and capped at a comfortable reading width; the popup itself
   breaks out to the full navbar container. */
.navbar-search {
  padding: 0.25rem 0;
}

.navbar-search-form {
  width: min(720px, 100%);
}

/* Ladder rows are fully clickable to open the character. */
.ladder-row {
  cursor: pointer;
}

/* Character view. The default .d2-card-bordered bottom padding (3rem) is kept so the
   bottom border image doesn't overlap content (e.g. the last skills); the card grows
   with its content. */

/* The card hugs its content (no dead column whitespace) and centers; on narrow
   viewports it caps at 100% and the inner blocks wrap to stack. */
.char-card {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.char-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: center;
  align-items: flex-start;
}

.char-equipment {
  flex: 0 1 auto;
}

/* Stat blocks stay narrow so each label-value row keeps its value close to the label. */
.char-stats {
  flex: 0 1 auto;
  width: 21rem;
  max-width: 100%;
}

.char-stats h2 {
  white-space: nowrap;
}

.paperdoll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "weapon helm   shield"
    "weapon armor  shield"
    "weapon armor  shield"
    "gloves belt   boots"
    "ringl  ammy   ringr";
  gap: 0.4rem;
  max-width: 320px;
}

.equip-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--d2-border);
  border-radius: 3px;
}

.equip-slot .item-image {
  max-height: 56px;
  cursor: help;
}

.equip-slot-sm {
  min-height: 48px;
  width: 56px;
}

.equip-slot-sm .item-image {
  max-height: 40px;
}

/* In-game inventory grid (dimensions come from Inventory.txt). Items span their real footprint. */
.inventory-grid {
  display: grid;
  gap: 2px;
  width: max-content;
}

.inv-cell {
  border: 1px solid var(--d2-border);
  background: rgba(0, 0, 0, 0.4);
}

.inv-item {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1px;
  border: 1px solid var(--d2-border-light);
  background: rgba(0, 0, 0, 0.65);
  cursor: help;
}

.inv-item .item-image {
  max-width: 100%;
  max-height: 100%;
}