/*
 * Neiki's Mission Control Theme for neiki-cms
 * Version: 1.1.0
 *
 * Dark-only theme inspired by NASA-style mission control rooms and
 * spacecraft telemetry consoles: dark navy panels, muted steel blue,
 * amber as the primary accent, green for nominal status and a discreet
 * red for critical states. Utilitarian, flat and data-oriented.
 */

:root,
[data-theme='dark'] {
    /* ── Mission control palette ──────────────────────────────────── */
    --mc-amber: #ffb454;
    --mc-amber-bright: #ffd08a;
    --mc-green: #3fd68c;
    --mc-green-soft: #8fe8bc;
    --mc-red: #f05d5d;
    --mc-blue: #5b8dd6;
    --mc-blue-soft: #a8c4e8;
    --mc-navy: #050a14;
    --mc-panel: #0b1524;
    --mc-steel: #1c2c47;
    --mc-mono: 'Cascadia Code', 'Cascadia Mono', consolas, 'Courier New', monospace;

    /* ── CMS design tokens ────────────────────────────────────────── */
    --bg-primary: #081120;
    --bg-secondary: var(--mc-navy);
    --bg-tertiary: #10203a;
    --text-primary: #dbe6f5;
    --text-secondary: #93a9c7;
    --text-muted: #5a7093;
    --border-color: var(--mc-steel);
    --accent-color: var(--mc-amber);
    --accent-hover: var(--mc-amber-bright);
    --accent-light: rgb(255 180 84 / 12%);
    --card-bg: var(--mc-panel);
    --card-shadow: 0 2px 10px rgb(0 0 0 / 35%);
    --card-shadow-hover: 0 6px 20px rgb(0 0 0 / 45%);
    --header-bg: rgb(5 10 20 / 94%);
    --header-shadow: none;
    --footer-bg: #030710;
    --footer-text: #7387a5;
    --overlay-bg: rgb(2 5 10 / 75%);
    --side-menu-bg: rgb(7 13 25 / 98%);
    --alert-success-bg: rgb(63 214 140 / 12%);
    --alert-success-text: var(--mc-green-soft);
    --alert-error-bg: rgb(240 93 93 / 14%);
    --alert-error-text: #ffa1a1;
    --alert-info-bg: rgb(91 141 214 / 12%);
    --alert-info-text: var(--mc-blue-soft);
    --alert-warning-bg: rgb(255 180 84 / 12%);
    --alert-warning-text: var(--mc-amber-bright);
    --input-bg: rgb(6 12 23 / 94%);
    --input-border: #24385a;
    --input-focus-border: var(--mc-amber);
    --badge-bg: rgb(63 214 140 / 12%);
    --badge-text: var(--mc-green-soft);
    --radius: 4px;

    /* ── Admin UI tokens ──────────────────────────────────────────── */
    --admin-surface: #0d1727;
    --admin-surface-hover: #13223c;
    --admin-surface-active: #1a2d4e;
    --admin-border: var(--mc-steel);
    --admin-border-strong: #31507e;
    --focus-ring: 0 0 0 3px rgb(255 180 84 / 35%);
    --danger-color: var(--mc-red);
    --danger-hover: #ff8585;
    --danger-light: rgb(240 93 93 / 14%);
    --success-color: var(--mc-green);
    --success-light: rgb(63 214 140 / 12%);
    --warning-color: var(--mc-amber);
    --warning-light: rgb(255 180 84 / 12%);
}

html {
    color-scheme: dark;
}

body {
    position: relative;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 50% -10%, rgb(91 141 214 / 9%), transparent 34rem),
        radial-gradient(circle at 96% 100%, rgb(255 180 84 / 5%), transparent 24rem),
        linear-gradient(175deg, #0a1426 0%, var(--mc-navy) 55%, #060c18 100%);
    background-attachment: fixed;
    line-height: 1.6;
}

/* Seamless rocket-icon overlay: the mission rocket tiled across the whole
   viewport in muted steel blue, quiet enough to keep the content fully
   readable. Inline SVG tile, no image asset. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cg%20transform='translate(8%208)'%20fill='%235b8dd6'%20fill-opacity='0.1'%3E%3Cpath%20d='M9.752%206.193c.599.6%201.73.437%202.528-.362s.96-1.932.362-2.531c-.599-.6-1.73-.438-2.528.361c-.798.8-.96%201.933-.362%202.532'/%3E%3Cpath%20d='M15.811%203.312c-.363%201.534-1.334%203.626-3.64%206.218l-.24%202.408a2.56%202%200%200%201-.732%201.526L8.817%2015.85a.51.51%200%200%201-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9%209%200%200%200-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277c-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a10%2010%200%200%200-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51%200%200%201%20.15%207.17l2.382-2.386c.41-.41.947-.67%201.524-.734h.006l2.4-.238C9.005%201.55%2011.087.582%2012.623.208c.89-.217%201.59-.232%202.08-.188c.244.023.435.06.57.093q.1.026.16.045c.184.06.279.13.351.295l.029.073a3.5%203.5%200%200%201%20.157.721c.055.485.051%201.178-.159%202.065m-4.828%207.475l.04-.04l-.107%201.081a1.54%201.54%200%200%201-.44.913l-1.298%201.3l.054-.38c.072-.506-.034-.993-.172-1.418a9%209%200%200%200-.164-.45c.738-.065%201.462-.38%202.087-1.006M5.205%205c-.625.626-.94%201.351-1.004%202.09a9%209%200%200%200-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054l1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107zm9.406-3.961c-.38-.034-.967-.027-1.746.163c-1.558.38-3.917%201.496-6.937%204.521c-.62.62-.799%201.34-.687%202.051c.107.676.483%201.362%201.048%201.928c.564.565%201.25.941%201.924%201.049c.71.112%201.429-.067%202.048-.688c3.079-3.083%204.192-5.444%204.556-6.987c.183-.771.18-1.345.138-1.713a3%203%200%200%200-.045-.283a3%203%200%200%200-.3-.041Z'/%3E%3Cpath%20d='M7.009%2012.139a7.6%207.6%200%200%201-1.804-1.352A7.6%207.6%200%200%201%203.794%208.86c-1.102.992-1.965%205.054-1.839%205.18c.125.126%203.936-.896%205.054-1.902Z'/%3E%3C/g%3E%3C/svg%3E")
        repeat;
    background-size: 64px 64px;
}

::selection {
    background: rgb(255 180 84 / 40%);
    color: #1d1200;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.single-post-title,
.post-card-title,
.comments-title {
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ── Header and navigation ──────────────────────────────────────── */
.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--mc-steel);
    box-shadow: inset 0 -1px rgb(91 141 214 / 12%);
    backdrop-filter: blur(10px);
}

.site-header.is-scrolled,
[data-theme='dark'] .site-header.is-scrolled {
    background: rgb(5 10 20 / 96%);
    border-bottom-color: var(--admin-border-strong);
}

.header-nav .nav-link,
.mobile-nav .nav-link {
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.84em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s 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(255 180 84 / 40%);
    color: var(--mc-amber-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 3px rgb(255 180 84 / 18%);
}

.header-search-btn,
.header-cart-btn,
.hamburger-btn,
.back-to-top,
.side-menu-close {
    background: var(--card-bg);
    border: 1px solid var(--mc-steel);
    border-radius: var(--radius);
    color: var(--mc-blue-soft);
    transition:
        border-color 0.18s ease,
        color 0.18s ease;
}

.header-search-btn:hover,
.header-cart-btn:hover,
.hamburger-btn:hover,
.back-to-top:hover,
.side-menu-close:hover {
    border-color: var(--mc-amber);
    color: var(--mc-amber-bright);
}

/* ── 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(--mc-steel);
    border-radius: var(--radius);
    box-shadow:
        inset 0 1px rgb(168 196 232 / 6%),
        var(--card-shadow);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s 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: var(--admin-border-strong);
    box-shadow:
        inset 0 1px rgb(168 196 232 / 9%),
        var(--card-shadow-hover);
}

/* ── Badges: telemetry-style status colors ──────────────────────── */
.post-card-category,
.tag,
.badge,
.status-badge,
.tag-badge,
.cart-badge {
    background: var(--badge-bg);
    border: 1px solid rgb(63 214 140 / 35%);
    border-radius: var(--radius);
    color: var(--badge-text);
    font-family: var(--mc-mono);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag:nth-of-type(4n + 2),
.badge:nth-of-type(4n + 2) {
    background: rgb(255 180 84 / 12%);
    border-color: rgb(255 180 84 / 40%);
    color: var(--mc-amber-bright);
}

.tag:nth-of-type(4n + 3),
.badge:nth-of-type(4n + 3) {
    background: rgb(91 141 214 / 12%);
    border-color: rgb(91 141 214 / 40%);
    color: var(--mc-blue-soft);
}

.tag:nth-of-type(4n),
.badge:nth-of-type(4n) {
    background: rgb(240 93 93 / 12%);
    border-color: rgb(240 93 93 / 38%);
    color: #ffa1a1;
}

.category-filter a {
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.category-filter a:hover,
.category-filter a.active {
    background: var(--accent-light);
    border-color: rgb(255 180 84 / 50%);
    color: var(--mc-amber-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(--mc-amber);
}

.single-post-content a:hover {
    color: var(--mc-amber-bright);
}

.single-post-content blockquote {
    background: rgb(91 141 214 / 9%);
    border-left: 3px solid var(--mc-blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-secondary);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn,
.btn-secondary {
    background: var(--admin-surface);
    border: 1px solid var(--mc-steel);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

.btn:hover,
.btn-secondary:hover {
    background: var(--admin-surface-hover);
    border-color: var(--admin-border-strong);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--mc-amber);
    border-color: var(--mc-amber);
    color: #241500;
}

.btn-primary:hover {
    background: var(--mc-amber-bright);
    border-color: var(--mc-amber-bright);
    color: #241500;
}

.btn-danger {
    background: rgb(240 93 93 / 12%);
    border-color: rgb(240 93 93 / 45%);
    color: #ffa1a1;
}

.btn-danger:hover {
    background: rgb(240 93 93 / 20%);
    color: #ffb9b9;
}

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

.side-menu-link {
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.side-menu-link:hover {
    background: var(--accent-light);
    color: var(--text-primary);
}

.site-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--mc-steel);
    color: var(--footer-text);
}

.footer-social-link {
    background: var(--card-bg);
    border: 1px solid var(--mc-steel);
    border-radius: var(--radius);
    color: var(--mc-blue-soft);
    transition:
        border-color 0.18s ease,
        color 0.18s ease;
}

.footer-social-link:hover {
    border-color: var(--mc-amber);
    color: var(--mc-amber-bright);
}

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

.admin-topbar.site-header {
    background: rgb(5 10 20 / 96%);
    border-bottom: 1px solid var(--mc-steel);
}

.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;
    border-radius: var(--radius) !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(--admin-surface-hover) !important;
    border-color: var(--admin-border-strong) !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: #241500 !important;
}

/* Status indicators: nominal green, alert amber */
.admin-topbar .admin-site-status {
    font-family: var(--mc-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-notif-badge {
    background: var(--mc-amber);
    color: #241500;
}

.admin-sidebar,
.admin-table th,
.cmdpal-dropdown,
.admin-topbar-menu,
.dropdown-menu {
    background: rgb(7 13 25 / 99%) !important;
    border-color: var(--admin-border) !important;
}

.admin-table th {
    font-family: var(--mc-mono);
    font-size: 0.78em;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.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(--mc-steel);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--admin-border-strong);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--mc-steel) 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(--mc-amber);
    outline-offset: 2px;
}

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

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