/*
=================================
CYBERPUNK THEME
=================================
"High Tech, Low Life"
*/

/* 1) Font & základ - PŘIDÁNO &subset=latin-ext pro 100% jistotu češtiny */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&subset=latin,latin-ext&display=swap');

.cyberpunk-mode {
    /* --- Paleta NEON CITY --- */
    --cy-neon-blue: #00f3ff;
    /* Cyan - Hlavní barva */
    --cy-neon-pink: #ff00ff;
    /* Magenta - Akcent */
    --cy-neon-yellow: #ffee00;
    /* Warning / Highlight */
    --cy-neon-green: #00ff41;
    /* Matrix Green / Success */
    --cy-neon-red: #ff2a2a;
    /* Danger / Error */

    --cy-bg-dark: #050510;
    /* Deep Void */
    --cy-bg-panel: #0a0a14;
    /* Panel Background */
    --cy-bg-overlay: rgba(0, 243, 255, 0.05);
    /* Scanline tint */

    --cy-border: #00f3ff;
    /* Borders are bright! */
    --cy-border-dim: #005f63;
    /* Dim borders */

    --cy-text: #e0faff;
    /* Ice white */
    --cy-text-muted: #6e8d99;
    /* Tech grey */

    /* Glow effect helpers */
    --cy-glow-blue: 0 0 10px rgba(0, 243, 255, 0.6), 0 0 20px rgba(0, 243, 255, 0.4);
    --cy-glow-pink: 0 0 10px rgba(255, 0, 255, 0.6), 0 0 20px rgba(255, 0, 255, 0.4);
    --cy-box-shadow: 0 0 0 1px var(--cy-border-dim), 0 4px 20px rgba(0, 0, 0, 0.8);

    /* ===== Přemapování na app proměnné (global) ===== */
    --c-primary: var(--cy-neon-blue);
    --c-secondary: var(--cy-text-muted);
    --c-accent: var(--cy-neon-yellow);

    --c-text: var(--cy-text);
    --c-text-muted: var(--cy-text-muted);

    --c-bg-body: var(--cy-bg-dark);
    --c-bg-container: var(--cy-bg-panel);
    --c-bg-subtle: #12121f;
    --c-bg-light: #0d0d16;

    --c-border: var(--cy-border-dim);
    --c-border-light: #1f2f38;

    --c-success: var(--cy-neon-green);
    --c-danger: var(--cy-neon-red);
    --c-warning: var(--cy-neon-yellow);
    --c-info: var(--cy-neon-blue);

    /* RGB verze pro opacity */
    --c-primary-rgb: 0, 243, 255;
    --c-danger-rgb: 255, 42, 42;

    /* Bootstrap přepisy - Vynucení tmavého režimu */
    --bs-body-bg: var(--cy-bg-dark);
    --bs-body-color: var(--cy-text);
    --bs-primary: var(--cy-neon-blue);
    --bs-primary-rgb: 0, 243, 255;
    --bs-secondary: #333;
    --bs-success: var(--cy-neon-green);
    --bs-danger: var(--cy-neon-red);
    --bs-warning: var(--cy-neon-yellow);
    --bs-info: var(--cy-neon-blue);

    --bs-border-color: var(--cy-border-dim);
    --bs-border-color-translucent: rgba(0, 243, 255, 0.15);

    /* Specifika pro Cyberpunk */
    --sidebar-bg: #020208;
    --sidebar-width: 16.25rem;
    --top-header-height: 4rem;
    /* Trochu vyšší pro "hud" feel */

    /* Fonty */
    --base-font-family: 'Rajdhani', sans-serif;
    /* Tech font pro body */

    /* Status barvy pro tickety */
    --status-new: var(--cy-neon-yellow);
    --status-open: var(--cy-neon-red);
    --status-client: var(--cy-neon-blue);
    --status-partner: var(--cy-neon-pink);
    --status-done: #444;
}

/* 2) Globální vzhled & Layout */

/* Reset zaoblení - Cyberpunk je ostrý! */
.cyberpunk-mode * {
    border-radius: 0 !important;
}

/* Base Body */
.cyberpunk-mode body,
.cyberpunk-mode .main-content,
.cyberpunk-mode .ticket-view-container {
    background-color: var(--cy-bg-dark) !important;
    background-image:
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    /* Grid pattern */
    background-position: center center;
    color: var(--cy-text);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}

/* CRT Scanline Overlay */
.cyberpunk-mode body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.6;
}

/* Headings - Orbitron Font */
.cyberpunk-mode h1,
.cyberpunk-mode h2,
.cyberpunk-mode h3,
.cyberpunk-mode h4,
.cyberpunk-mode h5,
.cyberpunk-mode h6,
.cyberpunk-mode .sidebar-brand,
.cyberpunk-mode .navbar-brand {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    color: var(--cy-neon-blue);
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
    letter-spacing: 2px;
}

/* Výběr textu */
.cyberpunk-mode ::selection {
    background: var(--cy-neon-pink);
    color: #fff;
    text-shadow: none;
}

/* Scrollbary */
.cyberpunk-mode *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cyberpunk-mode *::-webkit-scrollbar-track {
    background: #000;
    border-left: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode *::-webkit-scrollbar-thumb {
    background: var(--cy-neon-blue);
    border: 1px solid #000;
}

.cyberpunk-mode *::-webkit-scrollbar-thumb:hover {
    background: #fff;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}


/* 3) Header & Sidebar (HUD Style) */

/* Header */
.cyberpunk-mode .top-header,
.cyberpunk-mode .navbar {
    background-color: rgba(5, 5, 16, 0.95) !important;
    border-bottom: 2px solid var(--cy-neon-blue) !important;
    box-shadow: 0 5px 20px rgba(0, 243, 255, 0.1);
}

/* Sidebar */
.cyberpunk-mode .sidebar {
    background-color: var(--sidebar-bg);
    border-right: 2px solid var(--cy-border-dim);
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5);
}

.cyberpunk-mode .sidebar-link {
    color: var(--cy-text-muted);
    border-left: 3px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
}

.cyberpunk-mode .sidebar-link:hover {
    color: var(--cy-neon-blue);
    background-color: rgba(0, 243, 255, 0.1);
    border-left: 3px solid var(--cy-neon-blue);
    text-shadow: 0 0 8px var(--cy-neon-blue);
    padding-left: 1.5rem;
    /* Slide effect */
}

.cyberpunk-mode .sidebar-link.active {
    color: #000;
    background-color: var(--cy-neon-blue);
    border-left: 3px solid #fff;
    font-weight: 900;
    box-shadow: 0 0 15px var(--cy-neon-blue);
}

.cyberpunk-mode .sidebar-toggle-btn {
    background-color: #000;
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .sidebar-toggle-btn:hover {
    background-color: var(--cy-neon-blue);
    color: #000;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

/* 4) Tlačítka & Inputs (Cyber Style) */

/* Primární tlačítka - Glitch efekt */
.cyberpunk-mode .btn-primary {
    background-color: transparent !important;
    border: 2px solid var(--cy-neon-blue) !important;
    color: var(--cy-neon-blue) !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
    z-index: 1;
}

.cyberpunk-mode .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--cy-neon-blue);
    transition: 0.3s;
    z-index: -1;
}

.cyberpunk-mode .btn-primary:hover {
    color: #000 !important;
    box-shadow: 0 0 20px var(--cy-neon-blue);
    text-shadow: none;
}

.cyberpunk-mode .btn-primary:hover::before {
    left: 0;
}

/* Secondary (Outline) Buttons */
.cyberpunk-mode .btn-outline-secondary {
    border: 1px solid var(--cy-text-muted) !important;
    color: var(--cy-text-muted) !important;
}

.cyberpunk-mode .btn-outline-secondary:hover {
    border-color: var(--cy-neon-pink) !important;
    color: var(--cy-neon-pink) !important;
    box-shadow: 0 0 10px var(--cy-neon-pink);
    background: transparent !important;
}

/* Danger Buttons */
.cyberpunk-mode .btn-danger {
    background: transparent !important;
    border: 2px solid var(--cy-neon-red) !important;
    color: var(--cy-neon-red) !important;
    font-family: 'Orbitron', sans-serif;
}

.cyberpunk-mode .btn-danger:hover {
    background: var(--cy-neon-red) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--cy-neon-red);
}

/* Inputs */
.cyberpunk-mode .form-control,
.cyberpunk-mode .form-select,
.cyberpunk-mode .ts-control {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
    font-family: 'Rajdhani', monospace;
    font-size: 1.1rem;
}

.cyberpunk-mode .form-control:focus,
.cyberpunk-mode .form-select:focus,
.cyberpunk-mode .ts-control.focus {
    border-color: var(--cy-neon-pink) !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
    color: var(--cy-neon-pink) !important;
}

/* Oprava aktivního stavu pro tlačítka (např. View Switcher) */
.cyberpunk-mode .btn-outline-secondary:active,
.cyberpunk-mode .btn-outline-secondary.active,
.cyberpunk-mode .btn-outline-secondary.dropdown-toggle.show {
    background-color: var(--cy-neon-blue) !important;
    color: #000 !important;
    /* Černý text na svítivém pozadí */
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 15px var(--cy-neon-blue);
    text-shadow: none;
}

/* Oprava hoveru, aby se nestalo, že text zmizí */
.cyberpunk-mode .btn-outline-secondary:hover {
    background-color: transparent !important;
    color: var(--cy-neon-blue) !important;
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

/* Oprava View Switcher tlačítka specificky */
.cyberpunk-mode .view-switcher-btn {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: var(--cy-neon-blue) !important;
    border: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode .view-switcher-btn:hover {
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* 5) Karty & Panely (Tech Panels) */

/* 1. Část: Prvky, které jsou součástí layoutu (Karty) */
.cyberpunk-mode .card,
.cyberpunk-mode .grid-stack-item-content,
.cyberpunk-mode .modal-content {
    background-color: rgba(10, 10, 20, 0.9) !important;
    border: 1px solid var(--cy-border-dim) !important;
    box-shadow: none;
    position: relative;
    /* Karty musí být relative kvůli ozdobným rohům */
}

/* 2. Část: Prvky, které "plavou" (Dropdowny) - OPRAVA POZICE */
.cyberpunk-mode .notifications-panel-container,
.cyberpunk-mode .user-profile-dropdown {
    background-color: rgba(10, 10, 20, 0.98) !important;
    /* Trochu méně průhledné pro čitelnost */
    border: 1px solid var(--cy-neon-blue) !important;
    /* Svítivý okraj */
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    position: absolute !important;
    /* Zásadní oprava! */
    z-index: 2000;
}

/* Tech corners effect for cards */
.cyberpunk-mode .card::after,
.cyberpunk-mode .grid-stack-item-content::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, transparent 50%, var(--cy-neon-blue) 50%);
    pointer-events: none;
}

.cyberpunk-mode .card::before,
.cyberpunk-mode .grid-stack-item-content::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--cy-neon-blue);
    border-left: 2px solid var(--cy-neon-blue);
}

.cyberpunk-mode .card-header {
    background-color: rgba(0, 243, 255, 0.05) !important;
    border-bottom: 1px solid var(--cy-border-dim) !important;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

/* Stat Cards - Neon Glow */
.cyberpunk-mode .stat-card {
    border: 1px solid var(--cy-border-dim);
    transition: 0.3s;
}

.cyberpunk-mode .stat-card:hover {
    border-color: var(--cy-neon-blue);
    box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.1), 0 0 15px rgba(0, 243, 255, 0.2);
}

.cyberpunk-mode .stat-card.bg-primary {
    background: transparent !important;
    border-color: var(--cy-neon-blue) !important;
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .stat-card.bg-success {
    background: transparent !important;
    border-color: var(--cy-neon-green) !important;
    color: var(--cy-neon-green) !important;
}

.cyberpunk-mode .stat-card.bg-danger {
    background: transparent !important;
    border-color: var(--cy-neon-red) !important;
    color: var(--cy-neon-red) !important;
}

.cyberpunk-mode .stat-card.bg-warning {
    background: transparent !important;
    border-color: var(--cy-neon-yellow) !important;
    color: var(--cy-neon-yellow) !important;
}

.cyberpunk-mode .stat-card .h2 {
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 10px currentColor;
}


/* 6) Tabulky & Seznamy */

.cyberpunk-mode .table {
    color: var(--cy-text);
    border-color: var(--cy-border-dim);
}

.cyberpunk-mode .table thead th {
    background-color: rgba(0, 243, 255, 0.1);
    color: var(--cy-neon-blue);
    font-family: 'Orbitron', sans-serif;
    border-bottom: 2px solid var(--cy-neon-blue);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.cyberpunk-mode .table tbody tr {
    transition: 0.2s;
    background-color: transparent;
}

.cyberpunk-mode .table tbody tr:hover {
    background-color: rgba(0, 243, 255, 0.05);
    box-shadow: inset 2px 0 0 var(--cy-neon-blue);
}

.cyberpunk-mode .table td {
    border-bottom: 1px solid #1a1a2e;
    vertical-align: middle;
}

/* Kanban Board */
.cyberpunk-mode #kanban-wrapper {
    background-color: var(--cy-bg-dark) !important;
}

.cyberpunk-mode .kanban-column {
    background-color: rgba(10, 10, 20, 0.8) !important;
    border: 1px solid var(--cy-border-dim);
    border-top: 3px solid var(--cy-neon-blue);
    /* Barevné rozlišení nahoře */
}

.cyberpunk-mode .kanban-header {
    background: transparent !important;
    color: var(--cy-neon-blue);
    font-family: 'Orbitron', sans-serif;
    border-bottom: 1px dashed var(--cy-border-dim);
}

.cyberpunk-mode .kanban-card {
    background-color: #000 !important;
    border: 1px solid #333;
    color: #ccc;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
}

.cyberpunk-mode .kanban-card:hover {
    border-color: var(--cy-neon-pink);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
}

.cyberpunk-mode .kanban-card a {
    color: var(--cy-neon-blue) !important;
    font-weight: bold;
}

/* Vynucení tmavého pozadí pro řádky tabulky ticketů */
.cyberpunk-mode .ticket-row {
    background-color: rgba(10, 10, 20, 0.6) !important;
    color: var(--cy-text) !important;
    border-bottom: 1px solid var(--cy-border-dim);
}

/* Hover efekt na řádku - neonové podsvícení */
.cyberpunk-mode .ticket-row:hover {
    background-color: rgba(0, 243, 255, 0.1) !important;
    box-shadow: inset 2px 0 0 var(--cy-neon-blue);
}

/* Odkazy v tabulce (Předmět) musí být světlé */
.cyberpunk-mode .ticket-table td.subject a {
    color: var(--cy-neon-blue) !important;
    text-shadow: 0 0 2px rgba(0, 243, 255, 0.3);
}

/* Oprava Status Badge - v Cyberpunku vypadají plné barvy na tmavém pozadí špatně.
   Uděláme je průhledné s neonovým okrajem (Outline style) */
.cyberpunk-mode .status-badge {
    background-color: transparent !important;
    border: 1px solid currentColor;
    box-shadow: 0 0 5px currentColor;
    /* Ponecháme text color, který je definován v ticket_list.css,
       ale díky transparent pozadí bude čitelný */
}

/* Pokud jsou texty statusů příliš tmavé, zesvětlíme je: */
.cyberpunk-mode .status-10250918 {
    color: var(--cy-neon-yellow) !important;
}

/* Nový */
.cyberpunk-mode .status-10250938 {
    color: var(--cy-neon-red) !important;
}

/* Otevřený */
.cyberpunk-mode .status-closed {
    color: #888 !important;
    border-color: #555 !important;
    box-shadow: none !important;
}

/* 7) Notifikace & Modály */

/* Toast */
.cyberpunk-mode .toast-notification {
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    color: var(--cy-text);
    font-family: 'Rajdhani', sans-serif;
}

.cyberpunk-mode .toast-success {
    border-color: var(--cy-neon-green);
    box-shadow: 0 0 10px var(--cy-neon-green);
}

.cyberpunk-mode .toast-error {
    border-color: var(--cy-neon-red);
    box-shadow: 0 0 10px var(--cy-neon-red);
}

/* Dropdowns */
.cyberpunk-mode .dropdown-menu {
    background-color: #0a0a0a;
    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1);
}

.cyberpunk-mode .dropdown-item {
    color: var(--cy-text);
    font-family: 'Rajdhani', sans-serif;
}

.cyberpunk-mode .dropdown-item:hover {
    background-color: var(--cy-neon-blue);
    color: #000;
    font-weight: bold;
}

/* 8) Chatbot - AI Terminal */
.cyberpunk-mode #chatbotContainer {
    border: 2px solid var(--cy-neon-blue);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    background-color: rgba(0, 0, 0, 0.95);
}

.cyberpunk-mode #chatbotHeader {
    background-color: var(--cy-neon-blue);
    color: #000;
    font-weight: 900;
    letter-spacing: 1px;
}

.cyberpunk-mode #chatbotMessages {
    background-color: #000;
    background-image: linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px);
    background-size: 100% 20px;
    /* Terminal lines */
}

.cyberpunk-mode .chat-message.user .chat-bubble {
    background-color: rgba(0, 243, 255, 0.2);
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    font-family: 'Courier New', monospace;
}

.cyberpunk-mode .chat-message.bot .chat-bubble {
    background-color: #111;
    border: 1px solid var(--cy-neon-green);
    color: var(--cy-neon-green);
    font-family: 'Courier New', monospace;
}

/* 9) Live Ticker - Matrix Style */
.cyberpunk-mode .live-ticker-container {
    background-color: #000;
    border: 1px solid var(--cy-neon-green);
    color: var(--cy-neon-green);
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
    box-shadow: 0 0 15px var(--cy-neon-green);
    text-shadow: 0 0 5px var(--cy-neon-green);
}

/* 10) Tiptap Editor */
.cyberpunk-mode .tiptap-editor-wrapper {
    background-color: #080808;
    border: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .tiptap-editor-wrapper:focus-within {
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

.cyberpunk-mode .tiptap-toolbar-container {
    background: #111;
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .toolbar-button {
    color: var(--cy-text-muted);
}

.cyberpunk-mode .toolbar-button:hover,
.cyberpunk-mode .toolbar-button.is-active {
    color: var(--cy-neon-blue);
    background: rgba(0, 243, 255, 0.1);
}

/* =================================
   ANIMACE & EFEKTY
   =================================
*/

/* Glitch efekt na nadpisech při hoveru */
.cyberpunk-mode h1:hover,
.cyberpunk-mode .sidebar-brand:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: var(--cy-neon-pink);
}

@keyframes glitch {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(-2px, -2px)
    }

    60% {
        transform: translate(2px, 2px)
    }

    80% {
        transform: translate(2px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

/* Pulzující neonový okraj pro aktivní prvky */
@keyframes neon-pulse-blue {
    0% {
        box-shadow: 0 0 5px var(--cy-neon-blue);
    }

    50% {
        box-shadow: 0 0 20px var(--cy-neon-blue), 0 0 10px var(--cy-neon-blue);
    }

    100% {
        box-shadow: 0 0 5px var(--cy-neon-blue);
    }
}

.cyberpunk-mode .btn-primary:not(:hover) {
    animation: neon-pulse-blue 3s infinite alternate;
}

/* =================================
   DOPLŇKY
   =================================
*/

/* Command Palette - Terminal Style */
.cyberpunk-mode .command-palette-content {
    background-color: #000;
    border: 2px solid var(--cy-neon-green);
    box-shadow: 0 0 50px rgba(0, 255, 65, 0.2);
}

.cyberpunk-mode #command-palette-input {
    color: var(--cy-neon-green);
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.cyberpunk-mode .palette-item.active {
    background-color: var(--cy-neon-green);
    color: #000;
}

.cyberpunk-mode .palette-item.active .palette-item-icon,
.cyberpunk-mode .palette-item.active .palette-item-title,
.cyberpunk-mode .palette-item.active .palette-item-desc {
    color: #000;
}

/* Loading Spinner - Cyber */
.cyberpunk-mode .spinner-border {
    border-color: var(--cy-neon-blue);
    border-right-color: transparent;
    filter: drop-shadow(0 0 5px var(--cy-neon-blue));
}

/* Tagy */
.cyberpunk-mode .tag-item {
    background-color: transparent;
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

/* Patička */
.cyberpunk-mode .footer {
    background-color: #020205;
    border-top: 1px solid var(--cy-border-dim);
    color: var(--cy-text-muted);
}

.cyberpunk-mode .footer a:hover {
    color: var(--cy-neon-pink);
    text-shadow: 0 0 5px var(--cy-neon-pink);
}

/* Scroll buttons */
.cyberpunk-mode .scroll-btn {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .scroll-btn:hover {
    background-color: var(--cy-neon-blue);
    color: #000;
    box-shadow: 0 0 15px var(--cy-neon-blue);
}

/* Fix pro mobilní zobrazení */
@media (max-width: 992px) {
    .cyberpunk-mode body::before {
        display: none;
        /* Vypneme scanlines na mobilu pro výkon */
    }
}

/* =================================
   TICKET LIST & TABS OVERRIDES
   Oprava bílých lišt v seznamu ticketů
   =================================
*/

/* 1. Hlavní kontejner filtrů a lišty */
.cyberpunk-mode .filters,
.cyberpunk-mode .ticket-tabs-bar {
    background-color: rgba(5, 5, 16, 0.95) !important;
    /* Temné pozadí */
    border: 1px solid var(--cy-border-dim) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    color: var(--cy-text);
}

/* 2. Jednotlivé záložky (Tabs) */
.cyberpunk-mode .ticket-tab {
    background-color: #000 !important;
    /* Černá pro kontrast */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text-muted) !important;
    box-shadow: none !important;
}

/* Hover na záložku */
.cyberpunk-mode .ticket-tab:hover {
    border-color: var(--cy-neon-blue) !important;
    color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.3) !important;
}

/* Aktivní záložka */
.cyberpunk-mode .ticket-tab.active {
    background-color: rgba(0, 243, 255, 0.1) !important;
    border-color: var(--cy-neon-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 10px var(--cy-neon-blue) !important;
}

/* Číslo (index) v záložce */
.cyberpunk-mode .ticket-tab .tab-index-badge {
    color: var(--cy-neon-pink) !important;
    opacity: 1;
}

/* ID ticketu v záložce */
.cyberpunk-mode .ticket-tab .tab-id {
    color: var(--cy-border-dim) !important;
}

/* Zavírací křížek */
.cyberpunk-mode .ticket-tab .tab-close {
    color: var(--cy-neon-red);
}

.cyberpunk-mode .ticket-tab .tab-close:hover {
    background-color: rgba(255, 42, 42, 0.2);
}

/* 3. Oprava "Scroll Fade" efektu v záložkách
   (aby gradient nebyl do bílé, ale do tmavé) */
.cyberpunk-mode .ticket-tabs-scroll-wrapper::before {
    background: linear-gradient(to right, var(--cy-bg-dark), transparent) !important;
}

.cyberpunk-mode .ticket-tabs-scroll-wrapper::after {
    background: linear-gradient(to left, var(--cy-bg-dark), transparent) !important;
}

/* 4. Filtry a Inputs v hlavičce (Search, Select) */
.cyberpunk-mode .filters select,
.cyberpunk-mode .filters .search-input {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .filters select:focus,
.cyberpunk-mode .filters .search-input:focus {
    border-color: var(--cy-neon-pink) !important;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.3) !important;
}

/* Ikony přepínání pohledu (Tabulka/Karty/Kanban) */
.cyberpunk-mode .filters .toggle-icon {
    color: var(--cy-text-muted) !important;
    background-color: transparent !important;
}

.cyberpunk-mode .filters .toggle-icon:hover {
    color: var(--cy-neon-blue) !important;
    background-color: rgba(0, 243, 255, 0.1) !important;
}

.cyberpunk-mode .filters .toggle-icon.active {
    color: var(--cy-neon-yellow) !important;
    text-shadow: 0 0 5px var(--cy-neon-yellow);
}

/* Celkový počet ticketů */
.cyberpunk-mode #total-ticket-count {
    color: var(--cy-text-muted) !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
}

/* =================================
   MESSAGES MODULE OVERRIDES
   Oprava chatu pro Cyberpunk
   =================================
*/

/* 1. Hlavní layout a Sidebar */
.cyberpunk-mode .chat-layout,
.cyberpunk-mode .conversations-sidebar {
    background-color: var(--cy-bg-dark) !important;
    border-right: 1px solid var(--cy-border-dim);
}

/* Sidebar Header & Search */
.cyberpunk-mode .conversations-sidebar .sidebar-header {
    border-bottom: 1px solid var(--cy-border-dim);
    background-color: var(--cy-bg-panel);
}

.cyberpunk-mode .conversations-sidebar .sidebar-search .form-control {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
}

/* Seznam konverzací - Hover */
.cyberpunk-mode #conversations-list .list-group-item:hover {
    background-color: rgba(0, 243, 255, 0.05);
}

/* Seznam konverzací - AKTIVNÍ (Byl bílý) */
.cyberpunk-mode #conversations-list .list-group-item.active {
    background-color: rgba(0, 243, 255, 0.1) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2) !important;
}

.cyberpunk-mode #conversations-list .list-group-item.active .conversation-name,
.cyberpunk-mode #conversations-list .list-group-item.active .conversation-last-message strong {
    color: var(--cy-neon-blue) !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

.cyberpunk-mode #conversations-list .list-group-item.active .conversation-meta {
    color: var(--cy-text-muted) !important;
}

/* 2. Hlavička chatu (Chat Header) */
.cyberpunk-mode .chat-header {
    background-color: rgba(5, 5, 16, 0.95) !important;
    border-bottom: 1px solid var(--cy-border-dim) !important;
    backdrop-filter: none !important;
    /* Vypnutí glass efektu, který dělal mlhu */
}

.cyberpunk-mode #chat-header-title {
    color: var(--cy-neon-blue);
    text-shadow: 0 0 5px var(--cy-neon-blue);
}

.cyberpunk-mode #chat-header-participants {
    color: var(--cy-text-muted);
}

/* Tlačítka v hlavičce */
.cyberpunk-mode .chat-header .btn-outline-secondary {
    border-color: var(--cy-border-dim);
    color: var(--cy-text-muted);
}

.cyberpunk-mode .chat-header .btn-outline-secondary:hover {
    color: var(--cy-neon-blue);
    border-color: var(--cy-neon-blue);
    background: transparent;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

/* 3. Zprávy (Bubliny) */
.cyberpunk-mode .chat-messages-container {
    background-color: var(--cy-bg-dark);
    /* Grid pozadí */
    background-image:
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* PŘIJATÁ Zpráva (Cizí) */
.cyberpunk-mode .message-wrapper.received .message-bubble {
    background-color: #1a1a2e !important;
    /* Tmavě modrá/šedá */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text) !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.1);
}

/* Ocásek přijaté zprávy */
.cyberpunk-mode .message-wrapper.received .message-bubble::before {
    background-color: #1a1a2e !important;
}

/* ODESLANÁ Zpráva (Moje) */
.cyberpunk-mode .message-wrapper.sent .message-bubble {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(0, 100, 255, 0.3)) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Ocásek odeslané zprávy (musí ladit s koncem gradientu) */
.cyberpunk-mode .message-wrapper.sent .message-bubble::before {
    background: rgba(0, 100, 255, 0.3) !important;
    /* Nebo nastav na barvu borderu, pokud chceš ostrý přechod */
}

/* 4. Vstupní pole (Input Area) */
.cyberpunk-mode .message-input-wrapper {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    box-shadow: 0 -5px 20px rgba(0, 243, 255, 0.05) !important;
}

.cyberpunk-mode .editor-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px;
}

/* Ikony nástrojů (sponka, gif) */
.cyberpunk-mode .chat-tools .action-btn {
    color: var(--cy-text-muted);
}

.cyberpunk-mode .chat-tools .action-btn:hover {
    color: var(--cy-neon-blue);
    background-color: rgba(0, 243, 255, 0.1);
}

/* Tlačítko odeslat */
.cyberpunk-mode .message-input-wrapper .send-btn {
    background-color: var(--cy-neon-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

.cyberpunk-mode .message-input-wrapper .send-btn:disabled {
    background-color: #333 !important;
    color: #666 !important;
    box-shadow: none;
}

/* 5. Ostatní detaily */
.cyberpunk-mode .message-author {
    color: var(--cy-neon-pink) !important;
    /* Jméno odesílatele v chatu */
}

.cyberpunk-mode .message-meta {
    color: var(--cy-text-muted) !important;
}

/* Link Preview Card */
.cyberpunk-mode .link-preview-card {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode .link-preview-title {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .link-preview-description {
    color: var(--cy-text-muted) !important;
}

/* =================================
   MESSAGES MODULE OVERRIDES
   Oprava chatu pro Cyberpunk
   =================================
*/

/* 1. Hlavní layout a Sidebar */
.cyberpunk-mode .chat-layout,
.cyberpunk-mode .conversations-sidebar {
    background-color: var(--cy-bg-dark) !important;
    border-right: 1px solid var(--cy-border-dim);
}

/* Sidebar Header & Search */
.cyberpunk-mode .conversations-sidebar .sidebar-header {
    border-bottom: 1px solid var(--cy-border-dim);
    background-color: var(--cy-bg-panel);
}

.cyberpunk-mode .conversations-sidebar .sidebar-search .form-control {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
}

/* Seznam konverzací - Hover */
.cyberpunk-mode #conversations-list .list-group-item:hover {
    background-color: rgba(0, 243, 255, 0.05);
}

/* Seznam konverzací - AKTIVNÍ (Byl bílý) */
.cyberpunk-mode #conversations-list .list-group-item.active {
    background-color: rgba(0, 243, 255, 0.1) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2) !important;
}

.cyberpunk-mode #conversations-list .list-group-item.active .conversation-name,
.cyberpunk-mode #conversations-list .list-group-item.active .conversation-last-message strong {
    color: var(--cy-neon-blue) !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

.cyberpunk-mode #conversations-list .list-group-item.active .conversation-meta {
    color: var(--cy-text-muted) !important;
}

/* 2. Hlavička chatu (Chat Header) */
.cyberpunk-mode .chat-header {
    background-color: rgba(5, 5, 16, 0.95) !important;
    border-bottom: 1px solid var(--cy-border-dim) !important;
    backdrop-filter: none !important;
    /* Vypnutí glass efektu, který dělal mlhu */
}

.cyberpunk-mode #chat-header-title {
    color: var(--cy-neon-blue);
    text-shadow: 0 0 5px var(--cy-neon-blue);
}

.cyberpunk-mode #chat-header-participants {
    color: var(--cy-text-muted);
}

/* Tlačítka v hlavičce */
.cyberpunk-mode .chat-header .btn-outline-secondary {
    border-color: var(--cy-border-dim);
    color: var(--cy-text-muted);
}

.cyberpunk-mode .chat-header .btn-outline-secondary:hover {
    color: var(--cy-neon-blue);
    border-color: var(--cy-neon-blue);
    background: transparent;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

/* 3. Zprávy (Bubliny) */
.cyberpunk-mode .chat-messages-container {
    background-color: var(--cy-bg-dark);
    /* Grid pozadí */
    background-image:
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* PŘIJATÁ Zpráva (Cizí) */
.cyberpunk-mode .message-wrapper.received .message-bubble {
    background-color: #1a1a2e !important;
    /* Tmavě modrá/šedá */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text) !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.1);
}

/* Ocásek přijaté zprávy */
.cyberpunk-mode .message-wrapper.received .message-bubble::before {
    background-color: #1a1a2e !important;
}

/* ODESLANÁ Zpráva (Moje) */
.cyberpunk-mode .message-wrapper.sent .message-bubble {
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(0, 100, 255, 0.3)) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Ocásek odeslané zprávy (musí ladit s koncem gradientu) */
.cyberpunk-mode .message-wrapper.sent .message-bubble::before {
    background: rgba(0, 100, 255, 0.3) !important;
    /* Nebo nastav na barvu borderu, pokud chceš ostrý přechod */
}

/* 4. Vstupní pole (Input Area) */
.cyberpunk-mode .message-input-wrapper {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    box-shadow: 0 -5px 20px rgba(0, 243, 255, 0.05) !important;
}

.cyberpunk-mode .editor-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px;
}

/* Ikony nástrojů (sponka, gif) */
.cyberpunk-mode .chat-tools .action-btn {
    color: var(--cy-text-muted);
}

.cyberpunk-mode .chat-tools .action-btn:hover {
    color: var(--cy-neon-blue);
    background-color: rgba(0, 243, 255, 0.1);
}

/* Tlačítko odeslat */
.cyberpunk-mode .message-input-wrapper .send-btn {
    background-color: var(--cy-neon-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

.cyberpunk-mode .message-input-wrapper .send-btn:disabled {
    background-color: #333 !important;
    color: #666 !important;
    box-shadow: none;
}

/* 5. Ostatní detaily */
.cyberpunk-mode .message-author {
    color: var(--cy-neon-pink) !important;
    /* Jméno odesílatele v chatu */
}

.cyberpunk-mode .message-meta {
    color: var(--cy-text-muted) !important;
}

/* Link Preview Card */
.cyberpunk-mode .link-preview-card {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode .link-preview-title {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .link-preview-description {
    color: var(--cy-text-muted) !important;
}

/*
=================================
 HOME2 DASHBOARD PORT (Cyberpunk)
=================================
*/

/* --- Layout Wrapper --- */
.cyberpunk-mode .static-dashboard {
    background-color: transparent;
    /* Pozadí řeší body */
    min-height: calc(100vh - 60px);
    padding: 1.5rem;
    padding-top: 1rem;
}

/* --- Tlačítko pro Grid --- */
.cyberpunk-mode .btn-grid-toggle {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--cy-border-dim);
    color: var(--cy-text-muted);
    opacity: 0.6;
}

.cyberpunk-mode .btn-grid-toggle:hover {
    opacity: 1;
    background-color: rgba(0, 243, 255, 0.1);
    color: var(--cy-neon-blue);
    box-shadow: 0 0 10px var(--cy-neon-blue);
    border-color: var(--cy-neon-blue);
}

/* --- Grid Statistik --- */
.cyberpunk-mode .static-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

/* Specifické přepsání karet v tomto gridu, aby měly Cyberpunk styl */
.cyberpunk-mode #single_stat_card_template .stat-card {
    background-color: rgba(10, 10, 20, 0.9) !important;
    border: 1px solid var(--cy-border-dim);
    border-radius: 0;
    /* Ostré rohy */
    position: relative;
}

.cyberpunk-mode #single_stat_card_template .stat-card::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, transparent 50%, var(--cy-neon-blue) 50%);
}

.cyberpunk-mode #single_stat_card_template .stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2) !important;
}

.cyberpunk-mode .stat-card-title {
    color: var(--cy-text-muted);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.cyberpunk-mode .stat-card-value {
    color: var(--cy-neon-blue) !important;
    font-family: 'Rajdhani', monospace;
    text-shadow: 0 0 5px var(--cy-neon-blue);
}

.cyberpunk-mode .stat-card-icon-wrapper {
    background-color: rgba(0, 243, 255, 0.1) !important;
    color: var(--cy-neon-blue) !important;
    border: 1px solid var(--cy-border-dim);
    border-radius: 0 !important;
}

/* --- Sloty Widgetů --- */
.cyberpunk-mode .static-widget-slot .card {
    background-color: rgba(10, 10, 20, 0.9) !important;
    border: 1px solid var(--cy-border-dim) !important;
    border-radius: 0;
    box-shadow: none;
}

.cyberpunk-mode .static-widget-slot .card-header {
    background-color: rgba(0, 243, 255, 0.05);
    border-bottom: 1px solid var(--cy-border-dim);
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .static-widget-slot .card-title {
    color: var(--cy-neon-blue) !important;
    font-family: 'Orbitron', sans-serif;
}

.cyberpunk-mode .card-actions .btn-circle {
    color: var(--cy-text-muted);
}

.cyberpunk-mode .card-actions .btn-circle:hover {
    background-color: rgba(0, 243, 255, 0.1);
    color: var(--cy-neon-blue);
    box-shadow: 0 0 5px var(--cy-neon-blue);
}

/* --- Vylepšená Tabulka (Custom Table) --- */
.cyberpunk-mode .custom-table thead th {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--cy-neon-blue);
    border-bottom: 1px solid var(--cy-neon-blue);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.cyberpunk-mode .custom-table tbody td {
    border-bottom: 1px solid var(--cy-border-dim);
    color: var(--cy-text);
}

.cyberpunk-mode .custom-table tbody tr:hover {
    background-color: rgba(0, 243, 255, 0.05);
    box-shadow: inset 2px 0 0 var(--cy-neon-blue);
}

.cyberpunk-mode .ticket-subject-cell {
    color: var(--cy-text);
    font-weight: bold;
}

/* --- Sticky Sidebar Elements --- */
.cyberpunk-mode .ticket-input-static {
    background-color: #000;
    border: 1px solid var(--cy-border-dim);
    color: var(--cy-neon-blue);
    font-family: 'Rajdhani', monospace;
    border-radius: 0;
}

.cyberpunk-mode .ticket-input-static:focus {
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.cyberpunk-mode .ticket-input-static::placeholder {
    color: var(--cy-text-muted);
    opacity: 0.5;
}

.cyberpunk-mode .search-icon {
    color: var(--cy-neon-blue);
}

/* Quick Actions */
.cyberpunk-mode .quick-actions-card {
    background-color: rgba(10, 10, 20, 0.9);
    border: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode #quick-actions-container .quick-action-widget {
    color: var(--cy-text);
    border: 1px solid transparent;
}

.cyberpunk-mode #quick-actions-container .quick-action-widget:hover {
    background-color: rgba(0, 243, 255, 0.1);
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    box-shadow: 0 0 5px var(--cy-neon-blue);
}

/* --- Mobilní Zobrazení (Compact Mode & Cards) --- */
@media (max-width: 767px) {
    .cyberpunk-mode .stat-card {
        background-color: rgba(10, 10, 20, 0.9) !important;
        border: 1px solid var(--cy-border-dim) !important;
    }

    .cyberpunk-mode .latest-tickets-card .card-header {
        background-color: #000;
        border-color: var(--cy-neon-blue);
        color: var(--cy-neon-blue);
        border-radius: 0;
    }

    .cyberpunk-mode .latest-tickets-card .ticket-cards-container-placeholder {
        background-color: transparent !important;
        border: none;
    }

    /* Mobilní karta ticketu */
    .cyberpunk-mode .mobile-ticket-card {
        background-color: rgba(5, 5, 10, 0.9);
        border: 1px solid var(--cy-border-dim);
        border-left: 2px solid var(--cy-neon-blue);
        color: var(--cy-text);
        margin-bottom: 0.5rem;
    }

    /* Compact Mode overrides */
    .cyberpunk-mode.compact-mode .mobile-ticket-card {
        border: 1px solid var(--cy-border-dim);
        border-left: 2px solid var(--cy-neon-blue);
    }

    .cyberpunk-mode.compact-mode .mobile-ticket-id {
        color: var(--cy-text-muted);
    }

    .cyberpunk-mode.compact-mode .mobile-ticket-subject {
        color: var(--cy-neon-blue);
    }
}

/* --- Inline Command Palette Results --- */
.cyberpunk-mode .dashboard-search-results.command-palette-results-inline {
    background-color: #000;
    border: 1px solid var(--cy-neon-green);
    box-shadow: 0 10px 25px rgba(0, 255, 65, 0.2);
    border-radius: 0;
}

.cyberpunk-mode .dashboard-search-results .palette-item {
    color: var(--cy-text-muted);
}

.cyberpunk-mode .dashboard-search-results .palette-item:hover,
.cyberpunk-mode .dashboard-search-results .palette-item.active {
    background-color: var(--cy-neon-green);
    color: #000;
}

.cyberpunk-mode .dashboard-search-results .palette-group-header {
    color: var(--cy-neon-green);
    font-family: 'Orbitron', monospace;
    border-bottom: 1px solid var(--cy-border-dim);
}

/* --- Global Message Fix --- */
.cyberpunk-mode .global-message-content {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.cyberpunk-mode .global-message-text {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    color: var(--cy-text);
}

.cyberpunk-mode .global-message-text img {
    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 0 5px var(--cy-neon-blue);
}


/*
=================================
 GAMIFICATION (Ticket Master) PORT
=================================
*/

/* --- Reset a Základ --- */
.cyberpunk-mode .game-header-card,
.cyberpunk-mode .stat-box,
.cyberpunk-mode .game-card,
.cyberpunk-mode .quest-item,
.cyberpunk-mode .leaderboard-item,
.cyberpunk-mode .ach-icon-circle,
.cyberpunk-mode .game-avatar,
.cyberpunk-mode .level-badge,
.cyberpunk-mode .coin-display,
.cyberpunk-mode .shop-btn,
.cyberpunk-mode .game-back-btn,
.cyberpunk-mode .special-card,
.cyberpunk-mode .consumable-card {
    border-radius: 0 !important;
    /* Cyberpunk je hranatý */
    box-shadow: none !important;
}

/* --- Header --- */
.cyberpunk-mode .game-header-card {
    /* Nové: Měníme jen barvu podkladu, obrázek zůstane */
    background-color: var(--cy-bg-panel) !important;

    /* Volitelné: Ztmaví obrázek a smíchá ho s barvou panelu pro lepší cyberpunk feel */
    background-blend-mode: normal;

    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15) !important;
}

/* Úprava overlaye, aby byl obrázek vidět, ale text byl čitelný */
.cyberpunk-mode .game-header-overlay {
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.4) 0%,
            rgba(5, 5, 16, 0.9) 100%);
}

.cyberpunk-mode .game-title-text {
    font-family: 'Orbitron', sans-serif;
    color: var(--cy-neon-blue);
    text-shadow: 0 0 10px var(--cy-neon-blue);
    letter-spacing: 2px;
}

/* Avatar & Level */
.cyberpunk-mode .game-avatar {
    border: 2px solid var(--cy-neon-blue);
    box-shadow: 0 0 15px var(--cy-neon-blue);
}

.cyberpunk-mode .level-badge {
    background: #000;
    border: 1px solid var(--cy-neon-yellow);
    color: var(--cy-neon-yellow);
    font-family: 'Orbitron', monospace;
    box-shadow: 0 0 10px var(--cy-neon-yellow);
}

/* Coin Display */
.cyberpunk-mode .coin-display {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--cy-neon-yellow);
    color: var(--cy-neon-yellow);
    font-family: 'Rajdhani', monospace;
    letter-spacing: 1px;
}

/* Buttons */
.cyberpunk-mode .game-back-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .game-back-btn:hover {
    background: var(--cy-neon-blue);
    color: #000;
    box-shadow: 0 0 15px var(--cy-neon-blue);
}

.cyberpunk-mode .shop-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--cy-neon-yellow);
    color: var(--cy-neon-yellow);
}

.cyberpunk-mode .shop-btn:hover {
    background: var(--cy-neon-yellow);
    color: #000;
    box-shadow: 0 0 15px var(--cy-neon-yellow);
}

/* --- Stat Boxy (HUD styl) --- */
.cyberpunk-mode .stat-box {
    background-color: rgba(10, 10, 20, 0.8) !important;
    border: 1px solid var(--cy-border-dim);
    transition: 0.3s;
    position: relative;
}

.cyberpunk-mode .stat-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.cyberpunk-mode .stat-card-gold {
    border-color: var(--cy-neon-yellow);
    color: var(--cy-neon-yellow);
    background: linear-gradient(135deg, rgba(255, 238, 0, 0.05), transparent) !important;
}

.cyberpunk-mode .stat-card-blue {
    border-color: var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.05), transparent) !important;
}

.cyberpunk-mode .stat-card-fire {
    border-color: var(--cy-neon-red);
    color: var(--cy-neon-red);
    background: linear-gradient(135deg, rgba(255, 42, 42, 0.05), transparent) !important;
}

.cyberpunk-mode .stat-box h4 {
    font-family: 'Orbitron', sans-serif;
}

.cyberpunk-mode .stat-box .display-6 {
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    text-shadow: 0 0 5px currentColor;
}

/* --- Quests (Mise) --- */
.cyberpunk-mode .quest-item {
    background-color: rgba(10, 10, 20, 0.6);
    border: 1px solid var(--cy-border-dim);
    border-left-width: 4px;
    color: var(--cy-text);
}

.cyberpunk-mode .quest-item:hover {
    background-color: rgba(0, 243, 255, 0.05);
    transform: translateX(5px);
    box-shadow: -5px 0 10px rgba(0, 243, 255, 0.1);
}

.cyberpunk-mode .quest-title {
    color: var(--cy-text);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

.cyberpunk-mode .quest-progress-bg {
    background-color: #000;
    border: 1px solid var(--cy-border-dim);
}

/* --- Leaderboard --- */
.cyberpunk-mode .leaderboard-item {
    background-color: rgba(10, 10, 20, 0.4);
    border: 1px solid transparent;
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .leaderboard-item:hover {
    background-color: rgba(0, 243, 255, 0.05);
    border: 1px solid var(--cy-neon-blue);
    transform: translateX(10px);
}

.cyberpunk-mode .lb-rank {
    background: #000 !important;
    border: 1px solid var(--cy-border-dim);
    color: var(--cy-text-muted);
    border-radius: 0;
    font-family: 'Orbitron', monospace;
}

.cyberpunk-mode .lb-name {
    color: var(--cy-neon-blue);
    font-family: 'Rajdhani', sans-serif;
}

.cyberpunk-mode .lb-score {
    color: var(--cy-neon-yellow);
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 5px var(--cy-neon-yellow);
}

/* Rank 1 Special */
.cyberpunk-mode .leaderboard-item.rank-1 {
    border: 1px solid var(--cy-neon-yellow) !important;
    background: linear-gradient(90deg, rgba(255, 238, 0, 0.1), transparent);
    box-shadow: inset 0 0 20px rgba(255, 238, 0, 0.05);
}

.cyberpunk-mode .leaderboard-item.rank-1 .lb-rank {
    color: var(--cy-neon-yellow);
    border-color: var(--cy-neon-yellow);
    box-shadow: 0 0 10px var(--cy-neon-yellow);
}

/* --- Achievements (Holographic Badges) --- */
/* Původně bílé bubliny -> změna na tmavé hologramy */

.cyberpunk-mode .ach-icon-circle {
    background: rgba(0, 0, 0, 0.8) !important;
    /* Černé pozadí */
    border: 2px solid var(--cy-border-dim);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
}

.cyberpunk-mode .ach-icon-circle i {
    filter: drop-shadow(0 0 5px currentColor);
}

/* Tier Colors override */
.cyberpunk-mode .ach-tier-rare .ach-icon-circle {
    border-color: var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    box-shadow: 0 0 10px var(--cy-neon-blue), inset 0 0 15px rgba(0, 243, 255, 0.2);
}

.cyberpunk-mode .ach-tier-epic .ach-icon-circle {
    border-color: var(--cy-neon-yellow);
    color: var(--cy-neon-yellow);
    box-shadow: 0 0 15px var(--cy-neon-yellow), inset 0 0 15px rgba(255, 238, 0, 0.2);
    animation: pulse-gold-neon 2s infinite;
}

.cyberpunk-mode .ach-tier-legendary .ach-icon-circle {
    border-color: var(--cy-neon-red);
    color: var(--cy-neon-red);
    box-shadow: 0 0 20px var(--cy-neon-red), inset 0 0 20px rgba(255, 42, 42, 0.3);
}

.cyberpunk-mode .ach-tier-mythic .ach-icon-circle {
    border-color: var(--cy-neon-pink);
    color: var(--cy-neon-pink);
    box-shadow: 0 0 25px var(--cy-neon-pink), inset 0 0 25px rgba(255, 0, 255, 0.3);
}

.cyberpunk-mode .ach-name {
    color: var(--cy-text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

/* --- Shop Cards --- */
.cyberpunk-mode .special-card,
.cyberpunk-mode .consumable-card {
    background: #050510 !important;
    border: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode .special-card:hover,
.cyberpunk-mode .consumable-card:hover {
    border-color: var(--cy-neon-yellow) !important;
    box-shadow: 0 0 20px rgba(255, 238, 0, 0.2) !important;
}

.cyberpunk-mode .special-icon-wrapper,
.cyberpunk-mode .consumable-icon-wrapper {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--cy-border-dim);
    border-radius: 0;
    /* Square icons */
}

/* --- Modals (Override standard modal for game) --- */
.cyberpunk-mode .modal-monthly-bg {
    background: #000 !important;
    border: 2px solid var(--cy-neon-blue) !important;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
}

.cyberpunk-mode .podium-bar {
    background: rgba(0, 243, 255, 0.05);
    border: 1px solid var(--cy-neon-blue);
    border-bottom: none;
    border-radius: 0;
}

.cyberpunk-mode .podium-bar.gold {
    border-color: var(--cy-neon-yellow);
    box-shadow: 0 0 20px rgba(255, 238, 0, 0.2);
    background: rgba(255, 238, 0, 0.05);
}

/* Tooltips */
.cyberpunk-mode .achievement-badge::after {
    background: #000;
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    font-family: 'Rajdhani', monospace;
    border-radius: 0;
}

/*
=================================
 FIX: ČITELNOST TEXTŮ & ODMĚNY
=================================
*/

/* 1. Oprava nečitelného logu (přebití .text-dark) */
.cyberpunk-mode .activity-log-wrapper .text-dark,
.cyberpunk-mode .activity-item .text-dark,
.cyberpunk-mode .leaderboard-list .text-dark {
    color: var(--cy-text-muted) !important;
    /* Světle šedá místo černé */
    font-family: 'Rajdhani', sans-serif;
}

/* Zvýraznění jména hráče v logu (pokud je v tagu strong nebo na začátku) */
.cyberpunk-mode .activity-log-wrapper .text-dark strong,
.cyberpunk-mode .activity-item .text-dark strong {
    color: var(--cy-neon-blue) !important;
    font-weight: 600;
}

/* 2. Oprava štítku odměny (+1000 TC) */
.cyberpunk-mode .ach-reward-tag {
    background-color: #000 !important;
    border: 1px solid var(--cy-neon-green) !important;
    color: var(--cy-neon-green) !important;

    font-family: 'Courier New', monospace;
    /* Terminálový font */
    font-weight: 900;
    letter-spacing: -1px;
    font-size: 0.75rem;

    padding: 2px 6px;
    border-radius: 0 !important;
    /* Ostré rohy */
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.4);

    /* Posuneme ho, aby nepřekážel ikoně */
    transform: translate(5px, -5px) !important;
}

/* Efekt při najetí myší na odznak - štítek se rozzáří */
.cyberpunk-mode .achievement-badge:hover .ach-reward-tag {
    background-color: var(--cy-neon-green) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--cy-neon-green);
}

/*
=================================
TICKET DETAIL OVERRIDES (Oprava světlých částí)
=================================
*/

/* 1. Hlavní sticky hlavička (Záložky + Toolbar) */
.cyberpunk-mode #main-sticky-header {
    background-color: var(--cy-bg-dark) !important;
    /* Vynucení tmavého pozadí */
    border-bottom: 1px solid var(--cy-border-dim);
    z-index: 990;
}

/* 2. Záložky (Tabs) v detailu ticketu */
.cyberpunk-mode #ticket-tabs {
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode #ticket-tabs .nav-link {
    color: var(--cy-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
}

.cyberpunk-mode #ticket-tabs .nav-link:hover {
    color: var(--cy-neon-blue);
    background-color: rgba(0, 243, 255, 0.05);
    border-color: transparent;
}

.cyberpunk-mode #ticket-tabs .nav-link.active {
    color: var(--cy-neon-blue);
    background-color: var(--cy-bg-dark);
    /* Splyne s pozadím */
    border-color: var(--cy-border-dim) var(--cy-border-dim) var(--cy-bg-dark);
    box-shadow: 0 -2px 10px rgba(0, 243, 255, 0.1);
}

/* 3. Panel s ID ticketu a akcemi (pod záložkami) */
.cyberpunk-mode #comments-sticky-header {
    background-color: var(--cy-bg-dark);
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .main-ticket-id {
    color: var(--cy-text-muted);
    font-family: 'Orbitron', sans-serif;
}

.cyberpunk-mode #main-ticket-subject.editable-value {
    color: var(--cy-text);
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

/* 4. Pravý postranní panel (Sidebar) - Oprava "moc světlého" pozadí */
.cyberpunk-mode .ticket-sidebar {
    background-color: rgba(5, 5, 16, 0.95) !important;
    /* Tmavé, téměř neprůhledné */
    border-left: 1px solid var(--cy-border-dim) !important;
    backdrop-filter: blur(10px);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
}

.cyberpunk-mode .ticket-sidebar__header {
    color: var(--cy-neon-blue);
    border-bottom: 1px solid var(--cy-border-dim);
    text-shadow: 0 0 5px var(--cy-neon-blue);
}

.cyberpunk-mode .ticket-sidebar__item {
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}

.cyberpunk-mode .ticket-sidebar__label {
    color: var(--cy-text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.cyberpunk-mode .ticket-sidebar__value {
    color: var(--cy-text);
}

/* Inputy uvnitř sidebaru (např. email žadatele) */
.cyberpunk-mode .ticket-sidebar input.form-control,
.cyberpunk-mode .ticket-sidebar select.form-select {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim);
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .ticket-sidebar input.form-control::placeholder {
    color: var(--cy-text-muted);
    opacity: 0.5;
}

/* Toggle tlačítko sidebaru */
.cyberpunk-mode #toggle-sidebar-btn {
    background-color: #000 !important;
    border: 1px solid var(--cy-neon-blue) !important;
    color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.cyberpunk-mode #toggle-sidebar-btn:hover {
    background-color: var(--cy-neon-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--cy-neon-blue);
}

/* 5. Historie zákazníka (Recent tickets) */
.cyberpunk-mode .recent-ticket-item {
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}

.cyberpunk-mode .recent-ticket-id {
    color: var(--cy-neon-pink);
}

.cyberpunk-mode .recent-ticket-subject {
    color: var(--cy-text-muted);
}

/* 6. Propojené tickety (Linked Tickets Header) */
.cyberpunk-mode .linked-tickets-header {
    background-color: rgba(0, 243, 255, 0.05) !important;
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .linked-tickets-header-title {
    color: var(--cy-neon-green);
    font-family: 'Orbitron', sans-serif;
}

.cyberpunk-mode .linked-ticket-pill {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .linked-ticket-pill a {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .linked-ticket-pill .unlink-btn {
    color: var(--cy-neon-red);
}

.cyberpunk-mode .linked-ticket-pill:hover {
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 5px var(--cy-neon-blue);
}

/*
=================================
TICKET LIST - CUSTOM VIEW & DROPDOWNS
(Oprava světlých panelů filtrů)
=================================
*/

/* 1. Panel "Vlastní pohled" (vysouvací oblast) */
.cyberpunk-mode .custom-view-panel {
    background-color: var(--cy-bg-panel) !important;
    /* Tmavé pozadí */
    border-bottom: 1px solid var(--cy-neon-blue) !important;
    /* Neonová linka dole */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    color: var(--cy-text);
}

/* 2. Inputy a Selecty uvnitř filtrů */
.cyberpunk-mode .custom-view-grid .form-control,
.cyberpunk-mode .custom-view-grid .form-select,
.cyberpunk-mode .custom-view-grid input[type="date"] {
    background-color: #000 !important;
    /* Černá pro maximální kontrast */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
    font-family: 'Rajdhani', monospace;
}

.cyberpunk-mode .custom-view-grid .form-control:focus,
.cyberpunk-mode .custom-view-grid .form-select:focus {
    border-color: var(--cy-neon-pink) !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2) !important;
}

/* 3. Labely (Popisky polí) */
.cyberpunk-mode .custom-view-grid label {
    color: var(--cy-text-muted) !important;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyberpunk-mode .custom-view-grid label i {
    color: var(--cy-neon-green);
    /* Ikony v labelech */
}

/* 4. Spodní lišta s tlačítky v panelu filtrů */
.cyberpunk-mode .custom-view-actions {
    border-top: 1px solid var(--cy-border-dim) !important;
}

/* Tlačítko "Resetovat" */
.cyberpunk-mode #reset-custom-view {
    background-color: transparent !important;
    border: 1px solid var(--cy-border-dim);
    color: var(--cy-text-muted);
}

.cyberpunk-mode #reset-custom-view:hover {
    border-color: var(--cy-neon-red);
    color: var(--cy-neon-red);
    box-shadow: 0 0 10px rgba(255, 42, 42, 0.2);
}

/* 5. View Switcher Dropdown (Velké menu pro přepínání pohledů) */
.cyberpunk-mode #view-switcher-menu {
    background-color: var(--cy-bg-panel) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15);
}

/* Vyhledávání uvnitř View Switcheru */
.cyberpunk-mode .view-switcher-search-wrapper {
    background-color: var(--cy-bg-panel) !important;
    border-bottom: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode .view-switcher-search-input {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .view-switcher-search-input:focus {
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Položky v menu */
.cyberpunk-mode #view-switcher-menu .dropdown-item {
    color: var(--cy-text) !important;
    border-left: 3px solid transparent;
}

.cyberpunk-mode #view-switcher-menu .dropdown-item:hover {
    background-color: rgba(0, 243, 255, 0.1) !important;
    border-left-color: var(--cy-neon-blue);
    color: #fff !important;
}

.cyberpunk-mode #view-switcher-menu .dropdown-item.active {
    background-color: rgba(0, 243, 255, 0.2) !important;
    border-left-color: var(--cy-neon-pink);
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .view-icon {
    color: var(--cy-text-muted);
}

.cyberpunk-mode .dropdown-item:hover .view-icon {
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .view-count {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--cy-text-muted) !important;
}

/* 6. Oprava TomSelect (Štítky, atd.) v tmavém režimu */
.cyberpunk-mode .ts-control {
    background-color: #000 !important;
    border-color: var(--cy-border-dim) !important;
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .ts-control input {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .ts-dropdown {
    background-color: var(--cy-bg-panel) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    color: var(--cy-text) !important;
}

.cyberpunk-mode .ts-dropdown .option {
    color: var(--cy-text);
}

.cyberpunk-mode .ts-dropdown .active {
    background-color: rgba(0, 243, 255, 0.15) !important;
    color: #fff !important;
}

.cyberpunk-mode .ts-control .item {
    background-color: rgba(0, 243, 255, 0.2) !important;
    border: 1px solid var(--cy-neon-blue) !important;
    color: #fff !important;
    border-radius: 0 !important;
    /* Hranaté tagy */
}

/*
=================================
HOME DASHBOARD - TICKET MODAL OVERRIDES
(Oprava bílého modálu s detailem ticketu)
=================================
*/

/* 1. Hlavní rám modálního okna */
.cyberpunk-mode #ticketDetailModal .modal-content {
    background-color: var(--cy-bg-dark) !important;
    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
}

.cyberpunk-mode #ticketDetailModal .modal-header {
    border-bottom: 1px solid var(--cy-border-dim);
    background-color: var(--cy-bg-panel);
}

.cyberpunk-mode #ticketDetailModal .modal-title {
    color: var(--cy-neon-blue);
    text-shadow: 0 0 5px var(--cy-neon-blue);
}

.cyberpunk-mode #ticketDetailModal .btn-close {
    filter: invert(1) drop-shadow(0 0 2px var(--cy-neon-red));
    /* Bílý křížek s glow */
}

/* 2. Tělo modálu a pozadí */
.cyberpunk-mode #ticketDetailModalBody {
    background-color: #000 !important;
    /* Čistá černá pod obsahem */
}

/* 3. Karty uvnitř modálu (Levý sloupec s editorem, Pravý sloupec s info) */
.cyberpunk-mode #ticketDetailModal .card {
    background-color: var(--cy-bg-panel) !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text);
}

.cyberpunk-mode #ticketDetailModal .card-header {
    background-color: rgba(0, 243, 255, 0.05) !important;
    border-bottom: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text-muted);
}

/* 4. Záložky (Tabs) v modálu */
.cyberpunk-mode #ticketDetailModal .nav-tabs {
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode #ticketDetailModal .nav-link {
    color: var(--cy-text-muted);
}

.cyberpunk-mode #ticketDetailModal .nav-link:hover {
    color: var(--cy-neon-blue);
    border-color: transparent;
}

.cyberpunk-mode #ticketDetailModal .nav-link.active {
    background-color: var(--cy-bg-panel);
    border-color: var(--cy-border-dim) var(--cy-border-dim) var(--cy-bg-panel);
    color: var(--cy-neon-blue);
}

/* 5. Komentáře (To hlavní nečitelné) */
.cyberpunk-mode .comment-card {
    background-color: #0a0a10 !important;
    /* Velmi tmavá */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text);
    box-shadow: none;
}

.cyberpunk-mode .comment-header {
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}

.cyberpunk-mode .comment-header strong {
    color: var(--cy-neon-pink);
    /* Jméno autora */
}

.cyberpunk-mode .comment-header .text-muted {
    color: var(--cy-text-muted) !important;
}

.cyberpunk-mode .comment-body {
    color: var(--cy-text);
}

/* Styl pro přílohy v komentáři */
.cyberpunk-mode .attachment-link {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .comment-attachments {
    border-top: 1px solid rgba(0, 243, 255, 0.1);
}

/* 6. Pravý panel (Inputy a Selecty) */
.cyberpunk-mode #modal-ticket-info-panel .form-label {
    color: var(--cy-neon-green);
    letter-spacing: 1px;
}

.cyberpunk-mode #modal-ticket-info-panel .form-select,
.cyberpunk-mode #modal-ticket-info-panel .form-control,
.cyberpunk-mode #modal-ticket-info-panel .ts-control {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text) !important;
}

.cyberpunk-mode #modal-ticket-info-panel .form-select:focus,
.cyberpunk-mode #modal-ticket-info-panel .ts-control.focus {
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Tagy v pravém panelu */
.cyberpunk-mode .tag-input-container {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode .tag-item {
    background-color: rgba(0, 243, 255, 0.15) !important;
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue) !important;
    border-radius: 0;
}

.cyberpunk-mode .tag-item .remove-tag {
    color: var(--cy-neon-red);
}

/* 7. Tiptap Editor v modálu */
.cyberpunk-mode #ticketDetailModal .tiptap-editor-wrapper {
    border: 1px solid var(--cy-border-dim);
    background-color: #000;
}

.cyberpunk-mode #ticketDetailModal .tiptap-toolbar {
    background-color: #111;
    border-bottom: 1px solid var(--cy-border-dim);
}

.cyberpunk-mode #ticketDetailModal .ProseMirror {
    color: var(--cy-text);
    min-height: 150px;
}

.cyberpunk-mode #ticketDetailModal .ProseMirror p.is-editor-empty:first-child::before {
    color: var(--cy-text-muted);
}

/*
=================================
OPRAVA KOMENTÁŘŮ V TICKET DETAILU (Full Page)
=================================
*/

/* 1. Hlavní kontejner komentáře - musíme přebít bílé pozadí z ticket.css */
.cyberpunk-mode .comment {
    background-color: rgba(5, 5, 10, 0.85) !important;
    /* Tmavé průhledné pozadí */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text) !important;
    /* Světlý text */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Hover efekt pro lepší orientaci */
.cyberpunk-mode .comment:hover {
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15) !important;
}

/* 2. Specifický styl pro interní poznámky (aby nevypadaly jako světle žluté z ticket.css) */
.cyberpunk-mode .internal-note {
    background-color: rgba(40, 35, 10, 0.9) !important;
    /* Tmavě žlutá/hnědá */
    border-color: rgba(255, 238, 0, 0.3) !important;
    border-left: 4px solid var(--cy-neon-yellow) !important;
}

/* 3. Hlavička komentáře (Autor, datum) */
.cyberpunk-mode .comment-header {
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.cyberpunk-mode .comment-author {
    color: var(--cy-neon-pink) !important;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.cyberpunk-mode .comment-author a {
    color: var(--cy-neon-pink) !important;
    text-decoration: none;
}

.cyberpunk-mode .comment-date {
    color: var(--cy-text-muted) !important;
    font-family: 'Rajdhani', monospace;
}

/* 4. Tělo komentáře - vynucení barvy textu */
.cyberpunk-mode .comment-body {
    color: var(--cy-text) !important;
    font-size: 0.95rem;
}

/* 5. Brutální fix pro emaily (Outlook/Gmail), které posílají HTML s natvrdo černou barvou */
.cyberpunk-mode .comment-body * {
    color: inherit;
    /* Zkusíme donutit elementy dědit naši světlou barvu */
}

/* Specifické přebití inline stylů, pokud tam jsou spany s color: black */
.cyberpunk-mode .comment-body span[style*="color: #000"],
.cyberpunk-mode .comment-body span[style*="color: black"],
.cyberpunk-mode .comment-body p[style*="color: #000"] {
    color: var(--cy-text) !important;
}

/* Odkazy v textu */
.cyberpunk-mode .comment-body a {
    color: var(--cy-neon-blue) !important;
    text-decoration: underline;
}

/* 6. Přílohy v komentáři */
.cyberpunk-mode .attachment-item-display {
    background-color: #000 !important;
    border-color: var(--cy-border-dim) !important;
}

.cyberpunk-mode .attachment-item-display a {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .attachment-item-display:hover {
    border-color: var(--cy-neon-blue) !important;
    box-shadow: 0 0 5px var(--cy-neon-blue);
}

/*
=================================
TICKET TABS CONTEXT MENU
=================================
*/
.cyberpunk-mode .hsd-ctx {
    background-color: #050510 !important;
    /* Tmavé pozadí (Deep Void) */
    border: 1px solid var(--cy-neon-blue) !important;
    /* Neonový okraj */
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.25) !important;
    /* Záře */
    border-radius: 0 !important;
    /* Ostré rohy */
    padding: 5px 0 !important;
    z-index: 9999 !important;
}

/* Odkazy v menu */
.cyberpunk-mode .hsd-ctx a {
    color: var(--cy-text) !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    transition: all 0.1s ease-in-out;
    border-left: 2px solid transparent;
    /* Příprava pro hover efekt */
}

/* Hover efekt na položky menu */
.cyberpunk-mode .hsd-ctx a:hover {
    background-color: rgba(0, 243, 255, 0.15) !important;
    color: #fff !important;
    border-left-color: var(--cy-neon-blue);
    text-shadow: 0 0 5px var(--cy-neon-blue);
    padding-left: 15px !important;
    /* Jemný posun doprava */
}

/*
=================================
GAME HUB FIXES
=================================
*/

/* * Oprava zobrazení skóre v Game Hubu (původně černé na černém).
 * Cílíme specificky na badge uvnitř champion-info, který má třídu .text-body.
 * Místo dědění barvy vynutíme neonově žlutou pro high-tech vzhled.
 */
.cyberpunk-mode .champion-info .badge.text-body {
    color: var(--cy-neon-yellow) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    /* Tmavý podklad pro maximální kontrast */
    border: 1px solid var(--cy-border-dim) !important;
    box-shadow: 0 0 5px rgba(255, 238, 0, 0.15);
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    text-shadow: 0 0 2px rgba(255, 238, 0, 0.5);
}

/* * Jemné doladění jména šampiona, aby ladilo s opraveným badgem.
 * Zajistí, že jméno bude jasně bílé/cyan s lehkou září.
 */
.cyberpunk-mode .champion-name {
    color: var(--cy-text) !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

/* * Fix pro meta badge (např. "Gamifikace", "Retro Klasika"),
 * pokud by byly také špatně čitelné na tmavém pozadí karty.
 */
.cyberpunk-mode .game-meta-badge {
    box-shadow: 0 0 5px currentColor;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/*
=================================
WEBMAIL IFRAME FIX (READABILITY)
Oprava čitelnosti obsahu emailů
=================================
*/

/* Aplikujeme filtr přímo na iframe prohlížeče zpráv.
   Většina HTML emailů počítá s bílým papírem a černým textem.
*/
.cyberpunk-mode #email-body-iframe {
    /* 1. Vynutíme bílý podklad, aby měl filtr co invertovat */
    background-color: #ffffff !important;

    /* 2. Invertujeme barvy:
       - Bílé pozadí -> zčerná (sedí do tématu).
       - Černý text -> zbělá (čitelnost).
    */
    filter: invert(1) hue-rotate(180deg);

    /* 3. Jemné doladění, aby bílá (nyní černá) nebyla úplně 100% "vanta black",
       ale ladila s pozadím aplikace */
    opacity: 0.95;

    /* Pokud chceš, aby iframe neměl v tomto režimu rámeček (volitelné) */
    border: none;
}

/* Fix pro editor při psaní (pokud by dělal problémy i tam,
   ale Tiptap má vlastní styly výše).
   Pro jistotu, pokud se v editoru objeví iframe (např. citace):
*/
.cyberpunk-mode .email-quote-node-view iframe {
    background-color: #ffffff !important;
    filter: invert(1) hue-rotate(180deg);
}

/*
=================================
ADMIN DASHBOARD PORT (Admin Menu)
=================================
*/

/* --- Page Header --- */
.cyberpunk-mode .page-header {
    background: radial-gradient(circle at 50% -20%, rgba(0, 243, 255, 0.15), transparent 70%),
        linear-gradient(180deg, var(--cy-bg-panel), #000);
    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.1);
    border-radius: 0;
}

.cyberpunk-mode .page-header::after {
    background-image:
        linear-gradient(to right, rgba(0, 243, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 243, 255, 0.1) 1px, transparent 1px);
    opacity: 0.3;
}

.cyberpunk-mode .header-icon-wrapper {
    background-color: #000 !important;
    border: 1px solid var(--cy-neon-blue);
    box-shadow: 0 0 15px var(--cy-neon-blue);
    border-radius: 0;
}

.cyberpunk-mode .header-icon-wrapper i {
    color: var(--cy-neon-blue);
    filter: drop-shadow(0 0 5px var(--cy-neon-blue));
}

/* --- Stats Row --- */
.cyberpunk-mode .stat-card {
    background-color: rgba(10, 10, 20, 0.8) !important;
    border: 1px solid var(--cy-border-dim);
    border-radius: 0;
}

.cyberpunk-mode .stat-card:hover {
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2) !important;
    transform: translateY(-2px);
}

.cyberpunk-mode .stat-card::before {
    background: var(--cy-neon-blue);
    /* Levý pruh */
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

.cyberpunk-mode .stat-label {
    color: var(--cy-text-muted);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.cyberpunk-mode .stat-value {
    color: var(--cy-text) !important;
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    text-shadow: 0 0 5px currentColor;
}

/* Specifické barvy hodnot ve statistikách */
.cyberpunk-mode .stat-value.text-primary {
    color: var(--cy-neon-blue) !important;
    text-shadow: 0 0 8px var(--cy-neon-blue);
}

.cyberpunk-mode .stat-value.text-danger {
    color: var(--cy-neon-red) !important;
    text-shadow: 0 0 8px var(--cy-neon-red);
}

.cyberpunk-mode .stat-value.text-success {
    color: var(--cy-neon-green) !important;
    text-shadow: 0 0 8px var(--cy-neon-green);
}

/* --- Admin Cards (Grid) --- */
.cyberpunk-mode .admin-card {
    background-color: #050510 !important;
    border: 1px solid var(--cy-border-dim);
    border-radius: 0;
    transition: 0.2s;
}

.cyberpunk-mode .admin-card:hover,
.cyberpunk-mode .admin-card:focus-within {
    border-color: var(--cy-neon-blue);
    box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.1), 0 0 15px rgba(0, 243, 255, 0.3);
    transform: translateY(-4px);
}

.cyberpunk-mode .card-title {
    color: var(--cy-neon-blue);
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 3px rgba(0, 243, 255, 0.3);
}

.cyberpunk-mode .card-text {
    color: var(--cy-text-muted);
    font-family: 'Rajdhani', sans-serif;
}

/* --- Icon Circles (Override pastel colors) --- */
/* Zrušíme pastelová pozadí a uděláme z nich neonové kruhy (čtverce) */
.cyberpunk-mode .icon-circle {
    border-radius: 0 !important;
    /* Cyberpunk is edged */
    background-color: #000 !important;
    /* Vždy černé pozadí */
    border: 1px solid currentColor;
    /* Barva rámečku podle barvy textu */
    box-shadow: 0 0 10px currentColor;
    /* Glow podle barvy */
}

/* Přemapování Bootstrap barev na Neon */
.cyberpunk-mode .icon-circle.bg-success {
    color: var(--cy-neon-green) !important;
}

.cyberpunk-mode .icon-circle.bg-info {
    color: var(--cy-neon-blue) !important;
}

.cyberpunk-mode .icon-circle.bg-danger {
    color: var(--cy-neon-red) !important;
}

.cyberpunk-mode .icon-circle.bg-warning {
    color: var(--cy-neon-yellow) !important;
}

.cyberpunk-mode .icon-circle.bg-purple {
    color: var(--cy-neon-pink) !important;
    border-color: var(--cy-neon-pink) !important;
    box-shadow: 0 0 10px var(--cy-neon-pink);
}

.cyberpunk-mode .icon-circle.bg-secondary {
    color: var(--cy-text-muted) !important;
    border-color: var(--cy-border-dim) !important;
    box-shadow: none;
}

/* Efekt při hoveru na kartu - ikona se rozzáří víc */
.cyberpunk-mode .admin-card:hover .icon-circle {
    background-color: rgba(255, 255, 255, 0.05) !important;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 20px currentColor;
}

/* --- Card Action Button --- */
.cyberpunk-mode .card-action {
    background: transparent;
    border: 1px solid var(--cy-neon-blue);
    color: var(--cy-neon-blue);
    border-radius: 0;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.cyberpunk-mode .admin-card:hover .card-action {
    background: var(--cy-neon-blue);
    color: #000;
    box-shadow: 0 0 10px var(--cy-neon-blue);
}

/* --- Search Bar --- */
.cyberpunk-mode .search-input {
    background-color: #000 !important;
    border: 1px solid var(--cy-border-dim);
    color: var(--cy-neon-blue);
    border-radius: 0;
    font-family: 'Rajdhani', monospace;
    font-size: 1.1rem;
}

.cyberpunk-mode .search-input::placeholder {
    color: var(--cy-border-dim);
}

.cyberpunk-mode .search-input:focus {
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

.cyberpunk-mode .search-icon {
    color: var(--cy-neon-blue);
}

.cyberpunk-mode .kbd-shortcut {
    background-color: var(--cy-neon-blue);
    color: #000;
    border: none;
    border-radius: 0;
    font-weight: bold;
    box-shadow: 0 0 5px var(--cy-neon-blue);
}

/* Highlight nalezeného textu */
.cyberpunk-mode mark.highlight {
    background-color: var(--cy-neon-yellow);
    color: #000;
    box-shadow: 0 0 10px var(--cy-neon-yellow);
}

/* --- Section Titles --- */
.cyberpunk-mode .section-title {
    color: var(--cy-neon-blue);
    border-bottom: 1px solid var(--cy-border-dim);
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

.cyberpunk-mode .section-title i {
    color: var(--cy-neon-pink);
    filter: drop-shadow(0 0 3px var(--cy-neon-pink));
}

/*
=================================
 AVATAR FRAMES - SQUARE OVERRIDES
 Přepnutí kulatých rámečků na čtvercové (specificky pro CP mód)
=================================
*/

/* 1. Globální vynucení hranatých tvarů pro všechny rámy a jejich vrstvy */
.cyberpunk-mode .avatar-frame-container,
.cyberpunk-mode .message-avatar-wrapper,
.cyberpunk-mode .avatar-frame-container img,
.cyberpunk-mode .message-avatar-wrapper img,
.cyberpunk-mode [class^="frame-"],
.cyberpunk-mode [class*=" frame-"],
.cyberpunk-mode [class^="frame-"]::before,
.cyberpunk-mode [class^="frame-"]::after,
.cyberpunk-mode [class*=" frame-"]::before,
.cyberpunk-mode [class*=" frame-"]::after {
    border-radius: 0 !important;
}

/* 2. Specifické úpravy pro efekty závislé na kruhové geometrii */

/* Radar - změna z kruhového radaru na čtvercový taktický grid */
.cyberpunk-mode .frame-radar,
.cyberpunk-mode .message-avatar-wrapper.frame-radar {
    overflow: hidden;
}

.cyberpunk-mode .frame-radar::before,
.cyberpunk-mode .message-avatar-wrapper.frame-radar::before {
    /* Místo kruhů uděláme grid */
    background:
        linear-gradient(rgba(0, 255, 0, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.2) 1px, transparent 1px);
    background-size: 10px 10px;
    border-radius: 0 !important;
}

/* Xmas Lights - odstranění masek, aby světýlka byla i v rozích čtverce */
.cyberpunk-mode .frame-xmas-lights::before,
.cyberpunk-mode .message-avatar-wrapper.frame-xmas-lights::before {
    mask: none !important;
    -webkit-mask: none !important;
}

/* Bio Frame - Vypnutí morphing animace (tekutina), která na čtverci vypadá rozbitě */
.cyberpunk-mode .frame-bio::before,
.cyberpunk-mode .message-avatar-wrapper.frame-bio::before,
.cyberpunk-mode .frame-bio::after,
.cyberpunk-mode .message-avatar-wrapper.frame-bio::after {
    border: 1px dashed rgba(94, 255, 0, 0.5);
    /* Techničtější vzhled */
}

/* Solar & Magma - Ponecháme visible overflow pro efekt výbuchu */
.cyberpunk-mode .frame-solar,
.cyberpunk-mode .message-avatar-wrapper.frame-solar,
.cyberpunk-mode .frame-magma,
.cyberpunk-mode .message-avatar-wrapper.frame-magma {
    overflow: visible;
}

/* Luxury - Úprava diamantu, aby to byl spíš "tech shard" */
.cyberpunk-mode .frame-luxury::before,
.cyberpunk-mode .message-avatar-wrapper.frame-luxury::before {
    /* Změna clip-path, aby rotující odlesk pokryl celý čtverec */
    clip-path: none !important;
}

/* Quantum & God Mode - Úprava insetu pro ostřejší hrany */
.cyberpunk-mode .frame-quantum::before,
.cyberpunk-mode .message-avatar-wrapper.frame-quantum::before,
.cyberpunk-mode .frame-god-mode::before,
.cyberpunk-mode .message-avatar-wrapper.frame-god-mode::before {
    inset: -4px;
}

/*
=================================
TICKET MASTER WIDGET FIX (Active Tickets)
=================================
*/

/* 1. Hlavní karta tiketu - Reset do Cyberpunku */
.cyberpunk-mode .ticket-row-card {
    background-color: rgba(5, 5, 10, 0.9) !important;
    /* Tmavé pozadí */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Ostré rohy */
    margin-bottom: 0.5rem;
}

/* Hover efekt - Neonový scan */
.cyberpunk-mode .ticket-row-card:hover {
    background-color: rgba(0, 243, 255, 0.05) !important;
    border-color: var(--cy-neon-blue) !important;
    box-shadow: inset 2px 0 0 var(--cy-neon-blue), 0 0 15px rgba(0, 243, 255, 0.1) !important;
    transform: translateX(5px);
}

/* 2. Priority - Neonové okraje */
/* Urgent (Red) */
.cyberpunk-mode .ticket-row-card.border-danger {
    border-color: var(--cy-neon-red) !important;
    box-shadow: inset 2px 0 0 var(--cy-neon-red) !important;
}

.cyberpunk-mode .ticket-row-card.border-danger:hover {
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.2) !important;
}

/* High (Yellow) */
.cyberpunk-mode .ticket-row-card.border-warning {
    border-color: var(--cy-neon-yellow) !important;
}

/* Normal (Blue/Default) */
.cyberpunk-mode .ticket-row-card.border-primary,
.cyberpunk-mode .ticket-row-card.border-light {
    border-color: var(--cy-border-dim) !important;
}

/* 3. Texty a Ikony uvnitř */
.cyberpunk-mode .ticket-row-card .text-muted,
.cyberpunk-mode .ticket-row-card .text-secondary {
    color: var(--cy-text-muted) !important;
}

.cyberpunk-mode .ticket-row-card i {
    filter: drop-shadow(0 0 2px currentColor);
}

/* Předmět tiketu */
.cyberpunk-mode .ticket-subject-text {
    color: var(--cy-neon-blue) !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

/* 4. Badge (Štítky) - ID, Status, Assignee */
.cyberpunk-mode .ticket-row-card .badge {
    background-color: #000 !important;
    /* Černý podklad */
    border: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text-muted) !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace;
}

/* ID Tiketu */
.cyberpunk-mode .ticket-row-card .badge.bg-light.text-dark {
    color: var(--cy-neon-blue) !important;
    border-color: var(--cy-neon-blue) !important;
}

/* 5. Akční tlačítka (Oko, Terč, Šipka) */
.cyberpunk-mode .ticket-row-card .btn {
    border-radius: 0 !important;
    /* Hranatá tlačítka */
}

/* Tlačítko "Jdu na to" (Focus) - Neaktivní */
.cyberpunk-mode .ticket-row-card .btn-outline-secondary {
    color: var(--cy-text-muted) !important;
    border-color: var(--cy-text-muted) !important;
}

.cyberpunk-mode .ticket-row-card .btn-outline-secondary:hover {
    color: var(--cy-neon-yellow) !important;
    border-color: var(--cy-neon-yellow) !important;
    background: rgba(255, 238, 0, 0.1) !important;
    box-shadow: 0 0 10px var(--cy-neon-yellow);
}

/* Tlačítko "Právě řešíš" (Aktivní Focus) */
.cyberpunk-mode .ticket-row-card .btn-success {
    background-color: transparent !important;
    border: 1px solid var(--cy-neon-green) !important;
    color: var(--cy-neon-green) !important;
    box-shadow: 0 0 10px var(--cy-neon-green) !important;
    animation: neon-pulse-green 2s infinite;
}

/* Tlačítko "Otevřít tiket" (Šipka) */
.cyberpunk-mode .ticket-row-card .btn-icon-only {
    background-color: transparent !important;
    color: var(--cy-text-muted) !important;
    border: 1px solid transparent;
}

.cyberpunk-mode .ticket-row-card .btn-icon-only:hover {
    color: var(--cy-neon-blue) !important;
    border-color: var(--cy-neon-blue);
    box-shadow: 0 0 10px var(--cy-neon-blue);
    transform: translateX(3px);
}

/* Animace pro aktivní tlačítko */
@keyframes neon-pulse-green {
    0% {
        box-shadow: 0 0 5px var(--cy-neon-green);
    }

    50% {
        box-shadow: 0 0 15px var(--cy-neon-green), inset 0 0 5px var(--cy-neon-green);
    }

    100% {
        box-shadow: 0 0 5px var(--cy-neon-green);
    }
}

/*
=================================
ATTENDANCE WIDGET (Cyberpunk Patch)
=================================
*/

/* 1. Přemapování barev proměnných pro neonový vzhled
   (Přepisuje definice z home.css pro tento režim) */
.cyberpunk-mode {
    --c-office-bg: transparent;
    --c-office-text: var(--cy-neon-green);

    --c-ho-bg: transparent;
    --c-ho-text: var(--cy-neon-blue);

    --c-sickday-bg: transparent;
    --c-sickday-text: var(--cy-neon-yellow);

    --c-sick-bg: transparent;
    --c-sick-text: var(--cy-neon-red);

    --c-vacation-bg: transparent;
    --c-vacation-text: var(--cy-neon-pink);

    --c-trip-bg: transparent;
    --c-trip-text: #ffffff;

    --c-unpaid-bg: transparent;
    --c-unpaid-text: var(--cy-text-muted);

    --c-workoff-bg: transparent;
    --c-workoff-text: #ff8800;
    /* Neon Orange */
}

/* 2. Hlavní kontejner widgetu */
.cyberpunk-mode .attendance-widget {
    background-color: var(--cy-bg-panel) !important;
    border: 1px solid var(--cy-border-dim) !important;
    box-shadow: none !important;
}

.cyberpunk-mode .attendance-widget .card-header {
    background-color: rgba(0, 243, 255, 0.05) !important;
    border-bottom: 1px solid var(--cy-border-dim) !important;
}

.cyberpunk-mode .widget-month-label {
    font-family: 'Orbitron', sans-serif;
    color: var(--cy-neon-blue);
    text-shadow: 0 0 5px var(--cy-neon-blue);
    letter-spacing: 1px;
}

/* Tlačítka v hlavičce (předchozí/další měsíc) */
.cyberpunk-mode .attendance-widget .btn-group .btn {
    border-color: var(--cy-border-dim);
    color: var(--cy-text-muted);
    border-radius: 0;
}

.cyberpunk-mode .attendance-widget .btn-group .btn:hover {
    color: var(--cy-neon-blue);
    background-color: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 8px var(--cy-neon-blue);
}

/* 3. Tabulka a Buňky */
.cyberpunk-mode .attendance-calendar-table th,
.cyberpunk-mode .attendance-calendar-table td {
    border-color: #1a1a2e !important;
    /* Velmi tmavá modrá pro mřížku */
    color: var(--cy-text);
}

/* FIX: Sticky sloupce a hlavičky musí mít solidní pozadí, jinak prosvítají */
.cyberpunk-mode .attendance-calendar-table thead th,
.cyberpunk-mode .attendance-calendar-table td:first-child,
.cyberpunk-mode .attendance-calendar-table th:first-child {
    background-color: #050510 !important;
    /* Deep Void (shodné s body) */
    border-right: 1px solid var(--cy-border-dim);
    border-bottom: 1px solid var(--cy-border-dim);
    z-index: 20;
    /* Musí být nahoře */
}

/* Jméno uživatele v prvním sloupci */
.cyberpunk-mode .attendance-calendar-table td:first-child span {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    color: var(--cy-neon-blue);
}

/* Změna podbarvení a orámování hlavičky pro dnešek */
.cyberpunk-mode .attendance-calendar-table thead th.day-col.today {
    background-color: rgba(255, 153, 0, 0.15) !important;
    /* Jemná oranžová na pozadí */
    border-bottom: 2px solid #ff9900 !important;
    /* Neonová oranžová linka */
    box-shadow: inset 0 -10px 20px -5px rgba(255, 153, 0, 0.2);
    /* Oranžová záře zespodu */
}

/* Změna barvy písma na Neon Orange */
.cyberpunk-mode .attendance-calendar-table thead th.day-col.today div {
    color: #ff9900 !important;
    /* Jasná oranžová */
    text-shadow: 0 0 5px rgba(255, 153, 0, 0.8);
    /* Záře písma pro čitelnost */
    font-weight: 900 !important;
    /* Tučnější písmo */
    opacity: 1 !important;
}

/* 4. Stylování dnů (Víkendy, Dnešek) */

/* Běžný den - hlavička */
.cyberpunk-mode .day-col div:first-child {
    font-family: 'Orbitron', sans-serif;
    /* Číslo dne */
    font-weight: bold;
}

/* Víkend - Místo šedé použijeme "scanline" efekt nebo ztmavení */
.cyberpunk-mode .day-col.weekend {
    background-color: rgba(0, 0, 0, 0.6) !important;
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 5px,
            rgba(255, 255, 255, 0.03) 5px,
            rgba(255, 255, 255, 0.03) 10px);
}

/* Dnešní den - Neonový highlight */
.cyberpunk-mode .day-col.today {
    background-color: rgba(0, 243, 255, 0.05) !important;
    border-bottom: 2px solid var(--cy-neon-blue) !important;
    box-shadow: inset 0 -10px 15px -5px rgba(0, 243, 255, 0.15);
}

.cyberpunk-mode .day-col.today div {
    color: var(--cy-neon-blue);
    text-shadow: 0 0 5px var(--cy-neon-blue);
}

/* Svátek - Červený nádech */
.cyberpunk-mode .day-col.holiday {
    background-color: rgba(255, 42, 42, 0.05) !important;
    color: var(--cy-neon-red);
}

/* 5. Ikony stavů (Holografický čtverec místo kolečka) */
.cyberpunk-mode .att-icon {
    border-radius: 0 !important;
    /* Hranaté */
    background-color: rgba(0, 0, 0, 0.8) !important;
    /* Vždy tmavé pozadí */

    /* Trik: Použijeme currentColor (který je nastaven přes JS inline style) pro border a glow */
    border: 1px solid currentColor;
    box-shadow: 0 0 5px currentColor, inset 0 0 5px currentColor;

    /* Reset velikosti pro ostřejší vzhled */
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

/* Efekt při najetí na ikonu */
.cyberpunk-mode .att-icon:hover {
    transform: scale(1.2) rotate(45deg);
    /* Tech rotace */
    box-shadow: 0 0 15px currentColor;
    z-index: 100;
    background-color: #000 !important;
}

/* 6. Patička s legendou */
.cyberpunk-mode .attendance-widget .card-footer {
    background-color: #050510 !important;
    border-top: 1px solid var(--cy-border-dim) !important;
    color: var(--cy-text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
}

/* Scrollbar uvnitř tabulky */
.cyberpunk-mode .attendance-table-wrapper::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.cyberpunk-mode .attendance-table-wrapper::-webkit-scrollbar-track {
    background: #000;
}

.cyberpunk-mode .attendance-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--cy-border-dim);
    border-radius: 0;
}

.cyberpunk-mode .attendance-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--cy-neon-blue);
}