/* Tokens: use --mad-bg / --mad-bg-subtle / --mad-bg-muted (definidos no
   mad-ui.css E redefinidos em html[data-theme="dark"] pelo notch-dark.css).
   NÃO use --mad-surface: esse token NÃO EXISTE em lugar nenhum do framework —
   todo uso caía no fallback #fff, então cartão e demo ficavam brancos com
   texto claro (ilegíveis) no modo escuro. */

.tutor-home-hero {
    display: flex;
    flex-direction: column;
    gap: var(--mad-s2, 8px);
    padding: var(--mad-s6, 24px) 0 var(--mad-s4, 16px);
}

.tutor-home-hero h1 {
    margin: 0;
    font-size: var(--mad-text-2xl, 24px);
    color: var(--mad-text, #18181b);
}

.tutor-home-hero p {
    margin: 0;
    color: var(--mad-text-muted, #71717a);
    font-size: var(--mad-text-sm, 13px);
    max-width: 640px;
}

.tutor-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--mad-s4, 16px);
}

.tutor-home-card {
    display: flex;
    flex-direction: column;
    gap: var(--mad-s2, 8px);
    padding: var(--mad-s4, 16px);
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-lg, 12px);
    background: var(--mad-bg, #fff);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.tutor-home-card:hover {
    border-color: var(--mad-primary, #6366f1);
    box-shadow: var(--mad-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
    transform: translateY(-1px);
}

.tutor-home-card-head {
    display: flex;
    align-items: center;
    gap: var(--mad-s2, 8px);
}

.tutor-home-card-head i {
    width: 20px;
    height: 20px;
    color: var(--mad-primary, #6366f1);
    flex-shrink: 0;
}

.tutor-home-card-head strong {
    font-size: var(--mad-text-base, 14px);
    color: var(--mad-text, #18181b);
}

.tutor-home-card-count {
    margin-left: auto;
    font-size: var(--mad-text-xs, 11px);
    color: var(--mad-text-muted, #71717a);
    background: var(--mad-bg-muted, #f4f4f5);
    border-radius: var(--mad-radius-full, 999px);
    padding: 2px 8px;
}

.tutor-home-card-pages {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tutor-home-card-pages a {
    font-size: var(--mad-text-sm, 13px);
    color: var(--mad-text-muted, #71717a);
    text-decoration: none;
}

.tutor-home-card-pages a:hover {
    color: var(--mad-primary, #6366f1);
    text-decoration: underline;
}

.tutor-home-card[hidden] {
    display: none;
}

/* ── Página de componente ────────────────────────────────────────────── */

/* Coluna única: a navegação mora na sidebar do casco (shell.blade.php), não
   mais numa <nav class="tutor-sidebar"> ao lado do conteúdo. */
.tutor-page {
    display: block;
}

.tutor-page-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mad-s6, 24px);
}

.tutor-page-head h1 {
    margin: 0 0 4px;
    font-size: var(--mad-text-xl, 18px);
    color: var(--mad-text, #18181b);
}

.tutor-page-head p {
    margin: 0 0 var(--mad-s2, 8px);
    color: var(--mad-text-muted, #71717a);
    font-size: var(--mad-text-sm, 13px);
}

.tutor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tutor-chip {
    font-family: var(--mad-font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--mad-primary, #6366f1);
    background: var(--mad-primary-subtle, rgba(99, 102, 241, .1));
    border-radius: var(--mad-radius-sm, 4px);
    padding: 2px 8px;
}

.tutor-prevnext {
    display: flex;
    justify-content: space-between;
    gap: var(--mad-s3, 12px);
    padding-top: var(--mad-s4, 16px);
    border-top: 1px solid var(--mad-border, #e4e4e7);
}

.tutor-prevnext a {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mad-s3, 12px);
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-md, 8px);
    text-decoration: none;
    color: var(--mad-text, #18181b);
    font-size: var(--mad-text-sm, 13px);
}

.tutor-prevnext a:hover {
    border-color: var(--mad-primary, #6366f1);
}

.tutor-prevnext a.tutor-next {
    text-align: right;
    margin-left: auto;
}

.tutor-prevnext small {
    color: var(--mad-text-muted, #71717a);
    font-size: 11px;
}

.tutor-source-details {
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-md, 8px);
    overflow: hidden;
}

.tutor-source-details summary {
    cursor: pointer;
    padding: var(--mad-s3, 12px);
    font-size: var(--mad-text-sm, 13px);
    color: var(--mad-text, #18181b);
    background: var(--mad-bg-muted, #f4f4f5);
    user-select: none;
}

.tutor-source-details[open] summary {
    border-bottom: 1px solid var(--mad-border, #e4e4e7);
}

.tutor-source-details .tutor-demo-code {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* ── Cartão de demo (<x-tutor-demo>) ─────────────────────────────────── */

.tutor-demo {
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-lg, 12px);
    overflow: hidden;
    background: var(--mad-bg, #fff);
}

.tutor-demo-head {
    padding: var(--mad-s3, 12px) var(--mad-s4, 16px);
    border-bottom: 1px solid var(--mad-border, #e4e4e7);
}

.tutor-demo-head strong {
    font-size: var(--mad-text-base, 14px);
    color: var(--mad-text, #18181b);
}

.tutor-demo-desc {
    margin: 2px 0 0;
    font-size: var(--mad-text-sm, 13px);
    color: var(--mad-text-muted, #71717a);
}

.tutor-demo-live {
    padding: var(--mad-s5, 20px);
}

/* Cartão de editor unificado: header + código colados num bloco escuro só.
   Os !important existem porque o tema do Prism (CDN) carrega DEPOIS deste
   arquivo e re-aplica margin/border-radius/background no <pre> — é o que
   deixava o header solto de um lado e o código flutuando do outro. */
.tutor-demo-code {
    margin: 0 20px 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #1e1e2e;
    border: 1px solid #313244;
}

.tutor-demo-code + .tutor-demo-code {
    margin-top: 0;
}

.tutor-demo-code-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #181825;
    border-bottom: 1px solid #313244;
    color: #a6adc8;
    font-family: var(--mad-font-mono, ui-monospace, monospace);
    font-size: 11px;
}

.tutor-lang-chip {
    flex: none;
    background: #313244;
    color: #89b4fa;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    user-select: none;
}

.tutor-demo-file {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

.tutor-file-dir {
    color: #585b70;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;  /* diretório encolhe; basename fica sempre visível */
}

.tutor-file-name {
    flex: none;
    color: #cdd6f4;
    font-weight: 600;
}

.tutor-copy {
    flex: none;
    background: transparent;
    color: #a6adc8;
    border: 1px solid #45475a;
    border-radius: 6px;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tutor-copy:hover {
    background: #313244;
    color: #cdd6f4;
}

.tutor-copy.is-copied {
    color: #a6e3a1;
    border-color: rgba(166, 227, 161, .5);
    background: rgba(166, 227, 161, .08);
}

.tutor-demo-code pre,
.tutor-demo-code pre[class*="language-"] {
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #1e1e2e !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 420px;
    overflow: auto;
}

.tutor-demo-code pre,
.tutor-demo-code code,
.tutor-demo-code code[class*="language-"] {
    font-size: 12.5px;
    line-height: 1.65;
    text-shadow: none !important;
}

.tutor-demo-code pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.tutor-demo-code pre::-webkit-scrollbar-thumb {
    background: #313244;
    border-radius: 4px;
}

.tutor-demo-code pre::-webkit-scrollbar-track {
    background: transparent;
}


/* ══════════════════════════════════════════════════════════════════════
   CASCO DO TUTOR — topbar + sidebar de catálogo + área de conteúdo.

   Vive fora do casco do admin (o tutor é standalone). Usa os tokens
   --mad-* do mad-ui.css, que o notch-dark.css troca em
   html[data-theme="dark"] — por isso não há bloco de dark duplicado aqui,
   só os poucos ajustes que os tokens não cobrem.

   Layout: body (position:absolute, height:100% do notch-base) →
   topbar fixa + .tutor-shell-body flex com sidebar e main rolando
   independentes.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --tutor-topbar-h: 56px;
    --tutor-nav-w: 268px;
}

body.tutor-shell {
    background: var(--mad-bg, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Topbar ───────────────────────────────────────────────────────── */

.tutor-topbar {
    flex: 0 0 var(--tutor-topbar-h);
    height: var(--tutor-topbar-h);
    display: flex;
    align-items: center;
    gap: var(--mad-s3, 12px);
    padding: 0 var(--mad-s4, 16px);
    background: var(--mad-bg, #fff);
    border-bottom: 1px solid var(--mad-border, #e4e4e7);
    z-index: 30;
}

.tutor-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.tutor-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--mad-radius-md, 8px);
    background: var(--mad-primary, #6366f1);
    color: var(--mad-primary-fg, #fff);
}

.tutor-brand-mark svg {
    width: 17px;
    height: 17px;
}

.tutor-brand-text {
    font-size: 15px;
    letter-spacing: -.01em;
    color: var(--mad-text-muted, #71717a);
}

.tutor-brand-text strong {
    color: var(--mad-text, #18181b);
}

.tutor-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-md, 8px);
    background: transparent;
    color: var(--mad-text-muted, #71717a);
    cursor: pointer;
}

/* ── Omnibox (busca do catálogo) ──────────────────────────────────── */

.tutor-omnibox {
    position: relative;
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-md, 8px);
    background: var(--mad-bg-subtle, #fafafa);
}

.tutor-omnibox:focus-within {
    border-color: var(--mad-primary, #6366f1);
    box-shadow: 0 0 0 3px var(--mad-primary-subtle, rgba(99, 102, 241, .15));
}

.tutor-omnibox > svg {
    width: 15px;
    height: 15px;
    color: var(--mad-text-subtle, #a1a1aa);
    flex-shrink: 0;
}

.tutor-omnibox input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--mad-text, #18181b);
    font-size: var(--mad-text-sm, 13px);
    padding: 0;
}

.tutor-omnibox kbd {
    font-family: var(--mad-font-mono, ui-monospace, monospace);
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: 4px;
    color: var(--mad-text-subtle, #a1a1aa);
    background: var(--mad-bg, #fff);
}

.tutor-omnibox-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--mad-border, #e4e4e7);
    border-radius: var(--mad-radius-lg, 12px);
    background: var(--mad-bg, #fff);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    z-index: 40;
}

.tutor-omnibox-results a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border-radius: var(--mad-radius-sm, 6px);
    text-decoration: none;
}

.tutor-omnibox-results a strong {
    font-size: var(--mad-text-sm, 13px);
    font-weight: 600;
    color: var(--mad-text, #18181b);
}

.tutor-omnibox-results a span {
    font-size: 11px;
    color: var(--mad-text-subtle, #a1a1aa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tutor-omnibox-results a:hover,
.tutor-omnibox-results a.is-cursor {
    background: var(--mad-bg-muted, #f4f4f5);
}

.tutor-omnibox-empty {
    padding: 12px;
    font-size: var(--mad-text-sm, 13px);
    color: var(--mad-text-subtle, #a1a1aa);
}

.tutor-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tutor-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--mad-radius-md, 8px);
    color: var(--mad-text-muted, #71717a);
    text-decoration: none;
}

.tutor-icon-btn:hover {
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-text, #18181b);
}

.tutor-icon-btn svg {
    width: 17px;
    height: 17px;
}

/* ── Corpo: sidebar + conteúdo ────────────────────────────────────── */

.tutor-shell-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.tutor-nav {
    flex: 0 0 var(--tutor-nav-w);
    width: var(--tutor-nav-w);
    overflow-y: auto;
    padding: var(--mad-s3, 12px) var(--mad-s2, 8px) var(--mad-s6, 24px);
    border-right: 1px solid var(--mad-border, #e4e4e7);
    background: var(--mad-bg-subtle, #fafafa);
}

.tutor-nav-home {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
    border-radius: var(--mad-radius-md, 8px);
    font-size: var(--mad-text-sm, 13px);
    color: var(--mad-text-muted, #71717a);
    text-decoration: none;
}

.tutor-nav-home svg {
    width: 15px;
    height: 15px;
}

.tutor-nav-home:hover {
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-text, #18181b);
}

.tutor-nav-home.is-active {
    background: var(--mad-primary-subtle, rgba(99, 102, 241, .12));
    color: var(--mad-primary, #6366f1);
    font-weight: 600;
}

.tutor-nav-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    border-radius: var(--mad-radius-md, 8px);
    background: transparent;
    color: var(--mad-text, #18181b);
    font-family: inherit;
    font-size: var(--mad-text-sm, 13px);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.tutor-nav-group-head:hover {
    background: var(--mad-bg-muted, #f4f4f5);
}

.tutor-nav-group-head > svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--mad-text-subtle, #a1a1aa);
}

.tutor-nav-group-head span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutor-nav-group-head em {
    font-style: normal;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-text-subtle, #a1a1aa);
}

.tutor-nav-caret {
    width: 14px !important;
    height: 14px !important;
    transition: transform .15s ease;
}

.tutor-nav-group.is-open .tutor-nav-caret {
    transform: rotate(180deg);
}

.tutor-nav-group-pages {
    display: none;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 6px 20px;
    padding-left: 8px;
    border-left: 1px solid var(--mad-border, #e4e4e7);
}

.tutor-nav-group.is-open .tutor-nav-group-pages {
    display: flex;
}

.tutor-nav-group-pages a {
    padding: 5px 10px;
    border-radius: var(--mad-radius-sm, 6px);
    font-size: var(--mad-text-sm, 13px);
    color: var(--mad-text-muted, #71717a);
    text-decoration: none;
}

.tutor-nav-group-pages a:hover {
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-text, #18181b);
}

.tutor-nav-group-pages a.is-active {
    background: var(--mad-primary-subtle, rgba(99, 102, 241, .12));
    color: var(--mad-primary, #6366f1);
    font-weight: 600;
}

.tutor-nav-scrim {
    display: none;
}

.tutor-shell-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.tutor-shell-main > .container-live {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Estreito: sidebar vira drawer ────────────────────────────────── */

@media (max-width: 1024px) {
    .tutor-nav-toggle {
        display: inline-flex;
    }

    .tutor-brand-text {
        display: none;
    }

    .tutor-nav {
        position: fixed;
        top: var(--tutor-topbar-h);
        bottom: 0;
        left: 0;
        z-index: 35;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    body.tutor-nav-open .tutor-nav {
        transform: translateX(0);
    }

    body.tutor-nav-open .tutor-nav-scrim {
        display: block;
        position: fixed;
        inset: var(--tutor-topbar-h) 0 0 0;
        z-index: 34;
        background: rgba(0, 0, 0, .35);
    }

    .tutor-omnibox kbd {
        display: none;
    }
}