/*
 * Neiki's Cyberpunk Theme for neiki-cms
 * Version: 1.0.0
 *
 * Dark-only futuristic theme: deep black, purple and blue surfaces with
 * neon cyan, magenta and purple accents, strong borders and glow effects.
 */

:root,
[data-theme='dark'] {
    /* ── Cyberpunk palette ────────────────────────────────────────── */
    --cp-cyan: #22d3ee;
    --cp-cyan-bright: #67e8f9;
    --cp-magenta: #ff2ec4;
    --cp-magenta-soft: #ff8ade;
    --cp-purple: #a855f7;
    --cp-blue: #3b82f6;
    --cp-night: #05070f;
    --cp-panel: #0d1126;

    /* ── CMS design tokens ────────────────────────────────────────── */
    --bg-primary: var(--cp-night);
    --bg-secondary: #0a0e1d;
    --bg-tertiary: #111631;
    --text-primary: #e8f6ff;
    --text-secondary: #93a7cc;
    --text-muted: #5f6f92;
    --border-color: rgb(34 211 238 / 22%);
    --accent-color: var(--cp-cyan);
    --accent-hover: var(--cp-cyan-bright);
    --accent-light: rgb(34 211 238 / 12%);
    --card-bg: rgb(13 17 38 / 88%);
    --card-shadow: 0 0 28px rgb(34 211 238 / 8%);
    --card-shadow-hover: 0 0 36px rgb(34 211 238 / 22%);
    --header-bg: rgb(5 7 15 / 85%);
    --header-shadow: none;
    --footer-bg: rgb(3 4 10 / 82%);
    --footer-text: #7d8db3;
    --overlay-bg: rgb(2 4 10 / 72%);
    --side-menu-bg: rgb(8 11 26 / 96%);
    --alert-success-bg: rgb(16 185 129 / 14%);
    --alert-success-text: #6ee7b7;
    --alert-error-bg: rgb(244 63 94 / 16%);
    --alert-error-text: #fda4af;
    --alert-info-bg: rgb(34 211 238 / 12%);
    --alert-info-text: var(--cp-cyan-bright);
    --alert-warning-bg: rgb(245 158 11 / 14%);
    --alert-warning-text: #fcd34d;
    --input-bg: rgb(8 11 26 / 90%);
    --input-border: rgb(34 211 238 / 26%);
    --input-focus-border: var(--cp-magenta);
    --badge-bg: rgb(255 46 196 / 14%);
    --badge-text: var(--cp-magenta-soft);
    --radius: 6px;

    /* ── Admin UI tokens ──────────────────────────────────────────── */
    --admin-surface: #0a0e1d;
    --admin-surface-hover: #121a3a;
    --admin-surface-active: #182148;
    --admin-border: rgb(34 211 238 / 22%);
    --admin-border-strong: rgb(34 211 238 / 42%);
    --focus-ring: 0 0 0 3px rgb(34 211 238 / 35%);
    --danger-color: #fb4b6b;
    --danger-hover: #fd7d95;
    --danger-light: rgb(251 75 107 / 14%);
    --success-color: #34d399;
    --success-light: rgb(52 211 153 / 14%);
    --warning-color: #fbbf24;
    --warning-light: rgb(251 191 36 / 14%);
}

html {
    color-scheme: dark;
}

body {
    position: relative;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 12% -4%, rgb(168 85 247 / 18%), transparent 30rem),
        radial-gradient(circle at 92% 6%, rgb(34 211 238 / 14%), transparent 28rem),
        radial-gradient(circle at 78% 96%, rgb(255 46 196 / 12%), transparent 30rem),
        linear-gradient(160deg, #0a0620 0%, var(--cp-night) 48%, #060a1c 100%);
    background-attachment: fixed;
    line-height: 1.6;
}

/* Faint neon grid overlay for a futuristic feel */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgb(34 211 238 / 3.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(34 211 238 / 3.5%) 1px, transparent 1px);
    background-size: 44px 44px;
}

::selection {
    background: rgb(255 46 196 / 40%);
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.single-post-title,
.post-card-title,
.comments-title {
    letter-spacing: 0.02em;
}

/* ── Header and navigation ──────────────────────────────────────── */
.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 24px rgb(34 211 238 / 10%);
    backdrop-filter: blur(16px);
}

.site-header.is-scrolled,
[data-theme='dark'] .site-header.is-scrolled {
    background: rgb(5 7 15 / 92%);
    border-bottom-color: rgb(34 211 238 / 34%);
}

.header-nav .nav-link,
.mobile-nav .nav-link {
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.86em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.header-nav .nav-link:hover,
.header-nav .nav-link:focus-visible,
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:focus-visible {
    background: var(--accent-light);
    border-color: rgb(34 211 238 / 45%);
    box-shadow: 0 0 14px rgb(34 211 238 / 25%);
    color: var(--cp-cyan-bright);
}

/* Dark-only theme – the light/dark toggle is never used */
.theme-toggle {
    display: none !important;
}

/* ── Forms ──────────────────────────────────────────────────────── */
.header-search-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

.header-search-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.comment-form textarea:focus,
.search-input:focus {
    border-color: var(--input-focus-border);
    box-shadow:
        0 0 0 1px var(--input-focus-border),
        0 0 18px rgb(255 46 196 / 28%);
}

.header-search-btn,
.header-cart-btn,
.hamburger-btn,
.back-to-top,
.side-menu-close {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--cp-cyan-bright);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.header-search-btn:hover,
.header-cart-btn:hover,
.hamburger-btn:hover,
.back-to-top:hover,
.side-menu-close:hover {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 16px rgb(34 211 238 / 35%);
    color: var(--text-primary);
}

/* ── Cards ──────────────────────────────────────────────────────── */
.post-card,
.page-card,
.comment,
.form-container,
.profile-card,
.category-filter a,
.single-post,
.search-result,
.eshop-product-card,
.product-card,
.cart-container,
.checkout-container,
.order-card,
.auth-card,
.admin-card,
.appearance-card,
.stat-card,
.dashboard-stat-card,
.admin-table-wrapper,
.theme-select-card,
.icon-set-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(8px);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.post-card:hover,
.page-card:hover,
.eshop-product-card:hover,
.product-card:hover,
.search-result:hover,
.theme-select-card:hover,
.icon-set-card:hover {
    border-color: rgb(34 211 238 / 60%);
    box-shadow:
        0 0 26px rgb(34 211 238 / 22%),
        0 0 52px rgb(255 46 196 / 12%);
    transform: translateY(-3px);
}

/* ── Badges ─────────────────────────────────────────────────────── */
.post-card-category,
.tag,
.badge,
.status-badge,
.tag-badge,
.cart-badge {
    background: var(--badge-bg);
    border: 1px solid rgb(255 46 196 / 35%);
    border-radius: var(--radius);
    color: var(--badge-text);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag:nth-of-type(3n),
.badge:nth-of-type(3n) {
    background: rgb(34 211 238 / 12%);
    border-color: rgb(34 211 238 / 40%);
    color: var(--cp-cyan-bright);
}

.tag:nth-of-type(3n + 1),
.badge:nth-of-type(3n + 1) {
    background: rgb(168 85 247 / 14%);
    border-color: rgb(168 85 247 / 42%);
    color: #d8b4fe;
}

.category-filter a {
    color: var(--text-secondary);
}

.category-filter a:hover,
.category-filter a.active {
    background: rgb(34 211 238 / 14%);
    border-color: var(--cp-cyan);
    box-shadow: 0 0 14px rgb(34 211 238 / 30%);
    color: var(--cp-cyan-bright);
}

/* ── Content ────────────────────────────────────────────────────── */
p {
    color: var(--text-secondary);
}

.post-card-title a,
.single-post-title,
.comments-title,
.form-container h1,
.form-container h2 {
    color: var(--text-primary);
}

.post-card-title a:hover,
.single-post-content a,
.post-card-meta a:hover,
.footer-social-link:hover {
    color: var(--accent-color);
    text-shadow: 0 0 12px rgb(34 211 238 / 45%);
}

.single-post-content a:hover {
    color: var(--cp-magenta-soft);
    text-shadow: 0 0 12px rgb(255 46 196 / 45%);
}

.single-post-content blockquote {
    background: rgb(168 85 247 / 10%);
    border-left: 3px solid var(--cp-purple);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: inset 0 0 24px rgb(168 85 247 / 8%);
    color: var(--text-secondary);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn,
.btn-secondary {
    background: rgb(13 17 38 / 70%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--cp-cyan-bright);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.btn:hover,
.btn-secondary:hover {
    background: var(--accent-light);
    border-color: var(--cp-cyan);
    box-shadow: 0 0 18px rgb(34 211 238 / 35%);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(115deg, var(--cp-purple) 0%, var(--cp-magenta) 100%);
    border-color: rgb(255 46 196 / 60%);
    box-shadow: 0 0 22px rgb(255 46 196 / 30%);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(115deg, #b96bff 0%, #ff5ad1 100%);
    border-color: var(--cp-magenta-soft);
    box-shadow: 0 0 30px rgb(255 46 196 / 45%);
    color: #fff;
}

.btn-danger {
    background: rgb(251 75 107 / 14%);
    border-color: rgb(251 75 107 / 45%);
    color: #fd9bb0;
}

.btn-danger:hover {
    box-shadow: 0 0 18px rgb(251 75 107 / 35%);
}

/* ── Side menu and footer ───────────────────────────────────────── */
.side-menu {
    background: var(--side-menu-bg);
    border-left: 1px solid var(--border-color);
}

.side-menu-link {
    border-radius: var(--radius);
    color: var(--text-secondary);
}

.side-menu-link:hover {
    background: var(--accent-light);
    box-shadow: inset 0 0 18px rgb(34 211 238 / 12%);
    color: var(--text-primary);
}

.site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -1px 26px rgb(34 211 238 / 10%);
    color: var(--footer-text);
}

.footer-social-link {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--cp-cyan-bright);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.footer-social-link:hover {
    border-color: var(--cp-magenta);
    box-shadow: 0 0 16px rgb(255 46 196 / 40%);
    color: var(--cp-magenta-soft);
}

/* ── Admin area ─────────────────────────────────────────────────── */
.admin-layout,
.admin-main,
.admin-content {
    background: transparent;
}

.admin-topbar.site-header {
    background: rgb(5 7 15 / 90%);
    border-bottom-color: var(--border-color);
}

.admin-topbar .admin-tb-btn,
.admin-topbar .admin-tb-icon,
.admin-topbar .admin-site-status,
.admin-topbar .admin-tb-btn--cmdpal {
    background: var(--admin-surface) !important;
    border-color: var(--admin-border) !important;
    color: var(--text-secondary) !important;
}

.admin-topbar .admin-tb-btn:hover,
.admin-topbar .admin-tb-icon:hover,
.admin-topbar .admin-site-status:hover,
.admin-topbar .admin-tb-btn--cmdpal:hover,
.admin-topbar .admin-tb-btn--cmdpal:focus-within,
.admin-topbar .admin-tb-btn.active {
    background: var(--accent-light) !important;
    border-color: rgb(34 211 238 / 55%) !important;
    box-shadow: 0 0 18px rgb(34 211 238 / 25%) !important;
    color: var(--text-primary) !important;
}

.admin-topbar .admin-tb-btn--accent,
.admin-topbar .admin-tb-btn--accent:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--cp-night) !important;
}

.admin-sidebar,
.admin-table th,
.cmdpal-dropdown,
.admin-topbar-menu,
.dropdown-menu {
    background: rgb(8 11 26 / 98%) !important;
    border-color: var(--admin-border) !important;
}

.admin-sidebar a,
.admin-table td,
.admin-table th,
.cmdpal-item,
.cmdpal-item-label,
#cmdpalInput,
.cmdpal-trigger-input {
    color: var(--text-primary) !important;
}

.admin-sidebar a:hover,
.admin-sidebar a.active,
.admin-table tr:hover td,
.cmdpal-item:hover,
.cmdpal-item.active {
    background: var(--accent-light) !important;
}

/* ── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--cp-cyan);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cp-magenta);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--cp-cyan) var(--bg-secondary);
}

/* ── Focus visibility ───────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.post-card:focus-visible {
    outline: 2px solid var(--cp-cyan-bright);
    outline-offset: 3px;
}

/* ── Responsive and motion ──────────────────────────────────────── */
@media (width <= 760px) {
    .mobile-nav {
        background: var(--side-menu-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        box-shadow: 0 20px 60px rgb(0 0 0 / 55%);
        backdrop-filter: blur(14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}