/*
 * Harbor — mobile-responsive overrides
 * Mobile-first: base styles for phones (~390px), desktop restore at 600px.
 * Targets Clarity Design (clr-*) and Harbor-specific class names.
 * No hardcoded colors — additive layout overrides only.
 */

/* ── Global: prevent horizontal overflow ── */
body,
.container,
.app-wrapper,
harbor-shell .main-content,
.content-area {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── Sidebar: collapse on mobile ── */
.navigator,
.nav-group,
clr-vertical-nav {
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  height: auto !important;
}

.content-container {
  display: flex;
  flex-direction: column !important;
}

/* ── Tables: horizontal scroll ── */
.datagrid,
.datagrid-table,
nz-table,
.ant-table,
.ant-table-wrapper,
clr-datagrid,
.hbr-table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.datagrid-table,
.ant-table table,
nz-table table {
  min-width: 600px;
}

/* ── Forms: stack vertically ── */
.clr-form-horizontal .clr-form-control,
.clr-form-compact .clr-form-control,
.form-group,
nz-form-item,
.ant-form-item,
.clr-form-control {
  flex-direction: column !important;
  align-items: flex-start !important;
}

.clr-form-horizontal .clr-control-label,
.clr-control-label,
nz-form-label,
.ant-form-item-label {
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  padding-bottom: 4px;
}

.clr-form-horizontal .clr-control-container,
.clr-control-container,
nz-form-control,
.ant-form-item-control {
  width: 100% !important;
  max-width: 100% !important;
}

.clr-input,
.clr-textarea,
.clr-select,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select,
.ant-input,
.ant-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ── Project list: stack ── */
.project-list,
.hbr-project-list,
.list-content {
  display: flex;
  flex-direction: column;
}

/* ── Action bars: wrap ── */
.action-bar,
.toolbar-actions,
.clr-row .btn-group,
.operation-bar {
  flex-wrap: wrap !important;
  gap: 8px;
}

/* ── Modals: near full-width ── */
.modal-dialog,
.clr-modal .modal-dialog,
.ant-modal,
nz-modal-container .ant-modal {
  width: 95vw !important;
  max-width: 95vw !important;
  margin: 8px auto !important;
}

.modal-body,
.ant-modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* ── Header: wrap ── */
.header,
.branding,
header.header {
  flex-wrap: wrap;
  padding: 0 8px;
}

.header .header-actions,
.header-actions {
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Pagination: wrap ── */
.pagination,
.ant-pagination,
nz-pagination {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px;
}

/* ── Desktop: restore normal layout ── */
@media (min-width: 600px) {
  .navigator,
  .nav-group,
  clr-vertical-nav {
    width: 240px !important;
    min-width: 240px !important;
    position: relative !important;
    height: 100% !important;
  }

  .content-container {
    flex-direction: row !important;
  }

  .clr-form-horizontal .clr-form-control,
  .clr-form-compact .clr-form-control {
    flex-direction: row !important;
    align-items: center !important;
  }

  .clr-form-horizontal .clr-control-label,
  .clr-control-label {
    width: auto !important;
    max-width: none !important;
  }

  .clr-form-horizontal .clr-control-container,
  .clr-control-container {
    width: auto !important;
    max-width: none !important;
  }

  .modal-dialog,
  .clr-modal .modal-dialog,
  .ant-modal,
  nz-modal-container .ant-modal {
    width: auto !important;
    max-width: 768px !important;
    margin: 24px auto !important;
  }
}