/*
 * App theme override — paleta âmbar/preto inspirada no mockup public/html/cliente.html.
 * Carregado depois de core.css/demo.css nos layouts do app.* e painel.*.
 * Sobrescreve apenas variáveis CSS do Vuexy, sem mexer em componentes.
 */

/* ---------- Primary âmbar (light + dark) ---------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: #f59e0b;
    --bs-primary-rgb: 245, 158, 11;
}

[data-bs-theme="light"] {
    --bs-primary-text-emphasis: #7c4a00;
    --bs-primary-bg-subtle: #fef3c7;
    --bs-primary-border-subtle: #fde68a;
    --bs-link-color: #b45309;
    --bs-link-hover-color: #92400e;
    --bs-link-color-rgb: 180, 83, 9;
    --bs-link-hover-color-rgb: 146, 64, 14;
}

/* ---------- Dark: paleta preta do mockup ---------- */
[data-bs-theme="dark"] {
    /* Fundos */
    --bs-body-bg: #0a0a0a;
    --bs-body-bg-rgb: 10, 10, 10;
    --bs-paper-bg: #111111;
    --bs-paper-bg-rgb: 17, 17, 17;

    /* Texto */
    --bs-body-color: #d0d0d0;
    --bs-body-color-rgb: 208, 208, 208;
    --bs-heading-color: #ffffff;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #6b6b6b;
    --bs-secondary-color-rgb: 107, 107, 107;
    --bs-tertiary-color: #555555;
    --bs-tertiary-color-rgb: 85, 85, 85;
    --bs-base-color: #ffffff;
    --bs-base-color-rgb: 255, 255, 255;

    /* Bordas */
    --bs-border-color: #1e1e1e;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-secondary-bg: #1a1a1a;
    --bs-secondary-bg-rgb: 26, 26, 26;
    --bs-tertiary-bg: #161616;
    --bs-tertiary-bg-rgb: 22, 22, 22;

    /* Primary acentos no dark */
    --bs-primary-text-emphasis: #fcd34d;
    --bs-primary-bg-subtle: #4a2f00;
    --bs-primary-border-subtle: #8a5a10;
    --bs-link-color: #fcd34d;
    --bs-link-hover-color: #fde68a;
    --bs-link-color-rgb: 252, 211, 77;
    --bs-link-hover-color-rgb: 253, 230, 138;

    /* Sidebar / navbar / menu (vars próprias do Vuexy) */
    --bs-menu-bg: #0d0d0d;
    --bs-menu-bg-rgb: 13, 13, 13;
    --bs-menu-color: #888888;
    --bs-menu-color-rgb: 136, 136, 136;
    --bs-menu-hover-bg: rgb(var(--bs-primary-rgb) / 0.06);
    --bs-menu-hover-color: #ffffff;
    --bs-menu-active-bg: rgb(var(--bs-primary-rgb) / 0.12);
    --bs-menu-active-color: var(--bs-primary);
    --bs-menu-active-toggle-bg: rgb(var(--bs-primary-rgb) / 0.08);
    --bs-menu-sub-active-bg: rgb(var(--bs-primary-rgb) / 0.12);
    --bs-menu-sub-active-color: var(--bs-primary);
    --bs-menu-divider-color: #1e1e1e;
    --bs-menu-box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.4);

    --bs-navbar-bg: #0d0d0d;
    --bs-navbar-border-color: #1e1e1e;
    --bs-navbar-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* Card no dark usa override próprio do Vuexy — força pra paper-bg */
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--bs-paper-bg);
}

/* Botão primário: texto preto sobre âmbar pra contraste */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--bs-primary-contrast, #1a1a1a);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--bs-primary-contrast, #1a1a1a);
}

/* ---------- Bottom nav mobile (app.*) ---------- */
.app-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bs-menu-bg, #0d0d0d);
    border-top: 1px solid var(--bs-border-color, #1e1e1e);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}

.app-bottom-nav .bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--bs-menu-color, #888);
    font-size: 11px;
    line-height: 1.1;
    padding: 8px 2px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-bottom-nav .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-bottom-nav .bottom-nav-item i {
    font-size: 22px;
    line-height: 1;
}

.app-bottom-nav .bottom-nav-item:hover,
.app-bottom-nav .bottom-nav-item:focus {
    color: var(--bs-menu-hover-color, #fff);
}

.app-bottom-nav .bottom-nav-item.active {
    color: var(--bs-primary);
}

.app-bottom-nav .bottom-nav-item.active i {
    transform: translateY(-1px);
}

/* ---------- MecIa (assistente IA) ---------- */
.mecia-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: none;
    background: var(--bs-primary);
    color: var(--bs-primary-contrast, #1a1a1a);
    box-shadow: 0 6px 18px rgb(var(--bs-primary-rgb) / 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mecia-fab i {
    font-size: 28px;
    line-height: 1;
}

.mecia-fab:hover,
.mecia-fab:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgb(var(--bs-primary-rgb) / 0.45);
    color: var(--bs-primary-contrast, #1a1a1a);
}

.mecia-fab:active {
    transform: scale(0.96);
}

/* Sobe o FAB acima do bottom-nav no mobile */
@media (max-width: 1199.98px) {
    body.has-bottom-nav .mecia-fab {
        bottom: calc(64px + env(safe-area-inset-bottom) + 1rem);
    }
}

.mecia-offcanvas {
    --bs-offcanvas-width: 400px;
}

.mecia-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.mecia-offcanvas .mecia-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(var(--bs-primary-rgb) / 0.12);
    color: var(--bs-primary);
    margin-top: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mecia-chat {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mecia-bubble {
    max-width: 88%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    line-height: 1.45;
    font-size: 0.92rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.mecia-bubble.is-user {
    align-self: flex-end;
    background: var(--bs-primary);
    color: var(--bs-primary-contrast, #1a1a1a);
    border-bottom-right-radius: 4px;
}

.mecia-bubble.is-assistant {
    align-self: flex-start;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-bottom-left-radius: 4px;
}

.mecia-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    margin: auto 0;
    padding: 1.5rem;
}

.mecia-empty .icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: rgb(var(--bs-primary-rgb) / 0.1);
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.mecia-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--bs-secondary-bg);
    border-radius: 14px;
    align-self: flex-start;
}

.mecia-typing span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bs-secondary-color);
    animation: mecia-blink 1.2s infinite ease-in-out;
}

.mecia-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.mecia-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes mecia-blink {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.mecia-input-wrap {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem;
    background: var(--bs-body-bg);
}

.mecia-input-wrap textarea {
    resize: none;
    min-height: 42px;
    max-height: 120px;
}

/* Reserva espaço pro bottom nav só no mobile (Vuexy xl breakpoint = 1200px) */
@media (max-width: 1199.98px) {
    body.has-bottom-nav .content-wrapper {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* Navbar mobile: flush, full-width, mais compacta — Vuexy default é "detached" com
       margens laterais + margin-top + cantos arredondados, o que parece grande demais
       no mobile e empurra o conteúdo pra longe do topo. */
    .layout-page > .layout-navbar.navbar-detached {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        margin-block: 0 !important;
        border-radius: 0 !important;
        block-size: 3.25rem;
        padding-inline: 1rem;
        padding-block: 0.25rem;
        box-shadow: 0 1px 0 var(--bs-border-color, #1e1e1e);
    }

    .navbar-mobile-title {
        font-size: 1rem;
        color: var(--bs-heading-color, #fff);
    }

    /* Chip "Eu" no header mobile — ícone de usuário + primeiro nome,
       substitui o item do bottom-nav. */
    .navbar-me-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px 6px 10px;
        border-radius: 999px;
        background: rgb(var(--bs-primary-rgb) / 0.1);
        color: var(--bs-primary);
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1;
        text-decoration: none;
        flex-shrink: 0;
        max-width: 50vw;
        border: 1px solid transparent;
        transition: background 0.15s ease, transform 0.1s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .navbar-me-chip i {
        font-size: 18px;
        line-height: 1;
    }

    .navbar-me-chip .navbar-me-name {
        max-width: 9ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-me-chip:hover,
    .navbar-me-chip:focus {
        background: rgb(var(--bs-primary-rgb) / 0.18);
        color: var(--bs-primary);
    }

    .navbar-me-chip:active {
        transform: scale(0.97);
    }

    .navbar-me-chip.active {
        background: var(--bs-primary);
        color: var(--bs-primary-contrast, #1a1a1a);
    }

    .navbar-me-chip.active:hover,
    .navbar-me-chip.active:focus {
        background: var(--bs-primary);
        color: var(--bs-primary-contrast, #1a1a1a);
    }

    /* Conteúdo mais próximo do topo no mobile */
    .content-wrapper .container-xxl.container-p-y {
        padding-block-start: 1rem !important;
        padding-block-end: 1rem !important;
        padding-inline: 1rem;
    }

    /* Footer mais discreto no mobile */
    .content-footer .footer-container {
        padding-block: 1rem !important;
        font-size: 0.8rem;
    }

    /* Cards mais compactos no mobile — Vuexy default é 1.5rem por todos os lados */
    .content-wrapper .card > .card-body {
        padding: 1rem;
    }

    /* Heading da página: menor margem inferior no mobile */
    .content-wrapper h4 {
        font-size: 1.15rem;
    }
}