/* =========================================================
   Modern Dark Theme UI - Low Glare & High Readability
   ========================================================= */

:root, html[data-theme='dark'] {
  /* Background Colors - Deep gray/blue-black, not pure black */
  --dark-bg-base: #111114;     /* App background */
  --dark-bg-surface: #18181b;  /* Card / Container / Table background */
  --dark-bg-elevated: #27272a; /* Hover / Focus background */
  --dark-bg-active: #0f0f12;   /* Active background */
  
  /* Typography - Stepped contrast for clarity */
  --dark-text-primary: rgba(255, 255, 255, 0.85); /* Main text */
  --dark-text-secondary: rgba(255, 255, 255, 0.55); /* Labels / Table headers */
  --dark-text-disabled: rgba(255, 255, 255, 0.30); /* Disabled text */
  
  /* Borders & Dividers - Replacing heavy shadows */
  --dark-border: rgba(255, 255, 255, 0.08);
  --dark-border-hover: rgba(255, 255, 255, 0.16);
  --dark-border-active: rgba(255, 255, 255, 0.24);
  
  /* Brand Colors - Restrained, low saturation */
  --dark-primary: #3b7cf6;       /* Focus point */
  --dark-primary-hover: #558df7; /* Brighter for hover */
  --dark-primary-active: #2563eb;/* Deeper for active */
  
  /* Shadows - Minimal, for depth only */
  --dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --dark-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --dark-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* Transitions - Smooth, 150-220ms */
  --dark-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   Global Foundation
   ========================================= */
body, #app, .n-layout, .n-layout-content, .vben-layout, .device-list-wrapper {
  background-color: var(--dark-bg-base) !important;
  color: var(--dark-text-primary) !important;
  transition: var(--dark-transition) !important;
}

/* Scrollbars - Subdued for dark mode */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--dark-bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dark-border-hover);
}

/* =========================================
   Cards & Modals (Layer Separation)
   ========================================= */
.n-card, .el-card, .ant-card,
.n-modal, .el-dialog, .ant-modal-content {
  background-color: var(--dark-bg-surface) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--dark-shadow-md) !important;
  color: var(--dark-text-primary) !important;
  transition: var(--dark-transition) !important;
}

/* =========================================
   Tables (Data Presentation)
   ========================================= */
.n-data-table, .el-table, .ant-table-wrapper, .ant-table {
  background-color: var(--dark-bg-surface) !important;
  border-radius: 8px !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: none !important;
  overflow: hidden;
  color: var(--dark-text-primary) !important;
}

.n-data-table-wrapper, .el-table__inner-wrapper {
  background-color: transparent !important;
}

/* Table Header */
.n-data-table-th, .el-table th.el-table__cell, .ant-table-thead > tr > th {
  background-color: var(--dark-bg-base) !important;
  color: var(--dark-text-secondary) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  border-right: none !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
}

/* Table Cells */
.n-data-table-td, .el-table td.el-table__cell, .ant-table-tbody > tr > td {
  background-color: transparent !important;
  color: var(--dark-text-primary) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  border-right: none !important;
  padding: 12px 16px !important;
  transition: var(--dark-transition) !important;
}

/* Table Rows - Hover */
.n-data-table-tr:hover .n-data-table-td,
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
.ant-table-tbody > tr:hover > td {
  background-color: var(--dark-bg-elevated) !important;
}

/* Table Rows - Selected */
.n-data-table-tr.n-data-table-tr--selected,
.el-table__row.current-row,
.ant-table-tbody > tr.ant-table-row-selected {
  background-color: rgba(59, 124, 246, 0.1) !important;
}

/* =========================================
   Buttons (Interactive Elements)
   ========================================= */
.n-button, .el-button, .ant-btn {
  background-color: var(--dark-bg-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
  border-radius: 6px !important;
  box-shadow: var(--dark-shadow-sm) !important;
  transition: var(--dark-transition) !important;
}

/* Button Hover - Brighter Contrast */
.n-button:hover, .el-button:hover, .ant-btn:hover {
  background-color: var(--dark-bg-elevated) !important;
  border-color: var(--dark-border-hover) !important;
  color: #ffffff !important;
}

/* Button Active - Micro depression */
.n-button:active, .el-button:active, .ant-btn:active {
  transform: translateY(1px) !important;
  background-color: var(--dark-bg-active) !important;
  border-color: var(--dark-border-active) !important;
  box-shadow: var(--dark-shadow-inner) !important;
}

/* Primary Brand Buttons */
.n-button--primary-type, .el-button--primary, .ant-btn-primary {
  background-color: var(--dark-primary) !important;
  border: 1px solid var(--dark-primary) !important;
  color: #ffffff !important;
}

.n-button--primary-type:hover, .el-button--primary:hover, .ant-btn-primary:hover {
  background-color: var(--dark-primary-hover) !important;
  border-color: var(--dark-primary-hover) !important;
}

.n-button--primary-type:active, .el-button--primary:active, .ant-btn-primary:active {
  background-color: var(--dark-primary-active) !important;
  border-color: var(--dark-primary-active) !important;
}

/* =========================================
   Pagination
   ========================================= */
.n-pagination, .el-pagination, .ant-pagination {
  margin-top: 16px;
  padding: 8px 0;
}

.n-pagination-item, .el-pager li, .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next {
  background-color: var(--dark-bg-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text-secondary) !important;
  border-radius: 6px !important;
  transition: var(--dark-transition) !important;
}

.n-pagination-item:hover, .el-pager li:hover, .ant-pagination-item:hover, .ant-pagination-prev:hover, .ant-pagination-next:hover {
  border-color: var(--dark-border-hover) !important;
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-elevated) !important;
}

.n-pagination-item--active, .el-pager li.is-active, .ant-pagination-item-active {
  border-color: var(--dark-primary) !important;
  color: var(--dark-primary) !important;
  background-color: rgba(59, 124, 246, 0.1) !important;
}

/* =========================================
   Inputs & Selects
   ========================================= */
.n-input, .el-input__inner, .ant-input, .n-select, .el-select, .ant-select-selector {
  background-color: var(--dark-bg-base) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
  transition: var(--dark-transition) !important;
}

.n-input:hover, .el-input__inner:hover, .ant-input:hover, .ant-select-selector:hover {
  border-color: var(--dark-border-hover) !important;
}

.n-input--focus, .el-input__inner:focus, .ant-input-focused, .ant-select-focused .ant-select-selector {
  border-color: var(--dark-primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 124, 246, 0.2) !important;
}

/* =========================================
   Device List Refinement
   Softer neumorphism for dark backgrounds
   ========================================= */
html[data-theme='dark'] .layout-default-background,
html[data-theme='dark'] .tabs-view-default-background,
html[data-theme='dark'] .layout-content-main,
html[data-theme='dark'] .main-view,
html[data-theme='dark'] .n-layout-scroll-container {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 32%),
    linear-gradient(180deg, #12151b 0%, #0f1217 100%) !important;
}

html[data-theme='dark'] .table-toolbar,
html[data-theme='dark'] .n-card,
html[data-theme='dark'] .n-spin-container,
html[data-theme='dark'] .n-data-table-wrapper,
html[data-theme='dark'] .n-data-table-base-table,
html[data-theme='dark'] .el-table__inner-wrapper,
html[data-theme='dark'] .ant-table-container {
  background: #171b22 !important;
  border-radius: 14px !important;
}

html[data-theme='dark'] .table-toolbar,
html[data-theme='dark'] .n-card,
html[data-theme='dark'] .n-spin-container,
html[data-theme='dark'] .n-data-table,
html[data-theme='dark'] .el-table,
html[data-theme='dark'] .ant-table-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
}

html[data-theme='dark'] .n-data-table,
html[data-theme='dark'] .n-data-table-wrapper,
html[data-theme='dark'] .n-data-table-base-table {
  --n-color: #171b22;
  --n-border-color: rgba(255, 255, 255, 0.06);
  --n-border-color-modal: rgba(255, 255, 255, 0.08);
  --n-th-color: #1d222b;
  --n-th-text-color: rgba(255, 255, 255, 0.68);
  --n-td-color: #171b22;
  --n-td-color-hover: #1b212a;
  --n-td-color-modal: #151922;
  --n-td-text-color: rgba(255, 255, 255, 0.86);
  --n-merged-td-color: #171b22;
  --n-merged-td-color-hover: #1b212a;
  --n-merged-th-color: #1d222b;
  --n-loading-color: rgba(255, 255, 255, 0.42);
  --n-sorter-color: rgba(255, 255, 255, 0.32);
  --n-sorter-color-hover: rgba(255, 255, 255, 0.72);
  --n-sorter-color-pressed: #7aa2ff;
  --n-th-icon-color: rgba(255, 255, 255, 0.34);
  --n-th-icon-color-active: #7aa2ff;
}

html[data-theme='dark'] .n-data-table,
html[data-theme='dark'] .n-data-table *,
html[data-theme='dark'] .el-table,
html[data-theme='dark'] .el-table *,
html[data-theme='dark'] .ant-table,
html[data-theme='dark'] .ant-table * {
  --n-color: #171b22 !important;
  --n-border-color: rgba(255, 255, 255, 0.06) !important;
  --n-border-color-modal: rgba(255, 255, 255, 0.08) !important;
  --n-th-color: #1d222b !important;
  --n-th-color-modal: #1d222b !important;
  --n-th-text-color: rgba(255, 255, 255, 0.68) !important;
  --n-td-color: #171b22 !important;
  --n-td-color-hover: #1b212a !important;
  --n-td-color-modal: #171b22 !important;
  --n-td-color-sorting: #1a2028 !important;
  --n-td-text-color: rgba(255, 255, 255, 0.86) !important;
  --n-merged-td-color: #171b22 !important;
  --n-merged-td-color-hover: #1b212a !important;
  --n-merged-th-color: #1d222b !important;
  --n-merged-border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme='dark'] .s-table,
html[data-theme='dark'] .s-table > *,
html[data-theme='dark'] .s-table .n-card,
html[data-theme='dark'] .s-table .n-card__content,
html[data-theme='dark'] .s-table .n-card-header,
html[data-theme='dark'] .s-table .n-spin-container,
html[data-theme='dark'] .s-table .n-spin-content,
html[data-theme='dark'] .s-table .n-data-table,
html[data-theme='dark'] .s-table .n-data-table-wrapper,
html[data-theme='dark'] .s-table .n-data-table-base-table,
html[data-theme='dark'] .s-table .n-data-table-base-table-body,
html[data-theme='dark'] .s-table .n-data-table table,
html[data-theme='dark'] .s-table .n-data-table tbody,
html[data-theme='dark'] .s-table .n-data-table tr,
html[data-theme='dark'] .s-table .n-data-table td {
  background: #171b22 !important;
  background-color: #171b22 !important;
}

html[data-theme='dark'] .s-table .n-data-table thead,
html[data-theme='dark'] .s-table .n-data-table th,
html[data-theme='dark'] .s-table .n-data-table-base-table-header {
  background: #1c212b !important;
  background-color: #1c212b !important;
}

html[data-theme='dark'] .n-data-table-base-table-body,
html[data-theme='dark'] .n-data-table-base-table-body table,
html[data-theme='dark'] .n-data-table-base-table-body tbody,
html[data-theme='dark'] .n-data-table-base-table-body tr,
html[data-theme='dark'] .n-data-table-base-table-body td,
html[data-theme='dark'] .n-data-table-base-table-body td > *,
html[data-theme='dark'] .n-data-table-base-table-body td > * > *,
html[data-theme='dark'] .el-table__body-wrapper,
html[data-theme='dark'] .el-table__body,
html[data-theme='dark'] .el-table__body td,
html[data-theme='dark'] .el-table__body td > *,
html[data-theme='dark'] .ant-table-tbody,
html[data-theme='dark'] .ant-table-tbody > tr,
html[data-theme='dark'] .ant-table-tbody > tr > td,
html[data-theme='dark'] .ant-table-tbody > tr > td.ant-table-cell,
html[data-theme='dark'] .ant-table-tbody > tr > td > * {
  background: #171b22 !important;
  background-color: #171b22 !important;
  background-image: none !important;
}

html[data-theme='dark'] .n-data-table-base-table-header,
html[data-theme='dark'] .n-data-table-base-table-header table,
html[data-theme='dark'] .n-data-table-base-table-header thead,
html[data-theme='dark'] .n-data-table-base-table-header tr,
html[data-theme='dark'] .n-data-table-base-table-header th,
html[data-theme='dark'] .n-data-table-base-table-header th > *,
html[data-theme='dark'] .ant-table-thead,
html[data-theme='dark'] .ant-table-thead > tr,
html[data-theme='dark'] .ant-table-thead > tr > th,
html[data-theme='dark'] .ant-table-thead > tr > th.ant-table-cell,
html[data-theme='dark'] .el-table__header-wrapper,
html[data-theme='dark'] .el-table__header,
html[data-theme='dark'] .el-table__header th,
html[data-theme='dark'] .el-table__header th > * {
  background: #1c212b !important;
  background-color: #1c212b !important;
  background-image: none !important;
}

html[data-theme='dark'] .n-data-table-base-table-body td::before,
html[data-theme='dark'] .n-data-table-base-table-body td::after,
html[data-theme='dark'] .n-data-table-base-table-body tr::before,
html[data-theme='dark'] .n-data-table-base-table-body tr::after,
html[data-theme='dark'] .el-table td::before,
html[data-theme='dark'] .el-table td::after,
html[data-theme='dark'] .ant-table-tbody > tr > td::before,
html[data-theme='dark'] .ant-table-tbody > tr > td::after {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme='dark'] .n-data-table-th,
html[data-theme='dark'] .n-data-table-base-table-header,
html[data-theme='dark'] .el-table th.el-table__cell,
html[data-theme='dark'] .ant-table-thead > tr > th {
  background: linear-gradient(180deg, #202632 0%, #1a1f29 100%) !important;
  color: rgba(255, 255, 255, 0.68) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

html[data-theme='dark'] .n-data-table-td,
html[data-theme='dark'] .el-table td.el-table__cell,
html[data-theme='dark'] .ant-table-tbody > tr > td {
  background: #171b22 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme='dark'] .n-data-table-td .editable-cell-content,
html[data-theme='dark'] .n-data-table-td .editable-cell-content-comp,
html[data-theme='dark'] .n-data-table .n-empty,
html[data-theme='dark'] .n-data-table .n-spin-body {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

html[data-theme='dark'] .n-data-table [style*="background:#fff"],
html[data-theme='dark'] .n-data-table [style*="background: #fff"],
html[data-theme='dark'] .n-data-table [style*="background-color:#fff"],
html[data-theme='dark'] .n-data-table [style*="background-color: #fff"],
html[data-theme='dark'] .n-data-table [style*="background:#ffffff"],
html[data-theme='dark'] .n-data-table [style*="background: #ffffff"],
html[data-theme='dark'] .n-data-table [style*="background-color:#ffffff"],
html[data-theme='dark'] .n-data-table [style*="background-color: #ffffff"],
html[data-theme='dark'] .n-data-table [style*="background: rgb(255, 255, 255)"],
html[data-theme='dark'] .n-data-table [style*="background-color: rgb(255, 255, 255)"],
html[data-theme='dark'] .el-table [style*="background:#fff"],
html[data-theme='dark'] .el-table [style*="background: #fff"],
html[data-theme='dark'] .el-table [style*="background-color:#fff"],
html[data-theme='dark'] .el-table [style*="background-color: #fff"],
html[data-theme='dark'] .el-table [style*="background:#ffffff"],
html[data-theme='dark'] .el-table [style*="background: #ffffff"],
html[data-theme='dark'] .el-table [style*="background-color:#ffffff"],
html[data-theme='dark'] .el-table [style*="background-color: #ffffff"],
html[data-theme='dark'] .ant-table [style*="background:#fff"],
html[data-theme='dark'] .ant-table [style*="background: #fff"],
html[data-theme='dark'] .ant-table [style*="background-color:#fff"],
html[data-theme='dark'] .ant-table [style*="background-color: #fff"],
html[data-theme='dark'] .ant-table [style*="background:#ffffff"],
html[data-theme='dark'] .ant-table [style*="background: #ffffff"],
html[data-theme='dark'] .ant-table [style*="background-color:#ffffff"],
html[data-theme='dark'] .ant-table [style*="background-color: #ffffff"],
html[data-theme='dark'] .ant-table [style*="background: rgb(255, 255, 255)"],
html[data-theme='dark'] .ant-table [style*="background-color: rgb(255, 255, 255)"] {
  background: #171b22 !important;
  background-color: #171b22 !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

html[data-theme='dark'] .n-data-table-tr:hover .n-data-table-td,
html[data-theme='dark'] .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
html[data-theme='dark'] .ant-table-tbody > tr:hover > td {
  background: #1c222b !important;
}

html[data-theme='dark'] .n-data-table-tr.n-data-table-tr--selected .n-data-table-td,
html[data-theme='dark'] .el-table__row.current-row > td.el-table__cell,
html[data-theme='dark'] .ant-table-tbody > tr.ant-table-row-selected > td {
  background:
    linear-gradient(180deg, rgba(88, 124, 194, 0.14), rgba(88, 124, 194, 0.08)),
    #1a1f27 !important;
}

html[data-theme='dark'] .table-toolbar[data-v-68d6ad9e],
html[data-theme='dark'] .table-toolbar-left-title[data-v-68d6ad9e] {
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme='dark'] .table-toolbar-right-icon,
html[data-theme='dark'] .table-toolbar-right-icon[data-v-68d6ad9e] {
  color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme='dark'] .table-toolbar-inner-checkbox,
html[data-theme='dark'] .toolbar-popover .n-popover__content {
  background: #171b22 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme='dark'] .table-toolbar-inner-checkbox:hover,
html[data-theme='dark'] .table-toolbar-inner-checkbox-dark:hover {
  background: #1d232c !important;
}

html[data-theme='dark'] .n-pagination-item,
html[data-theme='dark'] .el-pager li,
html[data-theme='dark'] .ant-pagination-item,
html[data-theme='dark'] .ant-pagination-prev,
html[data-theme='dark'] .ant-pagination-next {
  background: #181c24 !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 1px 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html[data-theme='dark'] .n-button,
html[data-theme='dark'] .el-button,
html[data-theme='dark'] .ant-btn,
html[data-theme='dark'] .n-input,
html[data-theme='dark'] .el-input__inner,
html[data-theme='dark'] .ant-input,
html[data-theme='dark'] .ant-select-selector {
  background: #181c24 !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.03) !important;
}