/* Tema escuro do webphone — sobrescreve as classes Tailwind já usadas nos
   componentes (embutidos no popup.js) sem precisar editar o bundle minificado.
   Prefixo #app em tudo pra vencer em especificidade as classes utilitárias do
   Tailwind (que aqui aparentemente também saem com !important). */

:root {
  --bp-bg: #10131c;
  --bp-panel: #171b28;
  --bp-panel-alt: #1c2131;
  --bp-border: #262c40;
  --bp-border-soft: #1f2536;
  --bp-text: #e7e9ee;
  --bp-text-dim: #9aa2b8;
  --bp-text-faint: #6b7488;
  --bp-accent: #22c55e;
  --bp-accent-dark: #16a34a;
  --bp-danger: #f04747;
  --bp-danger-soft: #3a1e22;
  --bp-blue: #3b82f6;
}

html, body, #app {
  background: var(--bp-bg) !important;
  color: var(--bp-text) !important;
}

/* Base surfaces */
#app .bg-white { background-color: var(--bp-panel) !important; }
#app .bg-gray-50 { background-color: var(--bp-panel-alt) !important; }
#app .bg-gray-100 { background-color: var(--bp-panel-alt) !important; }
#app .bg-gray-200 { background-color: var(--bp-border) !important; }
#app .bg-gray-300 { background-color: var(--bp-border) !important; }

#app .hover\:bg-gray-50:hover { background-color: var(--bp-panel-alt) !important; }
#app .hover\:bg-gray-100:hover { background-color: var(--bp-border) !important; }

/* Borders */
#app .border-gray-50, #app .border-gray-100, #app .border-gray-200 { border-color: var(--bp-border-soft) !important; }
#app .divide-gray-100 > * + * { border-color: var(--bp-border-soft) !important; }

/* Text */
#app .text-gray-800, #app .text-gray-700 { color: var(--bp-text) !important; }
#app .text-gray-600, #app .text-gray-500 { color: var(--bp-text-dim) !important; }
#app .text-gray-400, #app .text-gray-300 { color: var(--bp-text-faint) !important; }

/* Dialpad keys */
#app .bg-gray-100.rounded-full, #app button.rounded-full.bg-gray-100 { background-color: var(--bp-panel-alt) !important; }

/* Gradient headers (e.g. bg-gradient-to-b from-blue-50 to-white) */
#app .bg-gradient-to-b, #app .bg-gradient-to-r, #app .bg-gradient-to-t, #app .bg-gradient-to-l,
#app .from-blue-50, #app .to-white, #app .from-white, #app .to-blue-50 {
  background-image: none !important;
  background-color: var(--bp-panel) !important;
}

/* Inputs */
#app input, #app textarea, #app select {
  background-color: var(--bp-panel-alt) !important;
  color: var(--bp-text) !important;
  border-color: var(--bp-border) !important;
}
#app input::placeholder { color: var(--bp-text-faint) !important; }

/* Green accents (call button, online state, success) */
#app .bg-blue-500 { background-color: var(--bp-accent) !important; }
#app .hover\:bg-blue-600:hover { background-color: var(--bp-accent-dark) !important; }
#app .text-blue-500, #app .text-blue-600 { color: var(--bp-accent) !important; }
#app .bg-blue-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
#app .focus\:ring-blue-100:focus { --tw-ring-color: rgba(34,197,94,.25) !important; }
#app .focus\:border-blue-400:focus { border-color: var(--bp-accent) !important; }

/* Red / danger */
#app .bg-red-50 { background-color: var(--bp-danger-soft) !important; }
#app .text-red-500, #app .text-red-600 { color: var(--bp-danger) !important; }
#app .hover\:bg-red-50:hover { background-color: var(--bp-danger-soft) !important; }

/* Green success surfaces (used for online pill background etc.) */
#app .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
#app .text-green-500, #app .text-green-600 { color: var(--bp-accent) !important; }

/* Amber/warning */
#app .bg-amber-50 { background-color: #3a2f14 !important; }
#app .text-amber-700 { color: #f5b342 !important; }

/* Shadows read poorly on dark backgrounds */
#app .shadow-sm, #app .shadow, #app .shadow-lg, #app .shadow-xl {
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35) !important;
}

/* Blinking cursor after the dialed number */
#app .bp-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 4px;
  vertical-align: middle;
  background: #3b82f6;
  animation: bp-blink 1s step-start infinite;
}
@keyframes bp-blink {
  50% { opacity: 0; }
}

/* Spin icon used to indicate a background refresh (e.g. transfer ramais polling) */
.bp-spin {
  animation: bp-spin 1s linear infinite;
}
@keyframes bp-spin {
  to { transform: rotate(360deg); }
}

/* Scrollbars */
* { scrollbar-color: var(--bp-border) var(--bp-panel); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bp-panel); }
::-webkit-scrollbar-thumb { background: var(--bp-border); border-radius: 8px; }