/* ─── Dark Mode Theme ────────────────────────────────── */ /* Applied when [data-theme="dark"] is set on */ [data-theme="dark"] { --bg: #0f1117; --surface: #1a1d27; --primary: #f45b69; --primary-hover: #f7737f; --text: #e4e6ed; --text-muted: #8b8fa3; --border: #2d3044; --success-bg: #0d2818; --success-border: #22734a; --success-text: #6ee7b7; --error-bg: #2d1215; --error-border: #7f2327; --error-text: #fca5a5; --warning-bg: #2d2510; --warning-border: #7f6a1f; --warning-text: #fcd34d; --shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4), 0 8px 48px rgba(0, 0, 0, 0.3); } /* ─── Input Focus Glow (dark) ────────────────────────── */ [data-theme="dark"] input[type="tel"]:focus, [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="password"]:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(244, 91, 105, 0.2); } /* ─── Badge ──────────────────────────────────────────── */ [data-theme="dark"] .badge { background: rgba(244, 91, 105, 0.15); } [data-theme="dark"] .badge.configured { background: rgba(110, 231, 183, 0.12); } /* ─── Icon Button ────────────────────────────────────── */ [data-theme="dark"] .icon-btn:hover { background: rgba(244, 91, 105, 0.1); } /* ─── Select Dropdown Arrow (dark) ───────────────────── */ [data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b8fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ─── Phone Mockup ───────────────────────────────────── */ [data-theme="dark"] .phone-mockup { background: #2a2d3a; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); } [data-theme="dark"] .phone-screen { background: #1a1d27; } [data-theme="dark"] .phone-statusbar { color: var(--text); } [data-theme="dark"] .phone-msg-header { border-bottom-color: var(--border); } [data-theme="dark"] .msg-segments { border-top-color: var(--border); } /* ─── Test Connection Button ─────────────────────────── */ [data-theme="dark"] .btn-test { color: #93c5fd; background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.3); } [data-theme="dark"] .btn-test:hover { background: rgba(37, 99, 235, 0.2); border-color: rgba(37, 99, 235, 0.4); } /* ─── Connection Status Phone List ───────────────────── */ [data-theme="dark"] .connection-status .phone-list li { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .connection-status .phone-list li:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .connection-status .phone-list li.selected { background: rgba(110, 231, 183, 0.08); outline-color: rgba(110, 231, 183, 0.3); } [data-theme="dark"] .connection-status .phone-tag { background: rgba(110, 231, 183, 0.12); } /* ─── Template Card Actions ──────────────────────────── */ [data-theme="dark"] .template-card:hover { border-color: #3d4058; } [data-theme="dark"] .template-card-actions .btn-edit:hover { background: rgba(37, 99, 235, 0.15); color: #93c5fd; } [data-theme="dark"] .template-card-actions .btn-delete:hover { background: rgba(252, 165, 165, 0.1); } /* ─── Add Template Button ────────────────────────────── */ [data-theme="dark"] .btn-add-template { background: rgba(110, 231, 183, 0.08); border-color: rgba(110, 231, 183, 0.25); } [data-theme="dark"] .btn-add-template:hover { background: rgba(110, 231, 183, 0.15); border-color: rgba(110, 231, 183, 0.35); } /* ─── Modal Tab Active Shadow ────────────────────────── */ [data-theme="dark"] .modal-tab.active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* ─── Theme Toggle Button ────────────────────────────── */ .theme-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); background: rgba(244, 91, 105, 0.04); } [data-theme="dark"] .theme-toggle:hover { background: rgba(244, 91, 105, 0.1); } .theme-toggle:active { transform: scale(0.95); } /* Sun icon (shown in dark mode) */ .theme-toggle .icon-sun { display: none; } /* Moon icon (shown in light mode) */ .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ─── Smooth Transition ──────────────────────────────── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }