/* ==========================================================================
   MentoraOS Design System Theme for MkDocs Material
   Alinha tipografia, paleta e componentes à identidade visual do MentoraOS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- TEMA ESCURO (Dark Mode - Identidade Principal do MentoraOS) --- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #080b11;
  --md-primary-fg-color--light: #0d121c;
  --md-primary-fg-color--dark: #05070a;
  --md-primary-bg-color: #f8fafc;
  --md-primary-bg-color--light: #cbd5e1;

  --md-accent-fg-color: #00e5ff;
  --md-accent-fg-color--transparent: rgba(0, 229, 255, 0.15);

  --md-default-bg-color: #080b11;
  --md-default-bg-color--light: #0d121c;
  --md-default-bg-color--lighter: #111827;

  --md-default-fg-color: #f8fafc;
  --md-default-fg-color--light: #cbd5e1;
  --md-default-fg-color--lighter: #94a3b8;
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.12);

  --md-typeset-a-color: #00e5ff;
  --md-typeset-mark-color: rgba(0, 229, 255, 0.25);

  --md-code-bg-color: #0d131f;
  --md-code-fg-color: #38bdf8;

  --mentora-card-bg: rgba(17, 24, 39, 0.85);
  --mentora-card-border: rgba(51, 65, 85, 0.85);
  --mentora-card-hover-border: rgba(0, 229, 255, 0.5);
  --mentora-card-hover-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.15);
  --mentora-glow-primary: rgba(0, 229, 255, 0.1);
  --mentora-header-border: rgba(51, 65, 85, 0.5);
}

/* --- TEMA CLARO (Light Mode) --- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #f8fafc;
  --md-primary-fg-color--dark: #0f172a;
  --md-primary-bg-color: #0f172a;
  --md-primary-bg-color--light: #334155;

  --md-accent-fg-color: #0284c7;
  --md-accent-fg-color--transparent: rgba(2, 132, 199, 0.12);

  --md-default-bg-color: #f1f5f9;
  --md-default-bg-color--light: #ffffff;
  --md-default-bg-color--lighter: #f8fafc;

  --md-default-fg-color: #0f172a;
  --md-default-fg-color--light: #1e293b;
  --md-default-fg-color--lighter: #64748b;
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.08);

  --md-typeset-a-color: #0284c7;
  --md-typeset-mark-color: rgba(2, 132, 199, 0.15);

  --md-code-bg-color: #f8fafc;
  --md-code-fg-color: #0284c7;

  --mentora-card-bg: #ffffff;
  --mentora-card-border: #cbd5e1;
  --mentora-card-hover-border: #0284c7;
  --mentora-card-hover-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.1);
  --mentora-glow-primary: rgba(2, 132, 199, 0.05);
  --mentora-header-border: #e2e8f0;
}

/* --- TIPOGRAFIA GLOBAL --- */
:root {
  --md-text-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --md-code-font: "JetBrains Mono", monospace;
}

body, input, select, textarea {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

code, kbd, pre {
  font-family: "JetBrains Mono", monospace !important;
}

/* --- HEADER / NAVBAR SUPERIOR --- */
.md-header {
  background-color: var(--md-primary-fg-color) !important;
  border-bottom: 1px solid var(--mentora-header-border);
  box-shadow: none !important;
  overflow: visible !important;
}

.md-header__inner {
  align-items: center;
  height: 2.4rem;
}

/* Logotipo Oficial do MentoraOS */
.md-header__button.md-logo {
  display: flex !important;
  align-items: center !important;
  padding: 0.15rem !important;
  margin-right: 0.5rem !important;
}

.md-header__button.md-logo img {
  height: 28px !important;
  width: 28px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Título e marca na barra */
.md-header__topic:first-child .md-ellipsis {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em !important;
}

.md-header__button {
  color: inherit !important;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.md-header__button:hover {
  color: var(--md-accent-fg-color) !important;
}

/* --- CAMPO DE BUSCA (Search Box) --- */
.md-search__inner {
  border-radius: 8px;
}

.md-search__form {
  border-radius: 8px !important;
  background-color: var(--md-default-bg-color--lighter) !important;
  border: 1px solid var(--mentora-card-border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-search__form:hover,
.md-search__form:focus-within {
  border-color: var(--md-accent-fg-color) !important;
}

.md-search__input {
  font-size: 0.82rem !important;
  color: var(--md-default-fg-color) !important;
}

/* --- ABAS DE NAVEGAÇÃO (Tabs - Elimina Scroll Vertical) --- */
.md-tabs {
  background-color: var(--md-primary-fg-color) !important;
  border-bottom: 1px solid var(--mentora-header-border);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.md-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.md-tabs__list {
  display: flex;
  align-items: center;
  overflow: visible !important;
}

.md-tabs__item {
  height: 2.4rem;
  display: flex;
  align-items: center;
}

.md-tabs__link {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  opacity: 0.75 !important;
  padding: 0.35rem 0.65rem !important;
  margin-top: 0 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.md-tabs__link:hover {
  opacity: 1 !important;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  opacity: 1 !important;
  color: #00e5ff !important;
  background-color: rgba(0, 229, 255, 0.12) !important;
  font-weight: 600 !important;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  opacity: 1 !important;
  color: #0284c7 !important;
  background-color: rgba(2, 132, 199, 0.08) !important;
  font-weight: 600 !important;
}

/* --- CARDS & GRIDS (Estilo MentoraOS) --- */
.grid.cards > ul > li,
.grid.cards > div {
  background: var(--mentora-card-bg) !important;
  border: 1px solid var(--mentora-card-border) !important;
  border-radius: 14px !important;
  padding: 1.4rem !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.grid.cards > ul > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--md-accent-fg-color), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid.cards > ul > li:hover {
  border-color: var(--mentora-card-hover-border) !important;
  transform: translateY(-3px);
  box-shadow: var(--mentora-card-hover-shadow) !important;
}

.grid.cards > ul > li:hover::before {
  opacity: 1;
}

.grid.cards > ul > li hr {
  margin: 0.8rem 0;
  border-color: var(--mentora-card-border);
}

/* --- ALINHAMENTO DE ÍCONES (TWEMOJI / MATERIAL ICONS / OCTICONS) --- */
.md-typeset .twemoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: -0.15em !important;
  line-height: 1 !important;
}

.md-typeset .twemoji svg {
  display: block !important;
  vertical-align: middle !important;
  fill: currentColor !important;
}

/* Alinhamento pixel-perfect dos títulos dos cards com ícones */
.grid.cards > ul > li > p:first-child,
.grid.cards > ol > li > p:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.grid.cards > ul > li > p:first-child .twemoji,
.grid.cards > ol > li > p:first-child .twemoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

.grid.cards > ul > li > p:first-child .twemoji svg,
.grid.cards > ol > li > p:first-child .twemoji svg {
  width: 1.35em !important;
  height: 1.35em !important;
}

.grid.cards > ul > li > p:first-child strong,
.grid.cards > ol > li > p:first-child strong {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

/* Links no rodapé dos cards com ícones */
.grid.cards > ul > li a,
.grid.cards > ol > li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
}

.grid.cards > ul > li a .twemoji,
.grid.cards > ol > li a .twemoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.grid.cards > ul > li a .twemoji svg,
.grid.cards > ol > li a .twemoji svg {
  width: 1.1em !important;
  height: 1.1em !important;
}

/* Listas com ícones no início do item (ex: suporte WhatsApp / E-mail) */
.md-typeset ul li:has(> .twemoji:first-child) {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.md-typeset ul li:has(> .twemoji:first-child) > .twemoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.md-typeset ul li:has(> .twemoji:first-child) > .twemoji svg {
  width: 1.15em !important;
  height: 1.15em !important;
}

/* --- BOTÕES --- */
.md-button {
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1.2rem !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.md-button .twemoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: 0 !important;
  margin: 0 !important;
}

.md-button .twemoji svg {
  width: 1.15em !important;
  height: 1.15em !important;
}

[data-md-color-scheme="slate"] .md-button--primary {
  background-color: #00e5ff !important;
  color: #080b11 !important;
  border: 1px solid #00e5ff !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
  background-color: #33ebff !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.6);
  transform: translateY(-1px);
}

[data-md-color-scheme="default"] .md-button--primary {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

[data-md-color-scheme="default"] .md-button--primary:hover {
  background-color: #0369a1 !important;
  transform: translateY(-1px);
}

/* --- ADMONITIONS / CALLOUTS MODERNOS --- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px !important;
  border-left-width: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background-color: var(--md-default-bg-color--lighter);
}

.md-typeset .admonition__title,
.md-typeset summary {
  font-weight: 700 !important;
}

/* --- TABELAS MODERNAS --- */
.md-typeset table:not([class]) {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--mentora-card-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--lighter) !important;
  font-weight: 700;
  color: var(--md-default-fg-color);
  border-bottom: 2px solid var(--mentora-card-border);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--mentora-card-border);
}

/* --- SIDEBAR & NAVEGAÇÃO LATERAL --- */
.md-sidebar__inner {
  padding-top: 0.5rem;
}

.md-nav__link {
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  transition: all 0.15s ease;
}

.md-nav__link--active {
  font-weight: 700 !important;
  color: var(--md-accent-fg-color) !important;
  background-color: var(--md-accent-fg-color--transparent);
}

/* Imagens com cantos arredondados e borda sutil */
.md-typeset img {
  border-radius: 12px;
  border: 1px solid var(--mentora-card-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin: 1.2rem 0;
}

/* Oculta a barra lateral esquerda se contiver apenas um único tópico */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary:has(.md-nav__list > .md-nav__item:only-child:not(:has(.md-nav__list))) {
    display: none !important;
  }
}