/*
 * Prospecta+ — camadas sobre o AdminKit (versão gratuita).
 * Aqui ficam os estilos que o AdminKit gratuito não traz (submenu da sidebar,
 * bloco do usuário, layout boxed) e os ajustes de marca.
 */

/* ---------- Layout boxed (data-layout="boxed" no <body>) ---------- */

body[data-layout="boxed"] {
    background: #e4e8ef;
}

body[data-layout="boxed"] .wrapper {
    max-width: 1370px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* a sidebar recolhida desliza para fora do box */
    box-shadow: 0 0 2rem 0 rgba(33, 37, 41, .1);
}

/* ---------- Sidebar: bloco do usuário ---------- */

.sidebar-user {
    padding: 1.25rem 1.5rem;
    color: #e9ecef;
    border-top: 1px solid rgba(233, 236, 239, .08);
    border-bottom: 1px solid rgba(233, 236, 239, .08);
}

.sidebar-user-title {
    display: block;
    color: #f8f9fa;
    font-weight: 600;
}

.sidebar-user-title:hover {
    color: #fff;
    text-decoration: none;
}

.sidebar-user-subtitle {
    font-size: .75rem;
    color: rgba(233, 236, 239, .5);
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .3rem;
    background: #3b7ddd;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

/* ---------- Sidebar: submenu ---------- */

.sidebar-dropdown {
    padding-left: 0;
    background: rgba(0, 0, 0, .1);
}

.sidebar-dropdown .sidebar-link {
    padding: .5rem 1.5rem .5rem 3.5rem;
    background: transparent;
    font-weight: 400;
}

.sidebar-dropdown .sidebar-item.active > .sidebar-link {
    color: #e9ecef;
    background: transparent;
    border-left-color: transparent;
}

.sidebar-link[data-bs-toggle="collapse"]::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    display: inline-block;
    padding: 2px;
    border: solid;
    border-width: 0 .075rem .075rem 0;
    transform: rotate(-45deg);
    transition: transform .2s ease-in-out;
}

.sidebar-link[data-bs-toggle="collapse"]:not(.collapsed)::before {
    transform: rotate(45deg);
}

/* ---------- Cabeçalho de página ---------- */

.page-header {
    margin-bottom: 1rem;
}

/* ---------- Breadcrumbs (o AdminKit gratuito não estiliza) ---------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 1rem;
    list-style: none;
    font-size: .875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 .5rem;
    color: #adb5bd;
}

.breadcrumb-item.active {
    color: #6c757d;
}

/* ---------- Landing page (site/index) ---------- */

body.landing {
    background: #fff;
}

/* Deixa o título de cada seção visível abaixo da navbar fixa ao clicar num link do menu. */
body.landing section[id] {
    scroll-margin-top: 4.5rem;
}

.landing-navbar {
    box-shadow: 0 .125rem .5rem rgba(33, 37, 41, .06);
}

/* O .navbar-brand do AdminKit é claro (pensado p/ navbar escura); aqui o fundo é branco. */
.landing-navbar .navbar-brand {
    color: #212529;
}

.landing-navbar .nav-link {
    font-weight: 500;
    color: #495057;
}

.landing-navbar .nav-link:hover {
    color: #3b7ddd;
}

.hero {
    background: linear-gradient(180deg, #eef3fc 0%, #fff 100%);
}

.how-it-works li {
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.how-it-works li:last-child {
    margin-bottom: 0;
}

.how-it-works-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #3b7ddd;
    color: #fff;
    font-weight: 600;
}

.plan-featured {
    box-shadow: 0 .5rem 1.5rem rgba(59, 125, 221, .15);
}

.cta-band {
    background: #3b7ddd;
}

/* A regra .footer{width:100vw} do AdminKit assume o contexto do .wrapper/.main (com overflow
   hidden); fora dele, na landing, isso pode gerar rolagem horizontal. */
.landing-footer {
    width: 100%;
    background: #f8f9fa;
    padding: 2rem 0;
}

/* ---------- FAQ (accordion) ----------
   O AdminKit gratuito não compila o componente accordion do Bootstrap (só o PRO tem a página
   de demonstração "ui-alerts/offcanvas/..."); o estilo abaixo reproduz o visual padrão. */

.accordion-item {
    background: #fff;
    border: 1px solid #dee2e6;
}

.accordion-item:not(:first-of-type) {
    border-top: 0;
}

.accordion-item:first-of-type {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.accordion-item:last-of-type {
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-weight: 500;
    text-align: left;
    background: #fff;
    border: 0;
    cursor: pointer;
}

.accordion-button:not(.collapsed) {
    color: #3b7ddd;
    background: #eef3fc;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

.accordion-button:focus {
    outline: 0;
}

.accordion-button::after {
    content: "";
    flex-shrink: 0;
    margin-left: auto;
    width: .55rem;
    height: .55rem;
    border: solid #6c757d;
    border-width: 0 .125rem .125rem 0;
    transform: rotate(45deg);
    transition: transform .2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-135deg);
}

.accordion-body {
    padding: 1rem 1.25rem;
}

/* ---------- Alertas (mensagens flash: Yii::$app->session->setFlash / app\widgets\Alert) ----------
   O AdminKit gratuito também não compila o componente .alert do Bootstrap (só a página de
   demonstração "ui-alerts" do PRO usa); sem isso, toda mensagem de sucesso/erro aparecia como
   texto puro, em qualquer tela do sistema. Cores reaproveitam as variáveis que o Bootstrap já
   define em :root (as mesmas usadas pelos badges "bg-success-subtle" etc.). */

.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .375rem;
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 700;
}

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}

.alert-success {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

.alert-danger {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}

.alert-warning {
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

.alert-info {
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
}

/* Pipeline: barra de proporção por etapa (o AdminKit gratuito não traz .progress) */
.pipeline-bar {
    height: .5rem;
    border-radius: .25rem;
    background-color: #e9ecef;
    overflow: hidden;
}

.pipeline-bar-fill {
    height: 100%;
}

/* Mercado: mapa do Brasil por UF (SVG desenhado em views/market/_map.php) */
.market-map {
    position: relative;
}

.market-map svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 26rem;
}

.market-map path {
    stroke: #fff;
    stroke-width: 1;
    cursor: pointer;
    transition: opacity .15s;
}

.market-map path:hover {
    opacity: .8;
}

.market-map path.is-selected {
    stroke: #222e3c;
    stroke-width: 3;
}

.market-map-tooltip {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    padding: .35rem .6rem;
    border-radius: .25rem;
    background: #222e3c;
    color: #fff;
    font-size: .8rem;
    line-height: 1.35;
    white-space: nowrap;
}

.market-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}

.market-map-swatch {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    margin-right: .3rem;
    border-radius: .15rem;
    vertical-align: -.15rem;
}

/* Dashboard: "Primeiros passos" do gestor (views/site/_dashboard_onboarding.php) */
.onboarding-mark {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #e9ecef;
    color: #414f54;
    font-weight: 600;
}

.onboarding-mark.is-done {
    background: #1cbb8c;
    color: #fff;
}

.onboarding-mark svg {
    width: 1rem;
    height: 1rem;
}

.onboarding-next {
    background: #f5f7fb;
}

.onboarding-next .onboarding-mark {
    background: #3b7ddd;
    color: #fff;
}

.onboarding-done strong {
    color: #6c757d;
}