/* Oakenforge — Core: variables, reset, layout, responsive */
:root {
  /* ── Oakenforge: Forge direction (default) ────────────── */
  --cc:  #E06A1A;
  --cc2: rgba(224,106,26,0.12);
  --bg:  #0E0C0A;
  --bg2: #1A1614;
  --bg3: #24201C;
  --bg4: #2C261E;
  --bg5: #342E24;
  --border:  rgba(180,100,40,0.18);
  --border1: rgba(180,100,40,0.28);
  --border2: rgba(180,100,40,0.40);
  --text:   #EADFC9;
  --text2:  #B5A687;
  --text3:  #7A6D55;
  --bright: #F5EDD8;
  --rune:   #E06A1A;
  --ink:    #0E0C0A;
  --accent-2: #FFB457;
  --glow-color: rgba(224,106,26,0.45);
  /* parse tier colors — unchanged */
  --poor:      #888e99;
  --uncommon:  #1ef55a;
  --rare:      #3399ff;
  --epic:      #b040ff;
  --legendary: #ff8800;
  --artifact:  #e8d060;
  /* typography */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-head: 'Cinzel', 'Georgia', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* spacing */
  --rad:    10px;
  --rad-lg: 14px;
  --glow:   0 0 24px rgba(224,106,26,0.45);
  --shadow: 0 4px 24px rgba(0,0,0,0.6);
  /* semantic status colors */
  --fail: #ef4444;
  --warn: #f59e0b;
  --pass: #22c55e;
  --info: #3b82f6;
  /* diff colors — unchanged */
  --diff-lfr:    #6b7280;
  --diff-normal: #22c55e;
  --diff-heroic: #3b82f6;
  --diff-mythic: #a855f7;

  /* ── DESIGN-PORT-V2 Phase 1 token additions (2026-05-08) ──
     Aliases of existing tokens (cc-soft/cc-glow/cc-bright) plus net-new tokens.
     Per-direction overrides for the colored ones live in themes.css. */
  --cc-soft:   rgba(224,106,26,0.12);
  --cc-glow:   rgba(224,106,26,0.45);
  --cc-bright: #FFB457;
  --bg-card:   color-mix(in srgb, var(--bg2) 92%, transparent);
  --border3:   rgba(180,100,40,0.55);
  --text4:     #524A3B;
  /* radius scale */
  --rad-xs: 4px;
  --rad-sm: 6px;
  --rad-xl: 20px;
  /* shadow scale */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.7);
  --glow-sm:    0 0 12px var(--cc-glow);
  --inset-edge: inset 0 1px 0 rgba(255,180,87,0.06);
  /* class colors (theme-invariant) */
  --class-druid:        #FF7D0A;
  --class-monk:         #00FF96;
  --class-priest:       #FFFFFF;
  --class-paladin:      #F58CBA;
  --class-shaman:       #0070DE;
  --class-evoker:       #33937F;
  --class-warrior:      #C79C6E;
  --class-deathknight:  #C41F3B;
  --class-demonhunter:  #A330C9;
  --class-hunter:       #ABD473;
  --class-mage:         #69CCF0;
  --class-rogue:        #FFF569;
  --class-warlock:      #9482C9;
  /* spell schools (theme-invariant) */
  --school-nature:    #22c55e;
  --school-arcane:    #b040ff;
  --school-fire:      #ef4444;
  --school-frost:     #69CCF0;
  --school-shadow:    #9482C9;
  --school-holy:      #FFE680;
  --school-physical:  #C79C6E;
  /* performance grades (theme-invariant) */
  --grade-poor:   #888e99;
  --grade-low:    #ef4444;
  --grade-mid:    #f59e0b;
  --grade-good:   #22c55e;
  --grade-great:  #3399ff;
  --grade-elite:  #b040ff;
  --grade-legend: #ff8800;
  --grade-best:   #e8d060;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 13px; line-height: 1.5; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cc); }

/* ── APP SHELL ────────────────────────────────── */
#app { display: flex; flex-direction: column; min-height: 100vh; position: relative; }
#content { flex: 1; overflow-y: auto; position: relative; z-index: 1; background: transparent; }
.tab-panel { display: none; padding: 20px; background: transparent; animation: fadeIn 0.15s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── HEADER ───────────────────────────────────── */
#header {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 0 16px; height: 52px; min-height: 52px;
  background: color-mix(in srgb, var(--bg2) 78%, transparent);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── LOGO ─────────────────────────────────────── */
#logo {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--bright); white-space: nowrap;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  text-decoration: none;
}
#logo span { color: var(--cc); }
#logo::before {
  content: ''; display: block; width: 3px; height: 20px;
  background: var(--cc); border-radius: 2px; box-shadow: 0 0 10px var(--cc);
  flex-shrink: 0;
}

/* ── CHARACTER SEARCH ─────────────────────────── */
#char-search {
  display: flex; align-items: center; gap: 5px;
  flex: 1; min-width: 0; max-width: 420px;
}
#char-search input, #char-search select {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--bright); border-radius: var(--rad); padding: 5px 9px;
  font-family: var(--font-body); font-size: 13px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
#char-search input:focus, #char-search select:focus {
  border-color: var(--cc);
  box-shadow: 0 0 0 2px var(--cc2);
}
#char-search select option { background: var(--bg3); }
#char-name-inp   { flex: 1.2; min-width: 80px; }
#char-realm-inp  { flex: 1.4; min-width: 90px; }
#char-region-inp { flex: 0 0 62px; }
#char-load-btn {
  flex-shrink: 0;
  padding: 5px 14px; background: var(--cc2); border: 1px solid var(--cc);
  color: var(--cc); border-radius: var(--rad); cursor: pointer;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  letter-spacing: 0.3px; white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}
#char-load-btn:hover  { background: var(--cc2); box-shadow: var(--glow); }
#char-load-btn:active { transform: scale(0.97); }

/* ── SPEC DISPLAY ─────────────────────────────── */
#spec-display {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 20px;
  font-size: 12px; white-space: nowrap; flex-shrink: 0;
  transition: border-color 0.2s;
}
#spec-display:has(#spec-dot[style*="#FF"]) { border-color: color-mix(in srgb, var(--cc) 30%, var(--border2)); }
#spec-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); flex-shrink: 0; transition: background 0.3s; }
#spec-name { color: var(--bright); font-weight: 600; }
#spec-note { color: var(--text3); font-size: 11px; }


/* ── TAB BAR (main tabs) ──────────────────────── */
#tab-bar {
  display: flex; padding: 0 16px;
  background: color-mix(in srgb, var(--bg2) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none; /* Firefox */
  position: relative; z-index: 2;
}
#tab-bar::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px; border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text3);
  cursor: pointer; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; white-space: nowrap; letter-spacing: 0.2px;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase; flex-shrink: 0;
}
.tab:hover  { color: var(--text); border-bottom-color: var(--border2); }
.tab.active { color: var(--cc); border-bottom-color: var(--cc); }
.tab-arrow  { font-size: 10px; opacity: 0.6; margin-left: 2px; }
.tab.tab-main {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

/* ── SUB-TAB BAR ─────────────────────────────── */
#sub-tab-bar {
  display: flex; padding: 0 16px;
  background: color-mix(in srgb, var(--bg3) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
  position: relative; z-index: 2;
}
#sub-tab-bar::-webkit-scrollbar { display: none; }
.sub-tab {
  padding: 7px 12px; border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text3);
  cursor: pointer; font-family: var(--font-body); font-size: 11px;
  font-weight: 600; white-space: nowrap; letter-spacing: 0.2px;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase; flex-shrink: 0;
}
.sub-tab:hover  { color: var(--text); border-bottom-color: var(--border2); }
.sub-tab.active { color: var(--cc); border-bottom-color: var(--cc); }

/* ── RESPONSIVE BREAKPOINTS ───────────────────── */
/* Hide patch badge text on medium screens */
@media (max-width: 1100px) {
  #patch-badge span:not(.pdot) { display: none; }
  #patch-badge { padding: 4px 8px; }
  #hdr-settings { display: none; } /* move to hamburger later */
}
/* Collapse search on small screens */
@media (max-width: 800px) {
  #header { height: auto; min-height: 52px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  #char-search { max-width: 100%; flex: 1 1 100%; order: 2; }
  #spec-display { order: 3; flex: 1 1 auto; }
  #logo { order: 1; }
  #patch-badge { order: 4; margin-left: 0; }
  .tab { padding: 9px 10px; font-size: 11px; }
  .tab-panel { padding: 12px; }
}
/* Stack everything on mobile */
@media (max-width: 500px) {
  #char-name-inp  { min-width: 70px; }
  #char-realm-inp { min-width: 80px; }
  .fh-table { font-size: 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ── TYPOGRAPHY / MISC ────────────────────────── */
a { color: var(--rare); text-decoration: none; }
a:hover { color: var(--bright); text-decoration: underline; }
.mono   { font-family: monospace; }
.nowrap { white-space: nowrap; }
select, input[type=text], input[type=password], textarea { font-family: var(--font-body); }

/* ── LOG PASTE MODE ───────────────────────────── */
#log-search {
  display: flex; align-items: center; gap: 5px;
  flex: 1; min-width: 0; max-width: 460px;
}
#log-url-inp {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--bright); border-radius: var(--rad); padding: 5px 9px;
  font-family: var(--font-body); font-size: 13px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s; min-width: 0; flex: 1;
}
#log-url-inp:focus { border-color: var(--cc); box-shadow: 0 0 0 2px var(--cc2); }
#log-load-btn {
  flex-shrink: 0; padding: 5px 14px; background: var(--cc2); border: 1px solid var(--cc);
  color: var(--cc); border-radius: var(--rad); cursor: pointer;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  letter-spacing: 0.3px; white-space: nowrap; transition: background 0.15s, box-shadow 0.15s;
}
#log-load-btn:hover { background: var(--cc2); box-shadow: var(--glow); }
#log-toggle-btn, #char-toggle-btn {
  flex-shrink: 0; padding: 4px 9px; background: transparent;
  border: 1px solid var(--border2); color: var(--text3); border-radius: var(--rad);
  cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.15s;
  white-space: nowrap;
}
#log-toggle-btn:hover, #char-toggle-btn:hover { border-color: var(--cc); color: var(--cc); }

/* ── GUILD SEARCH MODE ────────────────────────── */
#guild-search {
  display: flex; align-items: center; gap: 5px;
  flex: 1; min-width: 0; max-width: 460px;
}
#guild-name-inp, #guild-realm-inp, #guild-region-inp {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--bright); border-radius: var(--rad); padding: 5px 9px;
  font-family: var(--font-body); font-size: 13px; outline: none;
  transition: border-color 0.15s; min-width: 0;
}
#guild-name-inp  { flex: 1.3; }
#guild-realm-inp { flex: 1.4; }
#guild-region-inp { flex: 0 0 62px; }
#guild-name-inp:focus, #guild-realm-inp:focus { border-color: var(--cc); }
#guild-region-inp option { background: var(--bg3); }
#guild-load-btn {
  flex-shrink: 0; padding: 5px 14px; background: var(--cc2);
  border: 1px solid var(--cc); color: var(--cc); border-radius: var(--rad);
  cursor: pointer; font-family: var(--font-head); font-size: 14px; font-weight: 600;
  white-space: nowrap; transition: background 0.15s;
}
#guild-load-btn:hover { background: var(--cc2); }
#guild-toggle-btn {
  flex-shrink: 0; padding: 4px 9px; background: transparent;
  border: 1px solid var(--border2); color: var(--text3); border-radius: var(--rad);
  cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.15s; white-space: nowrap;
}
#guild-toggle-btn:hover { border-color: var(--cc); color: var(--cc); }

/* ── Theme toggle ─────────────────────────────────────── */
#theme-toggle {
  display: flex;
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
#theme-toggle .theme-pip {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text3);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
#theme-toggle .theme-pip.active {
  background: var(--cc2);
  color: var(--cc);
}
#theme-toggle .theme-pip:hover:not(.active) {
  color: var(--text2);
}