/* ============================================================
   Bruno & Alexandre Motos — Global CSS
   Bootstrap 5 + customizações
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Barlow+Condensed:wght@600;700&display=swap');

/* ── Tokens — Modo Claro (padrão) ───────────────────────────── */
/* Contraste: estas cores foram medidas contra os fundos em que de fato
   aparecem, mirando WCAG AA (4.5:1 para texto normal). O verde anterior
   (#1D9E75) dava 3.39:1 com texto branco no botão e 3.11:1 como cor de
   link; o âmbar dava 3.38:1 no badge. */
:root {
  --mm-green:        #0F7355;   /* texto branco por cima: 5.83:1 */
  --mm-green-dark:   #0F6E56;
  --mm-green-light:  #E8F8F0;
  --mm-purple:       #5F56C4;   /* texto branco por cima: 6.0:1 */
  --mm-purple-dark:  #453BA8;
  --mm-purple-light: #EEEDFE;
  --mm-amber:        #8A5510;   /* sobre --mm-amber-light: 5.63:1 */
  --mm-amber-light:  #FEF3DC;
  --mm-gray-900:     #1A1A1A;
  --mm-gray-700:     #3D3D3D;
  --mm-gray-500:     #666666;   /* era #767676: reprovava sobre #F5F5F5 */
  --mm-gray-300:     #D4D4D4;
  --mm-gray-100:     #F5F5F5;
  --mm-white:        #FFFFFF;
  --mm-surface:      #FAFAFA;

  /* Semânticos — usados pelos componentes */
  --mm-bg:           #FAFAFA;
  --mm-bg-card:      #FFFFFF;
  --mm-bg-input:     #FFFFFF;
  --mm-bg-sidebar:   #1A1A1A;
  --mm-bg-navbar:    #FFFFFF;
  --mm-text-primary: #1A1A1A;
  --mm-text-secondary:#3D3D3D;
  --mm-text-muted:   #5D5D5D;   /* era #767676: 4.13–4.35:1, reprovava */
  --mm-border:       #C9C9C9;   /* divisória decorativa */
  --mm-border-strong:#8E8E8E;
  --mm-row-hover:    #F5F5F5;
  --mm-header-bg:    #F5F5F5;
  /* Campo de formulário é componente de UI: a borda precisa de 3:1
     (WCAG 1.4.11). O #D4D4D4 antigo dava 1.47:1 sobre o branco. */
  --mm-input-border: #949494;

  --mm-font-display: 'Barlow Condensed', sans-serif;
  --mm-font-body:    'Inter', sans-serif;

  --mm-radius:       10px;
  --mm-radius-sm:    6px;
  --mm-shadow:       0 1px 4px rgba(0,0,0,.08);
  --mm-shadow-md:    0 4px 16px rgba(0,0,0,.10);
}

/* ── Tokens — Modo Escuro ───────────────────────────────────── */
[data-theme="dark"] {
  --mm-green:        #22C58B;
  --mm-green-dark:   #3ECB96;   /* texto sobre --mm-green-light: 7.36:1 */
  --mm-green-light:  #0D2B20;
  --mm-purple:       #9B95E8;
  --mm-purple-dark:  #A9A3F0;   /* texto sobre --mm-purple-light: 7.36:1 */
  --mm-purple-light: #1A1840;
  --mm-amber:        #E8A830;
  --mm-amber-light:  #2B2008;
  /* Escurecer o fundo quase não separa as superfícies num tema escuro
     (card vs página sai de 1.11:1 para 1.17:1). O que resolve mesmo é
     texto mais claro e borda mais forte — é o que está feito aqui. */
  --mm-gray-900:     #F5F5F5;
  --mm-gray-700:     #DCDCDC;
  --mm-gray-500:     #B5B5B5;
  --mm-gray-300:     #3A3A3A;
  --mm-gray-100:     #262626;
  --mm-white:        #1F1F1F;
  --mm-surface:      #0E0E0E;

  --mm-bg:           #0E0E0E;
  --mm-bg-card:      #1F1F1F;
  --mm-bg-input:     #272727;
  --mm-bg-sidebar:   #0A0A0A;
  --mm-bg-navbar:    #171717;
  --mm-text-primary: #F5F5F5;   /* 15.1:1 sobre o card */
  --mm-text-secondary:#DCDCDC;  /* 12.0:1 */
  --mm-text-muted:   #B5B5B5;   /*  8.0:1 — era #909090 (5.2:1) */
  /* Divisórias em 3:1 sobre o card: o #333333 original dava 1.32:1
     e simplesmente sumia contra o fundo. */
  --mm-border:       #666666;
  --mm-border-strong:#8A8A8A;
  --mm-input-border: #8A8A8A;
  --mm-row-hover:    #2A2A2A;
  --mm-header-bg:    #262626;

  --mm-shadow:       0 1px 4px rgba(0,0,0,.4);
  --mm-shadow-md:    0 4px 20px rgba(0,0,0,.5);
}

/* ── Transição suave ao trocar tema ─────────────────────────── */
*, *::before, *::after {
  transition: background-color .2s ease, border-color .2s ease, color .1s ease;
}

/* ── Reset base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--mm-font-body);
  font-size: 14px;
  color: var(--mm-text-secondary);
  background: var(--mm-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografia ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--mm-font-display);
  color: var(--mm-text-primary);
  letter-spacing: .01em;
  line-height: 1.15;
}

.display-hero {
  font-family: var(--mm-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mm-gray-900);
}

.label-upper {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-gray-500);
}

/* ── Navbar ─────────────────────────────────────────────────── */
.mm-navbar {
  background: var(--mm-bg-navbar);
  border-bottom: 1px solid var(--mm-border);
  padding: 0 1.5rem;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--mm-shadow);
}

.mm-navbar .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

/* Logo da oficina. A arte tem fundo creme próprio, então ela vira
   um "azulejo" arredondado que se lê igual no tema claro e no escuro. */
.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  background: #FAF9F5;
  border: 1px solid var(--mm-border);
  flex-shrink: 0;
}

/* Logo completa (engrenagem + B&A MOTORS) nas telas de acesso. */
.brand-logo-grande {
  width: 92px;
  height: auto;
  border-radius: 14px;
  background: #FAF9F5;
  padding: 10px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}

.mm-navbar .brand-name {
  font-family: var(--mm-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mm-text-primary);
  letter-spacing: .01em;
}

.mm-navbar .nav-link {
  font-size: 13px;
  color: var(--mm-text-muted);
  text-decoration: none;
  padding: .3rem .6rem;
  border-radius: var(--mm-radius-sm);
  transition: color .15s, background .15s;
}

.mm-navbar .nav-link:hover,
.mm-navbar .nav-link.active {
  color: var(--mm-text-primary);
  background: var(--mm-gray-100);
}

/* ── Sidebar interna ─────────────────────────────────────────── */
.mm-sidebar {
  width: 220px;
  min-height: calc(100vh - 58px);
  background: var(--mm-bg-sidebar);
  padding: 1.25rem 1rem;
  flex-shrink: 0;
}

.mm-sidebar .sidebar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* A sidebar é escura nos dois temas, então esta cor não segue
     --mm-gray-500 (que é escuro no tema claro e dava 3.83:1 aqui). */
  color: #A6A6A6;
  padding: 0 .5rem;
  margin-bottom: .5rem;
  margin-top: 1.25rem;
}

.mm-sidebar .sidebar-label:first-child { margin-top: 0; }

.mm-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-radius: var(--mm-radius-sm);
  color: #aaa;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.mm-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.mm-sidebar .nav-link.active { background: var(--mm-green); color: #fff; }
.mm-sidebar .nav-link i { font-size: 15px; width: 18px; text-align: center; }

/* ── Layout interno (sidebar + conteúdo) ─────────────────────── */
.mm-layout {
  display: flex;
  min-height: calc(100vh - 58px);
}

.mm-content {
  flex: 1;
  padding: 2rem;
  /* min-width:0 é o que realmente permite um filho flex encolher.
     Antes havia overflow-x:hidden, que apenas ESCONDIA o transbordo —
     a tabela ficava cortada e sem como rolar. */
  min-width: 0;
}

/* ── Cards ───────────────────────────────────────────────────── */
.mm-card {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow);
}

.mm-card-body { padding: 1.25rem; }
.mm-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mm-border);
  font-weight: 600;
  font-size: 13px;
  color: var(--mm-text-secondary);
  background: var(--mm-header-bg);
  border-radius: var(--mm-radius) var(--mm-radius) 0 0;
}

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-card {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--mm-shadow);
}

.stat-card .stat-num {
  font-family: var(--mm-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--mm-text-primary);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--mm-text-muted);
  margin-top: .25rem;
}

.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* ── Botões ──────────────────────────────────────────────────── */
.btn-mm-primary {
  background: var(--mm-green);
  border: none;
  color: #fff;
  border-radius: var(--mm-radius-sm);
  padding: .55rem 1.2rem;
  font-size: 13px;
  font-family: var(--mm-font-body);
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

/* Hover escurece o fundo em vez de baixar a opacidade: opacity mistura
   texto e fundo com a página e derruba o contraste justamente no estado
   em que o usuário está mirando o botão. */
.btn-mm-primary:hover { background: var(--mm-green-dark); color: #fff; }

.btn-mm-secondary {
  background: transparent;
  border: 1px solid var(--mm-border);
  color: var(--mm-text-secondary);
  border-radius: var(--mm-radius-sm);
  padding: .55rem 1.2rem;
  font-size: 13px;
  font-family: var(--mm-font-body);
  cursor: pointer;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

.btn-mm-secondary:hover { background: var(--mm-gray-100); color: var(--mm-text-primary); }

.btn-mm-dark {
  background: var(--mm-gray-900);
  border: none;
  color: #fff;
  border-radius: var(--mm-radius-sm);
  padding: .55rem 1.2rem;
  font-size: 13px;
  font-family: var(--mm-font-body);
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

.btn-mm-dark:hover { opacity: .85; color: #fff; }

.btn-mm-purple {
  background: var(--mm-purple);
  border: none;
  color: #fff;
  border-radius: var(--mm-radius-sm);
  padding: .55rem 1.2rem;
  font-size: 13px;
  font-family: var(--mm-font-body);
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

.btn-mm-purple:hover { opacity: .88; color: #fff; }

/* ── Formulários ─────────────────────────────────────────────── */
.mm-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mm-text-muted);
  margin-bottom: .3rem;
  display: block;
}

.mm-input {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--mm-input-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-bg-input);
  color: var(--mm-text-primary);
  font-size: 13px;
  font-family: var(--mm-font-body);
  outline: none;
  transition: border-color .15s;
}

.mm-input:focus { border-color: var(--mm-green); }
.mm-input::placeholder { color: var(--mm-border-strong); }

.mm-select {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--mm-input-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-bg-input);
  color: var(--mm-text-primary);
  font-size: 13px;
  font-family: var(--mm-font-body);
  outline: none;
  cursor: pointer;
}

.mm-textarea {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--mm-input-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-bg-input);
  color: var(--mm-text-primary);
  font-size: 13px;
  font-family: var(--mm-font-body);
  outline: none;
  resize: none;
  transition: border-color .15s;
}

.mm-textarea:focus { border-color: var(--mm-green); }

.field-group { margin-bottom: 1rem; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge-mm-green {
  background: var(--mm-green-light);
  color: var(--mm-green-dark);
  font-size: 11px;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 20px;
}

.badge-mm-amber {
  background: var(--mm-amber-light);
  color: var(--mm-amber);
  font-size: 11px;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 20px;
}

.badge-mm-purple {
  background: var(--mm-purple-light);
  color: var(--mm-purple-dark);
  font-size: 11px;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 20px;
}

.badge-placa {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  background: var(--mm-gray-100);
  border: 1px solid var(--mm-gray-300);
  color: var(--mm-gray-700);
  padding: .15rem .6rem;
  border-radius: var(--mm-radius-sm);
  letter-spacing: .05em;
}

/* ── Tabelas ─────────────────────────────────────────────────── */
/* Tabela larga não encolhe: precisa rolar dentro da própria caixa,
   senão empurra a página inteira para o lado no celular. */
.mm-tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* O min-width que força a rolagem vale só no celular. No desktop as
   tabelas se ajustam à coluna — algumas (relatórios) vivem em colunas
   estreitas, e um mínimo fixo faria elas rolarem sem necessidade. */
@media (max-width: 767.98px) {
  .mm-tabela-scroll .mm-table { min-width: 620px; }
}

.mm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mm-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mm-text-muted);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--mm-border);
  text-align: left;
  background: var(--mm-header-bg);
}

.mm-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--mm-border);
  color: var(--mm-text-secondary);
  vertical-align: middle;
}

.mm-table tr:last-child td { border-bottom: none; }
.mm-table tr:hover td { background: var(--mm-row-hover); cursor: pointer; }

/* ── Seções da área pública ──────────────────────────────────── */
.pub-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--mm-border);
}

.pub-section:last-child { border-bottom: none; }

/* ── Hero pública ────────────────────────────────────────────── */
.mm-hero {
  background: var(--mm-bg-card);
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid var(--mm-border);
  text-align: center;
}

/* ── Hero com imagem de fundo (slideshow ou fixa) ────────────── */
.mm-hero-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: none;
}

.mm-hero-foto > .container { position: relative; z-index: 2; }

.mm-hero-fundo { position: absolute; inset: 0; z-index: 0; }

.mm-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}

.mm-hero-slide.ativa { opacity: 1; }

/* Véu escuro fixo por cima da foto. Não é enfeite: garante o
   contraste do texto seja a imagem clara ou escura. Com preto a 62%,
   o pior caso (foto totalmente branca) ainda dá 6.1:1 com texto
   branco — acima do mínimo AA de 4.5:1. */
.mm-hero-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.68));
}

/* Sobre a foto o texto é sempre claro, nos dois temas. */
.mm-hero-foto .display-hero,
.mm-hero-foto h1 { color: #fff; }
.mm-hero-foto .text-muted { color: #E8E8E8 !important; }
/* #D0D0D0 dava só 3.5:1 sobre a parte mais clara do gradiente, e este é
   um texto pequeno em caixa alta — o mínimo aqui é 4.5:1. */
.mm-hero-foto .label-upper { color: #E8E8E8; }

.mm-hero-foto .btn-mm-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.25);
}
.mm-hero-foto .btn-mm-secondary:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .mm-hero-slide { transition: none; }
}

/* Lista de imagens no painel */
.hero-lista { display: flex; flex-direction: column; gap: .6rem; }

.hero-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-bg-card);
}

.hero-item img {
  width: 132px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--mm-radius-sm);
  border: 1px solid var(--mm-border);
  flex-shrink: 0;
}

.hero-item-info  { flex: 1; min-width: 0; }
.hero-item-acoes { display: flex; align-items: center; gap: .75rem; font-size: 16px; }
.hero-item-acoes button[disabled] { opacity: .3; cursor: not-allowed; }
.hero-item.fixa    { border-color: var(--mm-purple); }
.hero-item.inativa img { filter: grayscale(1); opacity: .55; }

@media (max-width: 640px) {
  .hero-item { flex-wrap: wrap; }
  .hero-item img { width: 100%; height: 120px; }
}

.mm-hero .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--mm-green-light);
  color: var(--mm-green-dark);
  font-size: 12px;
  font-weight: 600;
  padding: .3rem 1rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

/* ── Serviços cards ──────────────────────────────────────────── */
.srv-card {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 1.25rem;
  height: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.srv-card:hover {
  border-color: var(--mm-green);
  box-shadow: var(--mm-shadow-md);
}

.srv-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .85rem;
}

.srv-icon.green { background: var(--mm-green-light); color: var(--mm-green); }
.srv-icon.purple { background: var(--mm-purple-light); color: var(--mm-purple); }
.srv-icon.amber { background: var(--mm-amber-light); color: var(--mm-amber); }

/* ── Stats bar ───────────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
}

.stats-bar .stat-item {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--mm-border);
}

.stats-bar .stat-item:last-child { border-right: none; }

.stats-bar .stat-num {
  font-family: var(--mm-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--mm-text-primary);
}

.stats-bar .stat-label {
  font-size: 12px;
  color: var(--mm-text-muted);
  margin-top: .2rem;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
  margin-bottom: .5rem;
  overflow: hidden;
}

.faq-question {
  padding: .9rem 1rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--mm-text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--mm-bg-card);
  border: none;
  width: 100%;
  text-align: left;
}

.faq-answer {
  padding: 0 1rem 1rem;
  font-size: 13px;
  color: var(--mm-text-muted);
  line-height: 1.7;
  display: none;
}

.faq-answer.open { display: block; }

/* ── Depoimentos ─────────────────────────────────────────────── */
.dep-card {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 1.25rem;
  height: 100%;
}

.dep-stars { color: var(--mm-amber); font-size: 13px; margin-bottom: .5rem; }

.dep-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mm-gray-100);
  border: 1px solid var(--mm-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--mm-text-muted);
}

/* ── Info cards ──────────────────────────────────────────────── */
.info-card {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.info-card .info-icon {
  font-size: 1.1rem;
  color: var(--mm-text-muted);
  flex-shrink: 0;
  margin-top: .1rem;
}

/* ── Lista de revisões (pública cliente) ─────────────────────── */
.rev-row {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 1rem 1.25rem;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color .15s;
}

.rev-row:hover { border-color: var(--mm-purple); cursor: pointer; }

/* ── Peças trocadas ──────────────────────────────────────────── */
.peca-row {
  display: grid;
  grid-template-columns: 1fr 110px 40px;
  gap: .5rem;
  margin-bottom: .5rem;
  align-items: center;
}

/* ── CTA block ───────────────────────────────────────────────── */
.cta-block {
  background: var(--mm-green-light);
  border: 1px solid #b3e6d4;
  border-radius: var(--mm-radius);
  padding: 2rem;
  text-align: center;
}

/* ── Footer público ──────────────────────────────────────────── */
.mm-footer {
  background: var(--mm-bg-card);
  border-top: 1px solid var(--mm-border);
  padding: 1.1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--mm-text-muted);
}

/* Acesso administrativo no rodapé: discreto de propósito, sem virar
   texto ilegível — no repouso já cumpre 4.5:1, e ganha ênfase no
   hover/foco. Em telas estreitas fica só o cadeado. */
/* Discreto: texto miúdo, cor apagada, sem ícone e sem sublinhado.
   Só ganha destaque no hover/foco — assim continua alcançável por
   teclado sem competir com o resto do rodapé. */
.link-admin {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: lowercase;
  /* Fica no limite do legível de propósito: mais apagado que isto
     reprovaria no mesmo critério de contraste que o resto do site
     precisa cumprir. A discrição vem do tamanho, da caixa baixa e da
     ausência de ícone/sublinhado. */
  color: var(--mm-text-muted);
  text-decoration: none;
  transition: color .15s;
}

.link-admin:hover,
.link-admin:focus-visible {
  color: var(--mm-text-primary);
  text-decoration: underline;
}

/* ── Área do cliente — moto card ─────────────────────────────── */
.moto-card {
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
  cursor: pointer;
  transition: border-color .15s;
}

.moto-card:hover { border-color: var(--mm-purple); }

/* O card fica dentro de um <a>, então sem isto o texto herda o azul de
   link do Bootstrap — 3.70:1 sobre o card escuro. */
.moto-card { color: var(--mm-text-secondary); }
.moto-card .fw-semibold { color: var(--mm-text-primary); }

.moto-avatar {
  width: 46px;
  height: 46px;
  background: var(--mm-gray-100);
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--mm-gray-500);
  flex-shrink: 0;
}

/* ── Login box ───────────────────────────────────────────────── */
.login-box {
  max-width: 400px;
  margin: 4rem auto;
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  padding: 2rem;
  box-shadow: var(--mm-shadow-md);
}

/* ── Revisão detalhes (cliente) ──────────────────────────────── */
.peca-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--mm-border);
  font-size: 13px;
}

.peca-item:last-child { border-bottom: none; }

.total-rev {
  background: var(--mm-purple-light);
  border-radius: var(--mm-radius-sm);
  padding: .85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .5rem;
}

/* ── Utilitários ─────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--mm-border);
  margin: 1.25rem 0;
}

.text-green  { color: var(--mm-green); }
.text-purple { color: var(--mm-purple); }
.text-amber  { color: var(--mm-amber); }
.text-muted  { color: var(--mm-text-muted) !important; }
.text-small  { font-size: 12px; }
.text-hint   { font-size: 11px; color: var(--mm-text-muted); margin-top: .2rem; }

.bg-green-light  { background: var(--mm-green-light); }
.bg-purple-light { background: var(--mm-purple-light); }
.bg-amber-light  { background: var(--mm-amber-light); }
.bg-surface      { background: var(--mm-bg); }
.bg-white        { background: var(--mm-bg-card) !important; }

.rounded-mm  { border-radius: var(--mm-radius); }
.shadow-mm   { box-shadow: var(--mm-shadow); }

/* ── Botão de toggle modo escuro ─────────────────────────────── */
.btn-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mm-border);
  background: var(--mm-bg-card);
  color: var(--mm-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}

.btn-theme-toggle:hover {
  background: var(--mm-gray-100);
  color: var(--mm-text-primary);
  border-color: var(--mm-border-strong);
}

/* ── Bootstrap overrides modo escuro ─────────────────────────── */
[data-theme="dark"] .modal-content {
  background: var(--mm-bg-card);
  border-color: var(--mm-border);
  color: var(--mm-text-secondary);
}

[data-theme="dark"] .modal-header {
  background: var(--mm-header-bg);
  border-bottom-color: var(--mm-border);
}

[data-theme="dark"] .modal-footer {
  background: var(--mm-header-bg);
  border-top-color: var(--mm-border);
}

[data-theme="dark"] .modal-title {
  color: var(--mm-text-primary);
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .alert-success {
  background: #0d2b1e;
  border-color: #1a5c38;
  color: #4cde97;
}

[data-theme="dark"] .alert-danger {
  background: #2b0d0d;
  border-color: #5c1a1a;
  color: #f08080;
}

[data-theme="dark"] .form-check-input {
  background-color: var(--mm-bg-input);
  border-color: var(--mm-border-strong);
}

/* O switch ligado vinha com o azul padrão do Bootstrap (#0D6EFD),
   fora da paleta. Verde da marca nos dois temas. */
.form-check-input:checked {
  background-color: var(--mm-green);
  border-color: var(--mm-green);
}

.form-check-input:focus {
  border-color: var(--mm-green);
  box-shadow: 0 0 0 .2rem rgba(15, 115, 85, .25);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--mm-text-muted);
  border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--mm-bg-card);
  border-color: var(--mm-border) var(--mm-border) var(--mm-bg-card);
  color: var(--mm-text-primary);
}

[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--mm-border);
}

[data-theme="dark"] .badge-placa {
  background: var(--mm-gray-100);
  border-color: var(--mm-border);
  color: var(--mm-text-secondary);
}

[data-theme="dark"] .cta-block {
  background: var(--mm-green-light);
  border-color: #1a4a36;
}

[data-theme="dark"] .total-rev {
  background: var(--mm-purple-light);
}

/* ── Contraste em superfícies coloridas ──────────────────────── */
/* No tema escuro o verde/roxo de destaque são claros e vibrantes:
   texto branco por cima dava 2.23:1. Aqui o texto vira escuro, o que
   leva o par para ~7:1 sem perder o visual da marca. */
[data-theme="dark"] .btn-mm-primary,
[data-theme="dark"] .btn-mm-primary:hover,
[data-theme="dark"] .btn-mm-purple,
[data-theme="dark"] .btn-mm-purple:hover,
[data-theme="dark"] .mm-sidebar .nav-link.active {
  color: #08251B;
}

[data-theme="dark"] .btn-mm-primary:hover { background: #3ECB96; }

/* As abas do Bootstrap vinham com o azul padrão (#0D6EFD), 4.31:1
   sobre o fundo claro — além de destoar da paleta. */
.nav-tabs .nav-link { color: var(--mm-text-secondary); }
.nav-tabs .nav-link:hover { color: var(--mm-text-primary); }
.nav-tabs .nav-link.active { color: var(--mm-green); font-weight: 600; }

/* Selo de horário quando a oficina está fechada. */
.hero-tag.hero-tag-fechado {
  background: var(--mm-amber-light);
  color: var(--mm-amber);
}

/* ── Edição no local (visível só para administradores) ───────── */
[data-mm-edit] {
  outline: 1px dashed transparent;
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-color .15s, background-color .15s;
  cursor: text;
}

[data-mm-edit]:hover  { outline-color: var(--mm-border-strong); }
[data-mm-edit]:focus  { outline: 2px solid var(--mm-green); background: var(--mm-green-light); }
[data-mm-edit].mm-edit-alterado { outline-color: var(--mm-amber); outline-style: solid; }

/* Espaço para a barra fixa não cobrir o rodapé. */
body:has(.mm-edicao-barra) { padding-bottom: 76px; }

.mm-edicao-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.25rem;
  background: var(--mm-bg-card);
  border-top: 1px solid var(--mm-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.18);
  font-size: 13px;
  flex-wrap: wrap;
}

.mm-edicao-barra .mm-edicao-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--mm-text-secondary);
  font-weight: 500;
}

.mm-edicao-barra .mm-edicao-contador {
  color: var(--mm-amber);
  font-weight: 600;
  margin-right: auto;
}

.mm-edicao-barra button[disabled] { opacity: .5; cursor: not-allowed; }

/* Ícones editáveis */
[data-mm-icone] {
  outline: 1px dashed transparent;
  outline-offset: 3px;
  cursor: pointer;
  position: relative;
  transition: outline-color .15s;
}
[data-mm-icone]:hover,
[data-mm-icone]:focus-visible { outline-color: var(--mm-green); }
[data-mm-icone].mm-edit-alterado { outline-color: var(--mm-amber); outline-style: solid; }
.mm-icone-inline { display: inline-block; }

/* Seletor de ícone */
.mm-icone-seletor {
  position: fixed;
  z-index: 1070;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow-md);
  padding: .9rem;
}

.mm-icone-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
  font-size: 13px;
  color: var(--mm-text-primary);
}

.mm-icone-grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .3rem;
}

.mm-icone-op {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: transparent;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
  color: var(--mm-text-secondary);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.mm-icone-op:hover { background: var(--mm-gray-100); border-color: var(--mm-border-strong); }
.mm-icone-op.ativo { background: var(--mm-green-light); border-color: var(--mm-green); color: var(--mm-green-dark); }

.mm-icone-livre { display: flex; align-items: center; gap: .5rem; }
.mm-icone-livre .mm-input { flex: 1; }

.mm-icone-previa {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-green-light);
  color: var(--mm-green-dark);
  font-size: 17px;
}

/* Atalho para entrar no modo edição (admin fora da edição) */
.mm-entrar-edicao {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 24px;
  background: var(--mm-bg-card);
  border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-md);
  color: var(--mm-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.mm-entrar-edicao:hover { color: var(--mm-text-primary); border-color: var(--mm-green); }

@media (max-width: 640px) {
  .mm-edicao-barra { font-size: 12px; padding: .6rem .75rem; }
  .mm-edicao-barra .mm-edicao-status span { display: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVO
   O layout nasceu para desktop: navbar em linha única e sidebar
   fixa de 220px. Abaixo de 992px isso não cabe, então as duas
   mudam de forma — a sidebar vira uma faixa horizontal rolável
   e a navbar quebra em duas linhas.
   ════════════════════════════════════════════════════════════ */

/* ── Tablet e abaixo ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .mm-layout { flex-direction: column; }

  /* Sidebar deixa de ser coluna e vira menu horizontal no topo. */
  .mm-sidebar {
    width: 100%;
    min-height: 0;
    padding: .5rem .75rem;
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--mm-border);
  }

  /* Os rótulos de seção não fazem sentido numa faixa horizontal. */
  .mm-sidebar .sidebar-label { display: none; }

  .mm-sidebar .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .5rem .7rem;
    font-size: 12.5px;
  }

  .mm-content { padding: 1.25rem 1rem; }
}

/* ── Celular ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Navbar em duas linhas: marca em cima, ações embaixo. */
  .mm-navbar {
    height: auto;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .6rem .9rem;
  }

  .mm-navbar .brand { flex: 1 1 100%; }
  .mm-navbar .brand-name { font-size: 1.05rem; }
  .mm-navbar > div {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: .5rem !important;
    justify-content: flex-start;
  }

  .mm-navbar .btn-mm-primary,
  .mm-navbar .btn-mm-secondary { padding: .45rem .8rem; font-size: 12px; }

  /* Hero mais curto e com respiro nas laterais. */
  .mm-hero { padding: 2.5rem 0 2.25rem; }
  .mm-hero .container,
  .pub-section .container { padding-left: 1rem; padding-right: 1rem; }
  .pub-section { padding: 2rem 0; }

  /* As três estatísticas empilham. */
  .stats-bar { grid-template-columns: 1fr; }
  .stats-bar .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--mm-border);
    padding: 1rem;
  }
  .stats-bar .stat-item:last-child { border-bottom: none; }

  /* Rodapé centralizado em coluna. */
  .mm-footer {
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    padding: 1rem;
  }

  /* Caixas de login ocupam a tela sem margem exagerada. */
  .login-box { margin: 1.5rem auto; padding: 1.25rem; }

  /* Peças da revisão: nome em cima, valor e remover embaixo. */
  .peca-row { grid-template-columns: 1fr 100px 40px; gap: .35rem; }

  /* Cartões e listas com menos respiro interno. */
  .mm-card-body { padding: 1rem; }
  .stat-card { padding: 1rem 1.1rem; }
  .info-card { padding: .85rem 1rem; }
  .srv-card  { padding: 1rem; }

  /* Barra de edição: rola na horizontal em vez de espremer. */
  .mm-edicao-barra {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .45rem;
    padding: .55rem .75rem;
  }
  .mm-edicao-barra > * { flex: 0 0 auto; }
  .mm-edicao-barra .mm-edicao-status { display: none; }
  .mm-edicao-barra .mm-edicao-contador { margin-right: .25rem; }

  body:has(.mm-edicao-barra) { padding-bottom: 68px; }

  /* Seletor de ícone não pode ser mais largo que a tela. */
  .mm-icone-seletor { width: calc(100vw - 24px); max-width: 320px; }

  /* Abas da configuração roláveis. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link { white-space: nowrap; }
}

/* ── Área de toque ───────────────────────────────────────────
   Os ícones de ação das tabelas mediam 13×14px: no celular é
   quase impossível acertar. A área clicável cresce para 34px sem
   mudar o tamanho do desenho — o que aumenta é o espaço em volta.
   (WCAG 2.5.8 pede 24×24 no mínimo.) */
.mm-table td a:has(> i:only-child),
.mm-table td .btn-icone,
.hero-item-acoes .btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  vertical-align: middle;
}

/* Navegadores sem :has() ainda ganham o alvo maior nos botões. */
.mm-table td .form-icone { display: inline-flex; }

/* Links de rodapé: continuam pequenos à vista, mas com área de
   toque decente graças ao preenchimento vertical. */
.mm-footer a { display: inline-block; padding: .3rem 0; }

/* ── Celular estreito ────────────────────────────────────────── */
@media (max-width: 400px) {
  .mm-navbar .brand-name { font-size: .95rem; }
  .brand-logo { width: 32px; height: 32px; }
  .display-hero { font-size: 1.75rem; }
  .mm-content { padding: 1rem .75rem; }
}

/* ── Ícone de lua/sol no toggle ──────────────────────────────── */
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ── Botão-ícone nas tabelas ─────────────────────────────────
   Ações que alteram dados são <button> dentro de um <form> POST
   (com token CSRF), mas devem parecer os links de ícone ao lado. */
.btn-icone {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: inherit;
  line-height: 1;
  color: inherit;
  vertical-align: baseline;
}

.btn-icone:hover { opacity: .7; }
.form-icone { display: inline; }

/* ── Chat flutuante do WhatsApp (página de contato) ──────────── */
.mm-chat-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 17px;
  border-radius: 29px;
  background: #25D366;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  transition: gap .25s ease, padding .25s ease, box-shadow .2s ease, transform .2s ease;
}

.mm-chat-float:hover,
.mm-chat-float:focus-visible {
  color: #fff;
  gap: .55rem;
  padding-right: 24px;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .5);
}

/* O rótulo só aparece no hover — o ícone sozinho é o estado de repouso. */
.mm-chat-float .mm-chat-float-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-family: var(--mm-font-body);
  font-size: 14px;
  font-weight: 600;
  transition: max-width .25s ease, opacity .2s ease;
}

.mm-chat-float:hover .mm-chat-float-texto,
.mm-chat-float:focus-visible .mm-chat-float-texto {
  max-width: 160px;
  opacity: 1;
}

[data-theme="dark"] .mm-chat-float {
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .mm-chat-float:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .7);
}

/* Em telas pequenas fica só o ícone, sem cobrir o conteúdo. */
@media (max-width: 576px) {
  .mm-chat-float { right: 16px; bottom: 16px; height: 54px; padding: 0 15px; }
  .mm-chat-float:hover .mm-chat-float-texto { max-width: 0; opacity: 0; }
  .mm-chat-float:hover { padding-right: 15px; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-chat-float, .mm-chat-float .mm-chat-float-texto { transition: none; }
  .mm-chat-float:hover { transform: none; }
}