/* WaConnect — day / night themes (html[data-wa-theme]) */

:root,
html[data-wa-theme='dark'] {
    --wa-green: #25d366;
    --wa-green-hover: #1ebe57;
    --wa-bg: #0b141a;
    --wa-surface: #111b21;
    --wa-surface-2: #1a2e26;
    --wa-border: #2a3942;
    --wa-text: #e9edef;
    --wa-text-muted: #8696a0;
    --wa-input-bg: #2a3942;
    --wa-input-border: #3b4a54;
    --wa-navbar-bg: #111b21;
    --wa-table-bg: #111b21;
    --wa-table-stripe: rgba(255, 255, 255, 0.03);
    --wa-shadow: rgba(0, 0, 0, 0.35);
    --wa-admin-accent: #f0ad4e;
    --wa-admin-topbar: #1a2530;
    --wa-link: #25d366;
    --wa-code-bg: #0d1117;
}

html[data-wa-theme='light'] {
    --wa-green: #128c7e;
    --wa-green-hover: #0e6f63;
    --wa-bg: #e8edef;
    --wa-surface: #ffffff;
    --wa-surface-2: #f0f2f5;
    --wa-border: #d1d7db;
    --wa-text: #111b21;
    --wa-text-muted: #54656f;
    --wa-input-bg: #ffffff;
    --wa-input-border: #ced4da;
    --wa-navbar-bg: #ffffff;
    --wa-table-bg: #ffffff;
    --wa-table-stripe: rgba(0, 0, 0, 0.02);
    --wa-shadow: rgba(0, 0, 0, 0.08);
    --wa-admin-accent: #d68910;
    --wa-admin-topbar: #ffffff;
    --wa-link: #128c7e;
    --wa-code-bg: #f6f8fa;
}

html {
    color-scheme: dark;
}

html[data-wa-theme='light'] {
    color-scheme: light;
}

body {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.navbar {
    background: var(--wa-navbar-bg) !important;
    border-bottom: 1px solid var(--wa-border) !important;
}

.navbar-brand {
    color: var(--wa-green) !important;
    font-weight: 700;
}

.navbar-dark .nav-link,
.navbar .nav-link {
    color: var(--wa-text-muted) !important;
}

.navbar-dark .nav-link:hover,
.navbar .nav-link:hover {
    color: var(--wa-text) !important;
}

.card {
    background: var(--wa-surface) !important;
    border: 1px solid var(--wa-border) !important;
    color: var(--wa-text) !important;
}

.btn-wa {
    background: var(--wa-green) !important;
    color: #fff !important;
    font-weight: 600;
    border: none;
}

html[data-wa-theme='dark'] .btn-wa {
    color: #000 !important;
}

.btn-wa:hover {
    background: var(--wa-green-hover) !important;
}

.text-muted {
    color: var(--wa-text-muted) !important;
}

a:not(.btn):not(.nav-link):not(.list-group-item) {
    color: var(--wa-link);
}

.form-control,
.form-select {
    background: var(--wa-input-bg) !important;
    border-color: var(--wa-input-border) !important;
    color: var(--wa-text) !important;
}

.form-control:focus,
.form-select:focus {
    background: var(--wa-input-bg) !important;
    color: var(--wa-text) !important;
    border-color: var(--wa-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.2) !important;
}

.table {
    color: var(--wa-text);
    --bs-table-bg: var(--wa-table-bg);
    --bs-table-striped-bg: var(--wa-table-stripe);
    --bs-table-border-color: var(--wa-border);
}

.table-dark {
    --bs-table-bg: var(--wa-table-bg);
    --bs-table-color: var(--wa-text);
    --bs-table-border-color: var(--wa-border);
}

html[data-wa-theme='light'] .table-dark {
    --bs-table-bg: var(--wa-surface);
    --bs-table-color: var(--wa-text);
}

.list-group-item {
    background: transparent;
    color: var(--wa-text);
    border-color: var(--wa-border) !important;
}

.list-group-item-action:hover {
    background: var(--wa-surface-2) !important;
    color: var(--wa-text) !important;
}

.list-group-item-action.text-light {
    color: var(--wa-text) !important;
}

pre,
code {
    color: var(--wa-text);
}

pre.bg-dark {
    background: var(--wa-code-bg) !important;
    color: var(--wa-text) !important;
}

/* Dashboard SaaS */
.saas-api-key-box {
    background: linear-gradient(135deg, var(--wa-surface) 0%, var(--wa-surface-2) 100%);
    border: 1px solid var(--wa-green);
}

.saas-api-key-value {
    color: var(--wa-green);
}

.saas-plan-badge {
    background: var(--wa-surface-2);
    color: var(--wa-text);
}

/* Admin panel */
.admin-body {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
}

.admin-topbar {
    background: var(--wa-admin-topbar) !important;
    border-bottom: 2px solid var(--wa-admin-accent) !important;
}

html[data-wa-theme='light'] .admin-topbar .btn-outline-light {
    color: var(--wa-text);
    border-color: var(--wa-border);
}

.admin-sidebar {
    background: var(--wa-surface) !important;
    border-right: 1px solid var(--wa-border) !important;
}

.admin-nav .nav-link {
    color: var(--wa-text-muted);
}

.admin-nav .nav-link:hover {
    background: var(--wa-surface-2);
    color: var(--wa-text);
}

.admin-nav .nav-link.active {
    background: var(--wa-admin-accent);
    color: #000;
}

.admin-stat h3 {
    color: var(--wa-admin-accent);
}

/* Theme settings */
.wa-theme-card {
    background: var(--wa-surface);
    border: 1px solid var(--wa-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.wa-theme-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--wa-border);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s, background 0.15s;
}

.wa-theme-option:hover {
    background: var(--wa-surface-2);
}

.wa-theme-option.active {
    border-color: var(--wa-green);
    background: var(--wa-surface-2);
}

.wa-theme-option input {
    accent-color: var(--wa-green);
}

.wa-theme-toggle-btn {
    border: 1px solid var(--wa-border);
    background: var(--wa-surface);
    color: var(--wa-text);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    line-height: 1;
}

.wa-theme-toggle-btn:hover {
    background: var(--wa-surface-2);
    color: var(--wa-text);
}

/* Dialogs */
html[data-wa-theme='light'] .wa-dialog-modal .modal-content {
    background: var(--wa-surface);
    border-color: var(--wa-border);
    color: var(--wa-text);
}

html[data-wa-theme='light'] .wa-dialog-modal .modal-header,
html[data-wa-theme='light'] .wa-dialog-modal .modal-footer {
    border-color: var(--wa-border);
}

html[data-wa-theme='light'] .wa-dialog-modal .btn-close {
    filter: none;
}

/* WhatsApp connect page */
html[data-wa-theme='dark'] .wa-web-page {
    background: #0b141a;
    color: var(--wa-text);
}

html[data-wa-theme='dark'] .wa-web-card {
    background: var(--wa-surface);
    color: var(--wa-text);
}

html[data-wa-theme='dark'] .wa-web-steps h1,
html[data-wa-theme='dark'] .wa-step-list li {
    color: var(--wa-text-muted);
}

html[data-wa-theme='dark'] .wa-connected-banner {
    background: var(--wa-surface-2);
    border-color: var(--wa-border);
    color: var(--wa-text);
}