/* WoW Item Manager - Multi-Phasic Operating System */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Open+Sans:wght@400;600&family=JetBrains+Mono:wght@400;700&display=swap');

/* -----------------------------------------------------------
   1. VARIABLES & THEMES
   ----------------------------------------------------------- */
:root {
    --wow-bg: #0d0a08;
    --wow-panel: #151210;
    --wow-border: #2a241f;
    --wow-gold: #f8b700;
    --wow-link: #ffcc00;
    --wow-text: #e7e7e7;
    --wow-text-muted: #8a827a;
    --wow-font: 'Open Sans', sans-serif;
    --wow-radius: 6px;
    --wow-shadow: 0 4px 20px rgba(0,0,0,0.8);
    --header-glow: transparent;
}

[data-theme="gnomish"] {
    --wow-bg: #0d1117;
    --wow-panel: #161b22;
    --wow-border: #d4af37;
    --wow-gold: #00f2ff;
    --wow-link: #39ff14;
    --wow-text: #c9d1d9;
    --wow-text-muted: #8b949e;
    --wow-font: 'JetBrains Mono', monospace;
    --wow-radius: 0px;
    --wow-shadow: 4px 4px 0px rgba(0,0,0,0.8);
    --header-glow: 0 0 15px rgba(0, 242, 255, 0.4);
}

[data-theme="goblin"] {
    /* Base Foundations: Charcoal oil-grease palette */
    --wow-bg: #0b0d09;
    --wow-panel: #141912;
    --wow-border: #3b4231; /* Coroded copper / industrial iron oxide */
    
    /* Interactive Elements: Macabre toxic lime & pure gold */
    --wow-gold: #c3ff00; /* Volatile sludge green / high-octane chemical flash */
    --wow-link: #ff8400; /* Burnished engineering copper / coin gold */
    --wow-text: #d2ded1;
    --wow-text-muted: #6b7a67;
    
    /* Structural Rules: Heavy industrial casting */
    --wow-font: 'JetBrains Mono', monospace; /* Looks like serial punch-cards or invoices */
    --wow-radius: 4px; /* Rigid, blocky stamped metal cuts */
    --wow-shadow: 5px 5px 15px rgba(0,0,0,0.95);
    --header-glow: 0 0 12px rgba(195, 255, 0, 0.35);
}

[data-theme="druid"] {
    --wow-bg: #04120a;
    --wow-panel: #0a1f13;
    --wow-border: #3d5a45;
    --wow-gold: #44ffae;
    --wow-link: #a3ff00;
    --wow-text: #d1e8d5;
    --wow-text-muted: #9bbca7;
    --wow-font: 'Cinzel', serif;
    --wow-radius: 12px;
    --wow-shadow: 0 0 15px rgba(68, 255, 174, 0.15);
    --header-glow: 0 0 8px rgba(68, 255, 174, 0.3);
}

[data-theme="legion"] {
    /* Base Foundations: Jagged basalt and shadow-purple depth */
    --wow-bg: #09050e;      /* Abyssal purple-black */
    --wow-panel: #110d18;   /* Fragmented dark stone core */
    --wow-border: #321c4b;  /* Hardened shadow-crystals */
    
    /* Interactive Elements: Unholy radioactive green & searing soul-fire */
    --wow-gold: #00ff66;    /* Pure, unadulterated radioactive Fel green */
    --wow-link: #adff2f;    /* Corrupted charting highlights */
    --wow-text: #e2daf0;
    --wow-text-muted: #67557a;
    
    /* Structural Rules: Sharp, aggressive architecture */
    --wow-font: 'Cinzel', serif; /* Gives headers a demonic, ancient runic feel */
    --wow-radius: 2px;          /* Sharp, weaponized basalt fractures */
    --wow-shadow: 0 0 25px rgba(0, 255, 102, 0.15);
    --header-glow: 0 0 20px rgba(0, 255, 102, 0.5);
}

[data-theme="classic"] {
    /* Base Foundations: Deep, weathered iron and stone backing */
    --wow-bg: #0c0907;       /* Midnight charcoal */
    --wow-panel: #1a140f;    /* Warm, dark hearth-stone */
    --wow-border: #3d3126;   /* Chiseled iron-rimmed framing */
    
    /* Interactive Elements: Authentic original gold & rare item blue */
    --wow-gold: #ffd100;     /* The true, warm WoW gold-yellow */
    --wow-link: #0070dd;     /* Classic Rare/Rare-Elite item blue */
    --wow-text: #f0ebe1;     /* Soft, readable antique linen white */
    --wow-text-muted: #7d6f62; /* Weathered parchment shadow */
    
    /* Structural Rules: Heavy desktop client physics */
    --wow-font: 'Open Sans', sans-serif; /* Returns typography to cozy fantasy standard */
    --wow-radius: 5px;                  /* Classic micro-beveled box corners */
    --wow-shadow: 0 12px 24px rgba(0,0,0,0.95), inset 0 0 10px rgba(0,0,0,0.8);
    --header-glow: transparent;
}

[data-theme="draenei"] {
    /* Base Foundations: Deep starlight purple and polished argenite marble */
    --wow-bg: #0a0812;      /* Deep interstellar void */
    --wow-panel: #131024;   /* Dark crystalline matrix panel */
    --wow-border: #312954;  /* Polished amethyst-infused alloys */
    
    /* Interactive Elements: Pure Holy Light and Naaru shard frequencies */
    --wow-gold: #00f0ff;    /* Resonant Arcane cyan beacon */
    --wow-link: #ffcc00;    /* Luminescent Naaru Holy gold */
    --wow-text: #e3def2;    /* Soft lavender-tinted silver */
    --wow-text-muted: #62598c;
    
    /* Structural Rules: Elegant, curved geometric precision */
    --wow-font: 'Open Sans', sans-serif; 
    --wow-radius: 16px;     /* Smooth, swept crystalline arches and domes */
    --wow-shadow: 0 0 25px rgba(0, 240, 255, 0.12), inset 0 0 12px rgba(162, 0, 255, 0.1);
    --header-glow: 0 0 15px rgba(0, 240, 255, 0.4);
}

[data-theme="scourge"] {
    /* Base Foundations: Frozen trenches and solid saronite plating */
    --wow-bg: #04070a;      /* Deep, frozen abyssal trench black */
    --wow-panel: #0d1216;   /* Hardened saronite metal core slab */
    --wow-border: #1e2b35;  /* Cold-forged iron seams */
    
    /* Interactive Elements: Runic frost radiation & plague toxins */
    --wow-gold: #5ef3ff;    /* Piercing, unholy runic frost blue */
    --wow-link: #33ff99;    /* Volatile plague-strike unholy green */
    --wow-text: #deedf5;    /* Ghostly, pale death-chill white */
    --wow-text-muted: #526878;
    
    /* Structural Rules: Sharp, intimidating spires */
    --wow-font: 'JetBrains Mono', monospace; 
    --wow-radius: 1px;      /* Brutalist, blocky, unforgiving angles */
    --wow-shadow: 0 0 20px rgba(94, 243, 255, 0.1), inset 0 0 15px rgba(0, 0, 0, 0.9);
    --header-glow: 0 0 15px rgba(94, 243, 255, 0.35);
}

[data-theme="mechagon"] {
    /* Base Foundations: Stamped copper sheets and mechanical bay oil */
    --wow-bg: #0f0d0a;      /* Smoggy, greasy forge grease black */
    --wow-panel: #1a1612;   /* Riveted brass processing housing */
    --wow-border: #423528;  /* Corroded hydraulic piston casing */
    
    /* Interactive Elements: Vacuum tube currents & laser welding indicators */
    --wow-gold: #ff9000;    /* Blinding, superheated wire filament orange */
    --wow-link: #ff3c00;    /* Emergency core exhaust overload red */
    --wow-text: #ebdccb;    /* Warm, unpolished magnesium silver */
    --wow-text-muted: #73604c;
    
    /* Structural Rules: Strict, standardized assembly blue-prints */
    --wow-font: 'JetBrains Mono', monospace; 
    --wow-radius: 0px;      /* Absolute 0px. Everything must be machined flush. */
    --wow-shadow: 4px 4px 0px #050403;
    --header-glow: 0 0 10px rgba(255, 144, 0, 0.4);
}

[data-theme="paladin"] {
    /* Base Foundations: Immaculate marble and consecrated cathedral stone */
    --wow-bg: #0d0c0a;      /* Deep sanctuary shadow */
    --wow-panel: #1b1812;   /* Consecrated dark alabaster block */
    --wow-border: #4d412d;  /* Burnished armor-gilded brass trimming */
    
    /* Interactive Elements: Pure Holy Light and Libram illumination */
    --wow-gold: #ffcc00;    /* Consecrated Silver Hand radiant gold */
    --wow-link: #fff0b3;    /* Blinding, translucent holy crystal flare */
    --wow-text: #fdfaf2;    /* Pure linen vestment white */
    --wow-text-muted: #8c7f69;
    
    /* Structural Rules: Regal, symmetrical, and enduring */
    --wow-font: 'Open Sans', sans-serif; 
    --wow-radius: 8px;      /* Swept, elegant armor-plate bevels */
    --wow-shadow: 0 0 20px rgba(255, 204, 0, 0.08), inset 0 0 10px rgba(0,0,0,0.8);
    --header-glow: 0 0 15px rgba(255, 204, 0, 0.35);
}

[data-theme="dalaran"] {
    /* Base Foundations: Violet Citadel masonry and dark amethyst stone */
    --wow-bg: #09060f;      /* Deep violet-black void shadow */
    --wow-panel: #161024;   /* Polished amethyst marble chamber wall */
    --wow-border: #3b2a59;  /* Magically reinforced structural filigree */
    
    /* Interactive Elements: Floating ley-line runes and high magus gold */
    --wow-gold: #e5b3ff;    /* Glowing, translucent arcane lavender pulse */
    --wow-link: #00e1ff;    /* Pure ley-line energy current cyan */
    --wow-text: #f0ebf7;    /* Arcane researcher parchment white */
    --wow-text-muted: #72608a;
    
    /* Structural Rules: Smooth, sweeping magocracy arches */
    --wow-font: 'Open Sans', sans-serif; 
    --wow-radius: 10px;     /* Elegant, rounded observatory dome curves */
    --wow-shadow: 0 0 30px rgba(170, 0, 255, 0.12), inset 0 0 15px rgba(0, 225, 255, 0.04);
    --header-glow: 0 0 18px rgba(170, 0, 255, 0.4);
}

[data-theme="parchment"] {
    /* Base Foundations: Authentic game parchment color matrix */
    --wow-bg: #d1c2a5;       /* Outer dark stone trim / heavy desktop contrast */
    --wow-panel: #f2e6cb;    /* Pure, fibrous in-game parchment sheet */
    --wow-border: #4a3c28;   /* Burnished bronze ink-border trim */
    
    /* Interactive Elements: Rich iron-gall inks and vintage tokens */
    --wow-gold: #1c140c;     /* Deep charcoal-black lettering */
    --wow-link: #154575;     /* Weathered indigo-blue rare item ink */
    --wow-text: #2b1f13;     /* Rich sepia-toned body text */
    --wow-text-muted: #705e46; /* Faded watermark script shadow */
    
    /* Structural Rules: Heavy fantasy book binding */
    --wow-font: 'Open Sans', sans-serif; 
    --wow-radius: 4px;       /* Crisp, hand-cut paper and parchment corners */
    --wow-shadow: 0 8px 20px rgba(43, 31, 19, 0.25), inset 0 0 12px rgba(92, 73, 50, 0.15);
    --header-glow: transparent;
}

[data-theme="grimoire"] {
    /* Base Foundations: Charred vellum and deep charcoal leather binding */
    --wow-bg: #0a0806;       /* Obsidian volcanic ash obsidian backing */
    --wow-panel: #1a140f;    /* Weathered, smoke-stained dark wood parchment */
    --wow-border: #38291d;   /* Scorched iron-ore rivets / dark leather trim */
    
    /* Interactive Elements: Faded charcoal-ink and ancient bone scripts */
    --wow-gold: #cfa876;     /* Branded sepia-gold / dry autumn leaf lacquer */
    --wow-link: #4982b5;     /* Faded Indigo ink token / shadow-magic blue */
    --wow-text: #bdae99;     /* Aged, dust-covered linen white text */
    --wow-text-muted: #5e4f3f; /* Faded ghost watermark script shadow */
    
    /* Structural Rules: Heavy, ancient tome binding rules */
    --wow-font: 'Open Sans', sans-serif; 
    --wow-radius: 4px;       /* Crisp, hand-sheared decaying scroll corners */
    --wow-shadow: 0 10px 25px rgba(0,0,0,0.95), inset 0 0 15px rgba(0, 0, 0, 0.85);
    --header-glow: transparent;
}

/* -----------------------------------------------------------
   2. GLOBAL FOUNDATION
   ----------------------------------------------------------- */
html, body {
    background-color: var(--wow-bg) !important;
    color: var(--wow-text);
    font-family: var(--wow-font);
    min-height: 100vh;
}

.wow-page-header {
    color: var(--wow-gold) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
}

.container-fluid, .bg-dark {
    background-color: var(--wow-bg) !important;
}

.navbar, header, .wow-nav {
    background-color: var(--wow-panel) !important;
    border-bottom: 1px solid var(--wow-border) !important;
    box-shadow: var(--wow-shadow) !important;
}

/* -----------------------------------------------------------
   3. DROPDOWNS FOR MENU SYSTEM
     - This ensures dropdowns match the theme and are readable.
     - It also adds a subtle hover effect to enhance interactivity.
   ----------------------------------------------------------- */
.wow-dropdown-bg {
    background-color: var(--wow-panel) !important;
    border: 1px solid var(--wow-border) !important;
    box-shadow: var(--wow-shadow);
}

.wow-dropdown-bg .dropdown-item {
    color: var(--wow-text) !important;
}

.wow-dropdown-bg .dropdown-item:hover {
    background-color: rgba(255, 209, 0, 0.1) !important;
    color: var(--wow-gold) !important;
}

.wow-dropdown-bg .dropdown-divider {
    border-top: 1px solid var(--wow-border);
}

/* -----------------------------------------------------------
   3. TEXT UTILITIES (NEW + FIXED)
   ----------------------------------------------------------- */
.text-wow-gold {
    color: var(--wow-gold) !important;
}

.text-wow-muted {
    color: var(--wow-text-muted) !important;
}

.text-wow-light {
    color: var(--wow-text) !important;
}

.text-wow-legendary {
    color: var(--wow-link) !important;
}

:root {
    --wow-blue: #00ccff; /* Theme-accurate Classic color match */
}
.text-wow-blue { color: var(--wow-blue) !important; }
.border-wow-blue { border-color: var(--wow-blue) !important; }

/* Subtle backlighting glow paths that match your dynamic theme engine */
.badge.text-wow-gold {
    text-shadow: 0 0 4px rgba(248, 183, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(248, 183, 0, 0.15) !important;
}
.badge.text-wow-blue {
    text-shadow: 0 0 4px rgba(0, 204, 255, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 204, 255, 0.15) !important;
}

/* File selector box alignment correction */
.edit-input[type="file"] {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 2.2;
    overflow: hidden;
}

/* Table Grid Variant Caps (Flattens the explicit left line border out for compact text grids) */
.badge.status-pill {
    border-left-width: 1px !important;
    padding: 4px 8px;
    letter-spacing: 0.5px;
}

/* -----------------------------------------------------------
   4. BACKGROUND UTILITIES (NEW)
   ----------------------------------------------------------- */
.bg-wow-panel {
    background-color: var(--wow-panel) !important;
}

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

.bg-wow-gold {
    background-color: var(--wow-gold) !important;
    color: #000 !important;
}

/* -----------------------------------------------------------
   5. BORDER UTILITIES (NEW)
   ----------------------------------------------------------- */
.border-wow {
    border-color: var(--wow-border) !important;
}

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

/* -----------------------------------------------------------
   6. TABLE STYLES
   ----------------------------------------------------------- */
.table, .table-dark {
    --bs-table-bg: transparent !important;
    background-color: transparent !important;
    color: var(--wow-text) !important;
    border-color: var(--wow-border) !important;
    margin-bottom: 0;
}

.table td, .table th {
    background-color: transparent !important;
    border-color: var(--wow-border) !important;
    color: var(--wow-text) !important;
}

.table thead th {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: var(--wow-gold) !important;
    border-bottom: 2px solid var(--wow-gold) !important;
}

.table-hover tbody tr:hover td {
    background-color: rgba(255, 209, 0, 0.04) !important;
}

.fw-mono {
    font-family: 'JetBrains Mono', monospace;
    color: var(--wow-text-muted) !important;
    font-size: 0.85rem;
}

/* -----------------------------------------------------------
   7. PAGINATION
   ----------------------------------------------------------- */
.card-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: rgba(0,0,0,0.3) !important;
}

.wow-pagination nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.wow-pagination nav p.text-sm {
    color: var(--wow-text-muted) !important;
    margin-bottom: 1.25rem !important;
    text-align: center !important;
}

.wow-pagination .inline-flex.shadow-sm {
    display: inline-flex !important;
    gap: 6px !important;
    box-shadow: none !important;
}

.wow-pagination a,
.wow-pagination span.inline-flex {
    background-color: var(--wow-panel) !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
    min-width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--wow-radius) !important;
    text-decoration: none !important;
}

.wow-pagination span[aria-current="page"] span {
    background-color: var(--wow-gold) !important;
    color: #000 !important;
    font-weight: 800 !important;
}

/* -----------------------------------------------------------
   8. UI COMPONENTS
   ----------------------------------------------------------- */
.input-group .form-control {
    border: 1px solid var(--wow-border) !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: var(--wow-gold) !important;
}

.bg-black, .badge-dark {
    background-color: #000 !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
}

.card {
    background-color: var(--wow-panel) !important;
    border: 1px solid var(--wow-border) !important;
    border-radius: var(--wow-radius);
}

.status-pill {
    padding: 2px 10px;
    border-radius: var(--wow-radius);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 3px solid transparent !important;
}

.status-ready {
    background: rgba(68, 255, 174, 0.1);
    color: #44ffae;
    border-left-color: #44ffae !important;
}

/* Pending / Processing - A high-visibility Amber/Orange */
.status-pending {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-left-color: #ffc107 !important;
}

/* Empty / Missing - A desaturated Grey/Blue */
.status-empty {
    background: rgba(108, 117, 125, 0.15);
    color: #adb5bd;
    border-left-color: #6c757d !important;
}

/* Red / Error / Removed - A saturated Red */
.status-ghost {
    background: rgba(220, 53, 69, 0.1);
    color: #ff4d4d;
    border-left-color: #dc3545 !important;
}

/* The pulse animation for the pending state */
.animate-pulse {
    animation: wow-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes wow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

.btn-wow {
    background-color: var(--wow-panel) !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
    font-weight: bold;
}

/* -----------------------------------------------------------
   9. THEME FLARE
   ----------------------------------------------------------- */
[data-theme="gnomish"] body {
    background-image:
        linear-gradient(rgba(0, 242, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

[data-theme="druid"] body {
    background-image: radial-gradient(circle at 50% 50%, rgba(68, 255, 174, 0.04) 0%, transparent 70%);
}

[data-theme="druid"] .card {
    border-top: 3px solid var(--wow-gold) !important;
}

/* -----------------------------------------------------------
   9a. THEME FLARE - BILGEWATER APPARATUS ORCHESTRATION (GOBLIN)
   ----------------------------------------------------------- */
[data-theme="goblin"] body {
    /* Industrial cross-hatching blueprint overlay */
    background-image: 
        linear-gradient(rgba(195, 255, 0, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(195, 255, 0, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    position: relative;
}

/* Give cards a riveted, welded sheet-metal feel */
[data-theme="goblin"] .card {
    border-bottom: 3px solid var(--wow-border) !important;
    border-right: 2px solid var(--wow-border) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.01) 0%, transparent 100%);
}

/* Subtle rust-glow highlight on panel focus */
[data-theme="goblin"] .edit-input:focus {
    border-color: var(--wow-gold) !important;
    background-color: #000 !important;
}

/* Soft gold backing accent highlights for active rows */
[data-theme="goblin"] .table-hover tbody tr:hover td {
    background-color: rgba(195, 255, 0, 0.03) !important;
}

/* -----------------------------------------------------------
   9b. THEME FLARE - LEGION CORRUPTION MANIFESTATION (LEGION)
     - This theme is designed to evoke the chaotic, fel-infused aesthetic of the Legion expansion.
     - It uses aggressive green accents and jagged visual elements to create a sense of corruption and danger.
   ----------------------------------------------------------- */
[data-theme="legion"] body {
    /* Background evokes active fel-lava lines shifting behind the layout grid */
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 255, 102, 0.05) 0%, transparent 75%);
    position: relative;
    overflow-x: hidden;
}

/* Pseudo-element to project a scrolling chaotic energy matrix beam */
[data-theme="legion"] body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0, 255, 102, 0.01) 50%, rgba(0, 255, 102, 0.0) 50%);
    background-size: 100% 4px;
    z-index: 999;
    pointer-events: none; /* Allows clicks to pass through cleanly */
    opacity: 0.7;
}

/* Transform standard panel components into jagged floating citadel chunks */
[data-theme="legion"] .card {
    border-top: 2px solid var(--wow-gold) !important;
    border-left: 1px solid var(--wow-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), inset 0 0 15px rgba(0, 255, 102, 0.03) !important;
}

/* Corrupt text fields with a blinding neon flash on selection click */
[data-theme="legion"] .edit-input:focus {
    border-color: var(--wow-gold) !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4) !important;
    background-color: #050308 !important;
}

/* Active collection item list row hover states */
[data-theme="legion"] .table-hover tbody tr:hover td {
    background-color: rgba(0, 255, 102, 0.03) !important;
    text-shadow: 0 0 4px rgba(0, 255, 102, 0.4);
}

/* Forces data headers to render with an aggressive look */
[data-theme="legion"] .table thead th {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

/* -----------------------------------------------------------
   9c. CLASSIC THEME FLARE - STANDARD ISSUE 2004 INVENTORY APPARATUS
   ----------------------------------------------------------- */
[data-theme="classic"] body {
    /* Subtle stone grit backdrop texture overlay */
    background-image: radial-gradient(circle at 50% 50%, rgba(61, 49, 38, 0.08) 0%, transparent 80%);
    position: relative;
}

/* Give cards a chiseled frame appearance with an inner shadow bezel */
[data-theme="classic"] .card {
    border: 2px solid var(--wow-border) !important;
    outline: 1px solid #100c09; /* Outer crisp depth shadow line */
    box-shadow: var(--wow-shadow) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, transparent 100%);
}

/* Transform inputs into deeply recessed parchment ink wells */
[data-theme="classic"] .edit-input {
    background-color: #080605 !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9) !important;
}

/* Blends selection focus into a distinct warm metallic border */
[data-theme="classic"] .edit-input:focus {
    border-color: #a37c3f !important; /* Polished brass indicator */
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.9), 0 0 4px rgba(163, 124, 63, 0.2) !important;
}

/* Row interaction background color mimics original tooltips */
[data-theme="classic"] .table-hover tbody tr:hover td {
    background-color: rgba(61, 49, 38, 0.15) !important;
}

/* Force data headers to look like character window tabs */
[data-theme="classic"] .table thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
}

/* -----------------------------------------------------------
   9d. THEME FLARE - EXODAR CRYSTALLINE DATA APPARATUS
   ----------------------------------------------------------- */
[data-theme="draenei"] body {
    /* Subtle geometric crystal lattice backdrop */
    background-image: 
        linear-gradient(30deg, rgba(162, 0, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(162, 0, 255, 0.015) 87.5%, rgba(162, 0, 255, 0.015)),
        linear-gradient(150deg, rgba(162, 0, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(162, 0, 255, 0.015) 87.5%, rgba(162, 0, 255, 0.015)),
        linear-gradient(300deg, rgba(0, 240, 255, 0.01) 24%, transparent 24.5%, transparent 76%, rgba(0, 240, 255, 0.01) 76.5%, rgba(0, 240, 255, 0.01));
    background-size: 60px 105px;
}

/* Transform panels into smooth, translucent crystal shards */
[data-theme="draenei"] .card {
    border: 1px solid var(--wow-border) !important;
    border-top: 3px solid rgba(0, 240, 255, 0.6) !important; /* Naaru crown highlight cap */
    background-image: linear-gradient(180deg, rgba(162, 0, 255, 0.02) 0%, transparent 100%);
    box-shadow: var(--wow-shadow) !important;
}

/* Reframe data inputs to look like lit crystal attunement ports */
[data-theme="draenei"] .edit-input {
    background-color: #05040a !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
    border-radius: 8px !important;
}

/* Illuminate inputs with a bright cyan light when selected */
[data-theme="draenei"] .edit-input:focus {
    border-color: var(--wow-gold) !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3) !important;
}

/* Soft starlight illumination for table row highlights */
[data-theme="draenei"] .table-hover tbody tr:hover td {
    background-color: rgba(0, 240, 255, 0.02) !important;
    color: #fff !important;
}

/* Stylize standard font headers to make them look sleek and futuristic */
[data-theme="draenei"] .table thead th {
    font-weight: 600;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--wow-gold) !important;
    border-bottom: 2px solid var(--wow-border) !important;
}

/* -----------------------------------------------------------
   9e. THEME FLARE - ICECROWN SARONITE CONDUIT APPARATUS
   ----------------------------------------------------------- */
[data-theme="scourge"] body {
    /* Horizontal frozen mist lines that slice across the backdrop array */
    background-image: linear-gradient(rgba(94, 243, 255, 0.008) 1px, transparent 1px);
    background-size: 100% 24px;
    position: relative;
}

/* Hardened saronite plating layout structure overrides */
[data-theme="scourge"] .card {
    border: 2px solid var(--wow-border) !important;
    border-left: 4px solid var(--wow-border) !important; /* Thick brutalist iron pillars */
    background-image: linear-gradient(180deg, rgba(94, 243, 255, 0.01) 0%, transparent 100%);
}

/* Recess text inputs into cold iron weapon slots */
[data-theme="scourge"] .edit-input {
    background-color: #030508 !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
}

/* Frost flash flare when elements are actively selected */
[data-theme="scourge"] .edit-input:focus {
    border-color: var(--wow-gold) !important;
    box-shadow: 0 0 14px rgba(94, 243, 255, 0.25) !important;
}

/* Chill aura row hover matrix adjustments */
[data-theme="scourge"] .table-hover tbody tr:hover td {
    background-color: rgba(94, 243, 255, 0.02) !important;
    color: #fff !important;
}

/* Render row selection elements with sharp monospace tracking */
[data-theme="scourge"] .table thead th {
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--wow-gold) !important;
}

/* -----------------------------------------------------------
   9f. THEME FLARE - SPROCKET-OPERATED COMPUTATION UNIT
   ----------------------------------------------------------- */
[data-theme="mechagon"] body {
    /* Hard industrial grid resembling punch cards or technical layouts */
    background-image: 
        linear-gradient(rgba(255, 144, 0, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 144, 0, 0.01) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Transform layout cards into hard stamped metal panels with exposed edges */
[data-theme="mechagon"] .card {
    border: 1px solid var(--wow-border) !important;
    border-bottom: 4px solid var(--wow-border) !important;
    border-right: 3px solid var(--wow-border) !important;
    box-shadow: var(--wow-shadow) !important;
}

/* Turn inputs into glass dial readouts */
[data-theme="mechagon"] .edit-input {
    background-color: #060504 !important;
    border: 1px dashed var(--wow-border) !important; /* Machine seam accent */
    color: var(--wow-gold) !important;
}

/* Incandescent element glow when clicking into processing selectors */
[data-theme="mechagon"] .edit-input:focus {
    border: 1px solid var(--wow-gold) !important;
    box-shadow: 0 0 8px rgba(255, 144, 0, 0.3) !important;
}

/* High-voltage contact loop table row selection mechanics */
[data-theme="mechagon"] .table-hover tbody tr:hover td {
    background-color: rgba(255, 144, 0, 0.04) !important;
    outline: 1px dashed rgba(255, 144, 0, 0.2);
}

/* Force text layout headers to look like punched blueprint indices */
[data-theme="mechagon"] .table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-bottom: 2px dashed var(--wow-gold) !important;
}

/* -----------------------------------------------------------
   9g. THEME FLARE - CONSECRATED LIBRAM MATRIX ORCHESTRATION
   ----------------------------------------------------------- */
[data-theme="paladin"] body {
    /* Radiating holy ground lighting flare coming from the top center */
    background-image: radial-gradient(circle at 50% 0%, rgba(255, 204, 0, 0.04) 0%, transparent 65%);
    position: relative;
}

/* Transform grid cards into heavy, gold-rimmed relics */
[data-theme="paladin"] .card {
    border: 1px solid var(--wow-border) !important;
    border-top: 3px solid var(--wow-gold) !important; /* Consecrated crest capping line */
    box-shadow: var(--wow-shadow) !important;
    background-image: linear-gradient(180deg, rgba(255, 240, 179, 0.01) 0%, transparent 100%);
}

/* Turn inputs into smooth, pristine stone inscription trays */
[data-theme="paladin"] .edit-input {
    background-color: #070605 !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-text) !important;
}

/* Consecrate text boxes with a warm solar glow on selection click */
[data-theme="paladin"] .edit-input:focus {
    border-color: var(--wow-gold) !important;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.25) !important;
    background-color: #000 !important;
}

/* Consecrated ground list row hover highlight matrices */
[data-theme="paladin"] .table-hover tbody tr:hover td {
    background-color: rgba(255, 204, 0, 0.02) !important;
    text-shadow: 0 0 3px rgba(255, 240, 179, 0.3);
}

/* Force data headers to render with an archival, chronicler layout look */
[data-theme="paladin"] .table thead th {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.75px;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--wow-gold) !important;
    border-bottom: 2px solid var(--wow-border) !important;
}

/* -----------------------------------------------------------
   9h. THEME FLARE - KIRIN TOR LEY-CONDUIT APPARATUS
   ----------------------------------------------------------- */
[data-theme="dalaran"] body {
    /* Concentric arcane barrier arrays projecting from the center */
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(170, 0, 255, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(0, 225, 255, 0.02) 0%, transparent 70%);
    position: relative;
}

/* Transform standard database rows into elegant floating panels */
[data-theme="dalaran"] .card {
    border: 1px solid var(--wow-border) !important;
    border-top: 3px solid rgba(170, 0, 255, 0.6) !important; /* Arcane runic crown line */
    background-image: linear-gradient(180deg, rgba(170, 0, 255, 0.02) 0%, transparent 100%);
    box-shadow: var(--wow-shadow) !important;
}

/* Turn input text boxes into shimmering viewing pools */
[data-theme="dalaran"] .edit-input {
    background-color: #06040a !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-link) !important; /* Shimmering cyan characters */
}

/* Evoke a sudden brilliant burst of magic when inputs are selected */
[data-theme="dalaran"] .edit-input:focus {
    border-color: #aa00ff !important;
    box-shadow: 0 0 14px rgba(170, 0, 255, 0.35) !important;
    background-color: #020105 !important;
}

/* Soft magic field row hover illumination dynamics */
[data-theme="dalaran"] .table-hover tbody tr:hover td {
    background-color: rgba(170, 0, 255, 0.03) !important;
    color: #fff !important;
}

/* Force table data grid headers to look like archival catalog scrolls */
[data-theme="dalaran"] .table thead th {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #ffd100 !important; /* Burnished high-magus framing gold */
    border-bottom: 2px solid var(--wow-border) !important;
}

/* -----------------------------------------------------------
   9i. THEME FLARE - HAND-CRINKLED INVENTORY INK LEDGER
   ----------------------------------------------------------- */
[data-theme="parchment"] body {
    /* Heavy vignette shadow to simulate a ledger resting on a dim tavern table */
    background-image: radial-gradient(circle at 50% 50%, rgba(242, 230, 203, 0.4) 0%, rgba(74, 60, 40, 0.15) 100%);
    background-color: var(--wow-bg) !important;
    color: var(--wow-text) !important;
}

/* Transform layout cards into crisp, clean sheets of thick vellum */
[data-theme="parchment"] .card {
    border: 2px solid var(--wow-border) !important;
    background-color: var(--wow-panel) !important;
    box-shadow: var(--wow-shadow) !important;
}

/* Flatten the background panels for text filter matrices */
[data-theme="parchment"] .card-body.shadow-inner {
    box-shadow: inset 0 0 8px rgba(74, 60, 40, 0.1) !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Turn inputs into deeply recessed, ink-absorbent vellum fields */
[data-theme="parchment"] .edit-input,
[data-theme="parchment"] .form-select,
[data-theme="parchment"] .form-control {
    background-color: #f7f0df !important;
    border: 1px solid var(--wow-border) !important;
    color: #000 !important;
    box-shadow: inset 0 2px 4px rgba(74, 60, 40, 0.1) !important;
}

/* Subtle, crisp border outline on active input selection */
[data-theme="parchment"] .edit-input:focus,
[data-theme="parchment"] .form-select:focus {
    border-color: #000 !important;
    box-shadow: inset 0 2px 4px rgba(74, 60, 40, 0.1) !important;
    outline: none;
}

/* Rich ink row highlight matrices for dataset hovering */
[data-theme="parchment"] .table-hover tbody tr:hover td {
    background-color: rgba(74, 60, 40, 0.05) !important;
    color: #000 !important;
}

/* Force data columns and tables to behave like archival scroll grids */
[data-theme="parchment"] .table thead th {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    background-color: rgba(74, 60, 40, 0.08) !important;
    border-bottom: 2px solid var(--wow-border) !important;
    color: var(--wow-gold) !important; /* Resolves to deep iron-gall charcoal */
}

/* Ensure text indicators down inside the grid don't use old bright values */
[data-theme="parchment"] .text-wow-light { color: #000 !important; }
[data-theme="parchment"] .text-wow-muted { color: #5c4e3b !important; }
[data-theme="parchment"] .text-wow-gold { color: #8a6500 !important; }

/* Refactor font tags inside the grid rows to look like deep ink stamping */
[data-theme="parchment"] .fw-bold {
    font-weight: 700 !important;
    color: #1c140c !important;
}

/* -----------------------------------------------------------
   9j. THEME FLARE - CHARRED GRIMOIRE DATA MATRIX LEDGER
   ----------------------------------------------------------- */
[data-theme="grimoire"] body {
    /* Ominous smoke vignette backdrop tracking */
    background-image: radial-gradient(circle at 50% 50%, rgba(26, 20, 15, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%);
    background-color: var(--wow-bg) !important;
    color: var(--wow-text) !important;
}

/* Transform grid cards into heavy plates of antique charred vellum sheets */
[data-theme="grimoire"] .card {
    border: 2px solid var(--wow-border) !important;
    background-color: var(--wow-panel) !important;
    box-shadow: var(--wow-shadow) !important;
}

/* Flatten background filter panels to keep the page scannable */
[data-theme="grimoire"] .card-body.shadow-inner {
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Recess data field inputs into deeply shadowed inkwells */
[data-theme="grimoire"] .edit-input,
[data-theme="grimoire"] .form-select,
[data-theme="grimoire"] .form-control {
    background-color: #0f0c09 !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-gold) !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Crisp, dark-brass accent highlight when inputs are selected */
[data-theme="grimoire"] .edit-input:focus,
[data-theme="grimoire"] .form-select:focus {
    border-color: #8c7353 !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 4px rgba(140, 115, 83, 0.2) !important;
    outline: none;
}

/* Aged ink row hover highlights for grid browsing comfort */
[data-theme="grimoire"] .table-hover tbody tr:hover td {
    background-color: rgba(56, 41, 29, 0.2) !important;
    color: #fff !important;
}

/* Force table data grid headers to look like ancient scroll dividers */
[data-theme="grimoire"] .table thead th {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 2px solid var(--wow-border) !important;
    color: var(--wow-gold) !important; 
}

/* Align text modifiers down inside your grid layout arrays */
[data-theme="grimoire"] .text-wow-light { color: var(--wow-text) !important; }
[data-theme="grimoire"] .text-wow-muted { color: var(--wow-text-muted) !important; }
[data-theme="grimoire"] .text-wow-gold { color: var(--wow-gold) !important; }

/* Bold structural formatting text accents */
[data-theme="grimoire"] .fw-bold {
    font-weight: 700 !important;
    color: #e6dac3 !important;
}

/* -----------------------------------------------------------
   10. ITEM DETAILS POWER-UI
   ----------------------------------------------------------- */
.card-header.bg-black.bg-opacity-40 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.icon-frame {
    width: 64px;
    height: 64px;
    border: 2px solid var(--wow-border);
    background: #000;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
}

.wow-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coord-badge {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--wow-border);
    color: var(--wow-gold);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 100px;
    line-height: 1.3;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.coord-badge span:last-child {
    font-size: 0.65rem;
    color: var(--wow-text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3px;
    padding-top: 2px;
    width: 100%;
    text-align: right;
}

.shadow-inner {
    box-shadow: inset 0 0 20px #000;
}

.edit-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wow-text-muted);
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.edit-input {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--wow-border) !important;
    color: var(--wow-text) !important;
    font-family: 'JetBrains Mono', monospace;
}

.edit-input:focus {
    border-color: var(--wow-gold) !important;
    box-shadow: 0 0 8px var(--header-glow) !important;
    outline: none;
}

.alert-warning {
    background: rgba(248, 183, 0, 0.1) !important;
    border: 1px solid var(--wow-gold) !important;
    color: var(--wow-gold) !important;
}

.alert-success {
    background: rgba(68, 255, 174, 0.1) !important;
    border: 1px solid #44ffae !important;
    color: #44ffae !important;
}

.bg-panel {
    background-color: var(--wow-panel) !important;
}

.alert-warning .text-white {
    color: #fff !important;
    text-shadow: 1px 1px 2px #000;
}

/* -----------------------------------------------------------
   11. AREA GROUP HEADER
   ----------------------------------------------------------- */
.table td.wow-area-header {
    background-color: var(--wow-panel) !important;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) !important;
    border-top: 1px solid var(--wow-border) !important;
    border-bottom: 1px solid var(--wow-border) !important;
    vertical-align: middle;
}

.bg-wow-sub-header {
    background-color: color-mix(in srgb, var(--wow-border) 45%, transparent) !important;
}

.wow-area-header .text-info {
    color: #0dcaf0 !important;
    text-shadow: 1px 1px 2px #000;
}

#live-task-bar {
    background-color: var(--wow-gold) !important;
    box-shadow: 0 0 10px var(--header-glow);
}

#live-task-container .card {
    border-left: 4px solid var(--wow-gold) !important;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% { border-left-color: var(--wow-gold); }
    50% { border-left-color: var(--wow-border); }
    100% { border-left-color: var(--wow-gold); }
}

/* resources/css/wow-theme.css */

.icon-frame-sm {
    width: 44px;
    height: 44px;
    background: #000;
    border: 2px solid var(--wow-border);
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}

.icon-frame-sm img {
    border-radius: 2px;
    object-fit: cover;
}

/* Optional: Highlight icons for manually verified NPCs */
.row-verified .icon-frame-sm {
    border-color: var(--wow-gold);
}

/* Target the native browser upload button specifically */
.edit-input::file-selector-button {
    background-color: var(--wow-panel) !important;
    color: var(--wow-gold) !important;
    border: none;
    border-right: 1px solid var(--wow-border) !important;
    border-radius: var(--wow-radius) 0 0 var(--wow-radius) !important;
    padding: 0.5rem 1rem;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-left: -12px;
    margin-right: 12px;
    font-family: var(--wow-font);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover effects for the file selector button matches your dropdown layout actions */
.edit-input::file-selector-button:hover {
    background-color: rgba(255, 209, 0, 0.1) !important;
    color: var(--wow-gold) !important;
}

/* Webkit vendor fallback to guarantee cross-browser compatibility (Chrome/Safari/Edge) */
.edit-input::-webkit-file-upload-button {
    background-color: var(--wow-panel) !important;
    color: var(--wow-gold) !important;
    border: none;
    border-right: 1px solid var(--wow-border) !important;
    border-radius: var(--wow-radius) 0 0 var(--wow-radius) !important;
    padding: 0.5rem 1rem;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-left: -12px;
    margin-right: 12px;
    font-family: var(--wow-font);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.edit-input::-webkit-file-upload-button:hover {
    background-color: rgba(255, 209, 0, 0.1) !important;
}