/* =============================================================================
   INSTACALC THEME EXTRAS (Visual Overrides & Effects)
   
   Contains specialized theme logic (Terminal, Brutalist, etc.), 
   complex animations, and card design variants.
   ============================================================================= */

/* ================================================
   CARD STYLE VARIATIONS (Data Attribute Based)
   ================================================ */

/* --- SIDEBAR CARD STYLES --- */
[data-sidebar-style="elevated"] {
    --sidebar-card-bg: var(--bg);
    --sidebar-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    --sidebar-card-border: transparent;
}

[data-sidebar-style="sunken"] {
    --sidebar-card-bg: color-mix(in srgb, var(--bg) 30%, transparent);
    --sidebar-card-shadow: none;
    --sidebar-card-border: transparent;
}

[data-sidebar-style="flat"] {
    --sidebar-card-bg: var(--bg);
    --sidebar-card-shadow: none;
    --sidebar-card-border: transparent;
}

[data-sidebar-style="glass"] {
    --sidebar-card-bg: color-mix(in srgb, var(--bg) 50%, transparent);
    --sidebar-card-shadow: none;
    --sidebar-card-border: color-mix(in srgb, var(--border-color) 50%, transparent);
}

[data-sidebar-style="subtle"] {
    --sidebar-card-bg: var(--bg);
    --sidebar-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --sidebar-card-border: var(--border-color);
}

/* --- CALC CARD STYLES --- */
[data-calc-style="elevated"] {
    --calc-card-shadow: 0 0 12px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    --calc-card-border: transparent;
}

[data-calc-style="sunken"] {
    --calc-bg-color: rgba(0, 0, 0, 0.02);
    --calc-card-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --calc-card-border: rgba(0, 0, 0, 0.08);
}

[data-calc-style="glass"] {
    --calc-bg-color: color-mix(in srgb, var(--bg) 70%, transparent);
    --calc-card-shadow: none;
    --calc-card-border: color-mix(in srgb, var(--border-color) 50%, transparent);
}

/* --- LOGO & BRANDING --- */
.ic-logo { filter: var(--theme-logo-filter); }
.ic-logo-text { font-family: Lato, Helvetica Neue, Arial, sans-serif; color: var(--accent); transition: color 0.3s ease; }
body.theme-brutalist .ic-logo-text { color: var(--text); }

/* --- TERMINAL EFFECTS --- */
.theme-terminal::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.03) 0px, transparent 1px, transparent 2px, rgba(0, 255, 0, 0.03) 3px);
    pointer-events: none; z-index: -1; animation: scanline 8s linear infinite;
}

@keyframes scanline { from { transform: translateY(0); } to { transform: translateY(10px); } }

/* --- BRUTALIST THEME --- */
.theme-brutalist {
    --calc-card-border: 3px solid #000000;
    --calc-card-shadow: 6px 6px 0px 0px #000000;
    --calc-row-selected-ring: 3px 3px 0px 0px #000000;
}

/* Sharp themes: no rounded corners */
:is(.theme-brutalist, .theme-1984) *,
:is(.theme-brutalist, .theme-1984) *::before,
:is(.theme-brutalist, .theme-1984) *::after {
    border-radius: 0 !important;
}

.theme-brutalist [data-calc-wrapper] {
    border: 3px solid #000000 !important;
    box-shadow: 6px 6px 0px 0px #000000 !important;
}

/* Brutalist buttons: only inside the calc rows, not in the header/toolbar */
.theme-brutalist [data-calc-wrapper] [data-calc-rows] button {
    box-shadow: 2px 2px 0px 0px #000000;
    border: 1px solid #000000;
}

/* =====================================================================
   Row input token overrides — per theme family.

   The styling rules below read five tokens:
       --calc-row-input-bg / -bg-hover / -bg-selected
       --calc-row-input-border
       --calc-row-selected-ring
   Each theme re-declares only the tokens that differ from the dark
   default. No theme-specific selectors exist in the styling layer —
   the ring rule itself is token-driven, so themes swap values only. */

/* Selected-row ring (applied via CSS rather than a Tailwind arbitrary
   class — nested var() parens trip up the JIT scanner). */
.calc-row-input.is-selected {
    box-shadow: var(--calc-row-selected-ring);
}

/* Light themes: transparent fill + soft 1px border. A filled surface
   reads as "disabled" against a light card (native <input disabled>
   convention), so we drop the fill entirely. The accent ring still
   signals the selected row. */
.theme-light {
    --calc-row-input-bg:          transparent;
    --calc-row-input-bg-hover:    transparent;
    --calc-row-input-bg-selected: transparent;
    --calc-row-input-border:      var(--row-border);
}

/* Brutalist & 1984: hard 1px black border + transparent fill. The
   selected ring is a solid black offset shadow matching these themes'
   card/button treatment — a soft accent halo would clash with their
   sharp-edge visual language. */
:is(.theme-brutalist, .theme-1984) {
    --calc-row-input-bg:          transparent;
    --calc-row-input-bg-hover:    transparent;
    --calc-row-input-bg-selected: transparent;
    --calc-row-input-border:      #000000;
    --calc-row-selected-ring:     3px 3px 0 0 #000000;
}


/* Calc header area: no brutalist borders on title, pills, share, menus */
.theme-brutalist [data-calc-header] button,
.theme-brutalist [data-calc-header] input,
.theme-brutalist [data-calc-header] a {
    box-shadow: none !important;
    border: none !important;
}

/* New Calc button: vivid brutalist accent treatment */
.theme-brutalist button.bg-accent {
    box-shadow: 3px 3px 0px 0px #000000 !important;
    border: 2px solid #000000 !important;
}

/* --- SPECIALTY THEMES (Cyberpunk, Deco, etc.) --- */
.theme-deco::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent 0px, rgba(212, 175, 55, 0.03) 1px, transparent 2px, transparent 20px),
                      repeating-linear-gradient(90deg, transparent 0px, rgba(212, 175, 55, 0.03) 1px, transparent 2px, transparent 20px);
    pointer-events: none; z-index: -1;
}

.theme-cyber::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 50%);
    pointer-events: none; z-index: -1;
}

/* --- 1984 THEME --- */
body.theme-1984::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.075) 50%);
    background-size: 100% 3px; pointer-events: none; z-index: 9999; animation: scanline 8s linear infinite;
}

/* --- BEAUTIFUL PRESETS --- */
[data-beautiful] .calc-card,
[data-beautiful] [data-calc-wrapper] {
    background: var(--beautiful-card-bg, var(--bg-alt));
    backdrop-filter: var(--beautiful-card-backdrop, none);
    border: var(--beautiful-card-border, 1px solid var(--border-color));
    box-shadow: var(--beautiful-card-shadow, var(--calc-card-shadow));
    border-radius: var(--beautiful-card-radius, 12px);
    padding: var(--beautiful-card-padding, 16px);
}

/* --- SLIDER STYLING --- */
input[type="range"] { -webkit-appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--accent) var(--slider-progress, 0%), color-mix(in srgb, var(--accent) 15%, var(--bg-alt)) var(--slider-progress, 0%));
    height: 6px; border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 22px; width: 22px; border-radius: 50%;
    background: var(--accent); border: 3px solid var(--bg-alt); margin-top: -8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.15s ease;
}

/* --- BACKGROUND EFFECTS --- */
@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.grid-bg {
    background-image:
        linear-gradient(var(--grid-color, color-mix(in srgb, var(--text) 8%, transparent)) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color, color-mix(in srgb, var(--text) 8%, transparent)) 1px, transparent 1px);
    background-size: var(--grid-size, 50px) var(--grid-size, 50px);
    animation: gridMove 60s linear infinite;
    pointer-events: none;
}

.grid-bg,
.gradient-bg {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-bg {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 60%, transparent) 0%,
            transparent 70%);
}

/* Solid background */
[data-bg-style="solid"] .grid-bg,
[data-bg-style="solid"] .gradient-bg { opacity: 0; }
[data-bg-style="solid"],
[data-bg-style="solid"] body { background: var(--bg) !important; }

/* Grid background */
[data-bg-style="grid"] .grid-bg { opacity: 1; }
[data-bg-style="grid"] .gradient-bg { opacity: 0; }

/* Gradient background */
[data-bg-style="gradient"] .grid-bg { opacity: 0; }
[data-bg-style="gradient"] .gradient-bg { opacity: var(--gradient-intensity, 0.5); }

/* Waves background (rendered by bgPlay.js) */
[data-bg-style="waves"] .grid-bg,
[data-bg-style="waves"] .gradient-bg { opacity: 0; }

/* ================================================
   FONT STYLE VARIATIONS (Data Attribute Based)
   ================================================ */

[data-font-style=clean] {
    --calc-font-family: "Fira Sans", system-ui, -apple-system, sans-serif;
}

[data-font-style=mono] {
    --calc-font-family: "JetBrains Mono", "Menlo", "Consolas", monospace;
}

[data-font-style=serif] {
    --calc-font-family: "Lora", "Georgia", serif;
}

[data-font-style=hand] {
    --calc-font-family: "InstaCalc", Fira Sans;
}

[data-font-style],
[data-font-style] * {
    font-family: var(--calc-font-family) !important;
}

[data-font-style=hand] log,
[data-font-style=hand] parsed {
    font-family: Fira Sans, system-ui, sans-serif !important;
}


/* --- MISC UI --- */
.menu-surface {
    background: var(--dropdown-surface);
    border: 1px solid var(--dropdown-border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--dropdown-shadow);
    backdrop-filter: blur(12px);
}

/* --- TOOLTIP (CSS-only via data-tooltip attr) --- */
.has-tooltip { position: relative; }
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 130%; left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text); color: var(--bg);
    font-size: 11px; padding: 6px 10px; border-radius: 6px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap; font-family: 'Fira Sans', sans-serif;
    z-index: 50;
}
.has-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.animate-pop { animation: selectPop 0.15s ease-out; }
@keyframes selectPop { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }