/* ============================================================
   MCPNS Dashboard — Dark Mode + Theme Toggle
   Created: 12 February 2026
   
   ADDITIVE layer. Existing professional.css = light theme.
   This file adds [data-theme="dark"] overrides.
   Login page is natively dark — we add [data-theme="light"] for it.
   
   Load order: professional.css → theme.css
   ============================================================ */

/* --- Transition (only during user-initiated toggle) --- */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease !important;
}

/* ============================================================
   DARK THEME — Override professional.css :root variables
   ============================================================ */
[data-theme="dark"] {
    --primary: #7c6bef;
    --primary-hover: #6b5ce0;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --text-dark: #e5e7eb;
    --text-light: #9ca3af;
    --bg-light: #111827;
    --border: #374151;
    --white: #1f2937;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* --- Body --- */
[data-theme="dark"] body {
    background: #111827;
    color: #e5e7eb;
}

/* --- Navigation --- */
[data-theme="dark"] nav {
    background: #1f2937;
    border-bottom-color: #374151;
}

[data-theme="dark"] nav h1 {
    color: #f3f4f6;
}

[data-theme="dark"] nav .nav-links a {
    color: #9ca3af;
}

[data-theme="dark"] nav .nav-links a:hover,
[data-theme="dark"] nav .nav-links a.active {
    color: #7c6bef;
    background: #374151;
}

/* --- Headings --- */
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    color: #f3f4f6;
}

/* --- Stat cards --- */
[data-theme="dark"] .stat-card {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .stat-card .number {
    color: #f3f4f6;
}

/* --- Post cards --- */
[data-theme="dark"] .post-card {
    background: #1f2937;
    border-color: #374151;
}

/* --- Caption area --- */
[data-theme="dark"] .caption {
    background: #111827;
    color: #e5e7eb;
}

/* --- Hashtags --- */
[data-theme="dark"] .hashtags {
    color: #7c6bef;
}

/* --- Tables --- */
[data-theme="dark"] table {
    background: #1f2937;
}

[data-theme="dark"] thead {
    background: #111827;
}

[data-theme="dark"] th {
    color: #9ca3af;
    border-bottom-color: #374151;
}

[data-theme="dark"] td {
    color: #e5e7eb;
    border-bottom-color: #374151;
}

[data-theme="dark"] tr:hover {
    background: #374151;
}

/* --- Usage section --- */
[data-theme="dark"] .usage-section {
    background: #1f2937;
}

[data-theme="dark"] .usage-bar {
    background: #374151;
}

[data-theme="dark"] .platform-usage-card {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .upgrade-prompt {
    background: #422006;
    border-color: #92400e;
    color: #fbbf24;
}

/* --- Tier badge (usage section) --- */
[data-theme="dark"] .usage-section .tier-badge {
    background: #7c6bef;
}

/* --- Platform badge --- */
[data-theme="dark"] .platform-badge {
    background: #7c6bef;
}

/* ============================================================
   DARK OVERRIDES — Connections page inline styles
   ============================================================ */
[data-theme="dark"] .platform-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .platform-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .platform-card.connected {
    border-left-color: #34d399;
}

[data-theme="dark"] .platform-info h3 {
    color: #f3f4f6;
}

[data-theme="dark"] .status.connected { color: #34d399; }
[data-theme="dark"] .status.disconnected { color: #9ca3af; }
[data-theme="dark"] .status.coming-soon { color: #fbbf24; }

[data-theme="dark"] .platform-description {
    color: #9ca3af;
}

[data-theme="dark"] .feature-tag {
    background: #374151;
    color: #d1d5db;
}

[data-theme="dark"] .platform-user {
    background: #111827;
}

[data-theme="dark"] .platform-user .username {
    color: #f3f4f6;
}

[data-theme="dark"] .platform-user .user-meta {
    color: #9ca3af;
}

[data-theme="dark"] .btn-primary {
    background: #7c6bef;
    color: #ffffff;
}

[data-theme="dark"] .btn-primary:hover {
    background: #6b5ce0;
}

[data-theme="dark"] .btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

[data-theme="dark"] .btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .btn-disabled {
    background: #374151;
    color: #6b7280;
}

[data-theme="dark"] .platform-note {
    background: #422006;
    color: #fbbf24;
}

[data-theme="dark"] .alert-success {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

[data-theme="dark"] .alert-error {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

[data-theme="dark"] .page-subtitle {
    color: #9ca3af;
}

/* --- Connections: per-platform language selector --- */
[data-theme="dark"] .platform-language {
    background: #111827;
    border-color: #374151;
}

[data-theme="dark"] .platform-language .lang-label {
    color: #9ca3af;
}

[data-theme="dark"] .platform-language select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .platform-language select:focus {
    border-color: #7c6bef;
    box-shadow: 0 0 0 2px rgba(124, 107, 239, 0.2);
}

/* ============================================================
   DARK OVERRIDES — Settings page inline styles
   ============================================================ */
[data-theme="dark"] .settings-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .settings-card-header {
    border-bottom-color: #374151;
}

[data-theme="dark"] .settings-card-header h2 {
    color: #f3f4f6;
}

[data-theme="dark"] .settings-card-header .subtitle {
    color: #9ca3af;
}

[data-theme="dark"] .form-group label {
    color: #d1d5db;
}

[data-theme="dark"] .form-group .hint {
    color: #6b7280;
}

[data-theme="dark"] .language-select {
    background: #111827;
    border-color: #4b5563;
    color: #e5e7eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .language-select:focus {
    border-color: #7c6bef;
    box-shadow: 0 0 0 3px rgba(124, 107, 239, 0.2);
}

[data-theme="dark"] .language-select:disabled {
    background-color: #1f2937;
    color: #6b7280;
}

[data-theme="dark"] .detail-row {
    border-bottom-color: #374151;
}

[data-theme="dark"] .detail-label {
    color: #9ca3af;
}

[data-theme="dark"] .detail-value {
    color: #f3f4f6;
}

/* Settings: tier badges */
[data-theme="dark"] .tier-trial { background: #374151; color: #9ca3af; }
[data-theme="dark"] .tier-lite { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
[data-theme="dark"] .tier-starter { background: rgba(52, 211, 153, 0.15); color: #34d399; }
[data-theme="dark"] .tier-professional { background: rgba(124, 107, 239, 0.15); color: #a78bfa; }
[data-theme="dark"] .tier-custom { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }

[data-theme="dark"] .info-banner {
    background: rgba(59, 130, 246, 0.1);
    border-color: #1e40af;
    color: #60a5fa;
}

[data-theme="dark"] .upgrade-banner {
    background: rgba(124, 107, 239, 0.1);
    border-color: #5b21b6;
    color: #a78bfa;
}

[data-theme="dark"] .save-status.success { color: #34d399; }
[data-theme="dark"] .save-status.error { color: #f87171; }

/* ============================================================
   DARK OVERRIDES — Buttons (global)
   ============================================================ */
[data-theme="dark"] .btn-approve {
    background: #059669;
    color: #ffffff;
}

[data-theme="dark"] .btn-approve:hover {
    background: #047857;
}

[data-theme="dark"] .btn-reject {
    background: #dc2626;
    color: #ffffff;
}

[data-theme="dark"] .btn-reject:hover {
    background: #b91c1c;
}

/* ============================================================
   LOGIN PAGE — Light mode overrides
   (Login is natively dark via inline styles. We add light mode.)
   ============================================================ */
[data-theme="light"] body.login-body {
    background: #f3f4f6 !important;
}

[data-theme="light"] .login-container {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .login-header h1 {
    color: #1f2937 !important;
}

[data-theme="light"] .login-header p {
    color: #6b7280 !important;
}

[data-theme="light"] .login-container label {
    color: #374151 !important;
}

[data-theme="light"] .login-container input[type="text"],
[data-theme="light"] .login-container input[type="password"] {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

[data-theme="light"] .login-container input:focus {
    border-color: #5b4cdb !important;
    box-shadow: 0 0 0 3px rgba(91, 76, 219, 0.15) !important;
}

[data-theme="light"] .login-container button[type="submit"] {
    background: #5b4cdb !important;
    color: #ffffff !important;
}

[data-theme="light"] .login-container button[type="submit"]:hover {
    background: #4a3bc2 !important;
}

[data-theme="light"] .login-container .error-msg {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

[data-theme="light"] .login-container .info-msg {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}

[data-theme="light"] .login-container .footer {
    color: #9ca3af !important;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin-left: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--white);
}

.theme-toggle:active {
    transform: scale(0.9);
}

/* Icon animation */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: transform 0.35s ease, opacity 0.35s ease;
    width: 18px;
    height: 18px;
}

/* Default (light mode): show moon icon → "click to go dark" */
.theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
.theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Dark mode: show sun icon → "click to go light" */
[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Login page toggle — positioned top-right */
.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    margin-left: 0;
}

/* --- Scrollbar (dark mode) --- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #111827;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* --- Selection (dark mode) --- */
[data-theme="dark"] ::selection {
    background: rgba(124, 107, 239, 0.3);
    color: #f3f4f6;
}