/* Homepage only. The route adapter adds/removes home-device-page on <html>. */
html.home-device-page {
  --home-green-text: #234c36;
  --home-green-muted: #5b7a65;
  --home-green-border: rgba(61, 133, 83, 0.22);
  --home-green-accent: #25985b;
  --home-green-surface: rgba(229, 247, 232, 0.92);
}

html.home-device-page body {
  background: linear-gradient(135deg, #cce8cb 0%, #deefdb 40%, #c4e3cd 100%) !important;
  background-attachment: fixed !important;
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-layout,
html.home-device-page body .n-layout-content {
  background: transparent !important;
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-layout-sider,
html.home-device-page body .n-layout-sider-scroll-container,
html.home-device-page body .n-layout-header,
html.home-device-page body .inner-sidebar {
  background: rgba(211, 238, 214, 0.93) !important;
  border-color: var(--home-green-border) !important;
  box-shadow: 0 2px 14px rgba(38, 87, 51, 0.08) !important;
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-layout-header *,
html.home-device-page body .n-menu .n-menu-item,
html.home-device-page body .n-menu .n-menu-item-content,
html.home-device-page body .n-menu .n-menu-item-content-header,
html.home-device-page body .n-menu .n-menu-item-content-header a {
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-menu .n-menu-item:hover {
  background: rgba(182, 223, 190, 0.72) !important;
  box-shadow: 0 2px 8px rgba(38, 87, 51, 0.07) !important;
}

html.home-device-page body .n-menu .n-menu-item.n-menu-item--selected {
  background: #bce2c3 !important;
  color: #126c3a !important;
  box-shadow: inset 0 0 0 1px rgba(37, 152, 91, 0.2) !important;
}

html.home-device-page body .n-card,
html.home-device-page body .n-card.proCard,
html.home-device-page body .proCard {
  background: var(--home-green-surface) !important;
  border-color: var(--home-green-border) !important;
  color: var(--home-green-text) !important;
  box-shadow: 0 4px 18px rgba(38, 87, 51, 0.09), inset 0 1px 0 rgba(243, 255, 244, 0.55) !important;
}

html.home-device-page body .n-card:hover {
  background: rgba(232, 249, 234, 0.96) !important;
  border-color: rgba(61, 133, 83, 0.3) !important;
  box-shadow: 0 6px 22px rgba(38, 87, 51, 0.11) !important;
}

html.home-device-page body .n-card .n-card__content,
html.home-device-page body .n-card .n-card__footer,
html.home-device-page body .n-card .n-card__action,
html.home-device-page body .n-card .n-card-header,
html.home-device-page body .n-card .n-card-header__main,
html.home-device-page body .n-form-item,
html.home-device-page body .n-form-item-label,
html.home-device-page body .n-form-item-label__text,
html.home-device-page body .n-breadcrumb .n-breadcrumb-item,
html.home-device-page body .n-pagination,
html.home-device-page body .n-pagination-prefix,
html.home-device-page body .n-pagination-suffix {
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-tabs,
html.home-device-page body .n-tabs .n-tabs-nav,
html.home-device-page body .n-tabs .n-tabs-tab {
  background: rgba(211, 238, 214, 0.75) !important;
  border-color: var(--home-green-border) !important;
  color: var(--home-green-muted) !important;
}

html.home-device-page body .n-tabs .n-tabs-tab:hover,
html.home-device-page body .n-tabs .n-tabs-tab.n-tabs-tab--active {
  background: #c0e4c7 !important;
  color: #116b38 !important;
  box-shadow: inset 0 1px 0 rgba(243, 255, 244, 0.5) !important;
}

html.home-device-page body .n-tabs .n-tabs-tab.n-tabs-tab--active *,
html.home-device-page body .n-tabs .n-tabs-tab:hover * {
  color: #116b38 !important;
}

html.home-device-page body .n-tabs .n-tabs-tab__active-bar,
html.home-device-page body .n-tabs .n-tabs-bar {
  background: var(--home-green-accent) !important;
}

html.home-device-page body .n-input,
html.home-device-page body .n-select,
html.home-device-page body .n-select .n-base-selection,
html.home-device-page body .n-base-selection .n-base-selection-label {
  background: #e5f4e5 !important;
  border-color: rgba(65, 132, 87, 0.25) !important;
  color: var(--home-green-text) !important;
  box-shadow: 0 1px 4px rgba(38, 87, 51, 0.05) !important;
}

html.home-device-page body .n-input:hover,
html.home-device-page body .n-input:focus-within {
  background: #edfaed !important;
  border-color: var(--home-green-accent) !important;
  box-shadow: 0 0 0 2px rgba(37, 152, 91, 0.12) !important;
}

html.home-device-page body .n-input .n-input__input-el,
html.home-device-page body .n-input .n-input__textarea-el,
html.home-device-page body .n-base-selection .n-base-selection-input {
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-input .n-input__placeholder,
html.home-device-page body .n-input .n-input__prefix,
html.home-device-page body .n-input .n-input__suffix,
html.home-device-page body .n-empty .n-empty__description {
  color: var(--home-green-muted) !important;
}

html.home-device-page body .n-button:not(.n-button--error-type) {
  background: #d4ebd8 !important;
  color: #22663e !important;
  border-color: rgba(49, 130, 76, 0.3) !important;
  box-shadow: 0 1px 4px rgba(38, 87, 51, 0.08) !important;
}

html.home-device-page body .n-button:not(.n-button--error-type):hover {
  background: #c3e3c9 !important;
}

html.home-device-page body .n-button.n-button--primary-type,
html.home-device-page body .n-button.n-button--info-type,
html.home-device-page body .n-button.n-button--success-type,
html.home-device-page body .n-button.n-button--warning-type {
  background: #28a464 !important;
  color: #f4fff6 !important;
  border-color: #25985b !important;
}

html.home-device-page body .n-button.n-button--primary-type:hover,
html.home-device-page body .n-button.n-button--info-type:hover,
html.home-device-page body .n-button.n-button--success-type:hover,
html.home-device-page body .n-button.n-button--warning-type:hover {
  background: #208b52 !important;
}

html.home-device-page body .n-button.n-button--error-type {
  background: #d64954 !important;
  border-color: #c63c48 !important;
  color: #fff6f6 !important;
}

html.home-device-page body .n-button.n-button--error-type:hover {
  background: #bd3442 !important;
}

html.home-device-page body .n-button .n-button__content,
html.home-device-page body .n-button .n-button__content *,
html.home-device-page body .n-button .n-button__icon,
html.home-device-page body .n-button .n-button__icon * {
  color: inherit !important;
}

html.home-device-page body .n-button .n-button__border,
html.home-device-page body .n-button .n-button__state-border {
  border-color: inherit !important;
}

html.home-device-page body .n-pagination .n-pagination-item {
  background: #e1f1e1 !important;
  border-color: var(--home-green-border) !important;
  color: var(--home-green-text) !important;
}

html.home-device-page body .n-pagination .n-pagination-item--active {
  background: #bde1c3 !important;
  border-color: #25985b !important;
  color: #116b38 !important;
}

html.home-device-page body .n-switch.n-switch--active .n-switch__rail {
  background: #28a464 !important;
}

html.home-device-page body .n-checkbox.n-checkbox--checked .n-checkbox-box {
  background: #28a464 !important;
  border-color: #25985b !important;
}

/* 保留原表格节点和按钮事件，将设备行排成自适应卡片。 */
html.home-device-page .index-root .home-device-grid {
  --device-green: #28b56c;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}
html.home-device-page .home-device-grid .n-data-table-wrapper,
html.home-device-page .home-device-grid .n-data-table-base-table,
html.home-device-page .home-device-grid .n-data-table-base-table-body,
html.home-device-page .home-device-grid .n-data-table-table,
html.home-device-page .home-device-grid .n-scrollbar,
html.home-device-page .home-device-grid .n-scrollbar-container,
html.home-device-page .home-device-grid .n-scrollbar-content {
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
html.home-device-page .home-device-grid table {
  display: block !important;
  table-layout: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
html.home-device-page .home-device-grid colgroup,
html.home-device-page .home-device-grid thead,
html.home-device-page .home-device-grid .n-data-table-base-table-header,
html.home-device-page .home-device-grid .n-scrollbar-rail { display: none !important; }
html.home-device-page .home-device-grid tbody {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(0, min(100%, 320px)));
  gap: 14px;
  align-items: start;
}
html.home-device-page .home-device-grid tr.home-device-card {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: minmax(34px, auto);
  grid-auto-rows: minmax(21px, auto);
  gap: 0 8px;
  padding: 0 8px 9px !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  background: #f0faf1 !important;
  border: 1px solid #a9daba !important;
  border-top: 3px solid var(--device-green) !important;
  border-radius: 7px !important;
  box-shadow: 0 3px 10px rgba(33, 94, 58, .1) !important;
  position: relative;
}
html.home-device-page .home-device-grid tr.home-device-card:hover {
  border-color: #59bc7d !important;
  box-shadow: 0 5px 14px rgba(33, 94, 58, .15) !important;
}
html.home-device-page .home-device-grid .home-device-card > td {
  display: block !important;
  grid-column: 2;
  grid-row: var(--device-line, auto);
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d7eadb !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #244535 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  position: static !important;
  box-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  transform: none !important;
}
html.home-device-page .home-device-grid .home-device-card > td::before {
  content: attr(data-device-label) '：';
  color: #6a8473;
  display: inline-block;
  min-width: 55px;
  margin-right: 2px;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  box-shadow: none !important;
}
html.home-device-page .home-device-grid .home-device-card > td::after { display: none !important; }
html.home-device-page .home-device-grid .home-device-card > td[data-device-field="battery"] {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  border: 0 !important;
  color: #168347 !important;
  font-weight: 600;
  white-space: nowrap !important;
}
html.home-device-page .home-device-grid .home-device-card > td[data-device-field="battery"]::before {
  content: '电量 ';
  color: inherit;
  min-width: 0;
}
html.home-device-page .home-device-grid .home-device-card > td[data-device-field="actions"] {
  /* Full-width auto placement follows all explicitly positioned detail rows. */
  grid-column: 1 / -1;
  grid-row: auto;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 6px;
  border: 0 !important;
  border-top: 1px solid #d7eadb !important;
  margin-top: 8px;
  padding: 8px 0 0 !important;
}
html.home-device-page .home-device-grid td[data-device-field="actions"]::before,
html.home-device-page .home-device-grid td[data-device-field="wallpaper"]::before { display: none !important; }
html.home-device-page .home-device-grid .home-device-card > td[data-device-field="wallpaper"] {
  grid-column: 1;
  grid-row: 2 / span 5;
  border: 0 !important;
  align-self: start;
  padding-top: 5px !important;
}
html.home-device-page .home-device-grid td[data-device-field="wallpaper"] .n-avatar {
  box-sizing: border-box;
  display: block !important;
  width: 52px !important;
  height: 92px !important;
  border: 3px solid #172a20 !important;
  border-bottom-width: 12px !important;
  border-radius: 9px !important;
  background: #d9eedd !important;
  box-shadow: 0 2px 4px #19352426 !important;
}
html.home-device-page .home-device-grid td[data-device-field="wallpaper"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html.home-device-page .home-device-grid .home-device-card > td[data-device-field="screen"] {
  grid-column: 1;
  grid-row: 7 / span 3;
  border: 0 !important;
  text-align: center;
  align-self: start;
}
html.home-device-page .home-device-grid td[data-device-field="screen"]::before {
  content: '屏幕状态';
  display: block;
  min-width: 0;
  margin: 0 0 2px;
  font-size: 10px;
}
html.home-device-page .home-device-grid td[data-device-field="screen"] img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
  vertical-align: middle;
}
html.home-device-page .home-device-grid .home-device-card td button {
  min-height: 23px !important;
  height: auto !important;
  padding: 3px 7px !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  border-radius: 4px !important;
  white-space: nowrap;
}
html.home-device-page .home-device-grid .home-device-card td .n-button:not(.n-button--error-type) {
  background: #28ad67 !important;
  color: #fff !important;
}
html.home-device-page .home-device-grid .home-device-card td .n-button--error-type {
  background: #cf4246 !important;
  color: #fff !important;
}
html.home-device-page .home-device-grid .home-device-card td .n-button *,
html.home-device-page .home-device-grid .home-device-card td .n-button .n-button__content { color: inherit !important; }
html.home-device-page .home-device-grid .home-device-card td .n-button:disabled { opacity: .55; }
html.home-device-page .home-device-grid .home-device-card td .n-tag {
  font-size: 10px !important;
  height: 18px !important;
  line-height: 16px !important;
}
html.home-device-page .home-device-grid .n-data-table__pagination {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 14px 0 0;
  gap: 6px;
  color: #41644b !important;
}
html.home-device-page .home-device-grid tbody > tr:not(.home-device-card) { grid-column: 1 / -1; }
html.home-device-page .home-device-grid .n-data-table-empty { min-height: 160px; background: #e7f5e9 !important; }
@media (max-width: 480px) {
  html.home-device-page .index-root > .n-card > .n-card__content { padding: 10px !important; }
  html.home-device-page .home-device-grid tbody { gap: 10px; }
  html.home-device-page .home-device-grid tr.home-device-card { column-gap: 7px; padding-left: 6px !important; padding-right: 6px !important; }
}

/* Keep full account/device identifiers readable inside narrow cards. */
html.home-device-page .home-device-grid .home-device-card > td .n-ellipsis,
html.home-device-page .home-device-grid .home-device-card > td .n-data-table-td__ellipsis,
html.home-device-page .home-device-grid .home-device-card > td .editable-cell-content {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html.home-device-page .home-device-grid .home-device-card > td[data-device-field="actions"] > button {
  flex: 1 1 0;
  min-width: 44px !important;
  min-height: 32px !important;
  padding: 6px 8px !important;
}