/* ============================================================
   CatalogSync — Identidade Visual v2
   Paleta: Roxo/Violeta + Minimalista + Light Mode
   Seletores reforçados para sobrescrever AdminLTE v4
   ============================================================ */

/* ---- TOKENS ---- */
:root {
    --cs-900: #1a1040;
    --cs-800: #26215C;
    --cs-700: #3C3489;
    --cs-600: #534AB7;
    --cs-500: #6B61CC;
    --cs-400: #7F77DD;
    --cs-300: #AFA9EC;
    --cs-200: #CECBF6;
    --cs-100: #E8E6FD;
    --cs-50: #F4F3FE;
    --cs-accent: #5DCAA5;
    --cs-accent-dark: #0F6E56;
    --cs-surface: #ffffff;
    --cs-bg: #F7F7FB;
    --cs-border: #E8E6FD;
    --cs-border-soft: #F0EFFE;
    --cs-text: #1a1040;
    --cs-text-muted: #6B7280;
    --cs-text-hint: #9CA3AF;
    --cs-radius-sm: 6px;
    --cs-radius-md: 10px;
    --cs-radius-lg: 14px;
    --cs-radius-xl: 20px;
}

/* ============================================================
   BODY + LAYOUT GERAL
   ============================================================ */
body,
body.layout-fixed,
body.sidebar-mini {
    background-color: var(--cs-bg) !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: var(--cs-text) !important;
}

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.app-header,
.app-header.navbar,
.navbar.navbar-expand,
nav.app-header {
    background-color: var(--cs-900) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) !important;
}

    .app-header .navbar-nav .nav-link,
    .app-header .nav-link {
        color: var(--cs-300) !important;
    }

        .app-header .navbar-nav .nav-link:hover,
        .app-header .nav-link:hover {
            color: #fff !important;
            background: rgba(255,255,255,.08) !important;
            border-radius: var(--cs-radius-sm) !important;
        }

        .app-header .navbar-nav .nav-link i,
        .app-header .nav-link i {
            color: var(--cs-300) !important;
        }

/* ============================================================
   SIDEBAR — fundo e estrutura
   ============================================================ */
.app-sidebar,
.sidebar,
aside.app-sidebar {
    background-color: var(--cs-surface) !important;
    border-right: 1px solid var(--cs-border) !important;
    box-shadow: none !important;
    --bs-sidebar-bg: var(--cs-surface) !important;
}

    /* ---- Brand / Logo ---- */
    .app-sidebar .sidebar-brand,
    .sidebar-brand {
        background-color: var(--cs-900) !important;
        border-bottom: none !important;
    }

        .app-sidebar .sidebar-brand a,
        .sidebar-brand a,
        .brand-link {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            text-decoration: none !important;
            color: #fff !important;
        }

        .brand-text,
        .sidebar-brand .brand-text {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: #fff !important;
            letter-spacing: -.3px !important;
        }

            .brand-text::after {
                content: 'Sync';
                font-weight: 300;
                color: var(--cs-300);
            }

    /* ---- Seções / Labels do menu ---- */
    .app-sidebar .nav-header,
    .sidebar .nav-header,
    .nav-sidebar .nav-header {
        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: .1em !important;
        color: var(--cs-300) !important;
        padding: 16px 16px 4px !important;
        font-weight: 600 !important;
        background: transparent !important;
    }

    /* ---- Links do menu — seletor amplo para pegar todas variações do AdminLTE ---- */
    .app-sidebar .nav-sidebar .nav-link,
    .sidebar .nav-sidebar .nav-link,
    .nav-sidebar > .nav-item > .nav-link,
    .nav-sidebar .nav-item .nav-link {
        color: var(--cs-text-muted) !important;
        border-radius: var(--cs-radius-md) !important;
        margin: 2px 8px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        transition: all .15s !important;
        background-color: transparent !important;
    }

        /* Texto dentro dos links */
        .nav-sidebar .nav-link p,
        .nav-sidebar .nav-item .nav-link p {
            color: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            margin: 0 !important;
        }

        /* ---- Ícones do menu ---- */
        .app-sidebar .nav-sidebar .nav-link .nav-icon,
        .sidebar .nav-sidebar .nav-link .nav-icon,
        .nav-sidebar .nav-link .nav-icon,
        .nav-sidebar .nav-item .nav-link i.nav-icon,
        .nav-sidebar .nav-item .nav-link .bi {
            color: var(--cs-300) !important;
            width: 20px !important;
            margin-right: 8px !important;
            font-size: 15px !important;
            transition: color .15s !important;
            min-width: 20px !important;
        }

        /* ---- Hover ---- */
        .app-sidebar .nav-sidebar .nav-link:hover,
        .sidebar .nav-sidebar .nav-link:hover,
        .nav-sidebar .nav-item .nav-link:hover {
            background-color: var(--cs-50) !important;
            color: var(--cs-700) !important;
        }

            .app-sidebar .nav-sidebar .nav-link:hover .nav-icon,
            .nav-sidebar .nav-item .nav-link:hover .nav-icon,
            .nav-sidebar .nav-item .nav-link:hover .bi {
                color: var(--cs-600) !important;
            }

        /* ---- Ativo ---- */
        .app-sidebar .nav-sidebar .nav-link.active,
        .sidebar .nav-sidebar .nav-link.active,
        .nav-sidebar .nav-item .nav-link.active {
            background-color: var(--cs-100) !important;
            color: var(--cs-700) !important;
            font-weight: 600 !important;
            position: relative;
        }

            /* Barra vertical roxa indicando item ativo (top-level apenas) */
            .app-sidebar .sidebar-menu .nav-link.active::before,
            .app-sidebar .nav-sidebar .nav-link.active::before {
                content: '';
                position: absolute;
                left: -8px;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 60%;
                background: var(--cs-600);
                border-radius: 0 3px 3px 0;
            }

            /* Treeview (filhos) não recebem a barra — manter hierarquia limpa */
            .nav-treeview .nav-link.active::before {
                display: none !important;
            }

            .app-sidebar .nav-sidebar .nav-link.active .nav-icon,
            .nav-sidebar .nav-item .nav-link.active .nav-icon,
            .nav-sidebar .nav-item .nav-link.active .bi {
                color: var(--cs-600) !important;
            }

/* ---- Seta treeview ---- */
.nav-sidebar .nav-link .nav-arrow,
.nav-sidebar .nav-link p > .nav-arrow {
    color: var(--cs-300) !important;
}

/* ---- Submenu ---- */
.nav-sidebar .nav-treeview .nav-link {
    padding-left: 2.8rem !important;
    font-size: 12.5px !important;
    color: var(--cs-text-muted) !important;
    margin: 1px 8px !important;
    border-radius: var(--cs-radius-md) !important;
}

    .nav-sidebar .nav-treeview .nav-link:hover {
        background-color: var(--cs-50) !important;
        color: var(--cs-700) !important;
    }

    .nav-sidebar .nav-treeview .nav-link.active {
        background-color: var(--cs-100) !important;
        color: var(--cs-700) !important;
        font-weight: 500 !important;
    }

/* ============================================================
   ÁREA DE CONTEÚDO PRINCIPAL
   ============================================================ */
.app-main,
main.app-main {
    background-color: var(--cs-bg) !important;
}

.app-content-header,
.content-header {
    background: var(--cs-surface) !important;
    border-bottom: 1px solid var(--cs-border) !important;
    padding: 16px 24px !important;
    margin-bottom: 0 !important;
}

    .app-content-header h3,
    .content-header h1,
    .content-header h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--cs-900) !important;
        letter-spacing: -.3px !important;
        margin: 0 !important;
    }

/* Espaçamento do conteúdo — afasta do header do título */
.app-content,
.content {
    padding: 24px !important;
}

.breadcrumb {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item a {
    color: var(--cs-400) !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.breadcrumb-item.active {
    color: var(--cs-text-muted) !important;
    font-size: 12px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--cs-300) !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-lg) !important;
    box-shadow: none !important;
    background: var(--cs-surface) !important;
    margin-bottom: 16px !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cs-border) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cs-900) !important;
    padding: 14px 18px !important;
}

.card-body {
    padding: 18px !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--cs-border) !important;
    padding: 12px 18px !important;
}

/* Cards de métricas do AdminLTE */
.small-box {
    border-radius: var(--cs-radius-lg) !important;
    box-shadow: none !important;
    border: 1px solid var(--cs-border) !important;
    overflow: hidden !important;
}

    .small-box .inner h3 {
        color: var(--cs-900) !important;
    }

    .small-box .inner p {
        color: var(--cs-text-muted) !important;
    }

/* ============================================================
   BOTÕES — border-radius UNIFORME em todos
   ============================================================ */
.btn {
    border-radius: var(--cs-radius-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all .15s !important;
    box-shadow: none !important;
}

    .btn:focus,
    .btn:active {
        box-shadow: none !important;
        outline: none !important;
    }

.btn-sm {
    border-radius: var(--cs-radius-md) !important;
    font-size: 12px !important;
}

.btn-lg {
    border-radius: var(--cs-radius-md) !important;
}

.btn-primary {
    background-color: var(--cs-600) !important;
    border-color: var(--cs-600) !important;
    color: #fff !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--cs-700) !important;
        border-color: var(--cs-700) !important;
        color: #fff !important;
    }

.btn-outline-primary {
    color: var(--cs-600) !important;
    border-color: var(--cs-600) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--cs-600) !important;
        color: #fff !important;
    }

    .btn-check:checked + .btn-outline-primary,
    .btn-outline-primary.active,
    .btn-outline-primary:active {
        background-color: var(--cs-600) !important;
        border-color: var(--cs-600) !important;
        color: #fff !important;
    }

.btn-outline-secondary {
    color: #6c757d !important;
    border-color: #dee2e6 !important;
}

    .btn-outline-secondary:hover {
        background-color: #f8f9fa !important;
        color: #495057 !important;
        border-color: #dee2e6 !important;
    }

.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}

    .btn-success:hover {
        background-color: #157347 !important;
        border-color: #157347 !important;
    }

.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

    .btn-danger:hover {
        background-color: #bb2d3b !important;
    }

.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}

.btn-info {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #000 !important;
}

.btn-outline-success {
    color: #198754 !important;
    border-color: #198754 !important;
}

    .btn-outline-success:hover {
        background-color: #198754 !important;
        color: #fff !important;
    }

.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

    .btn-outline-danger:hover {
        background-color: #dc3545 !important;
        color: #fff !important;
    }

.btn-outline-warning {
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

    .btn-outline-warning:hover {
        background-color: #f59e0b !important;
        color: #fff !important;
    }

.btn-outline-info {
    color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

    .btn-outline-info:hover {
        background-color: #0dcaf0 !important;
        color: #000 !important;
    }

/* ============================================================
   TABELAS
   ============================================================ */
.table thead th {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--cs-text-hint) !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--cs-border) !important;
    padding: 10px 12px !important;
    background: transparent !important;
    white-space: nowrap !important;
}

.table tbody td {
    font-size: 13px !important;
    color: var(--cs-text) !important;
    border-bottom: 1px solid var(--cs-border-soft) !important;
    vertical-align: middle !important;
    padding: 10px 12px !important;
}

.table-hover tbody tr:hover > td {
    background-color: var(--cs-50) !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
}

    .badge.bg-primary {
        background-color: var(--cs-600) !important;
        color: #fff !important;
    }

    .badge.bg-success-subtle {
        background-color: #d1fae5 !important;
        color: #065f46 !important;
    }

    .badge.bg-warning-subtle {
        background-color: #fef3c7 !important;
        color: #92400e !important;
    }

    .badge.bg-danger-subtle {
        background-color: #fee2e2 !important;
        color: #991b1b !important;
    }

    .badge.bg-info-subtle {
        background-color: var(--cs-100) !important;
        color: var(--cs-700) !important;
    }

    .badge.bg-secondary-subtle {
        background-color: #f3f4f6 !important;
        color: #6b7280 !important;
    }

/* Badge de contagem do sino de notificações no topbar — pequeno e alinhado ao canto do ícone */
#notifBadge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    min-width: 16px !important;
    line-height: 1 !important;
    top: 4px !important;
    right: 2px !important;
    border: 2px solid var(--cs-900);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-md) !important;
    font-size: 13px !important;
    color: var(--cs-text) !important;
    background-color: var(--cs-surface) !important;
    padding: 7px 12px !important;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--cs-400) !important;
        box-shadow: 0 0 0 3px rgba(127,119,221,.15) !important;
    }

.form-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--cs-text) !important;
    margin-bottom: 5px !important;
}

.form-check-input:checked {
    background-color: var(--cs-600) !important;
    border-color: var(--cs-600) !important;
}

.input-group-text {
    border-color: var(--cs-border) !important;
    background: var(--cs-50) !important;
    font-size: 13px !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    border-radius: var(--cs-radius-md) !important;
    font-size: 13px !important;
    border: none !important;
    padding: 12px 16px !important;
}

.alert-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.alert-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.alert-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.alert-info {
    background: var(--cs-100) !important;
    color: var(--cs-700) !important;
}

/* ============================================================
   PROGRESS
   ============================================================ */
.progress {
    border-radius: 4px !important;
    background-color: var(--cs-100) !important;
    height: 5px !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--cs-500), var(--cs-accent)) !important;
}

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.pagination .page-link {
    border-radius: var(--cs-radius-sm) !important;
    border-color: var(--cs-border) !important;
    color: var(--cs-600) !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    background: var(--cs-surface) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--cs-600) !important;
    border-color: var(--cs-600) !important;
    color: #fff !important;
}

.pagination .page-link:hover {
    background-color: var(--cs-50) !important;
    color: var(--cs-700) !important;
}

.pagination .page-item.disabled .page-link {
    color: var(--cs-300) !important;
    background: transparent !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer, footer.app-footer {
    background: var(--cs-surface) !important;
    border-top: 1px solid var(--cs-border) !important;
    font-size: 12px !important;
    color: var(--cs-text-muted) !important;
    padding: 10px 24px !important;
}

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
#loadingOverlay {
    background: rgba(26, 16, 64, .55) !important;
    backdrop-filter: blur(4px) !important;
}

    #loadingOverlay .card {
        border-radius: 20px !important;
        padding: 8px !important;
    }

    #loadingOverlay .spinner-border {
        color: var(--cs-600) !important;
    }

    #loadingOverlay .progress-bar {
        background: linear-gradient(90deg, var(--cs-500), var(--cs-accent)) !important;
    }

/* ============================================================
   MODAL
   ============================================================ */
.modal-content {
    border-radius: var(--cs-radius-lg) !important;
    border: none !important;
    box-shadow: 0 24px 64px rgba(26,16,64,.18) !important;
    overflow: hidden !important;
}

.modal-header {
    background: linear-gradient(135deg, var(--cs-600) 0%, var(--cs-700) 100%) !important;
    color: #fff !important;
    border: none !important;
}

.modal-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.modal-footer {
    border-top: 1px solid var(--cs-border) !important;
    background: transparent !important;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown-menu {
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-md) !important;
    box-shadow: 0 8px 24px rgba(26,16,64,.1) !important;
    font-size: 13px !important;
    padding: 6px !important;
}

.dropdown-item {
    border-radius: var(--cs-radius-sm) !important;
    color: var(--cs-text) !important;
    padding: 7px 12px !important;
}

    .dropdown-item:hover {
        background-color: var(--cs-50) !important;
        color: var(--cs-700) !important;
    }

/* ============================================================
   TOAST
   ============================================================ */
#toastCopiado {
    background: var(--cs-700) !important;
    border-radius: var(--cs-radius-md) !important;
}

/* ============================================================
   SCROLLBAR CUSTOMIZADA
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--cs-50);
}

::-webkit-scrollbar-thumb {
    background: var(--cs-200);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--cs-300);
    }

/* ============================================================
   BTN-GROUP — botões agrupados sem radius nos lados internos
   ============================================================ */
.btn-group > .btn {
    border-radius: 0 !important;
}

    .btn-group > .btn:first-child {
        border-radius: var(--cs-radius-md) 0 0 var(--cs-radius-md) !important;
    }

    .btn-group > .btn:last-child {
        border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0 !important;
    }

/* Botão "Todos" ativo no btn-group do relatório — fundo cinza legível */
.btn-group .btn-outline-secondary.active {
    background-color: #6c757d !important;
    color: #fff !important;
    border-color: #6c757d !important;
}
/* Garante legibilidade no hover também */
.btn-group .btn-outline-secondary:hover {
    background-color: #6c757d !important;
    color: #fff !important;
    border-color: #6c757d !important;
}