@media (max-width: 1100px) {
  .top-navbar {
    height: auto;
    min-height: 64px;
  }

  .nav-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    min-width: 0;
    padding: 10px 20px;
  }

  .brand-group {
    display: contents;
  }

  .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-right: 0;
  }

  .user-controls {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .user-profile-wrapper {
    min-height: 44px;
  }

  .nav-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    justify-content: flex-start;
    gap: 4px;
    padding: 2px 0 4px;
  }

  .tab-item {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .main-container {
    padding: 28px 20px;
  }

  .stats-grid,
  .team-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .education-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .education-intro {
    gap: 24px;
    padding: 28px;
  }

  .plans-container {
    padding: 32px 20px 0;
  }

  .plans-hero,
  .feature-row {
    gap: 32px;
  }

  .plans-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }

  .testimonial,
  .final-cta {
    padding: 32px;
  }

  .educacao-container {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .table-wrapper {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .table-section {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .table-section > .data-table {
    min-width: 600px;
  }

  .agenda-container {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .topology-flow {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 20px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .topology-step {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .nav-container {
    padding: 8px 16px;
  }

  .user-role {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-controls {
    gap: 4px;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .tab-item {
    gap: 6px;
    padding: 8px 4px;
    font-size: 11px;
    white-space: nowrap;
  }

  .nav-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 2px 4px;
    padding: 2px 0 0;
  }

  .nav-tabs .tab-item {
    min-width: 0;
    justify-content: center;
  }

  .main-container {
    padding: 24px 16px;
  }

  .page-title-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .page-title-bar > div {
    min-width: 0;
    max-width: 100%;
  }

  .page-title-bar h1 {
    font-size: clamp(21px, 6vw, 24px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .page-title-bar p {
    line-height: 1.5;
  }

  .page-title-bar > .btn-primary,
  .page-title-bar > .button,
  .page-title-bar > .button--primary {
    width: 100%;
  }

  .content-card {
    min-width: 0;
    padding: 16px;
  }

  .card-header,
  .card-header-flex,
  .client-contact-heading,
  .header-topo {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  .card-header-actions,
  .header-right {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .stats-grid,
  .team-stats-grid,
  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-card,
  .stat-box {
    min-width: 0;
    padding: 14px;
  }

  .stat-label,
  .stat-subtext,
  .stat-box-label {
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .page-title-bar .report-periods {
    width: 100%;
    display: flex;
  }

  .report-period {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 8px;
  }

  .report-summary-grid {
    padding: 14px;
  }

  .distributions-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .donut-chart-container {
    align-items: center;
  }

  .donut-legend {
    min-width: 0;
  }

  .agenda-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .agenda-date-picker {
    flex: 1 1 180px;
    min-width: 0;
  }

  .agenda-all-dates {
    flex: 1 1 100%;
  }

  .agenda-header-days,
  .agenda-body {
    min-width: 700px;
  }

  .ticket-detail-grid,
  .ticket-info-grid,
  .open-and-scheduler-ticket,
  .ticket-details-columns,
  .employee-card-row,
  .client-detail-grid,
  .info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .team-info-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 20px;
  }

  .team-info-grid > div {
    max-width: none;
  }

  .assets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-filters {
    width: 100%;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .client-status-filter-control,
  .client-status-filter-button,
  .client-search-input,
  .status-filter-control {
    width: 100%;
    min-width: 0;
  }

  .client-status-filter-menu {
    width: 100%;
  }

  .client-contact-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .client-contact-row .form-group:nth-child(3) {
    grid-column: 1;
  }

  .client-contact-remove {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .education-container {
    padding: 24px 16px 40px;
  }

  .education-intro {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
  }

  .education-grid,
  .glossary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-featured {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    margin-inline: auto;
  }

  .plans-hero,
  .feature-row,
  .final-cta {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
  }

  .feature-row--reverse,
  .feature-row--reverse .feature-row__text {
    direction: ltr;
  }

  .plans-hero {
    gap: 24px;
    margin-bottom: 40px;
  }

  .plans-hero__text h2 {
    font-size: clamp(25px, 7vw, 36px);
  }

  .plans-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    padding: 20px 16px;
    margin-bottom: 44px;
  }

  .plans-stats strong {
    font-size: 1.6rem;
  }

  .plans-hero__cta {
    flex-wrap: wrap;
  }

  .plan-card {
    padding: 26px 22px;
  }

  .plans-features {
    margin: 56px 0;
  }

  .feature-row {
    gap: 20px;
    margin-bottom: 44px;
  }

  .testimonial,
  .final-cta {
    padding: 24px 20px;
    margin-bottom: 48px;
  }

  .login-card {
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 0;
  }

  .page-wrapper {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 16px;
  }

  html,
  body {
    height: auto;
    min-height: 100%;
  }

  .form-panel {
    width: 100%;
    min-width: 0;
    height: auto;
    flex: 1 1 auto;
    padding: 32px 24px;
  }

  .auth-container {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-start;
    padding: 24px 16px;
  }

  .auth-header {
    margin-bottom: 24px;
  }

  .auth-card {
    padding: 24px;
  }

  .modal-overlay {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
  }

  .modal-content,
  .modal-card {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 18px;
  }

  .modal-actions,
  .modal-footer,
  .form-actions {
    flex-wrap: wrap;
  }

  .contact-modal {
    width: calc(100vw - 24px);
    max-width: 520px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .workflow-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 20px;
  }
}

@media (max-width: 380px) {
  .nav-container {
    padding-inline: 12px;
  }

  .user-role {
    max-width: 86px;
  }

  .main-container {
    padding: 20px 12px;
  }

  .content-card {
    padding: 14px;
  }

  .stats-grid,
  .team-stats-grid,
  .report-summary-grid,
  .education-grid,
  .glossary-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-featured {
    grid-column: auto;
  }

  .stat-card,
  .stat-box {
    padding: 12px;
  }

  .education-intro {
    padding: 20px;
  }

  .plans-container {
    padding: 24px 12px 0;
  }

  .plans-stats {
    gap: 16px 8px;
    padding: 16px 12px;
  }

  .plans-stats strong {
    font-size: 1.4rem;
  }

  .plan-card {
    padding: 24px 18px;
  }

  .login-card .form-panel {
    padding: 28px 20px;
  }

  .auth-card {
    padding: 20px;
  }

  .modal-content,
  .modal-card {
    padding: 16px;
  }

  .modal-actions > button,
  .modal-footer > button,
  .form-actions > button {
    flex: 1 1 100%;
  }

  .contact-modal {
    padding: 14px;
  }
}