/* ═══════════════════════════════════════════════════════════════════
   SSLS.VIP Theme — app.css
   保留模板必需的 custom-nav-item / DINProM 字体
   + Element UI 暗主题适配
   ═══════════════════════════════════════════════════════════════════ */

/* 模板原 app.css 兼容 */
.custom-nav-item { position: relative; }
.main-sub-menu { min-width: 300px; left: 0 !important; right: auto !important; }

@font-face {
  font-family: DINProM;
  src: url('../fonts/DINPro-Medium.eot');
  src: url('../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DINPro-Medium.woff') format('woff'),
       url('../fonts/DINPro-Medium.ttf') format('truetype'),
       url('../fonts/DINPro-Medium.svg') format('svg');
}

/* ═══════════════════════════════════════════════════════
   ELEMENT UI · 暗主题完整适配
   ═══════════════════════════════════════════════════════ */

/* el-input */
.el-input__inner,
.el-textarea__inner {
  background-color: var(--bg-deep) !important;
  border: 1px solid var(--gold-veil) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
  height: 40px;
  font-family: var(--font-body) !important;
}
.el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: var(--gold-line) !important;
}
.el-input__inner:focus,
.el-textarea__inner:focus,
.el-input.is-focus .el-input__inner {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-veil);
}
.el-input__inner::placeholder { color: var(--ink-fade); }
.el-input__icon { color: var(--ink-mute); line-height: 40px; }
.el-input__suffix { color: var(--ink-mute); }

/* el-input-number */
.el-input-number {
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
}
.el-input-number__decrease,
.el-input-number__increase {
  background: var(--bg-elev-2) !important;
  color: var(--gold-light) !important;
  border-color: var(--gold-veil) !important;
}
.el-input-number__decrease:hover,
.el-input-number__increase:hover {
  background: var(--gold-veil) !important;
  color: var(--gold) !important;
}

/* el-select */
.el-select-dropdown {
  background-color: var(--bg-elev-2) !important;
  border: 1px solid var(--gold-line) !important;
}
.el-select-dropdown__item {
  color: var(--ink-soft) !important;
}
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  background-color: var(--gold-veil) !important;
  color: var(--gold-light) !important;
}
.el-select-dropdown__item.selected {
  color: var(--gold) !important;
  background-color: var(--gold-veil) !important;
  font-weight: 600;
}
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: var(--gold) !important;
}
.el-tag {
  background-color: var(--gold-veil) !important;
  border-color: var(--gold-line) !important;
  color: var(--gold-light) !important;
}

/* el-button */
.el-button {
  background-color: transparent !important;
  border: 1px solid var(--gold-line) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.25s !important;
}
.el-button:hover, .el-button:focus {
  background-color: var(--gold-veil) !important;
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
}
.el-button--primary {
  background: linear-gradient(135deg, var(--gold-glow), var(--gold)) !important;
  border-color: var(--gold) !important;
  color: var(--bg-deep) !important;
  font-weight: 700;
}
.el-button--primary:hover, .el-button--primary:focus {
  background: linear-gradient(135deg, var(--gold-glow), var(--gold-light)) !important;
  color: var(--bg-deep) !important;
}
.el-button--success { background-color: var(--success) !important; border-color: var(--success) !important; color: var(--bg-deep) !important; }
.el-button--danger  { background-color: var(--danger) !important; border-color: var(--danger) !important; color: var(--ink) !important; }
.el-button--warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: var(--bg-deep) !important; }
.el-button--text { color: var(--gold-light) !important; border-color: transparent !important; }

/* el-table */
.el-table {
  background-color: transparent !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
}
.el-table th,
.el-table thead th.el-table__cell {
  background-color: var(--bg-deep) !important;
  color: var(--gold-light) !important;
  font-family: var(--font-cn);
  font-weight: 700;
  border-bottom: 1px solid var(--gold-line) !important;
}
.el-table tr, .el-table tr.el-table__row {
  background-color: transparent !important;
}
.el-table td, .el-table td.el-table__cell {
  border-bottom: 1px solid var(--gold-veil) !important;
  color: var(--ink-soft) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td,
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: var(--gold-veil) !important;
}
.el-table::before, .el-table::after { background-color: var(--gold-line) !important; }
.el-table__empty-text { color: var(--ink-mute) !important; }

/* el-pagination */
.el-pagination {
  color: var(--ink-soft) !important;
}
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li {
  background: var(--bg-elev-1) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--gold-veil) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
}
.el-pagination .el-pager li.active {
  background: var(--gold) !important;
  color: var(--bg-deep) !important;
  font-weight: 700;
  border-color: var(--gold) !important;
}
.el-pagination .el-pager li:hover,
.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  color: var(--gold-light) !important;
  background: var(--gold-veil) !important;
}
.el-pagination__total, .el-pagination__jump {
  color: var(--ink-mute) !important;
}
.el-pagination__editor .el-input__inner {
  background: var(--bg-deep) !important;
}

/* el-form */
.el-form-item__label { color: var(--ink-soft) !important; font-family: var(--font-cn); font-weight: 500; }
.el-form-item__error { color: var(--danger) !important; }
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-textarea__inner {
  border-color: var(--danger) !important;
}

/* el-checkbox / el-radio */
.el-checkbox__label, .el-radio__label { color: var(--ink-soft) !important; }
.el-checkbox__inner, .el-radio__inner {
  background-color: var(--bg-deep) !important;
  border-color: var(--gold-line) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
  color: var(--gold-light) !important;
}
.el-checkbox__inner::after { border-color: var(--bg-deep); }

/* el-switch */
.el-switch__core {
  background: var(--bg-elev-2) !important;
  border-color: var(--gold-veil) !important;
}
.el-switch.is-checked .el-switch__core {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* el-dialog / el-message-box */
.el-dialog, .el-message-box {
  background: linear-gradient(180deg, var(--bg-elev-1), var(--bg-elev-2)) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: var(--radius) !important;
}
.el-dialog__header, .el-message-box__header {
  background: var(--bg-deep) !important;
  border-bottom: 1px solid var(--gold-line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.el-dialog__title, .el-message-box__title {
  color: var(--gold-light) !important;
  font-family: var(--font-cn);
  font-weight: 700;
}
.el-dialog__body, .el-message-box__content {
  color: var(--ink-soft) !important;
}
.el-dialog__close { color: var(--ink-mute) !important; }
.el-dialog__close:hover { color: var(--gold-light) !important; }

/* el-message (toast) */
.el-message {
  background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-1)) !important;
  border: 1px solid var(--gold-line) !important;
}
.el-message__content { color: var(--ink) !important; }
.el-message--success { border-color: var(--success) !important; }
.el-message--warning { border-color: var(--warning) !important; }
.el-message--error { border-color: var(--danger) !important; }

/* el-loading */
.el-loading-mask { background-color: rgba(7, 2, 26, 0.7) !important; }
.el-loading-spinner .el-loading-text { color: var(--gold-light) !important; }
.el-loading-spinner .path { stroke: var(--gold) !important; }

/* el-tooltip / popover */
.el-popper, .el-tooltip__popper {
  background: var(--bg-deep) !important;
  border: 1px solid var(--gold-line) !important;
  color: var(--ink) !important;
}
.el-popper .popper__arrow, .el-tooltip__popper .popper__arrow {
  border-color: var(--gold-line) !important;
}

/* el-breadcrumb */
.el-breadcrumb__item .el-breadcrumb__inner { color: var(--ink-mute) !important; }
.el-breadcrumb__item .el-breadcrumb__inner.is-link:hover { color: var(--gold-light) !important; }
.el-breadcrumb__separator { color: var(--gold) !important; opacity: 0.5; }

/* el-tabs */
.el-tabs__item { color: var(--ink-mute) !important; }
.el-tabs__item:hover { color: var(--gold-light) !important; }
.el-tabs__item.is-active { color: var(--gold-light) !important; font-weight: 600; }
.el-tabs__active-bar { background-color: var(--gold) !important; }
.el-tabs__nav-wrap::after { background-color: var(--gold-veil) !important; }

/* el-card */
.el-card {
  background-color: transparent !important;
  border: 1px solid var(--gold-veil) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
}
.el-card__header { border-bottom: 1px solid var(--gold-veil) !important; color: var(--gold-light); }