/* ============================================================================
   House360 — Design System DEFINITIVO: identidade "clean · apple.com" (mockup C)
   Aplicado no PROJETO INTEIRO (/app, auth, admin-master, home, promonew).
   Usa !important nas propriedades VISUAIS (raio, sombra, borda, superfície,
   fonte, foco, cor de botão) para vencer os estilos EMBUTIDOS de cada tela.
   Regra de ouro: só ESTILO — nunca layout/estrutura. Carregado por último.
   ========================================================================== */

:root {
  --background: #F5F5F7; --card: #FFFFFF; --soft: #FBFBFD;
  --line: #EDEDF0; --line-2: #E4E7EC;
  --text: #1D1D1F; --text-secondary: #6E6E73; --text-tertiary: #A1A1A6;
  --accent: #14B8A6; --accent-2: #0F766E; --accent-soft: #EAFBF6; --blue: #0071E3;
  --radius-xl: 24px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 11px; --pill: 980px;
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.045);
  --shadow-hover: 0 12px 44px rgba(0, 0, 0, 0.09);
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); --ds-fast: 0.18s; --ds-med: 0.24s;
}

/* ============================================================================
   BASE — tipografia SF/Inter, fundo apple-grey, suavização, seleção, scrollbar.
   ========================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -0.01em;
  background: var(--background);
}
/* fundo do shell também segue o apple-grey (não toca no .main-content pra não brigar com o chat branco) */
.shell-bg, .app-shell { background: var(--background); }

/* Tipografia — títulos com o peso/tracking do apple.com */
h1, h2, h3, h4, h5 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Sora", "Inter", system-ui, sans-serif !important;
  letter-spacing: -0.026em; font-weight: 600;
}
h1 { letter-spacing: -0.03em; }
::selection { background: rgba(20, 184, 166, 0.2); }
:focus-visible { outline: 2px solid rgba(20, 184, 166, 0.6); outline-offset: 2px; border-radius: 6px; }

/* scrollbars finas estilo Apple */
* { scrollbar-width: thin; scrollbar-color: #d9d9de transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #d9d9de; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #c2c2c8; background-clip: content-box; }

/* transições fluidas globais */
a, button, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease),
    color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-med) var(--ds-ease),
    transform var(--ds-fast) var(--ds-ease), opacity var(--ds-fast) var(--ds-ease);
}
button:not(:disabled):active, [role="button"]:not(:disabled):active { transform: translateY(0.5px) scale(0.992); }

/* ============================================================================
   ÍCONES — pegada apple.com / SF Symbols: traço fino, PONTAS E JUNÇÕES
   ARREDONDADAS. Os ícones do projeto já são linha (Feather/Lucide); aqui só
   damos consistência.
   1) Arredondamento GLOBAL das pontas/junções de traço em TODO svg — seguro
      (melhora até os gauges/anéis, que ganham cap arredondado estilo Apple).
   2) Espessura de traço uniforme (1.8) SÓ nos containers de ícone (nav, topbar,
      botões, abas, chips, menus) — NUNCA em cards, pois lá vivem os
      gráficos/gauges (stroke-width 4–12) que não podem ser tocados.
   ========================================================================== */
svg { stroke-linecap: round; stroke-linejoin: round; }

.app-list-item svg, .app-list-nav svg, .topbar svg, .topbar-actions svg,
.btn svg, button svg, [class*="-btn"] svg, [class*="-tab"] svg,
.chip svg, [class*="-chip"] svg, [class*="-icon"] svg, [class*="-menu"] svg,
.app-user-mini svg, .sidebar-list svg {
  stroke-width: 1.8px !important;
  vector-effect: non-scaling-stroke;
}

/* ============================================================================
   SUPERFÍCIES — todos os cards/painéis → raio + sombra + borda clean.
   !important vence os estilos embutidos das telas.
   ========================================================================== */
[class*="-card"], [class*="-panel"], .card, .panel, .mini-card, .surface-card, .box, .widget {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  border-color: var(--line) !important;
}
/* Cards/painéis de destaque: sombra suave difusa + elevação fluida no hover */
.card, .panel, .panel-card, .m360beta-panel, .dash-card, .crmx-card,
.m360beta-order-card, .m360beta-task-detail-card, .m360beta-calendar-event-card,
.exd-card, .exd-sem-card, .exd-evo-card, .exd-garg, .exd-rank, .exd-nps-box, .app-login-card {
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow var(--ds-med) var(--ds-ease), transform var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}
.card:hover, .panel-card:hover, .m360beta-order-card:hover, .dash-card:hover, .crmx-card:hover,
.m360beta-calendar-event-card:hover, .m360beta-mini-card:hover, .exd-clickable:hover, .pcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
}

/* Modais (caixa branca): cantos maiores estilo Apple */
.m360beta-task-detail-card, .crm-lead-modal-card, .crm-client-edit-modal-card, .crmx-fmodal,
.exd-modal-box, .cal2-pop, .cal2-dt, .m360beta-task-modal, .app-access-modal, .modal-card, .modal-box {
  border-radius: var(--radius-xl) !important;
}

/* ============================================================================
   TÍTULOS DE PÁGINA / SEÇÃO — o "hero" e os section-headers do preview-c.
   Só refina peso/tracking; não mexe em tamanhos definidos por cada tela.
   ========================================================================== */
.page-title, .app-page-title, .section-title, .sec-h h2, .exd-sec-title, .crmx-title, .m360beta-title {
  letter-spacing: -0.026em !important; font-weight: 600 !important; color: var(--text) !important;
}
.page-subtitle, .app-page-subtitle, .section-subtitle, .muted, .text-muted {
  color: var(--text-secondary) !important;
}

/* ---- Inputs / campos ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
.crm-lead-field, .crm-client-edit-field, .m360beta-task-input, .input-select, .crm-filter-input {
  border-radius: var(--radius-sm) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14) !important;
  outline: none;
}

/* ---- Chips / pills / abas → pill ---- */
.chip, .dash-pill, .app-list-badge, .m360beta-resp-chip, .m360beta-task-owner-chip,
.m360beta-priority-chip, .m360beta-tab, .m360beta-viewtab, .exd-period, .exd-reset,
.m360beta-task-chat-system-pill, .badge, .tag, .pill {
  border-radius: 999px !important;
}

/* ============================================================================
   BOTÕES — assinatura apple.com: primário PRETO em pill + link azul.
   Recolore só botões explicitamente "primary/dark"; botões semânticos
   (verde concluir, vermelho excluir, etc.) mantêm a própria cor.
   ========================================================================== */
.btn, .btn-soft, .btn-dark, .is-primary, .btn-primary { border-radius: var(--pill) !important; }
.btn-dark, .is-primary, .btn-primary, button.btn-primary {
  background: var(--text) !important; border-color: var(--text) !important; color: #fff !important;
}
.btn:not(:disabled):hover, .btn-dark:not(:disabled):hover, .is-primary:not(:disabled):hover,
.btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
}
/* botões-link → azul apple */
.btn-link, a.btn-plain, .link-btn { color: var(--blue) !important; }
.btn-link:hover, a.btn-plain:hover, .link-btn:hover { text-decoration: underline; }

/* ============================================================================
   BARRAS DE PROGRESSO — trilho cinza claro, preenchimento preto/teal.
   ========================================================================== */
.bar, .progress, .progress-track { background: #EDEDF0 !important; border-radius: 999px !important; overflow: hidden; }
.bar > i, .progress > i, .progress-fill, .bar-fill { border-radius: 999px !important; }

/* ============================================================================
   TABELAS — linhas finas, cabeçalho discreto (estilo apple.com).
   ========================================================================== */
table.data-table th, .app-table th, .crmx-table th, .exd-table th {
  color: var(--text-tertiary) !important; font-weight: 600 !important;
  letter-spacing: 0.01em !important; border-bottom: 1px solid var(--line) !important;
}
table.data-table td, .app-table td, .crmx-table td, .exd-table td {
  border-top: 1px solid var(--line) !important;
}

/* ============================================================================
   SIDEBAR estilo apple.com — FUNDE com o fundo cinza (#F5F5F7), sem painel claro
   destacado. O menu-base do app é navy escuro (logo BRANCA + texto claro); aqui
   convertemos pra claro E mantemos a MARCA num bloco escuro pra a logo branca
   aparecer — exatamente o quadrado "H" preto do preview-c. Item ativo = card
   branco que se destaca do fundo cinza. !important vence o gradiente navy base.
   ========================================================================== */
.sidebar, .sidebar-list {
  background: var(--background) !important;
  border-right: 1px solid var(--line) !important;
  color: var(--text-secondary) !important;
}
/* marca: bloco escuro arredondado (logo é branca) = quadrado preto do preview-c */
.sidebar-list .brand {
  background: var(--text) !important;
  border-radius: 16px !important;
  padding: 13px 16px !important;
  margin-bottom: 6px;
}
.sidebar-list .app-list-item { color: #3A3A3C !important; border-radius: 12px; font-weight: 500; }
.sidebar-list .app-list-item svg, .sidebar-list .app-list-item i { opacity: 0.55; }
.sidebar-list .app-list-group-title, .sidebar-list .side-label, .sidebar-list .sidebar-auto-mini-label { color: var(--text-tertiary) !important; }
.sidebar-list .app-list-subitem { color: var(--text-secondary) !important; }
.sidebar-list .app-list-item:hover { color: var(--text) !important; background: rgba(0, 0, 0, 0.05) !important; border-color: transparent; }
.sidebar-list .app-list-item:hover svg, .sidebar-list .app-list-item:hover i { opacity: 1; }
.sidebar-list .app-list-item.active { color: var(--accent-2) !important; background: #fff !important; border-color: transparent; box-shadow: var(--shadow-card) !important; }
.sidebar-list .app-list-item.active svg, .sidebar-list .app-list-item.active i { color: var(--accent-2); opacity: 1; }
.sidebar-list .app-list-badge { background: var(--accent-2) !important; color: #fff; box-shadow: none; }
.sidebar-list .app-user-mini-info, .sidebar-list .app-user-mini-info * { color: var(--text) !important; }
.sidebar-list .aum-footer-logout { color: var(--text-secondary); }
/* switch "Menu automático" → teal (era indigo #6366F1) */
.sidebar-switch input:checked + .sidebar-switch-track { background: var(--accent) !important; }
.sidebar-switch input:focus-visible + .sidebar-switch-track { outline-color: var(--accent) !important; }
/* elevação sutil quando o menu automático expande sobre o conteúdo */
body.sidebar-auto .sidebar.sidebar-list:hover, body.sidebar-auto .sidebar.sidebar-list:focus-within {
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================================
   TOPBAR — busca pill sutil (estilo apple.com).
   ========================================================================== */
.search-box { border-radius: var(--pill) !important; border-color: var(--line-2) !important; box-shadow: var(--shadow-soft) !important; }
.search-box:focus-within { border-color: var(--accent-2) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14) !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}