/*
 * YMS / Agendamento — design system compartilhado
 * Camada visual global. Não altera contratos de JavaScript nem regras de negócio.
 *
 * Breakpoints: convenção Bootstrap 5 em todo o projeto.
 *   max-width: 575.98px / 767.98px / 991.98px / 1199.98px
 *   min-width:    576px /    768px /    992px /    1200px
 * A sidebar aparece a partir de 992px (lg); não usar 1200px (xl) em CSS novo.
 */
:root {
    --yms-brand: #24519b;
    --yms-brand-dark: #17396f;
    --yms-brand-light: #eaf1fb;
    --yms-accent: #ca2128;
    --yms-ink: #1f2937;
    --yms-ink-muted: #6f829c;
    --yms-muted: #64748b;
    --yms-surface: #ffffff;
    --yms-canvas: #f4f7fb;
    --yms-border: #e3e8f0;
    --yms-success: #198754;
    --yms-warning: #c77c11;
    --yms-danger: #c92a35;
    --yms-radius-sm: 8px;
    --yms-radius-md: 12px;
    --yms-radius-lg: 16px;
    --yms-shadow-sm: 0 2px 10px rgba(15, 35, 65, .06);
    --yms-shadow-md: 0 12px 30px rgba(15, 35, 65, .10);
    --yms-focus: 0 0 0 3px rgba(36, 81, 155, .18);

    /* Largura da sidebar nos dois estados (expandida/compacta). */
    --yms-sidebar-expanded: 280px;
    --yms-sidebar-compact: 80px;

    /* Escala de espaçamento (múltiplos de 4px). Usar em vez de valores
     * literais (.15/.35/.45rem etc.) em CSS novo. */
    --yms-space-1: .25rem;
    --yms-space-2: .5rem;
    --yms-space-3: .75rem;
    --yms-space-4: 1rem;
    --yms-space-5: 1.5rem;
    --yms-space-6: 2rem;

    /* Escala tipográfica. Usar em vez de tamanhos mágicos (.68/.82/1.12rem etc.). */
    --yms-text-xs: .75rem;
    --yms-text-sm: .875rem;
    --yms-text-md: 1rem;
    --yms-text-lg: 1.125rem;
    --yms-text-xl: 1.5rem;

    /* Escala de z-index. Camadas do shell (sidebar/toggle) < overlays
     * globais < bottom nav mobile < Bootstrap (offcanvas/modal ~1090,
     * backdrop 1089) < overlay de loading, sempre no topo. */
    --yms-z-shell: 1000;
    --yms-z-bottom-nav: 1050;
    --yms-z-bottom-sheet: 1060;
    --yms-z-dropdown-fixed: 1105;
    --yms-z-toast: 3000;
    --yms-z-loading-overlay: 6000;

    /* Bootstrap/theme tokens alinhados à identidade do YMS. */
    --bs-primary: #24519b;
    --bs-primary-rgb: 36, 81, 155;
    --bs-link-color: #24519b;
    --bs-link-hover-color: #17396f;
    --bs-info: #2f78b7;
    --bs-info-rgb: 47, 120, 183;
    --bs-warning: #c77c11;
    --bs-warning-rgb: 199, 124, 17;
    --bs-danger: #c92a35;
    --bs-danger-rgb: 201, 42, 53;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-body-bg: #f4f7fb;
    --bs-body-color: #1f2937;

    /* Tokens legados usados pelos dashboards e relatórios do módulo. */
    --relat-primary: #24519b;
    --relat-danger: #c92a35;
    --relat-warning: #c77c11;
    --relat-success: #198754;
    --relat-info: #2f78b7;
    --relat-secondary: #64748b;
}

html,
body {
    background: var(--yms-canvas);
    color: var(--yms-ink);
}

body,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.table {
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.layout-page {
    background: var(--yms-canvas) !important;
}

/* 100vh em navegadores mobile inclui a barra de endereço; 100dvh acompanha a
 * altura visível real. O height fica no CSS (não mais inline no layout) para
 * que a compensação do bottom nav abaixo possa sobrepor sem !important. */
.yms-layout-page {
    height: 100vh;
    height: 100dvh;
}

@media (max-width: 991.98px) {
    .yms-layout-page {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
    }
}

.layout-sidebar {
    background: linear-gradient(180deg, #071426 0%, #0b1b2e 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: 8px 0 24px rgba(13, 32, 61, .08) !important;
}

.sidebar-header {
    position: relative;
    height: 76px;
    padding: 1.1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Controle do aside integrado à marca. Ele acompanha o cabeçalho do menu e
 * não flutua sobre o conteúdo, evitando colisões com filtros, modais e tabs. */
.sidebar-header .sidebar-logo {
    position: relative;
    min-width: 0;
    height: 100%;
    padding: 0;
}

.sidebar-header .full-logo {
    margin-right: 2.35rem;
}

/* O posicionamento (fixed, preso ao trilho do aside) e os estados de hover/
 * active vivem só em ".sidebar-rail-toggle"/".layout-shell > #btn-toggle-sidebar"
 * mais abaixo — essa qualificação por classe é sempre mais específica que um
 * seletor por id puro, então uma segunda declaração aqui nunca teria efeito. */
#btn-toggle-sidebar .bx {
    font-size: 1.12rem !important;
    line-height: 1;
}

.sidebar-logo .full-logo {
    max-width: 158px;
    height: auto;
}

.sidebar-search {
    padding: .85rem 1rem .5rem;
}

.sidebar-search-inner {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: var(--yms-radius-sm) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.sidebar-search-inner:focus-within {
    border-color: rgba(151, 185, 235, .7) !important;
    box-shadow: 0 0 0 3px rgba(151, 185, 235, .12);
}

.sidebar-search-inner input {
    color: #f8fafc !important;
}

@media (min-width: 992px) {
    /* Desktop inicia expandido, como um workspace operacional. */
    body.layout-sidebar-pinned .layout-sidebar {
        width: 280px !important;
    }

    body.layout-sidebar-pinned .layout-page {
        margin-left: 280px !important;
    }
}

.sidebar-search-inner input::placeholder {
    color: #a9b8cc !important;
}

.menu-header {
    color: #91a3bd !important;
    font-size: .66rem !important;
    letter-spacing: .1em !important;
}

.menu-item {
    padding-right: .7rem !important;
    padding-left: .7rem !important;
}

.menu-link {
    min-height: 42px;
    padding: .65rem .85rem !important;
    border-radius: var(--yms-radius-sm) !important;
    color: #b6c4d7 !important;
    font-size: .88rem !important;
}

.menu-item:not(.active) > .menu-link:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    transform: none !important;
}

.menu-item:not(.active) > .menu-link:hover .menu-icon {
    color: #9fc1ed !important;
    text-shadow: none !important;
}

.menu-item.active > .menu-link {
    background: var(--yms-brand) !important;
    box-shadow: 0 6px 14px rgba(36, 81, 155, .26) !important;
}

.menu-item.active > .menu-link::before {
    width: 3px;
    background: #f4b740 !important;
}

.menu-icon {
    color: #92a6c2;
    font-size: 1.2rem !important;
}

.layout-page > .navbar,
.navbar.navbar-dark {
    min-height: 66px;
    background: linear-gradient(105deg, #071426 0%, #102a4c 58%, #1b4c8c 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 4px 18px rgba(7, 20, 38, .22) !important;
}

.yms-navbar {
    position: relative;
    z-index: 1200;
    overflow: visible !important;
    padding: .65rem 1rem;
}

.yms-navbar .navbar-tabs-wrapper {
    padding: .15rem 0;
}

.yms-navbar #notificacaoBotao {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
}

.yms-notification-button {
    position: relative;
}

.yms-mobile-topbar .dropdown-notifications .dropdown-menu {
    width: min(340px, calc(100vw - 1rem));
    min-width: 0;
    max-width: calc(100vw - 1rem);
}

.yms-navbar .navbar-tabs-wrapper {
    min-width: 0;
}

.yms-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .5rem;
}

.yms-header-actions > .navbar-nav {
    margin-left: 0 !important;
}

.yms-header-actions .yms-tabs-overflow {
    margin: 0 !important;
}

.nav-tab-item {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 8px !important;
    color: #c5d3e5 !important;
    height: 36px !important;
    min-width: 118px;
    box-shadow: none !important;
}

.nav-tab-item:hover {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #fff !important;
}

.nav-tab-item.active {
    background: #eaf1fb !important;
    border-color: #dbe8fa !important;
    color: var(--yms-brand-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16) !important;
}

.nav-tab-close {
    color: #a9bdd8 !important;
    border-radius: 50%;
}

.nav-tab-close:hover {
    background: rgba(36, 81, 155, .12);
    color: var(--yms-brand) !important;
}

.yms-mobile-topbar {
    min-height: 58px;
    padding: .55rem 1rem;
    background: linear-gradient(105deg, #071426 0%, #102a4c 58%, #1b4c8c 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 3px 14px rgba(7, 20, 38, .18);
}

.yms-mobile-topbar .nav-link {
    color: #e5edf8 !important;
}

.yms-mobile-topbar .rounded-circle {
    border: 2px solid var(--yms-brand-light);
}

.navbar .nav-link {
    color: #e5edf8 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, .10) !important;
}

.navbar .user-avatar-circle {
    background: #f0f5fc !important;
    color: var(--yms-brand-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important;
}

.dropdown-menu {
    z-index: 1220 !important;
    border: 1px solid var(--yms-border) !important;
    border-radius: var(--yms-radius-md) !important;
    box-shadow: var(--yms-shadow-md) !important;
}

.dropdown-item {
    color: var(--yms-ink) !important;
    border-radius: 6px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand-dark) !important;
}

.main-content,
.content-wrapper {
    background: var(--yms-canvas);
}

/* Cada rota carregada na aba/iframe usa esta mesma moldura. Ela evita
   diferenças de altura e de rolagem entre listagens, relatórios e formulários. */
.body-wrapper {
    min-height: 100%;
    background: var(--yms-canvas);
    color: var(--yms-ink);
}

.yms-page-content {
    min-width: 0;
    min-height: 100%;
    overflow: visible;
}

.yms-page-content > main {
    min-width: 0;
}

.yms-page-content .container-fluid {
    width: 100%;
    max-width: none;
}

.yms-page-content .tab-content {
    min-width: 0;
}

.yms-page-content .row.mb-3.align-items-center,
.yms-page-content .d-flex.justify-content-between.align-items-center.mb-3 {
    min-height: 42px;
}

.yms-page-content .breadcrumb-wrapper {
    margin-top: .15rem !important;
    margin-bottom: .7rem !important;
}

/* Filtros recolhíveis deixam de parecer um bloco solto e ganham hierarquia
   própria sem interferir no conteúdo que permanece fechado. */
.yms-page-content .collapse.show > .row.g-3,
.yms-page-content .collapse.show > .row.me-auto,
.yms-page-content .collapse.show > .card-body,
.yms-page-content .accordion .collapse.show {
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-md);
    background: var(--yms-surface);
    box-shadow: var(--yms-shadow-sm);
}

.yms-page-content .collapse.show > .row.g-3,
.yms-page-content .collapse.show > .row.me-auto {
    margin: 0 0 1rem;
    padding: 1rem;
}

.yms-page-content .accordion-button {
    color: var(--yms-ink);
    background: transparent;
}

.yms-page-content .accordion-button:not(.collapsed) {
    color: var(--yms-brand-dark);
    background: var(--yms-brand-light);
    box-shadow: inset 0 -1px 0 var(--yms-border);
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-dark {
    background: #102a4c !important;
    border-color: #102a4c !important;
}

.btn-dark:hover,
.btn-dark:focus {
    background: #071426 !important;
    border-color: #071426 !important;
}

.btn-outline-secondary {
    color: #526174 !important;
    border-color: #cbd5e1 !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--yms-brand-dark) !important;
    border-color: #9bb7df !important;
    background: var(--yms-brand-light) !important;
}

#layerControl {
    height: clamp(420px, calc(100vh - 190px), 720px) !important;
}

[id^="ultimaAtualizacao"] {
    background: #102a4c !important;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(7, 20, 38, .18);
}

/* DataTables: controles, ordenação, processamento e paginação seguem o
   mesmo padrão visual das tabelas nativas do módulo. */
.dataTables_wrapper {
    color: var(--yms-muted);
    font-size: .8rem;
}

.dataTables_wrapper > .row:first-child {
    align-items: center;
    row-gap: .7rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--yms-border);
    background: #fbfcfe;
}

.dataTables_wrapper > .row:last-child {
    align-items: center;
    row-gap: .7rem;
    padding: .75rem 1rem;
    border-top: 1px solid #edf1f6;
    background: #fbfcfe;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: var(--yms-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    min-height: 36px;
    margin: 0 .35rem;
    padding: .35rem .65rem;
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-sm);
    background: var(--yms-surface);
    color: var(--yms-ink);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--yms-brand);
    box-shadow: var(--yms-focus);
}

.dataTables_wrapper table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
    border-bottom: 1px solid var(--yms-border);
}

.dataTables_wrapper .dataTables_processing {
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-md);
    background: rgba(255, 255, 255, .96);
    color: var(--yms-brand-dark);
    box-shadow: var(--yms-shadow-md);
}

.dataTables_wrapper .dataTables_empty {
    padding: 3.5rem 1rem !important;
    color: var(--yms-muted);
    text-align: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    min-height: 32px;
    margin-left: .2rem;
    padding: .35rem .55rem !important;
    border: 1px solid transparent !important;
    color: var(--yms-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: #b9cce8 !important;
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand-dark) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #aab5c4 !important;
    background: transparent !important;
}

/* Calendário FullCalendar e calendários de intervalo. */
#calendar-container,
#calendar {
    min-width: 0;
}

#calendar-container {
    padding: .9rem;
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-md);
    background: var(--yms-surface);
    box-shadow: var(--yms-shadow-sm);
}

.fc {
    --fc-border-color: #e7edf5;
    --fc-button-bg-color: var(--yms-brand);
    --fc-button-border-color: var(--yms-brand);
    --fc-button-hover-bg-color: var(--yms-brand-dark);
    --fc-button-hover-border-color: var(--yms-brand-dark);
    --fc-today-bg-color: #eef5ff;
    color: var(--yms-ink);
}

.fc .fc-toolbar-title {
    color: var(--yms-ink);
    font-weight: 700;
}

.fc .fc-button {
    border-radius: var(--yms-radius-sm);
    box-shadow: none;
    font-weight: 600;
}

.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
    color: var(--yms-muted);
    text-decoration: none;
}

/* Selectpicker, Flatpickr e DateRangePicker têm aparência consistente com
   os inputs Bootstrap, inclusive quando usados dentro de modais. */
.bootstrap-select > .dropdown-toggle {
    min-height: 40px;
    border: 1px solid var(--yms-border) !important;
    background: var(--yms-surface) !important;
    color: var(--yms-ink) !important;
}

.bootstrap-select > .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: var(--yms-focus) !important;
}

.bootstrap-select .dropdown-menu,
.flatpickr-calendar,
.daterangepicker {
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-md);
    box-shadow: var(--yms-shadow-md);
}

.flatpickr-calendar,
.daterangepicker {
    z-index: 2050;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--yms-brand) !important;
    border-color: var(--yms-brand) !important;
}

/* Offcanvas e áreas de filtros em telas operacionais. */
.offcanvas {
    background: var(--yms-surface);
}

.offcanvas-header,
.offcanvas-footer {
    padding: 1rem 1.25rem;
}

.offcanvas-title {
    color: var(--yms-ink);
    font-weight: 700;
}

.offcanvas-body {
    min-height: 0;
}

.offcanvas-body .form-label {
    margin-bottom: .35rem;
}

/* Estados vazios/erro aparecem como componentes, e não como texto perdido
   no espaço da tabela. */
.yms-page-content [id$="Vazio"],
.yms-page-content [id$="Erro"],
.yms-page-content .empty-state,
.yms-page-content .empty-chat {
    border: 1px dashed #cbd7e6;
    border-radius: var(--yms-radius-md);
    background: rgba(255, 255, 255, .72);
}

.yms-page-content .skeleton-loader,
.yms-page-content .skeleton-bar,
.yms-page-content .rd-skeleton,
.yms-page-content .relat-skeleton {
    background: linear-gradient(90deg, #edf2f7 20%, #f8fafc 50%, #edf2f7 80%);
    background-size: 200% 100%;
}

/* Componentes de dashboard que nasceram antes do design system. */
.dq-kpi-icon-primary,
.dq-chip-neutral,
.dq-rank-pos {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand) !important;
}

.dq-kpi-icon-danger,
.dq-chip-danger,
.dq-rank-header-danger {
    background: #fdebed !important;
    color: var(--yms-danger) !important;
}

.dq-kpi-icon-success,
.dq-chip-success,
.dq-rank-header-success {
    background: #e9f7ef !important;
    color: var(--yms-success) !important;
}

.dq-kpi-icon-warning,
.dq-chip-amber,
.dq-rank-gold {
    background: #fff5df !important;
    color: var(--yms-warning) !important;
}

.dq-color-amber,
.dq-color-danger,
.dq-color-success {
    color: inherit !important;
}

.dq-color-amber { color: var(--yms-warning) !important; }
.dq-color-danger { color: var(--yms-danger) !important; }
.dq-color-success { color: var(--yms-success) !important; }

.dq-kpi-card,
.relat-kpi-card,
.relat-chart-card,
.card-monitoring,
.legend-card,
.oc-card {
    border: 1px solid var(--yms-border) !important;
    border-radius: var(--yms-radius-md) !important;
    background: var(--yms-surface);
    box-shadow: var(--yms-shadow-sm) !important;
}

.dq-kpi-card:hover,
.relat-kpi-card:hover,
.relat-chart-card:hover,
.card-monitoring:hover {
    box-shadow: var(--yms-shadow-md) !important;
}

.oc-card-header,
.oc-changes,
.relat-pico-card {
    background: #f7f9fc !important;
    border-color: var(--yms-border) !important;
}

.legend-card {
    padding: 1.15rem !important;
    margin-top: 1rem !important;
}

.legend-item:hover {
    background: var(--yms-brand-light) !important;
}

.legend-item.selected {
    border-color: #9bb7df !important;
    box-shadow: 0 8px 20px rgba(36, 81, 155, .12) !important;
}

.step-dot.active {
    background-color: var(--yms-brand) !important;
    box-shadow: 0 0 5px rgba(36, 81, 155, .35) !important;
}

.bg-light {
    background-color: #f7f9fc !important;
}

/* Ao abrir um modal dentro de uma aba, o shell fica visualmente atrás e a
   página não cria uma segunda rolagem concorrente. */
body.iframe-modal-open {
    overflow: hidden;
}

.container-fluid.flex-grow-1,
.container-fluid.py-4,
.container-fluid.py-3 {
    padding: 1.25rem 1.5rem !important;
}

.breadcrumb-wrapper {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    color: var(--yms-muted) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.breadcrumb-wrapper .text-muted {
    color: #8a98aa !important;
}

.card,
.modal-content,
.offcanvas,
.accordion-item,
.list-group,
.table-responsive {
    border-color: var(--yms-border);
}

.card {
    border-radius: var(--yms-radius-md);
    box-shadow: var(--yms-shadow-sm);
}

.card-body {
    padding: 1.25rem;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom-color: var(--yms-border);
    background: #fbfcfe;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--yms-ink);
    font-weight: 700;
}

.form-control,
.form-select,
.input-group-text,
.bootstrap-select > .dropdown-toggle {
    min-height: 40px;
    border-color: var(--yms-border);
    border-radius: var(--yms-radius-sm);
    color: var(--yms-ink);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--yms-brand) !important;
    box-shadow: var(--yms-focus) !important;
}

@media (max-width: 991.98px) {
    /* Abaixo de 16px o Safari iOS dá zoom automático ao focar o campo,
     * deslocando o layout dos offcanvas de filtro. 44px é o alvo de toque
     * mínimo recomendado (WCAG 2.5.5). */
    .form-control,
    .form-select,
    .input-group-text,
    .bootstrap-select > .dropdown-toggle {
        min-height: 44px;
        font-size: 16px;
    }
}

.form-label {
    color: var(--yms-ink);
    font-size: .78rem;
    font-weight: 700;
}

.form-text,
.text-muted {
    color: var(--yms-muted) !important;
}

.btn {
    border-radius: var(--yms-radius-sm);
    font-weight: 600;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.menu-link:focus-visible,
.nav-link:focus-visible {
    outline: none;
    box-shadow: var(--yms-focus) !important;
}

.btn-primary {
    background: var(--yms-brand) !important;
    border-color: var(--yms-brand) !important;
}

.text-primary {
    color: var(--yms-brand) !important;
}

.bg-primary {
    background-color: var(--yms-brand) !important;
}

.border-primary {
    border-color: var(--yms-brand) !important;
}

.text-info {
    color: #2f78b7 !important;
}

.bg-info {
    background-color: #2f78b7 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--yms-brand-dark) !important;
    border-color: var(--yms-brand-dark) !important;
}

.btn-outline-primary {
    color: var(--yms-brand) !important;
    border-color: #9bb7df !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--yms-brand-light) !important;
    border-color: var(--yms-brand) !important;
    color: var(--yms-brand-dark) !important;
}

.btn-danger,
.btn-outline-danger:hover {
    background: var(--yms-accent) !important;
    border-color: var(--yms-accent) !important;
}

.btn-label-primary {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand) !important;
}

.btn-label-secondary {
    background: #eef1f5 !important;
    color: #526174 !important;
}

.table-responsive {
    border-radius: var(--yms-radius-md);
    background: var(--yms-surface);
    box-shadow: var(--yms-shadow-sm);
}

table.table {
    color: var(--yms-ink);
    font-size: .82rem;
}

table.table thead th {
    background: #f7f9fc;
    border-bottom: 1px solid var(--yms-border);
    color: #607086;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.table tbody td {
    border-bottom-color: #edf1f6;
    vertical-align: middle;
}

table.table tbody tr {
    transition: background-color .16s ease;
}

table.table-hover tbody tr:hover {
    background: #f8fbff;
}

.badge {
    width: auto;
    min-height: 24px;
    padding: .32rem .58rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.15;
}

.bg-label-primary {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand) !important;
}

.bg-label-success {
    background: #e9f7ef !important;
    color: var(--yms-success) !important;
}

.bg-label-warning {
    background: #fff5df !important;
    color: var(--yms-warning) !important;
}

.bg-label-danger {
    background: #fdebed !important;
    color: var(--yms-danger) !important;
}

.modal-backdrop.show {
    opacity: .48;
}

.modal-content {
    border-radius: var(--yms-radius-lg) !important;
    box-shadow: var(--yms-shadow-md);
}

.modal-header {
    border-bottom-color: var(--yms-border);
}

.modal-footer {
    border-top-color: var(--yms-border);
}

.offcanvas {
    box-shadow: var(--yms-shadow-md);
}

.offcanvas-header {
    border-bottom: 1px solid var(--yms-border);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--yms-brand) !important;
    background: var(--yms-brand) !important;
    color: #fff !important;
}

.mbn {
    background: var(--yms-surface) !important;
    border-top-color: var(--yms-border) !important;
    box-shadow: 0 -4px 18px rgba(15, 35, 65, .10) !important;
}

.mbn-item {
    color: #8290a3 !important;
}

.mbn-item.active {
    color: var(--yms-brand) !important;
}

.mbn-item.active::after {
    background: var(--yms-brand) !important;
}

.mbn-sheet {
    background: var(--yms-surface) !important;
    border: 1px solid var(--yms-border);
    box-shadow: 0 -8px 28px rgba(15, 35, 65, .16) !important;
}

.mbn-sheet-head {
    border-bottom-color: var(--yms-border) !important;
}

.mbn-sheet-title {
    color: var(--yms-ink) !important;
}

.mbn-close-btn {
    background: #f1f4f8 !important;
    color: var(--yms-muted) !important;
}

.mbn-close-btn:hover {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand) !important;
}

.mbn-link {
    color: var(--yms-ink) !important;
    border-bottom-color: var(--yms-border) !important;
}

.mbn-link:hover,
.mbn-link:active {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand-dark) !important;
}

.mbn-acc-toggle {
    color: var(--yms-ink) !important;
}

.mbn-acc-toggle i,
.mbn-group-label i {
    color: var(--yms-brand) !important;
}

/* Acabamento visual do modal de ocorrência, compartilhado pelas telas FLV/Qualidade. */
#chatModal .modal-dialog.ocorrencia-modal-dialog {
    max-width: min(1480px, calc(100vw - 2rem)) !important;
    margin: 1rem auto !important;
    height: calc(100vh - 2rem);
    min-height: 0;
}

#chatModal .modal-content {
    height: 100%;
    max-height: 100%;
    border: 1px solid var(--yms-border) !important;
    border-radius: 20px !important;
    background: var(--yms-canvas) !important;
    box-shadow: 0 24px 70px rgba(15, 35, 65, .22) !important;
}

#chatModal .modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

#chatModal .occurrence-completed-state {
    width: min(100%, 760px);
    min-height: 210px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatModal .occurrence-completed-state .bx-check-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border: 7px solid #198754;
    border-radius: 50%;
    color: #198754 !important;
    font-size: 3rem !important;
}

#chatModal .occurrence-completed-state h4 {
    color: var(--yms-brand-dark);
    font-size: 1.45rem;
}

#chatModal #stepperOcorrencia .bs-stepper-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border: 1px solid var(--yms-border);
    background: var(--yms-surface);
    box-shadow: var(--yms-shadow-sm);
}

#chatModal .occ-header-title {
    color: var(--yms-ink);
}

#chatModal .occ-header-close {
    flex-shrink: 0;
}

#chatModal #ocorrenciaTabs {
    border-bottom: 1px solid var(--yms-border);
}

#chatModal #ocorrenciaTabs .nav-link {
    color: #495463 !important;
    border-radius: 8px 8px 0 0 !important;
    font-size: .88rem;
    font-weight: 700 !important;
}

#chatModal #ocorrenciaTabs .nav-link:hover {
    color: var(--yms-brand-dark) !important;
    background: var(--yms-brand-light) !important;
}

#chatModal #ocorrenciaTabs .nav-link.active {
    color: var(--yms-brand) !important;
}

#chatModal #ocorrenciaTabs .nav-link.active::after {
    background: var(--yms-brand) !important;
}

#chatModal #tabAcao > .d-flex,
#chatModal #tabChat > .mx-auto,
#chatModal #tabMidia > .card {
    width: 100% !important;
}

#chatModal #observationsContainer {
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-md);
    background: #f7f9fc;
    padding: 1.1rem;
}

#chatModal .msg-left .msg-bubble {
    background: var(--yms-surface);
    border-color: var(--yms-border);
    color: var(--yms-ink);
}

#chatModal .msg-right .msg-bubble,
#chatModal .msg-right .avatar-chat {
    background: var(--yms-brand);
}

#chatModal .chat-footer {
    padding: .85rem !important;
    background: var(--yms-surface);
    border-top-color: var(--yms-border) !important;
}

#chatModal .chat-footer > .d-flex {
    gap: .65rem !important;
    padding: .25rem;
    border: 1px solid var(--yms-border);
    border-radius: 12px;
    background: #f7f9fc;
}

#chatModal .chat-input-field {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

#chatModal #btnAnexo {
    border: 0;
    background: transparent;
    color: var(--yms-muted);
}

#chatModal #btnAnexo:hover {
    background: var(--yms-brand-light);
    color: var(--yms-brand);
}

#chatModal .chat-send-btn {
    background: var(--yms-brand) !important;
    box-shadow: 0 5px 12px rgba(36, 81, 155, .22);
}

#chatModal .chat-send-btn:hover {
    background: var(--yms-brand-dark) !important;
}

#chatModal #mediaContainer {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 1rem !important;
}

#chatModal .media-card {
    height: 150px;
    border: 1px solid var(--yms-border);
    box-shadow: var(--yms-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

#chatModal .media-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--yms-shadow-md);
}

@media (max-width: 767.98px) {
    #chatModal .modal-dialog.ocorrencia-modal-dialog {
        max-width: calc(100vw - 1rem) !important;
        margin: .5rem auto !important;
        height: calc(100vh - 1rem);
    }

    #chatModal #observationsContainer {
        padding: .85rem;
    }

    #chatModal #mediaContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.swal-toast {
    min-width: min(360px, calc(100vw - 2rem));
    padding: .95rem 1rem !important;
    border: 1px solid var(--yms-border);
    border-radius: var(--yms-radius-md) !important;
    box-shadow: var(--yms-shadow-md) !important;
}

.swal2-container {
    z-index: 3000 !important;
}

.swal-toast .swal2-title {
    color: var(--yms-ink);
    font-size: .9rem;
    font-weight: 700;
}

.swal-toast .swal2-icon {
    margin: 0 .65rem 0 0;
    transform: scale(.76);
}

/* Modais carregados dentro das abas/iframes também devem tratar o shell pai. */
body.iframe-modal-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    /* A camada continua capturando cliques no shell, mas não escurece a
     * aplicação. O backdrop visual pertence à superfície aberta dentro do
     * iframe; pintar o pai causava o flash preto/cinza. */
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
}

body.iframe-modal-open #iframe-container {
    position: relative;
    z-index: 99999;
}

body.iframe-modal-fullscreen::after {
    display: none;
}

@media (max-width: 991.98px) {
    .layout-page {
        margin-left: 0 !important;
    }

    .layout-sidebar {
        z-index: 1100;
    }
}

@media (max-width: 991.98px) {
    .layout-page > .navbar,
    .navbar.navbar-dark {
        min-height: 58px;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .table-responsive {
        border-radius: 10px;
    }

    .container-fluid.flex-grow-1,
    .container-fluid.py-4,
    .container-fluid.py-3 {
        padding: 1rem .85rem !important;
    }

    .breadcrumb-wrapper {
        font-size: 1rem !important;
    }

    .card-body {
        padding: 1rem;
    }

    .yms-navbar {
        padding: .45rem .7rem;
    }

    .yms-mobile-topbar {
        background: linear-gradient(105deg, #071426 0%, #102a4c 58%, #1b4c8c 100%) !important;
    }

    .nav-tab-item {
        min-width: 104px;
        max-width: 180px;
        height: 34px !important;
    }

    .yms-page-content .row.mb-3.align-items-center,
    .yms-page-content .d-flex.justify-content-between.align-items-center.mb-3 {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .yms-page-content .row.mb-3.align-items-center > .col,
    .yms-page-content .row.mb-3.align-items-center > .col-auto {
        width: 100%;
        margin-left: 0 !important;
    }

    .yms-page-content .row.mb-3.align-items-center > .col-auto .dropdown,
    .yms-page-content .row.mb-3.align-items-center > .col-auto .d-flex {
        width: 100%;
    }

    .yms-page-content .row.mb-3.align-items-center > .col-auto .d-flex > .input-group {
        flex: 1 1 auto;
        min-width: 0 !important;
    }

    body.is-tab-page .yms-page-toolbar-row {
        width: 100%;
        flex-wrap: wrap;
    }

    body.is-tab-page .yms-page-toolbar-row > .col-auto {
        width: auto !important;
        flex: 0 0 auto;
    }

    body.is-tab-page .yms-page-toolbar-row > .col-auto .dropdown,
    body.is-tab-page .yms-page-toolbar-row > .col-auto .d-flex {
        width: auto !important;
    }

    .dataTables_wrapper > .row:first-child,
    .dataTables_wrapper > .row:last-child {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: calc(100% - 72px);
        margin-right: 0;
    }

    #calendar-container {
        padding: .5rem;
    }

    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem;
    }
}

/* Responsividade transversal e navegação por abas. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.navbar-tabs-wrapper {
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.navbar-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.nav-tabs-container {
    width: max-content;
    min-width: max-content;
    flex: 0 0 auto;
    padding: 0 .15rem;
}

.nav-tabs-container .nav-tab-item {
    flex: 0 0 auto;
    max-width: min(240px, 30vw);
}

/* A regra global (mais abaixo, .breadcrumb-wrapper { display: none !important })
 * já cobre este caso; a views não renderizam mais o partial do breadcrumb. */

/* A primeira linha vira uma toolbar de ações compacta, sem reservar espaço
   para a hierarquia duplicada. */
body.is-tab-page .yms-page-toolbar-row {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: .75rem !important;
    align-items: center !important;
}

body.is-tab-page .yms-page-toolbar-row.yms-breadcrumb-only-row {
    display: none !important;
}

body.is-tab-page .yms-page-toolbar-row .yms-toolbar-action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0 !important;
    justify-content: center;
    gap: 0 !important;
}

body.is-tab-page .yms-page-toolbar-row .yms-toolbar-action .yms-toolbar-label,
body.is-tab-page .yms-page-toolbar-row .yms-toolbar-action span.d-none.d-md-block {
    display: none !important;
}

body.is-tab-page .yms-page-toolbar-row .yms-toolbar-action .bx,
body.is-tab-page .yms-page-toolbar-row .yms-toolbar-action .fa,
body.is-tab-page .yms-page-toolbar-row .yms-toolbar-action svg {
    margin: 0 !important;
}

body.is-tab-page .yms-page-content section.mt-4 {
    margin-top: .9rem !important;
}

.body-wrapper,
.yms-page-content,
.yms-page-content > main,
.yms-page-content .container-fluid,
.yms-page-content .card,
.yms-page-content .table-responsive,
.yms-page-content .dataTables_wrapper {
    min-width: 0;
    max-width: 100%;
}

.yms-page-content .table-responsive,
.yms-page-content .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Skeleton único para todas as rotas carregadas pelo layout do Agendamento. */
.body-wrapper {
    position: relative;
}

/* O shell de uma aba começa protegido antes de o JS dos módulos executar.
 * Assim o HTML real nunca aparece antes do skeleton durante o primeiro paint. */
body.yms-shell-booting .body-wrapper > .main-content {
    visibility: hidden;
}

body.yms-shell-booting .body-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    min-height: 100%;
    padding: clamp(1rem, 3vw, 2.25rem);
    background:
        linear-gradient(90deg, rgba(244, 247, 251, .96), rgba(255, 255, 255, .98), rgba(244, 247, 251, .96));
    background-size: 200% 100%;
    animation: yms-skeleton-shimmer 1.25s ease-in-out infinite;
    pointer-events: none;
}

body.yms-shell-booting .body-wrapper::after {
    content: "";
    position: absolute;
    inset: 1.35rem;
    z-index: 30;
    min-height: 240px;
    border: 1px solid rgba(215, 224, 237, .9);
    border-radius: var(--yms-radius-lg);
    background: linear-gradient(90deg, #eef2f7 25%, #f9fbfd 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: yms-skeleton-shimmer 1.25s ease-in-out infinite;
    box-shadow: var(--yms-shadow-sm);
    pointer-events: none;
}

.yms-route-skeleton {
    position: absolute;
    inset: 0;
    z-index: 40;
    padding: clamp(1rem, 3vw, 2.25rem);
    background: var(--yms-canvas);
    opacity: 1;
    transition: opacity .24s ease, visibility .24s ease;
}

.body-wrapper:not(.yms-page-loading) .yms-route-skeleton {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.yms-skeleton-heading,
.yms-skeleton-card,
.yms-skeleton-table {
    border: 1px solid rgba(215, 224, 237, .9);
    border-radius: var(--yms-radius-lg);
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--yms-shadow-sm);
}

.yms-skeleton-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 66px;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}

.yms-skeleton-card {
    min-height: 320px;
    padding: 1.25rem;
}

.yms-skeleton-pill,
.yms-skeleton-title,
.yms-skeleton-line,
.yms-skeleton-table span {
    display: block;
    background: linear-gradient(90deg, #edf1f6 25%, #f8fafc 50%, #edf1f6 75%);
    background-size: 220% 100%;
    animation: yms-skeleton-shimmer 1.2s ease-in-out infinite;
}

.yms-skeleton-pill {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.yms-skeleton-title {
    width: min(280px, 55%);
    height: 18px;
    border-radius: 999px;
}

.yms-skeleton-line {
    width: 46%;
    height: 14px;
    margin-bottom: 1rem;
    border-radius: 999px;
}

.yms-skeleton-line-wide {
    width: 72%;
    height: 22px;
}

.yms-skeleton-line-short {
    width: 28%;
}

.yms-skeleton-table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1.5rem;
    overflow: hidden;
    background: #e8edf4;
}

.yms-skeleton-table span {
    min-height: 42px;
    background-color: #fff;
}

@keyframes yms-skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (max-width: 991.98px) {
    /* O bottom nav é fixo e existe em toda essa faixa (ver decisão da
     * sidebar a 992px); sem isso a última linha da tabela e a paginação
     * ficam escondidas atrás dele entre 768px e 991px. */
    .body-wrapper {
        padding-bottom: 72px !important;
    }
}

@media (max-width: 991.98px) {
    .layout-page,
    #iframe-container,
    .body-wrapper,
    .yms-page-content {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
    }

    .yms-page-content .container-fluid {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    .yms-page-content .row {
        --bs-gutter-x: .75rem;
    }

    .yms-page-content .dataTables_wrapper > .row {
        margin-right: 0;
        margin-left: 0;
    }

    .yms-page-content .dropdown-menu {
        min-width: min(280px, calc(100vw - 1.5rem)) !important;
        max-width: calc(100vw - 1.5rem) !important;
    }

    .yms-page-content .input-group[style*="min-width"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .navbar-tabs-wrapper {
        flex: 1 1 auto;
        max-width: none !important;
        margin-right: .35rem !important;
        margin-left: .35rem !important;
    }

    .nav-tabs-container .nav-tab-item {
        min-width: 118px;
        max-width: 180px;
        font-size: .72rem;
    }

    .yms-route-skeleton {
        padding: .75rem;
    }

    .yms-skeleton-card {
        min-height: 260px;
        padding: .85rem;
    }
}

/* Correções estruturais finais: os controles flutuantes e as superfícies
 * modais/offcanvas precisam respeitar o viewport, inclusive em iframes. */
@media (min-width: 992px) {
    body.layout-sidebar-pinned .layout-sidebar {
        width: var(--yms-sidebar-expanded) !important;
        overflow: visible !important;
    }

    body.layout-sidebar-pinned .layout-page {
        margin-left: var(--yms-sidebar-expanded) !important;
    }
}

.modal-dialog {
    display: flex !important;
    align-items: center !important;
    margin: .5rem auto !important;
}

.modal-dialog .modal-content {
    width: 100% !important;
    max-height: calc(100vh - 1rem) !important;
    overflow: hidden !important;
}

.modal-dialog .modal-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.modal-dialog-scrollable .modal-content {
    max-height: 100% !important;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
}

.modal-dialog-scrollable {
    height: calc(100% - 1rem) !important;
}

.modal-fullscreen {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.modal-fullscreen .modal-content {
    max-height: 100vh !important;
    border-radius: 0 !important;
}

.offcanvas {
    width: min(420px, calc(100vw - .75rem)) !important;
    max-width: calc(100vw - .75rem) !important;
    border-left: 1px solid var(--yms-border) !important;
    border-radius: 18px 0 0 18px !important;
    overflow: hidden !important;
}

.offcanvas.offcanvas-end {
    top: .5rem !important;
    right: .5rem !important;
    bottom: .5rem !important;
    height: calc(100% - 1rem) !important;
}

.offcanvas.offcanvas-start {
    top: .5rem !important;
    bottom: .5rem !important;
    height: calc(100% - 1rem) !important;
    border-right: 1px solid var(--yms-border) !important;
    border-left: 0 !important;
    border-radius: 0 18px 18px 0 !important;
}

.offcanvas-header {
    min-height: 68px;
    flex: 0 0 auto;
    background: #fbfcfe;
}

.offcanvas-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 1.25rem !important;
    background: var(--yms-surface);
    overscroll-behavior: contain;
}

.offcanvas-footer {
    min-height: 68px;
    flex: 0 0 auto;
    background: #fbfcfe !important;
}

.offcanvas-backdrop.show {
    opacity: .5;
}

body.shell-locked aside,
body.shell-locked .layout-menu,
body.shell-locked .sidebar,
body.shell-locked .sidebar-menu,
body.shell-locked nav.navbar,
body.shell-locked .navbar,
body.shell-locked #nav-tabs,
body.shell-locked .nav-tab-item,
body.shell-locked .nav-tabs-container {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}

.modal-backdrop.show {
    background-color: #071426 !important;
    opacity: .72 !important;
}

/* Bootstrap aplica fade no modal, no dialog e no backdrop. Em telas dentro
 * de iframe isso cria um frame intermediário claro antes da superfície estar
 * pronta. As superfícies entram no estado final de uma vez. */
.modal.fade,
.modal.fade.show,
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.offcanvas,
.offcanvas.show,
.modal.fade .modal-dialog {
    transition: none !important;
}

.modal.fade {
    opacity: 1 !important;
}

.modal-backdrop {
    opacity: .72 !important;
}

.modal.fade .modal-dialog {
    transform: none !important;
}

/* Evita a tela branca entre a criação da aba e o primeiro paint do iframe. */
#iframe-container {
    background: var(--yms-canvas) !important;
}

#iframe-container.is-loading::before {
    content: "";
    position: absolute;
    inset: 1.25rem;
    z-index: 1;
    border: 1px solid rgba(215, 224, 237, .9);
    border-radius: var(--yms-radius-lg);
    background: linear-gradient(90deg, #eef2f7 25%, #f9fbfd 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: yms-skeleton-shimmer 1.25s ease-in-out infinite;
    box-shadow: var(--yms-shadow-sm);
}

#iframe-container.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(36, 81, 155, .16);
    border-top-color: var(--yms-brand);
    border-right-color: var(--yms-accent);
    border-radius: 50%;
    animation: yms-shell-spinner .8s linear infinite;
}

.tab-iframe {
    z-index: 2;
    background: var(--yms-canvas);
    transition: opacity .12s ease;
}

.tab-iframe.is-loading {
    opacity: 0;
    pointer-events: none;
}

@keyframes yms-shell-spinner {
    to { transform: rotate(360deg); }
}

@media (max-width: 991.98px) {
    #iframe-container.is-loading::before {
        inset: .75rem;
    }
}

/* Central de abas: nenhuma aba fica inacessível quando a faixa lota. */
.yms-tabs-overflow {
    flex: 0 0 auto;
}

.yms-tabs-overflow-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 42px;
    height: 36px;
    padding: 0 .6rem;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1) !important;
    color: #eef4fc !important;
}

.yms-tabs-overflow-trigger:hover,
.yms-tabs-overflow-trigger:focus-visible {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

.yms-tabs-overflow-trigger.d-none {
    display: none !important;
}

.yms-tabs-overflow-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--yms-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}

.yms-tabs-overflow-menu {
    width: min(320px, calc(100vw - 1.5rem));
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.yms-tab-menu-item {
    display: flex !important;
    align-items: center;
    min-height: 38px;
    gap: .5rem;
    white-space: nowrap;
}

.yms-tab-menu-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.yms-tab-menu-item.active {
    background: var(--yms-brand-light) !important;
    color: var(--yms-brand-dark) !important;
    font-weight: 700;
}

/* Spinner global profissional e bloqueante. */
body.yms-loading-active {
    overflow: hidden !important;
}

.jquery-spinner-wrap,
.yms-global-loading-overlay {
    z-index: 6000 !important;
    background: rgba(7, 20, 38, .76) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.jquery-spinner-circle {
    flex-direction: column;
    gap: .85rem;
}

.jquery-spinner-circle::after {
    content: "Carregando...";
    color: #f8fbff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.jquery-spinner-bar,
.yms-global-loading-spinner {
    display: block;
    width: 54px !important;
    height: 54px !important;
    border: 4px solid rgba(255, 255, 255, .2) !important;
    border-top-color: #f02b3a !important;
    border-right-color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(202, 33, 40, .08), 0 0 28px rgba(240, 43, 58, .34);
    animation: yms-professional-spin .9s linear infinite;
}

.yms-global-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.yms-global-loading-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Loading de ação: bloqueia a tela sem transformar o conteúdo em um flash
 * preto. O cartão escuro mantém contraste e comunica que a operação está
 * em andamento. */
.yms-global-loading-overlay {
    z-index: 120000 !important;
    background: rgba(244, 247, 251, .84) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.yms-global-loading-card {
    display: flex;
    min-width: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .65rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: rgba(16, 42, 76, .88);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    color: #fff;
}

.yms-global-loading-card strong {
    font-size: .86rem;
    letter-spacing: .04em;
}

.yms-global-loading-card small {
    color: #bdcce0;
    font-size: .72rem;
}

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

@media (max-width: 767.98px) {
    .modal-dialog {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        margin: .5rem auto !important;
    }

    .offcanvas {
        width: min(100vw, 390px) !important;
        max-width: calc(100vw - .4rem) !important;
        border-radius: 16px 0 0 16px !important;
    }

    .offcanvas.offcanvas-end {
        top: .2rem !important;
        right: .2rem !important;
        bottom: .2rem !important;
        height: calc(100% - .4rem) !important;
    }

    .offcanvas.offcanvas-start {
        top: .2rem !important;
        bottom: .2rem !important;
        height: calc(100% - .4rem) !important;
        border-radius: 0 16px 16px 0 !important;
    }

    .yms-tabs-overflow-trigger {
        min-width: 38px;
        height: 34px;
        padding: 0 .45rem;
    }
}

/* O topbar mobile (com o menu de abas) segue visível até 991px desde que a
 * sidebar passou a aparecer só a partir de 992px; o menu precisa da mesma
 * ancoragem fixa nessa faixa inteira, não só no celular. */
@media (max-width: 991.98px) {
    .yms-tabs-overflow-menu {
        position: fixed !important;
        top: 58px !important;
        right: .5rem !important;
        left: auto !important;
        width: min(300px, calc(100vw - 1rem));
        max-height: calc(100vh - 76px);
    }
}

/* Há um único skeleton por rota durante o boot inicial do shell. Fora dessa
 * janela, o skeleton do #iframe-container é o único feedback de carregamento
 * ao trocar para uma aba ainda não hidratada (lazy-load) — desabilitá-lo
 * incondicionalmente deixava a área em branco sem nenhum indício de loading. */
body.yms-shell-booting .body-wrapper::before,
body.yms-shell-booting .body-wrapper::after,
body.yms-shell-booting #iframe-container.is-loading::before,
body.yms-shell-booting #iframe-container.is-loading::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Ajustes finais do chrome global. O controle fica preso ao trilho do aside,
 * na posição de referência indicada pelo produto, sem ocupar o conteúdo.
 * O posicionamento base vive só em ".layout-shell > #btn-toggle-sidebar"
 * (mais abaixo, contrato único do aside) — aqui ficam apenas os estados de
 * interação, que esse seletor mais específico não precisa repetir. */
@media (min-width: 992px) {
    #btn-toggle-sidebar.sidebar-rail-toggle:hover,
    #btn-toggle-sidebar.sidebar-rail-toggle:focus-visible {
        background: var(--yms-brand-light) !important;
        color: var(--yms-brand-dark) !important;
        box-shadow: 0 7px 18px rgba(36, 81, 155, .22) !important;
    }

    #btn-toggle-sidebar.sidebar-rail-toggle:active {
        transform: scale(.94) !important;
    }
}

/* O plus/minus é mais legível que a seta fina e comunica o estado sem ruído. */
.menu-link.menu-toggle {
    padding-right: .85rem !important;
}

.menu-link.menu-toggle::after {
    display: none !important;
    content: none !important;
}

.menu-toggle-control {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid rgba(169, 193, 222, .22);
    border-radius: 7px;
    color: #a8bbd3;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.menu-toggle-control .bx {
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease;
}

.menu-item.open > .menu-link .menu-toggle-control {
    border-color: rgba(151, 185, 235, .55);
    background: rgba(151, 185, 235, .14);
    color: #d9e8fb;
}

.menu-item.open > .menu-link .menu-toggle-control .bx {
    transform: rotate(45deg);
}

.menu-item:not(.active) > .menu-link:hover .menu-toggle-control {
    border-color: rgba(206, 225, 249, .5);
    color: #fff;
}

@media (min-width: 992px) {
    body.layout-sidebar-compact .layout-sidebar:not(:hover) .menu-toggle-control {
        display: none;
    }
}

/* Apenas um spinner visual. O plugin antigo continua carregado por
 * compatibilidade, mas sua camada não é mais desenhada dentro de cada iframe. */
.jquery-spinner-wrap {
    display: none !important;
}

/* O shell já possui um único overlay card. Remover o pseudo-spinner antigo
 * evita a sequência skeleton -> spinner legado -> spinner compartilhado. */
#iframe-container.is-loading::after {
    display: none !important;
    content: none !important;
}

/* Menu do usuário: trigger sem a seta padrão do Bootstrap e dropdown com
 * cabeçalho consistente no desktop e no mobile. */
.user-menu-trigger {
    gap: .25rem;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

.user-menu-trigger.dropdown-toggle::after {
    display: none !important;
}

.user-menu-chevron {
    color: #dbe8f8;
    font-size: 1.15rem;
    transition: transform .18s ease;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
}

.yms-user-dropdown {
    width: min(286px, calc(100vw - 1rem)) !important;
    min-width: min(286px, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
    padding: .45rem !important;
    border-radius: 15px !important;
    margin-top: .6rem !important;
}

.yms-user-dropdown .dropdown-user {
    position: relative;
    min-width: 0;
    padding: .75rem .75rem .85rem;
    border-radius: 11px;
    background: #f5f8fc;
}

.yms-user-dropdown .dropdown-user::after {
    display: none;
}

.yms-user-dropdown .dropdown-user .user-avatar-circle {
    width: 38px;
    height: 38px;
    font-size: .85rem;
    background: var(--yms-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.yms-user-dropdown .dropdown-user-info {
    min-width: 0;
}

.yms-user-dropdown .dropdown-user-name,
.yms-user-dropdown .dropdown-user-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yms-user-dropdown .dropdown-user-name {
    color: var(--yms-ink);
    font-size: .9rem;
    font-weight: 700;
}

.yms-user-dropdown .dropdown-user-meta {
    margin-top: .18rem;
    color: var(--yms-muted);
    font-size: .72rem;
}

.yms-user-dropdown .btn-exit {
    width: 100%;
    margin-top: .35rem;
    padding: .7rem .75rem;
    border: 0;
    border-top: 0;
    border-radius: 10px;
    background: transparent;
    color: #c92a35 !important;
    text-align: left;
}

.yms-user-dropdown .btn-exit:hover,
.yms-user-dropdown .btn-exit:focus-visible {
    background: #fff0f1 !important;
    color: #a91f2a !important;
}

.yms-mobile-topbar .user-menu-trigger {
    padding: 0 !important;
}

.yms-mobile-topbar .yms-mobile-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .yms-mobile-topbar {
        position: relative;
        z-index: 1200;
        overflow: visible !important;
    }

    .yms-mobile-topbar .yms-user-dropdown {
        position: fixed !important;
        top: 58px !important;
        right: .5rem !important;
        left: auto !important;
        margin-top: .35rem !important;
    }

    .yms-user-dropdown {
        width: min(286px, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
    }
}

/* A regra legada usa #userDropdownMobile + .dropdown-menu e desloca o menu
 * para 100% da viewport, deixando-o fora da tela em celulares. A versão
 * atual é fixa ao topo e permanece sempre acessível. */
@media (max-width: 991.98px) {
    #userDropdownMobile + .yms-user-dropdown {
        position: fixed !important;
        top: 58px !important;
        right: .5rem !important;
        left: auto !important;
        transform: none !important;
        margin-top: .35rem !important;
    }

    /* Em tablets e celulares a navegação passa para o topbar/bottom nav.
     * O aside desktop não pode participar do layout nem responder ao estado
     * salvo do desktop, evitando o conteúdo espremido ao tocar no header. */
    .layout-sidebar,
    #btn-toggle-sidebar.sidebar-rail-toggle {
        display: none !important;
    }

    .layout-page,
    body.layout-sidebar-pinned .layout-page,
    body.layout-sidebar-compact .layout-page {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
    }
}

/* Última regra intencionalmente global: nenhuma rota deve repetir o
 * breadcrumb quando o shell já exibe a aba ativa. */
.breadcrumb-wrapper {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Contrato visual final do shell desktop. O estado compacto é controlado
 * somente pelo botão do trilho; o hover não altera a largura do aside. */
@media (min-width: 992px) {
    body:not(.layout-sidebar-compact) .layout-sidebar,
    body:not(.layout-sidebar-compact) .layout-sidebar:hover {
        width: var(--yms-sidebar-expanded) !important;
        min-width: var(--yms-sidebar-expanded) !important;
    }

    body.layout-sidebar-compact .layout-sidebar,
    body.layout-sidebar-compact .layout-sidebar:hover {
        width: var(--yms-sidebar-compact) !important;
        min-width: var(--yms-sidebar-compact) !important;
    }

    body.layout-sidebar-compact .sidebar-search,
    body.layout-sidebar-compact .menu-link > div,
    body.layout-sidebar-compact .menu-toggle-control {
        display: none !important;
    }

    body.layout-sidebar-compact .menu-link {
        justify-content: center !important;
        padding-inline: .7rem !important;
    }

body.layout-sidebar-compact .menu-icon {
        margin-inline: auto !important;
    }
}

/*
 * Contrato único do aside.
 *
 * O shell antigo usava `layout-sidebar-collapsed` ao mesmo tempo que o
 * estado novo usava as classes do body. Como os dois contratos tinham
 * especificidades diferentes, o aside podia ficar com a largura expandida,
 * mas com logo/itens compactos (e o trilho em x=65). O layout-shell não
 * participa de nenhum estilo legado; daqui em diante a largura e o conteúdo
 * dependem somente de `layout-sidebar-compact`.
 */
@media (min-width: 992px) {
    .layout-shell {
        --yms-current-sidebar: var(--yms-sidebar-expanded);
    }

    body.layout-sidebar-compact .layout-shell {
        --yms-current-sidebar: var(--yms-sidebar-compact);
    }

    body.layout-sidebar-pinned .layout-shell > .layout-sidebar,
    body.layout-sidebar-pinned .layout-shell > .layout-sidebar:hover,
    body.layout-sidebar-compact .layout-shell > .layout-sidebar,
    body.layout-sidebar-compact .layout-shell > .layout-sidebar:hover {
        box-sizing: border-box !important;
        flex: 0 0 var(--yms-current-sidebar) !important;
        width: var(--yms-current-sidebar) !important;
        min-width: var(--yms-current-sidebar) !important;
        max-width: var(--yms-current-sidebar) !important;
        overflow: hidden !important;
        transition: width .2s ease, flex-basis .2s ease !important;
    }

    body.layout-sidebar-pinned .layout-shell > .layout-page,
    body.layout-sidebar-compact .layout-shell > .layout-page {
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        width: calc(100vw - var(--yms-current-sidebar)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - var(--yms-current-sidebar)) !important;
        margin-left: var(--yms-current-sidebar) !important;
    }

    .layout-shell > .layout-page > #iframe-container {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .layout-shell .sidebar-header {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 66px !important;
        overflow: hidden !important;
        padding: .75rem 1rem !important;
    }

    /* Marca por extenso quando pinado (ou em prévia de hover); só o ícone
       quando compacto. Dimensionada pela ALTURA (32px), não pela largura —
       a imagem é bem larga (1125x294) e, forçada a uma largura fixa, exigia
       mais altura do que os ~42px úteis do cabeçalho, cortando pelo
       overflow:hidden. Pela altura ela sempre cabe inteira. */
    .layout-shell .sidebar-logo {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .layout-shell .sidebar-logo .full-logo {
        display: block !important;
        width: auto !important;
        height: 32px !important;
        max-width: 100% !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .layout-shell .sidebar-logo .mini-logo {
        display: none !important;
    }

    body.layout-sidebar-compact .layout-shell .sidebar-logo {
        justify-content: center !important;
    }

    body.layout-sidebar-compact .layout-shell .sidebar-logo .full-logo {
        display: none !important;
    }

    body.layout-sidebar-compact .layout-shell .sidebar-logo .mini-logo {
        display: block !important;
        width: 36px !important;
        height: 36px !important;
        max-width: 100% !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .layout-shell .sidebar-search {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .layout-shell .sidebar-menu {
        min-height: 0 !important;
        width: 100% !important;
    }

    /* Navegação alinhada à esquerda, sem bullets herdados nos submenus. */
    .layout-shell .menu-inner,
    .layout-shell .menu-sub {
        width: 100% !important;
        min-width: 0 !important;
        list-style: none !important;
    }

    .layout-shell .menu-link {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: .7rem !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .layout-shell button.menu-link {
        border: 0 !important;
        font: inherit !important;
        cursor: pointer !important;
        background: transparent;
    }

    .layout-shell .menu-link > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .layout-shell .menu-link.menu-toggle::after,
    .layout-shell .menu-sub .menu-link::before {
        display: none !important;
        content: none !important;
    }

    .layout-shell .menu-sub .menu-item {
        padding-left: .55rem !important;
    }

    .layout-shell .menu-sub > .menu-item > .menu-link {
        padding-left: 1.55rem !important;
    }

    .layout-shell .menu-sub .menu-sub > .menu-item > .menu-link {
        padding-left: 2.55rem !important;
    }

    .layout-shell .menu-item.menu-current > .menu-link {
        background: rgba(91, 137, 204, .12) !important;
        color: #e4efff !important;
    }

    .layout-shell .menu-toggle-control {
        flex: 0 0 22px !important;
        margin-left: auto !important;
    }

    body.layout-sidebar-compact .layout-shell .sidebar-search,
    body.layout-sidebar-compact .layout-shell .menu-link > div,
    body.layout-sidebar-compact .layout-shell .menu-toggle-control {
        display: none !important;
    }

    body.layout-sidebar-compact .layout-shell .menu-link {
        justify-content: center !important;
        gap: 0 !important;
        padding-inline: .7rem !important;
    }

    body.layout-sidebar-compact .layout-shell .menu-icon {
        margin-inline: auto !important;
    }

    body.layout-sidebar-compact .layout-shell .menu-item.menu-current > .menu-link {
        background: var(--yms-brand) !important;
        box-shadow: 0 6px 14px rgba(36, 81, 155, .26) !important;
    }

    /* No modo compacto, apenas os atalhos de primeiro nível ficam visíveis.
     * Um submenu aberto não pode virar um bloco azul sem texto ao lado do
     * conteúdo; ele volta a aparecer assim que o menu for expandido. */
    body.layout-sidebar-compact .layout-shell .menu-sub {
        display: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    /* O botão é sempre externo e fica exatamente sobre a borda do aside. */
    .layout-shell > #btn-toggle-sidebar.sidebar-rail-toggle {
        position: fixed !important;
        top: calc(66px + .8rem) !important;
        right: auto !important;
        left: calc(var(--yms-current-sidebar) - 15px) !important;
        z-index: 1300 !important;
        display: inline-flex !important;
        width: 30px !important;
        height: 30px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #dce6f4 !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: var(--yms-brand) !important;
        box-shadow: 0 5px 16px rgba(15, 35, 65, .16) !important;
        transform: none !important;
    }
}

/* Passar o mouse sobre o aside compacto expande como overlay temporário
 * (sem empurrar o conteúdo — .layout-page não muda de margem) para dar uma
 * prévia dos rótulos sem precisar fixar o estado expandido. O clique no
 * trilho continua sendo a única forma de persistir o estado; clicar em um
 * item do menu também recolhe de volta (ver navigation-manager.js). */
@media (min-width: 992px) {
    body.layout-sidebar-compact .layout-shell > .layout-sidebar:hover {
        width: var(--yms-sidebar-expanded) !important;
        min-width: var(--yms-sidebar-expanded) !important;
        max-width: var(--yms-sidebar-expanded) !important;
        overflow: visible !important;
        box-shadow: 8px 0 24px rgba(13, 32, 61, .28) !important;
        /* A navbar (.yms-navbar) tem z-index:1200 e começa exatamente onde a
         * sidebar compacta termina (x=80px) — como o hover é overlay (não
         * empurra o conteúdo), sem isso a navbar ficava por cima da faixa de
         * 80-280px da sidebar expandida, escondendo tudo que caísse ali
         * (incluindo a logo, centralizada nesse intervalo). */
        z-index: 1250 !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .sidebar-header {
        overflow: visible !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .sidebar-logo {
        justify-content: flex-start !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .sidebar-logo .full-logo {
        display: block !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .sidebar-logo .mini-logo {
        display: none !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .sidebar-search,
    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .menu-link > div,
    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .menu-toggle-control {
        display: block !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .menu-link {
        justify-content: flex-start !important;
        gap: .7rem !important;
        padding-inline: 1rem !important;
    }

    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .menu-icon {
        margin-inline: 0 !important;
    }

    /* Sem isso, uma categoria com subitens (ex.: Agendamento) não mostra nada
     * ao clicar enquanto o aside está compacto — a regra de compacto esconde
     * todo .menu-sub incondicionalmente, mesmo com o item .open e mesmo
     * durante a prévia por hover. */
    body.layout-sidebar-compact .layout-shell .layout-sidebar:hover .menu-item.open > .menu-sub {
        display: block !important;
        max-height: 500px !important;
        overflow: visible !important;
    }

    /* O botão do trilho é irmão do aside (não filho), então precisa de um
     * seletor de irmão adjacente para acompanhar a expansão por hover — sem
     * isso ele ficava parado na borda do modo compacto, flutuando dentro do
     * aside já expandido em vez de ficar na borda dele. */
    body.layout-sidebar-compact .layout-shell > .layout-sidebar:hover + #btn-toggle-sidebar.sidebar-rail-toggle {
        left: calc(var(--yms-sidebar-expanded) - 15px) !important;
    }
}

@media (max-width: 991.98px) {
    .layout-shell,
    .layout-shell > .layout-page {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }
}

/* Sem breadcrumb, as ações ficam sempre agrupadas à direita e podem quebrar
 * em uma segunda linha sem sobrepor título ou conteúdo. */
.yms-page-toolbar-row,
.yms-page-toolbar-row > *,
.yms-page-toolbar-row .col,
.yms-page-toolbar-row .col-auto {
    min-width: 0;
}

.yms-page-toolbar-row > .d-flex:last-child,
.yms-page-toolbar-row > .col-auto:last-child,
.yms-page-toolbar-row > .ms-auto {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

.yms-page-heading {
    min-width: 0;
}

/* Rótulo de contexto usado tanto no cabeçalho da página quanto no header dos
 * offcanvas de filtro; sem essa regra base ele saía sem estilo nenhum, colado
 * no título ao lado. */
.yms-eyebrow {
    display: inline-block;
    color: var(--yms-brand, #24519b);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.yms-page-heading .yms-eyebrow {
    display: block;
    margin-bottom: .15rem;
}

.yms-page-title {
    margin: 0;
    color: var(--yms-ink);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 750;
    line-height: 1.15;
}

/* As colunas Bootstrap são relativas à viewport. Dentro de um offcanvas,
 * isso comprime os campos em colunas estreitas e corta datas/selects. */
.yms-filter-offcanvas .offcanvas-body .row > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.yms-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: min(100%, 360px);
    white-space: nowrap;
}

.yms-filter-trigger-value {
    max-width: min(220px, 32vw);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--yms-ink-muted);
    font-size: .78rem;
}

/* Offcanvas de filtro compartilhado em todas as telas do módulo. */
.yms-filter-offcanvas {
    width: min(430px, calc(100vw - .75rem)) !important;
    max-width: 100vw;
    border: 0 !important;
    border-radius: 20px 0 0 20px;
    box-shadow: -18px 0 50px rgba(10, 31, 58, .18);
}

.yms-filter-offcanvas .offcanvas-header {
    padding: 1.25rem 1.25rem .9rem;
    border-bottom: 1px solid var(--yms-border);
}

.yms-filter-offcanvas .offcanvas-header h5 {
    margin: .15rem 0 0;
    color: var(--yms-ink);
    font-weight: 750;
}

.yms-filter-offcanvas .offcanvas-body {
    padding: 1.25rem;
    background: #fbfcfe;
}

.yms-filter-offcanvas .offcanvas-footer {
    display: flex;
    gap: .6rem;
    padding: .9rem 1.25rem 1.1rem;
    border-top: 1px solid var(--yms-border);
    background: #fff;
}

.yms-filter-offcanvas .offcanvas-footer .btn {
    flex: 1 1 0;
}

.yms-filter-offcanvas .form-label {
    color: var(--yms-ink);
    font-size: .76rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .yms-filter-offcanvas {
        width: min(calc(100vw - .35rem), 430px) !important;
        border-radius: 18px 0 0 18px;
    }

    .yms-page-toolbar-row {
        align-items: stretch !important;
    }

    .yms-page-toolbar-row > .d-flex:last-child,
    .yms-page-toolbar-row > .col-auto:last-child {
        width: 100%;
    }

    .yms-page-toolbar-row > .d-flex:last-child {
        flex-wrap: wrap;
    }

    .yms-filter-trigger {
        max-width: 100%;
    }

    .yms-filter-trigger-value {
        max-width: 46vw;
    }
}

/* O sistema tem botões Print/PDF do DataTables e telas de recibo/comprovante;
 * sem isso elas imprimiam com sidebar, tab bar e bottom nav junto. */
@media print {
    .layout-sidebar,
    #btn-toggle-sidebar,
    .layout-page > .navbar,
    .yms-mobile-topbar,
    .mbn,
    .mbn-backdrop,
    .mbn-sheet,
    .yms-global-loading-overlay,
    .yms-page-toolbar-row,
    .yms-filter-offcanvas,
    .offcanvas-backdrop,
    .breadcrumb-wrapper,
    .dt-buttons,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info {
        display: none !important;
    }

    .layout-shell,
    .layout-shell > .layout-page,
    #iframe-container,
    .body-wrapper,
    .yms-page-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .table-responsive {
        overflow: visible !important;
    }
}