* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #f5f5f7;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: #f5f5f7;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
}

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

.app-shell,
.app-main,
.app-content {
  min-width: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Shared responsive toolbar: add these classes to page filter/action rows. */
.responsive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.responsive-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ant-drawer-content-wrapper {
  max-width: 100vw !important;
}

.ant-pagination {
  row-gap: 8px;
}

/* === 通用：表格容器横向滚动（防双重滚动条） === */
.ant-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── 表格单元格省略号截断（按需启用） ──
   在 .ant-table-wrapper 上添加 .table-cell-ellipsis 类即可生效：
   <Table className="table-cell-ellipsis" ... /> */
.table-cell-ellipsis .ant-table-thead > tr > th,
.table-cell-ellipsis .ant-table-tbody > tr > td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 操作列按钮不换行 */
.ant-table-wrapper .ant-table-cell .ant-space {
  flex-wrap: nowrap;
}

/* ── 宿舍总览卡片：Tag 溢出截断 ── */
.room-card-tag-wrapper {
  overflow: hidden;
}
.room-card-tag-wrapper .ant-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.room-card-tag-wrapper .ant-tag .anticon {
  flex-shrink: 0;
}

/* === 手机 (< 576px) === */
@media (max-width: 575px) {
  .app-header {
    height: 56px;
    padding-inline: 8px !important;
    line-height: 56px;
  }

  .app-header .ant-btn {
    width: 40px;
    min-height: 40px;
    padding-inline: 0;
  }

  .app-content {
    min-height: calc(100dvh - 72px);
    margin: 8px !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .app-navigation-drawer .ant-drawer-header {
    padding-inline: 16px;
  }

  .responsive-toolbar {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 12px;
  }

  .responsive-toolbar__group,
  .responsive-toolbar > .ant-space {
    width: 100%;
  }

  .responsive-toolbar__group > .ant-space-item,
  .responsive-toolbar > .ant-space > .ant-space-item {
    flex: 1 1 140px;
    max-width: 100%;
  }

  .responsive-toolbar .ant-input,
  .responsive-toolbar .ant-input-affix-wrapper,
  .responsive-toolbar .ant-input-search,
  .responsive-toolbar .ant-picker,
  .responsive-toolbar .ant-select,
  .responsive-toolbar .ant-upload,
  .responsive-toolbar .ant-upload-wrapper,
  .responsive-toolbar .ant-btn {
    width: 100% !important;
  }

  .ant-btn:not(.ant-btn-sm),
  .ant-input-affix-wrapper,
  .ant-input-search-button,
  .ant-picker,
  .ant-select-single .ant-select-selector {
    min-height: 40px;
  }

  .ant-table {
    font-size: 13px;
  }
  .ant-table-cell {
    padding: 8px 6px !important;
  }
  .ant-descriptions-item-label,
  .ant-descriptions-item-content {
    font-size: 13px;
  }
  .ant-modal {
    top: 12px;
    max-width: calc(100vw - 16px) !important;
    margin: 0 auto !important;
    padding-bottom: 12px;
  }
  .ant-modal .ant-modal-content {
    padding: 16px;
  }
  .ant-modal .ant-modal-body {
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ant-modal .ant-modal-footer {
    display: flex;
  }
  .ant-modal .ant-modal-footer .ant-btn {
    flex: 1;
    min-height: 40px;
  }
  .ant-drawer .ant-drawer-header {
    padding: 14px 16px;
  }
  .ant-drawer .ant-drawer-body {
    padding: 16px;
    overscroll-behavior: contain;
  }
  .ant-popover,
  .ant-picker-dropdown {
    max-width: calc(100vw - 16px);
  }
  .ant-pagination {
    justify-content: center;
  }
  .ant-pagination .ant-pagination-options {
    margin-inline-start: 0;
  }
  .ant-alert {
    padding: 10px 12px;
  }
  h1 {
    font-size: 22px !important;
  }
  h2 {
    font-size: 18px !important;
  }
  .ant-card {
    margin-bottom: 8px;
  }
  .ant-card .ant-card-body {
    padding: 14px;
  }
}

/* === 平板 (576-991px) === */
@media (min-width: 576px) and (max-width: 991px) {
  .ant-modal {
    max-width: calc(100vw - 48px) !important;
  }
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.notifications-filter {
  width: 100%;
  margin-bottom: 12px;
}

@media (max-width: 575px) {
  .notifications-layout,
  .notifications-content {
    min-width: 0;
  }

  .notifications-header {
    margin-bottom: 12px;
  }

  .notifications-content .ant-list-item {
    align-items: flex-start;
    padding: 14px 6px !important;
  }

  .notifications-content .ant-list-item-meta-avatar {
    margin-inline-end: 10px;
  }

  .notifications-content .ant-list-item-meta-title {
    margin-bottom: 4px;
  }
}

@media (max-width: 575px) {
  .ant-table-wrapper::before {
    content: '表格可左右滑动查看';
    display: block;
    margin-bottom: 6px;
    color: #8c8c8c;
    font-size: 11px;
    text-align: right;
  }

  .ant-table-wrapper .ant-table-content {
    scrollbar-width: thin;
  }

  .ant-table-wrapper .ant-table-cell-fix-left,
  .ant-table-wrapper .ant-table-cell-fix-right {
    box-shadow: 2px 0 5px rgb(0 0 0 / 5%);
  }
}

.responsive-toolbar--single {
  justify-content: flex-start;
}

@media (max-width: 575px) {
  /* Input.Search is an internal compact group. Keep the text field flexible and
     the search icon button fixed instead of applying toolbar full-width rules
     to both children. */
  .responsive-toolbar .ant-input-search > .ant-input-affix-wrapper {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
  }

  .responsive-toolbar .ant-input-search > .ant-input-search-btn {
    flex: 0 0 40px;
    width: 40px !important;
    min-width: 40px;
    padding-inline: 0;
  }
}