/*
 * Arctic Theme v1.0 — Jednotný svetlo-modrý dizajn
 * Primárna: Sky Blue (#38bdf8)
 * Sekundárna: Slate (#64748b)
 * Čistý, konzistentný, 2-farebný systém
 */

:root {
    /* Core backgrounds — tmavý základ */
    --zen-void: #0c1220;
    --zen-ink: #141c2e;
    --zen-paper: #1a2438;
    --zen-paper-hover: #202c42;
    --zen-paper-light: #283650;

    /* Primárna farba — svetlo modrá */
    --zen-vermilion: #38bdf8;
    --zen-vermilion-soft: rgba(56, 189, 248, 0.10);
    --zen-sakura: #38bdf8;
    --zen-sakura-soft: rgba(56, 189, 248, 0.10);
    --zen-indigo: #38bdf8;
    --zen-indigo-soft: rgba(56, 189, 248, 0.10);
    --zen-gold: #7dd3fc;
    --zen-gold-soft: rgba(125, 211, 252, 0.10);
    --zen-wisteria: #7dd3fc;
    --zen-snow: #f0f4f8;
    --zen-bamboo: #82b86e;

    /* Status farby — ponechané */
    --zen-matcha: #4ade80;
    --zen-matcha-soft: rgba(74, 222, 128, 0.10);

    /* Text */
    --zen-text: #e2e8f0;
    --zen-text-secondary: #94a3b8;
    --zen-text-muted: #64748b;

    /* Borders — jemné modré odtiene */
    --zen-border: rgba(56, 189, 248, 0.10);
    --zen-border-hover: rgba(56, 189, 248, 0.25);
    --zen-border-warm: rgba(56, 189, 248, 0.15);
}

/* ========== BODY ========== */
body {
    background: var(--zen-void) !important;
    color: var(--zen-text) !important;
}

body::before {
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(125, 211, 252, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(125, 211, 252, 0.02) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%2338bdf8' stroke-opacity='0.025' stroke-width='0.5'/%3E%3Cpath d='M30 10L50 30L30 50L10 30Z' fill='none' stroke='%2338bdf8' stroke-opacity='0.015' stroke-width='0.5'/%3E%3C/svg%3E") !important;
}

/* ========== PARTICLES — svetlo modré ========== */
.sakura-petal {
    background: radial-gradient(ellipse, rgba(56, 189, 248, 0.35) 0%, rgba(56, 189, 248, 0.04) 100%) !important;
    opacity: 0.30 !important;
}

/* ========== NAVIGATION ========== */
header {
    background: rgba(12, 18, 32, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.10) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.20) !important;
}

header > div:first-child {
    background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, #38bdf8, transparent) !important;
}

header nav > div > a:first-child,
header a[href="/"] {
    color: var(--zen-snow) !important;
}

header nav > div > div > div > a {
    color: var(--zen-text-secondary) !important;
}
header nav > div > div > div > a:hover {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
}

header nav > div > div > a:last-child {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25) !important;
}

/* ========== HERO ========== */
.hero-title {
    background: linear-gradient(135deg, var(--zen-snow) 0%, #38bdf8 35%, #7dd3fc 65%, var(--zen-snow) 100%) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.hero-subtitle {
    color: var(--zen-text-secondary) !important;
}

/* Announce badge */
.announce-badge {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(125, 211, 252, 0.06)) !important;
    border: 1px solid rgba(56, 189, 248, 0.20) !important;
    color: #7dd3fc !important;
}

/* Stat pills */
.stat-pill {
    background: var(--zen-ink) !important;
    border: 1px solid var(--zen-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10) !important;
}

/* ========== SEARCH ========== */
.zen-search-input {
    background: var(--zen-ink) !important;
    border: 1px solid var(--zen-border) !important;
    color: var(--zen-text) !important;
}
.zen-search-input::placeholder {
    color: var(--zen-text-muted) !important;
}
.zen-search-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12), 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ========== SORT BUTTONS ========== */
.zen-sort-btn {
    background: var(--zen-ink) !important;
    border: 1px solid var(--zen-border) !important;
    color: var(--zen-text-muted) !important;
}
.zen-sort-btn:hover {
    background: var(--zen-paper) !important;
    color: var(--zen-text) !important;
    border-color: var(--zen-border-hover) !important;
}
.zen-sort-btn.active {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    border-color: #38bdf8 !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(56, 189, 248, 0.30) !important;
}

/* ========== SERVER CARDS ========== */
.server-card {
    background: linear-gradient(135deg, var(--zen-ink) 0%, rgba(26, 36, 56, 0.90) 50%, rgba(20, 28, 46, 0.95) 100%) !important;
    border: 1px solid var(--zen-border) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12) !important;
}
.server-card::before {
    background: linear-gradient(180deg, #38bdf8, #7dd3fc, #38bdf8) !important;
    opacity: 0.25 !important;
}
.server-card::after {
    background: linear-gradient(90deg, transparent 10%, rgba(56, 189, 248, 0.10) 30%, rgba(125, 211, 252, 0.15) 50%, rgba(56, 189, 248, 0.10) 70%, transparent 90%) !important;
}
.server-card:hover {
    border-color: rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 4px 24px rgba(56, 189, 248, 0.08), 0 0 40px rgba(56, 189, 248, 0.03) !important;
}
.server-card:hover::before {
    opacity: 0.65 !important;
}

/* Rank badge */
.server-card .rank-badge, .rank-badge {
    background: linear-gradient(145deg, var(--zen-paper), var(--zen-paper-hover)) !important;
    border: 1.5px solid var(--zen-border) !important;
    color: #38bdf8 !important;
}
.server-card:nth-child(1) .rank-badge {
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.05)) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15) !important;
}
.server-card:nth-child(2) .rank-badge {
    color: #a8b4c0 !important;
    border-color: rgba(168, 180, 192, 0.28) !important;
    background: linear-gradient(145deg, rgba(168, 180, 192, 0.10), rgba(168, 180, 192, 0.04)) !important;
}
.server-card:nth-child(3) .rank-badge {
    color: #cc8844 !important;
    border-color: rgba(204, 136, 68, 0.28) !important;
    background: linear-gradient(145deg, rgba(204, 136, 68, 0.10), rgba(204, 136, 68, 0.04)) !important;
}

/* Banner */
.server-card .banner-container, .banner-container {
    background: var(--zen-paper) !important;
    border: 1px solid var(--zen-border) !important;
}
.banner-placeholder {
    background: linear-gradient(135deg, var(--zen-paper), var(--zen-paper-hover)) !important;
    color: var(--zen-text-muted) !important;
}

/* Server name */
.server-card .server-name, .server-name {
    color: var(--zen-text) !important;
}
.server-card .server-name:hover, .server-name:hover {
    color: #38bdf8 !important;
}

/* Stat badges */
.server-card .stat-badge, .stat-badge {
    background: var(--zen-paper) !important;
    border: 1px solid var(--zen-border) !important;
    color: var(--zen-text-secondary) !important;
}
.stat-badge.ip:hover {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
}
.stat-badge.ip code {
    color: #38bdf8 !important;
}
.stat-badge.online {
    border-color: rgba(74, 222, 128, 0.28) !important;
    background: rgba(74, 222, 128, 0.08) !important;
}
.stat-badge.online .dot {
    background: #4ade80 !important;
    box-shadow: 0 0 8px #4ade80 !important;
}
.stat-badge.online .status-text {
    color: #4ade80 !important;
}
.stat-badge.offline {
    border-color: rgba(100, 116, 139, 0.2) !important;
}
.stat-badge.offline .dot {
    background: var(--zen-text-muted) !important;
}
.stat-badge.offline .status-text {
    color: var(--zen-text-muted) !important;
}

/* Mode badges */
.server-card .mode-badge, .mode-badge {
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    color: #7dd3fc !important;
}

/* ========== VOTE BUTTON ========== */
.vote-btn {
    background: linear-gradient(145deg, #38bdf8, #0ea5e9) !important;
    border: 2px solid rgba(56, 189, 248, 0.50) !important;
    box-shadow: 0 3px 12px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.vote-btn:hover {
    box-shadow: 0 6px 24px rgba(56, 189, 248, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.70) !important;
}
.vote-btn span {
    color: #fff !important;
}
.vote-btn.voted {
    background: linear-gradient(145deg, rgba(74, 222, 128, 0.12), rgba(74, 222, 128, 0.06)) !important;
    border: 2px solid rgba(74, 222, 128, 0.25) !important;
}
.vote-btn.voted span {
    color: #4ade80 !important;
}
.vote-btn.voted span:first-child {
    color: #4ade80 !important;
}

/* ========== SECTION BLOCKS ========== */
.section-block {
    background: var(--zen-ink) !important;
    border: 1px solid var(--zen-border) !important;
}
.section-block.torii::before {
    background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, #38bdf8, transparent) !important;
}

.section-block h2 {
    color: var(--zen-text) !important;
}
.section-block p {
    color: var(--zen-text-secondary) !important;
}

/* ========== FAQ ========== */
.faq-item {
    background: var(--zen-ink) !important;
    border: 1px solid var(--zen-border) !important;
}
.faq-item[open] {
    border-color: var(--zen-border-hover) !important;
}
.faq-item summary {
    color: var(--zen-text) !important;
}
.faq-item summary::before {
    color: #38bdf8 !important;
}
.faq-item summary:hover {
    color: #38bdf8 !important;
}
.faq-item p {
    color: var(--zen-text-secondary) !important;
}

/* ========== PAGINATION ========== */
.pagination a, .pagination span {
    background: var(--zen-ink) !important;
    border: 1px solid var(--zen-border) !important;
    color: var(--zen-text-secondary) !important;
}
.pagination a:hover {
    background: var(--zen-paper) !important;
    color: var(--zen-text) !important;
    border-color: var(--zen-border-hover) !important;
}
.pagination .active {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    border-color: #38bdf8 !important;
    color: #fff !important;
}

/* ========== ALERTS ========== */
.alert-msg--success {
    background: rgba(74, 222, 128, 0.10) !important;
    border: 1px solid rgba(74, 222, 128, 0.28) !important;
    color: #4ade80 !important;
}
.alert-msg--error {
    background: rgba(248, 113, 113, 0.10) !important;
    border: 1px solid rgba(248, 113, 113, 0.28) !important;
    color: #f87171 !important;
}
.alert-msg--info {
    background: rgba(56, 189, 248, 0.10) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    color: #38bdf8 !important;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--zen-void); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    border-radius: 3px;
}
* { scrollbar-width: thin; scrollbar-color: #38bdf8 var(--zen-void); }

/* ========== CAPACITY BAR ========== */
.capacity-bar.low { background: #4ade80 !important; }
.capacity-bar.medium { background: #fbbf24 !important; }
.capacity-bar.high { background: #f87171 !important; }

/* ========== H2 global ========== */
h2.text-2xl {
    color: var(--zen-text) !important;
}

/* ========== MOBILE ========== */
#mobileMenuBtn {
    background: var(--zen-ink) !important;
    border: 2px solid #38bdf8 !important;
}
#mobileMenuBtn svg {
    stroke: #38bdf8 !important;
}
#mobileMenuBtn:hover {
    background: var(--zen-paper) !important;
    border-color: #7dd3fc !important;
}

#mobileMenu {
    background: rgba(12, 18, 32, 0.98) !important;
    border-top: 2px solid #38bdf8 !important;
}
#mobileMenu a.mobile-link {
    color: var(--zen-text) !important;
    background: rgba(56, 189, 248, 0.04) !important;
}
#mobileMenu a.mobile-link:hover {
    background: rgba(56, 189, 248, 0.08) !important;
}
#mobileMenu a[href="/auth/google"] {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    color: #fff !important;
}
#mobileMenu a[href="/auth/logout"] {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.18) !important;
}
#mobileMenu a[href="/admin"] {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.08) !important;
    border: 1px solid rgba(251, 191, 36, 0.18) !important;
}

/* ========== DARK CLASS OVERRIDES ========== */
body.dark {
    background: var(--zen-void) !important;
    color: var(--zen-text) !important;
}

.bg-dark-bg { background: var(--zen-void) !important; }
.text-dark-text { color: var(--zen-text) !important; }
.bg-dark-surface { background: var(--zen-ink) !important; }
.border-dark-border { border-color: var(--zen-border) !important; }
.text-dark-muted { color: var(--zen-text-muted) !important; }

.text-center.py-16.bg-dark-surface {
    background: var(--zen-ink) !important;
    border-color: var(--zen-border) !important;
}

/* ========== FOOTER ========== */
footer {
    background: var(--zen-void) !important;
    border-top: 1px solid var(--zen-border) !important;
}
footer > div:first-child {
    background: linear-gradient(90deg, transparent, #38bdf8, #7dd3fc, transparent) !important;
}
footer p {
    color: var(--zen-text-secondary) !important;
}
footer p:first-of-type {
    color: var(--zen-text) !important;
}
footer a {
    color: #38bdf8 !important;
}

/* ========== NO RESULTS ========== */
.zen-no-results {
    color: var(--zen-text-muted) !important;
}

/* ========== Nav hover ========== */
header nav > div > div > div > a:hover {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08) !important;
}

/* ========== Tailwind color overrides ========== */
.text-primary-500, .text-primary-light {
    color: #38bdf8 !important;
}
.bg-primary-500 {
    background-color: #38bdf8 !important;
}
.border-primary-500 {
    border-color: #38bdf8 !important;
}
.from-primary-500 {
    --tw-gradient-from: #38bdf8 !important;
}
.to-purple-600, .to-purple-700 {
    --tw-gradient-to: #0ea5e9 !important;
}
.from-blue-600 {
    --tw-gradient-from: #38bdf8 !important;
}
.to-blue-700 {
    --tw-gradient-to: #0ea5e9 !important;
}
.text-purple-400 {
    color: #7dd3fc !important;
}
.bg-purple-500\/20, .bg-purple-600 {
    background-color: rgba(56, 189, 248, 0.15) !important;
}
.border-purple-400, .border-purple-500, .border-purple-700 {
    border-color: rgba(56, 189, 248, 0.3) !important;
}
.text-indigo-400 {
    color: #38bdf8 !important;
}
.shadow-blue-500\/30, .shadow-blue-500 {
    --tw-shadow-color: rgba(56, 189, 248, 0.3) !important;
}
.shadow-purple-500\/30, .shadow-purple-500 {
    --tw-shadow-color: rgba(56, 189, 248, 0.3) !important;
}

/* Gradient buttons override */
.bg-gradient-to-br.from-primary-500.to-purple-600,
.bg-gradient-to-r.from-primary-500.to-purple-600,
.bg-gradient-to-br.from-blue-600.to-purple-600 {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
}

/* Gradient text override */
.bg-gradient-to-r.from-primary-500.to-purple-600.bg-clip-text,
.bg-gradient-to-r.from-blue-400.via-purple-500.to-pink-500.bg-clip-text {
    background: linear-gradient(to right, #38bdf8, #0ea5e9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Focus states */
.focus\:border-purple-500:focus,
.focus\:ring-purple-500:focus {
    border-color: #38bdf8 !important;
}

/* ========== Hover effects override ========== */
.hover-lift:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15) !important;
}
.hover-bg:hover {
    background: rgba(56, 189, 248, 0.12) !important;
}
.recruitment-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15) !important;
}
.server-card-hover:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 8px 32px rgba(56, 189, 248, 0.12) !important;
}

@media print {
    .sakura-container, body::before { display: none !important; }
}