/* ClockIn — pequenos ajustes sobre Tabler (MIT) */
.page-title {
    font-weight: 600;
}

.navbar-vertical .navbar-nav .nav-link.active {
    font-weight: 600;
}

@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-collapse {
        flex: 1 1 auto;
        min-height: 0;
    }

    .navbar-vertical.navbar-expand-lg .navbar-nav {
        flex-grow: 0;
    }
}

.face-enroll-camera {
    position: relative;
}

.face-enroll-camera video {
    position: relative;
    z-index: 1;
    display: block;
}

.face-enroll-camera .face-scan-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.face-enroll-camera.is-analyzing .face-scan-overlay {
    opacity: 1;
}

.face-enroll-camera .face-scan-trail,
.face-enroll-camera .face-scan-beam {
    position: absolute;
    left: 0;
    right: 0;
    will-change: top;
    animation: face-scan-sweep 0.9s ease-in-out infinite;
}

.face-enroll-camera .face-scan-trail {
    height: 28%;
    top: -28%;
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0) 0%,
        rgba(59, 130, 246, 0.14) 55%,
        rgba(59, 130, 246, 0) 100%
    );
}

.face-enroll-camera .face-scan-beam {
    height: 2px;
    top: -2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(96, 165, 250, 0.35) 20%,
        #3b82f6 50%,
        rgba(96, 165, 250, 0.35) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 12px 2px rgba(59, 130, 246, 0.65),
        0 0 28px 6px rgba(59, 130, 246, 0.25);
}

@keyframes face-scan-sweep {
    0% { top: -30%; }
    100% { top: 100%; }
}

.face-enroll-steps .list-group-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-left: 0;
    border-right: 0;
}

.face-enroll-step__icon {
    width: 1.5rem;
    flex-shrink: 0;
    padding-top: 0.1rem;
    color: var(--tblr-secondary);
}

.face-enroll-step--done .face-enroll-step__icon {
    color: var(--tblr-success);
}

.face-enroll-step--active {
    background: rgba(59, 130, 246, 0.08);
}

.face-enroll-step--active .face-enroll-step__icon {
    color: var(--tblr-primary);
}

.face-enroll-step--active .face-enroll-step__icon .ti-loader {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}