/* ==========================================================================
   Martinauto — camada de identidade para o Sales (Bootstrap 5.3)
   Carregar SEMPRE depois de: app.css, fontawesome, datatables, custom.css
   e de martinauto-tokens.css.

   Mapeia as variáveis --bs-* para os tokens --ma-*. O dark mode usa o
   [data-bs-theme=dark] nativo do Bootstrap 5.3 — esta camada só empurra
   as cores de superfície para os tokens --ma-* (ver martinauto-tokens.css
   :root[data-ma-theme=dark]).
   ========================================================================== */

/* ---- Ponte Bootstrap 5.3  →  tokens Martinauto -------------------------- */
:root {
  --bs-primary: var(--ma-color-brand);
  --bs-primary-rgb: var(--ma-color-brand-rgb);
  --bs-link-color: var(--ma-color-brand);
  --bs-link-color-rgb: var(--ma-color-brand-rgb);
  --bs-link-hover-color: var(--ma-color-brand-strong);

  --bs-body-bg: var(--ma-color-bg);
  --bs-body-color: var(--ma-color-ink);
  --bs-secondary-color: var(--ma-color-text-muted);
  --bs-tertiary-color: var(--ma-color-text-subtle);
  --bs-emphasis-color: var(--ma-color-ink);
  --bs-secondary-bg: var(--ma-color-surface-sunken);
  --bs-tertiary-bg: var(--ma-color-surface-sunken);

  --bs-border-color: var(--ma-color-border);
  --bs-border-color-translucent: var(--ma-color-hairline);
  --bs-border-radius: var(--ma-radius-md);
  --bs-border-radius-sm: var(--ma-radius-sm);
  --bs-border-radius-lg: var(--ma-radius-lg);
  --bs-border-radius-xl: var(--ma-radius-lg);

  --bs-body-font-family: var(--ma-font-sans);
  --bs-body-font-size: var(--ma-text-base);
  --bs-body-line-height: var(--ma-leading-normal);

  --bs-success: var(--ma-color-success);
  --bs-warning: var(--ma-color-warning);
  --bs-danger: var(--ma-color-danger);
  --bs-info: var(--ma-color-info);
}

/* ---- Base ------------------------------------------------------------------ */
body {
  font-family: var(--ma-font-sans);
  background-color: var(--ma-color-bg);
  color: var(--ma-color-ink);
  font-size: var(--ma-text-base);
  line-height: var(--ma-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ma-font-sans);
  font-weight: var(--ma-weight-bold);
  letter-spacing: var(--ma-tracking-tight);
  color: var(--ma-color-ink);
}

a {
  color: var(--ma-color-brand);
  text-decoration: none;
}
a:hover { color: var(--ma-color-brand-strong); }

code, kbd, samp, pre, .font-monospace, .num, .mono {
  font-family: var(--ma-font-mono);
}

/* ---- Navbar (mantém a de topo, só re-veste) ---------------------------- */
.navbar.navbar-laravel,
.navbar.navbar-light {
  background-color: var(--ma-color-surface) !important;
  border-bottom: 1px solid var(--ma-color-border);
  box-shadow: var(--ma-shadow-sm);
}
.navbar .navbar-brand img { height: 30px; width: auto; display: block; }
.navbar.navbar-laravel .navbar-brand { margin-right: 2rem; }
.navbar-light .navbar-nav .nav-link {
  color: var(--ma-color-text-muted);
  font-weight: var(--ma-weight-medium);
  border-radius: var(--ma-radius-sm);
  transition: color var(--ma-duration) var(--ma-ease),
              background-color var(--ma-duration) var(--ma-ease);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--ma-color-brand);
  background-color: var(--ma-color-brand-weak);
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--ma-color-brand);
}

/* Atalho "voltar ao Portal" */
.ma-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--ma-text-sm);
  font-weight: var(--ma-weight-semibold);
  color: var(--ma-color-text-muted);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-pill);
  transition: color var(--ma-duration) var(--ma-ease),
              border-color var(--ma-duration) var(--ma-ease),
              background-color var(--ma-duration) var(--ma-ease);
}
.ma-portal-link:hover {
  color: var(--ma-color-brand);
  border-color: var(--ma-color-brand);
  background-color: var(--ma-color-brand-weak);
}

/* ---- Botões (hex bakeado — override explícito) ----------------------- */
.btn-primary {
  --bs-btn-bg: var(--ma-color-brand);
  --bs-btn-border-color: var(--ma-color-brand);
  --bs-btn-hover-bg: var(--ma-color-brand-strong);
  --bs-btn-hover-border-color: var(--ma-color-brand-strong);
  --bs-btn-active-bg: var(--ma-color-brand-strong);
  --bs-btn-active-border-color: var(--ma-color-brand-strong);
  --bs-btn-disabled-bg: var(--ma-color-brand);
  --bs-btn-disabled-border-color: var(--ma-color-brand);
  --bs-btn-focus-shadow-rgb: var(--ma-color-brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--ma-color-brand);
  --bs-btn-border-color: var(--ma-color-brand);
  --bs-btn-hover-bg: var(--ma-color-brand);
  --bs-btn-hover-border-color: var(--ma-color-brand);
  --bs-btn-active-bg: var(--ma-color-brand-strong);
  --bs-btn-active-border-color: var(--ma-color-brand-strong);
  --bs-btn-focus-shadow-rgb: var(--ma-color-brand-rgb);
}
.btn {
  --bs-btn-border-radius: var(--ma-radius-md);
  font-weight: var(--ma-weight-semibold);
}
.btn-link { color: var(--ma-color-brand); }
.btn-link:hover { color: var(--ma-color-brand-strong); }

/* ---- Formulários ------------------------------------------------------- */
.form-control, .form-select {
  border-color: var(--ma-color-border-strong);
  border-radius: var(--ma-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ma-color-brand);
  box-shadow: 0 0 0 0.2rem rgb(var(--ma-color-brand-rgb) / 0.2);
}
.form-check-input:checked {
  background-color: var(--ma-color-brand);
  border-color: var(--ma-color-brand);
}
.form-check-input:focus {
  border-color: var(--ma-color-brand);
  box-shadow: 0 0 0 0.2rem rgb(var(--ma-color-brand-rgb) / 0.2);
}

/* ---- Dropdown -------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--ma-color-border);
  --bs-dropdown-border-radius: var(--ma-radius-md);
  --bs-dropdown-link-active-bg: var(--ma-color-brand);
  --bs-dropdown-link-active-color: #fff;
  box-shadow: var(--ma-shadow-md);
}
.dropdown-item:active,
.dropdown-item.active { background-color: var(--ma-color-brand); }

/* ---- Cartões / painéis ----------------------------------------------------- */
.card {
  background-color: var(--ma-color-surface) !important;
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-sm);
}
.card-header {
  background-color: var(--ma-color-surface);
  border-bottom: 1px solid var(--ma-color-border);
  font-weight: var(--ma-weight-semibold);
}

/* ---- Tabelas ------------------------------------------------------------- */
.table {
  --bs-table-color: var(--ma-color-ink);
  --bs-table-border-color: var(--ma-color-border);
  --bs-table-striped-bg: var(--ma-color-surface-sunken);
  --bs-table-hover-bg: var(--ma-color-brand-weak);
}
.table > thead th {
  font-size: var(--ma-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ma-color-text-subtle);
}

/* ---- Paginação -------------------------------------------------------------- */
.page-link {
  color: var(--ma-color-brand);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgb(var(--ma-color-brand-rgb) / 0.2);
}
.page-item.active .page-link {
  background-color: var(--ma-color-brand);
  border-color: var(--ma-color-brand);
}

/* ---- Badges / bg utilitário --------------------------------------------- */
.badge.bg-primary,
.bg-primary { background-color: var(--ma-color-brand) !important; }
.badge { border-radius: var(--ma-radius-pill); font-weight: var(--ma-weight-semibold); }
.text-primary { color: var(--ma-color-brand) !important; }

/* ---- Alertas ------------------------------------------------------------- */
.alert { border-radius: var(--ma-radius-md); }
.alert-primary {
  --bs-alert-color: var(--ma-color-brand-strong);
  --bs-alert-bg: var(--ma-color-brand-weak);
  --bs-alert-border-color: var(--ma-color-brand-weak);
}

/* ---- Links de nav em pills (usado em settings/perfis) ----------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ma-color-brand);
}
.nav-pills .nav-link { color: var(--ma-color-brand); }

/* ==========================================================================
   Estrutura do Sales — normaliza o scaffold antigo sem tocar em cada view
   ========================================================================== */

/* Navbar mais respirada */
.navbar.navbar-laravel { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.navbar.navbar-laravel .navbar-brand { padding-block: 0; margin-right: 1.5rem; }
.navbar.navbar-laravel .navbar-nav .nav-link { padding-inline: 0.85rem; }
.navbar.navbar-laravel .navbar-nav .nav-link .fa-solid { margin-right: 0.35rem; opacity: 0.75; }
.navbar.navbar-laravel .dropdown-menu .fa-fw { opacity: 0.7; }

/* Fim do "boxing" central — o conteúdo passa a ocupar o .container todo
   (mesma largura da navbar); nada de max-width extra aqui. */
@media (min-width: 768px) {
  .ma-content .row.justify-content-center > .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Espaçamento: mata os <br> soltos e dá margem à secção */
.ma-content > .container > br,
.ma-content .row > .col-12 > br,
.ma-content .col-md-12 > br { display: none; }

/* Cabeçalhos de página soltos (ex.: <h2>Lista de Propostas</h2>) ------- */
.ma-content h2 {
  font-size: var(--ma-text-xl);
  font-weight: var(--ma-weight-bold);
  letter-spacing: var(--ma-tracking-tight);
  margin: 0 0 1rem;
}

/* Cabeçalho antigo "col-md-6 título | col-md-6 [Voltar]" fica alinhado */
.ma-content .row.justify-content-center > .col-md-6:first-child { margin-bottom: 0.5rem; }
.ma-content .row.justify-content-center > .col-md-6:first-child h2 { margin-bottom: 0; }
.ma-content .row.justify-content-center > .col-md-6 .float-right > p[align="right"] { margin-bottom: 0.5rem; }

/* Formulários antigos com label horizontal (col-form-label text-md-end)
   passam a empilhados e a largura toda. Vale no conteúdo E no login guest. */
:is(.ma-content, .ma-guest) form .row.mb-3 { margin-inline: 0; }
:is(.ma-content, .ma-guest) form .row.mb-3 > label.col-form-label,
:is(.ma-content, .ma-guest) form .row.mb-3 > label.col-md-4 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  text-align: left !important;
  padding: 0 0 0.35rem;
  font-weight: var(--ma-weight-medium);
  color: var(--ma-color-ink);
}
:is(.ma-content, .ma-guest) form .row.mb-3 > div[class*="col-md-"],
:is(.ma-content, .ma-guest) form .row.mb-3 > div[class*="col-lg-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  margin-left: 0 !important;
}
:is(.ma-content, .ma-guest) form .row.mb-3 > .offset-md-4,
:is(.ma-content, .ma-guest) form .row.mb-0 > .offset-md-4,
:is(.ma-content, .ma-guest) form [class*="offset-md-"] { margin-left: 0 !important; }
/* alinhamento dos blocos "col-md-8 offset-md-4" (Lembrar-me / botões) */
:is(.ma-content, .ma-guest) form .row.mb-3 > .col-md-6,
:is(.ma-content, .ma-guest) form .row.mb-0 > .col-md-8 { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; }

/* Shims de classes Bootstrap 4 ainda usadas nas views ----------------- */
.float-right { float: right !important; }
.float-left { float: left !important; }
.thead-light th,
.table .thead-light th {
  background-color: var(--ma-color-surface-sunken);
  color: var(--ma-color-text-subtle);
  font-size: var(--ma-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Botão "default" (sem equivalente no BS5) — vira cartão de ação ------ */
.btn-default {
  background-color: var(--ma-color-surface);
  border: 1px solid var(--ma-color-border);
  color: var(--ma-color-ink);
  border-radius: var(--ma-radius-md);
  transition: border-color var(--ma-duration) var(--ma-ease),
              box-shadow var(--ma-duration) var(--ma-ease),
              transform var(--ma-duration) var(--ma-ease);
}
.btn-default:hover {
  border-color: var(--ma-color-brand);
  color: var(--ma-color-brand);
  box-shadow: var(--ma-shadow-sm);
  transform: translateY(-2px);
}

/* ==========================================================================
   Vocabulário do Portal — para o salto portal.martinauto.pt -> sales.* fazer
   sentido visual. Mesmos nomes de classe (.ma-crumb / .ma-page-head /
   .ma-eyebrow / .ma-greeting / .ma-panel) que o Portal usa.
   ========================================================================== */

/* Barra de breadcrumb sob a navbar (equivalente ao topbar do Portal).
   O .ma-crumb vai dentro de um .container no layout, para alinhar
   exatamente com a navbar (mesma largura de container do Bootstrap). */
.ma-crumb-bar {
  background: var(--ma-color-bg);
  border-bottom: 1px solid var(--ma-color-border);
}
.ma-crumb {
  padding: 0.55rem 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ma-color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ma-crumb span { color: var(--ma-color-text-subtle); }
.ma-crumb b { color: var(--ma-color-ink); font-weight: 600; }

/* Área de conteúdo — mesmo ritmo de espaçamento do .ma-content do Portal.
   Largura fica a cargo do .container do Bootstrap (igual à navbar). */
.ma-content.py-4 { padding-top: 1.5rem !important; padding-bottom: 2.5rem !important; }

/* Cabeçalho de página */
.ma-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.ma-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ma-color-brand-strong);
  margin: 0 0 0.25rem;
}
.ma-greeting {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: var(--ma-tracking-tight);
  color: var(--ma-color-ink);
  margin: 0;
}
.ma-greeting em { font-style: normal; color: var(--ma-color-brand); }

/* Painel genérico (usa isto em vez do .card cru nas listagens) */
.ma-panel {
  background: var(--ma-color-surface);
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-sm);
  overflow: hidden;
}
.ma-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ma-color-border);
}
.ma-panel__title,
.ma-content h2.ma-panel__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 13px; font-weight: 700; color: var(--ma-color-ink);
  letter-spacing: 0;
  margin: 0;
}
.ma-panel__mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--ma-color-surface-sunken);
  border: 1px solid var(--ma-color-border);
  color: var(--ma-color-brand);
  font-size: 12px;
  display: grid; place-items: center;
}
.ma-panel__body { padding: 1.25rem; }
.ma-panel.is-padded { padding: 1.1rem 1.25rem; }
.ma-panel > .table { margin-bottom: 0; }
.ma-panel > .table > :not(caption) > * > * { padding-inline: 1.25rem; }

/* DataTables dentro do painel: controlos com respiro, sem borda dupla */
.ma-panel .dt-container .dt-layout-row { padding-inline: 0.25rem; }
.ma-panel .dataTables_wrapper { padding: 0.25rem; }
.ma-panel table.dataTable { margin-top: 0.75rem !important; }

/* O .card cru das restantes views herda o mesmo aspecto do painel */
.card {
  background-color: var(--ma-color-surface) !important;
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-sm);
}
.card > .card-header {
  background-color: var(--ma-color-surface);
  border-bottom: 1px solid var(--ma-color-border);
  font-weight: var(--ma-weight-semibold);
  font-size: 13px;
  padding: 1rem 1.25rem;
}

/* Grelha de atalhos do dashboard (home.blade.php) -------------------- */
.ma-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.ma-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--ma-color-surface);
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-md);
  box-shadow: var(--ma-shadow-sm);
  color: var(--ma-color-ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--ma-duration) var(--ma-ease),
              box-shadow var(--ma-duration) var(--ma-ease),
              transform var(--ma-duration) var(--ma-ease);
}
.ma-tile::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ma-color-brand);
  opacity: 0;
  transition: opacity var(--ma-duration) var(--ma-ease);
}
.ma-tile:hover {
  border-color: var(--ma-color-border-strong);
  box-shadow: var(--ma-shadow-md);
  transform: translateY(-2px);
  color: var(--ma-color-ink);
}
.ma-tile:hover::after { opacity: 1; }
.ma-tile__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--ma-radius-sm);
  background: var(--ma-color-brand-weak);
  color: var(--ma-color-brand);
  font-size: 1rem;
}
.ma-tile__body { min-width: 0; }
.ma-tile__name { font-weight: var(--ma-weight-semibold); font-size: 0.9375rem; }
.ma-tile__desc {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--ma-color-text-muted);
  line-height: 1.4;
}
.ma-tiles__label {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ma-color-text-subtle);
  margin: 0.75rem 0 0;
}
.ma-tiles__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ma-color-border);
}

/* Contadores do dashboard ------------------------------------------- */
.ma-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.ma-stat {
  position: relative;
  display: block;
  padding: 1rem 1.1rem;
  background: var(--ma-color-surface);
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-md);
  box-shadow: var(--ma-shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--ma-duration) var(--ma-ease),
              box-shadow var(--ma-duration) var(--ma-ease),
              transform var(--ma-duration) var(--ma-ease);
}
a.ma-stat::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ma-color-brand);
  opacity: 0;
  transition: opacity var(--ma-duration) var(--ma-ease);
}
a.ma-stat:hover {
  border-color: var(--ma-color-border-strong);
  box-shadow: var(--ma-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}
a.ma-stat:hover::after { opacity: 1; }
/* Feedback de clique (igual ao Requisições): "aperta" e ganha o anel azul.
   .is-active fica pronto para cards usados como filtro. */
a.ma-stat:active {
  transform: scale(0.99);
  border-color: var(--ma-color-brand);
  box-shadow: 0 0 0 2px rgb(var(--ma-color-brand-rgb) / 0.18);
}
a.ma-stat:focus-visible,
.ma-stat.is-active {
  border-color: var(--ma-color-brand);
  box-shadow: 0 0 0 2px rgb(var(--ma-color-brand-rgb) / 0.18);
}
.ma-stat.is-active .ma-stat__label {
  color: var(--ma-color-brand);
  font-weight: var(--ma-weight-bold);
}
.ma-stat__value {
  font-size: 1.75rem;
  font-weight: var(--ma-weight-bold);
  letter-spacing: var(--ma-tracking-tight);
  color: var(--ma-color-ink);
  line-height: 1.1;
}
.ma-stat__label {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--ma-color-text-muted);
}

/* Mini-listas "últimas propostas / contratos" ---------------------- */
.ma-dash-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.ma-minilist__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--ma-color-border);
  color: var(--ma-color-ink);
  text-decoration: none;
  transition: background var(--ma-duration) var(--ma-ease);
}
.ma-minilist__row:first-child { border-top: 0; }
.ma-minilist__row:hover { background: var(--ma-color-surface-sunken); color: var(--ma-color-ink); }
.ma-minilist__main { flex: 1; min-width: 0; overflow: hidden; }
.ma-minilist__name {
  display: block;
  font-size: 0.875rem; font-weight: var(--ma-weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-minilist__meta {
  display: block;
  font-size: 0.75rem; color: var(--ma-color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-minilist__side {
  flex: 0 0 auto;
  text-align: right;
  padding-left: 0.5rem;
  min-width: 88px;
}
.ma-minilist__date {
  display: block;
  font-size: 0.7rem; color: var(--ma-color-text-subtle);
  font-family: var(--ma-font-mono);
  margin-top: 0.15rem;
}
.ma-minilist__empty {
  padding: 1.5rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--ma-color-text-subtle);
}
.ma-panel__foot {
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--ma-color-border);
  text-align: right;
  font-size: 0.8125rem;
}

/* ==========================================================================
   Dark mode — o Bootstrap 5.3 trata dos seus componentes via
   [data-bs-theme=dark]; aqui só o que NÃO é Bootstrap (DataTables,
   bootstrap-datepicker) + reforços de superfície. Sem nesting (CSS puro).
   ========================================================================== */

/* DataTables (chrome próprio, não segue o Bootstrap) — cobre v1 (.dataTables_*)
   e v2 (.dt-*), que é a que este projeto carrega (DataTables 2.x). */
:root[data-ma-theme="dark"] .dataTables_wrapper,
:root[data-ma-theme="dark"] .dt-container { color: var(--ma-color-text-muted); }
:root[data-ma-theme="dark"] table.dataTable tbody tr { background-color: transparent; }
:root[data-ma-theme="dark"] table.dataTable.stripe > tbody > tr.odd > *,
:root[data-ma-theme="dark"] table.dataTable.display > tbody > tr.odd > *,
:root[data-ma-theme="dark"] table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
:root[data-ma-theme="dark"] table.dataTable.display > tbody > tr:nth-child(odd) > * {
  box-shadow: inset 0 0 0 9999px var(--ma-color-surface-sunken);
}
:root[data-ma-theme="dark"] table.dataTable > tbody > tr:hover > *,
:root[data-ma-theme="dark"] table.dataTable.hover > tbody > tr:hover > *,
:root[data-ma-theme="dark"] table.dataTable.row-border > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px var(--ma-color-brand-weak);
}
:root[data-ma-theme="dark"] .dataTables_filter input,
:root[data-ma-theme="dark"] .dataTables_length select,
:root[data-ma-theme="dark"] .dt-search input,
:root[data-ma-theme="dark"] .dt-length select,
:root[data-ma-theme="dark"] .dt-input {
  background-color: var(--ma-color-surface-sunken);
  color: var(--ma-color-ink);
  border: 1px solid var(--ma-color-border-strong);
}
:root[data-ma-theme="dark"] .dataTables_paginate .paginate_button,
:root[data-ma-theme="dark"] .dt-paging .dt-paging-button {
  color: var(--ma-color-text-muted) !important;
}
:root[data-ma-theme="dark"] .dataTables_paginate .paginate_button.current,
:root[data-ma-theme="dark"] .dt-paging .dt-paging-button.current,
:root[data-ma-theme="dark"] .dt-paging .dt-paging-button.current:hover {
  color: #fff !important;
  background: var(--ma-color-brand) !important;
  border-color: var(--ma-color-brand) !important;
}
:root[data-ma-theme="dark"] .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) {
  color: var(--ma-color-ink) !important;
  background: var(--ma-color-surface-sunken) !important;
  border-color: var(--ma-color-border-strong) !important;
}
:root[data-ma-theme="dark"] .dt-paging .dt-paging-button.disabled { color: var(--ma-color-text-subtle) !important; }
:root[data-ma-theme="dark"] .dataTables_info,
:root[data-ma-theme="dark"] .dt-info { color: var(--ma-color-text-subtle); }

/* bootstrap-datepicker (lib à parte) */
:root[data-ma-theme="dark"] .datepicker {
  background-color: var(--ma-color-surface);
  color: var(--ma-color-ink);
  border-color: var(--ma-color-border);
}
:root[data-ma-theme="dark"] .datepicker table tr td.day:hover,
:root[data-ma-theme="dark"] .datepicker table tr td span:hover { background: var(--ma-color-surface-sunken); }
:root[data-ma-theme="dark"] .datepicker table tr td.active,
:root[data-ma-theme="dark"] .datepicker table tr td.today { background: var(--ma-color-brand) !important; color: #fff; }
:root[data-ma-theme="dark"] .datepicker table tr td.old,
:root[data-ma-theme="dark"] .datepicker table tr td.new { color: var(--ma-color-text-subtle); }

/* .thead-light é classe do Bootstrap 4 (o 5.3 não a conhece) */
:root[data-ma-theme="dark"] .thead-light th,
:root[data-ma-theme="dark"] .table .thead-light th {
  background-color: var(--ma-color-surface-sunken);
  color: var(--ma-color-text-subtle);
}

/* custom.css força .btn-light{color:black!important} — repor no escuro */
:root[data-ma-theme="dark"] .btn-light { color: var(--ma-color-ink) !important; }

/* ==========================================================================
   FullCalendar (Agenda do Leads) — chrome com os tokens + event card legível
   ========================================================================== */
.ma-cal-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--ma-color-text-muted);
}
.ma-cal-filter label { font-weight: var(--ma-weight-semibold); margin: 0; }
.ma-cal-filter .form-select { width: auto; min-width: 220px; }

.fc { --fc-border-color: var(--ma-color-border); --fc-page-bg-color: var(--ma-color-surface); }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; gap: 0.5rem; flex-wrap: wrap; }
.fc .fc-toolbar-title { font-size: 1.05rem; font-weight: var(--ma-weight-bold); letter-spacing: var(--ma-tracking-tight); color: var(--ma-color-ink); }

/* Botões da barra */
.fc .fc-button {
  background: var(--ma-color-surface);
  border: 1px solid var(--ma-color-border);
  color: var(--ma-color-text-muted);
  font-size: 0.8125rem;
  font-weight: var(--ma-weight-medium);
  text-transform: none;
  box-shadow: none;
  padding: 0.35rem 0.7rem;
}
.fc .fc-button:hover { background: var(--ma-color-surface-sunken); color: var(--ma-color-ink); border-color: var(--ma-color-border-strong); }
.fc .fc-button:focus { box-shadow: 0 0 0 0.2rem rgb(var(--ma-color-brand-rgb) / 0.2); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--ma-color-brand);
  border-color: var(--ma-color-brand);
  color: #fff;
}
.fc .fc-button:disabled { opacity: 0.5; }

/* Grelha */
.fc .fc-col-header-cell-cushion { color: var(--ma-color-text-muted); font-weight: var(--ma-weight-semibold); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem; }
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text { color: var(--ma-color-text-subtle); font-size: 0.75rem; }
.fc .fc-timegrid-axis-cushion { color: var(--ma-color-text-subtle); font-size: 0.7rem; }
.fc .fc-day-today { background: var(--ma-color-brand-weak) !important; }
.fc .fc-timegrid-now-indicator-line { border-color: var(--ma-color-danger); }
.fc .fc-scrollgrid { border-radius: var(--ma-radius-md); overflow: hidden; }
.fc .fc-non-business { background: var(--ma-color-surface-sunken); }
.fc .fc-timegrid-slot { height: 1.7em; }

/* Event card — texto SEMPRE branco, compacto, com reticências */
.fc .fc-event { border: 0; border-radius: 6px; padding: 0; overflow: hidden; }
.fc .fc-timegrid-event .fc-event-main { padding: 3px 6px 5px; }
.fc .fc-daygrid-event .fc-event-main { padding: 2px 7px; }
.ma-cal-ev { display: flex; flex-direction: column; gap: 1px; color: #fff; line-height: 1.2; }
.ma-cal-ev__title { font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-cal-ev__sub { font-size: 0.7rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-cal-ev__foot {
  display: flex; gap: 9px; margin-top: 3px; font-size: 0.74rem;
  opacity: 0; transition: opacity 120ms;
}
.fc-timegrid-event:hover .ma-cal-ev__foot,
.fc-timegrid-event.fc-event-mirror .ma-cal-ev__foot { opacity: 1; }
.ma-cal-ev__act, .ma-cal-ev__act:hover, .ma-cal-ev__by { color: #fff; opacity: 0.8; text-decoration: none; }
.ma-cal-ev__act:hover { opacity: 1; }

/* Eventos "todo o dia" — barra de uma linha: só título + ícones (sempre) ao fim */
.fc-daygrid-event .ma-cal-ev { flex-direction: row; align-items: center; gap: 6px; }
.fc-daygrid-event .ma-cal-ev__sub { display: none; }
.fc-daygrid-event .ma-cal-ev__foot { opacity: 1; margin: 0 0 0 auto; padding: 0; align-self: center; }

/* Vista "Agenda" (listWeek) */
.fc .fc-list { border-radius: var(--ma-radius-md); overflow: hidden; }
.fc .fc-list-event:hover td { background: var(--ma-color-surface-sunken); }
.fc .fc-list-event-dot { border-color: currentColor; }
.fc .fc-list-empty { color: var(--ma-color-text-subtle); }