/* LDM Mobile UI V1: viewport containment, collapsible mobile filters, contained Kanban/Gantt scroll, compact System cards. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.app-header,
.shell-body,
.app-content,
.view,
#view-core-module,
#view-v17-module,
#view-readmore-module,
#view-system,
#core-content,
#v17-content,
#readmore-content {
  min-width: 0;
  max-width: 100%;
}

.app-header,
.app-content,
.view,
.panel,
.metric-card,
.core-toolbar,
.v17-controls,
.v210-kanban,
.v2423-gantt-layout,
.v2423-gantt-main,
.v217-gantt,
.v217-gantt-timeline {
  box-sizing: border-box;
}

.dashboard-cards,
.dashboard-loading,
.dashboard-grid,
.metric-card {
  min-width: 0;
  max-width: 100%;
}

/* System cards: predictable grid, same row height and disclosure instead of very tall cards. */
.system-health-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.system-health-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.system-health-details {
  display: grid;
}

.system-health-details[hidden] {
  display: none !important;
}

.system-health-details-toggle,
.system-gcs-settings-button {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 1180px) {
  .system-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .system-health-grid {
    grid-template-columns: 1fr !important;
  }

  .system-health-card {
    height: auto;
  }
}

/* Desktop does not need the additional mobile disclosure button. */
.ldm-mobile-filter-toggle {
  display: none;
}

/* Kanban and Gantt are the only intentional horizontal scrolling surfaces. */
.v210-kanban.v212-kanban,
.v217-gantt-timeline {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.v2423-gantt-layout,
.v2423-gantt-main,
.v217-gantt {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.v2423-gantt-main {
  overflow: hidden;
}

@media (max-width: 820px) {
  /* The mobile header must never define a width wider than the phone viewport. */
  .app-header {
    width: 100%;
    max-width: 100vw;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }

  .header-left,
  .header-right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header-left {
    justify-content: flex-start;
  }

  .header-right {
    display: grid !important;
    grid-template-columns: repeat(3, 44px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px;
  }

  .header-right > .notifications-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  #nav-history-button {
    grid-column: 2;
    grid-row: 1;
  }

  #theme-button {
    grid-column: 3;
    grid-row: 1;
  }

  .header-right > .user-box {
    display: none !important;
  }

  .global-context {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr);
    gap: 10px;
    justify-content: stretch !important;
  }

  .global-context-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 10px;
  }

  .global-context-field > span {
    display: inline !important;
    flex: 0 0 auto;
  }

  .global-context-field select {
    flex: 1 1 0;
    width: auto;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .notifications-panel {
    top: var(--ldm-mobile-header-height, 150px) !important;
  }

  .app-nav {
    top: var(--ldm-mobile-header-height, var(--header-h)) !important;
    height: calc(100vh - var(--ldm-mobile-header-height, var(--header-h))) !important;
  }

  .nav-overlay {
    inset: var(--ldm-mobile-header-height, var(--header-h)) 0 0 0 !important;
  }
}

@media (max-width: 760px) {
  .app-content {
    width: 100%;
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden;
  }

  .view,
  .page-head,
  .dashboard-cards,
  .dashboard-loading,
  .dashboard-grid,
  .core-toolbar,
  .v17-controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Core registers: one compact Filtri button by default; expand on demand. */
  .core-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .core-toolbar > .core-filters-toggle {
    display: inline-flex !important;
    width: 100%;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    align-items: center;
    justify-content: center;
  }

  .core-toolbar.filters-collapsed > :not(.core-filters-toggle) {
    display: none !important;
  }

  .core-toolbar.filters-expanded > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .core-toolbar.filters-expanded .core-dynamic-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .core-toolbar.filters-expanded .core-toolbar-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* V17/read-more controls: generic mobile disclosure injected by ldm-mobile-ui-v1.js. */
  .ldm-mobile-collapsible-controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ldm-mobile-collapsible-controls > .ldm-mobile-filter-toggle {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1 !important;
    order: -1000;
  }

  .ldm-mobile-collapsible-controls:not(.ldm-mobile-controls-open) > :not(.ldm-mobile-filter-toggle) {
    display: none !important;
  }

  .ldm-mobile-collapsible-controls.ldm-mobile-controls-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .ldm-mobile-collapsible-controls.ldm-mobile-controls-open > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .ldm-mobile-collapsible-controls .v213-task-filter-toggle,
  .ldm-mobile-collapsible-controls .v222-error-filter-toggle {
    display: none !important;
  }

  .ldm-mobile-collapsible-controls.ldm-mobile-controls-open > .v213-task-filter-body,
  .ldm-mobile-collapsible-controls.ldm-mobile-controls-open > .v222-error-filter-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ldm-mobile-collapsible-controls .v220-support-status-chips {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    overscroll-behavior-x: contain;
  }

  /* Kanban remains wide internally, while the whole page stays viewport-wide. */
  .v210-kanban.v212-kanban {
    display: grid !important;
    grid-template-columns: repeat(5, min(82vw, 340px)) !important;
    gap: 12px;
    padding: 0 0 12px;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y;
  }

  .v210-kanban-column {
    width: auto;
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
  }

  .v212-kanban-card,
  .v212-kanban-open,
  .v212-kanban-card-actions,
  .v212-kanban-move {
    min-width: 0;
    max-width: 100%;
  }

  /* Gantt: sticky label stays readable; time axis scrolls inside the chart only. */
  .v2423-gantt-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v217-gantt-timeline {
    grid-template-columns: minmax(150px, 44vw) repeat(var(--v217-days), 34px) !important;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
  }

  .v217-gantt-track {
    grid-template-columns: repeat(var(--v217-days), 34px) !important;
  }

  .v217-gantt-day-head {
    min-width: 34px !important;
  }

  .v217-gantt-label {
    width: auto;
    min-width: 0;
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v2423-gantt-picker,
  .v2423-gantt-main,
  .v217-gantt,
  .v217-gantt-timeline {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 460px) {
  .app-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-left {
    gap: 10px;
  }

  .header-brand-bottom {
    font-size: 15px;
  }

  .global-context {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 8px;
  }

  .global-context-field {
    padding: 0 8px;
  }

  .core-toolbar.filters-expanded .core-toolbar-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* System health/Billing detail containment: long IDs and values must stay inside their card. */
.system-health-card,
.system-health-details,
.system-billing-query-meta,
.system-health-row {
  min-width: 0;
  max-width: 100%;
}

.system-health-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important;
}

.system-health-label,
.system-health-value,
.system-health-note {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.system-health-value {
  white-space: normal !important;
  justify-self: end;
  text-align: right;
}

.system-health-meter {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 620px) {
  .system-health-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .system-health-value {
    justify-self: start;
    text-align: left;
  }
}