@use '@/styles/breakpoints' as *;

/**
 * Layout global de páginas de detalhe (§15.B — container único, grid e abas responsivas).
 * Usar via `DetailPageLayout` / alias `PageDetailLayout`; evitar duplicar estes estilos por módulo.
 */

.root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

.rootReserveMobileActionBar {
  @include max-mobile {
    padding-bottom: max(96px, calc(72px + env(safe-area-inset-bottom, 0px)));
  }
}

/* Faixa full-bleed acima do split 16/8 (hero, KPIs, alertas). */
.aboveColumns {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.aboveColumnsStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.richBody {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.colMain,
.sidebarColumn {
  min-width: 0;
  max-width: 100%;
}

.resultCompact {
  :global(.ant-result) {
    padding: 24px 16px 20px;
  }

  :global(.ant-result-icon) {
    margin-bottom: 12px;

    > :global(.anticon) {
      font-size: 56px;
    }
  }

  :global(.ant-result-title) {
    font-size: 18px;
    line-height: 1.35;
  }

  :global(.ant-result-subtitle) {
    font-size: 14px;
    margin-top: 4px;
  }

  :global(.ant-result-extra) {
    margin-top: 16px;
  }
}

.sidebarColumn {
  display: flex;
  flex-direction: column;
}

.sidebarStickyLite {
  position: sticky;
  top: 72px;

  @include max-mobile {
    position: static;
  }
}

/* Abas pill responsivas — tokens do tenant (--primary / --brand-primary). */
.detailTabsPill {
  :global(.ant-tabs-nav) {
    margin-bottom: 16px;
    padding: 6px;
    background: color-mix(in srgb, var(--primary, var(--brand-primary, #27132e)) 4%, var(--surface-muted, #fafafa));
    border: 1px solid var(--border, #e9ecef);
    border-radius: var(--radius-lg, 12px);

    &::before {
      border-bottom: none !important;
    }
  }

  :global(.ant-tabs-nav-wrap) {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;

    &::before,
    &::after {
      box-shadow: none !important;
    }
  }

  :global(.ant-tabs-nav-list) {
    flex-wrap: nowrap;
    gap: 4px;
    min-width: min-content;
  }

  :global(.ant-tabs-tab) {
    margin: 0 !important;
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;

    &:hover {
      color: var(--primary, var(--brand-primary, #27132e));
      background: color-mix(in srgb, var(--primary, var(--brand-primary, #27132e)) 6%, var(--surface, #fff));
    }
  }

  :global(.ant-tabs-tab-btn) {
    display: inline-flex;
    align-items: center;
    outline: none;
  }

  :global(.ant-tabs-tab-active) {
    background: var(--surface, #fff);
    border-color: color-mix(in srgb, var(--primary, var(--brand-primary, #27132e)) 12%, var(--border, #e9ecef));
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);

    :global(.ant-tabs-tab-btn) {
      font-weight: 600;
      color: var(--primary, var(--brand-primary, #27132e));
    }
  }

  :global(.ant-tabs-ink-bar) {
    display: none;
  }

  :global(.ant-tabs-content-holder) {
    padding-top: 4px;
  }

  @include max-mobile {
    :global(.ant-tabs-nav) {
      padding: 4px;
      border-radius: var(--radius-md, 10px);
    }

    :global(.ant-tabs-tab) {
      padding: 8px 10px;
      font-size: 13px;
    }
  }
}

:global(.dark) {
  .detailTabsPill {
    :global(.ant-tabs-nav) {
      background: color-mix(in srgb, var(--primary, var(--brand-primary, #27132e)) 10%, var(--surface-muted, #0a0a0a));
      border-color: var(--border, #2d3748);
    }

    :global(.ant-tabs-tab-active) {
      background: var(--surface-elevated, #1f2937);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    }
  }
}