/* ============================================================
   EuropaJobs Theme System
   - default   : existing Tailwind styles, no overrides
   - neon-retro: cyberpunk C64-inspired dark terminal theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

/* ── Smooth theme transitions ─────────────────────────────── */
body,
.bg-white,
.bg-gray-50,
input,
textarea,
button {
    transition:
        background-color 0.15s ease,
        color            0.15s ease,
        border-color     0.15s ease,
        box-shadow       0.15s ease;
}

/* ── Theme selector (shared across both themes) ───────────── */
.theme-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-btn {
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid #d1d5db;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1.6;
    transition: all 0.1s;
}

.theme-btn:hover {
    border-color: #6b7280;
    color: #374151;
}

.theme-btn.active {
    background: #374151;
    color: #fff;
    border-color: #374151;
}


/* ============================================================
   NEON-RETRO THEME
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
[data-theme="neon-retro"] {
    --nr-bg:              #07070f;
    --nr-panel:           #0c0c1a;
    --nr-panel-hover:     #111128;
    --nr-border:          #1c1c38;
    --nr-pink:            #ff0088;
    --nr-pink-dim:        #cc005f;
    --nr-pink-glow:       rgba(255, 0, 136, 0.30);
    --nr-pink-glow-faint: rgba(255, 0, 136, 0.08);
    --nr-green:           #00ff66;
    --nr-green-dim:       #00cc44;
    --nr-green-glow:      rgba(0, 255, 102, 0.25);
    --nr-cyan:            #00e0ff;
    --nr-cyan-glow:       rgba(0, 224, 255, 0.25);
    --nr-yellow:          #ffd700;
    --nr-red:             #ff3344;
    --nr-text:            #3dff82;   /* phosphor green — retro CRT, easy on the eyes */
    --nr-text-dim:        #28c463;   /* medium green — secondary text */
    --nr-text-muted:      #1d8040;   /* dark green — muted/placeholder */
}

/* ── Base ─────────────────────────────────────────────────── */
[data-theme="neon-retro"] body {
    background-color: var(--nr-bg);
    color: var(--nr-text);
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* CRT scanline overlay */
[data-theme="neon-retro"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    );
    pointer-events: none;
    z-index: 9998;
}

/* ── Backgrounds ──────────────────────────────────────────── */
[data-theme="neon-retro"] .bg-white        { background-color: var(--nr-panel)   !important; }
[data-theme="neon-retro"] .bg-gray-50      { background-color: var(--nr-bg)      !important; }
[data-theme="neon-retro"] .bg-gray-100     { background-color: var(--nr-panel)   !important; }
[data-theme="neon-retro"] .bg-gray-200     { background-color: var(--nr-border)  !important; }

/* primary: blue → neon pink */
[data-theme="neon-retro"] .bg-blue-600                    { background-color: var(--nr-pink)     !important; }
[data-theme="neon-retro"] .hover\:bg-blue-700:hover       { background-color: var(--nr-pink-dim) !important; }
[data-theme="neon-retro"] .bg-blue-50                     { background-color: #130018            !important; }
[data-theme="neon-retro"] .hover\:bg-blue-50:hover        { background-color: #1c0028            !important; }
[data-theme="neon-retro"] .bg-blue-200                    { background-color: #1a0033            !important; }

/* green */
[data-theme="neon-retro"] .bg-green-100                   { background-color: #001f0e  !important; }
[data-theme="neon-retro"] .bg-green-50                    { background-color: #001810  !important; }
[data-theme="neon-retro"] .bg-green-200                   { background-color: #003318  !important; }
[data-theme="neon-retro"] .bg-green-600                   { background-color: #007a30  !important; }
[data-theme="neon-retro"] .hover\:bg-green-700:hover      { background-color: #005e22  !important; }

/* red */
[data-theme="neon-retro"] .bg-red-100                     { background-color: #1a000a  !important; }
[data-theme="neon-retro"] .bg-red-50                      { background-color: #180008  !important; }
[data-theme="neon-retro"] .bg-red-200                     { background-color: #330010  !important; }
[data-theme="neon-retro"] .bg-red-600                     { background-color: #cc1122  !important; }
[data-theme="neon-retro"] .hover\:bg-red-700:hover        { background-color: #990d18  !important; }

/* yellow/amber */
[data-theme="neon-retro"] .bg-yellow-100                  { background-color: #1a1400  !important; }
[data-theme="neon-retro"] .bg-yellow-200                  { background-color: #332200  !important; }
[data-theme="neon-retro"] .bg-yellow-600                  { background-color: #997700  !important; }
[data-theme="neon-retro"] .hover\:bg-yellow-700:hover     { background-color: #775c00  !important; }

/* neutral buttons */
[data-theme="neon-retro"] .bg-gray-600                    { background-color: #1c1c38  !important; }
[data-theme="neon-retro"] .hover\:bg-gray-700:hover       { background-color: #282848  !important; }
[data-theme="neon-retro"] .hover\:bg-gray-50:hover        { background-color: var(--nr-panel-hover) !important; }

/* ── Text ─────────────────────────────────────────────────── */
[data-theme="neon-retro"] .text-gray-900   { color: var(--nr-text)     !important; }
[data-theme="neon-retro"] .text-gray-800   { color: var(--nr-text)     !important; }
[data-theme="neon-retro"] .text-gray-700   { color: var(--nr-text-dim)   !important; }
[data-theme="neon-retro"] .text-gray-600   { color: var(--nr-text-dim)   !important; }
[data-theme="neon-retro"] .text-gray-500   { color: var(--nr-text-muted) !important; }
[data-theme="neon-retro"] .text-gray-400   { color: var(--nr-text-muted) !important; }

[data-theme="neon-retro"] .text-blue-600   { color: var(--nr-cyan)     !important; }
[data-theme="neon-retro"] .text-blue-800   { color: var(--nr-cyan)     !important; }
[data-theme="neon-retro"] .text-blue-900   { color: var(--nr-cyan)     !important; }
[data-theme="neon-retro"] .hover\:text-blue-800:hover { color: #80f4ff !important; }

[data-theme="neon-retro"] .text-green-600  { color: var(--nr-green)    !important; }
[data-theme="neon-retro"] .text-green-700  { color: var(--nr-green-dim) !important; }
[data-theme="neon-retro"] .text-green-800  { color: var(--nr-green)    !important; }

[data-theme="neon-retro"] .text-red-600    { color: var(--nr-red)      !important; }
[data-theme="neon-retro"] .text-red-700    { color: var(--nr-red)      !important; }
[data-theme="neon-retro"] .text-red-800    { color: var(--nr-red)      !important; }

[data-theme="neon-retro"] .text-yellow-600 { color: var(--nr-yellow)   !important; }
[data-theme="neon-retro"] .text-yellow-700 { color: var(--nr-yellow)   !important; }
[data-theme="neon-retro"] .text-yellow-800 { color: var(--nr-yellow)   !important; }

/* ── Borders ──────────────────────────────────────────────── */
[data-theme="neon-retro"] .border-gray-200              { border-color: var(--nr-border) !important; }
[data-theme="neon-retro"] .border-gray-300              { border-color: #252545          !important; }
[data-theme="neon-retro"] .border-blue-200              { border-color: #25005a          !important; }
[data-theme="neon-retro"] .border-blue-300              { border-color: var(--nr-cyan)   !important; }
[data-theme="neon-retro"] .hover\:border-blue-300:hover { border-color: var(--nr-cyan)   !important; }
[data-theme="neon-retro"] .border-green-200             { border-color: #003820          !important; }
[data-theme="neon-retro"] .border-red-200               { border-color: #380010          !important; }
[data-theme="neon-retro"] .border-red-400               { border-color: var(--nr-red)    !important; }

/* ── Sharp corners — zero border-radius everywhere ─────────── */
[data-theme="neon-retro"] .rounded,
[data-theme="neon-retro"] .rounded-sm,
[data-theme="neon-retro"] .rounded-md,
[data-theme="neon-retro"] .rounded-lg,
[data-theme="neon-retro"] .rounded-xl,
[data-theme="neon-retro"] .rounded-2xl,
[data-theme="neon-retro"] .rounded-full,
[data-theme="neon-retro"] .rounded-t-md,
[data-theme="neon-retro"] .rounded-b-md {
    border-radius: 0 !important;
}

/* ── Focus / ring ─────────────────────────────────────────── */
[data-theme="neon-retro"] .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--nr-pink);
    box-shadow: 0 0 0 2px var(--nr-bg), 0 0 0 4px var(--nr-pink), 0 0 10px var(--nr-pink-glow) !important;
}
[data-theme="neon-retro"] .focus\:border-blue-500:focus {
    border-color: var(--nr-pink) !important;
}

/* ── Inputs / textarea ────────────────────────────────────── */
[data-theme="neon-retro"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="neon-retro"] textarea,
[data-theme="neon-retro"] select {
    background-color: #050510    !important;
    color:            var(--nr-text)   !important;
    border-color:     var(--nr-border) !important;
    border-radius:    0                !important;
}

[data-theme="neon-retro"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="neon-retro"] textarea:focus,
[data-theme="neon-retro"] select:focus {
    border-color: var(--nr-pink) !important;
    box-shadow:   0 0 0 1px var(--nr-pink), 0 0 10px var(--nr-pink-glow) !important;
    outline:      none !important;
}

[data-theme="neon-retro"] input::placeholder,
[data-theme="neon-retro"] textarea::placeholder {
    color: var(--nr-text-muted) !important;
}

[data-theme="neon-retro"] input:disabled,
[data-theme="neon-retro"] textarea:disabled {
    background-color: #080812 !important;
    opacity: 0.45;
}

/* ── Negative highlight on click (C64 invert-select) ────────
   Button colors instantly swap fg↔bg on press — no transition  */
[data-theme="neon-retro"] button:not(:disabled):active {
    filter: invert(1);
    transition: filter 0s;
}

/* ── Shadows → neon ambient glow ─────────────────────────── */
[data-theme="neon-retro"] .shadow-sm {
    box-shadow: 0 0 0 1px var(--nr-border), 0 0 14px var(--nr-pink-glow-faint) !important;
}

/* ── Progress bar ─────────────────────────────────────────── */
[data-theme="neon-retro"] .bg-blue-600.h-2 {
    background-color: var(--nr-pink) !important;
    box-shadow: 0 0 8px var(--nr-pink), 0 0 2px var(--nr-pink) !important;
}

/* ── Selected history item ────────────────────────────────── */
[data-theme="neon-retro"] .bg-blue-50.border-blue-300 {
    background-color: #180028 !important;
    border-color:     var(--nr-pink) !important;
    box-shadow: inset 2px 0 0 var(--nr-pink), 0 0 8px var(--nr-pink-glow-faint);
}

/* ── Top bar ──────────────────────────────────────────────── */
[data-theme="neon-retro"] .top-bar {
    background-color: var(--nr-panel) !important;
    border-bottom: 1px solid var(--nr-pink) !important;
    box-shadow: 0 1px 0 var(--nr-pink), 0 0 24px var(--nr-pink-glow) !important;
}

[data-theme="neon-retro"] .top-bar h1 {
    color: var(--nr-pink);
    text-shadow: 0 0 10px var(--nr-pink), 0 0 22px var(--nr-pink-glow);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.05em;
}

/* ── Scrollbar ────────────────────────────────────────────── */
[data-theme="neon-retro"] ::-webkit-scrollbar-track {
    background: var(--nr-bg);
}
[data-theme="neon-retro"] ::-webkit-scrollbar-thumb {
    background: #2a2a4a;
    border-radius: 0;
}
[data-theme="neon-retro"] ::-webkit-scrollbar-thumb:hover {
    background: var(--nr-pink);
    box-shadow: 0 0 6px var(--nr-pink);
}

/* ── Article content ──────────────────────────────────────── */
[data-theme="neon-retro"] .article-content {
    color: var(--nr-text);
}
[data-theme="neon-retro"] .article-content h1,
[data-theme="neon-retro"] .article-content h2,
[data-theme="neon-retro"] .article-content h3,
[data-theme="neon-retro"] .article-content h4 {
    color: var(--nr-pink);
    text-shadow: 0 0 8px var(--nr-pink-glow);
}
[data-theme="neon-retro"] .article-content strong {
    color: var(--nr-pink);
}
[data-theme="neon-retro"] .article-content a {
    color: var(--nr-cyan);
}
[data-theme="neon-retro"] .article-content a:hover {
    color: #80f4ff;
    text-shadow: 0 0 6px var(--nr-cyan-glow);
}
[data-theme="neon-retro"] .article-content blockquote {
    border-left-color: var(--nr-pink);
    color: var(--nr-text-dim);
    background-color: #0e000e;
}
[data-theme="neon-retro"] .article-content code {
    background-color: #050510;
    color: var(--nr-green);
    border: 1px solid var(--nr-border);
    border-radius: 0;
}
[data-theme="neon-retro"] .article-content pre {
    background-color: #030308;
    border: 1px solid var(--nr-green);
    box-shadow: 0 0 12px var(--nr-green-glow);
    border-radius: 0;
}
[data-theme="neon-retro"] .article-content pre code {
    background-color: transparent;
    border: none;
    color: var(--nr-green);
}
[data-theme="neon-retro"] .article-content hr {
    border-top-color: var(--nr-border);
}
[data-theme="neon-retro"] .article-content table th {
    background-color: #0d0d20;
    border-color: var(--nr-border);
    color: var(--nr-pink);
}
[data-theme="neon-retro"] .article-content table td {
    border-color: var(--nr-border);
}
[data-theme="neon-retro"] .article-content table tr:nth-child(even) {
    background-color: #0a0a18;
}
[data-theme="neon-retro"] .article-content img {
    border-radius: 0;
    border: 1px solid var(--nr-border);
}

/* ── Login card ───────────────────────────────────────────── */
[data-theme="neon-retro"] .login-card {
    background-color: var(--nr-panel);
    border: 1px solid var(--nr-border);
    padding: 2.5rem;
    box-shadow:
        0 0 40px var(--nr-pink-glow),
        0 0 80px rgba(255, 0, 136, 0.04);
}

[data-theme="neon-retro"] .login-title {
    color: var(--nr-pink) !important;
    text-shadow: 0 0 12px var(--nr-pink), 0 0 28px var(--nr-pink-glow);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
}

[data-theme="neon-retro"] .login-subtitle {
    color: var(--nr-text-muted) !important;
}

/* ── Theme selector (neon-retro mode) ─────────────────────── */
[data-theme="neon-retro"] .theme-btn {
    background:    transparent;
    border:        1px solid var(--nr-border);
    color:         var(--nr-text-muted);
    font-family:   'IBM Plex Mono', 'Courier New', monospace;
    border-radius: 0;
    letter-spacing: 0.12em;
}
[data-theme="neon-retro"] .theme-btn:hover {
    border-color: var(--nr-pink);
    color:        var(--nr-pink);
    box-shadow:   0 0 8px var(--nr-pink-glow);
}
[data-theme="neon-retro"] .theme-btn.active {
    background:   var(--nr-pink);
    border-color: var(--nr-pink);
    color:        #07070f;
    font-weight:  900;
    box-shadow:   0 0 12px var(--nr-pink), 0 0 24px var(--nr-pink-glow);
}
/* theme button has its own active override — no global invert */
[data-theme="neon-retro"] .theme-btn:active {
    filter: invert(1);
    transition: filter 0s;
}

/* ── Outlined action buttons ──────────────────────────────────
   All solid-colour buttons become outlined neon in this theme.
   These selectors are more specific than the general .bg-* rules
   above (element + class vs just class), so they win even with
   equal !important weight as long as they appear later in the file.
   ─────────────────────────────────────────────────────────────── */

/* shared reset — strip solid fill, force outlined base */
[data-theme="neon-retro"] button.bg-blue-600,
[data-theme="neon-retro"] button.bg-green-600,
[data-theme="neon-retro"] button.bg-yellow-600,
[data-theme="neon-retro"] button.bg-gray-600,
[data-theme="neon-retro"] button.bg-red-600 {
    background-color: transparent !important;
    border-width:     1px          !important;
    border-style:     solid        !important;
}

/* pink — primary actions (generate article, login) */
[data-theme="neon-retro"] button.bg-blue-600 {
    border-color: var(--nr-pink) !important;
    color:        var(--nr-pink) !important;
    box-shadow:   0 0 6px rgba(255, 0, 136, 0.15) !important;
}
[data-theme="neon-retro"] button.bg-blue-600:not(:disabled):hover {
    background-color: rgba(255, 0, 136, 0.08) !important;
    box-shadow:       0 0 14px var(--nr-pink-glow), inset 0 0 6px rgba(255, 0, 136, 0.05) !important;
}

/* neon green — export to WordPress */
[data-theme="neon-retro"] button.bg-green-600 {
    border-color: var(--nr-green) !important;
    color:        var(--nr-green) !important;
    box-shadow:   0 0 6px rgba(0, 255, 102, 0.15) !important;
}
[data-theme="neon-retro"] button.bg-green-600:not(:disabled):hover {
    background-color: rgba(0, 255, 102, 0.08) !important;
    box-shadow:       0 0 14px var(--nr-green-glow), inset 0 0 6px rgba(0, 255, 102, 0.05) !important;
}

/* amber — regenerate */
[data-theme="neon-retro"] button.bg-yellow-600 {
    border-color: var(--nr-yellow) !important;
    color:        var(--nr-yellow) !important;
    box-shadow:   0 0 6px rgba(255, 215, 0, 0.15) !important;
}
[data-theme="neon-retro"] button.bg-yellow-600:not(:disabled):hover {
    background-color: rgba(255, 215, 0, 0.08) !important;
    box-shadow:       0 0 14px rgba(255, 215, 0, 0.30), inset 0 0 6px rgba(255, 215, 0, 0.05) !important;
}

/* cyan — download / neutral */
[data-theme="neon-retro"] button.bg-gray-600 {
    border-color: var(--nr-cyan) !important;
    color:        var(--nr-cyan) !important;
    box-shadow:   0 0 6px rgba(0, 224, 255, 0.15) !important;
}
[data-theme="neon-retro"] button.bg-gray-600:not(:disabled):hover {
    background-color: rgba(0, 224, 255, 0.08) !important;
    box-shadow:       0 0 14px var(--nr-cyan-glow), inset 0 0 6px rgba(0, 224, 255, 0.05) !important;
}

/* red — logout / danger */
[data-theme="neon-retro"] button.bg-red-600 {
    border-color: var(--nr-red) !important;
    color:        var(--nr-red) !important;
    box-shadow:   0 0 6px rgba(255, 51, 68, 0.15) !important;
}
[data-theme="neon-retro"] button.bg-red-600:not(:disabled):hover {
    background-color: rgba(255, 51, 68, 0.08) !important;
    box-shadow:       0 0 14px rgba(255, 51, 68, 0.30), inset 0 0 6px rgba(255, 51, 68, 0.05) !important;
}

/* disabled state — all outlined buttons */
[data-theme="neon-retro"] button.bg-blue-600:disabled,
[data-theme="neon-retro"] button.bg-green-600:disabled,
[data-theme="neon-retro"] button.bg-yellow-600:disabled,
[data-theme="neon-retro"] button.bg-gray-600:disabled,
[data-theme="neon-retro"] button.bg-red-600:disabled {
    opacity:    0.35    !important;
    box-shadow: none    !important;
}