/* ═══════════════════════════════════════════════════════════
   VoxTS – Midnight Blue Theme
   Deep ocean dark theme with cyan/teal accents
   
   Kullanmak için index.php'de:
   themes/default/theme.css → themes/midnight-blue/theme.css
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
    /* Background */
    --bg-primary: #0b1120;
    --bg-secondary: #0f1729;
    --bg-card: rgba(15, 23, 42, 0.65);
    --bg-card-hover: rgba(22, 35, 60, 0.7);
    --bg-glass: rgba(11, 17, 32, 0.7);
    --bg-input: rgba(22, 35, 60, 0.5);

    /* Borders */
    --border-glass: rgba(6, 182, 212, 0.15);
    --border-hover: rgba(6, 182, 212, 0.35);

    /* Text */
    --text-primary: #e2e8f0;
    --text-secondary: #8b9dc3;
    --text-muted: #4a6085;

    /* Accent */
    --accent: #06b6d4;
    --accent-rgb: 6, 182, 212;
    --accent-glow: rgba(6, 182, 212, 0.4);
    --accent2: #0ea5e9;
    --accent2-rgb: 14, 165, 233;

    /* Semantic Colors */
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --info: #38bdf8;
    --info-rgb: 56, 189, 248;

    /* Gradient */
    --gradient: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #38bdf8 100%);

    /* Shadows */
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.15);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Background Animation ───────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0b1120 0%, #0c2340 25%, #0f1729 50%, #0c2340 75%, #0b1120 100%);
    background-size: 400% 400%;
    animation: gradShift 20s ease infinite;
    z-index: -2
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb), .08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--accent2-rgb), .06) 0%, transparent 50%);
    z-index: -1;
    animation: orbFloat 15s ease-in-out infinite alternate
}

@keyframes gradShift {

    0%,
    100% {
        background-position: 0% 50%
    }

    25% {
        background-position: 100% 50%
    }

    50% {
        background-position: 100% 0%
    }

    75% {
        background-position: 0% 100%
    }
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0)
    }

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

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), .3);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), .5)
}

::selection {
    background: var(--accent);
    color: #fff
}

/* ── Accent-dependent decorative overrides ───────────────── */
.login-card .logo-icon {
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), .3)
}

.sidebar-logo {
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), .25)
}

.nav-item:hover {
    background: rgba(var(--accent-rgb), .08)
}

.nav-item.active {
    background: rgba(var(--accent-rgb), .12);
    box-shadow: inset 3px 0 0 var(--accent)
}

.stat-card:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow)
}

.data-table tbody tr {
    border-bottom: 1px solid rgba(var(--accent-rgb), .05)
}

.data-table tbody tr:hover {
    background: rgba(var(--accent-rgb), .04)
}

.btn-primary {
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), .3)
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), .4)
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15)
}

.login-card input:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15)
}

.search-bar input:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12)
}

.channel-item:hover {
    background: rgba(var(--accent-rgb), .06)
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, rgba(var(--accent-rgb), .08) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite
}

.badge-online,
.badge-active {
    background: rgba(var(--success-rgb), .15);
    color: #34d399
}

.badge-offline,
.badge-expired {
    background: rgba(100, 116, 139, .15);
    color: #94a3b8
}

.badge-suspended {
    background: rgba(var(--warning-rgb), .15);
    color: #fbbf24
}

.badge-terminated {
    background: rgba(var(--danger-rgb), .15);
    color: #f87171
}

.status-dot.online {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, .5)
}

.status-dot.offline {
    background: #4a6085
}

.stat-card .stat-icon.purple {
    background: rgba(var(--accent-rgb), .15);
    color: #67e8f9
}

.stat-card .stat-icon.green {
    background: rgba(var(--success-rgb), .15);
    color: #34d399
}

.stat-card .stat-icon.blue {
    background: rgba(var(--info-rgb), .15);
    color: #38bdf8
}

.stat-card .stat-icon.orange {
    background: rgba(var(--warning-rgb), .15);
    color: #fbbf24
}

.stat-card .stat-icon.red {
    background: rgba(var(--danger-rgb), .15);
    color: #f87171
}

.stat-card .stat-icon.pink {
    background: rgba(236, 72, 153, .15);
    color: #f472b6
}

.btn-danger {
    background: rgba(var(--danger-rgb), .15);
    border: 1px solid rgba(var(--danger-rgb), .3);
    color: #fca5a5
}

.btn-danger:hover {
    background: rgba(var(--danger-rgb), .25);
    border-color: rgba(var(--danger-rgb), .5);
    color: #f87171
}

.btn-success {
    background: rgba(var(--success-rgb), .15);
    border: 1px solid rgba(var(--success-rgb), .3);
    color: #6ee7b7
}

.btn-success:hover {
    background: rgba(var(--success-rgb), .25);
    border-color: rgba(var(--success-rgb), .5);
    color: #34d399
}

.btn-warning {
    background: rgba(var(--warning-rgb), .15);
    border: 1px solid rgba(var(--warning-rgb), .3);
    color: #fcd34d
}

.btn-warning:hover {
    background: rgba(var(--warning-rgb), .25);
    border-color: rgba(var(--warning-rgb), .5);
    color: #fbbf24
}

.toast-success {
    border-left: 3px solid #34d399
}

.toast-error {
    border-left: 3px solid #f87171
}

.toast-warning {
    border-left: 3px solid #fbbf24
}

.toast-info {
    border-left: 3px solid #38bdf8
}

.log-line .log-level.info {
    color: #38bdf8
}

.log-line .log-level.warning {
    color: #fbbf24
}

.log-line .log-level.error {
    color: #f87171
}

.logout-btn {
    background: rgba(var(--danger-rgb), .1);
    border: 1px solid rgba(var(--danger-rgb), .2);
    color: #fca5a5
}

.logout-btn:hover {
    background: rgba(var(--danger-rgb), .2);
    border-color: rgba(var(--danger-rgb), .4);
    color: #f87171
}

.modal-close:hover {
    background: rgba(var(--danger-rgb), .2);
    color: #f87171
}

.login-error {
    background: rgba(var(--danger-rgb), .1);
    border: 1px solid rgba(var(--danger-rgb), .3);
    color: #fca5a5
}

.btn-secondary:hover {
    background: rgba(40, 55, 80, .5);
    border-color: var(--border-hover)
}