/*
|--------------------------------------------------------------------------
| Sobreposições: modal, drawer, menu de ações, tooltip
|--------------------------------------------------------------------------
|
| Usa o JavaScript do Bootstrap 5 (já carregado no layout); aqui só o visual.
| Modais e tooltips vão para o <body>, fora de .ds, por isso as classes
| deste arquivo não dependem do escopo .ds.
|
| Modal x Drawer:
|   Modal   decisão curta que interrompe (confirmar, escolher, formulário
|           de até ~6 campos). Tamanhos: sm 400 · md 560 · lg 800 · xl 1140.
|   Drawer  tarefa lateral sem perder o contexto da lista (filtros
|           avançados, detalhes rápidos, edição longa). Larguras 400/560/720.
|
*/

/* Modal (markup do Bootstrap + .ds-modal) */

.ds-modal .modal-dialog {
    --bs-modal-width: var(--ds-modal-md);
}

.ds-modal--sm .modal-dialog { --bs-modal-width: var(--ds-modal-sm); }
.ds-modal--lg .modal-dialog { --bs-modal-width: var(--ds-modal-lg); }
.ds-modal--xl .modal-dialog { --bs-modal-width: var(--ds-modal-xl); }

.ds-modal .modal-content {
    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-xl);

    background: var(--ds-color-surface);

    color: var(--ds-color-text);

    font: var(--ds-text-body);

    box-shadow: var(--ds-shadow-overlay);
}

.ds-modal .modal-header {
    align-items: flex-start;
    gap: var(--ds-space-3);

    padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-3);

    border-bottom: 0;
}

.ds-modal .modal-title {
    font: var(--ds-text-section-title);
    letter-spacing: var(--ds-text-section-title-tracking);
}

.ds-modal .btn-close {
    width: 28px;
    height: 28px;
    margin: -4px -8px 0 auto;
    padding: 0;

    border-radius: var(--ds-radius-md);

    background-size: 11px;

    opacity: .55;
}

.ds-modal .btn-close:hover {
    background-color: var(--ds-color-secondary);

    opacity: .9;
}

.ds-modal .btn-close:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: 0;

    box-shadow: none;
}

.ds-modal .modal-body {
    padding: 0 var(--ds-space-6) var(--ds-space-5);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body);
}

/* Corpo com rolagem interna: cabeçalho e rodapé ficam visíveis */
.ds-modal .modal-dialog-scrollable .modal-body {
    padding-top: var(--ds-space-4);

    border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-modal .modal-footer {
    gap: var(--ds-space-2);

    padding: var(--ds-space-3) var(--ds-space-6);

    border-top: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl);

    background: var(--ds-color-surface-subtle);
}

.ds-modal .modal-footer > * {
    margin: 0;
}

/* Destrutivo: ícone de alerta ao lado do título */
.ds-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--ds-color-danger-bg);

    color: var(--ds-color-danger-solid);

    font-size: 20px;
}

.modal-backdrop.show {
    --bs-backdrop-bg: var(--ds-color-backdrop);
    --bs-backdrop-opacity: 1;
}

/* Drawer (offcanvas do Bootstrap + .ds-drawer) */

.ds-drawer.offcanvas-end,
.ds-drawer.offcanvas-start {
    --bs-offcanvas-width: var(--ds-drawer-md);

    border-color: var(--ds-color-border);

    background: var(--ds-color-surface);

    color: var(--ds-color-text);

    font: var(--ds-text-body);

    box-shadow: var(--ds-shadow-overlay);
}

.ds-drawer--sm.offcanvas-end { --bs-offcanvas-width: var(--ds-drawer-sm); }
.ds-drawer--lg.offcanvas-end { --bs-offcanvas-width: var(--ds-drawer-lg); }

.ds-drawer .offcanvas-header {
    padding: var(--ds-space-4) var(--ds-space-5);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-drawer .offcanvas-title {
    font: var(--ds-text-section-title);
}

.ds-drawer .offcanvas-body {
    padding: var(--ds-space-5);
}

.ds-drawer__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-2);

    padding: var(--ds-space-3) var(--ds-space-5);

    border-top: var(--ds-border-width) solid var(--ds-color-border);

    background: var(--ds-color-surface-subtle);
}

/* Menu de ações (dropdown do Bootstrap + .ds-menu) */

.ds-menu.dropdown-menu {
    min-width: 200px;
    padding: var(--ds-space-1);

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);

    background: var(--ds-color-surface);

    font: var(--ds-text-body-sm);

    box-shadow: var(--ds-shadow-floating);
}

.ds-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);

    min-height: 32px;
    padding: 0 var(--ds-space-2);

    border-radius: var(--ds-radius-md);

    color: var(--ds-color-text);

    font: var(--ds-text-body-sm);
}

.ds-menu .dropdown-item .ph {
    color: var(--ds-color-text-muted);

    font-size: 16px;
}

.ds-menu .dropdown-item:hover,
.ds-menu .dropdown-item:focus {
    background: var(--ds-color-surface-hover);

    color: var(--ds-color-text);
}

.ds-menu .dropdown-item.is-danger,
.ds-menu .dropdown-item.is-danger .ph {
    color: var(--ds-color-danger-fg);
}

.ds-menu .dropdown-item.disabled,
.ds-menu .dropdown-item:disabled {
    color: var(--ds-color-text-disabled);
}

.ds-menu .dropdown-divider {
    margin: var(--ds-space-1) calc(var(--ds-space-1) * -1);

    border-color: var(--ds-color-border);
}

.ds-menu .dropdown-header {
    padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-1);

    color: var(--ds-color-text-muted);

    font: var(--ds-text-caption);
}

/* Tooltip (data-bs-custom-class="ds-tooltip") */

.ds-tooltip {
    --bs-tooltip-bg: var(--ds-graphite-900);
    --bs-tooltip-color: var(--ds-graphite-0);
    --bs-tooltip-border-radius: var(--ds-radius-md);
    --bs-tooltip-padding-x: 8px;
    --bs-tooltip-padding-y: 5px;
    --bs-tooltip-max-width: 260px;
    --bs-tooltip-opacity: 1;

    font: var(--ds-text-caption);
}

/*
| Seções dentro do modal: título pequeno + ação à direita, separadas por linha.
|   <section class="ds-modal-section">
|     <div class="ds-modal-section__header"><h3 class="ds-modal-section__title">…</h3> [botão]</div>
|     …
|   </section>
*/

.ds-modal-section + .ds-modal-section {
    margin-top: var(--ds-space-5);
    padding-top: var(--ds-space-5);

    border-top: var(--ds-border-width) solid var(--ds-color-border-subtle);
}

.ds-modal-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);

    margin-bottom: var(--ds-space-3);
}

.ds-modal-section__title {
    margin: 0 0 var(--ds-space-3);

    font: var(--ds-text-heading);
}

.ds-modal-section__header > .ds-modal-section__title {
    margin: 0;
}

.ds-modal-section__result:not(:empty) {
    margin-top: var(--ds-space-3);
}