/* =====================================================
   ZoeTicket — Tema WhaTicket-style (azul/moderno)
   Versão: 20260501v3
   ===================================================== */

/* Google Font: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --wt-primary:        #3B5BDB;
  --wt-primary-hover:  #2F4CC7;
  --wt-primary-light:  #EEF2FF;
  --wt-primary-mid:    #748FFC;
  --wt-primary-deep:   #2947B6;
  --wt-accent:         #4DABF7;
  --wt-green-out:      #D9FDD3;
  --wt-green-strong:   #25D366;
  --wt-chat-bg:        #EAE6DF;
  --wt-surface:        #F8F9FA;
  --wt-panel:          #FFFFFF;
  --wt-sidebar-bg:     #2F4CC7;
  --wt-border:         #E9ECEF;
  --wt-border-soft:    #F1F3F5;
  --wt-text:           #212529;
  --wt-text-muted:     #6C757D;
  --wt-text-light:     #ADB5BD;
  --wt-shadow:         0 2px 8px rgba(59,91,219,0.10);
  --wt-shadow-sm:      0 1px 4px rgba(0,0,0,0.08);
  --wt-radius:         10px;
  --wt-radius-lg:      16px;
}

/* ---- Base ---------------------------------------- */
html, body, #root {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  color: var(--wt-text) !important;
  background: var(--wt-surface) !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- Navbar/AppBar -------------------------------- */
.MuiAppBar-root,
header.MuiPaper-root.MuiAppBar-root {
  background: var(--wt-primary) !important;
  box-shadow: 0 2px 10px rgba(59,91,219,0.30) !important;
}

.MuiToolbar-root {
  min-height: 52px !important;
  padding: 0 12px !important;
}

/* Ícones e texto da navbar brancos */
.MuiToolbar-root .MuiIconButton-root,
.MuiToolbar-root .MuiTypography-root,
.MuiToolbar-root svg {
  color: #FFFFFF !important;
}

/* ---- Sidebar/Drawer ------------------------------ */
.MuiDrawer-paper {
  background: var(--wt-sidebar-bg) !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.MuiDrawer-paper .MuiList-root {
  padding-top: 6px !important;
}

/* Items do menu lateral */
.MuiDrawer-paper .MuiListItem-root,
.MuiDrawer-paper .MuiListItem-button {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin: 1px 8px !important;
  width: calc(100% - 16px) !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

.MuiDrawer-paper .MuiListItem-root:hover,
.MuiDrawer-paper .MuiListItem-button:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* Item ativo do sidebar */
.MuiDrawer-paper .MuiListItem-root.Mui-selected,
.MuiDrawer-paper .MuiListItem-button.Mui-selected,
[class*="selectedMenu"] {
  background: rgba(255,255,255,0.18) !important;
  border-left: none !important;
}

.MuiDrawer-paper .MuiListItem-root.Mui-selected .MuiListItemText-primary,
.MuiDrawer-paper .MuiListItem-button.Mui-selected .MuiListItemText-primary,
.MuiDrawer-paper .MuiListItem-root.Mui-selected svg,
.MuiDrawer-paper .MuiListItem-button.Mui-selected svg {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Texto dos itens */
.MuiDrawer-paper .MuiListItemText-primary {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.92) !important;
}

.MuiDrawer-paper .MuiListItemIcon-root {
  min-width: 38px !important;
  color: rgba(255,255,255,0.9) !important;
}

.MuiDrawer-paper .MuiListSubheader-root {
  color: rgba(255,255,255,0.78) !important;
  letter-spacing: 0.7px !important;
}

.MuiDrawer-paper .MuiDivider-root {
  background-color: rgba(255,255,255,0.14) !important;
}

@media (min-width: 1280px) {
  .MuiContainer-maxWidthLg {
    max-width: none !important;
  }
}

/* ---- Cards/Paper --------------------------------- */
.MuiPaper-root {
  border: 1px solid var(--wt-border) !important;
  box-shadow: var(--wt-shadow-sm) !important;
  border-radius: var(--wt-radius) !important;
}

/* Não aplicar borda em Drawer/AppBar */
.MuiDrawer-paper,
.MuiAppBar-root {
  border-radius: 0 !important;
  border: none !important;
}

/* ---- Tabs (Atendimento/Abertos/Busca) ------------ */
.MuiTabs-root {
  background: var(--wt-panel) !important;
  border-bottom: 1px solid var(--wt-border) !important;
  min-height: 44px !important;
}

.MuiTab-root {
  min-height: 44px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--wt-text-muted) !important;
}

.MuiTab-root.Mui-selected {
  color: var(--wt-primary) !important;
  font-weight: 600 !important;
}

.MuiTabs-indicator {
  background-color: var(--wt-primary) !important;
  height: 2px !important;
}

/* ---- Botões -------------------------------------- */
.MuiButton-root {
  border-radius: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  min-height: 32px !important;
  padding: 4px 14px !important;
}

.MuiButton-containedPrimary,
.MuiButton-outlinedPrimary,
.MuiTab-textColorPrimary.Mui-selected ~ .MuiTabs-indicator {
  background: var(--wt-primary) !important;
  color: #fff !important;
  border-color: var(--wt-primary) !important;
  box-shadow: 0 2px 8px rgba(59,91,219,0.25) !important;
}

.MuiButton-containedPrimary:hover {
  background: var(--wt-primary-hover) !important;
}

/* Botão RESOLVER */
[class*="actionButton"],
[class*="resolveButton"],
button[class*="resolve"],
button[class*="action"] {
  background: var(--wt-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(59,91,219,0.20) !important;
}

/* FAB (+) */
.MuiFab-root,
.MuiFab-primary {
  background: var(--wt-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(59,91,219,0.35) !important;
}

/* ---- Inputs / Search ----------------------------- */
.MuiInputBase-root,
.MuiOutlinedInput-root {
  border-radius: 8px !important;
  background: var(--wt-panel) !important;
  font-size: 0.85rem !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--wt-border) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--wt-primary-mid) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--wt-primary) !important;
  border-width: 1.5px !important;
}

/* Search box no painel de tickets */
[class*="serachInputWrapper"],
[class*="searchInputWrapper"] {
  background: var(--wt-surface) !important;
  border-bottom: 1px solid var(--wt-border) !important;
  padding: 8px 10px !important;
}

/* ---- Lista de tickets ----------------------------- */
[class*="ticketsList"],
[class*="ticketsListWrapper"] {
  background: var(--wt-panel) !important;
}

[class*="ticket"],
[class*="ticketListItem"] {
  position: relative;
  background: var(--wt-panel) !important;
  border-bottom: 1px solid var(--wt-border-soft) !important;
  box-shadow: none !important;
  transition: background 0.12s ease !important;
  padding: 8px 10px !important;
}

[class*="ticket"]:hover,
[class*="ticketListItem"]:hover {
  background: var(--wt-primary-light) !important;
}

[class*="selectedTicket"],
[class*="selected"][class*="ticket"] {
  background: var(--wt-primary-light) !important;
  border-left: 3px solid var(--wt-primary) !important;
}

[class*="pendingTicket"] {
  background: #FFFBF0 !important;
}

/* Avatar no ticket */
[class*="ticket"] [class*="avatar"],
[class*="ticketListItem"] .MuiAvatar-root {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

/* Nome do contato */
[class*="contactName"],
[class*="ticket"] [class*="contactName"] {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--wt-text) !important;
}

/* Última mensagem */
[class*="lastMessage"],
[class*="ticket"] [class*="lastMessage"] {
  font-size: 0.75rem !important;
  color: var(--wt-text-muted) !important;
  line-height: 1.3 !important;
}

/* Timestamp */
[class*="timeLabel"],
[class*="ticket"] [class*="timeLabel"] {
  font-size: 0.68rem !important;
  color: var(--wt-text-light) !important;
}

/* Badge de novas mensagens */
.MuiBadge-badge,
.MuiBadge-colorPrimary {
  background: var(--wt-green-strong) !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Faixa colorida da fila (esquerda do ticket) */
[class*="ticketQueueColor"] {
  width: 4px !important;
  min-width: 4px !important;
  border-radius: 2px 0 0 2px;
}

/* Chip/Tag */
.MuiChip-root {
  height: 20px !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
}

/* ---- Área de mensagens (chat) -------------------- */
[class*="messagesList"] {
  background: var(--wt-chat-bg) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9c0b5' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  padding: 8px 10% !important;
}

/* Bolhas de mensagem */
[class*="messageLeft"],
[class*="messageRight"] {
  max-width: 65% !important;
  border-radius: 10px !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  padding: 4px 8px 2px !important;
}

[class*="messageLeft"] {
  background: var(--wt-panel) !important;
  border-radius: 0 10px 10px 10px !important;
}

[class*="messageRight"] {
  background: var(--wt-green-out) !important;
  border-radius: 10px 0 10px 10px !important;
}

[class*="textContentItem"],
[class*="textContentItemEdited"] {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  padding: 2px 60px 4px 4px !important;
}

[class*="timestamp"] {
  font-size: 10px !important;
  color: var(--wt-text-muted) !important;
}

/* Data separadora */
[class*="dailyTimestamp"],
[class*="timestampDivider"] {
  background: rgba(255,255,255,0.82) !important;
  color: var(--wt-text-muted) !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  box-shadow: var(--wt-shadow-sm) !important;
  padding: 2px 12px !important;
}

/* ---- Input de mensagem (rodapé do chat) ----------- */
[class*="inputArea"],
[class*="messageInputWrapper"],
[class*="footerArea"] {
  background: var(--wt-panel) !important;
  border-top: 1px solid var(--wt-border) !important;
  padding: 6px 10px !important;
}

textarea,
input,
.MuiInputBase-input {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-size: 0.875rem !important;
}

/* ---- Switch (Dark/Light mode toggle) ------------- */
.MuiSwitch-track {
  background: var(--wt-border) !important;
}

.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background: var(--wt-primary) !important;
  opacity: 0.6 !important;
}

.MuiSwitch-thumb {
  box-shadow: var(--wt-shadow-sm) !important;
}

/* ---- Cabeçalho do chat (topo) --------------------- */
[class*="messageHeader"],
[class*="ticketHeader"] {
  background: var(--wt-panel) !important;
  border-bottom: 1px solid var(--wt-border) !important;
  padding: 8px 12px !important;
}

/* ---- Scrollbar ----------------------------------- */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

*::-webkit-scrollbar-thumb {
  background: #CED4DA;
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--wt-primary-mid);
}

/* ---- Tipografia geral ---------------------------- */
.MuiTypography-root {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  font-weight: 700 !important;
  color: var(--wt-text) !important;
}

/* KPIs do dashboard: mantem texto e icones brancos nos cards azuis */
[class*="cardTitle"],
[class*="cardValue"],
[class*="cardIcon"] {
  color: #FFFFFF !important;
}

/* Override mais forte para os cards KPI do dashboard */
[class*="card"] [class*="cardTitle"],
[class*="card"] [class*="cardValue"],
[class*="card"] [class*="cardIcon"],
[class*="card"] .MuiTypography-root,
[class*="card"] .MuiTypography-h4,
[class*="card"] .MuiTypography-subtitle2,
[class*="card"] .MuiSvgIcon-root,
[class*="card"] svg {
  color: #FFFFFF !important;
}

.dashboard-kpi-card,
.dashboard-kpi-card .MuiTypography-root,
.dashboard-kpi-card .dashboard-kpi-title,
.dashboard-kpi-card .dashboard-kpi-value,
.dashboard-kpi-card .dashboard-kpi-icon,
.dashboard-kpi-card .MuiTypography-h4,
.dashboard-kpi-card .MuiTypography-subtitle2,
.dashboard-kpi-card .MuiSvgIcon-root,
.dashboard-kpi-card svg,
.dashboard-kpi-card h4,
.dashboard-kpi-card h6 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ---- Badges de status ---------------------------- */
[class*="statusBadge"],
[class*="openBadge"],
[class*="pendingBadge"],
[class*="closedBadge"] {
  border-radius: 999px !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
}

/* ---- Dialogs/Modals ------------------------------ */
.MuiDialog-paper {
  border-radius: var(--wt-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(59,91,219,0.15) !important;
}

.MuiDialogTitle-root {
  background: var(--wt-primary) !important;
  color: #fff !important;
  padding: 14px 20px !important;
  border-radius: var(--wt-radius-lg) var(--wt-radius-lg) 0 0 !important;
}

.MuiDialogTitle-root .MuiTypography-root {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* ---- Formulários --------------------------------- */
.MuiFormLabel-root.Mui-focused {
  color: var(--wt-primary) !important;
}

/* ---- Tabelas (DataGrid / relatórios) ------------- */
.MuiTableHead-root .MuiTableCell-root {
  background: var(--wt-surface) !important;
  color: var(--wt-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid var(--wt-border) !important;
}

.MuiTableRow-root:hover .MuiTableCell-root {
  background: var(--wt-primary-light) !important;
}

/* ---- Overrides críticos para cor primária -------- */
/* Garante que #2DDD7F (verde original) seja substituído por azul */
[style*="color: rgb(45, 221, 127)"],
[style*="color:#2DDD7F"],
[style*="color: #2DDD7F"] {
  color: var(--wt-primary) !important;
}

[style*="background-color: rgb(45, 221, 127)"],
[style*="background:#2DDD7F"],
[style*="background-color:#2DDD7F"] {
  background-color: var(--wt-primary) !important;
}

[style*="border-color: rgb(45, 221, 127)"],
[style*="border-color:#2DDD7F"] {
  border-color: var(--wt-primary) !important;
}

/* ---- Mobile -------------------------------------- */
@media (max-width: 900px) {
  [class*="messagesList"] {
    padding: 8px 4px !important;
  }

  [class*="messageLeft"],
  [class*="messageRight"] {
    max-width: 88vw !important;
  }
}