/* ============================================================================
   控制台皮肤 v1 · 星控（紧凑 / 直观 / 轻科技）
   ----------------------------------------------------------------------------
   为什么这么写：
     · 面板是 Naive UI，样式由 JS 在运行时注入(assets/*.css 里没有 .n-* 规则)，
       注入时机在我们这份文件之后 → 同级选择器会被它压过去。
       所以这里统一用 `html body .n-xxx` 提高一级特异性，无论注入顺序都生效。
     · 只覆盖外观(颜色/圆角/间距/边框/阴影)，不改任何结构、类名与交互。
   ========================================================================== */

/* ---------- 全局主题变量(两级前缀，稳压运行时注入) ---------- */
html:root {
    --n-primary-color: #00c48c;
    --n-primary-color-hover: #12d79b;
    --n-primary-color-pressed: #00a878;
    --n-primary-color-suppl: rgba(0, 196, 140, 0.16);
    --n-text-color: rgba(232, 245, 240, 0.92);
    --n-text-color-2: rgba(200, 226, 216, 0.68);
    --n-text-color-3: rgba(170, 205, 193, 0.45);
    --n-border-color: rgba(255, 255, 255, 0.08);
    --n-border-radius: 8px;
    --n-font-size: 13px;
    --n-inherit-font-size: 13px;
}

/* ---------- 整体框架 ---------- */
html body .n-layout,
html body .n-layout-content,
html body .n-layout-main {
    background: #06080b !important;
}
html body .n-layout-sider {
    background: #090c11 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* 侧边栏顶部品牌区 */
html body .n-layout-sider-scroll-container > div:first-child {
    color: #fff !important;
    letter-spacing: 3px !important;
    font-weight: 700 !important;
}

/* ---------- 品牌图兜底：个别位置若硬编码了旧 logo png，这里也换成星控 ---------- */
html body img[src*="logo-0L4EE4Xh"] {
    content: url("/assets/xingkong-logo.svg") !important;
    object-fit: contain !important;
}

/* ---------- 侧边栏菜单 ---------- */
html body .n-menu {
    --n-item-text-color: rgba(214, 236, 228, 0.62);
    --n-item-text-color-hover: #eafff8;
    --n-item-text-color-active: #00e3a3;
    --n-item-text-color-child-active: #00e3a3;
    --n-item-icon-color: rgba(214, 236, 228, 0.55);
    --n-item-icon-color-hover: #eafff8;
    --n-item-icon-color-active: #00e3a3;
    --n-item-icon-color-child-active: #00e3a3;
    --n-item-color-hover: rgba(255, 255, 255, 0.05);
    --n-item-color-active: rgba(0, 196, 140, 0.13);
    --n-item-color-active-hover: rgba(0, 196, 140, 0.19);
    --n-item-border-radius: 8px;
    --n-item-height: 38px;
    --n-arrow-color: rgba(214, 236, 228, 0.5);
    --n-arrow-color-hover: #eafff8;
    --n-arrow-color-active: #00e3a3;
    --n-group-text-color: rgba(150, 190, 178, 0.45);
}
html body .n-menu-item-content {
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}
html body .n-menu-item-content::after { display: none !important; }   /* 去掉默认右侧竖条 */
/* 选中项：左侧霓虹条 + 轻微发光(就是那点"炫"的地方) */
html body .n-menu-item-content.n-menu-item-content--selected {
    position: relative !important;
    box-shadow: inset 0 0 0 1px rgba(0, 196, 140, 0.28),
                0 0 18px -6px rgba(0, 196, 140, 0.55) !important;
}
html body .n-menu-item-content.n-menu-item-content--selected::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 2px !important;
    border-radius: 0 2px 2px 0 !important;
    background: linear-gradient(180deg, #00e3a3, #22d3ee) !important;
    box-shadow: 0 0 10px rgba(0, 227, 163, 0.8) !important;
}

/* ---------- 顶部标签页(排序/设备管理/APK构建…) ---------- */
html body .n-tabs-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html body .n-tabs {
    --n-tab-text-color: rgba(200, 226, 216, 0.55);
    --n-tab-text-color-hover: rgba(240, 255, 250, 0.9);
    --n-tab-text-color-active: #00e3a3;
    --n-tab-text-color-disabled: rgba(150, 190, 178, 0.28);
    --n-tab-border-color: rgba(255, 255, 255, 0.07);
    --n-tab-bar-color: #00e3a3;
    --n-tab-font-size: 13px;
    --n-tab-padding: 10px 2px;
}
html body .n-tabs-tab {
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    padding: 9px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}
html body .n-tabs-tab:hover { background: rgba(255, 255, 255, 0.04) !important; }
html body .n-tabs-tab.n-tabs-tab--active { font-weight: 600 !important; }
html body .n-tab-pane { padding-top: 14px !important; }
html body .n-tag {
    border: none !important;
    box-shadow: none !important;
    --n-color: rgba(255, 255, 255, 0.05) !important;
}

/* ---------- 卡片 / 面板(筛选区、表格容器) ---------- */
html body .n-card {
    --n-color: #0b0e13;
    --n-color-embedded: #0b0e13;
    --n-border-color: rgba(255, 255, 255, 0.07);
    --n-border-radius: 10px;
    --n-title-text-color: rgba(235, 250, 245, 0.92);
    --n-title-font-weight: 600;
    --n-padding-top: 14px;
    --n-padding-bottom: 14px;
    --n-padding-left: 16px;
    --n-padding-right: 16px;
    box-shadow: none !important;
}
html body .n-card > .n-card-header { padding: 12px 16px !important; }
html body .n-card-header__main { font-size: 14px !important; letter-spacing: 0.3px !important; }

/* ---------- 表单 / 输入 / 下拉 / 日期 ---------- */
html body .n-form-item .n-form-item-label {
    font-size: 12px !important;
    color: rgba(200, 226, 216, 0.6) !important;
}
html body .n-input,
html body .n-base-selection,
html body .n-date-picker {
    --n-color: rgba(255, 255, 255, 0.03) !important;
    --n-color-focus: rgba(255, 255, 255, 0.05) !important;
    --n-text-color: rgba(235, 250, 245, 0.92) !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.08) !important;
    --n-border-hover: 1px solid rgba(0, 196, 140, 0.5) !important;
    --n-border-focus: 1px solid rgba(0, 196, 140, 0.9) !important;
    --n-border-radius: 8px !important;
    --n-placeholder-color: rgba(150, 190, 178, 0.35) !important;
    --n-height: 34px !important;
    font-size: 13px !important;
}
html body .n-input.n-input--focus,
html body .n-base-selection.n-base-selection--focus {
    box-shadow: 0 0 0 3px rgba(0, 196, 140, 0.12) !important;
}

/* ---------- 按钮 ---------- */
html body .n-button {
    --n-height: 34px;
    --n-border-radius: 8px;
    --n-font-size: 13px;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}
html body .n-button--primary-type:not(.n-button--text-type):not(.n-button--ghost) {
    --n-color: #00c48c;
    --n-color-hover: #12d79b;
    --n-color-pressed: #00a878;
    --n-color-focus: #12d79b;
    --n-text-color: #04120c;
    --n-text-color-hover: #04120c;
    --n-text-color-pressed: #04120c;
    --n-border: none;
    box-shadow: 0 4px 16px -6px rgba(0, 196, 140, 0.7) !important;
}
html body .n-button--primary-type.n-button--ghost,
html body .n-button--default-type {
    --n-color: rgba(255, 255, 255, 0.03);
    --n-color-hover: rgba(0, 196, 140, 0.10);
    --n-color-pressed: rgba(0, 196, 140, 0.16);
    --n-text-color: rgba(228, 245, 239, 0.86);
    --n-text-color-hover: #00e3a3;
    --n-border: 1px solid rgba(255, 255, 255, 0.10);
    --n-border-hover: 1px solid rgba(0, 196, 140, 0.55);
}

/* ---------- 表格 ---------- */
html body .n-data-table {
    --n-th-text-color: rgba(200, 226, 216, 0.65);
    --n-td-text-color: rgba(232, 245, 240, 0.88);
    --n-border-color: rgba(255, 255, 255, 0.06);
    --n-td-color-hover: rgba(0, 196, 140, 0.06);
    --n-th-font-weight: 600;
    /* ⚠ 这里不要覆盖 --n-td-color / --n-merged-td-color / --n-th-padding / --n-td-padding：
       前两个会让工具栏的「表格斑马纹」失效，后两个会让「密度(宽松/默认/紧凑)」失效 */
}
html body .n-data-table-th {
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
    padding: var(--n-th-padding) 12px !important;   /* 纵向跟随面板密度，横向用我的间距 */
    /* 不要加 white-space:nowrap / overflow:hidden：
       设备表是 16 列宽表，硬裁切会把最右侧「操作 / 分配设备」按钮切掉 */
}
html body .n-data-table-td {
    padding: var(--n-td-padding) 12px !important;   /* 纵向跟随面板密度 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
}
html body .n-data-table-tr:hover .n-data-table-td {
    background: rgba(0, 196, 140, 0.06) !important;
}
html body .n-data-table-empty { color: rgba(150, 190, 178, 0.4) !important; }

/* ---------- 分页 ---------- */
html body .n-pagination {
    --n-item-text-color: rgba(215, 238, 230, 0.7);
    --n-item-text-color-active: #04120c;
    --n-item-text-color-disabled: rgba(150, 190, 178, 0.25);
    --n-item-color-active: #00c48c;
    --n-item-color-active-hover: #12d79b;
    --n-item-border: 1px solid rgba(255, 255, 255, 0.08);
    --n-item-border-active: 1px solid #00c48c;
    --n-item-border-radius: 6px;
    --n-item-color-hover: rgba(0, 196, 140, 0.10);
    --n-item-text-color-hover: #00e3a3;
    font-size: 12.5px !important;
}

/* ---------- 弹层 / 抽屉 / 下拉面板 ---------- */
html body .n-modal,
html body .n-drawer,
html body .n-popover,
html body .n-dropdown-menu,
html body .n-base-select-menu,
html body .n-date-panel {
    --n-color: #0b0e13 !important;
    --n-border-color: rgba(255, 255, 255, 0.08) !important;
    --n-border-radius: 10px !important;
    --n-text-color: rgba(232, 245, 240, 0.9) !important;
    --n-option-text-color: rgba(215, 238, 230, 0.8) !important;
    --n-option-text-color-active: #00e3a3 !important;
    --n-option-color-active: rgba(0, 196, 140, 0.13) !important;
    --n-option-color-pending: rgba(0, 196, 140, 0.10) !important;
}
html body .n-drawer-header__main,
html body .n-modal-header__main { font-size: 15px !important; font-weight: 600 !important; }

/* ---------- 滚动条(细、暗) ---------- */
html body ::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
html body ::-webkit-scrollbar-track { background: transparent !important; }
html body ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
}
html body ::-webkit-scrollbar-thumb:hover { background: rgba(0, 196, 140, 0.35) !important; }

/* ---------- 内容区顶部一点极淡光晕 ----------------------------------------
   用 background-image 实现：不用伪元素、不用 position:relative，
   所以对面板的布局与定位零影响（本轮把最后一处布局属性也清掉了）。
   背景不随内容滚动，始终贴在内容区顶部。
   ---------------------------------------------------------------------- */
html body .n-layout-content {
    background-image: radial-gradient(60% 100% at 50% 0%, rgba(0, 196, 140, 0.055), transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 180px !important;
    background-position: top center !important;
}