/* Custom styles and animations for Cerberus Web Calculator */

@layer utilities {
    .text-glow {
        text-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    }
    .box-glow {
        box-shadow: 0 0 20px -5px rgba(245, 158, 11, 0.15);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* Range input accent */
input[type="range"] {
    accent-color: #f59e0b;
}

/* Smooth Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 150ms;
}

/* Compact sticky header state (No flickering or layout shift) */
#mainHeader {
    transition: padding 0.2s ease, box-shadow 0.2s ease;
}
#mainHeader.is-sticky-compact {
    padding-top: 6px;
    padding-bottom: 6px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 229, 255, 0.2);
}
.compact-header-bar {
    display: none !important;
}

/* Pill / Segment Button Group */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: #090e1a;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid #1e293b;
}
.pill-btn {
    flex: 1;
    min-width: 26px;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.pill-btn:hover {
    color: #ffffff;
    background: #1e293b;
}
.pill-btn.active {
    color: #080d19;
    background: #00e5ff;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}
.pill-btn.active-orange {
    color: #ffffff;
    background: #f97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}
.pill-btn.active-emerald {
    color: #080d19;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Tooltip container */
.has-tooltip {
    position: relative;
    cursor: help;
}
.has-tooltip .tooltip-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px);
    background: #0c1222;
    border: 1px solid #00e5ff;
    color: #f1f5f9;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-line;
    z-index: 9999;
    box-shadow: 0 12px 30px rgba(0,0,0,0.9), 0 0 15px rgba(0, 229, 255, 0.3);
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
    min-width: 250px;
    max-width: min(380px, calc(100vw - 32px));
}

/* Default / Center alignment */
.has-tooltip .tooltip-box,
.has-tooltip .tooltip-box.tooltip-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Left alignment (drops down aligned to left edge) */
.has-tooltip .tooltip-box.tooltip-left {
    left: 0;
    right: auto;
    transform: none;
}

/* Right alignment (drops down aligned to right edge, prevents overflow) */
.has-tooltip .tooltip-box.tooltip-right {
    right: 0;
    left: auto;
    transform: none;
}

/* Upward indicator arrow */
.has-tooltip .tooltip-box::before {
    content: "";
    position: absolute;
    bottom: 100%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #00e5ff transparent;
}
.has-tooltip .tooltip-box.tooltip-left::before {
    left: 24px;
}
.has-tooltip .tooltip-box.tooltip-right::before {
    right: 24px;
    left: auto;
}
.has-tooltip .tooltip-box.tooltip-center::before,
.has-tooltip .tooltip-box:not(.tooltip-left):not(.tooltip-right)::before {
    left: 50%;
    transform: translateX(-50%);
}

.has-tooltip:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
}

/* Weapon Grade Styling (Options & Badges) */
select option {
    background-color: #0b1120 !important;
    color: #f1f5f9;
}

.grade-int-crimson, .badge-type-b { 
    color: #facc15 !important; 
    border-color: rgba(250, 204, 21, 0.4); 
    background-color: #0f172a; 
}
select option.grade-int-crimson {
    background-color: #1a1708 !important;
    color: #facc15 !important;
}

.grade-type-c, .badge-type-c { 
    color: #fb923c !important; 
    border-color: rgba(251, 146, 60, 0.5); 
    background-color: #0f172a; 
}
select option.grade-type-c {
    background-color: #1a1208 !important;
    color: #fb923c !important;
}

.grade-nuborel { 
    color: #38bdf8 !important; 
    border-color: rgba(56, 189, 248, 0.5); 
    background-color: #0f172a; 
}
select option.grade-nuborel {
    background-color: #081524 !important;
    color: #38bdf8 !important;
}

.grade-relic, .badge-relic { 
    color: #60a5fa !important; 
    border: 1px solid #3b82f6 !important; 
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.35) !important; 
    background-color: #0f172a; 
}
select option.grade-relic {
    background-color: #0a142e !important;
    color: #60a5fa !important;
}

.grade-pvp, .badge-pvp { 
    color: #d97706 !important; 
    border: 1px solid #b45309 !important; 
    box-shadow: 0 0 10px rgba(180, 83, 9, 0.35) !important; 
    background-color: #0f172a; 
}
select option.grade-pvp {
    background-color: #1a1005 !important;
    color: #d97706 !important;
}

.grade-leon, .badge-leon { 
    color: #10b981 !important; 
    border: 1px solid #059669 !important; 
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important; 
    background-color: #0f172a; 
}
select option.grade-leon {
    background-color: #061812 !important;
    color: #10b981 !important;
}

/* Ultra-compact sticky header state */
#mainHeader.is-ultra-compact {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
#mainHeader.is-ultra-compact .full-header-content > div:nth-child(2),
#mainHeader.is-ultra-compact .full-header-content > div:nth-child(3) {
    display: none !important;
}