/* Etapa 9 — Ajustes responsivos finais para notebook compacto, tablet e mobile.
   Esta camada é carregada por último para corrigir largura útil, sidebar, Eventos, dashboard e tabelas sem alterar regra de negócio. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* Notebooks compactos: reduz a sidebar para liberar área útil para gráficos, Kanban e tabelas. */
@media (min-width: 1281px) and (max-width: 1440px) {
    .app-shell {
        grid-template-columns: 248px minmax(0, 1fr) !important;
        background: linear-gradient(90deg, #20142f 0 248px, transparent 248px) !important;
    }

    .sidebar {
        padding: 18px 14px !important;
    }

    .brand {
        gap: 10px;
        margin-bottom: 18px;
    }

    .side-nav {
        gap: 4px;
    }

    .side-nav a {
        padding: 9px 10px;
        border-radius: 11px;
        font-size: .93rem;
    }

    .content {
        max-width: none !important;
        padding: 22px 22px 86px !important;
    }

    .topbar {
        height: 66px;
        padding-inline: 20px;
    }
}

@media (min-width: 1061px) and (max-width: 1280px) {
    .app-shell {
        grid-template-columns: 224px minmax(0, 1fr) !important;
        background: linear-gradient(90deg, #20142f 0 224px, transparent 224px) !important;
    }

    .sidebar {
        padding: 16px 12px !important;
    }

    .brand {
        gap: 8px;
        margin-bottom: 16px;
    }

    .brand-copy strong {
        font-size: .98rem;
    }

    .brand-copy small {
        font-size: .74rem;
    }

    .sidebar-toggle--brand {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        border-radius: 12px;
    }

    .side-nav {
        gap: 3px;
    }

    .side-nav a {
        gap: 8px;
        padding: 8px 9px;
        border-radius: 10px;
        font-size: .88rem;
        line-height: 1.2;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .topbar {
        height: 62px;
        padding-inline: 16px;
    }

    .content {
        max-width: none !important;
        padding: 16px 16px 82px !important;
    }

    .page-heading {
        gap: 12px;
        margin-bottom: 14px;
    }

    .page-heading h1,
    .dashboard-final-hero__copy h1 {
        font-size: clamp(1.35rem, 1.75vw, 1.8rem) !important;
    }

    .page-heading p,
    .dashboard-final-hero__copy p {
        font-size: .88rem;
        line-height: 1.45;
    }

    .button {
        min-height: 38px;
        padding: 8px 11px;
        border-radius: 11px;
        font-size: .88rem;
    }
}

/* Dashboard em notebook compacto: mantém os gráficos dentro da área útil e evita cards altos demais. */
@media (min-width: 1061px) and (max-width: 1440px) {
    .dashboard-final-hero {
        min-height: 112px;
        margin-bottom: 12px;
        padding: 18px 20px;
        border-radius: 24px;
    }

    .dashboard-final-priority-row,
    .dashboard-final-secondary-row {
        gap: 12px;
        margin-bottom: 12px;
    }

    .dashboard-final-priority-row {
        grid-template-columns: minmax(255px, .82fr) minmax(0, 1.38fr) !important;
    }

    .dashboard-final-secondary-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .dashboard-final-card {
        padding: 15px !important;
        border-radius: 20px;
    }

    .dashboard-final-card__header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .dashboard-final-card__header h2 {
        font-size: clamp(1rem, 1.35vw, 1.2rem) !important;
        line-height: 1.12;
    }

    .dashboard-final-card__header p {
        font-size: .78rem !important;
        line-height: 1.35;
    }

    .dashboard-final-kicker {
        padding: 6px 8px;
        font-size: .62rem;
    }

    .dashboard-final-speedometer {
        min-height: 154px !important;
        padding: 12px 8px 16px !important;
    }

    .dashboard-final-speedometer svg {
        width: min(205px, 94%) !important;
    }

    .dashboard-final-speedometer__value strong {
        font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
    }

    .dashboard-final-speedometer__value span {
        font-size: .75rem !important;
    }

    .dashboard-final-attention-summary,
    .dashboard-final-finance-total {
        padding: 12px !important;
        border-radius: 16px;
    }

    .dashboard-final-attention-grid {
        gap: 8px !important;
    }

    .dashboard-final-attention-item {
        min-height: 76px !important;
        padding: 10px !important;
        border-radius: 15px;
    }

    .dashboard-final-attention-item strong {
        font-size: 1.28rem !important;
    }

    .dashboard-final-attention-item small,
    .dashboard-final-attention-item span,
    .dashboard-final-metric-strip span,
    .dashboard-final-finance-row span,
    .dashboard-final-event span,
    .dashboard-final-event small,
    .dashboard-final-reminder small {
        font-size: .66rem !important;
        line-height: 1.28;
    }

    .dashboard-final-metric-strip div {
        min-height: 64px !important;
        padding: 10px !important;
    }

    .dashboard-final-list {
        gap: 8px !important;
    }

    .dashboard-final-event,
    .dashboard-final-reminder {
        gap: 9px !important;
        padding: 10px !important;
        border-radius: 15px;
    }

    .dashboard-final-event time,
    .dashboard-final-reminder > span {
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px;
    }
}

/* Entre 1061px e 1160px a área real depois da sidebar é pequena: empilha apenas os cards secundários. */
@media (min-width: 1061px) and (max-width: 1160px) {
    .dashboard-final-priority-row {
        grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr) !important;
    }

    .dashboard-final-secondary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-final-card--relationship {
        grid-column: 1 / -1;
    }
}

/* Eventos/Kanban: colunas mais compactas em notebooks para manter uma linha horizontal útil sem estrangular os cards. */
@media (min-width: 1061px) and (max-width: 1440px) {
    body.has-kanban-page .app-shell {
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
    }

    body.has-kanban-page .main-area {
        min-width: 0;
        height: 100dvh;
        overflow: hidden;
    }

    body.has-kanban-page .topbar {
        flex: 0 0 auto;
    }

    body.has-kanban-page .content {
        height: calc(100dvh - 66px);
        min-height: 0;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        padding-bottom: 14px !important;
    }

    body.has-kanban-page .opportunity-kanban-page {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    body.has-kanban-page .opportunity-heading {
        flex: 0 0 auto;
        margin-bottom: 10px;
    }

    body.has-kanban-page .opportunity-heading .heading-copy p {
        max-width: 680px;
    }

    body.has-kanban-page .kanban-board,
    body.has-kanban-page .kanban-board[data-kanban-board] {
        flex: 1 1 auto;
        min-height: 0;
        grid-auto-columns: minmax(212px, 228px) !important;
        gap: 8px !important;
        padding-bottom: 12px !important;
    }

    body.has-kanban-page .kanban-column {
        min-height: 0 !important;
        height: 100%;
        border-radius: 18px !important;
    }

    body.has-kanban-page .kanban-column-header {
        padding: 12px 12px 10px !important;
    }

    body.has-kanban-page .kanban-column-header h2 {
        font-size: .9rem !important;
        line-height: 1.18;
    }

    body.has-kanban-page .kanban-column-header small {
        font-size: .7rem !important;
    }

    body.has-kanban-page .kanban-cards {
        min-height: 0;
        overflow-y: auto;
        padding: 10px !important;
    }

    body.has-kanban-page .kanban-card {
        padding: 11px !important;
        border-radius: 16px !important;
    }

    body.has-kanban-page .kanban-card-summary h3 {
        font-size: .92rem !important;
        line-height: 1.2;
    }

    body.has-kanban-page .kanban-card-summary p,
    body.has-kanban-page .kanban-badge {
        font-size: .7rem !important;
    }

    body.has-kanban-page .kanban-edit-icon,
    body.has-kanban-page .kanban-delete-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }
}

@media (min-width: 1061px) and (max-width: 1280px) {
    body.has-kanban-page .content {
        height: calc(100dvh - 62px);
    }

    body.has-kanban-page .kanban-board,
    body.has-kanban-page .kanban-board[data-kanban-board] {
        grid-auto-columns: minmax(204px, 218px) !important;
    }
}

/* Páginas comuns: tabelas e filtros mais confortáveis em notebook compacto. */
@media (min-width: 1061px) and (max-width: 1280px) {
    .panel {
        border-radius: 20px;
    }

    th,
    td {
        padding: 10px 9px;
        font-size: .86rem;
    }

    .filters {
        gap: 10px;
    }

    .heading-actions {
        gap: 8px;
    }
}

/* Tablet/mobile: evita rolagem horizontal acidental fora das áreas intencionais. */
@media (max-width: 1060px) {
    .app-shell,
    .main-area,
    .content,
    .panel,
    .page-heading,
    .filters {
        max-width: 100%;
        min-width: 0;
    }

    .sidebar {
        max-width: min(286px, 88vw);
        z-index: 60 !important;
        box-shadow: 18px 0 50px rgba(24, 14, 39, .28);
    }

    .topbar {
        min-height: 62px;
        padding-inline: 14px;
    }

    .topbar > div:first-child {
        min-width: 0;
    }

    .topbar strong,
    .topbar small {
        max-width: 48vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content {
        overflow-x: hidden;
    }
}

@media (max-width: 720px) {
    .content {
        padding: 14px 12px 80px !important;
    }

    .page-heading,
    .compact-heading {
        gap: 12px;
        margin-bottom: 14px;
    }

    .heading-copy h1,
    .page-heading h1 {
        font-size: clamp(1.35rem, 8vw, 1.72rem) !important;
        line-height: 1.08;
    }

    .heading-copy p,
    .page-heading p {
        font-size: .86rem;
        line-height: 1.42;
    }

    .filters-panel.is-open,
    .filters:not([hidden]) {
        padding: 12px !important;
        border-radius: 18px;
    }

    .responsive-table tr {
        overflow: hidden;
    }

    .responsive-table td {
        align-items: flex-start;
    }

    .responsive-table td::before {
        flex: 0 0 min(42%, 150px);
    }

    .responsive-table td:not(.actions) {
        overflow-wrap: normal;
        text-align: right;
    }

    .responsive-table td.actions {
        justify-content: flex-end;
        gap: 8px;
    }

    .table-wrap {
        overflow-x: visible;
    }

    .icon-action {
        min-width: 38px;
        min-height: 38px;
    }
}

@media (max-width: 480px) {
    .topbar {
        min-height: 58px;
        padding-inline: 10px;
        gap: 8px;
    }

    .menu-button,
    .reminder-button,
    .sidebar-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .language-switcher {
        padding: 3px;
    }

    .language-switcher a {
        min-width: 30px;
        min-height: 28px;
    }

    .reminder-menu {
        right: -8px;
        width: min(340px, calc(100vw - 20px));
        max-height: min(430px, calc(100dvh - 84px));
    }

    .button {
        min-height: 40px;
    }

    body:not(.has-kanban-page) .page-heading .heading-actions {
        overflow-x: auto;
        scrollbar-width: none;
    }

    body:not(.has-kanban-page) .page-heading .heading-actions::-webkit-scrollbar {
        display: none;
    }

    .dashboard-final-hero__actions {
        grid-template-columns: 1fr !important;
    }

    .dashboard-final-attention-grid,
    .dashboard-final-metric-strip--two {
        grid-template-columns: 1fr !important;
    }
}