html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

main,
section,
.main-container,
.page-content,
.content,
.container,
.modal-content,
.gt-modal {
  min-width: 0;
}

a,
p,
span,
strong,
small,
h1,
h2,
h3,
h4,
td,
th,
label {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .main-container {
    min-height: 100dvh;
    padding: 10px;
  }

  .modal-backdrop,
  .gt-modal-backdrop {
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
  }

  .data-table-viewer,
  .attendance-table,
  .manager-list,
  .selection-list-container,
  .indicator-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  input,
  select,
  textarea,
  .input-styled,
  .select-styled,
  .form-control {
    min-height: 44px;
    font-size: 16px !important;
  }

  button,
  [role="button"],
  .gt-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .brand-logo {
    height: 36px;
    max-width: min(230px, 68vw);
  }

  header .h-20 {
    min-height: 64px;
    height: auto;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }

  h1,
  .text-5xl,
  .lg\:text-7xl {
    font-size: clamp(2.25rem, 13vw, 3.4rem) !important;
    line-height: 1.05 !important;
  }

  .min-h-\[calc\(100vh-80px\)\] {
    min-height: auto !important;
  }

  .p-8,
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-16 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  .mt-12 {
    margin-top: 1.5rem !important;
  }

  .modal-content,
  .modal-content.modal-lg,
  .modal-content.modal-sm,
  .gt-modal,
  .attendance-modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 100dvh;
    height: auto;
    margin: 0;
    border-radius: 14px;
  }

  .modal-body,
  .gt-modal__body,
  .attendance-modal-body {
    max-height: calc(100dvh - 132px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer,
  .gt-actions {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .form-grid,
  .attendance-form-grid,
  .settings-layout,
  .options-actions-grid,
  .options-export-grid,
  .function-requirements-grid {
    grid-template-columns: 1fr !important;
  }

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

  .top-bar,
  .top-bar-controls,
  .header-controls,
  .header-actions-group,
  .control-group {
    max-width: 100%;
    min-width: 0 !important;
  }

  .top-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .top-bar-controls,
  .header-actions-group {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: hidden;
  }

  .header-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow-x: hidden !important;
    height: auto;
  }

  .header-controls > *,
  .control-group,
  .custom-select-container,
  .custom-select-trigger,
  .header-search-wrap,
  .header-search-input,
  .header-controls select.input-styled {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .top-bar-controls button,
  .header-actions-group button {
    flex: 0 0 auto;
  }
}