/* Mobile ergonomics helpers (global, non-destructive overrides). */
:root {
  --cdg-tap-target: 44px;
}

.cdg-break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cdg-stack-sm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cdg-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cdg-table-scroll > table {
  margin-bottom: 0;
}

.cdg-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.cdg-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.22);
  border-radius: 999px;
}

/* Align Bootstrap's .table-responsive horizontal scrolling with the same scrollbar treatment. */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.22);
  border-radius: 999px;
}

html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
body.app-layout.dark-mode .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
}

.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

html[data-theme="dark"] .table-responsive,
body.app-layout.dark-mode .table-responsive {
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

html[data-theme="dark"] .cdg-table-scroll::-webkit-scrollbar-thumb,
body.app-layout.dark-mode .cdg-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
}

.cdg-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

html[data-theme="dark"] .cdg-table-scroll,
body.app-layout.dark-mode .cdg-table-scroll {
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.cdg-sticky-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cdg-sticky-actions .btn,
.cdg-sticky-actions button,
.cdg-sticky-actions input[type=submit] {
  min-height: var(--cdg-tap-target);
}

.cdg-empty-state,
.empty-state,
.no-results,
.no-data {
  overflow-wrap: anywhere;
}

.cdg-empty-state .btn,
.empty-state .btn,
.no-results .btn,
.no-data .btn {
  margin-top: 0.6rem;
}

.cdg-error-message,
.form-error,
.flash-error,
.alert-danger {
  overflow-wrap: anywhere;
}

.cdg-responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.cdg-responsive-table > table {
  min-width: 680px;
  margin-bottom: 0;
}

.ops-center-item .ops-center-actions .form-select {
  width: auto;
  min-width: 170px;
  max-width: 240px;
}

.ops-center-top3 {
  border: 1px dashed var(--app-border, rgba(15, 23, 42, 0.16));
  border-radius: 0.65rem;
  padding: 0.5rem 0.6rem;
  background: var(--input-bg, #f8fafc);
}

.ops-center-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px)));
  z-index: 1070;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--navbar-bg, rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(8px);
}

.ops-center-sticky-inner {
  border: 1px solid var(--btn-secondary-border, rgba(15, 23, 42, 0.14));
  border-radius: 0.8rem;
  background: var(--bg-surface-strong, #fff);
  padding: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

@media (max-width: 576px) {
  html {
    max-width: 100%;
  }

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

  body.app-layout {
    max-width: 100%;
    overflow-x: clip;
  }

  @supports not (overflow: clip) {
    body {
      overflow-x: hidden;
    }

    body.app-layout {
      overflow-x: hidden;
    }
  }

  .app-layout {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .cdg-footer-bars {
    padding-bottom: env(safe-area-inset-bottom);
  }

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

  .app-layout main,
  .app-layout .page-shell,
  .app-layout .app-surface,
  .app-layout .content-card,
  .app-layout .card,
  .app-layout .table-wrapper,
  .app-layout .table-responsive,
  .app-layout .app-table-wrapper {
    max-width: 100%;
  }

  .wrap,
  .part-wrap,
  .ha-wrap,
  .ha-shell,
  .ha-page,
  .ged-shell,
  .ged-page,
  .webmail-shell,
  .webmail-page,
  .reunions-shell,
  .app-shell,
  .portal-shell,
  .portal-page,
  .wm-shell,
  .wm-page,
  .wm-layout,
  .wm-main,
  .wm-list,
  .wm-preview {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-layout .modal-dialog {
    margin: calc(0.75rem + env(safe-area-inset-top)) 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
  }

  .app-layout .modal-content {
    max-height: calc(100vh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .app-layout .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-layout .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  body.app-layout {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  pre,
  code,
  kbd,
  samp {
    overflow-wrap: normal;
    word-break: normal;
  }

  pre {
    max-width: 100%;
    overflow-x: auto;
  }

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

  .app-layout .container,
  .app-layout .container-fluid,
  .app-layout .container-sm,
  .app-layout .container-md,
  .app-layout .container-lg,
  .app-layout .container-xl,
  .app-layout .container-xxl,
  .app-layout .row,
  .app-layout .row > * {
    min-width: 0;
  }

  .app-layout .d-flex,
  .app-layout .d-grid,
  .app-layout .d-inline-flex {
    min-width: 0;
  }

  .app-layout .d-flex > *,
  .app-layout .d-grid > * {
    min-width: 0;
  }

  .app-layout .btn-group,
  .app-layout .btn-toolbar,
  .app-layout .input-group,
  .app-layout .app-actions,
  .app-layout .action-toolbar,
  .app-layout .table-toolbar,
  .app-layout .filter-toolbar,
  .ha-actions,
  .part-actions,
  .form-inline-actions,
  .ged-actions,
  .webmail-actions,
  .preview-actions,
  .portal-actions,
  .accred-page-head__actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ha-actions .btn,
  .part-actions .btn,
  .form-inline-actions .btn,
  .ged-actions .btn,
  .webmail-actions .btn,
  .preview-actions .btn,
  .portal-actions .btn,
  .app-layout .app-actions .btn,
  .app-layout .action-toolbar .btn,
  .app-layout .table-toolbar .btn,
  .app-layout .filter-toolbar .btn {
    min-width: 0;
    white-space: normal;
  }

  .app-layout .input-group > .form-control,
  .app-layout .input-group > .form-select,
  .app-layout .input-group > .form-floating,
  .app-layout .input-group > .btn,
  .app-layout .input-group > .input-group-text {
    min-width: 0;
  }

  .presence-select,
  .presence-select-global,
  .cell-stack form,
  .cell-right form,
  .cell-stack form .form-select,
  .cell-right form .form-select {
    min-width: 0 !important;
    width: 100% !important;
  }

  .cell-stack,
  .cell-right {
    flex-wrap: wrap;
    align-items: stretch;
  }

  #overviewList,
  #urgencyBoard {
    grid-template-columns: 1fr !important;
  }

  .messaging-page .layout {
    grid-template-columns: 1fr !important;
  }

  .messaging-page .notif-panel {
    min-width: 0;
    width: min(92vw, 320px);
    right: 8px;
  }

  .table-responsive,
  .cdg-table-scroll {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table-responsive > table,
  .cdg-table-scroll > table {
    min-width: 100%;
  }

  table {
    max-width: 100%;
  }

  .page-pole-docs .doc-table-wrapper,
  .page-pole-docs .faq-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .page-pole-docs .doc-grid,
  .page-pole-docs .faq-grid {
    min-width: 720px;
  }

  .page-pole-docs .faq-row .doc-action-group[data-editing="0"] {
    flex-wrap: wrap;
  }

  .app-layout .form-inline,
  .app-layout .form-row,
  .app-layout .form-grid,
  .wrap .form-grid,
  .part-wrap .form-grid,
  .ha-wrap .form-grid,
  .ged-page .form-grid,
  .webmail-page .form-grid,
  .reunions-shell .form-grid {
    grid-template-columns: 1fr !important;
  }

  .app-layout .form-inline,
  .app-layout .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .app-layout .form-inline > *,
  .app-layout .form-row > * {
    width: 100%;
  }

  .app-layout .table {
    font-size: 0.95rem;
  }

  .app-layout .table th,
  .app-layout .table td {
    padding: 0.55rem 0.65rem;
  }

  .cdg-responsive-table > table,
  .table-responsive > table,
  .cdg-table-scroll > table {
    min-width: max(640px, 100%);
  }

  table[data-mobile-cards="1"],
  table.cdg-mobile-cards {
    min-width: 0 !important;
  }

  table[data-mobile-cards="1"] thead,
  table.cdg-mobile-cards thead {
    display: none;
  }

  table[data-mobile-cards="1"] tbody,
  table[data-mobile-cards="1"] tr,
  table[data-mobile-cards="1"] td,
  table.cdg-mobile-cards tbody,
  table.cdg-mobile-cards tr,
  table.cdg-mobile-cards td {
    display: block;
    width: 100%;
  }

  table[data-mobile-cards="1"] tr,
  table.cdg-mobile-cards tr {
    margin: 0 0 0.7rem;
    border: 1px solid var(--app-border, rgba(15, 23, 42, 0.12));
    border-radius: 12px;
    background: var(--bg-surface, #fff);
    overflow: hidden;
  }

  table[data-mobile-cards="1"] td,
  table.cdg-mobile-cards td {
    border-bottom: 1px solid var(--app-border, rgba(15, 23, 42, 0.08));
  }

  table[data-mobile-cards="1"] td:last-child,
  table.cdg-mobile-cards td:last-child {
    border-bottom: 0;
  }

  table[data-mobile-cards="1"] td[data-label]::before,
  table.cdg-mobile-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted, #64748b);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .cdg-sticky-actions {
    position: sticky;
    bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 8px);
    z-index: 1065;
    justify-content: stretch;
    padding: 0.55rem;
    border: 1px solid var(--app-border, rgba(15, 23, 42, 0.12));
    border-radius: 14px;
    background: var(--bg-surface, rgba(255, 255, 255, 0.96));
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(8px);
  }

  .cdg-sticky-actions > * {
    flex: 1 1 140px;
  }

  .cdg-sticky-actions .btn,
  .cdg-sticky-actions button,
  .cdg-sticky-actions input[type=submit] {
    width: 100%;
  }

  .cdg-stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-center-item {
    padding: 0.65rem;
  }

	  .ops-center-item .ops-center-actions {
	    position: sticky;
	    bottom: var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px)));
	    background: var(--bg-surface-strong, #fff);
	    padding-top: 0.45rem;
	    border-top: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
	    margin-top: 0.45rem;
	  }

  body.ops-center-sticky-active {
    padding-bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 98px);
  }
}

@media (max-width: 768px) {
  #opsFilters .app-actions,
  #opsTimelineCard .app-actions,
  #opsCampaignLoopCard .app-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #opsTimelineCard .app-actions > *,
  #opsCampaignLoopCard .app-actions > * {
    flex: 1 1 140px;
  }

  #opsTimelineRefresh {
    min-width: 132px;
  }

  #opsTimelineCounts .badge,
  #opsCenterCounts .badge,
  #opsCrisisCounts .badge {
    white-space: nowrap;
  }

  #opsCenterList .ops-center-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  #opsCenterList .ops-center-actions .btn,
  #opsCenterList .ops-center-actions .form-select {
    width: 100%;
    max-width: none;
  }

  #opsCenterList .ops-center-top3 .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: stretch !important;
  }

  #opsCenterList .ops-center-top3 .d-flex.justify-content-between.align-items-center .btn {
    width: 100%;
  }

  #opsCrisisList .d-flex.flex-wrap.gap-2.mt-2 .btn {
    flex: 1 1 calc(50% - 0.5rem);
  }

  #opsTimelineList .list-group-item .btn,
  #opsCampaignRuns .list-group-item .btn {
    min-width: 96px;
  }

  #opsSloCard .border,
  #opsCampaignTotals .border {
    min-height: 88px;
  }
}

@media (pointer: coarse) {
  .btn,
  .form-control,
  .form-select,
  .input-group-text,
  .dropdown-item,
  .nav-link,
  .list-group-item {
    min-height: var(--cdg-tap-target);
  }

  .btn,
  .dropdown-item,
  .nav-link,
  .list-group-item {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .top-menu .menu-links a,
  .top-menu .menu-dropdown__toggle,
  .top-menu .icon-btn,
  .top-menu .burger {
    min-height: var(--cdg-tap-target);
  }

  .top-menu .icon-btn,
  .top-menu .burger,
  .top-menu .nav-search {
    min-width: var(--cdg-tap-target);
  }

  .top-menu .menu-links a,
  .top-menu .menu-dropdown__toggle {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

html.cdg-pointer-coarse .btn-icon {
  min-width: var(--cdg-tap-target);
  min-height: var(--cdg-tap-target);
}

.mission-day-card {
  border-radius: 16px;
}

.mission-day-card .mission-day-quick button,
.mission-day-card .mission-day-quick a {
  min-height: 46px;
}

.cdg-command-palette-btn {
  position: fixed;
  right: 14px;
  bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 68px);
  z-index: 1082;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, #f59e0b, #dc2626);
  color: #fff;
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cdg-command-palette-btn i {
  font-size: 1.15rem;
}

.cdg-command-palette {
  position: fixed;
  inset: 0;
  z-index: 1084;
}

.cdg-command-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 23, 0.5);
  backdrop-filter: blur(2px);
}

.cdg-command-palette__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  background: var(--bg-surface-strong, #fff);
  border: 1px solid var(--app-border, rgba(15, 23, 42, 0.1));
  padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  max-height: min(70vh, 560px);
  overflow: auto;
}

.cdg-command-palette__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0.1rem 0.65rem;
  border-bottom: 1px solid var(--app-border, rgba(15, 23, 42, 0.08));
  margin-bottom: 0.6rem;
}

.cdg-command-palette__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.cdg-command-palette__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  border: 1px solid var(--app-border, rgba(15, 23, 42, 0.12));
  border-radius: 0.75rem;
  background: var(--bg-surface, #f8fafc);
  color: var(--text-primary, #0f172a);
  min-height: 46px;
  padding: 0.55rem 0.7rem;
  text-align: left;
}

.cdg-command-palette__item i {
  width: 1.15rem;
}

body.cdg-command-palette-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .mission-day-sticky-actions {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 6px);
    z-index: 1065;
    background: var(--bg-surface, rgba(255, 255, 255, 0.96));
    border: 1px solid var(--app-border, rgba(15, 23, 42, 0.1));
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
    padding: 10px;
    backdrop-filter: blur(6px);
  }

  html[data-theme="dark"] .mission-day-sticky-actions,
  body.app-layout.dark-mode .mission-day-sticky-actions {
    background: var(--app-surface-dark, rgba(15, 23, 42, 0.92));
    border-color: var(--app-border-dark, rgba(148, 163, 184, 0.22));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
  }

  body.mission-day-sticky-active {
    padding-bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 158px);
  }

  .mission-day-sticky-actions .mission-day-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.cdg-mobile-action-rail {
  display: none;
}

@media (max-width: 992px) {
  .cdg-mobile-action-rail {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 8px);
    z-index: 1066;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--app-border, rgba(15, 23, 42, 0.12));
    background: var(--bg-surface, rgba(255, 255, 255, 0.96));
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(6px);
  }

  .cdg-mobile-action-rail .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.45rem;
    font-size: 0.84rem;
    line-height: 1.2;
    text-align: center;
  }

  body.page-planning .planning-main,
  body.messaging-page .messaging-main,
  .incident-mobile-rail {
    padding-bottom: calc(var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px))) + 114px);
  }

  html[data-theme="dark"] .cdg-mobile-action-rail,
  body.app-layout.dark-mode .cdg-mobile-action-rail {
    background: var(--app-surface-dark, rgba(15, 23, 42, 0.92));
    border-color: var(--app-border-dark, rgba(148, 163, 184, 0.24));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.62);
  }
}

:root {
  --cdg-safe-top: env(safe-area-inset-top, 0px);
  --cdg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cdg-keyboard-inset: 0px;
}

@media (max-width: 991.98px) {
  .cdg-mobile-action-rail,
  .mission-day-sticky-actions,
  .cdg-sticky-actions {
    bottom: calc(
      var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px)))
      + var(--cdg-keyboard-inset, 0px)
      + 8px
    );
  }

  body.app-layout .app-main,
  body.app-layout .dashboard-main,
  body.app-layout .planning-main,
  body.messaging-page .messaging-main {
    padding-bottom: calc(
      var(--cdg-footer-bars-height, calc(var(--cdg-copyright-height, 0px) + var(--cdg-bottom-nav-height, 0px)))
      + var(--cdg-keyboard-inset, 0px)
      + 112px
    );
  }

  body.app-layout.ui-touch-relief .cdg-mobile-action-rail,
  body.app-layout.ui-touch-relief .mission-day-sticky-actions {
    padding: 10px;
    gap: 10px;
  }
}