/*
|--------------------------------------------------------------------------
| App custom styles (public, no Vite build required)
|--------------------------------------------------------------------------
|
| Future Vite integration:
| - Move this file to resources/css/custom.css
| - Import it from the Vite CSS entrypoint (after Bootstrap)
| - Keep the same tokens, selectors, and data-bs-theme contract
|
*/

/* =========================================================
   Design tokens
   ========================================================= */

:root,
[data-bs-theme="light"] {
    --app-primary: #3cc891;
    --app-page-bg: #f5f5f4;
    --app-surface-bg: #ffffff;
    --app-surface-muted: #fafaf9;
    --app-border-color: #e7e5e4;
    --app-text-color: #1c1917;
    --app-text-muted: #78716c;
    --app-text-subtle: #a8a29e;
    --app-header-height: 3.5rem;
}

[data-bs-theme="dark"] {
    --app-primary: #3cc891;
    --app-page-bg: #16181c;
    --app-surface-bg: #1e2126;
    --app-surface-muted: #252a31;
    --app-border-color: #343a42;
    --app-text-color: #e8eaed;
    --app-text-muted: #9aa0a6;
    --app-text-subtle: #6c757d;
    --app-header-height: 3.5rem;
    color-scheme: dark;
}

/* =========================================================
   Base styles
   ========================================================= */

body {
    background-color: var(--app-page-bg);
    color: var(--app-text-color);
}

/* Soften Vite-bundled light-only body/text overrides when dark. */
[data-bs-theme="dark"] .text-body-secondary {
    color: var(--app-text-muted) !important;
}

/* Bootstrap's .bg-white does not follow color modes. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--app-surface-bg) !important;
}

/* =========================================================
   Components
   ========================================================= */

.theme-switcher .dropdown-item.active,
.theme-switcher .dropdown-item:active {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

.theme-switcher .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* =========================================================
   Utilities
   ========================================================= */

.app-surface {
    background-color: var(--app-surface-bg);
    border-color: var(--app-border-color);
}

/* =========================================================
   Dark theme overrides
   =========================================================
   Targeted fixes for app surfaces that still use fixed light
   colors in the Vite-bundled resources/css/custom.css.
   Prefer Bootstrap color-mode tokens for new work.
*/

[data-bs-theme="dark"] .app-header {
    background: var(--app-surface-bg);
    border-bottom-color: var(--app-border-color);
}

[data-bs-theme="dark"] .app-header .navbar-brand,
[data-bs-theme="dark"] .app-header .nav-link:hover {
    color: var(--app-text-color);
}

[data-bs-theme="dark"] .app-header .nav-link {
    color: var(--app-text-muted);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--app-text-muted);
    --bs-btn-border-color: var(--app-border-color);
    --bs-btn-hover-color: var(--app-text-color);
    --bs-btn-hover-bg: var(--app-surface-muted);
    --bs-btn-hover-border-color: var(--app-border-color);
    --bs-btn-active-color: var(--app-text-color);
    --bs-btn-active-bg: var(--app-surface-muted);
    --bs-btn-active-border-color: var(--app-border-color);
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #16181c;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #16181c;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: #fff;
}

[data-bs-theme="dark"] .inbox-shell,
[data-bs-theme="dark"] .inbox-pane-header,
[data-bs-theme="dark"] .inbox-jump-latest {
    background: var(--app-surface-bg);
    border-color: var(--app-border-color);
    color: var(--app-text-color);
}

[data-bs-theme="dark"] .inbox-shell,
[data-bs-theme="dark"] .inbox-list,
[data-bs-theme="dark"] .inbox-pane-header,
[data-bs-theme="dark"] .inbox-list-refresh {
    border-color: var(--app-border-color);
}

[data-bs-theme="dark"] .inbox-detail {
    background: var(--app-page-bg);
}

[data-bs-theme="dark"] .inbox-bot-toggle .form-check-label {
    color: var(--app-text-muted);
}

[data-bs-theme="dark"] .inbox-bot-toggle-feedback {
    color: var(--app-text-subtle);
}

[data-bs-theme="dark"] .conversation-row {
    border-bottom-color: var(--app-border-color);
}

[data-bs-theme="dark"] .conversation-row:hover {
    background: var(--app-surface-muted);
}

[data-bs-theme="dark"] .conversation-row.is-selected {
    background: rgba(60, 200, 145, 0.12);
}

[data-bs-theme="dark"] .inbox-list-refresh {
    background: rgba(60, 200, 145, 0.1);
    color: var(--app-text-muted);
}

[data-bs-theme="dark"] .inbox-list-refresh-link {
    color: var(--app-primary);
}

[data-bs-theme="dark"] .inbox-jump-latest:hover {
    background: var(--app-surface-muted);
    color: var(--app-text-color);
}

[data-bs-theme="dark"] .message-bubble.is-inbound {
    background: var(--app-surface-bg);
    color: var(--app-text-color);
    border-color: var(--app-border-color);
}

[data-bs-theme="dark"] .message-bubble.is-inbound .message-meta,
[data-bs-theme="dark"] .message-bubble.is-inbound .text-muted-on-bubble {
    color: var(--app-text-subtle);
}

[data-bs-theme="dark"] .compose-media-preview {
    background: var(--app-surface-muted);
}

[data-bs-theme="dark"] .channel-meta-card,
[data-bs-theme="dark"] .form-panel,
[data-bs-theme="dark"] .template-stat-card {
    background: var(--app-surface-bg);
    border-color: var(--app-border-color);
}

[data-bs-theme="dark"] .table-channels thead,
[data-bs-theme="dark"] .table-templates thead {
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
}

[data-bs-theme="dark"] .template-stat-label,
[data-bs-theme="dark"] .wa-template-preview-footer {
    color: var(--app-text-muted);
}

[data-bs-theme="dark"] .wa-template-preview {
    background: #2a2f36;
}

[data-bs-theme="dark"] .wa-template-preview-bubble {
    background: var(--app-surface-bg);
    color: var(--app-text-color);
}

[data-bs-theme="dark"] .wa-template-preview-buttons {
    border-top-color: var(--app-border-color);
}

[data-bs-theme="dark"] .template-tech-json {
    background: var(--app-surface-muted);
    color: var(--app-text-color);
}

/* =========================================================
   Login page
   ========================================================= */

#login-page {
    background-image: url('../assets/images/auth/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

img#navbar-logo {
    position: relative;
    top: -4px;
    margin-right: 3px;
}

.btn {
    border-radius: 50px;
}