/* ============================
   Chatly - Global CSS
   Design System Premium
   ============================ */

/* ============================
   Theme Variables — Light
   ============================ */

:root {
    /* --- Page structure --- */
    --bg-page:            #fafafc;
    --bg-card:            #ffffff;
    --bg-navbar:          #ffffff;
    --bg-hover:           #f4f4f7;
    --bg-input:           #fafafc;

    /* --- Brand (Indigo — padrão SaaS moderno: Linear, Vercel, Stripe) --- */
    --brand-primary:      #4f46e5;
    --brand-primary-hover:#4338ca;
    --brand-primary-light:#eef2ff;
    --brand-primary-ring: rgba(79,70,229,0.18);
    --brand-accent:       #6366f1;
    --brand-ink:          #1e1b4b;

    /* --- WhatsApp-specific (mantido verde só para UI do canal WhatsApp) --- */
    --whatsapp-green:     #16a34a;
    --whatsapp-green-light:#dcfce7;

    /* --- Text --- */
    --text-primary:       #0f0f17;
    --text-secondary:     #3f4656;
    --text-muted:         #707b8f;
    --text-placeholder:   #b5bcc9;

    /* --- Borders --- */
    --border-color:       #e5e7ef;
    --border-input:       #cdd1dd;
    --border-subtle:      #eef0f5;
    --border-focus:       #4f46e5;

    /* --- Shadows --- */
    --shadow-xs:          0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:          0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-hover:       0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.05);
    --shadow-modal:       0 25px 60px rgba(0,0,0,0.15), 0 10px 25px rgba(0,0,0,0.08);

    /* --- Radius --- */
    --radius-sm:          6px;
    --radius-md:          10px;
    --radius-lg:          14px;
    --radius-xl:          18px;
    --radius-full:        9999px;

    /* --- Metric icon backgrounds --- */
    --metric-blue-bg:     #eff6ff;
    --metric-blue-color:  #2563eb;
    --metric-green-bg:    #f0fdf4;
    --metric-green-color: #16a34a;
    --metric-orange-bg:   #fff7ed;
    --metric-orange-color:#ea580c;
    --metric-purple-bg:   #faf5ff;
    --metric-purple-color:#9333ea;
    --metric-violet-bg:   #f5f3ff;
    --metric-violet-color:#7c3aed;
    --metric-pink-bg:     #fdf2f8;
    --metric-pink-color:  #db2777;
    --metric-indigo-bg:   #eef2ff;
    --metric-indigo-color:#4f46e5;

    /* --- Status / Badges (conexão WhatsApp mantém verde) --- */
    --status-online-bg:      #f0fdf4;
    --status-online-color:   #15803d;
    --status-online-dot:     #16a34a;
    --status-offline-bg:     #fef2f2;
    --status-offline-color:  #b91c1c;
    --status-offline-dot:    #dc2626;
    --badge-success-bg:      #f0fdf4;
    --badge-success-color:   #15803d;
    --badge-warning-bg:      #fffbeb;
    --badge-warning-color:   #92400e;
    --badge-connecting-bg:   #fffbeb;
    --badge-connecting-color:#92400e;
    --badge-unknown-bg:      #f3f4f6;
    --badge-unknown-color:   #4b5563;

    /* --- Semantic danger (logout, destructive actions) --- */
    --danger-color:          #dc2626;
    --danger-color-strong:   #b91c1c;
    --danger-bg:             #fef2f2;
    --danger-border:         #fecaca;

    /* --- Focus ring (keyboard navigation) --- */
    --focus-ring:            0 0 0 3px var(--brand-primary-ring);
    --focus-ring-danger:     0 0 0 3px rgba(220,38,38,0.22);

    /* --- Nav links (ativo usa indigo) --- */
    --nav-active-bg:        #eef2ff;
    --nav-active-color:     #4338ca;
    --nav-link-color:       #5a6378;
    --nav-link-hover-color: #0f0f17;
    --nav-link-hover-bg:    #f4f4f7;

    /* --- Chip / Period tag --- */
    --chip-bg:   #eef0f5;
    --chip-color:#3f4656;

    /* --- Table --- */
    --table-hover-bg:       #fafafc;
    --table-border-header:  #e5e7ef;
    --table-border-row:     #eef0f5;

    /* --- Theme toggle icon --- */
    --theme-toggle-color:   #64748b;

    /* --- Theme icon visibility (moon shown in light, sun shown in dark) --- */
    --icon-moon-display:    block;
    --icon-sun-display:     none;

    /* --- Transition --- */
    --transition-fast:      all 0.12s ease;
    --transition-base:      all 0.18s ease;
    --transition-slow:      all 0.28s ease;

    /* --- Charts / Sparklines --- */
    --chart-primary:        #4f46e5;
    --chart-success:        #22c55e;
    --chart-info:           #38bdf8;
    --chart-warning:        #f59e0b;
    --chart-danger:         #ef4444;
    --chart-grid:           #eef0f5;

    /* --- Empty state illustrations --- */
    --illus-ring:           #c7d2fe;
    --illus-ring-soft:      #e0e7ff;
    --illus-accent:         #4f46e5;
    --illus-muted:          #cbd5e1;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* --- Page structure (4 elevation levels — softer than before, less eye strain) --- */
    --bg-page:            #11141d;   /* Base — soft dark, not pure black           */
    --bg-card:            #1a1f2c;   /* Level 1 — cards, panels, sidebars          */
    --bg-navbar:          #161a25;   /* Navbar — sits between page and card        */
    --bg-hover:           #232a3c;   /* Level 2 — hover, selected rows             */
    --bg-input:           #151a25;   /* Inputs — slightly recessed                 */

    /* --- Brand (Indigo claro para contrastar com fundo escuro) --- */
    --brand-primary:      #818cf8;
    --brand-primary-hover:#a5b4fc;
    --brand-primary-light:#1e1b4b;
    --brand-primary-ring: rgba(129,140,248,0.24);
    --brand-accent:       #6366f1;
    --brand-ink:          #e0e7ff;

    /* --- WhatsApp-specific no dark --- */
    --whatsapp-green:     #22c55e;
    --whatsapp-green-light:#0a2219;

    /* --- Text (softer than pure white to reduce eye strain) --- */
    --text-primary:       #dadfeb;   /* Soft white, easier on eyes than #e8ecf5 */
    --text-secondary:     #95a0b6;
    --text-muted:         #6f7b91;
    --text-placeholder:   #525d72;

    /* --- Borders (clear but soft) --- */
    --border-color:       #283349;   /* Levemente mais visível */
    --border-input:       #334055;
    --border-subtle:      #1c2333;
    --border-focus:       #fbbf24;

    /* --- Shadows (depth without harshness) --- */
    --shadow-xs:          0 1px 3px rgba(0,0,0,0.45);
    --shadow-sm:          0 2px 6px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md:          0 4px 14px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
    --shadow-hover:       0 8px 28px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.45);
    --shadow-modal:       0 24px 64px rgba(0,0,0,0.72), 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);

    /* --- Metric icon backgrounds (tinted, not saturated) --- */
    --metric-blue-bg:     #0d1f3e;
    --metric-blue-color:  #60a5fa;
    --metric-green-bg:    #0a2219;
    --metric-green-color: #4ade80;
    --metric-orange-bg:   #271407;
    --metric-orange-color:#fb923c;
    --metric-purple-bg:   #1d0d3c;
    --metric-purple-color:#c084fc;
    --metric-violet-bg:   #170830;
    --metric-violet-color:#a78bfa;
    --metric-pink-bg:     #29051e;
    --metric-pink-color:  #f472b6;
    --metric-indigo-bg:   #1e1b4b;
    --metric-indigo-color:#a5b4fc;

    /* --- Status / Badges (WhatsApp connection state mantém verde) --- */
    --status-online-bg:      #0a2219;
    --status-online-color:   #4ade80;
    --status-online-dot:     #22c55e;
    --status-offline-bg:     #280808;
    --status-offline-color:  #f87171;
    --status-offline-dot:    #ef4444;
    --badge-success-bg:      #0a2219;
    --badge-success-color:   #4ade80;
    --badge-warning-bg:      #261a07;
    --badge-warning-color:   #fbbf24;
    --badge-connecting-bg:   #261a07;
    --badge-connecting-color:#fbbf24;
    --badge-unknown-bg:      #202a40;
    --badge-unknown-color:   #9aa6bc;

    /* --- Semantic danger (dark — keep red recognizable) --- */
    --danger-color:          #f87171;
    --danger-color-strong:   #fca5a5;
    --danger-bg:             rgba(248,113,113,0.14);
    --danger-border:         rgba(248,113,113,0.32);

    /* --- Focus ring (dark) --- */
    --focus-ring:            0 0 0 3px var(--brand-primary-ring);
    --focus-ring-danger:     0 0 0 3px rgba(248,113,113,0.28);

    /* --- Nav links (ativo usa indigo — alta visibilidade no dark) --- */
    --nav-active-bg:        #1e1b4b;
    --nav-active-color:     #a5b4fc;
    --nav-link-color:       #7a8699;
    --nav-link-hover-color: #e8ecf5;
    --nav-link-hover-bg:    #202a40;

    /* --- Chip / Period tag --- */
    --chip-bg:   #202a40;
    --chip-color:#9aa6bc;

    /* --- Table --- */
    --table-hover-bg:       #1b2335;
    --table-border-header:  #283349;
    --table-border-row:     #1c2333;

    /* --- Theme toggle icon --- */
    --theme-toggle-color:   #f4c542;

    /* --- Theme icon visibility --- */
    --icon-moon-display:    none;
    --icon-sun-display:     block;

    /* --- Charts / Sparklines (dark) --- */
    --chart-primary:        #818cf8;
    --chart-success:        #4ade80;
    --chart-info:           #38bdf8;
    --chart-warning:        #fbbf24;
    --chart-danger:         #f87171;
    --chart-grid:           #283349;

    /* --- Empty state illustrations (dark) --- */
    --illus-ring:           #3730a3;
    --illus-ring-soft:      #1e1b4b;
    --illus-accent:         #818cf8;
    --illus-muted:          #475569;
}

/* ============================
   Dark Mode — Component Overrides
   ============================ */

/* Navbar: subtle bottom border + light top-rim effect */
[data-theme="dark"] .top-navbar {
    border-bottom-color: var(--border-color);
    box-shadow: 0 1px 0 var(--border-subtle), 0 2px 12px rgba(0,0,0,0.35);
}

/* Cards: add inset rim to separate from dark background */
[data-theme="dark"] .metric-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .avg-card,
[data-theme="dark"] .chart-section,
[data-theme="dark"] .section-card {
    border-color: var(--border-color);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-sm);
}

/* Modals: refined dark overlay + elevated surface */
[data-theme="dark"] .modal-box {
    border-color: var(--border-color);
    box-shadow: var(--shadow-modal);
    background: var(--bg-card);
}

/* Inputs: distinct recessed look */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .filter-input,
[data-theme="dark"] .ci-input,
[data-theme="dark"] .message-input {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-placeholder) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .filter-input:focus,
[data-theme="dark"] .ci-input:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-ring) !important;
    outline: none;
}

/* Tables: clear zebra & header */
[data-theme="dark"] .report-table th {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .report-table td {
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .report-table tbody tr:hover {
    background: var(--table-hover-bg);
}

[data-theme="dark"] .instances-table th {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .instances-table td {
    border-bottom-color: var(--border-subtle);
}

/* Dropdowns: elevated with subtle rim */
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .nav-dropdown-panel {
    background: #1d2539;
    border-color: var(--border-color);
    box-shadow: 0 16px 48px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
}

[data-theme="dark"] .user-dropdown-item:hover,
[data-theme="dark"] .nav-dropdown-item:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .user-dropdown-divider,
[data-theme="dark"] .nav-dropdown-divider {
    background: var(--border-subtle);
}

/* Buttons: consistent dark appearance */
[data-theme="dark"] .btn-theme-toggle,
[data-theme="dark"] .btn-logout,
[data-theme="dark"] .btn-refresh,
[data-theme="dark"] .btn-header {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-theme-toggle:hover,
[data-theme="dark"] .btn-refresh:hover {
    background: var(--bg-hover);
    border-color: var(--border-input);
}

[data-theme="dark"] .btn-logout:hover {
    background: #280808;
    border-color: #3d1515;
    color: #f87171;
}

/* Filter bars */
[data-theme="dark"] .filter-bar {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Badges / status pills */
[data-theme="dark"] .status-pill.online {
    background: var(--status-online-bg);
    color: var(--status-online-color);
}

[data-theme="dark"] .status-pill.offline {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

/* Scrollbar — dark */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-page);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2c3a52;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3d4f6a;
}

/* Selection — dark */
[data-theme="dark"] ::selection {
    background: rgba(129,140,248,0.3);
    color: #e0e7ff;
}

/* Bootstrap form-control override for dark */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
    color: var(--text-primary);
}

/* Validation states dark override */
[data-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline-color: var(--whatsapp-green);
}

[data-theme="dark"] .invalid {
    outline-color: #ef4444;
}

[data-theme="dark"] .validation-message {
    color: #f87171;
}

/* ============================
   Smooth theme transitions
   ============================ */

html {
    transition: background-color 0.28s ease;
}

body,
.app-layout,
.top-navbar,
.metric-card,
.action-card,
.chart-section,
.kpi-card,
.chart-card,
.instance-card,
.instances-summary,
.instance-metrics-bar,
.section-card,
.modal-box,
.filter-bar,
.avg-card,
.report-table,
.instances-table,
.nav-dropdown-panel,
.user-dropdown,
.btn-theme-toggle,
.btn-logout,
.btn-refresh,
.filter-input,
.ci-input,
.form-control,
.form-select {
    transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}

.ci-input {
    display: block;
    width: 100%;
    padding: 0.72rem 0.9rem;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-input:hover {
    border-color: var(--brand-primary);
}

.ci-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
    background: var(--bg-card);
}

.ci-input::placeholder {
    color: var(--text-placeholder);
}

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

html, body {
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-feature-settings: 'ss01', 'ss02';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Display font — títulos de página, h1/h2 grandes, marca */
h1, h2, .display-font,
.page-title, .report-title, .section-title {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Monospace — códigos, IDs, números técnicos */
code, kbd, samp, .font-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}

a, .btn-link {
    color: var(--brand-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--brand-primary-hover);
}

.btn-primary {
    color: var(--brand-ink);
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: var(--transition-base);
}

.btn-primary:hover {
    color: var(--brand-ink);
    background-color: #e8b020;
    border-color: #e8b020;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

[data-theme="dark"] .btn-primary {
    color: var(--bg-page);
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #f4c550;
    border-color: #f4c550;
}

/* ============================
   Global Focus Ring — keyboard only (accessibility)
   Uses :focus-visible to avoid showing rings on mouse click.
   Applies to native focusable elements; scoped components can override
   with their own :focus-visible style if needed.
   ============================ */
button:focus { outline: none; }

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Inputs/selects/textareas get a tighter inline-style ring (no offset) so their borders stay tidy */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Bootstrap-form compat: keep ring for legacy form-control */
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Bootstrap spinner: default to system brand color (overrides text-primary green) */
.spinner-border {
    color: var(--brand-primary);
}

.spinner-border.text-success { color: #16a34a; }
.spinner-border.text-secondary { color: var(--text-muted); }
.spinner-border.text-danger { color: var(--danger-color); }

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ============================
   Utility Classes
   ============================ */

.text-primary-custom { color: var(--text-primary); }
.text-secondary-custom { color: var(--text-secondary); }
.text-muted-custom { color: var(--text-muted); }

/* Tabular numbers for metrics */
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ============================
   Form States
   ============================ */

.valid.modified:not([type=checkbox]) {
    outline: 1.5px solid var(--brand-primary);
    outline-offset: 1px;
}

.invalid {
    outline: 1.5px solid #dc2626;
    outline-offset: 1px;
}

.validation-message {
    color: #dc2626;
    font-size: 0.78rem;
    margin-top: 4px;
    display: block;
}

/* ============================
   Blazor Error
   ============================ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #7f1d1d;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    border-radius: 8px;
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro."
    }

.darker-border-checkbox.form-check-input {
    border-color: #94a3b8;
}

/* ============================
   Player de Áudio Customizado
   (CSS global — evita problemas de CSS isolation do Blazor)
   ============================ */

.msg-audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    min-width: 230px;
    max-width: 280px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
}

/* Botão play/pause — círculo com cor de marca */
.msg-audio-play-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--brand-primary, #4f46e5);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s, transform .1s;
    outline-offset: 2px;
}

.msg-audio-play-btn:hover  { background: var(--brand-primary-hover, #4338ca); }
.msg-audio-play-btn:active { transform: scale(.92); }
.msg-audio-play-btn:focus-visible { outline: 2px solid var(--brand-primary, #4f46e5); }

/* Ícones — toggle via JavaScript (inline display style) */
.msg-audio-play-btn svg { display: block; flex-shrink: 0; }

/* Barra de progresso — track + fill + range overlay */
.msg-audio-bar {
    position: relative;
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
}

.msg-audio-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

[data-theme="dark"] .msg-audio-track { background: rgba(255, 255, 255, 0.2); }

.msg-audio-fill {
    height: 100%;
    width: 0%;
    background: var(--brand-primary, #4f46e5);
    border-radius: 2px;
    transition: width .08s linear;
    pointer-events: none;
}

/* Range transparente sobreposto — captura input do usuário */
.msg-audio-seek {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Tempo (atual / duração) */
.msg-audio-times {
    font-size: 0.74rem;
    color: var(--text-secondary, #3f4656);
    white-space: nowrap;
    min-width: 68px;
    text-align: right;
    font-family: 'Manrope', sans-serif;
    line-height: 1;
}

.msg-audio-sep { opacity: .5; margin: 0 1px; }

/* Botão de velocidade */
.msg-audio-speed-btn {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 2px 5px;
    font-size: .68rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    color: inherit;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
}
.msg-audio-speed-btn:hover { background: rgba(0, 0, 0, .08); border-color: rgba(0,0,0,.35); }
[data-theme="dark"] .msg-audio-speed-btn { border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .msg-audio-speed-btn:hover { background: rgba(255,255,255,.1); }

/* Botão de download */
.msg-audio-dl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
}
.msg-audio-dl-btn:hover { background: rgba(0, 0, 0, .08); border-color: rgba(0,0,0,.35); }
[data-theme="dark"] .msg-audio-dl-btn { border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .msg-audio-dl-btn:hover { background: rgba(255,255,255,.1); }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================
   Scrollbar Premium
   ============================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-input);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================
   Selection
   ============================ */

::selection {
    background: var(--brand-primary-ring);
    color: var(--brand-primary);
}

/* ============================================================
   Dark Mode — WhatsApp Chat Overrides
   (all !important to override Blazor scoped CSS)
   ============================================================ */

/* --- Painel de conversas --- */
[data-theme="dark"] .conversations-panel {
    background: #111b21 !important;
    border-right-color: #1f2c34 !important;
}

[data-theme="dark"] .conversation-search-bar {
    background: #111b21 !important;
    border-bottom-color: #1f2c34 !important;
}

[data-theme="dark"] .conversation-search-input-wrapper {
    background: #2a3942 !important;
}

[data-theme="dark"] .conversation-search-input {
    color: #e9edef !important;
}

[data-theme="dark"] .conversation-search-input::placeholder { color: #8696a0 !important; }

[data-theme="dark"] .tag-filter-bar {
    background: #111b21 !important;
    border-bottom-color: #1f2c34 !important;
}

[data-theme="dark"] .conversation-tabs {
    background: #111b21 !important;
    border-bottom-color: #1f2c34 !important;
}

[data-theme="dark"] .conv-tab {
    color: #8696a0 !important;
}

[data-theme="dark"] .conv-tab.active {
    color: #00a884 !important;
    border-bottom-color: #00a884 !important;
}

[data-theme="dark"] .conv-tab:hover:not(.active) {
    color: #d1d7db !important;
    background: #1f2c34 !important;
}

[data-theme="dark"] .conversation-item {
    border-bottom-color: #1f2c34 !important;
}

[data-theme="dark"] .conversation-item:hover {
    background: #1f2c34 !important;
}

[data-theme="dark"] .conversation-item.selected {
    background: #2a3942 !important;
}

[data-theme="dark"] .conversation-name {
    color: #e9edef !important;
}

[data-theme="dark"] .conversation-preview,
[data-theme="dark"] .conversation-time {
    color: #8696a0 !important;
}

[data-theme="dark"] .conversations-loading,
[data-theme="dark"] .conversations-empty {
    color: #8696a0 !important;
}

/* --- Área de mensagens --- */
[data-theme="dark"] .messages-panel {
    background: #0b141a !important;
}

[data-theme="dark"] .messages-panel::before {
    opacity: 0.12 !important;
}

[data-theme="dark"] .messages-loading,
[data-theme="dark"] .messages-empty {
    color: #8696a0 !important;
}

/* --- Bolhas --- */
[data-theme="dark"] .bubble-outbound {
    background: #005c4b !important;
}

[data-theme="dark"] .bubble-outbound::after {
    border-left-color: #005c4b !important;
}

[data-theme="dark"] .bubble-inbound {
    background: #1f2c34 !important;
}

[data-theme="dark"] .bubble-inbound::after {
    border-right-color: #1f2c34 !important;
}

[data-theme="dark"] .message-text {
    color: #e9edef !important;
}

[data-theme="dark"] .bubble-outbound .message-time {
    color: #8ac4af !important;
}

[data-theme="dark"] .message-time {
    color: #8696a0 !important;
}

[data-theme="dark"] .bubble-deleted {
    background: #1a2228 !important;
    border-color: #2a3942 !important;
}

[data-theme="dark"] .message-deleted-text {
    color: #8696a0 !important;
}

/* --- Data separador --- */
[data-theme="dark"] .btn-load-more {
    background: rgba(11,20,26,0.8) !important;
    color: #8696a0 !important;
}

/* --- Header do chat --- */
[data-theme="dark"] .chat-header {
    background: #202c33 !important;
}

/* --- Barra de busca de mensagens --- */
[data-theme="dark"] .message-search-bar {
    background: #202c33 !important;
    border-bottom-color: #1f2c34 !important;
}

[data-theme="dark"] .message-search-input-wrapper {
    background: #2a3942 !important;
}

[data-theme="dark"] .message-search-input {
    color: #e9edef !important;
}

[data-theme="dark"] .message-search-count { color: #8696a0 !important; }

/* --- Área de input --- */
[data-theme="dark"] .message-input-area {
    background: #202c33 !important;
}

[data-theme="dark"] .message-input-container {
    background: #2a3942 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] .message-input {
    color: #e9edef !important;
    background: transparent !important;
}

[data-theme="dark"] .message-input::placeholder { color: #8696a0 !important; }

[data-theme="dark"] .btn-emoji,
[data-theme="dark"] .btn-quick-reply,
[data-theme="dark"] .btn-attach,
[data-theme="dark"] .btn-mic {
    color: #8696a0 !important;
}

[data-theme="dark"] .btn-emoji:hover:not(:disabled),
[data-theme="dark"] .btn-quick-reply:hover:not(:disabled),
[data-theme="dark"] .btn-attach:hover:not(:disabled),
[data-theme="dark"] .btn-mic:hover:not(:disabled) {
    color: #e9edef !important;
    background: rgba(255,255,255,0.08) !important;
}

/* --- Preview de mídia --- */
[data-theme="dark"] .media-preview-bar {
    background: #202c33 !important;
    border-top-color: #1f2c34 !important;
}

[data-theme="dark"] .media-preview-name { color: #e9edef !important; }
[data-theme="dark"] .media-preview-size { color: #8696a0 !important; }

/* --- Emoji picker / Quick replies --- */
[data-theme="dark"] .emoji-picker-popup,
[data-theme="dark"] .quick-reply-popup {
    background: #1f2c34 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .emoji-picker-header,
[data-theme="dark"] .quick-reply-header {
    border-bottom-color: #2a3942 !important;
}

[data-theme="dark"] .quick-reply-title { color: #e9edef !important; }

[data-theme="dark"] .emoji-category-tab:hover,
[data-theme="dark"] .emoji-search-input,
[data-theme="dark"] .quick-reply-search-input {
    background: #2a3942 !important;
}

[data-theme="dark"] .emoji-search-input,
[data-theme="dark"] .quick-reply-search-input {
    color: #e9edef !important;
    border-color: #2a3942 !important;
}

[data-theme="dark"] .emoji-item:hover { background: #2a3942 !important; }
[data-theme="dark"] .emoji-category-name { color: #8696a0 !important; }
[data-theme="dark"] .emoji-picker-footer { border-top-color: #2a3942 !important; }

[data-theme="dark"] .quick-reply-item {
    border-bottom-color: #2a3942 !important;
}

[data-theme="dark"] .quick-reply-item:hover { background: #2a3942 !important; }
[data-theme="dark"] .quick-reply-item-content { color: #8696a0 !important; }

[data-theme="dark"] .quick-reply-form-input,
[data-theme="dark"] .quick-reply-form-textarea {
    background: #2a3942 !important;
    border-color: #3b4a54 !important;
    color: #e9edef !important;
}

[data-theme="dark"] .quick-reply-manage-item { border-bottom-color: #2a3942 !important; }
[data-theme="dark"] .quick-reply-manage-item:hover { background: #2a3942 !important; }
[data-theme="dark"] .quick-reply-manage-title { color: #e9edef !important; }

/* --- Context menu de mensagem --- */
[data-theme="dark"] .msg-ctx-menu {
    background: #233138 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] .msg-ctx-item {
    color: #e9edef !important;
}

[data-theme="dark"] .msg-ctx-item:hover { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .msg-ctx-item + .msg-ctx-item { border-top-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .msg-ctx-item.danger { color: #f1706e !important; }
[data-theme="dark"] .msg-ctx-item.danger:hover { background: rgba(241,112,110,0.1) !important; }

/* --- Nova conversa modal --- */
[data-theme="dark"] .new-conversation-overlay {
    background: rgba(0,0,0,0.65) !important;
}

[data-theme="dark"] .new-conversation-panel {
    background: #1f2c34 !important;
}

[data-theme="dark"] .new-conversation-body {
    background: #1f2c34 !important;
}

[data-theme="dark"] .new-conversation-label { color: #8696a0 !important; }

[data-theme="dark"] .new-conversation-phone-input {
    background: #2a3942 !important;
    border-color: #3b4a54 !important;
}

[data-theme="dark"] .phone-prefix {
    background: #1f2c34 !important;
    color: #8696a0 !important;
    border-right-color: #3b4a54 !important;
}

[data-theme="dark"] .new-conversation-input {
    color: #e9edef !important;
    background: transparent !important;
}

[data-theme="dark"] .new-conversation-hint { color: #8696a0 !important; }

[data-theme="dark"] .new-conversation-textarea {
    background: #2a3942 !important;
    border-color: #3b4a54 !important;
    color: #e9edef !important;
}

[data-theme="dark"] .new-conversation-footer {
    background: #1f2c34 !important;
    border-top-color: #2a3942 !important;
}

[data-theme="dark"] .btn-cancel-new-chat {
    color: #8696a0 !important;
    border-color: #3b4a54 !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-cancel-new-chat:hover {
    background: #2a3942 !important;
    color: #e9edef !important;
}

/* --- Tag Manager --- */
[data-theme="dark"] .tag-manager-overlay {
    background: rgba(0,0,0,0.55) !important;
}

[data-theme="dark"] .tag-manager-panel {
    background: #1f2c34 !important;
}

[data-theme="dark"] .tag-manager-panel h6 { color: #e9edef !important; }
[data-theme="dark"] .tag-manager-item { border-bottom-color: #2a3942 !important; }
[data-theme="dark"] .tag-empty-msg { color: #8696a0 !important; }

[data-theme="dark"] .tag-create-form input[type="text"] {
    background: #2a3942 !important;
    border-color: #3b4a54 !important;
    color: #e9edef !important;
}

/* --- Status banner --- */
[data-theme="dark"] .instance-status-banner.disconnected {
    background: #1a1500 !important;
    border-bottom-color: #3d2e00 !important;
}

[data-theme="dark"] .status-banner-content { color: #fbbf24 !important; }
[data-theme="dark"] .status-banner-text strong { color: #f59e0b !important; }

/* --- QR Modal --- */
[data-theme="dark"] .qr-modal-panel {
    background: #1f2c34 !important;
}

[data-theme="dark"] .qr-modal-header {
    border-bottom-color: #2a3942 !important;
}

[data-theme="dark"] .qr-modal-header h6 { color: #e9edef !important; }
[data-theme="dark"] .qr-instructions { color: #8696a0 !important; }
[data-theme="dark"] .qr-code-image { border-color: #2a3942 !important; }

/* --- Recording --- */
[data-theme="dark"] .recording-container {
    background: #2a1010 !important;
    border-color: #5c1c1c !important;
}

[data-theme="dark"] .recorded-container {
    background: #0a2219 !important;
    border-color: #1a4a30 !important;
}

[data-theme="dark"] .recorded-audio-label { color: #4ade80 !important; }

/* --- Placeholder (sem conversa selecionada) --- */
[data-theme="dark"] .messages-placeholder {
    background: #0b141a !important;
}

[data-theme="dark"] .placeholder-content { color: #8696a0 !important; }
[data-theme="dark"] .placeholder-content h4 { color: #d1d7db !important; }