/* ==========================================================================
   Shell Martinauto para o Sales — sidebar + topbar + área de conteúdo.
   Porte em CSS puro do _shell.scss do Portal (portal.martinauto.pt),
   ligado aos tokens --ma-*. Ícones = FontAwesome (o Sales não tem bootstrap-icons).
   Carregar depois de martinauto-tokens.css e martinauto-theme.css.
   ========================================================================== */

/* O app.css do Sales põe body{display:flex}; garantir que o #app enche. */
#app { flex: 1 1 auto; width: 100%; min-width: 0; }

.ma-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ----------------------------------------------------------- */
.ma-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ma-color-surface);
  border-right: 1px solid var(--ma-color-border);
  overflow: hidden;
  z-index: 20;
}
/* Marca com a MESMA altura da topbar (52px + 1px de borda), para a
   primeira linha da nav alinhar com o cabeçalho do conteúdo. */
.ma-sidebar__brand {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid var(--ma-color-border);
}
.ma-sidebar__brand .ma-brand-logo { display: block; line-height: 0; }
.ma-sidebar__brand .ma-brand-logo img { width: 170px; height: auto; }

/* Troca do logo claro/escuro — regras com >= especificidade que a do img */
.ma-brand-logo .ma-brand-logo__on-light { display: block; }
.ma-brand-logo .ma-brand-logo__on-dark { display: none; }
:root[data-ma-theme="dark"] .ma-brand-logo .ma-brand-logo__on-light { display: none; }
:root[data-ma-theme="dark"] .ma-brand-logo .ma-brand-logo__on-dark { display: block; }

.ma-sidebar__nav {
  flex: 1;
  /* padding-top = padding do .ma-content -> "COMERCIAL" alinha com o eyebrow */
  padding: 1.75rem 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.ma-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ma-color-text-subtle);
  padding: 0.75rem 0.6rem 0.25rem;
  font-family: var(--ma-font-sans);
}
.ma-nav-label:first-child { padding-top: 0; }

.ma-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--ma-radius-sm);
  color: var(--ma-color-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: background var(--ma-duration) var(--ma-ease), color var(--ma-duration) var(--ma-ease);
}
.ma-nav-item .fa-solid,
.ma-nav-item .fa-regular,
.ma-nav-item .bi { font-size: 15px; width: 16px; text-align: center; flex-shrink: 0; opacity: 0.9; line-height: 1; }
.ma-nav-item:hover { background: var(--ma-color-surface-sunken); color: var(--ma-color-ink); }
.ma-nav-item.is-active {
  background: var(--ma-color-brand-weak);
  color: var(--ma-color-brand-strong);
  font-weight: 600;
}
.ma-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 16px;
  background: var(--ma-color-brand);
  border-radius: 0 2px 2px 0;
}

.ma-sidebar__footer {
  padding: 0.75rem 0.5rem;
  border-top: 1px solid var(--ma-color-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ma-logout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: var(--ma-radius-sm);
  background: none;
  color: var(--ma-color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.ma-logout .fa-solid,
.ma-logout .bi { font-size: 15px; width: 16px; text-align: center; line-height: 1; }
.ma-logout:hover { background: var(--ma-color-danger-weak); color: var(--ma-color-danger); }

/* ---- Área principal ------------------------------------------------- */
.ma-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ma-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.75rem;
  background: var(--ma-color-bg);
  border-bottom: 1px solid var(--ma-color-border);
}
.ma-crumb {
  font-size: 13px;
  font-weight: 500;
  color: var(--ma-color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ma-crumb b { color: var(--ma-color-ink); font-weight: 600; }
.ma-crumb span { color: var(--ma-color-text-subtle); }

.ma-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ma-theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-sm);
  background: var(--ma-color-surface);
  color: var(--ma-color-text-muted);
  cursor: pointer;
  transition: background var(--ma-duration), color var(--ma-duration), border-color var(--ma-duration);
}
.ma-theme-toggle svg { width: 16px; height: 16px; }
.ma-theme-toggle:hover {
  background: var(--ma-color-surface-sunken);
  color: var(--ma-color-ink);
  border-color: var(--ma-color-border-strong);
}

/* <button> -> tira a aparência nativa para render igual ao <a> do Portal */
.ma-userchip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem 0.3rem 0.35rem;
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-sm);
  background: var(--ma-color-surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.ma-userchip__name { font-size: 12px; font-weight: 600; color: var(--ma-color-ink); line-height: 1.1; }
.ma-userchip__role { font-size: 10px; color: var(--ma-color-text-subtle); line-height: 1.1; }
.ma-userchip .fa-solid,
.ma-userchip .bi { font-size: 11px; color: var(--ma-color-text-subtle); margin-left: 0.15rem; }
.ma-nav-toggle .bi { font-size: 18px; line-height: 1; }
.ma-portal-link .bi { font-size: 13px; }
.ma-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ma-color-brand);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ---- Conteúdo ----------------------------------------------------------
   As views do Sales abrem o seu próprio <div class="container">; aqui
   neutraliza-se para preencher a área toda (a largura já vem da .ma-content). */
.ma-content {
  flex: 1;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.ma-content > .container,
.ma-content .container,
.ma-content .container-fluid {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Data no canto direito do cabeçalho (igual ao dashboard do Portal) */
.ma-datebox { text-align: right; flex-shrink: 0; }
.ma-datebox__d { font-size: 13px; font-weight: 500; color: var(--ma-color-text-muted); }
.ma-datebox__y { font-size: 11px; color: var(--ma-color-text-subtle); font-family: var(--ma-font-mono); }

/* ---- Guest (login / registo) — sem sidebar ------------------------- */
.ma-guest {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.5rem;
}
.ma-guest__brand { line-height: 0; }
.ma-guest__brand img { width: 160px; height: auto; }
.ma-guest__body { width: 100%; max-width: 26rem; }
/* As views de auth trazem container/row/col; achatar dentro do cartão guest */
.ma-guest__body .container,
.ma-guest__body .container-fluid { max-width: none; width: 100%; margin: 0; padding: 0; }
.ma-guest__body .row { margin: 0; }
.ma-guest__body [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

/* ---- Responsivo -------------------------------------------------------- */
.ma-nav-toggle {
  width: 36px; height: 36px;
  display: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--ma-color-border);
  border-radius: var(--ma-radius-sm);
  background: var(--ma-color-surface);
  color: var(--ma-color-ink);
  cursor: pointer;
  font-size: 15px;
}
@media (max-width: 992px) {
  .ma-shell { grid-template-columns: 1fr; }
  .ma-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 224px;
    transform: translateX(-100%);
    transition: transform var(--ma-duration) var(--ma-ease);
    box-shadow: var(--ma-shadow-lg);
  }
  .ma-shell.is-nav-open .ma-sidebar { transform: translateX(0); }
  .ma-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 19; }
  .ma-nav-toggle { display: inline-flex; }
  .ma-topbar { padding-inline: 1rem; }
  .ma-content { padding: 1.25rem 1rem; }
}