rainblogweb/frontend/src/admin/theme.css

/* ============================================================
 * 后台 MD3 全局微调：与前台（public/css/style.css）一致的氛围细节
 * 前台 token 变量未注入后台页面，这里按明暗各写一份。
 * ============================================================ */

/* 内容区入场动效（对应前台 contentFadeIn） */
main {
  animation: md3ContentFadeIn 0.28s ease;
}

@keyframes md3ContentFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* 明暗切换过渡 */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 设置区块锚点（搜索跳转定位）：预留固定 AppBar 高度，避免被遮挡 */
[id^="sec-"] {
  scroll-margin-top: 88px;
}

/* 滚动条（对应前台细滚动条） */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cac4d0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #79747e; }

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #49454f; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #938f99; }

/* 工单工作区：占满 AdminLayout 内容区，桌面保持列表/详情主次比例。 */
.ticket-workspace {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: calc(100vh - 112px);
}

.ticket-workspace .ticket-stats {
  width: 100%;
}

.ticket-work-area {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
  height: max(520px, calc(100vh - 280px));
  align-items: stretch;
}

.ticket-list-pane,
.ticket-detail-pane {
  min-width: 0;
  width: 100%;
}

.ticket-list-pane > .MuiPaper-root,
.ticket-detail-pane > .MuiPaper-root {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ticket-list-pane > .MuiPaper-root {
  min-height: 0;
}

.ticket-detail-pane > .MuiPaper-root {
  min-height: 0;
  overflow: auto;
}

.ticket-list-card {
  display: flex;
  flex-direction: column;
}

.ticket-list-card > .MuiDivider-root,
.ticket-list-card > .MuiStack-root:last-child {
  flex: 0 0 auto;
}

.ticket-list-scroll {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  align-items: stretch;
}

.ticket-list-scroll > li {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.ticket-list-scroll > li,
.ticket-list-scroll > li > .MuiButton-root {
  min-width: 0;
  max-width: 100%;
}

.ticket-list-scroll > li > .MuiButton-root {
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 48px;
}

.ticket-list-row {
  display: grid;
  grid-template-columns: max-content minmax(120px, 1.4fr) minmax(120px, 1fr) max-content max-content;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 700px) {
  .ticket-list-row {
    min-width: 500px;
  }
}

.ticket-list-row > .MuiTypography-root,
.ticket-list-row > .MuiChip-root {
  min-width: 0;
}

.ticket-list-row > .MuiTypography-root {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-list-row > .MuiChip-root {
  flex: 0 0 auto;
}

.ticket-list-scroll > li > .MuiButton-root > .MuiBox-root {
  min-width: 0;
}

.ticket-list-scroll .MuiTypography-root {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket-list-scroll .MuiChip-root {
  flex: 0 0 auto;
  max-width: 100%;
}

.ticket-list-number {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket-detail-card {
  overflow: auto;
}

.ticket-filter-grid {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)) minmax(96px, 0.85fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.ticket-filter-grid > * {
  min-width: 0;
}

.ticket-filter-grid .MuiInputBase-root,
.ticket-filter-grid .MuiButton-root {
  width: 100%;
  min-width: 0;
}

.ticket-select-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-save-feedback {
  overflow-wrap: anywhere;
}

.ticket-save-saving { color: var(--mui-palette-text-secondary, inherit); }
.ticket-save-success { color: #2e7d32; }
.ticket-save-error { color: #d32f2f; }

[data-theme="dark"] .ticket-save-success { color: #81c784; }
[data-theme="dark"] .ticket-save-error { color: #ef9a9a; }

@media (max-width: 1199px) and (min-width: 700px) {
  .ticket-filter-grid {
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(118px, 1fr));
  }

  .ticket-filter-grid .ticket-filter-search {
    grid-column: 1 / -1;
  }

  .ticket-filter-grid > .MuiButton-root {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1199px) and (min-width: 700px) {
  .ticket-work-area {
    grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 699px) {
  .ticket-workspace {
    min-height: 0;
  }

  .ticket-work-area {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 16px;
  }

  .ticket-list-pane > .MuiPaper-root,
  .ticket-detail-pane > .MuiPaper-root {
    min-height: 0;
  }

  .ticket-list-card {
    max-height: 480px;
  }

  .ticket-list-scroll {
    flex: 0 1 auto;
    max-height: 350px;
  }

  .ticket-list-row {
    grid-template-columns: max-content minmax(140px, 1.2fr) minmax(120px, 1fr) max-content max-content;
    min-width: 560px;
  }

  .ticket-list-scroll {
    overflow-x: auto;
  }

  .ticket-detail-pane > .MuiPaper-root {
    min-height: 480px;
  }

  .ticket-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ticket-filter-grid .ticket-filter-search,
  .ticket-filter-grid > .MuiButton-root {
    grid-column: 1 / -1;
  }
}

@media (max-width: 459px) {
  .ticket-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}