/*
 * SpotHelp - Tema moderno
 * Camada visual complementar. Mantem custom.css original intacto.
 * 2026-08-31
 */

:root {
    --spot-bg: #f4f7fb;
    --spot-surface: #ffffff;
    --spot-surface-soft: #f8fafc;
    --spot-text: #172033;
    --spot-muted: #667085;
    --spot-border: #e5eaf1;
    --spot-primary: #2563eb;
    --spot-primary-hover: #1d4ed8;
    --spot-primary-soft: #eff6ff;
    --spot-success-soft: #ecfdf3;
    --spot-warning-soft: #fff8e6;
    --spot-danger-soft: #fff1f2;
    --spot-radius-sm: 10px;
    --spot-radius: 14px;
    --spot-radius-lg: 18px;
    --spot-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --spot-shadow: 0 8px 24px rgba(16, 24, 40, .07);
    --spot-transition: 160ms ease;
}

html { scroll-behavior: smooth; }

body {
    background: var(--spot-bg);
    color: var(--spot-text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

body > main,
main,
.content-wrapper,
.main-content {
    background: transparent !important;
}

a { transition: color var(--spot-transition), background-color var(--spot-transition), border-color var(--spot-transition), box-shadow var(--spot-transition); }

/* Conteudo e espacos */
.container,
.container-fluid {
    --bs-gutter-x: 1.5rem;
}

@media (min-width: 1200px) {
    .container-fluid { --bs-gutter-x: 2rem; }
}

/* Titulos */
h1, h2, h3, h4, h5, h6 { color: var(--spot-text); letter-spacing: -.012em; }

h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 700; }
h3, .h3, h4, .h4, h5, .h5 { font-weight: 600; }

.text-muted { color: var(--spot-muted) !important; }

/* Cards */
.card {
    border: 1px solid var(--spot-border);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    box-shadow: var(--spot-shadow-sm);
    overflow: hidden;
}

.card-header {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--spot-border);
    background: var(--spot-surface) !important;
    color: var(--spot-text);
    font-weight: 600;
}

.card-body { padding: 1rem; }
.card-footer { border-top: 1px solid var(--spot-border); background: var(--spot-surface-soft); }
.card:hover { border-color: #d8e0eb; }

/* Painel/boxes legados */
.box,
.panel,
.info-box,
.small-box,
.callout {
    border-radius: var(--spot-radius) !important;
    border-color: var(--spot-border) !important;
    box-shadow: var(--spot-shadow-sm) !important;
}

/* Formularios */
.form-label,
label:not(.form-check-label) {
    color: #344054;
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-control,
.form-select,
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid #d7dee8 !important;
    border-radius: var(--spot-radius-sm) !important;
    background-color: #fff;
    color: var(--spot-text);
    box-shadow: none !important;
    transition: border-color var(--spot-transition), box-shadow var(--spot-transition), background-color var(--spot-transition);
}

textarea.form-control { min-height: 90px; }

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection {
    border-color: #84adff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10) !important;
}

.form-control::placeholder { color: #98a2b3; }
.form-control:disabled, .form-select:disabled { background: #f2f4f7; color: #667085; }

.input-group-text {
    border-color: #d7dee8;
    background: #f8fafc;
    color: #667085;
}

.form-check-input { border-color: #b9c2cf; }
.form-check-input:checked { background-color: var(--spot-primary); border-color: var(--spot-primary); }

/* Select2 */
.select2-container { max-width: 100%; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 38px !important; padding-left: .75rem; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown { border-color: var(--spot-border) !important; border-radius: 12px !important; box-shadow: var(--spot-shadow); overflow: hidden; }
.select2-results__option { padding: .55rem .75rem; }

/* Botoes */
.btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: none;
    transition: box-shadow var(--spot-transition), background-color var(--spot-transition), border-color var(--spot-transition), color var(--spot-transition);
}

.btn:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.btn:active { box-shadow: none; }
.btn-sm { min-height: 32px; border-radius: 8px; }
.btn-lg { min-height: 46px; border-radius: 12px; }

.btn-primary {
    background: var(--spot-primary);
    border-color: var(--spot-primary);
}
.btn-primary:hover,
.btn-primary:focus { background: var(--spot-primary-hover); border-color: var(--spot-primary-hover); box-shadow: 0 5px 14px rgba(37, 99, 235, .18); }

.btn-outline-primary { color: var(--spot-primary); border-color: #a9c5ff; }
.btn-outline-primary:hover { background: var(--spot-primary-soft); color: var(--spot-primary-hover); border-color: #84adff; }

.btn-light { border-color: var(--spot-border); background: #fff; color: #344054; }
.btn-light:hover { background: #f8fafc; border-color: #ccd5e1; }

/* Tabelas */
.table-responsive {
    border: 1px solid var(--spot-border);
    border-radius: var(--spot-radius);
    background: #fff;
    overflow-x: auto;
}

.table { margin-bottom: 0; color: var(--spot-text); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .72rem .75rem; border-bottom-color: #edf0f4; }
.table thead th {
    background: #f8fafc !important;
    color: #475467;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--spot-border) !important;
}
.table tbody tr { transition: background-color var(--spot-transition); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f8fbff; color: inherit; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #fbfcfe; }

/* Badges */
.badge {
    padding: .38rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Filtros e areas de pesquisa legadas */
fieldset,
.filtros,
.filtro,
.area-filtro,
.search-area,
.pesquisa,
.card-filter,
.card-filtro {
    border-color: var(--spot-border) !important;
}

fieldset {
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--spot-border);
    border-radius: var(--spot-radius);
    background: #fff;
}
fieldset legend { float: none; width: auto; padding: 0 .45rem; margin: 0; color: #475467; font-size: .82rem; font-weight: 700; }

/* Modais */
.modal-content {
    border: 0;
    border-radius: var(--spot-radius-lg);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
    overflow: hidden;
}
.modal-header { padding: 1rem 1.15rem; border-bottom-color: var(--spot-border); background: #fff; }
.modal-title { font-weight: 700; }
.modal-body { padding: 1.15rem; }
.modal-footer { padding: .85rem 1.15rem; border-top-color: var(--spot-border); background: #fbfcfe; }

/* Dropdowns */
.dropdown-menu {
    padding: .4rem;
    border: 1px solid var(--spot-border);
    border-radius: 12px;
    box-shadow: var(--spot-shadow);
}
.dropdown-item { padding: .48rem .65rem; border-radius: 8px; color: #344054; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--spot-primary-soft); color: var(--spot-primary-hover); }

/* Alertas */
.alert { border-radius: 12px; border-width: 1px; box-shadow: none; }
.alert-info { background: #eff8ff; border-color: #b9e6fe; color: #175cd3; }
.alert-success { background: var(--spot-success-soft); border-color: #abefc6; color: #067647; }
.alert-warning { background: var(--spot-warning-soft); border-color: #fedf89; color: #b54708; }
.alert-danger { background: var(--spot-danger-soft); border-color: #fecdd3; color: #b42318; }

/* Paginacao */
.pagination { gap: .2rem; }
.page-link { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px !important; border-color: var(--spot-border); color: #475467; }
.page-item.active .page-link { background: var(--spot-primary); border-color: var(--spot-primary); }
.page-link:hover { background: var(--spot-primary-soft); color: var(--spot-primary-hover); border-color: #bfd3ff; }

/* Breadcrumb */
.breadcrumb { padding: .55rem .75rem; border-radius: 10px; background: rgba(255,255,255,.7); }
.breadcrumb-item, .breadcrumb-item a { color: #667085; }
.breadcrumb-item.active { color: #344054; font-weight: 600; }

/* Tabs */
.nav-tabs { gap: .25rem; border-bottom-color: var(--spot-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; color: #667085; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--spot-primary); background: var(--spot-primary-soft); }
.nav-tabs .nav-link.active { color: var(--spot-primary); background: transparent; border-bottom-color: var(--spot-primary); }

/* Accordion */
.accordion-item { border-color: var(--spot-border); overflow: hidden; }
.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.accordion-button { font-weight: 600; color: #344054; }
.accordion-button:not(.collapsed) { color: var(--spot-primary-hover); background: var(--spot-primary-soft); box-shadow: inset 0 -1px 0 var(--spot-border); }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); }

/* List groups */
.list-group { border-radius: 12px; overflow: hidden; }
.list-group-item { border-color: var(--spot-border); padding: .7rem .8rem; }
.list-group-item-action:hover { background: #f8fbff; }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: #c8d1dc transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c8d1dc; border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Navegacao - acabamento global */
.modern-navigation {
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: saturate(180%) blur(12px);
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.06);
}

.modern-navigation-action {
    border: 1px solid var(--spot-border) !important;
    background: #fff !important;
    color: #475467 !important;
}
.modern-navigation-action:hover { color: var(--spot-primary) !important; border-color: #bfd3ff !important; background: var(--spot-primary-soft) !important; }

.modern-sidebar-offcanvas { background: #fff; }
.modern-sidebar-body { background: #fff; }
.modern-sidebar-search { border-color: var(--spot-border) !important; background: #f8fafc; }
.modern-sidebar-search:focus { background: #fff; }
.modern-sidebar-context-card { background: #f8fafc !important; }
.modern-sidebar-link.active { font-weight: 600; }

/* Compatibilidade com cores Bootstrap usadas no sistema */
.bg-primary { background-color: var(--spot-primary) !important; }
.text-primary { color: var(--spot-primary) !important; }
.border-primary { border-color: var(--spot-primary) !important; }

/* Imagens/avatar */
.rounded-circle { object-fit: cover; }
img { max-width: 100%; }

/* SweetAlert */
.swal2-popup { border-radius: 18px !important; box-shadow: 0 24px 60px rgba(16,24,40,.20) !important; }
.swal2-confirm, .swal2-cancel, .swal2-deny { border-radius: 10px !important; }

/* Responsivo */
@media (max-width: 767.98px) {
    .container, .container-fluid { --bs-gutter-x: 1rem; }
    .card-body { padding: .85rem; }
    .modal-body { padding: .9rem; }
    .btn { min-height: 40px; }
    .table > :not(caption) > * > * { padding: .62rem .65rem; }
    h1, .h1 { font-size: 1.55rem; }
    h2, .h2 { font-size: 1.35rem; }
}

/* Impressao */
@media print {
    body { background: #fff !important; }
    .modern-navigation, .offcanvas, .btn, .no-print { display: none !important; }
    .card, .table-responsive { border: 0 !important; box-shadow: none !important; }
}

/* SpotHelp - Home / tabelas de estatísticas mais compactas */
.container-estatistica-geral .table > :not(caption) > * > *,
.container-meus-atendimentos .table > :not(caption) > * > *,
.container-meus-atendimentos-solicitados .table > :not(caption) > * > *,
.container-atendimentos-por-setor .table > :not(caption) > * > *,
.container-atendimentos-por-tecnico .table > :not(caption) > * > * {
    padding-top: .34rem;
    padding-bottom: .34rem;
    line-height: 1.15;
}

.container-estatistica-geral .table .btn-sm,
.container-meus-atendimentos .table .btn-sm,
.container-meus-atendimentos-solicitados .table .btn-sm,
.container-atendimentos-por-setor .table .btn-sm,
.container-atendimentos-por-tecnico .table .btn-sm {
    padding: .22rem .42rem;
    line-height: 1.1;
}