/* ============================================================================
   Safer Seguros — Identidade da empresa (raiz PJ + colaboradores)
   Complemento fino sobre o Metronic (style.bundle.css). Mesma linguagem
   visual da tela /cadastro: aside em gradiente com auth-bg, cartões brancos,
   componentes nativos. Suporta tema claro e escuro via [data-bs-theme].
   v: 20260902f
   ============================================================================ */

:root {
    --ie-aside-from: #1b2a63;
    --ie-aside-to: #0b1437;
}

/* ---- Skip link (acessibilidade) ---- */
.ie-skip {
    position: fixed;
    left: 1rem;
    top: -6rem;
    z-index: 1090;
    padding: .75rem 1.1rem;
    border-radius: .65rem;
    background: #101d4d;
    color: #fff;
    font-weight: 600;
    transition: top .15s ease;
}
.ie-skip:focus { top: 1rem; }

/* Alvos de toque confortáveis */
.ie-scope .btn,
.ie-scope summary,
.ie-scope .ie-aside a { min-height: 44px; }

/* <details> como cartão expansível (formulário de convite) */
.ie-scope details > summary { list-style: none; cursor: pointer; }
.ie-scope details > summary::-webkit-details-marker { display: none; }
.ie-scope details.card > summary .ki-down { transition: transform .2s ease; }
.ie-scope details.card[open] > summary .ki-down { transform: rotate(180deg); }

/* ============================================================================
   1) SHELL DE AUTENTICAÇÃO  (login raiz, login colaborador, cadastro,
      ativação, recuperação) — espelha o aside fixo do /cadastro
   ============================================================================ */
.ie-auth { min-height: 100vh; }

.ie-aside {
    background-color: var(--ie-aside-to);
    background-image: linear-gradient(160deg, rgba(27, 42, 99, .78), rgba(11, 20, 55, .92)), url(/assets/media/misc/auth-bg.png);
    background-size: cover;
    background-position: center;
}
.ie-aside .ie-steplist { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.ie-aside .ie-steplist li {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: .35rem 0;
    padding: .6rem .25rem;
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
}
.ie-aside .ie-steplist li b {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 700;
}
.ie-aside .ie-steplist li.is-active { color: #fff; }
.ie-aside .ie-steplist li.is-active b { background: #fff; color: var(--ie-aside-to); }
.ie-aside .ie-note {
    margin-top: auto;
    display: flex;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}
.ie-aside .ie-note i { color: #fff; }
.ie-aside .ie-note span { color: rgba(255, 255, 255, .78); font-size: .8rem; line-height: 1.5; }

/* Painel administrativo: replica literalmente o shell visual de /cadastro. */
.ie-app-aside {
    background-color: #0878e8;
    background-image: url(/assets/media/misc/auth-bg.png);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.ie-app-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 4rem;
}
.ie-app-menu::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 23px;
    top: 47px;
    bottom: 47px;
    border-left: 1px dashed rgba(255, 255, 255, .28);
}
.ie-app-menu-item,
.ie-app-exit {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-height: 64px;
    padding: .35rem 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .76);
    text-align: left;
    text-decoration: none;
}
.ie-app-menu-item:hover,
.ie-app-exit:hover { color: #fff; }
.ie-app-menu-item.is-disabled { opacity: .48; cursor: not-allowed; }
.ie-app-menu-index {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, .46);
    border-radius: .65rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}
.ie-app-menu-item.is-active { color: #fff; }
.ie-app-menu-item.is-active .ie-app-menu-index {
    border-color: #50cd89;
    background: #50cd89;
}
.ie-app-menu-item strong,
.ie-app-exit strong {
    display: block;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}
.ie-app-menu-item small,
.ie-app-exit small {
    display: block;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .66);
    font-size: .78rem;
}
.ie-app-company {
    display: grid;
    gap: .2rem;
    color: rgba(255, 255, 255, .7);
}
.ie-app-company span { font-size: .78rem; }
.ie-app-company strong { color: #fff; font-size: 1rem; }
.ie-app-exit { cursor: pointer; }
.ie-app-exit .ie-app-menu-index { font-size: 1.35rem; }

/* Campo OTP grande e centralizado (fluxos server-POST, sem AJAX) */
.ie-otp {
    letter-spacing: .6rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    padding-left: .6rem;
}

/* ============================================================================
   2) SHELL DE APLICAÇÃO  (painel da empresa, equipe, histórico, contexto)
      Barra superior enxuta + container Metronic, sem sidebar pesada.
   ============================================================================ */
.ie-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bs-app-bg-color, #fff);
    border-bottom: 1px solid var(--bs-border-color);
}
[data-bs-theme=dark] .ie-topbar { background: var(--bs-body-bg); }
.ie-topbar .ie-brand img { height: 30px; width: auto; }
.ie-topbar .ie-brand .ie-logo-dark { display: none; }
[data-bs-theme=dark] .ie-topbar .ie-brand .ie-logo-light { display: none; }
[data-bs-theme=dark] .ie-topbar .ie-brand .ie-logo-dark { display: inline-block; }
.ie-topbar .ie-nav a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: .65rem;
    color: var(--bs-gray-700);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.ie-topbar .ie-nav a:hover { background: var(--bs-gray-100); color: var(--bs-gray-900); }
.ie-topbar .ie-nav a.is-active { background: var(--bs-primary); color: #fff; }
.ie-topbar .ie-nav a.is-active:hover { background: var(--bs-primary); color: #fff; }

/* Hero do painel/equipe: mesmo gradiente do aside */
.ie-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.15rem;
    color: #fff;
    background: linear-gradient(120deg, var(--ie-aside-from), #2952d6);
}
.ie-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
}
.ie-hero .ie-hero-ico {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}

/* Linha do tempo do histórico (usa .timeline do Metronic quando presente) */
.ie-history { list-style: none; padding: 0; margin: 0; }
.ie-history li {
    position: relative;
    padding: 0 0 1.6rem 1.6rem;
    border-left: 2px solid var(--bs-border-color);
}
.ie-history li:last-child { border-color: transparent; padding-bottom: 0; }
.ie-history li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: .15rem;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--bs-primary);
    box-shadow: 0 0 0 4px var(--bs-primary-light);
}
.ie-history b { display: block; color: var(--bs-gray-900); }
.ie-history time { display: block; color: var(--bs-gray-500); font-size: .8rem; margin: .1rem 0 .35rem; }
.ie-history p { margin: 0; color: var(--bs-gray-700); font-size: .9rem; }

/* Cartão "gerenciar acesso" que abre sobre o item (JS: <details.member-manage>) */
.member-manage { position: relative; }
.member-manage > summary { list-style: none; cursor: pointer; }
.member-manage > summary::-webkit-details-marker { display: none; }
.member-manage > form {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 20;
    width: min(360px, 82vw);
    padding: 1.1rem;
    display: grid;
    gap: .75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .85rem;
    box-shadow: var(--bs-box-shadow-lg, 0 1rem 2rem rgba(0, 0, 0, .15));
}

/* ---- Responsivo ---- */
@media (max-width: 767.98px) {
    .ie-topbar .ie-nav a span { display: none; }
    .member-manage > form { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; top: auto; width: auto; }
}

@media (min-width: 992px) {
    .ie-app-aside { min-height: 100vh; }
}

@media (max-width: 991.98px) {
    .ie-app-aside { min-height: auto; }
    .ie-app-menu { margin-top: 1rem; }
    .ie-app-company { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}