/* Ícone de vídeo tutorial (como lançar no e-SUS) nos cards de indicador */
.video-indicador-icone {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 6;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.video-indicador-icone:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    transform: scale(1.08);
}

/* Ícone de ajuda (nota metodológica) dos cards de indicador. Fica no canto inferior direito e
   só abre o popover no hover, já que o texto da nota é grande demais para o card inteiro. */
.indicador-ajuda-icone {
    position: absolute;
    bottom: 16px;
    right: 10px;
    z-index: 7;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: help;
    transition: background 0.15s ease, transform 0.15s ease;
}

.indicador-ajuda-icone:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    transform: scale(1.08);
}

/* quando o card também tem o ícone de vídeo (8px da borda + 30px de largura), a ajuda fica ao lado dele */
.indicador-ajuda-icone.com-video {
    right: 51px;
}

.small-box {
    position: relative;
    display: block;
    margin: 0 0 20px;
    padding: 0px;
    border-radius: 0.25rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    --bs-link-color-rgb: none;
    --bs-link-hover-color-rgb: none;
    --bs-heading-color: none;
}

.small-box>.inner {
    padding: 10px;
    color: white;
}

/* Quando o card tem ícone de vídeo, empurra o conteúdo para não ficar por baixo do ícone */
.small-box.tem-video-icone>.inner {
    padding-left: 40px;
}

.small-box>.small-box-footer {
    position: relative;
    z-index: 10;
    display: block;
    padding: 3px 0;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.07);
}

.small-box>.small-box-footer:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.small-box h3 {
    font-size: 2.2rem;
    padding: 0;
    margin: 0 0 10px;
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 992px) {

    .col-xl-2 .small-box h3,
    .col-lg-2 .small-box h3,
    .col-md-2 .small-box h3,
    .col-xl-3 .small-box h3,
    .col-lg-3 .small-box h3,
    .col-md-3 .small-box h3 {
        font-size: 1.6rem;
    }
}

@media (min-width: 1200px) {

    .col-xl-2 .small-box h3,
    .col-lg-2 .small-box h3,
    .col-md-2 .small-box h3,
    .col-xl-3 .small-box h3,
    .col-lg-3 .small-box h3,
    .col-md-3 .small-box h3 {
        font-size: 2.2rem;
    }
}

.small-box p {
    font-size: 1rem;
}

.small-box p>small {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    color: #f8f9fa;
}

.small-box h3,
.small-box p {
    z-index: 5;
}

.small-box .small-box-icon {
    position: absolute;
    top: 0px;
    right: 15px;
    z-index: 0;
    height: 70px;
    font-size: 70px;
    color: rgba(0, 0, 0, 0.15);
    transition: transform 0.3s linear;
}

.small-box:hover .small-box-icon {
    transform: scale(1.1);
}

.bg-gradient-success {
    background: linear-gradient(280deg, #13e343, #0b7623) !important;
}

.bg-gradient-info {
    background: linear-gradient(280deg, #16d1ef, #026781) !important;
}

.bg-gradient-purple {
    background: linear-gradient(280deg, #c426de, #54006e) !important;
}

.bg-gradient-danger {
    background: linear-gradient(280deg, #ff0018, #760a1e) !important;
}

.bg-gradient-warning {
    background: linear-gradient(294deg, #ffc821, #7b5b00) !important;
}

@media (max-width: 576px) {
    .small-box {
        text-align: center;
    }

    .small-box .small-box-icon {
        display: none;
    }

    .small-box p {
        font-size: 18px;
    }
}

.sun-and-moon> :is(.moon, .sun, .sun-beams) {
    transform-origin: center;
}

.sun-and-moon> :is(.moon, .sun) {
    fill: var(--icon-fill, currentColor);
}

.sun-and-moon>.sun-beams {
    stroke: var(--icon-fill, currentColor);
    stroke-width: 2px;
}

/* Global Footer Theme */
.global-theme-wrapper[data-bs-theme="dark"] .sun-and-moon>.sun {
    transform: scale(1.75);
}

.global-theme-wrapper[data-bs-theme="dark"] .sun-and-moon>.sun-beams {
    opacity: 0;
}

.global-theme-wrapper[data-bs-theme="dark"] .sun-and-moon>.moon>circle {
    transform: translateX(-7px);
}

/* Menu Theme */
.menu-theme-wrapper[data-menu-theme="dark"] .sun-and-moon>.sun {
    transform: scale(1.75);
}

.menu-theme-wrapper[data-menu-theme="dark"] .sun-and-moon>.sun-beams {
    opacity: 0;
}

.menu-theme-wrapper[data-menu-theme="dark"] .sun-and-moon>.moon>circle {
    transform: translateX(-7px);
}

/* Optional transitions */
@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s ease-in-out;
    }

    .sun-and-moon>.sun-beams {
        transition: transform .5s ease-in-out, opacity .5s ease;
    }

    .sun-and-moon .moon>circle {
        transition: transform .25s ease-out;
    }
}


/** Timeline **/

.timeline {
    position: relative;
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
}

.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bs-border-color);
    left: 31px;
    margin: 0;
    border-radius: 2px;
}

.timeline>li {
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px;
}

.timeline>li:before,
.timeline>li:after {
    content: " ";
    display: table;
}

.timeline>li:after {
    clear: both;
}

.timeline>li>.timeline-item {
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    margin-top: 0;
    color: var(--bs-body-color);
    margin-left: 60px;
    margin-right: 15px;
    padding: 0;
    position: relative;
}

.timeline>li>.timeline-item>.time {
    color: var(--bs-secondary-color);
    float: right;
    padding: 10px;
    font-size: 12px;
}

.timeline>li>.timeline-item>.timeline-header {
    margin: 0;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
}

.timeline>li>.timeline-item>.timeline-header>a {
    font-weight: 600;
    color: var(--bs-body-color);
}

.timeline>li>.timeline-item>.timeline-body,
.timeline>li>.timeline-item>.timeline-footer {
    padding: 10px;
}

.timeline>li>.fa,
.timeline>li>.fas,
.timeline>li>.far,
.timeline>li>.ion {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    position: absolute;
    color: #666;
    background: #d2d6de;
    border-radius: 50%;
    text-align: center;
    left: 18px;
    top: 0;
}

.timeline>.time-label>span {
    font-weight: 600;
    padding: 5px;
    display: inline-block;
    background-color: var(--bs-body-bg);
    border-radius: 4px;
}

.timeline-inverse>li>.timeline-item {
    background: #f0f0f0;
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.timeline-inverse>li>.timeline-item>.timeline-header {
    border-bottom-color: #ddd;
}

@media (max-width: 500px) {
    .ls-closed section.content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 700px) {
    .timeline>li>.timeline-item {
        margin-left: 2px !important;
    }

    .timeline-item-left {
        width: 100% !important;
    }

    .timeline-item-right {
        width: 100% !important;
    }

    .fa.fa-arrow-left.bg-amber.line-icon {
        display: none;
    }

    .fa.fa-arrow-right.bg-amber.line-icon {
        display: none;
    }
}

/** Barra de rolagem do TMessage **/
.swal2-html-container {
    max-height: 250px;
    overflow-y: auto;
}

.header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
}

.header-wrapper .brasao {
    max-width: 140px;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-wrapper .titulo-ola {
    font-size: 1.8rem;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.suporte {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    border-radius: 12px;
    /* O arredondamento dos cantos */
    padding: 8px 16px;
    /* Espaço interno para não ficar apertado */
}

[data-bs-theme=light] .suporte {
    background-color: #e9ecef;
    color: #2b2b2b;
    border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .suporte {
    color: #e1e1e1;
    background-color: #1c1f23;
    border-color: var(--bs-border-color);
}

/* ============================================================
   Ícone SVG customizado no menu lateral (ex.: RNDS/RIRA)
   Como o <icon> aponta para um arquivo, o Adianti renderiza um
   <img> que NÃO herda o color do menu (ao contrário dos <i class="fa">).
   Aqui dimensionamos igual ao fa-fw e recolorimos via filter para
   acompanhar o tema (claro/escuro) e os estados hover/ativo.
   ============================================================ */
#sidebar a.sidebar-link>img {
    width: 1.25em;
    /* mesma largura do fa-fw */
    height: 1em;
    object-fit: contain;
    vertical-align: -0.125em;
}

/* Cor "normal" por tema (preto -> cinza via invert) */
[data-menu-theme=light] #sidebar a.sidebar-link>img {
    filter: invert(34%);
    /* ~#565656, casa com o color #555 */
}

[data-menu-theme=dark] #sidebar a.sidebar-link>img {
    filter: invert(80%);
    /* ~#cccccc, casa com o color #c2c7d0 */
}

/* Estado ativo: fundo colorido + texto branco -> ícone branco */
#sidebar a.sidebar-link.active>img {
    filter: brightness(0) invert(1);
}

/* Hover / expandido acompanham a cor do texto de cada tema */
[data-menu-theme=light] #sidebar a.sidebar-link:hover>img {
    filter: brightness(0);
    /* preto */
}

[data-menu-theme=light] #sidebar a.sidebar-link[aria-expanded=true]>img {
    filter: brightness(0);
    /* preto */
}

[data-menu-theme=dark] #sidebar a.sidebar-link:hover>img,
[data-menu-theme=dark] #sidebar a.sidebar-link[aria-expanded=true]>img {
    filter: brightness(0) invert(1);
    /* branco */
}

/* ===================================================================================
   Ajustes que antes eram feitos direto no theme.css (gerado a partir de css/*.css e
   sobrescrito a cada atualização do Adianti). Mantidos aqui na atualização 8.1 -> 8.7.
   =================================================================================== */

/* largura do menu lateral: o 8.7 passou o padrão para 340px; mantém o tamanho de antes */
:root {
    --ad-menu-size: 300px;
}

.btn-outline-default {
    width: 100%;
}

/* "X" de limpar do select2 como ícone; altura presa à da linha de texto (line-height 1.5):
   padding vertical/ícone maiores esticavam o campo ao aparecer o X */
.select2-selection__clear {
    font-size: 0;
    padding: 0 8px;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    transition: color 0.15s ease;
}
.select2-selection__clear::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f057";
    font-size: 15px;
    line-height: 1;
}
.select2-selection__clear:hover {
    color: #e74c3c;
}

/* cabeçalho dos separadores do menu (<separator> no menu.xml): caixa alta e cor conforme o tema do menu */
.sidebar-header {
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

[data-menu-theme=dark] .sidebar-header {
    color: #e9ecef;
}

[data-menu-theme=light] .sidebar-header {
    color: #8a94a6;
}

/* telas de um submenu de 3º nível (ex.: grupos do Gerenciamento APS): faixa azul à esquerda e
   fundo tingido, para separar o grupo aberto do título do próximo grupo.
   A classe é level-2 (não level-3): o TMenu copia as propriedades do pai para o filho e desloca o número */
#sidebar ul.sidebar-dropdown.level-2 {
    margin: 0 10px 6px 12px;
    padding: 4px 0 4px 4px;
    border-left: 3px solid var(--ad-menu-item-color);
    border-radius: 0 8px 8px 0;
}

[data-menu-theme=dark] #sidebar ul.sidebar-dropdown.level-2 {
    background: rgba(83, 143, 236, .10);
}

[data-menu-theme=light] #sidebar ul.sidebar-dropdown.level-2 {
    background: rgba(83, 143, 236, .07);
}

#sidebar ul.sidebar-dropdown.level-2 a.sidebar-link {
    font-size: .9rem;
    margin-right: 6px;
    margin-bottom: 2px;
}

/* ===== Notificações (sininho, SystemNotificationList, SystemNotificationDropdown) ===== */
#envelope_notifications {
    width: min(420px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 0;
}
#envelope_notifications > li {
    list-style: none;
}
.app-notif-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
.app-notif-dropdown-title {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}
.app-notif-dropdown-footer {
    position: sticky;
    bottom: 0;
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}
.app-notif-dropdown-footer:hover {
    background: var(--bs-tertiary-bg);
}
.app-notif-link {
    font-size: .8rem;
    text-decoration: none;
    white-space: nowrap;
}
.app-notif-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px 12px;
}
.app-notif-toolbar .badge {
    margin-left: 4px;
}
.app-notif-list {
    display: flex;
    flex-direction: column;
}
.app-notif-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 30px 12px 14px;
    color: var(--bs-body-color);
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color);
}
.app-notif-item:last-child {
    border-bottom: 0;
}
.app-notif-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.app-notif-item.is-pending {
    background: var(--bs-primary-bg-subtle);
}
.app-notif-item.is-pending:hover {
    background: var(--bs-secondary-bg);
}
.app-notif-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 15px;
}
.app-notif-item.is-pending .app-notif-icon {
    background: var(--bs-body-bg);
    color: var(--bs-primary);
}
.app-notif-body {
    flex: 1;
    min-width: 0;
}
.app-notif-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.app-notif-subject {
    font-size: .9rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-notif-item.is-pending .app-notif-subject {
    font-weight: 600;
}
.app-notif-time {
    flex: none;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.app-notif-preview {
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-notif-dot {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--bs-primary);
}
.app-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--bs-secondary-color);
    font-size: .9rem;
    text-align: center;
}
.app-notif-empty i {
    font-size: 1.8rem;
    opacity: .5;
}