.protection-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.protection-settings-grid section{min-width:0;display:grid;gap:10px;align-content:start}.protection-settings-grid h3{margin:0}.protection-settings-grid small{color:var(--text-muted,#64748b);line-height:1.65}.ops-preview-tabs span{font-weight:600;color:#475569}
@media(max-width:600px){.protection-settings-grid{grid-template-columns:1fr}}

.workpage-related{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:9px 13px;background:#f5f9ff;border:1px solid #dce7f4;border-radius:6px;margin-bottom:10px;font-size:12px;line-height:1.6}.workpage-related>span{color:#8397b3}.workpage-related>a{color:#2465ac;text-decoration:none}.workpage-related>a:hover{text-decoration:underline}.workpage-related>a:focus-visible{outline:2px solid #2377ef;outline-offset:3px}

/* QA001: narrow metric cards keep complete amounts inside the card. */
@media(max-width:600px){
 body .metrics .metric-card{display:grid;grid-template-columns:29px minmax(0,1fr);gap:4px 8px}
 body .metrics .metric-content{display:contents}
 body .metrics .metric-icon{grid-column:1;grid-row:1}
 body .metrics .metric-label{grid-column:2;grid-row:1;min-width:0;align-self:center}
 body .metrics .metric-value{display:block;grid-column:1/-1;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
 body .metrics .metric-comparison{grid-column:1/-1;min-width:0;white-space:normal;overflow-wrap:anywhere}
}

/* QA001: date inputs and trend cards adapt to tablet widths. */
.date-range input[type="date"]{min-width:0;flex:1 1 0;width:0}
@media(min-width:601px) and (max-width:991px){
 body[data-feature="1.2"] .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
 body .metrics .metric-value{white-space:normal;overflow-wrap:anywhere}
}

@media(min-width:601px) and (max-width:991px){
 .trends-filter .field:not(.date-field){flex:1 1 240px;min-width:0}
 .trends-filter .field .form-select{min-width:0;width:100%}
}

@media(max-width:600px){body .metrics .metric-content>small{grid-column:1/-1;min-width:0;white-space:normal;overflow-wrap:anywhere}}

/* Manual seconds and first pending draw configuration. */
.instance-schedule-fields{margin-top:16px;padding-top:14px;border-top:1px solid #e2e8f0}.instance-schedule-fields h3{font-size:16px;line-height:1.5;margin:0 0 10px;font-weight:600}.instance-schedule-fields>p{font-size:12px;line-height:1.65;margin:8px 0}.instance-schedule-fields .form-grid{margin-top:10px}

/* Source-adoption confirmation must show complete times and source captions on phones. */
@media (max-width:575px){
 .source-adoption-differences .table-scroll{overflow-x:visible}
 .source-adoption-differences .data-table{width:100%;min-width:0;table-layout:fixed}
 .source-adoption-differences .data-table th,.source-adoption-differences .data-table td{white-space:normal;overflow-wrap:anywhere;word-break:break-word;vertical-align:top;font-size:12px}
}

/* 2.8 登录与操作日志查询栏：控件收窄并保持一行 */
@media (min-width:992px){
 .users-page .u-logs-layout .filter-bar{gap:9px;align-items:end;flex-wrap:nowrap}
 .users-page .u-logs-layout .filter-bar>.field{min-width:0;flex:0 1 132px}
 .users-page .u-logs-layout .filter-bar>.field:first-child{flex:0 1 168px}
 .users-page .u-logs-layout .filter-bar>.date-field{min-width:0;flex:0 1 210px}
 .users-page .u-logs-layout .filter-bar .form-control,
 .users-page .u-logs-layout .filter-bar .form-select{height:32px;font-size:11.5px;padding-left:8px;padding-right:8px}
 .users-page .u-logs-layout .filter-bar .field>span{font-size:11px}
 .users-page .u-logs-layout .filter-bar .date-range{height:32px}
 .users-page .u-logs-layout .filter-bar .date-range input{font-size:11px}
 .users-page .u-logs-layout .filter-bar .filter-actions .btn{min-width:56px;height:32px;font-size:11.5px}
}

/* 2.8 日志查询栏：页面外层是 workpage-shell，没有 .users-page，故用不带该前缀的选择器 */
@media (min-width:992px){
 .u-logs-layout .filter-bar{gap:9px;align-items:end;flex-wrap:nowrap}
 .u-logs-layout .filter-bar>.field{min-width:0;flex:0 1 132px}
 .u-logs-layout .filter-bar>.field:first-child{flex:0 1 168px}
 .u-logs-layout .filter-bar>.date-field{min-width:0;flex:0 1 210px}
 .u-logs-layout .filter-bar .form-control,
 .u-logs-layout .filter-bar .form-select{height:32px;font-size:11.5px;padding-left:8px;padding-right:8px}
 .u-logs-layout .filter-bar .field>span{font-size:11px}
 .u-logs-layout .filter-bar .date-range{height:32px}
 .u-logs-layout .filter-bar .date-range input{font-size:11px}
 .u-logs-layout .filter-bar .filter-actions .btn{min-width:56px;height:32px;font-size:11.5px}
}

/* 筛选条统一为「标签在左、控件在右」横向排列。
   只作用于 .filter-bar 内的 .field；弹窗与表单里的字段仍保持竖向。 */
.filter-bar .field{flex-direction:row;align-items:center;gap:7px;flex-wrap:nowrap}
.filter-bar .field>span:first-child{flex:0 0 auto;margin:0;font-weight:500;white-space:nowrap}
.filter-bar .field>.form-control,
.filter-bar .field>.form-select,
.filter-bar .field>.date-range{flex:1 1 auto;min-width:0}
/* 日期区间是「图标 + 两个输入」，横向时同样把标签留在左侧。 */
.filter-bar .date-field{flex-direction:row;align-items:center;gap:7px}
.filter-bar .date-field>.date-range{flex:1 1 auto;min-width:0}
/* 标签横向后每项需要的宽度变小：收回竖排时的 min-width，并把首个关键词输入给足空间。 */
.filter-bar>.field{min-width:170px;flex:1 1 170px}
.filter-bar>.field:first-child{min-width:200px;flex:1.25 1 200px}
.filter-bar .date-field{min-width:250px;flex:1.3 1 250px}
@media (max-width:1200px){
  .filter-bar>.field{min-width:140px;flex:1 1 140px}
  .filter-bar>.field:first-child{min-width:160px;flex:1.15 1 160px}
  .filter-bar .date-field{min-width:210px;flex:1.2 1 210px}
}

/* Keep profile and logout reachable when all live header controls are present. */
@media (max-width:600px) {
  .app-header { gap:8px; padding-left:12px; padding-right:12px; }
  .app-header .global-search { min-width:40px; flex:1 1 70px; }
  .app-header .global-search input { min-width:0; }
  .app-header .header-right { gap:8px; flex:0 0 auto; }
  .app-header .support-entry { width:32px; min-width:32px; height:32px; padding:6px; gap:0; font-size:0; }
  .app-header .support-entry > .bi { font-size:16px; }
  .app-header .header-workspace select { width:85px; max-width:85px; min-width:0; }
  .app-header .profile-button, .app-header .notification-button { flex-shrink:0; }
}