<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'The Manifest') — Tabex</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
    {{-- Font Awesome (padrão Tabex) — servido localmente para funcionar offline --}}
    <link rel="stylesheet" href="{{ asset('vendor/fontawesome/css/all.min.css') }}">
    <style>
        /* ── Tema Terminal: layout do painel portuário, paleta Tabex ───────── */
        :root {
            --foam: #F6F8FA;         /* fundo */
            --paper: #FFFFFF;
            --ink: #0C1B2A;
            --navy: #0A2239;
            --ocean: #0E4E8B;
            --brass: #B98A2F;
            --mute: #64748B;
            --line: #E3E9EF;
            --teal: #0F766E;         /* projetos */
            --coral: #B4491F;       /* bugs */
            --geo: 'Century Gothic', CenturyGothic, 'Poppins', 'Segoe UI', 'Trebuchet MS', sans-serif;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: var(--geo); background: var(--foam); color: var(--ink); line-height: 1.6; }
        a { color: var(--ocean); }
        .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

        /* ── Header: barra clara + nav em pílulas ──────────────── */
        header.site { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
        header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
        .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
        .brand .mark {
            width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
            background: var(--navy); color: var(--brass); font-size: 15px;
        }
        .brand .name { font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
        nav.top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .pill {
            display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
            font-family: var(--geo); font-size: 11px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; text-decoration: none; color: var(--ink);
            background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
            padding: 9px 18px; transition: border-color .15s, background .15s;
        }
        .pill:hover { border-color: var(--ocean); color: var(--ocean); }
        .pill.solid { background: var(--navy); border-color: var(--navy); color: #fff; }
        .pill.solid:hover { background: var(--ocean); border-color: var(--ocean); color: #fff; }

        main { padding: 0 0 72px; }

        /* ── Título display + badge circular ───────────────────── */
        .pagehead { position: relative; overflow: hidden; padding: 44px 0 8px; }
        .pagehead .wrap { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
        .pagehead .badge-circle {
            width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
            background: var(--navy); color: var(--brass);
            display: grid; place-items: center; font-size: 22px;
        }
        .pagehead h1 {
            font-size: clamp(30px, 5vw, 52px); font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; line-height: 1.05; flex: 1 1 auto; min-width: 260px;
        }
        .pagehead .context {
            margin-left: auto; text-align: right; font-size: 15px; color: var(--mute);
            letter-spacing: .02em; white-space: nowrap;
        }
        /* sem título (versão pública): contexto vira o elemento de abertura, à esquerda */
        .pagehead .context.solo {
            margin-left: 0; text-align: left; width: 100%;
            font-size: 12px; font-weight: 700; letter-spacing: .16em;
            text-transform: uppercase; color: var(--brass);
        }
        .pagehead p.lead { width: 100%; max-width: 640px; color: var(--mute); font-size: 14.5px; margin-top: 10px; }

        /* navio hachurado (assinatura do tema) */
        .vessel { position: absolute; right: 20%; top: -10px; width: 560px; max-width: 60vw;
                  color: var(--navy); opacity: .06; pointer-events: none; }

        /* ── Stat cards ─────────────────────────────────────────── */
        .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 24px 0 4px; }
        .stat-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
        .stat-card .lbl { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 6px; }
        .stat-card .val { font-size: 34px; font-weight: 700; letter-spacing: .02em; margin-top: 2px; }
        .stat-card.project .val { color: var(--teal); }
        .stat-card.issue .val { color: var(--ocean); }
        .stat-card.bug .val { color: var(--coral); }

        /* ── KEY legend ─────────────────────────────────────────── */
        .key { display: flex; align-items: center; gap: 10px; padding: 20px 0 4px; flex-wrap: wrap; }
        .key .k { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--mute); }
        .chip {
            display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700;
            letter-spacing: .1em; text-transform: uppercase; color: #fff;
            border-radius: 6px; padding: 4px 12px;
        }
        .chip.project { background: var(--teal); }
        .chip.issue { background: var(--ocean); }
        .chip.bug { background: var(--coral); }

        /* ── Divisória: separa a rota (seção da apresentação) ───── */
        .divider { border: none; border-top: 1px solid var(--line); margin: 40px 0 8px; }

        /* ── Rota da documentação (rail) ────────────────────────── */
        .process { padding: 30px 0 6px; }
        .process h2 { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
        .route { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
        .route::before { content: ''; position: absolute; top: 25px; left: 12.5%; right: 12.5%;
                         border-top: 2px dashed var(--line); z-index: 0; }
        .port { position: relative; z-index: 1; text-align: center; padding: 0 14px; }
        .port .buoy { width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%;
                      background: var(--paper); border: 1px solid var(--line);
                      display: grid; place-items: center; font-size: 16px; color: var(--ocean); }
        .port.skill .buoy { background: var(--navy); border-color: var(--navy); color: #fff; }
        /* ilustração de etapa (página da rota) */
        .route.with-art::before { display: none; }
        .route.with-art .port { padding: 0 8px; }
        .port .art {
            background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
            padding: 14px; margin-bottom: 14px; color: var(--navy);
        }
        .port .art svg { display: block; width: 100%; height: auto; }
        .port .step { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--brass); text-transform: uppercase; }
        .port h3 { font-size: 13.5px; margin: 2px 0 4px; font-family: ui-monospace, Consolas, monospace; }
        .port h3.plain { font-family: var(--geo); font-weight: 700; }
        .port p { font-size: 12px; color: var(--mute); line-height: 1.5; }

        /* ── Catálogo agrupado (elemento do tema clássico) ──────── */
        .catalog { padding: 28px 0 0; }
        section.group { margin-bottom: 34px; }
        section.group > header {
            display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
            padding-bottom: 10px; border-bottom: 1px solid var(--line);
        }
        section.group h2 { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
        section.group h2 i { font-size: 13px; width: 22px; }
        section.group .count { font-size: 12px; color: var(--mute); }
        section.group.project h2 i { color: var(--teal); }
        section.group.issue h2 i { color: var(--ocean); }
        section.group.bug h2 i { color: var(--coral); }
        .card {
            position: relative; display: flex; gap: 16px; align-items: baseline;
            background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
            padding: 16px 20px; margin-bottom: 10px;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .card:hover { border-color: #C9D6E2; box-shadow: 0 6px 20px rgba(12,27,42,.06); }
        .card .no {
            font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--mute);
            min-width: 52px; letter-spacing: .04em;
        }
        .card .body { flex: 1; min-width: 0; }
        .card h3 { font-size: 14.5px; font-weight: 700; line-height: 1.4; margin: 0; }
        .card h3 a { color: var(--ink); text-decoration: none; }
        .card h3 a::after { content: ''; position: absolute; inset: 0; } /* stretched link */
        .card:hover h3 a { color: var(--ocean); }
        .card .meta { font-size: 12px; color: var(--mute); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
        .card .meta a { position: relative; z-index: 2; text-decoration: none; color: var(--ocean); }
        .card .meta a:hover { text-decoration: underline; }
        .card .go { color: var(--line); font-size: 13px; transition: color .15s, transform .15s; align-self: center; }
        .card:hover .go { color: var(--ocean); transform: translateX(3px); }
        .stamp {
            font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
            border: 1px solid; border-radius: 4px; padding: 1px 8px; align-self: center;
        }
        .stamp.project { color: var(--teal); border-color: #99CEC9; background: #F0FAF8; }
        .stamp.issue   { color: var(--ocean); border-color: #B3CDE8; background: #F2F7FC; }
        .stamp.bug     { color: var(--coral); border-color: #E8C0AC; background: #FCF4F0; }
        .stamp.pending { color: var(--mute); border-color: var(--line); background: var(--foam); }
        .empty { text-align: center; color: var(--mute); padding: 64px 24px; }
        .empty i { font-size: 38px; margin-bottom: 12px; color: var(--line); display: block; }

        /* ── Pátio do Porto: navio visto de cima, Vessel = Sprint · Container = Card ───
           aspect-ratio trava a proporção do casco — nunca estica/deforma
           conforme a largura da tela; só a resolução do desenho muda. */
        .yard-scene {
            position: relative; overflow: hidden;
            background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
            aspect-ratio: 1200 / 440;
            display: flex; align-items: center;
            padding: 0 4% 0 25%;
        }
        .yard-scene .hull { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
        .yard-scene .hull-outer { fill: var(--foam); stroke: var(--line); stroke-width: 4; }
        .yard-scene .hull-inner { fill: none; stroke: var(--line); stroke-width: 2; opacity: .6; }
        .yard-scene .bridge rect { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
        .yard-scene .bridge .stack { fill: var(--paper); stroke: var(--line); stroke-width: 2; }

        /* Título do vessel fica ACIMA do casco (não mais sobreposto ao navio). */
        .vessel-block { margin-bottom: 40px; }
        .vessel-block:last-child { margin-bottom: 0; }
        .bay-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
        .bay-heading .bay-title { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
        .bay-heading .voyage { font-size: 12px; color: var(--mute); font-family: ui-monospace, Consolas, monospace; }

        .bay-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px;
            width: 100%; overflow-x: auto; }
        .bay-row { display: flex; gap: 8px; }
        .crate {
            display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
            width: 100px; height: 84px; padding: 10px 12px; border-radius: 8px;
            background: var(--navy); color: #fff; text-decoration: none;
            border-top: 4px solid var(--teal); flex: 0 0 auto;
            transition: transform .15s ease, box-shadow .15s ease;
        }
        .crate:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(10,34,57,.22); }
        .crate.issue { border-top-color: var(--ocean); }
        .crate.bug { border-top-color: var(--coral); }
        .crate.pending {
            background: var(--paper); color: var(--mute); border-top-color: var(--line); cursor: default;
        }
        .crate .crate-no { font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 700; }
        .crate .crate-title { font-size: 9.5px; line-height: 1.3; opacity: .85;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .crate.pending .crate-title { font-style: italic; }
        /* slot vazio: espaço disponível no vessel, sem link, puramente ilustrativo.
           Cor ~10% mais escura que --line (#E3E9EF -> #CCD2D7) + hachura diagonal. */
        .slot-empty {
            width: 100px; height: 84px; border-radius: 8px; flex: 0 0 auto;
            border: 1.5px dashed #CCD2D7;
            background-image: repeating-linear-gradient(
                45deg, #CCD2D7 0, #CCD2D7 1.5px, transparent 1.5px, transparent 8px
            );
        }

        @media (max-width: 760px) {
            .yard-scene { aspect-ratio: auto; padding: 24px 5%; }
            .yard-scene .hull { display: none; }
        }

        .vessel-list { margin-top: 26px; }
        .vessel-list.past { opacity: .85; }
        .list-header { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: var(--mute); margin-bottom: 12px; }
        .vessel-row.done .v-icon { background: var(--foam); color: var(--teal); }
        .vessel-row {
            position: relative; display: flex; align-items: center; gap: 20px;
            background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
            padding: 18px 22px; margin-bottom: 10px; text-decoration: none; color: var(--ink);
            transition: border-color .15s, box-shadow .15s;
        }
        .vessel-row:hover { border-color: #C9D6E2; box-shadow: 0 6px 20px rgba(12,27,42,.06); }
        .vessel-row .v-icon { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
            background: var(--navy); color: var(--brass); display: grid; place-items: center; font-size: 15px; }
        .vessel-row .v-body { flex: 1; min-width: 0; }
        .vessel-row .v-body h3 { font-size: 14.5px; font-weight: 700; }
        .vessel-row .v-body h3 a { color: inherit; text-decoration: none; }
        .vessel-row .v-body h3 a::after { content: ''; position: absolute; inset: 0; }
        .vessel-row:hover .v-body h3 { color: var(--ocean); }
        .vessel-row .v-meta { font-size: 12px; color: var(--mute); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
        .vessel-row .v-progress { width: 150px; flex: 0 0 auto; }
        .progress-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
        .progress-bar > span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
        .v-progress-label { font-size: 11px; color: var(--mute); margin-top: 6px; text-align: right; }
        .vessel-row .go { color: var(--line); font-size: 13px; transition: color .15s, transform .15s; }
        .vessel-row:hover .go { color: var(--ocean); transform: translateX(3px); }

        /* ── Donut de progresso (detalhe do vessel) ─────────────── */
        .donut-wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
        .donut { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
        .donut svg { transform: rotate(-90deg); }
        .donut-label { position: absolute; inset: 0; display: flex; flex-direction: column;
            align-items: center; justify-content: center; }
        .donut-label b { font-size: 26px; font-weight: 700; }
        .donut-label span { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
        .donut-legend { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
        .donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 8px; }

        /* ── Journey: linha do tempo do container (página do documento) ── */
        .journey { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
            padding: 26px 30px; margin-bottom: 20px; }
        .journey h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: var(--mute); margin-bottom: 20px; }
        .journey-steps { display: flex; position: relative; overflow-x: auto; padding-bottom: 4px; }
        .journey-steps::before { content: ''; position: absolute; top: 7px; left: 8%; right: 8%;
            height: 2px; background: var(--teal); }
        .journey-step { flex: 1 1 0; min-width: 118px; position: relative; z-index: 1; padding-top: 24px; text-align: center; }
        .journey-step .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 14px; height: 14px; border-radius: 50%; background: var(--teal);
            border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--teal); }
        .journey-step .jlabel { font-size: 11px; font-weight: 600; margin-bottom: 3px; padding: 0 4px; }
        .journey-step .jdate { font-size: 10.5px; color: var(--mute); }

        /* ── Documento (show) ───────────────────────────────────── */
        .doc-head { padding: 40px 0 18px; }
        .doc-head .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
        .back-circle { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
                       background: var(--paper); border: 1px solid var(--line);
                       display: grid; place-items: center; color: var(--ink); text-decoration: none; font-size: 15px; }
        .back-circle:hover { border-color: var(--ocean); color: var(--ocean); }
        .doc-head .kicker { width: 100%; order: 3; font-size: 10.5px; font-weight: 700;
                            letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
                            margin: 6px 0 0 66px; }
        .doc-head h1 { font-size: clamp(22px, 3.5vw, 34px); font-weight: 700; letter-spacing: .02em; flex: 1; min-width: 240px; }
        .doc-head .date { margin-left: auto; color: var(--mute); font-size: 12.5px; white-space: nowrap; }
        article.doc { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 44px 52px; }
        article.doc h2 { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                         margin: 28px 0 10px; color: var(--navy); }
        article.doc h3 { font-size: 15px; margin: 20px 0 8px; }
        article.doc h4 { font-size: 14px; margin: 16px 0 6px; }
        article.doc p, article.doc ul, article.doc ol { margin-bottom: 12px; font-size: 14.5px; }
        article.doc ul, article.doc ol { padding-left: 24px; }
        article.doc li { margin-bottom: 4px; }
        article.doc li.todo { list-style: none; margin-left: -20px; }
        article.doc blockquote { border-left: 3px solid var(--brass); padding: 4px 16px; color: var(--mute); margin-bottom: 12px; }
        article.doc .callout { display: flex; gap: 10px; background: var(--foam); border: 1px solid var(--line);
                               border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
        article.doc pre { background: var(--navy); color: #DCE7F2; border-radius: 10px; padding: 18px;
                          overflow-x: auto; font-size: 13px; margin-bottom: 14px; line-height: 1.55; }
        article.doc code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; }
        article.doc p code, article.doc li code { background: #EEF4FB; color: var(--ocean);
                          padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
        article.doc figure { margin: 16px 0; }
        article.doc img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
        article.doc figcaption { font-size: 12px; color: var(--mute); margin-top: 6px; }
        article.doc hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
        article.doc .table-wrap { overflow-x: auto; margin-bottom: 14px; }
        article.doc table { border-collapse: collapse; width: 100%; font-size: 13px; }
        article.doc th, article.doc td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
        article.doc th { background: var(--foam); font-size: 11px; font-weight: 700;
                         letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

        /* ── Login ──────────────────────────────────────────────── */
        form.login { max-width: 400px; margin: 72px auto; background: var(--paper); padding: 40px;
                     border: 1px solid var(--line); border-radius: 14px; text-align: center; }
        form.login .mark { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
                           background: var(--navy); color: var(--brass); display: grid; place-items: center; font-size: 20px; }
        form.login h1 { font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
        form.login p { color: var(--mute); font-size: 13.5px; margin-bottom: 24px; }
        form.login input[type=password] { width: 100%; font-family: var(--geo); padding: 12px 16px;
                     border: 1px solid var(--line); border-radius: 999px; font-size: 14px; margin-bottom: 12px; text-align: center; }
        form.login input[type=password]:focus { outline: 2px solid var(--ocean); border-color: transparent; }
        form.login button { width: 100%; background: var(--navy); color: #fff; border: none; padding: 13px;
                     border-radius: 999px; font-family: var(--geo); font-size: 11.5px; font-weight: 700;
                     letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
        form.login button:hover { background: var(--ocean); }
        form.login .error { color: var(--coral); font-size: 13px; margin-bottom: 12px; }

        footer.site { text-align: center; color: var(--mute); font-size: 12px; padding: 32px 0 44px;
                      border-top: 1px solid var(--line); letter-spacing: .04em; }
        footer.site i { color: var(--brass); margin: 0 4px; }

        @media (max-width: 760px) {
            .route { grid-template-columns: 1fr 1fr; gap: 22px 0; }
            .route::before { display: none; }
            article.doc { padding: 30px 22px; }
            .pagehead .context { margin-left: 0; text-align: left; }
        }
        @media print {
            header.site, footer.site, .process, .key, .pill { display: none !important; }
        }
    </style>
</head>
<body>
<header class="site">
    <div class="wrap">
        <a href="{{ route('manifest.index') }}" class="brand">
            <span class="mark"><i class="fa-solid fa-book-open"></i></span>
            <span class="name">The Manifest</span>
        </a>
        <nav class="top">
            <a class="pill" href="{{ route('manifest.novidades') }}">
                <i class="fa-solid fa-newspaper"></i> Novidades
            </a>
            {{-- Botão apenas para a demo: apresenta a rota da documentação --}}
            <a class="pill solid" href="{{ route('manifest.rota') }}">
                <i class="fa-solid fa-route"></i> Rota da documentação
            </a>
        </nav>
    </div>
</header>

<main>
    @yield('content')
</main>

<footer class="site">
    <div class="wrap">
        The Manifest <i class="fa-solid fa-book-open"></i>
        assim como o manifesto de carga registra tudo o que navega, aqui está registrado tudo o que evolui no TABEX
    </div>
</footer>
</body>
</html>
