/* ===== FONTES — @import deve ser primeiro ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lato:wght@300;400;700&display=swap');

/* ===== RESET OVERFLOW ===== */
html, body {
    overflow-x: clip !important;
}

/* x-cloak */
[x-cloak] { display: none !important; }

/* ===== LAYOUT PRINCIPAL — empurrar conteúdo para além da sidebar ===== */
.fi-main-ctn {
    margin-left: 175px !important;
    width: calc(100vw - 175px) !important;
    max-width: calc(100vw - 175px) !important;
    min-width: 0 !important;
    background-color: #f5f0e8 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Layout containers — sem overflow horizontal */
.fi-layout,
.fi-sidebar-layout,
.fi-body,
.fi-page,
.fi-page-header,
.fi-simple-layout {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Conteúdo principal — seletor mais específico para ganhar ao !important do Filament */
.fi-layout .fi-main-ctn .fi-main {
    padding: 16px 22px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Topbar — sem sobrepor sidebar (já alinhada por fi-main-ctn margin-left) */
.fi-topbar {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ===== TABELAS ===== */
.fi-ta-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

.fi-ta-table {
    max-width: 100% !important;
}

.fi-ta-col-action {
    width: auto !important;
    white-space: nowrap !important;
}

.fi-ta-actions {
    white-space: nowrap !important;
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

/* Botões de ação da tabela */
.fi-ta-actions .fi-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border: 1px solid #876a42 !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    color: #876a42 !important;
    white-space: nowrap !important;
    min-width: 52px !important;
    gap: 0 !important;
}

.fi-ta-actions .fi-btn:hover {
    background-color: #876a42 !important;
    color: #ffffff !important;
}

.fi-ta-actions .fi-btn svg {
    display: none !important;
}

/* Ocultar ícones heroicons nos itens de nav */
.fi-sidebar-item-icon {
    display: none !important;
}

/* ===== TOPBAR ===== */
.fi-topbar > nav {
    height: auto !important;
    padding: 12px 22px !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
    --tw-shadow: none !important;
    border-bottom: 1px solid #e0d8cc !important;
    background-color: #ffffff !important;
    /* Ocupar a largura toda do topbar para o botão "+ Novo evento"
       alinhar à direita, ao nível das colunas do conteúdo */
    flex: 1 1 auto !important;
    width: 100% !important;
}

.fi-user-menu {
    display: none !important;
}

.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    display: none !important;
}

/* ===== FONTES ===== */
/* Escala raiz: Filament/Tailwind usam rem — subir o root aumenta o texto
   nativo (Eventos/Fornecedores, formulários, tabelas) ~+2px proporcional.
   :root (0,1,0) e "html body" (0,0,2) vencem o "html, body" do tema custom
   do Filament (app.css) mesmo carregando antes. */
:root {
    font-size: 18px !important;
}
html body,
html body.fi-body {
    font-family: 'Lato', sans-serif !important;
    font-size: 13px !important;
}

/* ===== DASHBOARD — widgets sem linha de cabeçalho de coluna ("EVENTO") =====
   Aplica-se SÓ ao dashboard; as tabelas de Eventos/Fornecedores mantêm cabeçalho. */
.fi-dashboard-page thead,
.fi-dashboard-page .fi-ta-header-cell {
    display: none !important;
}

/* Títulos dos widgets do dashboard em maiúsculas (como TOP FORNECEDORES) */
.fi-dashboard-page .fi-section-header-heading,
.fi-dashboard-page .fi-widget-heading,
.fi-dashboard-page h3 {
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: #876a42 !important;
}

/* ===== FIX -webkit-text-fill-color =====
   html/body herdam -webkit-text-fill-color:#1a1a1a, o que torna o texto
   escuro em botões dourados mesmo com color:#fff. Forçar a seguir o color. */
button, a, input, textarea, select, .fi-btn, .obtn {
    -webkit-text-fill-color: currentColor !important;
}

/* ===== SIDEBAR ===== */
.fi-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 175px !important;
    background-color: #ffffff !important;
    border-right: 1px solid #e0d8cc !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 30 !important;
    overflow: hidden !important;
    /* Filament aplica -translate-x-full em mobile/tablet (<1024px) que
       empurra a sidebar para fora do ecrã. Como o hambúrguer está oculto,
       anulamos o transform para a sidebar estar SEMPRE visível. */
    transform: none !important;
    visibility: visible !important;
}

/* Garantir conteúdo afastado da sidebar em qualquer largura (tablet incl.) */
.fi-layout .fi-main-ctn {
    margin-left: 175px !important;
}

/* Overlay escuro que o Filament mostra ao abrir a sidebar em mobile —
   nunca é preciso porque a sidebar está sempre visível */
.fi-sidebar-close-overlay {
    display: none !important;
}

/* Ocultar cabeçalho nativo do Filament */
.fi-sidebar-header {
    display: none !important;
}

.fi-sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.fi-sidebar .fi-sidebar-item-button {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #777 !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 9px 14px !important;
}

.fi-sidebar-item-button:hover {
    color: #1a1a1a !important;
    background-color: #faf8f4 !important;
}

.fi-sidebar-item-button[aria-current],
.fi-sidebar-item-button.fi-active {
    color: #1a1a1a !important;
    border-left-color: #876a42 !important;
    background-color: #faf8f4 !important;
}

/* Sidebar footer nativo — ocultar */
.fi-sidebar-footer {
    display: none !important;
}

/* ===== SIDEBAR FOOTER LOGOUT ===== */
.hb-sidebar-foot {
    padding: 12px 14px;
    border-top: 1px solid #e0d8cc;
    flex-shrink: 0;
    background: #ffffff;
}

.hb-ni-out {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 0;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    font-family: 'Lato', sans-serif;
    transition: color .15s;
}

.hb-ni-out:hover {
    color: #c0392b !important;
}

/* ===== CARDS / SECTIONS ===== */
.fi-section-content-ctn,
.fi-wi-table .fi-section,
.fi-ta-ctn {
    background-color: #ffffff !important;
    border: 1px solid #e0d8cc !important;
    border-radius: 6px !important;
}

.fi-section-header {
    overflow: visible !important;
}
.fi-section-heading {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
}

.fi-section-header-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #876a42 !important;
}

/* ===== BOTÕES PRIMARY ===== */
.fi-btn-color-primary {
    background-color: #876a42 !important;
    border-color: #876a42 !important;
    color: #ffffff !important;
}

.fi-btn-color-primary:hover {
    opacity: 0.85 !important;
}

/* ===== BOTÕES GRAY ===== */
.fi-btn-color-gray {
    background-color: #ffffff !important;
    border: 1px solid #876a42 !important;
    color: #876a42 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.fi-btn-color-gray:hover {
    background-color: #876a42 !important;
    color: #ffffff !important;
}

/* ===== BADGES ===== */
.fi-badge-color-success {
    background-color: #eaf3de !important;
    color: #3b6d11 !important;
    border: 1px solid #c0dd97 !important;
}

.fi-badge-color-warning {
    background-color: #fdf3e4 !important;
    color: #876a42 !important;
    border: 1px solid #e8d5b0 !important;
}

.fi-badge-color-danger {
    background-color: #fde8e8 !important;
    color: #c0392b !important;
    border: 1px solid #f5c6c6 !important;
}

/* ===== PAGE HEADER nativo — mostrar título/subtitle ===== */
.fi-page-header {
    padding: 16px 22px 8px !important;
    background: transparent !important;
    border: none !important;
}
.fi-header-heading {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    line-height: 1.1 !important;
}
.fi-header-subheading {
    font-size: 12px !important;
    color: #aaa !important;
    margin-top: 2px !important;
}

/* ===== LOGIN ===== */
.fi-simple-layout {
    background-color: #f5f0e8 !important;
}

.fi-simple-main {
    background-color: #ffffff !important;
    border: 1px solid #e0d8cc !important;
    border-radius: 6px !important;
}

/* ===== RESPONSIVO — TABLET / MOBILE (≤900px) =====
   Em ecrãs estreitos a sidebar fixa de 175px esmaga o conteúdo.
   Passa a barra para o topo (estática, largura total) e o conteúdo
   ocupa 100% por baixo. Acima de 900px mantém o layout desktop. */
@media (max-width: 900px) {
    /* Empilhar em coluna: sidebar no topo, conteúdo por baixo.
       body .fi-layout (0,1,1) vence o flex-row-reverse do Tailwind. */
    body .fi-layout {
        flex-direction: column-reverse !important;
    }

    /* Especificidade alta (.fi-layout ...) para vencer o Tailwind
       !important do app.css do Filament que carrega depois. */
    .fi-layout .fi-sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e0d8cc !important;
        overflow: visible !important;
        transform: none !important;
        inset: auto !important;
        z-index: auto !important;
    }

    /* NAV: barra horizontal compacta com scroll lateral */
    .fi-layout .fi-sidebar .fi-sidebar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 8px !important;
    }

    /* Cabeçalho de perfil: só o logo HB compacto (esconder nome/email) */
    .fi-layout .fi-sidebar .hb-sb-header {
        padding: 6px 8px !important;
        border-bottom: none !important;
        border-right: 1px solid #e0d8cc !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .fi-layout .fi-sidebar .hb-sb-header > div:not(:first-child) {
        display: none !important;
    }
    .fi-layout .fi-sidebar .hb-sb-header > div:first-child {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 0 !important;
        font-size: 11px !important;
    }

    /* Grupo de itens em linha */
    .fi-layout .fi-sidebar .fi-sidebar-nav-groups,
    .fi-layout .fi-sidebar .fi-sidebar-group,
    .fi-layout .fi-sidebar ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .fi-layout .fi-sidebar .fi-sidebar-item,
    .fi-layout .fi-sidebar .fi-sidebar-item-button {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .fi-layout .fi-sidebar .fi-sidebar-item-button {
        border-left: none !important;
        border-bottom: 2px solid transparent !important;
        white-space: nowrap !important;
        padding: 14px 10px !important;
    }

    .fi-layout .fi-sidebar .fi-sidebar-item-button[aria-current],
    .fi-layout .fi-sidebar .fi-sidebar-item-button.fi-active {
        border-left-color: transparent !important;
        border-bottom-color: #876a42 !important;
    }

    /* Logout compacto no fim da barra */
    .fi-layout .hb-sidebar-foot {
        display: flex !important;
        align-items: center !important;
        padding: 0 8px !important;
        border-top: none !important;
        border-left: 1px solid #e0d8cc !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    .fi-layout .hb-sidebar-foot .hb-ni-out {
        padding: 8px 6px !important;
    }
    .fi-layout .hb-sidebar-foot .hb-out-txt {
        display: none !important; /* mobile: só o ícone de logout */
    }
    .fi-layout .hb-sidebar-foot .hb-out-ico {
        font-size: 18px !important;
    }

    /* Conteúdo ocupa toda a largura — sem margem da sidebar */
    .fi-layout .fi-main-ctn,
    body .fi-main-ctn {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .fi-layout .fi-main-ctn .fi-main {
        padding: 14px 16px !important;
    }

    .fi-layout .fi-topbar > nav {
        padding: 10px 16px !important;
    }

    /* Tabelas com scroll horizontal em vez de esmagar */
    .fi-layout .fi-ta-table-container {
        overflow-x: auto !important;
    }
}

/* ===== DARK MODE OFF ===== */
@media (prefers-color-scheme: dark) {
    body, .fi-body, .fi-sidebar, .fi-main-ctn,
    .fi-section-content-ctn, .fi-ta-ctn, .fi-input,
    .fi-simple-layout, .fi-simple-main {
        color-scheme: light !important;
    }
}