/* ===================================================
   DataSocial — Tema Claro e Moderno
   =================================================== */

/* Tooltips: texto justificado, largura confortável */
.tooltip-inner {
    text-align: justify;
    max-width: 260px;
}

/* Cor personalizada para cards KPI */
.bg-violet {
    background-color: #7c3aed !important;
}

:root {
    --ds-accent:       #4f7ef2;
    --ds-accent-soft:  #eef2ff;
    --ds-accent-dark:  #3a63d4;
    --ds-sidebar-bg:   #ffffff;
    --ds-body-bg:      #f4f6fb;
    --ds-text-main:    #1a2233;
    --ds-text-muted:   #7a869a;
    --ds-border:       #e6eaf2;
    --ds-radius:       10px;
    --ds-shadow:       0 2px 12px rgba(79,126,242,0.07);
    --ds-shadow-card:  0 1px 6px rgba(30,40,80,0.07);
    --ds-ease:         0.18s ease;
}

/* ── Body ───────────────────────────────────────── */
body.app {
    background: var(--ds-body-bg) !important;
    color: var(--ds-text-main) !important;
}

/* ── Sidebar ────────────────────────────────────── */
.app-sidebar {
    background: var(--ds-sidebar-bg) !important;
    border-right: 1px solid var(--ds-border) !important;
    box-shadow: 2px 0 16px rgba(79,126,242,0.05) !important;
}

.side-header {
    background: var(--ds-sidebar-bg) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 0 1.1rem !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
}

.side-menu {
    padding: 0.5rem 0.6rem !important;
}

.slide { margin-bottom: 1px !important; }

.side-menu__item {
    display: flex !important;
    align-items: center !important;
    padding: 0.58rem 0.8rem !important;
    border-radius: 8px !important;
    color: var(--ds-text-muted) !important;
    font-size: 0.87rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background var(--ds-ease), color var(--ds-ease) !important;
}
.side-menu__item:hover {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-accent) !important;
}
.side-menu__item:hover .side-menu__icon {
    color: var(--ds-accent) !important;
}
.side-menu__item.active {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-accent) !important;
    font-weight: 600 !important;
}
.side-menu__item.active .side-menu__icon {
    color: var(--ds-accent) !important;
}

.side-menu__icon {
    font-size: 1rem !important;
    width: 20px !important;
    min-width: 20px !important;
    color: #b0bac9 !important;
    margin-right: 0.65rem !important;
    transition: color var(--ds-ease) !important;
}

.side-menu__label { flex: 1; }

.side-menu__item .badge {
    font-size: 0.67rem !important;
    padding: 0.2em 0.5em !important;
    border-radius: 20px !important;
}

.slide-left svg, .slide-right svg { fill: #b0bac9 !important; }

/* ── Header ─────────────────────────────────────── */
.app-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ds-border) !important;
    box-shadow: 0 1px 8px rgba(30,40,80,0.05) !important;
    height: 62px !important;
}

/* Centraliza verticalmente todos os filhos diretos do header */
.app-header .main-container,
.app-header .main-container > .d-flex {
    height: 100% !important;
    align-items: center !important;
}

.app-sidebar__toggle {
    color: #9aa5b5 !important;
    transition: color var(--ds-ease) !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
}
.app-sidebar__toggle:hover { color: var(--ds-accent) !important; }

.theme-layout .fe { color: #9aa5b5 !important; font-size: 1.05rem !important; }

/* ── Cards ──────────────────────────────────────── */
.card {
    border-radius: var(--ds-radius) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: var(--ds-shadow-card) !important;
    background: #fff !important;
    transition: box-shadow var(--ds-ease) !important;
}
.card:hover { box-shadow: 0 4px 18px rgba(79,126,242,0.1) !important; }

.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 0.9rem 1.25rem !important;
}
.card-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--ds-text-main) !important;
}

/* Widgets do dashboard */
.widgets-cards { overflow: hidden !important; }
.widgets-cards.bg-primary { background: linear-gradient(135deg, #4f7ef2 0%, #7ba3f8 100%) !important; box-shadow: 0 4px 16px rgba(79,126,242,0.25) !important; }
.widgets-cards.bg-success  { background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important; box-shadow: 0 4px 16px rgba(16,185,129,0.2) !important; }
.widgets-cards.bg-danger   { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important; box-shadow: 0 4px 16px rgba(239,68,68,0.2) !important; }
.widgets-cards.bg-warning  { background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important; box-shadow: 0 4px 16px rgba(71,85,105,0.25) !important; }
.widgets-cards.bg-indigo   { background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%) !important; box-shadow: 0 4px 16px rgba(99,102,241,0.25) !important; }

/* ── ds-float-field — label flutuante na borda ──── */
.ds-float-field {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    padding: 9px 12px 8px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-float-field:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}
.ds-float-field > .ds-float-label {
    position: absolute;
    top: -9px;
    left: 10px;
    background: #fff;
    padding: 0 4px;
    font-size: .7rem;
    color: #6c757d;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    transition: color .15s ease;
}
.ds-float-field:focus-within > .ds-float-label { color: #0d6efd; }
.ds-float-field input,
.ds-float-field select {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
    padding: 2px 0 0;
    font-size: .875rem;
    color: #212529;
    -webkit-appearance: auto;
    appearance: auto;
}

/* ── Buttons ────────────────────────────────────── */
.btn {
    border-radius: 7px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all var(--ds-ease) !important;
}
.btn-primary {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    box-shadow: 0 2px 8px rgba(79,126,242,0.28) !important;
}
.btn-primary:hover {
    background: var(--ds-accent-dark) !important;
    border-color: var(--ds-accent-dark) !important;
    box-shadow: 0 4px 12px rgba(79,126,242,0.35) !important;
    transform: translateY(-1px) !important;
}
.btn-primary:active { transform: none !important; box-shadow: none !important; }

.btn-success { background: #10b981 !important; border-color: #10b981 !important; }
.btn-success:hover { background: #059669 !important; border-color: #059669 !important; }

.btn-danger { background: #ef4444 !important; border-color: #ef4444 !important; }
.btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; }

.btn-info { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; }
.btn-info:hover { background: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important; }

.btn-outline-primary { border-color: var(--ds-accent) !important; color: var(--ds-accent) !important; }
.btn-outline-primary:hover { background: var(--ds-accent) !important; color: #fff !important; }

.btn-outline-secondary { border-color: var(--ds-border) !important; color: var(--ds-text-muted) !important; }
.btn-outline-secondary:hover { background: var(--ds-body-bg) !important; color: var(--ds-text-main) !important; }

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

.btn-sm { font-size: 0.78rem !important; padding: 0.3rem 0.7rem !important; }

/* ── Btn group ──────────────────────────────────── */
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-radius: 7px 0 0 7px !important; }
.btn-group .btn:last-child  { border-radius: 0 7px 7px 0 !important; }

/* ── Inputs ─────────────────────────────────────── */
.form-control, .form-select {
    border-radius: 7px !important;
    border: 1px solid var(--ds-border) !important;
    font-size: 0.875rem !important;
    color: var(--ds-text-main) !important;
    background: #fff !important;
    transition: border-color var(--ds-ease), box-shadow var(--ds-ease) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px rgba(79,126,242,0.1) !important;
    outline: none !important;
}
.form-control::placeholder { color: #b0bac9 !important; }
.form-label { font-size: 0.83rem !important; font-weight: 600 !important; color: var(--ds-text-muted) !important; }

/* ── Badges ─────────────────────────────────────── */
.badge {
    border-radius: 5px !important;
    font-weight: 600 !important;
}
.badge.bg-warning { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; }
.badge.bg-danger  { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fca5a5 !important; }
.badge.bg-info    { background: #e0f2fe !important; color: #075985 !important; border: 1px solid #bae6fd !important; }
.badge.bg-success { background: #d1fae5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }

/* ── Page header ────────────────────────────────── */
.page-header { margin-bottom: 1.1rem !important; }
.page-title { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--ds-text-main) !important; }
.breadcrumb-item a { color: var(--ds-accent) !important; font-size: 0.82rem !important; }
.breadcrumb-item.active { color: var(--ds-text-muted) !important; font-size: 0.82rem !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #b0bac9 !important; }

/* ── Tables ─────────────────────────────────────── */
.table {
    font-size: 0.865rem !important;
    color: var(--ds-text-main) !important;
}
.table thead th {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--ds-text-muted) !important;
    background: #f8f9fc !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 0.65rem 0.9rem !important;
}
.table tbody td { padding: 0.6rem 0.9rem !important; vertical-align: middle !important; }
.table tbody tr:hover { background: #f5f7fd !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--ds-border) !important; }

/* ── DataTables controls ────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 7px !important;
    border: 1px solid var(--ds-border) !important;
    font-size: 0.85rem !important;
    padding: 0.3rem 0.6rem !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px rgba(79,126,242,0.1) !important;
    outline: none !important;
}
.dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    font-size: 0.82rem !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: #fff !important;
}
.dataTables_paginate .paginate_button:not(.current):hover {
    background: var(--ds-accent-soft) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-accent) !important;
}

/* ── Modal ──────────────────────────────────────── */
.modal-content {
    border-radius: 14px !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 16px 48px rgba(30,40,80,0.13) !important;
}
.modal-header {
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 1rem 1.4rem !important;
}
.modal-title { font-weight: 700 !important; font-size: 0.98rem !important; color: var(--ds-text-main) !important; }
.modal-footer { border-top: 1px solid var(--ds-border) !important; padding: 0.8rem 1.4rem !important; }
.modal-body { padding: 1.25rem 1.4rem !important; }

/* ── Input group ────────────────────────────────── */
.input-group .form-control:not(:last-child) { border-right: none !important; }
.input-group .btn { border-radius: 0 7px 7px 0 !important; }
.input-group .form-control:first-child { border-radius: 7px 0 0 7px !important; }

/* ── List group ─────────────────────────────────── */
.list-group-item {
    border-color: var(--ds-border) !important;
    font-size: 0.875rem !important;
    color: var(--ds-text-main) !important;
}
.list-group-item:first-child { border-radius: 8px 8px 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 8px 8px !important; }

/* ── Barra bulk ─────────────────────────────────── */
#barra-bulk-coment .card {
    border-color: var(--ds-accent) !important;
    background: var(--ds-accent-soft) !important;
}

/* ── Progress ───────────────────────────────────── */
.progress { border-radius: 99px !important; background: var(--ds-border) !important; }
.progress-bar { background: var(--ds-accent) !important; border-radius: 99px !important; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f0f2f8; border-radius: 99px; }
::-webkit-scrollbar-thumb { background: #a0aec0; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #718096; }

/* ── Main content ───────────────────────────────── */
.main-content.app-content { background: var(--ds-body-bg) !important; }
.main-container { padding: 1.25rem 1.5rem !important; }

/* ── Oculta imagens de logo do template base ────── */
.header-brand-img, .logo-horizontal { display: none !important; }

/* ── Sidebar compacta (recolhida) ───────────────── */
.app.sidenav-toggled .ds-brand-name { display: none !important; }
.app.sidenav-toggled .side-header   { justify-content: center !important; }

/* Quando recolhida e sem hover expandido: oculta textos e centraliza ícones */
.app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__label { display: none !important; }
.app.sidenav-toggled:not(.sidenav-toggled-open) .angle            { display: none !important; }
.app.sidenav-toggled:not(.sidenav-toggled-open) .nav-menu-badge   { display: none !important; }
.app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu        { overflow: hidden !important; }

/* Centra o ícone quando a label some */
.app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__item {
    justify-content: center !important;
    padding: 0.6rem !important;
}
.app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__icon {
    margin-right: 0 !important;
    font-size: 1.1rem !important;
}

/* Hover expansão: restaura aparência normal */
.app.sidenav-toggled.sidenav-toggled-open .side-menu__label { display: block !important; }
.app.sidenav-toggled.sidenav-toggled-open .angle            { display: inline-block !important; }
.app.sidenav-toggled.sidenav-toggled-open .nav-menu-badge   { display: inline-block !important; }
.app.sidenav-toggled.sidenav-toggled-open .side-menu__item  {
    justify-content: flex-start !important;
    padding: 0.58rem 0.8rem !important;
}
.app.sidenav-toggled.sidenav-toggled-open .side-menu__icon  {
    margin-right: 0.65rem !important;
    font-size: 1rem !important;
}

/* Mobile: sidebar nunca fica cortada */
@media (max-width: 991px) {
    .app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__label { display: block !important; }
    .app.sidenav-toggled:not(.sidenav-toggled-open) .angle            { display: inline-block !important; }
    .app.sidenav-toggled:not(.sidenav-toggled-open) .nav-menu-badge   { display: inline-block !important; }
    .app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__item  {
        justify-content: flex-start !important;
        padding: 0.58rem 0.8rem !important;
    }
    .app.sidenav-toggled:not(.sidenav-toggled-open) .side-menu__icon  {
        margin-right: 0.65rem !important;
    }
}

/* ── Global loader ──────────────────────────────── */
#global-loader { background: #fff !important; }

/* ── Back to top ────────────────────────────────── */
#back-to-top { background: var(--ds-accent) !important; border-radius: 50% !important; }

/* ── Alert ──────────────────────────────────────── */
.alert { border-radius: 9px !important; }

/* ── Select2 ────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    border-radius: 7px !important;
    border: 1px solid var(--ds-border) !important;
    height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; }

/* ── App sidebar overlay ─────────────────────────── */
.app-sidebar__overlay { background: rgba(30,40,80,0.35) !important; }

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-img {
    background: linear-gradient(150deg, #eef2ff 0%, #f0f7ff 50%, #e8f4fd 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Círculos decorativos suaves */
.login-img::before {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,126,242,0.12), transparent 70%);
    top: -100px; right: -80px;
}
.login-img::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.08), transparent 70%);
    bottom: -60px; left: -60px;
}

.container-login100 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1.5rem !important;
    position: relative;
    z-index: 1;
}

.wrap-login100 {
    background: #fff !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(79,126,242,0.1) !important;
    padding: 2.5rem 2rem !important;
    width: 100% !important;
    max-width: 400px !important;
}

.login100-form-title {
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: var(--ds-text-main) !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
}

/* Subtítulo visual */
.wrap-login100::before {
    content: '';
    display: block;
    width: 48px; height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ds-accent), #7ba3f8);
    margin: 0 auto 1.25rem;
}

.wrap-input100 {
    border-radius: 8px !important;
    border: 1px solid var(--ds-border) !important;
    background: #f8f9fc !important;
    overflow: hidden !important;
    margin-bottom: 0.85rem !important;
    transition: border-color var(--ds-ease), box-shadow var(--ds-ease) !important;
}
.wrap-input100:focus-within {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px rgba(79,126,242,0.1) !important;
    background: #fff !important;
}
.wrap-input100 .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #b0bac9 !important;
}
.wrap-input100 .form-control,
.wrap-input100 input {
    background: transparent !important;
    border: none !important;
    font-size: 0.9rem !important;
    color: var(--ds-text-main) !important;
    box-shadow: none !important;
}
.wrap-input100 .form-control::placeholder,
.wrap-input100 input::placeholder { color: #b0bac9 !important; }
.wrap-input100 .form-control:focus,
.wrap-input100 input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ds-text-main) !important;
}

.login100-form-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 46px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    background: var(--ds-accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(79,126,242,0.3) !important;
    transition: all var(--ds-ease) !important;
    margin-top: 1rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.login100-form-btn:hover {
    background: var(--ds-accent-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(79,126,242,0.38) !important;
    color: #fff !important;
}

.col-login { display: none !important; }

/* ── Slide-item ativo: azul e negrito ───────────── */
.slide-item.active {
    color: var(--ds-accent) !important;
    font-weight: 700 !important;
    background: var(--ds-accent-soft) !important;
    border-radius: 6px !important;
}

/* ── Responsive — Login ─────────────────────────── */
@media (max-width: 767px) {
    .wrap-login100 { padding: 1.75rem 1.25rem !important; }
}

/* ── Responsive — Geral (≤ 767px) ──────────────── */
@media (max-width: 767px) {
    .main-container    { padding: 0.75rem !important; }
    .page-title        { font-size: 1rem !important; }
    .page-header       { margin-bottom: 0.75rem !important; }

    /* Tabelas menores */
    .table             { font-size: 0.78rem !important; }
    .table thead th    { padding: 0.4rem 0.6rem !important; font-size: 0.68rem !important; }
    .table tbody td    { padding: 0.4rem 0.6rem !important; }

    /* Cards: menos padding interno */
    .card-body         { padding: 0.85rem !important; }

    /* Gráficos Canvas: altura máxima */
    .card canvas       { max-height: 180px !important; }

    /* Containers de gráfico ECharts com altura fixa */
    #pub-race-chart    { height: 260px !important; }
    #ter-linerace      { height: 300px !important; }
    #pub-race-wrap     { height: 260px !important; }

    /* Gráficos chart.js com altura inline */
    [id$="-chart-mes"],
    [id$="-chart-evol"] { max-height: 160px !important; }

    /* Botões de velocidade e mês: mais compactos */
    .race-speed, .lr-speed {
        padding: 0.15rem 0.35rem !important;
        font-size: .7rem !important;
    }
    .race-mes, .lr-mes {
        padding: 0 5px !important;
        font-size: .68rem !important;
        line-height: 1.6 !important;
    }

    /* Botões Play/Reiniciar */
    #pub-race-play, #pub-race-restart { font-size: .78rem !important; padding: 0.3rem 0.75rem !important; }

    /* Filtros: inputs de data side-by-side, selects empilhados */
    .card-body .col-auto[style*="width:170px"],
    .card-body .col-auto[style*="width: 170px"] {
        width: 47% !important;
        flex: 0 0 47% !important;
        min-width: 0 !important;
    }
    .card-body .col-lg-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .card-body .col-lg-1 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── Responsive — Mobile estreito (≤ 575px) ─────── */
@media (max-width: 575px) {
    /* KPI cards: 2 por linha */
    .widgets-cards-row .col,
    #ind-kpis .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Gráfico anéis sentimento: empilha */
    #ter-anel-pos, #ter-anel-neg, #ter-anel-neu { height: 90px !important; }

    /* Heatmap: scroll horizontal */
    #aud-heatmap { overflow-x: auto; }
}