/* Gibbler retro/pixel theme override for Max-built tools.
   Loaded AFTER each tool's own <style> so these declarations win via !important.
   Goal: make every Max tool look native to gibbler.tools (VT323 + Press Start 2P, retro palette, pixel borders, no rounded corners, no gradients). */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
    --retro-black: #1a1a1a !important;
    --retro-darkgray: #3d3d3d !important;
    --retro-gray: #6b6b6b !important;
    --retro-lightgray: #9a9a9a !important;
    --retro-silver: #c0c0c0 !important;
    --retro-white: #f0f0f0 !important;
    --retro-red: #e63946 !important;
    --retro-darkred: #9d0208 !important;
    --retro-orange: #f77f00 !important;
    --retro-yellow: #fcbf49 !important;
    --retro-green: #2a9d8f !important;
    --retro-cyan: #00b4d8 !important;
    --retro-blue: #0077b6 !important;

    /* Remap Max's common vars → retro palette */
    --bg: #0a0a0a !important;
    --surf: var(--retro-black) !important;
    --surface: var(--retro-black) !important;
    --card: var(--retro-black) !important;
    --card2: var(--retro-darkgray) !important;
    --border: var(--retro-gray) !important;
    --bdr: var(--retro-gray) !important;
    --bd: var(--retro-gray) !important;
    --text: var(--retro-white) !important;
    --txt: var(--retro-white) !important;
    --tx: var(--retro-white) !important;
    --t: var(--retro-white) !important;
    --muted: var(--retro-silver) !important;
    --mu: var(--retro-silver) !important;
    --mut: var(--retro-silver) !important;
    --mu2: var(--retro-lightgray) !important;
    --dim: var(--retro-lightgray) !important;
    --text-muted: var(--retro-silver) !important;
    --accent: var(--retro-red) !important;
    --accent-glow: var(--retro-orange) !important;
    --acc: var(--retro-red) !important;
    --ac: var(--retro-red) !important;
    --acl: var(--retro-red) !important;
    --ach: var(--retro-orange) !important;
    --green: var(--retro-green) !important;
    --yellow: var(--retro-yellow) !important;
    --red: var(--retro-red) !important;
    --blue: var(--retro-cyan) !important;
    --purple: var(--retro-red) !important;
    --s: var(--retro-black) !important;
    --p: var(--retro-red) !important;
    --b: var(--retro-gray) !important;
    --r: var(--retro-red) !important;
    --tm: var(--retro-silver) !important;
}

/* Pixelate everything */
*,
*::before,
*::after {
    image-rendering: pixelated !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

html, body {
    background: #0a0a0a !important;
    color: var(--retro-white) !important;
    font-family: 'VT323', monospace !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Headings → pixel font */
h1, h2, h3, h4, h5, h6,
.logo, .title, .plabel, .label, .hero-title,
.panel-title, .section-title,
.result-label, .rlbl {
    font-family: 'Press Start 2P', cursive !important;
    color: var(--retro-white) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 3px 3px 0 var(--retro-darkred) !important;
    -webkit-text-fill-color: var(--retro-white) !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

h1 { font-size: 1.6rem !important; line-height: 1.3 !important; margin-bottom: 16px !important; }
h2 { font-size: 1.1rem !important; line-height: 1.3 !important; margin-bottom: 12px !important; }
h3 { font-size: 0.85rem !important; line-height: 1.3 !important; margin-bottom: 10px !important; }
h4, h5, h6 { font-size: 0.7rem !important; line-height: 1.3 !important; margin-bottom: 8px !important; }

/* Kill internal tool headers — Gibbler's nav already sits above the iframe */
.hdr, header, .tool-header, .app-header, .topbar {
    display: none !important;
}

/* Wrappers / containers */
.wrap, .container, .app, .main, main, .content, .page {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    background: transparent !important;
}

/* Hero */
.hero, .intro, .heading-block {
    text-align: center !important;
    margin-bottom: 28px !important;
    padding: 20px !important;
    background: var(--retro-black) !important;
    border-bottom: 4px solid var(--retro-red) !important;
}
.hero p, .intro p, .tagline, .subtitle, .hdr-sub {
    color: var(--retro-silver) !important;
    font-family: 'VT323', monospace !important;
    font-size: 1.1rem !important;
    margin-top: 8px !important;
    text-shadow: none !important;
}

/* Panels / cards — chunky pixel border look */
.panel, .card, .box, .tile, .section, .rc, .result-card, .stat, .metric,
.ms-row, .result-box, .preview, .preview-box, .output, .output-box, .ibox {
    background: var(--retro-black) !important;
    border: 3px solid var(--retro-gray) !important;
    color: var(--retro-white) !important;
    padding: 16px !important;
    box-shadow:
        4px 4px 0 0 var(--retro-darkgray) !important;
}

/* Grid layouts — keep as-is but ensure gap */
.rg, .grid, .row, .cols {
    gap: 14px !important;
}

/* Labels */
label, .label, .fhead, .field-label, .input-label, .ph, .plabel, .rlbl {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
    color: var(--retro-yellow) !important;
    text-transform: uppercase !important;
    display: block;
    margin-bottom: 6px !important;
    text-shadow: none !important;
}

/* Values / results */
.rval, .value, .result, .result-value, .big, .big-value, .ms-yr {
    font-family: 'VT323', monospace !important;
    font-size: 2rem !important;
    color: var(--retro-yellow) !important;
    text-shadow: 2px 2px 0 var(--retro-darkred) !important;
    font-weight: normal !important;
    -webkit-text-fill-color: var(--retro-yellow) !important;
    background: none !important;
}
.rsub, .sublabel, .small, .micro, .hint {
    color: var(--retro-silver) !important;
    font-family: 'VT323', monospace !important;
    font-size: 0.95rem !important;
    text-shadow: none !important;
}

/* Inputs */
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
input[type="url"], input[type="password"], input[type="time"], input[type="date"],
input[type="datetime-local"], input[type="tel"], input:not([type]),
textarea, select, .ni, .input {
    font-family: 'VT323', monospace !important;
    font-size: 1.1rem !important;
    background: var(--retro-black) !important;
    color: var(--retro-white) !important;
    border: 3px solid var(--retro-gray) !important;
    padding: 8px 12px !important;
    width: 100% !important;
    outline: none !important;
    box-shadow:
        inset 2px 2px 0 0 var(--retro-darkgray) !important;
}

input:focus, textarea:focus, select:focus, .ni:focus {
    border-color: var(--retro-red) !important;
    box-shadow:
        inset 2px 2px 0 0 var(--retro-darkgray),
        0 0 0 2px var(--retro-red) !important;
}

textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Range sliders — thick pixel track */
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--retro-darkgray) !important;
    height: 10px !important;
    border: 2px solid var(--retro-gray) !important;
    padding: 0 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--retro-red) !important;
    border: 2px solid var(--retro-black) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-shadow: 2px 2px 0 0 var(--retro-darkred) !important;
}
input[type="range"]::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    background: var(--retro-red) !important;
    border: 2px solid var(--retro-black) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

/* Checkboxes & radios — keep default rendering but tint */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--retro-red) !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* Buttons */
button, .btn, .action, .action-btn, .primary, .cta, [role="button"],
input[type="button"], input[type="submit"] {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: var(--retro-red) !important;
    color: var(--retro-white) !important;
    border: 3px solid var(--retro-black) !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    text-shadow: 2px 2px 0 var(--retro-darkred) !important;
    box-shadow:
        4px 4px 0 0 var(--retro-black) !important;
    transition: transform 0.05s steps(2), box-shadow 0.05s steps(2) !important;
    -webkit-text-fill-color: var(--retro-white) !important;
    background-image: none !important;
}
button:hover, .btn:hover, .action-btn:hover, .cta:hover, [role="button"]:hover {
    background: var(--retro-orange) !important;
    color: var(--retro-black) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--retro-black) !important;
}
button:active, .btn:active, .action-btn:active, .cta:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 0 var(--retro-black) !important;
}
button:disabled, .btn:disabled, .action-btn:disabled {
    background: var(--retro-darkgray) !important;
    color: var(--retro-gray) !important;
    cursor: not-allowed !important;
    box-shadow: 2px 2px 0 0 var(--retro-black) !important;
}

/* Badges / tags / pills */
.badge, .tag, .pill, .chip, .on, .off {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.55rem !important;
    padding: 6px 10px !important;
    border: 2px solid var(--retro-black) !important;
    background: var(--retro-green) !important;
    color: var(--retro-black) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--retro-black) !important;
    display: inline-block;
}
.badge.off, .off, .badge.bad, .badge.warn {
    background: var(--retro-red) !important;
    color: var(--retro-white) !important;
    -webkit-text-fill-color: var(--retro-white) !important;
}

/* Progress bars */
.pt, .progress, .progress-bar, .bar, .pw .pt {
    background: var(--retro-darkgray) !important;
    border: 2px solid var(--retro-gray) !important;
    height: 14px !important;
    overflow: hidden !important;
}
.pf, .progress-fill, .bar-fill {
    background: var(--retro-red) !important;
    background-image: none !important;
    height: 100% !important;
    transition: width 0.2s steps(6) !important;
}

/* Tables */
table { width: 100% !important; border-collapse: collapse !important; font-family: 'VT323', monospace !important; font-size: 1.05rem !important; }
th, td {
    border: 2px solid var(--retro-gray) !important;
    padding: 8px 10px !important;
    text-align: left !important;
    color: var(--retro-white) !important;
}
th {
    background: var(--retro-darkgray) !important;
    font-family: 'Press Start 2P', cursive !important;
    font-size: 0.6rem !important;
    color: var(--retro-yellow) !important;
    text-transform: uppercase !important;
}
tr:nth-child(even) td { background: rgba(255,255,255,0.02) !important; }

/* Separators */
hr, .sep, .divider {
    border: none !important;
    background: var(--retro-gray) !important;
    height: 2px !important;
    margin: 16px 0 !important;
}

/* Code / pre */
code, pre, .code {
    font-family: 'VT323', monospace !important;
    background: var(--retro-black) !important;
    border: 2px solid var(--retro-gray) !important;
    color: var(--retro-green) !important;
    padding: 10px !important;
    font-size: 1rem !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

/* Links */
a { color: var(--retro-cyan) !important; text-decoration: underline !important; }
a:hover { color: var(--retro-yellow) !important; }

/* Chart.js canvas gets a pixel frame */
canvas {
    background: var(--retro-black) !important;
    border: 3px solid var(--retro-gray) !important;
    padding: 8px !important;
    box-shadow: 4px 4px 0 0 var(--retro-darkgray) !important;
}

/* Misc decorative fills from Max tools — force to retro */
.dot, .bullet, .marker {
    background: var(--retro-red) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 0 !important;
}

/* Info boxes */
.ibox, .info, .note, .callout {
    background: var(--retro-black) !important;
    border-left: 4px solid var(--retro-yellow) !important;
    border-right: 2px solid var(--retro-gray) !important;
    border-top: 2px solid var(--retro-gray) !important;
    border-bottom: 2px solid var(--retro-gray) !important;
    color: var(--retro-silver) !important;
    padding: 12px 14px !important;
    font-family: 'VT323', monospace !important;
    font-size: 1rem !important;
}
.ibox b, .info b, .note b, strong, b { color: var(--retro-yellow) !important; font-weight: normal !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 12px !important; height: 12px !important; }
::-webkit-scrollbar-track { background: var(--retro-darkgray) !important; }
::-webkit-scrollbar-thumb { background: var(--retro-red) !important; border: 2px solid var(--retro-black) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--retro-orange) !important; }

/* Kill all gradients on common utility classes */
[class*="gradient"], .bg-gradient, .gradient-bg {
    background-image: none !important;
    background: var(--retro-black) !important;
}