/* ============================================================
   熊猫面板 · 极简主题 (panel-slim)
   仅覆盖外观，不改变任何结构/按钮/逻辑
   ============================================================ */

:root {
  --accent: #3b6cf6;
  --accent-hover: #2f5fe0;
  --accent-soft: #eef3ff;
  --bg-page: #f4f5f7;
  --bg-card: #ffffff;
  --line: #eceef2;
  --text: #1f2329;
  --text-2: #6b7280;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.06);
}

html, body {
  background: var(--bg-page) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* 整体布局背景 */
.ant-app,
.ant-layout {
  background: var(--bg-page) !important;
}

/* 左侧导航：深海军蓝，更克制 */
.ant-layout-sider {
  background: #0f172a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.ant-layout-sider .ant-layout-sider-children {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}
.ant-layout-sider .ant-layout-sider-children div {
  color: #cbd5e1 !important;
}
.ant-layout-sider .ant-layout-sider-children .ant-menu-item {
  color: #94a3b8 !important;
}
.ant-layout-sider .ant-layout-sider-children .ant-menu-item-selected {
  color: #ffffff !important;
}
.ant-menu.ant-menu-dark {
  background: transparent !important;
}
.ant-menu.ant-menu-dark .ant-menu-item {
  border-radius: 10px !important;
  margin: 4px 10px !important;
  width: auto !important;
  color: #94a3b8 !important;
}
.ant-menu.ant-menu-dark .ant-menu-item:hover {
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 108, 246, 0.35) !important;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected .anticon {
  color: #ffffff !important;
}

/* 顶栏 */
.ant-layout-header {
  background: #ffffff !important;
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--line) !important;
}

/* 内容区 */
.ant-layout-content {
  padding: 20px 24px !important;
  background: var(--bg-page) !important;
}

/* 卡片 */
.ant-card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
.ant-card-hoverable:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.ant-card .ant-card-body {
  padding: 18px !important;
}

/* 按钮：扁平化、统一圆角 */
.ant-btn {
  border-radius: 10px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.ant-btn-primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}
.ant-btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.ant-btn-default,
.ant-btn-text {
  color: #3b3f46 !important;
}
.ant-btn-dangerous.ant-btn-primary {
  background: #e5484d !important;
  border-color: #e5484d !important;
}

/* 输入 / 选择 / 日期 */
.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-picker {
  border-radius: 10px !important;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-radius: 10px !important;
}

/* 表单间距 */
.ant-form-inline .ant-form-item {
  margin-inline-end: 12px !important;
}

/* 分页 */
.ant-pagination .ant-pagination-item-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.ant-pagination .ant-pagination-item-active a {
  color: #ffffff !important;
}

/* 复选框/单选 选中态 */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.ant-switch-checked {
  background: var(--accent) !important;
}

/* 弹窗 / 抽屉 / 提示 */
.ant-modal-content,
.ant-drawer-content {
  border-radius: 16px !important;
}
.ant-modal-header {
  border-radius: 16px 16px 0 0 !important;
}

/* 头像 / 徽标 */
.ant-badge-count,
.ant-scroll-number {
  background: #e5484d !important;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  background: #d4d7dd;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b9bec7;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* 菜单项圆角兜底 */
.ant-menu .ant-menu-item,
.ant-menu-inline .ant-menu-item,
.ant-menu-light .ant-menu-item,
.ant-menu-dark .ant-menu-item {
  border-radius: 10px !important;
}
/* Live redesign: compact devices dashboard */
.device-overview-panel {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px;
  box-sizing: border-box;
  flex-wrap: wrap;
  background: var(--bg-card, rgba(255,255,255,.8));
  border: 1px solid var(--border-primary, #e8e8e8);
  border-radius: 14px;
}
.device-overview-metric {
  flex: 1 1 180px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--bg-tertiary, #fafafa);
  border: 1px solid var(--border-primary, #e8e8e8);
  box-sizing: border-box;
}
.device-overview-label { color: var(--text-secondary, #606266); font-size: 13px; white-space: nowrap; }
.device-overview-value { font-size: 25px; line-height: 1; font-weight: 700; }
.hide-device-action { display: none !important; }
.device-list-row { min-width: 0; }
.device-list-row > div { min-width: 0; }
.device-list-row .ant-input { min-width: 0; }
/* Top shell: keep collapse/theme/avatar, remove legacy time/IP/count chips. */
.top-region-time,
.header-region-time,
.header-online-count,
.header-device-count,
.top-online-count,
.device-time-block,
.device-ip-block { display: none !important; }
/* Control page rearrangement */
.control-page-root {
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
}
.control-main-column {
  width: 100% !important;
  max-width: 100% !important;
  order: 2 !important;
  flex: none !important;
}
.control-side-tabs {
  width: 100% !important;
  max-width: 100% !important;
  order: 1 !important;
  flex: none !important;
  min-height: 0 !important;
}
.control-side-tabs .ant-tabs-nav {
  margin: 0 !important;
  padding: 8px 12px 0 !important;
  background: var(--bg-card, rgba(255,255,255,.75));
  border-radius: 12px 12px 0 0;
}
.control-side-tabs .ant-tabs-content-holder {
  min-height: 120px;
}
.control-reader-toolbar,
.control-screen-toolbar {
  width: 100% !important;
  box-sizing: border-box !important;
}
.control-reader-toolbar { order: 1; }
.control-screen-toolbar { order: 1; }
.control-time-row { display: none !important; }
/* Reader colors/font inputs are fixed in the redesign. */
.hide-reader-setting,
.control-reader-toolbar input[type="color"],
.control-reader-toolbar input[type="range"],
.control-reader-toolbar button[title*="重置"] { display: none !important; }
/* Compact Trojan panel */
.trojan-compact-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  min-height: 120px;
  background: var(--bg-card, rgba(255,255,255,.75));
  border: 1px solid var(--border-primary, #e8e8e8);
  border-radius: 12px;
}
.trojan-compact-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #303133); }
.trojan-compact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.trojan-compact-actions .ant-btn { min-width: 150px; }
.trojan-compact-help { color: var(--text-tertiary, #909399); font-size: 12px; }
@media (max-width: 760px) {
  .device-overview-panel { gap: 8px; padding: 10px; }
  .device-overview-metric { flex-basis: 100%; }
  .control-page-root { padding: 8px !important; gap: 8px !important; }
}
.header-time-block,
.header-online-block { display: none !important; }
/* Direct bundle semantic hooks */
/* Keep only the five requested device actions even before React rerenders. */
.device-list-row .hide-device-action { display: none !important; }
.device-list-row > div:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 6px !important;
}
/* The compact list never exposes the old idle badge or name/IP columns. */
.device-list-row .device-idle-badge,
.device-list-row [data-device-field="name"],
.device-list-row [data-device-field="ip"] { display: none !important; }
.control-main-column,
.control-side-tabs { box-sizing: border-box !important; }
.control-side-tabs .control-tabs-wrapper { width: 100% !important; min-height: 180px !important; }
.device-overview-title {
  flex: 0 0 100%;
  color: var(--text, #1f2329);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .02em;
}
.device-overview-metrics {
  flex: 1 1 100%;
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.device-overview-metrics .device-overview-metric { flex: 1 1 180px; }
@media (max-width: 760px) {
  .device-overview-metrics { gap: 8px; }
  .device-overview-metrics .device-overview-metric { flex-basis: 100%; }
}
/* The two control toolbars share one row; keep both inside the viewport. */
.control-reader-toolbar,
.control-screen-toolbar {
  flex: 1 1 0 !important;
  width: calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
  min-width: 0 !important;
}
@media (max-width: 760px) {
  .control-reader-toolbar,
  .control-screen-toolbar {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}