/* ===== HACKER THEME (Local Development) ===== */
/* Matrix-style green terminal aesthetic */

[data-theme="hacker"] {
    --primary-color: #00ff41;
    --secondary-color: #00cc33;
    --success-color: #00ff41;
    --danger-color: #ff3333;
    --warning-color: #ffcc00;
    --bg-primary: #0a0a0a;
    --bg-secondary: #0d0d0d;
    --bg-tertiary: #141414;
    --text-primary: #00ff41;
    --text-secondary: #00cc33;
    --border-color: #00ff41;
    --shadow-sm: 0 0 5px rgba(0, 255, 65, 0.2);
    --shadow-md: 0 0 15px rgba(0, 255, 65, 0.3);
    --shadow-lg: 0 0 30px rgba(0, 255, 65, 0.4);
}

/* Body scanline effect */
[data-theme="hacker"] body {
    background: #0a0a0a;
    position: relative;
}

[data-theme="hacker"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 65, 0.03) 2px,
            rgba(0, 255, 65, 0.03) 4px
        );
    pointer-events: none;
    z-index: 9999;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}

/* Header */
[data-theme="hacker"] .header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid #00ff41;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

[data-theme="hacker"] .header h1 {
    color: #00ff41;
    text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

[data-theme="hacker"] .header h1::before {
    content: '> ';
    opacity: 0.7;
}

[data-theme="hacker"] .status-badge {
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid #00ff41;
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .logout-btn {
    background: transparent;
    border: 1px solid #00ff41;
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .logout-btn:hover {
    background: rgba(0, 255, 65, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
}

/* Sidebar */
[data-theme="hacker"] .sidebar {
    background: rgba(0, 0, 0, 0.95);
    border-right: 1px solid #00ff41;
}

[data-theme="hacker"] .nav-item {
    color: #00cc33;
    font-family: 'Courier New', monospace;
    border-left: 2px solid transparent;
}

[data-theme="hacker"] .nav-item::before {
    content: '$ ';
    opacity: 0.5;
}

[data-theme="hacker"] .nav-item:hover {
    background: rgba(0, 255, 65, 0.1);
    color: #00ff41;
    text-shadow: 0 0 5px #00ff41;
}

[data-theme="hacker"] .nav-item.active {
    background: rgba(0, 255, 65, 0.15);
    color: #00ff41;
    border-left: 2px solid #00ff41;
    border-right: none;
    text-shadow: 0 0 10px #00ff41;
}

/* Content area */
[data-theme="hacker"] .content {
    background: #0a0a0a;
}

[data-theme="hacker"] .section h2 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px #00ff41;
    letter-spacing: 1px;
}

[data-theme="hacker"] .section h2::before {
    content: '// ';
    opacity: 0.5;
}

/* Stat cards */
[data-theme="hacker"] .stat-card {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

[data-theme="hacker"] .stat-card:hover {
    box-shadow: 0 0 25px rgba(0, 255, 65, 0.4);
    transform: translateY(-2px);
}

[data-theme="hacker"] .stat-icon {
    background: rgba(0, 255, 65, 0.1);
    color: #00ff41;
    border: 1px solid #00ff41;
}

[data-theme="hacker"] .stat-info h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 5px #00ff41;
}

[data-theme="hacker"] .stat-info p {
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

/* System info panel */
[data-theme="hacker"] .system-info-panel {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

[data-theme="hacker"] .system-info-panel h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .info-item .info-label {
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .info-item .info-value {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

/* Routing examples panel */
[data-theme="hacker"] .routing-examples-panel {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

[data-theme="hacker"] .routing-examples-panel h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .routing-description {
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .routing-example-card {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #00ff41;
}

[data-theme="hacker"] .routing-example-card:hover {
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
}

[data-theme="hacker"] .routing-card-header {
    background: rgba(0, 255, 65, 0.1);
    border-bottom: 1px solid #00ff41;
}

[data-theme="hacker"] .routing-card-header h4 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .provider-badge {
    font-family: 'Courier New', monospace;
    border: 1px solid currentColor;
}

[data-theme="hacker"] .provider-badge.official {
    background: rgba(0, 100, 255, 0.2);
    color: #00aaff;
}

[data-theme="hacker"] .provider-badge.oauth {
    background: rgba(0, 255, 65, 0.2);
    color: #00ff41;
}

/* Protocol tabs */
[data-theme="hacker"] .protocol-tab {
    color: #00cc33;
    font-family: 'Courier New', monospace;
    border-bottom: 2px solid transparent;
}

[data-theme="hacker"] .protocol-tab:hover {
    color: #00ff41;
    background: rgba(0, 255, 65, 0.1);
}

[data-theme="hacker"] .protocol-tab.active {
    color: #00ff41;
    border-bottom-color: #00ff41;
    background: rgba(0, 255, 65, 0.15);
}

[data-theme="hacker"] .endpoint-path {
    background: #0a0a0a;
    border: 1px solid #00ff41;
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .usage-example label {
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .usage-example pre {
    background: #000;
    border: 1px solid #00ff41;
    box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.1);
}

[data-theme="hacker"] .usage-example code {
    color: #00ff41;
}

/* Routing tips */
[data-theme="hacker"] .routing-tips {
    background: rgba(0, 255, 65, 0.05);
    border-left: 4px solid #00ff41;
}

[data-theme="hacker"] .routing-tips h4 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .routing-tips li {
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

/* Forms */
[data-theme="hacker"] .config-panel {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

[data-theme="hacker"] .form-group label {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .form-control {
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid #00ff41;
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .form-control:focus {
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
    background: rgba(0, 255, 65, 0.1);
}

[data-theme="hacker"] .form-control::placeholder {
    color: rgba(0, 255, 65, 0.4);
}

[data-theme="hacker"] select.form-control {
    background: rgba(0, 255, 65, 0.05);
}

[data-theme="hacker"] select.form-control option {
    background: #0a0a0a;
    color: #00ff41;
}

/* Buttons */
[data-theme="hacker"] .btn-primary,
[data-theme="hacker"] .btn-success {
    background: transparent;
    border: 2px solid #00ff41;
    color: #00ff41;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

[data-theme="hacker"] .btn-primary:hover,
[data-theme="hacker"] .btn-success:hover {
    background: rgba(0, 255, 65, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
    text-shadow: 0 0 5px #00ff41;
}

[data-theme="hacker"] .btn-secondary {
    background: transparent;
    border: 1px solid #00cc33;
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .btn-secondary:hover {
    background: rgba(0, 255, 65, 0.1);
    border-color: #00ff41;
    color: #00ff41;
}

[data-theme="hacker"] .btn-danger {
    background: transparent;
    border: 2px solid #ff3333;
    color: #ff3333;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .btn-danger:hover {
    background: rgba(255, 51, 51, 0.1);
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.5);
}

/* Provider config sections */
[data-theme="hacker"] .provider-config,
[data-theme="hacker"] .advanced-config-section {
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid #00cc33;
}

[data-theme="hacker"] .advanced-config-section h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
    border-bottom-color: #00ff41;
}

/* Providers container */
[data-theme="hacker"] .providers-container {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
}

[data-theme="hacker"] .provider-item {
    border: 1px solid #00cc33;
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="hacker"] .provider-item:hover {
    border-color: #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
}

[data-theme="hacker"] .provider-name {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

/* Logs */
[data-theme="hacker"] .logs-container {
    background: #000;
    border: 1px solid #00ff41;
    box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
}

[data-theme="hacker"] .log-entry {
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .log-time {
    color: #00cc33;
}

[data-theme="hacker"] .log-level-info {
    color: #00ff41;
}

[data-theme="hacker"] .log-level-error {
    color: #ff3333;
    text-shadow: 0 0 5px #ff3333;
}

[data-theme="hacker"] .log-level-warn {
    color: #ffcc00;
}

/* Toast notifications */
[data-theme="hacker"] .toast {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #00ff41;
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .toast.success {
    border-left: 4px solid #00ff41;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

[data-theme="hacker"] .toast.error {
    border-left: 4px solid #ff3333;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.3);
}

/* Toggle switch */
[data-theme="hacker"] .toggle-slider {
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid #00ff41;
}

[data-theme="hacker"] input:checked + .toggle-slider {
    background: rgba(0, 255, 65, 0.3);
}

/* Highlight note */
[data-theme="hacker"] .highlight-note {
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid #ffcc00;
    color: #ffcc00;
}

/* Contact section */
[data-theme="hacker"] .contact-section {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
}

[data-theme="hacker"] .contact-section h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .contact-card {
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid #00cc33;
}

[data-theme="hacker"] .contact-card h3 {
    color: #00ff41;
}

[data-theme="hacker"] .qr-description {
    color: #00cc33;
    font-family: 'Courier New', monospace;
}

/* Upload config panel */
[data-theme="hacker"] .upload-config-panel,
[data-theme="hacker"] .config-search-panel,
[data-theme="hacker"] .config-list-container {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00ff41;
}

[data-theme="hacker"] .config-list-header h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

/* Modal */
[data-theme="hacker"] .provider-modal-content {
    background: rgba(0, 0, 0, 0.98);
    border: 2px solid #00ff41;
    box-shadow: 0 0 50px rgba(0, 255, 65, 0.4);
}

[data-theme="hacker"] .provider-modal-header {
    background: rgba(0, 255, 65, 0.1);
    border-bottom: 1px solid #00ff41;
}

[data-theme="hacker"] .provider-modal-header h3 {
    color: #00ff41;
    font-family: 'Courier New', monospace;
}

[data-theme="hacker"] .modal-close {
    color: #00ff41;
}

[data-theme="hacker"] .modal-close:hover {
    background: rgba(0, 255, 65, 0.2);
}

/* Glowing animation for active elements */
[data-theme="hacker"] .stat-card,
[data-theme="hacker"] .routing-example-card,
[data-theme="hacker"] .provider-item {
    animation: subtleGlow 3s ease-in-out infinite alternate;
}

@keyframes subtleGlow {
    0% { box-shadow: 0 0 5px rgba(0, 255, 65, 0.2); }
    100% { box-shadow: 0 0 15px rgba(0, 255, 65, 0.3); }
}