/* Responsive enhancements for CEK METERAN. Kept separate from the generated app bundle. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
#root {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
}

.layout,
.main,
.content,
.panel,
.form-panel,
.panel-body,
.panel-head,
.page-heading,
.topbar,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

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

/* Wide data tables stay readable and scroll inside their own container. */
.table-wrap,
.analytics-modal-table,
.dashboard-detail-table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.analytics-modal-table table,
.dashboard-detail-table table {
  max-width: none;
}

/* Long values must not force cards and grid columns wider than the viewport. */
.stat-card,
.account-stat-card,
.analytics-stat,
.panel,
.form-panel,
.dashboard-tab-panel,
.dashboard-chart-grid > *,
.detail-grid > *,
.report-grid > * {
  min-width: 0;
}

button,
.btn,
input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .content {
    min-width: 0;
  }

  .panel-head,
  .form-actions,
  .heading-actions,
  .report-actions,
  .report-note-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  html,
  body,
  #root {
    width: 100%;
    min-width: 320px;
    overflow-x: clip;
  }

  .content {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(10px, 3vw, 14px);
    padding-right: clamp(10px, 3vw, 14px);
  }

  .page-heading,
  .panel-head,
  .form-actions,
  .heading-actions,
  .report-actions,
  .report-note-actions {
    min-width: 0;
    flex-wrap: wrap;
  }

  .page-heading > *,
  .panel-head > *,
  .form-actions > *,
  .heading-actions > * {
    min-width: 0;
    max-width: 100%;
  }

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

  .form-grid > *,
  .form-grid .field,
  .form-grid label {
    min-width: 0;
    max-width: 100%;
  }

  input,
  select,
  textarea {
    min-width: 0;
    font-size: 16px;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .table-wrap table {
    width: max-content;
    min-width: 100%;
  }

  .modal,
  .dialog,
  [role="dialog"] {
    width: min(calc(100% - 20px), 680px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .analytics-modal {
    width: calc(100vw - 20px);
    max-width: 680px;
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .analytics-modal-table {
    max-width: 100%;
    overflow: auto;
  }
}

@media (max-width: 480px) {
  .stats-grid,
  .dashboard-stats-grid,
  .analytics-stats,
  .report-stats,
  .account-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-heading h1 {
    overflow-wrap: anywhere;
  }

  .panel-head,
  .form-actions {
    gap: 8px;
  }

  .form-actions > .btn,
  .heading-actions > .btn {
    flex: 1 1 auto;
  }

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

  .photo-actions .btn {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .stats-grid,
  .dashboard-stats-grid,
  .analytics-stats,
  .report-stats,
  .account-stat-grid,
  .photo-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .content {
    padding-left: 9px;
    padding-right: 9px;
  }

  .topbar {
    gap: 6px;
    padding-left: 9px;
    padding-right: 9px;
  }
}

/* Mobile drawer fix: the older bottom-navigation styles limit each link to 82px.
   The current drawer uses full-width links, so remove that inherited limit only
   inside the drawer; keep navigation, permissions and desktop styles intact. */
@media (max-width: 700px) {
  .sidebar.mobile-drawer > .nav-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Approved responsive audit: make analytics status rows fit on tablet.
   At 701–900px the persistent sidebar makes two analytics panels too narrow. */
@media (min-width: 701px) and (max-width: 900px) {
  .analytics-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The old sticky form footer was offset for a 62px bottom navigation bar.
   The current mobile UI uses a side drawer, so only account for safe area. */
@media (max-width: 700px) {
  .form-panel .form-actions {
    bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Stack form actions at a natural tap-target height (the old 140px flex
     basis made buttons unusually tall around the 700px breakpoint). */
  .form-panel .form-actions .btn {
    flex: 0 0 auto;
  }

  /* Keep all six dashboard months while making the mobile labels legible.
     Allow longer values to wrap instead of overflowing adjacent columns. */
  .dashboard-bars-six {
    height: auto;
    min-height: 265px;
    gap: 4px;
    padding: 18px 7px 16px;
  }

  .dashboard-bar-column > b {
    width: 100%;
    min-height: 24px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-bar-column small {
    font-size: 10px;
    line-height: 1.3;
  }

  .dashboard-bar-column em {
    font-size: 9px;
    line-height: 1.3;
    overflow-wrap: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}