* {
  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-sidebar {
  flex: 0 0 auto;
}

.app-content > * {
  min-width: 0;
  max-width: 100%;
}

.ant-card,
.ant-card-body,
.ant-tabs,
.ant-tabs-content-holder,
.ant-tabs-content,
.ant-tabs-tabpane {
  min-width: 0;
}

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

.route-dock {
  position: sticky;
  top: 64px;
  z-index: 90;
  min-width: 0;
  height: 44px;
  padding: 6px 12px;
  overflow: hidden;
  background: #f5f5f7;
  border-bottom: 1px solid #e5e5e7;
}

.route-dock .ant-tabs {
  height: 32px;
}

.route-dock .ant-tabs-nav {
  height: 32px;
  margin: 0;
}

.route-dock .ant-tabs-nav::before {
  border-bottom: 0;
}

.route-dock .ant-tabs-tab {
  min-width: 112px;
  max-width: 220px;
  height: 32px;
  margin: 0 6px 0 0 !important;
  padding: 0 10px 0 12px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}

.route-dock .ant-tabs-tab:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #dedee2 !important;
}

.route-dock .ant-tabs-tab-active {
  background: #fff !important;
  border-color: #d8d8dc !important;
  box-shadow:
    inset 0 2px 0 #1677ff,
    0 2px 7px rgba(29, 29, 31, 0.08);
}

.route-dock .ant-tabs-tab-btn {
  min-width: 0;
  overflow: hidden;
  color: #4d4d4d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-dock .ant-tabs-tab-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border-radius: 50%;
  transition: background-color 140ms ease;
}

.route-dock .ant-tabs-tab-remove:hover {
  background: #ededf0;
}

.route-dock .ant-tabs-content-holder {
  display: none;
}

/* 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;
}

.student-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.student-form-grid .ant-form-item {
  min-width: 0;
}

@media (max-width: 575px) {
  .student-form-grid {
    grid-template-columns: 1fr;
  }
}

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

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

/* Data tables own their horizontal scroll instead of widening the page. */
.ant-table-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.ant-table-wrapper .ant-table-content {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Keep wide tables scrollable without showing a heavy bar on every table. */
.ant-table-wrapper .ant-table-content {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

.ant-table-wrapper .ant-table-content::-webkit-scrollbar {
  height: 6px;
}

.ant-table-wrapper .ant-table-content::-webkit-scrollbar-track {
  background: transparent;
}

.ant-table-wrapper .ant-table-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.ant-table-wrapper:hover .ant-table-content,
.ant-table-wrapper:focus-within .ant-table-content {
  scrollbar-color: #c8c8cc transparent;
}

.ant-table-wrapper:hover .ant-table-content::-webkit-scrollbar-thumb,
.ant-table-wrapper:focus-within .ant-table-content::-webkit-scrollbar-thumb {
  background: #c8c8cc;
}

/* ── 表格单元格省略号截断（按需启用） ──
   在 .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;
  }

  .route-dock {
    top: 56px;
    height: 42px;
    padding: 5px 8px;
  }

  .route-dock .ant-tabs-tab {
    min-width: 104px;
  }

  .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;
  }
}

@media (max-width: 575px) {
  .ant-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-block: 12px;
  }

  .ant-card-head-wrapper {
    width: 100%;
    min-width: 0;
  }

  .ant-card-extra {
    max-width: 100%;
    margin-inline-start: 0;
  }

  .ant-card-extra > .ant-space {
    flex-wrap: wrap;
  }

  .ant-form-item-control,
  .ant-form-item-control-input,
  .ant-form-item-control-input-content,
  .ant-picker-range {
    min-width: 0;
    max-width: 100%;
  }

  .ant-statistic-content {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 991px) {
  .app-content {
    overflow: hidden;
  }
}

/* === 平板 (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;
  }
}